@jfrader/ui 0.5.0 → 0.5.1

package/dist/popover-CErIw2q3.js

@@ -0,0 +1,125 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { t as n } from "./use-controlled-state-DpeVQZNR.js";
+import { n as r } from "./surface-DZ4d-2aL.js";
+import { t as i } from "./trigger-style-B1KVC8O1.js";
+import { a, i as o } from "./overlay-layer-qEbpEtb8.js";
+import { t as s } from "./overlay-portal-C4JZFq2M.js";
+import { t as c } from "./use-overlay-floating-Bx2jBKAA.js";
+import { createContext as l, useContext as u, useEffect as d, useMemo as f, useRef as p, useState as m } from "react";
+import { vars as h } from "@jfrader/tokens/vars";
+import { jsx as g } from "@emotion/react/jsx-runtime";
+import { FloatingFocusManager as _, useClick as v, useInteractions as y, useMergeRefs as b, useRole as x } from "@floating-ui/react";
+//#region src/components/popover/popover.tsx
+var S = l(null);
+function C(e) {
+	let t = u(S);
+	if (!t) throw Error(`Popover.${e} must be rendered inside <Popover>.`);
+	return t;
+}
+var w = e({
+	...r,
+	borderRadius: h.radius.lg,
+	boxShadow: h.shadow.overlay,
+	padding: h.space[4],
+	minInlineSize: "200px",
+	maxInlineSize: "min(360px, calc(100vw - 32px))",
+	fontSize: h.textSize.sm,
+	overflowY: "auto"
+});
+function T({ nodeId: e, open: t, defaultOpen: r = !1, onOpenChange: i, placement: o = "bottom", children: s }) {
+	let [l = !1, u] = n(t, r, i), h = p(!1), [_, b] = m(), { refs: C, floatingStyles: w, context: T } = c({
+		open: l,
+		placement: o,
+		nodeId: e,
+		onAvailableSize: ({ height: e }) => b(Math.max(0, e)),
+		onOpenChange: (e, t, n) => {
+			e || (h.current = n === "escape-key"), u(e);
+		}
+	});
+	d(() => {
+		!l && h.current && (h.current = !1, C.domReference.current?.focus());
+	}, [l, C]);
+	let E = v(T), D = a(T, "container"), O = x(T, { role: "dialog" }), { getReferenceProps: k, getFloatingProps: A } = y([
+		E,
+		...D,
+		O
+	]), j = f(() => ({
+		open: l,
+		refs: C,
+		floatingContext: T,
+		floatingStyles: {
+			...w,
+			maxBlockSize: _
+		},
+		getReferenceProps: k,
+		getFloatingProps: A
+	}), [
+		l,
+		C,
+		T,
+		w,
+		_,
+		k,
+		A
+	]);
+	return /* @__PURE__ */ g(S.Provider, {
+		value: j,
+		children: s
+	});
+}
+function E(e) {
+	return /* @__PURE__ */ g(o, { children: (t) => /* @__PURE__ */ g(T, {
+		...e,
+		nodeId: t
+	}) });
+}
+E.displayName = "Popover";
+function D({ ref: e, className: n, sx: r, ...a }) {
+	let { refs: o, getReferenceProps: s } = C("Trigger"), c = b([o.setReference, e]);
+	return /* @__PURE__ */ g(t, {
+		className: n,
+		styles: i,
+		sx: r,
+		children: (e) => /* @__PURE__ */ g("button", {
+			type: "button",
+			...s(a),
+			ref: c,
+			"data-ui": "popover-trigger",
+			className: e
+		})
+	});
+}
+D.displayName = "Popover.Trigger";
+function O({ ref: e, style: n, className: r, sx: i, ...a }) {
+	let { open: o, refs: c, floatingContext: l, floatingStyles: u, getFloatingProps: d } = C("Content"), f = b([c.setFloating, e]);
+	return o ? /* @__PURE__ */ g(s, { children: /* @__PURE__ */ g(_, {
+		context: l,
+		modal: !1,
+		initialFocus: -1,
+		returnFocus: !1,
+		closeOnFocusOut: !1,
+		children: /* @__PURE__ */ g(t, {
+			className: r,
+			styles: w,
+			sx: i,
+			children: (e) => /* @__PURE__ */ g("div", {
+				...d(a),
+				ref: f,
+				"data-ui": "popover",
+				style: {
+					...n,
+					...u
+				},
+				className: e
+			})
+		})
+	}) }) : null;
+}
+O.displayName = "Popover.Content";
+var k = Object.assign(E, {
+	Trigger: D,
+	Content: O
+});
+//#endregion
+export { k as t };

package/dist/popover.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Popover } from "./popover-QHcEvf9c.js";
+export { t as Popover } from "./popover-CErIw2q3.js";

package/dist/{progress-CbOWBUdA.js → progress-DAQkfhPd.js}

@@ -66,7 +66,7 @@ function b({ ref: e, value: t, max: r = p, label: i, getValueLabel: c, slotProps
 			"aria-valuemin": 0,
 			"aria-valuemax": T,
 			"aria-valuenow": w,
-			"aria-valuetext": w === void 0 ? void 0 : c?.(w, T),
+			"aria-valuetext": b["aria-valuetext"] ?? (w === void 0 ? void 0 : c?.(w, T)),
 			className: t,
 			children: [S && /* @__PURE__ */ l("span", {
 				id: x,

package/dist/progress.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Progress } from "./progress-CbOWBUdA.js";
+export { t as Progress } from "./progress-DAQkfhPd.js";

package/dist/{radio-cards-D2QZENI_.js → radio-cards-Cu9cBssN.js}

@@ -334,76 +334,77 @@ function J({ ref: e, value: n, defaultValue: r, onValueChange: o, name: s, requi
 	});
 }
 J.displayName = "RadioCards";
-function Y({ ref: e, value: n, label: r, description: i, meta: c, icon: l, disabledReason: u, disabled: d, required: p, onChange: m, slotProps: h, className: g, sx: _, "aria-label": b, "aria-labelledby": x, "aria-describedby": S, "aria-invalid": C, ...w }) {
-	let T = k("Item"), E = f(), D = T.disabled || d, O = D && a(u) ? u : i, A = a(r), M = a(O);
+function Y({ ref: e, value: n, label: r, description: i, meta: c, icon: l, disabledReason: u, dir: d, disabled: p, required: m, onChange: h, slotProps: g, className: _, sx: b, "aria-label": x, "aria-labelledby": S, "aria-describedby": C, "aria-invalid": w, ...T }) {
+	let E = k("Item"), D = f(), O = E.disabled || p, A = O && a(u) ? u : i, M = a(r), N = a(A);
 	return /* @__PURE__ */ v(t, {
-		className: g,
+		className: _,
 		styles: [o, P],
-		sx: _,
+		sx: b,
 		children: (t) => /* @__PURE__ */ y("label", {
+			dir: d,
 			"data-ui": "radio-cards-item",
-			"data-state": T.value === n ? "checked" : "unchecked",
+			"data-state": E.value === n ? "checked" : "unchecked",
 			className: t,
 			children: [/* @__PURE__ */ v("input", {
-				...w,
+				...T,
 				ref: e,
 				type: "radio",
 				"data-ui": "radio-cards-input",
-				name: T.name,
+				name: E.name,
 				value: n,
-				checked: T.value === n,
-				disabled: D,
-				required: T.required || p,
-				"aria-label": b,
-				"aria-labelledby": j(x, !b && A && `${E}-label`),
-				"aria-describedby": j(S, M && `${E}-description`),
-				"aria-invalid": T.invalid ? !0 : C,
+				checked: E.value === n,
+				disabled: O,
+				required: E.required || m,
+				"aria-label": x,
+				"aria-labelledby": j(S, !x && M && `${D}-label`),
+				"aria-describedby": j(C, N && `${D}-description`),
+				"aria-invalid": E.invalid ? !0 : w,
 				onChange: (e) => {
-					m?.(e), e.currentTarget.checked && T.requestChange(n);
+					h?.(e), e.currentTarget.checked && E.requestChange(n);
 				},
 				css: [s, F]
 			}), /* @__PURE__ */ y("span", {
-				...h?.control,
+				...g?.control,
 				"data-ui": "radio-cards-control",
 				css: [
 					I,
-					L[T.size],
-					h?.control?.css
+					L[E.size],
+					g?.control?.css
 				],
 				children: [
 					/* @__PURE__ */ v("span", {
-						...h?.indicator,
+						...g?.indicator,
 						"aria-hidden": "true",
 						"data-ui": "radio-cards-indicator",
-						css: [R, h?.indicator?.css]
+						css: [R, g?.indicator?.css]
 					}),
 					a(l) && /* @__PURE__ */ v("span", {
-						...h?.icon,
+						...g?.icon,
 						"aria-hidden": "true",
 						"data-ui": "radio-cards-icon",
-						css: [U, h?.icon?.css],
+						css: [U, g?.icon?.css],
 						children: l
 					}),
-					(A || M) && /* @__PURE__ */ y("span", {
+					(M || N) && /* @__PURE__ */ y("span", {
 						css: z,
-						children: [A && /* @__PURE__ */ v("span", {
-							...h?.label,
-							id: `${E}-label`,
+						children: [M && /* @__PURE__ */ v("span", {
+							...g?.label,
+							id: `${D}-label`,
 							"data-ui": "radio-cards-item-label",
-							css: [B, h?.label?.css],
+							css: [B, g?.label?.css],
 							children: r
-						}), M && /* @__PURE__ */ v("span", {
-							...h?.description,
-							id: `${E}-description`,
+						}), N && /* @__PURE__ */ v("span", {
+							...g?.description,
+							id: `${D}-description`,
 							"data-ui": "radio-cards-item-description",
-							css: [V, h?.description?.css],
-							children: O
+							css: [V, g?.description?.css],
+							children: A
 						})]
 					}),
 					a(c) && /* @__PURE__ */ v("span", {
-						...h?.meta,
+						...g?.meta,
 						"data-ui": "radio-cards-meta",
-						css: [H, h?.meta?.css],
+						css: [H, g?.meta?.css],
 						children: c
 					})
 				]

package/dist/radio-cards.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as RadioCards } from "./radio-cards-D2QZENI_.js";
+export { t as RadioCards } from "./radio-cards-Cu9cBssN.js";

package/dist/{radio-group-E6mMRgo7.js → radio-group-TIK0-iPX.js}

@@ -78,6 +78,7 @@ function E({ ref: e, value: n, defaultValue: r, onValueChange: a, name: o, disab
 				ref: e,
 				role: "radiogroup",
 				"aria-orientation": c,
+				"aria-disabled": s ? !0 : d["aria-disabled"],
 				"data-ui": "radio-group-root",
 				"data-orientation": c,
 				className: t
@@ -86,12 +87,12 @@ function E({ ref: e, value: n, defaultValue: r, onValueChange: a, name: o, disab
 	});
 }
 E.displayName = "RadioGroup";
-function D({ ref: e, value: n, label: r, description: i, disabled: u, onChange: d, slotProps: p, className: m, sx: _, "aria-labelledby": y, "aria-describedby": b, ...E }) {
-	let { value: D, setValue: O, name: k, disabled: A } = v("Radio"), j = A || u, M = f(), N = `${M}-label`, P = `${M}-description`, F = a(r), I = a(i), L = [y, F && N].filter(Boolean).join(" ") || void 0, R = [b, I && P].filter(Boolean).join(" ") || void 0, z = [m, p?.root?.className].filter(Boolean).join(" ") || void 0, B = (e) => {
-		d?.(e), e.currentTarget.checked && O(n);
+function D({ ref: e, value: n, label: r, description: i, disabled: u, onChange: d, slotProps: p, className: m, sx: _, dir: y, "aria-labelledby": b, "aria-describedby": E, ...D }) {
+	let { value: O, setValue: k, name: A, disabled: j } = v("Radio"), M = j || u, N = f(), P = `${N}-label`, F = `${N}-description`, I = a(r), L = a(i), R = [b, I && P].filter(Boolean).join(" ") || void 0, z = [E, L && F].filter(Boolean).join(" ") || void 0, B = [m, p?.root?.className].filter(Boolean).join(" ") || void 0, V = (e) => {
+		d?.(e), e.currentTarget.checked && k(n);
 	};
 	return /* @__PURE__ */ h(t, {
-		className: z,
+		className: B,
 		styles: [
 			c,
 			x,
@@ -101,21 +102,23 @@ function D({ ref: e, value: n, label: r, description: i, disabled: u, onChange:
 		sx: _,
 		children: (t) => /* @__PURE__ */ g("label", {
 			"data-ui": "radio-group-radio",
+			dir: y,
 			className: t,
 			children: [/* @__PURE__ */ g("span", {
 				css: [o, S],
 				children: [
 					/* @__PURE__ */ h("input", {
-						...E,
+						...D,
 						ref: e,
 						type: "radio",
-						name: k,
+						name: A,
 						value: n,
-						checked: D === n,
-						disabled: j,
-						"aria-labelledby": L,
-						"aria-describedby": R,
-						onChange: B,
+						dir: y,
+						checked: O === n,
+						disabled: M,
+						"aria-labelledby": R,
+						"aria-describedby": z,
+						onChange: V,
 						css: l
 					}),
 					/* @__PURE__ */ h("span", {
@@ -123,15 +126,15 @@ function D({ ref: e, value: n, label: r, description: i, disabled: u, onChange:
 						className: p?.control?.className,
 						css: [C, p?.control?.css]
 					}),
-					F && /* @__PURE__ */ h("span", {
-						id: N,
+					I && /* @__PURE__ */ h("span", {
+						id: P,
 						className: p?.label?.className,
 						css: [w, p?.label?.css],
 						children: r
 					})
 				]
-			}), I && /* @__PURE__ */ h("span", {
-				id: P,
+			}), L && /* @__PURE__ */ h("span", {
+				id: F,
 				className: p?.description?.className,
 				css: [T, p?.description?.css],
 				children: i

package/dist/radio-group.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as RadioGroup } from "./radio-group-E6mMRgo7.js";
+export { t as RadioGroup } from "./radio-group-TIK0-iPX.js";

package/dist/{resizable-panels-BhjUVXZZ.js → resizable-panels-DUpQEpwG.js}

@@ -116,7 +116,8 @@ var re = 80, ie = 16, ae = 64, oe = 44, se = 90, x = .5, ce = .5, le = 160, ue =
 	color: y.color.text,
 	"&::before": {
 		content: "\"\"",
-		borderBlock: `${y.space[1]} solid transparent`
+		borderBlock: `${y.space[1]} solid transparent`,
+		forcedColorAdjust: "none"
 	},
 	"&[data-side=\"start\"]::before": { borderInlineStart: `${y.space[1]} solid currentColor` },
 	"&[data-side=\"end\"]::before": { borderInlineEnd: `${y.space[1]} solid currentColor` },
@@ -408,7 +409,7 @@ function B({ ref: e, children: n, value: r, defaultValue: i, onValueChange: s, o
 			role: "separator",
 			tabIndex: u ? -1 : 0,
 			"aria-orientation": "vertical",
-			"aria-controls": n.id,
+			"aria-controls": [t?.["aria-controls"], n.id].filter(Boolean).join(" "),
 			"aria-valuenow": a,
 			"aria-valuemin": o,
 			"aria-valuemax": s,

package/dist/resizable-panels.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as ResizablePanels } from "./resizable-panels-BhjUVXZZ.js";
+export { t as ResizablePanels } from "./resizable-panels-DUpQEpwG.js";

package/dist/{search-field-IxF0IJXm.js → search-field-DMvho0KQ.js}

@@ -231,7 +231,7 @@ function T({ ref: e, value: n, defaultValue: r = "", onValueChange: i, label: f,
 								R?.(e), !I && !L && X(e.currentTarget.value);
 							},
 							onKeyDown: (e) => {
-								z?.(e), !(e.defaultPrevented || e.key !== "Escape" || e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229 || Y === "") && (e.preventDefault(), D && !I && !L && $());
+								z?.(e), !(e.defaultPrevented || e.key !== "Escape" || e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229 || Y === "" || !D || I || L) && (e.preventDefault(), $());
 							}
 						}),
 						/* @__PURE__ */ p("span", {
@@ -241,7 +241,7 @@ function T({ ref: e, value: n, defaultValue: r = "", onValueChange: i, label: f,
 								type: "button",
 								disabled: I,
 								"data-enter": Q.current ? "" : void 0,
-								"aria-label": O?.clear ?? S.clear,
+								"aria-label": O?.clear || S.clear,
 								"aria-controls": W.id,
 								onClick: $,
 								className: j?.clear?.className,

package/dist/search-field.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as SearchField } from "./search-field-IxF0IJXm.js";
+export { t as SearchField } from "./search-field-DMvho0KQ.js";

package/dist/{segmented-control-yO1K1nbi.js → segmented-control-8ZUGnsZm.js}

@@ -85,7 +85,8 @@ var E = u(null), D = {
 	[i]: { transitionDuration: "0s" },
 	[r]: { "&[aria-checked=\"true\"]": {
 		borderColor: "Highlight",
-		color: "CanvasText"
+		color: "CanvasText",
+		textDecoration: "underline"
 	} }
 }), N = {
 	sm: e({

package/dist/segmented-control.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as SegmentedControl } from "./segmented-control-yO1K1nbi.js";
+export { t as SegmentedControl } from "./segmented-control-8ZUGnsZm.js";

package/dist/{select-n_H52W1Z.js → select-D5rhJ8gi.js}

@@ -2,11 +2,11 @@
 import { r as e, t } from "./sx-Dx9JUKp5.js";
 import { t as n } from "./use-controlled-state-DpeVQZNR.js";
 import { t as r } from "./trigger-style-B1KVC8O1.js";
-import { t as i } from "./overlay-layer-SeUyyEPD.js";
+import { t as i } from "./overlay-layer-qEbpEtb8.js";
 import { a, i as o, n as s, o as c, r as l, s as u, t as d } from "./listbox-style-WX-RASp1.js";
 import { a as f, r as p, t as m } from "./collection-registry-k6JcD3Jr.js";
 import { t as h } from "./overlay-portal-C4JZFq2M.js";
-import { t as g } from "./use-overlay-floating-DvJifLpF.js";
+import { t as g } from "./use-overlay-floating-Bx2jBKAA.js";
 import { createContext as _, useContext as v, useId as y, useLayoutEffect as b, useMemo as x, useRef as S, useState as C } from "react";
 import { vars as w } from "@jfrader/tokens/vars";
 import { jsx as T, jsxs as E } from "@emotion/react/jsx-runtime";
@@ -29,6 +29,7 @@ function B() {
 var V = e({
 	justifyContent: "flex-start",
 	minInlineSize: "180px",
+	maxInlineSize: "100%",
 	"&[aria-expanded=\"true\"]": { backgroundColor: w.color.surfaceHover }
 }), H = e({
 	overflow: "hidden",

package/dist/select.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Select } from "./select-n_H52W1Z.js";
+export { t as Select } from "./select-D5rhJ8gi.js";