@spark-ui/components 10.0.0

package/dist/checkbox/index.js

@@ -0,0 +1,873 @@
+"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_use_merge_refs = require("@spark-ui/use-merge-refs");
+var import_class_variance_authority13 = require("class-variance-authority");
+var import_react9 = require("react");
+
+// src/form-field/FormField.tsx
+var import_class_variance_authority = require("class-variance-authority");
+var import_react4 = require("react");
+
+// 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/form-field/FormFieldContext.tsx
+var import_react2 = require("react");
+var FormFieldContext = (0, import_react2.createContext)(null);
+var ID_PREFIX = ":form-field";
+var useFormField = () => {
+  const context = (0, import_react2.useContext)(FormFieldContext);
+  if (!context) {
+    throw Error("useFormField must be used within a FormField provider");
+  }
+  return context;
+};
+
+// src/form-field/FormFieldProvider.tsx
+var import_react3 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var FormFieldProvider = ({
+  id,
+  name,
+  disabled = false,
+  readOnly = false,
+  state,
+  isRequired,
+  children
+}) => {
+  const labelId = `${ID_PREFIX}-label-${(0, import_react3.useId)()}`;
+  const [messageIds, setMessageIds] = (0, import_react3.useState)([]);
+  const description = messageIds.length > 0 ? messageIds.join(" ") : void 0;
+  const handleMessageIdAdd = (0, import_react3.useCallback)((msgId) => {
+    setMessageIds((ids) => [...ids, msgId]);
+  }, []);
+  const handleMessageIdRemove = (0, import_react3.useCallback)((msgId) => {
+    setMessageIds((ids) => ids.filter((current) => current !== msgId));
+  }, []);
+  const value = (0, import_react3.useMemo)(() => {
+    const isInvalid = state === "error";
+    return {
+      id,
+      labelId,
+      name,
+      disabled,
+      readOnly,
+      state,
+      isRequired,
+      isInvalid,
+      description,
+      onMessageIdAdd: handleMessageIdAdd,
+      onMessageIdRemove: handleMessageIdRemove
+    };
+  }, [
+    id,
+    labelId,
+    name,
+    disabled,
+    readOnly,
+    description,
+    state,
+    isRequired,
+    handleMessageIdAdd,
+    handleMessageIdRemove
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FormFieldContext.Provider, { value, children });
+};
+FormFieldProvider.displayName = "FormFieldProvider";
+
+// src/form-field/FormField.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var FormField = ({
+  className,
+  disabled = false,
+  readOnly = false,
+  name,
+  state,
+  isRequired = false,
+  asChild = false,
+  ref,
+  ...others
+}) => {
+  const id = `${ID_PREFIX}-${(0, import_react4.useId)()}`;
+  const Component = asChild ? Slot : "div";
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    FormFieldProvider,
+    {
+      id,
+      name,
+      isRequired,
+      disabled,
+      readOnly,
+      state,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        Component,
+        {
+          ref,
+          "data-spark-component": "form-field",
+          className: (0, import_class_variance_authority.cx)(className, "gap-sm flex flex-col"),
+          ...others
+        }
+      )
+    }
+  );
+};
+FormField.displayName = "FormField";
+
+// src/form-field/FormFieldStateMessage.tsx
+var import_AlertOutline = require("@spark-ui/icons/AlertOutline");
+var import_Check = require("@spark-ui/icons/Check");
+var import_WarningOutline = require("@spark-ui/icons/WarningOutline");
+var import_class_variance_authority4 = require("class-variance-authority");
+
+// src/icon/Icon.tsx
+var import_react5 = require("react");
+
+// src/visually-hidden/VisuallyHidden.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
+  const Component = asChild ? Slot : "span";
+  return /* @__PURE__ */ (0, import_jsx_runtime4.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_authority2 = require("class-variance-authority");
+var iconStyles = (0, import_class_variance_authority2.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_runtime5 = require("react/jsx-runtime");
+var Icon = ({
+  label,
+  className,
+  size = "current",
+  intent = "current",
+  children,
+  ...others
+}) => {
+  const child = import_react5.Children.only(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    (0, import_react5.cloneElement)(child, {
+      className: iconStyles({ className, size, intent }),
+      "data-spark-component": "icon",
+      "aria-hidden": "true",
+      focusable: "false",
+      ...others
+    }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(VisuallyHidden, { children: label })
+  ] });
+};
+Icon.displayName = "Icon";
+
+// src/form-field/FormFieldMessage.tsx
+var import_class_variance_authority3 = require("class-variance-authority");
+var import_react6 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var FormFieldMessage = ({
+  id: idProp,
+  className,
+  ref,
+  ...others
+}) => {
+  const { onMessageIdAdd, onMessageIdRemove } = useFormField();
+  const currentId = `${ID_PREFIX}-message-${(0, import_react6.useId)()}`;
+  const id = idProp || currentId;
+  (0, import_react6.useEffect)(() => {
+    onMessageIdAdd(id);
+    return () => {
+      onMessageIdRemove(id);
+    };
+  }, [id, onMessageIdAdd, onMessageIdRemove]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "span",
+    {
+      ref,
+      id,
+      "data-spark-component": "form-field-message",
+      className: (0, import_class_variance_authority3.cx)(className, "text-caption"),
+      ...others
+    }
+  );
+};
+FormFieldMessage.displayName = "FormField.Message";
+
+// src/form-field/FormFieldStateMessage.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var FormFieldStateMessage = ({
+  className,
+  state,
+  children,
+  ref,
+  ...others
+}) => {
+  const field = useFormField();
+  if (field.state !== state) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    FormFieldMessage,
+    {
+      ref,
+      "data-spark-component": "form-field-state-message",
+      "aria-live": "polite",
+      className: (0, import_class_variance_authority4.cx)(
+        "gap-sm flex items-center",
+        state === "error" ? "text-error" : "text-on-surface/dim-1",
+        className
+      ),
+      ...others,
+      children: [
+        state === "alert" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_WarningOutline.WarningOutline, {}) }),
+        state === "error" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: "sm", intent: "error", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_AlertOutline.AlertOutline, {}) }),
+        state === "success" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_Check.Check, {}) }),
+        children
+      ]
+    }
+  );
+};
+FormFieldStateMessage.displayName = "FormField.StateMessage";
+
+// src/form-field/FormFieldAlertMessage.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var FormFieldAlertMessage = ({ ref, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    FormFieldStateMessage,
+    {
+      ref,
+      "data-spark-component": "form-field-alert-message",
+      state: "alert",
+      ...props
+    }
+  );
+};
+FormFieldAlertMessage.displayName = "FormField.AlertMessage";
+
+// src/form-field/FormFieldCharactersCount.tsx
+var import_class_variance_authority5 = require("class-variance-authority");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var FormFieldCharactersCount = ({
+  className,
+  value = "",
+  maxLength,
+  ref,
+  ...others
+}) => {
+  const displayValue = `${value.length}/${maxLength}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "span",
+    {
+      ref,
+      "data-spark-component": "form-field-characters-count",
+      className: (0, import_class_variance_authority5.cx)(className, "text-caption", "text-neutral"),
+      ...others,
+      children: displayValue
+    }
+  );
+};
+FormFieldCharactersCount.displayName = "FormField.CharactersCount";
+
+// src/form-field/FormFieldControl.tsx
+var import_react7 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var useFormFieldControl = () => {
+  const { id, name, description, disabled, readOnly, state, labelId, isInvalid, isRequired } = (0, import_react7.useContext)(FormFieldContext) || {};
+  return {
+    id,
+    name,
+    description,
+    disabled,
+    readOnly,
+    state,
+    labelId,
+    isInvalid,
+    isRequired
+  };
+};
+var FormFieldControl = ({ children }) => {
+  const props = useFormFieldControl();
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: children(props) });
+};
+FormFieldControl.displayName = "FormField.Control";
+
+// src/form-field/FormFieldErrorMessage.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var FormFieldErrorMessage = ({ ref, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    FormFieldStateMessage,
+    {
+      ref,
+      "data-spark-component": "form-field-error-message",
+      state: "error",
+      ...props
+    }
+  );
+};
+FormFieldErrorMessage.displayName = "FormField.ErrorMessage";
+
+// src/form-field/FormFieldHelperMessage.tsx
+var import_class_variance_authority6 = require("class-variance-authority");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var FormFieldHelperMessage = ({
+  className,
+  ref,
+  ...others
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    FormFieldMessage,
+    {
+      ref,
+      "data-spark-component": "form-field-helper-message",
+      className: (0, import_class_variance_authority6.cx)("text-on-surface/dim-1", className),
+      ...others
+    }
+  );
+};
+FormFieldHelperMessage.displayName = "FormField.HelperMessage";
+
+// src/form-field/FormFieldLabel.tsx
+var import_class_variance_authority10 = require("class-variance-authority");
+
+// src/label/Label.tsx
+var import_class_variance_authority7 = require("class-variance-authority");
+var import_radix_ui2 = require("radix-ui");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Label = ({ className, ref, ...others }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_radix_ui2.Label.Label,
+    {
+      ref,
+      "data-spark-component": "label",
+      className: (0, import_class_variance_authority7.cx)("text-body-1", className),
+      ...others
+    }
+  );
+};
+Label.displayName = "Label";
+
+// src/label/LabelRequiredIndicator.tsx
+var import_class_variance_authority8 = require("class-variance-authority");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var LabelRequiredIndicator = ({
+  className,
+  children = "*",
+  ref,
+  ...others
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "span",
+    {
+      ref,
+      "data-spark-component": "label-required-indicator",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: (0, import_class_variance_authority8.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/form-field/FormFieldRequiredIndicator.tsx
+var import_class_variance_authority9 = require("class-variance-authority");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var FormFieldRequiredIndicator = ({
+  className,
+  ref,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Label2.RequiredIndicator, { ref, className: (0, import_class_variance_authority9.cx)("ml-sm", className), ...props });
+};
+FormFieldRequiredIndicator.displayName = "FormField.RequiredIndicator";
+
+// src/form-field/FormFieldLabel.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var FormFieldLabel = ({
+  htmlFor: htmlForProp,
+  className,
+  children,
+  requiredIndicator = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(FormFieldRequiredIndicator, {}),
+  asChild,
+  ref,
+  ...others
+}) => {
+  const control = useFormField();
+  const { disabled, labelId, isRequired } = control;
+  const htmlFor = asChild ? void 0 : htmlForProp || control.id;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    Label2,
+    {
+      ref,
+      id: labelId,
+      "data-spark-component": "form-field-label",
+      htmlFor,
+      className: (0, import_class_variance_authority10.cx)(className, disabled ? "text-on-surface/dim-3 pointer-events-none" : void 0),
+      asChild,
+      ...others,
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Slottable, { children }),
+        isRequired && requiredIndicator
+      ] })
+    }
+  );
+};
+FormFieldLabel.displayName = "FormField.Label";
+
+// src/form-field/FormFieldSuccessMessage.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var FormFieldSuccessMessage = ({ ref, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    FormFieldStateMessage,
+    {
+      ref,
+      "data-spark-component": "form-field-success-message",
+      state: "success",
+      ...props
+    }
+  );
+};
+FormFieldSuccessMessage.displayName = "FormField.SuccessMessage";
+
+// src/form-field/index.ts
+var FormField2 = Object.assign(FormField, {
+  Label: FormFieldLabel,
+  Control: FormFieldControl,
+  StateMessage: FormFieldStateMessage,
+  SuccessMessage: FormFieldSuccessMessage,
+  AlertMessage: FormFieldAlertMessage,
+  ErrorMessage: FormFieldErrorMessage,
+  HelperMessage: FormFieldHelperMessage,
+  RequiredIndicator: FormFieldRequiredIndicator,
+  CharactersCount: FormFieldCharactersCount
+});
+FormField2.displayName = "FormField";
+FormFieldLabel.displayName = "FormField.Label";
+FormFieldControl.displayName = "FormField.Control";
+FormFieldStateMessage.displayName = "FormField.StateMessage";
+FormFieldSuccessMessage.displayName = "FormField.SuccessMessage";
+FormFieldAlertMessage.displayName = "FormField.AlertMessage";
+FormFieldErrorMessage.displayName = "FormField.ErrorMessage";
+FormFieldHelperMessage.displayName = "FormField.HelperMessage";
+FormFieldRequiredIndicator.displayName = "FormField.RequiredIndicator";
+FormFieldCharactersCount.displayName = "FormField.CharactersCount";
+
+// src/checkbox/CheckboxGroupContext.tsx
+var import_react8 = require("react");
+var CheckboxGroupContext = (0, import_react8.createContext)({});
+var useCheckboxGroup = () => {
+  const context = (0, import_react8.useContext)(CheckboxGroupContext);
+  return context;
+};
+
+// src/checkbox/CheckboxInput.tsx
+var import_Check2 = require("@spark-ui/icons/Check");
+var import_Minus = require("@spark-ui/icons/Minus");
+var import_radix_ui4 = require("radix-ui");
+
+// src/checkbox/CheckboxIndicator.tsx
+var import_radix_ui3 = require("radix-ui");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var CheckboxIndicatorPrimitive = import_radix_ui3.Checkbox.CheckboxIndicator;
+var CheckboxIndicator = (props) => /* @__PURE__ */ (0, import_jsx_runtime18.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_authority11 = require("class-variance-authority");
+var checkboxInputStyles = (0, import_class_variance_authority11.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-[ok=cool]:bg-main
+          "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-outline",
+          "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-outline",
+          "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-outline",
+          "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-outline",
+          "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_runtime19 = require("react/jsx-runtime");
+var CheckboxPrimitive = import_radix_ui4.Checkbox.Checkbox;
+var CheckboxInput = ({
+  className,
+  icon = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_Check2.Check, {}),
+  indeterminateIcon = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_Minus.Minus, {}),
+  intent,
+  checked,
+  ref,
+  ...others
+}) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  CheckboxPrimitive,
+  {
+    ref,
+    className: checkboxInputStyles({ intent, className }),
+    checked,
+    ...others,
+    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CheckboxIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { size: "sm", children: checked === "indeterminate" ? indeterminateIcon : icon }) })
+  }
+);
+CheckboxInput.displayName = "CheckboxInput";
+
+// src/checkbox/CheckboxLabel.styles.ts
+var import_class_variance_authority12 = require("class-variance-authority");
+var labelStyles = (0, import_class_variance_authority12.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_runtime20 = require("react/jsx-runtime");
+var CheckboxLabel = ({ disabled, ...others }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Label2, { className: labelStyles({ disabled }), ...others });
+CheckboxLabel.displayName = "CheckboxLabel";
+
+// src/checkbox/Checkbox.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var ID_PREFIX2 = ":checkbox";
+var Checkbox3 = ({
+  id: idProp,
+  className,
+  intent: intentProp,
+  checked: checkedProp,
+  value,
+  disabled,
+  reverse = false,
+  onCheckedChange,
+  children,
+  ref: forwardedRef,
+  ...others
+}) => {
+  const checkboxId = `${ID_PREFIX2}-${(0, import_react9.useId)()}`;
+  const innerId = idProp || checkboxId;
+  const innerLabelId = `${ID_PREFIX2}-${(0, import_react9.useId)()}`;
+  const field = useFormFieldControl();
+  const group = useCheckboxGroup();
+  const rootRef = (0, import_react9.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_react9.useMemo)(() => {
+    if (!group) return isRequiredAttr;
+    return isRequiredAttr ? !group.value?.length : false;
+  }, [group, isRequiredAttr]);
+  const checkboxLabel = children && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CheckboxLabel, { disabled, htmlFor: id || innerId, id: innerLabelId, children });
+  const checkboxInput = /* @__PURE__ */ (0, import_jsx_runtime21.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_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    checkboxLabel,
+    checkboxInput
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    checkboxInput,
+    checkboxLabel
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    "div",
+    {
+      "data-spark-component": "checkbox",
+      className: (0, import_class_variance_authority13.cx)("gap-md text-body-1 relative flex items-start", className),
+      children: content
+    }
+  );
+};
+Checkbox3.displayName = "Checkbox";
+
+// src/checkbox/CheckboxGroup.tsx
+var import_use_combined_state = require("@spark-ui/use-combined-state");
+var import_react10 = require("react");
+
+// src/checkbox/CheckboxGroup.styles.ts
+var import_class_variance_authority14 = require("class-variance-authority");
+var checkboxGroupStyles = (0, import_class_variance_authority14.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_runtime22 = 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 = useFormFieldControl();
+  const onCheckedChangeRef = (0, import_react10.useRef)(onCheckedChangeProp);
+  const { id, labelId, description, state, isInvalid, isRequired } = field;
+  const name = nameProp ?? field.name;
+  const current = (0, import_react10.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_react10.useEffect)(() => {
+    onCheckedChangeRef.current = onCheckedChangeProp;
+  }, [onCheckedChangeProp]);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CheckboxGroupContext.Provider, { value: current, children: /* @__PURE__ */ (0, import_jsx_runtime22.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