@spark-ui/components 16.2.2 → 17.0.0

package/dist/switch/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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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"}
+{"version":3,"file":"index.js","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 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\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","onCheckedChange","className","required","ref","asChild","rest","isChecked","setIsChecked","useCombinedState","name","description","state","isRequired","isInvalid","useFormFieldControl","intent","renderSlot","useRenderSlot","isRequiredComputed","handleCheckedChange","updatedValue","jsx","BaseSwitch","nextChecked","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/dist/switch/index.mjs

@@ -1,16 +1,17 @@
-import { jsx as e, jsxs as v, Fragment as k } from "react/jsx-runtime";
-import { useFormFieldControl as N } from "@spark-ui/components/form-field";
-import { cva as o, cx as q } from "class-variance-authority";
+import { jsx as e, jsxs as w, Fragment as S } from "react/jsx-runtime";
+import { useFormFieldControl as F } from "@spark-ui/components/form-field";
+import { cva as o, cx as E } from "class-variance-authority";
 import { useId as z } from "react";
-import { useCombinedState as E } from "@spark-ui/hooks/use-combined-state";
-import { Check as G } from "@spark-ui/icons/Check";
-import { Close as P } from "@spark-ui/icons/Close";
-import { Switch as S } from "radix-ui";
-import { S as y } from "../Slot-DLY1rJrG.mjs";
-import { tw as x, makeVariants as h } from "@spark-ui/internal-utils";
-import { Label as T } from "../label/index.mjs";
-const W = o(
-  x([
+import { Switch as y } from "@base-ui/react/switch";
+import { useCombinedState as G } from "@spark-ui/hooks/use-combined-state";
+import { Check as P } from "@spark-ui/icons/Check";
+import { Close as T } from "@spark-ui/icons/Close";
+import { u as W } from "../useRenderSlot-Bta2kdp4.mjs";
+import { S as C } from "../Slot-DLY1rJrG.mjs";
+import { tw as v, makeVariants as h } from "@spark-ui/internal-utils";
+import { Label as X } from "../label/index.mjs";
+const _ = o(
+  v([
     "relative shrink-0 self-baseline",
     "cursor-pointer",
     "rounded-full border-transparent",
@@ -18,7 +19,7 @@ const W = o(
     "transition-colors duration-200 ease-in-out",
     "disabled:hover:ring-transparent disabled:cursor-not-allowed disabled:opacity-dim-3",
     "focus-visible:u-outline",
-    "data-[state=unchecked]:bg-on-surface/dim-3",
+    "data-unchecked:bg-on-surface/dim-3",
     "u-shadow-border-transition",
     "overflow-x-hidden"
   ]),
@@ -28,42 +29,29 @@ const W = o(
        * Size of the switch input.
        */
       size: h({
-        sm: x(["h-sz-24", "w-sz-40", "border-md"]),
-        md: x(["h-sz-32", "w-sz-56", "border-[4px]"])
+        sm: v(["h-sz-24", "w-sz-40", "border-md"]),
+        md: v(["h-sz-32", "w-sz-56", "border-[4px]"])
       }),
       /**
        * Color scheme of the switch input.
        */
       intent: h({
-        main: ["data-[state=checked]:bg-main", "hover:ring-main-container", "text-main"],
-        support: [
-          "data-[state=checked]:bg-support",
-          "hover:ring-support-container",
-          "text-support"
-        ],
-        accent: ["data-[state=checked]:bg-accent", "hover:ring-accent-container", "text-accent"],
-        basic: ["data-[state=checked]:bg-basic", "hover:ring-basic-container", "text-basic"],
-        success: [
-          "data-[state=checked]:bg-success",
-          "hover:ring-success-container",
-          "text-success"
-        ],
-        alert: ["data-[state=checked]:bg-alert", "hover:ring-alert-container", "text-alert"],
-        error: ["data-[state=checked]:bg-error", "hover:ring-error-container", "text-error"],
-        info: ["data-[state=checked]:bg-info", "hover:ring-info-container", "text-info"],
-        neutral: [
-          "data-[state=checked]:bg-neutral",
-          "hover:ring-neutral-container",
-          "text-neutral"
-        ]
+        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: "basic",
+      intent: "support",
       size: "sm"
     }
   }
-), X = o(
+), A = o(
   [
     "pointer-events-none absolute inset-0 flex items-center",
     "transition-all duration-200 ease-in-out"
@@ -76,7 +64,7 @@ const W = o(
       }
     }
   }
-), _ = o(
+), H = o(
   [
     "absolute left-0 top-0 flex items-center justify-center",
     "bg-surface",
@@ -100,7 +88,7 @@ const W = o(
       checked: !1
     }
   }
-), C = o(["transition-opacity duration-200"], {
+), I = o(["transition-opacity duration-200"], {
   variants: {
     size: h({
       sm: ["h-sz-10 w-sz-10"],
@@ -110,47 +98,48 @@ const W = o(
   defaultVariants: {
     size: "sm"
   }
-}), F = ({
-  checked: s,
-  checkedIcon: t = /* @__PURE__ */ e(G, {}),
-  defaultChecked: r,
-  intent: u,
-  uncheckedIcon: i = /* @__PURE__ */ e(P, {}),
+}), R = ({
+  checked: a,
+  checkedIcon: t = /* @__PURE__ */ e(P, {}),
+  defaultChecked: s,
+  intent: p,
+  uncheckedIcon: i = /* @__PURE__ */ e(T, {}),
   size: n = "md",
-  value: b = "on",
-  onCheckedChange: p,
-  className: c,
-  required: l,
-  ref: f,
+  onCheckedChange: f,
+  className: b,
+  required: c,
+  ref: l,
+  asChild: g = !1,
   ...d
 }) => {
-  const [a, m] = E(s, r), { name: g, description: V, state: $, isRequired: D, isInvalid: j } = N(), L = $ ?? u, R = (w) => {
-    m(w), p?.(w);
+  const [r, m] = G(a, s), { name: x, description: V, state: $, isRequired: q, isInvalid: D } = F(), j = $ ?? p, L = W(g, "span"), k = !!(c || q), B = (u) => {
+    m(u), f?.(u);
   };
   return /* @__PURE__ */ e(
-    S.Root,
+    y.Root,
     {
       "data-spark-component": "switch-input",
-      ref: f,
-      className: W({ intent: L, size: n, className: c }),
-      value: b,
-      checked: s,
-      defaultChecked: r,
-      onCheckedChange: R,
-      name: g,
-      required: l || D,
-      "aria-invalid": j,
+      ref: l,
+      render: L,
+      className: _({ intent: j, size: n, className: b }),
+      checked: a,
+      defaultChecked: s,
+      onCheckedChange: (u) => B(u),
+      name: x,
+      required: k,
+      "aria-required": k ? !0 : void 0,
+      "aria-invalid": D,
       "aria-describedby": V,
       ...d,
-      children: /* @__PURE__ */ e("span", { className: X({ checked: a }), children: /* @__PURE__ */ v(S.Thumb, { className: _({ size: n, checked: a }), children: [
-        a && t && /* @__PURE__ */ e(y, { className: C({ size: n }), children: t }),
-        !a && i && /* @__PURE__ */ e(y, { className: C({ size: n }), children: i })
+      children: /* @__PURE__ */ e("span", { className: A({ checked: r }), children: /* @__PURE__ */ w(y.Thumb, { className: H({ size: n, checked: r }), children: [
+        r && t && /* @__PURE__ */ e(C, { className: I({ size: n }), children: t }),
+        !r && i && /* @__PURE__ */ e(C, { className: I({ size: n }), children: i })
       ] }) })
     }
   );
 };
-F.displayName = "SwitchInput";
-const A = o("default:text-on-surface", {
+R.displayName = "SwitchInput";
+const J = o("default:text-on-surface", {
   variants: {
     disabled: {
       true: ["text-neutral/dim-2", "cursor-not-allowed"],
@@ -160,51 +149,51 @@ const A = o("default:text-on-surface", {
   defaultVariants: {
     disabled: !1
   }
-}), B = ({ className: s, disabled: t, ...r }) => /* @__PURE__ */ e(
-  T,
+}), K = ({ className: a, disabled: t, ...s }) => /* @__PURE__ */ e(
+  X,
   {
     "data-spark-component": "switch-label",
-    className: A({ disabled: t, className: s }),
-    ...r
+    className: J({ disabled: t, className: a }),
+    ...s
   }
-), I = ":switch", H = ({
-  size: s = "md",
+), N = ":switch", M = ({
+  size: a = "md",
   children: t,
-  className: r,
-  id: u,
+  className: s,
+  id: p,
   disabled: i,
   reverse: n = !1,
-  ref: b,
-  ...p
+  ref: f,
+  ...b
 }) => {
-  const c = N(), l = `${I}-label-${z()}`, f = `${I}-input-${z()}`, d = c.id || u || f, a = t && /* @__PURE__ */ e(B, { disabled: i, htmlFor: d, id: l, children: t }), m = /* @__PURE__ */ e(
-    F,
+  const c = F(), l = `${N}-label-${z()}`, g = `${N}-input-${z()}`, d = c.id || p || g, r = t && /* @__PURE__ */ e(K, { disabled: i, htmlFor: d, id: l, children: t }), m = /* @__PURE__ */ e(
+    R,
     {
-      ref: b,
-      size: s,
+      ref: f,
+      size: a,
       id: d,
       disabled: i,
       "aria-labelledby": t ? l : c.labelId,
-      ...p
+      ...b
     }
-  ), g = n ? /* @__PURE__ */ v(k, { children: [
-    a,
+  ), x = n ? /* @__PURE__ */ w(S, { children: [
+    r,
     m
-  ] }) : /* @__PURE__ */ v(k, { children: [
+  ] }) : /* @__PURE__ */ w(S, { children: [
     m,
-    a
+    r
   ] });
   return /* @__PURE__ */ e(
     "div",
     {
       "data-spark-component": "switch",
-      className: q("gap-md text-body-1 flex items-center", r),
-      children: g
+      className: E("gap-md text-body-1 flex items-center", s),
+      children: x
     }
   );
 };
-H.displayName = "Switch";
+M.displayName = "Switch";
 export {
-  H as Switch
+  M as Switch
 };
 //# sourceMappingURL=index.mjs.map

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('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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"}
+{"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-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 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\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","onCheckedChange","className","required","ref","asChild","rest","isChecked","setIsChecked","useCombinedState","name","description","state","isRequired","isInvalid","useFormFieldControl","intent","renderSlot","useRenderSlot","isRequiredComputed","handleCheckedChange","updatedValue","jsx","BaseSwitch","nextChecked","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/dist/tabs/TabsTrigger.styles.d.ts

@@ -1,6 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 export declare const triggerVariants: (props?: ({
-    intent?: "main" | "support" | "basic" | null | undefined;
+    intent?: "main" | "support" | null | undefined;
     size?: "sm" | "md" | "xs" | null | undefined;
     hasMenu?: boolean | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;

package/dist/tabs/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),T=require("radix-ui"),s=require("react"),m=require("class-variance-authority"),D=require("@spark-ui/icons/ArrowVerticalLeft"),F=require("@spark-ui/icons/ArrowVerticalRight"),M=require("../Button-B6rA3-e5.js"),j=require("../Icon-CF0W0LKr.js"),q=require("@spark-ui/hooks/use-merge-refs"),K=require("@spark-ui/icons/MoreMenuHorizontal"),H=require("../IconButton-D3g86WpZ.js"),g=require("../popover/index.js"),U=require("@spark-ui/internal-utils"),W=s.createContext({}),R=()=>{const t=s.useContext(W);if(!t)throw Error("useTabsContext must be used within a TabsContext Provider");return t},$=m.cva(["flex","data-[orientation=horizontal]:flex-col","data-[orientation=vertical]:flex-row","max-w-full"]),V=({intent:t="basic",size:o="md",asChild:c=!1,forceMount:i=!1,orientation:n="horizontal",children:a,className:l,ref:d,...e})=>r.jsx(W.Provider,{value:{intent:t,size:o,orientation:n,forceMount:i},children:r.jsx(T.Tabs.Root,{ref:d,asChild:c,orientation:n,className:$({className:l}),"data-spark-component":"tabs",activationMode:"automatic",...e,children:a})});V.displayName="Tabs";const G=m.cva(["w-full p-lg","focus-visible:u-outline-inset"],{variants:{forceMount:{true:"data-[state=inactive]:hidden",false:""}}}),P=({children:t,asChild:o=!1,className:c,ref:i,...n})=>{const{forceMount:a}=R();return r.jsx(T.Tabs.Content,{"data-spark-component":"tabs-content",ref:i,forceMount:a||n.forceMount,className:G({className:c,forceMount:a}),asChild:o,...n,children:t})};P.displayName="Tabs.Content";const J=m.cva(["relative flex"]),Q=m.cva(["flex w-full","data-[orientation=horizontal]:flex-row","data-[orientation=vertical]:flex-col","overflow-y-hidden u-no-scrollbar data-[orientation=vertical]:overflow-x-hidden","after:flex after:shrink after:grow after:border-outline","data-[orientation=horizontal]:after:border-b-sm","data-[orientation=vertical]:after:border-r-sm"]),S=m.cva(["h-auto! flex-none","border-b-sm border-outline","outline-hidden","focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset!"]),X=(t,o)=>{const[c,i]=s.useState({width:void 0,height:void 0}),n=s.useRef(null),a=s.useRef(o);return s.useEffect(()=>{a.current=o},[o]),s.useEffect(()=>{const l=t&&"current"in t?t.current:t;if(!(!l||n.current))return n.current=new ResizeObserver(([d])=>{const{inlineSize:e,blockSize:x}=d?.borderBoxSize?.[0]??{};a.current?.(d),i({width:e,height:x})}),n.current.observe(l),()=>{n.current&&n.current.unobserve(l)}},[t,n,a]),c},N=({asChild:t=!1,loop:o=!1,children:c,className:i,ref:n,...a})=>{const l=s.useRef(null),d=s.useRef(null),e=n||d,{orientation:x}=R(),{width:w}=X(l),[u,h]=s.useState({prev:"hidden",next:"hidden"});s.useEffect(()=>{typeof e=="function"||!e.current||h(x!=="horizontal"?{prev:"hidden",next:"hidden"}:{prev:e.current.scrollWidth>e.current.clientWidth?"visible":"hidden",next:e.current.scrollWidth>e.current.clientWidth?"visible":"hidden"})},[x,e,w]),s.useEffect(()=>{if(typeof e=="function"||!e.current||u.prev==="hidden"||o)return;const v=f=>{h({prev:f.scrollLeft>0?"visible":"disabled",next:f.scrollLeft+f.clientWidth<f.scrollWidth?"visible":"disabled"})},p=e.current;return v(p),p.addEventListener("scroll",({target:f})=>v(f)),()=>p.removeEventListener("scroll",({target:f})=>v(f))},[e,u.prev,o]);const z=()=>{if(typeof e=="function"||!e.current)return;const v=o&&e.current.scrollLeft<=0;e.current.scrollTo({left:v?e.current.scrollLeft+e.current.scrollWidth-e.current.clientWidth:e.current.scrollLeft-e.current.clientWidth,behavior:"smooth"})},y=()=>{if(typeof e=="function"||!e.current)return;const v=o&&e.current.scrollLeft+e.current.clientWidth>=e.current.scrollWidth;e.current.scrollTo({left:v?0:e.current.scrollLeft+e.current.clientWidth,behavior:"smooth"})};return r.jsxs("div",{className:J({className:i}),ref:l,children:[u.prev!=="hidden"&&r.jsx(M.Button,{shape:"square",intent:"surface",size:"sm",className:S(),onClick:z,disabled:u.prev==="disabled","aria-label":"Scroll left",children:r.jsx(j.Icon,{children:r.jsx(D.ArrowVerticalLeft,{})})}),r.jsx(T.Tabs.List,{"data-spark-component":"tabs-list",ref:e,className:Q(),asChild:t,loop:o,...a,children:c}),u.next!=="hidden"&&r.jsx(M.Button,{shape:"square",intent:"surface",size:"sm",className:S(),onClick:y,disabled:u.next==="disabled","aria-label":"Scroll right",children:r.jsx(j.Icon,{children:r.jsx(F.ArrowVerticalRight,{})})})]})};N.displayName="Tabs.List";const C=s.createContext(void 0),E=()=>{const t=s.useContext(C);if(!t)throw new Error("TabsPopover components must be used within TabsPopover");return t},I=s.forwardRef(({"aria-label":t,children:o,...c},i)=>{const{popoverTriggerRef:n}=E(),a=q.useMergeRefs(i,n);return r.jsx(g.Popover.Trigger,{asChild:!0,...c,children:r.jsx(H.IconButton,{ref:a,size:"sm",intent:"surfaceInverse",design:"ghost","aria-label":t,tabIndex:-1,children:r.jsx(j.Icon,{children:o||r.jsx(K.MoreMenuHorizontal,{})})})})});I.displayName="Popover.Trigger";const A=s.forwardRef(({side:t,align:o="start",className:c,...i},n)=>{const{popoverSide:a}=E(),l=m.cx("gap-sm flex flex-col",c);return r.jsx(g.Popover.Content,{ref:n,...i,side:t??a,align:o,className:l})});A.displayName="Popover.Content";const B=({popoverSide:t,popoverTriggerRef:o,children:c})=>{const i=s.useMemo(()=>({popoverSide:t,popoverTriggerRef:o}),[t,o]),a=Object.assign((l=>r.jsx(C.Provider,{value:i,children:r.jsx(g.Popover,{...l,children:l.children})})),g.Popover,{Content:A,Trigger:I});return r.jsx(C.Provider,{value:i,children:c(a)})};B.displayName="Popover";const Y=m.cva(["px-md","relative flex flex-none items-center","border-outline","hover:not-disabled:bg-surface-hovered","after:absolute","data-[state=active]:font-bold","data-[state=inactive]:not-disabled:cursor-pointer","data-[orientation=horizontal]:border-b-sm data-[orientation=horizontal]:after:inset-x-0 data-[orientation=horizontal]:after:bottom-[-1px] data-[orientation=horizontal]:after:h-sz-2","data-[orientation=vertical]:border-r-sm data-[orientation=vertical]:after:inset-y-0 data-[orientation=vertical]:after:right-[-1px] data-[orientation=vertical]:after:w-sz-2","focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset","disabled:cursor-not-allowed disabled:opacity-dim-3","gap-md [&>*:first-child]:ml-md [&>*:last-child]:mr-md","[&>svg:last-child:first-child]:mx-auto"],{variants:{intent:U.makeVariants({main:["data-[state=active]:text-main data-[state=active]:after:bg-main"],support:["data-[state=active]:text-support data-[state=active]:after:bg-support"],basic:["data-[state=active]:text-basic data-[state=active]:after:bg-basic"]}),size:{xs:["h-sz-32 min-w-sz-32 text-caption"],sm:["h-sz-36 min-w-sz-36 text-body-2"],md:["h-sz-40 min-w-sz-40 text-body-1"]},hasMenu:{true:"pr-3xl"},orientation:{horizontal:"",vertical:""}},compoundVariants:[{hasMenu:!0,orientation:"vertical",class:"w-full"}],defaultVariants:{intent:"basic",size:"md",hasMenu:!1,orientation:"horizontal"}}),L=({asChild:t=!1,value:o,disabled:c=!1,children:i,className:n,ref:a,onKeyDown:l,renderMenu:d,...e})=>{const{intent:x,size:w,orientation:u}=R(),h=s.useRef(null),z=s.useRef(null),y=q.useMergeRefs(a,z),v=b=>{b.key==="F10"&&b.shiftKey&&d&&h.current&&(b.preventDefault(),h.current.click()),l?.(b)},p=!!d,f=u==="vertical"?"right":"bottom",k=r.jsx(T.Tabs.Trigger,{"data-spark-component":"tabs-trigger",ref:y,className:Y({intent:x,size:w,hasMenu:p,orientation:u??"horizontal",className:n}),asChild:t,disabled:c,value:o,onFocus:({target:b})=>b.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"}),onKeyDown:v,"aria-haspopup":p?"true":void 0,...e,children:i});return p?r.jsxs("div",{className:u==="vertical"?"relative w-full":"relative",children:[k,r.jsx("div",{className:"right-md mr-md pointer-events-auto absolute top-1/2 -translate-y-1/2",children:r.jsx(B,{popoverSide:f,popoverTriggerRef:h,children:b=>d?.({Popover:b})})})]}):k};L.displayName="Tabs.Trigger";const O=Object.assign(V,{List:N,Trigger:L,Content:P});O.displayName="Tabs";N.displayName="Tabs.List";L.displayName="Tabs.Trigger";P.displayName="Tabs.Content";exports.Tabs=O;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),T=require("radix-ui"),s=require("react"),m=require("class-variance-authority"),D=require("@spark-ui/icons/ArrowVerticalLeft"),F=require("@spark-ui/icons/ArrowVerticalRight"),M=require("../Button-FZceRWG2.js"),j=require("../Icon-C-cNTnzd.js"),q=require("@spark-ui/hooks/use-merge-refs"),K=require("@spark-ui/icons/MoreMenuHorizontal"),H=require("../IconButton-BR1bJSQA.js"),g=require("../popover/index.js"),U=require("@spark-ui/internal-utils"),W=s.createContext({}),R=()=>{const t=s.useContext(W);if(!t)throw Error("useTabsContext must be used within a TabsContext Provider");return t},$=m.cva(["flex","data-[orientation=horizontal]:flex-col","data-[orientation=vertical]:flex-row","max-w-full"]),V=({intent:t="support",size:o="md",asChild:c=!1,forceMount:a=!1,orientation:n="horizontal",children:i,className:l,ref:d,...e})=>r.jsx(W.Provider,{value:{intent:t,size:o,orientation:n,forceMount:a},children:r.jsx(T.Tabs.Root,{ref:d,asChild:c,orientation:n,className:$({className:l}),"data-spark-component":"tabs",activationMode:"automatic",...e,children:i})});V.displayName="Tabs";const G=m.cva(["w-full p-lg","focus-visible:u-outline-inset"],{variants:{forceMount:{true:"data-[state=inactive]:hidden",false:""}}}),P=({children:t,asChild:o=!1,className:c,ref:a,...n})=>{const{forceMount:i}=R();return r.jsx(T.Tabs.Content,{"data-spark-component":"tabs-content",ref:a,forceMount:i||n.forceMount,className:G({className:c,forceMount:i}),asChild:o,...n,children:t})};P.displayName="Tabs.Content";const J=m.cva(["relative flex"]),Q=m.cva(["flex w-full","data-[orientation=horizontal]:flex-row","data-[orientation=vertical]:flex-col","overflow-y-hidden u-no-scrollbar data-[orientation=vertical]:overflow-x-hidden","after:flex after:shrink after:grow after:border-outline","data-[orientation=horizontal]:after:border-b-sm","data-[orientation=vertical]:after:border-r-sm"]),S=m.cva(["h-auto! flex-none","border-b-sm border-outline","outline-hidden","focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset!"]),X=(t,o)=>{const[c,a]=s.useState({width:void 0,height:void 0}),n=s.useRef(null),i=s.useRef(o);return s.useEffect(()=>{i.current=o},[o]),s.useEffect(()=>{const l=t&&"current"in t?t.current:t;if(!(!l||n.current))return n.current=new ResizeObserver(([d])=>{const{inlineSize:e,blockSize:x}=d?.borderBoxSize?.[0]??{};i.current?.(d),a({width:e,height:x})}),n.current.observe(l),()=>{n.current&&n.current.unobserve(l)}},[t,n,i]),c},N=({asChild:t=!1,loop:o=!1,children:c,className:a,ref:n,...i})=>{const l=s.useRef(null),d=s.useRef(null),e=n||d,{orientation:x}=R(),{width:w}=X(l),[u,b]=s.useState({prev:"hidden",next:"hidden"});s.useEffect(()=>{typeof e=="function"||!e.current||b(x!=="horizontal"?{prev:"hidden",next:"hidden"}:{prev:e.current.scrollWidth>e.current.clientWidth?"visible":"hidden",next:e.current.scrollWidth>e.current.clientWidth?"visible":"hidden"})},[x,e,w]),s.useEffect(()=>{if(typeof e=="function"||!e.current||u.prev==="hidden"||o)return;const v=f=>{b({prev:f.scrollLeft>0?"visible":"disabled",next:f.scrollLeft+f.clientWidth<f.scrollWidth?"visible":"disabled"})},p=e.current;return v(p),p.addEventListener("scroll",({target:f})=>v(f)),()=>p.removeEventListener("scroll",({target:f})=>v(f))},[e,u.prev,o]);const z=()=>{if(typeof e=="function"||!e.current)return;const v=o&&e.current.scrollLeft<=0;e.current.scrollTo({left:v?e.current.scrollLeft+e.current.scrollWidth-e.current.clientWidth:e.current.scrollLeft-e.current.clientWidth,behavior:"smooth"})},y=()=>{if(typeof e=="function"||!e.current)return;const v=o&&e.current.scrollLeft+e.current.clientWidth>=e.current.scrollWidth;e.current.scrollTo({left:v?0:e.current.scrollLeft+e.current.clientWidth,behavior:"smooth"})};return r.jsxs("div",{className:J({className:a}),ref:l,children:[u.prev!=="hidden"&&r.jsx(M.Button,{shape:"square",intent:"surface",size:"sm",className:S(),onClick:z,disabled:u.prev==="disabled","aria-label":"Scroll left",children:r.jsx(j.Icon,{children:r.jsx(D.ArrowVerticalLeft,{})})}),r.jsx(T.Tabs.List,{"data-spark-component":"tabs-list",ref:e,className:Q(),asChild:t,loop:o,...i,children:c}),u.next!=="hidden"&&r.jsx(M.Button,{shape:"square",intent:"surface",size:"sm",className:S(),onClick:y,disabled:u.next==="disabled","aria-label":"Scroll right",children:r.jsx(j.Icon,{children:r.jsx(F.ArrowVerticalRight,{})})})]})};N.displayName="Tabs.List";const C=s.createContext(void 0),E=()=>{const t=s.useContext(C);if(!t)throw new Error("TabsPopover components must be used within TabsPopover");return t},I=s.forwardRef(({"aria-label":t,children:o,...c},a)=>{const{popoverTriggerRef:n}=E(),i=q.useMergeRefs(a,n);return r.jsx(g.Popover.Trigger,{asChild:!0,...c,children:r.jsx(H.IconButton,{ref:i,size:"sm",intent:"surfaceInverse",design:"ghost","aria-label":t,tabIndex:-1,children:r.jsx(j.Icon,{children:o||r.jsx(K.MoreMenuHorizontal,{})})})})});I.displayName="Popover.Trigger";const A=s.forwardRef(({side:t,align:o="start",className:c,...a},n)=>{const{popoverSide:i}=E(),l=m.cx("gap-sm flex flex-col",c);return r.jsx(g.Popover.Content,{ref:n,...a,side:t??i,align:o,className:l})});A.displayName="Popover.Content";const B=({popoverSide:t,popoverTriggerRef:o,children:c})=>{const a=s.useMemo(()=>({popoverSide:t,popoverTriggerRef:o}),[t,o]),i=Object.assign((l=>r.jsx(C.Provider,{value:a,children:r.jsx(g.Popover,{...l,children:l.children})})),g.Popover,{Content:A,Trigger:I});return r.jsx(C.Provider,{value:a,children:c(i)})};B.displayName="Popover";const Y=m.cva(["px-md","relative flex flex-none items-center","border-outline","hover:not-disabled:bg-surface-hovered","after:absolute","data-[state=active]:font-bold","data-[state=inactive]:not-disabled:cursor-pointer","data-[orientation=horizontal]:border-b-sm data-[orientation=horizontal]:after:inset-x-0 data-[orientation=horizontal]:after:bottom-[-1px] data-[orientation=horizontal]:after:h-sz-2","data-[orientation=vertical]:border-r-sm data-[orientation=vertical]:after:inset-y-0 data-[orientation=vertical]:after:right-[-1px] data-[orientation=vertical]:after:w-sz-2","focus-visible:border-none focus-visible:bg-surface-hovered focus-visible:u-outline-inset","disabled:cursor-not-allowed disabled:opacity-dim-3","gap-md [&>*:first-child]:ml-md [&>*:last-child]:mr-md","[&>svg:last-child:first-child]:mx-auto"],{variants:{intent:U.makeVariants({main:["data-[state=active]:text-main data-[state=active]:after:bg-main"],support:["data-[state=active]:text-support data-[state=active]:after:bg-support"]}),size:{xs:["h-sz-32 min-w-sz-32 text-caption"],sm:["h-sz-36 min-w-sz-36 text-body-2"],md:["h-sz-40 min-w-sz-40 text-body-1"]},hasMenu:{true:"pr-3xl"},orientation:{horizontal:"",vertical:""}},compoundVariants:[{hasMenu:!0,orientation:"vertical",class:"w-full"}],defaultVariants:{intent:"support",size:"md",hasMenu:!1,orientation:"horizontal"}}),L=({asChild:t=!1,value:o,disabled:c=!1,children:a,className:n,ref:i,onKeyDown:l,renderMenu:d,...e})=>{const{intent:x,size:w,orientation:u}=R(),b=s.useRef(null),z=s.useRef(null),y=q.useMergeRefs(i,z),v=h=>{h.key==="F10"&&h.shiftKey&&d&&b.current&&(h.preventDefault(),b.current.click()),l?.(h)},p=!!d,f=u==="vertical"?"right":"bottom",k=r.jsx(T.Tabs.Trigger,{"data-spark-component":"tabs-trigger",ref:y,className:Y({intent:x,size:w,hasMenu:p,orientation:u??"horizontal",className:n}),asChild:t,disabled:c,value:o,onFocus:({target:h})=>h.scrollIntoView({behavior:"smooth",block:"nearest",inline:"nearest"}),onKeyDown:v,"aria-haspopup":p?"true":void 0,...e,children:a});return p?r.jsxs("div",{className:u==="vertical"?"relative w-full":"relative",children:[k,r.jsx("div",{className:"right-md mr-md pointer-events-auto absolute top-1/2 -translate-y-1/2",children:r.jsx(B,{popoverSide:f,popoverTriggerRef:b,children:h=>d?.({Popover:h})})})]}):k};L.displayName="Tabs.Trigger";const O=Object.assign(V,{List:N,Trigger:L,Content:P});O.displayName="Tabs";N.displayName="Tabs.List";L.displayName="Tabs.Trigger";P.displayName="Tabs.Content";exports.Tabs=O;
 //# sourceMappingURL=index.js.map