@jfrader/ui 0.1.1 → 0.2.0

package/dist/dialog-fhS07G41.js

@@ -0,0 +1,187 @@
+'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/dialog.js

@@ -1 +1,2 @@
-export { t as Dialog } from "./dialog-CYf9fCZO.js";
+'use client';
+export { t as Dialog } from "./dialog-fhS07G41.js";

package/dist/{disclosure-caret-BC6P8AsM.js → disclosure-caret-C5T3fcl6.js}

@@ -1,3 +1,4 @@
+'use client';
 import { vars as e } from "@jfrader/tokens/vars";
 //#region src/styling/disclosure-caret.ts
 var t = {

package/dist/divider-v_78HYF5.js

@@ -0,0 +1,79 @@
+'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/divider.js

@@ -1 +1,2 @@
-export { t as Divider } from "./divider-bi7OgCI5.js";
+'use client';
+export { t as Divider } from "./divider-v_78HYF5.js";

package/dist/{field-anatomy-DKkB268x.js → field-anatomy-BzGw1Ch9.js}

@@ -1,6 +1,7 @@
-import { t as e } from "./css-CW_HG55W.js";
-import { n as t } from "./media-8K3xDAxM.js";
-import { t as n } from "./renderable-DwPvt1I8.js";
+'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";

package/dist/flex-COZzFqI8.js

@@ -0,0 +1,22 @@
+'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/flex.js

@@ -1 +1,2 @@
-export { t as Flex } from "./flex-CDFDDaiu.js";
+'use client';
+export { t as Flex } from "./flex-COZzFqI8.js";

package/dist/{focus-ring-qOS3rPlM.js → focus-ring-BK5W5_NY.js}

@@ -1,3 +1,4 @@
+'use client';
 import { vars as e } from "@jfrader/tokens/vars";
 //#region src/styling/focus-ring.ts
 var t = {

package/dist/{icon-wrapper-BKo4FI-O.js → icon-wrapper-CFWzew5m.js}

@@ -1,4 +1,5 @@
-import { t as e } from "./css-CW_HG55W.js";
+'use client';
+import { t as e } from "./css-Cgj6sCHn.js";
 //#region src/styling/icon-wrapper.ts
 var t = e({
 	display: "inline-flex",

package/dist/index.js

@@ -1,37 +1,38 @@
-import { t as e } from "./accordion-Dl-kvgPQ.js";
-import { t } from "./alert-BzntPa_5.js";
-import { t as n } from "./avatar-Dk2ES3ru.js";
-import { t as r } from "./badge-DZefC7rm.js";
-import { t as i } from "./breadcrumbs-5MCZ_Jr3.js";
-import { t as a } from "./button-qy-50NPd.js";
-import { t as o } from "./calendar-DcCAiN3b.js";
-import { t as s } from "./card-L-Z_1vZN.js";
-import { t as c } from "./checkbox-B7em7B-6.js";
-import { t as l } from "./command-palette-BRJ8A5De.js";
-import { t as u } from "./text-field-BlP8qGn_.js";
-import { t as d } from "./combobox-DQcXR94r.js";
-import { t as f } from "./container-COHiEjI8.js";
-import { t as p } from "./date-picker-D1GwiRB9.js";
-import { t as m } from "./dialog-CYf9fCZO.js";
-import { t as h } from "./divider-bi7OgCI5.js";
-import { t as g } from "./flex-CDFDDaiu.js";
-import { t as _ } from "./kbd-DpiJgDJ2.js";
-import { t as v } from "./menu-A9fZUaAG.js";
-import { t as y } from "./navigation-Cemnmc_J.js";
-import { t as b } from "./pagination-orCjUsn_.js";
-import { t as x } from "./pill-Dg2JJHHW.js";
-import { t as S } from "./popover-D_YU34WS.js";
-import { t as C } from "./progress-XdvBG0Vv.js";
-import { t as w } from "./radio-group-CxMJ2Vq7.js";
-import { t as T } from "./select-mwFbmzsn.js";
-import { t as E } from "./skeleton-qas9ZKK9.js";
-import { t as D } from "./spinner-ros2CfIf.js";
-import { t as O } from "./stack-Hs8THnIL.js";
-import { t as k } from "./switch-E375Bz4X.js";
-import { t as A } from "./tabs-CBwRiuul.js";
-import { t as j } from "./textarea-CUG26CH2.js";
-import { t as M } from "./theme-root-CrdzwfSo.js";
-import { n as N, t as P } from "./toast-D_dnqnn-.js";
-import { t as F } from "./toggle-group-B7gXCea8.js";
-import { t as I } from "./tooltip-BJ2hLV1b.js";
+'use client';
+import { t as e } from "./accordion-CkOZ-tvs.js";
+import { t } from "./alert-Dsjx14UW.js";
+import { t as n } from "./avatar-BRGKkoSr.js";
+import { t as r } from "./badge-DLxUMsCx.js";
+import { t as i } from "./breadcrumbs-694hF_hm.js";
+import { t as a } from "./button-CoaIcykB.js";
+import { t as o } from "./calendar-Doj7PTdG.js";
+import { t as s } from "./card-2IM71XZj.js";
+import { t as c } from "./checkbox-B7xGNFzp.js";
+import { t as l } from "./command-palette-BhJwm6cS.js";
+import { t as u } from "./text-field-8PQAqRpM.js";
+import { t as d } from "./combobox-Bjhxv5U3.js";
+import { t as f } from "./container-BhnrGPu-.js";
+import { t as p } from "./date-picker-Jk8SpoiO.js";
+import { t as m } from "./dialog-fhS07G41.js";
+import { t as h } from "./divider-v_78HYF5.js";
+import { t as g } from "./flex-COZzFqI8.js";
+import { t as _ } from "./kbd-CeP8Kfvp.js";
+import { t as v } from "./menu-B6KCbLCr.js";
+import { t as y } from "./navigation-BDht6S2-.js";
+import { t as b } from "./pagination-B50PCaDU.js";
+import { t as x } from "./pill-2_XzBdkD.js";
+import { t as S } from "./popover-DRHbeIVq.js";
+import { t as C } from "./progress-CpsskKTD.js";
+import { t as w } from "./radio-group-DPI5KUCj.js";
+import { t as T } from "./select-C1xGrOhT.js";
+import { t as E } from "./skeleton-DitdP-yz.js";
+import { t as D } from "./spinner-CFq5HPoo.js";
+import { t as O } from "./stack-D_g6NJzo.js";
+import { t as k } from "./switch-B5TTU-oJ.js";
+import { t as A } from "./tabs-C26PWl2c.js";
+import { t as j } from "./textarea-CcGWuntL.js";
+import { t as M } from "./theme-root-BRLIA4eb.js";
+import { n as N, t as P } from "./toast-B1PXuwZ4.js";
+import { t as F } from "./toggle-group-N_owicT0.js";
+import { t as I } from "./tooltip-BJPisf60.js";
 export { e as Accordion, t as Alert, n as Avatar, r as Badge, i as Breadcrumbs, a as Button, o as Calendar, s as Card, c as Checkbox, d as Combobox, l as CommandPalette, f as Container, p as DatePicker, m as Dialog, h as Divider, g as Flex, _ as Kbd, v as Menu, y as Navigation, b as Pagination, x as Pill, S as Popover, C as Progress, w as RadioGroup, T as Select, E as Skeleton, D as Spinner, O as Stack, k as Switch, A as Tabs, u as TextField, j as Textarea, M as ThemeRoot, P as Toast, F as ToggleGroup, I as Tooltip, N as useToast };

package/dist/kbd-CeP8Kfvp.js

@@ -0,0 +1,61 @@
+'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/kbd.js

@@ -1 +1,2 @@
-export { t as Kbd } from "./kbd-DpiJgDJ2.js";
+'use client';
+export { t as Kbd } from "./kbd-CeP8Kfvp.js";

package/dist/{layout-style-B_6YHQ6Q.js → layout-style-7ZTOiWGR.js}

@@ -1,4 +1,5 @@
-import { t as e } from "./css-CW_HG55W.js";
+'use client';
+import { t as e } from "./css-Cgj6sCHn.js";
 import { vars as t } from "@jfrader/tokens/vars";
 //#region src/styling/layout-style.ts
 var n = [

package/dist/{loading-ring-CTpT-IrT.js → loading-ring-BpdB0aFi.js}

@@ -1,4 +1,5 @@
-import { n as e } from "./css-CW_HG55W.js";
+'use client';
+import { n as e } from "./css-Cgj6sCHn.js";
 import { vars as t } from "@jfrader/tokens/vars";
 //#region src/styling/loading-ring.ts
 var n = e({

package/dist/{media-8K3xDAxM.js → media-D_eA_I-e.js}

@@ -1,3 +1,4 @@
+'use client';
 //#region src/styling/media.ts
 var e = "@media (prefers-reduced-motion: reduce)", t = "@media (forced-colors: active)";
 //#endregion