@spark-ui/components 13.1.4 → 13.2.0

package/dist/switch/index.mjs

@@ -1,27 +1,16 @@
-import {
-  Label
-} from "../chunk-HLXYG643.mjs";
-import {
-  Slot
-} from "../chunk-6QCEPQ3U.mjs";
-
-// src/switch/Switch.tsx
-import { useFormFieldControl as useFormFieldControl2 } from "@spark-ui/components/form-field";
-import { cx } from "class-variance-authority";
-import { useId } from "react";
-
-// src/switch/SwitchInput.tsx
-import { useFormFieldControl } from "@spark-ui/components/form-field";
-import { useCombinedState } from "@spark-ui/hooks/use-combined-state";
-import { Check } from "@spark-ui/icons/Check";
-import { Close } from "@spark-ui/icons/Close";
-import { Switch as RadixSwitch } from "radix-ui";
-
-// src/switch/SwitchInput.styles.ts
-import { makeVariants, tw } from "@spark-ui/internal-utils";
-import { cva } from "class-variance-authority";
-var styles = cva(
-  tw([
+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 { 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 { a as y } from "../Slot-D2Bbf8Gw.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([
     "relative shrink-0 self-baseline",
     "cursor-pointer",
     "rounded-full border-transparent",
@@ -38,14 +27,14 @@ var styles = cva(
       /**
        * Size of the switch input.
        */
-      size: makeVariants({
-        sm: tw(["h-sz-24", "w-sz-40", "border-md"]),
-        md: tw(["h-sz-32", "w-sz-56", "border-[4px]"])
+      size: h({
+        sm: x(["h-sz-24", "w-sz-40", "border-md"]),
+        md: x(["h-sz-32", "w-sz-56", "border-[4px]"])
       }),
       /**
        * Color scheme of the switch input.
        */
-      intent: makeVariants({
+      intent: h({
         main: ["data-[state=checked]:bg-main", "hover:ring-main-container", "text-main"],
         support: [
           "data-[state=checked]:bg-support",
@@ -74,8 +63,7 @@ var styles = cva(
       size: "sm"
     }
   }
-);
-var thumbWrapperStyles = cva(
+), X = o(
   [
     "pointer-events-none absolute inset-0 flex items-center",
     "transition-all duration-200 ease-in-out"
@@ -88,8 +76,7 @@ var thumbWrapperStyles = cva(
       }
     }
   }
-);
-var thumbStyles = cva(
+), _ = o(
   [
     "absolute left-0 top-0 flex items-center justify-center",
     "bg-surface",
@@ -99,7 +86,7 @@ var thumbStyles = cva(
   ],
   {
     variants: {
-      size: makeVariants({
+      size: h({
         sm: ["h-sz-20", "w-sz-20"],
         md: ["h-sz-24", "w-sz-24"]
       }),
@@ -110,13 +97,12 @@ var thumbStyles = cva(
     },
     defaultVariants: {
       size: "sm",
-      checked: false
+      checked: !1
     }
   }
-);
-var thumbCheckSVGStyles = cva(["transition-opacity duration-200"], {
+), C = o(["transition-opacity duration-200"], {
   variants: {
-    size: makeVariants({
+    size: h({
       sm: ["h-sz-10 w-sz-10"],
       md: ["h-sz-12 w-sz-12"]
     })
@@ -124,58 +110,47 @@ var thumbCheckSVGStyles = cva(["transition-opacity duration-200"], {
   defaultVariants: {
     size: "sm"
   }
-});
-
-// src/switch/SwitchInput.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var SwitchInput = ({
-  checked,
-  checkedIcon = /* @__PURE__ */ jsx(Check, {}),
-  defaultChecked,
-  intent: intentProp,
-  uncheckedIcon = /* @__PURE__ */ jsx(Close, {}),
-  size = "md",
-  value = "on",
-  onCheckedChange,
-  className,
-  required,
-  ref,
-  ...rest
+}), F = ({
+  checked: s,
+  checkedIcon: t = /* @__PURE__ */ e(G, {}),
+  defaultChecked: r,
+  intent: u,
+  uncheckedIcon: i = /* @__PURE__ */ e(P, {}),
+  size: n = "md",
+  value: b = "on",
+  onCheckedChange: p,
+  className: c,
+  required: l,
+  ref: f,
+  ...d
 }) => {
-  const [isChecked, setIsChecked] = useCombinedState(checked, defaultChecked);
-  const { name, description, state, isRequired, isInvalid } = useFormFieldControl();
-  const intent = state ?? intentProp;
-  const handleCheckedChange = (updatedValue) => {
-    setIsChecked(updatedValue);
-    onCheckedChange?.(updatedValue);
+  const [a, m] = E(s, r), { name: g, description: V, state: $, isRequired: D, isInvalid: j } = N(), L = $ ?? u, R = (w) => {
+    m(w), p?.(w);
   };
-  return /* @__PURE__ */ jsx(
-    RadixSwitch.Root,
+  return /* @__PURE__ */ e(
+    S.Root,
     {
       "data-spark-component": "switch-input",
-      ref,
-      className: styles({ intent, size, className }),
-      value,
-      checked,
-      defaultChecked,
-      onCheckedChange: handleCheckedChange,
-      name,
-      required: required || isRequired,
-      "aria-invalid": isInvalid,
-      "aria-describedby": description,
-      ...rest,
-      children: /* @__PURE__ */ jsx("span", { className: thumbWrapperStyles({ checked: isChecked }), children: /* @__PURE__ */ jsxs(RadixSwitch.Thumb, { className: thumbStyles({ size, checked: isChecked }), children: [
-        isChecked && checkedIcon && /* @__PURE__ */ jsx(Slot, { className: thumbCheckSVGStyles({ size }), children: checkedIcon }),
-        !isChecked && uncheckedIcon && /* @__PURE__ */ jsx(Slot, { className: thumbCheckSVGStyles({ size }), children: uncheckedIcon })
+      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,
+      "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 })
       ] }) })
     }
   );
 };
-SwitchInput.displayName = "SwitchInput";
-
-// src/switch/SwitchLabel.styles.ts
-import { cva as cva2 } from "class-variance-authority";
-var labelStyles = cva2("", {
+F.displayName = "SwitchInput";
+const A = o("", {
   variants: {
     disabled: {
       true: ["text-neutral/dim-2", "cursor-not-allowed"],
@@ -183,68 +158,53 @@ var labelStyles = cva2("", {
     }
   },
   defaultVariants: {
-    disabled: false
+    disabled: !1
   }
-});
-
-// src/switch/SwitchLabel.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var SwitchLabel = ({ className, disabled, ...others }) => /* @__PURE__ */ jsx2(
-  Label,
+}), B = ({ className: s, disabled: t, ...r }) => /* @__PURE__ */ e(
+  T,
   {
     "data-spark-component": "switch-label",
-    className: labelStyles({ disabled, className }),
-    ...others
+    className: A({ disabled: t, className: s }),
+    ...r
   }
-);
-
-// src/switch/Switch.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var ID_PREFIX = ":switch";
-var Switch = ({
-  size = "md",
-  children,
-  className,
-  id,
-  disabled,
-  reverse = false,
-  ref,
-  ...rest
+), I = ":switch", H = ({
+  size: s = "md",
+  children: t,
+  className: r,
+  id: u,
+  disabled: i,
+  reverse: n = !1,
+  ref: b,
+  ...p
 }) => {
-  const field = useFormFieldControl2();
-  const labelID = `${ID_PREFIX}-label-${useId()}`;
-  const innerID = `${ID_PREFIX}-input-${useId()}`;
-  const fieldID = field.id || id || innerID;
-  const switchLabel = children && /* @__PURE__ */ jsx3(SwitchLabel, { disabled, htmlFor: fieldID, id: labelID, children });
-  const switchInput = /* @__PURE__ */ jsx3(
-    SwitchInput,
+  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,
     {
-      ref,
-      size,
-      id: fieldID,
-      disabled,
-      "aria-labelledby": children ? labelID : field.labelId,
-      ...rest
+      ref: b,
+      size: s,
+      id: d,
+      disabled: i,
+      "aria-labelledby": t ? l : c.labelId,
+      ...p
     }
-  );
-  const content = reverse ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-    switchLabel,
-    switchInput
-  ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
-    switchInput,
-    switchLabel
+  ), g = n ? /* @__PURE__ */ v(k, { children: [
+    a,
+    m
+  ] }) : /* @__PURE__ */ v(k, { children: [
+    m,
+    a
   ] });
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ e(
     "div",
     {
       "data-spark-component": "switch",
-      className: cx("gap-md text-body-1 flex items-center", className),
-      children: content
+      className: q("gap-md text-body-1 flex items-center", r),
+      children: g
     }
   );
 };
-Switch.displayName = "Switch";
+H.displayName = "Switch";
 export {
-  Switch
+  H as Switch
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/switch/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/switch/Switch.tsx","../../src/switch/SwitchInput.tsx","../../src/switch/SwitchInput.styles.ts","../../src/switch/SwitchLabel.styles.ts","../../src/switch/SwitchLabel.tsx"],"sourcesContent":["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","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 { 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 { 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"],"mappings":"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","names":["useFormFieldControl","cva","jsx","jsx","jsxs","useFormFieldControl"]}
+{"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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"}

package/dist/tabs/Tabs.d.ts

@@ -0,0 +1,24 @@
+import { Tabs as RadixTabs } from 'radix-ui';
+import { PropsWithChildren, Ref } from 'react';
+import { TabsTriggerVariantsProps } from './TabsTrigger.styles';
+export interface TabsProps extends Omit<RadixTabs.TabsProps, 'activationMode'>, PropsWithChildren<Omit<TabsTriggerVariantsProps, 'orientation'>> {
+    /**
+     * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * Whether to keep inactive tabs content in the DOM.
+     * @default false
+     */
+    forceMount?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * @deprecated
+ */
+export type TabsRootProps = TabsProps;
+export declare const Tabs: {
+    ({ intent, size, asChild, forceMount, orientation, children, className, ref, ...rest }: TabsProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/tabs/TabsContent.d.ts

@@ -0,0 +1,22 @@
+import { Tabs as RadixTabs } from 'radix-ui';
+import { PropsWithChildren, Ref } from 'react';
+export interface TabsContentProps extends PropsWithChildren<Omit<RadixTabs.TabsContentProps, 'forceMount'>> {
+    /**
+     * A unique value that associates the content with a trigger.
+     */
+    value: string;
+    /**
+     * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.
+     */
+    forceMount?: true;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const TabsContent: {
+    ({ children, asChild, className, ref, ...rest }: TabsContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/tabs/TabsContent.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const contentStyles: (props?: ({
+    forceMount?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/tabs/TabsContext.d.ts

@@ -0,0 +1,7 @@
+import { Tabs as RadixTabs } from 'radix-ui';
+import { TabsTriggerVariantsProps } from './TabsTrigger.styles';
+export type TabsContextInterface = TabsTriggerVariantsProps & Pick<RadixTabs.TabsProps, 'orientation'> & {
+    forceMount?: boolean;
+};
+export declare const TabsContext: import('react').Context<TabsContextInterface>;
+export declare const useTabsContext: () => TabsContextInterface;

package/dist/tabs/TabsList.d.ts

@@ -0,0 +1,20 @@
+import { Tabs as RadixTabs } from 'radix-ui';
+import { ReactElement, Ref } from 'react';
+export interface TabsListProps extends Omit<RadixTabs.TabsListProps, 'children'> {
+    /**
+     * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * When true, keyboard navigation will loop from last tab to first, and vice versa.
+     * @default false
+     */
+    loop?: boolean;
+    children: ReactElement[] | ReactElement;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const TabsList: {
+    ({ asChild, loop, children, className, ref, ...rest }: TabsListProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/tabs/TabsList.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const wrapperStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const listStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const navigationArrowStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/tabs/TabsPopover.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode, Ref } from 'react';
+export interface TabsPopoverProps {
+    /**
+     * The tab value this popover is associated with (automatically set by Tabs.Trigger)
+     */
+    tabValue?: string;
+    /**
+     * Whether this tab is currently active (automatically set by Tabs.Trigger)
+     */
+    isTabActive?: boolean;
+    /**
+     * Whether the popover is open
+     */
+    open?: boolean;
+    /**
+     * Callback when popover open state changes
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The popover content - typically a Popover or other overlay component
+     */
+    children: ReactNode;
+    /**
+     * Additional className for positioning
+     */
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const TabsPopover: import('react').ForwardRefExoticComponent<Omit<TabsPopoverProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/tabs/TabsPopoverAbstraction.d.ts

@@ -0,0 +1,27 @@
+import { ComponentType, ReactNode, RefObject } from 'react';
+import { Popover as SparkPopover } from '../popover';
+import { PopoverProps } from '../popover/Popover';
+import { ContentProps as PopoverContentProps } from '../popover/PopoverContent';
+import { TriggerProps as PopoverTriggerProps } from '../popover/PopoverTrigger';
+interface TabsPopoverTriggerProps extends Omit<PopoverTriggerProps, 'asChild' | 'children'> {
+    'aria-label': string;
+    children?: ReactNode;
+}
+declare const TabsPopoverTrigger: import('react').ForwardRefExoticComponent<Omit<TabsPopoverTriggerProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+declare const TabsPopoverContent: import('react').ForwardRefExoticComponent<Omit<PopoverContentProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export type TabsPopoverTriggerComponent = typeof TabsPopoverTrigger;
+export type TabsPopoverContentComponent = typeof TabsPopoverContent;
+export type ConfiguredPopoverComponent = ComponentType<PopoverProps> & Omit<typeof SparkPopover, 'Content' | 'Trigger'> & {
+    Content: TabsPopoverContentComponent;
+    Trigger: TabsPopoverTriggerComponent;
+};
+interface PopoverAbstractionProps {
+    popoverSide: 'right' | 'bottom';
+    popoverTriggerRef: RefObject<HTMLButtonElement | null>;
+    children: (Popover: ConfiguredPopoverComponent) => ReactNode;
+}
+export declare const Popover: {
+    ({ popoverSide, popoverTriggerRef, children }: PopoverAbstractionProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/tabs/TabsRoot.styles.d.ts

@@ -0,0 +1 @@
+export declare const rootStyles: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/tabs/TabsTrigger.d.ts

@@ -0,0 +1,41 @@
+import { Tabs as RadixTabs } from 'radix-ui';
+import { ReactNode, Ref } from 'react';
+import { ConfiguredPopoverComponent } from './TabsPopoverAbstraction';
+export interface TabsTriggerProps extends RadixTabs.TabsTriggerProps {
+    /**
+     * A unique value that associates the trigger with a content.
+     */
+    value: string;
+    /**
+     * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * When true, prevents the user from interacting with the tab.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Function that receives a pre-configured Popover component and returns the popover structure.
+     * @example
+     * renderMenu={({ Popover }) => (
+     *   <Popover>
+     *     <Popover.Trigger aria-label="Options">
+     *       <CustomIcon />
+     *     </Popover.Trigger>
+     *     <Popover.Content>
+     *       <Button>Action</Button>
+     *     </Popover.Content>
+     *   </Popover>
+     * )}
+     */
+    renderMenu?: (props: {
+        Popover: ConfiguredPopoverComponent;
+    }) => ReactNode;
+    ref?: Ref<HTMLButtonElement>;
+}
+export declare const TabsTrigger: {
+    ({ asChild, value, disabled, children, className, ref, onKeyDown, renderMenu, ...rest }: TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/tabs/TabsTrigger.styles.d.ts

@@ -0,0 +1,8 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const triggerVariants: (props?: ({
+    intent?: "main" | "support" | "basic" | null | undefined;
+    size?: "sm" | "md" | "xs" | null | undefined;
+    hasMenu?: boolean | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type TabsTriggerVariantsProps = VariantProps<typeof triggerVariants>;