@7onic-ui/react 0.2.2 → 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -24,7 +24,8 @@
24
24
  |:---:|---|---|
25
25
  | **🎯** | **Zero design-code drift** | Design and code from a single vision. No handoff, no drift — every component is pixel-verified against Figma. |
26
26
  | **📦** | **One JSON, every format** | `figma-tokens.json` auto-generates CSS, Tailwind v3, Tailwind v4, JS/TS, and JSON — all in sync. |
27
- | **🧩** | **shadcn freedom + MUI convenience** | Built-in `toast.promise()`, `pressEffect`, namespace patterns no DIY. `npx 7onic add` or `npm install` same components, your workflow. |
27
+ | **🧩** | **shadcn freedom + MUI convenience** | shadcn's customization with none of its missing features. MUI's built-in power with none of its styling constraints. Both, by design. |
28
+ | **⚡** | **npm or CLI — your choice** | `npm install` for packages, `npx 7onic add` for local copy. Same components, two workflows. |
28
29
  | **🔀** | **Only Tailwind v3+v4 dual support** | The ecosystem's only design system supporting both Tailwind versions. Same tokens, same DX. |
29
30
  | **🎮** | **Built-in playground** | Interactive props editor + live code generation in docs. No Storybook setup needed. |
30
31
  | **🌗** | **Dark mode, zero config** | Light/dark themes built into tokens. System preference detection out of the box. |
@@ -37,11 +38,15 @@
37
38
 
38
39
  ## Get Started
39
40
 
41
+ **Option A — npm package**
42
+
40
43
  ```bash
41
- # npm package
42
44
  npm install @7onic-ui/react @7onic-ui/tokens
45
+ ```
43
46
 
44
- # or CLI (local copy)
47
+ **Option B CLI (local file copy)**
48
+
49
+ ```bash
45
50
  npx 7onic init
46
51
  npx 7onic add button card input
47
52
  ```
@@ -60,10 +65,10 @@ npx 7onic add button card input
60
65
  <summary><strong>Tailwind v3</strong></summary>
61
66
 
62
67
  ```css
68
+ @import '@7onic-ui/tokens/css/all.css';
63
69
  @tailwind base;
64
70
  @tailwind components;
65
71
  @tailwind utilities;
66
- @import '@7onic-ui/tokens/css/all.css';
67
72
  ```
68
73
 
69
74
  ```js
@@ -117,15 +122,16 @@ import { Chart, type ChartConfig } from '@7onic-ui/react/chart' // charts: sepa
117
122
 
118
123
  | Category | Components | Count |
119
124
  |----------|-----------|:-----:|
120
- | **Forms** | Button, IconButton, ButtonGroup, Input, Textarea, Select, Dropdown, Checkbox, Radio, Switch, Toggle, ToggleGroup, Segmented, Slider | 14 |
125
+ | **Forms** | Button, IconButton, ButtonGroup, Input, Textarea, Select, Dropdown, Checkbox, RadioGroup, Switch, Toggle, ToggleGroup, Segmented, Slider | 14 |
121
126
  | **Data Display** | Avatar, Badge, Card, Table | 4 |
122
127
  | **Charts** | BarChart, LineChart, AreaChart, PieChart, MetricCard | 5 |
123
128
  | **Layout** | Tabs, Accordion, Divider | 3 |
124
129
  | **Overlay** | Modal, Drawer, Tooltip, Popover | 4 |
125
130
  | **Feedback** | Alert, Toast, Progress, Spinner, Skeleton | 5 |
126
131
  | **Navigation** | Breadcrumb, NavigationMenu, Pagination | 3 |
132
+ | **AI** | TypingIndicator, QuickReply, ChatInput, ChatMessage | 4 |
127
133
 
128
- **38 components** — all with CVA variants, controlled + uncontrolled modes, `forwardRef`, namespace exports (`Card.Header`) + named exports (`CardHeader`).
134
+ **42 components** — all with CVA variants, controlled + uncontrolled modes, `forwardRef`, namespace exports (`Card.Header`) + named exports (`CardHeader`).
129
135
 
130
136
  ---
131
137
 
@@ -135,7 +141,7 @@ import { Chart, type ChartConfig } from '@7onic-ui/react/chart' // charts: sepa
135
141
  |-------|--------|-------------|
136
142
  | **Colors** | Semantic system | Brand, status, text, background, border |
137
143
  | **Typography** | 11 sizes (11–72px) | CJK-optimized: `md`(14px) for UI, `base`(16px) for body |
138
- | **Spacing** | 18 values (0–96px) | 2px steps (0–12px), 4px steps (12px+) |
144
+ | **Spacing** | 19 values (0–96px) | 2px steps (0–14px), 4px steps (16px+) |
139
145
  | **Radius** | 9 values | `none` through `full` |
140
146
  | **Shadows** | 6 primitives | `xs` through `xl` + `primary-glow` |
141
147
  | **Duration** | 8 values | `instant` through `spin` |
@@ -250,16 +256,16 @@ Works with Claude Code, Cursor, GitHub Copilot, ChatGPT, and any AI tool that re
250
256
  - [x] Token sync script with breaking change detection
251
257
  - [x] Tailwind v3/v4 dual preset + RGB channel opacity support
252
258
  - [x] Light/dark theme with OS auto-detection
253
- - [x] 38 components with namespace compound exports
259
+ - [x] 42 components with namespace compound exports
254
260
  - [x] Documentation site with interactive playgrounds
255
261
  - [x] Chart components included (Bar, Line, Area, Pie, MetricCard)
256
262
  - [x] Automated doc verification (8 checks, AST-powered, blocks publish on error)
257
263
  - [x] Automated component verification (7 checks — hardcoded colors, tokens, dark mode, dead code)
258
264
  - [x] Multilingual documentation — English, Japanese, Korean (powered by next-intl)
259
- - [x] npm package distribution — `@7onic-ui/react` + `@7onic-ui/tokens` v0.2.0
265
+ - [x] npm package distribution — `@7onic-ui/react` + `@7onic-ui/tokens` v0.2.3
260
266
  - [x] AI integration — `llms.txt` standard, setup guides for Claude Code / Cursor / Copilot / ChatGPT
261
- - [ ] Theme Customizer (live color preview)
262
267
  - [x] `npx 7onic add` CLI (shadcn-style) — source copy with dependency resolution
268
+ - [ ] Theme Customizer (live color preview)
263
269
  - [ ] Figma UI Kit
264
270
  - [ ] Dashboard / landing templates
265
271
 
@@ -274,5 +280,5 @@ MIT
274
280
  <p align="center">
275
281
  <strong>One JSON, every format — from Figma to production.</strong><br>
276
282
  Independently built.<br>
277
- <sub>Last updated: 2026-04-09</sub>
283
+ <sub>Last updated: 2026-04-11</sub>
278
284
  </p>
package/dist/chart.d.mts CHANGED
@@ -74,7 +74,7 @@ type ChartTooltipContentProps = React.ComponentProps<'div'> & {
74
74
  labelKey?: string;
75
75
  };
76
76
  declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: ChartTooltipContentProps): React.JSX.Element | null;
77
- declare const ChartLegend: typeof RechartsPrimitive.Legend;
77
+ declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
78
78
  type LegendPayloadItem = {
79
79
  value?: string;
80
80
  type?: string;
@@ -150,7 +150,7 @@ declare const Chart: typeof ChartContainer & {
150
150
  Pie: typeof ChartPie;
151
151
  Tooltip: typeof ChartTooltip;
152
152
  TooltipContent: typeof ChartTooltipContent;
153
- Legend: typeof RechartsPrimitive.Legend;
153
+ Legend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
154
154
  LegendContent: typeof ChartLegendContent;
155
155
  XAxis: typeof ChartXAxis;
156
156
  YAxis: typeof ChartYAxis;
package/dist/chart.d.ts CHANGED
@@ -74,7 +74,7 @@ type ChartTooltipContentProps = React.ComponentProps<'div'> & {
74
74
  labelKey?: string;
75
75
  };
76
76
  declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, }: ChartTooltipContentProps): React.JSX.Element | null;
77
- declare const ChartLegend: typeof RechartsPrimitive.Legend;
77
+ declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
78
78
  type LegendPayloadItem = {
79
79
  value?: string;
80
80
  type?: string;
@@ -150,7 +150,7 @@ declare const Chart: typeof ChartContainer & {
150
150
  Pie: typeof ChartPie;
151
151
  Tooltip: typeof ChartTooltip;
152
152
  TooltipContent: typeof ChartTooltipContent;
153
- Legend: typeof RechartsPrimitive.Legend;
153
+ Legend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
154
154
  LegendContent: typeof ChartLegendContent;
155
155
  XAxis: typeof ChartXAxis;
156
156
  YAxis: typeof ChartYAxis;
package/dist/index.d.mts CHANGED
@@ -1633,4 +1633,193 @@ interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, VariantPro
1633
1633
  }
1634
1634
  declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
1635
1635
 
1636
- export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, type AlertColor, AlertDescription, type AlertDescriptionProps, AlertModal, AlertModalAction, AlertModalBody, AlertModalCancel, AlertModalContent, type AlertModalContentProps, AlertModalDescription, AlertModalFooter, AlertModalHeader, AlertModalOverlay, AlertModalPortal, AlertModalTitle, AlertModalTrigger, AlertRoot, type AlertRootProps, type AlertSize, AlertTitle, type AlertTitleProps, type AlertVariant, Avatar, type AvatarColorVariant, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Badge, type BadgeColor, type BadgeProps, type BadgeRadius, type BadgeSize, type BadgeVariant, Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, BreadcrumbPage, type BreadcrumbProps, BreadcrumbSeparator, Button, type ButtonColor, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardImage, type CardImageProps, type CardProps, type CardRadius, CardTitle, type CardTitleProps, type CardVariant, Checkbox, type CheckboxColor, type CheckboxProps, Divider, type DividerProps, Drawer, DrawerBody, DrawerClose, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerRoot, type DrawerSide, type DrawerSize, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, type DropdownMenuRadius, DropdownMenuSeparator, DropdownMenuShortcut, type DropdownMenuSize, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Field, FieldCharCount, FieldError, FieldLabel, type FieldLabelProps, type FieldProps, IconButton, type IconButtonProps, Input, type InputProps, MetricCard, MetricCardDescription, type MetricCardDescriptionProps, MetricCardHeader, type MetricCardHeaderProps, type MetricCardProps, type MetricCardRadius, type MetricCardSize, MetricCardSymbol, type MetricCardSymbolProps, MetricCardTitle, type MetricCardTitleProps, MetricCardTrend, type MetricCardTrendDirection, type MetricCardTrendProps, MetricCardValue, type MetricCardValueProps, type MetricCardVariant, Modal, ModalBody, ModalClose, ModalContent, type ModalContentProps, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, NavigationMenu, NavigationMenuContent, type NavigationMenuContentProps, NavigationMenuGroup, type NavigationMenuGroupProps, NavigationMenuIndicator, type NavigationMenuIndicatorProps, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, type NavigationMenuLinkProps, NavigationMenuList, type NavigationMenuListProps, type NavigationMenuProps, type NavigationMenuRadius, NavigationMenuTrigger, type NavigationMenuTriggerProps, NavigationMenuViewport, type NavigationMenuViewportProps, type OrbitStyle, Pagination, type PaginationColor, PaginationContent, PaginationEllipsis, PaginationFirst, type PaginationFirstProps, PaginationItem, PaginationItems, PaginationLast, type PaginationLastProps, PaginationLink, type PaginationLinkProps, PaginationNext, type PaginationNextProps, PaginationPrevious, type PaginationPreviousProps, type PaginationProps, type PaginationRadius, type PaginationRange, type PaginationSize, type PaginationVariant, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, type PopoverContentProps, PopoverPortal, PopoverRoot, type PopoverRootProps, type PopoverSide, PopoverTrigger, Progress, type ProgressProps, type PromiseOptions, type RadioColor, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, Segmented, SegmentedItem, type SegmentedItemProps, type SegmentedProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectRadius, SelectSeparator, type SelectSize, SelectTrigger, SelectValue, Skeleton, type SkeletonProps, Slider, type SliderColor, type SliderProps, type SortDirection, type SortIconSet, Spinner, type SpinnerProps, Switch, type SwitchColor, type SwitchLabelPosition, type SwitchProps, Table, TableBody, TableCaption, TableCell, type TableCellProps, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableRowProps, type TableSize, type TableVariant, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastAction, type ToastData, type ToastOptions, type ToastPosition, type ToastSize, type ToastType, Toaster, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, Tooltip, TooltipArrow, TooltipContent, type TooltipContentProps, TooltipPortal, TooltipProvider, TooltipRoot, type TooltipRootProps, type TooltipSide, TooltipTrigger, type UsePaginationProps, accordionTriggerVariants, accordionVariants, alertModalContentVariants, alertVariants, avatarColors, avatarVariants, badgeVariants, breadcrumbSizeMap, buttonVariants, cardVariants, checkboxVariants, dividerVariants, drawerSizeHorizontal, drawerSizeVertical, getAvatarColor, getAvatarInitials, iconButtonVariants, inputVariants, linearTrackVariants, metricCardVariants, modalContentVariants, navigationMenuSizeMap, paginationItemVariants, paginationSizeMap, popoverContentVariants, radioGroupVariants, radioItemVariants, segmentedItemVariants, segmentedVariants, skeletonVariants, sliderVariants, spinnerVariants, switchVariants, tabsListVariants, tabsTriggerVariants, textareaVariants, toast, toastVariants, toggleGroupItemVariants, toggleGroupVariants, toggleVariants, tooltipContentVariants, useButtonGroup, useFieldContext, usePagination };
1636
+ declare const typingIndicatorVariants: (props?: ({
1637
+ size?: "default" | "sm" | "lg" | null | undefined;
1638
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
1639
+ interface TypingIndicatorProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof typingIndicatorVariants> {
1640
+ /** Animation style */
1641
+ variant?: 'dots' | 'cursor';
1642
+ /** Indicator color */
1643
+ color?: 'default' | 'primary' | 'muted';
1644
+ /** Animation speed */
1645
+ speed?: 'slow' | 'default' | 'fast';
1646
+ /** Accessible label (also shown as visual text when showLabel is true) */
1647
+ label?: string;
1648
+ /** Render label text alongside the indicator */
1649
+ showLabel?: boolean;
1650
+ }
1651
+ declare const TypingIndicator: React.ForwardRefExoticComponent<TypingIndicatorProps & React.RefAttributes<HTMLDivElement>>;
1652
+
1653
+ declare const quickReplyRootVariants: (props?: ({
1654
+ layout?: "scroll" | "wrap" | null | undefined;
1655
+ gap?: "default" | "sm" | "lg" | null | undefined;
1656
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
1657
+ declare const quickReplyItemVariants: (props?: ({
1658
+ size?: "default" | "sm" | "lg" | null | undefined;
1659
+ radius?: "lg" | "md" | "full" | null | undefined;
1660
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
1661
+ type QuickReplyLayout = 'scroll' | 'wrap';
1662
+ type QuickReplyVariant = 'outline' | 'filled' | 'ghost';
1663
+ type QuickReplyColor = 'default' | 'primary';
1664
+ type QuickReplySize = 'sm' | 'default' | 'lg';
1665
+ type QuickReplyRadius = 'md' | 'lg' | 'full';
1666
+ type QuickReplyGap = 'sm' | 'default' | 'lg';
1667
+ interface QuickReplyRootProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof quickReplyRootVariants> {
1668
+ /** Layout mode: horizontal scroll or wrap to multiple rows */
1669
+ layout?: QuickReplyLayout;
1670
+ /** Visual style applied to all child Items */
1671
+ variant?: QuickReplyVariant;
1672
+ /** Color theme applied to all child Items */
1673
+ color?: QuickReplyColor;
1674
+ /** Chip size applied to all child Items */
1675
+ size?: QuickReplySize;
1676
+ /** Border radius applied to all child Items */
1677
+ radius?: QuickReplyRadius;
1678
+ /** Gap between Items */
1679
+ gap?: QuickReplyGap;
1680
+ }
1681
+ interface QuickReplyItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
1682
+ /** Leading icon (SVG or ReactNode) */
1683
+ icon?: React.ReactNode;
1684
+ /** Render as child element (Slot pattern) */
1685
+ asChild?: boolean;
1686
+ }
1687
+ declare const QuickReplyRoot: React.ForwardRefExoticComponent<QuickReplyRootProps & React.RefAttributes<HTMLDivElement>>;
1688
+ declare const QuickReplyItem: React.ForwardRefExoticComponent<QuickReplyItemProps & React.RefAttributes<HTMLButtonElement>>;
1689
+ declare const QuickReply: React.ForwardRefExoticComponent<QuickReplyRootProps & React.RefAttributes<HTMLDivElement>> & {
1690
+ Item: React.ForwardRefExoticComponent<QuickReplyItemProps & React.RefAttributes<HTMLButtonElement>>;
1691
+ };
1692
+ declare namespace QuickReply {
1693
+ type RootProps = QuickReplyRootProps;
1694
+ type ItemProps = QuickReplyItemProps;
1695
+ }
1696
+
1697
+ declare const chatInputVariants: (props?: ({
1698
+ variant?: "outline" | "filled" | null | undefined;
1699
+ radius?: "sm" | "lg" | "md" | "xl" | "2xl" | "full" | null | undefined;
1700
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
1701
+ type ChatInputSize = 'sm' | 'default' | 'lg';
1702
+ type ChatInputVariant = 'outline' | 'filled';
1703
+ type ChatInputRadius = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
1704
+ type ChatInputColor = 'default' | 'primary';
1705
+ type ChatInputLayout = 'default' | 'inline';
1706
+ interface ChatInputRootProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSubmit'>, VariantProps<typeof chatInputVariants> {
1707
+ /** Visual style of the container */
1708
+ variant?: ChatInputVariant;
1709
+ /** Corner radius */
1710
+ radius?: ChatInputRadius;
1711
+ /** Size scale */
1712
+ size?: ChatInputSize;
1713
+ /** Submit button color — default (dark) or primary (brand) */
1714
+ color?: ChatInputColor;
1715
+ /** Layout direction — default (stacked) or inline (field + button side by side) */
1716
+ layout?: ChatInputLayout;
1717
+ /** Disable all interaction */
1718
+ disabled?: boolean;
1719
+ /** Called when the user submits (Enter key or Submit button) — receives current field value */
1720
+ onSubmit?: (value: string) => void;
1721
+ }
1722
+ interface ChatInputFieldProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'children'> {
1723
+ /** Maximum visible rows before the field scrolls */
1724
+ maxRows?: number;
1725
+ /** Show character counter — requires maxLength to be set */
1726
+ showCount?: boolean;
1727
+ }
1728
+ interface ChatInputSubmitProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
1729
+ /** Show loading/stop state — keeps button enabled so user can stop generation */
1730
+ loading?: boolean;
1731
+ /** Called when clicked during loading state (e.g., stop generation) */
1732
+ onStop?: () => void;
1733
+ /** Override the auto-calculated button radius */
1734
+ buttonRadius?: ChatInputRadius;
1735
+ }
1736
+ declare const ChatInputRoot: React.ForwardRefExoticComponent<ChatInputRootProps & React.RefAttributes<HTMLDivElement>>;
1737
+ declare const ChatInputField: React.ForwardRefExoticComponent<ChatInputFieldProps & React.RefAttributes<HTMLTextAreaElement>>;
1738
+ declare const ChatInputSubmit: React.ForwardRefExoticComponent<ChatInputSubmitProps & React.RefAttributes<HTMLButtonElement>>;
1739
+ declare const ChatInput: React.ForwardRefExoticComponent<ChatInputRootProps & React.RefAttributes<HTMLDivElement>> & {
1740
+ Field: React.ForwardRefExoticComponent<ChatInputFieldProps & React.RefAttributes<HTMLTextAreaElement>>;
1741
+ Submit: React.ForwardRefExoticComponent<ChatInputSubmitProps & React.RefAttributes<HTMLButtonElement>>;
1742
+ };
1743
+ declare namespace ChatInput {
1744
+ type RootProps = ChatInputRootProps;
1745
+ type FieldProps = ChatInputFieldProps;
1746
+ type SubmitProps = ChatInputSubmitProps;
1747
+ type Layout = ChatInputLayout;
1748
+ }
1749
+
1750
+ type ChatMessageRole = 'user' | 'assistant';
1751
+ type ChatMessageVariant = 'bubble' | 'flat';
1752
+ type ChatMessageColor = 'default' | 'muted' | 'primary' | 'dark';
1753
+ type ChatMessageSize = 'sm' | 'default' | 'lg';
1754
+ type ChatMessageRadius = 'md' | 'lg' | 'xl' | '2xl';
1755
+ type ChatMessageAvatarSize = 'sm' | 'md' | 'lg';
1756
+ /** Built-in status presets (pass as string to Footer.status for auto-rendering) */
1757
+ type ChatMessageStatus = 'sending' | 'sent' | 'read' | 'error';
1758
+ interface ChatMessageRootProps extends React.HTMLAttributes<HTMLDivElement> {
1759
+ /** Sender role — controls alignment (left=assistant, right=user) */
1760
+ role?: ChatMessageRole;
1761
+ /** Bubble visual style */
1762
+ variant?: ChatMessageVariant;
1763
+ /** Bubble background color */
1764
+ color?: ChatMessageColor;
1765
+ /** Size scale — affects text and padding */
1766
+ size?: ChatMessageSize;
1767
+ /** Bubble corner radius */
1768
+ radius?: ChatMessageRadius;
1769
+ /** Asymmetric tail corner (radius=0 on the avatar side) */
1770
+ tail?: boolean;
1771
+ /** Show typing indicator inside Content. Pass true for defaults, or TypingIndicatorProps for custom. */
1772
+ typing?: boolean | Omit<TypingIndicatorProps, 'className'>;
1773
+ /** Avatar size — overrides default gap between avatar and bubble */
1774
+ avatarSize?: ChatMessageAvatarSize;
1775
+ /** Action buttons revealed on hover */
1776
+ actions?: React.ReactNode;
1777
+ }
1778
+ interface ChatMessageAvatarProps {
1779
+ /** Avatar size: sm(24px), md(28px), lg(32px) */
1780
+ size?: ChatMessageAvatarSize;
1781
+ /** Image URL */
1782
+ src?: string;
1783
+ /** Alt text for avatar image */
1784
+ alt?: string;
1785
+ /** Initials to display when no image (1–2 characters) */
1786
+ initials?: string;
1787
+ /** Custom icon or ReactNode to render inside the avatar */
1788
+ icon?: React.ReactNode;
1789
+ /** Additional CSS classes */
1790
+ className?: string;
1791
+ }
1792
+ interface ChatMessageContentProps extends React.HTMLAttributes<HTMLDivElement> {
1793
+ }
1794
+ interface ChatMessageFooterProps extends React.HTMLAttributes<HTMLDivElement> {
1795
+ /** Pre-formatted timestamp string (e.g. "12:34 PM") */
1796
+ timestamp?: string;
1797
+ /** Status: built-in preset ('sending' | 'sent' | 'read' | 'error') or custom ReactNode */
1798
+ status?: React.ReactNode;
1799
+ /** Size override (defaults to context value from ChatMessage root) */
1800
+ size?: ChatMessageSize;
1801
+ }
1802
+ declare const ChatMessageRoot: React.ForwardRefExoticComponent<ChatMessageRootProps & React.RefAttributes<HTMLDivElement>>;
1803
+ declare const ChatMessageAvatar: React.ForwardRefExoticComponent<ChatMessageAvatarProps & React.RefAttributes<HTMLSpanElement>>;
1804
+ declare const ChatMessageContent: React.ForwardRefExoticComponent<ChatMessageContentProps & React.RefAttributes<HTMLDivElement>>;
1805
+ declare const ChatMessageFooter: React.ForwardRefExoticComponent<ChatMessageFooterProps & React.RefAttributes<HTMLDivElement>>;
1806
+ declare const ChatMessage: React.ForwardRefExoticComponent<ChatMessageRootProps & React.RefAttributes<HTMLDivElement>> & {
1807
+ Avatar: React.ForwardRefExoticComponent<ChatMessageAvatarProps & React.RefAttributes<HTMLSpanElement>>;
1808
+ Content: React.ForwardRefExoticComponent<ChatMessageContentProps & React.RefAttributes<HTMLDivElement>>;
1809
+ Footer: React.ForwardRefExoticComponent<ChatMessageFooterProps & React.RefAttributes<HTMLDivElement>>;
1810
+ };
1811
+ declare namespace ChatMessage {
1812
+ type RootProps = ChatMessageRootProps;
1813
+ type AvatarProps = ChatMessageAvatarProps;
1814
+ type ContentProps = ChatMessageContentProps;
1815
+ type FooterProps = ChatMessageFooterProps;
1816
+ type Role = ChatMessageRole;
1817
+ type Variant = ChatMessageVariant;
1818
+ type Color = ChatMessageColor;
1819
+ type Size = ChatMessageSize;
1820
+ type Radius = ChatMessageRadius;
1821
+ type Status = ChatMessageStatus;
1822
+ type AvatarSize = ChatMessageAvatarSize;
1823
+ }
1824
+
1825
+ export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, type AlertColor, AlertDescription, type AlertDescriptionProps, AlertModal, AlertModalAction, AlertModalBody, AlertModalCancel, AlertModalContent, type AlertModalContentProps, AlertModalDescription, AlertModalFooter, AlertModalHeader, AlertModalOverlay, AlertModalPortal, AlertModalTitle, AlertModalTrigger, AlertRoot, type AlertRootProps, type AlertSize, AlertTitle, type AlertTitleProps, type AlertVariant, Avatar, type AvatarColorVariant, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Badge, type BadgeColor, type BadgeProps, type BadgeRadius, type BadgeSize, type BadgeVariant, Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, BreadcrumbPage, type BreadcrumbProps, BreadcrumbSeparator, Button, type ButtonColor, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardImage, type CardImageProps, type CardProps, type CardRadius, CardTitle, type CardTitleProps, type CardVariant, ChatInput, type ChatInputColor, ChatInputField, type ChatInputFieldProps, type ChatInputLayout, type ChatInputRadius, ChatInputRoot, type ChatInputRootProps, type ChatInputSize, ChatInputSubmit, type ChatInputSubmitProps, type ChatInputVariant, ChatMessage, ChatMessageAvatar, type ChatMessageAvatarProps, type ChatMessageAvatarSize, type ChatMessageColor, ChatMessageContent, type ChatMessageContentProps, ChatMessageFooter, type ChatMessageFooterProps, type ChatMessageRadius, type ChatMessageRole, ChatMessageRoot, type ChatMessageRootProps, type ChatMessageSize, type ChatMessageStatus, type ChatMessageVariant, Checkbox, type CheckboxColor, type CheckboxProps, Divider, type DividerProps, Drawer, DrawerBody, DrawerClose, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerRoot, type DrawerSide, type DrawerSize, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, type DropdownMenuRadius, DropdownMenuSeparator, DropdownMenuShortcut, type DropdownMenuSize, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Field, FieldCharCount, FieldError, FieldLabel, type FieldLabelProps, type FieldProps, IconButton, type IconButtonProps, Input, type InputProps, MetricCard, MetricCardDescription, type MetricCardDescriptionProps, MetricCardHeader, type MetricCardHeaderProps, type MetricCardProps, type MetricCardRadius, type MetricCardSize, MetricCardSymbol, type MetricCardSymbolProps, MetricCardTitle, type MetricCardTitleProps, MetricCardTrend, type MetricCardTrendDirection, type MetricCardTrendProps, MetricCardValue, type MetricCardValueProps, type MetricCardVariant, Modal, ModalBody, ModalClose, ModalContent, type ModalContentProps, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, NavigationMenu, NavigationMenuContent, type NavigationMenuContentProps, NavigationMenuGroup, type NavigationMenuGroupProps, NavigationMenuIndicator, type NavigationMenuIndicatorProps, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, type NavigationMenuLinkProps, NavigationMenuList, type NavigationMenuListProps, type NavigationMenuProps, type NavigationMenuRadius, NavigationMenuTrigger, type NavigationMenuTriggerProps, NavigationMenuViewport, type NavigationMenuViewportProps, type OrbitStyle, Pagination, type PaginationColor, PaginationContent, PaginationEllipsis, PaginationFirst, type PaginationFirstProps, PaginationItem, PaginationItems, PaginationLast, type PaginationLastProps, PaginationLink, type PaginationLinkProps, PaginationNext, type PaginationNextProps, PaginationPrevious, type PaginationPreviousProps, type PaginationProps, type PaginationRadius, type PaginationRange, type PaginationSize, type PaginationVariant, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, type PopoverContentProps, PopoverPortal, PopoverRoot, type PopoverRootProps, type PopoverSide, PopoverTrigger, Progress, type ProgressProps, type PromiseOptions, QuickReply, type QuickReplyColor, type QuickReplyGap, QuickReplyItem, type QuickReplyItemProps, type QuickReplyLayout, type QuickReplyRadius, QuickReplyRoot, type QuickReplyRootProps, type QuickReplySize, type QuickReplyVariant, type RadioColor, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, Segmented, SegmentedItem, type SegmentedItemProps, type SegmentedProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectRadius, SelectSeparator, type SelectSize, SelectTrigger, SelectValue, Skeleton, type SkeletonProps, Slider, type SliderColor, type SliderProps, type SortDirection, type SortIconSet, Spinner, type SpinnerProps, Switch, type SwitchColor, type SwitchLabelPosition, type SwitchProps, Table, TableBody, TableCaption, TableCell, type TableCellProps, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableRowProps, type TableSize, type TableVariant, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastAction, type ToastData, type ToastOptions, type ToastPosition, type ToastSize, type ToastType, Toaster, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, Tooltip, TooltipArrow, TooltipContent, type TooltipContentProps, TooltipPortal, TooltipProvider, TooltipRoot, type TooltipRootProps, type TooltipSide, TooltipTrigger, TypingIndicator, type TypingIndicatorProps, type UsePaginationProps, accordionTriggerVariants, accordionVariants, alertModalContentVariants, alertVariants, avatarColors, avatarVariants, badgeVariants, breadcrumbSizeMap, buttonVariants, cardVariants, chatInputVariants, checkboxVariants, dividerVariants, drawerSizeHorizontal, drawerSizeVertical, getAvatarColor, getAvatarInitials, iconButtonVariants, inputVariants, linearTrackVariants, metricCardVariants, modalContentVariants, navigationMenuSizeMap, paginationItemVariants, paginationSizeMap, popoverContentVariants, quickReplyItemVariants, quickReplyRootVariants, radioGroupVariants, radioItemVariants, segmentedItemVariants, segmentedVariants, skeletonVariants, sliderVariants, spinnerVariants, switchVariants, tabsListVariants, tabsTriggerVariants, textareaVariants, toast, toastVariants, toggleGroupItemVariants, toggleGroupVariants, toggleVariants, tooltipContentVariants, typingIndicatorVariants, useButtonGroup, useFieldContext, usePagination };
package/dist/index.d.ts CHANGED
@@ -1633,4 +1633,193 @@ interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, VariantPro
1633
1633
  }
1634
1634
  declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
1635
1635
 
1636
- export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, type AlertColor, AlertDescription, type AlertDescriptionProps, AlertModal, AlertModalAction, AlertModalBody, AlertModalCancel, AlertModalContent, type AlertModalContentProps, AlertModalDescription, AlertModalFooter, AlertModalHeader, AlertModalOverlay, AlertModalPortal, AlertModalTitle, AlertModalTrigger, AlertRoot, type AlertRootProps, type AlertSize, AlertTitle, type AlertTitleProps, type AlertVariant, Avatar, type AvatarColorVariant, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Badge, type BadgeColor, type BadgeProps, type BadgeRadius, type BadgeSize, type BadgeVariant, Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, BreadcrumbPage, type BreadcrumbProps, BreadcrumbSeparator, Button, type ButtonColor, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardImage, type CardImageProps, type CardProps, type CardRadius, CardTitle, type CardTitleProps, type CardVariant, Checkbox, type CheckboxColor, type CheckboxProps, Divider, type DividerProps, Drawer, DrawerBody, DrawerClose, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerRoot, type DrawerSide, type DrawerSize, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, type DropdownMenuRadius, DropdownMenuSeparator, DropdownMenuShortcut, type DropdownMenuSize, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Field, FieldCharCount, FieldError, FieldLabel, type FieldLabelProps, type FieldProps, IconButton, type IconButtonProps, Input, type InputProps, MetricCard, MetricCardDescription, type MetricCardDescriptionProps, MetricCardHeader, type MetricCardHeaderProps, type MetricCardProps, type MetricCardRadius, type MetricCardSize, MetricCardSymbol, type MetricCardSymbolProps, MetricCardTitle, type MetricCardTitleProps, MetricCardTrend, type MetricCardTrendDirection, type MetricCardTrendProps, MetricCardValue, type MetricCardValueProps, type MetricCardVariant, Modal, ModalBody, ModalClose, ModalContent, type ModalContentProps, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, NavigationMenu, NavigationMenuContent, type NavigationMenuContentProps, NavigationMenuGroup, type NavigationMenuGroupProps, NavigationMenuIndicator, type NavigationMenuIndicatorProps, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, type NavigationMenuLinkProps, NavigationMenuList, type NavigationMenuListProps, type NavigationMenuProps, type NavigationMenuRadius, NavigationMenuTrigger, type NavigationMenuTriggerProps, NavigationMenuViewport, type NavigationMenuViewportProps, type OrbitStyle, Pagination, type PaginationColor, PaginationContent, PaginationEllipsis, PaginationFirst, type PaginationFirstProps, PaginationItem, PaginationItems, PaginationLast, type PaginationLastProps, PaginationLink, type PaginationLinkProps, PaginationNext, type PaginationNextProps, PaginationPrevious, type PaginationPreviousProps, type PaginationProps, type PaginationRadius, type PaginationRange, type PaginationSize, type PaginationVariant, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, type PopoverContentProps, PopoverPortal, PopoverRoot, type PopoverRootProps, type PopoverSide, PopoverTrigger, Progress, type ProgressProps, type PromiseOptions, type RadioColor, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, Segmented, SegmentedItem, type SegmentedItemProps, type SegmentedProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectRadius, SelectSeparator, type SelectSize, SelectTrigger, SelectValue, Skeleton, type SkeletonProps, Slider, type SliderColor, type SliderProps, type SortDirection, type SortIconSet, Spinner, type SpinnerProps, Switch, type SwitchColor, type SwitchLabelPosition, type SwitchProps, Table, TableBody, TableCaption, TableCell, type TableCellProps, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableRowProps, type TableSize, type TableVariant, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastAction, type ToastData, type ToastOptions, type ToastPosition, type ToastSize, type ToastType, Toaster, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, Tooltip, TooltipArrow, TooltipContent, type TooltipContentProps, TooltipPortal, TooltipProvider, TooltipRoot, type TooltipRootProps, type TooltipSide, TooltipTrigger, type UsePaginationProps, accordionTriggerVariants, accordionVariants, alertModalContentVariants, alertVariants, avatarColors, avatarVariants, badgeVariants, breadcrumbSizeMap, buttonVariants, cardVariants, checkboxVariants, dividerVariants, drawerSizeHorizontal, drawerSizeVertical, getAvatarColor, getAvatarInitials, iconButtonVariants, inputVariants, linearTrackVariants, metricCardVariants, modalContentVariants, navigationMenuSizeMap, paginationItemVariants, paginationSizeMap, popoverContentVariants, radioGroupVariants, radioItemVariants, segmentedItemVariants, segmentedVariants, skeletonVariants, sliderVariants, spinnerVariants, switchVariants, tabsListVariants, tabsTriggerVariants, textareaVariants, toast, toastVariants, toggleGroupItemVariants, toggleGroupVariants, toggleVariants, tooltipContentVariants, useButtonGroup, useFieldContext, usePagination };
1636
+ declare const typingIndicatorVariants: (props?: ({
1637
+ size?: "default" | "sm" | "lg" | null | undefined;
1638
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
1639
+ interface TypingIndicatorProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof typingIndicatorVariants> {
1640
+ /** Animation style */
1641
+ variant?: 'dots' | 'cursor';
1642
+ /** Indicator color */
1643
+ color?: 'default' | 'primary' | 'muted';
1644
+ /** Animation speed */
1645
+ speed?: 'slow' | 'default' | 'fast';
1646
+ /** Accessible label (also shown as visual text when showLabel is true) */
1647
+ label?: string;
1648
+ /** Render label text alongside the indicator */
1649
+ showLabel?: boolean;
1650
+ }
1651
+ declare const TypingIndicator: React.ForwardRefExoticComponent<TypingIndicatorProps & React.RefAttributes<HTMLDivElement>>;
1652
+
1653
+ declare const quickReplyRootVariants: (props?: ({
1654
+ layout?: "scroll" | "wrap" | null | undefined;
1655
+ gap?: "default" | "sm" | "lg" | null | undefined;
1656
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
1657
+ declare const quickReplyItemVariants: (props?: ({
1658
+ size?: "default" | "sm" | "lg" | null | undefined;
1659
+ radius?: "lg" | "md" | "full" | null | undefined;
1660
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
1661
+ type QuickReplyLayout = 'scroll' | 'wrap';
1662
+ type QuickReplyVariant = 'outline' | 'filled' | 'ghost';
1663
+ type QuickReplyColor = 'default' | 'primary';
1664
+ type QuickReplySize = 'sm' | 'default' | 'lg';
1665
+ type QuickReplyRadius = 'md' | 'lg' | 'full';
1666
+ type QuickReplyGap = 'sm' | 'default' | 'lg';
1667
+ interface QuickReplyRootProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof quickReplyRootVariants> {
1668
+ /** Layout mode: horizontal scroll or wrap to multiple rows */
1669
+ layout?: QuickReplyLayout;
1670
+ /** Visual style applied to all child Items */
1671
+ variant?: QuickReplyVariant;
1672
+ /** Color theme applied to all child Items */
1673
+ color?: QuickReplyColor;
1674
+ /** Chip size applied to all child Items */
1675
+ size?: QuickReplySize;
1676
+ /** Border radius applied to all child Items */
1677
+ radius?: QuickReplyRadius;
1678
+ /** Gap between Items */
1679
+ gap?: QuickReplyGap;
1680
+ }
1681
+ interface QuickReplyItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
1682
+ /** Leading icon (SVG or ReactNode) */
1683
+ icon?: React.ReactNode;
1684
+ /** Render as child element (Slot pattern) */
1685
+ asChild?: boolean;
1686
+ }
1687
+ declare const QuickReplyRoot: React.ForwardRefExoticComponent<QuickReplyRootProps & React.RefAttributes<HTMLDivElement>>;
1688
+ declare const QuickReplyItem: React.ForwardRefExoticComponent<QuickReplyItemProps & React.RefAttributes<HTMLButtonElement>>;
1689
+ declare const QuickReply: React.ForwardRefExoticComponent<QuickReplyRootProps & React.RefAttributes<HTMLDivElement>> & {
1690
+ Item: React.ForwardRefExoticComponent<QuickReplyItemProps & React.RefAttributes<HTMLButtonElement>>;
1691
+ };
1692
+ declare namespace QuickReply {
1693
+ type RootProps = QuickReplyRootProps;
1694
+ type ItemProps = QuickReplyItemProps;
1695
+ }
1696
+
1697
+ declare const chatInputVariants: (props?: ({
1698
+ variant?: "outline" | "filled" | null | undefined;
1699
+ radius?: "sm" | "lg" | "md" | "xl" | "2xl" | "full" | null | undefined;
1700
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
1701
+ type ChatInputSize = 'sm' | 'default' | 'lg';
1702
+ type ChatInputVariant = 'outline' | 'filled';
1703
+ type ChatInputRadius = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
1704
+ type ChatInputColor = 'default' | 'primary';
1705
+ type ChatInputLayout = 'default' | 'inline';
1706
+ interface ChatInputRootProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSubmit'>, VariantProps<typeof chatInputVariants> {
1707
+ /** Visual style of the container */
1708
+ variant?: ChatInputVariant;
1709
+ /** Corner radius */
1710
+ radius?: ChatInputRadius;
1711
+ /** Size scale */
1712
+ size?: ChatInputSize;
1713
+ /** Submit button color — default (dark) or primary (brand) */
1714
+ color?: ChatInputColor;
1715
+ /** Layout direction — default (stacked) or inline (field + button side by side) */
1716
+ layout?: ChatInputLayout;
1717
+ /** Disable all interaction */
1718
+ disabled?: boolean;
1719
+ /** Called when the user submits (Enter key or Submit button) — receives current field value */
1720
+ onSubmit?: (value: string) => void;
1721
+ }
1722
+ interface ChatInputFieldProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'children'> {
1723
+ /** Maximum visible rows before the field scrolls */
1724
+ maxRows?: number;
1725
+ /** Show character counter — requires maxLength to be set */
1726
+ showCount?: boolean;
1727
+ }
1728
+ interface ChatInputSubmitProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
1729
+ /** Show loading/stop state — keeps button enabled so user can stop generation */
1730
+ loading?: boolean;
1731
+ /** Called when clicked during loading state (e.g., stop generation) */
1732
+ onStop?: () => void;
1733
+ /** Override the auto-calculated button radius */
1734
+ buttonRadius?: ChatInputRadius;
1735
+ }
1736
+ declare const ChatInputRoot: React.ForwardRefExoticComponent<ChatInputRootProps & React.RefAttributes<HTMLDivElement>>;
1737
+ declare const ChatInputField: React.ForwardRefExoticComponent<ChatInputFieldProps & React.RefAttributes<HTMLTextAreaElement>>;
1738
+ declare const ChatInputSubmit: React.ForwardRefExoticComponent<ChatInputSubmitProps & React.RefAttributes<HTMLButtonElement>>;
1739
+ declare const ChatInput: React.ForwardRefExoticComponent<ChatInputRootProps & React.RefAttributes<HTMLDivElement>> & {
1740
+ Field: React.ForwardRefExoticComponent<ChatInputFieldProps & React.RefAttributes<HTMLTextAreaElement>>;
1741
+ Submit: React.ForwardRefExoticComponent<ChatInputSubmitProps & React.RefAttributes<HTMLButtonElement>>;
1742
+ };
1743
+ declare namespace ChatInput {
1744
+ type RootProps = ChatInputRootProps;
1745
+ type FieldProps = ChatInputFieldProps;
1746
+ type SubmitProps = ChatInputSubmitProps;
1747
+ type Layout = ChatInputLayout;
1748
+ }
1749
+
1750
+ type ChatMessageRole = 'user' | 'assistant';
1751
+ type ChatMessageVariant = 'bubble' | 'flat';
1752
+ type ChatMessageColor = 'default' | 'muted' | 'primary' | 'dark';
1753
+ type ChatMessageSize = 'sm' | 'default' | 'lg';
1754
+ type ChatMessageRadius = 'md' | 'lg' | 'xl' | '2xl';
1755
+ type ChatMessageAvatarSize = 'sm' | 'md' | 'lg';
1756
+ /** Built-in status presets (pass as string to Footer.status for auto-rendering) */
1757
+ type ChatMessageStatus = 'sending' | 'sent' | 'read' | 'error';
1758
+ interface ChatMessageRootProps extends React.HTMLAttributes<HTMLDivElement> {
1759
+ /** Sender role — controls alignment (left=assistant, right=user) */
1760
+ role?: ChatMessageRole;
1761
+ /** Bubble visual style */
1762
+ variant?: ChatMessageVariant;
1763
+ /** Bubble background color */
1764
+ color?: ChatMessageColor;
1765
+ /** Size scale — affects text and padding */
1766
+ size?: ChatMessageSize;
1767
+ /** Bubble corner radius */
1768
+ radius?: ChatMessageRadius;
1769
+ /** Asymmetric tail corner (radius=0 on the avatar side) */
1770
+ tail?: boolean;
1771
+ /** Show typing indicator inside Content. Pass true for defaults, or TypingIndicatorProps for custom. */
1772
+ typing?: boolean | Omit<TypingIndicatorProps, 'className'>;
1773
+ /** Avatar size — overrides default gap between avatar and bubble */
1774
+ avatarSize?: ChatMessageAvatarSize;
1775
+ /** Action buttons revealed on hover */
1776
+ actions?: React.ReactNode;
1777
+ }
1778
+ interface ChatMessageAvatarProps {
1779
+ /** Avatar size: sm(24px), md(28px), lg(32px) */
1780
+ size?: ChatMessageAvatarSize;
1781
+ /** Image URL */
1782
+ src?: string;
1783
+ /** Alt text for avatar image */
1784
+ alt?: string;
1785
+ /** Initials to display when no image (1–2 characters) */
1786
+ initials?: string;
1787
+ /** Custom icon or ReactNode to render inside the avatar */
1788
+ icon?: React.ReactNode;
1789
+ /** Additional CSS classes */
1790
+ className?: string;
1791
+ }
1792
+ interface ChatMessageContentProps extends React.HTMLAttributes<HTMLDivElement> {
1793
+ }
1794
+ interface ChatMessageFooterProps extends React.HTMLAttributes<HTMLDivElement> {
1795
+ /** Pre-formatted timestamp string (e.g. "12:34 PM") */
1796
+ timestamp?: string;
1797
+ /** Status: built-in preset ('sending' | 'sent' | 'read' | 'error') or custom ReactNode */
1798
+ status?: React.ReactNode;
1799
+ /** Size override (defaults to context value from ChatMessage root) */
1800
+ size?: ChatMessageSize;
1801
+ }
1802
+ declare const ChatMessageRoot: React.ForwardRefExoticComponent<ChatMessageRootProps & React.RefAttributes<HTMLDivElement>>;
1803
+ declare const ChatMessageAvatar: React.ForwardRefExoticComponent<ChatMessageAvatarProps & React.RefAttributes<HTMLSpanElement>>;
1804
+ declare const ChatMessageContent: React.ForwardRefExoticComponent<ChatMessageContentProps & React.RefAttributes<HTMLDivElement>>;
1805
+ declare const ChatMessageFooter: React.ForwardRefExoticComponent<ChatMessageFooterProps & React.RefAttributes<HTMLDivElement>>;
1806
+ declare const ChatMessage: React.ForwardRefExoticComponent<ChatMessageRootProps & React.RefAttributes<HTMLDivElement>> & {
1807
+ Avatar: React.ForwardRefExoticComponent<ChatMessageAvatarProps & React.RefAttributes<HTMLSpanElement>>;
1808
+ Content: React.ForwardRefExoticComponent<ChatMessageContentProps & React.RefAttributes<HTMLDivElement>>;
1809
+ Footer: React.ForwardRefExoticComponent<ChatMessageFooterProps & React.RefAttributes<HTMLDivElement>>;
1810
+ };
1811
+ declare namespace ChatMessage {
1812
+ type RootProps = ChatMessageRootProps;
1813
+ type AvatarProps = ChatMessageAvatarProps;
1814
+ type ContentProps = ChatMessageContentProps;
1815
+ type FooterProps = ChatMessageFooterProps;
1816
+ type Role = ChatMessageRole;
1817
+ type Variant = ChatMessageVariant;
1818
+ type Color = ChatMessageColor;
1819
+ type Size = ChatMessageSize;
1820
+ type Radius = ChatMessageRadius;
1821
+ type Status = ChatMessageStatus;
1822
+ type AvatarSize = ChatMessageAvatarSize;
1823
+ }
1824
+
1825
+ export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Alert, type AlertColor, AlertDescription, type AlertDescriptionProps, AlertModal, AlertModalAction, AlertModalBody, AlertModalCancel, AlertModalContent, type AlertModalContentProps, AlertModalDescription, AlertModalFooter, AlertModalHeader, AlertModalOverlay, AlertModalPortal, AlertModalTitle, AlertModalTrigger, AlertRoot, type AlertRootProps, type AlertSize, AlertTitle, type AlertTitleProps, type AlertVariant, Avatar, type AvatarColorVariant, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Badge, type BadgeColor, type BadgeProps, type BadgeRadius, type BadgeSize, type BadgeVariant, Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, BreadcrumbPage, type BreadcrumbProps, BreadcrumbSeparator, Button, type ButtonColor, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardImage, type CardImageProps, type CardProps, type CardRadius, CardTitle, type CardTitleProps, type CardVariant, ChatInput, type ChatInputColor, ChatInputField, type ChatInputFieldProps, type ChatInputLayout, type ChatInputRadius, ChatInputRoot, type ChatInputRootProps, type ChatInputSize, ChatInputSubmit, type ChatInputSubmitProps, type ChatInputVariant, ChatMessage, ChatMessageAvatar, type ChatMessageAvatarProps, type ChatMessageAvatarSize, type ChatMessageColor, ChatMessageContent, type ChatMessageContentProps, ChatMessageFooter, type ChatMessageFooterProps, type ChatMessageRadius, type ChatMessageRole, ChatMessageRoot, type ChatMessageRootProps, type ChatMessageSize, type ChatMessageStatus, type ChatMessageVariant, Checkbox, type CheckboxColor, type CheckboxProps, Divider, type DividerProps, Drawer, DrawerBody, DrawerClose, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerRoot, type DrawerSide, type DrawerSize, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, type DropdownMenuRadius, DropdownMenuSeparator, DropdownMenuShortcut, type DropdownMenuSize, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Field, FieldCharCount, FieldError, FieldLabel, type FieldLabelProps, type FieldProps, IconButton, type IconButtonProps, Input, type InputProps, MetricCard, MetricCardDescription, type MetricCardDescriptionProps, MetricCardHeader, type MetricCardHeaderProps, type MetricCardProps, type MetricCardRadius, type MetricCardSize, MetricCardSymbol, type MetricCardSymbolProps, MetricCardTitle, type MetricCardTitleProps, MetricCardTrend, type MetricCardTrendDirection, type MetricCardTrendProps, MetricCardValue, type MetricCardValueProps, type MetricCardVariant, Modal, ModalBody, ModalClose, ModalContent, type ModalContentProps, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, NavigationMenu, NavigationMenuContent, type NavigationMenuContentProps, NavigationMenuGroup, type NavigationMenuGroupProps, NavigationMenuIndicator, type NavigationMenuIndicatorProps, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, type NavigationMenuLinkProps, NavigationMenuList, type NavigationMenuListProps, type NavigationMenuProps, type NavigationMenuRadius, NavigationMenuTrigger, type NavigationMenuTriggerProps, NavigationMenuViewport, type NavigationMenuViewportProps, type OrbitStyle, Pagination, type PaginationColor, PaginationContent, PaginationEllipsis, PaginationFirst, type PaginationFirstProps, PaginationItem, PaginationItems, PaginationLast, type PaginationLastProps, PaginationLink, type PaginationLinkProps, PaginationNext, type PaginationNextProps, PaginationPrevious, type PaginationPreviousProps, type PaginationProps, type PaginationRadius, type PaginationRange, type PaginationSize, type PaginationVariant, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, type PopoverContentProps, PopoverPortal, PopoverRoot, type PopoverRootProps, type PopoverSide, PopoverTrigger, Progress, type ProgressProps, type PromiseOptions, QuickReply, type QuickReplyColor, type QuickReplyGap, QuickReplyItem, type QuickReplyItemProps, type QuickReplyLayout, type QuickReplyRadius, QuickReplyRoot, type QuickReplyRootProps, type QuickReplySize, type QuickReplyVariant, type RadioColor, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, Segmented, SegmentedItem, type SegmentedItemProps, type SegmentedProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectRadius, SelectSeparator, type SelectSize, SelectTrigger, SelectValue, Skeleton, type SkeletonProps, Slider, type SliderColor, type SliderProps, type SortDirection, type SortIconSet, Spinner, type SpinnerProps, Switch, type SwitchColor, type SwitchLabelPosition, type SwitchProps, Table, TableBody, TableCaption, TableCell, type TableCellProps, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableRowProps, type TableSize, type TableVariant, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, TabsTrigger, type TabsTriggerProps, Textarea, type TextareaProps, type ToastAction, type ToastData, type ToastOptions, type ToastPosition, type ToastSize, type ToastType, Toaster, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleProps, Tooltip, TooltipArrow, TooltipContent, type TooltipContentProps, TooltipPortal, TooltipProvider, TooltipRoot, type TooltipRootProps, type TooltipSide, TooltipTrigger, TypingIndicator, type TypingIndicatorProps, type UsePaginationProps, accordionTriggerVariants, accordionVariants, alertModalContentVariants, alertVariants, avatarColors, avatarVariants, badgeVariants, breadcrumbSizeMap, buttonVariants, cardVariants, chatInputVariants, checkboxVariants, dividerVariants, drawerSizeHorizontal, drawerSizeVertical, getAvatarColor, getAvatarInitials, iconButtonVariants, inputVariants, linearTrackVariants, metricCardVariants, modalContentVariants, navigationMenuSizeMap, paginationItemVariants, paginationSizeMap, popoverContentVariants, quickReplyItemVariants, quickReplyRootVariants, radioGroupVariants, radioItemVariants, segmentedItemVariants, segmentedVariants, skeletonVariants, sliderVariants, spinnerVariants, switchVariants, tabsListVariants, tabsTriggerVariants, textareaVariants, toast, toastVariants, toggleGroupItemVariants, toggleGroupVariants, toggleVariants, tooltipContentVariants, typingIndicatorVariants, useButtonGroup, useFieldContext, usePagination };