@7onic-ui/react 0.3.8 → 0.3.10

package/dist/chunk-234NAXGV.mjs

@@ -0,0 +1,252 @@
+"use client";
+import {
+  TypingIndicator
+} from "./chunk-S4T4PU7F.mjs";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage
+} from "./chunk-GD4YE5AE.mjs";
+import {
+  cn
+} from "./chunk-53MIUPSY.mjs";
+
+// src/components/ui/chat-message.tsx
+import * as React from "react";
+var ChatMessageContext = React.createContext({
+  role: "assistant",
+  variant: "bubble",
+  color: "default",
+  size: "default",
+  radius: "2xl",
+  tail: true,
+  typing: false,
+  actions: void 0
+});
+var bubblePaddingMap = {
+  sm: "px-3 py-1.5",
+  default: "px-3.5 py-2",
+  lg: "px-4 py-2.5"
+};
+var bubbleTextMap = {
+  sm: "text-sm",
+  default: "text-md",
+  lg: "text-base"
+};
+var footerTextMap = {
+  sm: "text-2xs",
+  default: "text-2xs",
+  lg: "text-xs"
+};
+var rowGapMap = {
+  sm: "gap-2",
+  default: "gap-2.5",
+  lg: "gap-3"
+};
+var avatarGapMap = {
+  sm: "gap-1.5",
+  md: "gap-2.5",
+  lg: "gap-3"
+};
+var chatAvatarSizeMap = {
+  sm: "w-6 h-6",
+  // 24px
+  md: "w-7 h-7",
+  // 28px
+  lg: "w-8 h-8"
+  // 32px
+};
+var chatAvatarFontMap = {
+  sm: "text-2xs",
+  md: "text-2xs",
+  lg: "text-xs"
+};
+var bubbleRadiusTailMap = {
+  md: { assistant: "rounded-tl-md   rounded-tr-md   rounded-br-md   rounded-bl-none", user: "rounded-tl-md   rounded-tr-md   rounded-br-none rounded-bl-md" },
+  lg: { assistant: "rounded-tl-lg   rounded-tr-lg   rounded-br-lg   rounded-bl-none", user: "rounded-tl-lg   rounded-tr-lg   rounded-br-none rounded-bl-lg" },
+  xl: { assistant: "rounded-tl-xl   rounded-tr-xl   rounded-br-xl   rounded-bl-none", user: "rounded-tl-xl   rounded-tr-xl   rounded-br-none rounded-bl-xl" },
+  "2xl": { assistant: "rounded-tl-2xl  rounded-tr-2xl  rounded-br-2xl  rounded-bl-none", user: "rounded-tl-2xl  rounded-tr-2xl  rounded-br-none rounded-bl-2xl" }
+};
+var bubbleRadiusSymMap = {
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-2xl"
+};
+function getBubbleColors(color, variant) {
+  if (variant === "flat") {
+    return color === "muted" ? "bg-background-muted text-foreground" : "text-foreground";
+  }
+  switch (color) {
+    case "default":
+      return "bg-background-paper border border-border text-foreground";
+    case "muted":
+      return "bg-background-muted text-foreground";
+    case "primary":
+      return "bg-primary text-primary-foreground";
+    case "dark":
+      return "bg-foreground text-background";
+  }
+}
+var builtInStatusLabels = {
+  sending: { label: "Sending...", className: "text-text-subtle" },
+  sent: { label: "Sent", className: "text-text-subtle" },
+  read: { label: "Read", className: "text-text-subtle" },
+  error: { label: "Failed", className: "text-error" }
+};
+var typingSizeMap = {
+  sm: "sm",
+  default: "sm",
+  lg: "default"
+};
+var typingMinWidthMap = {
+  sm: "min-w-12",
+  default: "min-w-12",
+  lg: "min-w-16"
+};
+var ChatMessage = React.forwardRef(
+  ({
+    className,
+    role = "assistant",
+    variant = "bubble",
+    color = "default",
+    size = "default",
+    radius = "2xl",
+    tail = true,
+    typing = false,
+    avatarSize,
+    actions,
+    children,
+    ...props
+  }, ref) => {
+    const ctx = React.useMemo(
+      () => ({ role, variant, color, size, radius, tail, typing, actions }),
+      [role, variant, color, size, radius, tail, typing, actions]
+    );
+    const gapClass = avatarSize ? avatarGapMap[avatarSize] : rowGapMap[size];
+    return /* @__PURE__ */ React.createElement(ChatMessageContext.Provider, { value: ctx }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref,
+        className: cn(
+          "group/message flex items-end",
+          gapClass,
+          role === "user" && variant !== "flat" ? "flex-row-reverse" : "flex-row",
+          className
+        ),
+        ...props
+      },
+      children
+    ));
+  }
+);
+ChatMessage.displayName = "ChatMessage";
+function DefaultAiIcon() {
+  return /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "w-3/5 h-3/5", "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("path", { d: "M12 3l1.8 5.4 5.4 1.8-5.4 1.8L12 17.4l-1.8-5.4L4.8 10.2l5.4-1.8z" }), /* @__PURE__ */ React.createElement("path", { d: "M19.5 3.5l.8 2.4 2.4.8-2.4.8L19.5 10l-.8-2.5-2.4-.8 2.4-.8z", opacity: ".6" }), /* @__PURE__ */ React.createElement("path", { d: "M4.5 14.5l.7 2 2 .7-2 .7L4.5 20l-.7-2-2-.7 2-.7z", opacity: ".4" }));
+}
+var ChatMessageAvatar = React.forwardRef(
+  ({ className, size: avatarSize = "md", src, alt = "Avatar", initials, icon }, ref) => /* @__PURE__ */ React.createElement(
+    Avatar,
+    {
+      ref,
+      "aria-hidden": "true",
+      className: cn(chatAvatarSizeMap[avatarSize], "shrink-0", className)
+    },
+    src && /* @__PURE__ */ React.createElement(AvatarImage, { src, alt }),
+    /* @__PURE__ */ React.createElement(AvatarFallback, { className: cn("font-semibold", chatAvatarFontMap[avatarSize]) }, icon ?? (initials || /* @__PURE__ */ React.createElement(DefaultAiIcon, null)))
+  )
+);
+ChatMessageAvatar.displayName = "ChatMessageAvatar";
+var ChatMessageContent = React.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { role, variant, color, size, radius, tail, typing, actions } = React.useContext(ChatMessageContext);
+    const isTyping = !!typing;
+    const typingProps = typeof typing === "object" ? typing : {};
+    const isDarkBg = color === "primary" || color === "dark";
+    const invertDots = variant === "bubble" && isDarkBg;
+    const effectiveTail = variant === "flat" ? false : tail;
+    const radiusClasses = effectiveTail ? bubbleRadiusTailMap[radius][role] : bubbleRadiusSymMap[radius];
+    const bubble = /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref,
+        className: cn(
+          bubbleTextMap[size],
+          variant === "bubble" && "max-w-[75%]",
+          isTyping && [typingMinWidthMap[size], "text-center"],
+          getBubbleColors(color, variant),
+          (variant === "bubble" || variant === "flat") && bubblePaddingMap[size],
+          (variant === "bubble" || variant === "flat" && color === "muted") && radiusClasses,
+          className
+        ),
+        ...props
+      },
+      isTyping ? /* @__PURE__ */ React.createElement(
+        TypingIndicator,
+        {
+          size: typingSizeMap[size],
+          color: "muted",
+          ...typingProps,
+          className: cn("align-middle", invertDots && "[&>div>div]:bg-current")
+        }
+      ) : children
+    );
+    if (!actions) return bubble;
+    return /* @__PURE__ */ React.createElement("div", { className: cn("flex items-end gap-1.5", role === "user" && variant !== "flat" ? "flex-row-reverse" : "flex-row") }, bubble, /* @__PURE__ */ React.createElement("div", { className: cn(
+      "shrink-0 flex items-center gap-1 pb-0.5",
+      "opacity-0 group-hover/message:opacity-100",
+      "transition-opacity duration-normal"
+    ) }, actions));
+  }
+);
+ChatMessageContent.displayName = "ChatMessageContent";
+var ChatMessageFooter = React.forwardRef(
+  ({
+    className,
+    timestamp,
+    status,
+    role: roleProp,
+    size: sizeProp,
+    children,
+    ...props
+  }, ref) => {
+    const ctx = React.useContext(ChatMessageContext);
+    const role = roleProp ?? ctx.role;
+    const size = sizeProp ?? ctx.size;
+    const variant = ctx.variant;
+    const statusContent = React.useMemo(() => {
+      if (status == null) return null;
+      if (typeof status === "string" && status in builtInStatusLabels) {
+        const { label, className: cls } = builtInStatusLabels[status];
+        return /* @__PURE__ */ React.createElement("span", { className: cls }, label);
+      }
+      return status;
+    }, [status]);
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-center gap-1 select-none",
+          footerTextMap[size],
+          "text-text-subtle",
+          role === "user" && variant !== "flat" ? "justify-end" : "justify-start",
+          className
+        ),
+        ...props
+      },
+      children,
+      statusContent,
+      timestamp && /* @__PURE__ */ React.createElement("span", null, timestamp)
+    );
+  }
+);
+ChatMessageFooter.displayName = "ChatMessageFooter";
+
+export {
+  ChatMessage,
+  ChatMessageAvatar,
+  ChatMessageContent,
+  ChatMessageFooter
+};
+//# sourceMappingURL=chunk-234NAXGV.mjs.map

package/dist/chunk-234NAXGV.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/chat-message.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'\nimport { TypingIndicator, type TypingIndicatorProps } from '@/components/ui/typing-indicator'\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type ChatMessageRole       = 'user' | 'assistant'\nexport type ChatMessageVariant    = 'bubble' | 'flat'\nexport type ChatMessageColor      = 'default' | 'muted' | 'primary' | 'dark'\nexport type ChatMessageSize       = 'sm' | 'default' | 'lg'\nexport type ChatMessageRadius     = 'md' | 'lg' | 'xl' | '2xl'\nexport type ChatMessageAvatarSize = 'sm' | 'md' | 'lg'\n\n/** Built-in status presets (pass as string to Footer.status for auto-rendering) */\nexport type ChatMessageStatus = 'sending' | 'sent' | 'read' | 'error'\n\n// ============================================================================\n// Context — propagates root props to sub-components\n// ============================================================================\n\ninterface ChatMessageContextValue {\n  role:    ChatMessageRole\n  variant: ChatMessageVariant\n  color:   ChatMessageColor\n  size:    ChatMessageSize\n  radius:  ChatMessageRadius\n  tail:    boolean\n  typing:  boolean | Omit<TypingIndicatorProps, 'className'>\n  actions?: React.ReactNode\n}\n\nconst ChatMessageContext = React.createContext<ChatMessageContextValue>({\n  role:    'assistant',\n  variant: 'bubble',\n  color:   'default',\n  size:    'default',\n  radius:  '2xl',\n  tail:    true,\n  typing:  false,\n  actions: undefined,\n})\n\n// ============================================================================\n// Size maps\n// ============================================================================\n\n/** Bubble padding per size */\nconst bubblePaddingMap: Record<ChatMessageSize, string> = {\n  sm:      'px-3 py-1.5',\n  default: 'px-3.5 py-2',\n  lg:      'px-4 py-2.5',\n}\n\n/** Bubble text class per size */\nconst bubbleTextMap: Record<ChatMessageSize, string> = {\n  sm:      'text-sm',\n  default: 'text-md',\n  lg:      'text-base',\n}\n\n/** Footer text size per size */\nconst footerTextMap: Record<ChatMessageSize, string> = {\n  sm:      'text-2xs',\n  default: 'text-2xs',\n  lg:      'text-xs',\n}\n\n/** Gap between avatar and content per message size */\nconst rowGapMap: Record<ChatMessageSize, string> = {\n  sm:      'gap-2',\n  default: 'gap-2.5',\n  lg:      'gap-3',\n}\n\n/** Gap override when avatarSize is explicitly set */\nconst avatarGapMap: Record<ChatMessageAvatarSize, string> = {\n  sm: 'gap-1.5',\n  md: 'gap-2.5',\n  lg: 'gap-3',\n}\n\n// ============================================================================\n// Chat avatar sizes (independent from message size)\n// ============================================================================\n\nconst chatAvatarSizeMap: Record<ChatMessageAvatarSize, string> = {\n  sm: 'w-6 h-6',   // 24px\n  md: 'w-7 h-7',   // 28px\n  lg: 'w-8 h-8',   // 32px\n}\n\nconst chatAvatarFontMap: Record<ChatMessageAvatarSize, string> = {\n  sm: 'text-2xs',\n  md: 'text-2xs',\n  lg: 'text-xs',\n}\n\n// ============================================================================\n// Bubble radius — static maps for Tailwind JIT scanner compatibility\n// ============================================================================\n\n/**\n * Asymmetric with tail: tail corner = rounded-none (0px).\n * assistant → tail at bottom-left | user → tail at bottom-right\n */\nconst bubbleRadiusTailMap: Record<ChatMessageRadius, Record<ChatMessageRole, string>> = {\n  md:    { assistant: 'rounded-tl-md   rounded-tr-md   rounded-br-md   rounded-bl-none', user: 'rounded-tl-md   rounded-tr-md   rounded-br-none rounded-bl-md'   },\n  lg:    { assistant: 'rounded-tl-lg   rounded-tr-lg   rounded-br-lg   rounded-bl-none', user: 'rounded-tl-lg   rounded-tr-lg   rounded-br-none rounded-bl-lg'   },\n  xl:    { assistant: 'rounded-tl-xl   rounded-tr-xl   rounded-br-xl   rounded-bl-none', user: 'rounded-tl-xl   rounded-tr-xl   rounded-br-none rounded-bl-xl'   },\n  '2xl': { assistant: 'rounded-tl-2xl  rounded-tr-2xl  rounded-br-2xl  rounded-bl-none', user: 'rounded-tl-2xl  rounded-tr-2xl  rounded-br-none rounded-bl-2xl'  },\n}\n\n/** Symmetric: all corners same radius */\nconst bubbleRadiusSymMap: Record<ChatMessageRadius, string> = {\n  md:    'rounded-md',\n  lg:    'rounded-lg',\n  xl:    'rounded-xl',\n  '2xl': 'rounded-2xl',\n}\n\n// ============================================================================\n// Bubble color helper — applies to both roles uniformly\n// ============================================================================\n\nfunction getBubbleColors(color: ChatMessageColor, variant: ChatMessageVariant): string {\n  if (variant === 'flat') {\n    return color === 'muted' ? 'bg-background-muted text-foreground' : 'text-foreground'\n  }\n  switch (color) {\n    case 'default': return 'bg-background-paper border border-border text-foreground'\n    case 'muted':   return 'bg-background-muted text-foreground'\n    case 'primary': return 'bg-primary text-primary-foreground'\n    case 'dark':    return 'bg-foreground text-background'\n  }\n}\n\n// ============================================================================\n// Built-in status labels\n// ============================================================================\n\nconst builtInStatusLabels: Record<string, { label: string; className: string }> = {\n  sending: { label: 'Sending...', className: 'text-text-subtle' },\n  sent:    { label: 'Sent',       className: 'text-text-subtle' },\n  read:    { label: 'Read',       className: 'text-text-subtle' },\n  error:   { label: 'Failed',     className: 'text-error' },\n}\n\n// ============================================================================\n// TypingIndicator size mapping (chat sizes → indicator sizes)\n// ============================================================================\n\nconst typingSizeMap: Record<ChatMessageSize, 'sm' | 'default' | 'lg'> = {\n  sm:      'sm',\n  default: 'sm',\n  lg:      'default',\n}\n\n/** Minimum bubble width when typing — accounts for dot size + padding per chat size */\nconst typingMinWidthMap: Record<ChatMessageSize, string> = {\n  sm:      'min-w-12',\n  default: 'min-w-12',\n  lg:      'min-w-16',\n}\n\n// ============================================================================\n// Props interfaces\n// ============================================================================\n\nexport interface ChatMessageRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Sender role — controls alignment (left=assistant, right=user) */\n  role?: ChatMessageRole\n  /** Bubble visual style */\n  variant?: ChatMessageVariant\n  /** Bubble background color */\n  color?: ChatMessageColor\n  /** Size scale — affects text and padding */\n  size?: ChatMessageSize\n  /** Bubble corner radius */\n  radius?: ChatMessageRadius\n  /** Asymmetric tail corner (radius=0 on the avatar side) */\n  tail?: boolean\n  /** Show typing indicator inside Content. Pass true for defaults, or TypingIndicatorProps for custom. */\n  typing?: boolean | Omit<TypingIndicatorProps, 'className'>\n  /** Avatar size — overrides default gap between avatar and bubble */\n  avatarSize?: ChatMessageAvatarSize\n  /** Action buttons revealed on hover */\n  actions?: React.ReactNode\n}\n\nexport interface ChatMessageAvatarProps {\n  /** Avatar size: sm(24px), md(28px), lg(32px) */\n  size?: ChatMessageAvatarSize\n  /** Image URL */\n  src?: string\n  /** Alt text for avatar image */\n  alt?: string\n  /** Initials to display when no image (1–2 characters) */\n  initials?: string\n  /** Custom icon or ReactNode to render inside the avatar */\n  icon?: React.ReactNode\n  /** Additional CSS classes */\n  className?: string\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface ChatMessageContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport interface ChatMessageFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Pre-formatted timestamp string (e.g. \"12:34 PM\") */\n  timestamp?: string\n  /** Status: built-in preset ('sending' | 'sent' | 'read' | 'error') or custom ReactNode */\n  status?: React.ReactNode\n  /** Size override (defaults to context value from ChatMessage root) */\n  size?: ChatMessageSize\n}\n\n// ============================================================================\n// ChatMessage Root\n// ============================================================================\n\nconst ChatMessage = React.forwardRef<HTMLDivElement, ChatMessageRootProps>(\n  (\n    {\n      className,\n      role       = 'assistant',\n      variant    = 'bubble',\n      color      = 'default',\n      size       = 'default',\n      radius     = '2xl',\n      tail       = true,\n      typing     = false,\n      avatarSize,\n      actions,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const ctx = React.useMemo<ChatMessageContextValue>(\n      () => ({ role, variant, color, size, radius, tail, typing, actions }),\n      [role, variant, color, size, radius, tail, typing, actions]\n    )\n\n    const gapClass = avatarSize ? avatarGapMap[avatarSize] : rowGapMap[size]\n\n    return (\n      <ChatMessageContext.Provider value={ctx}>\n        <div\n          ref={ref}\n          className={cn(\n            'group/message flex items-end',\n            gapClass,\n            role === 'user' && variant !== 'flat' ? 'flex-row-reverse' : 'flex-row',\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </ChatMessageContext.Provider>\n    )\n  }\n)\nChatMessage.displayName = 'ChatMessage'\n\n// ============================================================================\n// Default AI sparkle icon\n// ============================================================================\n\nfunction DefaultAiIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" className=\"w-3/5 h-3/5\" aria-hidden=\"true\">\n      <path d=\"M12 3l1.8 5.4 5.4 1.8-5.4 1.8L12 17.4l-1.8-5.4L4.8 10.2l5.4-1.8z\" />\n      <path d=\"M19.5 3.5l.8 2.4 2.4.8-2.4.8L19.5 10l-.8-2.5-2.4-.8 2.4-.8z\" opacity=\".6\" />\n      <path d=\"M4.5 14.5l.7 2 2 .7-2 .7L4.5 20l-.7-2-2-.7 2-.7z\" opacity=\".4\" />\n    </svg>\n  )\n}\n\n// ============================================================================\n// ChatMessageAvatar — wraps Avatar component with chat-specific sizes\n// ============================================================================\n\nconst ChatMessageAvatar = React.forwardRef<HTMLSpanElement, ChatMessageAvatarProps>(\n  ({ className, size: avatarSize = 'md', src, alt = 'Avatar', initials, icon }, ref) => (\n    <Avatar\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      ref={ref as any}\n      aria-hidden=\"true\"\n      className={cn(chatAvatarSizeMap[avatarSize], 'shrink-0', className)}\n    >\n      {src && <AvatarImage src={src} alt={alt} />}\n      <AvatarFallback className={cn('font-semibold', chatAvatarFontMap[avatarSize])}>\n        {icon ?? (initials || <DefaultAiIcon />)}\n      </AvatarFallback>\n    </Avatar>\n  )\n)\nChatMessageAvatar.displayName = 'ChatMessageAvatar'\n\n// ============================================================================\n// ChatMessageContent\n// ============================================================================\n\nconst ChatMessageContent = React.forwardRef<HTMLDivElement, ChatMessageContentProps>(\n  ({ className, children, ...props }, ref) => {\n    const { role, variant, color, size, radius, tail, typing, actions } = React.useContext(ChatMessageContext)\n    const isTyping = !!typing\n    const typingProps = typeof typing === 'object' ? typing : {}\n\n    // Dark bubble backgrounds need inverted typing dot colors\n    const isDarkBg = color === 'primary' || color === 'dark'\n    const invertDots = variant === 'bubble' && isDarkBg\n\n    // flat variant never has a tail (asymmetric corner)\n    const effectiveTail = variant === 'flat' ? false : tail\n    const radiusClasses = effectiveTail\n      ? bubbleRadiusTailMap[radius][role]\n      : bubbleRadiusSymMap[radius]\n\n    const bubble = (\n      <div\n        ref={ref}\n        className={cn(\n          bubbleTextMap[size],\n          variant === 'bubble' && 'max-w-[75%]',\n          isTyping && [typingMinWidthMap[size], 'text-center'],\n          getBubbleColors(color, variant),\n          (variant === 'bubble' || variant === 'flat') && bubblePaddingMap[size],\n          (variant === 'bubble' || (variant === 'flat' && color === 'muted')) && radiusClasses,\n          className\n        )}\n        {...props}\n      >\n        {isTyping ? (\n          <TypingIndicator\n            size={typingSizeMap[size]}\n            color=\"muted\"\n            {...typingProps}\n            className={cn('align-middle', invertDots && '[&>div>div]:bg-current')}\n          />\n        ) : children}\n      </div>\n    )\n\n    if (!actions) return bubble\n\n    return (\n      <div className={cn('flex items-end gap-1.5', role === 'user' && variant !== 'flat' ? 'flex-row-reverse' : 'flex-row')}>\n        {bubble}\n        <div className={cn(\n          'shrink-0 flex items-center gap-1 pb-0.5',\n          'opacity-0 group-hover/message:opacity-100',\n          'transition-opacity duration-normal',\n        )}>\n          {actions}\n        </div>\n      </div>\n    )\n  }\n)\nChatMessageContent.displayName = 'ChatMessageContent'\n\n// ============================================================================\n// ChatMessageFooter\n// ============================================================================\n\nconst ChatMessageFooter = React.forwardRef<HTMLDivElement, ChatMessageFooterProps>(\n  (\n    {\n      className,\n      timestamp,\n      status,\n      role: roleProp,\n      size: sizeProp,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const ctx = React.useContext(ChatMessageContext)\n    const role    = roleProp ?? ctx.role\n    const size    = sizeProp ?? ctx.size\n    const variant = ctx.variant\n\n    // Resolve status: built-in preset string → label, or pass-through ReactNode\n    const statusContent = React.useMemo(() => {\n      if (status == null) return null\n      if (typeof status === 'string' && status in builtInStatusLabels) {\n        const { label, className: cls } = builtInStatusLabels[status]\n        return <span className={cls}>{label}</span>\n      }\n      return status\n    }, [status])\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex items-center gap-1 select-none',\n          footerTextMap[size],\n          'text-text-subtle',\n          role === 'user' && variant !== 'flat' ? 'justify-end' : 'justify-start',\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {statusContent}\n        {timestamp && <span>{timestamp}</span>}\n      </div>\n    )\n  }\n)\nChatMessageFooter.displayName = 'ChatMessageFooter'\n\nexport {\n  ChatMessage,\n  ChatMessageAvatar,\n  ChatMessageContent,\n  ChatMessageFooter,\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-53MIUPSY.mjs

@@ -0,0 +1,13 @@
+"use client";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export {
+  cn
+};
+//# sourceMappingURL=chunk-53MIUPSY.mjs.map

package/dist/chunk-53MIUPSY.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts"],"sourcesContent":["import { type ClassValue, clsx } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\n/**\n * Combines class names with Tailwind CSS class merging\n * @param inputs - Class values to combine\n * @returns Merged class string\n */\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"],"mappings":";;;AAAA,SAA0B,YAAY;AACtC,SAAS,eAAe;AAOjB,SAAS,MAAM,QAAsB;AAC1C,SAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;","names":[]}

package/dist/chunk-BN5BEA3V.mjs

@@ -0,0 +1,195 @@
+"use client";
+import {
+  cn
+} from "./chunk-53MIUPSY.mjs";
+
+// src/components/ui/table.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+var TableContext = React.createContext({ size: "default", variant: "default", stickyHeader: false });
+var cellPaddingMap = {
+  sm: "px-3 py-2 text-sm",
+  default: "px-4 py-3 text-sm",
+  lg: "px-6 py-4 text-base"
+};
+var headPaddingMap = {
+  sm: "px-3 py-2 text-xs",
+  default: "px-4 py-3 text-xs",
+  lg: "px-6 py-3.5 text-sm"
+};
+var checkboxPaddingMap = {
+  sm: "[&:has([role=checkbox])]:pl-1 [&:has([role=checkbox])]:pr-0",
+  default: "[&:has([role=checkbox])]:pl-2 [&:has([role=checkbox])]:pr-0",
+  lg: "[&:has([role=checkbox])]:pl-3 [&:has([role=checkbox])]:pr-0"
+};
+var tableVariants = cva(
+  "w-full caption-bottom text-sm",
+  {
+    variants: {
+      variant: {
+        default: "",
+        bordered: "border border-border",
+        striped: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Table = React.forwardRef(
+  ({ className, size = "default", variant = "default", stickyHeader = false, wrapperClassName, ...props }, ref) => /* @__PURE__ */ React.createElement(TableContext.Provider, { value: { size, variant, stickyHeader } }, /* @__PURE__ */ React.createElement("div", { className: cn("relative w-full overflow-auto", wrapperClassName) }, /* @__PURE__ */ React.createElement(
+    "table",
+    {
+      ref,
+      className: cn(tableVariants({ variant }), className),
+      ...props
+    }
+  )))
+);
+Table.displayName = "Table";
+var TableHeader = React.forwardRef(({ className, ...props }, ref) => {
+  const { stickyHeader } = React.useContext(TableContext);
+  return /* @__PURE__ */ React.createElement(
+    "thead",
+    {
+      ref,
+      className: cn(
+        "[&_tr]:border-b [&_tr]:border-border",
+        stickyHeader && "sticky top-0 z-10 bg-background",
+        className
+      ),
+      ...props
+    }
+  );
+});
+TableHeader.displayName = "TableHeader";
+var TableBody = React.forwardRef(({ className, ...props }, ref) => {
+  const { variant } = React.useContext(TableContext);
+  return /* @__PURE__ */ React.createElement(
+    "tbody",
+    {
+      ref,
+      className: cn(
+        "[&_tr:last-child]:border-b-0",
+        variant === "striped" && "[&_tr:nth-child(even)]:bg-background-muted",
+        className
+      ),
+      ...props
+    }
+  );
+});
+TableBody.displayName = "TableBody";
+var TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  "tfoot",
+  {
+    ref,
+    className: cn(
+      "border-t border-border bg-background-muted/50 font-normal [&>tr]:last:border-b-0",
+      className
+    ),
+    ...props
+  }
+));
+TableFooter.displayName = "TableFooter";
+var TableRow = React.forwardRef(
+  ({ className, interactive = false, selected = false, ...props }, ref) => /* @__PURE__ */ React.createElement(
+    "tr",
+    {
+      ref,
+      "data-selected": selected || void 0,
+      className: cn(
+        "border-b border-border transition-colors duration-fast",
+        interactive && "hover:bg-background-muted/50 cursor-pointer",
+        className
+      ),
+      ...props
+    }
+  )
+);
+TableRow.displayName = "TableRow";
+var defaultSortIcons = {
+  asc: /* @__PURE__ */ React.createElement("svg", { className: "icon-xs", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 15l7-7 7 7" })),
+  desc: /* @__PURE__ */ React.createElement("svg", { className: "icon-xs", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })),
+  default: /* @__PURE__ */ React.createElement("svg", { className: "icon-xs", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" }))
+};
+var TableHead = React.forwardRef(
+  ({ className, align = "left", sortable = false, sortDirection = null, onSort, sortIcon, children, ...props }, ref) => {
+    const { size } = React.useContext(TableContext);
+    const icons = { ...defaultSortIcons, ...sortIcon };
+    const content = sortable ? /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        className: "inline-flex items-center gap-1.5 hover:text-foreground transition-colors duration-fast group",
+        onClick: onSort
+      },
+      children,
+      /* @__PURE__ */ React.createElement("span", { className: cn(
+        "shrink-0 transition-colors duration-fast",
+        sortDirection ? "text-foreground" : "text-text-muted"
+      ) }, sortDirection === "asc" ? icons.asc : sortDirection === "desc" ? icons.desc : icons.default)
+    ) : children;
+    return /* @__PURE__ */ React.createElement(
+      "th",
+      {
+        ref,
+        className: cn(
+          "text-left align-middle font-semibold text-text-muted whitespace-nowrap",
+          headPaddingMap[size],
+          checkboxPaddingMap[size],
+          align === "center" && "text-center",
+          align === "right" && "text-right",
+          sortable && "select-none",
+          className
+        ),
+        "aria-sort": sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : void 0,
+        ...props
+      },
+      content
+    );
+  }
+);
+TableHead.displayName = "TableHead";
+var TableCell = React.forwardRef(
+  ({ className, align = "left", ...props }, ref) => {
+    const { size } = React.useContext(TableContext);
+    return /* @__PURE__ */ React.createElement(
+      "td",
+      {
+        ref,
+        className: cn(
+          "text-foreground align-middle",
+          cellPaddingMap[size],
+          checkboxPaddingMap[size],
+          align === "center" && "text-center",
+          align === "right" && "text-right",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+TableCell.displayName = "TableCell";
+var TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  "caption",
+  {
+    ref,
+    className: cn("mt-4 text-sm text-text-muted", className),
+    ...props
+  }
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption
+};
+//# sourceMappingURL=chunk-BN5BEA3V.mjs.map

package/dist/chunk-BN5BEA3V.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/table.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\n// Size variants for table density\ntype TableSize = 'sm' | 'default' | 'lg'\n\n// Visual style variants\ntype TableVariant = 'default' | 'bordered' | 'striped'\n\n// Root context — set at Root, consumed by children\nconst TableContext = React.createContext<{\n  size: TableSize\n  variant: TableVariant\n  stickyHeader: boolean\n}>({ size: 'default', variant: 'default', stickyHeader: false })\n\n// Cell padding per size\nconst cellPaddingMap: Record<TableSize, string> = {\n  sm: 'px-3 py-2 text-sm',\n  default: 'px-4 py-3 text-sm',\n  lg: 'px-6 py-4 text-base',\n}\n\n// Head cell padding per size\nconst headPaddingMap: Record<TableSize, string> = {\n  sm: 'px-3 py-2 text-xs',\n  default: 'px-4 py-3 text-xs',\n  lg: 'px-6 py-3.5 text-sm',\n}\n\n// Checkbox column padding override per size (right padding removed — next column's left padding handles the gap)\nconst checkboxPaddingMap: Record<TableSize, string> = {\n  sm: '[&:has([role=checkbox])]:pl-1 [&:has([role=checkbox])]:pr-0',\n  default: '[&:has([role=checkbox])]:pl-2 [&:has([role=checkbox])]:pr-0',\n  lg: '[&:has([role=checkbox])]:pl-3 [&:has([role=checkbox])]:pr-0',\n}\n\nconst tableVariants = cva(\n  'w-full caption-bottom text-sm',\n  {\n    variants: {\n      variant: {\n        default: '',\n        bordered: 'border border-border',\n        striped: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  }\n)\n\n// ─── Root ────────────────────────────────────────────────────────\nexport interface TableProps\n  extends React.HTMLAttributes<HTMLTableElement>,\n    VariantProps<typeof tableVariants> {\n  /** Table density */\n  size?: TableSize\n  /** Visual style */\n  variant?: TableVariant\n  /** Sticky header when scrolling */\n  stickyHeader?: boolean\n  /** Additional className for the scroll wrapper (e.g. max-h-[400px]) */\n  wrapperClassName?: string\n}\n\nconst Table = React.forwardRef<HTMLTableElement, TableProps>(\n  ({ className, size = 'default', variant = 'default', stickyHeader = false, wrapperClassName, ...props }, ref) => (\n    <TableContext.Provider value={{ size, variant, stickyHeader }}>\n      <div className={cn('relative w-full overflow-auto', wrapperClassName)}>\n        <table\n          ref={ref}\n          className={cn(tableVariants({ variant }), className)}\n          {...props}\n        />\n      </div>\n    </TableContext.Provider>\n  )\n)\nTable.displayName = 'Table'\n\n// ─── Header ──────────────────────────────────────────────────────\nconst TableHeader = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => {\n  const { stickyHeader } = React.useContext(TableContext)\n  return (\n    <thead\n      ref={ref}\n      className={cn(\n        '[&_tr]:border-b [&_tr]:border-border',\n        stickyHeader && 'sticky top-0 z-10 bg-background',\n        className\n      )}\n      {...props}\n    />\n  )\n})\nTableHeader.displayName = 'TableHeader'\n\n// ─── Body ────────────────────────────────────────────────────────\nconst TableBody = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => {\n  const { variant } = React.useContext(TableContext)\n  return (\n    <tbody\n      ref={ref}\n      className={cn(\n        '[&_tr:last-child]:border-b-0',\n        variant === 'striped' && '[&_tr:nth-child(even)]:bg-background-muted',\n        className\n      )}\n      {...props}\n    />\n  )\n})\nTableBody.displayName = 'TableBody'\n\n// ─── Footer ──────────────────────────────────────────────────────\nconst TableFooter = React.forwardRef<\n  HTMLTableSectionElement,\n  React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n  <tfoot\n    ref={ref}\n    className={cn(\n      'border-t border-border bg-background-muted/50 font-normal [&>tr]:last:border-b-0',\n      className\n    )}\n    {...props}\n  />\n))\nTableFooter.displayName = 'TableFooter'\n\n// ─── Row ─────────────────────────────────────────────────────────\nexport interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {\n  /** Enable hover highlight */\n  interactive?: boolean\n  /** Selected state background */\n  selected?: boolean\n}\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n  ({ className, interactive = false, selected = false, ...props }, ref) => (\n    <tr\n      ref={ref}\n      data-selected={selected || undefined}\n      className={cn(\n        'border-b border-border transition-colors duration-fast',\n        interactive && 'hover:bg-background-muted/50 cursor-pointer',\n        className\n      )}\n      {...props}\n    />\n  )\n)\nTableRow.displayName = 'TableRow'\n\n// ─── Head Cell ───────────────────────────────────────────────────\ntype SortDirection = 'asc' | 'desc' | null\n\n// Default sort icons\nconst defaultSortIcons = {\n  asc: (\n    <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 15l7-7 7 7\" />\n    </svg>\n  ),\n  desc: (\n    <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n    </svg>\n  ),\n  default: (\n    <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4\" />\n    </svg>\n  ),\n}\n\nexport interface SortIconSet {\n  /** Icon for ascending state */\n  asc?: React.ReactNode\n  /** Icon for descending state */\n  desc?: React.ReactNode\n  /** Icon for unsorted (default) state */\n  default?: React.ReactNode\n}\n\nexport interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right'\n  /** Enable sort indicator */\n  sortable?: boolean\n  /** Current sort direction */\n  sortDirection?: SortDirection\n  /** Sort click handler */\n  onSort?: () => void\n  /** Custom sort icons (overrides built-in icons) */\n  sortIcon?: SortIconSet\n}\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n  ({ className, align = 'left', sortable = false, sortDirection = null, onSort, sortIcon, children, ...props }, ref) => {\n    const { size } = React.useContext(TableContext)\n    const icons = { ...defaultSortIcons, ...sortIcon }\n\n    const content = sortable ? (\n      <button\n        type=\"button\"\n        className=\"inline-flex items-center gap-1.5 hover:text-foreground transition-colors duration-fast group\"\n        onClick={onSort}\n      >\n        {children}\n        <span className={cn(\n          'shrink-0 transition-colors duration-fast',\n          sortDirection ? 'text-foreground' : 'text-text-muted'\n        )}>\n          {sortDirection === 'asc' ? icons.asc\n            : sortDirection === 'desc' ? icons.desc\n            : icons.default}\n        </span>\n      </button>\n    ) : children\n\n    return (\n      <th\n        ref={ref}\n        className={cn(\n          'text-left align-middle font-semibold text-text-muted whitespace-nowrap',\n          headPaddingMap[size],\n          checkboxPaddingMap[size],\n          align === 'center' && 'text-center',\n          align === 'right' && 'text-right',\n          sortable && 'select-none',\n          className\n        )}\n        aria-sort={sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : undefined}\n        {...props}\n      >\n        {content}\n      </th>\n    )\n  }\n)\nTableHead.displayName = 'TableHead'\n\n// ─── Data Cell ───────────────────────────────────────────────────\nexport interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /** Text alignment */\n  align?: 'left' | 'center' | 'right'\n}\n\nconst TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n  ({ className, align = 'left', ...props }, ref) => {\n    const { size } = React.useContext(TableContext)\n    return (\n      <td\n        ref={ref}\n        className={cn(\n          'text-foreground align-middle',\n          cellPaddingMap[size],\n          checkboxPaddingMap[size],\n          align === 'center' && 'text-center',\n          align === 'right' && 'text-right',\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n)\nTableCell.displayName = 'TableCell'\n\n// ─── Caption ─────────────────────────────────────────────────────\nconst TableCaption = React.forwardRef<\n  HTMLTableCaptionElement,\n  React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n  <caption\n    ref={ref}\n    className={cn('mt-4 text-sm text-text-muted', className)}\n    {...props}\n  />\n))\nTableCaption.displayName = 'TableCaption'\n\nexport type { TableSize, TableVariant, SortDirection }\n\nexport {\n  Table,\n  TableHeader,\n  TableBody,\n  TableFooter,\n  TableRow,\n  TableHead,\n  TableCell,\n  TableCaption,\n}\n"],"mappings":"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","names":[]}