@tangle-network/ui 11.28.2 → 11.30.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 +12 -0
- package/dist/index.d.ts +5 -1
- package/dist/index.js +6 -2
- package/dist/lib/control-presentation.d.ts +10 -0
- package/dist/lib/control-presentation.js +1 -1
- package/dist/primitives/button.d.ts +1 -1
- package/dist/primitives/button.js +3 -2
- package/dist/primitives/calendar.d.ts +38 -0
- package/dist/primitives/calendar.js +186 -0
- package/dist/primitives/date-picker.d.ts +32 -0
- package/dist/primitives/date-picker.js +90 -0
- package/dist/primitives/radio-group.d.ts +13 -0
- package/dist/primitives/radio-group.js +28 -0
- package/dist/primitives/time-select.d.ts +27 -0
- package/dist/primitives/time-select.js +51 -0
- package/dist/primitives/toolbar.js +1 -1
- package/dist/primitives.d.ts +5 -1
- package/dist/primitives.js +6 -2
- package/package.json +3 -2
- package/src/lib/control-presentation.ts +3 -1
- package/src/primitives/button.tsx +9 -3
- package/src/primitives/calendar.tsx +242 -0
- package/src/primitives/control-presentation.test.tsx +2 -2
- package/src/primitives/date-picker.stories.tsx +55 -0
- package/src/primitives/date-picker.test.tsx +146 -0
- package/src/primitives/date-picker.tsx +126 -0
- package/src/primitives/index.ts +9 -0
- package/src/primitives/radio-group.test.tsx +26 -0
- package/src/primitives/radio-group.tsx +43 -0
- package/src/primitives/time-select.tsx +66 -0
- package/src/primitives/toolbar.tsx +3 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @tangle-network/ui
|
|
2
2
|
|
|
3
|
+
## 11.30.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- e53977b: Add `RadioGroup` and `RadioGroupItem` (Radix), drawn like `Checkbox` so single- and multiple-choice lists read as one family, to replace native radio inputs.
|
|
8
|
+
|
|
9
|
+
## 11.29.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- 1cc87f0: Add `Calendar` (a keyboard-navigable month grid), `DatePicker` (a control-scale trigger that opens it and reports `YYYY-MM-DD`, shown in the viewer's locale instead of a `mm/dd/yyyy` mask) and `TimeSelect` (a Select of `step`-minute slots reporting `HH:MM`) to replace native date and time inputs. `Button` gains `variant="bare"`: the shared focus ring and disabled behavior for rows, tiles and pills that draw their own layout. Fields read their fill from `--field-surface` (default the field well), and `Toolbar` sets it to the card surface, so filters on the page canvas render as raised controls.
|
|
14
|
+
|
|
3
15
|
## 11.28.2
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
package/dist/index.d.ts
CHANGED
|
@@ -54,6 +54,9 @@ import { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger }
|
|
|
54
54
|
import { Slider } from "./primitives/slider.js";
|
|
55
55
|
import { Input, InputProps, Textarea, TextareaProps } from "./primitives/input.js";
|
|
56
56
|
import { HelpText, HelpTextProps } from "./primitives/help-text.js";
|
|
57
|
+
import { Calendar, CalendarDate, CalendarProps, formatCalendarDate, localToday, parseCalendarDate } from "./primitives/calendar.js";
|
|
58
|
+
import { DatePicker, DatePickerProps } from "./primitives/date-picker.js";
|
|
59
|
+
import { TimeSelect, TimeSelectProps } from "./primitives/time-select.js";
|
|
57
60
|
import { Badge, BadgeProps, badgeVariants } from "./primitives/badge.js";
|
|
58
61
|
import { Avatar, AvatarFallback, AvatarImage } from "./primitives/avatar.js";
|
|
59
62
|
import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./primitives/dropdown-menu.js";
|
|
@@ -64,6 +67,7 @@ import { SegmentedControl, SegmentedControlOption, SegmentedControlProps } from
|
|
|
64
67
|
import { Progress } from "./primitives/progress.js";
|
|
65
68
|
import { Switch } from "./primitives/switch.js";
|
|
66
69
|
import { Checkbox } from "./primitives/checkbox.js";
|
|
70
|
+
import { RadioGroup, RadioGroupItem } from "./primitives/radio-group.js";
|
|
67
71
|
import { Separator } from "./primitives/separator.js";
|
|
68
72
|
import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger } from "./primitives/sheet.js";
|
|
69
73
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./primitives/tooltip.js";
|
|
@@ -120,4 +124,4 @@ import { QuestionPreview, QuestionPreviewProps } from "./tool-previews/question-
|
|
|
120
124
|
import { DiffPreview, DiffPreviewProps } from "./tool-previews/diff-preview.js";
|
|
121
125
|
import { RedactedDocSegment, RedactedDocument, RedactedDocumentData, RedactedDocumentProps, RevealResult } from "./redaction/redacted-document.js";
|
|
122
126
|
import "./redaction.js";
|
|
123
|
-
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, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, 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, ChatAuthor, 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, FileCard, type FileCardProps, type FileDetails, type FileFormat, FileList, type FileListItem, type FileListProps, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, type FileUploader, FilterField, type FilterFieldProps, FinalTextPart, GitHubLoginButton, type GitHubLoginButtonProps, GlobResultsPreview, type GlobResultsPreviewProps, GrepResultsPreview, type GrepResultsPreviewProps, GroupedMessage, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, 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, MessageAuthor, type MessageAuthorProps, 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, Pagination, type PaginationProps, PdfViewer, type PdfViewerConfig, type PdfViewerProps, 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, configurePdfViewer, 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, isViewerMessage, 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 };
|
|
127
|
+
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, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTone, 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, Calendar, type CalendarDate, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type CardTitleProps, type CategoryTone, ChatAuthor, 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, DatePicker, type DatePickerProps, 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, FileCard, type FileCardProps, type FileDetails, type FileFormat, FileList, type FileListItem, type FileListProps, type FileNode, FilePreview, type FilePreviewKind, type FilePreviewProps, type FileTabData, FileTabs, type FileTabsProps, FileTree, type FileTreeProps, type FileTreeVisibilityOptions, type FileUploader, FilterField, type FilterFieldProps, FinalTextPart, GitHubLoginButton, type GitHubLoginButtonProps, GlobResultsPreview, type GlobResultsPreviewProps, GrepResultsPreview, type GrepResultsPreviewProps, GroupedMessage, Heading, type HeadingProps, type HeadingVariant, HelpText, type HelpTextProps, 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, MessageAuthor, type MessageAuthorProps, 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, Pagination, type PaginationProps, PdfViewer, type PdfViewerConfig, type PdfViewerProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, type QuestionPreviewProps, RadioGroup, RadioGroupItem, 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, TimeSelect, type TimeSelectProps, 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, configurePdfViewer, copyText, createAuthFetcher, detectFileFormat, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatCalendarDate, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, isViewerMessage, localToday, messagesAtom, parseCalendarDate, 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
|
@@ -12,16 +12,20 @@ import { Slider } from "./primitives/slider.js";
|
|
|
12
12
|
import { HelpText } from "./primitives/help-text.js";
|
|
13
13
|
import { Label } from "./primitives/label.js";
|
|
14
14
|
import { Input, Textarea } from "./primitives/input.js";
|
|
15
|
+
import { Calendar, formatCalendarDate, localToday, parseCalendarDate } from "./primitives/calendar.js";
|
|
16
|
+
import { DatePicker } from "./primitives/date-picker.js";
|
|
17
|
+
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./primitives/select.js";
|
|
18
|
+
import { TimeSelect } from "./primitives/time-select.js";
|
|
15
19
|
import { Badge, badgeVariants } from "./primitives/badge.js";
|
|
16
20
|
import { Avatar, AvatarFallback, AvatarImage } from "./primitives/avatar.js";
|
|
17
21
|
import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./primitives/dropdown-menu.js";
|
|
18
|
-
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from "./primitives/select.js";
|
|
19
22
|
import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./primitives/table.js";
|
|
20
23
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./primitives/tabs.js";
|
|
21
24
|
import { SegmentedControl } from "./primitives/segmented-control.js";
|
|
22
25
|
import { Progress } from "./primitives/progress.js";
|
|
23
26
|
import { Switch } from "./primitives/switch.js";
|
|
24
27
|
import { Checkbox } from "./primitives/checkbox.js";
|
|
28
|
+
import { RadioGroup, RadioGroupItem } from "./primitives/radio-group.js";
|
|
25
29
|
import { Separator } from "./primitives/separator.js";
|
|
26
30
|
import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger } from "./primitives/sheet.js";
|
|
27
31
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./primitives/tooltip.js";
|
|
@@ -104,4 +108,4 @@ import { addMessage, addParts, clearChat, isStreamingAtom, messagesAtom, partMap
|
|
|
104
108
|
import { copyText } from "./utils/copy-text.js";
|
|
105
109
|
import { timeAgo } from "./utils/time-ago.js";
|
|
106
110
|
import { RedactedDocument } from "./redaction/redacted-document.js";
|
|
107
|
-
export { AgentTimeline, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, 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, FileCard, FileList, FilePreview, FileTabs, FileTree, FilterField, GitHubLoginButton, GlobResultsPreview, GrepResultsPreview, Heading, HelpText, IconTile, InlineCode, InlineThinkingItem, InlineToolItem, Input, Label, LiveDuration, LoginLayout, Logo, Markdown, MessageAuthor, MessageList, Metric, MetricStrip, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, PageHeader, PageShell, Pagination, PdfViewer, 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, configurePdfViewer, 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, isViewerMessage, 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 };
|
|
111
|
+
export { AgentTimeline, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, ArtifactPane, AuthHeader, Avatar, AvatarFallback, AvatarImage, Badge, Button, CATEGORY_TONES, CSV_PREVIEW_ROW_LIMIT, Calendar, 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, DatePicker, 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, FileCard, FileList, FilePreview, FileTabs, FileTree, FilterField, GitHubLoginButton, GlobResultsPreview, GrepResultsPreview, Heading, HelpText, IconTile, InlineCode, InlineThinkingItem, InlineToolItem, Input, Label, LiveDuration, LoginLayout, Logo, Markdown, MessageAuthor, MessageList, Metric, MetricStrip, OPENUI_NODE_JSON_SCHEMA, OPENUI_NODE_TYPES, OpenUIArtifactRenderer, PageHeader, PageShell, Pagination, PdfViewer, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Progress, QuestionPreview, RadioGroup, RadioGroupItem, 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, TimeSelect, ToastContainer, ToastProvider, ToolCallFeed, Toolbar, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UploadProgress, UserMenu, UserMessage, WebSearchPreview, WriteFilePreview, activeSessionsAtom, addMessage, addParts, badgeVariants, bumpActiveSessionActivity, buttonVariants, clearChat, cn, configurePdfViewer, copyText, createAuthFetcher, detectFileFormat, fileExtension, filterFileTree, findUnsupportedOpenUINode, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatCalendarDate, formatDuration, formatUptime, getActiveSession, getAllActiveSessions, getAllProjectActivity, getCodeLanguage, getFormatLabel, getSanitizedMarkdownHeadingIdFromRawFragment, getSessionsByActivity, getSessionsForNavbar, getSessionsForProject, getSyntaxLanguage, getToolCategory, getToolDisplayMetadata, getToolErrorText, getTotalRunningSessionCount, hasBackgroundRunningSessions, initialsOf, isStreamingAtom, isViewerMessage, localToday, messagesAtom, parseCalendarDate, 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,10 @@
|
|
|
1
|
+
//#region src/lib/control-presentation.d.ts
|
|
2
|
+
/**
|
|
3
|
+
* The control scale. Button, Input, Textarea and SelectTrigger take the same
|
|
4
|
+
* `sm | md | lg` sizes and read the same Brand tokens, so any row of controls
|
|
5
|
+
* at one size shares a height, a text size and a corner. md follows the
|
|
6
|
+
* `--control-height` density knob. The fallbacks keep an app on an older
|
|
7
|
+
* Brand stylesheet at the same pixels.
|
|
8
|
+
*/
|
|
9
|
+
export type ControlSize = "sm" | "md" | "lg";
|
|
10
|
+
//#endregion
|
|
@@ -38,6 +38,6 @@ const controlSizes = {
|
|
|
38
38
|
compact: "h-[var(--control-height)] px-3 py-1 text-sm",
|
|
39
39
|
touch: "h-11 min-h-11 min-w-11 px-4 py-2 text-base"
|
|
40
40
|
};
|
|
41
|
-
const fieldPresentation = cn(focusField, controlMotion, "min-w-0 bg-[var(--bg-input)] text-foreground", "aria-invalid:border-[var(--surface-danger-border)] aria-invalid:hover:border-[var(--surface-danger-border)] aria-invalid:focus:border-[var(--focus-border-danger)] aria-invalid:focus:ring-[var(--focus-halo-danger)]", "autofill:shadow-[inset_0_0_0_1000px_var(--bg-input)] autofill:[-webkit-text-fill-color:var(--text-primary)] autofill:caret-[var(--text-primary)]");
|
|
41
|
+
const fieldPresentation = cn(focusField, controlMotion, "min-w-0 bg-[var(--field-surface,var(--bg-input))] text-foreground", "aria-invalid:border-[var(--surface-danger-border)] aria-invalid:hover:border-[var(--surface-danger-border)] aria-invalid:focus:border-[var(--focus-border-danger)] aria-invalid:focus:ring-[var(--focus-halo-danger)]", "autofill:shadow-[inset_0_0_0_1000px_var(--bg-input)] autofill:[-webkit-text-fill-color:var(--text-primary)] autofill:caret-[var(--text-primary)]");
|
|
42
42
|
//#endregion
|
|
43
43
|
export { controlHeight, controlMotion, controlRadius, controlSizes, controlSquare, controlText, fieldPresentation, fieldSizes, fieldTouchText };
|
|
@@ -5,7 +5,7 @@ declare const buttonVariants: (props?: ({
|
|
|
5
5
|
size?: "compact" | "default" | "icon" | "icon-lg" | "icon-sm" | "lg" | "md" | "sm" | "touch" | "xl" | null | undefined;
|
|
6
6
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
7
7
|
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
8
|
-
variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "sandbox" | null;
|
|
8
|
+
variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "sandbox" | "bare" | null;
|
|
9
9
|
/** sm 32px, default/md 36px (`--control-height`), lg 44px; icon sizes are squares on the same heights. */
|
|
10
10
|
size?: "default" | "md" | "sm" | "lg" | "xl" | "icon" | "icon-sm" | "icon-lg" | "compact" | "touch" | null;
|
|
11
11
|
asChild?: boolean;
|
|
@@ -34,6 +34,7 @@ const buttonVariants = cva(`inline-flex items-center justify-center gap-2 whites
|
|
|
34
34
|
size: "default"
|
|
35
35
|
}
|
|
36
36
|
});
|
|
37
|
+
const bareButton = `${focusRing} disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50`;
|
|
37
38
|
function preventActivation(event) {
|
|
38
39
|
event.preventDefault();
|
|
39
40
|
event.stopPropagation();
|
|
@@ -60,7 +61,7 @@ const Button = React.forwardRef(({ className, variant, size, asChild = false, lo
|
|
|
60
61
|
const child = React.isValidElement(children) ? children : null;
|
|
61
62
|
const isDisabled = disabled || loading || child?.props.disabled;
|
|
62
63
|
return /* @__PURE__ */ jsx(Slot, {
|
|
63
|
-
className: cn(buttonVariants({
|
|
64
|
+
className: variant === "bare" ? cn(bareButton, className) : cn(buttonVariants({
|
|
64
65
|
variant,
|
|
65
66
|
size,
|
|
66
67
|
className
|
|
@@ -83,7 +84,7 @@ const Button = React.forwardRef(({ className, variant, size, asChild = false, lo
|
|
|
83
84
|
});
|
|
84
85
|
}
|
|
85
86
|
return /* @__PURE__ */ jsxs("button", {
|
|
86
|
-
className: cn(buttonVariants({
|
|
87
|
+
className: variant === "bare" ? cn(bareButton, className) : cn(buttonVariants({
|
|
87
88
|
variant,
|
|
88
89
|
size,
|
|
89
90
|
className
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
//#region src/primitives/calendar.d.ts
|
|
3
|
+
/**
|
|
4
|
+
* Calendar dates are plain `YYYY-MM-DD` strings, the same value a native date
|
|
5
|
+
* input reports. All arithmetic runs in UTC so a date never shifts with the
|
|
6
|
+
* viewer's time zone or a daylight-saving boundary.
|
|
7
|
+
*/
|
|
8
|
+
export type CalendarDate = string;
|
|
9
|
+
export declare function parseCalendarDate(value: string | null | undefined): number | null;
|
|
10
|
+
export declare function formatCalendarDate(time: number): CalendarDate;
|
|
11
|
+
/** Today in the viewer's local calendar, as a `YYYY-MM-DD` string. */
|
|
12
|
+
export declare function localToday(now?: Date): CalendarDate;
|
|
13
|
+
export interface CalendarProps {
|
|
14
|
+
/** The selected date, `YYYY-MM-DD`. */
|
|
15
|
+
value?: CalendarDate | null;
|
|
16
|
+
onChange?: (value: CalendarDate) => void;
|
|
17
|
+
/** The month shown first (any date inside it). Defaults to the value, else today. */
|
|
18
|
+
defaultMonth?: CalendarDate;
|
|
19
|
+
/** Earliest and latest selectable dates, inclusive. */
|
|
20
|
+
min?: CalendarDate;
|
|
21
|
+
max?: CalendarDate;
|
|
22
|
+
isDateDisabled?: (value: CalendarDate) => boolean;
|
|
23
|
+
/** The date marked as today. Pass it to use a workspace time zone instead of the viewer's. */
|
|
24
|
+
today?: CalendarDate;
|
|
25
|
+
/** 0 starts weeks on Sunday, 1 on Monday. */
|
|
26
|
+
weekStartsOn?: 0 | 1;
|
|
27
|
+
locale?: string;
|
|
28
|
+
className?: string;
|
|
29
|
+
"aria-label"?: string;
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* A month grid that picks one date. Arrow keys move by day and week, Page Up
|
|
33
|
+
* and Page Down by month, Home and End to the week's ends; Enter or Space picks
|
|
34
|
+
* the focused date. Six weeks always render so the grid never changes height.
|
|
35
|
+
*/
|
|
36
|
+
declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<HTMLDivElement>>;
|
|
37
|
+
//#endregion
|
|
38
|
+
export { Calendar };
|
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { focusRing } from "../lib/focus.js";
|
|
3
|
+
import { cn } from "../lib/utils.js";
|
|
4
|
+
import { Button } from "./button.js";
|
|
5
|
+
import * as React from "react";
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
import { ChevronLeft, ChevronRight } from "lucide-react";
|
|
8
|
+
//#region src/primitives/calendar.tsx
|
|
9
|
+
const DATE_PATTERN = /^(\d{4})-(\d{2})-(\d{2})$/;
|
|
10
|
+
const DAY_MS = 864e5;
|
|
11
|
+
function parseCalendarDate(value) {
|
|
12
|
+
const match = value ? DATE_PATTERN.exec(value) : null;
|
|
13
|
+
if (!match) return null;
|
|
14
|
+
const time = Date.UTC(Number(match[1]), Number(match[2]) - 1, Number(match[3]));
|
|
15
|
+
return new Date(time).getUTCMonth() === Number(match[2]) - 1 ? time : null;
|
|
16
|
+
}
|
|
17
|
+
function formatCalendarDate(time) {
|
|
18
|
+
const date = new Date(time);
|
|
19
|
+
const month = String(date.getUTCMonth() + 1).padStart(2, "0");
|
|
20
|
+
const day = String(date.getUTCDate()).padStart(2, "0");
|
|
21
|
+
return `${date.getUTCFullYear()}-${month}-${day}`;
|
|
22
|
+
}
|
|
23
|
+
/** Today in the viewer's local calendar, as a `YYYY-MM-DD` string. */
|
|
24
|
+
function localToday(now = /* @__PURE__ */ new Date()) {
|
|
25
|
+
return formatCalendarDate(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate()));
|
|
26
|
+
}
|
|
27
|
+
function firstOfMonth(time) {
|
|
28
|
+
const date = new Date(time);
|
|
29
|
+
return Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), 1);
|
|
30
|
+
}
|
|
31
|
+
function addMonths(time, delta) {
|
|
32
|
+
const date = new Date(time);
|
|
33
|
+
const target = Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + delta, 1);
|
|
34
|
+
const lastDay = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + delta + 1, 0)).getUTCDate();
|
|
35
|
+
return target + (Math.min(date.getUTCDate(), lastDay) - 1) * DAY_MS;
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* A month grid that picks one date. Arrow keys move by day and week, Page Up
|
|
39
|
+
* and Page Down by month, Home and End to the week's ends; Enter or Space picks
|
|
40
|
+
* the focused date. Six weeks always render so the grid never changes height.
|
|
41
|
+
*/
|
|
42
|
+
const Calendar = React.forwardRef(({ value, onChange, defaultMonth, min, max, isDateDisabled, today: todayProp, weekStartsOn = 0, locale, className, "aria-label": ariaLabel }, ref) => {
|
|
43
|
+
const today = parseCalendarDate(todayProp) ?? parseCalendarDate(localToday());
|
|
44
|
+
const selected = parseCalendarDate(value);
|
|
45
|
+
const minTime = parseCalendarDate(min);
|
|
46
|
+
const maxTime = parseCalendarDate(max);
|
|
47
|
+
const [focused, setFocused] = React.useState(() => selected ?? parseCalendarDate(defaultMonth) ?? today);
|
|
48
|
+
const viewMonth = firstOfMonth(focused);
|
|
49
|
+
const gridRef = React.useRef(null);
|
|
50
|
+
const moveFocusRef = React.useRef(false);
|
|
51
|
+
React.useEffect(() => {
|
|
52
|
+
if (selected !== null) setFocused(selected);
|
|
53
|
+
}, [selected]);
|
|
54
|
+
React.useEffect(() => {
|
|
55
|
+
if (!moveFocusRef.current) return;
|
|
56
|
+
moveFocusRef.current = false;
|
|
57
|
+
gridRef.current?.querySelector("[data-focused=\"true\"]")?.focus();
|
|
58
|
+
}, [focused]);
|
|
59
|
+
const disabled = (time) => minTime !== null && time < minTime || maxTime !== null && time > maxTime || Boolean(isDateDisabled?.(formatCalendarDate(time)));
|
|
60
|
+
const start = viewMonth - (new Date(viewMonth).getUTCDay() - weekStartsOn + 7) % 7 * DAY_MS;
|
|
61
|
+
const days = Array.from({ length: 42 }, (_, index) => start + index * DAY_MS);
|
|
62
|
+
const weeks = Array.from({ length: 6 }, (_, row) => days.slice(row * 7, row * 7 + 7));
|
|
63
|
+
const monthLabel = new Intl.DateTimeFormat(locale, {
|
|
64
|
+
month: "long",
|
|
65
|
+
year: "numeric",
|
|
66
|
+
timeZone: "UTC"
|
|
67
|
+
}).format(viewMonth);
|
|
68
|
+
const dayLabel = new Intl.DateTimeFormat(locale, {
|
|
69
|
+
weekday: "long",
|
|
70
|
+
month: "long",
|
|
71
|
+
day: "numeric",
|
|
72
|
+
year: "numeric",
|
|
73
|
+
timeZone: "UTC"
|
|
74
|
+
});
|
|
75
|
+
const weekdayShort = new Intl.DateTimeFormat(locale, {
|
|
76
|
+
weekday: "short",
|
|
77
|
+
timeZone: "UTC"
|
|
78
|
+
});
|
|
79
|
+
const weekdayLong = new Intl.DateTimeFormat(locale, {
|
|
80
|
+
weekday: "long",
|
|
81
|
+
timeZone: "UTC"
|
|
82
|
+
});
|
|
83
|
+
const weekdays = days.slice(0, 7);
|
|
84
|
+
const move = (next) => {
|
|
85
|
+
moveFocusRef.current = true;
|
|
86
|
+
setFocused(next);
|
|
87
|
+
};
|
|
88
|
+
const onKeyDown = (event) => {
|
|
89
|
+
const weekday = (new Date(focused).getUTCDay() - weekStartsOn + 7) % 7;
|
|
90
|
+
const step = {
|
|
91
|
+
ArrowLeft: () => focused - DAY_MS,
|
|
92
|
+
ArrowRight: () => focused + DAY_MS,
|
|
93
|
+
ArrowUp: () => focused - 7 * DAY_MS,
|
|
94
|
+
ArrowDown: () => focused + 7 * DAY_MS,
|
|
95
|
+
PageUp: () => addMonths(focused, event.shiftKey ? -12 : -1),
|
|
96
|
+
PageDown: () => addMonths(focused, event.shiftKey ? 12 : 1),
|
|
97
|
+
Home: () => focused - weekday * DAY_MS,
|
|
98
|
+
End: () => focused + (6 - weekday) * DAY_MS
|
|
99
|
+
}[event.key];
|
|
100
|
+
if (!step) return;
|
|
101
|
+
event.preventDefault();
|
|
102
|
+
move(step());
|
|
103
|
+
};
|
|
104
|
+
const pick = (time) => {
|
|
105
|
+
if (disabled(time)) return;
|
|
106
|
+
setFocused(time);
|
|
107
|
+
onChange?.(formatCalendarDate(time));
|
|
108
|
+
};
|
|
109
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
110
|
+
ref,
|
|
111
|
+
className: cn("w-fit select-none", className),
|
|
112
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
113
|
+
className: "mb-2 flex items-center justify-between gap-2",
|
|
114
|
+
children: [
|
|
115
|
+
/* @__PURE__ */ jsx(Button, {
|
|
116
|
+
type: "button",
|
|
117
|
+
variant: "ghost",
|
|
118
|
+
size: "icon-sm",
|
|
119
|
+
"aria-label": "Previous month",
|
|
120
|
+
onClick: () => setFocused(addMonths(focused, -1)),
|
|
121
|
+
children: /* @__PURE__ */ jsx(ChevronLeft, {})
|
|
122
|
+
}),
|
|
123
|
+
/* @__PURE__ */ jsx("div", {
|
|
124
|
+
"aria-live": "polite",
|
|
125
|
+
className: "font-medium text-[length:var(--control-text-md,0.875rem)] text-foreground",
|
|
126
|
+
children: monthLabel
|
|
127
|
+
}),
|
|
128
|
+
/* @__PURE__ */ jsx(Button, {
|
|
129
|
+
type: "button",
|
|
130
|
+
variant: "ghost",
|
|
131
|
+
size: "icon-sm",
|
|
132
|
+
"aria-label": "Next month",
|
|
133
|
+
onClick: () => setFocused(addMonths(focused, 1)),
|
|
134
|
+
children: /* @__PURE__ */ jsx(ChevronRight, {})
|
|
135
|
+
})
|
|
136
|
+
]
|
|
137
|
+
}), /* @__PURE__ */ jsxs("div", {
|
|
138
|
+
ref: gridRef,
|
|
139
|
+
role: "grid",
|
|
140
|
+
"aria-label": ariaLabel ?? monthLabel,
|
|
141
|
+
onKeyDown,
|
|
142
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
143
|
+
role: "row",
|
|
144
|
+
className: "grid grid-cols-7",
|
|
145
|
+
children: weekdays.map((time) => /* @__PURE__ */ jsx("div", {
|
|
146
|
+
role: "columnheader",
|
|
147
|
+
"aria-label": weekdayLong.format(time),
|
|
148
|
+
className: "flex h-8 items-center justify-center text-[length:var(--font-size-help,0.75rem)] text-muted-foreground",
|
|
149
|
+
children: weekdayShort.format(time).slice(0, 2)
|
|
150
|
+
}, time))
|
|
151
|
+
}), weeks.map((week) => /* @__PURE__ */ jsx("div", {
|
|
152
|
+
role: "row",
|
|
153
|
+
className: "grid grid-cols-7",
|
|
154
|
+
children: week.map((time) => {
|
|
155
|
+
const outside = firstOfMonth(time) !== viewMonth;
|
|
156
|
+
const isSelected = selected === time;
|
|
157
|
+
const isToday = today === time;
|
|
158
|
+
const isDisabled = disabled(time);
|
|
159
|
+
return /* @__PURE__ */ jsx("div", {
|
|
160
|
+
role: "gridcell",
|
|
161
|
+
"aria-selected": isSelected,
|
|
162
|
+
children: /* @__PURE__ */ jsx("button", {
|
|
163
|
+
type: "button",
|
|
164
|
+
tabIndex: time === focused ? 0 : -1,
|
|
165
|
+
"data-focused": time === focused,
|
|
166
|
+
"data-outside": outside || void 0,
|
|
167
|
+
"data-today": isToday || void 0,
|
|
168
|
+
"aria-label": dayLabel.format(time),
|
|
169
|
+
"aria-current": isToday ? "date" : void 0,
|
|
170
|
+
"aria-disabled": isDisabled || void 0,
|
|
171
|
+
onClick: () => pick(time),
|
|
172
|
+
onFocus: () => {
|
|
173
|
+
if (time !== focused) setFocused(time);
|
|
174
|
+
},
|
|
175
|
+
className: cn("flex size-[var(--control-height,2.25rem)] items-center justify-center rounded-lg text-[length:var(--control-text-md,0.875rem)] tabular-nums transition-colors", focusRing, "hover:bg-muted", outside && "text-muted-foreground/60", isToday && !isSelected && "font-semibold text-[var(--accent-text)]", isSelected && "bg-primary font-medium text-primary-foreground hover:bg-primary/90", isDisabled && "cursor-not-allowed opacity-40 hover:bg-transparent"),
|
|
176
|
+
children: new Date(time).getUTCDate()
|
|
177
|
+
})
|
|
178
|
+
}, time);
|
|
179
|
+
})
|
|
180
|
+
}, week[0]))]
|
|
181
|
+
})]
|
|
182
|
+
});
|
|
183
|
+
});
|
|
184
|
+
Calendar.displayName = "Calendar";
|
|
185
|
+
//#endregion
|
|
186
|
+
export { Calendar, formatCalendarDate, localToday, parseCalendarDate };
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { CalendarDate, CalendarProps } from "./calendar.js";
|
|
2
|
+
import { ControlSize } from "../lib/control-presentation.js";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
//#region src/primitives/date-picker.d.ts
|
|
5
|
+
export interface DatePickerProps extends Pick<CalendarProps, "min" | "max" | "isDateDisabled" | "today" | "weekStartsOn" | "locale" | "defaultMonth"> {
|
|
6
|
+
/** The chosen date, `YYYY-MM-DD`, or empty for none. */
|
|
7
|
+
value?: CalendarDate | null;
|
|
8
|
+
onChange?: (value: CalendarDate | "") => void;
|
|
9
|
+
/** Shown when no date is chosen. */
|
|
10
|
+
placeholder?: string;
|
|
11
|
+
size?: ControlSize;
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
/** Offer a Clear action while a date is chosen. Default true. */
|
|
14
|
+
clearable?: boolean;
|
|
15
|
+
/** How the chosen date reads on the trigger. */
|
|
16
|
+
formatOptions?: Intl.DateTimeFormatOptions;
|
|
17
|
+
id?: string;
|
|
18
|
+
name?: string;
|
|
19
|
+
className?: string;
|
|
20
|
+
"aria-label"?: string;
|
|
21
|
+
"aria-labelledby"?: string;
|
|
22
|
+
"aria-describedby"?: string;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* A date field: a trigger on the control scale that opens a Calendar. It reads
|
|
26
|
+
* like a Select (same height, well, border, focus ring), shows the date in the
|
|
27
|
+
* viewer's locale instead of a `mm/dd/yyyy` mask, and reports `YYYY-MM-DD`.
|
|
28
|
+
* With `name` it also submits that value in a form.
|
|
29
|
+
*/
|
|
30
|
+
declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
31
|
+
//#endregion
|
|
32
|
+
export { DatePicker };
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { cn } from "../lib/utils.js";
|
|
3
|
+
import { fieldPresentation, fieldSizes, fieldTouchText } from "../lib/control-presentation.js";
|
|
4
|
+
import { Button } from "./button.js";
|
|
5
|
+
import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
|
|
6
|
+
import { Calendar, parseCalendarDate } from "./calendar.js";
|
|
7
|
+
import * as React from "react";
|
|
8
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
9
|
+
import { CalendarDays } from "lucide-react";
|
|
10
|
+
//#region src/primitives/date-picker.tsx
|
|
11
|
+
const DEFAULT_FORMAT = {
|
|
12
|
+
month: "short",
|
|
13
|
+
day: "numeric",
|
|
14
|
+
year: "numeric"
|
|
15
|
+
};
|
|
16
|
+
/**
|
|
17
|
+
* A date field: a trigger on the control scale that opens a Calendar. It reads
|
|
18
|
+
* like a Select (same height, well, border, focus ring), shows the date in the
|
|
19
|
+
* viewer's locale instead of a `mm/dd/yyyy` mask, and reports `YYYY-MM-DD`.
|
|
20
|
+
* With `name` it also submits that value in a form.
|
|
21
|
+
*/
|
|
22
|
+
const DatePicker = React.forwardRef(({ value, onChange, placeholder = "Pick a date", size = "md", disabled, clearable = true, formatOptions = DEFAULT_FORMAT, id, name, className, locale, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...calendarProps }, ref) => {
|
|
23
|
+
const [open, setOpen] = React.useState(false);
|
|
24
|
+
const selected = parseCalendarDate(value);
|
|
25
|
+
const label = selected === null ? null : new Intl.DateTimeFormat(locale, {
|
|
26
|
+
...formatOptions,
|
|
27
|
+
timeZone: "UTC"
|
|
28
|
+
}).format(selected);
|
|
29
|
+
return /* @__PURE__ */ jsxs(Popover, {
|
|
30
|
+
open,
|
|
31
|
+
onOpenChange: setOpen,
|
|
32
|
+
children: [
|
|
33
|
+
/* @__PURE__ */ jsx(PopoverTrigger, {
|
|
34
|
+
asChild: true,
|
|
35
|
+
children: /* @__PURE__ */ jsxs("button", {
|
|
36
|
+
ref,
|
|
37
|
+
id,
|
|
38
|
+
type: "button",
|
|
39
|
+
disabled,
|
|
40
|
+
"aria-label": ariaLabel,
|
|
41
|
+
"aria-labelledby": ariaLabelledBy,
|
|
42
|
+
"aria-describedby": ariaDescribedBy,
|
|
43
|
+
"aria-haspopup": "dialog",
|
|
44
|
+
"data-placeholder": selected === null ? "" : void 0,
|
|
45
|
+
className: cn("inline-flex w-full items-center justify-between gap-2 whitespace-nowrap border py-1 text-left shadow-sm disabled:cursor-not-allowed disabled:opacity-50", fieldPresentation, fieldTouchText, fieldSizes[size], "data-[placeholder]:text-[var(--text-dim)] data-[state=open]:border-primary", className),
|
|
46
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
47
|
+
className: "min-w-0 truncate",
|
|
48
|
+
children: label ?? placeholder
|
|
49
|
+
}), /* @__PURE__ */ jsx(CalendarDays, {
|
|
50
|
+
"aria-hidden": true,
|
|
51
|
+
className: "size-4 shrink-0 opacity-60"
|
|
52
|
+
})]
|
|
53
|
+
})
|
|
54
|
+
}),
|
|
55
|
+
name && /* @__PURE__ */ jsx("input", {
|
|
56
|
+
type: "hidden",
|
|
57
|
+
name,
|
|
58
|
+
value: selected === null ? "" : value
|
|
59
|
+
}),
|
|
60
|
+
/* @__PURE__ */ jsxs(PopoverContent, {
|
|
61
|
+
align: "start",
|
|
62
|
+
className: "w-auto p-3",
|
|
63
|
+
children: [/* @__PURE__ */ jsx(Calendar, {
|
|
64
|
+
...calendarProps,
|
|
65
|
+
locale,
|
|
66
|
+
value,
|
|
67
|
+
onChange: (next) => {
|
|
68
|
+
onChange?.(next);
|
|
69
|
+
setOpen(false);
|
|
70
|
+
}
|
|
71
|
+
}), clearable && selected !== null && /* @__PURE__ */ jsx("div", {
|
|
72
|
+
className: "mt-2 flex justify-end border-t border-border pt-2",
|
|
73
|
+
children: /* @__PURE__ */ jsx(Button, {
|
|
74
|
+
type: "button",
|
|
75
|
+
variant: "ghost",
|
|
76
|
+
size: "sm",
|
|
77
|
+
onClick: () => {
|
|
78
|
+
onChange?.("");
|
|
79
|
+
setOpen(false);
|
|
80
|
+
},
|
|
81
|
+
children: "Clear"
|
|
82
|
+
})
|
|
83
|
+
})]
|
|
84
|
+
})
|
|
85
|
+
]
|
|
86
|
+
});
|
|
87
|
+
});
|
|
88
|
+
DatePicker.displayName = "DatePicker";
|
|
89
|
+
//#endregion
|
|
90
|
+
export { DatePicker };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
|
|
3
|
+
//#region src/primitives/radio-group.d.ts
|
|
4
|
+
/**
|
|
5
|
+
* One choice from a set. Arrow keys move between items; pair each item with a
|
|
6
|
+
* `Label` through `id`/`htmlFor`. The item matches `Checkbox` (16px, the
|
|
7
|
+
* strong border, primary when chosen) so single and multiple choice lists
|
|
8
|
+
* read as one family.
|
|
9
|
+
*/
|
|
10
|
+
declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
11
|
+
declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
12
|
+
//#endregion
|
|
13
|
+
export { RadioGroup, RadioGroupItem };
|
|
@@ -0,0 +1,28 @@
|
|
|
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 } from "react/jsx-runtime";
|
|
6
|
+
import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
|
|
7
|
+
//#region src/primitives/radio-group.tsx
|
|
8
|
+
/**
|
|
9
|
+
* One choice from a set. Arrow keys move between items; pair each item with a
|
|
10
|
+
* `Label` through `id`/`htmlFor`. The item matches `Checkbox` (16px, the
|
|
11
|
+
* strong border, primary when chosen) so single and multiple choice lists
|
|
12
|
+
* read as one family.
|
|
13
|
+
*/
|
|
14
|
+
const RadioGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, {
|
|
15
|
+
ref,
|
|
16
|
+
className: cn("grid gap-2", className),
|
|
17
|
+
...props
|
|
18
|
+
}));
|
|
19
|
+
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
|
|
20
|
+
const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(RadioGroupPrimitive.Item, {
|
|
21
|
+
ref,
|
|
22
|
+
className: cn("peer inline-grid size-4 shrink-0 cursor-pointer place-content-center rounded-full border border-[var(--border-strong)] bg-transparent transition-[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", focusRing, className),
|
|
23
|
+
...props,
|
|
24
|
+
children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "size-2 rounded-full bg-primary" })
|
|
25
|
+
}));
|
|
26
|
+
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
|
|
27
|
+
//#endregion
|
|
28
|
+
export { RadioGroup, RadioGroupItem };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { ControlSize } from "../lib/control-presentation.js";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
//#region src/primitives/time-select.d.ts
|
|
4
|
+
export interface TimeSelectProps {
|
|
5
|
+
/** `HH:MM`, 24-hour, the value a native time input reports. */
|
|
6
|
+
value?: string;
|
|
7
|
+
onChange?: (value: string) => void;
|
|
8
|
+
/** Minutes between choices. Default 15. */
|
|
9
|
+
step?: number;
|
|
10
|
+
placeholder?: string;
|
|
11
|
+
size?: ControlSize;
|
|
12
|
+
disabled?: boolean;
|
|
13
|
+
locale?: string;
|
|
14
|
+
id?: string;
|
|
15
|
+
name?: string;
|
|
16
|
+
className?: string;
|
|
17
|
+
"aria-label"?: string;
|
|
18
|
+
"aria-labelledby"?: string;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* A time of day as a Select on the control scale: the day in `step`-minute
|
|
22
|
+
* slots, labelled in the viewer's locale (9:30 AM, 21:30). A value between
|
|
23
|
+
* slots stays listed so the current time is never lost.
|
|
24
|
+
*/
|
|
25
|
+
declare const TimeSelect: React.ForwardRefExoticComponent<TimeSelectProps & React.RefAttributes<HTMLButtonElement>>;
|
|
26
|
+
//#endregion
|
|
27
|
+
export { TimeSelect };
|