@jfrader/ui 0.1.2 → 0.3.0

package/dist/command-palette-6c158eH1.js

@@ -1,329 +0,0 @@
-'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
-import { t } from "./focus-ring-BK5W5_NY.js";
-import { t as n } from "./use-controlled-state-CVXDa-qM.js";
-import { t as r } from "./visually-hidden-DCWhf0Cb.js";
-import { t as i } from "./renderable-DzcIj1Lo.js";
-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";
-//#region src/components/command-palette/command-palette.styles.ts
-var O = e({
-	...m,
-	marginBlockStart: C.space[12]
-}), k = e({
-	...p,
-	display: "flex",
-	flexDirection: "column",
-	borderRadius: C.radius.lg,
-	boxShadow: C.shadow.floating,
-	inlineSize: "min(560px, calc(100vw - 32px))"
-}), A = 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,
-	backgroundColor: "transparent",
-	paddingInline: C.space[4],
-	font: "inherit",
-	fontSize: C.textSize.md,
-	color: C.color.text,
-	"&::placeholder": { color: C.color.textSubtle },
-	"&:focus-visible": { ...t }
-}), j = e({
-	boxSizing: "border-box",
-	display: "flex",
-	flexDirection: "column",
-	maxBlockSize: "320px",
-	overflow: "auto",
-	padding: C.space[1],
-	"&[hidden]": { display: "none" }
-}), M = e({
-	display: "flex",
-	flexDirection: "column",
-	"&[hidden]": { display: "none" }
-}), 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 },
-	"&[hidden]": { display: "none" }
-}), F = e({
-	paddingBlock: C.space[6],
-	paddingInline: C.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);
-	if (!t) throw Error(`CommandPalette.${e} must be rendered inside <CommandPalette>.`);
-	return t;
-}
-var B = (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([]);
-	f !== R && (z(f), f && (E(""), O(!1), A(null)));
-	let V = _(() => {
-		g(!(f && m.current?.open));
-	}, [
-		f,
-		g,
-		m
-	]), { matchedValues: H, matchedIndices: U, visibleGroupIds: W } = b(() => {
-		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));
-		}), t.sort((e, t) => e - t), {
-			matchedValues: e,
-			matchedIndices: t,
-			visibleGroupIds: n
-		};
-	}, [
-		j,
-		T,
-		o
-	]), G = b(() => new Set(U), [U]), K = k !== null && G.has(k) ? k : U[0] ?? null, q = ee({
-		open: f,
-		onOpenChange: (e) => g(e),
-		elements: {
-			reference: N,
-			floating: F
-		}
-	}), J = ne(q, {
-		listRef: B,
-		activeIndex: K,
-		onNavigate: (e) => {
-			e !== null && A(e);
-		},
-		virtual: !0,
-		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(() => ({
-		open: f,
-		setOpen: g,
-		toggleOpen: V,
-		requestClose: v,
-		repairToken: C,
-		setDialogElement: h,
-		label: i,
-		emptyMessage: s,
-		baseId: d,
-		listId: `${d}-list`,
-		query: T,
-		announcement: $,
-		matchCount: Q,
-		matchedValues: H,
-		visibleGroupIds: W,
-		activeIndex: K,
-		elementsRef: B,
-		setInputElement: P,
-		setListElement: I,
-		getReferenceProps: Y,
-		getFloatingProps: X,
-		getItemProps: Z,
-		changeQuery: (e) => {
-			E(e), O(!0), A(null);
-		},
-		moveToEdge: (e) => {
-			let t = e === "first" ? U[0] : U[U.length - 1];
-			t !== void 0 && A(t);
-		},
-		registration: M
-	}), [
-		f,
-		g,
-		V,
-		v,
-		C,
-		h,
-		i,
-		s,
-		d,
-		T,
-		$,
-		Q,
-		H,
-		U,
-		W,
-		K,
-		Y,
-		X,
-		Z,
-		M
-	]);
-	return /* @__PURE__ */ w(L.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();
-	};
-	return /* @__PURE__ */ w("button", {
-		type: "button",
-		...t,
-		ref: n,
-		"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, {
-		onCancel: i,
-		onClick: a,
-		onClose: o
-	}, t);
-	return /* @__PURE__ */ w("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", {
-				role: "status",
-				"aria-live": "polite",
-				"aria-atomic": "true",
-				css: r,
-				children: u
-			})]
-		})
-	});
-}), 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([
-		d,
-		B,
-		r
-	]), g = (t) => {
-		e?.(t), p(t.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()));
-	};
-	return /* @__PURE__ */ w("input", {
-		"aria-label": i,
-		autoComplete: "off",
-		spellCheck: !1,
-		...f({
-			...n,
-			onChange: g,
-			onKeyDown: _
-		}),
-		ref: h,
-		type: "text",
-		value: o,
-		role: "combobox",
-		"aria-autocomplete": "list",
-		"aria-expanded": s > 0,
-		"aria-controls": a,
-		"data-ui": "command-palette-input",
-		css: A
-	});
-}), 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();
-	};
-	return /* @__PURE__ */ w("div", {
-		"aria-label": i,
-		...l({
-			...n,
-			onMouseDown: d
-		}),
-		ref: u,
-		id: a,
-		role: "listbox",
-		hidden: o === 0,
-		"data-ui": "command-palette-list",
-		css: j,
-		children: /* @__PURE__ */ w(E, {
-			elementsRef: s,
-			children: t
-		})
-	});
-}), K = g(function({ children: e, ...t }, n) {
-	let { matchCount: r, emptyMessage: a } = z("Empty");
-	return r > 0 ? null : /* @__PURE__ */ w("div", {
-		...t,
-		ref: n,
-		"data-ui": "command-palette-empty",
-		css: F,
-		children: i(e) ? e : 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,
-		role: "group",
-		"aria-labelledby": [n, s].filter(Boolean).join(" "),
-		hidden: !a.has(o),
-		"data-ui": "command-palette-group",
-		css: M,
-		children: [/* @__PURE__ */ w("div", {
-			id: s,
-			css: N,
-			children: e
-		}), /* @__PURE__ */ w(R.Provider, {
-			value: o,
-			children: t
-		})]
-	});
-}), 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) => ({
-		index: e,
-		label: t,
-		keywords: n,
-		groupId: g
-	})), S = D([
-		y,
-		_,
-		l
-	]), C = b !== -1 && d === b, T = (e) => {
-		r?.(e), !e.defaultPrevented && (t?.(), m(!1));
-	};
-	return /* @__PURE__ */ w("div", {
-		...p({
-			id: c(u, e),
-			...a,
-			onClick: T
-		}),
-		ref: S,
-		role: "option",
-		"aria-selected": C,
-		hidden: !f.has(e),
-		"data-active": C || void 0,
-		"data-ui": "command-palette-item",
-		css: [s, P],
-		children: i
-	});
-}), Y = Object.assign(V, {
-	Trigger: H,
-	Content: U,
-	Input: W,
-	List: G,
-	Empty: K,
-	Group: q,
-	Item: J
-});
-//#endregion
-export { Y as t };

package/dist/container-xUEIoZzj.js

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

package/dist/css-Cgj6sCHn.js

@@ -1,2 +0,0 @@
-'use client';
-export { keyframes as n, css as t } from "@emotion/react";

package/dist/dialog-C2NSOOP-.js

@@ -1,176 +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 "./use-controlled-state-CVXDa-qM.js";
-import { t as i } from "./trigger-style-B1GFmH7M.js";
-import { i as a, n as o, r as s, t as c } from "./use-native-dialog-DWpIUVO1.js";
-import { n as l, t as u } from "./surface-DZ4d-2aL.js";
-import { createContext as d, forwardRef as f, useCallback as p, useContext as m, useEffect as h, useId as g, useMemo as _, useRef as v, useState as y } from "react";
-import { vars as b } from "@jfrader/tokens/vars";
-import { jsx as x } from "@emotion/react/jsx-runtime";
-//#region src/components/dialog/dialog.tsx
-var S = d(null), C = d(null);
-function w(e) {
-	let t = m(S);
-	if (!t) throw Error(`Dialog.${e} must be rendered inside <Dialog>.`);
-	return t;
-}
-var T = e(u), E = e({
-	...l,
-	borderRadius: b.radius.lg,
-	boxShadow: b.shadow.floating,
-	padding: b.space[5],
-	minInlineSize: "320px",
-	maxInlineSize: "min(560px, calc(100vw - 32px))"
-}), D = e({
-	margin: 0,
-	marginBlockEnd: b.space[2],
-	fontSize: b.textSize.lg,
-	fontWeight: b.fontWeight.semibold,
-	lineHeight: b.lineHeight.tight
-}), O = e({
-	margin: 0,
-	marginBlockEnd: b.space[4],
-	fontSize: b.textSize.sm,
-	color: b.color.textMuted
-}), k = e({
-	appearance: "none",
-	display: "inline-flex",
-	alignItems: "center",
-	border: "1px solid transparent",
-	borderRadius: b.radius.md,
-	backgroundColor: "transparent",
-	paddingBlock: b.space[1],
-	paddingInline: b.space[3],
-	font: "inherit",
-	fontSize: b.textSize.sm,
-	fontWeight: b.fontWeight.medium,
-	color: b.color.textMuted,
-	cursor: "pointer",
-	transitionProperty: "background-color, color",
-	transitionDuration: b.motion.duration.fast,
-	transitionTimingFunction: b.motion.easeStandard,
-	"&:hover:not(:disabled)": {
-		backgroundColor: b.color.surfaceHover,
-		color: b.color.text
-	},
-	"&:focus-visible": { ...t },
-	"&:disabled": {
-		opacity: .55,
-		cursor: "not-allowed"
-	},
-	[n]: { transitionDuration: "0s" }
-});
-function A({ open: e, defaultOpen: t = !1, onOpenChange: n, children: i }) {
-	let o = g(), [s = !1, c] = r(e, t, n), { setDialogElement: l, setOpen: u, requestClose: d, repairToken: f } = a(s, c), [p, m] = y(!1), [h, v] = y(!1), b = _(() => ({
-		open: s,
-		setOpen: u,
-		requestClose: d,
-		repairToken: f,
-		setDialogElement: l,
-		titleId: `${o}-title`,
-		descriptionId: `${o}-description`,
-		hasTitle: p,
-		hasDescription: h,
-		setHasTitle: m,
-		setHasDescription: v
-	}), [
-		s,
-		u,
-		d,
-		f,
-		l,
-		o,
-		p,
-		h
-	]);
-	return /* @__PURE__ */ x(S.Provider, {
-		value: b,
-		children: i
-	});
-}
-var j = f(function({ onClick: e, render: t, ...n }, r) {
-	let { open: a, setOpen: o } = w("Trigger"), { "data-ui": s, ...c } = n, l = e, u = (e) => {
-		l?.(e), e.defaultPrevented || o(!0);
-	}, d = {
-		type: "button",
-		...c,
-		ref: r,
-		"data-ui": t && s !== void 0 ? `${s} dialog-trigger` : "dialog-trigger",
-		"aria-haspopup": "dialog",
-		"aria-expanded": a,
-		onClick: u
-	};
-	return t ? t(d) : /* @__PURE__ */ x("button", {
-		...d,
-		css: i
-	});
-}), M = f(function(e, t) {
-	let { children: n, onCancel: r, onClick: i, onClose: a, "aria-labelledby": l, "aria-describedby": u, withDescription: d = !0, ...f } = c(e), m = w("Content"), { setOpen: h, titleId: g, descriptionId: _, hasTitle: y, hasDescription: b } = m, S = v(null), D = p(() => {
-		o(S.current, h);
-	}, [h]), O = s({
-		...m,
-		requestClose: D
-	}, {
-		onCancel: r,
-		onClick: i,
-		onClose: a
-	}, t, S), k = [l, y && g].filter(Boolean).join(" ") || void 0, A = [u, d && b && _].filter(Boolean).join(" ") || void 0;
-	return /* @__PURE__ */ x("dialog", {
-		...f,
-		...O,
-		"data-ui": "dialog",
-		"aria-modal": "true",
-		"aria-labelledby": k,
-		"aria-describedby": A,
-		css: T,
-		children: /* @__PURE__ */ x(C.Provider, {
-			value: D,
-			children: /* @__PURE__ */ x("div", {
-				css: E,
-				children: n
-			})
-		})
-	});
-}), N = f(function(e, t) {
-	let { titleId: n, setHasTitle: r } = w("Title");
-	return h(() => (r(!0), () => r(!1)), [r]), /* @__PURE__ */ x("h2", {
-		...e,
-		ref: t,
-		id: n,
-		"data-ui": "dialog-title",
-		css: D
-	});
-}), P = f(function(e, t) {
-	let { descriptionId: n, setHasDescription: r } = w("Description");
-	return h(() => (r(!0), () => r(!1)), [r]), /* @__PURE__ */ x("p", {
-		...e,
-		ref: t,
-		id: n,
-		"data-ui": "dialog-description",
-		css: O
-	});
-}), F = f(function({ onClick: e, render: t, ...n }, r) {
-	let { setOpen: i } = w("Close"), a = m(C), { "data-ui": o, ...s } = n, c = e, l = (e) => {
-		c?.(e), !e.defaultPrevented && (a ? a() : i(!1));
-	}, u = {
-		type: "button",
-		...s,
-		ref: r,
-		"data-ui": t && o !== void 0 ? `${o} dialog-close` : "dialog-close",
-		onClick: l
-	};
-	return t ? t(u) : /* @__PURE__ */ x("button", {
-		...u,
-		css: k
-	});
-}), I = Object.assign(A, {
-	Trigger: j,
-	Content: M,
-	Title: N,
-	Description: P,
-	Close: F
-});
-//#endregion
-export { I as t };

package/dist/divider-yF5EmhhT.js

@@ -1,77 +0,0 @@
-'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
-import { t } from "./renderable-DzcIj1Lo.js";
-import { forwardRef as n, useId as r } from "react";
-import { vars as i } from "@jfrader/tokens/vars";
-import { jsx as a } from "@emotion/react/jsx-runtime";
-//#region src/components/divider/divider.tsx
-var o = "@media (forced-colors: active)", s = "1px", c = {
-	backgroundColor: i.color.border,
-	[o]: {
-		forcedColorAdjust: "none",
-		backgroundColor: "CanvasText"
-	}
-}, l = e({
-	...c,
-	boxSizing: "border-box",
-	alignSelf: "stretch",
-	blockSize: s,
-	margin: 0,
-	border: 0
-}), u = e({
-	...c,
-	boxSizing: "border-box",
-	alignSelf: "stretch",
-	flexShrink: 0,
-	inlineSize: s
-}), d = e({
-	display: "flex",
-	alignItems: "center",
-	alignSelf: "stretch",
-	gap: i.space[3],
-	fontFamily: i.font.sans,
-	fontSize: i.textSize.sm,
-	lineHeight: i.lineHeight.tight,
-	color: i.color.textMuted,
-	"&::before, &::after": {
-		...c,
-		content: "\"\"",
-		flex: 1,
-		blockSize: s
-	}
-}), f = n(function({ orientation: e = "horizontal", label: n, "aria-labelledby": i, ...o }, s) {
-	let c = r();
-	return e === "vertical" ? /* @__PURE__ */ a("div", {
-		...o,
-		ref: s,
-		role: "separator",
-		"aria-orientation": "vertical",
-		"aria-labelledby": i,
-		"data-ui": "divider",
-		"data-orientation": "vertical",
-		css: u
-	}) : t(n) ? /* @__PURE__ */ a("div", {
-		...o,
-		ref: s,
-		role: "separator",
-		"aria-orientation": "horizontal",
-		"aria-labelledby": [c, i].filter(Boolean).join(" "),
-		"data-ui": "divider",
-		"data-orientation": "horizontal",
-		css: d,
-		children: /* @__PURE__ */ a("span", {
-			id: c,
-			"data-ui": "divider-label",
-			children: n
-		})
-	}) : /* @__PURE__ */ a("hr", {
-		...o,
-		ref: s,
-		"aria-labelledby": i,
-		"data-ui": "divider",
-		"data-orientation": "horizontal",
-		css: l
-	});
-});
-//#endregion
-export { f as t };