@jfrader/ui 0.4.0 → 0.5.0

package/dist/{pagination-DYdwsxwe.js → pagination-DmXZ8E85.js}

@@ -1,7 +1,7 @@
 'use client';
 import { r as e, t } from "./sx-Dx9JUKp5.js";
 import { n } from "./focus-ring-BK5W5_NY.js";
-import { n as r } from "./media-D_eA_I-e.js";
+import { r } from "./media-8yrN85VT.js";
 import { t as i } from "./visually-hidden-BJdvqqvn.js";
 import { useImperativeHandle as a, useLayoutEffect as o, useMemo as s, useRef as c } from "react";
 import { vars as l } from "@jfrader/tokens/vars";

package/dist/pagination.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Pagination } from "./pagination-DYdwsxwe.js";
+export { t as Pagination } from "./pagination-DmXZ8E85.js";

package/dist/password-field-03pWRkuY.js

@@ -0,0 +1,250 @@
+'use client';
+import { r as e } from "./sx-Dx9JUKp5.js";
+import { t } from "./focus-ring-BK5W5_NY.js";
+import { n, r, t as i } from "./media-8yrN85VT.js";
+import { t as a } from "./use-controlled-state-DpeVQZNR.js";
+import { t as o } from "./renderable-DzcIj1Lo.js";
+import { t as s } from "./icon-wrapper-stN8sD7R.js";
+import { t as c } from "./input-control-DmMuAuPS.js";
+import { a as l, i as u, n as ee, r as d, t as f } from "./field-anatomy-COVdNpf5.js";
+import { useEffect as p, useId as m, useRef as h } from "react";
+import { vars as g } from "@jfrader/tokens/vars";
+import { jsx as _, jsxs as v } from "@emotion/react/jsx-runtime";
+import { useMergeRefs as y } from "@floating-ui/react";
+//#region src/components/password-field/password-field.tsx
+var b = { reveal: "Show password" }, x = e({
+	position: "relative",
+	minInlineSize: 0
+}), S = {
+	sm: e({
+		blockSize: g.space[8],
+		paddingInlineStart: g.space[3],
+		paddingInlineEnd: g.space[8],
+		fontSize: g.textSize.sm
+	}),
+	md: e({
+		blockSize: g.space[10],
+		paddingInlineStart: g.space[4],
+		paddingInlineEnd: g.space[10],
+		fontSize: g.textSize.sm
+	}),
+	lg: e({
+		blockSize: g.space[12],
+		paddingInlineStart: g.space[4],
+		paddingInlineEnd: g.space[12],
+		fontSize: g.textSize.md
+	})
+}, C = e({
+	lineHeight: g.lineHeight.base,
+	[i]: { fontSize: g.textSize.md }
+}), w = e({
+	position: "absolute",
+	insetBlock: 0,
+	insetInlineEnd: g.space[1],
+	marginBlock: "auto",
+	display: "inline-grid",
+	placeItems: "center",
+	padding: 0,
+	border: 0,
+	borderRadius: g.radius.sm,
+	backgroundColor: "transparent",
+	color: g.color.textMuted,
+	cursor: "pointer",
+	transitionProperty: "background-color, color, transform",
+	transitionDuration: g.motion.duration.fast,
+	transitionTimingFunction: g.motion.easeStandard,
+	"&:hover:not(:disabled)": {
+		backgroundColor: g.color.surfaceHover,
+		color: g.color.text
+	},
+	"&:active:not(:disabled)": { transform: "scale(0.94)" },
+	"&:focus-visible": t,
+	"&:disabled": {
+		opacity: .55,
+		cursor: "not-allowed"
+	},
+	[r]: {
+		transitionDuration: "0s",
+		"&:active:not(:disabled)": { transform: "none" }
+	},
+	[n]: { "&[aria-pressed=\"true\"]": {
+		backgroundColor: "Highlight",
+		color: "HighlightText"
+	} }
+}), T = {
+	sm: e({
+		inlineSize: g.space[6],
+		blockSize: g.space[6],
+		fontSize: g.textSize.md
+	}),
+	md: e({
+		inlineSize: g.space[8],
+		blockSize: g.space[8],
+		fontSize: g.textSize.lg
+	}),
+	lg: e({
+		inlineSize: g.space[10],
+		blockSize: g.space[10],
+		fontSize: g.textSize.xl
+	})
+}, E = e({
+	"& [data-slash]": {
+		strokeDasharray: "1 2",
+		strokeDashoffset: 1,
+		transitionProperty: "stroke-dashoffset",
+		transitionDuration: g.motion.duration.base,
+		transitionTimingFunction: g.motion.easeStandard
+	},
+	"&[data-state=\"on\"] [data-slash]": { strokeDashoffset: 0 },
+	[r]: { "& [data-slash]": { transitionDuration: "0s" } }
+}), D = "M3 3l18 18";
+function O({ revealed: e }) {
+	let t = `password-field-mask-${m().replace(/[^\w-]/g, "_")}`;
+	return /* @__PURE__ */ v("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 1.75,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"data-state": e ? "on" : "off",
+		css: E,
+		children: [
+			/* @__PURE__ */ v("mask", {
+				id: t,
+				maskUnits: "userSpaceOnUse",
+				x: "0",
+				y: "0",
+				width: "24",
+				height: "24",
+				children: [/* @__PURE__ */ _("rect", {
+					width: "24",
+					height: "24",
+					fill: "white",
+					stroke: "none"
+				}), /* @__PURE__ */ _("path", {
+					d: D,
+					pathLength: 1,
+					stroke: "black",
+					strokeWidth: 5,
+					"data-slash": ""
+				})]
+			}),
+			/* @__PURE__ */ v("g", {
+				mask: `url(#${t})`,
+				children: [/* @__PURE__ */ _("path", { d: "M2.06 12.35a1 1 0 0 1 0-.7 10.75 10.75 0 0 1 19.88 0 1 1 0 0 1 0 .7 10.75 10.75 0 0 1-19.88 0" }), /* @__PURE__ */ _("circle", {
+					cx: "12",
+					cy: "12",
+					r: "3"
+				})]
+			}),
+			/* @__PURE__ */ _("path", {
+				d: D,
+				pathLength: 1,
+				"data-slash": ""
+			})
+		]
+	});
+}
+function k({ ref: e, value: t, defaultValue: n, onChange: r, onValueChange: i, revealed: m, defaultRevealed: g = !1, onRevealedChange: E, label: D, description: k, error: A, size: j = "md", messages: M, revealIcon: N, slotProps: P, className: F, sx: I, dir: L, disabled: R, required: z, form: B, id: V, "aria-labelledby": H, "aria-describedby": U, "aria-invalid": W, ...G }) {
+	let K = l({
+		id: V,
+		description: k,
+		error: A,
+		"aria-describedby": U,
+		"aria-invalid": W
+	}), [q, J, Y] = a(m, g, E), X = q ?? !1, Z = h(null), Q = y([Z, e]), te = {
+		...b,
+		...M
+	}, $ = `${K.id}-label`, ne = H === void 0 ? void 0 : [H, o(D) && $].filter(Boolean).join(" ");
+	p(() => {
+		let e = Z.current?.form;
+		if (!e) return;
+		let t = (e) => {
+			queueMicrotask(() => {
+				e.defaultPrevented || Y();
+			});
+		};
+		return e.addEventListener("reset", t), () => e.removeEventListener("reset", t);
+	}, [B, Y]);
+	let re = (e) => {
+		r?.(e), i?.(e.currentTarget.value);
+	};
+	return /* @__PURE__ */ v(u, {
+		"data-ui": "password-field",
+		dir: L,
+		className: F,
+		sx: I,
+		part: P?.root,
+		children: [
+			/* @__PURE__ */ _(d, {
+				id: $,
+				htmlFor: K.id,
+				required: z,
+				part: P?.label,
+				children: D
+			}),
+			/* @__PURE__ */ v("div", {
+				className: P?.shell?.className,
+				css: [x, P?.shell?.css],
+				children: [/* @__PURE__ */ _("input", {
+					autoCapitalize: "none",
+					autoCorrect: "off",
+					spellCheck: !1,
+					...G,
+					ref: Q,
+					id: K.id,
+					type: X ? "text" : "password",
+					value: t,
+					defaultValue: n,
+					dir: L,
+					disabled: R,
+					required: z,
+					form: B,
+					"aria-labelledby": ne,
+					"aria-describedby": K.describedBy,
+					"aria-invalid": K.ariaInvalid,
+					onChange: re,
+					className: P?.control?.className,
+					css: [
+						c,
+						C,
+						S[j],
+						P?.control?.css
+					]
+				}), /* @__PURE__ */ _("button", {
+					type: "button",
+					disabled: R,
+					"aria-label": te.reveal,
+					"aria-pressed": X,
+					"aria-controls": K.id,
+					onClick: () => J(!X),
+					className: P?.reveal?.className,
+					css: [
+						w,
+						T[j],
+						P?.reveal?.css
+					],
+					children: /* @__PURE__ */ _("span", {
+						"aria-hidden": !0,
+						css: s,
+						children: N ? N(X) : /* @__PURE__ */ _(O, { revealed: X })
+					})
+				})]
+			}),
+			/* @__PURE__ */ _(f, {
+				id: K.descriptionId,
+				part: P?.description,
+				children: k
+			}),
+			/* @__PURE__ */ _(ee, {
+				id: K.errorId,
+				part: P?.error,
+				children: A
+			})
+		]
+	});
+}
+k.displayName = "PasswordField";
+//#endregion
+export { k as t };

package/dist/password-field.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as PasswordField } from "./password-field-03pWRkuY.js";

package/dist/popover-QHcEvf9c.js

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

package/dist/popover.js

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

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

@@ -1,6 +1,6 @@
 'use client';
 import { i as e, r as t, t as n } from "./sx-Dx9JUKp5.js";
-import { n as r, t as i } from "./media-D_eA_I-e.js";
+import { n as r, r as i } from "./media-8yrN85VT.js";
 import { t as a } from "./visually-hidden-BJdvqqvn.js";
 import { t as o } from "./renderable-DzcIj1Lo.js";
 import { useId as s } from "react";
@@ -29,8 +29,8 @@ var d = "40%", f = "1.4s ease-in-out infinite", p = 100, m = e({
 	transitionProperty: "width",
 	transitionDuration: c.motion.duration.base,
 	transitionTimingFunction: c.motion.easeStandard,
-	[r]: { transitionDuration: "0s" },
-	[i]: {
+	[i]: { transitionDuration: "0s" },
+	[r]: {
 		forcedColorAdjust: "none",
 		backgroundColor: "Highlight"
 	}
@@ -38,7 +38,7 @@ var d = "40%", f = "1.4s ease-in-out infinite", p = 100, m = e({
 	inlineSize: d,
 	animation: `${m} ${f}`,
 	"&:dir(rtl)": { animation: `${h} ${f}` },
-	[r]: {
+	[i]: {
 		"&, &:dir(rtl)": { animation: "none" },
 		opacity: .7
 	}

package/dist/progress.js

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