@spark-ui/components 13.1.4 → 13.2.0

package/dist/switch/index.d.mts

@@ -1,64 +1 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ComponentPropsWithRef, ReactNode } from 'react';
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { VariantProps } from 'class-variance-authority';
-
-declare const styles: (props?: ({
-    size?: "sm" | "md" | null | undefined;
-    intent?: "main" | "alert" | "error" | "success" | "support" | "accent" | "basic" | "info" | "neutral" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type StylesProps = VariantProps<typeof styles>;
-
-interface SwitchInputProps extends StylesProps, Omit<ComponentPropsWithRef<'button'>, 'value'> {
-    /**
-     * The state of the switch when it is initially rendered. Use when you do not need to control its state.
-     */
-    defaultChecked?: boolean;
-    /**
-     * The controlled state of the switch. Must be used in conjunction with `onCheckedChange`.
-     */
-    checked?: boolean;
-    /**
-     * When true, prevents the user from interacting with the switch.
-     */
-    /**
-     * Event handler called when the state of the switch changes.
-     */
-    onCheckedChange?: (checked: boolean) => void;
-    /**
-     * When `true`, prevents the user from interacting with the switch.
-     */
-    disabled?: boolean;
-    /**
-     * When true, indicates that the user must check the switch before the owning form can be submitted.
-     */
-    required?: boolean;
-    /**
-     * The name of the switch. Submitted with its owning form as part of a name/value pair.
-     */
-    name?: string;
-    /**
-     * The value given as data when submitted with a name.
-     */
-    value?: string;
-    /**
-     * Icon shown inside the thumb of the Switch whenever it is checked
-     */
-    checkedIcon?: ReactNode;
-    /**
-     * Icon shown inside the thumb of the Switch whenever it is unchecked
-     */
-    uncheckedIcon?: ReactNode;
-    /**
-     * When true, the label will be placed on the left side of the Switch
-     */
-    reverse?: boolean;
-}
-
-type SwitchProps = SwitchInputProps;
-declare const Switch: {
-    ({ size, children, className, id, disabled, reverse, ref, ...rest }: SwitchProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-export { Switch, type SwitchProps };
+export * from './Switch';

package/dist/switch/index.d.ts

@@ -1,64 +1 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ComponentPropsWithRef, ReactNode } from 'react';
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import { VariantProps } from 'class-variance-authority';
-
-declare const styles: (props?: ({
-    size?: "sm" | "md" | null | undefined;
-    intent?: "main" | "alert" | "error" | "success" | "support" | "accent" | "basic" | "info" | "neutral" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-type StylesProps = VariantProps<typeof styles>;
-
-interface SwitchInputProps extends StylesProps, Omit<ComponentPropsWithRef<'button'>, 'value'> {
-    /**
-     * The state of the switch when it is initially rendered. Use when you do not need to control its state.
-     */
-    defaultChecked?: boolean;
-    /**
-     * The controlled state of the switch. Must be used in conjunction with `onCheckedChange`.
-     */
-    checked?: boolean;
-    /**
-     * When true, prevents the user from interacting with the switch.
-     */
-    /**
-     * Event handler called when the state of the switch changes.
-     */
-    onCheckedChange?: (checked: boolean) => void;
-    /**
-     * When `true`, prevents the user from interacting with the switch.
-     */
-    disabled?: boolean;
-    /**
-     * When true, indicates that the user must check the switch before the owning form can be submitted.
-     */
-    required?: boolean;
-    /**
-     * The name of the switch. Submitted with its owning form as part of a name/value pair.
-     */
-    name?: string;
-    /**
-     * The value given as data when submitted with a name.
-     */
-    value?: string;
-    /**
-     * Icon shown inside the thumb of the Switch whenever it is checked
-     */
-    checkedIcon?: ReactNode;
-    /**
-     * Icon shown inside the thumb of the Switch whenever it is unchecked
-     */
-    uncheckedIcon?: ReactNode;
-    /**
-     * When true, the label will be placed on the left side of the Switch
-     */
-    reverse?: boolean;
-}
-
-type SwitchProps = SwitchInputProps;
-declare const Switch: {
-    ({ size, children, className, id, disabled, reverse, ref, ...rest }: SwitchProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
-export { Switch, type SwitchProps };
+export * from './Switch';

package/dist/switch/index.js

@@ -1,327 +1,2 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/switch/index.ts
-var switch_exports = {};
-__export(switch_exports, {
-  Switch: () => Switch
-});
-module.exports = __toCommonJS(switch_exports);
-
-// src/switch/Switch.tsx
-var import_form_field2 = require("@spark-ui/components/form-field");
-var import_class_variance_authority5 = require("class-variance-authority");
-var import_react2 = require("react");
-
-// src/switch/SwitchInput.tsx
-var import_form_field = require("@spark-ui/components/form-field");
-var import_use_combined_state = require("@spark-ui/hooks/use-combined-state");
-var import_Check = require("@spark-ui/icons/Check");
-var import_Close = require("@spark-ui/icons/Close");
-var import_radix_ui2 = require("radix-ui");
-
-// src/slot/Slot.tsx
-var import_radix_ui = require("radix-ui");
-var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var Slottable = import_radix_ui.Slot.Slottable;
-var Slot = ({ ref, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
-};
-
-// src/switch/SwitchInput.styles.ts
-var import_internal_utils = require("@spark-ui/internal-utils");
-var import_class_variance_authority = require("class-variance-authority");
-var styles = (0, import_class_variance_authority.cva)(
-  (0, import_internal_utils.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-[state=unchecked]:bg-on-surface/dim-3",
-    "u-shadow-border-transition",
-    "overflow-x-hidden"
-  ]),
-  {
-    variants: {
-      /**
-       * Size of the switch input.
-       */
-      size: (0, import_internal_utils.makeVariants)({
-        sm: (0, import_internal_utils.tw)(["h-sz-24", "w-sz-40", "border-md"]),
-        md: (0, import_internal_utils.tw)(["h-sz-32", "w-sz-56", "border-[4px]"])
-      }),
-      /**
-       * Color scheme of the switch input.
-       */
-      intent: (0, import_internal_utils.makeVariants)({
-        main: ["data-[state=checked]:bg-main", "hover:ring-main-container", "text-main"],
-        support: [
-          "data-[state=checked]:bg-support",
-          "hover:ring-support-container",
-          "text-support"
-        ],
-        accent: ["data-[state=checked]:bg-accent", "hover:ring-accent-container", "text-accent"],
-        basic: ["data-[state=checked]:bg-basic", "hover:ring-basic-container", "text-basic"],
-        success: [
-          "data-[state=checked]:bg-success",
-          "hover:ring-success-container",
-          "text-success"
-        ],
-        alert: ["data-[state=checked]:bg-alert", "hover:ring-alert-container", "text-alert"],
-        error: ["data-[state=checked]:bg-error", "hover:ring-error-container", "text-error"],
-        info: ["data-[state=checked]:bg-info", "hover:ring-info-container", "text-info"],
-        neutral: [
-          "data-[state=checked]:bg-neutral",
-          "hover:ring-neutral-container",
-          "text-neutral"
-        ]
-      })
-    },
-    defaultVariants: {
-      intent: "basic",
-      size: "sm"
-    }
-  }
-);
-var thumbWrapperStyles = (0, import_class_variance_authority.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"
-      }
-    }
-  }
-);
-var thumbStyles = (0, import_class_variance_authority.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, import_internal_utils.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: false
-    }
-  }
-);
-var thumbCheckSVGStyles = (0, import_class_variance_authority.cva)(["transition-opacity duration-200"], {
-  variants: {
-    size: (0, import_internal_utils.makeVariants)({
-      sm: ["h-sz-10 w-sz-10"],
-      md: ["h-sz-12 w-sz-12"]
-    })
-  },
-  defaultVariants: {
-    size: "sm"
-  }
-});
-
-// src/switch/SwitchInput.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var SwitchInput = ({
-  checked,
-  checkedIcon = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Check.Check, {}),
-  defaultChecked,
-  intent: intentProp,
-  uncheckedIcon = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Close.Close, {}),
-  size = "md",
-  value = "on",
-  onCheckedChange,
-  className,
-  required,
-  ref,
-  ...rest
-}) => {
-  const [isChecked, setIsChecked] = (0, import_use_combined_state.useCombinedState)(checked, defaultChecked);
-  const { name, description, state, isRequired, isInvalid } = (0, import_form_field.useFormFieldControl)();
-  const intent = state ?? intentProp;
-  const handleCheckedChange = (updatedValue) => {
-    setIsChecked(updatedValue);
-    onCheckedChange?.(updatedValue);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_radix_ui2.Switch.Root,
-    {
-      "data-spark-component": "switch-input",
-      ref,
-      className: styles({ intent, size, className }),
-      value,
-      checked,
-      defaultChecked,
-      onCheckedChange: handleCheckedChange,
-      name,
-      required: required || isRequired,
-      "aria-invalid": isInvalid,
-      "aria-describedby": description,
-      ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: thumbWrapperStyles({ checked: isChecked }), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_radix_ui2.Switch.Thumb, { className: thumbStyles({ size, checked: isChecked }), children: [
-        isChecked && checkedIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Slot, { className: thumbCheckSVGStyles({ size }), children: checkedIcon }),
-        !isChecked && uncheckedIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Slot, { className: thumbCheckSVGStyles({ size }), children: uncheckedIcon })
-      ] }) })
-    }
-  );
-};
-SwitchInput.displayName = "SwitchInput";
-
-// src/label/Label.tsx
-var import_class_variance_authority2 = require("class-variance-authority");
-var import_radix_ui3 = require("radix-ui");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Label = ({ className, ref, ...others }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_radix_ui3.Label.Label,
-    {
-      ref,
-      "data-spark-component": "label",
-      className: (0, import_class_variance_authority2.cx)("text-body-1", className),
-      ...others
-    }
-  );
-};
-Label.displayName = "Label";
-
-// src/label/LabelRequiredIndicator.tsx
-var import_class_variance_authority3 = require("class-variance-authority");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var LabelRequiredIndicator = ({
-  className,
-  children = "*",
-  ref,
-  ...others
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    "span",
-    {
-      ref,
-      "data-spark-component": "label-required-indicator",
-      role: "presentation",
-      "aria-hidden": "true",
-      className: (0, import_class_variance_authority3.cx)(className, "text-caption text-on-surface/dim-1"),
-      ...others,
-      children
-    }
-  );
-};
-LabelRequiredIndicator.displayName = "Label.RequiredIndicator";
-
-// src/label/index.ts
-var Label2 = Object.assign(Label, {
-  RequiredIndicator: LabelRequiredIndicator
-});
-Label2.displayName = "Label";
-LabelRequiredIndicator.displayName = "Label.RequiredIndicator";
-
-// src/switch/SwitchLabel.styles.ts
-var import_class_variance_authority4 = require("class-variance-authority");
-var labelStyles = (0, import_class_variance_authority4.cva)("", {
-  variants: {
-    disabled: {
-      true: ["text-neutral/dim-2", "cursor-not-allowed"],
-      false: ["cursor-pointer"]
-    }
-  },
-  defaultVariants: {
-    disabled: false
-  }
-});
-
-// src/switch/SwitchLabel.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var SwitchLabel = ({ className, disabled, ...others }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-  Label2,
-  {
-    "data-spark-component": "switch-label",
-    className: labelStyles({ disabled, className }),
-    ...others
-  }
-);
-
-// src/switch/Switch.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var ID_PREFIX = ":switch";
-var Switch = ({
-  size = "md",
-  children,
-  className,
-  id,
-  disabled,
-  reverse = false,
-  ref,
-  ...rest
-}) => {
-  const field = (0, import_form_field2.useFormFieldControl)();
-  const labelID = `${ID_PREFIX}-label-${(0, import_react2.useId)()}`;
-  const innerID = `${ID_PREFIX}-input-${(0, import_react2.useId)()}`;
-  const fieldID = field.id || id || innerID;
-  const switchLabel = children && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SwitchLabel, { disabled, htmlFor: fieldID, id: labelID, children });
-  const switchInput = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    SwitchInput,
-    {
-      ref,
-      size,
-      id: fieldID,
-      disabled,
-      "aria-labelledby": children ? labelID : field.labelId,
-      ...rest
-    }
-  );
-  const content = reverse ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-    switchLabel,
-    switchInput
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-    switchInput,
-    switchLabel
-  ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    "div",
-    {
-      "data-spark-component": "switch",
-      className: (0, import_class_variance_authority5.cx)("gap-md text-body-1 flex items-center", className),
-      children: content
-    }
-  );
-};
-Switch.displayName = "Switch";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Switch
-});
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("@spark-ui/components/form-field"),c=require("class-variance-authority"),v=require("react"),D=require("@spark-ui/hooks/use-combined-state"),$=require("@spark-ui/icons/Check"),L=require("@spark-ui/icons/Close"),w=require("radix-ui"),k=require("../Slot-DQ8z2zsy.js"),a=require("@spark-ui/internal-utils"),P=require("../label/index.js"),T=c.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-[state=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-[state=checked]:bg-main","hover:ring-main-container","text-main"],support:["data-[state=checked]:bg-support","hover:ring-support-container","text-support"],accent:["data-[state=checked]:bg-accent","hover:ring-accent-container","text-accent"],basic:["data-[state=checked]:bg-basic","hover:ring-basic-container","text-basic"],success:["data-[state=checked]:bg-success","hover:ring-success-container","text-success"],alert:["data-[state=checked]:bg-alert","hover:ring-alert-container","text-alert"],error:["data-[state=checked]:bg-error","hover:ring-error-container","text-error"],info:["data-[state=checked]:bg-info","hover:ring-info-container","text-info"],neutral:["data-[state=checked]:bg-neutral","hover:ring-neutral-container","text-neutral"]})},defaultVariants:{intent:"basic",size:"sm"}}),U=c.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"}}}),A=c.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}}),S=c.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:n,checkedIcon:t=e.jsx($.Check,{}),defaultChecked:r,intent:m,uncheckedIcon:o=e.jsx(L.Close,{}),size:i="md",value:b="on",onCheckedChange:x,className:l,required:d,ref:p,...u})=>{const[s,h]=D.useCombinedState(n,r),{name:f,description:q,state:I,isRequired:F,isInvalid:N}=y.useFormFieldControl(),V=I??m,R=g=>{h(g),x?.(g)};return e.jsx(w.Switch.Root,{"data-spark-component":"switch-input",ref:p,className:T({intent:V,size:i,className:l}),value:b,checked:n,defaultChecked:r,onCheckedChange:R,name:f,required:d||F,"aria-invalid":N,"aria-describedby":q,...u,children:e.jsx("span",{className:U({checked:s}),children:e.jsxs(w.Switch.Thumb,{className:A({size:i,checked:s}),children:[s&&t&&e.jsx(k.Slot,{className:S({size:i}),children:t}),!s&&o&&e.jsx(k.Slot,{className:S({size:i}),children:o})]})})})};z.displayName="SwitchInput";const E=c.cva("",{variants:{disabled:{true:["text-neutral/dim-2","cursor-not-allowed"],false:["cursor-pointer"]}},defaultVariants:{disabled:!1}}),G=({className:n,disabled:t,...r})=>e.jsx(P.Label,{"data-spark-component":"switch-label",className:E({disabled:t,className:n}),...r}),j=":switch",C=({size:n="md",children:t,className:r,id:m,disabled:o,reverse:i=!1,ref:b,...x})=>{const l=y.useFormFieldControl(),d=`${j}-label-${v.useId()}`,p=`${j}-input-${v.useId()}`,u=l.id||m||p,s=t&&e.jsx(G,{disabled:o,htmlFor:u,id:d,children:t}),h=e.jsx(z,{ref:b,size:n,id:u,disabled:o,"aria-labelledby":t?d:l.labelId,...x}),f=i?e.jsxs(e.Fragment,{children:[s,h]}):e.jsxs(e.Fragment,{children:[h,s]});return e.jsx("div",{"data-spark-component":"switch",className:c.cx("gap-md text-body-1 flex items-center",r),children:f})};C.displayName="Switch";exports.Switch=C;
+//# sourceMappingURL=index.js.map

package/dist/switch/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/switch/index.ts","../../src/switch/Switch.tsx","../../src/switch/SwitchInput.tsx","../../src/slot/Slot.tsx","../../src/switch/SwitchInput.styles.ts","../../src/label/Label.tsx","../../src/label/LabelRequiredIndicator.tsx","../../src/label/index.ts","../../src/switch/SwitchLabel.styles.ts","../../src/switch/SwitchLabel.tsx"],"sourcesContent":["export * from './Switch'\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","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { Check } from '@spark-ui/icons/Check'\nimport { Close } from '@spark-ui/icons/Close'\nimport { Switch as RadixSwitch } from 'radix-ui'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { Slot } from '../slot'\nimport {\n  styles,\n  type StylesProps,\n  thumbCheckSVGStyles,\n  thumbStyles,\n  thumbWrapperStyles,\n} from './SwitchInput.styles'\n\nexport interface SwitchInputProps\n  extends StylesProps,\n    Omit<ComponentPropsWithRef<'button'>, 'value'> {\n  /**\n   * The state of the switch when it is initially rendered. Use when you do not need to control its state.\n   */\n  defaultChecked?: boolean\n  /**\n   * The controlled state of the switch. Must be used in conjunction with `onCheckedChange`.\n   */\n  checked?: boolean\n  /**\n   * When true, prevents the user from interacting with the switch.\n   */\n  /**\n   * Event handler called when the state of the switch changes.\n   */\n  onCheckedChange?: (checked: boolean) => void\n  /**\n   * When `true`, prevents the user from interacting with the switch.\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must check the switch before the owning form can be submitted.\n   */\n  required?: boolean\n  /**\n   * The name of the switch. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * The value given as data when submitted with a name.\n   */\n  value?: string\n  /**\n   * Icon shown inside the thumb of the Switch whenever it is checked\n   */\n  checkedIcon?: ReactNode\n  /**\n   * Icon shown inside the thumb of the Switch whenever it is unchecked\n   */\n  uncheckedIcon?: ReactNode\n  /**\n   * When true, the label will be placed on the left side of the Switch\n   */\n  reverse?: boolean\n}\n\nexport const SwitchInput = ({\n  checked,\n  checkedIcon = <Check />,\n  defaultChecked,\n  intent: intentProp,\n  uncheckedIcon = <Close />,\n  size = 'md',\n  value = 'on',\n  onCheckedChange,\n  className,\n  required,\n  ref,\n  ...rest\n}: SwitchInputProps) => {\n  const [isChecked, setIsChecked] = useCombinedState(checked, defaultChecked)\n  const { name, description, state, isRequired, isInvalid } = useFormFieldControl()\n  const intent = state ?? intentProp\n\n  const handleCheckedChange = (updatedValue: boolean): void => {\n    setIsChecked(updatedValue)\n    onCheckedChange?.(updatedValue)\n  }\n\n  return (\n    <RadixSwitch.Root\n      data-spark-component=\"switch-input\"\n      ref={ref}\n      className={styles({ intent, size, className })}\n      value={value}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onCheckedChange={handleCheckedChange}\n      name={name}\n      required={required || isRequired}\n      aria-invalid={isInvalid}\n      aria-describedby={description}\n      {...rest}\n    >\n      <span className={thumbWrapperStyles({ checked: isChecked })}>\n        <RadixSwitch.Thumb className={thumbStyles({ size, checked: isChecked })}>\n          {isChecked && checkedIcon && (\n            <Slot className={thumbCheckSVGStyles({ size })}>{checkedIcon}</Slot>\n          )}\n          {!isChecked && uncheckedIcon && (\n            <Slot className={thumbCheckSVGStyles({ size })}>{uncheckedIcon}</Slot>\n          )}\n        </RadixSwitch.Thumb>\n      </span>\n    </RadixSwitch.Root>\n  )\n}\n\nSwitchInput.displayName = 'SwitchInput'\n","import { Slot as RadixSlot } from 'radix-ui'\nimport {\n  cloneElement,\n  HTMLAttributes,\n  isValidElement,\n  PropsWithChildren,\n  ReactNode,\n  Ref,\n} from 'react'\n\nexport const Slottable: typeof RadixSlot.Slottable = RadixSlot.Slottable\n\nexport type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n  ref?: Ref<HTMLElement>\n}\n\nexport const Slot = ({ ref, ...props }: SlotProps) => {\n  return <RadixSlot.Root ref={ref} {...props} />\n}\n\n/**\n * When using Radix `Slot` component, it will consider its first child to merge its props with.\n * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.\n */\nexport const wrapPolymorphicSlot = (\n  asChild: boolean | undefined,\n  children: ReactNode,\n  callback: (children: ReactNode) => ReactNode\n) => {\n  if (!asChild) return callback(children) // If polymorphic behaviour is not used, we keep the original children\n\n  return isValidElement(children)\n    ? cloneElement(\n        children,\n        undefined,\n        callback((children.props as { children: ReactNode }).children)\n      )\n    : null\n}\n","import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n  tw([\n    'relative shrink-0 self-baseline',\n    'cursor-pointer',\n    'rounded-full border-transparent',\n    'hover:ring-4',\n    'transition-colors duration-200 ease-in-out',\n    'disabled:hover:ring-transparent disabled:cursor-not-allowed disabled:opacity-dim-3',\n    'focus-visible:u-outline',\n    'data-[state=unchecked]:bg-on-surface/dim-3',\n    'u-shadow-border-transition',\n    'overflow-x-hidden',\n  ]),\n  {\n    variants: {\n      /**\n       * Size of the switch input.\n       */\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: tw(['h-sz-24', 'w-sz-40', 'border-md']),\n        md: tw(['h-sz-32', 'w-sz-56', 'border-[4px]']),\n      }),\n      /**\n       * Color scheme of the switch input.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'basic', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: ['data-[state=checked]:bg-main', 'hover:ring-main-container', 'text-main'],\n        support: [\n          'data-[state=checked]:bg-support',\n          'hover:ring-support-container',\n          'text-support',\n        ],\n        accent: ['data-[state=checked]:bg-accent', 'hover:ring-accent-container', 'text-accent'],\n        basic: ['data-[state=checked]:bg-basic', 'hover:ring-basic-container', 'text-basic'],\n        success: [\n          'data-[state=checked]:bg-success',\n          'hover:ring-success-container',\n          'text-success',\n        ],\n        alert: ['data-[state=checked]:bg-alert', 'hover:ring-alert-container', 'text-alert'],\n        error: ['data-[state=checked]:bg-error', 'hover:ring-error-container', 'text-error'],\n        info: ['data-[state=checked]:bg-info', 'hover:ring-info-container', 'text-info'],\n        neutral: [\n          'data-[state=checked]:bg-neutral',\n          'hover:ring-neutral-container',\n          'text-neutral',\n        ],\n      }),\n    },\n    defaultVariants: {\n      intent: 'basic',\n      size: 'sm',\n    },\n  }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n\nexport const thumbWrapperStyles = cva(\n  [\n    'pointer-events-none absolute inset-0 flex items-center',\n    'transition-all duration-200 ease-in-out',\n  ],\n  {\n    variants: {\n      checked: {\n        true: 'translate-x-full',\n        false: 'translate-x-0',\n      },\n    },\n  }\n)\n\nexport const thumbStyles = cva(\n  [\n    'absolute left-0 top-0 flex items-center justify-center',\n    'bg-surface',\n    'rounded-full',\n    'ring-0',\n    'transition-all duration-200 ease-in-out',\n  ],\n  {\n    variants: {\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: ['h-sz-20', 'w-sz-20'],\n        md: ['h-sz-24', 'w-sz-24'],\n      }),\n      checked: {\n        true: '-translate-x-full',\n        false: 'translate-x-0 text-on-surface/dim-2',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n      checked: false,\n    },\n  }\n)\n\nexport const thumbCheckSVGStyles = cva(['transition-opacity duration-200'], {\n  variants: {\n    size: makeVariants<'size', ['sm', 'md']>({\n      sm: ['h-sz-10 w-sz-10'],\n      md: ['h-sz-12 w-sz-12'],\n    }),\n  },\n  defaultVariants: {\n    size: 'sm',\n  },\n})\n","import { cx } from 'class-variance-authority'\nimport { Label as RadixLabel } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type LabelProps = RadixLabel.LabelProps & {\n  ref?: Ref<HTMLLabelElement>\n}\n\nexport const Label = ({ className, ref, ...others }: LabelProps) => {\n  return (\n    <RadixLabel.Label\n      ref={ref}\n      data-spark-component=\"label\"\n      className={cx('text-body-1', className)}\n      {...others}\n    />\n  )\n}\n\nLabel.displayName = 'Label'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithRef } from 'react'\n\nexport type LabelRequiredIndicatorProps = ComponentPropsWithRef<'span'>\n\nexport const LabelRequiredIndicator = ({\n  className,\n  children = '*',\n  ref,\n  ...others\n}: LabelRequiredIndicatorProps) => {\n  return (\n    <span\n      ref={ref}\n      data-spark-component=\"label-required-indicator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cx(className, 'text-caption text-on-surface/dim-1')}\n      {...others}\n    >\n      {children}\n    </span>\n  )\n}\n\nLabelRequiredIndicator.displayName = 'Label.RequiredIndicator'\n","import { Label as Root } from './Label'\nimport { LabelRequiredIndicator } from './LabelRequiredIndicator'\n\nexport const Label: typeof Root & {\n  RequiredIndicator: typeof LabelRequiredIndicator\n} = Object.assign(Root, {\n  RequiredIndicator: LabelRequiredIndicator,\n})\n\nLabel.displayName = 'Label'\nLabelRequiredIndicator.displayName = 'Label.RequiredIndicator'\n\nexport type { LabelProps } from './Label'\nexport type { LabelRequiredIndicatorProps } from './LabelRequiredIndicator'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const labelStyles = cva('', {\n  variants: {\n    disabled: {\n      true: ['text-neutral/dim-2', 'cursor-not-allowed'],\n      false: ['cursor-pointer'],\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n})\n\nexport type LabelStylesProps = VariantProps<typeof labelStyles>\n","import { Label, LabelProps } from '../label'\nimport { labelStyles, LabelStylesProps } from './SwitchLabel.styles'\n\nexport interface SwitchLabelProps extends LabelStylesProps, LabelProps {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The id of the element the label is associated with.\n   */\n  htmlFor?: string\n  /**\n   * When true, prevents the user from interacting with the switch item.\n   */\n  disabled?: boolean\n}\n\nexport const SwitchLabel = ({ className, disabled, ...others }: SwitchLabelProps) => (\n  <Label\n    data-spark-component=\"switch-label\"\n    className={labelStyles({ disabled, className })}\n    {...others}\n  />\n)\n"],"mappings":"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","names":["import_form_field","import_class_variance_authority","import_react","import_radix_ui","RadixSlot","import_jsx_runtime","RadixSwitch","import_class_variance_authority","import_radix_ui","import_jsx_runtime","RadixLabel","import_class_variance_authority","import_jsx_runtime","Label","import_class_variance_authority","import_jsx_runtime","Label","import_jsx_runtime"]}
+{"version":3,"file":"index.js","sources":["../../src/switch/SwitchInput.styles.ts","../../src/switch/SwitchInput.tsx","../../src/switch/SwitchLabel.styles.ts","../../src/switch/SwitchLabel.tsx","../../src/switch/Switch.tsx"],"sourcesContent":["import { makeVariants, tw } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n  tw([\n    'relative shrink-0 self-baseline',\n    'cursor-pointer',\n    'rounded-full border-transparent',\n    'hover:ring-4',\n    'transition-colors duration-200 ease-in-out',\n    'disabled:hover:ring-transparent disabled:cursor-not-allowed disabled:opacity-dim-3',\n    'focus-visible:u-outline',\n    'data-[state=unchecked]:bg-on-surface/dim-3',\n    'u-shadow-border-transition',\n    'overflow-x-hidden',\n  ]),\n  {\n    variants: {\n      /**\n       * Size of the switch input.\n       */\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: tw(['h-sz-24', 'w-sz-40', 'border-md']),\n        md: tw(['h-sz-32', 'w-sz-56', 'border-[4px]']),\n      }),\n      /**\n       * Color scheme of the switch input.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'basic', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: ['data-[state=checked]:bg-main', 'hover:ring-main-container', 'text-main'],\n        support: [\n          'data-[state=checked]:bg-support',\n          'hover:ring-support-container',\n          'text-support',\n        ],\n        accent: ['data-[state=checked]:bg-accent', 'hover:ring-accent-container', 'text-accent'],\n        basic: ['data-[state=checked]:bg-basic', 'hover:ring-basic-container', 'text-basic'],\n        success: [\n          'data-[state=checked]:bg-success',\n          'hover:ring-success-container',\n          'text-success',\n        ],\n        alert: ['data-[state=checked]:bg-alert', 'hover:ring-alert-container', 'text-alert'],\n        error: ['data-[state=checked]:bg-error', 'hover:ring-error-container', 'text-error'],\n        info: ['data-[state=checked]:bg-info', 'hover:ring-info-container', 'text-info'],\n        neutral: [\n          'data-[state=checked]:bg-neutral',\n          'hover:ring-neutral-container',\n          'text-neutral',\n        ],\n      }),\n    },\n    defaultVariants: {\n      intent: 'basic',\n      size: 'sm',\n    },\n  }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n\nexport const thumbWrapperStyles = cva(\n  [\n    'pointer-events-none absolute inset-0 flex items-center',\n    'transition-all duration-200 ease-in-out',\n  ],\n  {\n    variants: {\n      checked: {\n        true: 'translate-x-full',\n        false: 'translate-x-0',\n      },\n    },\n  }\n)\n\nexport const thumbStyles = cva(\n  [\n    'absolute left-0 top-0 flex items-center justify-center',\n    'bg-surface',\n    'rounded-full',\n    'ring-0',\n    'transition-all duration-200 ease-in-out',\n  ],\n  {\n    variants: {\n      size: makeVariants<'size', ['sm', 'md']>({\n        sm: ['h-sz-20', 'w-sz-20'],\n        md: ['h-sz-24', 'w-sz-24'],\n      }),\n      checked: {\n        true: '-translate-x-full',\n        false: 'translate-x-0 text-on-surface/dim-2',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n      checked: false,\n    },\n  }\n)\n\nexport const thumbCheckSVGStyles = cva(['transition-opacity duration-200'], {\n  variants: {\n    size: makeVariants<'size', ['sm', 'md']>({\n      sm: ['h-sz-10 w-sz-10'],\n      md: ['h-sz-12 w-sz-12'],\n    }),\n  },\n  defaultVariants: {\n    size: 'sm',\n  },\n})\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { Check } from '@spark-ui/icons/Check'\nimport { Close } from '@spark-ui/icons/Close'\nimport { Switch as RadixSwitch } from 'radix-ui'\nimport { type ComponentPropsWithRef, type ReactNode } from 'react'\n\nimport { Slot } from '../slot'\nimport {\n  styles,\n  type StylesProps,\n  thumbCheckSVGStyles,\n  thumbStyles,\n  thumbWrapperStyles,\n} from './SwitchInput.styles'\n\nexport interface SwitchInputProps\n  extends StylesProps,\n    Omit<ComponentPropsWithRef<'button'>, 'value'> {\n  /**\n   * The state of the switch when it is initially rendered. Use when you do not need to control its state.\n   */\n  defaultChecked?: boolean\n  /**\n   * The controlled state of the switch. Must be used in conjunction with `onCheckedChange`.\n   */\n  checked?: boolean\n  /**\n   * When true, prevents the user from interacting with the switch.\n   */\n  /**\n   * Event handler called when the state of the switch changes.\n   */\n  onCheckedChange?: (checked: boolean) => void\n  /**\n   * When `true`, prevents the user from interacting with the switch.\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must check the switch before the owning form can be submitted.\n   */\n  required?: boolean\n  /**\n   * The name of the switch. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * The value given as data when submitted with a name.\n   */\n  value?: string\n  /**\n   * Icon shown inside the thumb of the Switch whenever it is checked\n   */\n  checkedIcon?: ReactNode\n  /**\n   * Icon shown inside the thumb of the Switch whenever it is unchecked\n   */\n  uncheckedIcon?: ReactNode\n  /**\n   * When true, the label will be placed on the left side of the Switch\n   */\n  reverse?: boolean\n}\n\nexport const SwitchInput = ({\n  checked,\n  checkedIcon = <Check />,\n  defaultChecked,\n  intent: intentProp,\n  uncheckedIcon = <Close />,\n  size = 'md',\n  value = 'on',\n  onCheckedChange,\n  className,\n  required,\n  ref,\n  ...rest\n}: SwitchInputProps) => {\n  const [isChecked, setIsChecked] = useCombinedState(checked, defaultChecked)\n  const { name, description, state, isRequired, isInvalid } = useFormFieldControl()\n  const intent = state ?? intentProp\n\n  const handleCheckedChange = (updatedValue: boolean): void => {\n    setIsChecked(updatedValue)\n    onCheckedChange?.(updatedValue)\n  }\n\n  return (\n    <RadixSwitch.Root\n      data-spark-component=\"switch-input\"\n      ref={ref}\n      className={styles({ intent, size, className })}\n      value={value}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onCheckedChange={handleCheckedChange}\n      name={name}\n      required={required || isRequired}\n      aria-invalid={isInvalid}\n      aria-describedby={description}\n      {...rest}\n    >\n      <span className={thumbWrapperStyles({ checked: isChecked })}>\n        <RadixSwitch.Thumb className={thumbStyles({ size, checked: isChecked })}>\n          {isChecked && checkedIcon && (\n            <Slot className={thumbCheckSVGStyles({ size })}>{checkedIcon}</Slot>\n          )}\n          {!isChecked && uncheckedIcon && (\n            <Slot className={thumbCheckSVGStyles({ size })}>{uncheckedIcon}</Slot>\n          )}\n        </RadixSwitch.Thumb>\n      </span>\n    </RadixSwitch.Root>\n  )\n}\n\nSwitchInput.displayName = 'SwitchInput'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const labelStyles = cva('', {\n  variants: {\n    disabled: {\n      true: ['text-neutral/dim-2', 'cursor-not-allowed'],\n      false: ['cursor-pointer'],\n    },\n  },\n  defaultVariants: {\n    disabled: false,\n  },\n})\n\nexport type LabelStylesProps = VariantProps<typeof labelStyles>\n","import { Label, LabelProps } from '../label'\nimport { labelStyles, LabelStylesProps } from './SwitchLabel.styles'\n\nexport interface SwitchLabelProps extends LabelStylesProps, LabelProps {\n  /**\n   * Change the component to the HTML tag or custom component of the only child.\n   */\n  asChild?: boolean\n  /**\n   * The id of the element the label is associated with.\n   */\n  htmlFor?: string\n  /**\n   * When true, prevents the user from interacting with the switch item.\n   */\n  disabled?: boolean\n}\n\nexport const SwitchLabel = ({ className, disabled, ...others }: SwitchLabelProps) => (\n  <Label\n    data-spark-component=\"switch-label\"\n    className={labelStyles({ disabled, className })}\n    {...others}\n  />\n)\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { cx } from 'class-variance-authority'\nimport { useId } from 'react'\n\nimport { SwitchInput, SwitchInputProps } from './SwitchInput'\nimport { SwitchLabel } from './SwitchLabel'\n\nexport type SwitchProps = SwitchInputProps\n\nconst ID_PREFIX = ':switch'\n\nexport const Switch = ({\n  size = 'md',\n  children,\n  className,\n  id,\n  disabled,\n  reverse = false,\n  ref,\n  ...rest\n}: SwitchProps) => {\n  const field = useFormFieldControl()\n\n  const labelID = `${ID_PREFIX}-label-${useId()}`\n  const innerID = `${ID_PREFIX}-input-${useId()}`\n  const fieldID = field.id || id || innerID\n\n  const switchLabel = children && (\n    <SwitchLabel disabled={disabled} htmlFor={fieldID} id={labelID}>\n      {children}\n    </SwitchLabel>\n  )\n\n  const switchInput = (\n    <SwitchInput\n      ref={ref}\n      size={size}\n      id={fieldID}\n      disabled={disabled}\n      /**\n       * If the switch doesn't have any direct label (children) then we should try to\n       * get an eventual alternative label from FormField.\n       * On last resort, we shouldn't forget to define an aria-label attribute.\n       */\n      aria-labelledby={children ? labelID : field.labelId}\n      {...rest}\n    />\n  )\n\n  const content = reverse ? (\n    <>\n      {switchLabel}\n      {switchInput}\n    </>\n  ) : (\n    <>\n      {switchInput}\n      {switchLabel}\n    </>\n  )\n\n  return (\n    <div\n      data-spark-component=\"switch\"\n      className={cx('gap-md text-body-1 flex items-center', className)}\n    >\n      {content}\n    </div>\n  )\n}\n\nSwitch.displayName = 'Switch'\n"],"names":["styles","cva","tw","makeVariants","thumbWrapperStyles","thumbStyles","thumbCheckSVGStyles","SwitchInput","checked","checkedIcon","Check","defaultChecked","intentProp","uncheckedIcon","Close","size","value","onCheckedChange","className","required","ref","rest","isChecked","setIsChecked","useCombinedState","name","description","state","isRequired","isInvalid","useFormFieldControl","intent","handleCheckedChange","updatedValue","jsx","RadixSwitch","jsxs","Slot","labelStyles","SwitchLabel","disabled","others","Label","ID_PREFIX","Switch","children","id","reverse","field","labelID","useId","innerID","fieldID","switchLabel","switchInput","content","Fragment","cx"],"mappings":"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"}