@spark-ui/components 13.1.3 → 13.1.4

package/dist/checkbox/index.js

@@ -1,2 +1,511 @@
-"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
+"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