@jfrader/ui 0.0.0-stage → 0.1.1

package/dist/dialog-CYf9fCZO.js

@@ -0,0 +1,175 @@
+import { t as e } from "./css-CW_HG55W.js";
+import { n as t } from "./focus-ring-qOS3rPlM.js";
+import { n } from "./media-8K3xDAxM.js";
+import { t as r } from "./use-controlled-state-DQXkiTQI.js";
+import { t as i } from "./trigger-style-f54idgjT.js";
+import { i as a, n as o, r as s, t as c } from "./use-native-dialog-BCp1chwO.js";
+import { n as l, t as u } from "./surface-Bo_aSQOb.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/dialog.js

@@ -0,0 +1 @@
+export { t as Dialog } from "./dialog-CYf9fCZO.js";

package/dist/disclosure-caret-BC6P8AsM.js

@@ -0,0 +1,13 @@
+import { vars as e } from "@jfrader/tokens/vars";
+//#region src/styling/disclosure-caret.ts
+var t = {
+	content: "\"\"",
+	flexShrink: 0,
+	borderBlock: `${e.space[1]} solid transparent`,
+	borderInlineStart: `calc(${e.space[1]} * 1.5) solid currentColor`,
+	transitionProperty: "transform",
+	transitionDuration: e.motion.duration.base,
+	transitionTimingFunction: e.motion.easeStandard
+};
+//#endregion
+export { t };

package/dist/divider-bi7OgCI5.js

@@ -0,0 +1,76 @@
+import { t as e } from "./css-CW_HG55W.js";
+import { t } from "./renderable-DwPvt1I8.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 };

package/dist/divider.js

@@ -0,0 +1 @@
+export { t as Divider } from "./divider-bi7OgCI5.js";

package/dist/field-anatomy-DKkB268x.js

@@ -0,0 +1,104 @@
+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";
+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-CDFDDaiu.js

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

package/dist/flex.js

@@ -0,0 +1 @@
+export { t as Flex } from "./flex-CDFDDaiu.js";

package/dist/focus-ring-qOS3rPlM.js

@@ -0,0 +1,11 @@
+import { vars as e } from "@jfrader/tokens/vars";
+//#region src/styling/focus-ring.ts
+var t = {
+	outline: `2px solid ${e.color.focusRing}`,
+	outlineOffset: "2px"
+}, n = {
+	outline: `2px solid ${e.color.focusRing}`,
+	outlineOffset: "-2px"
+};
+//#endregion
+export { t as n, n as t };

package/dist/icon-wrapper-BKo4FI-O.js

@@ -0,0 +1,12 @@
+import { t as e } from "./css-CW_HG55W.js";
+//#region src/styling/icon-wrapper.ts
+var t = e({
+	display: "inline-flex",
+	flexShrink: 0,
+	"& svg": {
+		inlineSize: "1em",
+		blockSize: "1em"
+	}
+});
+//#endregion
+export { t };

package/dist/index.js

@@ -0,0 +1,37 @@
+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";
+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-DpiJgDJ2.js

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

package/dist/kbd.js

@@ -0,0 +1 @@
+export { t as Kbd } from "./kbd-DpiJgDJ2.js";

package/dist/layout-style-B_6YHQ6Q.js

@@ -0,0 +1,56 @@
+import { t as e } from "./css-CW_HG55W.js";
+import { vars as t } from "@jfrader/tokens/vars";
+//#region src/styling/layout-style.ts
+var n = [
+	"none",
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+], r = {
+	xs: 1,
+	sm: 2,
+	md: 4,
+	lg: 6,
+	xl: 8
+};
+function i(e) {
+	return e === "none" ? "0" : t.space[r[e]];
+}
+function a(t) {
+	return Object.fromEntries(n.map((n) => [n, e({ [t]: i(n) })]));
+}
+var o = e({
+	boxSizing: "border-box",
+	display: "flex"
+}), s = e({ display: "inline-flex" }), c = e({ flexWrap: "wrap" }), l = {
+	row: e({ flexDirection: "row" }),
+	column: e({ flexDirection: "column" })
+}, u = {
+	start: e({ alignItems: "flex-start" }),
+	center: e({ alignItems: "center" }),
+	end: e({ alignItems: "flex-end" }),
+	baseline: e({ alignItems: "baseline" }),
+	stretch: e({ alignItems: "stretch" })
+}, d = {
+	start: e({ justifyContent: "flex-start" }),
+	center: e({ justifyContent: "center" }),
+	end: e({ justifyContent: "flex-end" }),
+	between: e({ justifyContent: "space-between" }),
+	around: e({ justifyContent: "space-around" }),
+	evenly: e({ justifyContent: "space-evenly" })
+}, f = a("gap");
+function p({ direction: e = "row", wrap: t = !1, inline: n = !1, align: r = "stretch", justify: i = "start", gap: a = "none" }) {
+	return [
+		o,
+		n && s,
+		t && c,
+		l[e],
+		u[r],
+		d[i],
+		f[a]
+	];
+}
+//#endregion
+export { a as n, p as t };

package/dist/loading-ring-CTpT-IrT.js

@@ -0,0 +1,18 @@
+import { n as e } from "./css-CW_HG55W.js";
+import { vars as t } from "@jfrader/tokens/vars";
+//#region src/styling/loading-ring.ts
+var n = e({
+	from: { transform: "rotate(0deg)" },
+	to: { transform: "rotate(360deg)" }
+}), r = e({
+	from: { opacity: 1 },
+	to: { opacity: .35 }
+}), i = {
+	display: "inline-block",
+	border: "2px solid currentColor",
+	borderInlineEndColor: "transparent",
+	borderRadius: t.radius.full,
+	animation: `${n} 0.7s linear infinite`
+};
+//#endregion
+export { r as n, i as t };

package/dist/media-8K3xDAxM.js

@@ -0,0 +1,4 @@
+//#region src/styling/media.ts
+var e = "@media (prefers-reduced-motion: reduce)", t = "@media (forced-colors: active)";
+//#endregion
+export { e as n, t };