{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle",
  "type": "registry:block",
  "title": "Toggle",
  "description": "A toggle button for toolbars, filters, and grouped controls.",
  "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/toggle.tsx",
      "type": "registry:component",
      "target": "@components/wensity/toggle.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Toggle as BaseToggle } from \"@base-ui/react/toggle\";\nimport { ToggleGroup as BaseToggleGroup } from \"@base-ui/react/toggle-group\";\nimport { cn } from \"@/lib/utils\";\n\nconst elevatedGroupSurfaceClass = 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\nexport type ToggleVariant = \"default\" | \"icon\" | \"outline\" | \"soft\";\nexport type ToggleSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ToggleProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof BaseToggle>, \"className\"> {\n  variant?: ToggleVariant;\n  size?: ToggleSize;\n  className?: string;\n  onPressedChange?: (pressed: boolean) => void;\n}\n\nexport interface ToggleGroupProps\n  extends Omit<\n    React.ComponentPropsWithoutRef<typeof BaseToggleGroup>,\n    \"className\" | \"defaultValue\" | \"value\" | \"onValueChange\" | \"multiple\"\n  > {\n  type?: \"single\" | \"multiple\";\n  value?: string | string[];\n  defaultValue?: string | string[];\n  onValueChange?: (value: string | string[]) => void;\n  variant?: ToggleVariant;\n  size?: ToggleSize;\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport interface ToggleGroupItemProps\n  extends Omit<ToggleProps, \"pressed\" | \"defaultPressed\" | \"onPressedChange\"> {\n  value: string;\n}\n\ntype ToggleGroupContextValue = {\n  type: \"single\" | \"multiple\";\n  variant: ToggleVariant;\n  size: ToggleSize;\n  disabled?: boolean;\n  segmented: boolean;\n};\n\nconst ToggleGroupContext = React.createContext<ToggleGroupContextValue | null>(\n  null,\n);\n\nconst EASE_OUT_CSS = \"var(--primitive-ease, cubic-bezier(0.23, 1, 0.32, 1))\";\nconst EASE_DRAWER_CSS = \"cubic-bezier(0.32, 0.72, 0, 1)\";\nconst TOGGLE_STYLE_ID = \"wensity-toggle-styles-v1\";\n\nconst base = cn(\n  \"relative inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-[var(--primitive-radius-control-sm)] border border-transparent\",\n  \"text-sm font-medium leading-none tracking-[-0.01em] select-none touch-manipulation\",\n  \"transition-[background-color,border-color,color,opacity,box-shadow,transform] duration-150 ease-[var(--primitive-ease)]\",\n  \"active:scale-[0.97] motion-reduce:active:scale-100 motion-reduce:transition-[background-color,border-color,color,opacity,box-shadow]\",\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--primitive-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--background)]\",\n  \"disabled:pointer-events-none disabled:opacity-45 data-disabled:pointer-events-none data-disabled:opacity-45\",\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n);\n\nconst sizes: Record<ToggleSize, string> = {\n  sm: \"h-[var(--primitive-control-height-sm)] gap-1.5 px-3 text-xs [&_svg]:size-3.5\",\n  md: \"h-[var(--primitive-control-height-md)] gap-2 px-3.5 [&_svg]:size-4\",\n  lg: \"h-[var(--primitive-control-height-lg)] gap-2 px-4 text-[15px] [&_svg]:size-[18px]\",\n};\n\nconst iconSizes: Record<ToggleSize, string> = {\n  sm: \"size-8 gap-0 p-0 [&_svg]:size-3.5\",\n  md: \"size-9 gap-0 p-0 [&_svg]:size-4\",\n  lg: \"size-10 gap-0 p-0 [&_svg]:size-[18px]\",\n};\n\nconst offDefault = cn(\n  \"border border-transparent bg-transparent text-[var(--muted-foreground)]\",\n  \"hover:border-[color-mix(in_srgb,var(--foreground)_10%,transparent)]\",\n  \"hover:bg-[var(--primitive-surface-hover)]\",\n  \"hover:text-[var(--foreground)]\",\n);\n\nconst onDefault = cn(\n  \"border border-[color-mix(in_srgb,var(--primitive-control-solid)_88%,var(--background))]\",\n  \"bg-[var(--primitive-control-solid)] text-[var(--primitive-control-solid-foreground)]\",\n  \"shadow-[0_1px_2px_rgba(0,0,0,0.10)]\",\n);\n\nconst offOutline = cn(\n  \"border border-[var(--border-strong)] bg-transparent text-[var(--muted-foreground)]\",\n  \"hover:border-[color-mix(in_srgb,var(--foreground)_16%,transparent)]\",\n  \"hover:bg-[var(--primitive-surface-hover)]\",\n  \"hover:text-[var(--foreground)]\",\n);\n\nconst onOutline = cn(\n  \"border-[color-mix(in_srgb,var(--foreground)_22%,transparent)]\",\n  \"bg-[var(--primitive-surface-selected)]\",\n  \"text-[var(--foreground)]\",\n  \"shadow-[0_1px_2px_rgba(0,0,0,0.05)]\",\n);\n\nconst offSoft = cn(\n  \"border border-transparent\",\n  \"bg-[var(--primitive-surface-hover)]\",\n  \"text-[var(--muted-foreground)]\",\n  \"hover:bg-[var(--primitive-surface-active)]\",\n  \"hover:text-[var(--foreground)]\",\n);\n\nconst onSoft = cn(\n  \"border border-[color-mix(in_srgb,var(--foreground)_12%,transparent)]\",\n  \"bg-[var(--primitive-surface-selected)]\",\n  \"text-[var(--foreground)]\",\n  \"shadow-[0_1px_2px_rgba(0,0,0,0.05)]\",\n);\n\nconst variantOff: Record<ToggleVariant, string> = {\n  default: offDefault,\n  icon: offDefault,\n  outline: offOutline,\n  soft: offSoft,\n};\n\nconst variantOn: Record<ToggleVariant, string> = {\n  default: onDefault,\n  icon: onDefault,\n  outline: onOutline,\n  soft: onSoft,\n};\n\nconst groupItemBase = cn(\n  \"relative z-[1] rounded-[var(--primitive-radius-item)]\",\n  \"data-[segmented=true]:border-transparent data-[segmented=true]:bg-transparent\",\n  \"data-[segmented=true]:shadow-none\",\n  \"data-[segmented=true]:hover:border-transparent\",\n  \"data-[segmented=true]:data-pressed:border-transparent\",\n  \"data-[segmented=true]:data-pressed:bg-transparent\",\n  \"data-[segmented=true]:data-pressed:text-[var(--foreground)]\",\n  \"data-[segmented=true]:data-pressed:shadow-none\",\n);\n\nfunction ensureToggleStyles() {\n  if (typeof document === \"undefined\") return;\n  if (document.getElementById(TOGGLE_STYLE_ID)) return;\n\n  const style = document.createElement(\"style\");\n  style.id = TOGGLE_STYLE_ID;\n  style.textContent = `\n    [data-slot=\"toggle-segment-indicator\"] {\n      transform: translate3d(0, 0, 0);\n      transition: transform 260ms ${EASE_DRAWER_CSS};\n    }\n\n    [data-slot=\"toggle-segment-indicator\"][data-orientation=\"vertical\"] {\n      transition-duration: 240ms;\n    }\n\n    [data-slot=\"toggle-group-item\"][data-segmented=\"true\"] {\n      transition: color 200ms ${EASE_OUT_CSS};\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      [data-slot=\"toggle-segment-indicator\"],\n      [data-slot=\"toggle-group-item\"][data-segmented=\"true\"] {\n        transition-duration: 0ms !important;\n      }\n    }\n  `;\n  document.head.appendChild(style);\n}\n\nfunction resolveSizeClasses(variant: ToggleVariant, size: ToggleSize) {\n  return variant === \"icon\" ? iconSizes[size] : sizes[size];\n}\n\nexport function toggleVariants({\n  variant = \"default\",\n  size = \"md\",\n  pressed = false,\n  segmented = false,\n  className,\n}: {\n  variant?: ToggleVariant;\n  size?: ToggleSize;\n  pressed?: boolean;\n  segmented?: boolean;\n  className?: string;\n} = {}) {\n  return cn(\n    base,\n    resolveSizeClasses(variant, size),\n    segmented ? null : pressed ? variantOn[variant] : variantOff[variant],\n    segmented && \"text-[var(--muted-foreground)] hover:text-[var(--foreground)]\",\n    segmented && pressed && \"text-[var(--foreground)]\",\n    className,\n  );\n}\n\nfunction toGroupArray(\n  type: \"single\" | \"multiple\",\n  value: string | string[] | undefined,\n): string[] | undefined {\n  if (value === undefined) return undefined;\n  if (type === \"multiple\") {\n    return Array.isArray(value) ? [...value] : value ? [value] : [];\n  }\n  if (Array.isArray(value)) return value[0] ? [value[0]] : [];\n  return value ? [value] : [];\n}\n\nfunction getSegmentIndex(children: React.ReactNode, selectedValue?: string) {\n  const values = React.Children.toArray(children)\n    .map((child) => {\n      if (!React.isValidElement(child)) return undefined;\n      const props = child.props as { value?: string };\n      return typeof props.value === \"string\" ? props.value : undefined;\n    })\n    .filter((value): value is string => value !== undefined);\n\n  const selectedIndex = values.findIndex((value) => value === selectedValue);\n  return {\n    count: values.length,\n    index: selectedIndex >= 0 ? selectedIndex : 0,\n  };\n}\n\nfunction useToggleGroupContext(component: string) {\n  const context = React.useContext(ToggleGroupContext);\n  if (!context) {\n    throw new Error(`${component} must be used inside ToggleGroup.`);\n  }\n  return context;\n}\n\nexport const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(\n  (\n    {\n      className,\n      variant = \"default\",\n      size = \"md\",\n      pressed,\n      defaultPressed = false,\n      disabled,\n      onPressedChange,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <BaseToggle data-wensity-primitive=\"\"\n        ref={ref}\n        pressed={pressed}\n        defaultPressed={defaultPressed}\n        disabled={disabled}\n        data-slot=\"toggle\"\n        className={(state) =>\n          toggleVariants({\n            variant,\n            size,\n            pressed: state.pressed,\n            className,\n          })\n        }\n        onPressedChange={(next) => {\n          onPressedChange?.(next);\n        }}\n        {...props}\n      />\n    );\n  },\n);\n\nToggle.displayName = \"Toggle\";\n\nexport const ToggleGroup = React.forwardRef<HTMLDivElement, ToggleGroupProps>(\n  (\n    {\n      type = \"single\",\n      value,\n      defaultValue,\n      onValueChange,\n      variant = \"default\",\n      size = \"md\",\n      orientation = \"horizontal\",\n      disabled,\n      children,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const multiple = type === \"multiple\";\n    const segmented = type === \"single\";\n    const isControlled = value !== undefined;\n    const [uncontrolledValue, setUncontrolledValue] = React.useState<\n      string | string[] | undefined\n    >(defaultValue);\n    const selectedValue = isControlled ? value : uncontrolledValue;\n\n    const context = React.useMemo<ToggleGroupContextValue>(\n      () => ({\n        type,\n        variant,\n        size,\n        disabled,\n        segmented,\n      }),\n      [disabled, segmented, size, type, variant],\n    );\n\n    React.useEffect(() => {\n      ensureToggleStyles();\n    }, []);\n\n    const segmentLayout =\n      segmented && typeof selectedValue === \"string\"\n        ? getSegmentIndex(children, selectedValue)\n        : null;\n\n    const baseValue = toGroupArray(type, value);\n    const baseDefaultValue = toGroupArray(type, defaultValue);\n\n    return (\n      <ToggleGroupContext.Provider value={context}>\n        <BaseToggleGroup data-wensity-primitive=\"\"\n          ref={ref}\n          multiple={multiple}\n          value={baseValue}\n          defaultValue={baseDefaultValue}\n          orientation={orientation}\n          disabled={disabled}\n          data-slot=\"toggle-group\"\n          data-type={type}\n          className={cn(\n            \"inline-flex\",\n            segmented && cn(elevatedGroupSurfaceClass, \"relative rounded-[var(--primitive-radius-surface)] p-1\"),\n            orientation === \"horizontal\"\n              ? segmented\n                ? \"flex-row items-stretch gap-1\"\n                : \"flex-row flex-wrap items-center gap-2\"\n              : segmented\n                ? \"flex-col gap-1\"\n                : \"flex-col items-stretch gap-2\",\n            className,\n          )}\n          style={\n            segmentLayout\n              ? ({\n                  \"--toggle-segment-count\": segmentLayout.count,\n                  \"--toggle-segment-index\": segmentLayout.index,\n                } as React.CSSProperties)\n              : undefined\n          }\n          onValueChange={(groupValue) => {\n            if (multiple) {\n              if (!isControlled) setUncontrolledValue(groupValue);\n              onValueChange?.(groupValue);\n              return;\n            }\n            const next = groupValue[0] ?? \"\";\n            if (!isControlled) setUncontrolledValue(next);\n            onValueChange?.(next);\n          }}\n          {...props}\n        >\n          {segmented && segmentLayout && segmentLayout.count > 0 ? (\n            <span\n              aria-hidden=\"true\"\n              data-slot=\"toggle-segment-indicator\"\n              data-orientation={orientation}\n              className={cn(\n                \"pointer-events-none absolute rounded-[var(--primitive-radius-item)]\",\n                \"bg-[var(--primitive-surface-selected)]\",\n                \"shadow-[0_1px_2px_rgba(0,0,0,0.07),0_0_0_1px_color-mix(in_srgb,var(--foreground)_8%,transparent)]\",\n                \"dark:shadow-[0_1px_2px_rgba(0,0,0,0.36),0_0_0_1px_color-mix(in_srgb,var(--foreground)_12%,transparent)]\",\n                orientation === \"horizontal\"\n                  ? \"top-1 bottom-1 left-1\"\n                  : \"left-1 right-1 top-1\",\n              )}\n              style={\n                orientation === \"horizontal\"\n                  ? {\n                      width:\n                        \"calc((100% - 0.5rem - (var(--toggle-segment-count) - 1) * 0.25rem) / var(--toggle-segment-count))\",\n                      transform:\n                        \"translate3d(calc(var(--toggle-segment-index) * (100% + 0.25rem)), 0, 0)\",\n                    }\n                  : {\n                      height:\n                        \"calc((100% - 0.5rem - (var(--toggle-segment-count) - 1) * 0.25rem) / var(--toggle-segment-count))\",\n                      transform:\n                        \"translate3d(0, calc(var(--toggle-segment-index) * (100% + 0.25rem)), 0)\",\n                    }\n              }\n            />\n          ) : null}\n          {children}\n        </BaseToggleGroup>\n      </ToggleGroupContext.Provider>\n    );\n  },\n);\n\nToggleGroup.displayName = \"ToggleGroup\";\n\nexport const ToggleGroupItem = React.forwardRef<\n  HTMLButtonElement,\n  ToggleGroupItemProps\n>(\n  (\n    {\n      value,\n      variant,\n      size,\n      disabled,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const context = useToggleGroupContext(\"ToggleGroupItem\");\n    const itemVariant = variant ?? context.variant;\n    const itemSize = size ?? context.size;\n    const itemDisabled = disabled || context.disabled;\n\n    return (\n      <BaseToggle\n        ref={ref}\n        value={value}\n        disabled={itemDisabled}\n        data-slot=\"toggle-group-item\"\n        data-segmented={context.segmented ? \"true\" : undefined}\n        className={(state) =>\n          toggleVariants({\n            variant: itemVariant,\n            size: itemSize,\n            pressed: state.pressed,\n            segmented: context.segmented,\n            className: cn(\n              context.segmented && \"min-w-[4.5rem] flex-1\",\n              groupItemBase,\n              className,\n            ),\n          })\n        }\n        {...props}\n      />\n    );\n  },\n);\n\nToggleGroupItem.displayName = \"ToggleGroupItem\";\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/toggle.tsx. For Pro components and updates, use pnpm dlx wensity@latest add toggle.",
  "categories": [
    "UI Primitives",
    "wensity",
    "free"
  ],
  "meta": {
    "wensity": {
      "slug": "toggle",
      "access": "free",
      "category": "UI Primitives",
      "kind": "component",
      "componentUrl": "https://ui.wensity.com/primitives/toggle",
      "shadcnUrl": "https://ui.wensity.com/r/toggle",
      "cliInstall": "pnpm dlx wensity@latest add toggle"
    }
  }
}