{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "switch",
  "type": "registry:block",
  "title": "Switch",
  "description": "A smooth switch for product settings and control panels.",
  "author": "Wensity <hey@wensity.com>",
  "dependencies": [
    "@base-ui/react",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/wensity/lib/utils.ts",
      "type": "registry:lib",
      "target": "@lib/utils.ts",
      "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"
    },
    {
      "path": "registry/wensity/switch.tsx",
      "type": "registry:component",
      "target": "@components/wensity/switch.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Switch as BaseSwitch } from \"@base-ui/react/switch\";\nimport { cn } from \"@/lib/utils\";\n\nconst wensityCardSurfaceClass = cn(\n  \"relative isolate overflow-hidden rounded-[var(--primitive-radius-surface)]\",\n  \"border border-[var(--border)] bg-[var(--primitive-surface-elevated)]\",\n  \"[box-shadow:var(--primitive-shadow-raised)]\",\n);\n\n/**\n * CSS rules for Switch animation slots. Re-keyed to Base UI `data-checked` /\n * `data-unchecked` attributes so they light up automatically from `BaseSwitch.Root`.\n *\n * These rules ship in the Wensity token CSS block the CLI writes into your\n * stylesheet, so this file injects no runtime `<style>` tag.\n */\n\nexport type SwitchSize = \"sm\" | \"md\" | \"lg\";\nexport type SwitchVariant = \"minimal\" | \"elevated\" | \"segmented\" | \"power\";\n\nexport type SwitchChangeHandler = (\n  checked: boolean,\n  eventDetails?: unknown,\n) => void;\n\nexport interface SwitchProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof BaseSwitch.Root>,\n    \"className\" | \"onCheckedChange\" | \"render\"\n  > {\n  onCheckedChange?: SwitchChangeHandler;\n  label?: React.ReactNode;\n  description?: React.ReactNode;\n  error?: React.ReactNode;\n  switchSize?: SwitchSize;\n  variant?: SwitchVariant;\n  labelPosition?: \"left\" | \"right\";\n  fullWidth?: boolean;\n  className?: string;\n  containerClassName?: string;\n  controlClassName?: string;\n  labelClassName?: string;\n  descriptionClassName?: string;\n}\n\nexport interface SwitchGroupProps\n  extends React.HTMLAttributes<HTMLFieldSetElement> {\n  label?: React.ReactNode;\n  description?: React.ReactNode;\n  error?: React.ReactNode;\n  children: React.ReactNode;\n  divided?: boolean;\n}\n\nexport interface SwitchCardProps extends SwitchProps {\n  leading?: React.ReactNode;\n  /** Static status label when trailingOn/trailingOff are not set. */\n  trailing?: React.ReactNode;\n  /** Status label when the switch is on. */\n  trailingOn?: React.ReactNode;\n  /** Status label when the switch is off. */\n  trailingOff?: React.ReactNode;\n}\n\nexport interface SwitchSettingsGroupProps {\n  title: string;\n  description?: React.ReactNode;\n  children: React.ReactNode;\n  className?: string;\n}\n\nconst trackSizes: Record<SwitchSize, string> = {\n  sm: \"h-5 w-9\",\n  md: \"h-6 w-11\",\n  lg: \"h-7 w-[3.25rem]\",\n};\n\nconst knobSizes: Record<SwitchSize, string> = {\n  sm: \"size-4\",\n  md: \"size-5\",\n  lg: \"size-6\",\n};\n\nconst segmentedSizes: Record<SwitchSize, string> = {\n  sm: \"h-7 w-[4.5rem] text-[10px]\",\n  md: \"h-8 w-[5.25rem] text-[11px]\",\n  lg: \"h-9 w-24 text-xs\",\n};\n\nconst iconSizes: Record<SwitchSize, string> = {\n  sm: \"size-7\",\n  md: \"size-8\",\n  lg: \"size-9\",\n};\n\nconst labelSizes: Record<SwitchSize, string> = {\n  sm: \"text-[13px]\",\n  md: \"text-sm\",\n  lg: \"text-[15px]\",\n};\n\nconst rowGap: Record<SwitchSize, string> = {\n  sm: \"gap-3\",\n  md: \"gap-3.5\",\n  lg: \"gap-4\",\n};\n\nconst controlOffset: Record<SwitchSize, string> = {\n  sm: \"mt-px\",\n  md: \"mt-0.5\",\n  lg: \"mt-0.5\",\n};\n\n/**\n * Focus ring applied via Base UI's `data-focused` / native `:focus-visible` on the\n * button-role span. Uses primitive ring token.\n */\nconst focusRing = cn(\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--primitive-ring)]\",\n  \"focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--background)]\",\n);\n\n/**\n * ≥44px touch target for small pill variant. Positioned as a pseudo overlay so it\n * expands the click surface without shifting layout (PRIM-A11Y-004).\n */\nconst smTouchTarget =\n  \"before:absolute before:inset-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:h-11 before:w-11 before:content-['']\";\n\n/** Recessed rail — visible against page bg in both themes. */\nconst trackOff = cn(\n  \"border border-transparent\",\n  \"bg-[color-mix(in_srgb,var(--foreground)_8%,var(--background))]\",\n  \"dark:bg-[color-mix(in_srgb,var(--foreground)_14%,var(--background))]\",\n  \"data-hover:bg-[color-mix(in_srgb,var(--foreground)_12%,var(--background))]\",\n  \"dark:data-hover:bg-[color-mix(in_srgb,var(--foreground)_18%,var(--background))]\",\n);\n\n/** Active pill rail — solid foreground fill styled via `--primitive-control-solid` fallback. */\nconst trackOnPill = cn(\n  \"border border-[color-mix(in_srgb,var(--foreground)_10%,transparent)]\",\n  \"bg-[var(--primitive-control-solid)]\",\n  \"dark:border-[color-mix(in_srgb,var(--foreground)_24%,transparent)]\",\n);\n\n/** Active power rail — full foreground fill; icon provides contrast. */\nconst trackOnPower = cn(\n  \"border border-[color-mix(in_srgb,var(--foreground)_10%,transparent)]\",\n  \"bg-[var(--primitive-control-solid)]\",\n);\n\nconst trackOnError = cn(\n  \"border border-[var(--primitive-destructive-border)]\",\n  \"bg-[var(--primitive-destructive)]\",\n);\n\n/** Thumb stays on the solid-foreground token so it reads against the solid rail. */\nconst knobBase = cn(\n  \"pointer-events-none rounded-full bg-[var(--primitive-control-solid-foreground)] transform-gpu\",\n  \"shadow-[0_1px_1px_rgba(0,0,0,0.14),0_0_0_1px_rgba(0,0,0,0.05)]\",\n  \"dark:shadow-[0_1px_2px_rgba(0,0,0,0.34),0_0_0_1px_rgba(255,255,255,0.08)]\",\n);\n\nconst knobElevated = cn(\n  \"shadow-[0_1px_2px_rgba(0,0,0,0.16),0_0_0_1px_rgba(0,0,0,0.05)]\",\n  \"dark:shadow-[0_1px_2px_rgba(0,0,0,0.38),0_0_0_1px_rgba(255,255,255,0.10)]\",\n);\n\n/** Segmented / power shell (off). */\nconst shellOff = cn(\n  \"border border-[var(--border-strong)]\",\n  \"bg-[color-mix(in_srgb,var(--foreground)_6%,var(--background))]\",\n  \"dark:bg-[color-mix(in_srgb,var(--foreground)_10%,var(--background))]\",\n);\n\n/** Segmented shell when on (non-error). */\nconst shellOn = cn(\n  \"border border-[color-mix(in_srgb,var(--foreground)_12%,transparent)]\",\n  \"bg-[color-mix(in_srgb,var(--foreground)_9%,var(--background))]\",\n  \"dark:border-[color-mix(in_srgb,var(--foreground)_14%,transparent)] dark:bg-[color-mix(in_srgb,var(--foreground)_16%,var(--background))]\",\n);\n\nfunction knobClasses(elevatedKnob: boolean) {\n  return cn(knobBase, elevatedKnob && knobElevated);\n}\n\nfunction resolvePillTrack(\n  checked: boolean,\n  error?: React.ReactNode,\n  mode: \"pill\" | \"power\" = \"pill\",\n) {\n  if (error && checked) return trackOnError;\n  if (checked) return mode === \"power\" ? trackOnPower : trackOnPill;\n  return trackOff;\n}\n\nfunction resolveSegmentedShell(checked: boolean, error?: React.ReactNode) {\n  if (error && checked) {\n    return cn(\n      \"border border-[var(--primitive-destructive-border)]\",\n      \"bg-[var(--primitive-destructive-surface)]\",\n    );\n  }\n  if (checked) return shellOn;\n  return shellOff;\n}\n\nfunction SwitchCheckIcon({\n  className,\n  slot,\n}: {\n  className?: string;\n  slot?: string;\n}) {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      data-slot={slot}\n      className={cn(\"size-3.5\", className)}\n    >\n      <path\n        d=\"M3.5 8.2 6.4 11.1 12.6 4.9\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.85\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        pathLength={1}\n      />\n    </svg>\n  );\n}\n\nfunction SwitchPowerIcon({\n  checked,\n  error,\n}: {\n  checked: boolean;\n  error?: React.ReactNode;\n}) {\n  return (\n    <span className=\"relative size-3.5\">\n      <span\n        data-slot=\"switch-power-icon\"\n        data-active={!checked}\n        aria-hidden=\"true\"\n      >\n        <svg\n          viewBox=\"0 0 16 16\"\n          fill=\"none\"\n          className=\"size-3.5 text-[var(--muted-foreground)]\"\n        >\n          <path\n            d=\"M8 3.25v3.5\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.65\"\n            strokeLinecap=\"round\"\n          />\n          <path\n            d=\"M5.35 5.35a3.65 3.65 0 1 0 5.3 0\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.65\"\n            strokeLinecap=\"round\"\n          />\n        </svg>\n      </span>\n      <span\n        data-slot=\"switch-power-icon\"\n        data-active={checked}\n        aria-hidden=\"true\"\n      >\n        <SwitchCheckIcon\n          slot=\"switch-power-check\"\n          className={\n            error\n              ? \"text-[var(--primitive-destructive-foreground)]\"\n              : \"text-[var(--primitive-control-solid-foreground)]\"\n          }\n        />\n      </span>\n    </span>\n  );\n}\n\nconst segmentActiveText = \"text-[var(--foreground)]\";\nconst segmentInactiveText = \"text-[var(--muted-foreground)]\";\n\ntype SwitchControlRenderProps = {\n  checked: boolean;\n  disabled?: boolean;\n  error?: React.ReactNode;\n  switchSize: SwitchSize;\n  variant: SwitchVariant;\n  className?: string;\n};\n\n/** Builds the class string + children for the BaseSwitch.Root visual. */\nfunction buildSwitchControl({\n  checked,\n  disabled,\n  error,\n  switchSize,\n  variant,\n  className,\n}: SwitchControlRenderProps) {\n  if (variant === \"segmented\") {\n    return {\n      className: cn(\n        \"relative grid shrink-0 grid-cols-2 items-center overflow-hidden rounded-full p-0.5\",\n        resolveSegmentedShell(checked, error),\n        focusRing,\n        disabled && \"opacity-45\",\n        segmentedSizes[switchSize],\n        className,\n      ),\n      children: (\n        <>\n          <span\n            data-slot=\"switch-segment-indicator\"\n            aria-hidden=\"true\"\n            className={cn(\n              \"absolute inset-y-0.5 left-0.5 w-[calc(50%-2px)] rounded-full\",\n              checked && error\n                ? cn(\n                    \"bg-[var(--primitive-destructive)]\",\n                    \"shadow-[0_1px_1px_rgba(0,0,0,0.18)]\",\n                  )\n                : knobBase,\n            )}\n          />\n          <span\n            data-slot=\"switch-segment-label\"\n            className={cn(\n              \"relative z-[2] text-center font-medium tracking-[-0.01em]\",\n              checked ? segmentInactiveText : segmentActiveText,\n            )}\n          >\n            Off\n          </span>\n          <span\n            data-slot=\"switch-segment-label\"\n            className={cn(\n              \"relative z-[2] text-center font-medium tracking-[-0.01em]\",\n              checked\n                ? error\n                  ? \"text-[var(--primitive-destructive-foreground)]\"\n                  : segmentActiveText\n                : segmentInactiveText,\n            )}\n          >\n            On\n          </span>\n        </>\n      ),\n    };\n  }\n\n  if (variant === \"power\") {\n    return {\n      className: cn(\n        \"relative inline-flex shrink-0 items-center justify-center rounded-full\",\n        resolvePillTrack(checked, error, \"power\"),\n        focusRing,\n        iconSizes[switchSize],\n        disabled && \"opacity-45\",\n        switchSize === \"sm\" && smTouchTarget,\n        className,\n      ),\n      children: <SwitchPowerIcon checked={checked} error={error} />,\n    };\n  }\n\n  const elevatedKnob = variant === \"elevated\";\n\n  return {\n    className: cn(\n      \"relative inline-flex shrink-0 items-center rounded-full p-0.5\",\n      resolvePillTrack(checked, error),\n      focusRing,\n      trackSizes[switchSize],\n      disabled && \"opacity-45\",\n      switchSize === \"sm\" && smTouchTarget,\n      className,\n    ),\n    children: (\n      <BaseSwitch.Thumb\n        data-slot=\"switch-knob\"\n        data-size={switchSize}\n        aria-hidden=\"true\"\n        className={cn(knobClasses(elevatedKnob), knobSizes[switchSize])}\n      />\n    ),\n  };\n}\n\n/**\n * Base UI–backed Switch. Renders `BaseSwitch.Root` (a `<span role=\"switch\">` plus\n * hidden `<input>`) styled as track/knob/segmented/power. Emits Base UI's\n * `data-checked` / `data-unchecked` / `data-disabled` for CSS state hooks.\n */\nexport const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(\n  (\n    {\n      id,\n      className,\n      containerClassName,\n      controlClassName,\n      labelClassName,\n      descriptionClassName,\n      label,\n      description,\n      error,\n      switchSize = \"md\",\n      variant = \"minimal\",\n      labelPosition = \"right\",\n      fullWidth = true,\n      checked,\n      defaultChecked = false,\n      disabled,\n      onCheckedChange,\n      inputRef,\n      \"aria-describedby\": ariaDescribedBy,\n      ...props\n    },\n    ref,\n  ) => {\n    const reactId = React.useId();\n    const switchId = id ?? `ui-switch-${reactId}`;\n    const descriptionId = description ? `${switchId}-description` : undefined;\n    const errorId = error ? `${switchId}-error` : undefined;\n    const isControlled = checked !== undefined;\n    const [uncontrolledChecked, setUncontrolledChecked] =\n      React.useState(defaultChecked);\n    const isChecked = isControlled ? checked : uncontrolledChecked;\n    const describedBy =\n      [ariaDescribedBy, errorId, descriptionId].filter(Boolean).join(\" \") ||\n      undefined;\n    const hasCopy = Boolean(label || description || error);\n    const alignStart = Boolean(description || error);\n\n    const handleCheckedChange = React.useCallback(\n      (next: boolean, eventDetails: unknown) => {\n        if (!isControlled) setUncontrolledChecked(next);\n        onCheckedChange?.(next, eventDetails);\n      },\n      [isControlled, onCheckedChange],\n    );\n\n    const rendered = buildSwitchControl({\n      checked: isChecked,\n      disabled,\n      error,\n      switchSize,\n      variant,\n      className: controlClassName,\n    });\n\n    const control = (\n      <BaseSwitch.Root\n        ref={ref}\n        id={switchId}\n        checked={isChecked}\n        disabled={disabled}\n        onCheckedChange={handleCheckedChange}\n        inputRef={inputRef}\n        aria-invalid={error ? true : undefined}\n        aria-describedby={describedBy}\n        data-slot=\"switch-control\"\n        data-variant={variant}\n        className={rendered.className}\n        {...props}\n      >\n        {rendered.children}\n      </BaseSwitch.Root>\n    );\n\n    const copy = hasCopy ? (\n      <span className=\"min-w-0 flex-1\">\n        {label ? (\n          typeof label === \"string\" || typeof label === \"number\" ? (\n            <span\n              className={cn(\n                \"block font-medium leading-snug tracking-[-0.015em] text-[var(--foreground)]\",\n                labelSizes[switchSize],\n                disabled && \"text-[var(--muted-foreground)]\",\n                labelClassName,\n              )}\n            >\n              {label}\n            </span>\n          ) : (\n            label\n          )\n        ) : null}\n        {description ? (\n          <span\n            id={descriptionId}\n            className={cn(\n              \"mt-1 block text-[12px] leading-5 text-[var(--muted-foreground)]\",\n              descriptionClassName,\n            )}\n          >\n            {description}\n          </span>\n        ) : null}\n        {error ? (\n          <span\n            id={errorId}\n            className=\"mt-1 block text-[12px] leading-5 text-[var(--primitive-destructive)]\"\n          >\n            {error}\n          </span>\n        ) : null}\n      </span>\n    ) : null;\n\n    return (\n      <label data-wensity-primitive=\"\"\n        data-slot=\"switch\"\n        htmlFor={switchId}\n        className={cn(\n          \"group/switch relative flex cursor-pointer select-none\",\n          alignStart ? \"items-start\" : \"items-center\",\n          rowGap[switchSize],\n          fullWidth ? \"w-full\" : \"w-fit\",\n          disabled && \"cursor-not-allowed\",\n          labelPosition === \"left\" && \"justify-between\",\n          containerClassName,\n          className,\n        )}\n      >\n        {labelPosition === \"left\" ? (\n          <>\n            {copy}\n            <span className={cn(\"shrink-0\", alignStart && controlOffset[switchSize])}>\n              {control}\n            </span>\n          </>\n        ) : (\n          <>\n            <span className={cn(\"shrink-0\", alignStart && controlOffset[switchSize])}>\n              {control}\n            </span>\n            {copy}\n          </>\n        )}\n      </label>\n    );\n  },\n);\n\nSwitch.displayName = \"Switch\";\n\nexport function SwitchGroup({\n  label,\n  description,\n  error,\n  children,\n  divided = true,\n  className,\n  ...props\n}: SwitchGroupProps) {\n  const reactId = React.useId();\n  const descriptionId = description\n    ? `ui-switch-group-${reactId}-description`\n    : undefined;\n  const errorId = error ? `ui-switch-group-${reactId}-error` : undefined;\n\n  return (\n    <fieldset\n      aria-describedby={[descriptionId, errorId].filter(Boolean).join(\" \") || undefined}\n      className={cn(\"space-y-3\", className)}\n      {...props}\n    >\n      {label || description ? (\n        <div className=\"space-y-1\">\n          {label ? (\n            <legend className=\"text-sm font-semibold tracking-[-0.015em] text-[var(--foreground)]\">\n              {label}\n            </legend>\n          ) : null}\n          {description ? (\n            <p\n              id={descriptionId}\n              className=\"text-[12px] leading-5 text-[var(--muted-foreground)]\"\n            >\n              {description}\n            </p>\n          ) : null}\n        </div>\n      ) : null}\n      <div\n        className={cn(\n          divided && wensityCardSurfaceClass,\n          divided &&\n            \"[&>[data-slot=switch]]:border-b [&>[data-slot=switch]]:border-[var(--border)] [&>[data-slot=switch]]:px-4 [&>[data-slot=switch]]:py-3.5 [&>[data-slot=switch]:last-child]:border-b-0\",\n          !divided && \"space-y-1\",\n        )}\n      >\n        {children}\n      </div>\n      {error ? (\n        <p id={errorId} className=\"text-[12px] leading-5 text-[var(--primitive-destructive)]\">\n          {error}\n        </p>\n      ) : null}\n    </fieldset>\n  );\n}\n\nexport function SwitchSettingsGroup({\n  title,\n  description,\n  children,\n  className,\n}: SwitchSettingsGroupProps) {\n  return (\n    <section className={cn(\"flex min-h-0 min-w-0 flex-col gap-2.5\", className)}>\n      <header className=\"min-h-11 px-0.5\">\n        <h3 className=\"font-[family-name:var(--primitive-font-display)] text-[13px] font-semibold leading-5 tracking-[-0.015em] text-[var(--foreground)]\">\n          {title}\n        </h3>\n        {description ? (\n          <p className=\"mt-0.5 line-clamp-2 text-[12px] leading-5 text-[var(--muted-foreground)]\">\n            {description}\n          </p>\n        ) : (\n          <p\n            className=\"mt-0.5 text-[12px] leading-5 text-transparent\"\n            aria-hidden=\"true\"\n          >\n            &nbsp;\n          </p>\n        )}\n      </header>\n      <div\n        className={cn(\n          wensityCardSurfaceClass,\n          \"[&_[data-slot=switch]]:border-b [&_[data-slot=switch]]:border-[var(--border)]\",\n          \"[&_[data-slot=switch]:last-child]:border-b-0\",\n        )}\n      >\n        {children}\n      </div>\n    </section>\n  );\n}\n\nexport function SwitchCard({\n  leading,\n  trailing,\n  trailingOn,\n  trailingOff,\n  label,\n  description,\n  error,\n  className,\n  switchSize = \"md\",\n  variant = \"minimal\",\n  disabled,\n  checked,\n  defaultChecked = false,\n  onCheckedChange,\n  id,\n  inputRef,\n  labelPosition: _labelPosition,\n  fullWidth: _fullWidth,\n  containerClassName: _containerClassName,\n  controlClassName: _controlClassName,\n  labelClassName: _labelClassName,\n  descriptionClassName: _descriptionClassName,\n  ...props\n}: SwitchCardProps) {\n  const reactId = React.useId();\n  const switchId = id ?? `ui-switch-card-${reactId}`;\n  const descriptionId = description ? `${switchId}-description` : undefined;\n  const errorId = error ? `${switchId}-error` : undefined;\n  const isControlled = checked !== undefined;\n  const [uncontrolledChecked, setUncontrolledChecked] =\n    React.useState(defaultChecked);\n  const isChecked = isControlled ? checked : uncontrolledChecked;\n  const trailingLabel =\n    trailingOn !== undefined || trailingOff !== undefined\n      ? isChecked\n        ? trailingOn\n        : trailingOff\n      : trailing;\n  const describedBy =\n    [errorId, descriptionId].filter(Boolean).join(\" \") || undefined;\n  const hasAnimatedTrailing =\n    trailingOn !== undefined || trailingOff !== undefined;\n  const [trailingSwapping, setTrailingSwapping] = React.useState(false);\n  const prevCheckedRef = React.useRef(isChecked);\n\n  React.useEffect(() => {\n    if (!hasAnimatedTrailing) {\n      prevCheckedRef.current = isChecked;\n      return;\n    }\n    if (prevCheckedRef.current === isChecked) return;\n    prevCheckedRef.current = isChecked;\n    setTrailingSwapping(true);\n    const timeoutId = window.setTimeout(() => setTrailingSwapping(false), 220);\n    return () => window.clearTimeout(timeoutId);\n  }, [hasAnimatedTrailing, isChecked]);\n\n  const handleCheckedChange = React.useCallback(\n    (next: boolean, eventDetails: unknown) => {\n      if (!isControlled) setUncontrolledChecked(next);\n      onCheckedChange?.(next, eventDetails);\n    },\n    [isControlled, onCheckedChange],\n  );\n\n  const rendered = buildSwitchControl({\n    checked: isChecked,\n    disabled,\n    error,\n    switchSize,\n    variant,\n  });\n\n  return (\n    <label data-wensity-primitive=\"\"\n      data-slot=\"switch\"\n      htmlFor={switchId}\n      className={cn(\n        \"group/switch flex min-h-16 w-full cursor-pointer select-none items-center gap-3.5 px-4 py-3\",\n        \"transition-[background-color] duration-200 ease-[var(--primitive-ease,cubic-bezier(0.16,1,0.3,1))] motion-reduce:transition-none\",\n        !disabled && \"hover:bg-[var(--primitive-surface-hover)]\",\n        \"has-[[data-checked]]:bg-[var(--primitive-surface-selected)]\",\n        disabled && \"cursor-not-allowed opacity-45 hover:bg-transparent\",\n        className,\n      )}\n    >\n      {leading ? (\n        <span\n          className={cn(\n            \"switch-card-icon grid size-9 shrink-0 place-items-center rounded-[var(--primitive-radius-control-sm)]\",\n            \"border border-[var(--border)]\",\n            \"bg-[color-mix(in_srgb,var(--foreground)_4%,var(--background))]\",\n            \"text-[var(--muted-foreground)]\",\n            \"transition-[border-color,background-color,color] duration-[220ms] ease-[var(--primitive-ease,cubic-bezier(0.16,1,0.3,1))] motion-reduce:transition-none\",\n            \"[&_svg]:size-[17px]\",\n            \"group-has-[[data-checked]]/switch:border-[color-mix(in_srgb,var(--foreground)_12%,transparent)]\",\n            \"group-has-[[data-checked]]/switch:bg-[color-mix(in_srgb,var(--foreground)_7%,var(--background))]\",\n            \"group-has-[[data-checked]]/switch:text-[var(--foreground)]\",\n            disabled && \"opacity-80\",\n          )}\n        >\n          {leading}\n        </span>\n      ) : null}\n\n      <span className=\"min-w-0 flex-1\">\n        {label ? (\n          <span\n            className={cn(\n              \"block font-medium leading-snug tracking-[-0.015em] text-[var(--foreground)]\",\n              labelSizes[switchSize],\n              disabled && \"text-[var(--muted-foreground)]\",\n            )}\n          >\n            {label}\n          </span>\n        ) : null}\n        {description ? (\n          <span\n            id={descriptionId}\n            className=\"mt-0.5 line-clamp-2 block text-[12px] leading-[1.45] text-[var(--muted-foreground)]\"\n          >\n            {description}\n          </span>\n        ) : null}\n        {error ? (\n          <span\n            id={errorId}\n            className=\"mt-1 block text-[12px] leading-5 text-[var(--primitive-destructive)]\"\n          >\n            {error}\n          </span>\n        ) : null}\n      </span>\n\n      <span className=\"flex shrink-0 items-center gap-2.5 pl-1\">\n        {trailingLabel ? (\n          <span\n            aria-live=\"polite\"\n            data-slot=\"switch-card-trailing\"\n            data-swapping={trailingSwapping ? \"true\" : undefined}\n            className={cn(\n              \"inline-flex min-w-[3.25rem] items-center justify-center rounded-[var(--primitive-radius-control-sm)] border border-[var(--border)]\",\n              \"bg-[color-mix(in_srgb,var(--foreground)_3%,var(--background))] px-1.5 py-0.5\",\n              \"text-[10px] font-medium tracking-[0.01em] text-[var(--muted-foreground)]\",\n              \"group-has-[[data-checked]]/switch:border-[color-mix(in_srgb,var(--foreground)_10%,transparent)]\",\n              \"group-has-[[data-checked]]/switch:text-[var(--foreground)]\",\n            )}\n          >\n            {trailingLabel}\n          </span>\n        ) : null}\n        <BaseSwitch.Root\n          id={switchId}\n          checked={isChecked}\n          disabled={disabled}\n          onCheckedChange={handleCheckedChange}\n          inputRef={inputRef}\n          aria-invalid={error ? true : undefined}\n          aria-describedby={describedBy}\n          data-slot=\"switch-control\"\n          data-variant={variant}\n          className={rendered.className}\n          {...props}\n        >\n          {rendered.children}\n        </BaseSwitch.Root>\n      </span>\n    </label>\n  );\n}\n"
    }
  ],
  "cssVars": {
    "theme": {
      "font-sans": "var(--font-satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif)",
      "font-display": "var(--font-satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif)",
      "font-heading": "var(--font-cabinet, ui-sans-serif, system-ui, sans-serif)",
      "color-background": "var(--background)",
      "color-foreground": "var(--foreground)",
      "color-surface": "var(--surface)",
      "color-surface-muted": "var(--surface-muted)",
      "color-border": "var(--border)",
      "color-border-strong": "var(--border-strong)",
      "color-muted": "var(--muted)",
      "color-muted-foreground": "var(--muted-foreground)",
      "color-ring": "var(--ring)",
      "color-chili-50": "#fff1ee",
      "color-chili-100": "#ffe2db",
      "color-chili-200": "#ffa896",
      "color-chili-300": "#ff8a73",
      "color-chili-400": "#f15a45",
      "color-chili-500": "#cd1c18",
      "color-chili-600": "#b31614",
      "color-chili-700": "#9b1313",
      "color-chili-800": "#6a0d0e",
      "color-chili-900": "#38000a",
      "color-chili-950": "#1f0006",
      "color-primitive-surface-elevated": "var(--primitive-surface-elevated)",
      "color-primitive-surface-overlay": "var(--primitive-surface-overlay)",
      "color-primitive-surface-hover": "var(--primitive-surface-hover)",
      "color-primitive-surface-active": "var(--primitive-surface-active)",
      "color-primitive-surface-selected": "var(--primitive-surface-selected)",
      "color-primitive-border-subtle": "var(--primitive-border-subtle)",
      "color-primitive-ring": "var(--primitive-ring)",
      "color-primitive-text-secondary": "var(--primitive-text-secondary)",
      "color-primitive-text-placeholder": "var(--primitive-text-placeholder)",
      "color-primitive-text-inverse": "var(--primitive-text-inverse)",
      "color-primitive-destructive": "var(--primitive-destructive)",
      "color-primitive-destructive-hover": "var(--primitive-destructive-hover)",
      "color-primitive-destructive-active": "var(--primitive-destructive-active)",
      "color-primitive-destructive-foreground": "var(--primitive-destructive-foreground)",
      "color-primitive-destructive-surface": "var(--primitive-destructive-surface)",
      "color-primitive-destructive-border": "var(--primitive-destructive-border)",
      "color-primitive-success": "var(--primitive-success)",
      "color-primitive-warning": "var(--primitive-warning)",
      "color-primitive-info": "var(--primitive-info)",
      "color-primitive-control-solid": "var(--primitive-control-solid)",
      "color-primitive-control-solid-hover": "var(--primitive-control-solid-hover)",
      "color-primitive-control-solid-active": "var(--primitive-control-solid-active)",
      "color-primitive-control-solid-foreground": "var(--primitive-control-solid-foreground)",
      "color-primitive-chart-1": "var(--primitive-chart-1)",
      "color-primitive-chart-2": "var(--primitive-chart-2)",
      "color-primitive-chart-3": "var(--primitive-chart-3)",
      "color-primitive-chart-4": "var(--primitive-chart-4)",
      "color-primitive-chart-5": "var(--primitive-chart-5)",
      "color-primitive-chart-6": "var(--primitive-chart-6)",
      "radius-primitive": "var(--primitive-radius)",
      "radius-primitive-control": "var(--primitive-radius-control)",
      "radius-primitive-control-sm": "var(--primitive-radius-control-sm)",
      "radius-primitive-surface": "var(--primitive-radius-surface)",
      "radius-primitive-item": "var(--primitive-radius-item)",
      "font-primitive-sans": "var(--primitive-font-sans)",
      "font-primitive-display": "var(--primitive-font-display)",
      "font-primitive-mono": "var(--primitive-font-mono)",
      "spacing-primitive-control-height-sm": "var(--primitive-control-height-sm)",
      "spacing-primitive-control-height-md": "var(--primitive-control-height-md)",
      "spacing-primitive-control-height-lg": "var(--primitive-control-height-lg)"
    },
    "light": {
      "background": "#fafafa",
      "foreground": "#0a0a0a",
      "surface": "#ffffff",
      "surface-muted": "#f4f4f5",
      "border": "rgba(10, 10, 10, 0.08)",
      "border-strong": "rgba(10, 10, 10, 0.16)",
      "muted": "#f4f4f5",
      "muted-foreground": "#52525b",
      "ring": "#cd1c18",
      "pattern-fg": "rgba(10, 10, 10, 0.07)",
      "llb-primary": "#18181b",
      "llb-primary-fg": "#ffffff",
      "llb-success": "#1f883d",
      "llb-error": "#cf222e",
      "primitive-surface-elevated": "#ffffff",
      "primitive-surface-overlay": "#ffffff",
      "primitive-surface-hover": "color-mix(in srgb, var(--foreground) 4%, transparent)",
      "primitive-surface-active": "color-mix(in srgb, var(--foreground) 7%, transparent)",
      "primitive-surface-selected": "color-mix(in srgb, var(--foreground) 6%, transparent)",
      "primitive-border-subtle": "color-mix(in srgb, var(--border) 60%, transparent)",
      "primitive-ring": "color-mix(in srgb, var(--foreground) 45%, transparent)",
      "primitive-text-secondary": "color-mix(in srgb, var(--foreground) 72%, transparent)",
      "primitive-text-placeholder": "color-mix(in srgb, var(--muted-foreground) 85%, transparent)",
      "primitive-radius": "0.875rem",
      "primitive-font-sans": "var(--font-sans)",
      "primitive-font-display": "var(--font-display)",
      "primitive-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
      "primitive-control-solid": "#24292d",
      "primitive-control-solid-hover": "#2c3237",
      "primitive-control-solid-active": "#1e2326",
      "primitive-control-solid-foreground": "#ffffff",
      "primitive-chart-1": "#2a78d6",
      "primitive-chart-2": "#1baf7a",
      "primitive-chart-3": "#eda100",
      "primitive-chart-4": "#008300",
      "primitive-chart-5": "#4a3aa7",
      "primitive-chart-6": "#e34948",
      "primitive-text-inverse": "#ffffff",
      "primitive-text-hint": "0.6875rem",
      "primitive-destructive": "#dc2626",
      "primitive-destructive-hover": "#b91c1c",
      "primitive-destructive-active": "#991b1b",
      "primitive-destructive-foreground": "#ffffff",
      "primitive-destructive-surface": "rgba(220, 38, 38, 0.10)",
      "primitive-destructive-border": "rgba(220, 38, 38, 0.45)",
      "primitive-success": "#047857",
      "primitive-success-surface": "rgba(4, 120, 87, 0.10)",
      "primitive-success-border": "rgba(4, 120, 87, 0.45)",
      "primitive-warning": "#b45309",
      "primitive-warning-surface": "rgba(180, 83, 9, 0.10)",
      "primitive-warning-border": "rgba(180, 83, 9, 0.45)",
      "primitive-info": "#0369a1",
      "primitive-info-surface": "rgba(3, 105, 161, 0.10)",
      "primitive-info-border": "rgba(3, 105, 161, 0.45)",
      "primitive-radius-control": "var(--primitive-radius)",
      "primitive-radius-control-sm": "max(0px, calc(var(--primitive-radius) - 4px))",
      "primitive-radius-surface": "calc(var(--primitive-radius) + min(2px, var(--primitive-radius)))",
      "primitive-radius-item": "max(0px, calc(var(--primitive-radius-surface) - 6px))",
      "primitive-control-height-sm": "2rem",
      "primitive-control-height-md": "2.25rem",
      "primitive-control-height-lg": "2.5rem",
      "primitive-shadow-raised": "0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px -12px rgba(0, 0, 0, 0.08)",
      "primitive-shadow-overlay": "0 1px 2px rgba(0, 0, 0, 0.06), 0 18px 48px -24px rgba(0, 0, 0, 0.35)",
      "primitive-shadow-modal": "0 1px 2px rgba(0, 0, 0, 0.08), 0 24px 64px -28px rgba(0, 0, 0, 0.42)",
      "primitive-z-overlay": "100",
      "primitive-z-popover": "130",
      "primitive-z-toast": "140",
      "primitive-backdrop": "rgba(0, 0, 0, 0.6)",
      "primitive-ease": "cubic-bezier(0.23, 1, 0.32, 1)"
    },
    "dark": {
      "background": "#0a0a0b",
      "foreground": "#f5f5f6",
      "surface": "#111113",
      "surface-muted": "#18181b",
      "border": "rgba(255, 255, 255, 0.08)",
      "border-strong": "rgba(255, 255, 255, 0.14)",
      "muted": "#1c1c1f",
      "muted-foreground": "#a1a1aa",
      "ring": "#cd1c18",
      "pattern-fg": "rgba(255, 255, 255, 0.06)",
      "llb-primary": "#f5f5f6",
      "llb-primary-fg": "#0a0a0b",
      "llb-success": "#2da44e",
      "llb-error": "#f85149",
      "primitive-surface-elevated": "#0f0f10",
      "primitive-surface-overlay": "#141415",
      "primitive-surface-hover": "color-mix(in srgb, var(--foreground) 5%, transparent)",
      "primitive-surface-active": "color-mix(in srgb, var(--foreground) 10%, transparent)",
      "primitive-surface-selected": "color-mix(in srgb, var(--foreground) 8%, transparent)",
      "primitive-border-subtle": "color-mix(in srgb, var(--border) 60%, transparent)",
      "primitive-ring": "color-mix(in srgb, var(--foreground) 45%, transparent)",
      "primitive-text-secondary": "color-mix(in srgb, var(--foreground) 72%, transparent)",
      "primitive-text-placeholder": "color-mix(in srgb, var(--muted-foreground) 85%, transparent)",
      "primitive-radius": "0.875rem",
      "primitive-font-sans": "var(--font-sans)",
      "primitive-font-display": "var(--font-display)",
      "primitive-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
      "primitive-control-solid": "#f5f3ee",
      "primitive-control-solid-hover": "#ffffff",
      "primitive-control-solid-active": "#e8e4da",
      "primitive-control-solid-foreground": "#151719",
      "primitive-chart-1": "#3987e5",
      "primitive-chart-2": "#199e70",
      "primitive-chart-3": "#c98500",
      "primitive-chart-4": "#008300",
      "primitive-chart-5": "#9085e9",
      "primitive-chart-6": "#e66767",
      "primitive-text-inverse": "#151719",
      "primitive-text-hint": "0.6875rem",
      "primitive-destructive": "#e11d2e",
      "primitive-destructive-hover": "#c1121f",
      "primitive-destructive-active": "#a4161a",
      "primitive-destructive-foreground": "#ffffff",
      "primitive-destructive-surface": "rgba(225, 29, 46, 0.12)",
      "primitive-destructive-border": "rgba(225, 29, 46, 0.52)",
      "primitive-success": "#34d399",
      "primitive-success-surface": "rgba(52, 211, 153, 0.12)",
      "primitive-success-border": "rgba(52, 211, 153, 0.45)",
      "primitive-warning": "#fbbf24",
      "primitive-warning-surface": "rgba(251, 191, 36, 0.12)",
      "primitive-warning-border": "rgba(251, 191, 36, 0.45)",
      "primitive-info": "#38bdf8",
      "primitive-info-surface": "rgba(56, 189, 248, 0.12)",
      "primitive-info-border": "rgba(56, 189, 248, 0.45)",
      "primitive-radius-control": "var(--primitive-radius)",
      "primitive-radius-control-sm": "max(0px, calc(var(--primitive-radius) - 4px))",
      "primitive-radius-surface": "calc(var(--primitive-radius) + min(2px, var(--primitive-radius)))",
      "primitive-radius-item": "max(0px, calc(var(--primitive-radius-surface) - 6px))",
      "primitive-control-height-sm": "2rem",
      "primitive-control-height-md": "2.25rem",
      "primitive-control-height-lg": "2.5rem",
      "primitive-shadow-raised": "0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6)",
      "primitive-shadow-overlay": "0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 56px -28px rgba(0, 0, 0, 0.72)",
      "primitive-shadow-modal": "0 1px 2px rgba(0, 0, 0, 0.45), 0 28px 72px -32px rgba(0, 0, 0, 0.8)",
      "primitive-z-overlay": "100",
      "primitive-z-popover": "130",
      "primitive-z-toast": "140",
      "primitive-backdrop": "rgba(0, 0, 0, 0.6)",
      "primitive-ease": "cubic-bezier(0.23, 1, 0.32, 1)"
    }
  },
  "css": {
    "@layer base": {
      ":where([data-wensity-primitive])": {
        "font-family": "var(--primitive-font-sans)"
      }
    },
    "@utility scrollbar-hidden": {
      "scrollbar-width": "none",
      "-ms-overflow-style": "none",
      "&::-webkit-scrollbar": {
        "display": "none"
      }
    },
    "@keyframes wensity-marquee-x": {
      "from": {
        "transform": "translate3d(0, 0, 0)"
      },
      "to": {
        "transform": "translate3d(-50%, 0, 0)"
      }
    },
    "@keyframes wensity-marquee-x-reverse": {
      "from": {
        "transform": "translate3d(-50%, 0, 0)"
      },
      "to": {
        "transform": "translate3d(0, 0, 0)"
      }
    },
    "@keyframes wensity-morph-rot-cw": {
      "from": {
        "transform": "rotate(0deg)"
      },
      "to": {
        "transform": "rotate(360deg)"
      }
    },
    "@keyframes wensity-morph-rot-ccw": {
      "from": {
        "transform": "rotate(0deg)"
      },
      "to": {
        "transform": "rotate(-360deg)"
      }
    }
  },
  "docs": "Free Wensity component. Installs to @components/wensity/switch.tsx. For Pro components and updates, use pnpm dlx wensity@latest add switch.",
  "categories": [
    "UI Primitives",
    "wensity",
    "free"
  ],
  "meta": {
    "wensity": {
      "slug": "switch",
      "access": "free",
      "category": "UI Primitives",
      "kind": "component",
      "componentUrl": "https://ui.wensity.com/primitives/switch",
      "shadcnUrl": "https://ui.wensity.com/r/switch",
      "cliInstall": "pnpm dlx wensity@latest add switch"
    }
  }
}