haiku-react-ui 1.0.0

package/dist/index.cjs

@@ -0,0 +1,1550 @@
+'use strict';
+
+var classVarianceAuthority = require('class-variance-authority');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var react = require('@iconify/react');
+var jsxRuntime = require('react/jsx-runtime');
+var React2 = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+
+// src/components/Button/button.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var buttonVariants = classVarianceAuthority.cva(
+  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-primary-700 dark:focus-visible:ring-offset-zinc-950",
+  {
+    variants: {
+      variant: {
+        primary: "shadow-sm",
+        default: "border shadow-sm",
+        dashed: "border-2 border-dashed shadow-sm",
+        filled: "",
+        text: "",
+        link: "underline-offset-4 hover:underline"
+      },
+      color: {
+        default: "",
+        primary: "",
+        danger: "",
+        info: "",
+        success: "",
+        warning: ""
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 px-6 has-[>svg]:px-4"
+      },
+      shape: {
+        default: "rounded-md",
+        rounded: "rounded-full",
+        square: "rounded-none"
+      }
+    },
+    compoundVariants: [
+      // primary (solid)
+      {
+        variant: "primary",
+        color: "default",
+        className: "bg-default text-white hover:bg-default"
+      },
+      {
+        variant: "primary",
+        color: "primary",
+        className: "bg-primary-900 text-primary-foreground hover:bg-primary-800"
+      },
+      {
+        variant: "primary",
+        color: "danger",
+        className: "bg-danger text-white hover:bg-danger"
+      },
+      {
+        variant: "primary",
+        color: "info",
+        className: "bg-info text-white hover:bg-info"
+      },
+      {
+        variant: "primary",
+        color: "success",
+        className: "bg-success text-white hover:bg-success"
+      },
+      {
+        variant: "primary",
+        color: "warning",
+        className: "bg-warning text-white hover:bg-warning"
+      },
+      // default (outline)
+      {
+        variant: "default",
+        color: "default",
+        className: "bg-white text-default border-default hover:bg-default-foreground hover:border-default"
+      },
+      {
+        variant: "default",
+        color: "primary",
+        className: "bg-white text-primary-900 border-primary-300 hover:bg-primary-100/60 "
+      },
+      {
+        variant: "default",
+        color: "danger",
+        className: "bg-white text-danger border-danger-foreground hover:bg-danger-50 hover:bg-danger-foreground/6"
+      },
+      {
+        variant: "default",
+        color: "info",
+        className: "bg-white text-info border-info-300 hover:bg-info-foreground/6 border-info-foreground"
+      },
+      {
+        variant: "default",
+        color: "success",
+        className: "bg-white text-success border-success-300 hover:bg-success-foreground/6 border-success-foreground"
+      },
+      {
+        variant: "default",
+        color: "warning",
+        className: "bg-white text-warning border-warning-300 hover:bg-warning-foreground/6 border-warning-foreground"
+      },
+      // dashed (dashed outline)
+      {
+        variant: "dashed",
+        color: "default",
+        className: "bg-white text-default border-default hover:bg-default-foreground hover:border-default"
+      },
+      {
+        variant: "dashed",
+        color: "primary",
+        className: "bg-white text-primary-900 border-primary-300 hover:bg-primary-foreground hover:border-primary-400"
+      },
+      {
+        variant: "dashed",
+        color: "danger",
+        className: "bg-white text-danger border-danger-foreground hover:bg-danger-50 hover:border-danger-foreground"
+      },
+      {
+        variant: "dashed",
+        color: "info",
+        className: "bg-white text-blue-700 border-blue-300 hover:bg-blue-50 hover:border-blue-400"
+      },
+      {
+        variant: "dashed",
+        color: "success",
+        className: "bg-white text-emerald-700 border-emerald-300 hover:bg-emerald-50 hover:border-emerald-400"
+      },
+      {
+        variant: "dashed",
+        color: "warning",
+        className: "bg-white text-amber-800 border-amber-300 hover:bg-amber-50 hover:border-amber-400"
+      },
+      // filled (tinted)
+      {
+        variant: "filled",
+        color: "default",
+        className: "bg-zinc-100 text-zinc-900 hover:bg-zinc-200"
+      },
+      {
+        variant: "filled",
+        color: "primary",
+        className: "bg-primary-100 text-primary-900 hover:bg-primary-200"
+      },
+      {
+        variant: "filled",
+        color: "danger",
+        className: "bg-red-50 text-red-700 hover:bg-red-100"
+      },
+      {
+        variant: "filled",
+        color: "info",
+        className: "bg-blue-50 text-blue-700 hover:bg-blue-100"
+      },
+      {
+        variant: "filled",
+        color: "success",
+        className: "bg-emerald-50 text-emerald-700 hover:bg-emerald-100"
+      },
+      {
+        variant: "filled",
+        color: "warning",
+        className: "bg-amber-50 text-amber-800 hover:bg-amber-100"
+      },
+      // text (no border/bg)
+      {
+        variant: "text",
+        color: "default",
+        className: "text-zinc-900 hover:bg-zinc-100"
+      },
+      {
+        variant: "text",
+        color: "primary",
+        className: "text-primary-900 hover:bg-primary-100"
+      },
+      {
+        variant: "text",
+        color: "danger",
+        className: "text-red-700 hover:bg-red-50"
+      },
+      {
+        variant: "text",
+        color: "info",
+        className: "text-blue-700 hover:bg-blue-50"
+      },
+      {
+        variant: "text",
+        color: "success",
+        className: "text-emerald-700 hover:bg-emerald-50"
+      },
+      {
+        variant: "text",
+        color: "warning",
+        className: "text-amber-800 hover:bg-amber-50"
+      },
+      // link (no border/bg)
+      {
+        variant: "link",
+        color: "default",
+        className: "text-zinc-900 hover:text-zinc-700"
+      },
+      {
+        variant: "link",
+        color: "primary",
+        className: "text-primary-900 hover:text-primary-800"
+      },
+      {
+        variant: "link",
+        color: "danger",
+        className: "text-red-700 hover:text-red-600"
+      },
+      {
+        variant: "link",
+        color: "info",
+        className: "text-blue-700 hover:text-blue-600"
+      },
+      {
+        variant: "link",
+        color: "success",
+        className: "text-emerald-700 hover:text-emerald-600"
+      },
+      {
+        variant: "link",
+        color: "warning",
+        className: "text-amber-800 hover:text-amber-700"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      color: "default",
+      size: "default",
+      shape: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  color,
+  shape = "default",
+  loading = false,
+  disabled,
+  children,
+  icon,
+  as = "button",
+  ...props
+}) {
+  const resolvedColor = color != null ? color : variant === "primary" ? "primary" : "default";
+  const isDisabled = disabled || loading;
+  const isLabel = as === "label" || "htmlFor" in props;
+  const baseClassName = cn(
+    buttonVariants({ color: resolvedColor, variant, size, shape, className }),
+    loading && "disabled:cursor-wait opacity-70",
+    isDisabled && "cursor-not-allowed opacity-50"
+  );
+  if (isLabel) {
+    const { disabled: _disabled, ...labelProps } = props;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        "data-slot": "button",
+        "data-variant": variant,
+        "data-size": size,
+        "data-shape": shape,
+        "data-color": resolvedColor,
+        "data-loading": loading ? "" : void 0,
+        "aria-busy": loading || void 0,
+        "aria-disabled": isDisabled || void 0,
+        className: baseClassName,
+        ...labelProps,
+        children: [
+          loading ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "size-4 animate-spin rounded-full border-2 border-current border-t-transparent"
+            }
+          ) : icon ? typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon, width: "16", height: "16" }) : icon : null,
+          children
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      "data-shape": shape,
+      "data-color": resolvedColor,
+      "data-loading": loading ? "" : void 0,
+      "aria-busy": loading || void 0,
+      disabled: isDisabled,
+      className: baseClassName,
+      ...props,
+      children: [
+        loading ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "size-4 animate-spin rounded-full border-2 border-current border-t-transparent"
+          }
+        ) : icon ? typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon, width: "16", height: "16" }) : icon : null,
+        children
+      ]
+    }
+  );
+}
+var avatarVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center overflow-hidden align-middle text-primary-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted-foreground ",
+        ghost: "text-white",
+        primary: "bg-primary-900 text-primary-foreground",
+        info: "bg-info  text-info-foreground",
+        success: "bg-success text-success-foreground",
+        warning: "bg-warning text-warning-foreground",
+        danger: "bg-danger text-danger-foreground"
+      },
+      shape: {
+        rounded: "rounded-full",
+        square: "rounded-md"
+      },
+      size: {
+        sm: "h-8 w-8",
+        md: "h-10 w-10",
+        lg: "h-12 w-12"
+      }
+    },
+    defaultVariants: {
+      shape: "rounded",
+      size: "md",
+      variant: "default"
+    }
+  }
+);
+function Avatar({
+  alt,
+  icon,
+  shape,
+  size,
+  variant,
+  className,
+  url,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(avatarVariants({ shape, size, variant }), className), ...props, children: icon ? typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon, className: "w-[80%] h-[80%]" }) : icon : url ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: url, alt, className: "w-full h-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: alt ? alt.charAt(0).toUpperCase() : "?" }) });
+}
+function PlayBoard({
+  icon,
+  heading,
+  description,
+  actions,
+  code,
+  defaultExpanded = false,
+  previewClassName,
+  className,
+  children,
+  ...props
+}) {
+  const [expanded, setExpanded] = React2__namespace.useState(defaultExpanded);
+  const codeId = React2__namespace.useId();
+  const hasCode = typeof code === "string" && code.trim().length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      className: cn(
+        "overflow-hidden rounded-xl border border-zinc-200/70 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-950",
+        className
+      ),
+      ...props,
+      children: [
+        (heading || description || actions) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-4 border-b border-zinc-200/70 px-5 py-4 dark:border-zinc-800", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+              icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex size-9 items-center justify-center rounded-full bg-zinc-100 text-zinc-600 dark:bg-zinc-900 dark:text-zinc-300", children: icon }),
+              heading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-sm font-medium text-zinc-900 dark:text-zinc-50", children: heading })
+            ] }),
+            description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-xs text-zinc-500 dark:text-zinc-400", children: description })
+          ] }),
+          actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: actions })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("px-5 py-6", previewClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg bg-zinc-50 p-5 dark:bg-zinc-900/40", children }) }),
+        hasCode && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-zinc-200/70 dark:border-zinc-800", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "flex w-full items-center justify-center gap-2 px-5 py-3 text-sm text-zinc-600 hover:bg-zinc-50 dark:text-zinc-300 dark:hover:bg-zinc-900/30",
+              "aria-expanded": expanded,
+              "aria-controls": codeId,
+              onClick: () => setExpanded((v) => !v),
+              children: expanded ? "\u6536\u8D77\u4EE3\u7801" : "\u5C55\u5F00\u4EE3\u7801"
+            }
+          ),
+          expanded && /* @__PURE__ */ jsxRuntime.jsx(
+            "pre",
+            {
+              id: codeId,
+              className: "overflow-x-auto border-t border-zinc-200/70 bg-zinc-950 px-5 py-4 text-xs leading-relaxed text-zinc-50 dark:border-zinc-800",
+              children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: code })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var playBoard_default = PlayBoard;
+function getLongestCommonPrefix(strings) {
+  if (!strings.length) return "";
+  return strings.reduce((prefix, current) => {
+    let index = 0;
+    while (index < prefix.length && index < current.length && prefix[index] === current[index]) {
+      index += 1;
+    }
+    return prefix.slice(0, index);
+  });
+}
+function isNumber(value) {
+  return typeof value === "number" && Number.isFinite(value);
+}
+function getUid() {
+  return Math.random().toString(16).slice(2);
+}
+function requestFrame(callback) {
+  if (typeof requestAnimationFrame !== "undefined") {
+    return requestAnimationFrame(callback);
+  }
+  return setTimeout(() => callback(Date.now()), 16);
+}
+function cancelFrame(id) {
+  if (typeof cancelAnimationFrame !== "undefined") {
+    cancelAnimationFrame(id);
+    return;
+  }
+  clearTimeout(id);
+}
+function useTyping({
+  streaming,
+  content,
+  typing,
+  onTyping,
+  onTypingComplete
+}) {
+  const [chunks, setChunks] = React2__namespace.useState([]);
+  const rafId = React2__namespace.useRef(-1);
+  const currentTaskId = React2__namespace.useRef(1);
+  const animatingRef = React2__namespace.useRef(false);
+  const renderedRef = React2__namespace.useRef("");
+  const streamingRef = React2__namespace.useRef(streaming);
+  streamingRef.current = streaming;
+  const mergedConfig = React2__namespace.useMemo(() => {
+    var _a, _b, _c, _d;
+    const base = {
+      effect: "fade-in",
+      interval: 100,
+      step: 6,
+      keepPrefix: true
+    };
+    if (typing === false) return base;
+    if (typing === true) return base;
+    const interval = (_a = typing.interval) != null ? _a : base.interval;
+    const step = (_b = typing.step) != null ? _b : base.step;
+    const effect = (_c = typing.effect) != null ? _c : base.effect;
+    const keepPrefix = (_d = typing.keepPrefix) != null ? _d : base.keepPrefix;
+    if (!isNumber(interval) || interval <= 0) {
+      throw new Error("[Bubble] invalid typing.interval, expect positive number.");
+    }
+    const stepIsNumber = isNumber(step);
+    if (!stepIsNumber && !Array.isArray(step)) {
+      throw new Error("[Bubble] invalid typing.step, expect number or [min,max].");
+    }
+    if (stepIsNumber && step <= 0) {
+      throw new Error("[Bubble] invalid typing.step, expect positive number.");
+    }
+    if (Array.isArray(step)) {
+      if (!isNumber(step[0]) || step[0] <= 0) {
+        throw new Error("[Bubble] invalid typing.step[0], expect positive number.");
+      }
+      if (!isNumber(step[1]) || step[1] <= 0) {
+        throw new Error("[Bubble] invalid typing.step[1], expect positive number.");
+      }
+      if (step[0] > step[1]) {
+        throw new Error("[Bubble] invalid typing.step, step[0] should <= step[1].");
+      }
+    }
+    return { effect, interval, step, keepPrefix };
+  }, [typing]);
+  const typingSourceRef = React2__namespace.useRef({
+    content,
+    interval: mergedConfig.interval,
+    step: mergedConfig.step
+  });
+  typingSourceRef.current = {
+    content,
+    interval: mergedConfig.interval,
+    step: mergedConfig.step
+  };
+  const reset = React2__namespace.useCallback(() => {
+    cancelFrame(rafId.current);
+    rafId.current = -1;
+    setChunks([]);
+    renderedRef.current = "";
+    animatingRef.current = false;
+  }, []);
+  const execute = React2__namespace.useCallback(
+    (taskId) => {
+      let lastFrameTime = 0;
+      renderedRef.current = mergedConfig.keepPrefix ? getLongestCommonPrefix([typingSourceRef.current.content, renderedRef.current]) : "";
+      setChunks(
+        renderedRef.current ? [{ text: renderedRef.current, id: getUid(), taskId, done: true }] : []
+      );
+      const tick = () => {
+        if (taskId !== currentTaskId.current) return;
+        const now = typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
+        const { content: fullContent, interval, step } = typingSourceRef.current;
+        if (now - lastFrameTime < interval) {
+          rafId.current = requestFrame(tick);
+          return;
+        }
+        const currentLen = renderedRef.current.length;
+        const resolvedStep = isNumber(step) ? step : Math.floor(Math.random() * (step[1] - step[0] + 1)) + step[0];
+        const nextText = fullContent.slice(currentLen, currentLen + resolvedStep);
+        if (!nextText) {
+          if (streamingRef.current) {
+            rafId.current = requestFrame(tick);
+            return;
+          }
+          setChunks([
+            {
+              text: renderedRef.current,
+              id: getUid(),
+              taskId,
+              done: true
+            }
+          ]);
+          onTypingComplete == null ? void 0 : onTypingComplete(fullContent);
+          animatingRef.current = false;
+          currentTaskId.current += 1;
+          return;
+        }
+        renderedRef.current += nextText;
+        setChunks(
+          (prev) => (
+            //把这段 nextText 作为一个新 chunk 追加到数组尾部（触发 UI 更新）。
+            prev.concat({
+              id: getUid(),
+              text: nextText,
+              taskId,
+              done: false
+            })
+          )
+        );
+        animatingRef.current = true;
+        lastFrameTime = now;
+        rafId.current = requestFrame(tick);
+        onTyping == null ? void 0 : onTyping(renderedRef.current, fullContent);
+      };
+      tick();
+    },
+    [mergedConfig.keepPrefix, onTyping, onTypingComplete]
+  );
+  React2__namespace.useEffect(() => {
+    if (!content) return reset();
+    if (content === renderedRef.current) return;
+    if (animatingRef.current && !content.startsWith(renderedRef.current)) {
+      cancelFrame(rafId.current);
+      animatingRef.current = false;
+      rafId.current = requestFrame(() => execute(currentTaskId.current += 1));
+      return;
+    }
+    if (!animatingRef.current) {
+      execute(currentTaskId.current);
+    }
+  }, [content, execute, reset]);
+  React2__namespace.useEffect(() => () => cancelFrame(rafId.current), []);
+  return {
+    chunks,
+    animating: animatingRef.current,
+    config: mergedConfig,
+    renderedText: renderedRef.current
+  };
+}
+function TypingContent({
+  content,
+  typing,
+  streaming,
+  className,
+  cursor = "|",
+  onTyping,
+  onTypingComplete
+}) {
+  const { chunks, animating, config } = useTyping({
+    streaming,
+    content,
+    typing,
+    onTyping,
+    onTypingComplete
+  });
+  const effect = config.effect;
+  const isTypingEffect = typing !== true && effect === "typing";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "whitespace-pre-wrap break-words",
+        className
+      ),
+      children: [
+        chunks.map(
+          (chunk) => config.effect === "fade-in" && !chunk.done ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "inline animate-[haiku-bubble-fade-in_0.1s_linear]",
+              children: chunk.text
+            },
+            chunk.id
+          ) : /* @__PURE__ */ jsxRuntime.jsx(React2__namespace.Fragment, { children: chunk.text }, chunk.id)
+        ),
+        isTypingEffect && animating ? /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn("ml-1 select-none font-black", "animate-[haiku-bubble-cursor-blink_0.8s_linear_infinite]"),
+            children: cursor
+          }
+        ) : null
+      ]
+    }
+  );
+}
+var bubbleRootVariants = classVarianceAuthority.cva("flex gap-3", {
+  variants: {
+    placement: {
+      start: "flex-row",
+      end: "flex-row-reverse"
+    }
+  },
+  defaultVariants: {
+    placement: "start"
+  }
+});
+var bubbleContentVariants = classVarianceAuthority.cva(
+  "max-w-full min-w-0 px-4 py-3 text-sm leading-6 text-default break-words",
+  {
+    variants: {
+      variant: {
+        filled: "bg-zinc-100 text-zinc-900 dark:bg-zinc-900/60 dark:text-zinc-50",
+        outlined: "border border-zinc-200/70 bg-white text-zinc-900 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50",
+        shadow: "bg-white text-zinc-900 shadow-sm dark:bg-zinc-950 dark:text-zinc-50",
+        borderless: "bg-transparent p-0"
+      },
+      shape: {
+        default: "rounded-xl",
+        round: "rounded-full",
+        corner: "rounded-xl"
+      },
+      placement: {
+        start: "",
+        end: ""
+      }
+    },
+    compoundVariants: [
+      { shape: "corner", placement: "start", className: "rounded-tl-sm" },
+      { shape: "corner", placement: "end", className: "rounded-tr-sm" }
+    ],
+    defaultVariants: {
+      variant: "filled",
+      shape: "default",
+      placement: "start"
+    }
+  }
+);
+function renderSlot(slot, content, info) {
+  if (!slot) return null;
+  return typeof slot === "function" ? slot(content, info) : slot;
+}
+function DefaultLoading() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-1.5 animate-bounce rounded-full bg-zinc-400 [animation-delay:-0.2s] dark:bg-zinc-500" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-1.5 animate-bounce rounded-full bg-zinc-400 [animation-delay:-0.1s] dark:bg-zinc-500" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-1.5 animate-bounce rounded-full bg-zinc-400 dark:bg-zinc-500" })
+  ] });
+}
+function Bubble({
+  content,
+  info,
+  placement = "start",
+  variant = "filled",
+  shape = "default",
+  header,
+  footer,
+  avatar,
+  extra,
+  contentRender,
+  typing,
+  typingCursor,
+  streaming = false,
+  loading = false,
+  loadingRender,
+  onTyping,
+  onTypingComplete,
+  className,
+  ...props
+}) {
+  const mergedInfo = info != null ? info : {};
+  const rendered = contentRender ? contentRender(content, mergedInfo) : content;
+  const mergedTyping = typeof typing === "function" ? typing(content, mergedInfo) : typing;
+  const useInnerAnimation = Boolean(mergedTyping) && typeof rendered === "string";
+  React2__namespace.useEffect(() => {
+    if (useInnerAnimation) return;
+    if (streaming) return;
+    if (typeof rendered === "string" && rendered) {
+      onTypingComplete == null ? void 0 : onTypingComplete(rendered);
+    }
+  }, [rendered, streaming, useInnerAnimation, onTypingComplete]);
+  const contentNode = (() => {
+    if (loading) {
+      return loadingRender ? loadingRender() : /* @__PURE__ */ jsxRuntime.jsx(DefaultLoading, {});
+    }
+    if (useInnerAnimation) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        TypingContent,
+        {
+          content: rendered,
+          streaming,
+          typing: mergedTyping,
+          cursor: typingCursor,
+          onTyping,
+          onTypingComplete
+        }
+      );
+    }
+    return typeof rendered === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "whitespace-pre-wrap break-words", children: rendered }) : rendered;
+  })();
+  const avatarNode = renderSlot(avatar, content, mergedInfo);
+  const headerNode = renderSlot(header, content, mergedInfo);
+  const footerNode = renderSlot(footer, content, mergedInfo);
+  const extraNode = renderSlot(extra, content, mergedInfo);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(bubbleRootVariants({ placement }), className),
+      "data-slot": "bubble",
+      "data-placement": placement,
+      "data-variant": variant,
+      "data-shape": shape,
+      "data-loading": loading ? "" : void 0,
+      ...props,
+      children: [
+        avatarNode ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: avatarNode }) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 max-w-full flex-col", children: [
+          headerNode ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-1 text-xs text-zinc-500 dark:text-zinc-400"), children: headerNode }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                bubbleContentVariants({ variant, shape, placement }),
+                typeof rendered === "string" && "whitespace-pre-wrap"
+              ),
+              children: contentNode
+            }
+          ),
+          footerNode ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "mt-2 text-xs text-zinc-500 dark:text-zinc-400",
+                placement === "end" && "text-right"
+              ),
+              children: footerNode
+            }
+          ) : null
+        ] }),
+        extraNode && !loading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: extraNode }) : null
+      ]
+    }
+  );
+}
+
+// src/components/Upload/utils.ts
+var uploadFile = ({
+  action,
+  file,
+  method = "post",
+  header,
+  onProgress,
+  signal,
+  formData: providedFormData
+}) => new Promise((resolve, reject) => {
+  const xhr = new XMLHttpRequest();
+  xhr.open(method.toUpperCase(), action, true);
+  const handleAbort = () => {
+    xhr.abort();
+  };
+  if (header) {
+    Object.entries(header).forEach(([key, value]) => {
+      xhr.setRequestHeader(key, value);
+    });
+  }
+  xhr.upload.onprogress = (event) => {
+    onProgress == null ? void 0 : onProgress(event);
+  };
+  xhr.onload = () => {
+    signal == null ? void 0 : signal.removeEventListener("abort", handleAbort);
+    resolve(xhr.responseText);
+  };
+  xhr.onerror = (event) => {
+    signal == null ? void 0 : signal.removeEventListener("abort", handleAbort);
+    reject(event);
+  };
+  xhr.onabort = () => {
+    signal == null ? void 0 : signal.removeEventListener("abort", handleAbort);
+    reject(new DOMException("Upload aborted", "AbortError"));
+  };
+  if (signal == null ? void 0 : signal.aborted) {
+    reject(new DOMException("Upload aborted", "AbortError"));
+    return;
+  }
+  signal == null ? void 0 : signal.addEventListener("abort", handleAbort);
+  const formData = providedFormData || new FormData();
+  if (!providedFormData && file) {
+    formData.append("file", file);
+  }
+  xhr.send(formData);
+});
+var uploadTriggerVariants = classVarianceAuthority.cva(
+  "flex cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-300 focus-visible:ring-offset-2 focus-visible:ring-offset-white",
+  {
+    variants: {
+      type: {
+        button: "",
+        dragger: "flex-col border-2 border-dashed text-center",
+        image: "relative overflow-hidden p-0"
+      },
+      variant: {
+        default: "border border-default bg-white text-default hover:bg-default-foreground/10",
+        dashed: "border-2 border-dashed border-default bg-white text-default hover:bg-default-foreground/10"
+      },
+      size: {
+        sm: "",
+        md: "",
+        lg: ""
+      },
+      shape: {
+        rounded: "rounded-md",
+        square: "rounded-none"
+      }
+    },
+    compoundVariants: [
+      { type: "button", size: "sm", className: "h-8 px-3 text-xs" },
+      { type: "button", size: "md", className: "h-9 px-4 text-sm" },
+      { type: "button", size: "lg", className: "h-10 px-6 text-sm" },
+      { type: "dragger", size: "sm", className: "min-h-[96px] px-4 py-6 text-xs" },
+      { type: "dragger", size: "md", className: "min-h-[120px] px-6 py-8 text-sm" },
+      { type: "dragger", size: "lg", className: "min-h-[152px] px-8 py-10 text-sm" },
+      { type: "image", size: "sm", className: "h-15 w-15" },
+      { type: "image", size: "md", className: "h-23 w-23" },
+      { type: "image", size: "lg", className: "h-35 w-35" },
+      { type: "image", shape: "rounded", className: "rounded-full" }
+    ],
+    defaultVariants: {
+      type: "button",
+      variant: "default",
+      size: "md",
+      shape: "rounded"
+    }
+  }
+);
+function UploadTrigger({
+  inputId,
+  type = "button",
+  variant,
+  size,
+  shape,
+  className,
+  isDragging,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "label",
+    {
+      htmlFor: inputId,
+      className: cn(
+        uploadTriggerVariants({ type, variant, size, shape }),
+        isDragging && "border-primary-300 text-primary-900",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function ButtonUpload({
+  inputId,
+  variant,
+  size,
+  shape,
+  className,
+  status,
+  progress,
+  onCancel,
+  onReset
+}) {
+  const isUploading = status === "uploading";
+  const widthClass = isUploading ? "w-[154px]" : "w-[130px]";
+  const mergedClassName = cn(
+    widthClass,
+    "justify-center transition-[width] duration-200 ease-out",
+    isUploading && "relative overflow-hidden",
+    className
+  );
+  const labelContent = status === "uploading" ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 tabular-nums", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u4E0A\u4F20\u4E2D" }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-[3ch] text-right", children: progress }),
+    "%"
+  ] }) : status === "success" ? "\u4E0A\u4F20\u5B8C\u6210" : status === "error" ? "\u4E0A\u4F20\u5931\u8D25" : "\u70B9\u51FB\u4E0A\u4F20\u6587\u4EF6";
+  const reloadButton = status === "success" && onReset ? /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Reset upload",
+      className: "ml-1 inline-flex items-center",
+      onClick: (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onReset();
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        react.Icon,
+        {
+          icon: "bx:reset",
+          width: "18",
+          height: "18",
+          className: "cursor-pointer"
+        }
+      )
+    }
+  ) : null;
+  const cancelButton = status === "uploading" && onCancel ? /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Cancel upload",
+      className: "ml-1 inline-flex items-center",
+      onClick: (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onCancel();
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        react.Icon,
+        {
+          icon: "fluent-emoji-flat:stop-sign",
+          width: "18",
+          height: "18",
+          className: "cursor-pointer"
+        }
+      )
+    }
+  ) : null;
+  const statusIcon = status === "success" ? /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "icon-park:success", width: "16", height: "16" }) : status === "error" ? /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "material-icon-theme:folder-error", width: "16", height: "16" }) : status === "uploading" ? /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "line-md:loading-loop", width: "16", height: "16" }) : /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "line-md:upload", width: "16", height: "16" });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    UploadTrigger,
+    {
+      inputId,
+      type: "button",
+      variant,
+      size,
+      shape,
+      className: mergedClassName,
+      children: [
+        isUploading && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute inset-0 opacity-80 haiku-upload-shine"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative z-10 inline-flex items-center gap-2", children: [
+          statusIcon,
+          labelContent,
+          cancelButton,
+          reloadButton
+        ] })
+      ]
+    }
+  );
+}
+function DraggerUpload({
+  inputId,
+  isDragging,
+  onDragOver,
+  onDragLeave,
+  onDrop,
+  variant,
+  size,
+  shape,
+  className,
+  status,
+  progress
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    UploadTrigger,
+    {
+      inputId,
+      type: "dragger",
+      variant,
+      size,
+      shape,
+      className,
+      isDragging,
+      onDragOver,
+      onDragEnter: onDragOver,
+      onDragLeave,
+      onDrop,
+      children: status === "uploading" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium inline-flex tabular-nums", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u4E0A\u4F20\u4E2D" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "w-[4ch] text-right", children: [
+            progress,
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1 w-full rounded-full bg-default-foreground/20", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "h-full rounded-full bg-primary-900",
+            style: { width: `${progress}%` }
+          }
+        ) })
+      ] }) : status === "error" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "\u4E0A\u4F20\u5931\u8D25\uFF0C\u70B9\u51FB\u91CD\u8BD5" }) : status === "success" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "\u4E0A\u4F20\u5B8C\u6210" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "\u70B9\u51FB\u6216\u62D6\u62FD\u4E0A\u4F20" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-default opacity-70", children: "\u652F\u6301\u591A\u6587\u4EF6" })
+      ] })
+    }
+  );
+}
+function ImageUpload({
+  inputId,
+  previewUrl,
+  variant,
+  size,
+  shape,
+  className,
+  status,
+  progress
+}) {
+  const isUploading = status === "uploading";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    UploadTrigger,
+    {
+      inputId,
+      type: "image",
+      variant,
+      size,
+      shape,
+      className,
+      children: [
+        previewUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: previewUrl, alt: "\u4E0A\u4F20\u9884\u89C8", className: "h-full w-full object-cover" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs inline-flex font-medium", children: "\u4E0A\u4F20" }),
+        isUploading && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute inset-0 z-30 opacity-70 haiku-upload-shine"
+          }
+        ),
+        isUploading && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "absolute inset-0 z-20 tabular-nums text-right flex items-center justify-center bg-black/35 text-xs font-medium text-white", children: [
+          progress,
+          "%"
+        ] }),
+        status === "error" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 z-20 flex items-center justify-center bg-black/60 text-xs font-medium text-white", children: "\u4E0A\u4F20\u5931\u8D25" })
+      ]
+    }
+  );
+}
+function FileItem({ file, onRemove, onCancel }) {
+  const { id, file: fileData, status, progress, error } = file;
+  const iconMap = {
+    idle: { icon: "lucide:file", className: "text-gray-400" },
+    uploading: { icon: "lucide:loader-2", className: "text-blue-500 animate-spin" },
+    success: { icon: "lucide:check-circle", className: "text-green-500" },
+    error: { icon: "lucide:x-circle", className: "text-red-500" }
+  };
+  const iconConfig = iconMap[status] || iconMap.idle;
+  const formatSize = (bytes) => {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 p-3 border rounded-md bg-white dark:bg-zinc-800", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: iconConfig.icon, className: iconConfig.className, width: 20 }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium text-md", children: fileData.name }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-500 ml-2", children: formatSize(fileData.size) })
+      ] }),
+      (status === "uploading" || status === "success") && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-full bg-gray-200 rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "h-full bg-blue-500 transition-all duration-300",
+            style: { width: `${progress}%` }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-gray-500", children: [
+          progress,
+          "%"
+        ] })
+      ] }),
+      status === "error" && error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-xs text-red-500", children: error.message })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+      status === "uploading" && onCancel && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onCancel(id),
+          className: "p-1 hover:bg-gray-100 rounded",
+          title: "\u53D6\u6D88",
+          children: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "lucide:x", className: "w-4 h-4 text-gray-500" })
+        }
+      ),
+      status !== "uploading" && onRemove && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onRemove(id),
+          className: "p-1 hover:bg-gray-100 rounded",
+          title: "\u5220\u9664",
+          children: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "lucide:trash-2", className: "w-4 h-4 text-gray-500" })
+        }
+      )
+    ] })
+  ] });
+}
+function FileList({ files, onRemove, onCancel, show = true }) {
+  if (!show || files.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2 mt-4", children: files.map((file) => /* @__PURE__ */ jsxRuntime.jsx(
+    FileItem,
+    {
+      file,
+      onRemove,
+      onCancel
+    },
+    file.id
+  )) });
+}
+var DEFAULT_OPTIONS = {
+  mode: "button",
+  autoUpload: true,
+  showFileList: true,
+  variant: "default",
+  size: "md",
+  shape: "rounded",
+  method: "post",
+  name: "file"
+};
+var createUploadError = (type, message, file, originalError) => ({
+  type,
+  message,
+  file,
+  originalError
+});
+var generateFileId = () => Math.random().toString(36).substring(2, 11);
+function Upload(config) {
+  const options = {
+    ...DEFAULT_OPTIONS,
+    ...config
+  };
+  const {
+    mode,
+    autoUpload,
+    showFileList,
+    directory,
+    accept,
+    maxSize,
+    minSize,
+    maxCount,
+    variant,
+    size,
+    shape,
+    action,
+    method,
+    headers,
+    data,
+    name,
+    onChange,
+    onProgress,
+    onSuccess,
+    onError,
+    onComplete
+  } = options;
+  const [files, setFiles] = React2.useState([]);
+  const [isDragging, setIsDragging] = React2.useState(false);
+  const [previewUrl, setPreviewUrl] = React2.useState(null);
+  const [status, setStatus] = React2.useState("idle");
+  const [progress, setProgress] = React2.useState(0);
+  const inputId = React2.useId();
+  const abortRef = React2.useRef(null);
+  const cancelRef = React2.useRef(false);
+  const inputRef = React2.useRef(null);
+  const isDisabled = status === "uploading";
+  const notifyChange = React2.useCallback((newFiles) => {
+    onChange == null ? void 0 : onChange(newFiles);
+  }, [onChange]);
+  const validateFile = React2.useCallback((file) => {
+    if (maxSize && file.size > maxSize) {
+      return createUploadError(
+        "FILE_SIZE_EXCEEDED",
+        `\u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7 ${Math.round(maxSize / 1024 / 1024)}MB`,
+        file
+      );
+    }
+    if (minSize && file.size < minSize) {
+      return createUploadError(
+        "FILE_SIZE_EXCEEDED",
+        `\u6587\u4EF6\u5927\u5C0F\u4E0D\u80FD\u5C0F\u4E8E ${Math.round(minSize / 1024)}KB`,
+        file
+      );
+    }
+    return null;
+  }, [maxSize, minSize]);
+  const validateFiles = React2.useCallback((newFiles) => {
+    const valid = [];
+    const errors = [];
+    if (maxCount && newFiles.length > maxCount) {
+      const error = createUploadError(
+        "FILE_COUNT_EXCEEDED",
+        `\u6700\u591A\u53EA\u80FD\u4E0A\u4F20 ${maxCount} \u4E2A\u6587\u4EF6`
+      );
+      errors.push(error);
+    }
+    for (const file of newFiles) {
+      const error = validateFile(file);
+      if (error) {
+        errors.push(error);
+      } else {
+        valid.push(file);
+      }
+    }
+    return { valid, errors };
+  }, [maxCount, validateFile]);
+  const uploadSingleFile = async (fileItem, totalBytes, uploadedBytes) => {
+    const { file } = fileItem;
+    const controller = new AbortController();
+    abortRef.current = controller;
+    try {
+      const formData = new FormData();
+      formData.append(name, file);
+      if (data) {
+        Object.entries(data).forEach(([key, value]) => {
+          formData.append(key, String(value));
+        });
+      }
+      const responseText = await uploadFile({
+        action,
+        method,
+        header: headers,
+        signal: controller.signal,
+        formData,
+        onProgress: (event) => {
+          if (!event.lengthComputable || file.size === 0) {
+            return;
+          }
+          const percent = Math.min(
+            100,
+            Math.round(event.loaded / file.size * 100)
+          );
+          const currentTotalBytes = uploadedBytes + event.loaded;
+          setProgress(
+            Math.round(currentTotalBytes / totalBytes * 100)
+          );
+          onProgress == null ? void 0 : onProgress(percent, file);
+          setFiles(
+            (prev) => prev.map(
+              (f) => f.id === fileItem.id ? { ...f, progress: percent } : f
+            )
+          );
+        }
+      });
+      const updatedFile = {
+        ...fileItem,
+        status: "success",
+        progress: 100,
+        response: responseText
+      };
+      onSuccess == null ? void 0 : onSuccess(responseText, file);
+      return updatedFile;
+    } catch (event) {
+      const isAbort = cancelRef.current || (event == null ? void 0 : event.name) === "AbortError";
+      if (isAbort) {
+        return { ...fileItem, status: "idle", progress: 0 };
+      }
+      const error = createUploadError(
+        "NETWORK_ERROR",
+        event instanceof Error ? event.message : "\u4E0A\u4F20\u5931\u8D25",
+        file,
+        event instanceof Error ? event : void 0
+      );
+      onError == null ? void 0 : onError(error, file);
+      return { ...fileItem, status: "error", error };
+    }
+  };
+  const uploadFiles = React2.useCallback(async (filesToUpload) => {
+    var _a;
+    if (!action || filesToUpload.length === 0) {
+      setStatus("idle");
+      setProgress(0);
+      return;
+    }
+    if (!autoUpload) {
+      return;
+    }
+    cancelRef.current = false;
+    (_a = abortRef.current) == null ? void 0 : _a.abort();
+    abortRef.current = null;
+    setStatus("uploading");
+    setProgress(0);
+    const totalBytes = filesToUpload.reduce((sum, f) => sum + f.file.size, 0);
+    let uploadedBytes = 0;
+    const uploadedFiles = [];
+    for (const fileItem of filesToUpload) {
+      if (cancelRef.current) {
+        setStatus("idle");
+        setProgress(0);
+        return;
+      }
+      setFiles(
+        (prev) => prev.map(
+          (f) => f.id === fileItem.id ? { ...f, status: "uploading" } : f
+        )
+      );
+      const result = await uploadSingleFile(fileItem, totalBytes, uploadedBytes);
+      uploadedFiles.push(result);
+      setFiles(
+        (prev) => prev.map(
+          (f) => f.id === fileItem.id ? { ...f, status: result.status, response: result.response } : f
+        )
+      );
+      if (result.status === "success") {
+        uploadedBytes += fileItem.file.size;
+        setProgress(
+          totalBytes === 0 ? 100 : Math.round(uploadedBytes / totalBytes * 100)
+        );
+      } else if (result.status === "error") {
+        setStatus("error");
+        return;
+      }
+    }
+    setStatus("success");
+    setProgress(100);
+    onComplete == null ? void 0 : onComplete(uploadedFiles);
+  }, [action, autoUpload, headers, method, name, data, onComplete, onError, onProgress, onSuccess]);
+  const handleFiles = React2.useCallback((fileList) => {
+    const newFiles = Array.from(fileList);
+    const { valid, errors } = validateFiles(newFiles);
+    errors.forEach((error) => {
+      onError == null ? void 0 : onError(error, error.file);
+    });
+    if (valid.length === 0) {
+      return;
+    }
+    const fileItems = valid.map((file) => ({
+      id: generateFileId(),
+      file,
+      status: "idle",
+      progress: 0
+    }));
+    setFiles((prev) => {
+      const newFileList = [...prev, ...fileItems];
+      notifyChange(newFileList);
+      return newFileList;
+    });
+    void uploadFiles(fileItems);
+  }, [validateFiles, notifyChange, uploadFiles, onError]);
+  const handleInputChange = (event) => {
+    if (event.target.files) {
+      handleFiles(event.target.files);
+      event.target.value = "";
+    }
+  };
+  const handleDragOver = (event) => {
+    event.preventDefault();
+    setIsDragging(true);
+  };
+  const handleDragLeave = (event) => {
+    event.preventDefault();
+    setIsDragging(false);
+  };
+  const handleDrop = (event) => {
+    event.preventDefault();
+    setIsDragging(false);
+    if (event.dataTransfer.files && event.dataTransfer.files.length > 0) {
+      handleFiles(event.dataTransfer.files);
+      event.dataTransfer.clearData();
+    }
+  };
+  const handleCancel = React2.useCallback(() => {
+    var _a;
+    if (status !== "uploading") {
+      return;
+    }
+    cancelRef.current = true;
+    (_a = abortRef.current) == null ? void 0 : _a.abort();
+    abortRef.current = null;
+    setStatus("idle");
+    setProgress(0);
+    setFiles([]);
+  }, [status]);
+  const handleReset = React2.useCallback(() => {
+    setFiles([]);
+    setStatus("idle");
+    setProgress(0);
+    setPreviewUrl(null);
+    if (inputRef.current) {
+      inputRef.current.value = "";
+    }
+    notifyChange([]);
+  }, [notifyChange]);
+  const handleRemoveFile = React2.useCallback((id) => {
+    setFiles((prev) => {
+      const newFiles = prev.filter((f) => f.id !== id);
+      notifyChange(newFiles);
+      return newFiles;
+    });
+  }, [notifyChange]);
+  const handleCancelFile = React2.useCallback((id) => {
+    setFiles(
+      (prev) => prev.map(
+        (f) => f.id === id ? { ...f, status: "idle", progress: 0 } : f
+      )
+    );
+  }, []);
+  React2.useCallback(() => {
+    if (files.length > 0 && autoUpload === false) {
+      const pendingFiles = files.filter((f) => f.status === "idle");
+      if (pendingFiles.length > 0) {
+        uploadFiles(pendingFiles);
+      }
+    }
+  }, [files, autoUpload, uploadFiles]);
+  React2.useEffect(() => {
+    var _a;
+    if (mode !== "image") {
+      setPreviewUrl(null);
+      return;
+    }
+    const file = (_a = files[0]) == null ? void 0 : _a.file;
+    if (!file || !file.type.startsWith("image/")) {
+      setPreviewUrl(null);
+      return;
+    }
+    const url = URL.createObjectURL(file);
+    setPreviewUrl(url);
+    return () => {
+      URL.revokeObjectURL(url);
+    };
+  }, [files, mode]);
+  const triggerProps = {
+    inputId,
+    variant,
+    size,
+    shape,
+    className: cn(isDisabled && "cursor-not-allowed opacity-80"),
+    status,
+    progress,
+    onCancel: handleCancel,
+    onReset: handleReset
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    mode === "button" && /* @__PURE__ */ jsxRuntime.jsx(ButtonUpload, { ...triggerProps }),
+    mode === "image" && /* @__PURE__ */ jsxRuntime.jsx(ImageUpload, { ...triggerProps, previewUrl }),
+    mode === "dragger" && /* @__PURE__ */ jsxRuntime.jsx(
+      DraggerUpload,
+      {
+        ...triggerProps,
+        isDragging,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        className: "opacity-0 absolute",
+        disabled: isDisabled,
+        id: inputId,
+        ref: inputRef,
+        type: "file",
+        multiple: maxCount !== 1,
+        accept,
+        webkitdirectory: directory ? "" : void 0,
+        onChange: handleInputChange
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FileList,
+      {
+        files,
+        show: showFileList,
+        onRemove: handleRemoveFile,
+        onCancel: handleCancelFile
+      }
+    )
+  ] });
+}
+var Upload_default = Upload;
+
+exports.Avatar = Avatar;
+exports.Bubble = Bubble;
+exports.Button = Button;
+exports.PlayBoard = playBoard_default;
+exports.Upload = Upload_default;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map