@7onic-ui/react 0.3.9 → 0.3.11

package/dist/chunk-Q5WVLK2L.mjs

@@ -0,0 +1,77 @@
+"use client";
+import {
+  cn
+} from "./chunk-53MIUPSY.mjs";
+
+// src/components/ui/button-group.tsx
+import * as React from "react";
+var ButtonGroupContext = React.createContext(null);
+function useButtonGroup() {
+  return React.useContext(ButtonGroupContext);
+}
+var ButtonGroup = React.forwardRef(
+  ({
+    className,
+    orientation = "horizontal",
+    attached = true,
+    variant,
+    size,
+    radius,
+    fontWeight,
+    disabled,
+    children,
+    ...props
+  }, ref) => {
+    const contextValue = React.useMemo(() => ({
+      variant,
+      size,
+      radius,
+      fontWeight,
+      disabled
+    }), [variant, size, radius, fontWeight, disabled]);
+    return /* @__PURE__ */ React.createElement(ButtonGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref,
+        role: "group",
+        className: cn(
+          "inline-flex",
+          orientation === "vertical" ? "flex-col" : "flex-row",
+          // Attached mode: use negative margin to overlap borders, raise z-index on hover/focus
+          attached && orientation === "horizontal" && [
+            "[&>*:not(:first-child)]:rounded-l-none",
+            "[&>*:not(:last-child)]:rounded-r-none",
+            "[&>*:not(:first-child)]:-ml-px",
+            "[&>*]:relative",
+            "[&>*:hover]:z-10",
+            "[&>*:focus-visible]:z-10",
+            "[&>*:active]:scale-none",
+            "[&>*:hover]:border-border"
+          ],
+          attached && orientation === "vertical" && [
+            "[&>*:not(:first-child)]:rounded-t-none",
+            "[&>*:not(:last-child)]:rounded-b-none",
+            "[&>*:not(:first-child)]:-mt-px",
+            "[&>*]:relative",
+            "[&>*]:w-full",
+            "[&>*:hover]:z-10",
+            "[&>*:focus-visible]:z-10",
+            "[&>*:active]:scale-none",
+            "[&>*:hover]:border-border"
+          ],
+          !attached && "gap-2",
+          className
+        ),
+        ...props
+      },
+      children
+    ));
+  }
+);
+ButtonGroup.displayName = "ButtonGroup";
+
+export {
+  useButtonGroup,
+  ButtonGroup
+};
+//# sourceMappingURL=chunk-Q5WVLK2L.mjs.map

package/dist/chunk-Q5WVLK2L.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/button-group.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cn } from '@/lib/utils'\n\n// ButtonGroup Context\ntype ButtonGroupContextValue = {\n  variant?: 'outline' | 'ghost'\n  size?: 'xs' | 'sm' | 'md' | 'default' | 'lg'\n  radius?: 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n  fontWeight?: 'normal' | 'semibold'\n  disabled?: boolean\n}\n\nconst ButtonGroupContext = React.createContext<ButtonGroupContextValue | null>(null)\n\nexport function useButtonGroup() {\n  return React.useContext(ButtonGroupContext)\n}\n\nexport interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  orientation?: 'horizontal' | 'vertical'\n  attached?: boolean\n  variant?: 'outline' | 'ghost'\n  size?: 'xs' | 'sm' | 'md' | 'default' | 'lg'\n  radius?: 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n  fontWeight?: 'normal' | 'semibold'\n  disabled?: boolean\n}\n\nconst ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n  ({\n    className,\n    orientation = 'horizontal',\n    attached = true,\n    variant,\n    size,\n    radius,\n    fontWeight,\n    disabled,\n    children,\n    ...props\n  }, ref) => {\n    const contextValue = React.useMemo(() => ({\n      variant,\n      size,\n      radius,\n      fontWeight,\n      disabled,\n    }), [variant, size, radius, fontWeight, disabled])\n\n    return (\n      <ButtonGroupContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          role=\"group\"\n          className={cn(\n            'inline-flex',\n            orientation === 'vertical' ? 'flex-col' : 'flex-row',\n            // Attached mode: use negative margin to overlap borders, raise z-index on hover/focus\n            attached && orientation === 'horizontal' && [\n              '[&>*:not(:first-child)]:rounded-l-none',\n              '[&>*:not(:last-child)]:rounded-r-none',\n              '[&>*:not(:first-child)]:-ml-px',\n              '[&>*]:relative',\n              '[&>*:hover]:z-10',\n              '[&>*:focus-visible]:z-10',\n              '[&>*:active]:scale-none',\n              '[&>*:hover]:border-border',\n            ],\n            attached && orientation === 'vertical' && [\n              '[&>*:not(:first-child)]:rounded-t-none',\n              '[&>*:not(:last-child)]:rounded-b-none',\n              '[&>*:not(:first-child)]:-mt-px',\n              '[&>*]:relative',\n              '[&>*]:w-full',\n              '[&>*:hover]:z-10',\n              '[&>*:focus-visible]:z-10',\n              '[&>*:active]:scale-none',\n              '[&>*:hover]:border-border',\n            ],\n            !attached && 'gap-2',\n            className\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </ButtonGroupContext.Provider>\n    )\n  }\n)\nButtonGroup.displayName = 'ButtonGroup'\n\nexport { ButtonGroup }\n"],"mappings":";;;;;;AAEA,YAAY,WAAW;AAYvB,IAAM,qBAA2B,oBAA8C,IAAI;AAE5E,SAAS,iBAAiB;AAC/B,SAAa,iBAAW,kBAAkB;AAC5C;AAYA,IAAM,cAAoB;AAAA,EACxB,CAAC;AAAA,IACC;AAAA,IACA,cAAc;AAAA,IACd,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GAAG,QAAQ;AACT,UAAM,eAAqB,cAAQ,OAAO;AAAA,MACxC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,CAAC,SAAS,MAAM,QAAQ,YAAY,QAAQ,CAAC;AAEjD,WACE,oCAAC,mBAAmB,UAAnB,EAA4B,OAAO,gBAClC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA,gBAAgB,aAAa,aAAa;AAAA;AAAA,UAE1C,YAAY,gBAAgB,gBAAgB;AAAA,YAC1C;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UACA,YAAY,gBAAgB,cAAc;AAAA,YACxC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,UACA,CAAC,YAAY;AAAA,UACb;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,MAEH;AAAA,IACH,CACF;AAAA,EAEJ;AACF;AACA,YAAY,cAAc;","names":[]}

package/dist/chunk-R7FJEO4K.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-R7FJEO4K.mjs.map

package/dist/chunk-R7FJEO4K.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\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-RKSB2N5L.mjs

@@ -0,0 +1,206 @@
+"use client";
+import {
+  cn
+} from "./chunk-53MIUPSY.mjs";
+
+// src/components/ui/segmented.tsx
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { cva } from "class-variance-authority";
+var SegmentedContext = React.createContext({});
+var useSegmentedContext = () => React.useContext(SegmentedContext);
+var segmentedVariants = cva(
+  "inline-flex items-center text-text-subtle",
+  {
+    variants: {
+      variant: {
+        default: "bg-background-muted gap-1",
+        outline: "bg-background border border-border gap-1",
+        underline: "bg-transparent border-b border-border gap-0",
+        ghost: "bg-transparent gap-1"
+      },
+      size: {
+        sm: "h-8",
+        // 32px height
+        md: "h-9",
+        // 36px height
+        default: "h-10",
+        // 40px height
+        lg: "h-12"
+        // 48px height
+      },
+      radius: {
+        none: "rounded-none",
+        sm: "rounded-sm",
+        base: "rounded",
+        default: "rounded-md",
+        lg: "rounded-lg",
+        xl: "rounded-xl",
+        "2xl": "rounded-2xl",
+        "3xl": "rounded-3xl",
+        full: "rounded-full"
+      },
+      fontWeight: {
+        normal: "[&>*]:font-normal",
+        semibold: "[&>*]:font-semibold"
+      }
+    },
+    compoundVariants: [
+      // Padding for default/outline/ghost variants
+      { variant: "default", className: "p-1" },
+      { variant: "outline", className: "p-1" },
+      { variant: "ghost", className: "p-1" },
+      // Underline has no padding
+      { variant: "underline", className: "p-0" }
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      radius: "default",
+      fontWeight: "normal"
+    }
+  }
+);
+var segmentedItemVariants = cva(
+  [
+    "inline-flex items-center justify-center whitespace-nowrap h-full",
+    "transition-all duration-micro ease-out",
+    "focus-visible:focus-ring",
+    "disabled:pointer-events-none disabled:opacity-50"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        // Default: light background when selected, text emphasis on hover
+        default: [
+          "hover:text-foreground",
+          "data-[state=checked]:bg-background data-[state=checked]:text-foreground",
+          "data-[state=checked]:shadow-sm"
+        ].join(" "),
+        // Outline: gray background when selected
+        outline: [
+          "data-[state=checked]:bg-background-muted data-[state=checked]:text-foreground",
+          "hover:text-foreground hover:bg-background-muted"
+        ].join(" "),
+        // Underline: bottom border indicator (Stripe/GitHub style)
+        underline: [
+          "border-b-2 border-transparent -mb-px",
+          "hover:text-foreground hover:border-border",
+          "data-[state=checked]:text-foreground data-[state=checked]:border-foreground"
+        ].join(" "),
+        // Ghost: pill background only on selected (Notion/Figma style)
+        ghost: [
+          "hover:text-foreground hover:bg-background-muted",
+          "data-[state=checked]:bg-background-muted data-[state=checked]:text-foreground"
+        ].join(" ")
+      },
+      size: {
+        sm: "text-xs",
+        // 12px
+        md: "text-sm",
+        // 13px
+        default: "text-sm",
+        // 13px
+        lg: "text-md"
+        // 14px
+      },
+      radius: {
+        none: "rounded-none",
+        sm: "rounded-sm",
+        base: "rounded",
+        default: "rounded-md",
+        lg: "rounded-md",
+        xl: "rounded-lg",
+        "2xl": "rounded-xl",
+        "3xl": "rounded-2xl",
+        full: "rounded-full"
+      },
+      // Content type determines padding and aspect ratio
+      contentType: {
+        // Icon only: square aspect ratio like IconButton
+        icon: "aspect-square",
+        // Icon + text: rectangular (gap is set via compoundVariants)
+        "icon-text": "",
+        // Text only: standard button padding
+        text: ""
+      }
+    },
+    compoundVariants: [
+      // Icon + text - same padding rules as Button/Toggle
+      { contentType: "icon-text", size: "sm", className: "px-3 gap-2" },
+      // 12px padding, 8px gap
+      { contentType: "icon-text", size: "md", className: "px-3.5 gap-2" },
+      // 14px padding, 8px gap
+      { contentType: "icon-text", size: "default", className: "px-4 gap-2" },
+      // 16px padding, 8px gap
+      { contentType: "icon-text", size: "lg", className: "px-6 gap-2" },
+      // 24px padding, 8px gap
+      // Text only - same padding rules as Button/Toggle
+      { contentType: "text", size: "sm", className: "px-3.5" },
+      // 14px
+      { contentType: "text", size: "md", className: "px-3.5" },
+      // 14px
+      { contentType: "text", size: "default", className: "px-4" },
+      // 16px
+      { contentType: "text", size: "lg", className: "px-6" },
+      // 24px
+      // Underline variant has no rounded corners
+      { variant: "underline", className: "rounded-none" }
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      radius: "default",
+      contentType: "text"
+    }
+  }
+);
+var Segmented = React.forwardRef(({ className, variant, size, radius, fontWeight, ...props }, ref) => {
+  const resolvedFontWeight = fontWeight ?? "normal";
+  return /* @__PURE__ */ React.createElement(SegmentedContext.Provider, { value: { variant: variant || "default", size: size || "default", radius: radius || "default" } }, /* @__PURE__ */ React.createElement(
+    RadioGroupPrimitive.Root,
+    {
+      className: cn(segmentedVariants({ variant, size, radius, fontWeight: resolvedFontWeight }), className),
+      ...props,
+      ref
+    }
+  ));
+});
+Segmented.displayName = "Segmented";
+var iconSizeClasses = {
+  sm: "[&>svg]:icon-xs",
+  // 14px
+  md: "[&>svg]:icon-sm",
+  // 16px
+  default: "[&>svg]:icon-sm",
+  // 16px
+  lg: "[&>svg]:icon-sm"
+  // 16px
+};
+var SegmentedItem = React.forwardRef(({ className, children, size, radius, contentType, ...props }, ref) => {
+  const { variant, size: contextSize, radius: contextRadius } = useSegmentedContext();
+  const resolvedSize = size || contextSize || "default";
+  const resolvedRadius = radius || contextRadius || "default";
+  return /* @__PURE__ */ React.createElement(
+    RadioGroupPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        segmentedItemVariants({ variant, size: resolvedSize, radius: resolvedRadius, contentType }),
+        iconSizeClasses[resolvedSize],
+        className
+      ),
+      ...props
+    },
+    children
+  );
+});
+SegmentedItem.displayName = "SegmentedItem";
+
+export {
+  segmentedVariants,
+  segmentedItemVariants,
+  Segmented,
+  SegmentedItem
+};
+//# sourceMappingURL=chunk-RKSB2N5L.mjs.map

package/dist/chunk-RKSB2N5L.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ui/segmented.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\n// Context to pass variant and size from Segmented to SegmentedItem\ntype SegmentedContextValue = {\n  variant?: 'default' | 'outline' | 'underline' | 'ghost'\n  size?: 'sm' | 'md' | 'default' | 'lg'\n  radius?: 'none' | 'sm' | 'base' | 'default' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'\n}\nconst SegmentedContext = React.createContext<SegmentedContextValue>({})\nconst useSegmentedContext = () => React.useContext(SegmentedContext)\n\nconst segmentedVariants = cva(\n  'inline-flex items-center text-text-subtle',\n  {\n    variants: {\n      variant: {\n        default: 'bg-background-muted gap-1',\n        outline: 'bg-background border border-border gap-1',\n        underline: 'bg-transparent border-b border-border gap-0',\n        ghost: 'bg-transparent gap-1',\n      },\n      size: {\n        sm: 'h-8',        // 32px height\n        md: 'h-9',        // 36px height\n        default: 'h-10',  // 40px height\n        lg: 'h-12',       // 48px height\n      },\n      radius: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        base: 'rounded',\n        default: 'rounded-md',\n        lg: 'rounded-lg',\n        xl: 'rounded-xl',\n        '2xl': 'rounded-2xl',\n        '3xl': 'rounded-3xl',\n        full: 'rounded-full',\n      },\n      fontWeight: {\n        normal: '[&>*]:font-normal',\n        semibold: '[&>*]:font-semibold',\n      },\n    },\n    compoundVariants: [\n      // Padding for default/outline/ghost variants\n      { variant: 'default', className: 'p-1' },\n      { variant: 'outline', className: 'p-1' },\n      { variant: 'ghost', className: 'p-1' },\n      // Underline has no padding\n      { variant: 'underline', className: 'p-0' },\n    ],\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n      radius: 'default',\n      fontWeight: 'normal',\n    },\n  }\n)\n\nconst segmentedItemVariants = cva(\n  [\n    'inline-flex items-center justify-center whitespace-nowrap h-full',\n    'transition-all duration-micro ease-out',\n    'focus-visible:focus-ring',\n    'disabled:pointer-events-none disabled:opacity-50',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        // Default: light background when selected, text emphasis on hover\n        default: [\n          'hover:text-foreground',\n          'data-[state=checked]:bg-background data-[state=checked]:text-foreground',\n          'data-[state=checked]:shadow-sm',\n        ].join(' '),\n        // Outline: gray background when selected\n        outline: [\n          'data-[state=checked]:bg-background-muted data-[state=checked]:text-foreground',\n          'hover:text-foreground hover:bg-background-muted',\n        ].join(' '),\n        // Underline: bottom border indicator (Stripe/GitHub style)\n        underline: [\n          'border-b-2 border-transparent -mb-px',\n          'hover:text-foreground hover:border-border',\n          'data-[state=checked]:text-foreground data-[state=checked]:border-foreground',\n        ].join(' '),\n        // Ghost: pill background only on selected (Notion/Figma style)\n        ghost: [\n          'hover:text-foreground hover:bg-background-muted',\n          'data-[state=checked]:bg-background-muted data-[state=checked]:text-foreground',\n        ].join(' '),\n      },\n      size: {\n        sm: 'text-xs',      // 12px\n        md: 'text-sm',      // 13px\n        default: 'text-sm', // 13px\n        lg: 'text-md',      // 14px\n      },\n      radius: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        base: 'rounded',\n        default: 'rounded-md',\n        lg: 'rounded-md',\n        xl: 'rounded-lg',\n        '2xl': 'rounded-xl',\n        '3xl': 'rounded-2xl',\n        full: 'rounded-full',\n      },\n      // Content type determines padding and aspect ratio\n      contentType: {\n        // Icon only: square aspect ratio like IconButton\n        icon: 'aspect-square',\n        // Icon + text: rectangular (gap is set via compoundVariants)\n        'icon-text': '',\n        // Text only: standard button padding\n        text: '',\n      },\n    },\n    compoundVariants: [\n      // Icon + text - same padding rules as Button/Toggle\n      { contentType: 'icon-text', size: 'sm', className: 'px-3 gap-2' },      // 12px padding, 8px gap\n      { contentType: 'icon-text', size: 'md', className: 'px-3.5 gap-2' },   // 14px padding, 8px gap\n      { contentType: 'icon-text', size: 'default', className: 'px-4 gap-2' }, // 16px padding, 8px gap\n      { contentType: 'icon-text', size: 'lg', className: 'px-6 gap-2' },      // 24px padding, 8px gap\n      // Text only - same padding rules as Button/Toggle\n      { contentType: 'text', size: 'sm', className: 'px-3.5' },    // 14px\n      { contentType: 'text', size: 'md', className: 'px-3.5' },    // 14px\n      { contentType: 'text', size: 'default', className: 'px-4' }, // 16px\n      { contentType: 'text', size: 'lg', className: 'px-6' },      // 24px\n      // Underline variant has no rounded corners\n      { variant: 'underline', className: 'rounded-none' },\n    ],\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n      radius: 'default',\n      contentType: 'text',\n    },\n  }\n)\n\nexport interface SegmentedProps\n  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>,\n    VariantProps<typeof segmentedVariants> {}\n\nconst Segmented = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Root>,\n  SegmentedProps\n>(({ className, variant, size, radius, fontWeight, ...props }, ref) => {\n  // All variants default to normal font weight\n  const resolvedFontWeight = fontWeight ?? 'normal'\n\n  return (\n    <SegmentedContext.Provider value={{ variant: variant || 'default', size: size || 'default', radius: radius || 'default' }}>\n      <RadioGroupPrimitive.Root\n        className={cn(segmentedVariants({ variant, size, radius, fontWeight: resolvedFontWeight }), className)}\n        {...props}\n        ref={ref}\n      />\n    </SegmentedContext.Provider>\n  )\n})\nSegmented.displayName = 'Segmented'\n\n// Icon size for segmented control (4-step scale, Icon+Text mode)\n// sm: 14px, md~default~lg: 16px\nconst iconSizeClasses = {\n  sm: '[&>svg]:icon-xs',      // 14px\n  md: '[&>svg]:icon-sm',      // 16px\n  default: '[&>svg]:icon-sm', // 16px\n  lg: '[&>svg]:icon-sm',      // 16px\n}\n\nexport interface SegmentedItemProps\n  extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,\n    Omit<VariantProps<typeof segmentedItemVariants>, 'variant'> {}\n\nconst SegmentedItem = React.forwardRef<\n  React.ElementRef<typeof RadioGroupPrimitive.Item>,\n  SegmentedItemProps\n>(({ className, children, size, radius, contentType, ...props }, ref) => {\n  const { variant, size: contextSize, radius: contextRadius } = useSegmentedContext()\n  const resolvedSize = size || contextSize || 'default'\n  const resolvedRadius = radius || contextRadius || 'default'\n\n  return (\n    <RadioGroupPrimitive.Item\n      ref={ref}\n      className={cn(\n        segmentedItemVariants({ variant, size: resolvedSize, radius: resolvedRadius, contentType }),\n        iconSizeClasses[resolvedSize],\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </RadioGroupPrimitive.Item>\n  )\n})\nSegmentedItem.displayName = 'SegmentedItem'\n\nexport { Segmented, SegmentedItem, segmentedVariants, segmentedItemVariants }\n"],"mappings":"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","names":[]}