@spark-ui/components 17.2.3 → 17.2.4

package/dist/switch/index.mjs

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

package/dist/tabs/index.js

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