@devalok/shilp-sutra 0.34.0 → 0.36.0

package/dist/ui/split-button.js

@@ -1,282 +1,234 @@
 "use client";
-import { jsxs as m, Fragment as C, jsx as s } from "react/jsx-runtime";
-import * as n from "react";
-import { d as G, q as J, i as Q, e as T, g as V } from "../_chunks/vendor-client.js";
-import { cn as o } from "./lib/utils.js";
-import { A as X, m as Y } from "../_chunks/framer.js";
-const A = {
-  solid: {
-    accent: "bg-accent-11/20",
-    error: "bg-error-11/20",
-    success: "bg-success-11/20",
-    warning: "bg-warning-11/20",
-    neutral: "bg-neutral-8/30"
-  },
-  soft: {
-    accent: "bg-accent-6",
-    error: "bg-error-6",
-    success: "bg-success-6",
-    warning: "bg-warning-6",
-    neutral: "bg-surface-border"
-  },
-  outline: {
-    accent: "bg-accent-7",
-    error: "bg-error-7",
-    success: "bg-success-7",
-    warning: "bg-warning-7",
-    neutral: "bg-surface-border-strong"
-  }
-}, N = {
-  xs: "h-ds-xs-plus",
-  sm: "h-ds-sm",
-  md: "h-ds-md",
-  "icon-xs": "h-ds-xs-plus",
-  "icon-sm": "h-ds-sm",
-  "icon-md": "h-ds-md"
-}, Z = {
-  xs: "text-ds-sm",
-  sm: "text-ds-sm",
-  md: "text-ds-md",
-  "icon-xs": "text-ds-sm",
-  "icon-sm": "text-ds-sm",
-  "icon-md": "text-ds-md"
+import { cn as e, ln as t, mn as n, pn as r, un as i } from "../_chunks/primitives.js";
+import { a, c as o } from "../_chunks/framer.js";
+import { durations as s } from "./lib/motion.js";
+import { cn as c } from "./lib/utils.js";
+import * as l from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/ui/split-button.tsx
+var p = {
+	solid: {
+		accent: "bg-accent-11/20",
+		error: "bg-error-11/20",
+		success: "bg-success-11/20",
+		warning: "bg-warning-11/20",
+		neutral: "bg-neutral-8/30"
+	},
+	soft: {
+		accent: "bg-accent-6",
+		error: "bg-error-6",
+		success: "bg-success-6",
+		warning: "bg-warning-6",
+		neutral: "bg-surface-border"
+	},
+	outline: {
+		accent: "bg-accent-7",
+		error: "bg-error-7",
+		success: "bg-success-7",
+		warning: "bg-warning-7",
+		neutral: "bg-surface-border-strong"
+	}
+}, m = {
+	xs: "h-ds-xs-plus",
+	sm: "h-ds-sm",
+	md: "h-ds-md",
+	"icon-xs": "h-ds-xs-plus",
+	"icon-sm": "h-ds-sm",
+	"icon-md": "h-ds-md"
+}, h = {
+	xs: "text-ds-sm",
+	sm: "text-ds-sm",
+	md: "text-ds-md",
+	"icon-xs": "text-ds-sm",
+	"icon-sm": "text-ds-sm",
+	"icon-md": "text-ds-md"
+}, g = {
+	xs: "px-ds-03 gap-1",
+	sm: "px-ds-04 gap-1.5",
+	md: "px-ds-05 gap-2",
+	"icon-xs": "px-ds-02",
+	"icon-sm": "px-ds-03",
+	"icon-md": "px-ds-04"
 }, _ = {
-  xs: "px-ds-03 gap-1",
-  sm: "px-ds-04 gap-1.5",
-  md: "px-ds-05 gap-2",
-  "icon-xs": "px-ds-02",
-  "icon-sm": "px-ds-03",
-  "icon-md": "px-ds-04"
-}, I = {
-  xs: "px-ds-02",
-  sm: "px-ds-02",
-  md: "px-ds-03",
-  "icon-xs": "px-ds-01",
-  "icon-sm": "px-ds-02",
-  "icon-md": "px-ds-02"
-}, W = {
-  xs: "rounded-ds-md",
-  sm: "rounded-ds-md",
-  md: "rounded-ds-lg",
-  "icon-xs": "rounded-ds-sm",
-  "icon-sm": "rounded-ds-md",
-  "icon-md": "rounded-ds-md"
+	xs: "px-ds-02",
+	sm: "px-ds-02",
+	md: "px-ds-03",
+	"icon-xs": "px-ds-01",
+	"icon-sm": "px-ds-02",
+	"icon-md": "px-ds-02"
+}, v = {
+	xs: "rounded-ds-md",
+	sm: "rounded-ds-md",
+	md: "rounded-ds-lg",
+	"icon-xs": "rounded-ds-sm",
+	"icon-sm": "rounded-ds-md",
+	"icon-md": "rounded-ds-md"
 };
-function z(c, i) {
-  const u = {
-    solid: {
-      accent: "bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-11",
-      error: "bg-error-9 text-error-fg hover:bg-error-10 active:bg-error-11",
-      success: "bg-success-9 text-success-fg hover:bg-success-10 active:bg-success-11",
-      warning: "bg-warning-9 text-warning-fg hover:bg-warning-10 active:bg-warning-11",
-      neutral: "bg-neutral-5 text-surface-fg hover:bg-neutral-7 active:bg-neutral-8"
-    },
-    soft: {
-      accent: "bg-accent-3 text-accent-11 hover:bg-accent-4 active:bg-accent-5",
-      error: "bg-error-3 text-error-11 hover:bg-error-4 active:bg-error-5",
-      success: "bg-success-3 text-success-11 hover:bg-success-4 active:bg-success-5",
-      warning: "bg-warning-3 text-warning-11 hover:bg-warning-4 active:bg-warning-5",
-      neutral: "bg-surface-raised-hover text-surface-fg-muted hover:bg-surface-raised-active active:bg-neutral-5"
-    },
-    outline: {
-      accent: "bg-transparent text-accent-11 hover:bg-accent-3 active:bg-accent-4",
-      error: "bg-transparent text-error-11 hover:bg-error-3 active:bg-error-4",
-      success: "bg-transparent text-success-11 hover:bg-success-3 active:bg-success-4",
-      warning: "bg-transparent text-warning-11 hover:bg-warning-3 active:bg-warning-4",
-      neutral: "bg-transparent text-surface-fg hover:bg-surface-raised-hover active:bg-surface-raised-active"
-    }
-  };
-  return u[c][i] ?? u[c].accent;
+function y(e, t) {
+	let n = {
+		solid: {
+			accent: "bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-11",
+			error: "bg-error-9 text-error-fg hover:bg-error-10 active:bg-error-11",
+			success: "bg-success-9 text-success-fg hover:bg-success-10 active:bg-success-11",
+			warning: "bg-warning-9 text-warning-fg hover:bg-warning-10 active:bg-warning-11",
+			neutral: "bg-neutral-5 text-surface-fg hover:bg-neutral-7 active:bg-neutral-8"
+		},
+		soft: {
+			accent: "bg-accent-3 text-accent-11 hover:bg-accent-4 active:bg-accent-5",
+			error: "bg-error-3 text-error-11 hover:bg-error-4 active:bg-error-5",
+			success: "bg-success-3 text-success-11 hover:bg-success-4 active:bg-success-5",
+			warning: "bg-warning-3 text-warning-11 hover:bg-warning-4 active:bg-warning-5",
+			neutral: "bg-surface-raised-hover text-surface-fg-muted hover:bg-surface-raised-active active:bg-neutral-5"
+		},
+		outline: {
+			accent: "bg-transparent text-accent-11 hover:bg-accent-3 active:bg-accent-4",
+			error: "bg-transparent text-error-11 hover:bg-error-3 active:bg-error-4",
+			success: "bg-transparent text-success-11 hover:bg-success-3 active:bg-success-4",
+			warning: "bg-transparent text-warning-11 hover:bg-warning-3 active:bg-warning-4",
+			neutral: "bg-transparent text-surface-fg hover:bg-surface-raised-hover active:bg-surface-raised-active"
+		}
+	};
+	return n[e][t] ?? n[e].accent;
 }
-function ee(c) {
-  const i = {
-    accent: "border-accent-7",
-    error: "border-error-7",
-    success: "border-success-7",
-    warning: "border-warning-7",
-    neutral: "border-surface-border-strong"
-  };
-  return i[c] ?? i.accent;
+function b(e) {
+	let t = {
+		accent: "border-accent-7",
+		error: "border-error-7",
+		success: "border-success-7",
+		warning: "border-warning-7",
+		neutral: "border-surface-border-strong"
+	};
+	return t[e] ?? t.accent;
 }
-function M({ className: c }) {
-  return /* @__PURE__ */ s("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", className: c, "aria-hidden": "true", children: /* @__PURE__ */ s("path", { d: "M3 4.5L6 7.5L9 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+function x({ className: e }) {
+	return /* @__PURE__ */ d("svg", {
+		width: "12",
+		height: "12",
+		viewBox: "0 0 12 12",
+		fill: "none",
+		className: e,
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ d("path", {
+			d: "M3 4.5L6 7.5L9 4.5",
+			stroke: "currentColor",
+			strokeWidth: "1.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
 }
-const se = n.forwardRef(
-  function({
-    children: i,
-    onClick: u,
-    dropdownContent: E,
-    open: j,
-    onOpenChange: p,
-    variant: l = "solid",
-    color: v = "accent",
-    size: r = "md",
-    disabled: x = !1,
-    "aria-label": L,
-    dropdownLabel: R = "More options",
-    dropdownIcon: B,
-    triggerSide: O = "right",
-    placement: S = "top-end",
-    triggerWidth: g,
-    className: q
-  }, D) {
-    const [F, H] = n.useState(!1), h = j !== void 0, e = h ? j : F, b = n.useRef(null), f = n.useRef(null), w = n.useId(), d = n.useCallback(
-      (t) => {
-        p && p(t), h || H(t);
-      },
-      [p, h]
-    );
-    n.useEffect(() => {
-      if (!e || !b.current || !f.current) return;
-      const t = b.current, a = f.current;
-      return G(t, a, () => {
-        J(t, a, {
-          placement: S,
-          middleware: [
-            Q(8),
-            T({ fallbackPlacements: ["bottom-end", "top-start", "bottom-start"] }),
-            V({ padding: 8 })
-          ]
-        }).then(({ x: K, y: U }) => {
-          Object.assign(a.style, { left: `${K}px`, top: `${U}px` });
-        });
-      });
-    }, [e, S]), n.useEffect(() => {
-      if (!e) return;
-      const t = (a) => {
-        const k = a.target;
-        b.current?.contains(k) || f.current?.contains(k) || d(!1);
-      };
-      return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
-    }, [e, d]), n.useEffect(() => {
-      if (!e) return;
-      const t = (a) => {
-        a.key === "Escape" && d(!1);
-      };
-      return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
-    }, [e, d]);
-    const y = z(l, v), $ = A[l][v] ?? A[l].accent, P = g != null ? { width: typeof g == "number" ? `${g}px` : g } : void 0;
-    return /* @__PURE__ */ m(C, { children: [
-      /* @__PURE__ */ s(
-        "div",
-        {
-          ref: D,
-          role: "group",
-          "aria-label": L ?? void 0,
-          className: o("relative inline-flex", q),
-          children: /* @__PURE__ */ m(
-            "div",
-            {
-              ref: b,
-              className: o(
-                "inline-flex items-stretch overflow-hidden",
-                W[r],
-                l === "solid" && "shadow-raised",
-                l === "outline" && `border ${ee(v)}`
-              ),
-              children: [
-                O === "left" && /* @__PURE__ */ m(C, { children: [
-                  /* @__PURE__ */ s(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => d(!e),
-                      disabled: x,
-                      "aria-label": R,
-                      "aria-haspopup": "menu",
-                      "aria-expanded": e,
-                      "aria-controls": e ? w : void 0,
-                      className: o(
-                        "inline-flex items-center justify-center select-none",
-                        "transition-colors duration-fast-01 ease-productive-standard",
-                        "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset",
-                        "disabled:pointer-events-none disabled:opacity-action-disabled",
-                        y,
-                        N[r],
-                        I[r]
-                      ),
-                      style: P,
-                      children: B ?? /* @__PURE__ */ s(M, {})
-                    }
-                  ),
-                  /* @__PURE__ */ s("div", { className: o("w-px self-stretch", $) })
-                ] }),
-                /* @__PURE__ */ s(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: u,
-                    disabled: x,
-                    "aria-label": L,
-                    className: o(
-                      "inline-flex items-center justify-center font-semibold select-none whitespace-nowrap",
-                      "transition-colors duration-fast-01 ease-productive-standard",
-                      "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset",
-                      "disabled:pointer-events-none disabled:opacity-action-disabled",
-                      y,
-                      N[r],
-                      Z[r],
-                      _[r]
-                    ),
-                    children: i
-                  }
-                ),
-                O === "right" && /* @__PURE__ */ m(C, { children: [
-                  /* @__PURE__ */ s("div", { className: o("w-px self-stretch", $) }),
-                  /* @__PURE__ */ s(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: () => d(!e),
-                      disabled: x,
-                      "aria-label": R,
-                      "aria-haspopup": "menu",
-                      "aria-expanded": e,
-                      "aria-controls": e ? w : void 0,
-                      className: o(
-                        "inline-flex items-center justify-center select-none",
-                        "transition-colors duration-fast-01 ease-productive-standard",
-                        "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset",
-                        "disabled:pointer-events-none disabled:opacity-action-disabled",
-                        y,
-                        N[r],
-                        I[r]
-                      ),
-                      style: P,
-                      children: B ?? /* @__PURE__ */ s(M, {})
-                    }
-                  )
-                ] })
-              ]
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ s(X, { children: e && E && /* @__PURE__ */ s(
-        "div",
-        {
-          ref: f,
-          id: w,
-          role: "menu",
-          className: "fixed z-popover",
-          style: { top: 0, left: 0 },
-          children: /* @__PURE__ */ s(
-            Y.div,
-            {
-              initial: { opacity: 0, scale: 0.95 },
-              animate: { opacity: 1, scale: 1 },
-              exit: { opacity: 0, scale: 0.95 },
-              transition: { duration: 0.15 },
-              className: "rounded-ds-lg border border-surface-border-strong bg-surface-overlay shadow-floating",
-              children: E
-            }
-          )
-        }
-      ) })
-    ] });
-  }
-);
-se.displayName = "SplitButton";
-export {
-  se as SplitButton
-};
+var S = l.forwardRef(function({ children: S, onClick: C, dropdownContent: w, open: T, onOpenChange: E, variant: D = "solid", color: O = "accent", size: k = "md", disabled: A = !1, "aria-label": j, dropdownLabel: M = "More options", dropdownIcon: N, triggerSide: P = "right", placement: F = "top-end", triggerWidth: I, className: L }, R) {
+	let [z, B] = l.useState(!1), V = T !== void 0, H = V ? T : z, U = l.useRef(null), W = l.useRef(null), G = l.useId(), K = l.useCallback((e) => {
+		E && E(e), V || B(e);
+	}, [E, V]);
+	l.useEffect(() => {
+		if (!H || !U.current || !W.current) return;
+		let a = U.current, o = W.current;
+		return e(a, o, () => {
+			t(a, o, {
+				placement: F,
+				middleware: [
+					r(8),
+					i({ fallbackPlacements: [
+						"bottom-end",
+						"top-start",
+						"bottom-start"
+					] }),
+					n({ padding: 8 })
+				]
+			}).then(({ x: e, y: t }) => {
+				Object.assign(o.style, {
+					left: `${e}px`,
+					top: `${t}px`
+				});
+			});
+		});
+	}, [H, F]), l.useEffect(() => {
+		if (!H) return;
+		let e = (e) => {
+			let t = e.target;
+			U.current?.contains(t) || W.current?.contains(t) || K(!1);
+		};
+		return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+	}, [H, K]), l.useEffect(() => {
+		if (!H) return;
+		let e = (e) => {
+			e.key === "Escape" && K(!1);
+		};
+		return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+	}, [H, K]);
+	let q = y(D, O), J = p[D][O] ?? p[D].accent, Y = I == null ? void 0 : { width: typeof I == "number" ? `${I}px` : I };
+	return /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("div", {
+		ref: R,
+		role: "group",
+		"aria-label": j ?? void 0,
+		className: c("relative inline-flex", L),
+		children: /* @__PURE__ */ f("div", {
+			ref: U,
+			className: c("inline-flex items-stretch overflow-hidden", v[k], D === "solid" && "shadow-raised", D === "outline" && `border ${b(O)}`),
+			children: [
+				P === "left" && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("button", {
+					type: "button",
+					onClick: () => K(!H),
+					disabled: A,
+					"aria-label": M,
+					"aria-haspopup": "menu",
+					"aria-expanded": H,
+					"aria-controls": H ? G : void 0,
+					className: c("inline-flex items-center justify-center select-none", "transition-colors duration-fast-01 ease-productive-standard", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset", "disabled:pointer-events-none disabled:opacity-action-disabled", q, m[k], _[k]),
+					style: Y,
+					children: N ?? /* @__PURE__ */ d(x, {})
+				}), /* @__PURE__ */ d("div", { className: c("w-px self-stretch", J) })] }),
+				/* @__PURE__ */ d("button", {
+					type: "button",
+					onClick: C,
+					disabled: A,
+					"aria-label": j,
+					className: c("inline-flex items-center justify-center font-semibold select-none whitespace-nowrap", "transition-[colors,transform] duration-fast-01 ease-productive-standard", "active:scale-[0.97]", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset", "disabled:pointer-events-none disabled:opacity-action-disabled", q, m[k], h[k], g[k]),
+					children: S
+				}),
+				P === "right" && /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d("div", { className: c("w-px self-stretch", J) }), /* @__PURE__ */ d("button", {
+					type: "button",
+					onClick: () => K(!H),
+					disabled: A,
+					"aria-label": M,
+					"aria-haspopup": "menu",
+					"aria-expanded": H,
+					"aria-controls": H ? G : void 0,
+					className: c("inline-flex items-center justify-center select-none", "transition-colors duration-fast-01 ease-productive-standard", "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset", "disabled:pointer-events-none disabled:opacity-action-disabled", q, m[k], _[k]),
+					style: Y,
+					children: N ?? /* @__PURE__ */ d(x, {})
+				})] })
+			]
+		})
+	}), /* @__PURE__ */ d(o, { children: H && w && /* @__PURE__ */ d("div", {
+		ref: W,
+		id: G,
+		role: "menu",
+		className: "fixed z-popover",
+		style: {
+			top: 0,
+			left: 0
+		},
+		children: /* @__PURE__ */ d(a.div, {
+			initial: {
+				opacity: 0,
+				scale: .95
+			},
+			animate: {
+				opacity: 1,
+				scale: 1
+			},
+			exit: {
+				opacity: 0,
+				scale: .95
+			},
+			transition: { duration: s.moderate01 },
+			className: "rounded-ds-lg border border-surface-border-strong bg-surface-overlay shadow-floating",
+			children: w
+		})
+	}) })] });
+});
+S.displayName = "SplitButton";
+//#endregion
+export { S as SplitButton };

package/dist/ui/split-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-button.js","names":[],"sources":["../../src/ui/split-button.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { computePosition, flip, offset, shift, autoUpdate, type Placement } from '@floating-ui/dom'\nimport { AnimatePresence, motion } from 'framer-motion'\nimport { type VariantProps } from 'class-variance-authority'\nimport { buttonVariants } from './button'\nimport { cn } from './lib/utils'\nimport { durations } from './lib/motion'\n\n// ── Types ───────────────────────────────────────────────────────\n\ntype SplitButtonVariant = 'solid' | 'soft' | 'outline'\ntype SplitButtonColor = NonNullable<VariantProps<typeof buttonVariants>['color']>\ntype SplitButtonSize = 'xs' | 'sm' | 'md' | 'icon-xs' | 'icon-sm' | 'icon-md'\n\nexport interface SplitButtonProps {\n  /** Primary action content (left side). */\n  children: React.ReactNode\n  /** Primary click handler (left side). */\n  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void\n  /** Content rendered inside the floating dropdown panel. */\n  dropdownContent?: React.ReactNode\n  /** Controlled open state. */\n  open?: boolean\n  /** Called when open state changes. Uncontrolled if omitted. */\n  onOpenChange?: (open: boolean) => void\n  /** @default 'solid' */\n  variant?: SplitButtonVariant\n  /** @default 'accent' */\n  color?: SplitButtonColor\n  /** @default 'md' */\n  size?: SplitButtonSize\n  /** Disable both halves. */\n  disabled?: boolean\n  /** aria-label for the primary button. */\n  'aria-label'?: string\n  /** aria-label for the dropdown trigger. @default 'More options' */\n  dropdownLabel?: string\n  /** Custom icon for the dropdown trigger. Defaults to chevron-down. */\n  dropdownIcon?: React.ReactNode\n  /** Which side the dropdown trigger sits on. @default 'right' */\n  triggerSide?: 'left' | 'right'\n  /** Preferred placement for the dropdown panel. @default 'top-end' */\n  placement?: Placement\n  /** Width of the trigger (chevron) half. @default 'auto' */\n  triggerWidth?: number | string\n  className?: string\n}\n\n// ── Styling maps ────────────────────────────────────────────────\n\nconst dividerColor: Record<SplitButtonVariant, Record<string, string>> = {\n  solid: {\n    accent: 'bg-accent-11/20', error: 'bg-error-11/20', success: 'bg-success-11/20',\n    warning: 'bg-warning-11/20', neutral: 'bg-neutral-8/30',\n  },\n  soft: {\n    accent: 'bg-accent-6', error: 'bg-error-6', success: 'bg-success-6',\n    warning: 'bg-warning-6', neutral: 'bg-surface-border',\n  },\n  outline: {\n    accent: 'bg-accent-7', error: 'bg-error-7', success: 'bg-success-7',\n    warning: 'bg-warning-7', neutral: 'bg-surface-border-strong',\n  },\n}\n\nconst heightClass: Record<SplitButtonSize, string> = {\n  xs: 'h-ds-xs-plus', sm: 'h-ds-sm', md: 'h-ds-md',\n  'icon-xs': 'h-ds-xs-plus', 'icon-sm': 'h-ds-sm', 'icon-md': 'h-ds-md',\n}\n\nconst textClass: Record<SplitButtonSize, string> = {\n  xs: 'text-ds-sm', sm: 'text-ds-sm', md: 'text-ds-md',\n  'icon-xs': 'text-ds-sm', 'icon-sm': 'text-ds-sm', 'icon-md': 'text-ds-md',\n}\n\nconst primaryPadding: Record<SplitButtonSize, string> = {\n  xs: 'px-ds-03 gap-1', sm: 'px-ds-04 gap-1.5', md: 'px-ds-05 gap-2',\n  'icon-xs': 'px-ds-02', 'icon-sm': 'px-ds-03', 'icon-md': 'px-ds-04',\n}\n\nconst triggerPadding: Record<SplitButtonSize, string> = {\n  xs: 'px-ds-02', sm: 'px-ds-02', md: 'px-ds-03',\n  'icon-xs': 'px-ds-01', 'icon-sm': 'px-ds-02', 'icon-md': 'px-ds-02',\n}\n\nconst radiusClass: Record<SplitButtonSize, string> = {\n  xs: 'rounded-ds-md', sm: 'rounded-ds-md', md: 'rounded-ds-lg',\n  'icon-xs': 'rounded-ds-sm', 'icon-sm': 'rounded-ds-md', 'icon-md': 'rounded-ds-md',\n}\n\nfunction getHalfClasses(variant: SplitButtonVariant, color: string): string {\n  const map: Record<SplitButtonVariant, Record<string, string>> = {\n    solid: {\n      accent: 'bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-11',\n      error: 'bg-error-9 text-error-fg hover:bg-error-10 active:bg-error-11',\n      success: 'bg-success-9 text-success-fg hover:bg-success-10 active:bg-success-11',\n      warning: 'bg-warning-9 text-warning-fg hover:bg-warning-10 active:bg-warning-11',\n      neutral: 'bg-neutral-5 text-surface-fg hover:bg-neutral-7 active:bg-neutral-8',\n    },\n    soft: {\n      accent: 'bg-accent-3 text-accent-11 hover:bg-accent-4 active:bg-accent-5',\n      error: 'bg-error-3 text-error-11 hover:bg-error-4 active:bg-error-5',\n      success: 'bg-success-3 text-success-11 hover:bg-success-4 active:bg-success-5',\n      warning: 'bg-warning-3 text-warning-11 hover:bg-warning-4 active:bg-warning-5',\n      neutral: 'bg-surface-raised-hover text-surface-fg-muted hover:bg-surface-raised-active active:bg-neutral-5',\n    },\n    outline: {\n      accent: 'bg-transparent text-accent-11 hover:bg-accent-3 active:bg-accent-4',\n      error: 'bg-transparent text-error-11 hover:bg-error-3 active:bg-error-4',\n      success: 'bg-transparent text-success-11 hover:bg-success-3 active:bg-success-4',\n      warning: 'bg-transparent text-warning-11 hover:bg-warning-3 active:bg-warning-4',\n      neutral: 'bg-transparent text-surface-fg hover:bg-surface-raised-hover active:bg-surface-raised-active',\n    },\n  }\n  return map[variant][color] ?? map[variant].accent\n}\n\nfunction getOutlineBorderColor(color: string): string {\n  const map: Record<string, string> = {\n    accent: 'border-accent-7', error: 'border-error-7', success: 'border-success-7',\n    warning: 'border-warning-7', neutral: 'border-surface-border-strong',\n  }\n  return map[color] ?? map.accent\n}\n\n// ── Chevron SVG ─────────────────────────────────────────────────\n\nfunction ChevronDown({ className }: { className?: string }) {\n  return (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" className={className} aria-hidden=\"true\">\n      <path d=\"M3 4.5L6 7.5L9 4.5\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\n// ── Component ───────────────────────────────────────────────────\n\nconst SplitButton = React.forwardRef<HTMLDivElement, SplitButtonProps>(\n  function SplitButton(\n    {\n      children,\n      onClick,\n      dropdownContent,\n      open: openProp,\n      onOpenChange,\n      variant = 'solid',\n      color = 'accent',\n      size = 'md',\n      disabled = false,\n      'aria-label': ariaLabel,\n      dropdownLabel = 'More options',\n      dropdownIcon,\n      triggerSide = 'right',\n      placement: placementProp = 'top-end',\n      triggerWidth,\n      className,\n    },\n    ref,\n  ) {\n    const [internalOpen, setInternalOpen] = React.useState(false)\n    const isControlled = openProp !== undefined\n    const isOpen = isControlled ? openProp : internalOpen\n\n    const anchorRef = React.useRef<HTMLDivElement>(null)\n    const floatingRef = React.useRef<HTMLDivElement>(null)\n    const menuId = React.useId()\n\n    const setOpen = React.useCallback(\n      (value: boolean) => {\n        if (onOpenChange) onOpenChange(value)\n        if (!isControlled) setInternalOpen(value)\n      },\n      [onOpenChange, isControlled],\n    )\n\n    // ── Floating UI positioning ──\n    React.useEffect(() => {\n      if (!isOpen || !anchorRef.current || !floatingRef.current) return\n\n      const anchor = anchorRef.current\n      const floating = floatingRef.current\n\n      const update = () => {\n        computePosition(anchor, floating, {\n          placement: placementProp,\n          middleware: [\n            offset(8),\n            flip({ fallbackPlacements: ['bottom-end', 'top-start', 'bottom-start'] }),\n            shift({ padding: 8 }),\n          ],\n        }).then(({ x, y }) => {\n          Object.assign(floating.style, { left: `${x}px`, top: `${y}px` })\n        })\n      }\n\n      const cleanup = autoUpdate(anchor, floating, update)\n      return cleanup\n    }, [isOpen, placementProp])\n\n    // ── Close on outside click ──\n    React.useEffect(() => {\n      if (!isOpen) return\n      const handleClick = (e: MouseEvent) => {\n        const target = e.target as Node\n        if (\n          anchorRef.current?.contains(target) ||\n          floatingRef.current?.contains(target)\n        ) return\n        setOpen(false)\n      }\n      document.addEventListener('mousedown', handleClick)\n      return () => document.removeEventListener('mousedown', handleClick)\n    }, [isOpen, setOpen])\n\n    // ── Close on Escape ──\n    React.useEffect(() => {\n      if (!isOpen) return\n      const handleKey = (e: KeyboardEvent) => {\n        if (e.key === 'Escape') setOpen(false)\n      }\n      document.addEventListener('keydown', handleKey)\n      return () => document.removeEventListener('keydown', handleKey)\n    }, [isOpen, setOpen])\n\n    const halfClasses = getHalfClasses(variant, color)\n    const divider = dividerColor[variant][color] ?? dividerColor[variant].accent\n\n    const triggerStyle = triggerWidth != null\n      ? { width: typeof triggerWidth === 'number' ? `${triggerWidth}px` : triggerWidth }\n      : undefined\n\n    return (\n      <>\n        {/* Button group */}\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label={ariaLabel ?? undefined}\n          className={cn('relative inline-flex', className)}\n        >\n          <div\n            ref={anchorRef}\n            className={cn(\n              'inline-flex items-stretch overflow-hidden',\n              radiusClass[size],\n              variant === 'solid' && 'shadow-raised',\n              variant === 'outline' && `border ${getOutlineBorderColor(color)}`,\n            )}\n          >\n            {triggerSide === 'left' && (\n              <>\n                {/* Dropdown trigger (left) */}\n                <button\n                  type=\"button\"\n                  onClick={() => setOpen(!isOpen)}\n                  disabled={disabled}\n                  aria-label={dropdownLabel}\n                  aria-haspopup=\"menu\"\n                  aria-expanded={isOpen}\n                  aria-controls={isOpen ? menuId : undefined}\n                  className={cn(\n                    'inline-flex items-center justify-center select-none',\n                    'transition-colors duration-fast-01 ease-productive-standard',\n                    'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset',\n                    'disabled:pointer-events-none disabled:opacity-action-disabled',\n                    halfClasses,\n                    heightClass[size],\n                    triggerPadding[size],\n                  )}\n                  style={triggerStyle}\n                >\n                  {dropdownIcon ?? <ChevronDown />}\n                </button>\n                <div className={cn('w-px self-stretch', divider)} />\n              </>\n            )}\n\n            {/* Primary action */}\n            <button\n              type=\"button\"\n              onClick={onClick}\n              disabled={disabled}\n              aria-label={ariaLabel}\n              className={cn(\n                'inline-flex items-center justify-center font-semibold select-none whitespace-nowrap',\n                'transition-[colors,transform] duration-fast-01 ease-productive-standard',\n                'active:scale-[0.97]',\n                'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset',\n                'disabled:pointer-events-none disabled:opacity-action-disabled',\n                halfClasses,\n                heightClass[size],\n                textClass[size],\n                primaryPadding[size],\n              )}\n            >\n              {children}\n            </button>\n\n            {triggerSide === 'right' && (\n              <>\n                <div className={cn('w-px self-stretch', divider)} />\n                {/* Dropdown trigger (right) */}\n                <button\n                  type=\"button\"\n                  onClick={() => setOpen(!isOpen)}\n                  disabled={disabled}\n                  aria-label={dropdownLabel}\n                  aria-haspopup=\"menu\"\n                  aria-expanded={isOpen}\n                  aria-controls={isOpen ? menuId : undefined}\n                  className={cn(\n                    'inline-flex items-center justify-center select-none',\n                    'transition-colors duration-fast-01 ease-productive-standard',\n                    'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset',\n                    'disabled:pointer-events-none disabled:opacity-action-disabled',\n                    halfClasses,\n                    heightClass[size],\n                    triggerPadding[size],\n                  )}\n                  style={triggerStyle}\n                >\n                  {dropdownIcon ?? <ChevronDown />}\n                </button>\n              </>\n            )}\n          </div>\n        </div>\n\n        {/* Floating dropdown panel */}\n        <AnimatePresence>\n          {isOpen && dropdownContent && (\n            <div\n              ref={floatingRef}\n              id={menuId}\n              role=\"menu\"\n              className=\"fixed z-popover\"\n              style={{ top: 0, left: 0 }}\n            >\n              <motion.div\n                initial={{ opacity: 0, scale: 0.95 }}\n                animate={{ opacity: 1, scale: 1 }}\n                exit={{ opacity: 0, scale: 0.95 }}\n                transition={{ duration: durations.moderate01 }}\n                className=\"rounded-ds-lg border border-surface-border-strong bg-surface-overlay shadow-floating\"\n              >\n                {dropdownContent}\n              </motion.div>\n            </div>\n          )}\n        </AnimatePresence>\n      </>\n    )\n  },\n)\n\nSplitButton.displayName = 'SplitButton'\n\nexport { SplitButton }\nexport type { SplitButtonVariant, SplitButtonColor, SplitButtonSize }\n"],"mappings":"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"}