@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/components/forms/CheckBox/CheckBox.mjs

@@ -0,0 +1,168 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { useFormReset as t } from "../../../hooks/useFormReset.mjs";
+import { cx as n } from "../../../utils/cx.mjs";
+import { CheckIcon as r, MinusIcon as i } from "../../primitives/Icon/icons.mjs";
+import { useFieldContext as a, useFieldControl as o } from "../Field/FieldContext.mjs";
+import s from "./CheckBox.module.css.mjs";
+import { createContext as c, useCallback as l, useContext as u, useId as d, useLayoutEffect as f, useRef as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/forms/CheckBox/CheckBox.tsx
+var g = {
+	sm: s.sm,
+	md: s.md,
+	lg: s.lg
+}, _ = {
+	neutral: s.toneNeutral,
+	primary: s.tonePrimary,
+	accent: s.toneAccent,
+	success: s.toneSuccess,
+	warning: s.toneWarning,
+	danger: s.toneDanger,
+	info: s.toneInfo
+}, v = {
+	end: s.labelEnd,
+	start: s.labelStart
+}, y = {
+	vertical: s.vertical,
+	horizontal: s.horizontal
+}, b = c(null);
+function x({ checked: a, defaultChecked: c = !1, onCheckedChange: y, indeterminate: x = !1, label: S, description: C, size: w, tone: T, invalid: E, disabled: D, required: O, readOnly: k, labelPosition: A = "end", value: j, name: M, id: N, className: P, style: F, ref: I, onChange: L, onClick: R, "aria-describedby": z, ...B }) {
+	let V = u(b), H = d(), U = d(), W = o({
+		id: N ?? (V ? H : void 0),
+		invalid: E ?? V?.invalid,
+		required: O,
+		disabled: D ?? (V?.disabled || void 0),
+		readOnly: k ?? (V?.readOnly || void 0),
+		size: w ?? V?.size,
+		"aria-describedby": [C ? U : void 0, z].filter(Boolean).join(" ") || void 0
+	}), G = W.id ?? H, K = W.size ?? "md", q = T ?? V?.tone ?? "primary", { disabled: J, readOnly: Y, invalid: X } = W, ee = V ? [
+		C ? U : void 0,
+		V.itemDescribedBy,
+		z
+	].filter(Boolean).join(" ") || void 0 : W.ariaProps["aria-describedby"], [te, Z] = e({
+		value: a,
+		defaultValue: c,
+		onChange: y
+	});
+	t(() => $.current, () => V ? V.reset() : Z(c ?? !1), V ? !0 : a === void 0);
+	let Q = j ?? "on", ne = V ? V.value.includes(Q) : te, $ = p(null);
+	f(() => {
+		$.current && ($.current.indeterminate = x);
+	});
+	let re = l((e) => {
+		if ($.current = e, typeof I == "function") return I(e);
+		I && (I.current = e);
+	}, [I]), ie = (e) => {
+		R?.(e), Y && e.preventDefault();
+	}, ae = (e) => {
+		if (L?.(e), Y) return;
+		let t = e.target.checked;
+		V ? (V.toggle(Q, t), y?.(t)) : Z(t);
+	};
+	return /* @__PURE__ */ h("div", {
+		className: n(s.root, g[K], _[q], v[A], P),
+		style: F,
+		"data-disabled": J || void 0,
+		"data-invalid": X || void 0,
+		"data-readonly": Y || void 0,
+		children: [/* @__PURE__ */ h("span", {
+			className: s.controlWrap,
+			children: [/* @__PURE__ */ m("input", {
+				...B,
+				ref: re,
+				type: "checkbox",
+				id: G,
+				name: M ?? V?.name,
+				value: Q,
+				checked: ne,
+				disabled: J,
+				required: V ? void 0 : W.required,
+				"aria-describedby": ee,
+				"aria-invalid": W.ariaProps["aria-invalid"],
+				"aria-errormessage": V ? void 0 : W.ariaProps["aria-errormessage"],
+				"aria-readonly": Y || void 0,
+				className: s.input,
+				onClick: ie,
+				onChange: ae
+			}), /* @__PURE__ */ h("span", {
+				className: s.control,
+				"aria-hidden": "true",
+				children: [/* @__PURE__ */ m(r, {
+					className: n(s.mark, s.check),
+					strokeWidth: 3.5
+				}), /* @__PURE__ */ m(i, {
+					className: n(s.mark, s.minus),
+					strokeWidth: 3.5
+				})]
+			})]
+		}), (S || C) && /* @__PURE__ */ h("span", {
+			className: s.text,
+			children: [S && /* @__PURE__ */ m("label", {
+				htmlFor: G,
+				className: s.label,
+				children: S
+			}), C && /* @__PURE__ */ m("span", {
+				id: U,
+				className: s.description,
+				children: C
+			})]
+		})]
+	});
+}
+function S({ value: t, defaultValue: r = [], onValueChange: i, name: c, orientation: u = "vertical", size: f, tone: p, disabled: _, readOnly: v, invalid: x, label: S, description: C, className: w, children: T, "aria-labelledby": E, "aria-describedby": D, ...O }) {
+	let k = a(), A = d(), j = d(), M = o({
+		invalid: x,
+		disabled: _,
+		readOnly: v,
+		size: f,
+		"aria-describedby": [C ? j : void 0, D].filter(Boolean).join(" ") || void 0
+	}), [N, P] = e({
+		value: t,
+		defaultValue: r,
+		onChange: i
+	}), F = l((e, t) => {
+		P((n) => t ? n.includes(e) ? n : [...n, e] : n.filter((t) => t !== e));
+	}, [P]), I = k?.isGroup === !0 && !E && !S, L = [E, S ? A : void 0].filter(Boolean).join(" ") || void 0, R = [C ? j : void 0, D].filter(Boolean).join(" ") || void 0, z = {
+		name: c,
+		value: N,
+		toggle: F,
+		size: M.size,
+		tone: p,
+		disabled: M.disabled,
+		readOnly: M.readOnly,
+		invalid: M.invalid,
+		reset: () => {
+			t === void 0 && P(r ?? []);
+		},
+		itemDescribedBy: I ? R : void 0
+	};
+	return /* @__PURE__ */ h("div", {
+		...O,
+		role: I ? void 0 : "group",
+		"aria-labelledby": I ? void 0 : L,
+		"aria-describedby": I ? R : M.ariaProps["aria-describedby"],
+		className: n(s.group, g[M.size ?? "md"], w),
+		"data-disabled": M.disabled || void 0,
+		"aria-disabled": M.disabled || void 0,
+		children: [(S || C) && /* @__PURE__ */ h("div", {
+			className: s.groupHeader,
+			children: [S && /* @__PURE__ */ m("span", {
+				id: A,
+				className: s.groupLabel,
+				children: S
+			}), C && /* @__PURE__ */ m("span", {
+				id: j,
+				className: s.description,
+				children: C
+			})]
+		}), /* @__PURE__ */ m("div", {
+			className: n(s.options, y[u]),
+			children: /* @__PURE__ */ m(b.Provider, {
+				value: z,
+				children: T
+			})
+		})]
+	});
+}
+//#endregion
+export { x as CheckBox, S as CheckBoxGroup };

package/dist/components/forms/CheckBox/CheckBox.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_1f9i5_35`,t=`_sm_1f9i5_59`,n=`_md_1f9i5_73`,r=`_lg_1f9i5_87`,i=`_tonePrimary_1f9i5_105`,a=`_toneNeutral_1f9i5_117`,o=`_toneAccent_1f9i5_129`,s=`_toneSuccess_1f9i5_141`,c=`_toneWarning_1f9i5_153`,l=`_toneDanger_1f9i5_165`,u=`_toneInfo_1f9i5_177`,d=`_labelEnd_1f9i5_193`,f=`_labelStart_1f9i5_199`,p=`_controlWrap_1f9i5_211`,m=`_input_1f9i5_239`,h=`_control_1f9i5_211`,g=`_mark_1f9i5_299`,_=`_check_1f9i5_363`,v=`_minus_1f9i5_365`,y=`_label_1f9i5_193`,b=`_description_1f9i5_441`,x=`_text_1f9i5_451`,S=`_group_1f9i5_489`,C=`_groupHeader_1f9i5_505`,w=`_groupLabel_1f9i5_517`,T=`_options_1f9i5_539`,E=`_vertical_1f9i5_545`,D=`_horizontal_1f9i5_553`,O={root:e,sm:t,md:n,lg:r,tonePrimary:i,toneNeutral:a,toneAccent:o,toneSuccess:s,toneWarning:c,toneDanger:l,toneInfo:u,labelEnd:d,labelStart:f,controlWrap:p,input:m,control:h,mark:g,check:_,minus:v,label:y,description:b,text:x,group:S,groupHeader:C,groupLabel:w,options:T,vertical:E,horizontal:D};exports.check=_,exports.control=h,exports.controlWrap=p,exports.default=O,exports.description=b,exports.group=S,exports.groupHeader=C,exports.groupLabel=w,exports.horizontal=D,exports.input=m,exports.label=y,exports.labelEnd=d,exports.labelStart=f,exports.lg=r,exports.mark=g,exports.md=n,exports.minus=v,exports.options=T,exports.root=e,exports.sm=t,exports.text=x,exports.toneAccent=o,exports.toneDanger=l,exports.toneInfo=u,exports.toneNeutral=a,exports.tonePrimary=i,exports.toneSuccess=s,exports.toneWarning=c,exports.vertical=E;

package/dist/components/forms/CheckBox/CheckBox.module.css.mjs

@@ -0,0 +1,33 @@
+//#region src/components/forms/CheckBox/CheckBox.module.css
+var e = "_root_1f9i5_35", t = "_sm_1f9i5_59", n = "_md_1f9i5_73", r = "_lg_1f9i5_87", i = "_tonePrimary_1f9i5_105", a = "_toneNeutral_1f9i5_117", o = "_toneAccent_1f9i5_129", s = "_toneSuccess_1f9i5_141", c = "_toneWarning_1f9i5_153", l = "_toneDanger_1f9i5_165", u = "_toneInfo_1f9i5_177", d = "_labelEnd_1f9i5_193", f = "_labelStart_1f9i5_199", p = "_controlWrap_1f9i5_211", m = "_input_1f9i5_239", h = "_control_1f9i5_211", g = "_mark_1f9i5_299", _ = "_check_1f9i5_363", v = "_minus_1f9i5_365", y = "_label_1f9i5_193", b = "_description_1f9i5_441", x = "_text_1f9i5_451", S = "_group_1f9i5_489", C = "_groupHeader_1f9i5_505", w = "_groupLabel_1f9i5_517", T = "_options_1f9i5_539", E = "_vertical_1f9i5_545", D = "_horizontal_1f9i5_553", O = {
+	root: e,
+	sm: t,
+	md: n,
+	lg: r,
+	tonePrimary: i,
+	toneNeutral: a,
+	toneAccent: o,
+	toneSuccess: s,
+	toneWarning: c,
+	toneDanger: l,
+	toneInfo: u,
+	labelEnd: d,
+	labelStart: f,
+	controlWrap: p,
+	input: m,
+	control: h,
+	mark: g,
+	check: _,
+	minus: v,
+	label: y,
+	description: b,
+	text: x,
+	group: S,
+	groupHeader: C,
+	groupLabel: w,
+	options: T,
+	vertical: E,
+	horizontal: D
+};
+//#endregion
+export { _ as check, h as control, p as controlWrap, O as default, b as description, S as group, C as groupHeader, w as groupLabel, D as horizontal, m as input, y as label, d as labelEnd, f as labelStart, r as lg, g as mark, n as md, v as minus, T as options, e as root, t as sm, x as text, o as toneAccent, l as toneDanger, u as toneInfo, a as toneNeutral, i as tonePrimary, s as toneSuccess, c as toneWarning, E as vertical };

package/dist/components/forms/CheckBox/index.d.ts

@@ -0,0 +1 @@
+export * from './CheckBox';

package/dist/components/forms/ColorPicker/ColorInput.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),n=require("../../../utils/cx.cjs.js"),r=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),ee=require("../../primitives/Icon/icons.cjs.js"),i=require("../Field/FieldContext.cjs.js"),a=require("../../overlays/Popover/Popover.cjs.js"),o=require("./colorUtils.cjs.js"),s=require("./ColorPicker.module.css.cjs.js"),te=require("./ColorPicker.cjs.js");let c=require("react"),l=require("react/jsx-runtime");var u={sm:s.default.triggerSm,md:s.default.triggerMd,lg:s.default.triggerLg};function d(d){let f=t.useMessages(),{value:ne,defaultValue:p,onValueChange:m,onValueCommit:h,format:g=`hex`,alpha:_=!1,swatches:v,eyeDropper:y,size:b,disabled:x,readOnly:S,invalid:C,name:w,labels:T,open:re,defaultOpen:ie,onOpenChange:E,placement:D=`bottom-start`,fullWidth:O=!1,dialogLabel:k=f.colorPicker.dialog,id:A,className:j,style:M,"aria-label":N,"aria-labelledby":P,"aria-describedby":F,...I}=d,L=i.useFieldContext(),R=i.useFieldControl({id:A,invalid:C,disabled:x,readOnly:S,size:b,"aria-describedby":F}),{disabled:z,readOnly:B,invalid:V}=R,H=R.size??`md`,[U,W]=e.useControllableState({value:ne,defaultValue:p??`#1d4ed8`,onChange:m}),G=o.parseColor(U),K=G?o.formatColor(_?G:{...G,a:1},g,{alpha:_}):U,q=T?.describeColor??(e=>o.describeColor(e,f.colorPicker.colors)),J=G?q(_?G:{...G,a:1}):``,Y=(0,c.useId)(),X=`${Y}-name`,Z=`${Y}-value`,Q=P??L?.labelId,$=N??(Q?void 0:T?.input??f.colorPicker.input),ae={"--cp-color":G?o.formatColor(_?G:{...G,a:1},`rgb`):`transparent`};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(a.Popover,{open:re,defaultOpen:ie,onOpenChange:E,placement:D,children:[(0,l.jsx)(a.Popover.Trigger,{asChild:!0,children:(0,l.jsxs)(`button`,{...I,type:`button`,id:R.id,disabled:z,className:n.cx(s.default.trigger,u[H],O&&s.default.triggerFullWidth,j),style:{...M,...ae},"data-invalid":V||void 0,"data-readonly":B||void 0,"aria-labelledby":[Q??($?X:void 0),Z].filter(Boolean).join(` `),...R.ariaProps,children:[!Q&&$&&(0,l.jsx)(r.VisuallyHidden,{id:X,children:$}),(0,l.jsx)(`span`,{className:n.cx(s.default.triggerSwatch,s.default.checkered),"aria-hidden":`true`}),(0,l.jsxs)(`span`,{id:Z,className:s.default.triggerValue,children:[K,J&&(0,l.jsxs)(r.VisuallyHidden,{children:[`, `,J]})]}),(0,l.jsx)(ee.ChevronDownIcon,{size:`sm`,className:s.default.triggerChevron})]})}),(0,l.jsx)(a.Popover.Content,{"aria-label":k,maxWidth:`none`,children:(0,l.jsx)(i.FieldContext.Provider,{value:null,children:(0,l.jsx)(te.ColorPicker,{variant:`plain`,"aria-label":k,value:U,onValueChange:W,onValueCommit:h,format:g,alpha:_,swatches:v,eyeDropper:y,size:H,disabled:z,readOnly:B,invalid:V,labels:T})})})]}),w&&(0,l.jsx)(`input`,{type:`hidden`,name:w,value:K,disabled:z})]})}exports.ColorInput=d;

package/dist/components/forms/ColorPicker/ColorInput.d.ts

@@ -0,0 +1,38 @@
+import { ComponentPropsWithRef } from 'react';
+import { Placement, Size } from '../../../types/common';
+import { ColorPickerBaseProps } from './ColorPicker';
+/** Props for `ColorInput`. Other props are spread onto the trigger `<button>`. */
+export interface ColorInputProps extends ColorPickerBaseProps, Omit<ComponentPropsWithRef<"button">, keyof ColorPickerBaseProps | "onChange" | "children" | "type" | "value" | "defaultValue"> {
+    /** Controlled open state of the picker popover. */
+    open?: boolean;
+    /** Initial open state when uncontrolled. @default false */
+    defaultOpen?: boolean;
+    /** Called with the next open state. */
+    onOpenChange?: (open: boolean) => void;
+    /** Where the popover opens. Flips when there isn't room. @default "bottom-start" */
+    placement?: Placement;
+    /** Size of the pill field and the picker. Picks up a surrounding Field's size. @default "md" */
+    size?: Size;
+    /** Stretch the field to fill its container. @default false */
+    fullWidth?: boolean;
+    /** Accessible name of the picker popover. @default "Choose a color" */
+    dialogLabel?: string;
+    /** Accessible name when there's no visible label. Inside a Field, the Field's label is used. The current color is always appended. */
+    "aria-label"?: string;
+    /** id of a visible label. Inside a Field, the Field's label is used. */
+    "aria-labelledby"?: string;
+}
+/**
+ * A pill field showing a swatch and the color value; pressing it opens a
+ * `ColorPicker` in a `Popover` (a non-modal dialog on the shared overlay
+ * layer stack: Escape and outside presses close it, focus returns to the
+ * field). Takes the same value, format, alpha, swatch, and state props as
+ * `ColorPicker`.
+ *
+ * The trigger is a native `<button>` with `aria-haspopup="dialog"` and
+ * `aria-expanded`. Its name is the label plus the current value and a plain
+ * description ("Jersey color, #1d4ed8, dark blue"). Inside a `Field`, the
+ * label, hint, error, invalid, disabled, and read-only state are wired to
+ * it. A read-only field still opens, so the values can be inspected.
+ */
+export declare function ColorInput(props: ColorInputProps): import("react").JSX.Element;

package/dist/components/forms/ColorPicker/ColorInput.mjs

@@ -0,0 +1,113 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { useMessages as t } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { cx as n } from "../../../utils/cx.mjs";
+import { VisuallyHidden as r } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import { ChevronDownIcon as i } from "../../primitives/Icon/icons.mjs";
+import { FieldContext as a, useFieldContext as ee, useFieldControl as o } from "../Field/FieldContext.mjs";
+import { Popover as s } from "../../overlays/Popover/Popover.mjs";
+import { describeColor as c, formatColor as l, parseColor as te } from "./colorUtils.mjs";
+import u from "./ColorPicker.module.css.mjs";
+import { ColorPicker as d } from "./ColorPicker.mjs";
+import { useId as f } from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/forms/ColorPicker/ColorInput.tsx
+var g = {
+	sm: u.triggerSm,
+	md: u.triggerMd,
+	lg: u.triggerLg
+};
+function _(_) {
+	let v = t(), { value: y, defaultValue: b, onValueChange: ne, onValueCommit: re, format: x = "hex", alpha: S = !1, swatches: ie, eyeDropper: ae, size: oe, disabled: se, readOnly: C, invalid: w, name: T, labels: E, open: D, defaultOpen: O, onOpenChange: k, placement: A = "bottom-start", fullWidth: j = !1, dialogLabel: M = v.colorPicker.dialog, id: N, className: P, style: F, "aria-label": I, "aria-labelledby": L, "aria-describedby": ce, ...R } = _, z = ee(), B = o({
+		id: N,
+		invalid: w,
+		disabled: se,
+		readOnly: C,
+		size: oe,
+		"aria-describedby": ce
+	}), { disabled: V, readOnly: H, invalid: U } = B, W = B.size ?? "md", [G, le] = e({
+		value: y,
+		defaultValue: b ?? "#1d4ed8",
+		onChange: ne
+	}), K = te(G), q = K ? l(S ? K : {
+		...K,
+		a: 1
+	}, x, { alpha: S }) : G, ue = E?.describeColor ?? ((e) => c(e, v.colorPicker.colors)), J = K ? ue(S ? K : {
+		...K,
+		a: 1
+	}) : "", Y = f(), X = `${Y}-name`, Z = `${Y}-value`, Q = L ?? z?.labelId, $ = I ?? (Q ? void 0 : E?.input ?? v.colorPicker.input), de = { "--cp-color": K ? l(S ? K : {
+		...K,
+		a: 1
+	}, "rgb") : "transparent" };
+	return /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ h(s, {
+		open: D,
+		defaultOpen: O,
+		onOpenChange: k,
+		placement: A,
+		children: [/* @__PURE__ */ m(s.Trigger, {
+			asChild: !0,
+			children: /* @__PURE__ */ h("button", {
+				...R,
+				type: "button",
+				id: B.id,
+				disabled: V,
+				className: n(u.trigger, g[W], j && u.triggerFullWidth, P),
+				style: {
+					...F,
+					...de
+				},
+				"data-invalid": U || void 0,
+				"data-readonly": H || void 0,
+				"aria-labelledby": [Q ?? ($ ? X : void 0), Z].filter(Boolean).join(" "),
+				...B.ariaProps,
+				children: [
+					!Q && $ && /* @__PURE__ */ m(r, {
+						id: X,
+						children: $
+					}),
+					/* @__PURE__ */ m("span", {
+						className: n(u.triggerSwatch, u.checkered),
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ h("span", {
+						id: Z,
+						className: u.triggerValue,
+						children: [q, J && /* @__PURE__ */ h(r, { children: [", ", J] })]
+					}),
+					/* @__PURE__ */ m(i, {
+						size: "sm",
+						className: u.triggerChevron
+					})
+				]
+			})
+		}), /* @__PURE__ */ m(s.Content, {
+			"aria-label": M,
+			maxWidth: "none",
+			children: /* @__PURE__ */ m(a.Provider, {
+				value: null,
+				children: /* @__PURE__ */ m(d, {
+					variant: "plain",
+					"aria-label": M,
+					value: G,
+					onValueChange: le,
+					onValueCommit: re,
+					format: x,
+					alpha: S,
+					swatches: ie,
+					eyeDropper: ae,
+					size: W,
+					disabled: V,
+					readOnly: H,
+					invalid: U,
+					labels: E
+				})
+			})
+		})]
+	}), T && /* @__PURE__ */ m("input", {
+		type: "hidden",
+		name: T,
+		value: q,
+		disabled: V
+	})] });
+}
+//#endregion
+export { _ as ColorInput };

package/dist/components/forms/ColorPicker/ColorPicker.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../i18n/en.cjs.js"),t=require("../../../hooks/useControllableState.cjs.js"),n=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),r=require("../../../utils/cx.cjs.js"),i=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),a=require("../../primitives/Button/Button.cjs.js"),o=require("../../primitives/Icon/icons.cjs.js"),s=require("../Field/FieldContext.cjs.js"),c=require("../Input/Input.cjs.js"),l=require("./colorUtils.cjs.js"),u=require("./ColorPicker.module.css.cjs.js");let d=require("react"),f=require("react/jsx-runtime");function p(e){let{colors:t}=e.colorPicker;return{...e.colorPicker,describeColor:e=>l.describeColor(e,t),hueName:e=>l.getHueName(e,t)}}var m=p(e.en),h=`#1d4ed8`,g={h:224,s:87,v:85,a:1},_={sm:u.default.sizeSm,md:u.default.sizeMd,lg:u.default.sizeLg},v={panel:u.default.panel,plain:u.default.plain},y=(e,t,n)=>Math.min(n,Math.max(t,e)),b=`linear-gradient(to right, hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%))`,x=e=>l.formatColor(e,`rgb`);function S(e,t){let n=e.shiftKey?10:1,r=t!==`y`,i=t!==`x`;switch(e.key){case`ArrowRight`:return r?{dx:n,dy:0}:{dx:0,dy:n};case`ArrowLeft`:return r?{dx:-n,dy:0}:{dx:0,dy:-n};case`ArrowUp`:return i?{dx:0,dy:n}:{dx:n,dy:0};case`ArrowDown`:return i?{dx:0,dy:-n}:{dx:-n,dy:0};case`PageUp`:return i?{dx:0,dy:10}:{dx:10,dy:0};case`PageDown`:return i?{dx:0,dy:-10}:{dx:-10,dy:0};case`Home`:return{dx:0,dy:0,to:`min`};case`End`:return{dx:0,dy:0,to:`max`};default:return null}}function C(){if(!(typeof window>`u`))return window.EyeDropper}function ee({value:e,defaultValue:n,onValueChange:r,onValueCommit:i,format:a,alpha:o}){let[s,c]=t.useControllableState({value:e,defaultValue:n??h,onChange:r}),u=e=>o?e:{...e,a:1},f=e=>l.formatColor(e,a,{alpha:o}),[p,m]=(0,d.useState)(()=>u(l.parseColor(s)??g)),[_,v]=(0,d.useState)(s),b=(0,d.useRef)(p),x=p;if(s!==_){v(s);let e=l.parseColor(s,p.h);e&&f(u(e))!==f(p)&&(x=u(e),m(x))}return x=u(x),b.current=x,{hsva:x,hsvaRef:b,str:f(x),update:e=>{let t=u({h:y(e.h,0,360),s:y(e.s,0,100),v:y(e.v,0,100),a:y(e.a,0,1)});b.current=t,m(t);let n=f(t);v(n),c(n)},commit:()=>i?.(f(b.current)),fmt:f}}function w({label:e,value:t,max:n,valueText:i,trackStyle:a,checkered:o,interactive:s,disabled:c,readOnly:l,ariaProps:p,onChange:m,onCommit:h}){let g=(0,d.useRef)(null),_=(0,d.useRef)(null),[v,b]=(0,d.useState)(!1),x=(0,d.useRef)(!1),C=e=>{let r=g.current?.getBoundingClientRect();return!r||r.width<=0?t:y((e-r.left)/r.width,0,1)*n},ee=e=>{s&&e.button===0&&(e.preventDefault(),e.currentTarget.setPointerCapture(e.pointerId),b(!0),_.current?.focus({preventScroll:!0}),m(C(e.clientX)))},w=e=>{v&&m(C(e.clientX))},T=e=>{v&&(e.currentTarget.hasPointerCapture(e.pointerId)&&e.currentTarget.releasePointerCapture(e.pointerId),b(!1),h())},E=e=>{if(!s)return;let r=S(e,`x`);r&&(e.preventDefault(),x.current=!0,m(r.to===`min`?0:r.to===`max`?n:y(Math.round(t)+r.dx,0,n)))},D=()=>{x.current&&(x.current=!1,h())},O=Math.round(t);return(0,f.jsx)(`div`,{className:u.default.channel,"data-dragging":v||void 0,onPointerDown:ee,onPointerMove:w,onPointerUp:T,onPointerCancel:T,onLostPointerCapture:e=>{v&&T(e)},children:(0,f.jsxs)(`div`,{ref:g,className:u.default.rail,children:[(0,f.jsx)(`div`,{className:r.cx(u.default.track,o&&u.default.checkered),"aria-hidden":`true`,children:(0,f.jsx)(`div`,{className:u.default.trackFill,style:a})}),(0,f.jsx)(`span`,{ref:_,role:`slider`,tabIndex:c?-1:0,className:u.default.thumb,style:{left:`${y(t,0,n)/n*100}%`},"aria-label":e,"aria-valuemin":0,"aria-valuemax":n,"aria-valuenow":O,"aria-valuetext":i,"aria-orientation":`horizontal`,"aria-disabled":c||void 0,"aria-readonly":l||void 0,...p,"aria-required":void 0,onKeyDown:E,onKeyUp:D})]})})}function T({colors:e,current:t,label:n,disabled:r,readOnly:i,ariaProps:a,withAlpha:s,onSelect:c,describe:p}){let m=(0,d.useRef)([]),h=e.findIndex(e=>l.colorsEqual(e,t)),[g,_]=(0,d.useState)(null),v=g??(h>=0?h:0),y=t=>{let n=(t+e.length)%e.length;_(n),m.current[n]?.focus(),i||c(e[n])},b=t=>{if(r)return;let n=m.current.findIndex(e=>e===document.activeElement);if(n===-1)return;let i=null;t.key===`ArrowRight`||t.key===`ArrowDown`?i=n+1:t.key===`ArrowLeft`||t.key===`ArrowUp`?i=n-1:t.key===`Home`?i=0:t.key===`End`&&(i=e.length-1),i!==null&&(t.preventDefault(),y(i))},S=(0,d.useId)();return(0,f.jsxs)(`div`,{className:u.default.swatchSection,children:[(0,f.jsx)(`span`,{id:S,className:u.default.swatchCaption,children:n}),(0,f.jsx)(`div`,{role:`radiogroup`,"aria-labelledby":S,"aria-readonly":i||void 0,"aria-disabled":r||void 0,...a,className:u.default.swatches,onKeyDown:b,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||_(null)},children:e.map((e,t)=>{let n=t===h;return(0,f.jsxs)(`button`,{ref:e=>{m.current[t]=e},type:`button`,role:`radio`,"aria-checked":n,"aria-label":`${p(e)}, ${l.toHex(e,s)}`,tabIndex:t===v?0:-1,disabled:r,className:u.default.swatch,"data-checked":n||void 0,onFocus:()=>_(t),onClick:()=>{i||c(e)},children:[(0,f.jsx)(`span`,{className:u.default.swatchColor,style:{background:x(e)},"aria-hidden":`true`}),n&&(0,f.jsx)(`span`,{className:u.default.swatchCheck,"aria-hidden":`true`,children:(0,f.jsx)(o.CheckIcon,{size:`xs`,strokeWidth:3})})]},`${l.toHex(e)}-${t}`)})})]})}function E(e){let t=n.useMessages(),{value:m,defaultValue:h,onValueChange:g,onValueCommit:E,format:D=`hex`,alpha:O=!1,swatches:te,eyeDropper:ne=!0,size:re,disabled:ie,readOnly:ae,invalid:oe,name:se,labels:ce,variant:le=`panel`,swatchesOnly:ue=!1,"aria-label":de,"aria-labelledby":fe,"aria-describedby":pe,className:me,style:he,...ge}=e,k={...p(t),...ce},A=s.useFieldContext(),j=s.useFieldControl({invalid:oe,disabled:ie,readOnly:ae,size:re,"aria-describedby":pe},{nativeRequired:!1}),{disabled:M,readOnly:N,invalid:_e}=j,P=j.size??`md`,F=!M&&!N,I={...j.ariaProps,"aria-required":void 0},{hsva:L,hsvaRef:R,str:z,update:B,commit:V,fmt:ve}=ee({value:m,defaultValue:h,onValueChange:g,onValueCommit:E,format:D,alpha:O}),H=(0,d.useId)(),U=`${H}-input-label`,ye=`${H}-input-error`,be=A&&!A.isGroup?A.controlId:`${H}-input`,[xe,Se]=(0,d.useState)(!1);(0,d.useEffect)(()=>Se(!!C()),[]);let[Ce,we]=(0,d.useState)(``),Te=(0,d.useRef)(null),W=(0,d.useRef)(null),G=(0,d.useRef)(null),[Ee,De]=(0,d.useState)(`s`),[K,Oe]=(0,d.useState)(!1),q=(0,d.useRef)(!1),ke=(e,t)=>{let n=Te.current?.getBoundingClientRect();if(!n||n.width<=0||n.height<=0)return;let r=y((e-n.left)/n.width,0,1)*100,i=y((n.bottom-t)/n.height,0,1)*100;B({...R.current,s:r,v:i})},Ae=e=>{F&&e.button===0&&(e.preventDefault(),e.currentTarget.setPointerCapture(e.pointerId),Oe(!0),(Ee===`s`?W:G).current?.focus({preventScroll:!0}),ke(e.clientX,e.clientY))},je=e=>{K&&ke(e.clientX,e.clientY)},Me=e=>{K&&(e.currentTarget.hasPointerCapture(e.pointerId)&&e.currentTarget.releasePointerCapture(e.pointerId),Oe(!1),V())},Ne=e=>{if(!F)return;let t=S(e,`both`);if(!t)return;e.preventDefault(),q.current=!0;let n=R.current,r=e.currentTarget===G.current?`v`:`s`;if(t.to){let e=t.to===`min`?0:100;B(r===`s`?{...n,s:e}:{...n,v:e});return}let i=t.dx===0?`v`:`s`;B({...n,s:Math.round(n.s)+t.dx,v:Math.round(n.v)+t.dy}),i!==r&&(De(i),(i===`s`?W:G).current?.focus({preventScroll:!0}))},Pe=(e,t)=>{if(!F)return;let n=R.current;B(e===`s`?{...n,s:t}:{...n,v:t}),V()},Fe=()=>{q.current&&(q.current=!1,V())},[J,Y]=(0,d.useState)(null),[Ie,X]=(0,d.useState)(!1),Le=(0,d.useRef)(z);(0,d.useEffect)(()=>{Le.current!==z&&(Le.current=z,X(!1),Y(null))},[z]);let Z=()=>{if(J===null)return;let e=l.parseColor(J,R.current.h);if(Y(null),!e){X(!0);return}X(!1);let t=ve(R.current);B(e),ve(R.current)!==t&&V()},Re=(0,d.useRef)(Z);Re.current=Z,(0,d.useEffect)(()=>()=>Re.current(),[]);let Q=(te??[]).map(e=>l.parseColor(e)).filter(e=>e!==null).map(e=>O?e:{...e,a:1}),ze=e=>{B(e),V()},Be=async()=>{let e=C();if(e&&F)try{let t=await new e().open(),n=l.parseColor(t.sRGBHex,R.current.h);if(!n)return;ze({...n,a:R.current.a}),we(k.eyeDropperPicked(`${k.describeColor(n)}, ${l.toHex(n,!1)}`))}catch{}},Ve=k.describeColor(L),He={...L,a:1},Ue={h:L.h,s:100,v:100,a:1},$=fe??A?.labelId,We=!ue||Q.length===0,Ge={...he,"--cp-color":x(L)};return(0,f.jsxs)(`div`,{...ge,role:`group`,"aria-labelledby":$,"aria-label":$?void 0:de,className:r.cx(u.default.root,_[P],v[le],me),style:Ge,"data-disabled":M||void 0,"data-readonly":N||void 0,"data-invalid":_e||void 0,"data-dragging":K||void 0,children:[We&&(0,f.jsxs)(f.Fragment,{children:[(0,f.jsx)(`div`,{ref:Te,className:u.default.area,style:{background:`linear-gradient(to top, ${x({h:0,s:0,v:0,a:1})}, transparent), linear-gradient(to right, ${x({h:0,s:0,v:100,a:1})}, ${x(Ue)})`},onPointerDown:Ae,onPointerMove:je,onPointerUp:Me,onPointerCancel:Me,onLostPointerCapture:e=>{K&&Me(e)},children:(0,f.jsx)(`span`,{role:`group`,"aria-label":k.area,"aria-roledescription":k.areaRoleDescription,className:r.cx(u.default.thumb,u.default.areaThumb),style:{left:`${L.s}%`,top:`${100-L.v}%`,background:x(He)},children:[`s`,`v`].map(e=>(0,f.jsx)(`input`,{ref:e===`s`?W:G,type:`range`,className:u.default.axisInput,min:0,max:100,step:1,value:Math.round(e===`s`?L.s:L.v),tabIndex:e===Ee?0:-1,disabled:M,"aria-label":e===`s`?k.saturation:k.brightness,"aria-orientation":e===`s`?`horizontal`:`vertical`,"aria-valuetext":`${e===`s`?k.saturation:k.brightness} ${Math.round(e===`s`?L.s:L.v)}%, ${Ve}`,"aria-readonly":N||void 0,...I,onFocus:()=>De(e),onChange:t=>Pe(e,Number(t.target.value)),onKeyDown:Ne,onKeyUp:Fe},e))})}),(0,f.jsxs)(`div`,{className:u.default.sliderRow,children:[(0,f.jsx)(`span`,{className:r.cx(u.default.preview,u.default.checkered),"aria-hidden":`true`,children:(0,f.jsx)(`span`,{className:u.default.previewFill})}),(0,f.jsxs)(`div`,{className:u.default.sliders,children:[(0,f.jsx)(w,{label:k.hue,value:L.h,max:360,valueText:`${k.hue} ${Math.round(L.h)} ${k.degrees}, ${k.hueName(L.h)}`,trackStyle:{background:b},interactive:F,disabled:M,readOnly:N,ariaProps:I,onChange:e=>B({...R.current,h:e}),onCommit:V}),O&&(0,f.jsx)(w,{label:k.alpha,value:L.a*100,max:100,valueText:`${k.alpha} ${Math.round(L.a*100)}%`,trackStyle:{background:`linear-gradient(to right, transparent, ${x(He)})`},checkered:!0,interactive:F,disabled:M,readOnly:N,ariaProps:I,onChange:e=>B({...R.current,a:Math.round(e)/100}),onCommit:V})]})]}),(0,f.jsxs)(`div`,{className:u.default.inputRow,children:[ne&&xe&&(0,f.jsx)(a.IconButton,{"aria-label":k.eyeDropper,variant:`ghost`,tone:`neutral`,size:P,disabled:!F,onClick:Be,children:(0,f.jsx)(o.EyeDropperIcon,{size:`sm`})}),(0,f.jsxs)(`span`,{id:U,className:u.default.formatTag,children:[(0,f.jsxs)(i.VisuallyHidden,{children:[k.input,`, `]}),D.toUpperCase()]}),(0,f.jsx)(c.Input,{id:be,className:u.default.input,size:P,value:J??z,invalid:_e||Ie,disabled:M,readOnly:N,spellCheck:!1,autoComplete:`off`,autoCapitalize:`off`,"aria-labelledby":$?`${$} ${U}`:U,"aria-describedby":Ie?ye:void 0,startIcon:(0,f.jsx)(`span`,{className:r.cx(u.default.inputSwatch,u.default.checkered)}),onChange:e=>{Y(e.target.value),X(!1)},onBlur:Z,onKeyDown:e=>{e.key===`Enter`&&J!==null?(e.preventDefault(),Z()):e.key===`Escape`&&J!==null&&(e.stopPropagation(),Y(null),X(!1))}})]}),(0,f.jsx)(`div`,{className:u.default.message,"aria-live":`polite`,children:Ie&&(0,f.jsxs)(`p`,{id:ye,className:u.default.error,children:[(0,f.jsx)(o.ErrorIcon,{size:`sm`,className:u.default.errorIcon}),(0,f.jsx)(`span`,{children:k.invalidInput})]})})]}),Q.length>0&&(0,f.jsx)(T,{colors:Q,current:L,label:k.swatches,disabled:M,readOnly:N,ariaProps:ue?I:{},withAlpha:O,onSelect:ze,describe:k.describeColor}),(0,f.jsx)(i.VisuallyHidden,{"aria-live":`polite`,children:Ce}),se&&(0,f.jsx)(`input`,{type:`hidden`,name:se,value:z,disabled:M})]})}exports.ColorPicker=E,exports.colorPickerLabelsFrom=p,exports.colorsEqual=l.colorsEqual,exports.defaultColorPickerLabels=m,exports.describeColor=l.describeColor,exports.formatColor=l.formatColor,exports.getHueName=l.getHueName,exports.getLuminance=l.getLuminance,exports.hslToHsv=l.hslToHsv,exports.hsvToHsl=l.hsvToHsl,exports.hsvToRgb=l.hsvToRgb,exports.isValidColor=l.isValidColor,exports.parseColor=l.parseColor,exports.rgbToHsv=l.rgbToHsv,exports.toHex=l.toHex;

package/dist/components/forms/ColorPicker/ColorPicker.d.ts

@@ -0,0 +1,129 @@
+import { ComponentPropsWithRef } from 'react';
+import { Size } from '../../../types/common';
+import { ColorFormat, HSVA } from './colorUtils';
+import { Messages } from '../../../i18n/types';
+export * from './colorUtils';
+/**
+ * Visual style of the picker.
+ * - `panel`: a bordered, padded surface (default). Use it inline on a page.
+ * - `plain`: no border, background, or padding. Use it inside your own
+ *   surface (a popover, card, or drawer). `ColorInput` uses this.
+ */
+export type ColorPickerVariant = "panel" | "plain";
+/**
+ * The picker's visible and accessible strings. Override any of them to
+ * translate, including the color names (`describeColor`, `hueName`).
+ */
+export interface ColorPickerLabels {
+    /** Name of the 2D saturation / brightness area (a group of two sliders). @default "Saturation and brightness" */
+    area: string;
+    /** Role description of the 2D area group. @default "2D slider" */
+    areaRoleDescription: string;
+    /** Name of the area's horizontal slider. @default "Saturation" */
+    saturation: string;
+    /** Name of the area's vertical slider. @default "Brightness" */
+    brightness: string;
+    /** Name of the hue slider. @default "Hue" */
+    hue: string;
+    /** Unit read after the hue number. @default "degrees" */
+    degrees: string;
+    /** Name of the alpha slider. @default "Opacity" */
+    alpha: string;
+    /** Name of the text field (combined with a Field label when there is one). @default "Color value" */
+    input: string;
+    /** Message shown when the typed value can't be parsed. */
+    invalidInput: string;
+    /** Name of the swatch radio group. @default "Preset colors" */
+    swatches: string;
+    /** Name of the eyedropper button. @default "Pick a color from the screen" */
+    eyeDropper: string;
+    /** Announcement after the eyedropper picks a color; receives the color description. */
+    eyeDropperPicked: (description: string) => string;
+    /**
+     * Plain-language name of a color ("dark blue", "red, 50% opacity"), read in
+     * slider value text, swatch names, announcements, and ColorInput's button.
+     * Receives HSVA: hue 0-360, saturation and brightness 0-100, alpha 0-1.
+     * @default English names
+     */
+    describeColor: (color: HSVA) => string;
+    /** Name of a hue (0-360), read with the hue slider's value. @default English names ("blue") */
+    hueName: (hue: number) => string;
+}
+/** ColorPicker labels in a locale's messages (`LocaleProvider` supplies them). */
+export declare function colorPickerLabelsFrom(messages: Messages): ColorPickerLabels;
+/** English labels (the defaults without a `LocaleProvider`). */
+export declare const defaultColorPickerLabels: ColorPickerLabels;
+/** Value, format, and state props shared by `ColorPicker` and `ColorInput`. */
+export interface ColorPickerBaseProps {
+    /** Controlled color string in any supported format (`#rgb`, `#rrggbb`, `#rrggbbaa`, `rgb()`, `rgba()`, `hsl()`, `hsla()`). */
+    value?: string;
+    /** Initial color when uncontrolled. @default "#1d4ed8" */
+    defaultValue?: string;
+    /** Called with the formatted color string on every change (drag, key press, swatch, typed value). */
+    onValueChange?: (color: string) => void;
+    /** Called once an interaction ends: pointer up, key up, swatch pick, eyedropper pick, or a committed typed value. Use it for expensive work. */
+    onValueCommit?: (color: string) => void;
+    /** Format of the emitted string. @default "hex" */
+    format?: ColorFormat;
+    /**
+     * Enables the opacity slider and alpha output. Alpha is written only when
+     * it is below 1 (`#rrggbbaa`, `rgba()`, `hsla()`). Without it, any alpha in
+     * the value is ignored. @default false
+     */
+    alpha?: boolean;
+    /** Preset colors, shown as a radio group of swatches. Unparseable entries are skipped. */
+    swatches?: string[];
+    /** Show the eyedropper button when the browser supports the EyeDropper API (hidden otherwise). @default true */
+    eyeDropper?: boolean;
+    /** Control size. Picks up a surrounding Field's size. @default "md" */
+    size?: Size;
+    /** Disables every part. Picked up from a surrounding Field. */
+    disabled?: boolean;
+    /** Every part stays focusable and announces its value, but the color can't change. Picked up from a surrounding Field. */
+    readOnly?: boolean;
+    /** Invalid styling and `aria-invalid`. Picked up from a surrounding Field (pass `error` to the Field). */
+    invalid?: boolean;
+    /** Form field name. Renders an `<input type="hidden">` holding the formatted color. */
+    name?: string;
+    /** Override any built-in string. */
+    labels?: Partial<ColorPickerLabels>;
+}
+/** Props for `ColorPicker`. Other props are spread onto the root `div` (`role="group"`). */
+export interface ColorPickerProps extends ColorPickerBaseProps, Omit<ComponentPropsWithRef<"div">, keyof ColorPickerBaseProps | "onChange" | "children"> {
+    /** Panel surface or plain. @default "panel" */
+    variant?: ColorPickerVariant;
+    /** Show only the swatch palette (plus the hidden form input), without the area, sliders, and text field. Requires `swatches`. @default false */
+    swatchesOnly?: boolean;
+    /** Accessible name of the group when there's no visible label. Inside a Field, the Field's label is used. */
+    "aria-label"?: string;
+    /** id of a visible label for the group. Inside a Field, the Field's label is used. */
+    "aria-labelledby"?: string;
+}
+/**
+ * An inline color picker: a 2D saturation / brightness area, a hue slider,
+ * an optional opacity slider, a text field, optional preset swatches, and an
+ * eyedropper (when the browser supports it).
+ *
+ * **2D area pattern.** The area is a group ("Saturation and brightness",
+ * `aria-roledescription="2D slider"`) holding two visually hidden native
+ * range inputs, Saturation and Brightness, that share one tab stop and one
+ * visible thumb. Each reports its own value plus a plain color description
+ * ("Brightness 40%, dark blue"), so a screen reader's adjust gesture works
+ * on either axis. Left / Right change saturation and Up / Down brightness
+ * (Shift: 10 at a time), with focus following the axis; PageUp / PageDown
+ * change brightness by 10; Home / End go to the ends of the focused axis
+ * (on Brightness: pure black or white).
+ *
+ * **Hue and opacity** are `role="slider"` thumbs with Arrows (+/-1, Shift
+ * +/-10), PageUp / PageDown (+/-10), and Home / End. Clicking any track or
+ * the area jumps there; dragging uses pointer capture.
+ *
+ * **Text field** accepts any supported format and validates on blur or
+ * Enter. An invalid value shows an error (icon plus text, announced
+ * politely) and reverts to the last valid color. Escape discards the edit.
+ *
+ * Inside a `Field`, the Field's label names the group (and, with the
+ * format word, the text field); hint, error, invalid, disabled, read-only,
+ * and size are wired automatically.
+ */
+export declare function ColorPicker(props: ColorPickerProps): import("react").JSX.Element;