@jfrader/ui 0.1.2 → 0.2.0

package/dist/{command-palette-6c158eH1.js → command-palette-BhJwm6cS.js}

@@ -8,83 +8,83 @@ import { a, r as o, s, t as c } from "./collection-registry-1l9f3XJZ.js";
 import { t as l } from "./trigger-style-B1GFmH7M.js";
 import { i as u, r as d, t as f } from "./use-native-dialog-DWpIUVO1.js";
 import { n as p, t as m } from "./surface-DZ4d-2aL.js";
-import { createContext as h, forwardRef as g, useCallback as _, useContext as v, useId as y, useMemo as b, useRef as x, useState as S } from "react";
-import { vars as C } from "@jfrader/tokens/vars";
-import { jsx as w, jsxs as T } from "@emotion/react/jsx-runtime";
-import { FloatingList as E, useFloatingRootContext as ee, useInteractions as te, useListNavigation as ne, useMergeRefs as D } from "@floating-ui/react";
+import { createContext as h, useCallback as g, useContext as _, useId as v, useMemo as y, useRef as b, useState as x } from "react";
+import { vars as S } from "@jfrader/tokens/vars";
+import { jsx as C, jsxs as w } from "@emotion/react/jsx-runtime";
+import { FloatingList as T, useFloatingRootContext as ee, useInteractions as te, useListNavigation as ne, useMergeRefs as E } from "@floating-ui/react";
 //#region src/components/command-palette/command-palette.styles.ts
-var O = e({
+var D = e({
 	...m,
-	marginBlockStart: C.space[12]
-}), k = e({
+	marginBlockStart: S.space[12]
+}), O = e({
 	...p,
 	display: "flex",
 	flexDirection: "column",
-	borderRadius: C.radius.lg,
-	boxShadow: C.shadow.floating,
+	borderRadius: S.radius.lg,
+	boxShadow: S.shadow.floating,
 	inlineSize: "min(560px, calc(100vw - 32px))"
-}), A = e({
+}), k = e({
 	boxSizing: "border-box",
 	inlineSize: "100%",
 	blockSize: "48px",
 	margin: 0,
 	border: 0,
-	borderBlockEnd: `1px solid ${C.color.borderControl}`,
-	borderStartStartRadius: C.radius.lg,
-	borderStartEndRadius: C.radius.lg,
+	borderBlockEnd: `1px solid ${S.color.borderControl}`,
+	borderStartStartRadius: S.radius.lg,
+	borderStartEndRadius: S.radius.lg,
 	backgroundColor: "transparent",
-	paddingInline: C.space[4],
+	paddingInline: S.space[4],
 	font: "inherit",
-	fontSize: C.textSize.md,
-	color: C.color.text,
-	"&::placeholder": { color: C.color.textSubtle },
+	fontSize: S.textSize.md,
+	color: S.color.text,
+	"&::placeholder": { color: S.color.textSubtle },
 	"&:focus-visible": { ...t }
-}), j = e({
+}), A = e({
 	boxSizing: "border-box",
 	display: "flex",
 	flexDirection: "column",
 	maxBlockSize: "320px",
 	overflow: "auto",
-	padding: C.space[1],
+	padding: S.space[1],
 	"&[hidden]": { display: "none" }
-}), M = e({
+}), j = e({
 	display: "flex",
 	flexDirection: "column",
 	"&[hidden]": { display: "none" }
+}), M = e({
+	paddingBlock: S.space[1],
+	paddingInline: S.space[2],
+	fontSize: S.textSize.xs,
+	fontWeight: S.fontWeight.medium,
+	color: S.color.textMuted
 }), N = e({
-	paddingBlock: C.space[1],
-	paddingInline: C.space[2],
-	fontSize: C.textSize.xs,
-	fontWeight: C.fontWeight.medium,
-	color: C.color.textMuted
-}), P = e({
-	"&:hover, &[data-active]": { backgroundColor: C.color.surfaceHover },
+	"&:hover, &[data-active]": { backgroundColor: S.color.surfaceHover },
 	"&[hidden]": { display: "none" }
-}), F = e({
-	paddingBlock: C.space[6],
-	paddingInline: C.space[4],
+}), P = e({
+	paddingBlock: S.space[6],
+	paddingInline: S.space[4],
 	textAlign: "center",
-	fontSize: C.textSize.sm,
-	color: C.color.textMuted
-}), re = "Command palette", ie = "No results", I = new Intl.PluralRules("en"), ae = (e, t) => e.toLocaleLowerCase().includes(t.toLocaleLowerCase()), oe = (e) => `${e} ${I.select(e) === "one" ? "result" : "results"}`, L = h(null), R = h(null);
-function z(e) {
-	let t = v(L);
+	fontSize: S.textSize.sm,
+	color: S.color.textMuted
+}), re = "Command palette", ie = "No results", F = new Intl.PluralRules("en"), ae = (e, t) => e.toLocaleLowerCase().includes(t.toLocaleLowerCase()), oe = (e) => `${e} ${F.select(e) === "one" ? "result" : "results"}`, I = h(null), L = h(null);
+function R(e) {
+	let t = _(I);
 	if (!t) throw Error(`CommandPalette.${e} must be rendered inside <CommandPalette>.`);
 	return t;
 }
-var B = (e) => {
+var z = (e) => {
 	e?.setAttribute("autofocus", "");
 };
-function V({ open: e, defaultOpen: t = !1, onOpenChange: r, label: i = re, filter: o = ae, emptyMessage: s = ie, formatResultCount: c = oe, children: l }) {
-	let d = y(), [f = !1, p] = n(e, t, r), { dialogElementRef: m, setDialogElement: h, setOpen: g, requestClose: v, repairToken: C } = u(f, p), [T, E] = S(""), [D, O] = S(!1), [k, A] = S(null), [j, M] = a(), [N, P] = S(null), [F, I] = S(null), [R, z] = S(f), B = x([]);
+function B({ open: e, defaultOpen: t = !1, onOpenChange: r, label: i = re, filter: o = ae, emptyMessage: s = ie, formatResultCount: c = oe, children: l }) {
+	let d = v(), [f = !1, p] = n(e, t, r), { dialogElementRef: m, setDialogElement: h, setOpen: _, requestClose: S, repairToken: w } = u(f, p), [T, E] = x(""), [D, O] = x(!1), [k, A] = x(null), [j, M] = a(), [N, P] = x(null), [F, L] = x(null), [R, z] = x(f), B = b([]);
 	f !== R && (z(f), f && (E(""), O(!1), A(null)));
-	let V = _(() => {
-		g(!(f && m.current?.open));
+	let V = g(() => {
+		_(!(f && m.current?.open));
 	}, [
 		f,
-		g,
+		_,
 		m
-	]), { matchedValues: H, matchedIndices: U, visibleGroupIds: W } = b(() => {
+	]), { matchedValues: H, matchedIndices: U, visibleGroupIds: W } = y(() => {
 		let e = /* @__PURE__ */ new Set(), t = [], n = /* @__PURE__ */ new Set();
 		return j.forEach((r, i) => {
 			r.index !== -1 && (T === "" || o(r.label, T) || r.keywords !== void 0 && o(r.keywords, T)) && (e.add(i), t.push(r.index), r.groupId !== null && n.add(r.groupId));
@@ -97,9 +97,9 @@ function V({ open: e, defaultOpen: t = !1, onOpenChange: r, label: i = re, filte
 		j,
 		T,
 		o
-	]), G = b(() => new Set(U), [U]), K = k !== null && G.has(k) ? k : U[0] ?? null, q = ee({
+	]), G = y(() => new Set(U), [U]), K = k !== null && G.has(k) ? k : U[0] ?? null, q = ee({
 		open: f,
-		onOpenChange: (e) => g(e),
+		onOpenChange: (e) => _(e),
 		elements: {
 			reference: N,
 			floating: F
@@ -114,12 +114,12 @@ function V({ open: e, defaultOpen: t = !1, onOpenChange: r, label: i = re, filte
 		loop: !0,
 		focusItemOnOpen: !1,
 		disabledIndices: (e) => !G.has(e)
-	}), { getReferenceProps: Y, getFloatingProps: X, getItemProps: Z } = te([J]), Q = U.length, $ = D ? c(Q) : "", se = b(() => ({
+	}), { getReferenceProps: Y, getFloatingProps: X, getItemProps: Z } = te([J]), Q = U.length, $ = D ? c(Q) : "", se = y(() => ({
 		open: f,
-		setOpen: g,
+		setOpen: _,
 		toggleOpen: V,
-		requestClose: v,
-		repairToken: C,
+		requestClose: S,
+		repairToken: w,
 		setDialogElement: h,
 		label: i,
 		emptyMessage: s,
@@ -133,7 +133,7 @@ function V({ open: e, defaultOpen: t = !1, onOpenChange: r, label: i = re, filte
 		activeIndex: K,
 		elementsRef: B,
 		setInputElement: P,
-		setListElement: I,
+		setListElement: L,
 		getReferenceProps: Y,
 		getFloatingProps: X,
 		getItemProps: Z,
@@ -147,10 +147,10 @@ function V({ open: e, defaultOpen: t = !1, onOpenChange: r, label: i = re, filte
 		registration: M
 	}), [
 		f,
-		g,
+		_,
 		V,
-		v,
-		C,
+		S,
+		w,
 		h,
 		i,
 		s,
@@ -167,41 +167,44 @@ function V({ open: e, defaultOpen: t = !1, onOpenChange: r, label: i = re, filte
 		Z,
 		M
 	]);
-	return /* @__PURE__ */ w(L.Provider, {
+	return /* @__PURE__ */ C(I.Provider, {
 		value: se,
 		children: l
 	});
 }
-var H = g(function({ onClick: e, ...t }, n) {
-	let { open: r, toggleOpen: i } = z("Trigger"), a = (t) => {
-		e?.(t), t.defaultPrevented || i();
+B.displayName = "CommandPalette";
+function V({ ref: e, onClick: t, ...n }) {
+	let { open: r, toggleOpen: i } = R("Trigger"), a = (e) => {
+		t?.(e), e.defaultPrevented || i();
 	};
-	return /* @__PURE__ */ w("button", {
+	return /* @__PURE__ */ C("button", {
 		type: "button",
-		...t,
-		ref: n,
+		...n,
+		ref: e,
 		"data-ui": "command-palette-trigger",
 		"aria-haspopup": "dialog",
 		"aria-expanded": r,
 		onClick: a,
 		css: l
 	});
-}), U = g(function(e, t) {
-	let { children: n, onCancel: i, onClick: a, onClose: o, ...s } = f(e), c = z("Content"), { label: l, announcement: u } = c, p = d(c, {
+}
+V.displayName = "CommandPalette.Trigger";
+function H({ ref: e, ...t }) {
+	let { children: n, onCancel: i, onClick: a, onClose: o, ...s } = f(t), c = R("Content"), { label: l, announcement: u } = c, p = d(c, {
 		onCancel: i,
 		onClick: a,
 		onClose: o
-	}, t);
-	return /* @__PURE__ */ w("dialog", {
+	}, e);
+	return /* @__PURE__ */ C("dialog", {
 		"aria-label": l,
 		...s,
 		...p,
 		"data-ui": "command-palette",
 		"aria-modal": "true",
-		css: O,
-		children: /* @__PURE__ */ T("div", {
-			css: k,
-			children: [n, /* @__PURE__ */ w("div", {
+		css: D,
+		children: /* @__PURE__ */ w("div", {
+			css: O,
+			children: [n, /* @__PURE__ */ C("div", {
 				role: "status",
 				"aria-live": "polite",
 				"aria-atomic": "true",
@@ -210,22 +213,24 @@ var H = g(function({ onClick: e, ...t }, n) {
 			})]
 		})
 	});
-}), W = g(function({ onChange: e, onKeyDown: t, ...n }, r) {
-	let { label: i, listId: a, query: o, matchCount: s, activeIndex: c, elementsRef: l, requestClose: u, setInputElement: d, getReferenceProps: f, changeQuery: p, moveToEdge: m } = z("Input"), h = D([
+}
+H.displayName = "CommandPalette.Content";
+function U({ ref: e, onChange: t, onKeyDown: n, ...r }) {
+	let { label: i, listId: a, query: o, matchCount: s, activeIndex: c, elementsRef: l, requestClose: u, setInputElement: d, getReferenceProps: f, changeQuery: p, moveToEdge: m } = R("Input"), h = E([
 		d,
-		B,
-		r
-	]), g = (t) => {
-		e?.(t), p(t.currentTarget.value);
+		z,
+		e
+	]), g = (e) => {
+		t?.(e), p(e.currentTarget.value);
 	}, _ = (e) => {
-		t?.(e), !(e.defaultPrevented || e.nativeEvent.isComposing) && (e.key === "Escape" ? (e.preventDefault(), u()) : (e.key === "Home" || e.key === "End") && !e.shiftKey && !e.ctrlKey && !e.metaKey && !e.altKey ? (e.preventDefault(), m(e.key === "Home" ? "first" : "last")) : e.key === "Enter" && c !== null && (e.preventDefault(), l.current[c]?.click()));
+		n?.(e), !(e.defaultPrevented || e.nativeEvent.isComposing) && (e.key === "Escape" ? (e.preventDefault(), u()) : (e.key === "Home" || e.key === "End") && !e.shiftKey && !e.ctrlKey && !e.metaKey && !e.altKey ? (e.preventDefault(), m(e.key === "Home" ? "first" : "last")) : e.key === "Enter" && c !== null && (e.preventDefault(), l.current[c]?.click()));
 	};
-	return /* @__PURE__ */ w("input", {
+	return /* @__PURE__ */ C("input", {
 		"aria-label": i,
 		autoComplete: "off",
 		spellCheck: !1,
 		...f({
-			...n,
+			...r,
 			onChange: g,
 			onKeyDown: _
 		}),
@@ -237,16 +242,18 @@ var H = g(function({ onClick: e, ...t }, n) {
 		"aria-expanded": s > 0,
 		"aria-controls": a,
 		"data-ui": "command-palette-input",
-		css: A
+		css: k
 	});
-}), G = g(function({ onMouseDown: e, children: t, ...n }, r) {
-	let { label: i, listId: a, matchCount: o, elementsRef: s, setListElement: c, getFloatingProps: l } = z("List"), u = D([c, r]), d = (t) => {
-		e?.(t), t.preventDefault();
+}
+U.displayName = "CommandPalette.Input";
+function W({ ref: e, onMouseDown: t, children: n, ...r }) {
+	let { label: i, listId: a, matchCount: o, elementsRef: s, setListElement: c, getFloatingProps: l } = R("List"), u = E([c, e]), d = (e) => {
+		t?.(e), e.preventDefault();
 	};
-	return /* @__PURE__ */ w("div", {
+	return /* @__PURE__ */ C("div", {
 		"aria-label": i,
 		...l({
-			...n,
+			...r,
 			onMouseDown: d
 		}),
 		ref: u,
@@ -254,76 +261,84 @@ var H = g(function({ onClick: e, ...t }, n) {
 		role: "listbox",
 		hidden: o === 0,
 		"data-ui": "command-palette-list",
-		css: j,
-		children: /* @__PURE__ */ w(E, {
+		css: A,
+		children: /* @__PURE__ */ C(T, {
 			elementsRef: s,
-			children: t
+			children: n
 		})
 	});
-}), K = g(function({ children: e, ...t }, n) {
-	let { matchCount: r, emptyMessage: a } = z("Empty");
-	return r > 0 ? null : /* @__PURE__ */ w("div", {
-		...t,
-		ref: n,
+}
+W.displayName = "CommandPalette.List";
+function G({ ref: e, children: t, ...n }) {
+	let { matchCount: r, emptyMessage: a } = R("Empty");
+	return r > 0 ? null : /* @__PURE__ */ C("div", {
+		...n,
+		ref: e,
 		"data-ui": "command-palette-empty",
-		css: F,
-		children: i(e) ? e : a
+		css: P,
+		children: i(t) ? t : a
 	});
-}), q = g(function({ label: e, children: t, "aria-labelledby": n, ...r }, i) {
-	let { visibleGroupIds: a } = z("Group"), o = y(), s = `${o}-heading`;
-	return /* @__PURE__ */ T("div", {
-		...r,
-		ref: i,
+}
+G.displayName = "CommandPalette.Empty";
+function K({ ref: e, label: t, children: n, "aria-labelledby": r, ...i }) {
+	let { visibleGroupIds: a } = R("Group"), o = v(), s = `${o}-heading`;
+	return /* @__PURE__ */ w("div", {
+		...i,
+		ref: e,
 		role: "group",
-		"aria-labelledby": [n, s].filter(Boolean).join(" "),
+		"aria-labelledby": [r, s].filter(Boolean).join(" "),
 		hidden: !a.has(o),
 		"data-ui": "command-palette-group",
-		css: M,
-		children: [/* @__PURE__ */ w("div", {
+		css: j,
+		children: [/* @__PURE__ */ C("div", {
 			id: s,
-			css: N,
-			children: e
-		}), /* @__PURE__ */ w(R.Provider, {
-			value: o,
+			css: M,
 			children: t
+		}), /* @__PURE__ */ C(L.Provider, {
+			value: o,
+			children: n
 		})]
 	});
-}), J = g(function({ value: e, onSelect: t, keywords: n, onClick: r, children: i, ...a }, l) {
-	let { baseId: u, activeIndex: d, matchedValues: f, getItemProps: p, setOpen: m, registration: h } = z("Item"), g = v(R), _ = x(null), { ref: y, index: b } = o(e, h, _, (e, t) => ({
+}
+K.displayName = "CommandPalette.Group";
+function q({ ref: e, value: t, onSelect: n, keywords: r, onClick: i, children: a, ...l }) {
+	let { baseId: u, activeIndex: d, matchedValues: f, getItemProps: p, setOpen: m, registration: h } = R("Item"), g = _(L), v = b(null), { ref: y, index: x } = o(t, h, v, (e, t) => ({
 		index: e,
 		label: t,
-		keywords: n,
+		keywords: r,
 		groupId: g
-	})), S = D([
+	})), S = E([
 		y,
-		_,
-		l
-	]), C = b !== -1 && d === b, T = (e) => {
-		r?.(e), !e.defaultPrevented && (t?.(), m(!1));
+		v,
+		e
+	]), w = x !== -1 && d === x, T = (e) => {
+		i?.(e), !e.defaultPrevented && (n?.(), m(!1));
 	};
-	return /* @__PURE__ */ w("div", {
+	return /* @__PURE__ */ C("div", {
 		...p({
-			id: c(u, e),
-			...a,
+			id: c(u, t),
+			...l,
 			onClick: T
 		}),
 		ref: S,
 		role: "option",
-		"aria-selected": C,
-		hidden: !f.has(e),
-		"data-active": C || void 0,
+		"aria-selected": w,
+		hidden: !f.has(t),
+		"data-active": w || void 0,
 		"data-ui": "command-palette-item",
-		css: [s, P],
-		children: i
+		css: [s, N],
+		children: a
 	});
-}), Y = Object.assign(V, {
-	Trigger: H,
-	Content: U,
-	Input: W,
-	List: G,
-	Empty: K,
-	Group: q,
-	Item: J
+}
+q.displayName = "CommandPalette.Item";
+var J = Object.assign(B, {
+	Trigger: V,
+	Content: H,
+	Input: U,
+	List: W,
+	Empty: G,
+	Group: K,
+	Item: q
 });
 //#endregion
-export { Y as t };
+export { J as t };

package/dist/command-palette.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as CommandPalette } from "./command-palette-6c158eH1.js";
+export { t as CommandPalette } from "./command-palette-BhJwm6cS.js";

package/dist/container-BhnrGPu-.js

@@ -0,0 +1,36 @@
+'use client';
+import { t as e } from "./css-Cgj6sCHn.js";
+import { n as t } from "./layout-style-7ZTOiWGR.js";
+import { jsx as n } from "@emotion/react/jsx-runtime";
+//#region src/components/container/container.tsx
+var r = {
+	sm: "640px",
+	md: "768px",
+	lg: "1024px",
+	xl: "1280px"
+}, i = e({
+	boxSizing: "border-box",
+	inlineSize: "100%",
+	marginInline: "auto"
+}), a = {
+	sm: e({ maxInlineSize: r.sm }),
+	md: e({ maxInlineSize: r.md }),
+	lg: e({ maxInlineSize: r.lg }),
+	xl: e({ maxInlineSize: r.xl })
+}, o = t("paddingInline");
+function s({ ref: e, size: t = "lg", paddingInline: r = "md", ...s }) {
+	return /* @__PURE__ */ n("div", {
+		...s,
+		ref: e,
+		"data-ui": "container",
+		"data-size": t,
+		css: [
+			i,
+			a[t],
+			o[r]
+		]
+	});
+}
+s.displayName = "Container";
+//#endregion
+export { s as t };

package/dist/container.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Container } from "./container-xUEIoZzj.js";
+export { t as Container } from "./container-BhnrGPu-.js";