"use client";

import * as React from "react";
import { IconCrossfadeSwitch, type IconCrossfadeIconStyle } from "./index";

export interface DemoProps {
  label?: string;
  on?: boolean;
  iconStyle?: IconCrossfadeIconStyle;
  accent?: string;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ label = "Dark mode", on = false, iconStyle = "sun-moon", accent = "#7C5CFF" }: DemoProps) {
  const [checked, setChecked] = React.useState(on);
  const [prevOn, setPrevOn] = React.useState(on);

  if (on !== prevOn) {
    setPrevOn(on);
    setChecked(on);
  }

  return (
    <div className="flex items-center justify-center gap-3 p-8">
      <span className="text-sm font-medium text-current/80">{label}</span>
      <IconCrossfadeSwitch on={checked} onChange={setChecked} iconStyle={iconStyle} accent={accent} label={label} />
    </div>
  );
}

1d:T1041, 1e:Te143,

<script setup lang="ts">
import { computed, ref, watch } from "vue";

const props = withDefaults(
  defineProps<{
    label?: string;
    on?: boolean;
    iconStyle?: "sun-moon" | "check-cross" | "dot-ring";
    accent?: string;
  }>(),
  { label: "Toggle", on: false, iconStyle: "sun-moon", accent: "#7C5CFF" },
);

const emit = defineEmits<{ (e: "update:on", value: boolean): void }>();

const checked = ref(props.on);
watch(
  () => props.on,
  (value) => {
    checked.value = value;
  },
);

function toggle() {
  checked.value = !checked.value;
  emit("update:on", checked.value);
}
</script>

<template>
  <button
    type="button"
    role="switch"
    :aria-checked="checked"
    :aria-label="label"
    class="icx-switch"
    :class="{ 'icx-switch--on': checked }"
    :style="{ '--icx-accent': accent }"
    @click="toggle"
  >
    <span class="icx-thumb">
      <span class="icx-icon" :class="{ 'icx-icon--hidden': checked }" aria-hidden="true">
        <svg v-if="iconStyle === 'sun-moon'" viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
          <circle cx="12" cy="12" r="4.4" />
          <path d="M12 2.8v2.6M12 18.6v2.6M4.8 4.8l1.9 1.9M17.3 17.3l1.9 1.9M2.8 12h2.6M18.6 12h2.6M4.8 19.2l1.9-1.9M17.3 6.7l1.9-1.9" />
        </svg>
        <svg v-else-if="iconStyle === 'check-cross'" viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round">
          <path d="M6 6l12 12M18 6 6 18" />
        </svg>
        <svg v-else viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="12" cy="12" r="6" />
        </svg>
      </span>
      <span class="icx-icon" :class="{ 'icx-icon--hidden': !checked }" aria-hidden="true">
        <svg v-if="iconStyle === 'sun-moon'" viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M19.4 14.1A7.7 7.7 0 1 1 9.9 4.6a6 6 0 0 0 9.5 9.5Z" />
        </svg>
        <svg v-else-if="iconStyle === 'check-cross'" viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">
          <path d="M4.5 12.5 9.5 17.5 19.5 6.5" />
        </svg>
        <svg v-else viewBox="0 0 24 24" width="13" height="13">
          <circle cx="12" cy="12" r="5.4" fill="currentColor" />
        </svg>
      </span>
    </span>
  </button>
</template>

<style scoped>
.icx-switch {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  width: 52px;
  height: 28px;
  box-sizing: border-box;
  border-radius: 9999px;
  border: 1px solid rgb(255 255 255 / 0.2);
  background: rgb(255 255 255 / 0.08);
  cursor: pointer;
  outline: none;
  padding: 0;
  transition: background-color 320ms cubic-bezier(0.4, 0, 0.2, 1), border-color 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.icx-switch:focus-visible {
  box-shadow: 0 0 0 2px #0b0d10, 0 0 0 4px var(--icx-accent);
}
.icx-switch--on {
  background: var(--icx-accent);
  border-color: var(--icx-accent);
}
.icx-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  background: #f5f6f8;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
  transform: translateX(0) scale(1);
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.icx-switch--on .icx-thumb {
  transform: translateX(24px) scale(1);
}
.icx-switch:hover .icx-thumb {
  transform: translateX(0) scale(1.06);
}
.icx-switch--on:hover .icx-thumb {
  transform: translateX(24px) scale(1.06);
}
.icx-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(11 13 16 / 0.65);
  opacity: 1;
  transform: scale(1);
  transition: opacity 240ms cubic-bezier(0.4, 0, 0.2, 1), transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.icx-icon--hidden {
  opacity: 0;
  transform: scale(0.4);
}
@media (prefers-reduced-motion: reduce) {
  .icx-thumb,
  .icx-icon {
    transition-duration: 1ms;
  }
}
</style>

Nearby