@jfrader/ui 0.1.2 → 0.3.0

package/dist/field-anatomy-BzGw1Ch9.js

@@ -1,105 +0,0 @@
-'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
-import { n as t } from "./media-D_eA_I-e.js";
-import { t as n } from "./renderable-DzcIj1Lo.js";
-import { useId as r } from "react";
-import { vars as i } from "@jfrader/tokens/vars";
-import { jsx as a, jsxs as o } from "@emotion/react/jsx-runtime";
-//#region src/styling/input-control.ts
-var s = e({
-	display: "block",
-	inlineSize: "100%",
-	boxSizing: "border-box",
-	margin: 0,
-	backgroundColor: i.color.surfaceRaised,
-	border: `1px solid ${i.color.borderControl}`,
-	borderRadius: i.radius.md,
-	color: i.color.text,
-	fontFamily: i.font.sans,
-	transitionProperty: "border-color",
-	transitionDuration: i.motion.duration.fast,
-	transitionTimingFunction: i.motion.easeStandard,
-	"&::placeholder": { color: i.color.textSubtle },
-	"&:hover:not(:disabled):not(:focus-visible)": { borderColor: i.color.textSubtle },
-	"&:focus-visible": {
-		outline: `2px solid ${i.color.focusRing}`,
-		outlineOffset: "2px",
-		borderColor: i.color.focusRing
-	},
-	"&:disabled": {
-		opacity: .55,
-		cursor: "not-allowed"
-	},
-	"&[aria-invalid=\"true\"]:not(:focus-visible)": { borderColor: i.color.dangerBorder },
-	[t]: { transitionDuration: "0s" }
-}), c = e({
-	display: "grid",
-	gap: i.space[1],
-	inlineSize: "100%"
-}), l = e({
-	display: "inline-flex",
-	gap: i.space[1],
-	fontSize: i.textSize.sm,
-	fontWeight: i.fontWeight.medium,
-	color: i.color.text
-}), u = e({ color: i.color.dangerText }), d = e({
-	fontSize: i.textSize.sm,
-	color: i.color.textMuted
-}), f = e({
-	fontSize: i.textSize.sm,
-	color: i.color.dangerText
-});
-function p({ id: e, description: t, error: i, "aria-describedby": a, "aria-invalid": o }) {
-	let s = r(), c = e ?? s, l = `${c}-description`, u = `${c}-error`, d = n(t), f = n(i);
-	return {
-		id: c,
-		descriptionId: l,
-		errorId: u,
-		describedBy: [
-			a,
-			d && l,
-			f && u
-		].filter(Boolean).join(" ") || void 0,
-		ariaInvalid: f ? !0 : o
-	};
-}
-function m({ "data-ui": e, className: t, part: n, children: r }) {
-	let i = [t, n?.className].filter(Boolean).join(" ") || void 0;
-	return /* @__PURE__ */ a("div", {
-		"data-ui": e,
-		className: i,
-		css: [c, n?.css],
-		children: r
-	});
-}
-function h({ htmlFor: e, required: t, part: r, children: i }) {
-	return n(i) ? /* @__PURE__ */ o("label", {
-		htmlFor: e,
-		className: r?.className,
-		css: [l, r?.css],
-		children: [i, t && /* @__PURE__ */ a("span", {
-			"aria-hidden": !0,
-			css: u,
-			children: " *"
-		})]
-	}) : null;
-}
-function g({ id: e, part: t, children: r }) {
-	return n(r) ? /* @__PURE__ */ a("span", {
-		id: e,
-		className: t?.className,
-		css: [d, t?.css],
-		children: r
-	}) : null;
-}
-function _({ id: e, part: t, children: r }) {
-	return n(r) ? /* @__PURE__ */ a("span", {
-		id: e,
-		role: "alert",
-		className: t?.className,
-		css: [f, t?.css],
-		children: r
-	}) : null;
-}
-//#endregion
-export { p as a, m as i, _ as n, s as o, h as r, g as t };

package/dist/flex-5-NI5SSy.js

@@ -1,22 +0,0 @@
-'use client';
-import { t as e } from "./layout-style-7ZTOiWGR.js";
-import { forwardRef as t } from "react";
-import { jsx as n } from "@emotion/react/jsx-runtime";
-//#region src/components/flex/flex.tsx
-var r = t(function({ direction: t, wrap: r, inline: i, align: a, justify: o, gap: s, ...c }, l) {
-	return /* @__PURE__ */ n("div", {
-		...c,
-		ref: l,
-		"data-ui": "flex",
-		css: e({
-			direction: t,
-			wrap: r,
-			inline: i,
-			align: a,
-			justify: o,
-			gap: s
-		})
-	});
-});
-//#endregion
-export { r as t };

package/dist/menu-bvKRJOhJ.js

@@ -1,187 +0,0 @@
-'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
-import { t } from "./focus-ring-BK5W5_NY.js";
-import { n } from "./media-D_eA_I-e.js";
-import { t as r } from "./use-controlled-state-CVXDa-qM.js";
-import { f as i, i as a, n as o, o as s } from "./collection-registry-1l9f3XJZ.js";
-import { t as c } from "./trigger-style-B1GFmH7M.js";
-import { t as l } from "./use-overlay-floating-efeqppiw.js";
-import { createContext as u, forwardRef as d, useContext as f, useEffect as p, useMemo as m, useRef as h, useState as g } from "react";
-import { vars as _ } from "@jfrader/tokens/vars";
-import { jsx as v } from "@emotion/react/jsx-runtime";
-import { FloatingFocusManager as y, FloatingList as b, FloatingPortal as x, useClick as S, useDismiss as C, useInteractions as w, useListNavigation as T, useMergeRefs as E, useRole as D, useTypeahead as O } from "@floating-ui/react";
-//#region src/components/menu/menu.tsx
-var k = 500, A = u(null), j = u(!1);
-function M(e) {
-	let t = f(A);
-	if (!t) throw Error(`Menu.${e} must be rendered inside <Menu>.`);
-	return t;
-}
-function N() {
-	let e = M("Item");
-	if (!f(j)) throw Error("Menu.Item must be rendered inside <Menu.Content>.");
-	return e;
-}
-var P = e({
-	appearance: "none",
-	boxSizing: "border-box",
-	display: "flex",
-	alignItems: "center",
-	inlineSize: "100%",
-	minBlockSize: "32px",
-	border: 0,
-	borderRadius: _.radius.sm,
-	backgroundColor: "transparent",
-	paddingBlock: _.space[1],
-	paddingInline: _.space[2],
-	font: "inherit",
-	fontSize: _.textSize.sm,
-	color: _.color.text,
-	textAlign: "start",
-	cursor: "pointer",
-	transitionProperty: "background-color",
-	transitionDuration: _.motion.duration.fast,
-	transitionTimingFunction: _.motion.easeStandard,
-	"&:focus-visible": { ...t },
-	[n]: { transitionDuration: "0s" }
-}), F = e({
-	blockSize: "1px",
-	marginBlock: _.space[1],
-	backgroundColor: _.color.border
-});
-function I({ open: e, defaultOpen: t = !1, onOpenChange: n, placement: i = "bottom-start", children: a }) {
-	let [o = !1, s] = r(e, t, n), [c, u] = g(null), d = h([]), f = h([]), _ = h(/* @__PURE__ */ new Set()), y = h(!1), { refs: b, floatingStyles: x, context: E } = l({
-		open: o,
-		placement: i,
-		onOpenChange: (e, t, n) => {
-			e || (y.current = n === "escape-key"), s(e);
-		}
-	});
-	p(() => {
-		!o && y.current && (y.current = !1, b.domReference.current?.focus());
-	}, [o, b]);
-	let j = S(E), M = D(E, { role: "menu" }), N = C(E, {
-		escapeKey: !0,
-		outsidePress: !0
-	}), P = T(E, {
-		listRef: d,
-		activeIndex: c,
-		onNavigate: u,
-		loop: !0,
-		orientation: "vertical",
-		disabledIndices: (e) => _.current.has(e),
-		focusItemOnOpen: !0
-	}), F = O(E, {
-		listRef: f,
-		activeIndex: c,
-		onMatch: o ? u : void 0,
-		resetMs: k
-	}), { getReferenceProps: I, getFloatingProps: L, getItemProps: R } = w([
-		j,
-		M,
-		N,
-		P,
-		F
-	]), z = m(() => ({
-		open: o,
-		requestClose: (e = !1) => {
-			e && (y.current = !0), s(!1);
-		},
-		activeIndex: c,
-		refs: b,
-		floatingContext: E,
-		floatingStyles: x,
-		elementsRef: d,
-		labelsRef: f,
-		disabledIndices: _.current,
-		getReferenceProps: I,
-		getFloatingProps: L,
-		getItemProps: R
-	}), [
-		o,
-		s,
-		c,
-		b,
-		E,
-		x,
-		I,
-		L,
-		R
-	]);
-	return /* @__PURE__ */ v(A.Provider, {
-		value: z,
-		children: a
-	});
-}
-var L = d(function(e, t) {
-	let { refs: n, getReferenceProps: r } = M("Trigger"), i = E([n.setReference, t]);
-	return /* @__PURE__ */ v("button", {
-		type: "button",
-		...r(e),
-		ref: i,
-		"data-ui": "menu-trigger",
-		css: c
-	});
-}), R = d(function({ style: e, children: t, ...n }, r) {
-	let { open: a, refs: o, floatingContext: s, floatingStyles: c, elementsRef: l, labelsRef: u, getFloatingProps: d } = M("Content"), f = E([o.setFloating, r]);
-	return a ? /* @__PURE__ */ v(x, { children: /* @__PURE__ */ v(y, {
-		context: s,
-		modal: !1,
-		initialFocus: -1,
-		returnFocus: !1,
-		restoreFocus: !0,
-		children: /* @__PURE__ */ v("div", {
-			...d(n),
-			ref: f,
-			"data-ui": "menu",
-			style: {
-				...e,
-				...c
-			},
-			css: i,
-			children: /* @__PURE__ */ v(b, {
-				elementsRef: l,
-				labelsRef: u,
-				children: /* @__PURE__ */ v(j.Provider, {
-					value: !0,
-					children: t
-				})
-			})
-		})
-	}) }) : null;
-}), z = d(function({ onSelect: e, disabled: t = !1, onClick: n, ...r }, i) {
-	let { activeIndex: c, requestClose: l, disabledIndices: u, getItemProps: d } = N(), { ref: f, index: p } = a({ label: t ? null : void 0 }), m = E([f, i]), h = p !== -1 && c === p;
-	o(p, t, u);
-	let g = (r) => {
-		t || (n?.(r), e?.(), r.defaultPrevented || l(!0));
-	};
-	return /* @__PURE__ */ v("button", {
-		type: "button",
-		...d({
-			...r,
-			onClick: g
-		}),
-		ref: m,
-		role: "menuitem",
-		tabIndex: h ? 0 : -1,
-		"aria-disabled": t || void 0,
-		"data-active": h || void 0,
-		"data-ui": "menu-item",
-		css: [P, s]
-	});
-}), B = d(function(e, t) {
-	return /* @__PURE__ */ v("div", {
-		...e,
-		ref: t,
-		role: "separator",
-		"data-ui": "menu-separator",
-		css: F
-	});
-}), V = Object.assign(I, {
-	Trigger: L,
-	Content: R,
-	Item: z,
-	Separator: B
-});
-//#endregion
-export { V as t };

package/dist/navigation-xPoqh_Iz.js

@@ -1,175 +0,0 @@
-'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
-import { t } from "./disclosure-caret-C5T3fcl6.js";
-import { t as n } from "./focus-ring-BK5W5_NY.js";
-import { n as r, t as i } from "./media-D_eA_I-e.js";
-import { t as a } from "./renderable-DzcIj1Lo.js";
-import { t as o } from "./icon-wrapper-CFWzew5m.js";
-import { forwardRef as s, useId as c } from "react";
-import { vars as l } from "@jfrader/tokens/vars";
-import { Fragment as u, jsx as d, jsxs as f } from "@emotion/react/jsx-runtime";
-//#region src/components/navigation/navigation.tsx
-var p = l.space[8], m = "0.06em", h = e({
-	display: "grid",
-	gap: l.space[4],
-	fontFamily: l.font.sans
-}), g = e({
-	display: "grid",
-	gap: l.space[1],
-	"&[open] > summary::after": { transform: "rotate(90deg)" },
-	"&[open]:dir(rtl) > summary::after": { transform: "rotate(-90deg)" }
-}), _ = e({
-	margin: 0,
-	paddingBlock: l.space[1],
-	paddingInline: l.space[3],
-	fontSize: l.textSize.xs,
-	fontWeight: l.fontWeight.medium,
-	lineHeight: l.lineHeight.tight,
-	letterSpacing: m,
-	textTransform: "uppercase",
-	color: l.color.textMuted
-}), v = e({
-	display: "flex",
-	alignItems: "center",
-	justifyContent: "space-between",
-	gap: l.space[2],
-	inlineSize: "100%",
-	boxSizing: "border-box",
-	minBlockSize: p,
-	borderRadius: l.radius.sm,
-	cursor: "pointer",
-	listStyle: "none",
-	transitionProperty: "background-color, color",
-	transitionDuration: l.motion.duration.fast,
-	transitionTimingFunction: l.motion.easeStandard,
-	"&::-webkit-details-marker": { display: "none" },
-	"&::after": { ...t },
-	"&:hover": {
-		backgroundColor: l.color.surfaceHover,
-		color: l.color.text
-	},
-	"&:focus-visible": { ...n },
-	[r]: {
-		transitionDuration: "0s",
-		"&::after": { transitionDuration: "0s" }
-	}
-}), y = e({
-	display: "grid",
-	gap: l.space[1],
-	margin: 0,
-	padding: 0,
-	listStyle: "none"
-}), b = e({
-	display: "flex",
-	alignItems: "center",
-	gap: l.space[2],
-	minBlockSize: p,
-	paddingInline: l.space[3],
-	borderRadius: l.radius.sm,
-	fontSize: l.textSize.sm,
-	lineHeight: l.lineHeight.tight,
-	color: l.color.textMuted,
-	textDecoration: "none",
-	transitionProperty: "background-color, color",
-	transitionDuration: l.motion.duration.fast,
-	transitionTimingFunction: l.motion.easeStandard,
-	"&:hover:not([aria-current=\"page\"])": {
-		backgroundColor: l.color.surfaceHover,
-		color: l.color.text
-	},
-	"&[aria-current=\"page\"]": {
-		backgroundColor: l.color.accentSoft,
-		color: l.color.accentText,
-		fontWeight: l.fontWeight.medium
-	},
-	"&[aria-disabled=\"true\"]": {
-		opacity: .55,
-		pointerEvents: "none"
-	},
-	"&:focus-visible": { ...n },
-	[r]: { transitionDuration: "0s" },
-	[i]: { "&[aria-current=\"page\"]": {
-		forcedColorAdjust: "none",
-		backgroundColor: "SelectedItem",
-		color: "SelectedItemText"
-	} }
-}), x = s(function({ label: e = "Main", ...t }, n) {
-	return /* @__PURE__ */ d("nav", {
-		...t,
-		ref: n,
-		"aria-label": e,
-		"data-ui": "navigation",
-		css: h
-	});
-}), S = s(function({ label: e, collapsible: t = !1, defaultOpen: n, children: r, ...i }, o) {
-	let s = c(), l = a(e);
-	if (t && !l) throw Error("Navigation.Group requires a renderable label when collapsible is true.");
-	let u = /* @__PURE__ */ d("ul", {
-		"aria-labelledby": l ? s : void 0,
-		css: y,
-		children: r
-	});
-	return t ? /* @__PURE__ */ f("details", {
-		...i,
-		ref: o,
-		open: n,
-		"data-ui": "navigation-group",
-		css: g,
-		children: [/* @__PURE__ */ d("summary", {
-			id: s,
-			"data-ui": "navigation-group-summary",
-			css: [_, v],
-			children: e
-		}), u]
-	}) : /* @__PURE__ */ f("section", {
-		...i,
-		ref: o,
-		"data-ui": "navigation-group",
-		css: g,
-		children: [l && /* @__PURE__ */ d("h2", {
-			id: s,
-			"data-ui": "navigation-group-label",
-			css: _,
-			children: e
-		}), u]
-	});
-}), C = s(function({ href: e, active: t = !1, disabled: n = !1, icon: r, children: i, ...s }, c) {
-	let l = /* @__PURE__ */ f(u, { children: [a(r) && /* @__PURE__ */ d("span", {
-		"aria-hidden": "true",
-		"data-ui": "navigation-item-icon",
-		css: o,
-		children: r
-	}), i] }), p = {
-		"aria-current": t ? "page" : void 0,
-		"aria-disabled": n || void 0,
-		tabIndex: n ? -1 : s.tabIndex,
-		onClick: n ? (e) => {
-			e.preventDefault();
-		} : s.onClick
-	};
-	return /* @__PURE__ */ d("li", {
-		"data-ui": "navigation-list-item",
-		children: e === void 0 ? /* @__PURE__ */ d("span", {
-			...s,
-			...p,
-			ref: c,
-			"data-ui": "navigation-item",
-			css: b,
-			children: l
-		}) : /* @__PURE__ */ d("a", {
-			...s,
-			...p,
-			ref: c,
-			href: n ? void 0 : e,
-			role: n ? "link" : void 0,
-			"data-ui": "navigation-item",
-			css: b,
-			children: l
-		})
-	});
-}), w = Object.assign(x, {
-	Group: S,
-	Item: C
-});
-//#endregion
-export { w as t };

package/dist/pagination-BIKYsxK1.js

@@ -1,149 +0,0 @@
-'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
-import { n as t } from "./focus-ring-BK5W5_NY.js";
-import { n } from "./media-D_eA_I-e.js";
-import { t as r } from "./visually-hidden-DCWhf0Cb.js";
-import { forwardRef as i, useImperativeHandle as a, useLayoutEffect as o, useMemo as s, useRef as c } from "react";
-import { vars as l } from "@jfrader/tokens/vars";
-import { jsx as u, jsxs as d } from "@emotion/react/jsx-runtime";
-//#region src/components/pagination/pagination.tsx
-var f = 50, p = 105, m = (e) => Math.max(0, Math.floor(Number.isFinite(e) ? e : 0)), h = (e, t) => Array.from({ length: Math.min(p, Math.max(0, t - e + 1)) }, (t, n) => e + n);
-function g(e, t, n) {
-	let r = n * 2 + 5;
-	if (t <= r) return h(1, t);
-	let i = Math.max(e - n, 1), a = Math.min(e + n, t), o = i > 3, s = a < t - 2, c = r - 2;
-	return o ? s ? [
-		1,
-		"start-ellipsis",
-		...h(i, a),
-		"end-ellipsis",
-		t
-	] : [
-		1,
-		"start-ellipsis",
-		...h(t - c + 1, t)
-	] : [
-		...h(1, c),
-		"end-ellipsis",
-		t
-	];
-}
-var _ = e({
-	display: "flex",
-	flexWrap: "wrap",
-	alignItems: "center",
-	gap: l.space[1],
-	margin: 0,
-	padding: 0,
-	listStyle: "none",
-	fontFamily: l.font.sans,
-	fontSize: l.textSize.sm,
-	lineHeight: l.lineHeight.tight
-}), v = e({
-	display: "inline-flex",
-	alignItems: "center",
-	justifyContent: "center",
-	minInlineSize: "32px",
-	blockSize: "32px"
-}), y = e({
-	position: "relative",
-	appearance: "none",
-	paddingInline: l.space[2],
-	border: "1px solid transparent",
-	borderRadius: l.radius.md,
-	background: "transparent",
-	color: l.color.text,
-	font: "inherit",
-	fontVariantNumeric: "tabular-nums",
-	cursor: "pointer",
-	transitionProperty: "background-color, border-color, color",
-	transitionDuration: l.motion.duration.fast,
-	transitionTimingFunction: l.motion.easeStandard,
-	"&:hover:not(:disabled):not([aria-current=\"page\"])": { backgroundColor: l.color.surfaceHover },
-	"&[aria-current=\"page\"]": {
-		backgroundColor: l.color.accentSoft,
-		borderColor: l.color.accentBorder,
-		color: l.color.accentText,
-		fontWeight: l.fontWeight.semibold
-	},
-	"&:disabled": {
-		cursor: "not-allowed",
-		opacity: .55
-	},
-	"&:focus-visible": { ...t },
-	[n]: { transitionDuration: "0s" }
-}), b = e({ color: l.color.textMuted }), x = e({
-	display: "inline-block",
-	"&:dir(rtl)": { transform: "scaleX(-1)" }
-}), S = i(function({ page: e, totalPages: t, onPageChange: n, siblingCount: i = 1, label: l = "Pagination", previousLabel: p = "Previous page", nextLabel: h = "Next page", locale: S = typeof navigator > "u" ? void 0 : navigator.language, ...C }, w) {
-	let T = m(t), E = Math.min(Math.max(m(e), 1), Math.max(T, 1)), D = g(E, T, Math.min(m(i), f)), O = s(() => new Intl.NumberFormat(S), [S]), k = c(null);
-	a(w, () => k.current, []);
-	let A = c(!1);
-	o(() => {
-		let e = k.current;
-		if (!A.current || !e) return;
-		A.current = !1;
-		let t = e.ownerDocument.activeElement;
-		(t === e.ownerDocument.body || t && e.contains(t) && t.matches(":disabled")) && e.querySelector("[aria-current=\"page\"]")?.focus();
-	}, [E]);
-	let j = (e, t = !1) => {
-		A.current = t && (e <= 1 || e >= T), e !== E && n?.(e);
-	};
-	return /* @__PURE__ */ u("nav", {
-		...C,
-		ref: k,
-		"aria-label": l,
-		"data-ui": "pagination",
-		children: /* @__PURE__ */ d("ul", {
-			css: _,
-			children: [
-				/* @__PURE__ */ u("li", { children: /* @__PURE__ */ d("button", {
-					type: "button",
-					disabled: E <= 1,
-					onClick: () => j(E - 1, !0),
-					"data-ui": "pagination-previous",
-					css: [v, y],
-					children: [/* @__PURE__ */ u("span", {
-						"aria-hidden": "true",
-						css: x,
-						children: "‹"
-					}), /* @__PURE__ */ u("span", {
-						css: r,
-						children: p
-					})]
-				}) }),
-				D.map((e) => typeof e == "number" ? /* @__PURE__ */ u("li", { children: /* @__PURE__ */ u("button", {
-					type: "button",
-					"aria-current": e === E ? "page" : void 0,
-					"aria-label": O.format(e),
-					onClick: () => j(e),
-					"data-ui": "pagination-page",
-					css: [v, y],
-					children: O.format(e)
-				}) }, e) : /* @__PURE__ */ u("li", { children: /* @__PURE__ */ u("span", {
-					"aria-hidden": "true",
-					"data-ui": "pagination-ellipsis",
-					css: [v, b],
-					children: "…"
-				}) }, e)),
-				/* @__PURE__ */ u("li", { children: /* @__PURE__ */ d("button", {
-					type: "button",
-					disabled: E >= T,
-					onClick: () => j(E + 1, !0),
-					"data-ui": "pagination-next",
-					css: [v, y],
-					children: [/* @__PURE__ */ u("span", {
-						"aria-hidden": "true",
-						css: x,
-						children: "›"
-					}), /* @__PURE__ */ u("span", {
-						css: r,
-						children: h
-					})]
-				}) })
-			]
-		})
-	});
-});
-//#endregion
-export { S as t };