@jfrader/ui 0.2.0 → 0.4.0

package/dist/dialog-fhS07G41.js

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

package/dist/divider-v_78HYF5.js

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

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-COZzFqI8.js

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

package/dist/kbd-CeP8Kfvp.js

@@ -1,61 +0,0 @@
-'use client';
-import { t as e } from "./css-Cgj6sCHn.js";
-import { Children as t, Fragment as n } from "react";
-import { vars as r } from "@jfrader/tokens/vars";
-import { jsx as i, jsxs as a } from "@emotion/react/jsx-runtime";
-//#region src/components/kbd/kbd.tsx
-var o = "+", s = e({
-	display: "inline-flex",
-	alignItems: "center",
-	boxSizing: "border-box",
-	paddingBlock: "2px",
-	paddingInline: "6px",
-	backgroundColor: r.color.surfaceHover,
-	border: `1px solid ${r.color.borderSubtle}`,
-	borderBlockEndColor: r.color.borderStrong,
-	borderBlockEndWidth: "2px",
-	borderRadius: r.radius.sm,
-	fontFamily: r.font.mono,
-	fontSize: r.textSize.xs,
-	fontWeight: r.fontWeight.medium,
-	lineHeight: r.lineHeight.tight,
-	color: r.color.text,
-	whiteSpace: "nowrap",
-	verticalAlign: "middle"
-}), c = e({
-	display: "inline-flex",
-	alignItems: "center",
-	gap: r.space[1],
-	verticalAlign: "middle"
-}), l = e({
-	fontFamily: r.font.sans,
-	fontSize: r.textSize.xs,
-	color: r.color.textMuted
-});
-function u({ ref: e, ...t }) {
-	return /* @__PURE__ */ i("kbd", {
-		...t,
-		ref: e,
-		"data-ui": "kbd",
-		css: s
-	});
-}
-u.displayName = "Kbd";
-function d({ ref: e, children: r, ...s }) {
-	return /* @__PURE__ */ i("span", {
-		...s,
-		ref: e,
-		"data-ui": "kbd-group",
-		css: c,
-		children: t.toArray(r).map((e, t) => /* @__PURE__ */ a(n, { children: [t > 0 && /* @__PURE__ */ i("span", {
-			"aria-hidden": !0,
-			"data-ui": "kbd-separator",
-			css: l,
-			children: o
-		}), e] }, t))
-	});
-}
-d.displayName = "Kbd.Group";
-var f = Object.assign(u, { Group: d });
-//#endregion
-export { f as t };

package/dist/menu-B6KCbLCr.js

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