@tangle-network/ui 11.17.0 → 11.19.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/CHANGELOG.md +17 -0
- package/dist/index.d.ts +10 -1
- package/dist/index.js +10 -1
- package/dist/primitives/alert-dialog.d.ts +34 -0
- package/dist/primitives/alert-dialog.js +68 -0
- package/dist/primitives/checkbox.d.ts +12 -0
- package/dist/primitives/checkbox.js +34 -0
- package/dist/primitives/collapsible.d.ts +12 -0
- package/dist/primitives/collapsible.js +13 -0
- package/dist/primitives/context-menu.d.ts +36 -0
- package/dist/primitives/context-menu.js +86 -0
- package/dist/primitives/popover.d.ts +15 -0
- package/dist/primitives/popover.js +25 -0
- package/dist/primitives/separator.d.ts +11 -0
- package/dist/primitives/separator.js +21 -0
- package/dist/primitives/sheet.d.ts +28 -0
- package/dist/primitives/sheet.js +70 -0
- package/dist/primitives/slider.d.ts +14 -0
- package/dist/primitives/slider.js +37 -0
- package/dist/primitives/theme-toggle.js +8 -0
- package/dist/primitives/tooltip.d.ts +16 -0
- package/dist/primitives/tooltip.js +32 -0
- package/dist/primitives.d.ts +10 -1
- package/dist/primitives.js +10 -1
- package/package.json +9 -2
- package/src/primitives/alert-dialog.tsx +139 -0
- package/src/primitives/checkbox-separator-sheet-tooltip.stories.tsx +92 -0
- package/src/primitives/checkbox-separator-sheet-tooltip.test.tsx +107 -0
- package/src/primitives/checkbox.tsx +42 -0
- package/src/primitives/collapsible.tsx +16 -0
- package/src/primitives/context-menu.tsx +168 -0
- package/src/primitives/index.ts +57 -0
- package/src/primitives/popover-collapsible-alert-dialog-context-menu-slider.stories.tsx +124 -0
- package/src/primitives/popover-collapsible-alert-dialog-context-menu-slider.test.tsx +165 -0
- package/src/primitives/popover.tsx +45 -0
- package/src/primitives/separator.tsx +30 -0
- package/src/primitives/sheet.tsx +134 -0
- package/src/primitives/slider.tsx +71 -0
- package/src/primitives/theme-toggle.test.tsx +2 -1
- package/src/primitives/theme-toggle.tsx +2 -0
- package/src/primitives/tooltip.tsx +54 -0
- package/src/stories/theme-showcase.stories.tsx +2 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @tangle-network/ui
|
|
2
2
|
|
|
3
|
+
## 11.19.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 7828921: Add `Popover` (with `PopoverTrigger`, `PopoverContent`, `PopoverAnchor`, `PopoverClose`), `Collapsible` (with `CollapsibleTrigger`, `CollapsibleContent`), `AlertDialog` (with `AlertDialogTrigger`, `AlertDialogContent`, `AlertDialogHeader`, `AlertDialogFooter`, `AlertDialogTitle`, `AlertDialogDescription`, `AlertDialogAction` with a `tone="destructive"` option, `AlertDialogCancel`), `ContextMenu` (the `DropdownMenu` item set, plus `tone="destructive"` on `ContextMenuItem`) and `Slider` (one thumb per value, `thumbLabels` for accessible names) to `@tangle-network/ui/primitives`, on Brand tokens. Apps that kept shadcn CLI copies of these five can import them instead.
|
|
8
|
+
|
|
9
|
+
## 11.18.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- a53b246: Add the `super` and `super-light` named themes for SUPER: warm green-grey surfaces with a forest action colour. Button, selection and accent-surface tokens follow the forest fill. Status and category tones are inherited. `ThemeToggle` keeps the pair when it switches modes.
|
|
14
|
+
- a627055: Add `Checkbox`, `Separator`, `Sheet` (with `SheetTrigger`, `SheetContent`, `SheetHeader`, `SheetFooter`, `SheetTitle`, `SheetDescription`, `SheetClose`) and `Tooltip` (with `TooltipProvider`, `TooltipTrigger`, `TooltipContent`) to `@tangle-network/ui/primitives`, on Brand tokens with the shared focus treatment. Apps that kept shadcn CLI copies of these four can import them instead.
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- e05254d: `useTheme()` and `ThemeToggle` keep Brand's new `agents` / `agents-light` named pair within its family when switching mode.
|
|
19
|
+
|
|
3
20
|
## 11.17.0
|
|
4
21
|
|
|
5
22
|
### Minor Changes
|
package/dist/index.d.ts
CHANGED
|
@@ -40,6 +40,11 @@ import { AgentStreamEvent, AutomationStreamEvent, BotStreamEvent, ConnectionStat
|
|
|
40
40
|
import "./hooks.js";
|
|
41
41
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardTitleProps } from "./primitives/card.js";
|
|
42
42
|
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./primitives/dialog.js";
|
|
43
|
+
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from "./primitives/alert-dialog.js";
|
|
44
|
+
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./primitives/collapsible.js";
|
|
45
|
+
import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "./primitives/context-menu.js";
|
|
46
|
+
import { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger } from "./primitives/popover.js";
|
|
47
|
+
import { Slider } from "./primitives/slider.js";
|
|
43
48
|
import { Input, InputProps, Textarea, TextareaProps } from "./primitives/input.js";
|
|
44
49
|
import { Badge, BadgeProps, badgeVariants } from "./primitives/badge.js";
|
|
45
50
|
import { Avatar, AvatarFallback, AvatarImage } from "./primitives/avatar.js";
|
|
@@ -50,6 +55,10 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "./primitives/tabs.js";
|
|
|
50
55
|
import { SegmentedControl, SegmentedControlOption, SegmentedControlProps } from "./primitives/segmented-control.js";
|
|
51
56
|
import { Progress } from "./primitives/progress.js";
|
|
52
57
|
import { Switch } from "./primitives/switch.js";
|
|
58
|
+
import { Checkbox } from "./primitives/checkbox.js";
|
|
59
|
+
import { Separator } from "./primitives/separator.js";
|
|
60
|
+
import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger } from "./primitives/sheet.js";
|
|
61
|
+
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./primitives/tooltip.js";
|
|
53
62
|
import { Skeleton, SkeletonCard, SkeletonTable } from "./primitives/skeleton.js";
|
|
54
63
|
import { TextShimmer, TextShimmerProps } from "./primitives/text-shimmer.js";
|
|
55
64
|
import { Toast, ToastContainer, ToastProvider, useToast } from "./primitives/toast.js";
|
|
@@ -103,4 +112,4 @@ import { QuestionPreview, QuestionPreviewProps } from "./tool-previews/question-
|
|
|
103
112
|
import { DiffPreview, DiffPreviewProps } from "./tool-previews/diff-preview.js";
|
|
104
113
|
import { RedactedDocSegment, RedactedDocument, RedactedDocumentData, RedactedDocumentProps, RevealResult } from "./redaction/redacted-document.js";
|
|
105
114
|
import "./redaction.js";
|
|
106
|
-
export { ActiveProjectActivity, ActiveSessionActivityOptions, ActiveSessionConnectionOptions, ActiveSessionConnectionState, ActiveSessionReconnectState, ActiveSessionRecord, ActiveSessionStatus, ActiveSessionTransportMode, ActiveSessionsState, AgentBranding, AgentStreamEvent, AgentTimeline, type AgentTimelineArtifactItem, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, AppendUserMessageOptions, ApplySdkEventOptions, ArtifactPane, type ArtifactPaneProps, AuthHeader, type AuthHeaderProps, AuthUser, AutomationStreamEvent, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, BeginAssistantMessageOptions, BotStreamEvent, Button, type ButtonProps, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, Chip, type ChipProps, CodeBlock, type CodeBlockProps, CommandPreview, type CommandPreviewProps, CompleteAssistantMessageOptions, ConnectionState, CopyButton, CustomToolRenderer, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, type DiffPreviewProps, DisplayVariant, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, FileArtifactPane, type FileArtifactPaneProps, type FileFormat, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, FilterField, type FilterFieldProps, FinalTextPart, GitHubLoginButton, type GitHubLoginButtonProps, GlobResultsPreview, type GlobResultsPreviewProps, GrepResultsPreview, type GrepResultsPreviewProps, GroupedMessage, Heading, type HeadingProps, type HeadingVariant, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, Input, type InputProps, Label, LiveDuration, LoginLayout, type LoginLayoutProps, Logo, type LogoProps, Markdown, type MarkdownProps, MessageList, type MessageListProps, type MessageRole, MessageRun, MessageUser, Metric, type MetricProps, MetricStrip, type MetricStripProps, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, type OpenUIAction, type OpenUIActionsNode, OpenUIArtifactRenderer, type OpenUIArtifactRendererProps, type OpenUIBadgeNode, type OpenUICardNode, type OpenUICodeNode, type OpenUIComponentNode, type OpenUIGridNode, type OpenUIHeadingNode, type OpenUIKeyValueNode, type OpenUIMarkdownNode, type OpenUIPrimitive, type OpenUISchemaIssue, type OpenUISchemaValidation, type OpenUISeparatorNode, type OpenUIStackNode, type OpenUIStatNode, type OpenUITableNode, type OpenUITextNode, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Progress, QuestionPreview, type QuestionPreviewProps, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, ReasoningPart, type RedactedDocSegment, RedactedDocument, type RedactedDocumentData, type RedactedDocumentProps, RegisterActiveSessionOptions, type RevealResult, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars, Run, RunGroup, type RunGroupProps, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, RunStats, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SessionMessage, SessionPart, SessionProjectKey, type SessionUser, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TaskStreamEvent, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TerminalStreamEvent, TextPart, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, ThinkingIndicator, type ThinkingIndicatorProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime, Toolbar, type ToolbarProps, type UploadFile, UploadProgress, type UploadProgressProps, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, UserMenu, type UserMenuProps, UserMessage, type UserMessageProps, WebSearchPreview, type WebSearchPreviewProps, WriteFilePreview, type WriteFilePreviewProps, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, copyText, createAuthFetcher, detectFileFormat, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, messagesAtom, parseCsv, parseToolEvent, partMapAtom, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };
|
|
115
|
+
export { ActiveProjectActivity, ActiveSessionActivityOptions, ActiveSessionConnectionOptions, ActiveSessionConnectionState, ActiveSessionReconnectState, ActiveSessionRecord, ActiveSessionStatus, ActiveSessionTransportMode, ActiveSessionsState, AgentBranding, AgentStreamEvent, AgentTimeline, type AgentTimelineArtifactItem, type AgentTimelineCustomItem, type AgentTimelineItem, type AgentTimelineMessageItem, type AgentTimelineProps, type AgentTimelineStatusItem, type AgentTimelineTone, type AgentTimelineToolGroupItem, type AgentTimelineToolItem, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AppendUserMessageOptions, ApplySdkEventOptions, ArtifactPane, type ArtifactPaneProps, AuthHeader, type AuthHeaderProps, AuthUser, AutomationStreamEvent, Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, BeginAssistantMessageOptions, BotStreamEvent, Button, type ButtonProps, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, ChatContainer, type ChatContainerProps, ChatMessage, type ChatMessageProps, Checkbox, Chip, type ChipProps, CodeBlock, type CodeBlockProps, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, type CommandPreviewProps, CompleteAssistantMessageOptions, ConnectionState, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CustomToolRenderer, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, type DiffPreviewProps, DisplayVariant, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ExpandedToolDetail, type ExpandedToolDetailProps, type FeedSegment, FileArtifactPane, type FileArtifactPaneProps, type FileFormat, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, FilterField, type FilterFieldProps, FinalTextPart, GitHubLoginButton, type GitHubLoginButtonProps, GlobResultsPreview, type GlobResultsPreviewProps, GrepResultsPreview, type GrepResultsPreviewProps, GroupedMessage, Heading, type HeadingProps, type HeadingVariant, IconTile, type IconTileProps, InlineCode, type InlineCodeProps, InlineThinkingItem, type InlineThinkingItemProps, InlineToolItem, type InlineToolItemProps, Input, type InputProps, Label, LiveDuration, LoginLayout, type LoginLayoutProps, Logo, type LogoProps, Markdown, type MarkdownProps, MessageList, type MessageListProps, type MessageRole, MessageRun, MessageUser, Metric, type MetricProps, MetricStrip, type MetricStripProps, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, type OpenUIAction, type OpenUIActionsNode, OpenUIArtifactRenderer, type OpenUIArtifactRendererProps, type OpenUIBadgeNode, type OpenUICardNode, type OpenUICodeNode, type OpenUIComponentNode, type OpenUIGridNode, type OpenUIHeadingNode, type OpenUIKeyValueNode, type OpenUIMarkdownNode, type OpenUIPrimitive, type OpenUISchemaIssue, type OpenUISchemaValidation, type OpenUISeparatorNode, type OpenUIStackNode, type OpenUIStatNode, type OpenUITableNode, type OpenUITextNode, PageHeader, type PageHeaderProps, PageShell, type PageShellProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, type QuestionPreviewProps, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, ReasoningPart, type RedactedDocSegment, RedactedDocument, type RedactedDocumentData, type RedactedDocumentProps, RegisterActiveSessionOptions, type RevealResult, RichFileTree, type RichFileTreeGitEntry, type RichFileTreeGitStatus, type RichFileTreeProps, type RichFileTreeThemeVars, Run, RunGroup, type RunGroupProps, RunRowShell, type RunRowShellProps, type RunRowStatus, RunRowStatusDot, RunStats, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SessionMessage, SessionPart, SessionProjectKey, type SessionUser, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, type StatCardProps, StatusPill, type StatusPillProps, type StatusTone, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, type TableProps, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, TangleKnot, TaskStreamEvent, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TerminalStreamEvent, TextPart, TextShimmer, type TextShimmerProps, Textarea, type TextareaProps, ThemeToggle, ThinkingIndicator, type ThinkingIndicatorProps, type Toast, ToastContainer, ToastProvider, type Tone, type ToneClasses, type ToolCallData, ToolCallFeed, type ToolCallFeedProps, type ToolCallStatus, type ToolCallType, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime, Toolbar, type ToolbarProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UploadFile, UploadProgress, type UploadProgressProps, UseAuthOptions, UseAuthResult, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, UserMenu, type UserMenuProps, UserMessage, type UserMessageProps, WebSearchPreview, type WebSearchPreviewProps, WriteFilePreview, type WriteFilePreviewProps, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, copyText, createAuthFetcher, detectFileFormat, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, messagesAtom, parseCsv, parseToolEvent, partMapAtom, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };
|
package/dist/index.js
CHANGED
|
@@ -4,6 +4,11 @@ import { Button, buttonVariants } from "./primitives/button.js";
|
|
|
4
4
|
import { Heading } from "./primitives/heading.js";
|
|
5
5
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./primitives/card.js";
|
|
6
6
|
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./primitives/dialog.js";
|
|
7
|
+
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from "./primitives/alert-dialog.js";
|
|
8
|
+
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./primitives/collapsible.js";
|
|
9
|
+
import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from "./primitives/context-menu.js";
|
|
10
|
+
import { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger } from "./primitives/popover.js";
|
|
11
|
+
import { Slider } from "./primitives/slider.js";
|
|
7
12
|
import { Label } from "./primitives/label.js";
|
|
8
13
|
import { Input, Textarea } from "./primitives/input.js";
|
|
9
14
|
import { Badge, badgeVariants } from "./primitives/badge.js";
|
|
@@ -15,6 +20,10 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "./primitives/tabs.js";
|
|
|
15
20
|
import { SegmentedControl } from "./primitives/segmented-control.js";
|
|
16
21
|
import { Progress } from "./primitives/progress.js";
|
|
17
22
|
import { Switch } from "./primitives/switch.js";
|
|
23
|
+
import { Checkbox } from "./primitives/checkbox.js";
|
|
24
|
+
import { Separator } from "./primitives/separator.js";
|
|
25
|
+
import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger } from "./primitives/sheet.js";
|
|
26
|
+
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./primitives/tooltip.js";
|
|
18
27
|
import { Skeleton, SkeletonCard, SkeletonTable } from "./primitives/skeleton.js";
|
|
19
28
|
import { TextShimmer } from "./primitives/text-shimmer.js";
|
|
20
29
|
import { ToastContainer, ToastProvider, useToast } from "./primitives/toast.js";
|
|
@@ -87,4 +96,4 @@ import { addMessage, addParts, clearChat, isStreamingAtom, messagesAtom, partMap
|
|
|
87
96
|
import { copyText } from "./utils/copy-text.js";
|
|
88
97
|
import { timeAgo } from "./utils/time-ago.js";
|
|
89
98
|
import { RedactedDocument } from "./redaction/redacted-document.js";
|
|
90
|
-
export { AgentTimeline, ArtifactPane, AuthHeader, Avatar, AvatarFallback, AvatarImage, Badge, Button, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatContainer, ChatMessage, Chip, CodeBlock, CommandPreview, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ExpandedToolDetail, FileArtifactPane, FilePreview, FileTabs, FileTree, FilterField, GitHubLoginButton, GlobResultsPreview, GrepResultsPreview, Heading, IconTile, InlineCode, InlineThinkingItem, InlineToolItem, Input, Label, LiveDuration, LoginLayout, Logo, Markdown, MessageList, Metric, MetricStrip, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, PageHeader, PageShell, Progress, QuestionPreview, RealtimeSessionRegistry, RedactedDocument, RichFileTree, RunGroup, RunRowShell, RunRowStatusDot, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatusPill, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ThinkingIndicator, ToastContainer, ToastProvider, ToolCallFeed, Toolbar, UploadProgress, UserMenu, UserMessage, WebSearchPreview, WriteFilePreview, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, copyText, createAuthFetcher, detectFileFormat, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, messagesAtom, parseCsv, parseToolEvent, partMapAtom, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };
|
|
99
|
+
export { AgentTimeline, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, ArtifactPane, AuthHeader, Avatar, AvatarFallback, AvatarImage, Badge, Button, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatContainer, ChatMessage, Checkbox, Chip, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, CommandPreview, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffPreview, DropZone, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, ExpandedToolDetail, FileArtifactPane, FilePreview, FileTabs, FileTree, FilterField, GitHubLoginButton, GlobResultsPreview, GrepResultsPreview, Heading, IconTile, InlineCode, InlineThinkingItem, InlineToolItem, Input, Label, LiveDuration, LoginLayout, Logo, Markdown, MessageList, Metric, MetricStrip, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, PageHeader, PageShell, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, RealtimeSessionRegistry, RedactedDocument, RichFileTree, RunGroup, RunRowShell, RunRowStatusDot, SegmentedControl, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarDropZone, Skeleton, SkeletonCard, SkeletonTable, Slider, StatCard, StatusPill, Switch, TONE_CLASSES, TOOL_CATEGORY_ICONS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TangleKnot, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, TextShimmer, Textarea, ThemeToggle, ThinkingIndicator, ToastContainer, ToastProvider, ToolCallFeed, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, UserMenu, UserMessage, WebSearchPreview, WriteFilePreview, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, copyText, createAuthFetcher, detectFileFormat, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, messagesAtom, parseCsv, parseToolEvent, partMapAtom, registerActiveSession, resetActiveSessions, resolveFilePreviewKind, setActiveSessionAttention, setActiveSessionConnection, setActiveSessionError, setActiveSessionRunning, setForegroundActiveSession, timeAgo, toneFor, truncateText, unregisterActiveSession, updateActiveSessionMeta, updatePart, useActiveSession, useActiveSessions, useActiveSessionsState, useApiKey, useAuth, useAutoScroll, useDropdownMenu, useHasBackgroundRunningSessions, useLiveTime, useNavbarSessions, useProjectActivity, useProjectSessions, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useSessionsByActivity, useTheme, useToast, useToolCallStream, useTotalRunningSessions, validateOpenUIJsonArtifact, validateOpenUIJsonNode };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
|
|
3
|
+
//#region src/primitives/alert-dialog.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* A dialog that interrupts for a decision. Unlike `Dialog` it has no close
|
|
6
|
+
* button and ignores outside clicks; Escape and `AlertDialogCancel` dismiss it.
|
|
7
|
+
* Radix focuses `AlertDialogCancel` on open, so a destructive action is never
|
|
8
|
+
* under the Enter key when the dialog appears.
|
|
9
|
+
*/
|
|
10
|
+
declare const AlertDialog: React.FC<AlertDialogPrimitive.AlertDialogProps>;
|
|
11
|
+
declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
12
|
+
declare const AlertDialogPortal: React.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
|
|
13
|
+
declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
14
|
+
declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
15
|
+
declare function AlertDialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
|
|
16
|
+
declare namespace AlertDialogHeader {
|
|
17
|
+
var displayName: string;
|
|
18
|
+
}
|
|
19
|
+
declare function AlertDialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
|
|
20
|
+
declare namespace AlertDialogFooter {
|
|
21
|
+
var displayName: string;
|
|
22
|
+
}
|
|
23
|
+
declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
24
|
+
declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
|
|
25
|
+
/**
|
|
26
|
+
* The confirming action. `tone="destructive"` paints it with the danger fill;
|
|
27
|
+
* the default is the primary button.
|
|
28
|
+
*/
|
|
29
|
+
declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
|
|
30
|
+
tone?: "default" | "destructive";
|
|
31
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
32
|
+
declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
33
|
+
//#endregion
|
|
34
|
+
export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/utils.js";
|
|
3
|
+
import { buttonVariants } from "./button.js";
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
|
|
7
|
+
//#region src/primitives/alert-dialog.tsx
|
|
8
|
+
/**
|
|
9
|
+
* A dialog that interrupts for a decision. Unlike `Dialog` it has no close
|
|
10
|
+
* button and ignores outside clicks; Escape and `AlertDialogCancel` dismiss it.
|
|
11
|
+
* Radix focuses `AlertDialogCancel` on open, so a destructive action is never
|
|
12
|
+
* under the Enter key when the dialog appears.
|
|
13
|
+
*/
|
|
14
|
+
const AlertDialog = AlertDialogPrimitive.Root;
|
|
15
|
+
const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
|
|
16
|
+
const AlertDialogPortal = AlertDialogPrimitive.Portal;
|
|
17
|
+
const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Overlay, {
|
|
18
|
+
ref,
|
|
19
|
+
className: cn("fixed inset-0 z-50 bg-black/40", "data-[state=closed]:animate-out data-[state=open]:animate-in", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className),
|
|
20
|
+
...props
|
|
21
|
+
}));
|
|
22
|
+
AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
|
|
23
|
+
const AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialogPrimitive.Content, {
|
|
24
|
+
ref,
|
|
25
|
+
className: cn("fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] sm:max-w-lg", "gap-4 rounded-lg border border-border bg-card p-6 text-foreground shadow-lg duration-200 outline-hidden", "data-[state=closed]:animate-out data-[state=open]:animate-in", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "motion-reduce:animate-none", className),
|
|
26
|
+
...props
|
|
27
|
+
})] }));
|
|
28
|
+
AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
|
|
29
|
+
const AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
|
|
30
|
+
className: cn("flex flex-col gap-2 text-center sm:text-left", className),
|
|
31
|
+
...props
|
|
32
|
+
});
|
|
33
|
+
AlertDialogHeader.displayName = "AlertDialogHeader";
|
|
34
|
+
const AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
|
|
35
|
+
className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
|
|
36
|
+
...props
|
|
37
|
+
});
|
|
38
|
+
AlertDialogFooter.displayName = "AlertDialogFooter";
|
|
39
|
+
const AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, {
|
|
40
|
+
ref,
|
|
41
|
+
className: cn("font-semibold text-lg leading-snug [overflow-wrap:anywhere]", className),
|
|
42
|
+
...props
|
|
43
|
+
}));
|
|
44
|
+
AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
|
|
45
|
+
const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, {
|
|
46
|
+
ref,
|
|
47
|
+
className: cn("text-muted-foreground text-sm [overflow-wrap:anywhere]", className),
|
|
48
|
+
...props
|
|
49
|
+
}));
|
|
50
|
+
AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
|
|
51
|
+
/**
|
|
52
|
+
* The confirming action. `tone="destructive"` paints it with the danger fill;
|
|
53
|
+
* the default is the primary button.
|
|
54
|
+
*/
|
|
55
|
+
const AlertDialogAction = React.forwardRef(({ className, tone = "default", ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, {
|
|
56
|
+
ref,
|
|
57
|
+
className: cn(buttonVariants({ variant: tone === "destructive" ? "destructive" : "default" }), className),
|
|
58
|
+
...props
|
|
59
|
+
}));
|
|
60
|
+
AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
|
|
61
|
+
const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, {
|
|
62
|
+
ref,
|
|
63
|
+
className: cn(buttonVariants({ variant: "outline" }), className),
|
|
64
|
+
...props
|
|
65
|
+
}));
|
|
66
|
+
AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
|
|
67
|
+
//#endregion
|
|
68
|
+
export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
|
|
3
|
+
//#region src/primitives/checkbox.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* A two- or three-state checkbox. An indeterminate state, controlled
|
|
6
|
+
* (`checked`) or uncontrolled (`defaultChecked`), draws a dash.
|
|
7
|
+
* Pair it with a `Label` through `id`/`htmlFor`; `aria-invalid` paints the
|
|
8
|
+
* danger hairline.
|
|
9
|
+
*/
|
|
10
|
+
declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
11
|
+
//#endregion
|
|
12
|
+
export { Checkbox };
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { focusRing } from "../lib/focus.js";
|
|
3
|
+
import { cn } from "../lib/utils.js";
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
import { Check, Minus } from "lucide-react";
|
|
7
|
+
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
|
|
8
|
+
//#region src/primitives/checkbox.tsx
|
|
9
|
+
/**
|
|
10
|
+
* A two- or three-state checkbox. An indeterminate state, controlled
|
|
11
|
+
* (`checked`) or uncontrolled (`defaultChecked`), draws a dash.
|
|
12
|
+
* Pair it with a `Label` through `id`/`htmlFor`; `aria-invalid` paints the
|
|
13
|
+
* danger hairline.
|
|
14
|
+
*/
|
|
15
|
+
const Checkbox = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(CheckboxPrimitive.Root, {
|
|
16
|
+
ref,
|
|
17
|
+
className: cn("peer group/checkbox inline-grid size-4 shrink-0 cursor-pointer place-content-center rounded-[4px] border border-[var(--border-strong)] bg-transparent transition-[background-color,border-color,box-shadow] duration-150 ease-out", "disabled:cursor-not-allowed disabled:opacity-50", "aria-invalid:border-[var(--surface-danger-border)]", "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", "data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground", focusRing, className),
|
|
18
|
+
...props,
|
|
19
|
+
children: /* @__PURE__ */ jsxs(CheckboxPrimitive.Indicator, {
|
|
20
|
+
className: "grid place-content-center text-current",
|
|
21
|
+
children: [/* @__PURE__ */ jsx(Check, {
|
|
22
|
+
"aria-hidden": "true",
|
|
23
|
+
className: "size-3.5 group-data-[state=indeterminate]/checkbox:hidden",
|
|
24
|
+
strokeWidth: 3
|
|
25
|
+
}), /* @__PURE__ */ jsx(Minus, {
|
|
26
|
+
"aria-hidden": "true",
|
|
27
|
+
className: "hidden size-3.5 group-data-[state=indeterminate]/checkbox:block",
|
|
28
|
+
strokeWidth: 3
|
|
29
|
+
})]
|
|
30
|
+
})
|
|
31
|
+
}));
|
|
32
|
+
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
|
|
33
|
+
//#endregion
|
|
34
|
+
export { Checkbox };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
|
|
2
|
+
//#region src/primitives/collapsible.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* Unstyled show/hide region. The trigger carries `aria-expanded` and
|
|
5
|
+
* `data-state`, so a chevron can rotate with
|
|
6
|
+
* `group-data-[state=open]:rotate-90` without local state.
|
|
7
|
+
*/
|
|
8
|
+
declare const Collapsible: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
9
|
+
declare const CollapsibleTrigger: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
10
|
+
declare const CollapsibleContent: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
11
|
+
//#endregion
|
|
12
|
+
export { Collapsible, CollapsibleContent, CollapsibleTrigger };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
|
|
3
|
+
//#region src/primitives/collapsible.tsx
|
|
4
|
+
/**
|
|
5
|
+
* Unstyled show/hide region. The trigger carries `aria-expanded` and
|
|
6
|
+
* `data-state`, so a chevron can rotate with
|
|
7
|
+
* `group-data-[state=open]:rotate-90` without local state.
|
|
8
|
+
*/
|
|
9
|
+
const Collapsible = CollapsiblePrimitive.Root;
|
|
10
|
+
const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
|
|
11
|
+
const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
|
|
12
|
+
//#endregion
|
|
13
|
+
export { Collapsible, CollapsibleContent, CollapsibleTrigger };
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
|
|
3
|
+
//#region src/primitives/context-menu.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* Right-click (and long-press) menu with the same surface and item styles as
|
|
6
|
+
* `DropdownMenu`. Anything reachable here must also be reachable from a
|
|
7
|
+
* visible control, because touch and keyboard users rarely open it.
|
|
8
|
+
*/
|
|
9
|
+
declare const ContextMenu: React.FC<ContextMenuPrimitive.ContextMenuProps>;
|
|
10
|
+
declare const ContextMenuTrigger: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuTriggerProps & React.RefAttributes<HTMLSpanElement>>;
|
|
11
|
+
declare const ContextMenuGroup: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
12
|
+
declare const ContextMenuPortal: React.FC<ContextMenuPrimitive.ContextMenuPortalProps>;
|
|
13
|
+
declare const ContextMenuSub: React.FC<ContextMenuPrimitive.ContextMenuSubProps>;
|
|
14
|
+
declare const ContextMenuRadioGroup: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
15
|
+
declare const ContextMenuSubTrigger: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
16
|
+
inset?: boolean;
|
|
17
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
18
|
+
declare const ContextMenuSubContent: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
19
|
+
declare const ContextMenuContent: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
20
|
+
/** `tone="destructive"` paints the label and icon with the danger text token. */
|
|
21
|
+
declare const ContextMenuItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
22
|
+
inset?: boolean;
|
|
23
|
+
tone?: "default" | "destructive";
|
|
24
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
25
|
+
declare const ContextMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
26
|
+
declare const ContextMenuRadioItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
27
|
+
declare const ContextMenuLabel: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
28
|
+
inset?: boolean;
|
|
29
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
30
|
+
declare const ContextMenuSeparator: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
31
|
+
declare function ContextMenuShortcut({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
|
|
32
|
+
declare namespace ContextMenuShortcut {
|
|
33
|
+
var displayName: string;
|
|
34
|
+
}
|
|
35
|
+
//#endregion
|
|
36
|
+
export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/utils.js";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
import { Check, ChevronRight, Circle } from "lucide-react";
|
|
6
|
+
import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
|
|
7
|
+
//#region src/primitives/context-menu.tsx
|
|
8
|
+
/**
|
|
9
|
+
* Right-click (and long-press) menu with the same surface and item styles as
|
|
10
|
+
* `DropdownMenu`. Anything reachable here must also be reachable from a
|
|
11
|
+
* visible control, because touch and keyboard users rarely open it.
|
|
12
|
+
*/
|
|
13
|
+
const ContextMenu = ContextMenuPrimitive.Root;
|
|
14
|
+
const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
|
|
15
|
+
const ContextMenuGroup = ContextMenuPrimitive.Group;
|
|
16
|
+
const ContextMenuPortal = ContextMenuPrimitive.Portal;
|
|
17
|
+
const ContextMenuSub = ContextMenuPrimitive.Sub;
|
|
18
|
+
const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
|
|
19
|
+
const menuSurface = cn("z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-card p-1 text-foreground shadow-[var(--shadow-card)]", "data-[state=closed]:animate-out data-[state=open]:animate-in", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "motion-reduce:animate-none");
|
|
20
|
+
const menuItem = "relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none transition-colors focus:bg-muted/50 focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0";
|
|
21
|
+
const ContextMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.SubTrigger, {
|
|
22
|
+
ref,
|
|
23
|
+
className: cn(menuItem, "data-[state=open]:bg-muted/50", inset && "pl-8", className),
|
|
24
|
+
...props,
|
|
25
|
+
children: [children, /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto" })]
|
|
26
|
+
}));
|
|
27
|
+
ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
|
|
28
|
+
const ContextMenuSubContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(ContextMenuPrimitive.SubContent, {
|
|
29
|
+
ref,
|
|
30
|
+
className: cn(menuSurface, className),
|
|
31
|
+
...props
|
|
32
|
+
}) }));
|
|
33
|
+
ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
|
|
34
|
+
const ContextMenuContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(ContextMenuPrimitive.Content, {
|
|
35
|
+
ref,
|
|
36
|
+
className: cn(menuSurface, className),
|
|
37
|
+
...props
|
|
38
|
+
}) }));
|
|
39
|
+
ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
|
|
40
|
+
/** `tone="destructive"` paints the label and icon with the danger text token. */
|
|
41
|
+
const ContextMenuItem = React.forwardRef(({ className, inset, tone = "default", ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Item, {
|
|
42
|
+
ref,
|
|
43
|
+
className: cn(menuItem, tone === "destructive" && "text-destructive focus:bg-destructive/10 focus:text-destructive", inset && "pl-8", className),
|
|
44
|
+
...props
|
|
45
|
+
}));
|
|
46
|
+
ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
|
|
47
|
+
const ContextMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.CheckboxItem, {
|
|
48
|
+
ref,
|
|
49
|
+
className: cn(menuItem, "pl-8", className),
|
|
50
|
+
checked,
|
|
51
|
+
...props,
|
|
52
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
53
|
+
className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
|
|
54
|
+
children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, {}) })
|
|
55
|
+
}), children]
|
|
56
|
+
}));
|
|
57
|
+
ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
|
|
58
|
+
const ContextMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.RadioItem, {
|
|
59
|
+
ref,
|
|
60
|
+
className: cn(menuItem, "pl-8", className),
|
|
61
|
+
...props,
|
|
62
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
63
|
+
className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
|
|
64
|
+
children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "!size-2 fill-current" }) })
|
|
65
|
+
}), children]
|
|
66
|
+
}));
|
|
67
|
+
ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
|
|
68
|
+
const ContextMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Label, {
|
|
69
|
+
ref,
|
|
70
|
+
className: cn("px-2 py-1.5 font-semibold text-sm", inset && "pl-8", className),
|
|
71
|
+
...props
|
|
72
|
+
}));
|
|
73
|
+
ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
|
|
74
|
+
const ContextMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Separator, {
|
|
75
|
+
ref,
|
|
76
|
+
className: cn("-mx-1 my-1 h-px bg-border", className),
|
|
77
|
+
...props
|
|
78
|
+
}));
|
|
79
|
+
ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
|
|
80
|
+
const ContextMenuShortcut = ({ className, ...props }) => /* @__PURE__ */ jsx("span", {
|
|
81
|
+
className: cn("ml-auto text-muted-foreground text-xs tracking-widest", className),
|
|
82
|
+
...props
|
|
83
|
+
});
|
|
84
|
+
ContextMenuShortcut.displayName = "ContextMenuShortcut";
|
|
85
|
+
//#endregion
|
|
86
|
+
export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
3
|
+
//#region src/primitives/popover.d.ts
|
|
4
|
+
declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
|
|
5
|
+
declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
6
|
+
declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
|
|
7
|
+
declare const PopoverClose: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>;
|
|
8
|
+
/**
|
|
9
|
+
* A floating card anchored to its trigger, on the same surface, border and
|
|
10
|
+
* shadow as `DropdownMenuContent`. Width defaults to 18rem; pass a width class
|
|
11
|
+
* for wider content and keep long text wrapping inside it.
|
|
12
|
+
*/
|
|
13
|
+
declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
14
|
+
//#endregion
|
|
15
|
+
export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger };
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/utils.js";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
6
|
+
//#region src/primitives/popover.tsx
|
|
7
|
+
const Popover = PopoverPrimitive.Root;
|
|
8
|
+
const PopoverTrigger = PopoverPrimitive.Trigger;
|
|
9
|
+
const PopoverAnchor = PopoverPrimitive.Anchor;
|
|
10
|
+
const PopoverClose = PopoverPrimitive.Close;
|
|
11
|
+
/**
|
|
12
|
+
* A floating card anchored to its trigger, on the same surface, border and
|
|
13
|
+
* shadow as `DropdownMenuContent`. Width defaults to 18rem; pass a width class
|
|
14
|
+
* for wider content and keep long text wrapping inside it.
|
|
15
|
+
*/
|
|
16
|
+
const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
|
|
17
|
+
ref,
|
|
18
|
+
align,
|
|
19
|
+
sideOffset,
|
|
20
|
+
className: cn("z-50 w-72 max-w-[calc(100vw-2rem)] origin-(--radix-popover-content-transform-origin) rounded-xl border border-border bg-card p-4 text-foreground shadow-[var(--shadow-card)] outline-hidden", "data-[state=closed]:animate-out data-[state=open]:animate-in", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", "motion-reduce:animate-none", className),
|
|
21
|
+
...props
|
|
22
|
+
}) }));
|
|
23
|
+
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
|
|
24
|
+
//#endregion
|
|
25
|
+
export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as SeparatorPrimitive from "@radix-ui/react-separator";
|
|
3
|
+
//#region src/primitives/separator.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* A hairline rule on the border token. Decorative by default, so assistive
|
|
6
|
+
* technology skips it; pass `decorative={false}` when it separates groups a
|
|
7
|
+
* screen reader should announce.
|
|
8
|
+
*/
|
|
9
|
+
declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
10
|
+
//#endregion
|
|
11
|
+
export { Separator };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/utils.js";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
import * as SeparatorPrimitive from "@radix-ui/react-separator";
|
|
6
|
+
//#region src/primitives/separator.tsx
|
|
7
|
+
/**
|
|
8
|
+
* A hairline rule on the border token. Decorative by default, so assistive
|
|
9
|
+
* technology skips it; pass `decorative={false}` when it separates groups a
|
|
10
|
+
* screen reader should announce.
|
|
11
|
+
*/
|
|
12
|
+
const Separator = React.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(SeparatorPrimitive.Root, {
|
|
13
|
+
ref,
|
|
14
|
+
decorative,
|
|
15
|
+
orientation,
|
|
16
|
+
className: cn("shrink-0 bg-border", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className),
|
|
17
|
+
...props
|
|
18
|
+
}));
|
|
19
|
+
Separator.displayName = SeparatorPrimitive.Root.displayName;
|
|
20
|
+
//#endregion
|
|
21
|
+
export { Separator };
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { VariantProps } from "class-variance-authority";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import * as SheetPrimitive from "@radix-ui/react-dialog";
|
|
4
|
+
//#region src/primitives/sheet.d.ts
|
|
5
|
+
/** A dialog that slides in from an edge: a mobile nav drawer or a side panel. */
|
|
6
|
+
declare const Sheet: React.FC<SheetPrimitive.DialogProps>;
|
|
7
|
+
declare const SheetTrigger: React.ForwardRefExoticComponent<SheetPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
8
|
+
declare const SheetClose: React.ForwardRefExoticComponent<SheetPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
|
|
9
|
+
declare const SheetPortal: React.FC<SheetPrimitive.DialogPortalProps>;
|
|
10
|
+
declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
11
|
+
declare const SheetContent: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
|
|
12
|
+
side?: "bottom" | "left" | "right" | "top" | null | undefined;
|
|
13
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
|
|
14
|
+
/** Hide only the built-in close button; Escape and outside clicks still dismiss. */
|
|
15
|
+
hideCloseButton?: boolean;
|
|
16
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
17
|
+
declare function SheetHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
|
|
18
|
+
declare namespace SheetHeader {
|
|
19
|
+
var displayName: string;
|
|
20
|
+
}
|
|
21
|
+
declare function SheetFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
|
|
22
|
+
declare namespace SheetFooter {
|
|
23
|
+
var displayName: string;
|
|
24
|
+
}
|
|
25
|
+
declare const SheetTitle: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
26
|
+
declare const SheetDescription: React.ForwardRefExoticComponent<Omit<SheetPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
|
|
27
|
+
//#endregion
|
|
28
|
+
export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger };
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { focusRing } from "../lib/focus.js";
|
|
3
|
+
import { cn } from "../lib/utils.js";
|
|
4
|
+
import { cva } from "class-variance-authority";
|
|
5
|
+
import * as React from "react";
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
import * as SheetPrimitive from "@radix-ui/react-dialog";
|
|
8
|
+
import { X } from "lucide-react";
|
|
9
|
+
//#region src/primitives/sheet.tsx
|
|
10
|
+
/** A dialog that slides in from an edge: a mobile nav drawer or a side panel. */
|
|
11
|
+
const Sheet = SheetPrimitive.Root;
|
|
12
|
+
const SheetTrigger = SheetPrimitive.Trigger;
|
|
13
|
+
const SheetClose = SheetPrimitive.Close;
|
|
14
|
+
const SheetPortal = SheetPrimitive.Portal;
|
|
15
|
+
const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Overlay, {
|
|
16
|
+
ref,
|
|
17
|
+
className: cn("fixed inset-0 z-50 bg-black/40", "data-[state=closed]:animate-out data-[state=open]:animate-in", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className),
|
|
18
|
+
...props
|
|
19
|
+
}));
|
|
20
|
+
SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
|
|
21
|
+
const sheetVariants = cva([
|
|
22
|
+
"fixed z-50 flex flex-col gap-4 border-border bg-card shadow-lg",
|
|
23
|
+
"data-[state=closed]:animate-out data-[state=open]:animate-in",
|
|
24
|
+
"data-[state=closed]:duration-200 data-[state=open]:duration-300 ease-out motion-reduce:animate-none"
|
|
25
|
+
], {
|
|
26
|
+
variants: { side: {
|
|
27
|
+
right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
|
|
28
|
+
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
|
|
29
|
+
top: "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
|
|
30
|
+
bottom: "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"
|
|
31
|
+
} },
|
|
32
|
+
defaultVariants: { side: "right" }
|
|
33
|
+
});
|
|
34
|
+
const SheetContent = React.forwardRef(({ className, children, side = "right", hideCloseButton = false, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(SheetPrimitive.Content, {
|
|
35
|
+
ref,
|
|
36
|
+
className: cn(sheetVariants({ side }), className),
|
|
37
|
+
...props,
|
|
38
|
+
children: [children, !hideCloseButton && /* @__PURE__ */ jsxs(SheetPrimitive.Close, {
|
|
39
|
+
className: cn("absolute top-4 right-4 rounded-sm text-muted-foreground opacity-70 transition-[opacity,box-shadow] hover:opacity-100 focus-visible:opacity-100 disabled:pointer-events-none", focusRing),
|
|
40
|
+
children: [/* @__PURE__ */ jsx(X, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
|
|
41
|
+
className: "sr-only",
|
|
42
|
+
children: "Close"
|
|
43
|
+
})]
|
|
44
|
+
})]
|
|
45
|
+
})] }));
|
|
46
|
+
SheetContent.displayName = SheetPrimitive.Content.displayName;
|
|
47
|
+
const SheetHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
|
|
48
|
+
className: cn("flex flex-col gap-1.5 p-4 pr-10", className),
|
|
49
|
+
...props
|
|
50
|
+
});
|
|
51
|
+
SheetHeader.displayName = "SheetHeader";
|
|
52
|
+
const SheetFooter = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
|
|
53
|
+
className: cn("mt-auto flex flex-col gap-2 p-4", className),
|
|
54
|
+
...props
|
|
55
|
+
});
|
|
56
|
+
SheetFooter.displayName = "SheetFooter";
|
|
57
|
+
const SheetTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Title, {
|
|
58
|
+
ref,
|
|
59
|
+
className: cn("font-semibold text-base text-foreground leading-tight", className),
|
|
60
|
+
...props
|
|
61
|
+
}));
|
|
62
|
+
SheetTitle.displayName = SheetPrimitive.Title.displayName;
|
|
63
|
+
const SheetDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Description, {
|
|
64
|
+
ref,
|
|
65
|
+
className: cn("text-muted-foreground text-sm", className),
|
|
66
|
+
...props
|
|
67
|
+
}));
|
|
68
|
+
SheetDescription.displayName = SheetPrimitive.Description.displayName;
|
|
69
|
+
//#endregion
|
|
70
|
+
export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger };
|