@jfrader/ui 0.5.0 → 0.5.1

package/dist/signature-pad.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as SignatureExportError, n as SignaturePad, r as signatureToPng, i as signatureToSvg } from "./signature-pad-q2SAsrdD.js";
+export { t as SignatureExportError, n as SignaturePad, r as signatureToPng, i as signatureToSvg } from "./signature-pad-_bTeguN9.js";

package/dist/slider-DVG6-Awh.js

@@ -0,0 +1,308 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { n } from "./focus-ring-BK5W5_NY.js";
+import { n as r, r as i } from "./media-8yrN85VT.js";
+import { t as ee } from "./visually-hidden-BJdvqqvn.js";
+import { a as te, c as a, d as o, f as ne, g as s, h as re, i as ie, l as ae, m as c, n as l, o as oe, p as se, r as u, s as ce, t as d, u as le } from "./use-slider-interaction-ChL-208h.js";
+import { useState as ue } from "react";
+import { vars as f } from "@jfrader/tokens/vars";
+import { createElement as p } from "@emotion/react";
+import { jsx as m, jsxs as h } from "@emotion/react/jsx-runtime";
+import { MotionConfig as g, motion as _, useReducedMotion as de } from "motion/react";
+//#region src/components/slider/slider.tsx
+var fe = {
+	type: "spring",
+	stiffness: 420,
+	damping: 30
+}, pe = 8, me = e(c, { label: "slider" }), he = e({
+	position: "absolute",
+	insetInline: 0,
+	insetBlockStart: "50%",
+	transform: "translateY(-50%)",
+	blockSize: f.space[1],
+	boxSizing: "border-box",
+	border: `1px solid ${f.color.borderControl}`,
+	borderRadius: f.radius.full,
+	background: f.color.surfaceInset,
+	pointerEvents: "none",
+	[r]: {
+		forcedColorAdjust: "none",
+		background: "Canvas",
+		borderColor: "CanvasText"
+	}
+}), ge = e({
+	position: "absolute",
+	insetBlock: 0,
+	background: f.color.accent,
+	borderRadius: f.radius.full,
+	[r]: { background: "Highlight" }
+}), _e = e({
+	position: "absolute",
+	insetBlockStart: "50%",
+	transform: "translate(-50%, -50%)",
+	"&:dir(rtl)": { transform: "translate(50%, -50%)" },
+	inlineSize: f.space[8],
+	blockSize: f.space[8],
+	display: "grid",
+	placeItems: "center",
+	borderRadius: f.radius.full,
+	cursor: "grab",
+	"&:focus-visible": {
+		...n,
+		zIndex: 2
+	},
+	"&[data-dragging]": {
+		cursor: "grabbing",
+		zIndex: 3
+	},
+	"&[aria-disabled=\"true\"]": { cursor: "default" }
+}), ve = e({
+	inlineSize: f.space[6],
+	blockSize: f.space[6],
+	boxSizing: "border-box",
+	border: `2px solid ${f.color.borderControl}`,
+	borderRadius: f.radius.full,
+	background: f.color.surfaceRaised,
+	boxShadow: f.shadow.raised,
+	pointerEvents: "none",
+	[r]: {
+		forcedColorAdjust: "none",
+		background: "Canvas",
+		borderColor: "CanvasText",
+		boxShadow: "none"
+	}
+}), ye = e({
+	position: "absolute",
+	insetBlockEnd: `calc(100% + ${f.space[2]})`,
+	paddingInline: f.space[2],
+	paddingBlock: f.space[1],
+	inlineSize: "max-content",
+	maxInlineSize: "min(24rem, 80vw)",
+	overflowWrap: "anywhere",
+	border: `1px solid ${f.color.borderControl}`,
+	borderRadius: f.radius.md,
+	background: f.color.surfaceRaised,
+	color: f.color.text,
+	boxShadow: f.shadow.raised,
+	pointerEvents: "none",
+	fontSize: f.textSize.xs,
+	opacity: 0,
+	transition: `opacity ${f.motion.duration.fast} ${f.motion.easeStandard}`,
+	"[data-dragging] > &, [data-slider-thumb]:focus-visible > &": { opacity: 1 },
+	[i]: { transitionDuration: "0s" },
+	[r]: {
+		borderColor: "CanvasText",
+		boxShadow: "none"
+	}
+}), be = e({
+	position: "absolute",
+	insetBlockStart: "50%",
+	transform: "translate(-50%, -50%)",
+	inlineSize: f.space[1],
+	blockSize: f.space[2],
+	border: `1px solid ${f.color.borderControl}`,
+	background: f.color.surfaceRaised,
+	boxSizing: "border-box",
+	pointerEvents: "none",
+	[r]: {
+		background: "Canvas",
+		borderColor: "CanvasText"
+	}
+});
+function v(e) {
+	let { ref: n, type: r = "single", value: i, defaultValue: c, label: f, description: v, error: y, invalid: b = !1, disabled: x = !1, min: S = 0, max: C = 100, step: w = 1, largeStep: T, minStepsBetweenThumbs: E = 0, marks: D = [], thumbLabels: O, locale: k, formatOptions: A, formatValue: j, showValue: M = !0, start: N, end: P, name: F, size: I = "md", slotProps: L, onValueChange: xe, onValueCommit: Se, className: Ce, sx: we, onKeyDown: Te, "aria-label": Ee, "aria-labelledby": De, "aria-describedby": Oe, "aria-invalid": ke, ...Ae } = e, R = r === "range", z = de(), [je, B] = ue(0), V = te({
+		component: "Slider",
+		range: R,
+		value: i,
+		defaultValue: c,
+		min: S,
+		max: C,
+		step: w,
+		largeStep: T,
+		minStepsBetweenThumbs: E,
+		disabled: x,
+		onValueChange: (t) => {
+			e.type, e.onValueChange?.(t);
+		},
+		onValueCommit: (t) => {
+			e.type, e.onValueCommit?.(t);
+		},
+		onPointerSample: ({ raw: e, low: t, high: n, rtl: r }) => B(z ? 0 : Math.max(-8, Math.min(pe, (e - Math.max(t, Math.min(n, e))) * (r ? -1 : 1)))),
+		onGestureEnd: () => B(0)
+	}), { id: H, current: U, values: W, active: G, bounds: Me, percent: K } = V, { formatter: q, format: J } = ie(k, A, j), Ne = typeof U == "number" ? J(U) : !j && "formatRange" in q ? q.formatRange(U[0], U[1]) : `${J(U[0])} – ${J(U[1])}`, Y = V.normalizeMarks(D), X = R ? K(W[0]) : 0, Pe = K(W[+!!R]), Z = d(f), Q = d(v), $ = d(y);
+	return /* @__PURE__ */ m(g, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ m(t, {
+			className: Ce,
+			styles: me,
+			sx: we,
+			children: (e) => /* @__PURE__ */ h("div", {
+				...Ae,
+				ref: n,
+				className: e,
+				"data-ui": "slider",
+				"data-disabled": x || void 0,
+				onKeyDown: (e) => {
+					Te?.(e), V.handleRootKeyDown(e);
+				},
+				children: [
+					(Z || M) && /* @__PURE__ */ h("div", {
+						css: ae,
+						children: [Z && /* @__PURE__ */ m("span", {
+							...L?.label,
+							id: `${H}-label`,
+							css: [le, L?.label?.css],
+							children: f
+						}), M && /* @__PURE__ */ m("span", {
+							...L?.readout,
+							"aria-hidden": "true",
+							css: [se, L?.readout?.css],
+							children: Ne
+						})]
+					}),
+					Q && /* @__PURE__ */ m("div", {
+						...L?.description,
+						id: `${H}-description`,
+						css: [ce, L?.description?.css],
+						children: v
+					}),
+					$ && /* @__PURE__ */ m("div", {
+						...L?.error,
+						id: `${H}-error`,
+						role: "alert",
+						css: [a, L?.error?.css],
+						children: y
+					}),
+					/* @__PURE__ */ h("div", {
+						css: re,
+						children: [
+							d(N) && /* @__PURE__ */ m("div", {
+								...L?.start,
+								children: N
+							}),
+							/* @__PURE__ */ h("div", {
+								...L?.control,
+								...V.controlHandlers(L?.control),
+								css: [
+									oe,
+									s[I],
+									L?.control?.css
+								],
+								"data-ui": "slider-control",
+								"data-disabled": x || void 0,
+								children: [
+									/* @__PURE__ */ m("div", {
+										...L?.track,
+										"data-ui": "slider-track",
+										"aria-hidden": "true",
+										css: [he, L?.track?.css],
+										children: /* @__PURE__ */ m("div", {
+											...L?.fill,
+											"data-ui": "slider-fill",
+											css: [ge, L?.fill?.css],
+											style: {
+												...L?.fill?.style,
+												insetInlineStart: `${X}%`,
+												inlineSize: `${Pe - X}%`
+											}
+										})
+									}),
+									Y.map((e, t) => /* @__PURE__ */ m("span", {
+										"aria-hidden": "true",
+										css: be,
+										style: { insetInlineStart: `${K(e.value)}%` }
+									}, t)),
+									W.map((e, t) => {
+										let n = l(L?.thumb, t), [r, i] = Me(t);
+										return /* @__PURE__ */ p("div", {
+											...n,
+											key: t,
+											id: `${H}-thumb-${t}`,
+											"data-slider-thumb": t,
+											"data-dragging": G === t || void 0,
+											role: "slider",
+											tabIndex: x ? -1 : 0,
+											"aria-orientation": "horizontal",
+											"aria-disabled": x,
+											"aria-invalid": $ || b ? !0 : n?.["aria-invalid"] ?? ke,
+											"aria-valuemin": r,
+											"aria-valuemax": i,
+											"aria-valuenow": e,
+											"aria-valuetext": J(e),
+											"aria-label": n?.["aria-label"] ?? (R ? O?.[t] : Ee),
+											"aria-labelledby": u(De, n?.["aria-labelledby"], R ? `${H}-name-${t}` : Z && `${H}-label`),
+											"aria-describedby": u(Oe, n?.["aria-describedby"], Q && `${H}-description`, $ && `${H}-error`),
+											css: [_e, n?.css],
+											style: {
+												...n?.style,
+												insetInlineStart: `${K(e)}%`
+											},
+											onFocus: (e) => {
+												V.noteFocus(t), n?.onFocus?.(e);
+											},
+											onKeyDown: (e) => {
+												n?.onKeyDown?.(e);
+											}
+										}, /* @__PURE__ */ m(_.span, {
+											"aria-hidden": "true",
+											css: ve,
+											animate: {
+												scale: z ? 1 : G === t ? .95 : 1,
+												x: z ? 0 : G === t ? je : 0
+											},
+											transition: z ? { duration: 0 } : fe
+										}), R && /* @__PURE__ */ m("span", {
+											id: `${H}-name-${t}`,
+											css: ee,
+											children: O?.[t]
+										}), /* @__PURE__ */ m("span", {
+											...L?.bubble,
+											"data-ui": "slider-bubble",
+											"aria-hidden": "true",
+											css: [ye, L?.bubble?.css],
+											style: {
+												...L?.bubble?.style,
+												...K(e) <= 50 ? { insetInlineStart: 0 } : { insetInlineEnd: 0 }
+											},
+											children: J(e)
+										}));
+									})
+								]
+							}),
+							d(P) && /* @__PURE__ */ m("div", {
+								...L?.end,
+								children: P
+							})
+						]
+					}),
+					Y.some((e) => d(e.label)) && /* @__PURE__ */ m("div", {
+						css: ne,
+						children: Y.map((e, t) => {
+							if (!d(e.label)) return null;
+							let n = l(L?.mark, t);
+							return /* @__PURE__ */ p("button", {
+								...n,
+								key: t,
+								type: "button",
+								disabled: x,
+								css: [o, n?.css],
+								onClick: (t) => {
+									n?.onClick?.(t), t.defaultPrevented || V.selectMark(e.value);
+								}
+							}, e.label);
+						})
+					}),
+					F !== void 0 && W.map((e, t) => /* @__PURE__ */ m("input", {
+						type: "hidden",
+						disabled: x,
+						name: typeof F == "string" ? F : F[t],
+						value: e
+					}, t))
+				]
+			})
+		})
+	});
+}
+v.displayName = "Slider";
+//#endregion
+export { v as t };

package/dist/slider.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Slider } from "./slider-t0B5cecO.js";
+export { t as Slider } from "./slider-DVG6-Awh.js";

package/dist/{sortable-data-table-tirqlLY2.js → sortable-data-table-CYKT_Ng7.js}

@@ -5,8 +5,8 @@ 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 { t as ee } from "./button-NLY0h6EJ.js";
+import { t as c } from "./checkbox-DKSzExj2.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";

package/dist/sortable-data-table.js

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

package/dist/{split-button-Cb3EHs64.js → split-button-BCw4zZom.js}

@@ -3,70 +3,70 @@ 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 { t as s } from "./button-NLY0h6EJ.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";
+import { a as l, c as u, i as d, l as f, n as p, o as m, t as h, u as g } from "./menu-DDKgmK2F.js";
+import { createContext as _, useContext as v, useEffect as y, useLayoutEffect 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, jsxs as E } from "@emotion/react/jsx-runtime";
+import { useMergeRefs as D } 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}>.`);
+var O = "SplitButton", k = _(null);
+function A(e) {
+	let t = v(k);
+	if (!t) throw Error(`${O}.${e} must be rendered inside <${O}>.`);
 	return t;
 }
-var A = {
+var j = {
 	solid: "soft",
 	soft: "soft",
 	outline: "outline",
 	ghost: "ghost"
-}, j = {
+}, M = {
 	sm: "32px",
 	md: "40px",
 	lg: "48px"
-}, M = t({
+}, N = t({
 	label: "split-button",
 	display: "inline-flex",
 	alignItems: "stretch",
 	maxInlineSize: "100%",
 	verticalAlign: "middle",
 	isolation: "isolate"
-}), N = { "&:focus-visible": {
+}), P = { "&:focus-visible": {
 	position: "relative",
 	zIndex: 1
-} }, P = t({
+} }, F = t({
 	label: "split-button-action",
 	flex: "0 1 auto",
 	minInlineSize: 0,
 	blockSize: "auto",
-	paddingBlock: C.space[1],
+	paddingBlock: w.space[1],
 	whiteSpace: "normal",
 	textAlign: "center",
 	borderStartEndRadius: 0,
 	borderEndEndRadius: 0,
 	borderInlineEndWidth: 0,
-	...N,
+	...P,
 	[r]: { borderColor: "ButtonText" }
-}), F = t({
+}), I = t({
 	label: "split-button-trigger",
 	flexShrink: 0,
 	blockSize: "auto",
 	paddingInline: 0,
 	borderStartStartRadius: 0,
 	borderEndStartRadius: 0,
-	borderInlineStartColor: C.color.borderControl,
-	...N,
+	borderInlineStartColor: w.color.borderControl,
+	...P,
 	[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({
+}), L = Object.fromEntries(Object.entries(M).map(([e, n]) => [e, t({ minBlockSize: n })])), R = Object.fromEntries(Object.entries(M).map(([e, n]) => [e, t({
 	minBlockSize: n,
 	inlineSize: n
-})])), R = t({
+})])), z = t({
 	display: "inline-flex",
 	transitionProperty: "transform",
-	transitionDuration: C.motion.duration.fast,
-	transitionTimingFunction: C.motion.easeStandard,
+	transitionDuration: w.motion.duration.fast,
+	transitionTimingFunction: w.motion.easeStandard,
 	"& svg": {
 		inlineSize: "1em",
 		blockSize: "1em"
@@ -77,37 +77,31 @@ var A = {
 		"[aria-expanded=\"true\"] > &": { transform: "none" }
 	},
 	[r]: { color: "ButtonText" }
-}), z = e({
+}), B = e({
 	from: { opacity: 0 },
 	to: { opacity: 1 }
-}), B = t({
+}), V = 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}` },
+}), H = t({ visibility: "hidden" }), U = t({
+	"&[data-swapped]": { animation: `${B} ${w.motion.duration.base} ${w.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", {
+}), W = /* @__PURE__ */ T("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" })
+	children: /* @__PURE__ */ T("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;
+	let [g = !1, _] = a(s, c, l), v = S(null), w = D([v, e]), [E, O] = C(), [A, j] = C(), M = S(!1);
+	b(() => {
+		v.current && O(getComputedStyle(v.current).direction === "rtl" ? "rtl" : "ltr");
+	}, [g]), y(() => {
+		o ? g && !M.current && (M.current = !0, _(!1)) : M.current = !1;
 	}, [
 		o,
 		g,
@@ -115,12 +109,12 @@ function G({ ref: e, variant: t = "solid", tone: r = "accent", size: i = "md", d
 	]);
 	let P = (e) => {
 		e && o || _(e);
-	}, F = b(() => ({
+	}, F = x(() => ({
 		variant: t,
 		tone: r,
 		size: i,
 		disabled: o,
-		direction: D,
+		direction: E,
 		triggerLabelledBy: A,
 		setTriggerLabelledBy: j
 	}), [
@@ -128,22 +122,22 @@ function G({ ref: e, variant: t = "solid", tone: r = "accent", size: i = "md", d
 		r,
 		i,
 		o,
-		D,
+		E,
 		A
 	]);
-	return /* @__PURE__ */ w(h, {
+	return /* @__PURE__ */ T(h, {
 		open: g,
 		onOpenChange: P,
 		placement: u,
-		children: /* @__PURE__ */ w(O.Provider, {
+		children: /* @__PURE__ */ T(k.Provider, {
 			value: F,
-			children: /* @__PURE__ */ w(n, {
+			children: /* @__PURE__ */ T(n, {
 				className: d,
-				styles: M,
+				styles: N,
 				sx: f,
-				children: (e) => /* @__PURE__ */ w("div", {
+				children: (e) => /* @__PURE__ */ T("div", {
 					...m,
-					ref: T,
+					ref: w,
 					role: "group",
 					"data-ui": "split-button",
 					className: e,
@@ -156,24 +150,24 @@ function G({ ref: e, variant: t = "solid", tone: r = "accent", size: i = "md", d
 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,
+	let n = K(t), [r, i] = C(n), [a, o] = C(!1);
+	return n !== r && (i(n), o(!0)), /* @__PURE__ */ E("span", {
+		css: V,
 		"data-ui": "split-button-label",
-		children: [e.map((e) => /* @__PURE__ */ w("span", {
-			css: V,
+		children: [e.map((e) => /* @__PURE__ */ T("span", {
+			css: H,
 			"aria-hidden": !0,
 			children: e
-		}, e)), /* @__PURE__ */ w("span", {
-			css: H,
+		}, e)), /* @__PURE__ */ T("span", {
+			css: U,
 			"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, {
+	let d = A("Action"), f = d.disabled || i, p = r ?? d.size;
+	return /* @__PURE__ */ T(s, {
 		...u,
 		ref: e,
 		variant: t ?? d.variant,
@@ -181,16 +175,16 @@ function J({ ref: e, variant: t, tone: n, size: r, disabled: i = !1, reserveLabe
 		size: p,
 		disabled: f,
 		"data-ui": "split-button-action",
-		css: [P, I[p]],
+		css: [F, L[p]],
 		className: c,
 		sx: l,
-		render: ({ "data-ui": e, ...t }) => /* @__PURE__ */ w("button", {
+		render: ({ "data-ui": e, ...t }) => /* @__PURE__ */ T("button", {
 			...t,
 			type: t.type ?? "button",
 			"data-ui": e,
 			disabled: f
 		}),
-		children: a !== void 0 && a.length > 0 ? /* @__PURE__ */ w(q, {
+		children: a !== void 0 && a.length > 0 ? /* @__PURE__ */ T(q, {
 			reserveLabels: a,
 			children: o
 		}) : o
@@ -198,28 +192,28 @@ function J({ ref: e, variant: t, tone: n, size: r, disabled: i = !1, reserveLabe
 }
 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, {
+	let c = A("Trigger"), l = c.disabled || t, u = "aria-labelledby" in a ? a["aria-labelledby"] : void 0, { setTriggerLabelledBy: d } = c;
+	return b(() => (d(u), () => d(void 0)), [u, d]), /* @__PURE__ */ T(s, {
 		...a,
 		ref: e,
-		variant: A[c.variant],
+		variant: j[c.variant],
 		tone: c.tone,
 		size: c.size,
-		disabled: u,
+		disabled: l,
 		"data-ui": "split-button-trigger",
-		css: [F, L[c.size]],
+		css: [I, R[c.size]],
 		className: r,
 		sx: i,
-		render: ({ "data-ui": e, ref: t, ...n }) => /* @__PURE__ */ w(l, {
+		render: ({ "data-ui": e, ref: t, ...n }) => /* @__PURE__ */ T(m, {
 			...n,
 			ref: t,
 			type: "button",
-			disabled: u,
-			family: D,
+			disabled: l,
+			family: O,
 			marker: e
 		}),
-		children: o(n) && n !== "" && /* @__PURE__ */ w("span", {
-			css: R,
+		children: o(n) && n !== "" && /* @__PURE__ */ T("span", {
+			css: z,
 			"aria-hidden": !0,
 			children: n
 		})
@@ -227,33 +221,33 @@ function Y({ ref: e, disabled: t = !1, children: n = W, className: r, sx: i, ...
 }
 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, {
+	let { direction: r, triggerLabelledBy: i } = A("Content"), a = [t, n["aria-label"] === void 0 ? i : void 0].filter(Boolean).join(" ");
+	return /* @__PURE__ */ T(p, {
 		...n,
 		"aria-labelledby": a || void 0,
 		dir: e ?? r,
-		family: D,
+		family: O,
 		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, {
+	let r = A("Item");
+	return /* @__PURE__ */ T(d, {
 		...n,
 		disabled: r.disabled || t,
-		family: D,
+		family: O,
 		marker: "split-button-item",
-		styles: [f, U[e]]
+		styles: [u, f[e]]
 	});
 }
 Z.displayName = "SplitButton.Item";
 function Q(e) {
-	return k("Separator"), /* @__PURE__ */ w(u, {
+	return A("Separator"), /* @__PURE__ */ T(l, {
 		...e,
 		marker: "split-button-separator",
-		styles: m
+		styles: g
 	});
 }
 Q.displayName = "SplitButton.Separator";

package/dist/split-button.js

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