@spear-ai/spectral 1.13.1 → 1.14.2

package/dist/ButtonIcon.js

@@ -1,11 +1,13 @@
-'use client'
-import './styles/main.css'
-import { LoaderIcon as e } from "./Icons/LoaderIcon.js";
-import { t } from "./twUtils-BpqlKSeB.js";
-import { cloneElement as n, isValidElement as r } from "react";
-import { jsx as i } from "react/jsx-runtime";
+'use client';
+import { LoaderIcon } from "./Icons/LoaderIcon.js";
+import { cn } from "./utils/twUtils.js";
+import { cloneElement, isValidElement } from "react";
+import { jsx } from "react/jsx-runtime";
+
 //#region src/components/ButtonIcon/ButtonIcon.tsx
-var a = "bg-transparent hover:bg-level-one text-text-primary inline-flex items-center justify-center whitespace-nowrap transition-colors focus:outline-none focus-visible:outline-2\n  focus-visible:outline-offset-2 focus-visible:outline-level-two cursor-pointer [&_svg]:pointer-events-none [&_svg]:shrink-0", o = {
+const buttonStyles = `bg-transparent hover:bg-level-one text-text-primary inline-flex items-center justify-center whitespace-nowrap transition-colors focus:outline-none focus-visible:outline-2
+  focus-visible:outline-offset-2 focus-visible:outline-level-two cursor-pointer [&_svg]:pointer-events-none [&_svg]:shrink-0`;
+const sizeConfig = {
 	sm: {
 		button: "h-8 w-8",
 		icon: 16
@@ -18,44 +20,50 @@ var a = "bg-transparent hover:bg-level-one text-text-primary inline-flex items-c
 		button: "h-12 w-12",
 		icon: 32
 	}
-}, s = ({ className: s, disabled: c, icon: l, isLoading: u = !1, label: d, onClick: f, ref: p, shape: m = "square", size: h = "md", ...g }) => {
-	let _ = (e) => f?.(e), v = u ? `${d} - Loading` : d, y = () => {
-		if (u) return /* @__PURE__ */ i(e, {
-			size: o[h].icon,
+};
+const ButtonIcon = ({ className, disabled, icon, isLoading = false, label, onClick, ref, shape = "square", size = "md", ...props }) => {
+	const handleClick = (event) => onClick?.(event);
+	const effectiveLabel = isLoading ? `${label} - Loading` : label;
+	const renderIcon = () => {
+		if (isLoading) return /* @__PURE__ */ jsx(LoaderIcon, {
+			size: sizeConfig[size].icon,
 			"aria-hidden": "true"
 		});
-		let a = typeof l == "function" ? l() : l;
-		if (r(a)) {
-			let e = o[h].icon;
-			if (a.type === "svg") return n(a, {
-				className: t("shrink-0", a.props.className),
-				height: e,
-				width: e,
+		const iconElement = typeof icon === "function" ? icon() : icon;
+		if (isValidElement(iconElement)) {
+			const currentSize = sizeConfig[size].icon;
+			if (iconElement.type === "svg") return cloneElement(iconElement, {
+				className: cn("shrink-0", iconElement.props.className),
+				height: currentSize,
+				width: currentSize,
 				"aria-hidden": "true"
 			});
-			let r = {
+			const baseIconProps = {
 				"aria-hidden": "true",
-				className: t("shrink-0", a.props.className)
+				className: cn("shrink-0", iconElement.props.className)
 			};
-			return a.type.displayName?.endsWith("Icon") ?? !1 ? n(a, {
-				...r,
-				size: e
-			}) : n(a, r);
+			if (iconElement.type.displayName?.endsWith("Icon") ?? false) return cloneElement(iconElement, {
+				...baseIconProps,
+				size: currentSize
+			});
+			return cloneElement(iconElement, baseIconProps);
 		}
-		return a;
+		return iconElement;
 	};
-	return /* @__PURE__ */ i("button", {
-		"aria-label": v,
-		className: t(a, m === "circle" ? "rounded-full" : "rounded-xl", o[h].button, u && "cursor-wait", c && "cursor-not-allowed opacity-50", s),
+	return /* @__PURE__ */ jsx("button", {
+		"aria-label": effectiveLabel,
+		className: cn(buttonStyles, shape === "circle" ? "rounded-full" : "rounded-xl", sizeConfig[size].button, isLoading && "cursor-wait", disabled && "cursor-not-allowed opacity-50", className),
 		"data-testid": "spectral-button-icon",
-		disabled: c ?? u,
-		onClick: _,
-		ref: p,
+		disabled: disabled ?? isLoading,
+		onClick: handleClick,
+		ref,
 		type: "button",
-		...g,
-		children: y()
+		...props,
+		children: renderIcon()
 	});
 };
-s.displayName = "ButtonIcon";
+ButtonIcon.displayName = "ButtonIcon";
+
 //#endregion
-export { s as ButtonIcon };
+export { ButtonIcon };
+//# sourceMappingURL=ButtonIcon.js.map

package/dist/ButtonIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonIcon.js","names":[],"sources":["../src/components/ButtonIcon/ButtonIcon.tsx"],"sourcesContent":["import { LoaderIcon } from '@components/Icons'\nimport { cn } from '@utils/twUtils'\nimport { cloneElement, isValidElement, type ButtonHTMLAttributes, type MouseEvent, type ReactElement, type Ref, type SVGProps } from 'react'\n\ntype IconOrSVG = ReactElement | (() => ReactElement)\n\nexport interface ButtonIconProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {\n  className?: string\n  icon: IconOrSVG\n  isLoading?: boolean\n  label: string\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void\n  shape?: 'circle' | 'square'\n  size?: 'sm' | 'md' | 'lg'\n}\n\nconst buttonStyles = `bg-transparent hover:bg-level-one text-text-primary inline-flex items-center justify-center whitespace-nowrap transition-colors focus:outline-none focus-visible:outline-2\n  focus-visible:outline-offset-2 focus-visible:outline-level-two cursor-pointer [&_svg]:pointer-events-none [&_svg]:shrink-0`\n\nconst sizeConfig = {\n  sm: { button: 'h-8 w-8', icon: 16 },\n  md: { button: 'h-10 w-10', icon: 24 },\n  lg: { button: 'h-12 w-12', icon: 32 },\n} as const\n\nexport const ButtonIcon = ({\n  className,\n  disabled,\n  icon,\n  isLoading = false,\n  label,\n  onClick,\n  ref,\n  shape = 'square',\n  size = 'md',\n  ...props\n}: ButtonIconProps & {\n  ref?: Ref<HTMLButtonElement>\n}) => {\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => onClick?.(event)\n\n  const effectiveLabel = isLoading ? `${label} - Loading` : label\n\n  const renderIcon = (): ReactElement => {\n    if (isLoading) {\n      return <LoaderIcon size={sizeConfig[size as keyof typeof sizeConfig].icon} aria-hidden='true' />\n    }\n\n    const iconElement = typeof icon === 'function' ? icon() : icon\n\n    if (isValidElement(iconElement)) {\n      const currentSize = sizeConfig[size as keyof typeof sizeConfig].icon\n\n      if (iconElement.type === 'svg') {\n        return cloneElement(iconElement as ReactElement<SVGProps<SVGSVGElement>>, {\n          className: cn('shrink-0', (iconElement.props as { className?: string }).className),\n          height: currentSize,\n          width: currentSize,\n          'aria-hidden': 'true',\n        })\n      }\n\n      // For icon components, pass size prop if the element accepts it\n      const baseIconProps = {\n        'aria-hidden': 'true',\n        className: cn('shrink-0', (iconElement.props as { className?: string }).className),\n      }\n\n      // Check if this is an icon component that accepts size prop\n      // All our icon components accept refs and have displayName containing 'Icon'\n      const componentType = iconElement.type as { displayName?: string }\n      const isIconComponent = componentType.displayName?.endsWith('Icon') ?? false\n\n      if (isIconComponent) {\n        const iconPropsWithSize = {\n          ...baseIconProps,\n          size: currentSize,\n        }\n        return cloneElement(iconElement, iconPropsWithSize)\n      }\n\n      return cloneElement(iconElement, baseIconProps)\n    }\n\n    return iconElement\n  }\n\n  return (\n    <button\n      aria-label={effectiveLabel}\n      className={cn(buttonStyles, shape === 'circle' ? 'rounded-full' : 'rounded-xl', sizeConfig[size as keyof typeof sizeConfig].button, isLoading && 'cursor-wait', disabled && 'cursor-not-allowed opacity-50', className)}\n      data-testid='spectral-button-icon'\n      disabled={disabled ?? isLoading}\n      onClick={handleClick}\n      ref={ref}\n      type='button'\n      {...props}\n    >\n      {renderIcon()}\n    </button>\n  )\n}\nButtonIcon.displayName = 'ButtonIcon'\n"],"mappings":";;;;;;;AAgBA,MAAM,eAAe;;AAGrB,MAAM,aAAa;CACjB,IAAI;EAAE,QAAQ;EAAW,MAAM;EAAI;CACnC,IAAI;EAAE,QAAQ;EAAa,MAAM;EAAI;CACrC,IAAI;EAAE,QAAQ;EAAa,MAAM;EAAI;CACtC;AAED,MAAa,cAAc,EACzB,WACA,UACA,MACA,YAAY,OACZ,OACA,SACA,KACA,QAAQ,UACR,OAAO,MACP,GAAG,YAGC;CACJ,MAAM,eAAe,UAAyC,UAAU,MAAM;CAE9E,MAAM,iBAAiB,YAAY,GAAG,MAAM,cAAc;CAE1D,MAAM,mBAAiC;AACrC,MAAI,UACF,QAAO,oBAAC,YAAD;GAAY,MAAM,WAAW,MAAiC;GAAM,eAAY;GAAS;EAGlG,MAAM,cAAc,OAAO,SAAS,aAAa,MAAM,GAAG;AAE1D,MAAI,eAAe,YAAY,EAAE;GAC/B,MAAM,cAAc,WAAW,MAAiC;AAEhE,OAAI,YAAY,SAAS,MACvB,QAAO,aAAa,aAAsD;IACxE,WAAW,GAAG,YAAa,YAAY,MAAiC,UAAU;IAClF,QAAQ;IACR,OAAO;IACP,eAAe;IAChB,CAAC;GAIJ,MAAM,gBAAgB;IACpB,eAAe;IACf,WAAW,GAAG,YAAa,YAAY,MAAiC,UAAU;IACnF;AAOD,OAHsB,YAAY,KACI,aAAa,SAAS,OAAO,IAAI,MAOrE,QAAO,aAAa,aAAa;IAH/B,GAAG;IACH,MAAM;IAE0C,CAAC;AAGrD,UAAO,aAAa,aAAa,cAAc;;AAGjD,SAAO;;AAGT,QACE,oBAAC,UAAD;EACE,cAAY;EACZ,WAAW,GAAG,cAAc,UAAU,WAAW,iBAAiB,cAAc,WAAW,MAAiC,QAAQ,aAAa,eAAe,YAAY,iCAAiC,UAAU;EACvN,eAAY;EACZ,UAAU,YAAY;EACtB,SAAS;EACJ;EACL,MAAK;EACL,GAAI;YAEH,YAAY;EACN;;AAGb,WAAW,cAAc"}

package/dist/Checkbox/CheckboxBase.d.ts

@@ -1,30 +1,58 @@
-import { AsChildProp } from '../primitives/slot';
-import { ButtonHTMLAttributes, HTMLAttributes, Ref } from 'react';
-export type CheckedState = boolean | 'indeterminate';
+'use client';
+import { AsChildProp } from "../primitives/slot.js";
+import { ButtonHTMLAttributes, HTMLAttributes, Ref } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/Checkbox/CheckboxBase.d.ts
+type CheckedState = boolean | 'indeterminate';
 type BaseButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'value'>;
-export type CheckboxBaseProps = BaseButtonProps & AsChildProp & {
-    checked?: CheckedState;
-    defaultChecked?: CheckedState;
-    form?: string;
-    name?: string;
-    onCheckedChange?: (checked: CheckedState) => void;
-    required?: boolean;
-    value?: string;
+type CheckboxBaseProps = BaseButtonProps & AsChildProp & {
+  checked?: CheckedState;
+  defaultChecked?: CheckedState;
+  form?: string;
+  name?: string;
+  onCheckedChange?: (checked: CheckedState) => void;
+  required?: boolean;
+  value?: string;
 };
-export declare const CheckboxBase: {
-    ({ asChild, checked, className, defaultChecked, disabled, form, id, name, onCheckedChange, onClick, onKeyDown, ref, required, type, value, ...rest }: CheckboxBaseProps & {
-        ref?: Ref<HTMLButtonElement>;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
+declare function CheckboxBase({
+  asChild,
+  checked,
+  className,
+  defaultChecked,
+  disabled,
+  form,
+  id,
+  name,
+  onCheckedChange,
+  onClick,
+  onKeyDown,
+  ref,
+  required,
+  type,
+  value,
+  ...rest
+}: CheckboxBaseProps & {
+  ref?: Ref<HTMLButtonElement>;
+}): _$react_jsx_runtime0.JSX.Element;
+declare namespace CheckboxBase {
+  var displayName: string;
+}
+type CheckboxIndicatorProps = HTMLAttributes<HTMLSpanElement> & AsChildProp & {
+  forceMount?: boolean;
 };
-export type CheckboxIndicatorProps = HTMLAttributes<HTMLSpanElement> & AsChildProp & {
-    forceMount?: boolean;
-};
-export declare const CheckboxIndicator: {
-    ({ asChild, className, forceMount, ref, ...props }: CheckboxIndicatorProps & {
-        ref?: Ref<HTMLSpanElement>;
-    }): import("react/jsx-runtime").JSX.Element | null;
-    displayName: string;
-};
-export {};
+declare function CheckboxIndicator({
+  asChild,
+  className,
+  forceMount,
+  ref,
+  ...props
+}: CheckboxIndicatorProps & {
+  ref?: Ref<HTMLSpanElement>;
+}): _$react_jsx_runtime0.JSX.Element | null;
+declare namespace CheckboxIndicator {
+  var displayName: string;
+}
+//#endregion
+export { CheckboxBase, CheckboxBaseProps, CheckboxIndicator, CheckboxIndicatorProps, CheckedState };
 //# sourceMappingURL=CheckboxBase.d.ts.map

package/dist/Checkbox/CheckboxBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxBase.d.ts","names":[],"sources":["../../src/components/Checkbox/CheckboxBase.tsx"],"mappings":";;;;;;KAKY,YAAA;AAAA,KAEP,eAAA,GAAkB,IAAA,CAAK,oBAAA,CAAqB,iBAAA;AAAA,KAErC,iBAAA,GAAoB,eAAA,GAC9B,WAAA;EACE,OAAA,GAAU,YAAA;EACV,cAAA,GAAiB,YAAA;EACjB,IAAA;EACA,IAAA;EACA,eAAA,IAAmB,OAAA,EAAS,YAAA;EAC5B,QAAA;EACA,KAAA;AAAA;AAAA;EAqBF,OAAA;EACA,OAAA;EACA,SAAA;EACA,cAAA;EACA,QAAA;EACA,IAAA;EACA,EAAA;EACA,IAAA;EACA,eAAA;EACA,OAAA;EACA,SAAA;EACA,GAAA;EACA,QAAA;EAEA,IAAA;EACA,KAAA;EAAA,GACG;AAAA,GACF,iBAAA;EACD,GAAA,GAAM,GAAA,CAAI,iBAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA;;;KAqHW,sBAAA,GAAyB,cAAA,CAAe,eAAA,IAClD,WAAA;EACE,UAAA;AAAA;AAAA;EAIF,OAAA;EACA,SAAA;EACA,UAAA;EACA,GAAA;EAAA,GACG;AAAA,GACF,sBAAA;EACD,GAAA,GAAM,GAAA,CAAI,eAAA;AAAA,IACX,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}

package/dist/Checkbox/CheckboxBase.js

@@ -1,73 +1,101 @@
-'use client'
-import '../styles/main.css'
-import { t as e } from "../twUtils-BpqlKSeB.js";
-import { Slot as t } from "../primitives/slot.js";
-import { useUncontrolledState as n } from "../hooks/useUncontrolledState.js";
-import { createContext as r, useCallback as i, useContext as a, useEffect as o, useId as s, useRef as c } from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
+'use client';
+import { cn } from "../utils/twUtils.js";
+import { Slot } from "../primitives/slot.js";
+import { useUncontrolledState } from "../hooks/useUncontrolledState.js";
+import { createContext, useCallback, useContext, useEffect, useId, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
 //#region src/components/Checkbox/CheckboxBase.tsx
-var d = r(null), f = (e) => e === "indeterminate" ? "indeterminate" : e ? "checked" : "unchecked", p = (e) => e === "indeterminate" ? !0 : !e, m = ({ asChild: r, checked: a, className: m, defaultChecked: h = !1, disabled: g, form: _, id: v, name: y, onCheckedChange: b, onClick: x, onKeyDown: S, ref: C, required: w, type: T, value: E = "on", ...D }) => {
-	let O = c(null), k = s(), A = v ?? `chk-${k}`, [j, M] = n({
-		defaultValue: h,
-		onChange: b,
-		value: a
+const CheckboxCtx = createContext(null);
+const dataState = (checked) => {
+	if (checked === "indeterminate") return "indeterminate";
+	return checked ? "checked" : "unchecked";
+};
+const getNext = (checked) => {
+	if (checked === "indeterminate") return true;
+	return !checked;
+};
+const CheckboxBase = ({ asChild, checked, className, defaultChecked = false, disabled, form, id, name, onCheckedChange, onClick, onKeyDown, ref, required, type, value = "on", ...rest }) => {
+	const inputRef = useRef(null);
+	const autoId = useId();
+	const resolvedId = id ?? `chk-${autoId}`;
+	const [state, setState] = useUncontrolledState({
+		defaultValue: defaultChecked,
+		onChange: onCheckedChange,
+		value: checked
 	});
-	o(() => {
-		O.current && (O.current.indeterminate = j === "indeterminate");
-	}, [j]), o(() => {
-		let e = O.current?.form ?? null;
-		if (!e) return;
-		let t = () => {
-			M(h);
+	useEffect(() => {
+		if (inputRef.current) inputRef.current.indeterminate = state === "indeterminate";
+	}, [state]);
+	useEffect(() => {
+		const formEl = inputRef.current?.form ?? null;
+		if (!formEl) return;
+		const handleReset = () => {
+			setState(defaultChecked);
 		};
-		return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
-	}, [h, M]);
-	let N = i(() => {
-		let e = O.current;
-		if (!e) return;
-		e.checked = j === !0, e.indeterminate = j === "indeterminate";
-		let t = new Event("change", { bubbles: !0 });
-		e.dispatchEvent(t);
-	}, [j]), P = i(() => {
-		g || (M(p(j)), queueMicrotask(() => N()));
+		formEl.addEventListener("reset", handleReset);
+		return () => formEl.removeEventListener("reset", handleReset);
+	}, [defaultChecked, setState]);
+	const emitFormChange = useCallback(() => {
+		const el = inputRef.current;
+		if (!el) return;
+		el.checked = state === true;
+		el.indeterminate = state === "indeterminate";
+		const event = new Event("change", { bubbles: true });
+		el.dispatchEvent(event);
+	}, [state]);
+	const handleToggle = useCallback(() => {
+		if (disabled) return;
+		setState(getNext(state));
+		queueMicrotask(() => emitFormChange());
 	}, [
-		g,
-		N,
-		M,
-		j
-	]), F = i((e) => {
-		x?.(e), !e.defaultPrevented && P();
-	}, [P, x]), I = i((e) => {
-		S?.(e), !e.defaultPrevented && e.key === " " && (e.preventDefault(), P());
-	}, [P, S]), L = r ? t : "button";
-	return /* @__PURE__ */ l(d.Provider, {
+		disabled,
+		emitFormChange,
+		setState,
+		state
+	]);
+	const handleClick = useCallback((e) => {
+		onClick?.(e);
+		if (e.defaultPrevented) return;
+		handleToggle();
+	}, [handleToggle, onClick]);
+	const handleKeyDown = useCallback((e) => {
+		onKeyDown?.(e);
+		if (e.defaultPrevented) return;
+		if (e.key === " ") {
+			e.preventDefault();
+			handleToggle();
+		}
+	}, [handleToggle, onKeyDown]);
+	const Comp = asChild ? Slot : "button";
+	return /* @__PURE__ */ jsx(CheckboxCtx.Provider, {
 		value: {
-			state: j,
-			disabled: g
+			state,
+			disabled
 		},
-		children: /* @__PURE__ */ u(L, {
-			"aria-checked": j === "indeterminate" ? "mixed" : j,
-			"aria-disabled": g ?? void 0,
-			className: e("h-4 w-4 inline-flex shrink-0 items-center justify-center", "border-input rounded-sm border bg-background", "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none", "disabled:cursor-not-allowed disabled:opacity-50", "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", m),
-			"data-indeterminate": j === "indeterminate" ? "" : void 0,
-			"data-state": f(j),
-			disabled: g,
-			id: A,
-			ref: C,
+		children: /* @__PURE__ */ jsxs(Comp, {
+			"aria-checked": state === "indeterminate" ? "mixed" : state,
+			"aria-disabled": disabled ?? void 0,
+			className: cn("h-4 w-4 inline-flex shrink-0 items-center justify-center", "border-input rounded-sm border bg-background", "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none", "disabled:cursor-not-allowed disabled:opacity-50", "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", className),
+			"data-indeterminate": state === "indeterminate" ? "" : void 0,
+			"data-state": dataState(state),
+			disabled,
+			id: resolvedId,
+			ref,
 			role: "checkbox",
 			type: "button",
-			onClick: F,
-			onKeyDown: I,
-			...D,
-			children: [/* @__PURE__ */ l("input", {
+			onClick: handleClick,
+			onKeyDown: handleKeyDown,
+			...rest,
+			children: [/* @__PURE__ */ jsx("input", {
 				"aria-hidden": "true",
-				checked: j === !0,
-				disabled: g,
-				form: _,
-				name: y,
-				readOnly: !0,
-				ref: O,
-				required: w,
+				checked: state === true,
+				disabled,
+				form,
+				name,
+				readOnly: true,
+				ref: inputRef,
+				required,
 				style: {
 					position: "absolute",
 					opacity: 0,
@@ -77,22 +105,26 @@ var d = r(null), f = (e) => e === "indeterminate" ? "indeterminate" : e ? "check
 				},
 				tabIndex: -1,
 				type: "checkbox",
-				value: E
-			}), D.children]
+				value
+			}), rest.children]
 		})
 	});
 };
-m.displayName = "CheckboxBase";
-var h = ({ asChild: n, className: r, forceMount: i, ref: o, ...s }) => {
-	let c = a(d);
-	return !c || !(c.state === !0 || c.state === "indeterminate") && !i ? null : /* @__PURE__ */ l(n ? t : "span", {
-		className: e("flex items-center justify-center text-current", r),
-		"data-indeterminate": c.state === "indeterminate" ? "" : void 0,
-		"data-state": f(c.state),
-		ref: o,
-		...s
+CheckboxBase.displayName = "CheckboxBase";
+const CheckboxIndicator = ({ asChild, className, forceMount, ref, ...props }) => {
+	const ctx = useContext(CheckboxCtx);
+	if (!ctx) return null;
+	if (!(ctx.state === true || ctx.state === "indeterminate") && !forceMount) return null;
+	return /* @__PURE__ */ jsx(asChild ? Slot : "span", {
+		className: cn("flex items-center justify-center text-current", className),
+		"data-indeterminate": ctx.state === "indeterminate" ? "" : void 0,
+		"data-state": dataState(ctx.state),
+		ref,
+		...props
 	});
 };
-h.displayName = "CheckboxIndicator";
+CheckboxIndicator.displayName = "CheckboxIndicator";
+
 //#endregion
-export { m as CheckboxBase, h as CheckboxIndicator };
+export { CheckboxBase, CheckboxIndicator };
+//# sourceMappingURL=CheckboxBase.js.map

package/dist/Checkbox/CheckboxBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxBase.js","names":[],"sources":["../../src/components/Checkbox/CheckboxBase.tsx"],"sourcesContent":["import { useUncontrolledState } from '@hooks/useUncontrolledState'\nimport { Slot, type AsChildProp } from '@primitives/slot'\nimport { cn } from '@utils/twUtils'\nimport { createContext, useCallback, useContext, useEffect, useId, useRef, type ButtonHTMLAttributes, type ElementType, type HTMLAttributes, type KeyboardEvent, type MouseEvent, type Ref } from 'react'\n\nexport type CheckedState = boolean | 'indeterminate'\n\ntype BaseButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'value'>\n\nexport type CheckboxBaseProps = BaseButtonProps &\n  AsChildProp & {\n    checked?: CheckedState\n    defaultChecked?: CheckedState\n    form?: string\n    name?: string\n    onCheckedChange?: (checked: CheckedState) => void\n    required?: boolean\n    value?: string\n  }\n\ninterface Ctx {\n  disabled: boolean | undefined\n  state: CheckedState\n}\n\nconst CheckboxCtx = createContext<Ctx | null>(null)\n\nconst dataState = (checked: CheckedState): 'checked' | 'unchecked' | 'indeterminate' => {\n  if (checked === 'indeterminate') return 'indeterminate'\n  return checked ? 'checked' : 'unchecked'\n}\n\nconst getNext = (checked: CheckedState): CheckedState => {\n  if (checked === 'indeterminate') return true\n  return !checked\n}\n\nexport const CheckboxBase = ({\n  asChild,\n  checked,\n  className,\n  defaultChecked = false,\n  disabled,\n  form,\n  id,\n  name,\n  onCheckedChange,\n  onClick,\n  onKeyDown,\n  ref,\n  required,\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  type,\n  value = 'on',\n  ...rest\n}: CheckboxBaseProps & {\n  ref?: Ref<HTMLButtonElement>\n}) => {\n  const inputRef = useRef<HTMLInputElement | null>(null)\n  const autoId = useId()\n  const resolvedId = id ?? `chk-${autoId}`\n\n  const [state, setState] = useUncontrolledState<CheckedState>({\n    defaultValue: defaultChecked,\n    onChange: onCheckedChange,\n    value: checked,\n  })\n\n  useEffect(() => {\n    if (inputRef.current) inputRef.current.indeterminate = state === 'indeterminate'\n  }, [state])\n\n  useEffect(() => {\n    const formEl = inputRef.current?.form ?? null\n    if (!formEl) return\n    const handleReset = () => {\n      setState(defaultChecked)\n    }\n    formEl.addEventListener('reset', handleReset)\n    return () => formEl.removeEventListener('reset', handleReset)\n  }, [defaultChecked, setState])\n\n  const emitFormChange = useCallback(() => {\n    const el = inputRef.current\n    if (!el) return\n    el.checked = state === true\n    el.indeterminate = state === 'indeterminate'\n    const event = new Event('change', { bubbles: true })\n    el.dispatchEvent(event)\n  }, [state])\n\n  const handleToggle = useCallback(() => {\n    if (disabled) return\n    const next = getNext(state)\n    setState(next)\n    queueMicrotask(() => emitFormChange())\n  }, [disabled, emitFormChange, setState, state])\n\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => {\n      onClick?.(e)\n      if (e.defaultPrevented) return\n      handleToggle()\n    },\n    [handleToggle, onClick],\n  )\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      onKeyDown?.(e)\n      if (e.defaultPrevented) return\n      if (e.key === ' ') {\n        e.preventDefault()\n        handleToggle()\n      }\n    },\n    [handleToggle, onKeyDown],\n  )\n\n  const Comp: ElementType = asChild ? Slot : 'button'\n\n  return (\n    <CheckboxCtx.Provider value={{ state, disabled }}>\n      <Comp\n        aria-checked={state === 'indeterminate' ? 'mixed' : state}\n        aria-disabled={disabled ?? undefined}\n        className={cn(\n          'h-4 w-4 inline-flex shrink-0 items-center justify-center',\n          'border-input rounded-sm border bg-background',\n          'focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',\n          'disabled:cursor-not-allowed disabled:opacity-50',\n          'data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n          className,\n        )}\n        data-indeterminate={state === 'indeterminate' ? '' : undefined}\n        data-state={dataState(state)}\n        disabled={disabled}\n        id={resolvedId}\n        ref={ref}\n        role='checkbox' // oxlint-disable-line jsx-a11y/prefer-tag-over-role\n        type='button'\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {/* hidden input for forms */}\n        <input\n          aria-hidden='true'\n          checked={state === true}\n          disabled={disabled}\n          form={form}\n          name={name}\n          readOnly\n          ref={inputRef}\n          required={required}\n          // visually hidden but in the DOM for form submission\n          style={{\n            position: 'absolute',\n            opacity: 0,\n            width: 0,\n            height: 0,\n            pointerEvents: 'none',\n          }}\n          tabIndex={-1}\n          type='checkbox'\n          value={value}\n        />\n        {rest.children}\n      </Comp>\n    </CheckboxCtx.Provider>\n  )\n}\nCheckboxBase.displayName = 'CheckboxBase'\n\nexport type CheckboxIndicatorProps = HTMLAttributes<HTMLSpanElement> &\n  AsChildProp & {\n    forceMount?: boolean\n  }\n\nexport const CheckboxIndicator = ({\n  asChild,\n  className,\n  forceMount,\n  ref,\n  ...props\n}: CheckboxIndicatorProps & {\n  ref?: Ref<HTMLSpanElement>\n}) => {\n  const ctx = useContext(CheckboxCtx)\n  if (!ctx) return null\n  const visible = ctx.state === true || ctx.state === 'indeterminate'\n  if (!visible && !forceMount) return null\n\n  const Comp: ElementType = asChild ? Slot : 'span'\n\n  return <Comp className={cn('flex items-center justify-center text-current', className)} data-indeterminate={ctx.state === 'indeterminate' ? '' : undefined} data-state={dataState(ctx.state)} ref={ref} {...props} />\n}\nCheckboxIndicator.displayName = 'CheckboxIndicator'\n"],"mappings":"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"}

package/dist/Checkbox.d.ts

@@ -1,26 +1,51 @@
-import { BaseFormFieldProps, FormFieldState } from './utils/formFieldUtils';
-import { ComponentPropsWithoutRef, ComponentRef, Ref } from 'react';
-import { CheckboxBase } from './CheckboxBase';
-export interface CheckboxProps extends Omit<ComponentPropsWithoutRef<typeof CheckboxBase>, 'onCheckedChange'> {
-    'aria-describedby'?: string;
-    'aria-label'?: string;
-    checked?: boolean | 'indeterminate';
-    disabled?: boolean;
-    errorMessage?: BaseFormFieldProps['errorMessage'];
-    id?: string;
-    label?: string;
-    labelText?: string;
-    name?: string;
-    onCheckedChange: (value: boolean | 'indeterminate') => void;
-    required?: boolean;
-    state?: FormFieldState;
-    value?: string;
-    warningMessage?: BaseFormFieldProps['errorMessage'];
+'use client';
+import { BaseFormFieldProps, FormFieldState } from "./utils/formFieldUtils.js";
+import { CheckboxBase } from "./Checkbox/CheckboxBase.js";
+import { ComponentPropsWithoutRef, ComponentRef, Ref } from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/Checkbox/Checkbox.d.ts
+interface CheckboxProps extends Omit<ComponentPropsWithoutRef<typeof CheckboxBase>, 'onCheckedChange'> {
+  'aria-describedby'?: string;
+  'aria-label'?: string;
+  checked?: boolean | 'indeterminate';
+  disabled?: boolean;
+  errorMessage?: BaseFormFieldProps['errorMessage'];
+  id?: string;
+  label?: string;
+  labelText?: string;
+  messageReserveLines?: number;
+  messageReserveSpace?: boolean;
+  name?: string;
+  onCheckedChange: (value: boolean | 'indeterminate') => void;
+  required?: boolean;
+  state?: FormFieldState;
+  value?: string;
+  warningMessage?: BaseFormFieldProps['errorMessage'];
 }
-export declare const Checkbox: {
-    ({ checked, className, errorMessage, id, label, labelText, onCheckedChange, ref, required, state, warningMessage, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, ...props }: CheckboxProps & {
-        ref?: Ref<ComponentRef<typeof CheckboxBase>>;
-    }): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare function Checkbox({
+  checked,
+  className,
+  errorMessage,
+  id,
+  label,
+  labelText,
+  messageReserveLines,
+  messageReserveSpace,
+  onCheckedChange,
+  ref,
+  required,
+  state,
+  warningMessage,
+  'aria-describedby': ariaDescribedBy,
+  'aria-label': ariaLabel,
+  ...props
+}: CheckboxProps & {
+  ref?: Ref<ComponentRef<typeof CheckboxBase>>;
+}): _$react_jsx_runtime0.JSX.Element;
+declare namespace Checkbox {
+  var displayName: string;
+}
+//#endregion
+export { Checkbox, CheckboxProps };
 //# sourceMappingURL=Checkbox.d.ts.map

package/dist/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","names":[],"sources":["../src/components/Checkbox/Checkbox.tsx"],"mappings":";;;;;;;UAMiB,aAAA,SAAsB,IAAA,CAAK,wBAAA,QAAgC,YAAA;EAC1E,kBAAA;EACA,YAAA;EACA,OAAA;EACA,QAAA;EACA,YAAA,GAAe,kBAAA;EACf,EAAA;EACA,KAAA;EACA,SAAA;EACA,mBAAA;EACA,mBAAA;EACA,IAAA;EACA,eAAA,GAAkB,KAAA;EAClB,QAAA;EACA,KAAA,GAAQ,cAAA;EACR,KAAA;EACA,cAAA,GAAiB,kBAAA;AAAA;AAAA;EAIjB,OAAA;EACA,SAAA;EACA,YAAA;EACA,EAAA;EACA,KAAA;EACA,SAAA;EACA,mBAAA;EACA,mBAAA;EACA,eAAA;EACA,GAAA;EACA,QAAA;EACA,KAAA;EACA,cAAA;EAAA,oBACoB,eAAA;EAAA,cACN,SAAA;EAAA,GACX;AAAA,GACF,aAAA;EACD,GAAA,GAAM,GAAA,CAAI,YAAA,QAAoB,YAAA;AAAA,IAC/B,oBAAA,CAAA,GAAA,CAAA,OAAA;AAAA"}

package/dist/Checkbox.js

@@ -1,64 +1,73 @@
-'use client'
-import './styles/main.css'
-import { CheckmarkIcon as e } from "./Icons/CheckmarkIcon.js";
-import { MinusIcon as t } from "./Icons/MinusIcon.js";
-import { t as n } from "./twUtils-BpqlKSeB.js";
-import { ErrorMessage as r, WarningMessage as i } from "./FormFieldMessage.js";
-import { useFormFieldId as a } from "./utils/formFieldUtils.js";
-import { CheckboxBase as o, CheckboxIndicator as s } from "./Checkbox/CheckboxBase.js";
+'use client';
+import { CheckmarkIcon } from "./Icons/CheckmarkIcon.js";
+import { MinusIcon } from "./Icons/MinusIcon.js";
+import { cn } from "./utils/twUtils.js";
+import { ErrorMessage, WarningMessage } from "./FormFieldMessage.js";
+import { useFormFieldId } from "./utils/formFieldUtils.js";
+import { CheckboxBase, CheckboxIndicator } from "./Checkbox/CheckboxBase.js";
 import "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+
 //#region src/components/Checkbox/Checkbox.tsx
-var u = ({ checked: u, className: d, errorMessage: f, id: p, label: m, labelText: h, onCheckedChange: g, ref: _, required: v, state: y = "default", warningMessage: b, "aria-describedby": x, "aria-label": S, ...C }) => {
-	let w = a(p, C.name), T = h ?? m, E = `${w}-error`, D = `${w}-warning`;
-	return /* @__PURE__ */ l("div", { children: [
-		/* @__PURE__ */ l("div", {
+const Checkbox = ({ checked, className, errorMessage, id, label, labelText, messageReserveLines = 1, messageReserveSpace = true, onCheckedChange, ref, required, state = "default", warningMessage, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, ...props }) => {
+	const inputId = useFormFieldId(id, props.name);
+	const resolvedLabelText = labelText ?? label;
+	const errorMessageId = `${inputId}-error`;
+	const warningMessageId = `${inputId}-warning`;
+	return /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsxs("div", {
 			className: "gap-2 flex items-center",
-			children: [/* @__PURE__ */ c(o, {
-				"aria-describedby": [y === "error" && f && E ? E : y === "warning" && b && D ? D : void 0, x].filter(Boolean).join(" ") || void 0,
-				"aria-invalid": y === "error" ? !0 : void 0,
-				"aria-label": S ?? (T ? void 0 : "Checkbox"),
-				"aria-required": v ?? void 0,
-				checked: u,
-				className: n("checkbox peer h-5 w-5 rounded-sm shrink-0 border border-checkbox-border hover:opacity-80 focus:outline-none focus-visible:outline-1 focus-visible:outline-checkbox-border--focus", "focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-checkbox-border--checked", d),
-				"data-field-state": y,
+			children: [/* @__PURE__ */ jsx(CheckboxBase, {
+				"aria-describedby": [state === "error" && errorMessage && errorMessageId ? errorMessageId : state === "warning" && warningMessage && warningMessageId ? warningMessageId : void 0, ariaDescribedBy].filter(Boolean).join(" ") || void 0,
+				"aria-invalid": state === "error" ? true : void 0,
+				"aria-label": ariaLabel ?? (!resolvedLabelText ? "Checkbox" : void 0),
+				"aria-required": required ?? void 0,
+				checked,
+				className: cn("checkbox peer h-5 w-5 rounded-sm shrink-0 border border-checkbox-border hover:opacity-80 focus:outline-none focus-visible:outline-1 focus-visible:outline-checkbox-border--focus", "focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-checkbox-border--checked", className),
+				"data-field-state": state,
 				"data-testid": "spectral-checkbox",
-				id: w,
-				onCheckedChange: g,
-				ref: _,
-				...C,
-				children: /* @__PURE__ */ c(s, {
+				id: inputId,
+				onCheckedChange,
+				ref,
+				...props,
+				children: /* @__PURE__ */ jsx(CheckboxIndicator, {
 					"data-testid": "spectral-checkbox-indicator",
-					className: n("checkbox-indicator flex items-center justify-center text-checkbox-indicator--checked"),
-					children: u === "indeterminate" ? /* @__PURE__ */ c(t, {
+					className: cn("checkbox-indicator flex items-center justify-center text-checkbox-indicator--checked"),
+					children: checked === "indeterminate" ? /* @__PURE__ */ jsx(MinusIcon, {
 						className: "checkbox-indeterminate",
 						size: 16,
 						strokeWidth: 4
-					}) : /* @__PURE__ */ c(e, {
+					}) : /* @__PURE__ */ jsx(CheckmarkIcon, {
 						className: "checkbox-check",
 						size: 16,
 						strokeWidth: 4
 					})
 				})
-			}), T && /* @__PURE__ */ c("label", {
+			}), resolvedLabelText && /* @__PURE__ */ jsx("label", {
 				className: "text-md peer-disabled:text-neutral-400 text-text-primary",
 				"data-testid": "spectral-checkbox-label",
-				htmlFor: w,
-				children: T
+				htmlFor: inputId,
+				children: resolvedLabelText
 			})]
 		}),
-		/* @__PURE__ */ c(r, {
+		/* @__PURE__ */ jsx(ErrorMessage, {
 			dataTestId: "spectral-checkbox-error-message",
-			id: E,
-			message: y === "error" ? f : null
+			id: errorMessageId,
+			message: state === "error" ? errorMessage : null,
+			messageReserveLines,
+			messageReserveSpace
 		}),
-		/* @__PURE__ */ c(i, {
+		/* @__PURE__ */ jsx(WarningMessage, {
 			dataTestId: "spectral-checkbox-warning-message",
-			id: D,
-			message: y === "warning" ? b : null
+			id: warningMessageId,
+			message: state === "warning" ? warningMessage : null,
+			messageReserveLines,
+			messageReserveSpace
 		})
 	] });
 };
-u.displayName = "Checkbox";
+Checkbox.displayName = "Checkbox";
+
 //#endregion
-export { u as Checkbox };
+export { Checkbox };
+//# sourceMappingURL=Checkbox.js.map