@spark-ui/components 13.0.7 → 13.1.1

package/dist/checkbox/index.js

@@ -1,511 +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/checkbox/index.ts
-var checkbox_exports = {};
-__export(checkbox_exports, {
-  Checkbox: () => Checkbox3,
-  CheckboxGroup: () => CheckboxGroup
-});
-module.exports = __toCommonJS(checkbox_exports);
-
-// src/checkbox/Checkbox.tsx
-var import_form_field = require("@spark-ui/components/form-field");
-var import_use_merge_refs = require("@spark-ui/hooks/use-merge-refs");
-var import_class_variance_authority6 = require("class-variance-authority");
-var import_react4 = require("react");
-
-// src/checkbox/CheckboxGroupContext.tsx
-var import_react = require("react");
-var CheckboxGroupContext = (0, import_react.createContext)({});
-var useCheckboxGroup = () => {
-  const context = (0, import_react.useContext)(CheckboxGroupContext);
-  return context;
-};
-
-// src/checkbox/CheckboxInput.tsx
-var import_Check = require("@spark-ui/icons/Check");
-var import_Minus = require("@spark-ui/icons/Minus");
-var import_radix_ui3 = require("radix-ui");
-
-// src/icon/Icon.tsx
-var import_react3 = require("react");
-
-// src/slot/Slot.tsx
-var import_radix_ui = require("radix-ui");
-var import_react2 = 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/visually-hidden/VisuallyHidden.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
-  const Component = asChild ? Slot : "span";
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    Component,
-    {
-      ...props,
-      ref,
-      style: {
-        // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
-        position: "absolute",
-        border: 0,
-        width: 1,
-        height: 1,
-        padding: 0,
-        margin: -1,
-        overflow: "hidden",
-        clip: "rect(0, 0, 0, 0)",
-        whiteSpace: "nowrap",
-        wordWrap: "normal",
-        ...props.style
-      }
-    }
-  );
-};
-VisuallyHidden.displayName = "VisuallyHidden";
-
-// src/icon/Icon.styles.tsx
-var import_internal_utils = require("@spark-ui/internal-utils");
-var import_class_variance_authority = require("class-variance-authority");
-var iconStyles = (0, import_class_variance_authority.cva)(["fill-current shrink-0"], {
-  variants: {
-    /**
-     * Color scheme of the icon.
-     */
-    intent: (0, import_internal_utils.makeVariants)({
-      current: ["text-current"],
-      main: ["text-main"],
-      support: ["text-support"],
-      accent: ["text-accent"],
-      basic: ["text-basic"],
-      success: ["text-success"],
-      alert: ["text-alert"],
-      error: ["text-error"],
-      info: ["text-info"],
-      neutral: ["text-neutral"]
-    }),
-    /**
-     * Sets the size of the icon.
-     */
-    size: (0, import_internal_utils.makeVariants)({
-      current: ["u-current-font-size"],
-      sm: ["w-sz-16", "h-sz-16"],
-      md: ["w-sz-24", "h-sz-24"],
-      lg: ["w-sz-32", "h-sz-32"],
-      xl: ["w-sz-40", "h-sz-40"]
-    })
-  }
-});
-
-// src/icon/Icon.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Icon = ({
-  label,
-  className,
-  size = "current",
-  intent = "current",
-  children,
-  ...others
-}) => {
-  const child = import_react3.Children.only(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-    (0, import_react3.cloneElement)(child, {
-      className: iconStyles({ className, size, intent }),
-      "data-spark-component": "icon",
-      "aria-hidden": "true",
-      focusable: "false",
-      ...others
-    }),
-    label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(VisuallyHidden, { children: label })
-  ] });
-};
-Icon.displayName = "Icon";
-
-// src/checkbox/CheckboxIndicator.tsx
-var import_radix_ui2 = require("radix-ui");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var CheckboxIndicatorPrimitive = import_radix_ui2.Checkbox.CheckboxIndicator;
-var CheckboxIndicator = (props) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CheckboxIndicatorPrimitive, { className: "flex size-full items-center justify-center", ...props });
-CheckboxIndicator.displayName = "CheckboxIndicator";
-
-// src/checkbox/CheckboxInput.styles.ts
-var import_internal_utils2 = require("@spark-ui/internal-utils");
-var import_class_variance_authority2 = require("class-variance-authority");
-var checkboxInputStyles = (0, import_class_variance_authority2.cva)(
-  [
-    "size-sz-24 shrink-0 items-center justify-center rounded-sm border-md bg-transparent",
-    "disabled:cursor-not-allowed disabled:opacity-dim-3 disabled:hover:ring-0",
-    "focus-visible:u-outline",
-    "hover:ring-4 hover:cursor-pointer",
-    "u-shadow-border-transition"
-  ],
-  {
-    variants: {
-      /**
-       * Color scheme of the checkbox.
-       */
-      intent: (0, import_internal_utils2.makeVariants)({
-        main: [
-          "text-on-main",
-          "hover:ring-main-container",
-          "data-[state=unchecked]:border-outline",
-          "data-[state=indeterminate]:border-main data-[state=indeterminate]:bg-main",
-          "data-[state=checked]:border-main data-[state=checked]:bg-main"
-        ],
-        support: [
-          "text-on-support",
-          "hover:ring-support-container",
-          "data-[state=unchecked]:border-outline",
-          "data-[state=indeterminate]:border-support data-[state=indeterminate]:bg-support",
-          "data-[state=checked]:border-support data-[state=checked]:bg-support"
-        ],
-        accent: [
-          "text-on-accent",
-          "hover:ring-accent-container",
-          "data-[state=unchecked]:border-outline",
-          "data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent",
-          "data-[state=checked]:border-accent data-[state=checked]:bg-accent"
-        ],
-        basic: [
-          "text-on-basic",
-          "hover:ring-basic-container",
-          "data-[state=unchecked]:border-outline",
-          "data-[state=indeterminate]:border-basic data-[state=indeterminate]:bg-basic",
-          "data-[state=checked]:border-basic data-[state=checked]:bg-basic"
-        ],
-        success: [
-          "text-on-success",
-          "hover:ring-success-container",
-          "data-[state=unchecked]:border-success",
-          "data-[state=indeterminate]:border-success data-[state=indeterminate]:bg-success",
-          "data-[state=checked]:border-success data-[state=checked]:bg-success"
-        ],
-        alert: [
-          "text-on-alert",
-          "hover:ring-alert-container",
-          "data-[state=unchecked]:border-alert",
-          "data-[state=indeterminate]:border-alert data-[state=indeterminate]:bg-alert",
-          "data-[state=checked]:border-alert data-[state=checked]:bg-alert"
-        ],
-        error: [
-          "text-on-error",
-          "hover:ring-error-container",
-          "data-[state=unchecked]:border-error",
-          "data-[state=indeterminate]:border-error data-[state=indeterminate]:bg-error",
-          "data-[state=checked]:border-error data-[state=checked]:bg-error"
-        ],
-        info: [
-          "text-on-info",
-          "hover:ring-info-container",
-          "data-[state=unchecked]:border-info",
-          "data-[state=indeterminate]:border-info data-[state=indeterminate]:bg-info",
-          "data-[state=checked]:border-info data-[state=checked]:bg-info"
-        ],
-        neutral: [
-          "text-on-neutral",
-          "hover:ring-neutral-container",
-          "data-[state=unchecked]:border-outline",
-          "data-[state=indeterminate]:border-neutral data-[state=indeterminate]:bg-neutral",
-          "data-[state=checked]:border-neutral data-[state=checked]:bg-neutral"
-        ]
-      })
-    },
-    defaultVariants: {
-      intent: "basic"
-    }
-  }
-);
-
-// src/checkbox/CheckboxInput.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var CheckboxPrimitive = import_radix_ui3.Checkbox.Checkbox;
-var CheckboxInput = ({
-  className,
-  icon = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Check.Check, {}),
-  indeterminateIcon = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Minus.Minus, {}),
-  intent,
-  checked,
-  ref,
-  ...others
-}) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-  CheckboxPrimitive,
-  {
-    ref,
-    className: checkboxInputStyles({ intent, className }),
-    checked,
-    ...others,
-    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckboxIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { size: "sm", children: checked === "indeterminate" ? indeterminateIcon : icon }) })
-  }
-);
-CheckboxInput.displayName = "CheckboxInput";
-
-// src/label/Label.tsx
-var import_class_variance_authority3 = require("class-variance-authority");
-var import_radix_ui4 = require("radix-ui");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var Label = ({ className, ref, ...others }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    import_radix_ui4.Label.Label,
-    {
-      ref,
-      "data-spark-component": "label",
-      className: (0, import_class_variance_authority3.cx)("text-body-1", className),
-      ...others
-    }
-  );
-};
-Label.displayName = "Label";
-
-// src/label/LabelRequiredIndicator.tsx
-var import_class_variance_authority4 = require("class-variance-authority");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var LabelRequiredIndicator = ({
-  className,
-  children = "*",
-  ref,
-  ...others
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    "span",
-    {
-      ref,
-      "data-spark-component": "label-required-indicator",
-      role: "presentation",
-      "aria-hidden": "true",
-      className: (0, import_class_variance_authority4.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/checkbox/CheckboxLabel.styles.ts
-var import_class_variance_authority5 = require("class-variance-authority");
-var labelStyles = (0, import_class_variance_authority5.cva)("grow", {
-  variants: {
-    disabled: {
-      true: ["text-neutral/dim-2", "cursor-not-allowed"],
-      false: ["cursor-pointer"]
-    }
-  },
-  defaultVariants: {
-    disabled: false
-  }
-});
-
-// src/checkbox/CheckboxLabel.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var CheckboxLabel = ({ disabled, ...others }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Label2, { className: labelStyles({ disabled }), ...others });
-CheckboxLabel.displayName = "CheckboxLabel";
-
-// src/checkbox/Checkbox.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var ID_PREFIX = ":checkbox";
-var Checkbox3 = ({
-  id: idProp,
-  className,
-  intent: intentProp,
-  checked: checkedProp,
-  value,
-  disabled,
-  reverse = false,
-  onCheckedChange,
-  children,
-  ref: forwardedRef,
-  ...others
-}) => {
-  const checkboxId = `${ID_PREFIX}-${(0, import_react4.useId)()}`;
-  const innerId = idProp || checkboxId;
-  const innerLabelId = `${ID_PREFIX}-${(0, import_react4.useId)()}`;
-  const field = (0, import_form_field.useFormFieldControl)();
-  const group = useCheckboxGroup();
-  const rootRef = (0, import_react4.useRef)(null);
-  const ref = (0, import_use_merge_refs.useMergeRefs)(forwardedRef, rootRef);
-  const getCheckboxAttributes = ({
-    fieldState,
-    groupState,
-    checkboxIntent
-  }) => {
-    const name2 = fieldState.name ?? groupState.name;
-    const isRequired2 = fieldState.isRequired ?? groupState.isRequired;
-    const state = fieldState.state ?? groupState.state;
-    const isInvalid2 = fieldState.isInvalid ?? groupState.isInvalid;
-    const isFieldEnclosed = fieldState.id !== groupState.id;
-    const id2 = isFieldEnclosed ? fieldState.id : void 0;
-    const description2 = isFieldEnclosed ? fieldState.description : void 0;
-    const intent2 = state ?? checkboxIntent ?? groupState.intent;
-    return { name: name2, isRequired: isRequired2, isInvalid: isInvalid2, id: id2, description: description2, intent: intent2 };
-  };
-  const checked = value ? group.value?.includes(value) : checkedProp;
-  const handleCheckedChange = (isChecked) => {
-    onCheckedChange?.(isChecked);
-    const rootRefValue = rootRef.current?.value;
-    if (rootRefValue && group.onCheckedChange) {
-      group.onCheckedChange(isChecked, rootRefValue);
-    }
-  };
-  const {
-    id,
-    name,
-    isInvalid,
-    description,
-    intent,
-    isRequired: isRequiredAttr
-  } = getCheckboxAttributes({
-    fieldState: field,
-    groupState: group,
-    checkboxIntent: intentProp
-  });
-  const isRequired = (0, import_react4.useMemo)(() => {
-    if (!group) return isRequiredAttr;
-    return isRequiredAttr ? !group.value?.length : false;
-  }, [group, isRequiredAttr]);
-  const checkboxLabel = children && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CheckboxLabel, { disabled, htmlFor: id || innerId, id: innerLabelId, children });
-  const checkboxInput = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    CheckboxInput,
-    {
-      ref,
-      id: id || innerId,
-      name,
-      value,
-      intent,
-      checked,
-      disabled,
-      required: isRequired,
-      "aria-describedby": description,
-      "aria-invalid": isInvalid,
-      onCheckedChange: handleCheckedChange,
-      "aria-labelledby": children ? innerLabelId : field.labelId,
-      ...others
-    }
-  );
-  const content = group.reverse || reverse ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    checkboxLabel,
-    checkboxInput
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-    checkboxInput,
-    checkboxLabel
-  ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-    "div",
-    {
-      "data-spark-component": "checkbox",
-      className: (0, import_class_variance_authority6.cx)("gap-md text-body-1 relative flex items-start", className),
-      children: content
-    }
-  );
-};
-Checkbox3.displayName = "Checkbox";
-
-// src/checkbox/CheckboxGroup.tsx
-var import_form_field2 = require("@spark-ui/components/form-field");
-var import_use_combined_state = require("@spark-ui/hooks/use-combined-state");
-var import_react5 = require("react");
-
-// src/checkbox/CheckboxGroup.styles.ts
-var import_class_variance_authority7 = require("class-variance-authority");
-var checkboxGroupStyles = (0, import_class_variance_authority7.cva)(["flex"], {
-  variants: {
-    /**
-     * Prop to set the orientation of the checkbox group which could be `vertical` or `horizontal`.
-     */
-    orientation: {
-      vertical: ["flex-col", "gap-lg"],
-      horizontal: ["gap-xl"]
-    }
-  }
-});
-
-// src/checkbox/CheckboxGroup.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var CheckboxGroup = ({
-  name: nameProp,
-  value: valueProp,
-  defaultValue,
-  className,
-  intent,
-  orientation = "vertical",
-  onCheckedChange: onCheckedChangeProp,
-  reverse = false,
-  children,
-  ref,
-  ...others
-}) => {
-  const [value, setValue] = (0, import_use_combined_state.useCombinedState)(valueProp, defaultValue);
-  const field = (0, import_form_field2.useFormFieldControl)();
-  const onCheckedChangeRef = (0, import_react5.useRef)(onCheckedChangeProp);
-  const { id, labelId, description, state, isInvalid, isRequired } = field;
-  const name = nameProp ?? field.name;
-  const current = (0, import_react5.useMemo)(() => {
-    const handleCheckedChange = (checked, changed) => {
-      const values = value || [];
-      const modified = checked ? [...values, changed] : values.filter((val) => val !== changed);
-      setValue(modified);
-      if (onCheckedChangeRef.current) {
-        onCheckedChangeRef.current(modified);
-      }
-    };
-    return {
-      id,
-      name,
-      value,
-      intent,
-      state,
-      isInvalid,
-      description,
-      isRequired,
-      reverse,
-      onCheckedChange: handleCheckedChange
-    };
-  }, [id, name, value, intent, state, isInvalid, description, isRequired, setValue, reverse]);
-  (0, import_react5.useEffect)(() => {
-    onCheckedChangeRef.current = onCheckedChangeProp;
-  }, [onCheckedChangeProp]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CheckboxGroupContext.Provider, { value: current, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    "div",
-    {
-      ref,
-      className: checkboxGroupStyles({ className, orientation }),
-      role: "group",
-      "aria-labelledby": labelId,
-      "aria-describedby": description,
-      ...others,
-      children
-    }
-  ) });
-};
-CheckboxGroup.displayName = "CheckboxGroup";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Checkbox,
-  CheckboxGroup
-});
-//# sourceMappingURL=index.js.map
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),D=require("../form-field/index.js"),me=require("@spark-ui/hooks/use-merge-refs"),$=require("../index-DnaHaH_0.js"),I=require("react"),ke=require("@spark-ui/icons/Check"),fe=require("@spark-ui/icons/Minus"),pe=require("../Icon-Bf0XrmiR.js"),V=require("../index-1WIgmEZh.js"),xe=require("../index-DO-atGp-.js"),L=require("../index-Dkj4QRX8.js"),Ce=require("../index-DYxWvftI.js"),ve=require("../index-Cjj_rUPu.js"),ge=require("../index-MHF2-CYX.js"),z=require("../index-ChLwd62c.js"),Ie=require("@spark-ui/internal-utils"),Re=require("../index-0KYGKeVg.js"),ye=require("@spark-ui/hooks/use-combined-state");function je(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const c=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(r,a,c.get?c:{enumerable:!0,get:()=>e[a]})}}return r.default=e,Object.freeze(r)}const C=je(I);var S="Checkbox",[qe]=xe.createContextScope(S),[Pe,B]=qe(S);function _e(e){const{__scopeCheckbox:r,checked:a,children:c,defaultChecked:o,disabled:t,form:u,name:k,onCheckedChange:l,required:f,value:p="on",internal_do_not_use_render:b}=e,[h,x]=L.useControllableState({prop:a,defaultProp:o??!1,onChange:l,caller:S}),[m,i]=C.useState(null),[v,s]=C.useState(null),d=C.useRef(!1),y=m?!!u||!!m.closest("form"):!0,j={checked:h,disabled:t,setChecked:x,control:m,setControl:i,name:k,form:u,value:p,hasConsumerStoppedPropagationRef:d,required:f,defaultChecked:P(o)?!1:o,isFormControl:y,bubbleInput:v,setBubbleInput:s};return n.jsx(Pe,{scope:r,...j,children:Ee(b)?b(j):c})}var H="CheckboxTrigger",U=C.forwardRef(({__scopeCheckbox:e,onKeyDown:r,onClick:a,...c},o)=>{const{control:t,value:u,disabled:k,checked:l,required:f,setControl:p,setChecked:b,hasConsumerStoppedPropagationRef:h,isFormControl:x,bubbleInput:m}=B(H,e),i=V.useComposedRefs(o,p),v=C.useRef(l);return C.useEffect(()=>{const s=t?.form;if(s){const d=()=>b(v.current);return s.addEventListener("reset",d),()=>s.removeEventListener("reset",d)}},[t,b]),n.jsx(z.Primitive.button,{type:"button",role:"checkbox","aria-checked":P(l)?"mixed":l,"aria-required":f,"data-state":Y(l),"data-disabled":k?"":void 0,disabled:k,value:u,...c,ref:i,onKeyDown:L.composeEventHandlers(r,s=>{s.key==="Enter"&&s.preventDefault()}),onClick:L.composeEventHandlers(a,s=>{b(d=>P(d)?!0:!d),m&&x&&(h.current=s.isPropagationStopped(),h.current||s.stopPropagation())})})});U.displayName=H;var X=C.forwardRef((e,r)=>{const{__scopeCheckbox:a,name:c,checked:o,defaultChecked:t,required:u,disabled:k,value:l,onCheckedChange:f,form:p,...b}=e;return n.jsx(_e,{__scopeCheckbox:a,checked:o,defaultChecked:t,disabled:k,required:u,onCheckedChange:f,name:c,form:p,value:l,internal_do_not_use_render:({isFormControl:h})=>n.jsxs(n.Fragment,{children:[n.jsx(U,{...b,ref:r,__scopeCheckbox:a}),h&&n.jsx(W,{__scopeCheckbox:a})]})})});X.displayName=S;var K="CheckboxIndicator",J=C.forwardRef((e,r)=>{const{__scopeCheckbox:a,forceMount:c,...o}=e,t=B(K,a);return n.jsx(ge.Presence,{present:c||P(t.checked)||t.checked===!0,children:n.jsx(z.Primitive.span,{"data-state":Y(t.checked),"data-disabled":t.disabled?"":void 0,...o,ref:r,style:{pointerEvents:"none",...e.style}})})});J.displayName=K;var Q="CheckboxBubbleInput",W=C.forwardRef(({__scopeCheckbox:e,...r},a)=>{const{control:c,hasConsumerStoppedPropagationRef:o,checked:t,defaultChecked:u,required:k,disabled:l,name:f,value:p,form:b,bubbleInput:h,setBubbleInput:x}=B(Q,e),m=V.useComposedRefs(a,x),i=Ce.usePrevious(t),v=ve.useSize(c);C.useEffect(()=>{const d=h;if(!d)return;const y=window.HTMLInputElement.prototype,q=Object.getOwnPropertyDescriptor(y,"checked").set,E=!o.current;if(i!==t&&q){const N=new Event("click",{bubbles:E});d.indeterminate=P(t),q.call(d,P(t)?!1:t),d.dispatchEvent(N)}},[h,i,t,o]);const s=C.useRef(P(t)?!1:t);return n.jsx(z.Primitive.input,{type:"checkbox","aria-hidden":!0,defaultChecked:u??s.current,required:k,disabled:l,name:f,value:p,form:b,...r,tabIndex:-1,ref:m,style:{...r.style,...v,position:"absolute",pointerEvents:"none",opacity:0,margin:0,transform:"translateX(-100%)"}})});W.displayName=Q;function Ee(e){return typeof e=="function"}function P(e){return e==="indeterminate"}function Y(e){return P(e)?"indeterminate":e?"checked":"unchecked"}const Z=I.createContext({}),Ne=()=>I.useContext(Z),we=J,ee=e=>n.jsx(we,{className:"flex size-full items-center justify-center",...e});ee.displayName="CheckboxIndicator";const Fe=$.cva(["size-sz-24 shrink-0 items-center justify-center rounded-sm border-md bg-transparent","disabled:cursor-not-allowed disabled:opacity-dim-3 disabled:hover:ring-0","focus-visible:u-outline","hover:ring-4 hover:cursor-pointer","u-shadow-border-transition"],{variants:{intent:Ie.makeVariants({main:["text-on-main","hover:ring-main-container","data-[state=unchecked]:border-outline","data-[state=indeterminate]:border-main data-[state=indeterminate]:bg-main","data-[state=checked]:border-main data-[state=checked]:bg-main"],support:["text-on-support","hover:ring-support-container","data-[state=unchecked]:border-outline","data-[state=indeterminate]:border-support data-[state=indeterminate]:bg-support","data-[state=checked]:border-support data-[state=checked]:bg-support"],accent:["text-on-accent","hover:ring-accent-container","data-[state=unchecked]:border-outline","data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent","data-[state=checked]:border-accent data-[state=checked]:bg-accent"],basic:["text-on-basic","hover:ring-basic-container","data-[state=unchecked]:border-outline","data-[state=indeterminate]:border-basic data-[state=indeterminate]:bg-basic","data-[state=checked]:border-basic data-[state=checked]:bg-basic"],success:["text-on-success","hover:ring-success-container","data-[state=unchecked]:border-success","data-[state=indeterminate]:border-success data-[state=indeterminate]:bg-success","data-[state=checked]:border-success data-[state=checked]:bg-success"],alert:["text-on-alert","hover:ring-alert-container","data-[state=unchecked]:border-alert","data-[state=indeterminate]:border-alert data-[state=indeterminate]:bg-alert","data-[state=checked]:border-alert data-[state=checked]:bg-alert"],error:["text-on-error","hover:ring-error-container","data-[state=unchecked]:border-error","data-[state=indeterminate]:border-error data-[state=indeterminate]:bg-error","data-[state=checked]:border-error data-[state=checked]:bg-error"],info:["text-on-info","hover:ring-info-container","data-[state=unchecked]:border-info","data-[state=indeterminate]:border-info data-[state=indeterminate]:bg-info","data-[state=checked]:border-info data-[state=checked]:bg-info"],neutral:["text-on-neutral","hover:ring-neutral-container","data-[state=unchecked]:border-outline","data-[state=indeterminate]:border-neutral data-[state=indeterminate]:bg-neutral","data-[state=checked]:border-neutral data-[state=checked]:bg-neutral"]})},defaultVariants:{intent:"basic"}}),Me=X,te=({className:e,icon:r=n.jsx(ke.Check,{}),indeterminateIcon:a=n.jsx(fe.Minus,{}),intent:c,checked:o,ref:t,...u})=>n.jsx(Me,{ref:t,className:Fe({intent:c,className:e}),checked:o,...u,children:n.jsx(ee,{children:n.jsx(pe.Icon,{size:"sm",children:o==="indeterminate"?a:r})})});te.displayName="CheckboxInput";const $e=$.cva("grow",{variants:{disabled:{true:["text-neutral/dim-2","cursor-not-allowed"],false:["cursor-pointer"]}},defaultVariants:{disabled:!1}}),ne=({disabled:e,...r})=>n.jsx(Re.Label,{className:$e({disabled:e}),...r});ne.displayName="CheckboxLabel";const A=":checkbox",re=({id:e,className:r,intent:a,checked:c,value:o,disabled:t,reverse:u=!1,onCheckedChange:k,children:l,ref:f,...p})=>{const b=`${A}-${I.useId()}`,h=e||b,x=`${A}-${I.useId()}`,m=D.useFormFieldControl(),i=Ne(),v=I.useRef(null),s=me.useMergeRefs(f,v),d=({fieldState:g,groupState:R,checkboxIntent:se})=>{const ce=g.name??R.name,ie=g.isRequired??R.isRequired,de=g.state??R.state,ue=g.isInvalid??R.isInvalid,T=g.id!==R.id,le=T?g.id:void 0,be=T?g.description:void 0,he=de??se??R.intent;return{name:ce,isRequired:ie,isInvalid:ue,id:le,description:be,intent:he}},y=o?i.value?.includes(o):c,j=g=>{k?.(g);const R=v.current?.value;R&&i.onCheckedChange&&i.onCheckedChange(g,R)},{id:q,name:E,isInvalid:N,description:O,intent:w,isRequired:_}=d({fieldState:m,groupState:i,checkboxIntent:a}),F=I.useMemo(()=>i?_?!i.value?.length:!1:_,[i,_]),M=l&&n.jsx(ne,{disabled:t,htmlFor:q||h,id:x,children:l}),G=n.jsx(te,{ref:s,id:q||h,name:E,value:o,intent:w,checked:y,disabled:t,required:F,"aria-describedby":O,"aria-invalid":N,onCheckedChange:j,"aria-labelledby":l?x:m.labelId,...p}),oe=i.reverse||u?n.jsxs(n.Fragment,{children:[M,G]}):n.jsxs(n.Fragment,{children:[G,M]});return n.jsx("div",{"data-spark-component":"checkbox",className:$.cx("gap-md text-body-1 relative flex items-start",r),children:oe})};re.displayName="Checkbox";const Se=$.cva(["flex"],{variants:{orientation:{vertical:["flex-col","gap-lg"],horizontal:["gap-xl"]}}}),ae=({name:e,value:r,defaultValue:a,className:c,intent:o,orientation:t="vertical",onCheckedChange:u,reverse:k=!1,children:l,ref:f,...p})=>{const[b,h]=ye.useCombinedState(r,a),x=D.useFormFieldControl(),m=I.useRef(u),{id:i,labelId:v,description:s,state:d,isInvalid:y,isRequired:j}=x,q=e??x.name,E=I.useMemo(()=>({id:i,name:q,value:b,intent:o,state:d,isInvalid:y,description:s,isRequired:j,reverse:k,onCheckedChange:(O,w)=>{const _=b||[],F=O?[..._,w]:_.filter(M=>M!==w);h(F),m.current&&m.current(F)}}),[i,q,b,o,d,y,s,j,h,k]);return I.useEffect(()=>{m.current=u},[u]),n.jsx(Z.Provider,{value:E,children:n.jsx("div",{ref:f,className:Se({className:c,orientation:t}),role:"group","aria-labelledby":v,"aria-describedby":s,...p,children:l})})};ae.displayName="CheckboxGroup";exports.Checkbox=re;exports.CheckboxGroup=ae;
+//# sourceMappingURL=index.js.map