@spark-ui/components 15.1.0 → 16.0.0

package/dist/switch/index.mjs

@@ -150,7 +150,7 @@ const W = o(
   );
 };
 F.displayName = "SwitchInput";
-const A = o("", {
+const A = o("default:text-on-surface", {
   variants: {
     disabled: {
       true: ["text-neutral/dim-2", "cursor-not-allowed"],

package/dist/switch/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","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-[state=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', 'basic', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: ['data-[state=checked]:bg-main', 'hover:ring-main-container', 'text-main'],\n        support: [\n          'data-[state=checked]:bg-support',\n          'hover:ring-support-container',\n          'text-support',\n        ],\n        accent: ['data-[state=checked]:bg-accent', 'hover:ring-accent-container', 'text-accent'],\n        basic: ['data-[state=checked]:bg-basic', 'hover:ring-basic-container', 'text-basic'],\n        success: [\n          'data-[state=checked]:bg-success',\n          'hover:ring-success-container',\n          'text-success',\n        ],\n        alert: ['data-[state=checked]:bg-alert', 'hover:ring-alert-container', 'text-alert'],\n        error: ['data-[state=checked]:bg-error', 'hover:ring-error-container', 'text-error'],\n        info: ['data-[state=checked]:bg-info', 'hover:ring-info-container', 'text-info'],\n        neutral: [\n          'data-[state=checked]:bg-neutral',\n          'hover:ring-neutral-container',\n          'text-neutral',\n        ],\n      }),\n    },\n    defaultVariants: {\n      intent: 'basic',\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 { 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 { Switch as RadixSwitch } from 'radix-ui'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\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 StylesProps,\n    Omit<ComponentPropsWithRef<'button'>, 'value'> {\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   * When true, prevents the user from interacting with the switch.\n   */\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\nexport const SwitchInput = ({\n  checked,\n  checkedIcon = <Check />,\n  defaultChecked,\n  intent: intentProp,\n  uncheckedIcon = <Close />,\n  size = 'md',\n  value = 'on',\n  onCheckedChange,\n  className,\n  required,\n  ref,\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\n  const handleCheckedChange = (updatedValue: boolean): void => {\n    setIsChecked(updatedValue)\n    onCheckedChange?.(updatedValue)\n  }\n\n  return (\n    <RadixSwitch.Root\n      data-spark-component=\"switch-input\"\n      ref={ref}\n      className={styles({ intent, size, className })}\n      value={value}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onCheckedChange={handleCheckedChange}\n      name={name}\n      required={required || isRequired}\n      aria-invalid={isInvalid}\n      aria-describedby={description}\n      {...rest}\n    >\n      <span className={thumbWrapperStyles({ checked: isChecked })}>\n        <RadixSwitch.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        </RadixSwitch.Thumb>\n      </span>\n    </RadixSwitch.Root>\n  )\n}\n\nSwitchInput.displayName = 'SwitchInput'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const labelStyles = cva('', {\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\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"],"names":["styles","cva","tw","makeVariants","thumbWrapperStyles","thumbStyles","thumbCheckSVGStyles","SwitchInput","checked","checkedIcon","Check","defaultChecked","intentProp","uncheckedIcon","Close","size","value","onCheckedChange","className","required","ref","rest","isChecked","setIsChecked","useCombinedState","name","description","state","isRequired","isInvalid","useFormFieldControl","intent","handleCheckedChange","updatedValue","jsx","RadixSwitch","jsxs","Slot","labelStyles","SwitchLabel","disabled","others","Label","ID_PREFIX","Switch","children","id","reverse","field","labelID","useId","innerID","fieldID","switchLabel","switchInput","content","Fragment","cx"],"mappings":"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"}
+{"version":3,"file":"index.mjs","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-[state=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', 'basic', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: ['data-[state=checked]:bg-main', 'hover:ring-main-container', 'text-main'],\n        support: [\n          'data-[state=checked]:bg-support',\n          'hover:ring-support-container',\n          'text-support',\n        ],\n        accent: ['data-[state=checked]:bg-accent', 'hover:ring-accent-container', 'text-accent'],\n        basic: ['data-[state=checked]:bg-basic', 'hover:ring-basic-container', 'text-basic'],\n        success: [\n          'data-[state=checked]:bg-success',\n          'hover:ring-success-container',\n          'text-success',\n        ],\n        alert: ['data-[state=checked]:bg-alert', 'hover:ring-alert-container', 'text-alert'],\n        error: ['data-[state=checked]:bg-error', 'hover:ring-error-container', 'text-error'],\n        info: ['data-[state=checked]:bg-info', 'hover:ring-info-container', 'text-info'],\n        neutral: [\n          'data-[state=checked]:bg-neutral',\n          'hover:ring-neutral-container',\n          'text-neutral',\n        ],\n      }),\n    },\n    defaultVariants: {\n      intent: 'basic',\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 { 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 { Switch as RadixSwitch } from 'radix-ui'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\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 StylesProps,\n    Omit<ComponentPropsWithRef<'button'>, 'value'> {\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   * When true, prevents the user from interacting with the switch.\n   */\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\nexport const SwitchInput = ({\n  checked,\n  checkedIcon = <Check />,\n  defaultChecked,\n  intent: intentProp,\n  uncheckedIcon = <Close />,\n  size = 'md',\n  value = 'on',\n  onCheckedChange,\n  className,\n  required,\n  ref,\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\n  const handleCheckedChange = (updatedValue: boolean): void => {\n    setIsChecked(updatedValue)\n    onCheckedChange?.(updatedValue)\n  }\n\n  return (\n    <RadixSwitch.Root\n      data-spark-component=\"switch-input\"\n      ref={ref}\n      className={styles({ intent, size, className })}\n      value={value}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onCheckedChange={handleCheckedChange}\n      name={name}\n      required={required || isRequired}\n      aria-invalid={isInvalid}\n      aria-describedby={description}\n      {...rest}\n    >\n      <span className={thumbWrapperStyles({ checked: isChecked })}>\n        <RadixSwitch.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        </RadixSwitch.Thumb>\n      </span>\n    </RadixSwitch.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\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"],"names":["styles","cva","tw","makeVariants","thumbWrapperStyles","thumbStyles","thumbCheckSVGStyles","SwitchInput","checked","checkedIcon","Check","defaultChecked","intentProp","uncheckedIcon","Close","size","value","onCheckedChange","className","required","ref","rest","isChecked","setIsChecked","useCombinedState","name","description","state","isRequired","isInvalid","useFormFieldControl","intent","handleCheckedChange","updatedValue","jsx","RadixSwitch","jsxs","Slot","labelStyles","SwitchLabel","disabled","others","Label","ID_PREFIX","Switch","children","id","reverse","field","labelID","useId","innerID","fieldID","switchLabel","switchInput","content","Fragment","cx"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-ui/components",
-  "version": "15.1.0",
+  "version": "16.0.0",
   "license": "MIT",
   "description": "Spark (Leboncoin design system) components.",
   "exports": {
@@ -54,9 +54,9 @@
     "@react-aria/toast": "^3.0.0-beta.18",
     "@react-stately/numberfield": "3.9.11",
     "@react-stately/toast": "^3.0.0-beta.7",
-    "@spark-ui/hooks": "^15.1.0",
-    "@spark-ui/icons": "^15.1.0",
-    "@spark-ui/internal-utils": "^15.1.0",
+    "@spark-ui/hooks": "^16.0.0",
+    "@spark-ui/icons": "^16.0.0",
+    "@spark-ui/internal-utils": "^16.0.0",
     "@zag-js/pagination": "1.30.0",
     "@zag-js/react": "1.30.0",
     "class-variance-authority": "0.7.1",