@jfrader/ui 0.5.0 → 0.6.0

package/dist/{segmented-control-yO1K1nbi.js → segmented-control-DCh-4ca-.js}

@@ -1,7 +1,8 @@
 'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { n } from "./focus-ring-BK5W5_NY.js";
-import { n as r, r as i } from "./media-8yrN85VT.js";
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t } from "./focus-ring-BK5W5_NY.js";
+import { n, r } from "./media-8yrN85VT.js";
+import { t as i } from "./sx-BJXJ2xJK.js";
 import { n as a, r as o, t as s } from "./roving-focus-CYlo_Kf8.js";
 import { t as c } from "./use-controlled-state-DpeVQZNR.js";
 import { t as l } from "./renderable-DzcIj1Lo.js";
@@ -28,7 +29,7 @@ var E = u(null), D = {
 	borderRadius: y.radius.md,
 	backgroundColor: y.color.surfaceInset,
 	fontFamily: y.font.sans,
-	[r]: { borderColor: "CanvasText" }
+	[n]: { borderColor: "CanvasText" }
 }), j = e({
 	display: "flex",
 	position: "relative",
@@ -41,7 +42,7 @@ var E = u(null), D = {
 	borderInlineEnd: "1px solid transparent",
 	"&[data-overflow-start=\"true\"]": { borderInlineStartColor: y.color.borderControl },
 	"&[data-overflow-end=\"true\"]": { borderInlineEndColor: y.color.borderControl },
-	[r]: {
+	[n]: {
 		"&[data-overflow-start=\"true\"]": { borderInlineStartColor: "CanvasText" },
 		"&[data-overflow-end=\"true\"]": { borderInlineEndColor: "CanvasText" }
 	}
@@ -77,15 +78,16 @@ var E = u(null), D = {
 		borderColor: y.color.borderControl,
 		color: y.color.text
 	},
-	"&:focus-visible": { ...n },
+	"&:focus-visible": { ...t },
 	"&:disabled": {
 		opacity: .55,
 		cursor: "not-allowed"
 	},
-	[i]: { transitionDuration: "0s" },
-	[r]: { "&[aria-checked=\"true\"]": {
+	[r]: { transitionDuration: "0s" },
+	[n]: { "&[aria-checked=\"true\"]": {
 		borderColor: "Highlight",
-		color: "CanvasText"
+		color: "CanvasText",
+		textDecoration: "underline"
 	} }
 }), N = {
 	sm: e({
@@ -105,7 +107,7 @@ var E = u(null), D = {
 		color: y.color.accentContrast,
 		borderColor: y.color.accentContrast
 	},
-	[r]: { "&[aria-checked=\"true\"]": {
+	[n]: { "&[aria-checked=\"true\"]": {
 		color: "CanvasText",
 		borderColor: "Highlight"
 	} }
@@ -115,7 +117,7 @@ var E = u(null), D = {
 	zIndex: -1,
 	borderRadius: "inherit",
 	pointerEvents: "none",
-	[r]: {
+	[n]: {
 		backgroundColor: "Canvas",
 		boxShadow: "none"
 	}
@@ -154,8 +156,8 @@ function L({ ref: e, variant: t, slotProps: n, style: r, ...i }) {
 	});
 }
 var R = w.create(L);
-function z({ ref: e, value: n, defaultValue: r, onValueChange: i, disabled: l = !1, size: u = "md", variant: d = "soft", label: y, onOptionIntent: x, slotProps: w, className: k, sx: M, children: N, onKeyDown: P, ...F }) {
-	let [I, L] = c(n, r, i), [R, z] = v(null), [B, V] = v(), H = _(null), U = _(null);
+function z({ ref: e, value: t, defaultValue: n, onValueChange: r, disabled: l = !1, size: u = "md", variant: d = "soft", label: y, onOptionIntent: x, slotProps: w, className: k, sx: M, children: N, onKeyDown: P, ...F }) {
+	let [I, L] = c(t, n, r), [R, z] = v(null), [B, V] = v(), H = _(null), U = _(null);
 	m(e, () => H.current, []);
 	let W = p(), G = T(), K = _(!1);
 	h(() => {
@@ -235,7 +237,7 @@ function z({ ref: e, value: n, defaultValue: r, onValueChange: i, disabled: l =
 			reducedMotion: "user",
 			children: /* @__PURE__ */ b(S, {
 				id: W,
-				children: /* @__PURE__ */ b(t, {
+				children: /* @__PURE__ */ b(i, {
 					className: k,
 					styles: A,
 					sx: M,
@@ -266,11 +268,11 @@ function z({ ref: e, value: n, defaultValue: r, onValueChange: i, disabled: l =
 	});
 }
 z.displayName = "SegmentedControl";
-function B({ ref: e, value: n, accessory: r, children: i, disabled: a, className: o, sx: s, onClick: c, onFocus: u, onPointerEnter: f, "aria-labelledby": m, "aria-describedby": h, ...g }) {
+function B({ ref: e, value: t, accessory: n, children: r, disabled: a, className: o, sx: s, onClick: c, onFocus: u, onPointerEnter: f, "aria-labelledby": m, "aria-describedby": h, ...g }) {
 	let _ = d(E);
 	if (!_) throw Error("SegmentedControl.Item must be rendered inside <SegmentedControl>.");
-	let v = p(), y = _.disabled || a, S = _.value === n, C = l(i), w = l(r);
-	return /* @__PURE__ */ b(t, {
+	let v = p(), y = _.disabled || a, S = _.value === t, C = l(r), w = l(n);
+	return /* @__PURE__ */ b(i, {
 		className: o,
 		styles: [
 			M,
@@ -278,28 +280,28 @@ function B({ ref: e, value: n, accessory: r, children: i, disabled: a, className
 			_.variant === "solid" && P
 		],
 		sx: s,
-		children: (t) => /* @__PURE__ */ x("button", {
+		children: (i) => /* @__PURE__ */ x("button", {
 			...g,
 			ref: e,
 			type: "button",
 			role: "radio",
 			"data-ui": "segmented-control-item",
-			"data-value": n,
+			"data-value": t,
 			"aria-checked": S,
 			disabled: y,
-			tabIndex: !y && _.tabStop === n ? 0 : -1,
+			tabIndex: !y && _.tabStop === t ? 0 : -1,
 			"aria-labelledby": [m, C && `${v}-label`].filter(Boolean).join(" ") || void 0,
 			"aria-describedby": [h, w && `${v}-accessory`].filter(Boolean).join(" ") || void 0,
 			onClick: (e) => {
-				c?.(e), !e.defaultPrevented && !y && _.requestChange(n);
+				c?.(e), !e.defaultPrevented && !y && _.requestChange(t);
 			},
 			onFocus: (e) => {
-				u?.(e), y || (_.setFocused(n), _.onOptionIntent?.(n));
+				u?.(e), y || (_.setFocused(t), _.onOptionIntent?.(t));
 			},
 			onPointerEnter: (e) => {
-				f?.(e), y || _.onOptionIntent?.(n);
+				f?.(e), y || _.onOptionIntent?.(t);
 			},
-			className: t,
+			className: i,
 			children: [
 				S && /* @__PURE__ */ b(R, {
 					variant: _.variant,
@@ -310,11 +312,11 @@ function B({ ref: e, value: n, accessory: r, children: i, disabled: a, className
 				}),
 				C && /* @__PURE__ */ b("span", {
 					id: `${v}-label`,
-					children: i
+					children: r
 				}),
 				w && /* @__PURE__ */ b("span", {
 					id: `${v}-accessory`,
-					children: r
+					children: n
 				})
 			]
 		})

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-DCh-4ca-.js";

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

@@ -1,12 +1,13 @@
 'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { i as e } from "./css-BYJhdGh-.js";
+import { t } from "./sx-BJXJ2xJK.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 { 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 r } from "./trigger-style-CtOrdPk4.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-DNOxAulu.js";
+import { t as f } from "./overlay-portal-C9igMHnC.js";
+import { t as p } from "./use-overlay-floating-Bx2jBKAA.js";
+import { a as m, r as h, t as g } from "./collection-registry-k6JcD3Jr.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 +30,7 @@ function B() {
 var V = e({
 	justifyContent: "flex-start",
 	minInlineSize: "180px",
+	maxInlineSize: "100%",
 	"&[aria-expanded=\"true\"]": { backgroundColor: w.color.surfaceHover }
 }), H = e({
 	overflow: "hidden",
@@ -37,8 +39,8 @@ var V = e({
 	"&[data-placeholder]": { color: w.color.textMuted }
 });
 function U({ value: e, defaultValue: t, onValueChange: r, open: i, defaultOpen: a = !1, onOpenChange: o, placement: s = "bottom-start", disabled: c = !1, name: l, children: u }) {
-	let d = y(), [p, m] = n(e, t, r), [h = !1, _] = n(i, a, o), [v, b] = C(null), [w, D] = C(!1), [M, P] = f(), [I, R] = C(null), z = S([]), B = S([]), V = S(null);
-	!h && w && (D(!1), b(null));
+	let d = y(), [f, h] = n(e, t, r), [g = !1, _] = n(i, a, o), [v, b] = C(null), [w, D] = C(!1), [M, P] = m(), [I, R] = C(null), z = S([]), B = S([]), V = S(null);
+	!g && w && (D(!1), b(null));
 	let { valuesByIndex: H, disabledIndices: U } = x(() => {
 		let e = [], t = /* @__PURE__ */ new Set();
 		return M.forEach((n, r) => {
@@ -47,8 +49,8 @@ function U({ value: e, defaultValue: t, onValueChange: r, open: i, defaultOpen:
 			valuesByIndex: e,
 			disabledIndices: t
 		};
-	}, [M]), W = p === void 0 ? void 0 : M.get(p), G = W && W.index !== -1 ? W.index : null, { refs: K, floatingStyles: q, context: J } = g({
-		open: h,
+	}, [M]), W = f === void 0 ? void 0 : M.get(f), G = W && W.index !== -1 ? W.index : null, { refs: K, floatingStyles: q, context: J } = p({
+		open: g,
 		placement: s,
 		onOpenChange: (e) => _(e)
 	}), Y = O(J), X = N(J, { role: "listbox" }), ee = k(J, {
@@ -71,13 +73,13 @@ function U({ value: e, defaultValue: t, onValueChange: r, open: i, defaultOpen:
 		te
 	]), ne = x(() => {
 		let e = (e) => {
-			m(e), _(!1);
+			h(e), _(!1);
 		};
 		return {
 			baseId: d,
-			open: h,
+			open: g,
 			disabled: c,
-			selectedValue: p,
+			selectedValue: f,
 			activeIndex: v,
 			options: M,
 			triggerLabelling: I,
@@ -94,7 +96,7 @@ function U({ value: e, defaultValue: t, onValueChange: r, open: i, defaultOpen:
 				for (let r = 1; r <= t.length; r += 1) {
 					let i = (n + r) % t.length, a = t[i];
 					if (!(a == null || U.has(i)) && F.compare(a.slice(0, e.length), e) === 0) {
-						b(i), h || (D(!0), _(!0));
+						b(i), g || (D(!0), _(!0));
 						return;
 					}
 				}
@@ -109,9 +111,9 @@ function U({ value: e, defaultValue: t, onValueChange: r, open: i, defaultOpen:
 		};
 	}, [
 		d,
-		h,
+		g,
 		c,
-		p,
+		f,
 		v,
 		M,
 		I,
@@ -122,7 +124,7 @@ function U({ value: e, defaultValue: t, onValueChange: r, open: i, defaultOpen:
 		$,
 		H,
 		U,
-		m,
+		h,
 		_,
 		P
 	]);
@@ -131,7 +133,7 @@ function U({ value: e, defaultValue: t, onValueChange: r, open: i, defaultOpen:
 		children: [u, l !== void 0 && /* @__PURE__ */ T("input", {
 			type: "hidden",
 			name: l,
-			value: p ?? "",
+			value: f ?? "",
 			disabled: c
 		})]
 	});
@@ -204,10 +206,10 @@ function K({ ref: e, placeholder: n, className: r, sx: i, ...a }) {
 }
 K.displayName = "Select.Value";
 function q({ ref: e, style: n, onMouseDown: r, children: i, className: a, sx: o, ...s }) {
-	let { open: l, triggerLabelling: d, refs: f, floatingStyles: p, elementsRef: m, getFloatingProps: g } = z("Content"), _ = M([l ? f.setFloating : null, e]), v = s["aria-labelledby"] !== void 0 || s["aria-label"] !== void 0 ? {} : d?.labelledBy === void 0 ? d?.label === void 0 ? { "aria-labelledby": d?.id } : { "aria-label": d.label } : { "aria-labelledby": d.labelledBy }, y = (e) => {
+	let { open: l, triggerLabelling: d, refs: p, floatingStyles: m, elementsRef: h, getFloatingProps: g } = z("Content"), _ = M([l ? p.setFloating : null, e]), v = s["aria-labelledby"] !== void 0 || s["aria-label"] !== void 0 ? {} : d?.labelledBy === void 0 ? d?.label === void 0 ? { "aria-labelledby": d?.id } : { "aria-label": d.label } : { "aria-labelledby": d.labelledBy }, y = (e) => {
 		r?.(e), e.preventDefault();
 	};
-	return /* @__PURE__ */ T(h, { children: /* @__PURE__ */ T(t, {
+	return /* @__PURE__ */ T(f, { children: /* @__PURE__ */ T(t, {
 		className: a,
 		styles: [u, c],
 		sx: o,
@@ -223,11 +225,11 @@ function q({ ref: e, style: n, onMouseDown: r, children: i, className: a, sx: o,
 			"data-ui": "select-listbox",
 			style: {
 				...n,
-				...p
+				...m
 			},
 			className: e,
 			children: /* @__PURE__ */ T(D, {
-				elementsRef: m,
+				elementsRef: h,
 				children: /* @__PURE__ */ T(R.Provider, {
 					value: !0,
 					children: i
@@ -237,8 +239,8 @@ function q({ ref: e, style: n, onMouseDown: r, children: i, className: a, sx: o,
 	}) });
 }
 q.displayName = "Select.Content";
-function J({ ref: e, value: n, disabled: r = !1, onClick: i, children: c, className: u, sx: f, ...h }) {
-	let { baseId: g, selectedValue: _, activeIndex: v, labelsRef: y, getItemProps: b, selectValue: x, registration: C } = B(), w = S(null), { ref: D, index: O } = p(n, C, w, (e, t) => ({
+function J({ ref: e, value: n, disabled: r = !1, onClick: i, children: c, className: u, sx: f, ...p }) {
+	let { baseId: m, selectedValue: _, activeIndex: v, labelsRef: y, getItemProps: b, selectValue: x, registration: C } = B(), w = S(null), { ref: D, index: O } = h(n, C, w, (e, t) => ({
 		index: e,
 		label: t,
 		disabled: r
@@ -258,8 +260,8 @@ function J({ ref: e, value: n, disabled: r = !1, onClick: i, children: c, classN
 		sx: f,
 		children: (e) => /* @__PURE__ */ E("div", {
 			...b({
-				id: m(g, n),
-				...h,
+				id: g(m, n),
+				...p,
 				onClick: N
 			}),
 			ref: k,

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-SrcQqZjo.js";