@jfrader/ui 0.3.0 → 0.5.0

package/dist/sortable-data-table-tirqlLY2.js

@@ -0,0 +1,365 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { t as n } from "./focus-ring-BK5W5_NY.js";
+import { n as r, r as i } from "./media-8yrN85VT.js";
+import { t as a } from "./use-controlled-state-DpeVQZNR.js";
+import { t as o } from "./visually-hidden-BJdvqqvn.js";
+import { t as s } from "./renderable-DzcIj1Lo.js";
+import { t as ee } from "./button-C92uYFJW.js";
+import { t as c } from "./checkbox-cFquiSdy.js";
+import { useEffect as te, useId as ne, useLayoutEffect as re, useMemo as l, useRef as u, useState as ie } from "react";
+import { vars as d } from "@jfrader/tokens/vars";
+import { jsx as f, jsxs as p } from "@emotion/react/jsx-runtime";
+//#region src/components/sortable-data-table/sortable-data-table.tsx
+var ae = {
+	empty: "No records",
+	missing: "—",
+	clear: "Clear selection",
+	scrollLabel: "Scrollable table",
+	sortButton: (e, t) => `${e}: sort ${t === "asc" ? "descending" : "ascending"}`,
+	sortStatus: (e, t) => `${e}, ${t === "asc" ? "ascending" : "descending"}`,
+	selectRow: (e) => `Select ${e}`,
+	selectAll: "Select all visible rows",
+	selectionStatus: (e, t, n, r) => `${r.visibleSelected} of ${r.visibleRows} visible selected; ${r.totalSelected} selected in total`
+}, oe = e({
+	minInlineSize: 0,
+	maxInlineSize: "100%",
+	color: d.color.text,
+	backgroundColor: d.color.surface,
+	fontFamily: d.font.sans,
+	fontSize: d.textSize.sm,
+	lineHeight: d.lineHeight.base
+}), se = e({
+	overflowX: "auto",
+	maxInlineSize: "100%",
+	border: `1px solid ${d.color.border}`,
+	borderRadius: d.radius.md,
+	"&:focus-visible": n
+}), ce = e({
+	inlineSize: "100%",
+	borderCollapse: "separate",
+	borderSpacing: 0,
+	tableLayout: "auto"
+}), le = e({
+	textAlign: "start",
+	padding: d.space[4],
+	fontWeight: d.fontWeight.medium
+}), m = e({
+	paddingInline: d.space[3],
+	textAlign: "start",
+	verticalAlign: "middle",
+	overflowWrap: "anywhere",
+	borderBlockEnd: `1px solid ${d.color.borderSubtle}`,
+	"&[data-numeric]": {
+		textAlign: "end",
+		fontVariantNumeric: "tabular-nums",
+		"& button": { justifyContent: "flex-end" }
+	}
+}), h = {
+	sm: e({ paddingBlock: d.space[2] }),
+	md: e({ paddingBlock: d.space[3] })
+}, g = e({
+	position: "sticky",
+	insetBlockStart: 0,
+	zIndex: 1,
+	backgroundColor: d.color.surfaceRaised,
+	fontWeight: d.fontWeight.medium
+}), ue = e({
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+	gap: d.space[2],
+	inlineSize: "100%",
+	minBlockSize: d.space[8],
+	minInlineSize: d.space[8],
+	paddingInline: d.space[2],
+	paddingBlock: d.space[1],
+	border: `1px solid ${d.color.borderControl}`,
+	borderRadius: d.radius.sm,
+	backgroundColor: "transparent",
+	color: "inherit",
+	font: "inherit",
+	textAlign: "inherit",
+	cursor: "pointer",
+	transitionProperty: "background-color, color",
+	transitionDuration: d.motion.duration.fast,
+	transitionTimingFunction: d.motion.easeStandard,
+	"&:hover": { backgroundColor: d.color.surfaceHover },
+	"&:focus-visible": n,
+	[i]: { transitionDuration: "0s" },
+	[r]: {
+		borderColor: "ButtonText",
+		color: "ButtonText"
+	}
+}), de = e({
+	"&[data-selected]": { backgroundColor: d.color.accentSoft },
+	[r]: { "&[data-selected]": {
+		outline: "1px solid Highlight",
+		outlineOffset: "-1px"
+	} }
+}), fe = e({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	justifyContent: "space-between",
+	gap: d.space[3],
+	padding: d.space[3]
+}), pe = e({
+	minBlockSize: d.space[8],
+	minInlineSize: d.space[8],
+	justifyContent: "center"
+}), me = [], _ = (e) => e.sortable !== !1 && !!(e.accessor || e.compare), he = (e) => e.sortLabel ?? (typeof e.header == "string" ? e.header : ""), v = (e) => e == null || e === "" || typeof e == "number" && !Number.isFinite(e) || e instanceof Date && !Number.isFinite(e.getTime()), y = (e) => [...new Set(e)], ge = (e, t) => {
+	let n = new Set(t);
+	return e.length === n.size && e.every((e) => n.has(e));
+};
+function _e(e, t, n) {
+	return typeof e == "number" && typeof t == "number" ? e - t : e instanceof Date && t instanceof Date ? e.getTime() - t.getTime() : typeof e == "string" && typeof t == "string" ? n.compare(e, t) : 0;
+}
+function b({ ref: e, rows: n, columns: r, getRowId: i, caption: d, captionHidden: b = !1, value: ve, defaultValue: ye = null, onValueChange: be, sortMode: x = "client", selectable: S = !1, getRowLabel: xe, selectedKeys: Se, defaultSelectedKeys: Ce = me, onSelectionChange: we, locale: C, dateFormatOptions: w, timeZone: T, messages: Te, empty: E, loading: Ee = !1, size: D = "md", tableRef: De, slotProps: O, className: Oe, sx: ke, ...k }) {
+	let A = {
+		...ae,
+		...Te
+	}, Ae = ne(), [j, je] = a(ve, ye, be), [Me, Ne] = a(Se, Ce, we), M = y(Me ?? me), N = new Set(M), P = r.find((e) => e.id === j?.columnId && _(e)), F = P && j ? j : null, I = l(() => new Intl.NumberFormat(C), [C]), Pe = l(() => new Intl.DateTimeFormat(C, {
+		...w,
+		...T ? { timeZone: T } : {}
+	}), [
+		C,
+		w,
+		T
+	]), L = l(() => new Intl.Collator(C, {
+		numeric: !0,
+		sensitivity: "base"
+	}), [C]), R = l(() => x === "manual" || !F || !P ? n : n.map((e, t) => ({
+		row: e,
+		index: t
+	})).sort((e, t) => {
+		let n = P.accessor?.(e.row), r = P.accessor?.(t.row);
+		if (P.accessor && (v(n) || v(r))) return Number(v(n)) - Number(v(r)) || e.index - t.index;
+		let i = P.compare ? P.compare(e.row, t.row) : _e(n, r, L);
+		return (Number.isFinite(i) ? i : 0) * (F.direction === "asc" ? 1 : -1) || e.index - t.index;
+	}).map(({ row: e }) => e), [
+		n,
+		F?.columnId,
+		F?.direction,
+		x,
+		P,
+		L
+	]), z = R.map(i), B = z.filter((e) => N.has(e)).length, V = z.length > 0 && B === z.length, Fe = B > 0 && !V, H = A.selectionStatus(B, M.length, z.length, {
+		visibleSelected: I.format(B),
+		totalSelected: I.format(M.length),
+		visibleRows: I.format(z.length)
+	}), U = u(null), W = u(null), G = u(null), K = u(!1), q = u(null), J = u(null), Y = u(null), X = F ? `${F.columnId}:${F.direction}` : "", Z = JSON.stringify([...M].sort()), Q = u({
+		sort: X,
+		selection: Z
+	}), [Ie, Le] = ie("");
+	te(() => {
+		let e = Q.current.sort !== X || Q.current.selection !== Z, t = [];
+		Q.current.sort !== X && F && P && t.push(A.sortStatus(he(P), F.direction)), Q.current.selection !== Z && S && t.push(H), Q.current = {
+			sort: X,
+			selection: Z
+		}, e && Le(t.join(". "));
+	}, [
+		X,
+		Z,
+		S,
+		H,
+		P,
+		A.sortStatus,
+		F?.direction
+	]), re(() => {
+		if (K.current && M.length === 0) {
+			K.current = !1;
+			let e = W.current?.ownerDocument;
+			e?.activeElement === e?.body && W.current?.focus();
+		}
+		let e = q.current;
+		if (!e) return;
+		let t = z.indexOf(e.key);
+		if (t >= 0) {
+			e.index = t;
+			return;
+		}
+		let n = J.current;
+		if (n && n.ownerDocument.activeElement === n.ownerDocument.body) {
+			let t = n.rows[Math.min(e.index, n.rows.length - 1)]?.querySelectorAll("input, button, a[href], select, textarea, [tabindex=\"0\"]");
+			(t?.[Math.min(e.control, t.length - 1)] ?? W.current ?? Y.current)?.focus();
+		}
+		q.current = null;
+	});
+	let Re = (e) => {
+		let t = y(e);
+		ge(M, t) || Ne(t);
+	}, $ = (e, t) => Re(t ? [...M, ...e] : M.filter((t) => !e.includes(t))), ze = (e, t) => {
+		if (e.cell) return e.cell(t);
+		let n = e.accessor?.(t);
+		return v(n) ? A.missing : typeof n == "number" ? I.format(n) : n instanceof Date ? Pe.format(n) : n;
+	}, Be = (e, t) => /* @__PURE__ */ f(c, {
+		"aria-label": A.selectRow(xe(e)),
+		checked: N.has(t),
+		slotProps: { root: { css: pe } },
+		onChange: (e) => {
+			if (e.defaultPrevented || e.nativeEvent.defaultPrevented) return;
+			let n = e.nativeEvent, r = U.current === null ? -1 : z.indexOf(U.current), i = z.indexOf(t), a = n.shiftKey && r >= 0 ? z.slice(Math.min(r, i), Math.max(r, i) + 1) : [t];
+			$(a, e.currentTarget.checked), U.current = t;
+		}
+	});
+	return /* @__PURE__ */ f(t, {
+		className: Oe,
+		styles: [oe],
+		sx: ke,
+		children: (t) => /* @__PURE__ */ p("div", {
+			...k,
+			ref: e,
+			className: t,
+			"data-ui": "sortable-data-table",
+			children: [
+				/* @__PURE__ */ f("div", {
+					ref: Y,
+					role: "region",
+					"aria-label": A.scrollLabel,
+					"aria-describedby": k["aria-describedby"],
+					tabIndex: 0,
+					"data-ui": "sortable-data-table-scroller",
+					className: O?.scroller?.className,
+					css: [se, O?.scroller?.css],
+					children: /* @__PURE__ */ p("table", {
+						ref: De,
+						"aria-busy": Ee || void 0,
+						className: O?.table?.className,
+						css: [ce, O?.table?.css],
+						children: [
+							s(d) && /* @__PURE__ */ f("caption", {
+								id: Ae,
+								className: O?.caption?.className,
+								css: [
+									le,
+									b && o,
+									O?.caption?.css
+								],
+								children: d
+							}),
+							/* @__PURE__ */ p("colgroup", { children: [S && /* @__PURE__ */ f("col", {}), r.map((e) => /* @__PURE__ */ f("col", { style: { width: e.width } }, e.id))] }),
+							/* @__PURE__ */ f("thead", { children: /* @__PURE__ */ p("tr", { children: [S && /* @__PURE__ */ f("th", {
+								scope: "col",
+								css: [
+									m,
+									h[D],
+									g
+								],
+								children: /* @__PURE__ */ f(c, {
+									ref: W,
+									"aria-label": A.selectAll,
+									checked: V,
+									indeterminate: Fe,
+									disabled: !z.length,
+									slotProps: { root: { css: pe } },
+									onChange: (e) => {
+										!e.defaultPrevented && !e.nativeEvent.defaultPrevented && $(z, e.currentTarget.checked);
+									}
+								})
+							}), r.map((e) => /* @__PURE__ */ f("th", {
+								scope: "col",
+								"data-numeric": e.numeric || void 0,
+								"aria-sort": F?.columnId === e.id ? F.direction === "asc" ? "ascending" : "descending" : void 0,
+								className: O?.headerCell?.className,
+								css: [
+									m,
+									h[D],
+									g,
+									O?.headerCell?.css
+								],
+								children: _(e) ? /* @__PURE__ */ p("button", {
+									type: "button",
+									"aria-label": A.sortButton(he(e), F?.columnId === e.id ? F.direction : null),
+									className: O?.sortButton?.className,
+									css: [ue, O?.sortButton?.css],
+									onClick: (t) => {
+										t.defaultPrevented || je({
+											columnId: e.id,
+											direction: F?.columnId === e.id && F.direction === "asc" ? "desc" : "asc"
+										});
+									},
+									children: [s(e.header) && e.header, /* @__PURE__ */ f("span", {
+										"aria-hidden": "true",
+										children: F?.columnId === e.id ? F.direction === "asc" ? "▲" : "▼" : "♢"
+									})]
+								}) : s(e.header) && e.header
+							}, e.id))] }) }),
+							/* @__PURE__ */ f("tbody", {
+								ref: J,
+								children: R.length ? R.map((e, t) => {
+									let n = i(e);
+									return /* @__PURE__ */ p("tr", {
+										"data-selected": S && N.has(n) || void 0,
+										className: O?.row?.className,
+										css: [de, O?.row?.css],
+										onFocusCapture: (e) => {
+											let r = Array.from(e.currentTarget.querySelectorAll("input, button, a[href], select, textarea, [tabindex=\"0\"]"));
+											q.current = {
+												key: n,
+												index: t,
+												control: r.indexOf(e.target)
+											};
+										},
+										onBlurCapture: (e) => {
+											e.relatedTarget && !J.current?.contains(e.relatedTarget) && (q.current = null);
+										},
+										children: [S && /* @__PURE__ */ f("td", {
+											css: [m, h[D]],
+											children: Be(e, n)
+										}), r.map((t) => /* @__PURE__ */ f("td", {
+											"data-numeric": t.numeric || void 0,
+											className: O?.cell?.className,
+											css: [
+												m,
+												h[D],
+												O?.cell?.css
+											],
+											children: ze(t, e)
+										}, t.id))]
+									}, n);
+								}) : /* @__PURE__ */ f("tr", { children: /* @__PURE__ */ f("td", {
+									colSpan: r.length + Number(S),
+									className: O?.cell?.className,
+									css: [
+										m,
+										h[D],
+										O?.cell?.css
+									],
+									children: E === void 0 ? A.empty : s(E) && E
+								}) })
+							})
+						]
+					})
+				}),
+				S && /* @__PURE__ */ p("div", {
+					className: O?.footer?.className,
+					css: [fe, O?.footer?.css],
+					children: [/* @__PURE__ */ f("span", { children: H }), M.length > 0 && /* @__PURE__ */ f(ee, {
+						ref: G,
+						size: "sm",
+						variant: "ghost",
+						onClick: (e) => {
+							e.defaultPrevented || (K.current = G.current?.ownerDocument.activeElement === G.current, Re([]));
+						},
+						onBlur: (e) => {
+							e.relatedTarget && (K.current = !1);
+						},
+						children: A.clear
+					})]
+				}),
+				/* @__PURE__ */ f("p", {
+					role: "status",
+					"aria-live": "polite",
+					"aria-atomic": "true",
+					className: O?.status?.className,
+					css: [o, O?.status?.css],
+					children: Ie
+				})
+			]
+		})
+	});
+}
+b.displayName = "SortableDataTable";
+//#endregion
+export { b as t };

package/dist/sortable-data-table.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as SortableDataTable } from "./sortable-data-table-tirqlLY2.js";

package/dist/{spinner-C2YDoiMn.js → spinner-DtxvDPdM.js}

@@ -1,6 +1,6 @@
 'use client';
 import { r as e, t } from "./sx-Dx9JUKp5.js";
-import { n } from "./media-D_eA_I-e.js";
+import { r as n } from "./media-8yrN85VT.js";
 import { t as r } from "./visually-hidden-BJdvqqvn.js";
 import { n as i, t as a } from "./loading-ring-B8-30Dl1.js";
 import { vars as o } from "@jfrader/tokens/vars";

package/dist/spinner.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Spinner } from "./spinner-C2YDoiMn.js";
+export { t as Spinner } from "./spinner-DtxvDPdM.js";

package/dist/split-button-Cb3EHs64.js

@@ -0,0 +1,268 @@
+'use client';
+import { i as e, r as t, t as n } from "./sx-Dx9JUKp5.js";
+import { n as r, r as i } from "./media-8yrN85VT.js";
+import { t as a } from "./use-controlled-state-DpeVQZNR.js";
+import { t as o } from "./renderable-DzcIj1Lo.js";
+import { t as s } from "./button-C92uYFJW.js";
+import { s as c } from "./listbox-style-WX-RASp1.js";
+import { a as l, i as u, n as d, o as f, r as p, s as m, t as h } from "./menu-xwOOUtWP.js";
+import { createContext as g, useContext as _, useEffect as v, useLayoutEffect as y, useMemo as b, useRef as x, useState as S } from "react";
+import { vars as C } from "@jfrader/tokens/vars";
+import { jsx as w, jsxs as T } from "@emotion/react/jsx-runtime";
+import { useMergeRefs as E } from "@floating-ui/react";
+//#region src/components/split-button/split-button.tsx
+var D = "SplitButton", O = g(null);
+function k(e) {
+	let t = _(O);
+	if (!t) throw Error(`${D}.${e} must be rendered inside <${D}>.`);
+	return t;
+}
+var A = {
+	solid: "soft",
+	soft: "soft",
+	outline: "outline",
+	ghost: "ghost"
+}, j = {
+	sm: "32px",
+	md: "40px",
+	lg: "48px"
+}, M = t({
+	label: "split-button",
+	display: "inline-flex",
+	alignItems: "stretch",
+	maxInlineSize: "100%",
+	verticalAlign: "middle",
+	isolation: "isolate"
+}), N = { "&:focus-visible": {
+	position: "relative",
+	zIndex: 1
+} }, P = t({
+	label: "split-button-action",
+	flex: "0 1 auto",
+	minInlineSize: 0,
+	blockSize: "auto",
+	paddingBlock: C.space[1],
+	whiteSpace: "normal",
+	textAlign: "center",
+	borderStartEndRadius: 0,
+	borderEndEndRadius: 0,
+	borderInlineEndWidth: 0,
+	...N,
+	[r]: { borderColor: "ButtonText" }
+}), F = t({
+	label: "split-button-trigger",
+	flexShrink: 0,
+	blockSize: "auto",
+	paddingInline: 0,
+	borderStartStartRadius: 0,
+	borderEndStartRadius: 0,
+	borderInlineStartColor: C.color.borderControl,
+	...N,
+	[r]: { borderColor: "ButtonText" }
+}), I = Object.fromEntries(Object.entries(j).map(([e, n]) => [e, t({ minBlockSize: n })])), L = Object.fromEntries(Object.entries(j).map(([e, n]) => [e, t({
+	minBlockSize: n,
+	inlineSize: n
+})])), R = t({
+	display: "inline-flex",
+	transitionProperty: "transform",
+	transitionDuration: C.motion.duration.fast,
+	transitionTimingFunction: C.motion.easeStandard,
+	"& svg": {
+		inlineSize: "1em",
+		blockSize: "1em"
+	},
+	"[aria-expanded=\"true\"] > &": { transform: "rotate(180deg)" },
+	[i]: {
+		transitionDuration: "0s",
+		"[aria-expanded=\"true\"] > &": { transform: "none" }
+	},
+	[r]: { color: "ButtonText" }
+}), z = e({
+	from: { opacity: 0 },
+	to: { opacity: 1 }
+}), B = t({
+	display: "inline-grid",
+	justifyItems: "center",
+	"& > *": { gridArea: "1 / 1" }
+}), V = t({ visibility: "hidden" }), H = t({
+	"&[data-swapped]": { animation: `${z} ${C.motion.duration.base} ${C.motion.easeStandard}` },
+	[i]: { "&[data-swapped]": { animation: "none" } }
+}), U = {
+	neutral: t({}),
+	danger: t({
+		color: C.color.dangerText,
+		"&:hover:not([aria-disabled=\"true\"]), &[data-active]:not([aria-disabled=\"true\"])": { backgroundColor: C.color.dangerSoft }
+	})
+}, W = /* @__PURE__ */ w("svg", {
+	viewBox: "0 0 16 16",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "1.5",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	children: /* @__PURE__ */ w("path", { d: "M4 6l4 4 4-4" })
+});
+function G({ ref: e, variant: t = "solid", tone: r = "accent", size: i = "md", disabled: o = !1, open: s, defaultOpen: c = !1, onOpenChange: l, placement: u = "bottom-end", className: d, sx: f, children: p, ...m }) {
+	let [g = !1, _] = a(s, c, l), C = x(null), T = E([C, e]), [D, k] = S(), [A, j] = S(), N = x(!1);
+	y(() => {
+		C.current && k(getComputedStyle(C.current).direction === "rtl" ? "rtl" : "ltr");
+	}, [g]), v(() => {
+		o ? g && !N.current && (N.current = !0, _(!1)) : N.current = !1;
+	}, [
+		o,
+		g,
+		_
+	]);
+	let P = (e) => {
+		e && o || _(e);
+	}, F = b(() => ({
+		variant: t,
+		tone: r,
+		size: i,
+		disabled: o,
+		direction: D,
+		triggerLabelledBy: A,
+		setTriggerLabelledBy: j
+	}), [
+		t,
+		r,
+		i,
+		o,
+		D,
+		A
+	]);
+	return /* @__PURE__ */ w(h, {
+		open: g,
+		onOpenChange: P,
+		placement: u,
+		children: /* @__PURE__ */ w(O.Provider, {
+			value: F,
+			children: /* @__PURE__ */ w(n, {
+				className: d,
+				styles: M,
+				sx: f,
+				children: (e) => /* @__PURE__ */ w("div", {
+					...m,
+					ref: T,
+					role: "group",
+					"data-ui": "split-button",
+					className: e,
+					children: p
+				})
+			})
+		})
+	});
+}
+G.displayName = "SplitButton";
+var K = (e) => typeof e == "string" || typeof e == "number" ? String(e) : void 0;
+function q({ reserveLabels: e, children: t }) {
+	let n = K(t), [r, i] = S(n), [a, o] = S(!1);
+	return n !== r && (i(n), o(!0)), /* @__PURE__ */ T("span", {
+		css: B,
+		"data-ui": "split-button-label",
+		children: [e.map((e) => /* @__PURE__ */ w("span", {
+			css: V,
+			"aria-hidden": !0,
+			children: e
+		}, e)), /* @__PURE__ */ w("span", {
+			css: H,
+			"data-swapped": a || void 0,
+			children: t
+		}, n)]
+	});
+}
+function J({ ref: e, variant: t, tone: n, size: r, disabled: i = !1, reserveLabels: a, children: o, className: c, sx: l, ...u }) {
+	let d = k("Action"), f = d.disabled || i, p = r ?? d.size;
+	return /* @__PURE__ */ w(s, {
+		...u,
+		ref: e,
+		variant: t ?? d.variant,
+		tone: n ?? d.tone,
+		size: p,
+		disabled: f,
+		"data-ui": "split-button-action",
+		css: [P, I[p]],
+		className: c,
+		sx: l,
+		render: ({ "data-ui": e, ...t }) => /* @__PURE__ */ w("button", {
+			...t,
+			type: t.type ?? "button",
+			"data-ui": e,
+			disabled: f
+		}),
+		children: a !== void 0 && a.length > 0 ? /* @__PURE__ */ w(q, {
+			reserveLabels: a,
+			children: o
+		}) : o
+	});
+}
+J.displayName = "SplitButton.Action";
+function Y({ ref: e, disabled: t = !1, children: n = W, className: r, sx: i, ...a }) {
+	let c = k("Trigger"), u = c.disabled || t, d = "aria-labelledby" in a ? a["aria-labelledby"] : void 0, { setTriggerLabelledBy: f } = c;
+	return y(() => (f(d), () => f(void 0)), [d, f]), /* @__PURE__ */ w(s, {
+		...a,
+		ref: e,
+		variant: A[c.variant],
+		tone: c.tone,
+		size: c.size,
+		disabled: u,
+		"data-ui": "split-button-trigger",
+		css: [F, L[c.size]],
+		className: r,
+		sx: i,
+		render: ({ "data-ui": e, ref: t, ...n }) => /* @__PURE__ */ w(l, {
+			...n,
+			ref: t,
+			type: "button",
+			disabled: u,
+			family: D,
+			marker: e
+		}),
+		children: o(n) && n !== "" && /* @__PURE__ */ w("span", {
+			css: R,
+			"aria-hidden": !0,
+			children: n
+		})
+	});
+}
+Y.displayName = "SplitButton.Trigger";
+function X({ dir: e, "aria-labelledby": t, ...n }) {
+	let { direction: r, triggerLabelledBy: i } = k("Content"), a = [t, n["aria-label"] === void 0 ? i : void 0].filter(Boolean).join(" ");
+	return /* @__PURE__ */ w(d, {
+		...n,
+		"aria-labelledby": a || void 0,
+		dir: e ?? r,
+		family: D,
+		marker: "split-button-content",
+		styles: c
+	});
+}
+X.displayName = "SplitButton.Content";
+function Z({ tone: e = "neutral", disabled: t = !1, ...n }) {
+	let r = k("Item");
+	return /* @__PURE__ */ w(p, {
+		...n,
+		disabled: r.disabled || t,
+		family: D,
+		marker: "split-button-item",
+		styles: [f, U[e]]
+	});
+}
+Z.displayName = "SplitButton.Item";
+function Q(e) {
+	return k("Separator"), /* @__PURE__ */ w(u, {
+		...e,
+		marker: "split-button-separator",
+		styles: m
+	});
+}
+Q.displayName = "SplitButton.Separator";
+var $ = Object.assign(G, {
+	Action: J,
+	Trigger: Y,
+	Content: X,
+	Item: Z,
+	Separator: Q
+});
+//#endregion
+export { $ as t };

package/dist/split-button.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as SplitButton } from "./split-button-Cb3EHs64.js";