@jfrader/ui 0.4.0 → 0.5.1

package/dist/split-button-BCw4zZom.js

@@ -0,0 +1,262 @@
+'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-NLY0h6EJ.js";
+import { s as c } from "./listbox-style-WX-RASp1.js";
+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 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 j = {
+	solid: "soft",
+	soft: "soft",
+	outline: "outline",
+	ghost: "ghost"
+}, M = {
+	sm: "32px",
+	md: "40px",
+	lg: "48px"
+}, N = t({
+	label: "split-button",
+	display: "inline-flex",
+	alignItems: "stretch",
+	maxInlineSize: "100%",
+	verticalAlign: "middle",
+	isolation: "isolate"
+}), P = { "&:focus-visible": {
+	position: "relative",
+	zIndex: 1
+} }, F = t({
+	label: "split-button-action",
+	flex: "0 1 auto",
+	minInlineSize: 0,
+	blockSize: "auto",
+	paddingBlock: w.space[1],
+	whiteSpace: "normal",
+	textAlign: "center",
+	borderStartEndRadius: 0,
+	borderEndEndRadius: 0,
+	borderInlineEndWidth: 0,
+	...P,
+	[r]: { borderColor: "ButtonText" }
+}), I = t({
+	label: "split-button-trigger",
+	flexShrink: 0,
+	blockSize: "auto",
+	paddingInline: 0,
+	borderStartStartRadius: 0,
+	borderEndStartRadius: 0,
+	borderInlineStartColor: w.color.borderControl,
+	...P,
+	[r]: { borderColor: "ButtonText" }
+}), 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
+})])), z = t({
+	display: "inline-flex",
+	transitionProperty: "transform",
+	transitionDuration: w.motion.duration.fast,
+	transitionTimingFunction: w.motion.easeStandard,
+	"& svg": {
+		inlineSize: "1em",
+		blockSize: "1em"
+	},
+	"[aria-expanded=\"true\"] > &": { transform: "rotate(180deg)" },
+	[i]: {
+		transitionDuration: "0s",
+		"[aria-expanded=\"true\"] > &": { transform: "none" }
+	},
+	[r]: { color: "ButtonText" }
+}), B = e({
+	from: { opacity: 0 },
+	to: { opacity: 1 }
+}), V = t({
+	display: "inline-grid",
+	justifyItems: "center",
+	"& > *": { gridArea: "1 / 1" }
+}), H = t({ visibility: "hidden" }), U = t({
+	"&[data-swapped]": { animation: `${B} ${w.motion.duration.base} ${w.motion.easeStandard}` },
+	[i]: { "&[data-swapped]": { animation: "none" } }
+}), W = /* @__PURE__ */ T("svg", {
+	viewBox: "0 0 16 16",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "1.5",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	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), 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,
+		_
+	]);
+	let P = (e) => {
+		e && o || _(e);
+	}, F = x(() => ({
+		variant: t,
+		tone: r,
+		size: i,
+		disabled: o,
+		direction: E,
+		triggerLabelledBy: A,
+		setTriggerLabelledBy: j
+	}), [
+		t,
+		r,
+		i,
+		o,
+		E,
+		A
+	]);
+	return /* @__PURE__ */ T(h, {
+		open: g,
+		onOpenChange: P,
+		placement: u,
+		children: /* @__PURE__ */ T(k.Provider, {
+			value: F,
+			children: /* @__PURE__ */ T(n, {
+				className: d,
+				styles: N,
+				sx: f,
+				children: (e) => /* @__PURE__ */ T("div", {
+					...m,
+					ref: w,
+					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] = 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__ */ T("span", {
+			css: H,
+			"aria-hidden": !0,
+			children: e
+		}, 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 = A("Action"), f = d.disabled || i, p = r ?? d.size;
+	return /* @__PURE__ */ T(s, {
+		...u,
+		ref: e,
+		variant: t ?? d.variant,
+		tone: n ?? d.tone,
+		size: p,
+		disabled: f,
+		"data-ui": "split-button-action",
+		css: [F, L[p]],
+		className: c,
+		sx: l,
+		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__ */ T(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 = 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: j[c.variant],
+		tone: c.tone,
+		size: c.size,
+		disabled: l,
+		"data-ui": "split-button-trigger",
+		css: [I, R[c.size]],
+		className: r,
+		sx: i,
+		render: ({ "data-ui": e, ref: t, ...n }) => /* @__PURE__ */ T(m, {
+			...n,
+			ref: t,
+			type: "button",
+			disabled: l,
+			family: O,
+			marker: e
+		}),
+		children: o(n) && n !== "" && /* @__PURE__ */ T("span", {
+			css: z,
+			"aria-hidden": !0,
+			children: n
+		})
+	});
+}
+Y.displayName = "SplitButton.Trigger";
+function X({ dir: e, "aria-labelledby": t, ...n }) {
+	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: O,
+		marker: "split-button-content",
+		styles: c
+	});
+}
+X.displayName = "SplitButton.Content";
+function Z({ tone: e = "neutral", disabled: t = !1, ...n }) {
+	let r = A("Item");
+	return /* @__PURE__ */ T(d, {
+		...n,
+		disabled: r.disabled || t,
+		family: O,
+		marker: "split-button-item",
+		styles: [u, f[e]]
+	});
+}
+Z.displayName = "SplitButton.Item";
+function Q(e) {
+	return A("Separator"), /* @__PURE__ */ T(l, {
+		...e,
+		marker: "split-button-separator",
+		styles: g
+	});
+}
+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-BCw4zZom.js";