@spark-ui/components 18.1.1 → 18.1.2

package/dist/checkbox/CheckboxInput.styles.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
 export declare const checkboxInputStyles: (props?: ({
-    intent?: "main" | "alert" | "support" | "error" | "accent" | "success" | "info" | "neutral" | null | undefined;
+    intent?: "main" | "support" | "alert" | "error" | "accent" | "success" | "info" | "neutral" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type CheckboxInputStylesProps = VariantProps<typeof checkboxInputStyles>;

package/dist/checkbox/index.js

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../checkbox-Cbewcw6G.js");exports.Checkbox=e.n,exports.CheckboxGroup=e.t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../checkbox-Cr60_jql.js");exports.Checkbox=e.n,exports.CheckboxGroup=e.t;

package/dist/checkbox/index.mjs

@@ -1,2 +1,2 @@
-import { n as e, t } from "../checkbox-uSINHQYe.mjs";
+import { n as e, t } from "../checkbox-BEo9AVSB.mjs";
 export { e as Checkbox, t as CheckboxGroup };

package/dist/{checkbox-uSINHQYe.mjs → checkbox-BEo9AVSB.mjs}

@@ -1,31 +1,31 @@
-import { t as e } from "./icon-Bs-39J-H.mjs";
-import { t } from "./label-RKaPen31.mjs";
-import { cva as n, cx as r } from "class-variance-authority";
-import { createContext as i, useContext as a, useEffect as o, useId as s, useMemo as c, useRef as l } from "react";
-import { Checkbox as u } from "radix-ui";
+import { t as e } from "./icon-VM_Ys9Xn.mjs";
+import { t } from "./label-BqWu-wLT.mjs";
+import { makeVariants as n } from "@spark-ui/internal-utils";
+import { cva as r, cx as i } from "class-variance-authority";
+import { createContext as a, useContext as o, useEffect as s, useId as c, useMemo as l, useRef as u } from "react";
 import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
-import { makeVariants as m } from "@spark-ui/internal-utils";
+import { Checkbox as m } from "radix-ui";
 import { useMergeRefs as h } from "@spark-ui/hooks/use-merge-refs";
 import { useFormFieldControl as g } from "@spark-ui/components/form-field";
 import { Check as _ } from "@spark-ui/icons/Check";
 import { Minus as v } from "@spark-ui/icons/Minus";
 import { useCombinedState as y } from "@spark-ui/hooks/use-combined-state";
 //#region src/checkbox/CheckboxGroupContext.tsx
-var b = i({}), x = () => a(b), S = u.CheckboxIndicator, C = (e) => /* @__PURE__ */ f(S, {
+var b = a({}), x = () => o(b), S = m.CheckboxIndicator, C = (e) => /* @__PURE__ */ f(S, {
 	className: "flex size-full items-center justify-center",
 	...e
 });
 C.displayName = "CheckboxIndicator";
 //#endregion
 //#region src/checkbox/CheckboxInput.styles.ts
-var w = n([
+var w = r([
 	"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: m({
+	variants: { intent: n({
 		main: [
 			"text-on-main",
 			"hover:ring-main-container",
@@ -84,7 +84,7 @@ var w = n([
 		]
 	}) },
 	defaultVariants: { intent: "support" }
-}), T = u.Checkbox, E = ({ className: t, icon: n = /* @__PURE__ */ f(_, {}), indeterminateIcon: r = /* @__PURE__ */ f(v, {}), intent: i, checked: a, ref: o, ...s }) => /* @__PURE__ */ f(T, {
+}), T = m.Checkbox, E = ({ className: t, icon: n = /* @__PURE__ */ f(_, {}), indeterminateIcon: r = /* @__PURE__ */ f(v, {}), intent: i, checked: a, ref: o, ...s }) => /* @__PURE__ */ f(T, {
 	ref: o,
 	className: w({
 		intent: i,
@@ -100,7 +100,7 @@ var w = n([
 E.displayName = "CheckboxInput";
 //#endregion
 //#region src/checkbox/CheckboxLabel.styles.ts
-var D = n("grow", {
+var D = r("grow", {
 	variants: { disabled: {
 		true: ["text-neutral/dim-2", "cursor-not-allowed"],
 		false: ["cursor-pointer"]
@@ -113,8 +113,8 @@ var D = n("grow", {
 O.displayName = "CheckboxLabel";
 //#endregion
 //#region src/checkbox/Checkbox.tsx
-var k = ":checkbox", A = ({ id: e, className: t, intent: n, checked: i, value: a, disabled: o, reverse: u = !1, onCheckedChange: m, children: _, ref: v, ...y }) => {
-	let b = `${k}-${s()}`, S = e || b, C = `${k}-${s()}`, w = g(), T = x(), D = l(null), A = h(v, D), j = ({ fieldState: e, groupState: t, checkboxIntent: n }) => {
+var k = ":checkbox", A = ({ id: e, className: t, intent: n, checked: r, value: a, disabled: o, reverse: s = !1, onCheckedChange: m, children: _, ref: v, ...y }) => {
+	let b = `${k}-${c()}`, S = e || b, C = `${k}-${c()}`, w = g(), T = x(), D = u(null), A = h(v, D), j = ({ fieldState: e, groupState: t, checkboxIntent: n }) => {
 		let r = e.name ?? t.name, i = e.isRequired ?? t.isRequired, a = e.state ?? t.state, o = e.isInvalid ?? t.isInvalid, s = e.id !== t.id;
 		return {
 			name: r,
@@ -124,7 +124,7 @@ var k = ":checkbox", A = ({ id: e, className: t, intent: n, checked: i, value: a
 			description: s ? e.description : void 0,
 			intent: a ?? n ?? t.intent
 		};
-	}, M = a ? T.value?.includes(a) : i, N = (e) => {
+	}, M = a ? T.value?.includes(a) : r, N = (e) => {
 		m?.(e);
 		let t = D.current?.value;
 		t && T.onCheckedChange && T.onCheckedChange(e, t);
@@ -132,7 +132,7 @@ var k = ":checkbox", A = ({ id: e, className: t, intent: n, checked: i, value: a
 		fieldState: w,
 		groupState: T,
 		checkboxIntent: n
-	}), B = c(() => T ? z ? !T.value?.length : !1 : z, [T, z]), V = _ && /* @__PURE__ */ f(O, {
+	}), B = l(() => T ? z ? !T.value?.length : !1 : z, [T, z]), V = _ && /* @__PURE__ */ f(O, {
 		disabled: o,
 		htmlFor: P || S,
 		id: C,
@@ -151,21 +151,21 @@ var k = ":checkbox", A = ({ id: e, className: t, intent: n, checked: i, value: a
 		onCheckedChange: N,
 		"aria-labelledby": _ ? C : w.labelId,
 		...y
-	}), U = T.reverse || u ? /* @__PURE__ */ p(d, { children: [V, H] }) : /* @__PURE__ */ p(d, { children: [H, V] });
+	}), U = T.reverse || s ? /* @__PURE__ */ p(d, { children: [V, H] }) : /* @__PURE__ */ p(d, { children: [H, V] });
 	return /* @__PURE__ */ f("span", {
 		"data-spark-component": "checkbox",
-		className: r("gap-md text-body-1 relative flex items-start", t),
+		className: i("gap-md text-body-1 relative flex items-start", t),
 		children: U
 	});
 };
 A.displayName = "Checkbox";
 //#endregion
 //#region src/checkbox/CheckboxGroup.styles.ts
-var j = n(["flex"], { variants: { orientation: {
+var j = r(["flex"], { variants: { orientation: {
 	vertical: ["flex-col", "gap-lg"],
 	horizontal: ["gap-xl"]
-} } }), M = ({ name: e, value: t, defaultValue: n, className: r, intent: i, orientation: a = "vertical", onCheckedChange: s, reverse: u = !1, children: d, ref: p, ...m }) => {
-	let [h, _] = y(t, n), v = g(), x = l(s), { id: S, labelId: C, description: w, state: T, isInvalid: E, isRequired: D } = v, O = e ?? v.name, k = c(() => ({
+} } }), M = ({ name: e, value: t, defaultValue: n, className: r, intent: i, orientation: a = "vertical", onCheckedChange: o, reverse: c = !1, children: d, ref: p, ...m }) => {
+	let [h, _] = y(t, n), v = g(), x = u(o), { id: S, labelId: C, description: w, state: T, isInvalid: E, isRequired: D } = v, O = e ?? v.name, k = l(() => ({
 		id: S,
 		name: O,
 		value: h,
@@ -174,7 +174,7 @@ var j = n(["flex"], { variants: { orientation: {
 		isInvalid: E,
 		description: w,
 		isRequired: D,
-		reverse: u,
+		reverse: c,
 		onCheckedChange: (e, t) => {
 			let n = h || [], r = e ? [...n, t] : n.filter((e) => e !== t);
 			_(r), x.current && x.current(r);
@@ -189,11 +189,11 @@ var j = n(["flex"], { variants: { orientation: {
 		w,
 		D,
 		_,
-		u
+		c
 	]);
-	return o(() => {
-		x.current = s;
-	}, [s]), /* @__PURE__ */ f(b, {
+	return s(() => {
+		x.current = o;
+	}, [o]), /* @__PURE__ */ f(b, {
 		value: k,
 		children: /* @__PURE__ */ f("div", {
 			ref: p,
@@ -213,4 +213,4 @@ M.displayName = "CheckboxGroup";
 //#endregion
 export { A as n, M as t };
 
-//# sourceMappingURL=checkbox-uSINHQYe.mjs.map
+//# sourceMappingURL=checkbox-BEo9AVSB.mjs.map

package/dist/{checkbox-uSINHQYe.mjs.map → checkbox-BEo9AVSB.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"checkbox-uSINHQYe.mjs","names":[],"sources":["../src/checkbox/CheckboxGroupContext.tsx","../src/checkbox/CheckboxIndicator.tsx","../src/checkbox/CheckboxInput.styles.ts","../src/checkbox/CheckboxInput.tsx","../src/checkbox/CheckboxLabel.styles.ts","../src/checkbox/CheckboxLabel.tsx","../src/checkbox/Checkbox.tsx","../src/checkbox/CheckboxGroup.styles.ts","../src/checkbox/CheckboxGroup.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { CheckboxInputStylesProps } from './CheckboxInput.styles'\n\nexport interface CheckboxGroupContextState extends Pick<CheckboxInputStylesProps, 'intent'> {\n  /**\n   * The id of the checkbox group.\n   */\n  id: string\n  /**\n   * The name of the group. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * The value of the checkbox group.\n   */\n  value?: string[]\n  /**\n   * A set of ids separated by a space used to describe the input component given by a set of messages.\n   */\n  description?: string\n  /**\n   * The validation state of the checkbox group.\n   */\n  state?: 'error' | 'success' | 'alert'\n  /**\n   * If true, the checkbox group will be invalid.\n   */\n  isInvalid?: boolean\n  /**\n   * If true, the checkbox group will be required.\n   */\n  isRequired?: boolean\n  /**\n   * Callback used to update or notify the value of the checkbox group.\n   */\n  onCheckedChange?: (checked: boolean, changed: string) => void\n  /**\n   * When true, the label will be placed on the left side of the Checkbox\n   */\n  reverse?: boolean\n}\n\nexport const CheckboxGroupContext = createContext<Partial<CheckboxGroupContextState>>({})\n\nexport const useCheckboxGroup = () => {\n  const context = useContext(CheckboxGroupContext)\n\n  return context\n}\n","import { Checkbox } from 'radix-ui'\nimport { Ref } from 'react'\n\nconst CheckboxIndicatorPrimitive = Checkbox.CheckboxIndicator\n\nexport type CheckboxIndicatorProps = Checkbox.CheckboxIndicatorProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const CheckboxIndicator = (props: CheckboxIndicatorProps) => (\n  <CheckboxIndicatorPrimitive className=\"flex size-full items-center justify-center\" {...props} />\n)\n\nCheckboxIndicator.displayName = 'CheckboxIndicator'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const checkboxInputStyles = cva(\n  [\n    'size-sz-24 shrink-0 items-center justify-center rounded-sm border-md bg-transparent',\n    'disabled:cursor-not-allowed disabled:opacity-dim-3 disabled:hover:ring-0',\n    'focus-visible:u-outline',\n    'hover:ring-4 hover:cursor-pointer',\n    'u-shadow-border-transition',\n  ],\n  {\n    variants: {\n      /**\n       * Color scheme of the checkbox.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: [\n          'text-on-main',\n          'hover:ring-main-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-main data-[state=indeterminate]:bg-main',\n          'data-[state=checked]:border-main data-[state=checked]:bg-main',\n        ],\n        support: [\n          'text-on-support',\n          'hover:ring-support-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-support data-[state=indeterminate]:bg-support',\n          'data-[state=checked]:border-support data-[state=checked]:bg-support',\n        ],\n        accent: [\n          'text-on-accent',\n          'hover:ring-accent-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent',\n          'data-[state=checked]:border-accent data-[state=checked]:bg-accent',\n        ],\n        success: [\n          'text-on-success',\n          'hover:ring-success-container',\n          'data-[state=unchecked]:border-success',\n          'data-[state=indeterminate]:border-success data-[state=indeterminate]:bg-success',\n          'data-[state=checked]:border-success data-[state=checked]:bg-success',\n        ],\n        alert: [\n          'text-on-alert',\n          'hover:ring-alert-container',\n          'data-[state=unchecked]:border-alert',\n          'data-[state=indeterminate]:border-alert data-[state=indeterminate]:bg-alert',\n          'data-[state=checked]:border-alert data-[state=checked]:bg-alert',\n        ],\n        error: [\n          'text-on-error',\n          'hover:ring-error-container',\n          'data-[state=unchecked]:border-error',\n          'data-[state=indeterminate]:border-error data-[state=indeterminate]:bg-error',\n          'data-[state=checked]:border-error data-[state=checked]:bg-error',\n        ],\n        info: [\n          'text-on-info',\n          'hover:ring-info-container',\n          'data-[state=unchecked]:border-info',\n          'data-[state=indeterminate]:border-info data-[state=indeterminate]:bg-info',\n          'data-[state=checked]:border-info data-[state=checked]:bg-info',\n        ],\n        neutral: [\n          'text-on-neutral',\n          'hover:ring-neutral-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-neutral data-[state=indeterminate]:bg-neutral',\n          'data-[state=checked]:border-neutral data-[state=checked]:bg-neutral',\n        ],\n      }),\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type CheckboxInputStylesProps = VariantProps<typeof checkboxInputStyles>\n","import { Check } from '@spark-ui/icons/Check'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { Checkbox } from 'radix-ui'\nimport { ComponentPropsWithoutRef, ReactNode, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { CheckboxIndicator } from './CheckboxIndicator'\nimport { checkboxInputStyles, type CheckboxInputStylesProps } from './CheckboxInput.styles'\n\ntype CheckedStatus = boolean | 'indeterminate'\n\nconst CheckboxPrimitive = Checkbox.Checkbox\n\nexport interface CheckboxInputProps\n  extends\n    CheckboxInputStylesProps,\n    Omit<ComponentPropsWithoutRef<'button'>, 'onChange' | 'value' | 'checked' | 'defaultChecked'> {\n  /**\n   * The checked icon to use.\n   */\n  icon?: ReactNode\n  /**\n   * The indeterminate icon to use.\n   */\n  indeterminateIcon?: ReactNode\n  /**\n   * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.\n   */\n  defaultChecked?: boolean\n  /**\n   * The controlled checked state of the checkbox. Must be used in conjunction with onCheckedChange.\n   */\n  checked?: CheckedStatus\n  /**\n   * When true, prevents the user from interacting with the checkbox.\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must check the checkbox before the owning form can be submitted.\n   */\n  required?: boolean\n  /**\n   * The name of the checkbox. 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   * Event handler called when the checked state of the checkbox changes.\n   */\n  onCheckedChange?: (checked: boolean) => void\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const CheckboxInput = ({\n  className,\n  icon = <Check />,\n  indeterminateIcon = <Minus />,\n  intent,\n  checked,\n  ref,\n  ...others\n}: CheckboxInputProps) => (\n  <CheckboxPrimitive\n    ref={ref}\n    className={checkboxInputStyles({ intent, className })}\n    checked={checked}\n    {...others}\n  >\n    <CheckboxIndicator>\n      <Icon size=\"sm\">{checked === 'indeterminate' ? indeterminateIcon : icon}</Icon>\n    </CheckboxIndicator>\n  </CheckboxPrimitive>\n)\n\nCheckboxInput.displayName = 'CheckboxInput'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const labelStyles = cva('grow', {\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, type LabelStylesProps } from './CheckboxLabel.styles'\n\nexport interface CheckboxLabelProps extends LabelProps, LabelStylesProps {\n  /**\n   * When true, prevents the user from interacting with the checkbox item.\n   */\n  disabled?: boolean\n}\n\nexport const CheckboxLabel = ({ disabled, ...others }: CheckboxLabelProps) => (\n  <Label className={labelStyles({ disabled })} {...others} />\n)\n\nCheckboxLabel.displayName = 'CheckboxLabel'\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { Ref, useId, useMemo, useRef } from 'react'\n\nimport { CheckboxGroupContextState, useCheckboxGroup } from './CheckboxGroupContext'\nimport { CheckboxInput, CheckboxInputProps } from './CheckboxInput'\nimport { CheckboxLabel } from './CheckboxLabel'\n\nexport type CheckboxProps = CheckboxInputProps &\n  Pick<CheckboxGroupContextState, 'reverse'> & {\n    ref?: Ref<HTMLButtonElement>\n  }\n\nconst ID_PREFIX = ':checkbox'\n\n// oxlint-disable-next-line max-lines-per-function\n/**\n * A control that allows users to select one or multiple options from a set.\n */\nexport const Checkbox = ({\n  id: idProp,\n  className,\n  intent: intentProp,\n  checked: checkedProp,\n  value,\n  disabled,\n  reverse = false,\n  onCheckedChange,\n  children,\n  ref: forwardedRef,\n  ...others\n}: CheckboxProps) => {\n  const checkboxId = `${ID_PREFIX}-${useId()}`\n  const innerId = idProp || checkboxId\n\n  const innerLabelId = `${ID_PREFIX}-${useId()}`\n\n  const field = useFormFieldControl()\n  const group = useCheckboxGroup()\n\n  const rootRef = useRef<HTMLButtonElement | undefined>(null)\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  const getCheckboxAttributes = ({\n    fieldState,\n    groupState,\n    checkboxIntent,\n  }: {\n    fieldState: ReturnType<typeof useFormFieldControl>\n    groupState: ReturnType<typeof useCheckboxGroup>\n    checkboxIntent: CheckboxInputProps['intent']\n  }) => {\n    const name = fieldState.name ?? groupState.name\n    const isRequired = fieldState.isRequired ?? groupState.isRequired\n    const state = fieldState.state ?? groupState.state\n    const isInvalid = fieldState.isInvalid ?? groupState.isInvalid\n\n    const isFieldEnclosed = fieldState.id !== groupState.id\n    const id = isFieldEnclosed ? fieldState.id : undefined\n    const description = isFieldEnclosed ? fieldState.description : undefined\n\n    const intent = state ?? checkboxIntent ?? groupState.intent\n\n    return { name, isRequired, isInvalid, id, description, intent }\n  }\n\n  const checked = value ? group.value?.includes(value) : checkedProp\n\n  const handleCheckedChange = (isChecked: boolean) => {\n    onCheckedChange?.(isChecked)\n\n    const rootRefValue = rootRef.current?.value\n    if (rootRefValue && group.onCheckedChange) {\n      group.onCheckedChange(isChecked, rootRefValue)\n    }\n  }\n\n  const {\n    id,\n    name,\n    isInvalid,\n    description,\n    intent,\n    isRequired: isRequiredAttr,\n  } = getCheckboxAttributes({\n    fieldState: field,\n    groupState: group,\n    checkboxIntent: intentProp,\n  })\n\n  const isRequired = useMemo(() => {\n    if (!group) return isRequiredAttr\n\n    return isRequiredAttr ? !group.value?.length : false\n  }, [group, isRequiredAttr])\n\n  const checkboxLabel = children && (\n    <CheckboxLabel disabled={disabled} htmlFor={id || innerId} id={innerLabelId}>\n      {children}\n    </CheckboxLabel>\n  )\n\n  const checkboxInput = (\n    <CheckboxInput\n      ref={ref}\n      id={id || innerId}\n      name={name}\n      value={value}\n      intent={intent}\n      checked={checked}\n      disabled={disabled}\n      required={isRequired}\n      aria-describedby={description}\n      aria-invalid={isInvalid}\n      onCheckedChange={handleCheckedChange}\n      aria-labelledby={children ? innerLabelId : field.labelId}\n      {...others}\n    />\n  )\n\n  const content =\n    group.reverse || reverse ? (\n      <>\n        {checkboxLabel}\n        {checkboxInput}\n      </>\n    ) : (\n      <>\n        {checkboxInput}\n        {checkboxLabel}\n      </>\n    )\n\n  return (\n    <span\n      data-spark-component=\"checkbox\"\n      className={cx('gap-md text-body-1 relative flex items-start', className)}\n    >\n      {content}\n    </span>\n  )\n}\n\nCheckbox.displayName = 'Checkbox'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const checkboxGroupStyles = cva(['flex'], {\n  variants: {\n    /**\n     * Prop to set the orientation of the checkbox group which could be `vertical` or `horizontal`.\n     */\n    orientation: {\n      vertical: ['flex-col', 'gap-lg'],\n      horizontal: ['gap-xl'],\n    },\n  },\n})\n\nexport type CheckboxGroupStylesProps = VariantProps<typeof checkboxGroupStyles>\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useMemo, useRef } from 'react'\n\nimport { checkboxGroupStyles, CheckboxGroupStylesProps } from './CheckboxGroup.styles'\nimport { CheckboxGroupContext, CheckboxGroupContextState } from './CheckboxGroupContext'\n\nexport interface CheckboxGroupProps\n  extends\n    Omit<ComponentPropsWithoutRef<'div'>, 'value' | 'defaultValue' | 'onChange'>,\n    CheckboxGroupStylesProps,\n    Pick<CheckboxGroupContextState, 'intent' | 'name' | 'value' | 'reverse'> {\n  /**\n   * The initial value of the checkbox group\n   */\n  defaultValue?: string[]\n  /**\n   * The callback fired when any children Checkbox is checked or unchecked\n   */\n  onCheckedChange?: (value: string[]) => void\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * A group component that allows users to select one or more checkboxes from a list of choices,\n * managing their state collectively with support for controlled and uncontrolled modes.\n */\nexport const CheckboxGroup = ({\n  name: nameProp,\n  value: valueProp,\n  defaultValue,\n  className,\n  intent,\n  orientation = 'vertical',\n  onCheckedChange: onCheckedChangeProp,\n  reverse = false,\n  children,\n  ref,\n  ...others\n}: CheckboxGroupProps) => {\n  const [value, setValue] = useCombinedState(valueProp, defaultValue)\n  const field = useFormFieldControl()\n  const onCheckedChangeRef = useRef(onCheckedChangeProp)\n\n  const { id, labelId, description, state, isInvalid, isRequired } = field\n  const name = nameProp ?? field.name\n\n  const current = useMemo(() => {\n    const handleCheckedChange = (checked: boolean, changed: string) => {\n      const values = value || []\n      const modified = checked\n        ? [...values, changed]\n        : values.filter((val: string) => val !== changed)\n\n      setValue(modified)\n\n      if (onCheckedChangeRef.current) {\n        onCheckedChangeRef.current(modified)\n      }\n    }\n\n    return {\n      id,\n      name,\n      value,\n      intent,\n      state,\n      isInvalid,\n      description,\n      isRequired,\n      reverse,\n      onCheckedChange: handleCheckedChange,\n    }\n  }, [id, name, value, intent, state, isInvalid, description, isRequired, setValue, reverse])\n\n  useEffect(() => {\n    onCheckedChangeRef.current = onCheckedChangeProp\n  }, [onCheckedChangeProp])\n\n  return (\n    <CheckboxGroupContext value={current}>\n      <div\n        ref={ref}\n        className={checkboxGroupStyles({ className, orientation })}\n        role=\"group\"\n        aria-labelledby={labelId}\n        aria-describedby={description}\n        {...others}\n      >\n        {children}\n      </div>\n    </CheckboxGroupContext>\n  )\n}\n\nCheckboxGroup.displayName = 'CheckboxGroup'\n"],"mappings":";;;;;;;;;;;;;AA2CA,IAAa,IAAuB,EAAkD,CAAC,CAAC,GAE3E,UACK,EAAW,CAEpB,GC7CH,IAA6B,EAAS,mBAM/B,KAAqB,MAChC,kBAAC,GAAD;CAA4B,WAAU;CAA6C,GAAI;AAAQ,CAAA;AAGjG,EAAkB,cAAc;;;ACVhC,IAAa,IAAsB,EACjC;CACE;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU,EAIR,QAAQ,EAGN;EACA,MAAM;GACJ;GACA;GACA;GACA;GACA;EACF;EACA,SAAS;GACP;GACA;GACA;GACA;GACA;EACF;EACA,QAAQ;GACN;GACA;GACA;GACA;GACA;EACF;EACA,SAAS;GACP;GACA;GACA;GACA;GACA;EACF;EACA,OAAO;GACL;GACA;GACA;GACA;GACA;EACF;EACA,OAAO;GACL;GACA;GACA;GACA;GACA;EACF;EACA,MAAM;GACJ;GACA;GACA;GACA;GACA;EACF;EACA,SAAS;GACP;GACA;GACA;GACA;GACA;EACF;CACF,CAAC,EACH;CACA,iBAAiB,EACf,QAAQ,UACV;AACF,CACF,GCvEM,IAAoB,EAAS,UA6CtB,KAAiB,EAC5B,cACA,UAAO,kBAAC,GAAD,CAAQ,CAAA,GACf,uBAAoB,kBAAC,GAAD,CAAQ,CAAA,GAC5B,WACA,YACA,QACA,GAAG,QAEH,kBAAC,GAAD;CACO;CACL,WAAW,EAAoB;EAAE;EAAQ;CAAU,CAAC;CAC3C;CACT,GAAI;WAEJ,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EAAM,MAAK;YAAM,MAAY,kBAAkB,IAAoB;CAAW,CAAA,EAC7D,CAAA;AACF,CAAA;AAGrB,EAAc,cAAc;;;AC3E5B,IAAa,IAAc,EAAI,QAAQ;CACrC,UAAU,EACR,UAAU;EACR,MAAM,CAAC,sBAAsB,oBAAoB;EACjD,OAAO,CAAC,gBAAgB;CAC1B,EACF;CACA,iBAAiB,EACf,UAAU,GACZ;AACF,CAAC,GCFY,KAAiB,EAAE,aAAU,GAAG,QAC3C,kBAAC,GAAD;CAAO,WAAW,EAAY,EAAE,YAAS,CAAC;CAAG,GAAI;AAAS,CAAA;AAG5D,EAAc,cAAc;;;ACA5B,IAAM,IAAY,aAML,KAAY,EACvB,IAAI,GACJ,cACA,QAAQ,GACR,SAAS,GACT,UACA,aACA,aAAU,IACV,oBACA,aACA,KAAK,GACL,GAAG,QACgB;CACnB,IAAM,IAAa,GAAG,EAAU,GAAG,EAAM,KACnC,IAAU,KAAU,GAEpB,IAAe,GAAG,EAAU,GAAG,EAAM,KAErC,IAAQ,EAAoB,GAC5B,IAAQ,EAAiB,GAEzB,IAAU,EAAsC,IAAI,GACpD,IAAM,EAAa,GAAc,CAAO,GAExC,KAAyB,EAC7B,eACA,eACA,wBAKI;EACJ,IAAM,IAAO,EAAW,QAAQ,EAAW,MACrC,IAAa,EAAW,cAAc,EAAW,YACjD,IAAQ,EAAW,SAAS,EAAW,OACvC,IAAY,EAAW,aAAa,EAAW,WAE/C,IAAkB,EAAW,OAAO,EAAW;EAMrD,OAAO;GAAE;GAAM;GAAY;GAAW,IAL3B,IAAkB,EAAW,KAAK,KAAA;GAKH,aAJtB,IAAkB,EAAW,cAAc,KAAA;GAIR,QAFxC,KAAS,KAAkB,EAAW;EAES;CAChE,GAEM,IAAU,IAAQ,EAAM,OAAO,SAAS,CAAK,IAAI,GAEjD,KAAuB,MAAuB;EAClD,IAAkB,CAAS;EAE3B,IAAM,IAAe,EAAQ,SAAS;EACtC,AAAI,KAAgB,EAAM,mBACxB,EAAM,gBAAgB,GAAW,CAAY;CAEjD,GAEM,EACJ,OACA,SACA,cACA,gBACA,WACA,YAAY,MACV,EAAsB;EACxB,YAAY;EACZ,YAAY;EACZ,gBAAgB;CAClB,CAAC,GAEK,IAAa,QACZ,IAEE,IAAiB,CAAC,EAAM,OAAO,SAAS,KAF5B,GAGlB,CAAC,GAAO,CAAc,CAAC,GAEpB,IAAgB,KACpB,kBAAC,GAAD;EAAyB;EAAU,SAAS,KAAM;EAAS,IAAI;EAC5D;CACY,CAAA,GAGX,IACJ,kBAAC,GAAD;EACO;EACL,IAAI,KAAM;EACJ;EACC;EACC;EACC;EACC;EACV,UAAU;EACV,oBAAkB;EAClB,gBAAc;EACd,iBAAiB;EACjB,mBAAiB,IAAW,IAAe,EAAM;EACjD,GAAI;CACL,CAAA,GAGG,IACJ,EAAM,WAAW,IACf,kBAAA,GAAA,EAAA,UAAA,CACG,GACA,CACD,EAAA,CAAA,IAEF,kBAAA,GAAA,EAAA,UAAA,CACG,GACA,CACD,EAAA,CAAA;CAGN,OACE,kBAAC,QAAD;EACE,wBAAqB;EACrB,WAAW,EAAG,gDAAgD,CAAS;YAEtE;CACG,CAAA;AAEV;AAEA,EAAS,cAAc;;;AC9IvB,IAAa,IAAsB,EAAI,CAAC,MAAM,GAAG,EAC/C,UAAU,EAIR,aAAa;CACX,UAAU,CAAC,YAAY,QAAQ;CAC/B,YAAY,CAAC,QAAQ;AACvB,EACF,EACF,CAAC,GCeY,KAAiB,EAC5B,MAAM,GACN,OAAO,GACP,iBACA,cACA,WACA,iBAAc,YACd,iBAAiB,GACjB,aAAU,IACV,aACA,QACA,GAAG,QACqB;CACxB,IAAM,CAAC,GAAO,KAAY,EAAiB,GAAW,CAAY,GAC5D,IAAQ,EAAoB,GAC5B,IAAqB,EAAO,CAAmB,GAE/C,EAAE,OAAI,YAAS,gBAAa,UAAO,cAAW,kBAAe,GAC7D,IAAO,KAAY,EAAM,MAEzB,IAAU,SAcP;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBAvB2B,GAAkB,MAAoB;GACjE,IAAM,IAAS,KAAS,CAAC,GACnB,IAAW,IACb,CAAC,GAAG,GAAQ,CAAO,IACnB,EAAO,QAAQ,MAAgB,MAAQ,CAAO;GAIlD,AAFA,EAAS,CAAQ,GAEb,EAAmB,WACrB,EAAmB,QAAQ,CAAQ;EAEvC;CAaA,IACC;EAAC;EAAI;EAAM;EAAO;EAAQ;EAAO;EAAW;EAAa;EAAY;EAAU;CAAO,CAAC;CAM1F,OAJA,QAAgB;EACd,EAAmB,UAAU;CAC/B,GAAG,CAAC,CAAmB,CAAC,GAGtB,kBAAC,GAAD;EAAsB,OAAO;YAC3B,kBAAC,OAAD;GACO;GACL,WAAW,EAAoB;IAAE;IAAW;GAAY,CAAC;GACzD,MAAK;GACL,mBAAiB;GACjB,oBAAkB;GAClB,GAAI;GAEH;EACE,CAAA;CACe,CAAA;AAE1B;AAEA,EAAc,cAAc"}
+{"version":3,"file":"checkbox-BEo9AVSB.mjs","names":[],"sources":["../src/checkbox/CheckboxGroupContext.tsx","../src/checkbox/CheckboxIndicator.tsx","../src/checkbox/CheckboxInput.styles.ts","../src/checkbox/CheckboxInput.tsx","../src/checkbox/CheckboxLabel.styles.ts","../src/checkbox/CheckboxLabel.tsx","../src/checkbox/Checkbox.tsx","../src/checkbox/CheckboxGroup.styles.ts","../src/checkbox/CheckboxGroup.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { CheckboxInputStylesProps } from './CheckboxInput.styles'\n\nexport interface CheckboxGroupContextState extends Pick<CheckboxInputStylesProps, 'intent'> {\n  /**\n   * The id of the checkbox group.\n   */\n  id: string\n  /**\n   * The name of the group. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * The value of the checkbox group.\n   */\n  value?: string[]\n  /**\n   * A set of ids separated by a space used to describe the input component given by a set of messages.\n   */\n  description?: string\n  /**\n   * The validation state of the checkbox group.\n   */\n  state?: 'error' | 'success' | 'alert'\n  /**\n   * If true, the checkbox group will be invalid.\n   */\n  isInvalid?: boolean\n  /**\n   * If true, the checkbox group will be required.\n   */\n  isRequired?: boolean\n  /**\n   * Callback used to update or notify the value of the checkbox group.\n   */\n  onCheckedChange?: (checked: boolean, changed: string) => void\n  /**\n   * When true, the label will be placed on the left side of the Checkbox\n   */\n  reverse?: boolean\n}\n\nexport const CheckboxGroupContext = createContext<Partial<CheckboxGroupContextState>>({})\n\nexport const useCheckboxGroup = () => {\n  const context = useContext(CheckboxGroupContext)\n\n  return context\n}\n","import { Checkbox } from 'radix-ui'\nimport { Ref } from 'react'\n\nconst CheckboxIndicatorPrimitive = Checkbox.CheckboxIndicator\n\nexport type CheckboxIndicatorProps = Checkbox.CheckboxIndicatorProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const CheckboxIndicator = (props: CheckboxIndicatorProps) => (\n  <CheckboxIndicatorPrimitive className=\"flex size-full items-center justify-center\" {...props} />\n)\n\nCheckboxIndicator.displayName = 'CheckboxIndicator'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const checkboxInputStyles = cva(\n  [\n    'size-sz-24 shrink-0 items-center justify-center rounded-sm border-md bg-transparent',\n    'disabled:cursor-not-allowed disabled:opacity-dim-3 disabled:hover:ring-0',\n    'focus-visible:u-outline',\n    'hover:ring-4 hover:cursor-pointer',\n    'u-shadow-border-transition',\n  ],\n  {\n    variants: {\n      /**\n       * Color scheme of the checkbox.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: [\n          'text-on-main',\n          'hover:ring-main-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-main data-[state=indeterminate]:bg-main',\n          'data-[state=checked]:border-main data-[state=checked]:bg-main',\n        ],\n        support: [\n          'text-on-support',\n          'hover:ring-support-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-support data-[state=indeterminate]:bg-support',\n          'data-[state=checked]:border-support data-[state=checked]:bg-support',\n        ],\n        accent: [\n          'text-on-accent',\n          'hover:ring-accent-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent',\n          'data-[state=checked]:border-accent data-[state=checked]:bg-accent',\n        ],\n        success: [\n          'text-on-success',\n          'hover:ring-success-container',\n          'data-[state=unchecked]:border-success',\n          'data-[state=indeterminate]:border-success data-[state=indeterminate]:bg-success',\n          'data-[state=checked]:border-success data-[state=checked]:bg-success',\n        ],\n        alert: [\n          'text-on-alert',\n          'hover:ring-alert-container',\n          'data-[state=unchecked]:border-alert',\n          'data-[state=indeterminate]:border-alert data-[state=indeterminate]:bg-alert',\n          'data-[state=checked]:border-alert data-[state=checked]:bg-alert',\n        ],\n        error: [\n          'text-on-error',\n          'hover:ring-error-container',\n          'data-[state=unchecked]:border-error',\n          'data-[state=indeterminate]:border-error data-[state=indeterminate]:bg-error',\n          'data-[state=checked]:border-error data-[state=checked]:bg-error',\n        ],\n        info: [\n          'text-on-info',\n          'hover:ring-info-container',\n          'data-[state=unchecked]:border-info',\n          'data-[state=indeterminate]:border-info data-[state=indeterminate]:bg-info',\n          'data-[state=checked]:border-info data-[state=checked]:bg-info',\n        ],\n        neutral: [\n          'text-on-neutral',\n          'hover:ring-neutral-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-neutral data-[state=indeterminate]:bg-neutral',\n          'data-[state=checked]:border-neutral data-[state=checked]:bg-neutral',\n        ],\n      }),\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type CheckboxInputStylesProps = VariantProps<typeof checkboxInputStyles>\n","import { Check } from '@spark-ui/icons/Check'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { Checkbox } from 'radix-ui'\nimport { ComponentPropsWithoutRef, ReactNode, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { CheckboxIndicator } from './CheckboxIndicator'\nimport { checkboxInputStyles, type CheckboxInputStylesProps } from './CheckboxInput.styles'\n\ntype CheckedStatus = boolean | 'indeterminate'\n\nconst CheckboxPrimitive = Checkbox.Checkbox\n\nexport interface CheckboxInputProps\n  extends\n    CheckboxInputStylesProps,\n    Omit<ComponentPropsWithoutRef<'button'>, 'onChange' | 'value' | 'checked' | 'defaultChecked'> {\n  /**\n   * The checked icon to use.\n   */\n  icon?: ReactNode\n  /**\n   * The indeterminate icon to use.\n   */\n  indeterminateIcon?: ReactNode\n  /**\n   * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.\n   */\n  defaultChecked?: boolean\n  /**\n   * The controlled checked state of the checkbox. Must be used in conjunction with onCheckedChange.\n   */\n  checked?: CheckedStatus\n  /**\n   * When true, prevents the user from interacting with the checkbox.\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must check the checkbox before the owning form can be submitted.\n   */\n  required?: boolean\n  /**\n   * The name of the checkbox. 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   * Event handler called when the checked state of the checkbox changes.\n   */\n  onCheckedChange?: (checked: boolean) => void\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const CheckboxInput = ({\n  className,\n  icon = <Check />,\n  indeterminateIcon = <Minus />,\n  intent,\n  checked,\n  ref,\n  ...others\n}: CheckboxInputProps) => (\n  <CheckboxPrimitive\n    ref={ref}\n    className={checkboxInputStyles({ intent, className })}\n    checked={checked}\n    {...others}\n  >\n    <CheckboxIndicator>\n      <Icon size=\"sm\">{checked === 'indeterminate' ? indeterminateIcon : icon}</Icon>\n    </CheckboxIndicator>\n  </CheckboxPrimitive>\n)\n\nCheckboxInput.displayName = 'CheckboxInput'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const labelStyles = cva('grow', {\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, type LabelStylesProps } from './CheckboxLabel.styles'\n\nexport interface CheckboxLabelProps extends LabelProps, LabelStylesProps {\n  /**\n   * When true, prevents the user from interacting with the checkbox item.\n   */\n  disabled?: boolean\n}\n\nexport const CheckboxLabel = ({ disabled, ...others }: CheckboxLabelProps) => (\n  <Label className={labelStyles({ disabled })} {...others} />\n)\n\nCheckboxLabel.displayName = 'CheckboxLabel'\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { Ref, useId, useMemo, useRef } from 'react'\n\nimport { CheckboxGroupContextState, useCheckboxGroup } from './CheckboxGroupContext'\nimport { CheckboxInput, CheckboxInputProps } from './CheckboxInput'\nimport { CheckboxLabel } from './CheckboxLabel'\n\nexport type CheckboxProps = CheckboxInputProps &\n  Pick<CheckboxGroupContextState, 'reverse'> & {\n    ref?: Ref<HTMLButtonElement>\n  }\n\nconst ID_PREFIX = ':checkbox'\n\n// oxlint-disable-next-line max-lines-per-function\n/**\n * A control that allows users to select one or multiple options from a set.\n */\nexport const Checkbox = ({\n  id: idProp,\n  className,\n  intent: intentProp,\n  checked: checkedProp,\n  value,\n  disabled,\n  reverse = false,\n  onCheckedChange,\n  children,\n  ref: forwardedRef,\n  ...others\n}: CheckboxProps) => {\n  const checkboxId = `${ID_PREFIX}-${useId()}`\n  const innerId = idProp || checkboxId\n\n  const innerLabelId = `${ID_PREFIX}-${useId()}`\n\n  const field = useFormFieldControl()\n  const group = useCheckboxGroup()\n\n  const rootRef = useRef<HTMLButtonElement | undefined>(null)\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  const getCheckboxAttributes = ({\n    fieldState,\n    groupState,\n    checkboxIntent,\n  }: {\n    fieldState: ReturnType<typeof useFormFieldControl>\n    groupState: ReturnType<typeof useCheckboxGroup>\n    checkboxIntent: CheckboxInputProps['intent']\n  }) => {\n    const name = fieldState.name ?? groupState.name\n    const isRequired = fieldState.isRequired ?? groupState.isRequired\n    const state = fieldState.state ?? groupState.state\n    const isInvalid = fieldState.isInvalid ?? groupState.isInvalid\n\n    const isFieldEnclosed = fieldState.id !== groupState.id\n    const id = isFieldEnclosed ? fieldState.id : undefined\n    const description = isFieldEnclosed ? fieldState.description : undefined\n\n    const intent = state ?? checkboxIntent ?? groupState.intent\n\n    return { name, isRequired, isInvalid, id, description, intent }\n  }\n\n  const checked = value ? group.value?.includes(value) : checkedProp\n\n  const handleCheckedChange = (isChecked: boolean) => {\n    onCheckedChange?.(isChecked)\n\n    const rootRefValue = rootRef.current?.value\n    if (rootRefValue && group.onCheckedChange) {\n      group.onCheckedChange(isChecked, rootRefValue)\n    }\n  }\n\n  const {\n    id,\n    name,\n    isInvalid,\n    description,\n    intent,\n    isRequired: isRequiredAttr,\n  } = getCheckboxAttributes({\n    fieldState: field,\n    groupState: group,\n    checkboxIntent: intentProp,\n  })\n\n  const isRequired = useMemo(() => {\n    if (!group) return isRequiredAttr\n\n    return isRequiredAttr ? !group.value?.length : false\n  }, [group, isRequiredAttr])\n\n  const checkboxLabel = children && (\n    <CheckboxLabel disabled={disabled} htmlFor={id || innerId} id={innerLabelId}>\n      {children}\n    </CheckboxLabel>\n  )\n\n  const checkboxInput = (\n    <CheckboxInput\n      ref={ref}\n      id={id || innerId}\n      name={name}\n      value={value}\n      intent={intent}\n      checked={checked}\n      disabled={disabled}\n      required={isRequired}\n      aria-describedby={description}\n      aria-invalid={isInvalid}\n      onCheckedChange={handleCheckedChange}\n      aria-labelledby={children ? innerLabelId : field.labelId}\n      {...others}\n    />\n  )\n\n  const content =\n    group.reverse || reverse ? (\n      <>\n        {checkboxLabel}\n        {checkboxInput}\n      </>\n    ) : (\n      <>\n        {checkboxInput}\n        {checkboxLabel}\n      </>\n    )\n\n  return (\n    <span\n      data-spark-component=\"checkbox\"\n      className={cx('gap-md text-body-1 relative flex items-start', className)}\n    >\n      {content}\n    </span>\n  )\n}\n\nCheckbox.displayName = 'Checkbox'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const checkboxGroupStyles = cva(['flex'], {\n  variants: {\n    /**\n     * Prop to set the orientation of the checkbox group which could be `vertical` or `horizontal`.\n     */\n    orientation: {\n      vertical: ['flex-col', 'gap-lg'],\n      horizontal: ['gap-xl'],\n    },\n  },\n})\n\nexport type CheckboxGroupStylesProps = VariantProps<typeof checkboxGroupStyles>\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useMemo, useRef } from 'react'\n\nimport { checkboxGroupStyles, CheckboxGroupStylesProps } from './CheckboxGroup.styles'\nimport { CheckboxGroupContext, CheckboxGroupContextState } from './CheckboxGroupContext'\n\nexport interface CheckboxGroupProps\n  extends\n    Omit<ComponentPropsWithoutRef<'div'>, 'value' | 'defaultValue' | 'onChange'>,\n    CheckboxGroupStylesProps,\n    Pick<CheckboxGroupContextState, 'intent' | 'name' | 'value' | 'reverse'> {\n  /**\n   * The initial value of the checkbox group\n   */\n  defaultValue?: string[]\n  /**\n   * The callback fired when any children Checkbox is checked or unchecked\n   */\n  onCheckedChange?: (value: string[]) => void\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * A group component that allows users to select one or more checkboxes from a list of choices,\n * managing their state collectively with support for controlled and uncontrolled modes.\n */\nexport const CheckboxGroup = ({\n  name: nameProp,\n  value: valueProp,\n  defaultValue,\n  className,\n  intent,\n  orientation = 'vertical',\n  onCheckedChange: onCheckedChangeProp,\n  reverse = false,\n  children,\n  ref,\n  ...others\n}: CheckboxGroupProps) => {\n  const [value, setValue] = useCombinedState(valueProp, defaultValue)\n  const field = useFormFieldControl()\n  const onCheckedChangeRef = useRef(onCheckedChangeProp)\n\n  const { id, labelId, description, state, isInvalid, isRequired } = field\n  const name = nameProp ?? field.name\n\n  const current = useMemo(() => {\n    const handleCheckedChange = (checked: boolean, changed: string) => {\n      const values = value || []\n      const modified = checked\n        ? [...values, changed]\n        : values.filter((val: string) => val !== changed)\n\n      setValue(modified)\n\n      if (onCheckedChangeRef.current) {\n        onCheckedChangeRef.current(modified)\n      }\n    }\n\n    return {\n      id,\n      name,\n      value,\n      intent,\n      state,\n      isInvalid,\n      description,\n      isRequired,\n      reverse,\n      onCheckedChange: handleCheckedChange,\n    }\n  }, [id, name, value, intent, state, isInvalid, description, isRequired, setValue, reverse])\n\n  useEffect(() => {\n    onCheckedChangeRef.current = onCheckedChangeProp\n  }, [onCheckedChangeProp])\n\n  return (\n    <CheckboxGroupContext value={current}>\n      <div\n        ref={ref}\n        className={checkboxGroupStyles({ className, orientation })}\n        role=\"group\"\n        aria-labelledby={labelId}\n        aria-describedby={description}\n        {...others}\n      >\n        {children}\n      </div>\n    </CheckboxGroupContext>\n  )\n}\n\nCheckboxGroup.displayName = 'CheckboxGroup'\n"],"mappings":";;;;;;;;;;;;;AA2CA,IAAa,IAAuB,EAAkD,CAAC,CAAC,GAE3E,UACK,EAAW,CAEpB,GC7CH,IAA6B,EAAS,mBAM/B,KAAqB,MAChC,kBAAC,GAAD;CAA4B,WAAU;CAA6C,GAAI;AAAQ,CAAA;AAGjG,EAAkB,cAAc;;;ACVhC,IAAa,IAAsB,EACjC;CACE;CACA;CACA;CACA;CACA;AACF,GACA;CACE,UAAU,EAIR,QAAQ,EAGN;EACA,MAAM;GACJ;GACA;GACA;GACA;GACA;EACF;EACA,SAAS;GACP;GACA;GACA;GACA;GACA;EACF;EACA,QAAQ;GACN;GACA;GACA;GACA;GACA;EACF;EACA,SAAS;GACP;GACA;GACA;GACA;GACA;EACF;EACA,OAAO;GACL;GACA;GACA;GACA;GACA;EACF;EACA,OAAO;GACL;GACA;GACA;GACA;GACA;EACF;EACA,MAAM;GACJ;GACA;GACA;GACA;GACA;EACF;EACA,SAAS;GACP;GACA;GACA;GACA;GACA;EACF;CACF,CAAC,EACH;CACA,iBAAiB,EACf,QAAQ,UACV;AACF,CACF,GCvEM,IAAoB,EAAS,UA6CtB,KAAiB,EAC5B,cACA,UAAO,kBAAC,GAAD,CAAQ,CAAA,GACf,uBAAoB,kBAAC,GAAD,CAAQ,CAAA,GAC5B,WACA,YACA,QACA,GAAG,QAEH,kBAAC,GAAD;CACO;CACL,WAAW,EAAoB;EAAE;EAAQ;CAAU,CAAC;CAC3C;CACT,GAAI;WAEJ,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;EAAM,MAAK;YAAM,MAAY,kBAAkB,IAAoB;CAAW,CAAA,EAC7D,CAAA;AACF,CAAA;AAGrB,EAAc,cAAc;;;AC3E5B,IAAa,IAAc,EAAI,QAAQ;CACrC,UAAU,EACR,UAAU;EACR,MAAM,CAAC,sBAAsB,oBAAoB;EACjD,OAAO,CAAC,gBAAgB;CAC1B,EACF;CACA,iBAAiB,EACf,UAAU,GACZ;AACF,CAAC,GCFY,KAAiB,EAAE,aAAU,GAAG,QAC3C,kBAAC,GAAD;CAAO,WAAW,EAAY,EAAE,YAAS,CAAC;CAAG,GAAI;AAAS,CAAA;AAG5D,EAAc,cAAc;;;ACA5B,IAAM,IAAY,aAML,KAAY,EACvB,IAAI,GACJ,cACA,QAAQ,GACR,SAAS,GACT,UACA,aACA,aAAU,IACV,oBACA,aACA,KAAK,GACL,GAAG,QACgB;CACnB,IAAM,IAAa,GAAG,EAAU,GAAG,EAAM,KACnC,IAAU,KAAU,GAEpB,IAAe,GAAG,EAAU,GAAG,EAAM,KAErC,IAAQ,EAAoB,GAC5B,IAAQ,EAAiB,GAEzB,IAAU,EAAsC,IAAI,GACpD,IAAM,EAAa,GAAc,CAAO,GAExC,KAAyB,EAC7B,eACA,eACA,wBAKI;EACJ,IAAM,IAAO,EAAW,QAAQ,EAAW,MACrC,IAAa,EAAW,cAAc,EAAW,YACjD,IAAQ,EAAW,SAAS,EAAW,OACvC,IAAY,EAAW,aAAa,EAAW,WAE/C,IAAkB,EAAW,OAAO,EAAW;EAMrD,OAAO;GAAE;GAAM;GAAY;GAAW,IAL3B,IAAkB,EAAW,KAAK,KAAA;GAKH,aAJtB,IAAkB,EAAW,cAAc,KAAA;GAIR,QAFxC,KAAS,KAAkB,EAAW;EAES;CAChE,GAEM,IAAU,IAAQ,EAAM,OAAO,SAAS,CAAK,IAAI,GAEjD,KAAuB,MAAuB;EAClD,IAAkB,CAAS;EAE3B,IAAM,IAAe,EAAQ,SAAS;EACtC,AAAI,KAAgB,EAAM,mBACxB,EAAM,gBAAgB,GAAW,CAAY;CAEjD,GAEM,EACJ,OACA,SACA,cACA,gBACA,WACA,YAAY,MACV,EAAsB;EACxB,YAAY;EACZ,YAAY;EACZ,gBAAgB;CAClB,CAAC,GAEK,IAAa,QACZ,IAEE,IAAiB,CAAC,EAAM,OAAO,SAAS,KAF5B,GAGlB,CAAC,GAAO,CAAc,CAAC,GAEpB,IAAgB,KACpB,kBAAC,GAAD;EAAyB;EAAU,SAAS,KAAM;EAAS,IAAI;EAC5D;CACY,CAAA,GAGX,IACJ,kBAAC,GAAD;EACO;EACL,IAAI,KAAM;EACJ;EACC;EACC;EACC;EACC;EACV,UAAU;EACV,oBAAkB;EAClB,gBAAc;EACd,iBAAiB;EACjB,mBAAiB,IAAW,IAAe,EAAM;EACjD,GAAI;CACL,CAAA,GAGG,IACJ,EAAM,WAAW,IACf,kBAAA,GAAA,EAAA,UAAA,CACG,GACA,CACD,EAAA,CAAA,IAEF,kBAAA,GAAA,EAAA,UAAA,CACG,GACA,CACD,EAAA,CAAA;CAGN,OACE,kBAAC,QAAD;EACE,wBAAqB;EACrB,WAAW,EAAG,gDAAgD,CAAS;YAEtE;CACG,CAAA;AAEV;AAEA,EAAS,cAAc;;;AC9IvB,IAAa,IAAsB,EAAI,CAAC,MAAM,GAAG,EAC/C,UAAU,EAIR,aAAa;CACX,UAAU,CAAC,YAAY,QAAQ;CAC/B,YAAY,CAAC,QAAQ;AACvB,EACF,EACF,CAAC,GCeY,KAAiB,EAC5B,MAAM,GACN,OAAO,GACP,iBACA,cACA,WACA,iBAAc,YACd,iBAAiB,GACjB,aAAU,IACV,aACA,QACA,GAAG,QACqB;CACxB,IAAM,CAAC,GAAO,KAAY,EAAiB,GAAW,CAAY,GAC5D,IAAQ,EAAoB,GAC5B,IAAqB,EAAO,CAAmB,GAE/C,EAAE,OAAI,YAAS,gBAAa,UAAO,cAAW,kBAAe,GAC7D,IAAO,KAAY,EAAM,MAEzB,IAAU,SAcP;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,kBAvB2B,GAAkB,MAAoB;GACjE,IAAM,IAAS,KAAS,CAAC,GACnB,IAAW,IACb,CAAC,GAAG,GAAQ,CAAO,IACnB,EAAO,QAAQ,MAAgB,MAAQ,CAAO;GAIlD,AAFA,EAAS,CAAQ,GAEb,EAAmB,WACrB,EAAmB,QAAQ,CAAQ;EAEvC;CAaA,IACC;EAAC;EAAI;EAAM;EAAO;EAAQ;EAAO;EAAW;EAAa;EAAY;EAAU;CAAO,CAAC;CAM1F,OAJA,QAAgB;EACd,EAAmB,UAAU;CAC/B,GAAG,CAAC,CAAmB,CAAC,GAGtB,kBAAC,GAAD;EAAsB,OAAO;YAC3B,kBAAC,OAAD;GACO;GACL,WAAW,EAAoB;IAAE;IAAW;GAAY,CAAC;GACzD,MAAK;GACL,mBAAiB;GACjB,oBAAkB;GAClB,GAAI;GAEH;EACE,CAAA;CACe,CAAA;AAE1B;AAEA,EAAc,cAAc"}

package/dist/{checkbox-Cbewcw6G.js → checkbox-Cr60_jql.js}

@@ -1,2 +1,2 @@
-const e=require("./icon-DY4l9nsc.js"),t=require("./label-DO48yda7.js");let n=require("class-variance-authority"),r=require("react"),i=require("radix-ui"),a=require("react/jsx-runtime"),o=require("@spark-ui/internal-utils"),s=require("@spark-ui/hooks/use-merge-refs"),c=require("@spark-ui/components/form-field"),l=require("@spark-ui/icons/Check"),u=require("@spark-ui/icons/Minus"),d=require("@spark-ui/hooks/use-combined-state");var f=(0,r.createContext)({}),p=()=>(0,r.useContext)(f),m=i.Checkbox.CheckboxIndicator,h=e=>(0,a.jsx)(m,{className:`flex size-full items-center justify-center`,...e});h.displayName=`CheckboxIndicator`;var g=(0,n.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:(0,o.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`],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:`support`}}),_=i.Checkbox.Checkbox,v=({className:t,icon:n=(0,a.jsx)(l.Check,{}),indeterminateIcon:r=(0,a.jsx)(u.Minus,{}),intent:i,checked:o,ref:s,...c})=>(0,a.jsx)(_,{ref:s,className:g({intent:i,className:t}),checked:o,...c,children:(0,a.jsx)(h,{children:(0,a.jsx)(e.t,{size:`sm`,children:o===`indeterminate`?r:n})})});v.displayName=`CheckboxInput`;var y=(0,n.cva)(`grow`,{variants:{disabled:{true:[`text-neutral/dim-2`,`cursor-not-allowed`],false:[`cursor-pointer`]}},defaultVariants:{disabled:!1}}),b=({disabled:e,...n})=>(0,a.jsx)(t.t,{className:y({disabled:e}),...n});b.displayName=`CheckboxLabel`;var x=`:checkbox`,S=({id:e,className:t,intent:i,checked:o,value:l,disabled:u,reverse:d=!1,onCheckedChange:f,children:m,ref:h,...g})=>{let _=`${x}-${(0,r.useId)()}`,y=e||_,S=`${x}-${(0,r.useId)()}`,C=(0,c.useFormFieldControl)(),w=p(),T=(0,r.useRef)(null),E=(0,s.useMergeRefs)(h,T),D=({fieldState:e,groupState:t,checkboxIntent:n})=>{let r=e.name??t.name,i=e.isRequired??t.isRequired,a=e.state??t.state,o=e.isInvalid??t.isInvalid,s=e.id!==t.id;return{name:r,isRequired:i,isInvalid:o,id:s?e.id:void 0,description:s?e.description:void 0,intent:a??n??t.intent}},O=l?w.value?.includes(l):o,k=e=>{f?.(e);let t=T.current?.value;t&&w.onCheckedChange&&w.onCheckedChange(e,t)},{id:A,name:j,isInvalid:M,description:N,intent:P,isRequired:F}=D({fieldState:C,groupState:w,checkboxIntent:i}),I=(0,r.useMemo)(()=>w?F?!w.value?.length:!1:F,[w,F]),L=m&&(0,a.jsx)(b,{disabled:u,htmlFor:A||y,id:S,children:m}),R=(0,a.jsx)(v,{ref:E,id:A||y,name:j,value:l,intent:P,checked:O,disabled:u,required:I,"aria-describedby":N,"aria-invalid":M,onCheckedChange:k,"aria-labelledby":m?S:C.labelId,...g}),z=w.reverse||d?(0,a.jsxs)(a.Fragment,{children:[L,R]}):(0,a.jsxs)(a.Fragment,{children:[R,L]});return(0,a.jsx)(`span`,{"data-spark-component":`checkbox`,className:(0,n.cx)(`gap-md text-body-1 relative flex items-start`,t),children:z})};S.displayName=`Checkbox`;var C=(0,n.cva)([`flex`],{variants:{orientation:{vertical:[`flex-col`,`gap-lg`],horizontal:[`gap-xl`]}}}),w=({name:e,value:t,defaultValue:n,className:i,intent:o,orientation:s=`vertical`,onCheckedChange:l,reverse:u=!1,children:p,ref:m,...h})=>{let[g,_]=(0,d.useCombinedState)(t,n),v=(0,c.useFormFieldControl)(),y=(0,r.useRef)(l),{id:b,labelId:x,description:S,state:w,isInvalid:T,isRequired:E}=v,D=e??v.name,O=(0,r.useMemo)(()=>({id:b,name:D,value:g,intent:o,state:w,isInvalid:T,description:S,isRequired:E,reverse:u,onCheckedChange:(e,t)=>{let n=g||[],r=e?[...n,t]:n.filter(e=>e!==t);_(r),y.current&&y.current(r)}}),[b,D,g,o,w,T,S,E,_,u]);return(0,r.useEffect)(()=>{y.current=l},[l]),(0,a.jsx)(f,{value:O,children:(0,a.jsx)(`div`,{ref:m,className:C({className:i,orientation:s}),role:`group`,"aria-labelledby":x,"aria-describedby":S,...h,children:p})})};w.displayName=`CheckboxGroup`,Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return S}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return w}});
-//# sourceMappingURL=checkbox-Cbewcw6G.js.map
+const e=require("./icon-CfEsla9z.js"),t=require("./label-B085X0Sg.js");let n=require("@spark-ui/internal-utils"),r=require("class-variance-authority"),i=require("react"),a=require("react/jsx-runtime"),o=require("radix-ui"),s=require("@spark-ui/hooks/use-merge-refs"),c=require("@spark-ui/components/form-field"),l=require("@spark-ui/icons/Check"),u=require("@spark-ui/icons/Minus"),d=require("@spark-ui/hooks/use-combined-state");var f=(0,i.createContext)({}),p=()=>(0,i.useContext)(f),m=o.Checkbox.CheckboxIndicator,h=e=>(0,a.jsx)(m,{className:`flex size-full items-center justify-center`,...e});h.displayName=`CheckboxIndicator`;var g=(0,r.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:(0,n.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`],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:`support`}}),_=o.Checkbox.Checkbox,v=({className:t,icon:n=(0,a.jsx)(l.Check,{}),indeterminateIcon:r=(0,a.jsx)(u.Minus,{}),intent:i,checked:o,ref:s,...c})=>(0,a.jsx)(_,{ref:s,className:g({intent:i,className:t}),checked:o,...c,children:(0,a.jsx)(h,{children:(0,a.jsx)(e.t,{size:`sm`,children:o===`indeterminate`?r:n})})});v.displayName=`CheckboxInput`;var y=(0,r.cva)(`grow`,{variants:{disabled:{true:[`text-neutral/dim-2`,`cursor-not-allowed`],false:[`cursor-pointer`]}},defaultVariants:{disabled:!1}}),b=({disabled:e,...n})=>(0,a.jsx)(t.t,{className:y({disabled:e}),...n});b.displayName=`CheckboxLabel`;var x=`:checkbox`,S=({id:e,className:t,intent:n,checked:o,value:l,disabled:u,reverse:d=!1,onCheckedChange:f,children:m,ref:h,...g})=>{let _=`${x}-${(0,i.useId)()}`,y=e||_,S=`${x}-${(0,i.useId)()}`,C=(0,c.useFormFieldControl)(),w=p(),T=(0,i.useRef)(null),E=(0,s.useMergeRefs)(h,T),D=({fieldState:e,groupState:t,checkboxIntent:n})=>{let r=e.name??t.name,i=e.isRequired??t.isRequired,a=e.state??t.state,o=e.isInvalid??t.isInvalid,s=e.id!==t.id;return{name:r,isRequired:i,isInvalid:o,id:s?e.id:void 0,description:s?e.description:void 0,intent:a??n??t.intent}},O=l?w.value?.includes(l):o,k=e=>{f?.(e);let t=T.current?.value;t&&w.onCheckedChange&&w.onCheckedChange(e,t)},{id:A,name:j,isInvalid:M,description:N,intent:P,isRequired:F}=D({fieldState:C,groupState:w,checkboxIntent:n}),I=(0,i.useMemo)(()=>w?F?!w.value?.length:!1:F,[w,F]),L=m&&(0,a.jsx)(b,{disabled:u,htmlFor:A||y,id:S,children:m}),R=(0,a.jsx)(v,{ref:E,id:A||y,name:j,value:l,intent:P,checked:O,disabled:u,required:I,"aria-describedby":N,"aria-invalid":M,onCheckedChange:k,"aria-labelledby":m?S:C.labelId,...g}),z=w.reverse||d?(0,a.jsxs)(a.Fragment,{children:[L,R]}):(0,a.jsxs)(a.Fragment,{children:[R,L]});return(0,a.jsx)(`span`,{"data-spark-component":`checkbox`,className:(0,r.cx)(`gap-md text-body-1 relative flex items-start`,t),children:z})};S.displayName=`Checkbox`;var C=(0,r.cva)([`flex`],{variants:{orientation:{vertical:[`flex-col`,`gap-lg`],horizontal:[`gap-xl`]}}}),w=({name:e,value:t,defaultValue:n,className:r,intent:o,orientation:s=`vertical`,onCheckedChange:l,reverse:u=!1,children:p,ref:m,...h})=>{let[g,_]=(0,d.useCombinedState)(t,n),v=(0,c.useFormFieldControl)(),y=(0,i.useRef)(l),{id:b,labelId:x,description:S,state:w,isInvalid:T,isRequired:E}=v,D=e??v.name,O=(0,i.useMemo)(()=>({id:b,name:D,value:g,intent:o,state:w,isInvalid:T,description:S,isRequired:E,reverse:u,onCheckedChange:(e,t)=>{let n=g||[],r=e?[...n,t]:n.filter(e=>e!==t);_(r),y.current&&y.current(r)}}),[b,D,g,o,w,T,S,E,_,u]);return(0,i.useEffect)(()=>{y.current=l},[l]),(0,a.jsx)(f,{value:O,children:(0,a.jsx)(`div`,{ref:m,className:C({className:r,orientation:s}),role:`group`,"aria-labelledby":x,"aria-describedby":S,...h,children:p})})};w.displayName=`CheckboxGroup`,Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return S}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return w}});
+//# sourceMappingURL=checkbox-Cr60_jql.js.map

package/dist/{checkbox-Cbewcw6G.js.map → checkbox-Cr60_jql.js.map}

@@ -1 +1 @@
-{"version":3,"file":"checkbox-Cbewcw6G.js","names":[],"sources":["../src/checkbox/CheckboxGroupContext.tsx","../src/checkbox/CheckboxIndicator.tsx","../src/checkbox/CheckboxInput.styles.ts","../src/checkbox/CheckboxInput.tsx","../src/checkbox/CheckboxLabel.styles.ts","../src/checkbox/CheckboxLabel.tsx","../src/checkbox/Checkbox.tsx","../src/checkbox/CheckboxGroup.styles.ts","../src/checkbox/CheckboxGroup.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { CheckboxInputStylesProps } from './CheckboxInput.styles'\n\nexport interface CheckboxGroupContextState extends Pick<CheckboxInputStylesProps, 'intent'> {\n  /**\n   * The id of the checkbox group.\n   */\n  id: string\n  /**\n   * The name of the group. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * The value of the checkbox group.\n   */\n  value?: string[]\n  /**\n   * A set of ids separated by a space used to describe the input component given by a set of messages.\n   */\n  description?: string\n  /**\n   * The validation state of the checkbox group.\n   */\n  state?: 'error' | 'success' | 'alert'\n  /**\n   * If true, the checkbox group will be invalid.\n   */\n  isInvalid?: boolean\n  /**\n   * If true, the checkbox group will be required.\n   */\n  isRequired?: boolean\n  /**\n   * Callback used to update or notify the value of the checkbox group.\n   */\n  onCheckedChange?: (checked: boolean, changed: string) => void\n  /**\n   * When true, the label will be placed on the left side of the Checkbox\n   */\n  reverse?: boolean\n}\n\nexport const CheckboxGroupContext = createContext<Partial<CheckboxGroupContextState>>({})\n\nexport const useCheckboxGroup = () => {\n  const context = useContext(CheckboxGroupContext)\n\n  return context\n}\n","import { Checkbox } from 'radix-ui'\nimport { Ref } from 'react'\n\nconst CheckboxIndicatorPrimitive = Checkbox.CheckboxIndicator\n\nexport type CheckboxIndicatorProps = Checkbox.CheckboxIndicatorProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const CheckboxIndicator = (props: CheckboxIndicatorProps) => (\n  <CheckboxIndicatorPrimitive className=\"flex size-full items-center justify-center\" {...props} />\n)\n\nCheckboxIndicator.displayName = 'CheckboxIndicator'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const checkboxInputStyles = cva(\n  [\n    'size-sz-24 shrink-0 items-center justify-center rounded-sm border-md bg-transparent',\n    'disabled:cursor-not-allowed disabled:opacity-dim-3 disabled:hover:ring-0',\n    'focus-visible:u-outline',\n    'hover:ring-4 hover:cursor-pointer',\n    'u-shadow-border-transition',\n  ],\n  {\n    variants: {\n      /**\n       * Color scheme of the checkbox.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: [\n          'text-on-main',\n          'hover:ring-main-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-main data-[state=indeterminate]:bg-main',\n          'data-[state=checked]:border-main data-[state=checked]:bg-main',\n        ],\n        support: [\n          'text-on-support',\n          'hover:ring-support-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-support data-[state=indeterminate]:bg-support',\n          'data-[state=checked]:border-support data-[state=checked]:bg-support',\n        ],\n        accent: [\n          'text-on-accent',\n          'hover:ring-accent-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent',\n          'data-[state=checked]:border-accent data-[state=checked]:bg-accent',\n        ],\n        success: [\n          'text-on-success',\n          'hover:ring-success-container',\n          'data-[state=unchecked]:border-success',\n          'data-[state=indeterminate]:border-success data-[state=indeterminate]:bg-success',\n          'data-[state=checked]:border-success data-[state=checked]:bg-success',\n        ],\n        alert: [\n          'text-on-alert',\n          'hover:ring-alert-container',\n          'data-[state=unchecked]:border-alert',\n          'data-[state=indeterminate]:border-alert data-[state=indeterminate]:bg-alert',\n          'data-[state=checked]:border-alert data-[state=checked]:bg-alert',\n        ],\n        error: [\n          'text-on-error',\n          'hover:ring-error-container',\n          'data-[state=unchecked]:border-error',\n          'data-[state=indeterminate]:border-error data-[state=indeterminate]:bg-error',\n          'data-[state=checked]:border-error data-[state=checked]:bg-error',\n        ],\n        info: [\n          'text-on-info',\n          'hover:ring-info-container',\n          'data-[state=unchecked]:border-info',\n          'data-[state=indeterminate]:border-info data-[state=indeterminate]:bg-info',\n          'data-[state=checked]:border-info data-[state=checked]:bg-info',\n        ],\n        neutral: [\n          'text-on-neutral',\n          'hover:ring-neutral-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-neutral data-[state=indeterminate]:bg-neutral',\n          'data-[state=checked]:border-neutral data-[state=checked]:bg-neutral',\n        ],\n      }),\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type CheckboxInputStylesProps = VariantProps<typeof checkboxInputStyles>\n","import { Check } from '@spark-ui/icons/Check'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { Checkbox } from 'radix-ui'\nimport { ComponentPropsWithoutRef, ReactNode, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { CheckboxIndicator } from './CheckboxIndicator'\nimport { checkboxInputStyles, type CheckboxInputStylesProps } from './CheckboxInput.styles'\n\ntype CheckedStatus = boolean | 'indeterminate'\n\nconst CheckboxPrimitive = Checkbox.Checkbox\n\nexport interface CheckboxInputProps\n  extends\n    CheckboxInputStylesProps,\n    Omit<ComponentPropsWithoutRef<'button'>, 'onChange' | 'value' | 'checked' | 'defaultChecked'> {\n  /**\n   * The checked icon to use.\n   */\n  icon?: ReactNode\n  /**\n   * The indeterminate icon to use.\n   */\n  indeterminateIcon?: ReactNode\n  /**\n   * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.\n   */\n  defaultChecked?: boolean\n  /**\n   * The controlled checked state of the checkbox. Must be used in conjunction with onCheckedChange.\n   */\n  checked?: CheckedStatus\n  /**\n   * When true, prevents the user from interacting with the checkbox.\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must check the checkbox before the owning form can be submitted.\n   */\n  required?: boolean\n  /**\n   * The name of the checkbox. 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   * Event handler called when the checked state of the checkbox changes.\n   */\n  onCheckedChange?: (checked: boolean) => void\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const CheckboxInput = ({\n  className,\n  icon = <Check />,\n  indeterminateIcon = <Minus />,\n  intent,\n  checked,\n  ref,\n  ...others\n}: CheckboxInputProps) => (\n  <CheckboxPrimitive\n    ref={ref}\n    className={checkboxInputStyles({ intent, className })}\n    checked={checked}\n    {...others}\n  >\n    <CheckboxIndicator>\n      <Icon size=\"sm\">{checked === 'indeterminate' ? indeterminateIcon : icon}</Icon>\n    </CheckboxIndicator>\n  </CheckboxPrimitive>\n)\n\nCheckboxInput.displayName = 'CheckboxInput'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const labelStyles = cva('grow', {\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, type LabelStylesProps } from './CheckboxLabel.styles'\n\nexport interface CheckboxLabelProps extends LabelProps, LabelStylesProps {\n  /**\n   * When true, prevents the user from interacting with the checkbox item.\n   */\n  disabled?: boolean\n}\n\nexport const CheckboxLabel = ({ disabled, ...others }: CheckboxLabelProps) => (\n  <Label className={labelStyles({ disabled })} {...others} />\n)\n\nCheckboxLabel.displayName = 'CheckboxLabel'\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { Ref, useId, useMemo, useRef } from 'react'\n\nimport { CheckboxGroupContextState, useCheckboxGroup } from './CheckboxGroupContext'\nimport { CheckboxInput, CheckboxInputProps } from './CheckboxInput'\nimport { CheckboxLabel } from './CheckboxLabel'\n\nexport type CheckboxProps = CheckboxInputProps &\n  Pick<CheckboxGroupContextState, 'reverse'> & {\n    ref?: Ref<HTMLButtonElement>\n  }\n\nconst ID_PREFIX = ':checkbox'\n\n// oxlint-disable-next-line max-lines-per-function\n/**\n * A control that allows users to select one or multiple options from a set.\n */\nexport const Checkbox = ({\n  id: idProp,\n  className,\n  intent: intentProp,\n  checked: checkedProp,\n  value,\n  disabled,\n  reverse = false,\n  onCheckedChange,\n  children,\n  ref: forwardedRef,\n  ...others\n}: CheckboxProps) => {\n  const checkboxId = `${ID_PREFIX}-${useId()}`\n  const innerId = idProp || checkboxId\n\n  const innerLabelId = `${ID_PREFIX}-${useId()}`\n\n  const field = useFormFieldControl()\n  const group = useCheckboxGroup()\n\n  const rootRef = useRef<HTMLButtonElement | undefined>(null)\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  const getCheckboxAttributes = ({\n    fieldState,\n    groupState,\n    checkboxIntent,\n  }: {\n    fieldState: ReturnType<typeof useFormFieldControl>\n    groupState: ReturnType<typeof useCheckboxGroup>\n    checkboxIntent: CheckboxInputProps['intent']\n  }) => {\n    const name = fieldState.name ?? groupState.name\n    const isRequired = fieldState.isRequired ?? groupState.isRequired\n    const state = fieldState.state ?? groupState.state\n    const isInvalid = fieldState.isInvalid ?? groupState.isInvalid\n\n    const isFieldEnclosed = fieldState.id !== groupState.id\n    const id = isFieldEnclosed ? fieldState.id : undefined\n    const description = isFieldEnclosed ? fieldState.description : undefined\n\n    const intent = state ?? checkboxIntent ?? groupState.intent\n\n    return { name, isRequired, isInvalid, id, description, intent }\n  }\n\n  const checked = value ? group.value?.includes(value) : checkedProp\n\n  const handleCheckedChange = (isChecked: boolean) => {\n    onCheckedChange?.(isChecked)\n\n    const rootRefValue = rootRef.current?.value\n    if (rootRefValue && group.onCheckedChange) {\n      group.onCheckedChange(isChecked, rootRefValue)\n    }\n  }\n\n  const {\n    id,\n    name,\n    isInvalid,\n    description,\n    intent,\n    isRequired: isRequiredAttr,\n  } = getCheckboxAttributes({\n    fieldState: field,\n    groupState: group,\n    checkboxIntent: intentProp,\n  })\n\n  const isRequired = useMemo(() => {\n    if (!group) return isRequiredAttr\n\n    return isRequiredAttr ? !group.value?.length : false\n  }, [group, isRequiredAttr])\n\n  const checkboxLabel = children && (\n    <CheckboxLabel disabled={disabled} htmlFor={id || innerId} id={innerLabelId}>\n      {children}\n    </CheckboxLabel>\n  )\n\n  const checkboxInput = (\n    <CheckboxInput\n      ref={ref}\n      id={id || innerId}\n      name={name}\n      value={value}\n      intent={intent}\n      checked={checked}\n      disabled={disabled}\n      required={isRequired}\n      aria-describedby={description}\n      aria-invalid={isInvalid}\n      onCheckedChange={handleCheckedChange}\n      aria-labelledby={children ? innerLabelId : field.labelId}\n      {...others}\n    />\n  )\n\n  const content =\n    group.reverse || reverse ? (\n      <>\n        {checkboxLabel}\n        {checkboxInput}\n      </>\n    ) : (\n      <>\n        {checkboxInput}\n        {checkboxLabel}\n      </>\n    )\n\n  return (\n    <span\n      data-spark-component=\"checkbox\"\n      className={cx('gap-md text-body-1 relative flex items-start', className)}\n    >\n      {content}\n    </span>\n  )\n}\n\nCheckbox.displayName = 'Checkbox'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const checkboxGroupStyles = cva(['flex'], {\n  variants: {\n    /**\n     * Prop to set the orientation of the checkbox group which could be `vertical` or `horizontal`.\n     */\n    orientation: {\n      vertical: ['flex-col', 'gap-lg'],\n      horizontal: ['gap-xl'],\n    },\n  },\n})\n\nexport type CheckboxGroupStylesProps = VariantProps<typeof checkboxGroupStyles>\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useMemo, useRef } from 'react'\n\nimport { checkboxGroupStyles, CheckboxGroupStylesProps } from './CheckboxGroup.styles'\nimport { CheckboxGroupContext, CheckboxGroupContextState } from './CheckboxGroupContext'\n\nexport interface CheckboxGroupProps\n  extends\n    Omit<ComponentPropsWithoutRef<'div'>, 'value' | 'defaultValue' | 'onChange'>,\n    CheckboxGroupStylesProps,\n    Pick<CheckboxGroupContextState, 'intent' | 'name' | 'value' | 'reverse'> {\n  /**\n   * The initial value of the checkbox group\n   */\n  defaultValue?: string[]\n  /**\n   * The callback fired when any children Checkbox is checked or unchecked\n   */\n  onCheckedChange?: (value: string[]) => void\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * A group component that allows users to select one or more checkboxes from a list of choices,\n * managing their state collectively with support for controlled and uncontrolled modes.\n */\nexport const CheckboxGroup = ({\n  name: nameProp,\n  value: valueProp,\n  defaultValue,\n  className,\n  intent,\n  orientation = 'vertical',\n  onCheckedChange: onCheckedChangeProp,\n  reverse = false,\n  children,\n  ref,\n  ...others\n}: CheckboxGroupProps) => {\n  const [value, setValue] = useCombinedState(valueProp, defaultValue)\n  const field = useFormFieldControl()\n  const onCheckedChangeRef = useRef(onCheckedChangeProp)\n\n  const { id, labelId, description, state, isInvalid, isRequired } = field\n  const name = nameProp ?? field.name\n\n  const current = useMemo(() => {\n    const handleCheckedChange = (checked: boolean, changed: string) => {\n      const values = value || []\n      const modified = checked\n        ? [...values, changed]\n        : values.filter((val: string) => val !== changed)\n\n      setValue(modified)\n\n      if (onCheckedChangeRef.current) {\n        onCheckedChangeRef.current(modified)\n      }\n    }\n\n    return {\n      id,\n      name,\n      value,\n      intent,\n      state,\n      isInvalid,\n      description,\n      isRequired,\n      reverse,\n      onCheckedChange: handleCheckedChange,\n    }\n  }, [id, name, value, intent, state, isInvalid, description, isRequired, setValue, reverse])\n\n  useEffect(() => {\n    onCheckedChangeRef.current = onCheckedChangeProp\n  }, [onCheckedChangeProp])\n\n  return (\n    <CheckboxGroupContext value={current}>\n      <div\n        ref={ref}\n        className={checkboxGroupStyles({ className, orientation })}\n        role=\"group\"\n        aria-labelledby={labelId}\n        aria-describedby={description}\n        {...others}\n      >\n        {children}\n      </div>\n    </CheckboxGroupContext>\n  )\n}\n\nCheckboxGroup.displayName = 'CheckboxGroup'\n"],"mappings":"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"}
+{"version":3,"file":"checkbox-Cr60_jql.js","names":[],"sources":["../src/checkbox/CheckboxGroupContext.tsx","../src/checkbox/CheckboxIndicator.tsx","../src/checkbox/CheckboxInput.styles.ts","../src/checkbox/CheckboxInput.tsx","../src/checkbox/CheckboxLabel.styles.ts","../src/checkbox/CheckboxLabel.tsx","../src/checkbox/Checkbox.tsx","../src/checkbox/CheckboxGroup.styles.ts","../src/checkbox/CheckboxGroup.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nimport { CheckboxInputStylesProps } from './CheckboxInput.styles'\n\nexport interface CheckboxGroupContextState extends Pick<CheckboxInputStylesProps, 'intent'> {\n  /**\n   * The id of the checkbox group.\n   */\n  id: string\n  /**\n   * The name of the group. Submitted with its owning form as part of a name/value pair.\n   */\n  name?: string\n  /**\n   * The value of the checkbox group.\n   */\n  value?: string[]\n  /**\n   * A set of ids separated by a space used to describe the input component given by a set of messages.\n   */\n  description?: string\n  /**\n   * The validation state of the checkbox group.\n   */\n  state?: 'error' | 'success' | 'alert'\n  /**\n   * If true, the checkbox group will be invalid.\n   */\n  isInvalid?: boolean\n  /**\n   * If true, the checkbox group will be required.\n   */\n  isRequired?: boolean\n  /**\n   * Callback used to update or notify the value of the checkbox group.\n   */\n  onCheckedChange?: (checked: boolean, changed: string) => void\n  /**\n   * When true, the label will be placed on the left side of the Checkbox\n   */\n  reverse?: boolean\n}\n\nexport const CheckboxGroupContext = createContext<Partial<CheckboxGroupContextState>>({})\n\nexport const useCheckboxGroup = () => {\n  const context = useContext(CheckboxGroupContext)\n\n  return context\n}\n","import { Checkbox } from 'radix-ui'\nimport { Ref } from 'react'\n\nconst CheckboxIndicatorPrimitive = Checkbox.CheckboxIndicator\n\nexport type CheckboxIndicatorProps = Checkbox.CheckboxIndicatorProps & {\n  ref?: Ref<HTMLSpanElement>\n}\n\nexport const CheckboxIndicator = (props: CheckboxIndicatorProps) => (\n  <CheckboxIndicatorPrimitive className=\"flex size-full items-center justify-center\" {...props} />\n)\n\nCheckboxIndicator.displayName = 'CheckboxIndicator'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const checkboxInputStyles = cva(\n  [\n    'size-sz-24 shrink-0 items-center justify-center rounded-sm border-md bg-transparent',\n    'disabled:cursor-not-allowed disabled:opacity-dim-3 disabled:hover:ring-0',\n    'focus-visible:u-outline',\n    'hover:ring-4 hover:cursor-pointer',\n    'u-shadow-border-transition',\n  ],\n  {\n    variants: {\n      /**\n       * Color scheme of the checkbox.\n       */\n      intent: makeVariants<\n        'intent',\n        ['main', 'support', 'accent', 'success', 'alert', 'error', 'info', 'neutral']\n      >({\n        main: [\n          'text-on-main',\n          'hover:ring-main-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-main data-[state=indeterminate]:bg-main',\n          'data-[state=checked]:border-main data-[state=checked]:bg-main',\n        ],\n        support: [\n          'text-on-support',\n          'hover:ring-support-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-support data-[state=indeterminate]:bg-support',\n          'data-[state=checked]:border-support data-[state=checked]:bg-support',\n        ],\n        accent: [\n          'text-on-accent',\n          'hover:ring-accent-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent',\n          'data-[state=checked]:border-accent data-[state=checked]:bg-accent',\n        ],\n        success: [\n          'text-on-success',\n          'hover:ring-success-container',\n          'data-[state=unchecked]:border-success',\n          'data-[state=indeterminate]:border-success data-[state=indeterminate]:bg-success',\n          'data-[state=checked]:border-success data-[state=checked]:bg-success',\n        ],\n        alert: [\n          'text-on-alert',\n          'hover:ring-alert-container',\n          'data-[state=unchecked]:border-alert',\n          'data-[state=indeterminate]:border-alert data-[state=indeterminate]:bg-alert',\n          'data-[state=checked]:border-alert data-[state=checked]:bg-alert',\n        ],\n        error: [\n          'text-on-error',\n          'hover:ring-error-container',\n          'data-[state=unchecked]:border-error',\n          'data-[state=indeterminate]:border-error data-[state=indeterminate]:bg-error',\n          'data-[state=checked]:border-error data-[state=checked]:bg-error',\n        ],\n        info: [\n          'text-on-info',\n          'hover:ring-info-container',\n          'data-[state=unchecked]:border-info',\n          'data-[state=indeterminate]:border-info data-[state=indeterminate]:bg-info',\n          'data-[state=checked]:border-info data-[state=checked]:bg-info',\n        ],\n        neutral: [\n          'text-on-neutral',\n          'hover:ring-neutral-container',\n          'data-[state=unchecked]:border-outline',\n          'data-[state=indeterminate]:border-neutral data-[state=indeterminate]:bg-neutral',\n          'data-[state=checked]:border-neutral data-[state=checked]:bg-neutral',\n        ],\n      }),\n    },\n    defaultVariants: {\n      intent: 'support',\n    },\n  }\n)\n\nexport type CheckboxInputStylesProps = VariantProps<typeof checkboxInputStyles>\n","import { Check } from '@spark-ui/icons/Check'\nimport { Minus } from '@spark-ui/icons/Minus'\nimport { Checkbox } from 'radix-ui'\nimport { ComponentPropsWithoutRef, ReactNode, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { CheckboxIndicator } from './CheckboxIndicator'\nimport { checkboxInputStyles, type CheckboxInputStylesProps } from './CheckboxInput.styles'\n\ntype CheckedStatus = boolean | 'indeterminate'\n\nconst CheckboxPrimitive = Checkbox.Checkbox\n\nexport interface CheckboxInputProps\n  extends\n    CheckboxInputStylesProps,\n    Omit<ComponentPropsWithoutRef<'button'>, 'onChange' | 'value' | 'checked' | 'defaultChecked'> {\n  /**\n   * The checked icon to use.\n   */\n  icon?: ReactNode\n  /**\n   * The indeterminate icon to use.\n   */\n  indeterminateIcon?: ReactNode\n  /**\n   * The checked state of the checkbox when it is initially rendered. Use when you do not need to control its checked state.\n   */\n  defaultChecked?: boolean\n  /**\n   * The controlled checked state of the checkbox. Must be used in conjunction with onCheckedChange.\n   */\n  checked?: CheckedStatus\n  /**\n   * When true, prevents the user from interacting with the checkbox.\n   */\n  disabled?: boolean\n  /**\n   * When true, indicates that the user must check the checkbox before the owning form can be submitted.\n   */\n  required?: boolean\n  /**\n   * The name of the checkbox. 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   * Event handler called when the checked state of the checkbox changes.\n   */\n  onCheckedChange?: (checked: boolean) => void\n  ref?: Ref<HTMLButtonElement>\n}\n\nexport const CheckboxInput = ({\n  className,\n  icon = <Check />,\n  indeterminateIcon = <Minus />,\n  intent,\n  checked,\n  ref,\n  ...others\n}: CheckboxInputProps) => (\n  <CheckboxPrimitive\n    ref={ref}\n    className={checkboxInputStyles({ intent, className })}\n    checked={checked}\n    {...others}\n  >\n    <CheckboxIndicator>\n      <Icon size=\"sm\">{checked === 'indeterminate' ? indeterminateIcon : icon}</Icon>\n    </CheckboxIndicator>\n  </CheckboxPrimitive>\n)\n\nCheckboxInput.displayName = 'CheckboxInput'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const labelStyles = cva('grow', {\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, type LabelStylesProps } from './CheckboxLabel.styles'\n\nexport interface CheckboxLabelProps extends LabelProps, LabelStylesProps {\n  /**\n   * When true, prevents the user from interacting with the checkbox item.\n   */\n  disabled?: boolean\n}\n\nexport const CheckboxLabel = ({ disabled, ...others }: CheckboxLabelProps) => (\n  <Label className={labelStyles({ disabled })} {...others} />\n)\n\nCheckboxLabel.displayName = 'CheckboxLabel'\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { cx } from 'class-variance-authority'\nimport { Ref, useId, useMemo, useRef } from 'react'\n\nimport { CheckboxGroupContextState, useCheckboxGroup } from './CheckboxGroupContext'\nimport { CheckboxInput, CheckboxInputProps } from './CheckboxInput'\nimport { CheckboxLabel } from './CheckboxLabel'\n\nexport type CheckboxProps = CheckboxInputProps &\n  Pick<CheckboxGroupContextState, 'reverse'> & {\n    ref?: Ref<HTMLButtonElement>\n  }\n\nconst ID_PREFIX = ':checkbox'\n\n// oxlint-disable-next-line max-lines-per-function\n/**\n * A control that allows users to select one or multiple options from a set.\n */\nexport const Checkbox = ({\n  id: idProp,\n  className,\n  intent: intentProp,\n  checked: checkedProp,\n  value,\n  disabled,\n  reverse = false,\n  onCheckedChange,\n  children,\n  ref: forwardedRef,\n  ...others\n}: CheckboxProps) => {\n  const checkboxId = `${ID_PREFIX}-${useId()}`\n  const innerId = idProp || checkboxId\n\n  const innerLabelId = `${ID_PREFIX}-${useId()}`\n\n  const field = useFormFieldControl()\n  const group = useCheckboxGroup()\n\n  const rootRef = useRef<HTMLButtonElement | undefined>(null)\n  const ref = useMergeRefs(forwardedRef, rootRef)\n\n  const getCheckboxAttributes = ({\n    fieldState,\n    groupState,\n    checkboxIntent,\n  }: {\n    fieldState: ReturnType<typeof useFormFieldControl>\n    groupState: ReturnType<typeof useCheckboxGroup>\n    checkboxIntent: CheckboxInputProps['intent']\n  }) => {\n    const name = fieldState.name ?? groupState.name\n    const isRequired = fieldState.isRequired ?? groupState.isRequired\n    const state = fieldState.state ?? groupState.state\n    const isInvalid = fieldState.isInvalid ?? groupState.isInvalid\n\n    const isFieldEnclosed = fieldState.id !== groupState.id\n    const id = isFieldEnclosed ? fieldState.id : undefined\n    const description = isFieldEnclosed ? fieldState.description : undefined\n\n    const intent = state ?? checkboxIntent ?? groupState.intent\n\n    return { name, isRequired, isInvalid, id, description, intent }\n  }\n\n  const checked = value ? group.value?.includes(value) : checkedProp\n\n  const handleCheckedChange = (isChecked: boolean) => {\n    onCheckedChange?.(isChecked)\n\n    const rootRefValue = rootRef.current?.value\n    if (rootRefValue && group.onCheckedChange) {\n      group.onCheckedChange(isChecked, rootRefValue)\n    }\n  }\n\n  const {\n    id,\n    name,\n    isInvalid,\n    description,\n    intent,\n    isRequired: isRequiredAttr,\n  } = getCheckboxAttributes({\n    fieldState: field,\n    groupState: group,\n    checkboxIntent: intentProp,\n  })\n\n  const isRequired = useMemo(() => {\n    if (!group) return isRequiredAttr\n\n    return isRequiredAttr ? !group.value?.length : false\n  }, [group, isRequiredAttr])\n\n  const checkboxLabel = children && (\n    <CheckboxLabel disabled={disabled} htmlFor={id || innerId} id={innerLabelId}>\n      {children}\n    </CheckboxLabel>\n  )\n\n  const checkboxInput = (\n    <CheckboxInput\n      ref={ref}\n      id={id || innerId}\n      name={name}\n      value={value}\n      intent={intent}\n      checked={checked}\n      disabled={disabled}\n      required={isRequired}\n      aria-describedby={description}\n      aria-invalid={isInvalid}\n      onCheckedChange={handleCheckedChange}\n      aria-labelledby={children ? innerLabelId : field.labelId}\n      {...others}\n    />\n  )\n\n  const content =\n    group.reverse || reverse ? (\n      <>\n        {checkboxLabel}\n        {checkboxInput}\n      </>\n    ) : (\n      <>\n        {checkboxInput}\n        {checkboxLabel}\n      </>\n    )\n\n  return (\n    <span\n      data-spark-component=\"checkbox\"\n      className={cx('gap-md text-body-1 relative flex items-start', className)}\n    >\n      {content}\n    </span>\n  )\n}\n\nCheckbox.displayName = 'Checkbox'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const checkboxGroupStyles = cva(['flex'], {\n  variants: {\n    /**\n     * Prop to set the orientation of the checkbox group which could be `vertical` or `horizontal`.\n     */\n    orientation: {\n      vertical: ['flex-col', 'gap-lg'],\n      horizontal: ['gap-xl'],\n    },\n  },\n})\n\nexport type CheckboxGroupStylesProps = VariantProps<typeof checkboxGroupStyles>\n","import { useFormFieldControl } from '@spark-ui/components/form-field'\nimport { useCombinedState } from '@spark-ui/hooks/use-combined-state'\nimport { ComponentPropsWithoutRef, Ref, useEffect, useMemo, useRef } from 'react'\n\nimport { checkboxGroupStyles, CheckboxGroupStylesProps } from './CheckboxGroup.styles'\nimport { CheckboxGroupContext, CheckboxGroupContextState } from './CheckboxGroupContext'\n\nexport interface CheckboxGroupProps\n  extends\n    Omit<ComponentPropsWithoutRef<'div'>, 'value' | 'defaultValue' | 'onChange'>,\n    CheckboxGroupStylesProps,\n    Pick<CheckboxGroupContextState, 'intent' | 'name' | 'value' | 'reverse'> {\n  /**\n   * The initial value of the checkbox group\n   */\n  defaultValue?: string[]\n  /**\n   * The callback fired when any children Checkbox is checked or unchecked\n   */\n  onCheckedChange?: (value: string[]) => void\n  ref?: Ref<HTMLDivElement>\n}\n\n/**\n * A group component that allows users to select one or more checkboxes from a list of choices,\n * managing their state collectively with support for controlled and uncontrolled modes.\n */\nexport const CheckboxGroup = ({\n  name: nameProp,\n  value: valueProp,\n  defaultValue,\n  className,\n  intent,\n  orientation = 'vertical',\n  onCheckedChange: onCheckedChangeProp,\n  reverse = false,\n  children,\n  ref,\n  ...others\n}: CheckboxGroupProps) => {\n  const [value, setValue] = useCombinedState(valueProp, defaultValue)\n  const field = useFormFieldControl()\n  const onCheckedChangeRef = useRef(onCheckedChangeProp)\n\n  const { id, labelId, description, state, isInvalid, isRequired } = field\n  const name = nameProp ?? field.name\n\n  const current = useMemo(() => {\n    const handleCheckedChange = (checked: boolean, changed: string) => {\n      const values = value || []\n      const modified = checked\n        ? [...values, changed]\n        : values.filter((val: string) => val !== changed)\n\n      setValue(modified)\n\n      if (onCheckedChangeRef.current) {\n        onCheckedChangeRef.current(modified)\n      }\n    }\n\n    return {\n      id,\n      name,\n      value,\n      intent,\n      state,\n      isInvalid,\n      description,\n      isRequired,\n      reverse,\n      onCheckedChange: handleCheckedChange,\n    }\n  }, [id, name, value, intent, state, isInvalid, description, isRequired, setValue, reverse])\n\n  useEffect(() => {\n    onCheckedChangeRef.current = onCheckedChangeProp\n  }, [onCheckedChangeProp])\n\n  return (\n    <CheckboxGroupContext value={current}>\n      <div\n        ref={ref}\n        className={checkboxGroupStyles({ className, orientation })}\n        role=\"group\"\n        aria-labelledby={labelId}\n        aria-describedby={description}\n        {...others}\n      >\n        {children}\n      </div>\n    </CheckboxGroupContext>\n  )\n}\n\nCheckboxGroup.displayName = 'CheckboxGroup'\n"],"mappings":"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"}

package/dist/chip/Chip.styles.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 export declare const chipStyles: (props?: ({
     design?: "outlined" | "dashed" | "tinted" | null | undefined;
-    intent?: "main" | "alert" | "surface" | "support" | "accent" | "success" | "info" | "neutral" | "danger" | null | undefined;
+    intent?: "main" | "surface" | "support" | "alert" | "accent" | "success" | "info" | "neutral" | "danger" | null | undefined;
     disabled?: boolean | null | undefined;
     hasClearButton?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/chip/index.js

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../slot/index.js"),t=require("../icon-DY4l9nsc.js");let n=require("class-variance-authority"),r=require("react"),i=require("react/jsx-runtime"),a=require("@spark-ui/internal-utils"),o=require("@spark-ui/hooks/use-combined-state"),s=require("emulate-tab"),c=require("@spark-ui/icons/Close");var l=[{design:`outlined`,intent:`main`,class:(0,a.tw)([`enabled:hover:bg-main/dim-5`,`enabled:active:bg-main/dim-5`,`focus-visible:bg-main/dim-5`,`aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1`,`text-main`])},{design:`outlined`,intent:`support`,class:(0,a.tw)([`enabled:hover:bg-support/dim-5`,`enabled:active:bg-support/dim-5`,`focus-visible:bg-support/dim-5`,`aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1`,`text-support`])},{intent:`accent`,design:`outlined`,class:(0,a.tw)([`enabled:hover:bg-accent/dim-5`,`enabled:active:bg-accent/dim-5`,`focus-visible:bg-accent/dim-5`,`aria-pressed:bg-accent-container`,`aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1`,`text-accent`])},{design:`outlined`,intent:`success`,class:(0,a.tw)([`enabled:hover:bg-success/dim-5`,`enabled:active:bg-success/dim-5`,`focus-visible:bg-success/dim-5`,`aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1`,`text-success`])},{intent:`alert`,design:`outlined`,class:(0,a.tw)([`enabled:hover:bg-alert/dim-5`,`enabled:active:bg-alert/dim-5`,`focus-visible:bg-alert/dim-5`,`aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1`,`text-alert`])},{design:`outlined`,intent:`danger`,class:(0,a.tw)([`enabled:hover:bg-error/dim-5`,`enabled:active:bg-error/dim-5`,`focus-visible:bg-error/dim-5`,`aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1`,`text-error`])},{design:`outlined`,intent:`info`,class:(0,a.tw)([`enabled:hover:bg-info/dim-5`,`enabled:active:bg-info/dim-5`,`focus-visible:bg-info/dim-5`,`aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1`,`text-info`])},{design:`outlined`,intent:`neutral`,class:(0,a.tw)([`enabled:hover:bg-neutral/dim-5`,`enabled:active:bg-neutral/dim-5`,`focus-visible:bg-neutral/dim-5`,`aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1`,`text-neutral`])},{design:`outlined`,intent:`surface`,class:(0,a.tw)([`enabled:hover:bg-surface/dim-5`,`enabled:active:bg-surface/dim-5`,`focus-visible:bg-surface/dim-5`,`aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered`,`text-surface`])},{design:`outlined`,hasClearButton:!1,class:(0,a.tw)([`px-[calc(var(--spacing-lg)-var(--border-width-sm))]`])},{design:`outlined`,hasClearButton:!0,class:(0,a.tw)([`pl-[calc(var(--spacing-lg)-var(--border-width-sm))]`])}],u=[{intent:`main`,design:`tinted`,class:(0,a.tw)([`bg-main-container`,`enabled:hover:bg-main-container-hovered`,`enabled:active:bg-main-container-hovered`,`focus-visible:bg-main-container-hovered`,`aria-pressed:bg-main aria-pressed:text-on-main aria-pressed:enabled:hover:bg-main/dim-1`,`text-on-main-container`])},{intent:`support`,design:`tinted`,class:(0,a.tw)([`bg-support-container`,`enabled:hover:bg-support-container-hovered`,`enabled:active:bg-support-container-hovered`,`focus-visible:bg-support-container-hovered`,`aria-pressed:bg-support aria-pressed:text-on-support aria-pressed:enabled:hover:bg-support/dim-1`,`text-on-support-container`])},{intent:`accent`,design:`tinted`,class:(0,a.tw)([`bg-accent-container`,`enabled:hover:bg-accent-container-hovered`,`enabled:active:bg-accent-container-hovered`,`focus-visible:bg-accent-container-hovered`,`aria-pressed:bg-accent aria-pressed:text-on-accent aria-pressed:enabled:hover:bg-accent/dim-1`,`text-on-accent-container`])},{intent:`success`,design:`tinted`,class:(0,a.tw)([`bg-success-container`,`enabled:hover:bg-success-container-hovered`,`enabled:active:bg-success-container-hovered`,`focus-visible:bg-success-container-hovered`,`aria-pressed:bg-success aria-pressed:text-on-success aria-pressed:enabled:hover:bg-success/dim-1`,`text-on-success-container`])},{intent:`alert`,design:`tinted`,class:(0,a.tw)([`bg-alert-container`,`enabled:hover:bg-alert-container-hovered`,`enabled:active:bg-alert-container-hovered`,`focus-visible:bg-alert-container-hovered`,`aria-pressed:bg-alert aria-pressed:text-on-alert aria-pressed:enabled:hover:bg-alert/dim-1`,`text-on-alert-container`])},{intent:`danger`,design:`tinted`,class:(0,a.tw)([`bg-error-container`,`enabled:hover:bg-error-container-hovered`,`enabled:active:bg-error-container-hovered`,`focus-visible:bg-error-container-hovered`,`aria-pressed:bg-error aria-pressed:text-on-error aria-pressed:enabled:hover:bg-error/dim-1`,`text-on-error-container`])},{intent:`info`,design:`tinted`,class:(0,a.tw)([`bg-info-container`,`enabled:hover:bg-info-container-hovered`,`enabled:active:bg-info-container-hovered`,`focus-visible:bg-info-container-hovered`,`aria-pressed:bg-info aria-pressed:text-on-info aria-pressed:enabled:hover:bg-info/dim-1`,`text-on-info-container`])},{intent:`neutral`,design:`tinted`,class:(0,a.tw)([`bg-neutral-container`,`enabled:hover:bg-neutral-container-hovered`,`enabled:active:bg-neutral-container-hovered`,`focus-visible:bg-neutral-container-hovered`,`aria-pressed:bg-neutral aria-pressed:text-on-neutral aria-pressed:enabled:hover:bg-neutral/dim-1`,`text-on-neutral-container`])},{intent:`surface`,design:`tinted`,class:(0,a.tw)([`bg-surface/dim-1`,`enabled:hover:bg-surface-hovered/dim-1`,`enabled:active:bg-surface-hovered/dim-1`,`focus-visible:bg-surface-hovered/dim-1`,`aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered`,`text-on-surface/dim-1`])},{design:`tinted`,hasClearButton:!1,class:(0,a.tw)([`px-lg`])},{design:`tinted`,hasClearButton:!0,class:(0,a.tw)([`pl-lg`])}],d=[{intent:`main`,design:`dashed`,class:(0,a.tw)([`enabled:hover:bg-main/dim-5`,`enabled:active:bg-main/dim-5`,`focus-visible:bg-main/dim-5`,`aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1`,`text-main`])},{intent:`support`,design:`dashed`,class:(0,a.tw)([`enabled:hover:bg-support/dim-5`,`enabled:active:bg-support/dim-5`,`focus-visible:bg-support/dim-5`,`aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1`,`text-support`])},{intent:`accent`,design:`dashed`,class:(0,a.tw)([`enabled:hover:bg-accent/dim-5`,`enabled:active:bg-accent/dim-5`,`focus-visible:bg-accent/dim-5`,`aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1`,`text-accent`])},{intent:`success`,design:`dashed`,class:(0,a.tw)([`enabled:hover:bg-success/dim-5`,`enabled:active:bg-success/dim-5`,`focus-visible:bg-success/dim-5`,`aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1`,`text-success`])},{intent:`alert`,design:`dashed`,class:(0,a.tw)([`enabled:hover:bg-alert/dim-5`,`enabled:active:bg-alert/dim-5`,`focus-visible:bg-alert/dim-5`,`aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1`,`text-alert`])},{intent:`danger`,design:`dashed`,class:(0,a.tw)([`enabled:hover:bg-error/dim-5`,`enabled:active:bg-error/dim-5`,`focus-visible:bg-error/dim-5`,`aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1`,`text-error`])},{intent:`info`,design:`dashed`,class:(0,a.tw)([`enabled:hover:bg-info/dim-5`,`enabled:active:bg-info/dim-5`,`focus-visible:bg-info/dim-5`,`aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1`,`text-info`])},{intent:`neutral`,design:`dashed`,class:(0,a.tw)([`enabled:hover:bg-neutral/dim-5`,`enabled:active:bg-neutral/dim-5`,`focus-visible:bg-neutral/dim-5`,`aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1`,`text-neutral`])},{intent:`surface`,design:`dashed`,class:(0,a.tw)([`enabled:hover:bg-surface/dim-5`,`enabled:active:bg-surface/dim-5`,`focus-visible:bg-surface/dim-5`,`aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered`,`text-surface`])},{design:`dashed`,hasClearButton:!1,class:(0,a.tw)([`px-[calc(var(--spacing-lg)-var(--border-width-sm))]`])},{design:`dashed`,hasClearButton:!0,class:(0,a.tw)([`pl-[calc(var(--spacing-lg)-var(--border-width-sm))]`])}],f=(0,n.cva)([`box-border inline-flex h-sz-32 flex-nowrap items-center justify-center rounded-chip text-body-1 font-regular`,`focus-visible:u-outline`,`ease-out duration-150`],{variants:{design:(0,a.makeVariants)({outlined:[`bg-transparent border-sm border-solid border-current`],tinted:[``],dashed:[`bg-transparent border-sm border-dashed shadow-none focus-visible:border-outline-high`]}),intent:(0,a.makeVariants)({main:[],support:[],accent:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[]}),disabled:{true:[`cursor-not-allowed`,`opacity-dim-3`]},hasClearButton:{true:[],false:[]}},compoundVariants:[...l,...u,...d],defaultVariants:{design:`outlined`,intent:`support`}}),p=(0,r.createContext)({}),m=()=>(0,r.useContext)(p)||{},h=e=>e?e.type.displayName:``,g=e=>(...t)=>r.Children.toArray(e).filter(r.isValidElement).find(e=>{let n=h(e);return t.includes(n||``)}),_=({onClick:t,asChild:n,pressed:r,defaultPressed:a,disabled:c,value:l,defaultValue:u,children:d,onClear:f})=>{let[p,m]=(0,o.useCombinedState)(r,a),[h]=(0,o.useCombinedState)(l,u),_=g(d),v=_(`Chip.LeadingIcon`),y=_(`Chip.TrailingIcon`),b=_(`Chip.Content`),x=_(`Chip.ClearButton`),S=(t||p)!==void 0,C=[v,b,x].every(e=>e===void 0)?(0,i.jsx)(`span`,{className:`inline-block grow truncate`,children:d}):(0,i.jsxs)(i.Fragment,{children:[v,b,x===void 0?y:null,x]}),w=e=>{x&&!c&&[`Delete`,`Backspace`].includes(e.key)&&f&&(f(),e.key===`Delete`&&(0,s.emulateTab)(),e.key===`Backspace`&&s.emulateTab.backwards())};return S?{Element:n?e.Slot:`button`,chipProps:{type:`button`,...p!==void 0&&{"aria-pressed":p,"data-state":p?`on`:`off`},onClick:e=>{p!==void 0&&m(!p),t&&t(e,{pressed:p,value:h})},onKeyDown:w,disabled:c,children:C},compoundElements:{leadingIcon:v,trailingIcon:y,content:b,clearButton:x}}:{Element:n?e.Slot:`div`,chipProps:{"aria-disabled":c,children:C,onKeyDown:w},compoundElements:{leadingIcon:v,trailingIcon:y,content:b,clearButton:x}}},v=({design:e=`outlined`,disabled:t,children:n,intent:r=`support`,defaultPressed:a,pressed:o,asChild:s,className:c,onClick:l,onClear:u,ref:d,...m})=>{let{Element:h,chipProps:{children:g,...v},compoundElements:y}=_({asChild:s,pressed:o,defaultPressed:a,onClick:l,disabled:!!t,value:m.value,defaultValue:m.defaultValue,children:n,onClear:u}),{clearButton:b}=y;return(0,i.jsx)(p,{value:{disabled:t,design:e,intent:r,onClear:u},children:(0,i.jsx)(h,{ref:d,className:f({className:c,design:e,disabled:t,intent:r,hasClearButton:!!b}),...v,...m,"data-spark-component":`chip`,children:g})})};v.displayName=`Chip`;var y=(0,n.cva)([`ml-md flex h-full items-center justify-center focus-visible:outline-hidden`],{variants:{disabled:{false:[`cursor-pointer`],true:[`cursor-not-allowed`]},isBordered:{false:[`pr-lg`],true:[`pr-[calc(var(--spacing-lg)-var(--border-width-sm))]`]},design:{outlined:[],tinted:[],dashed:[]}},compoundVariants:[{design:`outlined`,disabled:!1,class:(0,a.tw)([`hover:opacity-dim-1`])},{design:`outlined`,disabled:!0,class:(0,a.tw)([`opacity-dim-3`])},{design:`tinted`,disabled:!1,class:(0,a.tw)([`hover:opacity-dim-1`])},{design:`tinted`,disabled:!0,class:(0,a.tw)([`opacity-dim-3`])},{design:`dashed`,disabled:!1,class:(0,a.tw)([`hover:opacity-dim-1`])},{design:`dashed`,disabled:!0,class:(0,a.tw)([`opacity-dim-3`])}]}),b=(0,n.cva)([`rounded-full p-sz-2 [font-size:var(--spacing-sz-8)] border-sm`,`focus-visible:u-outline`],{variants:{disabled:{true:[`cursor-not-allowed`],false:[`cursor-pointer`]}},defaultVariants:{disabled:!1}}),x=({children:e=(0,i.jsx)(t.t,{children:(0,i.jsx)(c.Close,{})}),tabIndex:n=0,label:a,ref:o})=>{let{design:s,disabled:l,onClear:u}=m(),d=(0,r.useCallback)(e=>{e.stopPropagation(),!l&&u&&u(e)},[l,u]);return(0,i.jsx)(`span`,{className:y({isBordered:[`outline`,`dashed`].includes(`${s}`),disabled:!!l,design:s}),onClick:d,ref:o,children:(0,i.jsx)(`button`,{tabIndex:n,type:`button`,disabled:!!l,className:b({disabled:l}),"aria-label":a,children:e&&(0,r.cloneElement)(e,{ariaLabel:a})})})};x.displayName=`Chip.ClearButton`;var S=({children:e,className:t,ref:r})=>(0,i.jsx)(`span`,{className:(0,n.cx)(`inline-block grow truncate`,t),ref:r,children:e});S.displayName=`Chip.Content`;var C=({children:e,className:t,ref:r})=>(0,i.jsx)(`span`,{className:(0,n.cx)(`flex h-full items-center justify-center`,t),ref:r,children:e});C.displayName=`Chip.Icon`;var w=({className:e,ref:t,...r})=>(0,i.jsx)(C,{className:(0,n.cx)(`mr-sm`,e),ref:t,...r});w.displayName=`Chip.LeadingIcon`;var T=({className:e,ref:t,...r})=>(0,i.jsx)(C,{className:(0,n.cx)(`ml-md`,e),ref:t,...r});T.displayName=`Chip.TrailingIcon`;var E=Object.assign(v,{Content:S,LeadingIcon:w,TrailingIcon:T,ClearButton:x});E.displayName=`Chip`,E.ClearButton.displayName=`Chip.ClearButton`,E.Content.displayName=`Chip.Content`,E.LeadingIcon.displayName=`Chip.LeadingIcon`,E.TrailingIcon.displayName=`Chip.TrailingIcon`,exports.Chip=E;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../slot/index.js"),t=require("../icon-CfEsla9z.js");let n=require("@spark-ui/internal-utils"),r=require("class-variance-authority"),i=require("react"),a=require("react/jsx-runtime"),o=require("@spark-ui/hooks/use-combined-state"),s=require("emulate-tab"),c=require("@spark-ui/icons/Close");var l=[{design:`outlined`,intent:`main`,class:(0,n.tw)([`enabled:hover:bg-main/dim-5`,`enabled:active:bg-main/dim-5`,`focus-visible:bg-main/dim-5`,`aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1`,`text-main`])},{design:`outlined`,intent:`support`,class:(0,n.tw)([`enabled:hover:bg-support/dim-5`,`enabled:active:bg-support/dim-5`,`focus-visible:bg-support/dim-5`,`aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1`,`text-support`])},{intent:`accent`,design:`outlined`,class:(0,n.tw)([`enabled:hover:bg-accent/dim-5`,`enabled:active:bg-accent/dim-5`,`focus-visible:bg-accent/dim-5`,`aria-pressed:bg-accent-container`,`aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1`,`text-accent`])},{design:`outlined`,intent:`success`,class:(0,n.tw)([`enabled:hover:bg-success/dim-5`,`enabled:active:bg-success/dim-5`,`focus-visible:bg-success/dim-5`,`aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1`,`text-success`])},{intent:`alert`,design:`outlined`,class:(0,n.tw)([`enabled:hover:bg-alert/dim-5`,`enabled:active:bg-alert/dim-5`,`focus-visible:bg-alert/dim-5`,`aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1`,`text-alert`])},{design:`outlined`,intent:`danger`,class:(0,n.tw)([`enabled:hover:bg-error/dim-5`,`enabled:active:bg-error/dim-5`,`focus-visible:bg-error/dim-5`,`aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1`,`text-error`])},{design:`outlined`,intent:`info`,class:(0,n.tw)([`enabled:hover:bg-info/dim-5`,`enabled:active:bg-info/dim-5`,`focus-visible:bg-info/dim-5`,`aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1`,`text-info`])},{design:`outlined`,intent:`neutral`,class:(0,n.tw)([`enabled:hover:bg-neutral/dim-5`,`enabled:active:bg-neutral/dim-5`,`focus-visible:bg-neutral/dim-5`,`aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1`,`text-neutral`])},{design:`outlined`,intent:`surface`,class:(0,n.tw)([`enabled:hover:bg-surface/dim-5`,`enabled:active:bg-surface/dim-5`,`focus-visible:bg-surface/dim-5`,`aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered`,`text-surface`])},{design:`outlined`,hasClearButton:!1,class:(0,n.tw)([`px-[calc(var(--spacing-lg)-var(--border-width-sm))]`])},{design:`outlined`,hasClearButton:!0,class:(0,n.tw)([`pl-[calc(var(--spacing-lg)-var(--border-width-sm))]`])}],u=[{intent:`main`,design:`tinted`,class:(0,n.tw)([`bg-main-container`,`enabled:hover:bg-main-container-hovered`,`enabled:active:bg-main-container-hovered`,`focus-visible:bg-main-container-hovered`,`aria-pressed:bg-main aria-pressed:text-on-main aria-pressed:enabled:hover:bg-main/dim-1`,`text-on-main-container`])},{intent:`support`,design:`tinted`,class:(0,n.tw)([`bg-support-container`,`enabled:hover:bg-support-container-hovered`,`enabled:active:bg-support-container-hovered`,`focus-visible:bg-support-container-hovered`,`aria-pressed:bg-support aria-pressed:text-on-support aria-pressed:enabled:hover:bg-support/dim-1`,`text-on-support-container`])},{intent:`accent`,design:`tinted`,class:(0,n.tw)([`bg-accent-container`,`enabled:hover:bg-accent-container-hovered`,`enabled:active:bg-accent-container-hovered`,`focus-visible:bg-accent-container-hovered`,`aria-pressed:bg-accent aria-pressed:text-on-accent aria-pressed:enabled:hover:bg-accent/dim-1`,`text-on-accent-container`])},{intent:`success`,design:`tinted`,class:(0,n.tw)([`bg-success-container`,`enabled:hover:bg-success-container-hovered`,`enabled:active:bg-success-container-hovered`,`focus-visible:bg-success-container-hovered`,`aria-pressed:bg-success aria-pressed:text-on-success aria-pressed:enabled:hover:bg-success/dim-1`,`text-on-success-container`])},{intent:`alert`,design:`tinted`,class:(0,n.tw)([`bg-alert-container`,`enabled:hover:bg-alert-container-hovered`,`enabled:active:bg-alert-container-hovered`,`focus-visible:bg-alert-container-hovered`,`aria-pressed:bg-alert aria-pressed:text-on-alert aria-pressed:enabled:hover:bg-alert/dim-1`,`text-on-alert-container`])},{intent:`danger`,design:`tinted`,class:(0,n.tw)([`bg-error-container`,`enabled:hover:bg-error-container-hovered`,`enabled:active:bg-error-container-hovered`,`focus-visible:bg-error-container-hovered`,`aria-pressed:bg-error aria-pressed:text-on-error aria-pressed:enabled:hover:bg-error/dim-1`,`text-on-error-container`])},{intent:`info`,design:`tinted`,class:(0,n.tw)([`bg-info-container`,`enabled:hover:bg-info-container-hovered`,`enabled:active:bg-info-container-hovered`,`focus-visible:bg-info-container-hovered`,`aria-pressed:bg-info aria-pressed:text-on-info aria-pressed:enabled:hover:bg-info/dim-1`,`text-on-info-container`])},{intent:`neutral`,design:`tinted`,class:(0,n.tw)([`bg-neutral-container`,`enabled:hover:bg-neutral-container-hovered`,`enabled:active:bg-neutral-container-hovered`,`focus-visible:bg-neutral-container-hovered`,`aria-pressed:bg-neutral aria-pressed:text-on-neutral aria-pressed:enabled:hover:bg-neutral/dim-1`,`text-on-neutral-container`])},{intent:`surface`,design:`tinted`,class:(0,n.tw)([`bg-surface/dim-1`,`enabled:hover:bg-surface-hovered/dim-1`,`enabled:active:bg-surface-hovered/dim-1`,`focus-visible:bg-surface-hovered/dim-1`,`aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered`,`text-on-surface/dim-1`])},{design:`tinted`,hasClearButton:!1,class:(0,n.tw)([`px-lg`])},{design:`tinted`,hasClearButton:!0,class:(0,n.tw)([`pl-lg`])}],d=[{intent:`main`,design:`dashed`,class:(0,n.tw)([`enabled:hover:bg-main/dim-5`,`enabled:active:bg-main/dim-5`,`focus-visible:bg-main/dim-5`,`aria-pressed:bg-main-container aria-pressed:text-on-main-container aria-pressed:enabled:hover:bg-main-container/dim-1`,`text-main`])},{intent:`support`,design:`dashed`,class:(0,n.tw)([`enabled:hover:bg-support/dim-5`,`enabled:active:bg-support/dim-5`,`focus-visible:bg-support/dim-5`,`aria-pressed:bg-support-container aria-pressed:text-on-support-container aria-pressed:enabled:hover:bg-support-container/dim-1`,`text-support`])},{intent:`accent`,design:`dashed`,class:(0,n.tw)([`enabled:hover:bg-accent/dim-5`,`enabled:active:bg-accent/dim-5`,`focus-visible:bg-accent/dim-5`,`aria-pressed:bg-accent-container aria-pressed:text-on-accent-container aria-pressed:enabled:hover:bg-accent-container/dim-1`,`text-accent`])},{intent:`success`,design:`dashed`,class:(0,n.tw)([`enabled:hover:bg-success/dim-5`,`enabled:active:bg-success/dim-5`,`focus-visible:bg-success/dim-5`,`aria-pressed:bg-success-container aria-pressed:text-on-success-container aria-pressed:enabled:hover:bg-success-container/dim-1`,`text-success`])},{intent:`alert`,design:`dashed`,class:(0,n.tw)([`enabled:hover:bg-alert/dim-5`,`enabled:active:bg-alert/dim-5`,`focus-visible:bg-alert/dim-5`,`aria-pressed:bg-alert-container aria-pressed:text-on-alert-container aria-pressed:enabled:hover:bg-alert-container/dim-1`,`text-alert`])},{intent:`danger`,design:`dashed`,class:(0,n.tw)([`enabled:hover:bg-error/dim-5`,`enabled:active:bg-error/dim-5`,`focus-visible:bg-error/dim-5`,`aria-pressed:bg-error-container aria-pressed:text-on-error-container aria-pressed:enabled:hover:bg-error-container/dim-1`,`text-error`])},{intent:`info`,design:`dashed`,class:(0,n.tw)([`enabled:hover:bg-info/dim-5`,`enabled:active:bg-info/dim-5`,`focus-visible:bg-info/dim-5`,`aria-pressed:bg-info-container aria-pressed:text-on-info-container aria-pressed:enabled:hover:bg-info-container/dim-1`,`text-info`])},{intent:`neutral`,design:`dashed`,class:(0,n.tw)([`enabled:hover:bg-neutral/dim-5`,`enabled:active:bg-neutral/dim-5`,`focus-visible:bg-neutral/dim-5`,`aria-pressed:bg-neutral-container aria-pressed:text-on-neutral-container aria-pressed:enabled:hover:bg-neutral-container/dim-1`,`text-neutral`])},{intent:`surface`,design:`dashed`,class:(0,n.tw)([`enabled:hover:bg-surface/dim-5`,`enabled:active:bg-surface/dim-5`,`focus-visible:bg-surface/dim-5`,`aria-pressed:bg-surface aria-pressed:text-on-surface aria-pressed:enabled:hover:bg-surface-hovered`,`text-surface`])},{design:`dashed`,hasClearButton:!1,class:(0,n.tw)([`px-[calc(var(--spacing-lg)-var(--border-width-sm))]`])},{design:`dashed`,hasClearButton:!0,class:(0,n.tw)([`pl-[calc(var(--spacing-lg)-var(--border-width-sm))]`])}],f=(0,r.cva)([`box-border inline-flex h-sz-32 flex-nowrap items-center justify-center rounded-chip text-body-1 font-regular`,`focus-visible:u-outline`,`ease-out duration-150`],{variants:{design:(0,n.makeVariants)({outlined:[`bg-transparent border-sm border-solid border-current`],tinted:[``],dashed:[`bg-transparent border-sm border-dashed shadow-none focus-visible:border-outline-high`]}),intent:(0,n.makeVariants)({main:[],support:[],accent:[],success:[],alert:[],danger:[],info:[],neutral:[],surface:[]}),disabled:{true:[`cursor-not-allowed`,`opacity-dim-3`]},hasClearButton:{true:[],false:[]}},compoundVariants:[...l,...u,...d],defaultVariants:{design:`outlined`,intent:`support`}}),p=(0,i.createContext)({}),m=()=>(0,i.useContext)(p)||{},h=e=>e?e.type.displayName:``,g=e=>(...t)=>i.Children.toArray(e).filter(i.isValidElement).find(e=>{let n=h(e);return t.includes(n||``)}),_=({onClick:t,asChild:n,pressed:r,defaultPressed:i,disabled:c,value:l,defaultValue:u,children:d,onClear:f})=>{let[p,m]=(0,o.useCombinedState)(r,i),[h]=(0,o.useCombinedState)(l,u),_=g(d),v=_(`Chip.LeadingIcon`),y=_(`Chip.TrailingIcon`),b=_(`Chip.Content`),x=_(`Chip.ClearButton`),S=(t||p)!==void 0,C=[v,b,x].every(e=>e===void 0)?(0,a.jsx)(`span`,{className:`inline-block grow truncate`,children:d}):(0,a.jsxs)(a.Fragment,{children:[v,b,x===void 0?y:null,x]}),w=e=>{x&&!c&&[`Delete`,`Backspace`].includes(e.key)&&f&&(f(),e.key===`Delete`&&(0,s.emulateTab)(),e.key===`Backspace`&&s.emulateTab.backwards())};return S?{Element:n?e.Slot:`button`,chipProps:{type:`button`,...p!==void 0&&{"aria-pressed":p,"data-state":p?`on`:`off`},onClick:e=>{p!==void 0&&m(!p),t&&t(e,{pressed:p,value:h})},onKeyDown:w,disabled:c,children:C},compoundElements:{leadingIcon:v,trailingIcon:y,content:b,clearButton:x}}:{Element:n?e.Slot:`div`,chipProps:{"aria-disabled":c,children:C,onKeyDown:w},compoundElements:{leadingIcon:v,trailingIcon:y,content:b,clearButton:x}}},v=({design:e=`outlined`,disabled:t,children:n,intent:r=`support`,defaultPressed:i,pressed:o,asChild:s,className:c,onClick:l,onClear:u,ref:d,...m})=>{let{Element:h,chipProps:{children:g,...v},compoundElements:y}=_({asChild:s,pressed:o,defaultPressed:i,onClick:l,disabled:!!t,value:m.value,defaultValue:m.defaultValue,children:n,onClear:u}),{clearButton:b}=y;return(0,a.jsx)(p,{value:{disabled:t,design:e,intent:r,onClear:u},children:(0,a.jsx)(h,{ref:d,className:f({className:c,design:e,disabled:t,intent:r,hasClearButton:!!b}),...v,...m,"data-spark-component":`chip`,children:g})})};v.displayName=`Chip`;var y=(0,r.cva)([`ml-md flex h-full items-center justify-center focus-visible:outline-hidden`],{variants:{disabled:{false:[`cursor-pointer`],true:[`cursor-not-allowed`]},isBordered:{false:[`pr-lg`],true:[`pr-[calc(var(--spacing-lg)-var(--border-width-sm))]`]},design:{outlined:[],tinted:[],dashed:[]}},compoundVariants:[{design:`outlined`,disabled:!1,class:(0,n.tw)([`hover:opacity-dim-1`])},{design:`outlined`,disabled:!0,class:(0,n.tw)([`opacity-dim-3`])},{design:`tinted`,disabled:!1,class:(0,n.tw)([`hover:opacity-dim-1`])},{design:`tinted`,disabled:!0,class:(0,n.tw)([`opacity-dim-3`])},{design:`dashed`,disabled:!1,class:(0,n.tw)([`hover:opacity-dim-1`])},{design:`dashed`,disabled:!0,class:(0,n.tw)([`opacity-dim-3`])}]}),b=(0,r.cva)([`rounded-full p-sz-2 [font-size:var(--spacing-sz-8)] border-sm`,`focus-visible:u-outline`],{variants:{disabled:{true:[`cursor-not-allowed`],false:[`cursor-pointer`]}},defaultVariants:{disabled:!1}}),x=({children:e=(0,a.jsx)(t.t,{children:(0,a.jsx)(c.Close,{})}),tabIndex:n=0,label:r,ref:o})=>{let{design:s,disabled:l,onClear:u}=m(),d=(0,i.useCallback)(e=>{e.stopPropagation(),!l&&u&&u(e)},[l,u]);return(0,a.jsx)(`span`,{className:y({isBordered:[`outline`,`dashed`].includes(`${s}`),disabled:!!l,design:s}),onClick:d,ref:o,children:(0,a.jsx)(`button`,{tabIndex:n,type:`button`,disabled:!!l,className:b({disabled:l}),"aria-label":r,children:e&&(0,i.cloneElement)(e,{ariaLabel:r})})})};x.displayName=`Chip.ClearButton`;var S=({children:e,className:t,ref:n})=>(0,a.jsx)(`span`,{className:(0,r.cx)(`inline-block grow truncate`,t),ref:n,children:e});S.displayName=`Chip.Content`;var C=({children:e,className:t,ref:n})=>(0,a.jsx)(`span`,{className:(0,r.cx)(`flex h-full items-center justify-center`,t),ref:n,children:e});C.displayName=`Chip.Icon`;var w=({className:e,ref:t,...n})=>(0,a.jsx)(C,{className:(0,r.cx)(`mr-sm`,e),ref:t,...n});w.displayName=`Chip.LeadingIcon`;var T=({className:e,ref:t,...n})=>(0,a.jsx)(C,{className:(0,r.cx)(`ml-md`,e),ref:t,...n});T.displayName=`Chip.TrailingIcon`;var E=Object.assign(v,{Content:S,LeadingIcon:w,TrailingIcon:T,ClearButton:x});E.displayName=`Chip`,E.ClearButton.displayName=`Chip.ClearButton`,E.Content.displayName=`Chip.Content`,E.LeadingIcon.displayName=`Chip.LeadingIcon`,E.TrailingIcon.displayName=`Chip.TrailingIcon`,exports.Chip=E;
 //# sourceMappingURL=index.js.map