@jfrader/ui 0.1.1 → 0.2.0

package/dist/menu-A9fZUaAG.js

@@ -1,186 +0,0 @@
-import { t as e } from "./css-CW_HG55W.js";
-import { t } from "./focus-ring-qOS3rPlM.js";
-import { n } from "./media-8K3xDAxM.js";
-import { t as r } from "./use-controlled-state-DQXkiTQI.js";
-import { f as i, i as a, n as o, o as s } from "./collection-registry-C2jnQa7X.js";
-import { t as c } from "./trigger-style-f54idgjT.js";
-import { t as l } from "./use-overlay-floating-CsZd3qxa.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-Cemnmc_J.js

@@ -1,174 +0,0 @@
-import { t as e } from "./css-CW_HG55W.js";
-import { t } from "./disclosure-caret-BC6P8AsM.js";
-import { t as n } from "./focus-ring-qOS3rPlM.js";
-import { n as r, t as i } from "./media-8K3xDAxM.js";
-import { t as a } from "./renderable-DwPvt1I8.js";
-import { t as o } from "./icon-wrapper-BKo4FI-O.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-orCjUsn_.js

@@ -1,148 +0,0 @@
-import { t as e } from "./css-CW_HG55W.js";
-import { n as t } from "./focus-ring-qOS3rPlM.js";
-import { n } from "./media-8K3xDAxM.js";
-import { t as r } from "./visually-hidden-BXVyhj0y.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 };

package/dist/pill-Dg2JJHHW.js

@@ -1,49 +0,0 @@
-import { t as e } from "./css-CW_HG55W.js";
-import { forwardRef as t } from "react";
-import { vars as n } from "@jfrader/tokens/vars";
-import { jsx as r } from "@emotion/react/jsx-runtime";
-//#region src/components/pill/pill.tsx
-var i = e({
-	display: "inline-flex",
-	alignItems: "center",
-	boxSizing: "border-box",
-	blockSize: n.space[5],
-	paddingInline: n.space[2],
-	borderRadius: n.radius.full,
-	fontSize: n.textSize.xs,
-	fontWeight: n.fontWeight.medium,
-	lineHeight: 1,
-	whiteSpace: "nowrap",
-	verticalAlign: "middle"
-}), a = {
-	neutral: e({
-		backgroundColor: n.color.surfaceHover,
-		color: n.color.textMuted
-	}),
-	accent: e({
-		backgroundColor: n.color.accentSoft,
-		color: n.color.accentText
-	}),
-	success: e({
-		backgroundColor: n.color.successSoft,
-		color: n.color.success
-	}),
-	warning: e({
-		backgroundColor: n.color.warningSoft,
-		color: n.color.warning
-	}),
-	danger: e({
-		backgroundColor: n.color.dangerSoft,
-		color: n.color.dangerText
-	})
-}, o = t(function({ tone: e = "neutral", ...t }, n) {
-	return /* @__PURE__ */ r("span", {
-		...t,
-		ref: n,
-		"data-ui": "pill",
-		"data-tone": e,
-		css: [i, a[e]]
-	});
-});
-//#endregion
-export { o as t };

package/dist/popover-D_YU34WS.js

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