@pactor-app/ui 1.43.0 → 1.46.0

package/dist/ui/index.js

@@ -25,10 +25,6 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-  Bubble,
-  BubbleContent,
-  BubbleGroup,
-  BubbleReactions,
   ButtonGroup,
   Calendar,
   Carousel,
@@ -161,7 +157,7 @@ import {
   toggleVariants,
   typographyVariants,
   useCarousel
-} from "../chunk-T3TGKYAB.js";
+} from "../chunk-XA7J5SGA.js";
 import {
   Dialog,
   DialogClose,
@@ -247,10 +243,48 @@ import {
   cn
 } from "../chunk-WKJUCGV4.js";
 
+// src/ui/action-button.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ActionButton({
+  className,
+  variant,
+  size,
+  icon,
+  label,
+  tooltip,
+  type = "button",
+  ...props
+}) {
+  const resolvedSize = size ?? (label ? "sm" : "icon-sm");
+  if (process.env.NODE_ENV !== "production" && !label && !props["aria-label"]) {
+    console.warn("[ActionButton] icon-only \u7528\u6CD5\u987B\u4F20 aria-label \u4EE5\u4FDD\u8BC1\u53EF\u8BBF\u95EE\u6027\u3002");
+  }
+  const button = /* @__PURE__ */ jsxs(
+    Button,
+    {
+      "data-slot": "action-button",
+      variant,
+      size: resolvedSize,
+      type,
+      className: cn(className),
+      ...props,
+      children: [
+        icon,
+        label ? /* @__PURE__ */ jsx("span", { children: label }) : null
+      ]
+    }
+  );
+  if (!tooltip) return button;
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { render: button }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })
+  ] });
+}
+
 // src/ui/attachment.tsx
 import { cva } from "class-variance-authority";
 import * as React from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var attachmentVariants = cva(
   "group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border bg-card text-card-foreground transition-colors focus-within:ring-1 focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed",
   {
@@ -274,7 +308,7 @@ function Attachment({
   orientation = "horizontal",
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       "data-slot": "attachment",
@@ -305,7 +339,7 @@ function AttachmentMedia({
   variant = "icon",
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       "data-slot": "attachment-media",
@@ -319,7 +353,7 @@ function AttachmentContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       "data-slot": "attachment-content",
@@ -335,7 +369,7 @@ function AttachmentTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "span",
     {
       "data-slot": "attachment-title",
@@ -351,7 +385,7 @@ function AttachmentDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "span",
     {
       "data-slot": "attachment-description",
@@ -368,7 +402,7 @@ function AttachmentActions({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       "data-slot": "attachment-actions",
@@ -386,7 +420,7 @@ function AttachmentAction({
   size = "icon-xs",
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     Button,
     {
       "data-slot": "attachment-action",
@@ -415,7 +449,7 @@ function AttachmentTrigger({
       ...props
     });
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "button",
     {
       "data-slot": "attachment-trigger",
@@ -427,7 +461,7 @@ function AttachmentTrigger({
   );
 }
 function AttachmentGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       "data-slot": "attachment-group",
@@ -440,10 +474,584 @@ function AttachmentGroup({ className, ...props }) {
   );
 }
 
+// src/ui/bubble.tsx
+import * as React2 from "react";
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function BubbleGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-slot": "bubble-group",
+      className: cn("flex min-w-0 flex-col gap-2", className),
+      ...props
+    }
+  );
+}
+var bubbleVariants = cva2(
+  "group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full",
+  {
+    variants: {
+      variant: {
+        default: "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-primary/80",
+        secondary: "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
+        muted: "*:data-[slot=bubble-content]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:bg-[color-mix(in_oklch,var(--muted),var(--foreground)_5%)]",
+        tinted: "*:data-[slot=bubble-content]:bg-(--bubble-background) *:data-[slot=bubble-content]:text-foreground [&>[data-slot=bubble-content]:is(button,a):hover]:bg-(--bubble-hover-background)",
+        outline: "*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-card [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-input/30",
+        ghost: "border-none *:data-[slot=bubble-content]:rounded-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted [&>[data-slot=bubble-content]:is(button,a):hover]:text-foreground dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-muted/50",
+        destructive: "*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive dark:*:data-[slot=bubble-content]:bg-destructive/20 [&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20 dark:[&>[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/30"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Bubble({
+  variant = "default",
+  align = "start",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-slot": "bubble",
+      "data-variant": variant,
+      "data-align": align,
+      className: cn(bubbleVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function BubbleContent({
+  asChild = false,
+  className,
+  children,
+  ...props
+}) {
+  const cls = cn(
+    "w-fit max-w-full min-w-0 overflow-hidden rounded-xl border border-transparent px-3 py-2 text-sm leading-relaxed wrap-break-word group-data-[align=end]/bubble:self-end [button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-3 [button,a]:focus-visible:ring-ring/50",
+    className
+  );
+  if (asChild && React2.isValidElement(children)) {
+    return React2.cloneElement(children, {
+      "data-slot": "bubble-content",
+      className: cn(cls, children.props.className),
+      ...props
+    });
+  }
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-slot": "bubble-content",
+      className: cls,
+      ...props,
+      children
+    }
+  );
+}
+var bubbleReactionsVariants = cva2(
+  "absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0",
+  {
+    variants: {
+      side: {
+        top: "top-0 -translate-y-3/4",
+        bottom: "bottom-0 translate-y-3/4"
+      },
+      align: {
+        start: "left-3",
+        end: "right-3"
+      }
+    },
+    defaultVariants: {
+      side: "bottom",
+      align: "end"
+    }
+  }
+);
+function BubbleReactions({
+  side = "bottom",
+  align = "end",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-slot": "bubble-reactions",
+      "data-align": align,
+      "data-side": side,
+      className: cn(bubbleReactionsVariants({ side, align }), className),
+      ...props
+    }
+  );
+}
+
+// src/ui/confirm-morph.tsx
+import { CheckIcon, RotateCcwIcon } from "lucide-react";
+import * as React3 from "react";
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function ConfirmMorph({
+  className,
+  variant,
+  size,
+  label,
+  confirmLabel = "\u786E\u8BA4",
+  pendingLabel,
+  successLabel = "\u5DF2\u5B8C\u6210",
+  undoLabel = "\u64A4\u9500",
+  confirmVariant = "destructive",
+  confirmTimeout = 3e3,
+  resetDelay = 1500,
+  onConfirm,
+  onUndo,
+  onStateChange,
+  disabled,
+  type = "button",
+  ...props
+}) {
+  const [state, setState] = React3.useState("idle");
+  const timerRef = React3.useRef(null);
+  const generationRef = React3.useRef(0);
+  const transition = React3.useCallback(
+    (next) => {
+      setState(next);
+      onStateChange?.(next);
+    },
+    [onStateChange]
+  );
+  const clearTimer = React3.useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+  React3.useEffect(() => clearTimer, [clearTimer]);
+  const handleClick = () => {
+    if (disabled) return;
+    if (state === "idle") {
+      transition("confirming");
+      clearTimer();
+      timerRef.current = setTimeout(() => {
+        generationRef.current += 1;
+        transition("idle");
+      }, confirmTimeout);
+      return;
+    }
+    if (state === "confirming") {
+      clearTimer();
+      const generation = ++generationRef.current;
+      let result;
+      try {
+        result = onConfirm?.();
+      } catch {
+        transition("error");
+        return;
+      }
+      if (result && typeof result.then === "function") {
+        transition("pending");
+        result.then(
+          () => {
+            if (generationRef.current !== generation) return;
+            transition("success");
+            timerRef.current = setTimeout(
+              () => transition("idle"),
+              resetDelay
+            );
+          },
+          () => {
+            if (generationRef.current !== generation) return;
+            transition("error");
+          }
+        );
+      } else {
+        transition("success");
+        timerRef.current = setTimeout(() => transition("idle"), resetDelay);
+      }
+      return;
+    }
+    if (state === "error") {
+      generationRef.current += 1;
+      onUndo?.();
+      transition("idle");
+    }
+  };
+  const interactive = state === "idle" || state === "confirming" || state === "error";
+  const currentVariant = state === "confirming" ? confirmVariant : variant;
+  const segments = [
+    { key: "idle", content: label },
+    { key: "confirming", content: confirmLabel },
+    {
+      key: "pending",
+      content: /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx4(Spinner, { className: "motion-reduce:animate-none" }),
+        pendingLabel ? /* @__PURE__ */ jsx4("span", { children: pendingLabel }) : null
+      ] })
+    },
+    {
+      key: "success",
+      content: /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx4(CheckIcon, {}),
+        /* @__PURE__ */ jsx4("span", { children: successLabel })
+      ] })
+    },
+    {
+      key: "error",
+      content: /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx4(RotateCcwIcon, {}),
+        /* @__PURE__ */ jsx4("span", { children: undoLabel })
+      ] })
+    }
+  ];
+  return /* @__PURE__ */ jsx4(
+    Button,
+    {
+      "data-slot": "confirm-morph",
+      "data-state": state,
+      variant: currentVariant,
+      size,
+      type,
+      disabled,
+      "aria-busy": state === "pending" || void 0,
+      className: cn(
+        "transition-colors motion-reduce:transition-none",
+        !interactive && "pointer-events-none",
+        className
+      ),
+      onClick: handleClick,
+      ...props,
+      children: /* @__PURE__ */ jsx4("span", { className: "grid", children: segments.map((segment) => {
+        const active = state === segment.key;
+        return /* @__PURE__ */ jsx4(
+          "span",
+          {
+            "data-segment": segment.key,
+            "aria-hidden": active ? void 0 : true,
+            className: cn(
+              "col-start-1 row-start-1 inline-flex items-center justify-center gap-2 whitespace-nowrap transition-opacity duration-150 motion-reduce:transition-none",
+              active ? "opacity-100" : "pointer-events-none opacity-0"
+            ),
+            children: segment.content
+          },
+          segment.key
+        );
+      }) })
+    }
+  );
+}
+
+// src/ui/copy-button.tsx
+import * as React4 from "react";
+
+// src/ui/icon-morph.tsx
+import {
+  Check,
+  CircleQuestionMark,
+  Copy,
+  Menu,
+  Minus,
+  Pause,
+  Play,
+  Plus,
+  X
+} from "lucide-react";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var MORPH_PAIRS = {
+  "menu-close": { a: Menu, b: X },
+  "play-pause": { a: Play, b: Pause },
+  "copy-check": { a: Copy, b: Check },
+  "plus-minus": { a: Plus, b: Minus }
+};
+function IconMorph({ morph, state, className, style }) {
+  const pair = MORPH_PAIRS[morph];
+  if (!pair) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `[IconMorph] \u672A\u77E5\u9884\u8BBE\u56FE\u6807\u5BF9 "${morph}"\uFF0C\u5DF2\u6E32\u67D3\u5360\u4F4D\u56FE\u6807\u3002\u53EF\u7528\u503C\uFF1A${Object.keys(MORPH_PAIRS).join(" / ")}`
+      );
+    }
+    return /* @__PURE__ */ jsx5(
+      "span",
+      {
+        "data-slot": "icon-morph",
+        "data-unknown": morph,
+        className: cn("relative inline-flex size-4 shrink-0", className),
+        style,
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx5(CircleQuestionMark, { className: "size-full" })
+      }
+    );
+  }
+  const layers = [
+    { key: "a", Icon: pair.a },
+    { key: "b", Icon: pair.b }
+  ];
+  return /* @__PURE__ */ jsx5(
+    "span",
+    {
+      "data-slot": "icon-morph",
+      "data-state": state,
+      className: cn("relative inline-flex size-4 shrink-0", className),
+      style,
+      "aria-hidden": "true",
+      children: layers.map(({ key, Icon }) => {
+        const active = state === key;
+        return /* @__PURE__ */ jsx5(
+          Icon,
+          {
+            "data-state": active ? "active" : "inactive",
+            className: cn(
+              "absolute inset-0 size-full transition-all duration-200 ease-out motion-reduce:transition-none",
+              active ? "rotate-0 scale-100 opacity-100" : "scale-50 opacity-0",
+              !active && (key === "a" ? "-rotate-90" : "rotate-90")
+            )
+          },
+          key
+        );
+      })
+    }
+  );
+}
+
+// src/ui/copy-button.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function CopyButton({
+  className,
+  variant = "outline",
+  size = "sm",
+  value,
+  label,
+  copiedLabel,
+  resetDelay = 1500,
+  onCopy,
+  onError,
+  onClick,
+  disabled,
+  type = "button",
+  ...props
+}) {
+  const [copied, setCopied] = React4.useState(false);
+  const timerRef = React4.useRef(null);
+  React4.useEffect(
+    () => () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    },
+    []
+  );
+  const handleClick = async (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented || disabled) return;
+    try {
+      if (!navigator.clipboard?.writeText) {
+        throw new Error("navigator.clipboard \u4E0D\u53EF\u7528\uFF08\u975E\u5B89\u5168\u4E0A\u4E0B\u6587\uFF09");
+      }
+      await navigator.clipboard.writeText(value);
+      if (timerRef.current) clearTimeout(timerRef.current);
+      setCopied(true);
+      onCopy?.(value);
+      timerRef.current = setTimeout(() => setCopied(false), resetDelay);
+    } catch (error) {
+      onError?.(error);
+    }
+  };
+  return /* @__PURE__ */ jsxs3(
+    Button,
+    {
+      "data-slot": "copy-button",
+      "data-state": copied ? "copied" : "idle",
+      variant,
+      size,
+      type,
+      disabled,
+      className: cn(className),
+      onClick: handleClick,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx6(IconMorph, { morph: "copy-check", state: copied ? "b" : "a" }),
+        copied && copiedLabel ? /* @__PURE__ */ jsx6("span", { children: copiedLabel }) : label ? /* @__PURE__ */ jsx6("span", { children: label }) : null
+      ]
+    }
+  );
+}
+
+// src/ui/expanding-button-group.tsx
+import * as React5 from "react";
+import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function ExpandingButtonGroup({
+  options,
+  onSelect,
+  className,
+  style
+}) {
+  const [expanded, setExpanded] = React5.useState(null);
+  const [confirming, setConfirming] = React5.useState(null);
+  const handleClick = (option) => {
+    if (option.confirm) {
+      if (confirming === option.value) {
+        setConfirming(null);
+        onSelect?.(option.value);
+      } else {
+        setConfirming(option.value);
+      }
+      return;
+    }
+    onSelect?.(option.value);
+  };
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      role: "group",
+      "data-slot": "expanding-button-group",
+      className: cn("inline-flex w-fit items-center gap-1", className),
+      style,
+      children: options.map((option) => {
+        const isConfirming = confirming === option.value;
+        const isExpanded = expanded === option.value || isConfirming;
+        return /* @__PURE__ */ jsxs4(
+          "button",
+          {
+            type: "button",
+            "data-slot": "expanding-button-group-item",
+            "data-value": option.value,
+            "data-expanded": isExpanded ? "" : void 0,
+            "data-confirming": isConfirming ? "" : void 0,
+            disabled: option.disabled,
+            className: cn(
+              "inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-md px-2 text-sm font-medium whitespace-nowrap outline-none transition-colors duration-150 hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4",
+              isConfirming && "bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            ),
+            onMouseEnter: () => setExpanded(option.value),
+            onMouseLeave: () => {
+              setExpanded(null);
+              setConfirming(
+                (prev) => prev === option.value ? null : prev
+              );
+            },
+            onFocus: () => setExpanded(option.value),
+            onBlur: () => {
+              setExpanded(null);
+              setConfirming(
+                (prev) => prev === option.value ? null : prev
+              );
+            },
+            onClick: () => handleClick(option),
+            children: [
+              option.icon,
+              /* @__PURE__ */ jsx7(
+                "span",
+                {
+                  className: "grid transition-[grid-template-columns] duration-200 ease-out motion-reduce:transition-none",
+                  style: { gridTemplateColumns: isExpanded ? "1fr" : "0fr" },
+                  children: /* @__PURE__ */ jsx7("span", { className: "overflow-hidden", children: isConfirming ? option.confirmLabel ?? "\u786E\u8BA4" : option.label })
+                }
+              )
+            ]
+          },
+          option.value
+        );
+      })
+    }
+  );
+}
+
+// src/ui/floating-button-group.tsx
+import * as React6 from "react";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function FloatingButtonGroup({
+  options,
+  value,
+  onSelect,
+  className,
+  style
+}) {
+  const containerRef = React6.useRef(null);
+  const buttonRefs = React6.useRef(/* @__PURE__ */ new Map());
+  const [hovered, setHovered] = React6.useState(null);
+  const [box, setBox] = React6.useState(null);
+  const [visible, setVisible] = React6.useState(false);
+  const target = value ?? hovered;
+  React6.useLayoutEffect(() => {
+    if (!target) {
+      setVisible(false);
+      return;
+    }
+    const el = buttonRefs.current.get(target);
+    if (!el || el.offsetWidth === 0) {
+      setVisible(false);
+      return;
+    }
+    setBox({ x: el.offsetLeft, width: el.offsetWidth });
+    setVisible(true);
+  }, [target]);
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      ref: containerRef,
+      role: "group",
+      "data-slot": "floating-button-group",
+      className: cn(
+        "relative inline-flex w-fit items-center gap-1 rounded-full bg-muted p-1",
+        className
+      ),
+      style,
+      onMouseLeave: () => setHovered(null),
+      children: [
+        /* @__PURE__ */ jsx8(
+          "span",
+          {
+            "data-slot": "floating-button-group-highlight",
+            "aria-hidden": "true",
+            className: cn(
+              "absolute inset-y-1 left-0 rounded-full bg-card shadow-sm transition-[transform,width,opacity] duration-200 ease-out motion-reduce:transition-none",
+              visible ? "opacity-100" : "opacity-0"
+            ),
+            style: {
+              width: box?.width ?? 0,
+              transform: `translateX(${box?.x ?? 0}px)`
+            }
+          }
+        ),
+        options.map((option) => /* @__PURE__ */ jsxs5(
+          "button",
+          {
+            type: "button",
+            ref: (el) => {
+              if (el) buttonRefs.current.set(option.value, el);
+              else buttonRefs.current.delete(option.value);
+            },
+            "data-slot": "floating-button-group-item",
+            "data-value": option.value,
+            "data-active": value === option.value ? "" : void 0,
+            disabled: option.disabled,
+            className: cn(
+              "relative z-10 inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-full px-3 text-sm font-medium whitespace-nowrap outline-none transition-[transform,color] duration-150 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 active:scale-95 disabled:pointer-events-none disabled:opacity-50 motion-reduce:transition-none motion-reduce:active:transform-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4",
+              target === option.value ? "text-foreground" : "text-muted-foreground"
+            ),
+            onMouseEnter: () => setHovered(option.value),
+            onFocus: (event) => {
+              if (event.currentTarget.matches(":focus-visible")) {
+                setHovered(option.value);
+              }
+            },
+            onBlur: () => setHovered(null),
+            onClick: () => onSelect?.(option.value),
+            children: [
+              option.icon,
+              option.label ? /* @__PURE__ */ jsx8("span", { children: option.label }) : null
+            ]
+          },
+          option.value
+        ))
+      ]
+    }
+  );
+}
+
 // src/ui/message.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function MessageGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       "data-slot": "message-group",
@@ -457,7 +1065,7 @@ function Message({
   align = "start",
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       "data-slot": "message",
@@ -471,7 +1079,7 @@ function Message({
   );
 }
 function MessageAvatar({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       "data-slot": "message-avatar",
@@ -484,7 +1092,7 @@ function MessageAvatar({ className, ...props }) {
   );
 }
 function MessageContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       "data-slot": "message-content",
@@ -497,7 +1105,7 @@ function MessageContent({ className, ...props }) {
   );
 }
 function MessageHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       "data-slot": "message-header",
@@ -510,7 +1118,7 @@ function MessageHeader({ className, ...props }) {
   );
 }
 function MessageFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       "data-slot": "message-footer",
@@ -522,11 +1130,73 @@ function MessageFooter({ className, ...props }) {
     }
   );
 }
+
+// src/ui/split-button.tsx
+import { ChevronDownIcon } from "lucide-react";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+function SplitButton({
+  className,
+  style,
+  variant,
+  size,
+  disabled,
+  children,
+  options,
+  onSelect,
+  triggerLabel = "\u66F4\u591A\u9009\u9879",
+  type = "button",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs6(ButtonGroup, { "data-slot": "split-button", className: cn(className), style, children: [
+    /* @__PURE__ */ jsx10(
+      Button,
+      {
+        variant,
+        size,
+        disabled,
+        type,
+        ...props,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsxs6(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx10(
+        DropdownMenuTrigger,
+        {
+          render: /* @__PURE__ */ jsx10(
+            Button,
+            {
+              variant,
+              size,
+              disabled,
+              "aria-label": triggerLabel,
+              className: "px-2",
+              children: /* @__PURE__ */ jsx10(ChevronDownIcon, {})
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx10(DropdownMenuContent, { align: "end", children: options.map((option) => /* @__PURE__ */ jsxs6(
+        DropdownMenuItem,
+        {
+          disabled: option.disabled,
+          onClick: () => onSelect?.(option.value),
+          children: [
+            option.icon,
+            option.label
+          ]
+        },
+        option.value
+      )) })
+    ] })
+  ] });
+}
 export {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
+  ActionButton,
   Alert,
   AlertDescription,
   AlertDialog,
@@ -594,11 +1264,13 @@ export {
   CommandInput,
   CommandItem,
   CommandList,
+  ConfirmMorph,
   ContextMenu,
   ContextMenuContent,
   ContextMenuItem,
   ContextMenuSeparator,
   ContextMenuTrigger,
+  CopyButton,
   Dialog,
   DialogClose,
   DialogContent,
@@ -632,13 +1304,16 @@ export {
   EmptyDescription,
   EmptyHeader,
   EmptyTitle,
+  ExpandingButtonGroup,
   Field,
   FieldDescription,
   FieldError,
   FieldLabel,
+  FloatingButtonGroup,
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
+  IconMorph,
   Input,
   InputGroup,
   InputGroupAddon,
@@ -655,6 +1330,7 @@ export {
   ItemTitle,
   Kbd,
   Label,
+  MORPH_PAIRS,
   Menubar,
   MenubarContent,
   MenubarItem,
@@ -745,6 +1421,7 @@ export {
   SliderThumb,
   SliderTrack,
   Spinner,
+  SplitButton,
   Switch,
   Table,
   TableBody,