@vjdesigns/vjdesigns-ui 2.4.0 → 2.5.0

package/dist/components/feedback/Toast/ToastViewport.cjs.js

@@ -1 +1 @@
-const e=require("../../../utils/cx.cjs.js"),t=require("../../utilities/Portal/Portal.cjs.js"),n=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),r=require("./Toast.module.css.cjs.js"),i=require("./ToastItem.cjs.js"),a=require("./useToastAnnouncer.cjs.js");let o=require("react"),s=require("react/jsx-runtime");var c={"top-start":r.default.topStart,"top-center":r.default.topCenter,"top-end":r.default.topEnd,"bottom-start":r.default.bottomStart,"bottom-center":r.default.bottomCenter,"bottom-end":r.default.bottomEnd},l={0:r.default.gap0,1:r.default.gap1,2:r.default.gap2,3:r.default.gap3,4:r.default.gap4,5:r.default.gap5,6:r.default.gap6,8:r.default.gap8,10:r.default.gap10,12:r.default.gap12,16:r.default.gap16,20:r.default.gap20,24:r.default.gap24},u=[`Alt`,`Control`,`Meta`,`Shift`],d={Alt:`altKey`,Control:`ctrlKey`,Meta:`metaKey`,Shift:`shiftKey`};function f(e,t){if(t.length===0)return!1;let n=t.filter(e=>!u.includes(e)),r=u.filter(e=>t.includes(e));return u.every(t=>e[d[t]]===r.includes(t))&&n.every(t=>e.key===t||e.code===t)}function p(e){return e.map(e=>e.replace(/^Key/,``).replace(/^Digit/,``).replace(`Control`,`Ctrl`)).join(`+`)}function m(){let[e,t]=(0,o.useState)(!1);return(0,o.useEffect)(()=>{let e=e=>()=>t(e),n=e(!0),r=e(!1),i=()=>t(document.visibilityState===`hidden`);return window.addEventListener(`blur`,n),window.addEventListener(`focus`,r),document.addEventListener(`visibilitychange`,i),()=>{window.removeEventListener(`blur`,n),window.removeEventListener(`focus`,r),document.removeEventListener(`visibilitychange`,i)}},[]),e}var h=({store:u,placement:d,max:h,duration:g,gap:_,label:v,hotkey:y,showProgress:b,toneLabels:x,closeLabel:S,queuedLabel:C,className:w})=>{let T=(0,o.useSyncExternalStore)(u.subscribe,u.getSnapshot,u.getServerSnapshot),E=(0,o.useMemo)(()=>T.slice(0,Math.max(1,h)),[T,h]),D=T.length-E.length,O=(0,o.useRef)(null),k=(0,o.useRef)(new Map),A=(0,o.useRef)(null),[j,M]=(0,o.useState)(!1),[N,P]=(0,o.useState)(!1),F=m(),I=j||N||F,{polite:L,assertive:R}=a.useToastAnnouncer(E,x),z=(0,o.useCallback)((e,t)=>{t?k.current.set(e,t):k.current.delete(e)},[]),B=(0,o.useCallback)(()=>Array.from(O.current?.querySelectorAll(`li[data-state="open"]`)??[]),[]),V=(0,o.useCallback)(e=>{let t=k.current.get(e),n=Array.from(O.current?.querySelectorAll(`li[data-toast-id]`)??[]),r=t?n.indexOf(t):-1,i=e=>e.dataset.state===`open`,a=n.slice(r+1).find(i)??n.slice(0,Math.max(0,r)).reverse().find(i);if(a){a.focus();return}let o=A.current;A.current=null,o&&o.isConnected?o.focus():t?.blur()},[]);(0,o.useEffect)(()=>{if(y.length===0)return;let e=e=>{if(!f(e,y))return;let t=B(),n=t[t.length-1];if(!n)return;e.preventDefault();let r=document.activeElement;r&&!O.current?.contains(r)&&(A.current=r),n.focus()};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[y,B]);let H=e=>{P(!0);let t=e.relatedTarget;t&&!e.currentTarget.contains(t)&&(A.current=t)},U=e=>{let t=e.relatedTarget;(!t||!e.currentTarget.contains(t))&&P(!1)},W=p(y),G=d.startsWith(`top`)?`top`:`bottom`;return(0,s.jsx)(t.Portal,{children:(0,s.jsxs)(`section`,{ref:O,"aria-label":W?`${v} (${W})`:v,tabIndex:-1,className:e.cx(r.default.viewport,c[d],l[_],w),"data-side":G,"data-paused":I||void 0,onFocus:H,onBlur:U,children:[(0,s.jsx)(`ol`,{className:r.default.list,onPointerEnter:()=>M(!0),onPointerLeave:()=>M(!1),children:E.map(e=>(0,s.jsx)(i.ToastItem,{record:e,store:u,paused:I,defaultDuration:g,defaultShowProgress:b,toneLabels:x,closeLabel:S,registerRef:z,onFocusedClose:V},e.id))}),D>0&&(0,s.jsx)(`p`,{className:r.default.queued,children:C(D)}),(0,s.jsx)(n.VisuallyHidden,{role:`status`,"aria-live":`polite`,"aria-atomic":`false`,children:L.map(e=>(0,s.jsx)(`span`,{children:e.text},e.key))}),(0,s.jsx)(n.VisuallyHidden,{role:`alert`,"aria-live":`assertive`,"aria-atomic":`false`,children:R.map(e=>(0,s.jsx)(`span`,{children:e.text},e.key))})]})})};exports.ToastViewport=h,exports.formatHotkey=p;
+"use client";const e=require("../../../utils/cx.cjs.js"),t=require("../../utilities/Portal/Portal.cjs.js"),n=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),r=require("./ToastItem.cjs.js"),i=require("./useToastAnnouncer.cjs.js"),a=require("./Toast.module.css.cjs.js");let o=require("react"),s=require("react/jsx-runtime");var c={"top-start":a.default.topStart,"top-center":a.default.topCenter,"top-end":a.default.topEnd,"bottom-start":a.default.bottomStart,"bottom-center":a.default.bottomCenter,"bottom-end":a.default.bottomEnd},l={0:a.default.gap0,1:a.default.gap1,2:a.default.gap2,3:a.default.gap3,4:a.default.gap4,5:a.default.gap5,6:a.default.gap6,8:a.default.gap8,10:a.default.gap10,12:a.default.gap12,16:a.default.gap16,20:a.default.gap20,24:a.default.gap24},u=[`Alt`,`Control`,`Meta`,`Shift`],d={Alt:`altKey`,Control:`ctrlKey`,Meta:`metaKey`,Shift:`shiftKey`};function f(e,t){if(t.length===0)return!1;let n=t.filter(e=>!u.includes(e)),r=u.filter(e=>t.includes(e));return u.every(t=>e[d[t]]===r.includes(t))&&n.every(t=>e.key===t||e.code===t)}function p(e){return e.map(e=>e.replace(/^Key/,``).replace(/^Digit/,``).replace(`Control`,`Ctrl`)).join(`+`)}function m(){let[e,t]=(0,o.useState)(!1);return(0,o.useEffect)(()=>{let e=e=>()=>t(e),n=e(!0),r=e(!1),i=()=>t(document.visibilityState===`hidden`);return window.addEventListener(`blur`,n),window.addEventListener(`focus`,r),document.addEventListener(`visibilitychange`,i),()=>{window.removeEventListener(`blur`,n),window.removeEventListener(`focus`,r),document.removeEventListener(`visibilitychange`,i)}},[]),e}var h=({store:u,placement:d,max:h,duration:g,gap:_,label:v,hotkey:y,showProgress:b,toneLabels:x,closeLabel:S,queuedLabel:C,className:w})=>{let T=(0,o.useSyncExternalStore)(u.subscribe,u.getSnapshot,u.getServerSnapshot),E=(0,o.useMemo)(()=>T.slice(0,Math.max(1,h)),[T,h]),D=T.length-E.length,O=(0,o.useRef)(null),k=(0,o.useRef)(new Map),A=(0,o.useRef)(null),[j,M]=(0,o.useState)(!1),[N,P]=(0,o.useState)(!1),F=m(),I=j||N||F,{polite:L,assertive:R}=i.useToastAnnouncer(E,x),z=(0,o.useCallback)((e,t)=>{t?k.current.set(e,t):k.current.delete(e)},[]),B=(0,o.useCallback)(()=>Array.from(O.current?.querySelectorAll(`li[data-state="open"]`)??[]),[]),V=(0,o.useCallback)(e=>{let t=k.current.get(e),n=Array.from(O.current?.querySelectorAll(`li[data-toast-id]`)??[]),r=t?n.indexOf(t):-1,i=e=>e.dataset.state===`open`,a=n.slice(r+1).find(i)??n.slice(0,Math.max(0,r)).reverse().find(i);if(a){a.focus();return}let o=A.current;A.current=null,o&&o.isConnected?o.focus():t?.blur()},[]);(0,o.useEffect)(()=>{if(y.length===0)return;let e=e=>{if(!f(e,y))return;let t=B(),n=t[t.length-1];if(!n)return;e.preventDefault();let r=document.activeElement;r&&!O.current?.contains(r)&&(A.current=r),n.focus()};return window.addEventListener(`keydown`,e),()=>window.removeEventListener(`keydown`,e)},[y,B]);let H=e=>{P(!0);let t=e.relatedTarget;t&&!e.currentTarget.contains(t)&&(A.current=t)},U=e=>{let t=e.relatedTarget;t&&e.currentTarget.contains(t)||P(!1)},W=p(y),G=d.startsWith(`top`)?`top`:`bottom`;return(0,s.jsx)(t.Portal,{children:(0,s.jsxs)(`section`,{ref:O,"aria-label":W?`${v} (${W})`:v,tabIndex:-1,className:e.cx(a.default.viewport,c[d],l[_],w),"data-side":G,"data-paused":I||void 0,onFocus:H,onBlur:U,children:[(0,s.jsx)(`ol`,{className:a.default.list,onPointerEnter:()=>M(!0),onPointerLeave:()=>M(!1),children:E.map(e=>(0,s.jsx)(r.ToastItem,{record:e,store:u,paused:I,defaultDuration:g,defaultShowProgress:b,toneLabels:x,closeLabel:S,registerRef:z,onFocusedClose:V},e.id))}),D>0&&(0,s.jsx)(`p`,{className:a.default.queued,children:C(D)}),(0,s.jsx)(n.VisuallyHidden,{role:`status`,"aria-live":`polite`,"aria-atomic":`false`,children:L.map(e=>(0,s.jsx)(`span`,{children:e.text},e.key))}),(0,s.jsx)(n.VisuallyHidden,{role:`alert`,"aria-live":`assertive`,"aria-atomic":`false`,children:R.map(e=>(0,s.jsx)(`span`,{children:e.text},e.key))})]})})};exports.ToastViewport=h,exports.formatHotkey=p;

package/dist/components/feedback/Toast/ToastViewport.mjs

@@ -1,33 +1,34 @@
+"use client";
 import { cx as e } from "../../../utils/cx.mjs";
 import { Portal as t } from "../../utilities/Portal/Portal.mjs";
 import { VisuallyHidden as n } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
-import r from "./Toast.module.css.mjs";
-import { ToastItem as i } from "./ToastItem.mjs";
-import { useToastAnnouncer as a } from "./useToastAnnouncer.mjs";
+import { ToastItem as r } from "./ToastItem.mjs";
+import { useToastAnnouncer as i } from "./useToastAnnouncer.mjs";
+import a from "./Toast.module.css.mjs";
 import { useCallback as o, useEffect as s, useMemo as c, useRef as l, useState as u, useSyncExternalStore as d } from "react";
 import { jsx as f, jsxs as p } from "react/jsx-runtime";
-//#region src/components/feedback/Toast/ToastViewport.tsx
+// src/components/feedback/Toast/ToastViewport.tsx
 var m = {
-	"top-start": r.topStart,
-	"top-center": r.topCenter,
-	"top-end": r.topEnd,
-	"bottom-start": r.bottomStart,
-	"bottom-center": r.bottomCenter,
-	"bottom-end": r.bottomEnd
+	"top-start": a.topStart,
+	"top-center": a.topCenter,
+	"top-end": a.topEnd,
+	"bottom-start": a.bottomStart,
+	"bottom-center": a.bottomCenter,
+	"bottom-end": a.bottomEnd
 }, h = {
-	0: r.gap0,
-	1: r.gap1,
-	2: r.gap2,
-	3: r.gap3,
-	4: r.gap4,
-	5: r.gap5,
-	6: r.gap6,
-	8: r.gap8,
-	10: r.gap10,
-	12: r.gap12,
-	16: r.gap16,
-	20: r.gap20,
-	24: r.gap24
+	0: a.gap0,
+	1: a.gap1,
+	2: a.gap2,
+	3: a.gap3,
+	4: a.gap4,
+	5: a.gap5,
+	6: a.gap6,
+	8: a.gap8,
+	10: a.gap10,
+	12: a.gap12,
+	16: a.gap16,
+	20: a.gap20,
+	24: a.gap24
 }, g = [
 	"Alt",
 	"Control",
@@ -57,7 +58,7 @@ function b() {
 	}, []), e;
 }
 var x = ({ store: g, placement: _, max: x, duration: S, gap: C, label: w, hotkey: T, showProgress: E, toneLabels: D, closeLabel: O, queuedLabel: k, className: A }) => {
-	let j = d(g.subscribe, g.getSnapshot, g.getServerSnapshot), M = c(() => j.slice(0, Math.max(1, x)), [j, x]), N = j.length - M.length, P = l(null), F = l(/* @__PURE__ */ new Map()), I = l(null), [L, R] = u(!1), [z, B] = u(!1), V = b(), H = L || z || V, { polite: U, assertive: W } = a(M, D), G = o((e, t) => {
+	let j = d(g.subscribe, g.getSnapshot, g.getServerSnapshot), M = c(() => j.slice(0, Math.max(1, x)), [j, x]), N = j.length - M.length, P = l(null), F = l(/* @__PURE__ */ new Map()), I = l(null), [L, R] = u(!1), [z, B] = u(!1), V = b(), H = L || z || V, { polite: U, assertive: W } = i(M, D), G = o((e, t) => {
 		t ? F.current.set(e, t) : F.current.delete(e);
 	}, []), K = o(() => Array.from(P.current?.querySelectorAll("li[data-state=\"open\"]") ?? []), []), q = o((e) => {
 		let t = F.current.get(e), n = Array.from(P.current?.querySelectorAll("li[data-toast-id]") ?? []), r = t ? n.indexOf(t) : -1, i = (e) => e.dataset.state === "open", a = n.slice(r + 1).find(i) ?? n.slice(0, Math.max(0, r)).reverse().find(i);
@@ -86,23 +87,23 @@ var x = ({ store: g, placement: _, max: x, duration: S, gap: C, label: w, hotkey
 		t && !e.currentTarget.contains(t) && (I.current = t);
 	}, Y = (e) => {
 		let t = e.relatedTarget;
-		(!t || !e.currentTarget.contains(t)) && B(!1);
+		t && e.currentTarget.contains(t) || B(!1);
 	}, X = y(T), Z = _.startsWith("top") ? "top" : "bottom";
 	return /* @__PURE__ */ f(t, { children: /* @__PURE__ */ p("section", {
 		ref: P,
 		"aria-label": X ? `${w} (${X})` : w,
 		tabIndex: -1,
-		className: e(r.viewport, m[_], h[C], A),
+		className: e(a.viewport, m[_], h[C], A),
 		"data-side": Z,
 		"data-paused": H || void 0,
 		onFocus: J,
 		onBlur: Y,
 		children: [
 			/* @__PURE__ */ f("ol", {
-				className: r.list,
+				className: a.list,
 				onPointerEnter: () => R(!0),
 				onPointerLeave: () => R(!1),
-				children: M.map((e) => /* @__PURE__ */ f(i, {
+				children: M.map((e) => /* @__PURE__ */ f(r, {
 					record: e,
 					store: g,
 					paused: H,
@@ -115,7 +116,7 @@ var x = ({ store: g, placement: _, max: x, duration: S, gap: C, label: w, hotkey
 				}, e.id))
 			}),
 			N > 0 && /* @__PURE__ */ f("p", {
-				className: r.queued,
+				className: a.queued,
 				children: k(N)
 			}),
 			/* @__PURE__ */ f(n, {
@@ -133,5 +134,4 @@ var x = ({ store: g, placement: _, max: x, duration: S, gap: C, label: w, hotkey
 		]
 	}) });
 };
-//#endregion
 export { x as ToastViewport, y as formatHotkey };

package/dist/components/feedback/Toast/toastStore.mjs

@@ -1,5 +1,5 @@
 import { isValidElement as e } from "react";
-//#region src/components/feedback/Toast/toastStore.ts
+// src/components/feedback/Toast/toastStore.ts
 var t = [], n = 0;
 function r() {
 	let e = t, r = /* @__PURE__ */ new Set(), i = (t) => {
@@ -82,5 +82,4 @@ function s(e) {
 	}, n;
 }
 var c = r(), l = s(c);
-//#endregion
 export { s as createToastApi, r as createToastStore, l as toast, c as toastStore };

package/dist/components/feedback/Toast/toastTiming.cjs.js

@@ -1 +1 @@
-let e=require("react");var t=4e3,n=250,r=1e4,i={neutral:``,info:`Info`,success:`Success`,warning:`Warning`,danger:`Error`,loading:`Loading`},a=e=>typeof e==`string`||typeof e==`number`?String(e):``,o=e=>e.split(/\s+/).filter(Boolean).length;function s(e,n){let{duration:i,tone:s,action:c}=e;if(i===1/0||i===void 0&&(s===`loading`||c))return 1/0;let l=o(`${a(e.title)} ${a(e.description)}`),u=Math.max(t+l*250,c?r:0);return Math.max(i??n,u)}function c(e,t){if(e.announcement!==void 0)return e.announcement;let n=[t,a(e.title),a(e.description)].filter(Boolean).join(`. `),r=e.action?.altText;return r?`${n}. ${r}`:n}function l(t,n,r,i){let a=(0,e.useRef)(t),o=(0,e.useRef)(i);o.current=i;let s=(0,e.useRef)(r),c=(0,e.useRef)(t);(s.current!==r||c.current!==t)&&(s.current=r,c.current=t,a.current=t),(0,e.useEffect)(()=>{if(n||!Number.isFinite(a.current))return;let e=Date.now(),i=window.setTimeout(()=>o.current(),Math.max(0,a.current));return()=>{window.clearTimeout(i),s.current===r&&c.current===t&&(a.current-=Date.now()-e)}},[n,r,t])}exports.TOAST_MIN_ACTION_DURATION=r,exports.TOAST_MIN_DURATION=t,exports.TOAST_MS_PER_WORD=n,exports.announcementOf=c,exports.defaultToneLabels=i,exports.resolveDuration=s,exports.textOf=a,exports.usePausableTimer=l;
+"use client";let e=require("react");var t=4e3,n=250,r=1e4,i={neutral:``,info:`Info`,success:`Success`,warning:`Warning`,danger:`Error`,loading:`Loading`},a=e=>typeof e==`string`||typeof e==`number`?String(e):``,o=e=>e.split(/\s+/).filter(Boolean).length;function s(e,n){let{duration:i,tone:s,action:c}=e;if(i===1/0||i===void 0&&(s===`loading`||c))return 1/0;let l=o(`${a(e.title)} ${a(e.description)}`),u=Math.max(t+l*250,c?r:0);return Math.max(i??n,u)}function c(e,t){if(e.announcement!==void 0)return e.announcement;let n=[t,a(e.title),a(e.description)].filter(Boolean).join(`. `),r=e.action?.altText;return r?`${n}. ${r}`:n}function l(t,n,r,i){let a=(0,e.useRef)(t),o=(0,e.useRef)(i);o.current=i;let s=(0,e.useRef)(r),c=(0,e.useRef)(t);(s.current!==r||c.current!==t)&&(s.current=r,c.current=t,a.current=t),(0,e.useEffect)(()=>{if(n||!Number.isFinite(a.current))return;let e=Date.now(),i=window.setTimeout(()=>o.current(),Math.max(0,a.current));return()=>{window.clearTimeout(i),s.current===r&&c.current===t&&(a.current-=Date.now()-e)}},[n,r,t])}exports.TOAST_MIN_ACTION_DURATION=r,exports.TOAST_MIN_DURATION=t,exports.TOAST_MS_PER_WORD=n,exports.announcementOf=c,exports.defaultToneLabels=i,exports.resolveDuration=s,exports.textOf=a,exports.usePausableTimer=l;

package/dist/components/feedback/Toast/toastTiming.mjs

@@ -1,5 +1,6 @@
+"use client";
 import { useEffect as e, useRef as t } from "react";
-//#region src/components/feedback/Toast/toastTiming.ts
+// src/components/feedback/Toast/toastTiming.ts
 var n = 4e3, r = 250, i = 1e4, a = {
 	neutral: "",
 	info: "Info",
@@ -39,5 +40,4 @@ function u(n, r, i, a) {
 		n
 	]);
 }
-//#endregion
 export { i as TOAST_MIN_ACTION_DURATION, n as TOAST_MIN_DURATION, r as TOAST_MS_PER_WORD, l as announcementOf, a as defaultToneLabels, c as resolveDuration, o as textOf, u as usePausableTimer };

package/dist/components/feedback/Toast/useToast.cjs.js

@@ -1 +1 @@
-const e=require("./toastStore.cjs.js");let t=require("react");var n=(0,t.createContext)(null);function r(){let r=(0,t.useContext)(n),i=r?.store??e.toastStore,a=r?.api??e.toast,o=(0,t.useSyncExternalStore)(i.subscribe,i.getSnapshot,i.getServerSnapshot);return{toast:a,dismiss:a.dismiss,update:a.update,promise:a.promise,toasts:o}}exports.ToastContext=n,exports.useToast=r;
+"use client";const e=require("./toastStore.cjs.js");let t=require("react");var n=(0,t.createContext)(null);function r(){let r=(0,t.useContext)(n),i=r?.store??e.toastStore,a=r?.api??e.toast,o=(0,t.useSyncExternalStore)(i.subscribe,i.getSnapshot,i.getServerSnapshot);return{toast:a,dismiss:a.dismiss,update:a.update,promise:a.promise,toasts:o}}exports.ToastContext=n,exports.useToast=r;

package/dist/components/feedback/Toast/useToast.mjs

@@ -1,6 +1,7 @@
+"use client";
 import { toast as e, toastStore as t } from "./toastStore.mjs";
 import { createContext as n, useContext as r, useSyncExternalStore as i } from "react";
-//#region src/components/feedback/Toast/useToast.ts
+// src/components/feedback/Toast/useToast.ts
 var a = n(null);
 function o() {
 	let n = r(a), o = n?.store ?? t, s = n?.api ?? e, c = i(o.subscribe, o.getSnapshot, o.getServerSnapshot);
@@ -12,5 +13,4 @@ function o() {
 		toasts: c
 	};
 }
-//#endregion
 export { a as ToastContext, o as useToast };

package/dist/components/feedback/Toast/useToastAnnouncer.cjs.js

@@ -1 +1 @@
-const e=require("./toastTiming.cjs.js");let t=require("react");var n=150;function r(r,i){let[a,o]=(0,t.useState)([]),[s,c]=(0,t.useState)([]),l=(0,t.useRef)(new Map),u=(0,t.useRef)(new Set);return(0,t.useEffect)(()=>{let t=(e,t)=>{let n=window.setTimeout(()=>{u.current.delete(n),e()},t);u.current.add(n)},a=new Set(r.map(e=>e.id));for(let e of l.current.keys())a.has(e)||l.current.delete(e);for(let a of r){if(a.status!==`open`||l.current.get(a.id)===a.version)continue;l.current.set(a.id,a.version);let r=a.tone??`neutral`,s=a.politeness??(r===`danger`?`assertive`:`polite`);if(s===`off`)continue;let u=e.announcementOf(a,i[r]??e.defaultToneLabels[r]);if(!u)continue;let d={key:`${a.id}-${a.version}`,text:u},f=s===`assertive`?c:o;t(()=>f(e=>[...e,d]),n),t(()=>f(e=>e.filter(e=>e.key!==d.key)),7150)}},[r,i]),(0,t.useEffect)(()=>{let e=u.current,t=l.current;return()=>{e.forEach(e=>window.clearTimeout(e)),e.clear(),t.clear()}},[]),{polite:a,assertive:s}}exports.useToastAnnouncer=r;
+"use client";const e=require("./toastTiming.cjs.js");let t=require("react");var n=150;function r(r,i){let[a,o]=(0,t.useState)([]),[s,c]=(0,t.useState)([]),l=(0,t.useRef)(new Map),u=(0,t.useRef)(new Set);return(0,t.useEffect)(()=>{let t=(e,t)=>{let n=window.setTimeout(()=>{u.current.delete(n),e()},t);u.current.add(n)},a=new Set(r.map(e=>e.id));for(let e of l.current.keys())a.has(e)||l.current.delete(e);for(let a of r){if(a.status!==`open`||l.current.get(a.id)===a.version)continue;l.current.set(a.id,a.version);let r=a.tone??`neutral`,s=a.politeness??(r===`danger`?`assertive`:`polite`);if(s===`off`)continue;let u=e.announcementOf(a,i[r]??e.defaultToneLabels[r]);if(!u)continue;let d={key:`${a.id}-${a.version}`,text:u},f=s===`assertive`?c:o;t(()=>f(e=>[...e,d]),n),t(()=>f(e=>e.filter(e=>e.key!==d.key)),7150)}},[r,i]),(0,t.useEffect)(()=>{let e=u.current,t=l.current;return()=>{e.forEach(e=>window.clearTimeout(e)),e.clear(),t.clear()}},[]),{polite:a,assertive:s}}exports.useToastAnnouncer=r;

package/dist/components/feedback/Toast/useToastAnnouncer.mjs

@@ -1,6 +1,7 @@
+"use client";
 import { announcementOf as e, defaultToneLabels as t } from "./toastTiming.mjs";
 import { useEffect as n, useRef as r, useState as i } from "react";
-//#region src/components/feedback/Toast/useToastAnnouncer.ts
+// src/components/feedback/Toast/useToastAnnouncer.ts
 var a = 150;
 function o(o, s) {
 	let [c, l] = i([]), [u, d] = i([]), f = r(/* @__PURE__ */ new Map()), p = r(/* @__PURE__ */ new Set());
@@ -35,5 +36,4 @@ function o(o, s) {
 		assertive: u
 	};
 }
-//#endregion
 export { o as useToastAnnouncer };

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

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

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

@@ -1,3 +1,4 @@
+"use client";
 import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
 import { useFormReset as t } from "../../../hooks/useFormReset.mjs";
 import { cx as n } from "../../../utils/cx.mjs";
@@ -6,7 +7,7 @@ import { useFieldContext as a, useFieldControl as o } from "../Field/FieldContex
 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
+// src/components/forms/CheckBox/CheckBox.tsx
 var g = {
 	sm: s.sm,
 	md: s.md,
@@ -164,5 +165,4 @@ function S({ value: t, defaultValue: r = [], onValueChange: i, name: c, orientat
 		})]
 	});
 }
-//#endregion
 export { x as CheckBox, S as CheckBoxGroup };

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

@@ -1,4 +1,4 @@
-//#region src/components/forms/CheckBox/CheckBox.module.css
+// 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,
@@ -29,5 +29,4 @@ var e = "_root_1f9i5_35", t = "_sm_1f9i5_59", n = "_md_1f9i5_73", r = "_lg_1f9i5
 	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/ColorPicker/ColorInput.cjs.js

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

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

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

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

@@ -1 +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;
+"use client";const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../../utils/cx.cjs.js"),n=require("../../primitives/Button/Button.cjs.js"),r=require("../../primitives/Icon/icons.cjs.js"),i=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),a=require("../Field/FieldContext.cjs.js"),o=require("../Input/Input.cjs.js"),s=require("./colorUtils.cjs.js"),c=require("./ColorPicker.module.css.cjs.js"),l=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),u=require("../../../i18n/en.cjs.js");let d=require("react"),f=require("react/jsx-runtime");function p(e){let{colors:t}=e.colorPicker;return{...e.colorPicker,describeColor:e=>s.describeColor(e,t),hueName:e=>s.getHueName(e,t)}}var m=p(u.en),h=`#1d4ed8`,g={h:224,s:87,v:85,a:1},_={sm:c.default.sizeSm,md:c.default.sizeMd,lg:c.default.sizeLg},v={panel:c.default.panel,plain:c.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=>s.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:t,defaultValue:n,onValueChange:r,onValueCommit:i,format:a,alpha:o}){let[c,l]=e.useControllableState({value:t,defaultValue:n??h,onChange:r}),u=e=>o?e:{...e,a:1},f=e=>s.formatColor(e,a,{alpha:o}),[p,m]=(0,d.useState)(()=>u(s.parseColor(c)??g)),[_,v]=(0,d.useState)(c),b=(0,d.useRef)(p),x=p;if(c!==_){v(c);let e=s.parseColor(c,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),l(n)},commit:()=>i?.(f(b.current)),fmt:f}}function w({label:e,value:n,max:r,valueText:i,trackStyle:a,checkered:o,interactive:s,disabled:l,readOnly:u,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 t=g.current?.getBoundingClientRect();return!t||t.width<=0?n:y((e-t.left)/t.width,0,1)*r},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 t=S(e,`x`);t&&(e.preventDefault(),x.current=!0,m(t.to===`min`?0:t.to===`max`?r:y(Math.round(n)+t.dx,0,r)))},D=()=>{x.current&&(x.current=!1,h())},O=Math.round(n);return(0,f.jsx)(`div`,{className:c.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:c.default.rail,children:[(0,f.jsx)(`div`,{className:t.cx(c.default.track,o&&c.default.checkered),"aria-hidden":`true`,children:(0,f.jsx)(`div`,{className:c.default.trackFill,style:a})}),(0,f.jsx)(`span`,{ref:_,role:`slider`,tabIndex:l?-1:0,className:c.default.thumb,style:{left:`${y(n,0,r)/r*100}%`},"aria-label":e,"aria-valuemin":0,"aria-valuemax":r,"aria-valuenow":O,"aria-valuetext":i,"aria-orientation":`horizontal`,"aria-disabled":l||void 0,"aria-readonly":u||void 0,...p,"aria-required":void 0,onKeyDown:E,onKeyUp:D})]})})}function T({colors:e,current:t,label:n,disabled:i,readOnly:a,ariaProps:o,withAlpha:l,onSelect:u,describe:p}){let m=(0,d.useRef)([]),h=e.findIndex(e=>s.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(),a||u(e[n])},b=t=>{if(i)return;let n=m.current.findIndex(e=>e===document.activeElement);if(n===-1)return;let r=null;t.key===`ArrowRight`||t.key===`ArrowDown`?r=n+1:t.key===`ArrowLeft`||t.key===`ArrowUp`?r=n-1:t.key===`Home`?r=0:t.key===`End`&&(r=e.length-1),r!==null&&(t.preventDefault(),y(r))},S=(0,d.useId)();return(0,f.jsxs)(`div`,{className:c.default.swatchSection,children:[(0,f.jsx)(`span`,{id:S,className:c.default.swatchCaption,children:n}),(0,f.jsx)(`div`,{role:`radiogroup`,"aria-labelledby":S,"aria-readonly":a||void 0,"aria-disabled":i||void 0,...o,className:c.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)}, ${s.toHex(e,l)}`,tabIndex:t===v?0:-1,disabled:i,className:c.default.swatch,"data-checked":n||void 0,onFocus:()=>_(t),onClick:()=>{a||u(e)},children:[(0,f.jsx)(`span`,{className:c.default.swatchColor,style:{background:x(e)},"aria-hidden":`true`}),n&&(0,f.jsx)(`span`,{className:c.default.swatchCheck,"aria-hidden":`true`,children:(0,f.jsx)(r.CheckIcon,{size:`xs`,strokeWidth:3})})]},`${s.toHex(e)}-${t}`)})})]})}function E(e){let u=l.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(u),...ce},A=a.useFieldContext(),j=a.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=s.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=>s.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=s.parseColor(t.sRGBHex,R.current.h);if(!n)return;ze({...n,a:R.current.a}),we(k.eyeDropperPicked(`${k.describeColor(n)}, ${s.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:t.cx(c.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:c.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:t.cx(c.default.thumb,c.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:c.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:c.default.sliderRow,children:[(0,f.jsx)(`span`,{className:t.cx(c.default.preview,c.default.checkered),"aria-hidden":`true`,children:(0,f.jsx)(`span`,{className:c.default.previewFill})}),(0,f.jsxs)(`div`,{className:c.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:c.default.inputRow,children:[ne&&xe&&(0,f.jsx)(n.IconButton,{"aria-label":k.eyeDropper,variant:`ghost`,tone:`neutral`,size:P,disabled:!F,onClick:Be,children:(0,f.jsx)(r.EyeDropperIcon,{size:`sm`})}),(0,f.jsxs)(`span`,{id:U,className:c.default.formatTag,children:[(0,f.jsxs)(i.VisuallyHidden,{children:[k.input,`, `]}),D.toUpperCase()]}),(0,f.jsx)(o.Input,{id:be,className:c.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:t.cx(c.default.inputSwatch,c.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:c.default.message,"aria-live":`polite`,children:Ie&&(0,f.jsxs)(`p`,{id:ye,className:c.default.error,children:[(0,f.jsx)(r.ErrorIcon,{size:`sm`,className:c.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=s.colorsEqual,exports.defaultColorPickerLabels=m,exports.describeColor=s.describeColor,exports.formatColor=s.formatColor,exports.getHueName=s.getHueName,exports.getLuminance=s.getLuminance,exports.hslToHsv=s.hslToHsv,exports.hsvToHsl=s.hsvToHsl,exports.hsvToRgb=s.hsvToRgb,exports.isValidColor=s.isValidColor,exports.parseColor=s.parseColor,exports.rgbToHsv=s.rgbToHsv,exports.toHex=s.toHex;