harebear-ui 0.2.3 → 0.4.0
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/dist/components/admin/app-shell.d.ts +4 -1
- package/dist/components/admin/app-shell.js +49 -46
- package/dist/components/admin/confirm-dialog.d.ts +17 -0
- package/dist/components/admin/confirm-dialog.js +20 -0
- package/dist/components/admin/copy-field.d.ts +17 -0
- package/dist/components/admin/copy-field.js +37 -0
- package/dist/components/admin/search-input.js +1 -1
- package/dist/components/admin/status.d.ts +12 -6
- package/dist/components/admin/status.js +8 -5
- package/dist/components/admin/user-chip.d.ts +1 -1
- package/dist/components/admin/user-chip.js +7 -4
- package/dist/components/admin/user-menu.d.ts +22 -0
- package/dist/components/admin/user-menu.js +82 -0
- package/dist/components/ai/approval.d.ts +30 -0
- package/dist/components/ai/approval.js +81 -0
- package/dist/components/ai/chat-shell.d.ts +53 -0
- package/dist/components/ai/chat-shell.js +201 -0
- package/dist/components/ai/chat.d.ts +11 -3
- package/dist/components/ai/chat.js +21 -15
- package/dist/components/ai/code-block.js +1 -1
- package/dist/components/ai/conversation-list.d.ts +36 -3
- package/dist/components/ai/conversation-list.js +122 -13
- package/dist/components/ai/prompt-input.d.ts +28 -4
- package/dist/components/ai/prompt-input.js +52 -4
- package/dist/components/ai/tool-steps.d.ts +41 -0
- package/dist/components/ai/tool-steps.js +124 -0
- package/dist/components/ui/alert.d.ts +1 -1
- package/dist/components/ui/alert.js +5 -2
- package/dist/components/ui/badge.d.ts +2 -1
- package/dist/components/ui/badge.js +27 -14
- package/dist/components/ui/item.js +2 -2
- package/dist/components/ui/sidebar.d.ts +3 -1
- package/dist/components/ui/sidebar.js +7 -3
- package/dist/hooks/use-media-query.d.ts +2 -0
- package/dist/hooks/use-media-query.js +12 -0
- package/dist/index.d.ts +13 -6
- package/dist/index.js +11 -4
- package/dist/styles.css +24 -0
- package/docs/COMPONENTS.md +154 -72
- package/llms.txt +3 -3
- package/package.json +1 -1
- package/skills/harebear-ui/SKILL.md +4 -1
package/docs/COMPONENTS.md
CHANGED
|
@@ -38,70 +38,70 @@ Full working screens that combine these live in the repo under `playground/scree
|
|
|
38
38
|
|
|
39
39
|
Every component in the shadcn registry is included. (shadcn's `form` item is an empty placeholder in the `radix-nova` style; use `Field`.) These are the shadcn/ui `radix-nova` components, restyled to the harebear tokens. API docs: https://ui.shadcn.com/docs/components. harebear-specific changes are noted.
|
|
40
40
|
|
|
41
|
-
| Family | Exports | harebear notes
|
|
42
|
-
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
43
|
-
| Accordion | `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent` |
|
|
44
|
-
| Alert | `Alert`, `AlertTitle`, `AlertDescription`, `AlertAction` |
|
|
45
|
-
| Alert dialog | `AlertDialog`, `AlertDialogTrigger`, `AlertDialogContent`, `AlertDialogHeader`, `AlertDialogFooter`, `AlertDialogTitle`, `AlertDialogDescription`, `AlertDialogAction`, `AlertDialogCancel`, `AlertDialogMedia`, `AlertDialogOverlay`, `AlertDialogPortal` | Use for destructive confirmations.
|
|
46
|
-
| Aspect ratio | `AspectRatio` |
|
|
47
|
-
| Attachment | `Attachment`, `AttachmentGroup`, `AttachmentMedia`, `AttachmentContent`, `AttachmentTitle`, `AttachmentDescription`, `AttachmentActions`, `AttachmentAction`, `AttachmentTrigger` | File/image chips on messages and composers. `size`: `default`, `sm`, `xs`; `orientation`: `horizontal`, `vertical`.
|
|
48
|
-
| Avatar | `Avatar`, `AvatarImage`, `AvatarFallback`, `AvatarGroup`, `AvatarGroupCount`, `AvatarBadge` | `size`: `sm` 28px, `default` 36px, `lg` 56px. Fallback is tinted initials.
|
|
49
|
-
| Badge | `Badge`, `badgeVariants` | 24px pill. `variant`: `default` (primary), `secondary` (neutral, the common one), `soft` (tinted primary), `outline`, `success`, `warning`, `destructive`, `ghost`, `link`.
|
|
50
|
-
| Bubble | `Bubble`, `BubbleGroup`, `BubbleContent`, `BubbleReactions` | Chat bubble. `variant`: `default` (primary), `secondary`, `muted`, `tinted`, `outline`, `ghost`, `destructive`; `align`: `start`, `end`.
|
|
51
|
-
| Breadcrumb | `Breadcrumb`, `BreadcrumbList`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbPage`, `BreadcrumbSeparator`, `BreadcrumbEllipsis` |
|
|
52
|
-
| Button | `Button`, `buttonVariants` | 40px default. `variant`: `default`, `secondary`, `outline`, `ghost`, `soft`, `dashed`, `destructive`, `link`. `size`: `xs`, `sm` (32px), `default`, `lg`, `icon`, `icon-xs`, `icon-sm`, `icon-lg`. `shape`: `default`, `pill`. Icon-only buttons need `aria-label`.
|
|
53
|
-
| Button group | `ButtonGroup`, `ButtonGroupSeparator`, `ButtonGroupText`, `buttonGroupVariants` |
|
|
54
|
-
| Calendar | `Calendar`, `CalendarDayButton` | react-day-picker v10. Combine with `Popover` for a date picker.
|
|
55
|
-
| Card | `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardAction`, `CardContent`, `CardFooter` | Bordered, elevated (`shadow-card`), `rounded-xl`, 24px padding. `size="sm"` for 16px. `CardAction` puts a control top-right of the header.
|
|
56
|
-
| Code block | `CodeBlock`, `CodeBlockHeader`, `CodeBlockTitle`, `CodeBlockActions`, `CodeBlockCopyButton`, `CodeBlockContent`, `CodeBlockLine`, `CodeBlockFooter` | Composable code panel (muted fill). `CodeBlockContent` takes `lineNumbers`, `wrap`, `startLine`; `CodeBlockLine variant`: `added`, `removed`, `highlighted`. Pair with `useHighlightedCode` for shiki, or use `CodeSnippet`.
|
|
57
|
-
| Carousel | `Carousel`, `CarouselContent`, `CarouselItem`, `CarouselPrevious`, `CarouselNext`, `useCarousel`, type `CarouselApi` | embla.
|
|
58
|
-
| Chart | `ChartContainer`, `ChartTooltip`, `ChartTooltipContent`, `ChartLegend`, `ChartLegendContent`, `ChartStyle` | Recharts wrappers. Prefer `TrendChart` for line/area; use these for custom charts.
|
|
59
|
-
| Checkbox | `Checkbox` |
|
|
60
|
-
| Collapsible | `Collapsible`, `CollapsibleTrigger`, `CollapsibleContent` |
|
|
61
|
-
| Combobox | `Combobox`, `ComboboxInput`, `ComboboxContent`, `ComboboxList`, `ComboboxItem`, `ComboboxGroup`, `ComboboxLabel`, `ComboboxCollection`, `ComboboxEmpty`, `ComboboxSeparator`, `ComboboxChips`, `ComboboxChip`, `ComboboxChipsInput`, `ComboboxTrigger`, `ComboboxValue`, `useComboboxAnchor` | Searchable select (Base UI). `<Combobox items={list}>` + `<ComboboxList>{(item) => <ComboboxItem value={item}>…}</ComboboxList>`. Chips for multi-select.
|
|
62
|
-
| Command | `Command`, `CommandDialog`, `CommandInput`, `CommandList`, `CommandEmpty`, `CommandGroup`, `CommandItem`, `CommandShortcut`, `CommandSeparator` | Use for ⌘K palettes.
|
|
63
|
-
| Direction | `DirectionProvider`, `useDirection` | RTL/LTR context for Radix components.
|
|
64
|
-
| Context menu | `ContextMenu`, `ContextMenuTrigger`, `ContextMenuContent`, `ContextMenuItem`, `ContextMenuCheckboxItem`, `ContextMenuRadioItem`, `ContextMenuRadioGroup`, `ContextMenuLabel`, `ContextMenuSeparator`, `ContextMenuShortcut`, `ContextMenuGroup`, `ContextMenuPortal`, `ContextMenuSub`, `ContextMenuSubContent`, `ContextMenuSubTrigger` |
|
|
65
|
-
| Dialog | `Dialog`, `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogFooter`, `DialogTitle`, `DialogDescription`, `DialogClose`, `DialogOverlay`, `DialogPortal` |
|
|
66
|
-
| Drawer | `Drawer`, `DrawerTrigger`, `DrawerContent`, `DrawerHeader`, `DrawerFooter`, `DrawerTitle`, `DrawerDescription`, `DrawerClose`, `DrawerOverlay`, `DrawerPortal` | vaul. Mobile bottom sheets.
|
|
67
|
-
| Dropdown menu | `DropdownMenu`, `DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuItem`, `DropdownMenuCheckboxItem`, `DropdownMenuRadioGroup`, `DropdownMenuRadioItem`, `DropdownMenuLabel`, `DropdownMenuSeparator`, `DropdownMenuShortcut`, `DropdownMenuGroup`, `DropdownMenuPortal`, `DropdownMenuSub`, `DropdownMenuSubTrigger`, `DropdownMenuSubContent` |
|
|
68
|
-
| Empty state | `Empty`, `EmptyHeader`, `EmptyMedia`, `EmptyTitle`, `EmptyDescription`, `EmptyContent` | Use for zero-data screens.
|
|
69
|
-
| Field | `Field`, `FieldLabel`, `FieldDescription`, `FieldError`, `FieldGroup`, `FieldLegend`, `FieldSeparator`, `FieldSet`, `FieldContent`, `FieldTitle` | Form layout. Works with react-hook-form or plain state.
|
|
70
|
-
| Hover card | `HoverCard`, `HoverCardTrigger`, `HoverCardContent` |
|
|
71
|
-
| Input | `Input` | 40px, filled `bg-muted`, turns `bg-card` with a primary ring on focus.
|
|
72
|
-
| Input group | `InputGroup`, `InputGroupAddon`, `InputGroupButton`, `InputGroupText`, `InputGroupInput`, `InputGroupTextarea` | Inputs with icons, prefixes, buttons.
|
|
73
|
-
| Input OTP | `InputOTP`, `InputOTPGroup`, `InputOTPSlot`, `InputOTPSeparator` |
|
|
74
|
-
| Item | `Item`, `ItemMedia`, `ItemContent`, `ItemTitle`, `ItemDescription`, `ItemActions`, `ItemGroup`, `ItemSeparator`, `ItemHeader`, `ItemFooter` | Generic list rows.
|
|
75
|
-
| Kbd | `Kbd`, `KbdGroup` | Mono keycap.
|
|
76
|
-
| Marker | `Marker`, `MarkerIcon`, `MarkerContent`, `markerVariants` | Inline status line in a thread ("Conversation saved"). `variant`: `default`, `separator` (date dividers), `border`.
|
|
77
|
-
| Label | `Label` |
|
|
78
|
-
| Menubar | `Menubar`, `MenubarMenu`, `MenubarTrigger`, `MenubarContent`, `MenubarItem`, `MenubarCheckboxItem`, `MenubarRadioGroup`, `MenubarRadioItem`, `MenubarLabel`, `MenubarSeparator`, `MenubarShortcut`, `MenubarGroup`, `MenubarPortal`, `MenubarSub`, `MenubarSubTrigger`, `MenubarSubContent` |
|
|
79
|
-
| Message | `Message`, `MessageGroup`, `MessageAvatar`, `MessageContent`, `MessageHeader`, `MessageFooter` | Chat message layout primitive. `align`: `start`, `end`. Put `Bubble`s inside `MessageContent`.
|
|
80
|
-
| Message scroller | `MessageScrollerProvider`, `MessageScroller`, `MessageScrollerViewport`, `MessageScrollerContent`, `MessageScrollerItem`, `MessageScrollerButton`, `useMessageScroller`, `useMessageScrollerScrollable`, `useMessageScrollerVisibility` | Stick-to-bottom scroll container with a jump-to-latest button. `ChatThread` is the simpler alternative.
|
|
81
|
-
| Navigation menu | `NavigationMenu`, `NavigationMenuList`, `NavigationMenuItem`, `NavigationMenuTrigger`, `NavigationMenuContent`, `NavigationMenuLink`, `NavigationMenuIndicator`, `NavigationMenuViewport`, `navigationMenuTriggerStyle` | Marketing-style top nav.
|
|
82
|
-
| Native select | `NativeSelect`, `NativeSelectOption`, `NativeSelectOptGroup` | Styled `<select>`; same filled look as `Input`. Use on mobile-heavy forms.
|
|
83
|
-
| Pagination | `Pagination`, `PaginationContent`, `PaginationItem`, `PaginationLink`, `PaginationPrevious`, `PaginationNext`, `PaginationEllipsis` | `DataTable` has its own pager.
|
|
84
|
-
| Popover | `Popover`, `PopoverTrigger`, `PopoverContent`, `PopoverAnchor`, `PopoverHeader`, `PopoverTitle`, `PopoverDescription` |
|
|
85
|
-
| Progress | `Progress` | 8px rounded meter. `UsageMeter` adds a label row.
|
|
86
|
-
| Questionnaire | `Questionnaire`, `QuestionnaireProgress`, `QuestionnaireItem`, `QuestionnaireTitle`, `QuestionnaireDescription`, `QuestionnaireChoices`, `QuestionnaireChoice`, `QuestionnaireChoiceDescription`, `QuestionnaireInput`, `QuestionnaireError`, `QuestionnaireActions`, `QuestionnairePrevious`, `QuestionnaireNext`, `QuestionnaireSkip`, `QuestionnaireSubmit` | Step-by-step multiple choice or input, one question at a time (e.g. an agent asking clarifying questions). `Questionnaire items={[{ name, required }]}`, each `QuestionnaireItem name` matches.
|
|
87
|
-
| Radio group | `RadioGroup`, `RadioGroupItem` |
|
|
88
|
-
| Resizable | `ResizablePanelGroup`, `ResizablePanel`, `ResizableHandle` |
|
|
89
|
-
| Scroll area | `ScrollArea`, `ScrollBar` |
|
|
90
|
-
| Select | `Select`, `SelectTrigger`, `SelectValue`, `SelectContent`, `SelectItem`, `SelectGroup`, `SelectLabel`, `SelectSeparator`, `SelectScrollUpButton`, `SelectScrollDownButton` |
|
|
91
|
-
| Separator | `Separator` |
|
|
92
|
-
| Sheet | `Sheet`, `SheetTrigger`, `SheetContent`, `SheetHeader`, `SheetFooter`, `SheetTitle`, `SheetDescription`, `SheetClose` | Side panels.
|
|
93
|
-
| Sidebar | `SidebarProvider`, `Sidebar`, `SidebarHeader`, `SidebarContent`, `SidebarFooter`, `SidebarGroup`, `SidebarGroupLabel`, `SidebarGroupAction`, `SidebarGroupContent`, `SidebarMenu`, `SidebarMenuItem`, `SidebarMenuButton`, `SidebarMenuAction`, `SidebarMenuBadge`, `SidebarMenuSkeleton`, `SidebarMenuSub`, `SidebarMenuSubItem`, `SidebarMenuSubButton`, `SidebarInput`, `SidebarInset`, `SidebarRail`, `SidebarSeparator`, `SidebarTrigger`, `useSidebar` | Active item is a raised card. Prefer `AppShell` unless you need a custom layout.
|
|
94
|
-
| Skeleton | `Skeleton` | Loading placeholders.
|
|
95
|
-
| Slider | `Slider` |
|
|
96
|
-
| Spinner | `Spinner` |
|
|
97
|
-
| Switch | `Switch` |
|
|
98
|
-
| Table | `Table`, `TableHeader`, `TableBody`, `TableFooter`, `TableRow`, `TableHead`, `TableCell`, `TableCaption` | Borderless rows with rounded hover; quiet 12px headers. `data-state="selected"` tints a row.
|
|
99
|
-
| Tabs | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`, `tabsListVariants` | `TabsList variant`: `default` (segmented control), `pill` (rounded top-level nav), `line`. Use `Tabs` as a segmented filter too (date ranges, status filters).
|
|
100
|
-
| Textarea | `Textarea` | Same filled style as `Input`, auto-grows.
|
|
101
|
-
| Toast | `Toaster` | sonner. Mount once; call `toast("Saved")` from `sonner`. Follows the theme mode.
|
|
102
|
-
| Toggle | `Toggle`, `toggleVariants`, `ToggleGroup`, `ToggleGroupItem` |
|
|
103
|
-
| Tooltip | `TooltipProvider`, `Tooltip`, `TooltipTrigger`, `TooltipContent` | Mount `TooltipProvider` once near the root.
|
|
104
|
-
| Trace | `Trace`, `TraceLine`, `TraceIcon`, `TraceTitle`, `TraceDescription`, `TraceCollapsible`, `TraceCollapsibleTrigger`, `TraceCollapsibleContent` | Agent step log (searched, read, ran). `TraceLine status`: `running` (shimmer), `error`, `pending`.
|
|
41
|
+
| Family | Exports | harebear notes |
|
|
42
|
+
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
43
|
+
| Accordion | `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent` | |
|
|
44
|
+
| Alert | `Alert`, `AlertTitle`, `AlertDescription`, `AlertAction` | harebear adds `variant` `warning`, `success`, `info` (tinted, borderless). Descriptions wrap long words. |
|
|
45
|
+
| Alert dialog | `AlertDialog`, `AlertDialogTrigger`, `AlertDialogContent`, `AlertDialogHeader`, `AlertDialogFooter`, `AlertDialogTitle`, `AlertDialogDescription`, `AlertDialogAction`, `AlertDialogCancel`, `AlertDialogMedia`, `AlertDialogOverlay`, `AlertDialogPortal` | Use for destructive confirmations. |
|
|
46
|
+
| Aspect ratio | `AspectRatio` | |
|
|
47
|
+
| Attachment | `Attachment`, `AttachmentGroup`, `AttachmentMedia`, `AttachmentContent`, `AttachmentTitle`, `AttachmentDescription`, `AttachmentActions`, `AttachmentAction`, `AttachmentTrigger` | File/image chips on messages and composers. `size`: `default`, `sm`, `xs`; `orientation`: `horizontal`, `vertical`. |
|
|
48
|
+
| Avatar | `Avatar`, `AvatarImage`, `AvatarFallback`, `AvatarGroup`, `AvatarGroupCount`, `AvatarBadge` | `size`: `sm` 28px, `default` 36px, `lg` 56px. Fallback is tinted initials. |
|
|
49
|
+
| Badge | `Badge`, `badgeVariants` | 24px pill. `variant`: `default` (primary), `secondary` (neutral, the common one), `soft` (tinted primary), `outline`, `success`, `warning`, `destructive`, `ghost`, `link`. harebear adds `size="lg"` (32px, lines up with sm buttons). |
|
|
50
|
+
| Bubble | `Bubble`, `BubbleGroup`, `BubbleContent`, `BubbleReactions` | Chat bubble. `variant`: `default` (primary), `secondary`, `muted`, `tinted`, `outline`, `ghost`, `destructive`; `align`: `start`, `end`. |
|
|
51
|
+
| Breadcrumb | `Breadcrumb`, `BreadcrumbList`, `BreadcrumbItem`, `BreadcrumbLink`, `BreadcrumbPage`, `BreadcrumbSeparator`, `BreadcrumbEllipsis` | |
|
|
52
|
+
| Button | `Button`, `buttonVariants` | 40px default. `variant`: `default`, `secondary`, `outline`, `ghost`, `soft`, `dashed`, `destructive`, `link`. `size`: `xs`, `sm` (32px), `default`, `lg`, `icon`, `icon-xs`, `icon-sm`, `icon-lg`. `shape`: `default`, `pill`. Icon-only buttons need `aria-label`. |
|
|
53
|
+
| Button group | `ButtonGroup`, `ButtonGroupSeparator`, `ButtonGroupText`, `buttonGroupVariants` | |
|
|
54
|
+
| Calendar | `Calendar`, `CalendarDayButton` | react-day-picker v10. Combine with `Popover` for a date picker. |
|
|
55
|
+
| Card | `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardAction`, `CardContent`, `CardFooter` | Bordered, elevated (`shadow-card`), `rounded-xl`, 24px padding. `size="sm"` for 16px. `CardAction` puts a control top-right of the header. |
|
|
56
|
+
| Code block | `CodeBlock`, `CodeBlockHeader`, `CodeBlockTitle`, `CodeBlockActions`, `CodeBlockCopyButton`, `CodeBlockContent`, `CodeBlockLine`, `CodeBlockFooter` | Composable code panel (muted fill). `CodeBlockContent` takes `lineNumbers`, `wrap`, `startLine`; `CodeBlockLine variant`: `added`, `removed`, `highlighted`. Pair with `useHighlightedCode` for shiki, or use `CodeSnippet`. |
|
|
57
|
+
| Carousel | `Carousel`, `CarouselContent`, `CarouselItem`, `CarouselPrevious`, `CarouselNext`, `useCarousel`, type `CarouselApi` | embla. |
|
|
58
|
+
| Chart | `ChartContainer`, `ChartTooltip`, `ChartTooltipContent`, `ChartLegend`, `ChartLegendContent`, `ChartStyle` | Recharts wrappers. Prefer `TrendChart` for line/area; use these for custom charts. |
|
|
59
|
+
| Checkbox | `Checkbox` | |
|
|
60
|
+
| Collapsible | `Collapsible`, `CollapsibleTrigger`, `CollapsibleContent` | |
|
|
61
|
+
| Combobox | `Combobox`, `ComboboxInput`, `ComboboxContent`, `ComboboxList`, `ComboboxItem`, `ComboboxGroup`, `ComboboxLabel`, `ComboboxCollection`, `ComboboxEmpty`, `ComboboxSeparator`, `ComboboxChips`, `ComboboxChip`, `ComboboxChipsInput`, `ComboboxTrigger`, `ComboboxValue`, `useComboboxAnchor` | Searchable select (Base UI). `<Combobox items={list}>` + `<ComboboxList>{(item) => <ComboboxItem value={item}>…}</ComboboxList>`. Chips for multi-select. |
|
|
62
|
+
| Command | `Command`, `CommandDialog`, `CommandInput`, `CommandList`, `CommandEmpty`, `CommandGroup`, `CommandItem`, `CommandShortcut`, `CommandSeparator` | Use for ⌘K palettes. |
|
|
63
|
+
| Direction | `DirectionProvider`, `useDirection` | RTL/LTR context for Radix components. |
|
|
64
|
+
| Context menu | `ContextMenu`, `ContextMenuTrigger`, `ContextMenuContent`, `ContextMenuItem`, `ContextMenuCheckboxItem`, `ContextMenuRadioItem`, `ContextMenuRadioGroup`, `ContextMenuLabel`, `ContextMenuSeparator`, `ContextMenuShortcut`, `ContextMenuGroup`, `ContextMenuPortal`, `ContextMenuSub`, `ContextMenuSubContent`, `ContextMenuSubTrigger` | |
|
|
65
|
+
| Dialog | `Dialog`, `DialogTrigger`, `DialogContent`, `DialogHeader`, `DialogFooter`, `DialogTitle`, `DialogDescription`, `DialogClose`, `DialogOverlay`, `DialogPortal` | |
|
|
66
|
+
| Drawer | `Drawer`, `DrawerTrigger`, `DrawerContent`, `DrawerHeader`, `DrawerFooter`, `DrawerTitle`, `DrawerDescription`, `DrawerClose`, `DrawerOverlay`, `DrawerPortal` | vaul. Mobile bottom sheets. |
|
|
67
|
+
| Dropdown menu | `DropdownMenu`, `DropdownMenuTrigger`, `DropdownMenuContent`, `DropdownMenuItem`, `DropdownMenuCheckboxItem`, `DropdownMenuRadioGroup`, `DropdownMenuRadioItem`, `DropdownMenuLabel`, `DropdownMenuSeparator`, `DropdownMenuShortcut`, `DropdownMenuGroup`, `DropdownMenuPortal`, `DropdownMenuSub`, `DropdownMenuSubTrigger`, `DropdownMenuSubContent` | |
|
|
68
|
+
| Empty state | `Empty`, `EmptyHeader`, `EmptyMedia`, `EmptyTitle`, `EmptyDescription`, `EmptyContent` | Use for zero-data screens. |
|
|
69
|
+
| Field | `Field`, `FieldLabel`, `FieldDescription`, `FieldError`, `FieldGroup`, `FieldLegend`, `FieldSeparator`, `FieldSet`, `FieldContent`, `FieldTitle` | Form layout. Works with react-hook-form or plain state. |
|
|
70
|
+
| Hover card | `HoverCard`, `HoverCardTrigger`, `HoverCardContent` | |
|
|
71
|
+
| Input | `Input` | 40px, filled `bg-muted`, turns `bg-card` with a primary ring on focus. |
|
|
72
|
+
| Input group | `InputGroup`, `InputGroupAddon`, `InputGroupButton`, `InputGroupText`, `InputGroupInput`, `InputGroupTextarea` | Inputs with icons, prefixes, buttons. |
|
|
73
|
+
| Input OTP | `InputOTP`, `InputOTPGroup`, `InputOTPSlot`, `InputOTPSeparator` | |
|
|
74
|
+
| Item | `Item`, `ItemMedia`, `ItemContent`, `ItemTitle`, `ItemDescription`, `ItemActions`, `ItemGroup`, `ItemSeparator`, `ItemHeader`, `ItemFooter` | Generic list rows. harebear fix: `ItemTitle` clamps to one line (long words break), `ItemContent` has `min-w-0`. |
|
|
75
|
+
| Kbd | `Kbd`, `KbdGroup` | Mono keycap. |
|
|
76
|
+
| Marker | `Marker`, `MarkerIcon`, `MarkerContent`, `markerVariants` | Inline status line in a thread ("Conversation saved"). `variant`: `default`, `separator` (date dividers), `border`. |
|
|
77
|
+
| Label | `Label` | |
|
|
78
|
+
| Menubar | `Menubar`, `MenubarMenu`, `MenubarTrigger`, `MenubarContent`, `MenubarItem`, `MenubarCheckboxItem`, `MenubarRadioGroup`, `MenubarRadioItem`, `MenubarLabel`, `MenubarSeparator`, `MenubarShortcut`, `MenubarGroup`, `MenubarPortal`, `MenubarSub`, `MenubarSubTrigger`, `MenubarSubContent` | |
|
|
79
|
+
| Message | `Message`, `MessageGroup`, `MessageAvatar`, `MessageContent`, `MessageHeader`, `MessageFooter` | Chat message layout primitive. `align`: `start`, `end`. Put `Bubble`s inside `MessageContent`. |
|
|
80
|
+
| Message scroller | `MessageScrollerProvider`, `MessageScroller`, `MessageScrollerViewport`, `MessageScrollerContent`, `MessageScrollerItem`, `MessageScrollerButton`, `useMessageScroller`, `useMessageScrollerScrollable`, `useMessageScrollerVisibility` | Stick-to-bottom scroll container with a jump-to-latest button. `ChatThread` is the simpler alternative. |
|
|
81
|
+
| Navigation menu | `NavigationMenu`, `NavigationMenuList`, `NavigationMenuItem`, `NavigationMenuTrigger`, `NavigationMenuContent`, `NavigationMenuLink`, `NavigationMenuIndicator`, `NavigationMenuViewport`, `navigationMenuTriggerStyle` | Marketing-style top nav. |
|
|
82
|
+
| Native select | `NativeSelect`, `NativeSelectOption`, `NativeSelectOptGroup` | Styled `<select>`; same filled look as `Input`. Use on mobile-heavy forms. |
|
|
83
|
+
| Pagination | `Pagination`, `PaginationContent`, `PaginationItem`, `PaginationLink`, `PaginationPrevious`, `PaginationNext`, `PaginationEllipsis` | `DataTable` has its own pager. |
|
|
84
|
+
| Popover | `Popover`, `PopoverTrigger`, `PopoverContent`, `PopoverAnchor`, `PopoverHeader`, `PopoverTitle`, `PopoverDescription` | |
|
|
85
|
+
| Progress | `Progress` | 8px rounded meter. `UsageMeter` adds a label row. |
|
|
86
|
+
| Questionnaire | `Questionnaire`, `QuestionnaireProgress`, `QuestionnaireItem`, `QuestionnaireTitle`, `QuestionnaireDescription`, `QuestionnaireChoices`, `QuestionnaireChoice`, `QuestionnaireChoiceDescription`, `QuestionnaireInput`, `QuestionnaireError`, `QuestionnaireActions`, `QuestionnairePrevious`, `QuestionnaireNext`, `QuestionnaireSkip`, `QuestionnaireSubmit` | Step-by-step multiple choice or input, one question at a time (e.g. an agent asking clarifying questions). `Questionnaire items={[{ name, required }]}`, each `QuestionnaireItem name` matches. |
|
|
87
|
+
| Radio group | `RadioGroup`, `RadioGroupItem` | |
|
|
88
|
+
| Resizable | `ResizablePanelGroup`, `ResizablePanel`, `ResizableHandle` | |
|
|
89
|
+
| Scroll area | `ScrollArea`, `ScrollBar` | |
|
|
90
|
+
| Select | `Select`, `SelectTrigger`, `SelectValue`, `SelectContent`, `SelectItem`, `SelectGroup`, `SelectLabel`, `SelectSeparator`, `SelectScrollUpButton`, `SelectScrollDownButton` | |
|
|
91
|
+
| Separator | `Separator` | |
|
|
92
|
+
| Sheet | `Sheet`, `SheetTrigger`, `SheetContent`, `SheetHeader`, `SheetFooter`, `SheetTitle`, `SheetDescription`, `SheetClose` | Side panels. |
|
|
93
|
+
| Sidebar | `SidebarProvider`, `Sidebar`, `SidebarHeader`, `SidebarContent`, `SidebarFooter`, `SidebarGroup`, `SidebarGroupLabel`, `SidebarGroupAction`, `SidebarGroupContent`, `SidebarMenu`, `SidebarMenuItem`, `SidebarMenuButton`, `SidebarMenuAction`, `SidebarMenuBadge`, `SidebarMenuSkeleton`, `SidebarMenuSub`, `SidebarMenuSubItem`, `SidebarMenuSubButton`, `SidebarInput`, `SidebarInset`, `SidebarRail`, `SidebarSeparator`, `SidebarTrigger`, `useSidebar` | Active item is a raised card. Prefer `AppShell` unless you need a custom layout. harebear: no border by default (add `border-r` if you want one); in `collapsible="icon"` the content keeps its width while the rail widens. `useSidebarOptional()` returns null outside a provider. |
|
|
94
|
+
| Skeleton | `Skeleton` | Loading placeholders. |
|
|
95
|
+
| Slider | `Slider` | |
|
|
96
|
+
| Spinner | `Spinner` | |
|
|
97
|
+
| Switch | `Switch` | |
|
|
98
|
+
| Table | `Table`, `TableHeader`, `TableBody`, `TableFooter`, `TableRow`, `TableHead`, `TableCell`, `TableCaption` | Borderless rows with rounded hover; quiet 12px headers. `data-state="selected"` tints a row. |
|
|
99
|
+
| Tabs | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`, `tabsListVariants` | `TabsList variant`: `default` (segmented control), `pill` (rounded top-level nav), `line`. Use `Tabs` as a segmented filter too (date ranges, status filters). |
|
|
100
|
+
| Textarea | `Textarea` | Same filled style as `Input`, auto-grows. |
|
|
101
|
+
| Toast | `Toaster` | sonner. Mount once; call `toast("Saved")` from `sonner`. Follows the theme mode. |
|
|
102
|
+
| Toggle | `Toggle`, `toggleVariants`, `ToggleGroup`, `ToggleGroupItem` | |
|
|
103
|
+
| Tooltip | `TooltipProvider`, `Tooltip`, `TooltipTrigger`, `TooltipContent` | Mount `TooltipProvider` once near the root. |
|
|
104
|
+
| Trace | `Trace`, `TraceLine`, `TraceIcon`, `TraceTitle`, `TraceDescription`, `TraceCollapsible`, `TraceCollapsibleTrigger`, `TraceCollapsibleContent` | Agent step log (searched, read, ran). `TraceLine status`: `running` (shimmer), `error`, `pending`. |
|
|
105
105
|
|
|
106
106
|
## Admin and layout
|
|
107
107
|
|
|
@@ -143,7 +143,7 @@ Props: `brand` (node, usually `AppBrand`), `nav: AppNavSection[]`, `sidebarExtra
|
|
|
143
143
|
|
|
144
144
|
### `AppBrand`
|
|
145
145
|
|
|
146
|
-
Logo tile + name. Props: `name`, `subtitle?`, `icon?`, `action?` (trailing control).
|
|
146
|
+
Logo tile + name. Props: `name`, `subtitle?`, `icon?`, `action?` (trailing control). In a sidebar collapsed to its icon rail only the tile shows.
|
|
147
147
|
|
|
148
148
|
### `PageHeader`
|
|
149
149
|
|
|
@@ -173,7 +173,7 @@ Search field with icon. Props: all `<input>` props, `shortcut?` (display-only ke
|
|
|
173
173
|
|
|
174
174
|
### `StatusDot`, `StatusBadge`
|
|
175
175
|
|
|
176
|
-
Dot or pill for status. Prop `tone`: `success | warning | danger | info | neutral
|
|
176
|
+
Dot or pill for status. Prop `tone`: `success | warning | danger | info | neutral`; `pulse` animates the dot for live states. `StatusBadge` takes Badge props (`variant="outline"` for a white pill, `size="lg"` in headers).
|
|
177
177
|
|
|
178
178
|
### `UsageMeter`
|
|
179
179
|
|
|
@@ -193,7 +193,28 @@ Label-over-value pairs as a `<dl>`. Props: `items: { label; value }[]`, `columns
|
|
|
193
193
|
|
|
194
194
|
### `UserChip`
|
|
195
195
|
|
|
196
|
-
Avatar + name + subtitle. Props: `name`, `subtitle?`, `avatarUrl?`, `action?`, `size?`. Also exports `initials(name)`.
|
|
196
|
+
Avatar + name + subtitle. Props: `name`, `subtitle?`, `avatarUrl?`, `action?`, `size?`. In a sidebar icon rail only the avatar shows. Also exports `initials(name)`.
|
|
197
|
+
|
|
198
|
+
### `UserMenu`
|
|
199
|
+
|
|
200
|
+
The signed-in user as a menu button (sidebar footer or top bar). The menu has a header, your items (`children`, e.g. a Settings `DropdownMenuItem`), a Light / Dark / System theme choice, and Sign out. In a sidebar icon rail the trigger is just the avatar and the menu opens to the side. Props: `name`, `subtitle?`, `avatarUrl?`, `children?`, `themeSwitch?` (default true, needs `ThemeProvider`), `onSignOut?`, `signOutLabel?`.
|
|
201
|
+
|
|
202
|
+
```tsx
|
|
203
|
+
;<UserMenu name={email} subtitle="Signed in" onSignOut={signOut}>
|
|
204
|
+
<DropdownMenuItem onSelect={() => setSettingsOpen(true)}>
|
|
205
|
+
<SettingsIcon />
|
|
206
|
+
Settings
|
|
207
|
+
</DropdownMenuItem>
|
|
208
|
+
</UserMenu>
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
### `ConfirmDialog`
|
|
212
|
+
|
|
213
|
+
Controlled "are you sure" dialog. Props: `open`, `onOpenChange`, `title`, `description?`, `confirmLabel?`, `cancelLabel?`, `destructive?` (red confirm), `onConfirm`.
|
|
214
|
+
|
|
215
|
+
### `CopyField`
|
|
216
|
+
|
|
217
|
+
Read-only value with a copy button (IDs, paths, URLs). Props: `value` (copied), `display?` (shown instead, full value as tooltip), `label?` (leading addon), `aria-label?`, `mono?` (default true).
|
|
197
218
|
|
|
198
219
|
### `Callout`
|
|
199
220
|
|
|
@@ -249,7 +270,38 @@ Mini bar history (pings, uptime). Props: `data: (number | { value; tone?; label?
|
|
|
249
270
|
|
|
250
271
|
## AI and chat
|
|
251
272
|
|
|
252
|
-
A chat screen is
|
|
273
|
+
A chat screen is `ChatShell` (sidebar with `AppBrand`, `NewConversationButton`, `ConversationList`, `UserMenu`; optional details panel) around a `ChatPanel` (header, thread, `PromptInput`). Agent apps add `ToolGroup`/`ToolStep` for tool calls and `ApprovalCard`/`ApprovalResult` for permission prompts. See `playground/screens/chat.tsx` and `playground/screens/agent.tsx`.
|
|
274
|
+
|
|
275
|
+
### `ChatShell`
|
|
276
|
+
|
|
277
|
+
Full-height chat layout. The sidebar collapses to an icon rail on desktop (logo, actions, expand button, avatar) and is a sheet on mobile. Props: `brand?`, `sidebarActions?` (stays in the rail), `sidebar?` (hidden in the rail), `sidebarFooter?`, `details?` (right panel: inline at 1280px and up, a sheet below; `ChatPanel` gets a toggle button), `detailsTitle?` (default "Details"), `defaultDetailsOpen?`, `storageKey?` (remember collapsed state in localStorage), `defaultOpen?`, `children` (a `ChatPanel`). Includes a `TooltipProvider`.
|
|
278
|
+
|
|
279
|
+
```tsx
|
|
280
|
+
;<ChatShell
|
|
281
|
+
storageKey="app-sidebar"
|
|
282
|
+
brand={<AppBrand name="netadmin" subtitle="Home network agent" icon={<TerminalIcon />} />}
|
|
283
|
+
sidebarActions={<NewConversationButton onClick={newChat} />}
|
|
284
|
+
sidebar={<ConversationList groups={groupByDate(chats, (c) => c.updated, toRow)} activeId={id} onSelect={open} />}
|
|
285
|
+
sidebarFooter={<UserMenu name={email} subtitle="Signed in" onSignOut={signOut} />}
|
|
286
|
+
details={<Card size="sm">…</Card>}
|
|
287
|
+
detailsTitle="Conversation details"
|
|
288
|
+
>
|
|
289
|
+
<ChatPanel
|
|
290
|
+
title={title}
|
|
291
|
+
description="Started 9:41"
|
|
292
|
+
actions={<StatusBadge size="lg" tone="info" pulse>Working</StatusBadge>}
|
|
293
|
+
notice={offline && "Reconnecting…"}
|
|
294
|
+
conversationId={id}
|
|
295
|
+
composer={<PromptInput … />}
|
|
296
|
+
>
|
|
297
|
+
{thread}
|
|
298
|
+
</ChatPanel>
|
|
299
|
+
</ChatShell>
|
|
300
|
+
```
|
|
301
|
+
|
|
302
|
+
### `ChatPanel`
|
|
303
|
+
|
|
304
|
+
The chat column as a card. Props: `title?`, `description?`, `actions?` (header controls), `notice?` (warning bar under the header), `composer?`, `conversationId?` (changing it resets the thread scroll), `autoScroll?`, `children` (thread content). Inside `ChatShell` it adds the mobile sidebar button and the details toggle itself. Works on its own in any bounded-height column.
|
|
253
305
|
|
|
254
306
|
### `ChatThread`
|
|
255
307
|
|
|
@@ -257,7 +309,7 @@ Scrollable log that sticks to the bottom as content streams in (unless the user
|
|
|
257
309
|
|
|
258
310
|
### `ChatMessage`
|
|
259
311
|
|
|
260
|
-
One turn. Props: `role: "user" | "assistant"` (matches AI SDK message roles), `avatar?` (assistant only, defaults to `AssistantAvatar`), `actions?` (assistant only, under the content), `children`.
|
|
312
|
+
One turn. Props: `role: "user" | "assistant"` (matches AI SDK message roles), `avatar?` (assistant only, defaults to `AssistantAvatar`), `actions?` (assistant only, under the content), `variant?` (user bubble: `"muted"` default or `"soft"` accent tint), `children`. Long words wrap.
|
|
261
313
|
User turns render as a right-aligned bubble with preserved newlines. Assistant turns render free-flowing: put `Prose`, `CodeBlock`, `ToolCall`, `TypingIndicator` inside.
|
|
262
314
|
|
|
263
315
|
```tsx
|
|
@@ -296,7 +348,11 @@ Row of ghost icon buttons. Props: `copyText?` (shows copy), `onRegenerate?`, `on
|
|
|
296
348
|
### `PromptInput`, `PromptInputChip`
|
|
297
349
|
|
|
298
350
|
Composer. Props: `value`, `onValueChange`, `onSubmit(text)` (Enter sends trimmed text, Shift+Enter is a newline), `placeholder?`, `loading?` + `onStop?` (send becomes stop), `onAttach?` (shows paperclip), `tools?` (chips), `footer?` (disclaimer), `disabled?`, `autoFocus?`.
|
|
299
|
-
`PromptInputChip` is a pill toggle for the tools slot: `active`, `onClick`, children (icon + label).
|
|
351
|
+
`PromptInputChip` is a pill toggle for the tools slot: `active`, `tone?` (`"warning"`), `onClick`, children (icon + label).
|
|
352
|
+
|
|
353
|
+
### `PromptInputSelect`
|
|
354
|
+
|
|
355
|
+
Composer chip that picks one mode from a menu (permission level, agent vs. ask). Props: `options: { value; label; description?; icon?; tone? }[]` (`tone: "warning"` colors the chip while that option is selected), `value`, `onValueChange`, `label?` (menu heading), `disabled?`, `title?`.
|
|
300
356
|
|
|
301
357
|
### `ModelPicker`
|
|
302
358
|
|
|
@@ -304,7 +360,14 @@ Pill showing the active model with a status dot, opening a menu. Props: `models:
|
|
|
304
360
|
|
|
305
361
|
### `ConversationList`
|
|
306
362
|
|
|
307
|
-
Grouped thread list. Props: `groups: { label; items:
|
|
363
|
+
Grouped thread list. Props: `groups: { label; items: Conversation[] }[]`, `activeId?`, `onSelect?(id)`, `renderAction?(conversation)` (trailing control, e.g. a delete button; on desktop it shows on hover/focus), `empty?`.
|
|
364
|
+
`Conversation = { id; title; description?; tone?; pulse? }`: `description` is the second line (time, or a live state with a `tone` dot).
|
|
365
|
+
Inside a `Sidebar` it closes the mobile sheet on select and hides in the icon rail.
|
|
366
|
+
`groupByDate(items, getDate, toConversation, now?)` buckets items into Today / Yesterday / Previous 7 days / Earlier, newest first.
|
|
367
|
+
|
|
368
|
+
### `NewConversationButton`
|
|
369
|
+
|
|
370
|
+
Sidebar header button. Full width with label; an icon with a tooltip in the icon rail; closes the mobile sheet on click. Props: Button props, `label?` (default "New conversation"), `icon?`, `shortcut?`.
|
|
308
371
|
|
|
309
372
|
### `ToolCall`
|
|
310
373
|
|
|
@@ -312,7 +375,25 @@ Outlined chip for a tool call. Props: `status?` (`running` shows a spinner, `don
|
|
|
312
375
|
|
|
313
376
|
### `TypingIndicator`
|
|
314
377
|
|
|
315
|
-
Three pulsing dots.
|
|
378
|
+
Three pulsing dots. Props: `label?` (text after the dots, e.g. "Working"), `variant?` (`"muted"` or `"primary"` dots).
|
|
379
|
+
|
|
380
|
+
### `ToolGroup`, `ToolStep`, `ToolStatusIcon`
|
|
381
|
+
|
|
382
|
+
Agent tool calls as a bordered, collapsible card. `ToolStatus = "queued" | "waiting" | "running" | "done" | "error" | "stopped"`.
|
|
383
|
+
`ToolGroup` props: `title`, `status`, `meta?` (e.g. time), `autoOpen?` (default open while active, until the user toggles), `open?`/`onOpenChange?`.
|
|
384
|
+
`ToolStep` props: `icon?`, `kind` (verb column), `detail` (monospace command or path), `status`, `meta?` (default from status), `output?` (monospace, shown when expanded; omit for a fixed row), `autoOpen?` (default open while running).
|
|
385
|
+
`ToolStatusIcon`: spinner while running, else a toned dot. Lighter alternative: `Trace`.
|
|
386
|
+
|
|
387
|
+
```tsx
|
|
388
|
+
;<ToolGroup title="Ran 2 commands on services" status="done" meta="9:42">
|
|
389
|
+
<ToolStep icon={<TerminalIcon />} kind="Run" detail="docker ps" status="done" meta="12 lines" output={out} />
|
|
390
|
+
</ToolGroup>
|
|
391
|
+
```
|
|
392
|
+
|
|
393
|
+
### `ApprovalCard`, `ApprovalResult`
|
|
394
|
+
|
|
395
|
+
`ApprovalCard`: warning-ringed card for anything the agent waits on the user for. Props: `title`, `description?`, `icon?` (default shield, `null` for none), `code?` + `codeLabel?` (wrapped code block with copy), `actions?` (buttons), `footer?`, `children` (body, e.g. the reason).
|
|
396
|
+
`ApprovalResult`: one-line record in the thread. Props: `decision: "approved" | "denied"`, `time?`, `children`.
|
|
316
397
|
|
|
317
398
|
### `CodeSnippet`, `InlineCode`, `Prose`
|
|
318
399
|
|
|
@@ -368,6 +449,7 @@ Props: `onSubmit?({ name?, email, password })`, `nameField?` (default true), `co
|
|
|
368
449
|
| `useHighlightedCode(code, language)` | Shiki-highlighted lines (one node per line) for custom `CodeBlock`s; plain lines until the language loads. |
|
|
369
450
|
| `loadHighlighter(language)`, `highlightCode(code, language)` | Async shiki access outside React. |
|
|
370
451
|
| `useIsMobile()` | `true` under 768px. |
|
|
452
|
+
| `useMediaQuery(query)` | `true` while the media query matches; `false` during SSR. |
|
|
371
453
|
| `cn(...classes)` | clsx + tailwind-merge. Use for every `className` you compose. |
|
|
372
454
|
|
|
373
455
|
## Tokens
|
package/llms.txt
CHANGED
|
@@ -27,10 +27,10 @@
|
|
|
27
27
|
## Component index
|
|
28
28
|
|
|
29
29
|
Theme: ThemeProvider, useTheme, ThemeToggle, ThemeScript
|
|
30
|
-
Layout/admin: AppShell, AppBrand, PageHeader, StatCard, SearchInput, StatusDot, StatusBadge, UsageMeter, ActivityFeed, Timeline, KeyValueGrid, UserChip, Callout, LinkTile
|
|
30
|
+
Layout/admin: AppShell, AppBrand, PageHeader, StatCard, SearchInput, StatusDot, StatusBadge, UsageMeter, ActivityFeed, Timeline, KeyValueGrid, UserChip, UserMenu, Callout, LinkTile, ConfirmDialog, CopyField
|
|
31
31
|
Data: DataTable, createDataTableColumnHelper, TrendChart, TrendLegend, BarList, Sparkline, StatusBars
|
|
32
|
-
AI/chat composites: ChatThread, ChatMessage, AssistantAvatar, MessageActions, PromptInput, PromptInputChip, ModelPicker, ConversationList, ToolCall, TypingIndicator, CodeSnippet, InlineCode, Prose
|
|
32
|
+
AI/chat composites: ChatShell, ChatPanel, ChatThread, ChatMessage, AssistantAvatar, MessageActions, PromptInput, PromptInputChip, PromptInputSelect, ModelPicker, ConversationList, NewConversationButton, groupByDate, ToolCall, ToolGroup, ToolStep, ToolStatusIcon, ApprovalCard, ApprovalResult, TypingIndicator, CodeSnippet, InlineCode, Prose
|
|
33
33
|
AI/chat primitives (shadcn): Message, Bubble, MessageScroller, Attachment, Trace, Marker, Questionnaire, CodeBlock
|
|
34
34
|
Auth: AuthLayout, LoginForm, SignupForm, GitHubIcon, GoogleIcon, AppleIcon
|
|
35
35
|
Primitives (the full shadcn/ui registry): Accordion, Alert, AlertDialog, AspectRatio, Attachment, Avatar, Badge, Breadcrumb, Bubble, Button, ButtonGroup, Calendar, Card, Carousel, Chart, Checkbox, CodeBlock, Collapsible, Combobox, Command, ContextMenu, Dialog, DirectionProvider, Drawer, DropdownMenu, Empty, Field, HoverCard, Input, InputGroup, InputOTP, Item, Kbd, Label, Marker, Menubar, Message, MessageScroller, NativeSelect, NavigationMenu, Pagination, Popover, Progress, Questionnaire, RadioGroup, Resizable, ScrollArea, Select, Separator, Sheet, Sidebar, Skeleton, Slider, Spinner, Switch, Table, Tabs, Textarea, Toaster, Toggle, ToggleGroup, Tooltip, Trace
|
|
36
|
-
Hooks/utils: useCopyToClipboard, useHighlightedCode, useIsMobile, cn
|
|
36
|
+
Hooks/utils: useCopyToClipboard, useHighlightedCode, useIsMobile, useMediaQuery, useSidebarOptional, cn
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "harebear-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "Opinionated, pre-themed shadcn/ui component library for React 19 + Tailwind CSS v4. Admin, data, and AI chat building blocks, ready for agents.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Harrison Milbradt",
|
|
@@ -24,7 +24,10 @@ This project uses `harebear-ui` for all UI. Its theme, tokens, and components ar
|
|
|
24
24
|
- Compose `className` with `cn()` from harebear-ui.
|
|
25
25
|
- Lay out pages as columns of `Card`s with `gap-5`, page sections with `gap-7`. Use `PageHeader` for page titles and `AppShell` for sidebar apps.
|
|
26
26
|
- DataTable columns: define with `createDataTableColumnHelper<Row>()` at module scope, pass `getRowId`.
|
|
27
|
-
- Chat: `
|
|
27
|
+
- Chat apps: `ChatShell` (sidebar: `AppBrand`, `NewConversationButton`, `ConversationList` + `groupByDate`, `UserMenu`; optional `details` panel) around a `ChatPanel` (title, actions, `notice`, `composer`). Don't hand-build the sidebar, rail or panel.
|
|
28
|
+
- Chat content: `ChatMessage role="user" | "assistant"`; render model output inside `Prose`; composer is `PromptInput` (+ `PromptInputChip`, `PromptInputSelect`); code is `CodeSnippet`; agent tool calls are `ToolGroup`/`ToolStep` (or the lighter `Trace`); permission prompts are `ApprovalCard`/`ApprovalResult`; working state is `TypingIndicator label`; clarifying questions are `Questionnaire`.
|
|
29
|
+
- Notices: `Alert variant="warning" | "success" | "info" | "destructive"`. Confirmations: `ConfirmDialog`. Copyable IDs: `CopyField`. Live status: `StatusDot`/`StatusBadge` with `pulse`.
|
|
30
|
+
- If you need a className to fix spacing, color, wrapping or borders on a harebear component, that is a library gap: report it instead of overriding.
|
|
28
31
|
- Sign-in and sign-up pages: `AuthLayout` + `LoginForm` / `SignupForm`. Don't hand-build auth forms.
|
|
29
32
|
- Theme: `ThemeProvider` at the root (`accent`, `radius`, `defaultMode`), `ThemeToggle` for the light/dark button. Both modes must work: never style for only one.
|
|
30
33
|
|