@jfrader/ui 0.2.0 → 0.4.0

package/dist/navigation-BDht6S2-.js

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

package/dist/pagination-B50PCaDU.js

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

package/dist/pill-2_XzBdkD.js

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

package/dist/popover-DRHbeIVq.js

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

package/dist/progress-CpsskKTD.js

@@ -1,85 +0,0 @@
-'use client';
-import { n as e, t } from "./css-Cgj6sCHn.js";
-import { n, t as r } from "./media-D_eA_I-e.js";
-import { t as i } from "./visually-hidden-DCWhf0Cb.js";
-import { t as a } from "./renderable-DzcIj1Lo.js";
-import { useId as o } from "react";
-import { vars as s } from "@jfrader/tokens/vars";
-import { jsx as c, jsxs as l } from "@emotion/react/jsx-runtime";
-//#region src/components/progress/progress.tsx
-var u = "40%", d = "1.4s ease-in-out infinite", f = 100, p = e({
-	from: { transform: "translateX(-100%)" },
-	to: { transform: "translateX(250%)" }
-}), m = e({
-	from: { transform: "translateX(100%)" },
-	to: { transform: "translateX(-250%)" }
-}), h = t({
-	position: "relative",
-	display: "block",
-	boxSizing: "border-box",
-	blockSize: "4px",
-	overflow: "hidden",
-	backgroundColor: s.color.surfaceHover,
-	border: `1px solid ${s.color.borderSubtle}`,
-	borderRadius: s.radius.full
-}), g = t({
-	blockSize: "100%",
-	backgroundColor: s.color.accent,
-	borderRadius: s.radius.full,
-	transitionProperty: "width",
-	transitionDuration: s.motion.duration.base,
-	transitionTimingFunction: s.motion.easeStandard,
-	[n]: { transitionDuration: "0s" },
-	[r]: {
-		forcedColorAdjust: "none",
-		backgroundColor: "Highlight"
-	}
-}), _ = t({
-	inlineSize: u,
-	animation: `${p} ${d}`,
-	"&:dir(rtl)": { animation: `${m} ${d}` },
-	[n]: {
-		"&, &:dir(rtl)": { animation: "none" },
-		opacity: .7
-	}
-});
-function v(e, t) {
-	let n = Number.isFinite(t) && t > 0 ? t : f;
-	return {
-		value: e === void 0 ? void 0 : Math.min(Math.max(Number.isFinite(e) ? e : 0, 0), n),
-		max: n
-	};
-}
-function y({ ref: e, value: t, max: n = f, label: r, getValueLabel: s, slotProps: u, "aria-labelledby": d, ...p }) {
-	let m = `${o()}-label`, y = a(r), b = [d, y && m].filter(Boolean).join(" ") || void 0, { value: x, max: S } = v(t, n), C = x === void 0, w = x === void 0 ? 0 : x / S * 100;
-	return /* @__PURE__ */ l("div", {
-		...p,
-		ref: e,
-		role: "progressbar",
-		"data-ui": "progress",
-		"data-state": C ? "indeterminate" : "determinate",
-		"aria-labelledby": b,
-		"aria-valuemin": 0,
-		"aria-valuemax": S,
-		"aria-valuenow": x,
-		"aria-valuetext": x === void 0 ? void 0 : s?.(x, S),
-		css: h,
-		children: [y && /* @__PURE__ */ c("span", {
-			id: m,
-			css: i,
-			children: r
-		}), /* @__PURE__ */ c("div", {
-			"data-ui": "progress-indicator",
-			className: u?.indicator?.className,
-			style: C ? void 0 : { width: `${w}%` },
-			css: [
-				g,
-				C && _,
-				u?.indicator?.css
-			]
-		})]
-	});
-}
-y.displayName = "Progress";
-//#endregion
-export { y as t };