@spark-ui/components 17.2.3 → 17.2.4

package/dist/stepper/index.mjs

@@ -1,178 +1,141 @@
-import { jsx as o } from "react/jsx-runtime";
-import { useFormFieldControl as j } from "@spark-ui/components/form-field";
-import { createContext as A, useContext as _, useRef as m } from "react";
-import { InputGroup as b, Input as k } from "../input/index.mjs";
-import { useNumberField as $ } from "@react-aria/numberfield";
-import { useNumberFieldState as L } from "@react-stately/numberfield";
-import { useButton as B } from "@react-aria/button";
-import { Minus as M } from "@spark-ui/icons/Minus";
-import { Plus as T } from "@spark-ui/icons/Plus";
-import { I as P } from "../Icon-BO327oHU.mjs";
-import { I as S } from "../IconButton-DdB3Pq13.mjs";
-import { useMergeRefs as V } from "@spark-ui/hooks/use-merge-refs";
-const W = ({
-  inputRef: r,
-  locale: s = "fr",
-  ...e
-}) => {
-  const p = L({
-    ...e,
-    isDisabled: e.disabled,
-    isReadOnly: e.readOnly,
-    isRequired: e.required,
-    locale: s
-  }), { groupProps: n, inputProps: t, incrementButtonProps: i, decrementButtonProps: a } = $(
-    {
-      isWheelDisabled: !1,
-      ...e,
-      isDisabled: e.disabled,
-      isReadOnly: e.readOnly,
-      isRequired: e.required
-    },
-    p,
-    r
-  );
-  return {
-    groupProps: n,
-    inputProps: t,
-    incrementButtonProps: i,
-    decrementButtonProps: a
-  };
-}, I = A(null), g = ({
-  children: r,
-  formatOptions: s,
-  minValue: e,
-  maxValue: p,
-  ref: n,
-  ...t
-}) => {
-  const i = m(null), {
-    groupProps: a,
-    inputProps: d,
-    incrementButtonProps: u,
-    decrementButtonProps: D
-  } = W({
-    ...t,
-    /**
-     * To enable the possibility to init the stepper with empty (undefined) value,
-     * we need to force the empty value to NaN.
-     * Cf. https://github.com/adobe/react-spectrum/issues/5524
-     */
-    ..."value" in t && { value: t.value ?? NaN },
-    onChange: t.onValueChange,
-    formatOptions: s,
-    minValue: e,
-    maxValue: p,
-    inputRef: i
-  }), c = j(), l = !!c.id, O = {
-    ...u,
-    ...l && { "aria-controls": c.id }
-  }, F = {
-    ...D,
-    ...l && { "aria-controls": c.id }
-  }, R = {
-    ...d,
-    ...l && {
-      id: c.id,
-      required: c.isRequired,
-      "aria-invalid": c.isInvalid ? !0 : void 0
-    }
-  }, { onValueChange: E, ...q } = t;
-  return /* @__PURE__ */ o(
-    I.Provider,
-    {
-      value: { incrementButtonProps: O, decrementButtonProps: F, inputProps: R, inputRef: i },
-      children: /* @__PURE__ */ o(
-        b,
-        {
-          ...q,
-          ...a,
-          "data-spark-component": "stepper",
-          ref: n,
-          children: r
-        }
-      )
-    }
-  );
+import { t as e } from "../icon-D05Uqh8_.mjs";
+import { t } from "../icon-button-6p3O7NIm.mjs";
+import { n, t as r } from "../input-CmYeHYWQ.mjs";
+import { createContext as i, useContext as a, useRef as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+import { useMergeRefs as c } from "@spark-ui/hooks/use-merge-refs";
+import { useFormFieldControl as l } from "@spark-ui/components/form-field";
+import { Minus as u } from "@spark-ui/icons/Minus";
+import { useNumberField as d } from "@react-aria/numberfield";
+import { useNumberFieldState as f } from "@react-stately/numberfield";
+import { useButton as p } from "@react-aria/button";
+import { Plus as m } from "@spark-ui/icons/Plus";
+//#region src/stepper/useStepper.ts
+var h = ({ inputRef: e, locale: t = "fr", ...n }) => {
+	let r = f({
+		...n,
+		isDisabled: n.disabled,
+		isReadOnly: n.readOnly,
+		isRequired: n.required,
+		locale: t
+	}), { groupProps: i, inputProps: a, incrementButtonProps: o, decrementButtonProps: s } = d({
+		isWheelDisabled: !1,
+		...n,
+		isDisabled: n.disabled,
+		isReadOnly: n.readOnly,
+		isRequired: n.required
+	}, r, e);
+	return {
+		groupProps: i,
+		inputProps: a,
+		incrementButtonProps: o,
+		decrementButtonProps: s
+	};
+}, g = i(null), _ = ({ children: e, formatOptions: t, minValue: n, maxValue: i, ref: a, ...c }) => {
+	let u = o(null), { groupProps: d, inputProps: f, incrementButtonProps: p, decrementButtonProps: m } = h({
+		...c,
+		..."value" in c && { value: c.value ?? NaN },
+		onChange: c.onValueChange,
+		formatOptions: t,
+		minValue: n,
+		maxValue: i,
+		inputRef: u
+	}), _ = l(), v = !!_.id, y = {
+		...p,
+		...v && { "aria-controls": _.id }
+	}, b = {
+		...m,
+		...v && { "aria-controls": _.id }
+	}, x = {
+		...f,
+		...v && {
+			id: _.id,
+			required: _.isRequired,
+			"aria-invalid": _.isInvalid ? !0 : void 0
+		}
+	}, { onValueChange: S, ...C } = c;
+	return /* @__PURE__ */ s(g.Provider, {
+		value: {
+			incrementButtonProps: y,
+			decrementButtonProps: b,
+			inputProps: x,
+			inputRef: u
+		},
+		children: /* @__PURE__ */ s(r, {
+			...C,
+			...d,
+			"data-spark-component": "stepper",
+			ref: a,
+			children: e
+		})
+	});
 };
-g.displayName = "Stepper";
-const f = () => {
-  const r = _(I);
-  if (!r)
-    throw Error("useStepperContext must be used within a Stepper provider");
-  return r;
-}, h = ({
-  children: r,
-  design: s = "ghost",
-  intent: e = "neutral",
-  className: p,
-  ref: n,
-  ...t
-}) => {
-  const i = m(null), a = n && typeof n != "function" ? n : i, { incrementButtonProps: d } = f(), { buttonProps: u } = B({ ...d, ...t }, a);
-  return /* @__PURE__ */ o(b.TrailingAddon, { asChild: !0, "data-spark-component": "stepper-increment-button", children: /* @__PURE__ */ o(
-    S,
-    {
-      ref: a,
-      design: s,
-      intent: e,
-      className: p,
-      "aria-label": u["aria-label"],
-      ...u,
-      disabled: t.disabled || u.disabled,
-      children: r || /* @__PURE__ */ o(P, { children: /* @__PURE__ */ o(T, {}) })
-    }
-  ) });
-}, y = ({
-  children: r,
-  design: s = "ghost",
-  intent: e = "neutral",
-  className: p,
-  ref: n,
-  ...t
-}) => {
-  const i = m(null), a = n && typeof n != "function" ? n : i, { decrementButtonProps: d } = f(), { buttonProps: u } = B({ ...d, ...t }, a);
-  return /* @__PURE__ */ o(b.LeadingAddon, { asChild: !0, "data-spark-component": "stepper-decrement-button", children: /* @__PURE__ */ o(
-    S,
-    {
-      ref: a,
-      design: s,
-      intent: e,
-      className: p,
-      "aria-label": u["aria-label"],
-      ...u,
-      disabled: t.disabled || u.disabled,
-      children: r || /* @__PURE__ */ o(P, { children: /* @__PURE__ */ o(M, {}) })
-    }
-  ) });
-}, N = Object.assign(h, {
-  id: "TrailingAddon"
-}), C = Object.assign(y, {
-  id: "LeadingAddon"
+_.displayName = "Stepper";
+var v = () => {
+	let e = a(g);
+	if (!e) throw Error("useStepperContext must be used within a Stepper provider");
+	return e;
+}, y = ({ children: n, design: i = "ghost", intent: a = "neutral", className: c, ref: l, ...u }) => {
+	let d = o(null), f = l && typeof l != "function" ? l : d, { incrementButtonProps: h } = v(), { buttonProps: g } = p({
+		...h,
+		...u
+	}, f);
+	return /* @__PURE__ */ s(r.TrailingAddon, {
+		asChild: !0,
+		"data-spark-component": "stepper-increment-button",
+		children: /* @__PURE__ */ s(t, {
+			ref: f,
+			design: i,
+			intent: a,
+			className: c,
+			"aria-label": g["aria-label"],
+			...g,
+			disabled: u.disabled || g.disabled,
+			children: n || /* @__PURE__ */ s(e, { children: /* @__PURE__ */ s(m, {}) })
+		})
+	});
+}, b = ({ children: n, design: i = "ghost", intent: a = "neutral", className: c, ref: l, ...d }) => {
+	let f = o(null), m = l && typeof l != "function" ? l : f, { decrementButtonProps: h } = v(), { buttonProps: g } = p({
+		...h,
+		...d
+	}, m);
+	return /* @__PURE__ */ s(r.LeadingAddon, {
+		asChild: !0,
+		"data-spark-component": "stepper-decrement-button",
+		children: /* @__PURE__ */ s(t, {
+			ref: m,
+			design: i,
+			intent: a,
+			className: c,
+			"aria-label": g["aria-label"],
+			...g,
+			disabled: d.disabled || g.disabled,
+			children: n || /* @__PURE__ */ s(e, { children: /* @__PURE__ */ s(u, {}) })
+		})
+	});
+}, x = Object.assign(y, { id: "TrailingAddon" }), S = Object.assign(b, { id: "LeadingAddon" });
+y.displayName = "Stepper.DecrementButton", b.displayName = "Stepper.DecrementButton";
+//#endregion
+//#region src/stepper/StepperInput.tsx
+var C = ({ ref: e, ...t }) => {
+	let { inputRef: r, inputProps: i } = v(), a = c(e, r), { className: o = "", ...l } = t;
+	return /* @__PURE__ */ s(n, {
+		ref: a,
+		...l,
+		...i,
+		className: `min-w-sz-56 text-center ${o}`
+	});
+}, w = Object.assign(C, { id: "Input" });
+C.displayName = "Stepper.Input";
+//#endregion
+//#region src/stepper/index.ts
+var T = Object.assign(_, {
+	IncrementButton: x,
+	DecrementButton: S,
+	Input: w
 });
-h.displayName = "Stepper.DecrementButton";
-y.displayName = "Stepper.DecrementButton";
-const v = ({ ref: r, ...s }) => {
-  const { inputRef: e, inputProps: p } = f(), n = V(r, e), { className: t = "", ...i } = s;
-  return /* @__PURE__ */ o(
-    k,
-    {
-      ref: n,
-      ...i,
-      ...p,
-      className: `min-w-sz-56 text-center ${t}`
-    }
-  );
-}, x = Object.assign(v, {
-  id: "Input"
-});
-v.displayName = "Stepper.Input";
-const z = Object.assign(g, { IncrementButton: N, DecrementButton: C, Input: x });
-z.displayName = "Stepper";
-N.displayName = "Stepper.IncrementButton";
-C.displayName = "Stepper.DecrementButton";
-x.displayName = "Stepper.Input";
-export {
-  z as Stepper
-};
-//# sourceMappingURL=index.mjs.map
+T.displayName = "Stepper", x.displayName = "Stepper.IncrementButton", S.displayName = "Stepper.DecrementButton", w.displayName = "Stepper.Input";
+//#endregion
+export { T as Stepper };
+
+//# sourceMappingURL=index.mjs.map

package/dist/stepper/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/stepper/useStepper.ts","../../src/stepper/Stepper.tsx","../../src/stepper/StepperButton.tsx","../../src/stepper/StepperInput.tsx","../../src/stepper/index.ts"],"sourcesContent":["import { useNumberField } from '@react-aria/numberfield'\nimport { useNumberFieldState } from '@react-stately/numberfield'\n\nimport type { UseStepperArgs, UseStepperReturn } from './types'\n\nexport const useStepper = ({\n  inputRef,\n  locale = 'fr',\n  ...rest\n}: UseStepperArgs): UseStepperReturn => {\n  const state = useNumberFieldState({\n    ...rest,\n    isDisabled: rest.disabled,\n    isReadOnly: rest.readOnly,\n    isRequired: rest.required,\n    locale,\n  })\n\n  const { groupProps, inputProps, incrementButtonProps, decrementButtonProps } = useNumberField(\n    {\n      isWheelDisabled: false,\n      ...rest,\n      isDisabled: rest.disabled,\n      isReadOnly: rest.readOnly,\n      isRequired: rest.required,\n    },\n    state,\n    inputRef\n  )\n\n  return {\n    groupProps,\n    inputProps,\n    incrementButtonProps,\n    decrementButtonProps,\n  }\n}\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { createContext, type PropsWithChildren, RefObject, useContext, useRef } from 'react'\n\nimport { InputGroup } from '../input'\nimport type { StepperProps, UseStepperReturn } from './types'\nimport { useStepper } from './useStepper'\n\nconst StepperContext = createContext<\n  (Omit<UseStepperReturn, 'groupProps'> & { inputRef: RefObject<HTMLInputElement | null> }) | null\n>(null)\n\nexport const Stepper = ({\n  children,\n  formatOptions,\n  minValue,\n  maxValue,\n  ref: forwardedRef,\n  ...stepperProps\n}: PropsWithChildren<StepperProps>) => {\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  const {\n    groupProps,\n    inputProps: _inputProps,\n    incrementButtonProps: _incrementButtonProps,\n    decrementButtonProps: _decrementButtonProps,\n  } = useStepper({\n    ...{\n      ...stepperProps,\n      /**\n       * To enable the possibility to init the stepper with empty (undefined) value,\n       * we need to force the empty value to NaN.\n       * Cf. https://github.com/adobe/react-spectrum/issues/5524\n       */\n      ...('value' in stepperProps && { value: stepperProps.value ?? NaN }),\n      onChange: stepperProps.onValueChange,\n    },\n    formatOptions,\n    minValue,\n    maxValue,\n    inputRef,\n  })\n\n  const formFieldControlProps = useFormFieldControl()\n  const isWrappedInFormField = !!formFieldControlProps.id\n\n  const incrementButtonProps = {\n    ..._incrementButtonProps,\n    ...(isWrappedInFormField && { 'aria-controls': formFieldControlProps.id }),\n  }\n\n  const decrementButtonProps = {\n    ..._decrementButtonProps,\n    ...(isWrappedInFormField && { 'aria-controls': formFieldControlProps.id }),\n  }\n\n  const inputProps = {\n    ..._inputProps,\n    ...(isWrappedInFormField && {\n      id: formFieldControlProps.id,\n      required: formFieldControlProps.isRequired,\n      'aria-invalid': formFieldControlProps.isInvalid ? true : undefined,\n    }),\n  }\n\n  const { onValueChange: _, ...remainingStepperProps } = stepperProps\n\n  return (\n    <StepperContext.Provider\n      value={{ incrementButtonProps, decrementButtonProps, inputProps, inputRef }}\n    >\n      <InputGroup\n        {...remainingStepperProps}\n        {...groupProps}\n        data-spark-component=\"stepper\"\n        ref={forwardedRef}\n      >\n        {children}\n      </InputGroup>\n    </StepperContext.Provider>\n  )\n}\n\nStepper.displayName = 'Stepper'\n\nexport const useStepperContext = () => {\n  const context = useContext(StepperContext)\n\n  if (!context) {\n    throw Error('useStepperContext must be used within a Stepper provider')\n  }\n\n  return context\n}\n","import { useButton } from '@react-aria/button'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { Plus } from '@spark-ui/icons/Plus'\nimport { type PropsWithChildren, useRef } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { InputGroup } from '../input'\nimport { useStepperContext } from './Stepper'\nimport type { StepperButtonProps } from './types'\n\nconst IncrementButton = ({\n  children,\n  design = 'ghost',\n  intent = 'neutral',\n  className,\n  ref: forwardedRef,\n  ...rest\n}: PropsWithChildren<StepperButtonProps>) => {\n  const innerRef = useRef<HTMLButtonElement>(null)\n  const ref = forwardedRef && typeof forwardedRef !== 'function' ? forwardedRef : innerRef\n\n  const { incrementButtonProps } = useStepperContext()\n  const { buttonProps } = useButton({ ...incrementButtonProps, ...rest }, ref)\n\n  return (\n    <InputGroup.TrailingAddon asChild data-spark-component=\"stepper-increment-button\">\n      <IconButton\n        ref={ref}\n        design={design}\n        intent={intent}\n        className={className}\n        aria-label={buttonProps['aria-label'] as string}\n        {...buttonProps}\n        disabled={rest.disabled || buttonProps.disabled}\n      >\n        {children || (\n          <Icon>\n            <Plus />\n          </Icon>\n        )}\n      </IconButton>\n    </InputGroup.TrailingAddon>\n  )\n}\n\nconst DecrementButton = ({\n  children,\n  design = 'ghost',\n  intent = 'neutral',\n  className,\n  ref: forwardedRef,\n  ...rest\n}: PropsWithChildren<StepperButtonProps>) => {\n  const innerRef = useRef<HTMLButtonElement>(null)\n  const ref = forwardedRef && typeof forwardedRef !== 'function' ? forwardedRef : innerRef\n\n  const { decrementButtonProps } = useStepperContext()\n  const { buttonProps } = useButton({ ...decrementButtonProps, ...rest }, ref)\n\n  return (\n    <InputGroup.LeadingAddon asChild data-spark-component=\"stepper-decrement-button\">\n      <IconButton\n        ref={ref}\n        design={design}\n        intent={intent}\n        className={className}\n        aria-label={buttonProps['aria-label'] as string}\n        {...buttonProps}\n        disabled={rest.disabled || buttonProps.disabled}\n      >\n        {children || (\n          <Icon>\n            <Minus />\n          </Icon>\n        )}\n      </IconButton>\n    </InputGroup.LeadingAddon>\n  )\n}\n\nexport const StepperIncrementButton = Object.assign(IncrementButton, {\n  id: 'TrailingAddon',\n})\n\nexport const StepperDecrementButton = Object.assign(DecrementButton, {\n  id: 'LeadingAddon',\n})\n\nIncrementButton.displayName = 'Stepper.DecrementButton'\nDecrementButton.displayName = 'Stepper.DecrementButton'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\n\nimport { Input as SparkInput } from '../input'\nimport { useStepperContext } from './Stepper'\nimport type { StepperInputProps } from './types'\n\nconst Input = ({ ref: forwardedRef, ...props }: StepperInputProps) => {\n  const { inputRef, inputProps } = useStepperContext()\n  const ref = useMergeRefs(forwardedRef, inputRef)\n  const { className = '', ...remainingProps } = props\n\n  return (\n    <SparkInput\n      ref={ref}\n      {...remainingProps}\n      {...inputProps}\n      className={`min-w-sz-56 text-center ${className}`}\n    />\n  )\n}\n\nexport const StepperInput = Object.assign(Input, {\n  id: 'Input',\n})\n\nInput.displayName = 'Stepper.Input'\n","import { Stepper as Root } from './Stepper'\nimport {\n  StepperDecrementButton as DecrementButton,\n  StepperIncrementButton as IncrementButton,\n} from './StepperButton'\nimport { StepperInput as Input } from './StepperInput'\n\nexport const Stepper: typeof Root & {\n  IncrementButton: typeof IncrementButton\n  DecrementButton: typeof DecrementButton\n  Input: typeof Input\n} = Object.assign(Root, { IncrementButton, DecrementButton, Input })\n\nStepper.displayName = 'Stepper'\nIncrementButton.displayName = 'Stepper.IncrementButton'\nDecrementButton.displayName = 'Stepper.DecrementButton'\nInput.displayName = 'Stepper.Input'\n\nexport type { StepperProps, StepperButtonProps, StepperInputProps } from './types'\n"],"names":["useStepper","inputRef","locale","rest","state","useNumberFieldState","groupProps","inputProps","incrementButtonProps","decrementButtonProps","useNumberField","StepperContext","createContext","Stepper","children","formatOptions","minValue","maxValue","forwardedRef","stepperProps","useRef","_inputProps","_incrementButtonProps","_decrementButtonProps","formFieldControlProps","useFormFieldControl","isWrappedInFormField","_","remainingStepperProps","jsx","InputGroup","useStepperContext","context","useContext","IncrementButton","design","intent","className","innerRef","ref","buttonProps","useButton","IconButton","Icon","Plus","DecrementButton","Minus","StepperIncrementButton","StepperDecrementButton","Input","props","useMergeRefs","remainingProps","SparkInput","StepperInput","Root"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/stepper/useStepper.ts","../../src/stepper/Stepper.tsx","../../src/stepper/StepperButton.tsx","../../src/stepper/StepperInput.tsx","../../src/stepper/index.ts"],"sourcesContent":["import { useNumberField } from '@react-aria/numberfield'\nimport { useNumberFieldState } from '@react-stately/numberfield'\n\nimport type { UseStepperArgs, UseStepperReturn } from './types'\n\nexport const useStepper = ({\n  inputRef,\n  locale = 'fr',\n  ...rest\n}: UseStepperArgs): UseStepperReturn => {\n  const state = useNumberFieldState({\n    ...rest,\n    isDisabled: rest.disabled,\n    isReadOnly: rest.readOnly,\n    isRequired: rest.required,\n    locale,\n  })\n\n  const { groupProps, inputProps, incrementButtonProps, decrementButtonProps } = useNumberField(\n    {\n      isWheelDisabled: false,\n      ...rest,\n      isDisabled: rest.disabled,\n      isReadOnly: rest.readOnly,\n      isRequired: rest.required,\n    },\n    state,\n    inputRef\n  )\n\n  return {\n    groupProps,\n    inputProps,\n    incrementButtonProps,\n    decrementButtonProps,\n  }\n}\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { createContext, type PropsWithChildren, RefObject, useContext, useRef } from 'react'\n\nimport { InputGroup } from '../input'\nimport type { StepperProps, UseStepperReturn } from './types'\nimport { useStepper } from './useStepper'\n\nconst StepperContext = createContext<\n  (Omit<UseStepperReturn, 'groupProps'> & { inputRef: RefObject<HTMLInputElement | null> }) | null\n>(null)\n\nexport const Stepper = ({\n  children,\n  formatOptions,\n  minValue,\n  maxValue,\n  ref: forwardedRef,\n  ...stepperProps\n}: PropsWithChildren<StepperProps>) => {\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  const {\n    groupProps,\n    inputProps: _inputProps,\n    incrementButtonProps: _incrementButtonProps,\n    decrementButtonProps: _decrementButtonProps,\n  } = useStepper({\n    ...{\n      ...stepperProps,\n      /**\n       * To enable the possibility to init the stepper with empty (undefined) value,\n       * we need to force the empty value to NaN.\n       * Cf. https://github.com/adobe/react-spectrum/issues/5524\n       */\n      ...('value' in stepperProps && { value: stepperProps.value ?? NaN }),\n      onChange: stepperProps.onValueChange,\n    },\n    formatOptions,\n    minValue,\n    maxValue,\n    inputRef,\n  })\n\n  const formFieldControlProps = useFormFieldControl()\n  const isWrappedInFormField = !!formFieldControlProps.id\n\n  const incrementButtonProps = {\n    ..._incrementButtonProps,\n    ...(isWrappedInFormField && { 'aria-controls': formFieldControlProps.id }),\n  }\n\n  const decrementButtonProps = {\n    ..._decrementButtonProps,\n    ...(isWrappedInFormField && { 'aria-controls': formFieldControlProps.id }),\n  }\n\n  const inputProps = {\n    ..._inputProps,\n    ...(isWrappedInFormField && {\n      id: formFieldControlProps.id,\n      required: formFieldControlProps.isRequired,\n      'aria-invalid': formFieldControlProps.isInvalid ? true : undefined,\n    }),\n  }\n\n  const { onValueChange: _, ...remainingStepperProps } = stepperProps\n\n  return (\n    <StepperContext.Provider\n      value={{ incrementButtonProps, decrementButtonProps, inputProps, inputRef }}\n    >\n      <InputGroup\n        {...remainingStepperProps}\n        {...groupProps}\n        data-spark-component=\"stepper\"\n        ref={forwardedRef}\n      >\n        {children}\n      </InputGroup>\n    </StepperContext.Provider>\n  )\n}\n\nStepper.displayName = 'Stepper'\n\nexport const useStepperContext = () => {\n  const context = useContext(StepperContext)\n\n  if (!context) {\n    throw Error('useStepperContext must be used within a Stepper provider')\n  }\n\n  return context\n}\n","import { useButton } from '@react-aria/button'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { Plus } from '@spark-ui/icons/Plus'\nimport { type PropsWithChildren, useRef } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\nimport { InputGroup } from '../input'\nimport { useStepperContext } from './Stepper'\nimport type { StepperButtonProps } from './types'\n\nconst IncrementButton = ({\n  children,\n  design = 'ghost',\n  intent = 'neutral',\n  className,\n  ref: forwardedRef,\n  ...rest\n}: PropsWithChildren<StepperButtonProps>) => {\n  const innerRef = useRef<HTMLButtonElement>(null)\n  const ref = forwardedRef && typeof forwardedRef !== 'function' ? forwardedRef : innerRef\n\n  const { incrementButtonProps } = useStepperContext()\n  const { buttonProps } = useButton({ ...incrementButtonProps, ...rest }, ref)\n\n  return (\n    <InputGroup.TrailingAddon asChild data-spark-component=\"stepper-increment-button\">\n      <IconButton\n        ref={ref}\n        design={design}\n        intent={intent}\n        className={className}\n        aria-label={buttonProps['aria-label'] as string}\n        {...buttonProps}\n        disabled={rest.disabled || buttonProps.disabled}\n      >\n        {children || (\n          <Icon>\n            <Plus />\n          </Icon>\n        )}\n      </IconButton>\n    </InputGroup.TrailingAddon>\n  )\n}\n\nconst DecrementButton = ({\n  children,\n  design = 'ghost',\n  intent = 'neutral',\n  className,\n  ref: forwardedRef,\n  ...rest\n}: PropsWithChildren<StepperButtonProps>) => {\n  const innerRef = useRef<HTMLButtonElement>(null)\n  const ref = forwardedRef && typeof forwardedRef !== 'function' ? forwardedRef : innerRef\n\n  const { decrementButtonProps } = useStepperContext()\n  const { buttonProps } = useButton({ ...decrementButtonProps, ...rest }, ref)\n\n  return (\n    <InputGroup.LeadingAddon asChild data-spark-component=\"stepper-decrement-button\">\n      <IconButton\n        ref={ref}\n        design={design}\n        intent={intent}\n        className={className}\n        aria-label={buttonProps['aria-label'] as string}\n        {...buttonProps}\n        disabled={rest.disabled || buttonProps.disabled}\n      >\n        {children || (\n          <Icon>\n            <Minus />\n          </Icon>\n        )}\n      </IconButton>\n    </InputGroup.LeadingAddon>\n  )\n}\n\nexport const StepperIncrementButton = Object.assign(IncrementButton, {\n  id: 'TrailingAddon',\n})\n\nexport const StepperDecrementButton = Object.assign(DecrementButton, {\n  id: 'LeadingAddon',\n})\n\nIncrementButton.displayName = 'Stepper.DecrementButton'\nDecrementButton.displayName = 'Stepper.DecrementButton'\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\n\nimport { Input as SparkInput } from '../input'\nimport { useStepperContext } from './Stepper'\nimport type { StepperInputProps } from './types'\n\nconst Input = ({ ref: forwardedRef, ...props }: StepperInputProps) => {\n  const { inputRef, inputProps } = useStepperContext()\n  const ref = useMergeRefs(forwardedRef, inputRef)\n  const { className = '', ...remainingProps } = props\n\n  return (\n    <SparkInput\n      ref={ref}\n      {...remainingProps}\n      {...inputProps}\n      className={`min-w-sz-56 text-center ${className}`}\n    />\n  )\n}\n\nexport const StepperInput = Object.assign(Input, {\n  id: 'Input',\n})\n\nInput.displayName = 'Stepper.Input'\n","import { Stepper as Root } from './Stepper'\nimport {\n  StepperDecrementButton as DecrementButton,\n  StepperIncrementButton as IncrementButton,\n} from './StepperButton'\nimport { StepperInput as Input } from './StepperInput'\n\nexport const Stepper: typeof Root & {\n  IncrementButton: typeof IncrementButton\n  DecrementButton: typeof DecrementButton\n  Input: typeof Input\n} = Object.assign(Root, { IncrementButton, DecrementButton, Input })\n\nStepper.displayName = 'Stepper'\nIncrementButton.displayName = 'Stepper.IncrementButton'\nDecrementButton.displayName = 'Stepper.DecrementButton'\nInput.displayName = 'Stepper.Input'\n\nexport type { StepperProps, StepperButtonProps, StepperInputProps } from './types'\n"],"mappings":"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"}

package/dist/switch/index.js

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

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