@jfrader/ui 0.5.0 → 0.6.0

package/dist/dialog-CR1xdkrC.js

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

package/dist/dialog.js

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

package/dist/{divider-DYoJf0I_.js → divider-zOJzkcHh.js}

@@ -1,13 +1,15 @@
 'use client';
-import { r as e, t } from "./sx-Dx9JUKp5.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 } from "@emotion/react/jsx-runtime";
+import { i as e } from "./css-BYJhdGh-.js";
+import { n as t } from "./media-8yrN85VT.js";
+import { t as n } from "./sx-BJXJ2xJK.js";
+import { t as r } from "./renderable-DzcIj1Lo.js";
+import { useId as i } from "react";
+import { vars as a } from "@jfrader/tokens/vars";
+import { jsx as o } 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]: {
+var s = "1px", c = {
+	backgroundColor: a.color.border,
+	[t]: {
 		forcedColorAdjust: "none",
 		backgroundColor: "CanvasText"
 	}
@@ -28,11 +30,11 @@ var o = "@media (forced-colors: active)", s = "1px", c = {
 	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,
+	gap: a.space[3],
+	fontFamily: a.font.sans,
+	fontSize: a.textSize.sm,
+	lineHeight: a.lineHeight.tight,
+	color: a.color.textMuted,
 	"&::before, &::after": {
 		...c,
 		content: "\"\"",
@@ -40,13 +42,13 @@ var o = "@media (forced-colors: active)", s = "1px", c = {
 		blockSize: s
 	}
 });
-function f({ ref: e, orientation: i = "horizontal", label: o, "aria-labelledby": s, className: c, sx: f, ...p }) {
-	let m = r(), h = i === "vertical", g = !h && n(o);
-	return /* @__PURE__ */ a(t, {
+function f({ ref: e, orientation: t = "horizontal", label: a, "aria-labelledby": s, className: c, sx: f, ...p }) {
+	let m = i(), h = t === "vertical", g = !h && r(a);
+	return /* @__PURE__ */ o(n, {
 		className: c,
 		styles: h ? u : g ? d : l,
 		sx: f,
-		children: (t) => h ? /* @__PURE__ */ a("div", {
+		children: (t) => h ? /* @__PURE__ */ o("div", {
 			...p,
 			ref: e,
 			role: "separator",
@@ -55,7 +57,7 @@ function f({ ref: e, orientation: i = "horizontal", label: o, "aria-labelledby":
 			"data-ui": "divider",
 			"data-orientation": "vertical",
 			className: t
-		}) : g ? /* @__PURE__ */ a("div", {
+		}) : g ? /* @__PURE__ */ o("div", {
 			...p,
 			ref: e,
 			role: "separator",
@@ -64,12 +66,12 @@ function f({ ref: e, orientation: i = "horizontal", label: o, "aria-labelledby":
 			"data-ui": "divider",
 			"data-orientation": "horizontal",
 			className: t,
-			children: /* @__PURE__ */ a("span", {
+			children: /* @__PURE__ */ o("span", {
 				id: m,
 				"data-ui": "divider-label",
-				children: o
+				children: a
 			})
-		}) : /* @__PURE__ */ a("hr", {
+		}) : /* @__PURE__ */ o("hr", {
 			...p,
 			ref: e,
 			"aria-labelledby": s,

package/dist/divider.js

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