@jfrader/ui 0.1.1 → 0.2.0

package/dist/date-picker-D1GwiRB9.js

@@ -1,239 +0,0 @@
-import { t as e } from "./css-CW_HG55W.js";
-import { t } from "./use-controlled-state-DQXkiTQI.js";
-import { t as n } from "./renderable-DwPvt1I8.js";
-import { t as r } from "./calendar-DcCAiN3b.js";
-import { n as i } from "./surface-Bo_aSQOb.js";
-import { t as a } from "./use-overlay-floating-CsZd3qxa.js";
-import { t as o } from "./text-field-BlP8qGn_.js";
-import { createContext as s, forwardRef as c, useContext as l, useEffect as u, useId as d, useLayoutEffect as f, useMemo as p, useRef as m, useState as h } from "react";
-import { vars as g } from "@jfrader/tokens/vars";
-import { jsx as _, jsxs as v } from "@emotion/react/jsx-runtime";
-import { FloatingFocusManager as y, FloatingPortal as b, useClick as x, useDismiss as S, useInteractions as C, useMergeRefs as w, useRole as T } from "@floating-ui/react";
-//#region src/components/date-picker/date-picker.tsx
-var E = "bottom-start", D = /* @__PURE__ */ new Set(["Enter", "ArrowDown"]), O = " ", k = "[data-ui=\"calendar-day\"][tabindex=\"0\"]", A = "[data-ui=\"calendar-day\"]", j = /^\d{4}-\d{2}-\d{2}$/, M = {
-	calendar: "gregory",
-	timeZone: "UTC",
-	dateStyle: "medium"
-}, N = s(null);
-function P(e) {
-	let t = l(N);
-	if (!t) throw Error(`DatePicker.${e} must be rendered inside <DatePicker>.`);
-	return t;
-}
-var F = (e, t) => String(e).padStart(t, "0"), I = (e, t, n) => `${F(e, 4)}-${F(t, 2)}-${F(n, 2)}`;
-function L(e) {
-	if (e === void 0 || !j.test(e)) return;
-	let [t = NaN, n = NaN, r = NaN] = e.split("-").map(Number), i = new Date(Date.UTC(0, 0, 1));
-	return i.setUTCFullYear(t, n - 1, r), I(i.getUTCFullYear(), i.getUTCMonth() + 1, i.getUTCDate()) === e ? i : void 0;
-}
-var R = (e) => L(e) ? e : void 0;
-function ee(e, t, n) {
-	return t !== void 0 && e < t ? t : n !== void 0 && e > n ? n : e;
-}
-function te() {
-	let e = /* @__PURE__ */ new Date();
-	return I(e.getFullYear(), e.getMonth() + 1, e.getDate());
-}
-var ne = () => typeof navigator > "u" ? void 0 : navigator.language;
-function re(e, t) {
-	let n = new Intl.DisplayNames(t, { type: "dateTimeField" });
-	return e.formatToParts(/* @__PURE__ */ new Date(0)).map((e) => e.type === "literal" ? e.value : n.of(e.type) ?? e.value).join("");
-}
-function z(e) {
-	let t = e?.querySelector(k) ?? null;
-	return t?.focus({ preventScroll: !0 }), t;
-}
-var B = e({
-	cursor: "pointer",
-	"&:disabled": { cursor: "not-allowed" }
-}), V = e({
-	...i,
-	borderRadius: g.radius.md,
-	boxShadow: g.shadow.overlay,
-	padding: g.space[3]
-});
-function H({ value: e, defaultValue: n, onValueChange: r, open: i, defaultOpen: o = !1, onOpenChange: s, min: c, max: l, locale: d, firstDayOfWeek: f, disabled: g = !1, name: y, placeholder: b, children: w }) {
-	let [D, O] = t(e, n, r), [k = !1, A] = t(i, o, s), [j, P] = h(!1), F = g || j, I = k && !F, [z, B] = h(null), V = m(null), H = m(!1), U = p(() => new Intl.DateTimeFormat(d ?? ne()).resolvedOptions().locale, [d]), W = p(() => new Intl.DateTimeFormat(U, M), [U]), G = p(() => re(W, U), [W, U]), K = L(D), q = K ? W.format(K) : "", J = R(c), Y = R(l), X = ee(R(D) ?? te(), J, Y).slice(0, 7), { refs: Z, floatingStyles: Q, context: $ } = a({
-		open: I,
-		placement: E,
-		onOpenChange: (e, t, n) => {
-			F && e || (e || (H.current = n === "escape-key"), A(e));
-		}
-	});
-	u(() => {
-		F && (H.current = !1, k && A(!1));
-	}, [
-		F,
-		k,
-		A
-	]), u(() => {
-		!F && !I && H.current && (H.current = !1, Z.domReference.current?.focus());
-	}, [
-		F,
-		I,
-		Z
-	]);
-	let ie = x($, {
-		enabled: !F,
-		keyboardHandlers: !1
-	}), ae = S($, {
-		escapeKey: !0,
-		outsidePress: !0
-	}), oe = T($, { role: "dialog" }), { getReferenceProps: se, getFloatingProps: ce } = C([
-		ie,
-		ae,
-		oe
-	]), le = p(() => ({
-		open: I,
-		disabled: F,
-		value: D,
-		displayValue: q,
-		placeholder: b ?? G,
-		initialMonth: X,
-		min: J,
-		max: Y,
-		locale: U,
-		firstDayOfWeek: f,
-		inputLabelling: z,
-		gridRef: V,
-		refs: Z,
-		floatingContext: $,
-		floatingStyles: Q,
-		getReferenceProps: se,
-		getFloatingProps: ce,
-		requestOpenChange: (e) => {
-			F && e || A(e);
-		},
-		selectDate: (e) => {
-			F || (O(e), H.current = !0, A(!1));
-		},
-		setInputLabelling: B,
-		setInputDisabled: P
-	}), [
-		I,
-		F,
-		D,
-		q,
-		b,
-		G,
-		X,
-		J,
-		Y,
-		U,
-		f,
-		z,
-		Z,
-		$,
-		Q,
-		se,
-		ce,
-		A,
-		O
-	]);
-	return /* @__PURE__ */ v(N.Provider, {
-		value: le,
-		children: [w, y !== void 0 && /* @__PURE__ */ _("input", {
-			type: "hidden",
-			name: y,
-			value: D ?? "",
-			disabled: F
-		})]
-	});
-}
-var U = c(function({ label: e, id: t, disabled: r, slotProps: i, onKeyDown: a, onKeyUp: s, ...c }, l) {
-	let { open: u, disabled: p, displayValue: m, placeholder: h, gridRef: g, refs: v, getReferenceProps: y, requestOpenChange: b, setInputLabelling: x, setInputDisabled: S } = P("Input"), C = w([v.setReference, l]), T = d(), E = t ?? T, k = `${E}-label`, A = n(e), j = c["aria-labelledby"], M = c["aria-label"], N = M ?? (typeof e == "string" ? e : void 0), F = p || r === !0;
-	f(() => (S(r === !0), () => S(!1)), [r, S]), f(() => (x(j === void 0 ? M === void 0 ? typeof e == "string" ? { label: e } : { labelledBy: A ? k : void 0 } : { label: M } : { labelledBy: j }), () => x(null)), [
-		j,
-		M,
-		e,
-		A,
-		k,
-		x
-	]);
-	let I = () => {
-		F || (u ? z(g.current) : b(!0));
-	}, L = (e) => {
-		a?.(e), !(e.defaultPrevented || F) && (e.key === O ? e.preventDefault() : D.has(e.key) && (e.preventDefault(), I()));
-	}, R = (e) => {
-		s?.(e), !(e.defaultPrevented || F || e.key !== O) && I();
-	};
-	return /* @__PURE__ */ _(o, {
-		...y({
-			...c,
-			onKeyDown: L,
-			onKeyUp: R
-		}),
-		ref: C,
-		id: E,
-		label: A ? /* @__PURE__ */ _("span", {
-			id: k,
-			children: e
-		}) : e,
-		slotProps: {
-			...i,
-			control: {
-				...i?.control,
-				css: [B, i?.control?.css]
-			}
-		},
-		value: m,
-		placeholder: h,
-		disabled: F,
-		readOnly: !0,
-		role: "combobox",
-		"aria-label": N,
-		"aria-autocomplete": "none",
-		"data-state": u ? "open" : "closed",
-		"data-ui": "date-picker-input"
-	});
-}), W = c(function({ style: e, ...t }, n) {
-	let { open: i, value: a, initialMonth: o, min: s, max: c, locale: l, firstDayOfWeek: u, inputLabelling: d, gridRef: f, refs: p, floatingContext: h, floatingStyles: g, getFloatingProps: x, selectDate: S } = P("Popup"), C = w([p.setFloating, n]), T = m(null), E = w([(e) => {
-		f.current = e, T.current = z(e);
-	}]);
-	if (!i) return null;
-	let D = t["aria-labelledby"] !== void 0 || t["aria-label"] !== void 0 ? {} : d?.labelledBy === void 0 ? { "aria-label": d?.label } : { "aria-labelledby": d.labelledBy }, O = (e) => {
-		let t = e.target.closest(A);
-		if (t?.disabled) return;
-		let n = t?.dataset.date;
-		n !== void 0 && S(n);
-	}, k = (e) => {
-		e.target.closest(A)?.disabled && e.preventDefault();
-	};
-	return /* @__PURE__ */ _(b, { children: /* @__PURE__ */ _(y, {
-		context: h,
-		modal: !1,
-		initialFocus: T,
-		returnFocus: !1,
-		children: /* @__PURE__ */ _("div", {
-			...x({
-				...D,
-				...t
-			}),
-			ref: C,
-			"data-ui": "date-picker-popup",
-			style: {
-				...e,
-				...g
-			},
-			css: V,
-			children: /* @__PURE__ */ v(r, {
-				value: a ?? "",
-				defaultVisibleMonth: o,
-				min: s,
-				max: c,
-				locale: l,
-				firstDayOfWeek: u,
-				children: [/* @__PURE__ */ _(r.Header, {}), /* @__PURE__ */ _(r.Grid, {
-					ref: E,
-					onClick: O,
-					onPointerDownCapture: k
-				})]
-			})
-		})
-	}) });
-}), G = Object.assign(H, {
-	Input: U,
-	Popup: W
-});
-//#endregion
-export { G as t };

package/dist/dialog-CYf9fCZO.js

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

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

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

@@ -1,55 +0,0 @@
-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 };