@spark-ui/components 17.16.0 → 18.0.0

package/dist/switch/SwitchInput.d.ts

@@ -48,6 +48,6 @@ export interface SwitchInputProps extends StylesProps, Omit<ComponentPropsWithRe
     asChild?: boolean;
 }
 export declare const SwitchInput: {
-    ({ checked, checkedIcon, defaultChecked, intent: intentProp, uncheckedIcon, size, onCheckedChange, className, required, ref, asChild, ...rest }: SwitchInputProps): import("react/jsx-runtime").JSX.Element;
+    ({ checked, checkedIcon, defaultChecked, uncheckedIcon, size, onCheckedChange, className, required, ref, asChild, ...rest }: SwitchInputProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/switch/SwitchInput.styles.d.ts

@@ -1,7 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 export declare const styles: (props?: ({
     size?: "sm" | "md" | null | undefined;
-    intent?: "main" | "alert" | "support" | "error" | "accent" | "success" | "info" | "neutral" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type StylesProps = VariantProps<typeof styles>;
 export declare const thumbWrapperStyles: (props?: ({

package/dist/switch/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../slot/index.js"),t=require("../label-DO48yda7.js"),n=require("../useRenderSlot-DHV0CegV.js");let r=require("class-variance-authority"),i=require("react"),a=require("react/jsx-runtime"),o=require("@spark-ui/internal-utils"),s=require("@spark-ui/components/form-field"),c=require("@spark-ui/icons/Check"),l=require("@spark-ui/hooks/use-combined-state"),u=require("@spark-ui/icons/Close"),d=require("@base-ui/react/switch");var f=(0,r.cva)((0,o.tw)([`relative shrink-0 self-baseline`,`cursor-pointer`,`rounded-full border-transparent`,`hover:ring-4`,`transition-colors duration-200 ease-in-out`,`disabled:hover:ring-transparent disabled:cursor-not-allowed disabled:opacity-dim-3`,`focus-visible:u-outline`,`data-unchecked:bg-on-surface/dim-3`,`u-shadow-border-transition`,`overflow-x-hidden`]),{variants:{size:(0,o.makeVariants)({sm:(0,o.tw)([`h-sz-24`,`w-sz-40`,`border-md`]),md:(0,o.tw)([`h-sz-32`,`w-sz-56`,`border-[4px]`])}),intent:(0,o.makeVariants)({main:[`[&[data-checked]]:bg-main`,`hover:ring-main-container`,`text-main`],support:[`[&[data-checked]]:bg-support`,`hover:ring-support-container`,`text-support`],accent:[`[&[data-checked]]:bg-accent`,`hover:ring-accent-container`,`text-accent`],success:[`[&[data-checked]]:bg-success`,`hover:ring-success-container`,`text-success`],alert:[`[&[data-checked]]:bg-alert`,`hover:ring-alert-container`,`text-alert`],error:[`[&[data-checked]]:bg-error`,`hover:ring-error-container`,`text-error`],info:[`[&[data-checked]]:bg-info`,`hover:ring-info-container`,`text-info`],neutral:[`[&[data-checked]]:bg-neutral`,`hover:ring-neutral-container`,`text-neutral`]})},defaultVariants:{intent:`support`,size:`sm`}}),p=(0,r.cva)([`pointer-events-none absolute inset-0 flex items-center`,`transition-all duration-200 ease-in-out`],{variants:{checked:{true:`translate-x-full`,false:`translate-x-0`}}}),m=(0,r.cva)([`absolute left-0 top-0 flex items-center justify-center`,`bg-surface`,`rounded-full`,`ring-0`,`transition-all duration-200 ease-in-out`],{variants:{size:(0,o.makeVariants)({sm:[`h-sz-20`,`w-sz-20`],md:[`h-sz-24`,`w-sz-24`]}),checked:{true:`-translate-x-full`,false:`translate-x-0 text-on-surface/dim-2`}},defaultVariants:{size:`sm`,checked:!1}}),h=(0,r.cva)([`transition-opacity duration-200`],{variants:{size:(0,o.makeVariants)({sm:[`h-sz-10 w-sz-10`],md:[`h-sz-12 w-sz-12`]})},defaultVariants:{size:`sm`}}),g=({checked:t,checkedIcon:r=(0,a.jsx)(c.Check,{}),defaultChecked:i,intent:o,uncheckedIcon:g=(0,a.jsx)(u.Close,{}),size:_=`md`,onCheckedChange:v,className:y,required:b,ref:x,asChild:S=!1,...C})=>{let[w,T]=(0,l.useCombinedState)(t,i),{name:E,description:D,state:O,isRequired:k,isInvalid:A}=(0,s.useFormFieldControl)(),j=O??o,M=n.t(S,`span`),N=!!(b||k),P=e=>{T(e),v?.(e)};return(0,a.jsx)(d.Switch.Root,{"data-spark-component":`switch-input`,ref:x,render:M,className:f({intent:j,size:_,className:y}),checked:t,defaultChecked:i,onCheckedChange:e=>P(e),name:E,required:N,"aria-required":N?!0:void 0,"aria-invalid":A,"aria-describedby":D,...C,children:(0,a.jsx)(`span`,{className:p({checked:w}),children:(0,a.jsxs)(d.Switch.Thumb,{className:m({size:_,checked:w}),children:[w&&r&&(0,a.jsx)(e.Slot,{className:h({size:_}),children:r}),!w&&g&&(0,a.jsx)(e.Slot,{className:h({size:_}),children:g})]})})})};g.displayName=`SwitchInput`;var _=(0,r.cva)(`default:text-on-surface`,{variants:{disabled:{true:[`text-neutral/dim-2`,`cursor-not-allowed`],false:[`cursor-pointer`]}},defaultVariants:{disabled:!1}}),v=({className:e,disabled:n,...r})=>(0,a.jsx)(t.t,{"data-spark-component":`switch-label`,className:_({disabled:n,className:e}),...r}),y=`:switch`,b=({size:e=`md`,children:t,className:n,id:o,disabled:c,reverse:l=!1,ref:u,...d})=>{let f=(0,s.useFormFieldControl)(),p=`${y}-label-${(0,i.useId)()}`,m=`${y}-input-${(0,i.useId)()}`,h=f.id||o||m,_=t&&(0,a.jsx)(v,{disabled:c,htmlFor:h,id:p,children:t}),b=(0,a.jsx)(g,{ref:u,size:e,id:h,disabled:c,"aria-labelledby":t?p:f.labelId,...d}),x=l?(0,a.jsxs)(a.Fragment,{children:[_,b]}):(0,a.jsxs)(a.Fragment,{children:[b,_]});return(0,a.jsx)(`div`,{"data-spark-component":`switch`,className:(0,r.cx)(`gap-md text-body-1 flex items-center`,n),children:x})};b.displayName=`Switch`,exports.Switch=b;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../slot/index.js"),t=require("../label-DO48yda7.js"),n=require("../useRenderSlot-DHV0CegV.js");let r=require("class-variance-authority"),i=require("react"),a=require("react/jsx-runtime"),o=require("@spark-ui/internal-utils"),s=require("@spark-ui/components/form-field"),c=require("@spark-ui/icons/Check"),l=require("@spark-ui/hooks/use-combined-state"),u=require("@spark-ui/icons/Close"),d=require("@base-ui/react/switch");var f=(0,r.cva)((0,o.tw)([`relative shrink-0 self-baseline`,`cursor-pointer aria-disabled:cursor-not-allowed`,`rounded-full border-transparent`,`hover:ring-4`,`transition-colors duration-200 ease-in-out`,`aria-disabled:opacity-dim-3`,`focus-visible:u-outline`,`text-support bg-support data-unchecked:bg-neutral/dim-3`,`u-shadow-border-transition`,`overflow-x-hidden`,`hover:ring-support-container aria-disabled:hover:ring-transparent `]),{variants:{size:(0,o.makeVariants)({sm:(0,o.tw)([`h-sz-24`,`w-sz-40`,`border-md`]),md:(0,o.tw)([`h-sz-32`,`w-sz-56`,`border-[4px]`])})},defaultVariants:{size:`sm`}}),p=(0,r.cva)([`pointer-events-none absolute inset-0 flex items-center`,`transition-all duration-200 ease-in-out`],{variants:{checked:{true:`translate-x-full`,false:`translate-x-0`}}}),m=(0,r.cva)([`absolute left-0 top-0 flex items-center justify-center`,`bg-surface`,`rounded-full`,`ring-0`,`transition-all duration-200 ease-in-out`],{variants:{size:(0,o.makeVariants)({sm:[`h-sz-20`,`w-sz-20`],md:[`h-sz-24`,`w-sz-24`]}),checked:{true:`-translate-x-full`,false:`translate-x-0 text-on-surface/dim-2`}},defaultVariants:{size:`sm`,checked:!1}}),h=(0,r.cva)([`transition-opacity duration-200`],{variants:{size:(0,o.makeVariants)({sm:[`h-sz-10 w-sz-10`],md:[`h-sz-12 w-sz-12`]})},defaultVariants:{size:`sm`}}),g=({checked:t,checkedIcon:r=(0,a.jsx)(c.Check,{}),defaultChecked:i,uncheckedIcon:o=(0,a.jsx)(u.Close,{}),size:g=`md`,onCheckedChange:_,className:v,required:y,ref:b,asChild:x=!1,...S})=>{let[C,w]=(0,l.useCombinedState)(t,i),{name:T,description:E,isRequired:D,isInvalid:O}=(0,s.useFormFieldControl)(),k=n.t(x,`span`),A=!!(y||D),j=e=>{w(e),_?.(e)};return(0,a.jsx)(d.Switch.Root,{"data-spark-component":`switch-input`,ref:b,render:k,className:f({size:g,className:v}),checked:t,defaultChecked:i,onCheckedChange:e=>j(e),name:T,required:A,"aria-required":A?!0:void 0,"aria-invalid":O,"aria-describedby":E,...S,children:(0,a.jsx)(`span`,{className:p({checked:C}),children:(0,a.jsxs)(d.Switch.Thumb,{className:m({size:g,checked:C}),children:[C&&r&&(0,a.jsx)(e.Slot,{className:h({size:g}),children:r}),!C&&o&&(0,a.jsx)(e.Slot,{className:h({size:g}),children:o})]})})})};g.displayName=`SwitchInput`;var _=(0,r.cva)(`default:text-on-surface`,{variants:{disabled:{true:[`text-neutral/dim-2`,`cursor-not-allowed`],false:[`cursor-pointer`]}},defaultVariants:{disabled:!1}}),v=({className:e,disabled:n,...r})=>(0,a.jsx)(t.t,{"data-spark-component":`switch-label`,className:_({disabled:n,className:e}),...r}),y=`:switch`,b=({size:e=`md`,children:t,className:n,id:o,disabled:c,reverse:l=!1,ref:u,...d})=>{let f=(0,s.useFormFieldControl)(),p=`${y}-label-${(0,i.useId)()}`,m=`${y}-input-${(0,i.useId)()}`,h=f.id||o||m,_=t&&(0,a.jsx)(v,{disabled:c,htmlFor:h,id:p,children:t}),b=(0,a.jsx)(g,{ref:u,size:e,id:h,disabled:c,"aria-labelledby":t?p:f.labelId,...d}),x=l?(0,a.jsxs)(a.Fragment,{children:[_,b]}):(0,a.jsxs)(a.Fragment,{children:[b,_]});return(0,a.jsx)(`div`,{"data-spark-component":`switch`,className:(0,r.cx)(`gap-md text-body-1 flex items-center`,n),children:x})};b.displayName=`Switch`,exports.Switch=b;
 //# sourceMappingURL=index.js.map

package/dist/switch/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/switch/SwitchInput.styles.ts","../../src/switch/SwitchInput.tsx","../../src/switch/SwitchLabel.styles.ts","../../src/switch/SwitchLabel.tsx","../../src/switch/Switch.tsx"],"sourcesContent":["import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n  tw([\n    'relative shrink-0 self-baseline',\n    'cursor-pointer',\n    'rounded-full border-transparent',\n    'hover:ring-4',\n    'transition-colors duration-200 ease-in-out',\n    'disabled:hover:ring-transparent disabled:cursor-not-allowed disabled:opacity-dim-3',\n    'focus-visible:u-outline',\n    'data-unchecked:bg-on-surface/dim-3',\n    'u-shadow-border-transition',\n    'overflow-x-hidden',\n  ]),\n  {\n    variants: {\n      /**\n       * Size of the switch input.\n       */\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: tw(['h-sz-24', 'w-sz-40', 'border-md']),\n        md: tw(['h-sz-32', 'w-sz-56', 'border-[4px]']),\n      }),\n      /**\n       * Color scheme of the switch input.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: ['[&[data-checked]]:bg-main', 'hover:ring-main-container', 'text-main'],\n        support: ['[&[data-checked]]:bg-support', 'hover:ring-support-container', 'text-support'],\n        accent: ['[&[data-checked]]:bg-accent', 'hover:ring-accent-container', 'text-accent'],\n        success: ['[&[data-checked]]:bg-success', 'hover:ring-success-container', 'text-success'],\n        alert: ['[&[data-checked]]:bg-alert', 'hover:ring-alert-container', 'text-alert'],\n        error: ['[&[data-checked]]:bg-error', 'hover:ring-error-container', 'text-error'],\n        info: ['[&[data-checked]]:bg-info', 'hover:ring-info-container', 'text-info'],\n        neutral: ['[&[data-checked]]:bg-neutral', 'hover:ring-neutral-container', 'text-neutral'],\n      }),\n    },\n    defaultVariants: {\n      intent: 'support',\n      size: 'sm',\n    },\n  }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n\nexport const thumbWrapperStyles = cva(\n  [\n    'pointer-events-none absolute inset-0 flex items-center',\n    'transition-all duration-200 ease-in-out',\n  ],\n  {\n    variants: {\n      checked: {\n        true: 'translate-x-full',\n        false: 'translate-x-0',\n      },\n    },\n  }\n)\n\nexport const thumbStyles = cva(\n  [\n    'absolute left-0 top-0 flex items-center justify-center',\n    'bg-surface',\n    'rounded-full',\n    'ring-0',\n    'transition-all duration-200 ease-in-out',\n  ],\n  {\n    variants: {\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: ['h-sz-20', 'w-sz-20'],\n        md: ['h-sz-24', 'w-sz-24'],\n      }),\n      checked: {\n        true: '-translate-x-full',\n        false: 'translate-x-0 text-on-surface/dim-2',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n      checked: false,\n    },\n  }\n)\n\nexport const thumbCheckSVGStyles = cva(['transition-opacity duration-200'], {\n  variants: {\n    size: makeVariants<'size', ['sm', 'md']>({\n      sm: ['h-sz-10 w-sz-10'],\n      md: ['h-sz-12 w-sz-12'],\n    }),\n  },\n  defaultVariants: {\n    size: 'sm',\n  },\n})\n","import { Switch as BaseSwitch } from '@base-ui/react/switch'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { Check } from '@spark-ui/icons/Check'\nimport { Close } from '@spark-ui/icons/Close'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRenderSlot } from '../drawer/useRenderSlot'\nimport { Slot } from '../slot'\nimport {\n  styles,\n  type StylesProps,\n  thumbCheckSVGStyles,\n  thumbStyles,\n  thumbWrapperStyles,\n} from './SwitchInput.styles'\n\nexport interface SwitchInputProps\n  extends\n    StylesProps,\n    Omit<ComponentPropsWithRef<typeof BaseSwitch.Root>, 'value' | 'render' | 'onCheckedChange'> {\n  /**\n   * The state of the switch when it is initially rendered. Use when you do not need to control its state.\n   */\n  defaultChecked?: boolean\n  /**\n   * The controlled state of the switch. Must be used in conjunction with `onCheckedChange`.\n   */\n  checked?: boolean\n  /**\n   * Event handler called when the state of the switch changes.\n   */\n  onCheckedChange?: (checked: boolean) => void\n  /**\n   * When `true`, prevents the user from interacting with the switch.\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must check the switch before the owning form can be submitted.\n   */\n  required?: boolean\n  /**\n   * The name of the switch. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * The value given as data when submitted with a name.\n   */\n  value?: string\n  /**\n   * Icon shown inside the thumb of the Switch whenever it is checked\n   */\n  checkedIcon?: ReactNode\n  /**\n   * Icon shown inside the thumb of the Switch whenever it is unchecked\n   */\n  uncheckedIcon?: ReactNode\n  /**\n   * When true, the label will be placed on the left side of the Switch\n   */\n  reverse?: boolean\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n}\n\nexport const SwitchInput = ({\n  checked,\n  checkedIcon = <Check />,\n  defaultChecked,\n  intent: intentProp,\n  uncheckedIcon = <Close />,\n  size = 'md',\n  onCheckedChange,\n  className,\n  required,\n  ref,\n  asChild = false,\n  ...rest\n}: SwitchInputProps) => {\n  const [isChecked, setIsChecked] = useCombinedState(checked, defaultChecked)\n  const { name, description, state, isRequired, isInvalid } = useFormFieldControl()\n  const intent = state ?? intentProp\n  const renderSlot = useRenderSlot(asChild, 'span')\n  const isRequiredComputed = Boolean(required || isRequired)\n\n  const handleCheckedChange = (updatedValue: boolean): void => {\n    setIsChecked(updatedValue)\n    onCheckedChange?.(updatedValue)\n  }\n\n  return (\n    <BaseSwitch.Root\n      data-spark-component=\"switch-input\"\n      ref={ref}\n      render={renderSlot}\n      className={styles({ intent, size, className })}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onCheckedChange={nextChecked => handleCheckedChange(nextChecked)}\n      name={name}\n      required={isRequiredComputed}\n      aria-required={isRequiredComputed ? true : undefined}\n      aria-invalid={isInvalid}\n      aria-describedby={description}\n      {...rest}\n    >\n      <span className={thumbWrapperStyles({ checked: isChecked })}>\n        <BaseSwitch.Thumb className={thumbStyles({ size, checked: isChecked })}>\n          {isChecked && checkedIcon && (\n            <Slot className={thumbCheckSVGStyles({ size })}>{checkedIcon}</Slot>\n          )}\n          {!isChecked && uncheckedIcon && (\n            <Slot className={thumbCheckSVGStyles({ size })}>{uncheckedIcon}</Slot>\n          )}\n        </BaseSwitch.Thumb>\n      </span>\n    </BaseSwitch.Root>\n  )\n}\n\nSwitchInput.displayName = 'SwitchInput'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const labelStyles = cva('default:text-on-surface', {\n  variants: {\n    disabled: {\n      true: ['text-neutral/dim-2', 'cursor-not-allowed'],\n      false: ['cursor-pointer'],\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n})\n\nexport type LabelStylesProps = VariantProps<typeof labelStyles>\n","import { Label, LabelProps } from '../label'\nimport { labelStyles, LabelStylesProps } from './SwitchLabel.styles'\n\nexport interface SwitchLabelProps extends LabelStylesProps, LabelProps {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The id of the element the label is associated with.\n   */\n  htmlFor?: string\n  /**\n   * When true, prevents the user from interacting with the switch item.\n   */\n  disabled?: boolean\n}\n\nexport const SwitchLabel = ({ className, disabled, ...others }: SwitchLabelProps) => (\n  <Label\n    data-spark-component=\"switch-label\"\n    className={labelStyles({ disabled, className })}\n    {...others}\n  />\n)\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\nimport { useId } from 'react'\n\nimport { SwitchInput, SwitchInputProps } from './SwitchInput'\nimport { SwitchLabel } from './SwitchLabel'\n\nexport type SwitchProps = SwitchInputProps\n\nconst ID_PREFIX = ':switch'\n\n/**\n * A toggle control that allows users to switch between two states, typically on and off.\n */\nexport const Switch = ({\n  size = 'md',\n  children,\n  className,\n  id,\n  disabled,\n  reverse = false,\n  ref,\n  ...rest\n}: SwitchProps) => {\n  const field = useFormFieldControl()\n\n  const labelID = `${ID_PREFIX}-label-${useId()}`\n  const innerID = `${ID_PREFIX}-input-${useId()}`\n  const fieldID = field.id || id || innerID\n\n  const switchLabel = children && (\n    <SwitchLabel disabled={disabled} htmlFor={fieldID} id={labelID}>\n      {children}\n    </SwitchLabel>\n  )\n\n  const switchInput = (\n    <SwitchInput\n      ref={ref}\n      size={size}\n      id={fieldID}\n      disabled={disabled}\n      /**\n       * If the switch doesn't have any direct label (children) then we should try to\n       * get an eventual alternative label from FormField.\n       * On last resort, we shouldn't forget to define an aria-label attribute.\n       */\n      aria-labelledby={children ? labelID : field.labelId}\n      {...rest}\n    />\n  )\n\n  const content = reverse ? (\n    <>\n      {switchLabel}\n      {switchInput}\n    </>\n  ) : (\n    <>\n      {switchInput}\n      {switchLabel}\n    </>\n  )\n\n  return (\n    <div\n      data-spark-component=\"switch\"\n      className={cx('gap-md text-body-1 flex items-center', className)}\n    >\n      {content}\n    </div>\n  )\n}\n\nSwitch.displayName = 'Switch'\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/switch/SwitchInput.styles.ts","../../src/switch/SwitchInput.tsx","../../src/switch/SwitchLabel.styles.ts","../../src/switch/SwitchLabel.tsx","../../src/switch/Switch.tsx"],"sourcesContent":["import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n  tw([\n    'relative shrink-0 self-baseline',\n    'cursor-pointer aria-disabled:cursor-not-allowed',\n    'rounded-full border-transparent',\n    'hover:ring-4',\n    'transition-colors duration-200 ease-in-out',\n    'aria-disabled:opacity-dim-3',\n    'focus-visible:u-outline',\n    'text-support bg-support data-unchecked:bg-neutral/dim-3',\n    'u-shadow-border-transition',\n    'overflow-x-hidden',\n    'hover:ring-support-container aria-disabled:hover:ring-transparent ',\n  ]),\n  {\n    variants: {\n      /**\n       * Size of the switch input.\n       */\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: tw(['h-sz-24', 'w-sz-40', 'border-md']),\n        md: tw(['h-sz-32', 'w-sz-56', 'border-[4px]']),\n      }),\n    },\n    defaultVariants: {\n      size: 'sm',\n    },\n  }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n\nexport const thumbWrapperStyles = cva(\n  [\n    'pointer-events-none absolute inset-0 flex items-center',\n    'transition-all duration-200 ease-in-out',\n  ],\n  {\n    variants: {\n      checked: {\n        true: 'translate-x-full',\n        false: 'translate-x-0',\n      },\n    },\n  }\n)\n\nexport const thumbStyles = cva(\n  [\n    'absolute left-0 top-0 flex items-center justify-center',\n    'bg-surface',\n    'rounded-full',\n    'ring-0',\n    'transition-all duration-200 ease-in-out',\n  ],\n  {\n    variants: {\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: ['h-sz-20', 'w-sz-20'],\n        md: ['h-sz-24', 'w-sz-24'],\n      }),\n      checked: {\n        true: '-translate-x-full',\n        false: 'translate-x-0 text-on-surface/dim-2',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n      checked: false,\n    },\n  }\n)\n\nexport const thumbCheckSVGStyles = cva(['transition-opacity duration-200'], {\n  variants: {\n    size: makeVariants<'size', ['sm', 'md']>({\n      sm: ['h-sz-10 w-sz-10'],\n      md: ['h-sz-12 w-sz-12'],\n    }),\n  },\n  defaultVariants: {\n    size: 'sm',\n  },\n})\n","import { Switch as BaseSwitch } from '@base-ui/react/switch'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { Check } from '@spark-ui/icons/Check'\nimport { Close } from '@spark-ui/icons/Close'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRenderSlot } from '../drawer/useRenderSlot'\nimport { Slot } from '../slot'\nimport {\n  styles,\n  type StylesProps,\n  thumbCheckSVGStyles,\n  thumbStyles,\n  thumbWrapperStyles,\n} from './SwitchInput.styles'\n\nexport interface SwitchInputProps\n  extends\n    StylesProps,\n    Omit<ComponentPropsWithRef<typeof BaseSwitch.Root>, 'value' | 'render' | 'onCheckedChange'> {\n  /**\n   * The state of the switch when it is initially rendered. Use when you do not need to control its state.\n   */\n  defaultChecked?: boolean\n  /**\n   * The controlled state of the switch. Must be used in conjunction with `onCheckedChange`.\n   */\n  checked?: boolean\n  /**\n   * Event handler called when the state of the switch changes.\n   */\n  onCheckedChange?: (checked: boolean) => void\n  /**\n   * When `true`, prevents the user from interacting with the switch.\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must check the switch before the owning form can be submitted.\n   */\n  required?: boolean\n  /**\n   * The name of the switch. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * The value given as data when submitted with a name.\n   */\n  value?: string\n  /**\n   * Icon shown inside the thumb of the Switch whenever it is checked\n   */\n  checkedIcon?: ReactNode\n  /**\n   * Icon shown inside the thumb of the Switch whenever it is unchecked\n   */\n  uncheckedIcon?: ReactNode\n  /**\n   * When true, the label will be placed on the left side of the Switch\n   */\n  reverse?: boolean\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n}\n\nexport const SwitchInput = ({\n  checked,\n  checkedIcon = <Check />,\n  defaultChecked,\n  uncheckedIcon = <Close />,\n  size = 'md',\n  onCheckedChange,\n  className,\n  required,\n  ref,\n  asChild = false,\n  ...rest\n}: SwitchInputProps) => {\n  const [isChecked, setIsChecked] = useCombinedState(checked, defaultChecked)\n  const { name, description, isRequired, isInvalid } = useFormFieldControl()\n  const renderSlot = useRenderSlot(asChild, 'span')\n  const isRequiredComputed = Boolean(required || isRequired)\n\n  const handleCheckedChange = (updatedValue: boolean): void => {\n    setIsChecked(updatedValue)\n    onCheckedChange?.(updatedValue)\n  }\n\n  return (\n    <BaseSwitch.Root\n      data-spark-component=\"switch-input\"\n      ref={ref}\n      render={renderSlot}\n      className={styles({ size, className })}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onCheckedChange={nextChecked => handleCheckedChange(nextChecked)}\n      name={name}\n      required={isRequiredComputed}\n      aria-required={isRequiredComputed ? true : undefined}\n      aria-invalid={isInvalid}\n      aria-describedby={description}\n      {...rest}\n    >\n      <span className={thumbWrapperStyles({ checked: isChecked })}>\n        <BaseSwitch.Thumb className={thumbStyles({ size, checked: isChecked })}>\n          {isChecked && checkedIcon && (\n            <Slot className={thumbCheckSVGStyles({ size })}>{checkedIcon}</Slot>\n          )}\n          {!isChecked && uncheckedIcon && (\n            <Slot className={thumbCheckSVGStyles({ size })}>{uncheckedIcon}</Slot>\n          )}\n        </BaseSwitch.Thumb>\n      </span>\n    </BaseSwitch.Root>\n  )\n}\n\nSwitchInput.displayName = 'SwitchInput'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const labelStyles = cva('default:text-on-surface', {\n  variants: {\n    disabled: {\n      true: ['text-neutral/dim-2', 'cursor-not-allowed'],\n      false: ['cursor-pointer'],\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n})\n\nexport type LabelStylesProps = VariantProps<typeof labelStyles>\n","import { Label, LabelProps } from '../label'\nimport { labelStyles, LabelStylesProps } from './SwitchLabel.styles'\n\nexport interface SwitchLabelProps extends LabelStylesProps, LabelProps {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The id of the element the label is associated with.\n   */\n  htmlFor?: string\n  /**\n   * When true, prevents the user from interacting with the switch item.\n   */\n  disabled?: boolean\n}\n\nexport const SwitchLabel = ({ className, disabled, ...others }: SwitchLabelProps) => (\n  <Label\n    data-spark-component=\"switch-label\"\n    className={labelStyles({ disabled, className })}\n    {...others}\n  />\n)\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\nimport { useId } from 'react'\n\nimport { SwitchInput, SwitchInputProps } from './SwitchInput'\nimport { SwitchLabel } from './SwitchLabel'\n\nexport type SwitchProps = SwitchInputProps\n\nconst ID_PREFIX = ':switch'\n\n/**\n * A toggle control that allows users to switch between two states, typically on and off.\n */\nexport const Switch = ({\n  size = 'md',\n  children,\n  className,\n  id,\n  disabled,\n  reverse = false,\n  ref,\n  ...rest\n}: SwitchProps) => {\n  const field = useFormFieldControl()\n\n  const labelID = `${ID_PREFIX}-label-${useId()}`\n  const innerID = `${ID_PREFIX}-input-${useId()}`\n  const fieldID = field.id || id || innerID\n\n  const switchLabel = children && (\n    <SwitchLabel disabled={disabled} htmlFor={fieldID} id={labelID}>\n      {children}\n    </SwitchLabel>\n  )\n\n  const switchInput = (\n    <SwitchInput\n      ref={ref}\n      size={size}\n      id={fieldID}\n      disabled={disabled}\n      /**\n       * If the switch doesn't have any direct label (children) then we should try to\n       * get an eventual alternative label from FormField.\n       * On last resort, we shouldn't forget to define an aria-label attribute.\n       */\n      aria-labelledby={children ? labelID : field.labelId}\n      {...rest}\n    />\n  )\n\n  const content = reverse ? (\n    <>\n      {switchLabel}\n      {switchInput}\n    </>\n  ) : (\n    <>\n      {switchInput}\n      {switchLabel}\n    </>\n  )\n\n  return (\n    <div\n      data-spark-component=\"switch\"\n      className={cx('gap-md text-body-1 flex items-center', className)}\n    >\n      {content}\n    </div>\n  )\n}\n\nSwitch.displayName = 'Switch'\n"],"mappings":"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"}

package/dist/switch/index.mjs

@@ -13,76 +13,30 @@ import { Switch as h } from "@base-ui/react/switch";
 //#region src/switch/SwitchInput.styles.ts
 var g = r(u([
 	"relative shrink-0 self-baseline",
-	"cursor-pointer",
+	"cursor-pointer aria-disabled:cursor-not-allowed",
 	"rounded-full border-transparent",
 	"hover:ring-4",
 	"transition-colors duration-200 ease-in-out",
-	"disabled:hover:ring-transparent disabled:cursor-not-allowed disabled:opacity-dim-3",
+	"aria-disabled:opacity-dim-3",
 	"focus-visible:u-outline",
-	"data-unchecked:bg-on-surface/dim-3",
+	"text-support bg-support data-unchecked:bg-neutral/dim-3",
 	"u-shadow-border-transition",
-	"overflow-x-hidden"
+	"overflow-x-hidden",
+	"hover:ring-support-container aria-disabled:hover:ring-transparent "
 ]), {
-	variants: {
-		size: l({
-			sm: u([
-				"h-sz-24",
-				"w-sz-40",
-				"border-md"
-			]),
-			md: u([
-				"h-sz-32",
-				"w-sz-56",
-				"border-[4px]"
-			])
-		}),
-		intent: l({
-			main: [
-				"[&[data-checked]]:bg-main",
-				"hover:ring-main-container",
-				"text-main"
-			],
-			support: [
-				"[&[data-checked]]:bg-support",
-				"hover:ring-support-container",
-				"text-support"
-			],
-			accent: [
-				"[&[data-checked]]:bg-accent",
-				"hover:ring-accent-container",
-				"text-accent"
-			],
-			success: [
-				"[&[data-checked]]:bg-success",
-				"hover:ring-success-container",
-				"text-success"
-			],
-			alert: [
-				"[&[data-checked]]:bg-alert",
-				"hover:ring-alert-container",
-				"text-alert"
-			],
-			error: [
-				"[&[data-checked]]:bg-error",
-				"hover:ring-error-container",
-				"text-error"
-			],
-			info: [
-				"[&[data-checked]]:bg-info",
-				"hover:ring-info-container",
-				"text-info"
-			],
-			neutral: [
-				"[&[data-checked]]:bg-neutral",
-				"hover:ring-neutral-container",
-				"text-neutral"
-			]
-		})
-	},
-	defaultVariants: {
-		intent: "support",
-		size: "sm"
-	}
+	variants: { size: l({
+		sm: u([
+			"h-sz-24",
+			"w-sz-40",
+			"border-md"
+		]),
+		md: u([
+			"h-sz-32",
+			"w-sz-56",
+			"border-[4px]"
+		])
+	}) },
+	defaultVariants: { size: "sm" }
 }), _ = r(["pointer-events-none absolute inset-0 flex items-center", "transition-all duration-200 ease-in-out"], { variants: { checked: {
 	true: "translate-x-full",
 	false: "translate-x-0"
@@ -113,41 +67,40 @@ var g = r(u([
 		md: ["h-sz-12 w-sz-12"]
 	}) },
 	defaultVariants: { size: "sm" }
-}), b = ({ checked: t, checkedIcon: r = /* @__PURE__ */ s(f, {}), defaultChecked: i, intent: a, uncheckedIcon: o = /* @__PURE__ */ s(m, {}), size: l = "md", onCheckedChange: u, className: b, required: x, ref: S, asChild: C = !1, ...w }) => {
-	let [T, E] = p(t, i), { name: D, description: O, state: k, isRequired: A, isInvalid: j } = d(), M = k ?? a, N = n(C, "span"), P = !!(x || A), F = (e) => {
-		E(e), u?.(e);
+}), b = ({ checked: t, checkedIcon: r = /* @__PURE__ */ s(f, {}), defaultChecked: i, uncheckedIcon: a = /* @__PURE__ */ s(m, {}), size: o = "md", onCheckedChange: l, className: u, required: b, ref: x, asChild: S = !1, ...C }) => {
+	let [w, T] = p(t, i), { name: E, description: D, isRequired: O, isInvalid: k } = d(), A = n(S, "span"), j = !!(b || O), M = (e) => {
+		T(e), l?.(e);
 	};
 	return /* @__PURE__ */ s(h.Root, {
 		"data-spark-component": "switch-input",
-		ref: S,
-		render: N,
+		ref: x,
+		render: A,
 		className: g({
-			intent: M,
-			size: l,
-			className: b
+			size: o,
+			className: u
 		}),
 		checked: t,
 		defaultChecked: i,
-		onCheckedChange: (e) => F(e),
-		name: D,
-		required: P,
-		"aria-required": P ? !0 : void 0,
-		"aria-invalid": j,
-		"aria-describedby": O,
-		...w,
+		onCheckedChange: (e) => M(e),
+		name: E,
+		required: j,
+		"aria-required": j ? !0 : void 0,
+		"aria-invalid": k,
+		"aria-describedby": D,
+		...C,
 		children: /* @__PURE__ */ s("span", {
-			className: _({ checked: T }),
+			className: _({ checked: w }),
 			children: /* @__PURE__ */ c(h.Thumb, {
 				className: v({
-					size: l,
-					checked: T
+					size: o,
+					checked: w
 				}),
-				children: [T && r && /* @__PURE__ */ s(e, {
-					className: y({ size: l }),
+				children: [w && r && /* @__PURE__ */ s(e, {
+					className: y({ size: o }),
 					children: r
-				}), !T && o && /* @__PURE__ */ s(e, {
-					className: y({ size: l }),
-					children: o
+				}), !w && a && /* @__PURE__ */ s(e, {
+					className: y({ size: o }),
+					children: a
 				})]
 			})
 		})

package/dist/switch/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/switch/SwitchInput.styles.ts","../../src/switch/SwitchInput.tsx","../../src/switch/SwitchLabel.styles.ts","../../src/switch/SwitchLabel.tsx","../../src/switch/Switch.tsx"],"sourcesContent":["import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n  tw([\n    'relative shrink-0 self-baseline',\n    'cursor-pointer',\n    'rounded-full border-transparent',\n    'hover:ring-4',\n    'transition-colors duration-200 ease-in-out',\n    'disabled:hover:ring-transparent disabled:cursor-not-allowed disabled:opacity-dim-3',\n    'focus-visible:u-outline',\n    'data-unchecked:bg-on-surface/dim-3',\n    'u-shadow-border-transition',\n    'overflow-x-hidden',\n  ]),\n  {\n    variants: {\n      /**\n       * Size of the switch input.\n       */\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: tw(['h-sz-24', 'w-sz-40', 'border-md']),\n        md: tw(['h-sz-32', 'w-sz-56', 'border-[4px]']),\n      }),\n      /**\n       * Color scheme of the switch input.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: ['[&[data-checked]]:bg-main', 'hover:ring-main-container', 'text-main'],\n        support: ['[&[data-checked]]:bg-support', 'hover:ring-support-container', 'text-support'],\n        accent: ['[&[data-checked]]:bg-accent', 'hover:ring-accent-container', 'text-accent'],\n        success: ['[&[data-checked]]:bg-success', 'hover:ring-success-container', 'text-success'],\n        alert: ['[&[data-checked]]:bg-alert', 'hover:ring-alert-container', 'text-alert'],\n        error: ['[&[data-checked]]:bg-error', 'hover:ring-error-container', 'text-error'],\n        info: ['[&[data-checked]]:bg-info', 'hover:ring-info-container', 'text-info'],\n        neutral: ['[&[data-checked]]:bg-neutral', 'hover:ring-neutral-container', 'text-neutral'],\n      }),\n    },\n    defaultVariants: {\n      intent: 'support',\n      size: 'sm',\n    },\n  }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n\nexport const thumbWrapperStyles = cva(\n  [\n    'pointer-events-none absolute inset-0 flex items-center',\n    'transition-all duration-200 ease-in-out',\n  ],\n  {\n    variants: {\n      checked: {\n        true: 'translate-x-full',\n        false: 'translate-x-0',\n      },\n    },\n  }\n)\n\nexport const thumbStyles = cva(\n  [\n    'absolute left-0 top-0 flex items-center justify-center',\n    'bg-surface',\n    'rounded-full',\n    'ring-0',\n    'transition-all duration-200 ease-in-out',\n  ],\n  {\n    variants: {\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: ['h-sz-20', 'w-sz-20'],\n        md: ['h-sz-24', 'w-sz-24'],\n      }),\n      checked: {\n        true: '-translate-x-full',\n        false: 'translate-x-0 text-on-surface/dim-2',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n      checked: false,\n    },\n  }\n)\n\nexport const thumbCheckSVGStyles = cva(['transition-opacity duration-200'], {\n  variants: {\n    size: makeVariants<'size', ['sm', 'md']>({\n      sm: ['h-sz-10 w-sz-10'],\n      md: ['h-sz-12 w-sz-12'],\n    }),\n  },\n  defaultVariants: {\n    size: 'sm',\n  },\n})\n","import { Switch as BaseSwitch } from '@base-ui/react/switch'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { Check } from '@spark-ui/icons/Check'\nimport { Close } from '@spark-ui/icons/Close'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRenderSlot } from '../drawer/useRenderSlot'\nimport { Slot } from '../slot'\nimport {\n  styles,\n  type StylesProps,\n  thumbCheckSVGStyles,\n  thumbStyles,\n  thumbWrapperStyles,\n} from './SwitchInput.styles'\n\nexport interface SwitchInputProps\n  extends\n    StylesProps,\n    Omit<ComponentPropsWithRef<typeof BaseSwitch.Root>, 'value' | 'render' | 'onCheckedChange'> {\n  /**\n   * The state of the switch when it is initially rendered. Use when you do not need to control its state.\n   */\n  defaultChecked?: boolean\n  /**\n   * The controlled state of the switch. Must be used in conjunction with `onCheckedChange`.\n   */\n  checked?: boolean\n  /**\n   * Event handler called when the state of the switch changes.\n   */\n  onCheckedChange?: (checked: boolean) => void\n  /**\n   * When `true`, prevents the user from interacting with the switch.\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must check the switch before the owning form can be submitted.\n   */\n  required?: boolean\n  /**\n   * The name of the switch. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * The value given as data when submitted with a name.\n   */\n  value?: string\n  /**\n   * Icon shown inside the thumb of the Switch whenever it is checked\n   */\n  checkedIcon?: ReactNode\n  /**\n   * Icon shown inside the thumb of the Switch whenever it is unchecked\n   */\n  uncheckedIcon?: ReactNode\n  /**\n   * When true, the label will be placed on the left side of the Switch\n   */\n  reverse?: boolean\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n}\n\nexport const SwitchInput = ({\n  checked,\n  checkedIcon = <Check />,\n  defaultChecked,\n  intent: intentProp,\n  uncheckedIcon = <Close />,\n  size = 'md',\n  onCheckedChange,\n  className,\n  required,\n  ref,\n  asChild = false,\n  ...rest\n}: SwitchInputProps) => {\n  const [isChecked, setIsChecked] = useCombinedState(checked, defaultChecked)\n  const { name, description, state, isRequired, isInvalid } = useFormFieldControl()\n  const intent = state ?? intentProp\n  const renderSlot = useRenderSlot(asChild, 'span')\n  const isRequiredComputed = Boolean(required || isRequired)\n\n  const handleCheckedChange = (updatedValue: boolean): void => {\n    setIsChecked(updatedValue)\n    onCheckedChange?.(updatedValue)\n  }\n\n  return (\n    <BaseSwitch.Root\n      data-spark-component=\"switch-input\"\n      ref={ref}\n      render={renderSlot}\n      className={styles({ intent, size, className })}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onCheckedChange={nextChecked => handleCheckedChange(nextChecked)}\n      name={name}\n      required={isRequiredComputed}\n      aria-required={isRequiredComputed ? true : undefined}\n      aria-invalid={isInvalid}\n      aria-describedby={description}\n      {...rest}\n    >\n      <span className={thumbWrapperStyles({ checked: isChecked })}>\n        <BaseSwitch.Thumb className={thumbStyles({ size, checked: isChecked })}>\n          {isChecked && checkedIcon && (\n            <Slot className={thumbCheckSVGStyles({ size })}>{checkedIcon}</Slot>\n          )}\n          {!isChecked && uncheckedIcon && (\n            <Slot className={thumbCheckSVGStyles({ size })}>{uncheckedIcon}</Slot>\n          )}\n        </BaseSwitch.Thumb>\n      </span>\n    </BaseSwitch.Root>\n  )\n}\n\nSwitchInput.displayName = 'SwitchInput'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const labelStyles = cva('default:text-on-surface', {\n  variants: {\n    disabled: {\n      true: ['text-neutral/dim-2', 'cursor-not-allowed'],\n      false: ['cursor-pointer'],\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n})\n\nexport type LabelStylesProps = VariantProps<typeof labelStyles>\n","import { Label, LabelProps } from '../label'\nimport { labelStyles, LabelStylesProps } from './SwitchLabel.styles'\n\nexport interface SwitchLabelProps extends LabelStylesProps, LabelProps {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The id of the element the label is associated with.\n   */\n  htmlFor?: string\n  /**\n   * When true, prevents the user from interacting with the switch item.\n   */\n  disabled?: boolean\n}\n\nexport const SwitchLabel = ({ className, disabled, ...others }: SwitchLabelProps) => (\n  <Label\n    data-spark-component=\"switch-label\"\n    className={labelStyles({ disabled, className })}\n    {...others}\n  />\n)\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\nimport { useId } from 'react'\n\nimport { SwitchInput, SwitchInputProps } from './SwitchInput'\nimport { SwitchLabel } from './SwitchLabel'\n\nexport type SwitchProps = SwitchInputProps\n\nconst ID_PREFIX = ':switch'\n\n/**\n * A toggle control that allows users to switch between two states, typically on and off.\n */\nexport const Switch = ({\n  size = 'md',\n  children,\n  className,\n  id,\n  disabled,\n  reverse = false,\n  ref,\n  ...rest\n}: SwitchProps) => {\n  const field = useFormFieldControl()\n\n  const labelID = `${ID_PREFIX}-label-${useId()}`\n  const innerID = `${ID_PREFIX}-input-${useId()}`\n  const fieldID = field.id || id || innerID\n\n  const switchLabel = children && (\n    <SwitchLabel disabled={disabled} htmlFor={fieldID} id={labelID}>\n      {children}\n    </SwitchLabel>\n  )\n\n  const switchInput = (\n    <SwitchInput\n      ref={ref}\n      size={size}\n      id={fieldID}\n      disabled={disabled}\n      /**\n       * If the switch doesn't have any direct label (children) then we should try to\n       * get an eventual alternative label from FormField.\n       * On last resort, we shouldn't forget to define an aria-label attribute.\n       */\n      aria-labelledby={children ? labelID : field.labelId}\n      {...rest}\n    />\n  )\n\n  const content = reverse ? (\n    <>\n      {switchLabel}\n      {switchInput}\n    </>\n  ) : (\n    <>\n      {switchInput}\n      {switchLabel}\n    </>\n  )\n\n  return (\n    <div\n      data-spark-component=\"switch\"\n      className={cx('gap-md text-body-1 flex items-center', className)}\n    >\n      {content}\n    </div>\n  )\n}\n\nSwitch.displayName = 'Switch'\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/switch/SwitchInput.styles.ts","../../src/switch/SwitchInput.tsx","../../src/switch/SwitchLabel.styles.ts","../../src/switch/SwitchLabel.tsx","../../src/switch/Switch.tsx"],"sourcesContent":["import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n  tw([\n    'relative shrink-0 self-baseline',\n    'cursor-pointer aria-disabled:cursor-not-allowed',\n    'rounded-full border-transparent',\n    'hover:ring-4',\n    'transition-colors duration-200 ease-in-out',\n    'aria-disabled:opacity-dim-3',\n    'focus-visible:u-outline',\n    'text-support bg-support data-unchecked:bg-neutral/dim-3',\n    'u-shadow-border-transition',\n    'overflow-x-hidden',\n    'hover:ring-support-container aria-disabled:hover:ring-transparent ',\n  ]),\n  {\n    variants: {\n      /**\n       * Size of the switch input.\n       */\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: tw(['h-sz-24', 'w-sz-40', 'border-md']),\n        md: tw(['h-sz-32', 'w-sz-56', 'border-[4px]']),\n      }),\n    },\n    defaultVariants: {\n      size: 'sm',\n    },\n  }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n\nexport const thumbWrapperStyles = cva(\n  [\n    'pointer-events-none absolute inset-0 flex items-center',\n    'transition-all duration-200 ease-in-out',\n  ],\n  {\n    variants: {\n      checked: {\n        true: 'translate-x-full',\n        false: 'translate-x-0',\n      },\n    },\n  }\n)\n\nexport const thumbStyles = cva(\n  [\n    'absolute left-0 top-0 flex items-center justify-center',\n    'bg-surface',\n    'rounded-full',\n    'ring-0',\n    'transition-all duration-200 ease-in-out',\n  ],\n  {\n    variants: {\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: ['h-sz-20', 'w-sz-20'],\n        md: ['h-sz-24', 'w-sz-24'],\n      }),\n      checked: {\n        true: '-translate-x-full',\n        false: 'translate-x-0 text-on-surface/dim-2',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n      checked: false,\n    },\n  }\n)\n\nexport const thumbCheckSVGStyles = cva(['transition-opacity duration-200'], {\n  variants: {\n    size: makeVariants<'size', ['sm', 'md']>({\n      sm: ['h-sz-10 w-sz-10'],\n      md: ['h-sz-12 w-sz-12'],\n    }),\n  },\n  defaultVariants: {\n    size: 'sm',\n  },\n})\n","import { Switch as BaseSwitch } from '@base-ui/react/switch'\nimport { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { Check } from '@spark-ui/icons/Check'\nimport { Close } from '@spark-ui/icons/Close'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { useRenderSlot } from '../drawer/useRenderSlot'\nimport { Slot } from '../slot'\nimport {\n  styles,\n  type StylesProps,\n  thumbCheckSVGStyles,\n  thumbStyles,\n  thumbWrapperStyles,\n} from './SwitchInput.styles'\n\nexport interface SwitchInputProps\n  extends\n    StylesProps,\n    Omit<ComponentPropsWithRef<typeof BaseSwitch.Root>, 'value' | 'render' | 'onCheckedChange'> {\n  /**\n   * The state of the switch when it is initially rendered. Use when you do not need to control its state.\n   */\n  defaultChecked?: boolean\n  /**\n   * The controlled state of the switch. Must be used in conjunction with `onCheckedChange`.\n   */\n  checked?: boolean\n  /**\n   * Event handler called when the state of the switch changes.\n   */\n  onCheckedChange?: (checked: boolean) => void\n  /**\n   * When `true`, prevents the user from interacting with the switch.\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must check the switch before the owning form can be submitted.\n   */\n  required?: boolean\n  /**\n   * The name of the switch. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * The value given as data when submitted with a name.\n   */\n  value?: string\n  /**\n   * Icon shown inside the thumb of the Switch whenever it is checked\n   */\n  checkedIcon?: ReactNode\n  /**\n   * Icon shown inside the thumb of the Switch whenever it is unchecked\n   */\n  uncheckedIcon?: ReactNode\n  /**\n   * When true, the label will be placed on the left side of the Switch\n   */\n  reverse?: boolean\n  /**\n   * Change the default rendered element for the one passed as a child, merging their props and behavior.\n   */\n  asChild?: boolean\n}\n\nexport const SwitchInput = ({\n  checked,\n  checkedIcon = <Check />,\n  defaultChecked,\n  uncheckedIcon = <Close />,\n  size = 'md',\n  onCheckedChange,\n  className,\n  required,\n  ref,\n  asChild = false,\n  ...rest\n}: SwitchInputProps) => {\n  const [isChecked, setIsChecked] = useCombinedState(checked, defaultChecked)\n  const { name, description, isRequired, isInvalid } = useFormFieldControl()\n  const renderSlot = useRenderSlot(asChild, 'span')\n  const isRequiredComputed = Boolean(required || isRequired)\n\n  const handleCheckedChange = (updatedValue: boolean): void => {\n    setIsChecked(updatedValue)\n    onCheckedChange?.(updatedValue)\n  }\n\n  return (\n    <BaseSwitch.Root\n      data-spark-component=\"switch-input\"\n      ref={ref}\n      render={renderSlot}\n      className={styles({ size, className })}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onCheckedChange={nextChecked => handleCheckedChange(nextChecked)}\n      name={name}\n      required={isRequiredComputed}\n      aria-required={isRequiredComputed ? true : undefined}\n      aria-invalid={isInvalid}\n      aria-describedby={description}\n      {...rest}\n    >\n      <span className={thumbWrapperStyles({ checked: isChecked })}>\n        <BaseSwitch.Thumb className={thumbStyles({ size, checked: isChecked })}>\n          {isChecked && checkedIcon && (\n            <Slot className={thumbCheckSVGStyles({ size })}>{checkedIcon}</Slot>\n          )}\n          {!isChecked && uncheckedIcon && (\n            <Slot className={thumbCheckSVGStyles({ size })}>{uncheckedIcon}</Slot>\n          )}\n        </BaseSwitch.Thumb>\n      </span>\n    </BaseSwitch.Root>\n  )\n}\n\nSwitchInput.displayName = 'SwitchInput'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const labelStyles = cva('default:text-on-surface', {\n  variants: {\n    disabled: {\n      true: ['text-neutral/dim-2', 'cursor-not-allowed'],\n      false: ['cursor-pointer'],\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n})\n\nexport type LabelStylesProps = VariantProps<typeof labelStyles>\n","import { Label, LabelProps } from '../label'\nimport { labelStyles, LabelStylesProps } from './SwitchLabel.styles'\n\nexport interface SwitchLabelProps extends LabelStylesProps, LabelProps {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The id of the element the label is associated with.\n   */\n  htmlFor?: string\n  /**\n   * When true, prevents the user from interacting with the switch item.\n   */\n  disabled?: boolean\n}\n\nexport const SwitchLabel = ({ className, disabled, ...others }: SwitchLabelProps) => (\n  <Label\n    data-spark-component=\"switch-label\"\n    className={labelStyles({ disabled, className })}\n    {...others}\n  />\n)\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\nimport { useId } from 'react'\n\nimport { SwitchInput, SwitchInputProps } from './SwitchInput'\nimport { SwitchLabel } from './SwitchLabel'\n\nexport type SwitchProps = SwitchInputProps\n\nconst ID_PREFIX = ':switch'\n\n/**\n * A toggle control that allows users to switch between two states, typically on and off.\n */\nexport const Switch = ({\n  size = 'md',\n  children,\n  className,\n  id,\n  disabled,\n  reverse = false,\n  ref,\n  ...rest\n}: SwitchProps) => {\n  const field = useFormFieldControl()\n\n  const labelID = `${ID_PREFIX}-label-${useId()}`\n  const innerID = `${ID_PREFIX}-input-${useId()}`\n  const fieldID = field.id || id || innerID\n\n  const switchLabel = children && (\n    <SwitchLabel disabled={disabled} htmlFor={fieldID} id={labelID}>\n      {children}\n    </SwitchLabel>\n  )\n\n  const switchInput = (\n    <SwitchInput\n      ref={ref}\n      size={size}\n      id={fieldID}\n      disabled={disabled}\n      /**\n       * If the switch doesn't have any direct label (children) then we should try to\n       * get an eventual alternative label from FormField.\n       * On last resort, we shouldn't forget to define an aria-label attribute.\n       */\n      aria-labelledby={children ? labelID : field.labelId}\n      {...rest}\n    />\n  )\n\n  const content = reverse ? (\n    <>\n      {switchLabel}\n      {switchInput}\n    </>\n  ) : (\n    <>\n      {switchInput}\n      {switchLabel}\n    </>\n  )\n\n  return (\n    <div\n      data-spark-component=\"switch\"\n      className={cx('gap-md text-body-1 flex items-center', className)}\n    >\n      {content}\n    </div>\n  )\n}\n\nSwitch.displayName = 'Switch'\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/components",
-  "version": "17.16.0",
+  "version": "18.0.0",
   "license": "MIT",
   "description": "Spark (Leboncoin design system) components.",
   "exports": {
@@ -48,9 +48,9 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.5.0",
-    "@spark-ui/hooks": "17.16.0",
-    "@spark-ui/icons": "17.16.0",
-    "@spark-ui/internal-utils": "17.16.0",
+    "@spark-ui/hooks": "18.0.0",
+    "@spark-ui/icons": "18.0.0",
+    "@spark-ui/internal-utils": "18.0.0",
     "@zag-js/pagination": "1.30.0",
     "@zag-js/react": "1.30.0",
     "class-variance-authority": "0.7.1",
@@ -62,7 +62,7 @@
     "react-snap-carousel": "0.5.1"
   },
   "peerDependencies": {
-    "@spark-ui/theme-utils": "17.16.0",
+    "@spark-ui/theme-utils": "18.0.0",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "tailwindcss": "4.1.18"