@cueplusplus/ui 0.5.0 → 0.7.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.
Files changed (69) hide show
  1. package/CHANGELOG.md +53 -0
  2. package/dist/chrome/_drag.js +59 -0
  3. package/dist/chrome/_status-bar-item.js +85 -0
  4. package/dist/chrome/_status-bar.d.ts +15 -0
  5. package/dist/chrome/_status-bar.js +171 -0
  6. package/dist/chrome/app-shell.d.ts +69 -1
  7. package/dist/chrome/app-shell.js +38 -11
  8. package/dist/chrome/index.d.ts +3 -2
  9. package/dist/chrome/status-bar.d.ts +87 -4
  10. package/dist/chrome/status-bar.js +80 -16
  11. package/dist/chrome/title-bar.d.ts +11 -1
  12. package/dist/chrome/title-bar.js +1 -3
  13. package/dist/date/_segments.js +15 -4
  14. package/dist/forms/_chassis.d.ts +104 -4
  15. package/dist/forms/_chassis.js +104 -4
  16. package/dist/forms/input-group.d.ts +8 -3
  17. package/dist/forms/input-group.js +8 -3
  18. package/dist/forms/number-field.d.ts +3 -2
  19. package/dist/forms/number-field.js +3 -2
  20. package/dist/index.d.ts +8 -3
  21. package/dist/index.js +5 -1
  22. package/dist/instruments/_data-row.d.ts +68 -0
  23. package/dist/instruments/_data-row.js +139 -0
  24. package/dist/instruments/data-row.d.ts +94 -0
  25. package/dist/instruments/data-row.js +151 -0
  26. package/dist/instruments/data-tree.d.ts +126 -0
  27. package/dist/instruments/data-tree.js +303 -0
  28. package/dist/instruments/index.d.ts +6 -2
  29. package/dist/instruments/index.js +5 -1
  30. package/dist/instruments/ledger.d.ts +105 -0
  31. package/dist/instruments/ledger.js +114 -0
  32. package/dist/instruments/table.d.ts +108 -2
  33. package/dist/instruments/table.js +165 -39
  34. package/dist/theming/_presets.js +3 -3
  35. package/manifest/components/app-shell.json +45 -4
  36. package/manifest/components/autocomplete.json +2 -0
  37. package/manifest/components/color-field.json +2 -0
  38. package/manifest/components/color-picker.json +2 -0
  39. package/manifest/components/combobox.json +2 -0
  40. package/manifest/components/composer.json +2 -0
  41. package/manifest/components/data-row.json +208 -0
  42. package/manifest/components/data-tree.json +151 -0
  43. package/manifest/components/date-field.json +2 -0
  44. package/manifest/components/date-picker.json +2 -0
  45. package/manifest/components/date-range-picker.json +2 -0
  46. package/manifest/components/env-var-input.json +2 -0
  47. package/manifest/components/input-group.json +4 -2
  48. package/manifest/components/input.json +3 -1
  49. package/manifest/components/ledger.json +187 -0
  50. package/manifest/components/multi-select.json +2 -0
  51. package/manifest/components/musical-time-input.json +2 -0
  52. package/manifest/components/number-field.json +3 -1
  53. package/manifest/components/otp-field.json +2 -0
  54. package/manifest/components/password-input.json +2 -0
  55. package/manifest/components/scrub-input.json +2 -0
  56. package/manifest/components/search-input.json +2 -0
  57. package/manifest/components/select.json +1 -0
  58. package/manifest/components/status-bar.json +146 -12
  59. package/manifest/components/table-scroll-region.json +6 -0
  60. package/manifest/components/table.json +113 -5
  61. package/manifest/components/tags-input.json +2 -0
  62. package/manifest/components/textarea.json +3 -1
  63. package/manifest/components/time-field.json +2 -0
  64. package/manifest/components/title-bar.json +1 -1
  65. package/manifest/components/toggle-group.json +2 -0
  66. package/manifest/components/toggle.json +2 -0
  67. package/manifest/manifest.json +72 -33
  68. package/manifest/tokens.json +1 -1
  69. package/package.json +2 -2
package/dist/index.d.ts CHANGED
@@ -25,7 +25,8 @@ import { Row, RowProps, SeamList, SeamListProps, rowVariants } from "./chrome/ro
25
25
  import { ScrollArea, ScrollAreaOrientation, ScrollAreaProps } from "./chrome/scroll-area.js";
26
26
  import { SectionHeader, SectionHeaderProps } from "./chrome/section-header.js";
27
27
  import { SegmentedControl, SegmentedControlItem, SegmentedControlProps, SegmentedControlSize } from "./chrome/segmented-control.js";
28
- import { StatusBar, StatusBarItemProps, StatusBarProps, StatusBarTone } from "./chrome/status-bar.js";
28
+ import { StatusBarProminence } from "./chrome/_status-bar.js";
29
+ import { StatusBar, StatusBarGroupProps, StatusBarItemProps, StatusBarProps, StatusBarTone } from "./chrome/status-bar.js";
29
30
  import { ScrollableTabsList, ScrollableTabsListProps, Tabs, TabsListProps, TabsPanelProps, TabsRootProps, TabsTabProps } from "./chrome/tabs.js";
30
31
  import { TitleBar, TitleBarProps } from "./chrome/title-bar.js";
31
32
  import { Tree, TreeProps, TreeVisibility, TreeVisibilityToggle, TreeVisibilityToggleProps } from "./chrome/tree.js";
@@ -65,16 +66,20 @@ import { Plussie, PlussieExpression, PlussieProps } from "./brand/plussie.js";
65
66
  import "./brand/index.js";
66
67
  import { AudienceIcon, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, CliToolIcon, FolderIcon, McpServerIcon, SkillIcon, StackIcon, StacksMatrixIcon } from "./icons/containers.js";
67
68
  import "./icons/index.js";
69
+ import { activateRowFromClick, activateRowFromKeyDown } from "./instruments/_data-row.js";
68
70
  import { AppWindowFrame, AppWindowFrameProps } from "./instruments/app-window-frame.js";
69
71
  import { Button, ButtonProps, buttonVariants } from "./primitives/button.js";
70
72
  import { CopyButton, CopyButtonProps } from "./instruments/copy-button.js";
73
+ import { DataRow, DataRowDisclosure, DataRowRootProps, DataRowSlotProps } from "./instruments/data-row.js";
74
+ import { DataTree, DataTreeItem, DataTreeProps, DataTreeRowState } from "./instruments/data-tree.js";
71
75
  import { GroupBar, GroupBarItem, GroupBarProps, GroupBarTone } from "./instruments/group-bar.js";
76
+ import { Ledger, LedgerEmptyProps, LedgerGroupProps, LedgerRootProps, LedgerTierProps } from "./instruments/ledger.js";
72
77
  import { Meter, MeterProps, MeterProvenance, MeterTone } from "./instruments/meter.js";
73
78
  import { Progress, ProgressProps } from "./instruments/progress.js";
74
79
  import { SeamCell, SeamCellProps, SeamGrid, SeamGridProps, SeamGround } from "./instruments/seam-grid.js";
75
80
  import { Sparkline, SparklineProps } from "./instruments/sparkline.js";
76
81
  import { Stat, StatProps, StatTone } from "./instruments/stat.js";
77
- import { Table, TableCaptionProps, TableCellProps, TableHeadProps, TableRootProps, TableRowProps, TableScrollRegion, TableScrollRegionProps, TableSectionProps } from "./instruments/table.js";
82
+ import { Table, TableCaptionProps, TableCellProps, TableGroupRowProps, TableHeadProps, TableRootProps, TableRowProps, TableScrollRegion, TableScrollRegionProps, TableSectionProps } from "./instruments/table.js";
78
83
  import { TerminalFrame, TerminalFrameLine, TerminalFrameProps, TerminalLine, TerminalLineTone, TerminalScript, TerminalStep } from "./instruments/terminal-frame.js";
79
84
  import { TwoStepButton, TwoStepButtonProps, TwoStepTone } from "./instruments/two-step-button.js";
80
85
  import { UsageChart, UsageChartPoint, UsageChartProps, UsageChartTone } from "./instruments/usage-chart.js";
@@ -120,4 +125,4 @@ import { DEFAULT_STORAGE_KEY, PersistedPreferences, PrepaintDefaults, PrepaintOp
120
125
  import { ControlSize, useControlHeight, useDensity } from "./system/use-density.js";
121
126
  import { useTheme } from "./system/use-theme.js";
122
127
  import { DensityLevel, FontName, Mode, ThemeName } from "./system/index.js";
123
- export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, type AgentColorOptions, AgentPile, type AgentPileEntry, type AgentPileProps, type AgentPileSize, AlertDialog, type AlertDialogActionProps, type AlertDialogCancelProps, type AlertDialogContentProps, type AlertDialogDescriptionProps, type AlertDialogFooterProps, type AlertDialogRootProps, type AlertDialogTitleProps, type AlertDialogTriggerProps, AppBar, type AppBarActionsProps, type AppBarBrandProps, type AppBarLinkProps, type AppBarNavProps, type AppBarRegister, type AppBarRootProps, type AppBarSeparatorProps, AppShell, type AppShellAsideProps, type AppShellBarProps, type AppShellBodyProps, type AppShellContentProps, type AppShellNavTriggerProps, type AppShellRootProps, type AppShellScrollerProps, type AppShellSidebarProps, AppWindowFrame, type AppWindowFrameProps, type AskAnswer, AskBox, type AskBoxProps, type AskDanger, type AskKind, type AskOption, AudienceIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type BarOverflow, type BrandAssetProps, type BrandSize, type BrandTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipProps, CliToolIcon, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteItem, type CommandPaletteProps, Composer, type ComposerProps, type ComposerSubmitKey, Container, type ContainerProps, type ContainerWidth, ContextMenu, type ContextMenuContentProps, type ContextMenuRootProps, type ContextMenuTriggerProps, type ControlSize, type ControlVariantProps, CopyButton, type CopyButtonProps, CueLogotype, type CueLogotypeProps, CueMark, type CueMarkProps, CuePortalFrame, type CuePortalFrameProps, DEFAULT_STORAGE_KEY, DelegationCard, type DelegationCardProps, type DelegationDirection, type DelegationStatus, Density, type DensityLevel, type DensityProps, DescriptionList, type DescriptionListDetailProps, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListTermProps, Dialog, type DialogCloseProps, type DialogContentProps, type DialogDescriptionProps, type DialogFooterProps, type DialogRootProps, type DialogTitleProps, type DialogTriggerProps, Disclosure, type DisclosureProps, Drawer, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerRootProps, type DrawerSwipeDirection, type DrawerTitleProps, type DrawerTriggerProps, DropdownMenu, type DropdownMenuCheckboxItemProps, type DropdownMenuContentProps, type DropdownMenuGroupProps, type DropdownMenuItemProps, type DropdownMenuLabelProps, type DropdownMenuRootProps, type DropdownMenuSeparatorProps, type DropdownMenuTriggerProps, EmptyState, type EmptyStateProps, EnvVarInput, type EnvVarInputProps, Eyebrow, type EyebrowProps, Field, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, type FieldIssue, FieldLabel, type FieldLabelProps, type FieldProps, type FilePartition, type FilePartitionOptions, type FileRejectReason, type FileRejection, FileUpload, type FileUploadProps, FolderIcon, type FontFamilies, type FontName, Footer, type FooterProps, type FormControlSize, Grid, type GridColumns, type GridProps, GroupBar, type GroupBarItem, type GroupBarProps, type GroupBarTone, HoverCard, type HoverCardContentProps, type HoverCardRootProps, type HoverCardTriggerProps, IconButton, type IconButtonProps, InfoTip, type InfoTipProps, Input, InputGroup, type InputGroupProps, type InputProps, Item, type ItemProps, Kbd, type KbdProps, Link, type LinkProps, McpServerIcon, Menubar, type MenubarContentProps, type MenubarMenuProps, type MenubarRootProps, type MenubarTriggerProps, Message, MessageList, type MessageListProps, type MessageProps, type MessageRole, Meter, type MeterProps, type MeterProvenance, type MeterTone, type Mode, MultiSelect, type MultiSelectProps, NavigationMenu, type NavigationMenuContentProps, type NavigationMenuItemProps, type NavigationMenuLinkProps, type NavigationMenuListProps, type NavigationMenuRootProps, type NavigationMenuTriggerProps, type NavigationMenuViewportProps, NumberField, type NumberFieldProps, OTPField, type OTPFieldProps, OVERLAY_SIDE_OFFSET, PageShell, type PageShellProps, type PageWidth, Pagination, type PaginationEntry, type PaginationProps, Panel, PanelHeader, type PanelHeaderProps, type PanelProps, PasswordInput, type PasswordInputProps, type PersistedPreferences, Plussie, type PlussieExpression, type PlussieProps, Popover, type PopoverCloseProps, type PopoverContentProps, type PopoverDescriptionProps, type PopoverRootProps, type PopoverTitleProps, type PopoverTriggerProps, type PrepaintDefaults, type PrepaintOptions, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type RatingSize, type ResolvedMode, Row, type RowProps, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, type ScrollEdges, ScrollableTabsList, type ScrollableTabsListProps, ScrubInput, type ScrubInputProps, SeamCell, type SeamCellProps, SeamGrid, type SeamGridProps, type SeamGround, SeamList, type SeamListProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetCloseProps, type SheetContentProps, type SheetDescriptionProps, type SheetFooterProps, type SheetRootProps, type SheetTitleProps, type SheetTriggerProps, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, Skeleton, type SkeletonProps, SkillIcon, Slider, type SliderProps, type SpaceStep, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackAlign, StackIcon, type StackJustify, type StackProps, StacksMatrixIcon, Stat, type StatProps, type StatTone, StatusBar, type StatusBarItemProps, type StatusBarProps, type StatusBarTone, StatusDot, type StatusDotProps, type StatusTone, Stepper, type StepperProps, type StepperState, type StepperStep, Switch, type SwitchProps, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, type TableCaptionProps, type TableCellProps, type TableHeadProps, type TableRootProps, type TableRowProps, TableScrollRegion, type TableScrollRegionProps, type TableSectionProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, TagsInput, type TagsInputProps, TerminalFrame, type TerminalFrameLine, type TerminalFrameProps, type TerminalLine, type TerminalLineTone, type TerminalScript, type TerminalStep, Textarea, type TextareaProps, type ThemeContextValue, type ThemeName, ThemeProvider, type ThemeProviderProps, Timeline, type TimelineContentProps, type TimelineItemProps, type TimelineMarkerProps, type TimelineRootProps, TitleBar, type TitleBarProps, Toast, type ToastManager, type ToastOptions, type ToastProviderProps, type ToastTone, type ToastViewportProps, Toggle, ToggleGroup, type ToggleGroupProps, type ToggleProps, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarRootProps, type ToolbarSeparatorProps, Tooltip, type TooltipContentProps, type TooltipProviderProps, type TooltipRootProps, type TooltipTriggerProps, Tree, type TreeGuide, type TreeItem, type TreeProps, type TreeRow, type TreeVisibility, TreeVisibilityToggle, type TreeVisibilityToggleProps, TwoStepButton, type TwoStepButtonProps, type TwoStepTone, type UploadFile, type UploadStatus, UsageChart, type UsageChartPoint, type UsageChartProps, type UsageChartTone, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensity, useSidebar, useTheme, useToast };
128
+ export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, type AccordionHeaderProps, type AccordionItemProps, type AccordionPanelProps, type AccordionRootProps, type AccordionTriggerProps, type AgentColorOptions, AgentPile, type AgentPileEntry, type AgentPileProps, type AgentPileSize, AlertDialog, type AlertDialogActionProps, type AlertDialogCancelProps, type AlertDialogContentProps, type AlertDialogDescriptionProps, type AlertDialogFooterProps, type AlertDialogRootProps, type AlertDialogTitleProps, type AlertDialogTriggerProps, AppBar, type AppBarActionsProps, type AppBarBrandProps, type AppBarLinkProps, type AppBarNavProps, type AppBarRegister, type AppBarRootProps, type AppBarSeparatorProps, AppShell, type AppShellAsideProps, type AppShellBarProps, type AppShellBodyProps, type AppShellContentProps, type AppShellNavTriggerProps, type AppShellRootProps, type AppShellScrollerProps, type AppShellSidebarProps, AppWindowFrame, type AppWindowFrameProps, type AskAnswer, AskBox, type AskBoxProps, type AskDanger, type AskKind, type AskOption, AudienceIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, type BarOverflow, type BrandAssetProps, type BrandSize, type BrandTone, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonProps, Card, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardRootProps, type CardTitleProps, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, type ChipProps, CliToolIcon, Collapsible, type CollapsiblePanelProps, type CollapsibleRootProps, type CollapsibleTriggerProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteItem, type CommandPaletteProps, Composer, type ComposerProps, type ComposerSubmitKey, Container, type ContainerProps, type ContainerWidth, ContextMenu, type ContextMenuContentProps, type ContextMenuRootProps, type ContextMenuTriggerProps, type ControlSize, type ControlVariantProps, CopyButton, type CopyButtonProps, CueLogotype, type CueLogotypeProps, CueMark, type CueMarkProps, CuePortalFrame, type CuePortalFrameProps, DEFAULT_STORAGE_KEY, DataRow, type DataRowDisclosure, type DataRowRootProps, type DataRowSlotProps, DataTree, type DataTreeItem, type DataTreeProps, type DataTreeRowState, DelegationCard, type DelegationCardProps, type DelegationDirection, type DelegationStatus, Density, type DensityLevel, type DensityProps, DescriptionList, type DescriptionListDetailProps, type DescriptionListLayout, type DescriptionListRootProps, type DescriptionListTermProps, Dialog, type DialogCloseProps, type DialogContentProps, type DialogDescriptionProps, type DialogFooterProps, type DialogRootProps, type DialogTitleProps, type DialogTriggerProps, Disclosure, type DisclosureProps, Drawer, type DrawerCloseProps, type DrawerContentProps, type DrawerDescriptionProps, type DrawerFooterProps, type DrawerRootProps, type DrawerSwipeDirection, type DrawerTitleProps, type DrawerTriggerProps, DropdownMenu, type DropdownMenuCheckboxItemProps, type DropdownMenuContentProps, type DropdownMenuGroupProps, type DropdownMenuItemProps, type DropdownMenuLabelProps, type DropdownMenuRootProps, type DropdownMenuSeparatorProps, type DropdownMenuTriggerProps, EmptyState, type EmptyStateProps, EnvVarInput, type EnvVarInputProps, Eyebrow, type EyebrowProps, Field, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, type FieldIssue, FieldLabel, type FieldLabelProps, type FieldProps, type FilePartition, type FilePartitionOptions, type FileRejectReason, type FileRejection, FileUpload, type FileUploadProps, FolderIcon, type FontFamilies, type FontName, Footer, type FooterProps, type FormControlSize, Grid, type GridColumns, type GridProps, GroupBar, type GroupBarItem, type GroupBarProps, type GroupBarTone, HoverCard, type HoverCardContentProps, type HoverCardRootProps, type HoverCardTriggerProps, IconButton, type IconButtonProps, InfoTip, type InfoTipProps, Input, InputGroup, type InputGroupProps, type InputProps, Item, type ItemProps, Kbd, type KbdProps, Ledger, type LedgerEmptyProps, type LedgerGroupProps, type LedgerRootProps, type LedgerTierProps, Link, type LinkProps, McpServerIcon, Menubar, type MenubarContentProps, type MenubarMenuProps, type MenubarRootProps, type MenubarTriggerProps, Message, MessageList, type MessageListProps, type MessageProps, type MessageRole, Meter, type MeterProps, type MeterProvenance, type MeterTone, type Mode, MultiSelect, type MultiSelectProps, NavigationMenu, type NavigationMenuContentProps, type NavigationMenuItemProps, type NavigationMenuLinkProps, type NavigationMenuListProps, type NavigationMenuRootProps, type NavigationMenuTriggerProps, type NavigationMenuViewportProps, NumberField, type NumberFieldProps, OTPField, type OTPFieldProps, OVERLAY_SIDE_OFFSET, PageShell, type PageShellProps, type PageWidth, Pagination, type PaginationEntry, type PaginationProps, Panel, PanelHeader, type PanelHeaderProps, type PanelProps, PasswordInput, type PasswordInputProps, type PersistedPreferences, Plussie, type PlussieExpression, type PlussieProps, Popover, type PopoverCloseProps, type PopoverContentProps, type PopoverDescriptionProps, type PopoverRootProps, type PopoverTitleProps, type PopoverTriggerProps, type PrepaintDefaults, type PrepaintOptions, Progress, type ProgressProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, type RatingSize, type ResolvedMode, Row, type RowProps, ScrollArea, type ScrollAreaOrientation, type ScrollAreaProps, type ScrollEdges, ScrollableTabsList, type ScrollableTabsListProps, ScrubInput, type ScrubInputProps, SeamCell, type SeamCellProps, SeamGrid, type SeamGridProps, type SeamGround, SeamList, type SeamListProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, type SegmentedControlSize, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetCloseProps, type SheetContentProps, type SheetDescriptionProps, type SheetFooterProps, type SheetRootProps, type SheetTitleProps, type SheetTriggerProps, Sidebar, type SidebarItemProps, type SidebarRailProps, type SidebarRootProps, type SidebarSectionProps, Skeleton, type SkeletonProps, SkillIcon, Slider, type SliderProps, type SpaceStep, Sparkline, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackAlign, StackIcon, type StackJustify, type StackProps, StacksMatrixIcon, Stat, type StatProps, type StatTone, StatusBar, type StatusBarGroupProps, type StatusBarItemProps, type StatusBarProminence, type StatusBarProps, type StatusBarTone, StatusDot, type StatusDotProps, type StatusTone, Stepper, type StepperProps, type StepperState, type StepperStep, Switch, type SwitchProps, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, type TableCaptionProps, type TableCellProps, type TableGroupRowProps, type TableHeadProps, type TableRootProps, type TableRowProps, TableScrollRegion, type TableScrollRegionProps, type TableSectionProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, TagsInput, type TagsInputProps, TerminalFrame, type TerminalFrameLine, type TerminalFrameProps, type TerminalLine, type TerminalLineTone, type TerminalScript, type TerminalStep, Textarea, type TextareaProps, type ThemeContextValue, type ThemeName, ThemeProvider, type ThemeProviderProps, Timeline, type TimelineContentProps, type TimelineItemProps, type TimelineMarkerProps, type TimelineRootProps, TitleBar, type TitleBarProps, Toast, type ToastManager, type ToastOptions, type ToastProviderProps, type ToastTone, type ToastViewportProps, Toggle, ToggleGroup, type ToggleGroupProps, type ToggleProps, Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarRootProps, type ToolbarSeparatorProps, Tooltip, type TooltipContentProps, type TooltipProviderProps, type TooltipRootProps, type TooltipTriggerProps, Tree, type TreeGuide, type TreeItem, type TreeProps, type TreeRow, type TreeVisibility, TreeVisibilityToggle, type TreeVisibilityToggleProps, TwoStepButton, type TwoStepButtonProps, type TwoStepTone, type UploadFile, type UploadStatus, UsageChart, type UsageChartPoint, type UsageChartProps, type UsageChartTone, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensity, useSidebar, useTheme, useToast };
package/dist/index.js CHANGED
@@ -67,9 +67,13 @@ import { Textarea } from "./forms/textarea.js";
67
67
  import { ToggleGroup } from "./forms/toggle-group.js";
68
68
  import { Toggle } from "./forms/toggle.js";
69
69
  import { AudienceIcon, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, CliToolIcon, FolderIcon, McpServerIcon, SkillIcon, StackIcon, StacksMatrixIcon } from "./icons/containers.js";
70
+ import { activateRowFromClick, activateRowFromKeyDown } from "./instruments/_data-row.js";
70
71
  import { AppWindowFrame } from "./instruments/app-window-frame.js";
71
72
  import { CopyButton } from "./instruments/copy-button.js";
73
+ import { DataRow } from "./instruments/data-row.js";
74
+ import { DataTree } from "./instruments/data-tree.js";
72
75
  import { GroupBar } from "./instruments/group-bar.js";
76
+ import { Ledger } from "./instruments/ledger.js";
73
77
  import { Meter } from "./instruments/meter.js";
74
78
  import { Progress } from "./instruments/progress.js";
75
79
  import { SeamCell, SeamGrid } from "./instruments/seam-grid.js";
@@ -108,4 +112,4 @@ import { Kbd } from "./primitives/kbd.js";
108
112
  import { Skeleton } from "./primitives/skeleton.js";
109
113
  import { useControlHeight, useDensity } from "./system/use-density.js";
110
114
  import { useTheme } from "./system/use-theme.js";
111
- export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, AgentPile, AlertDialog, AppBar, AppShell, AppWindowFrame, AskBox, AudienceIcon, Autocomplete, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, Chip, CliToolIcon, Collapsible, Combobox, CommandPalette, Composer, Container, ContextMenu, CopyButton, CueLogotype, CueMark, CuePortalFrame, DEFAULT_STORAGE_KEY, DelegationCard, Density, DescriptionList, Dialog, Disclosure, Drawer, DropdownMenu, EmptyState, EnvVarInput, Eyebrow, Field, FieldDescription, FieldError, FieldLabel, FileUpload, FolderIcon, Footer, Grid, GroupBar, HoverCard, IconButton, InfoTip, Input, InputGroup, Item, Kbd, Link, McpServerIcon, Menubar, Message, MessageList, Meter, MultiSelect, NavigationMenu, NumberField, OTPField, OVERLAY_SIDE_OFFSET, PageShell, Pagination, Panel, PanelHeader, PasswordInput, Plussie, Popover, Progress, Radio, RadioGroup, Rating, Row, ScrollArea, ScrollableTabsList, ScrubInput, SeamCell, SeamGrid, SeamList, SearchInput, SectionHeader, SegmentedControl, Select, Separator, Sheet, Sidebar, Skeleton, SkillIcon, Slider, Sparkline, Spinner, Stack, StackIcon, StacksMatrixIcon, Stat, StatusBar, StatusDot, Stepper, Switch, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, TableScrollRegion, Tabs, TagsInput, TerminalFrame, Textarea, ThemeProvider, Timeline, TitleBar, Toast, Toggle, ToggleGroup, Toolbar, Tooltip, Tree, TreeVisibilityToggle, TwoStepButton, UsageChart, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensity, useSidebar, useTheme, useToast };
115
+ export { AGENT_COLOR_PROPERTY, AGENT_HUES, AGENT_ROOT_COLOR, Accordion, AgentPile, AlertDialog, AppBar, AppShell, AppWindowFrame, AskBox, AudienceIcon, Autocomplete, Avatar, AvatarGroup, Breadcrumb, Button, ButtonGroup, Card, CatalogueIcon, ChannelBetaIcon, ChannelReleasedIcon, Checkbox, CheckboxGroup, Chip, CliToolIcon, Collapsible, Combobox, CommandPalette, Composer, Container, ContextMenu, CopyButton, CueLogotype, CueMark, CuePortalFrame, DEFAULT_STORAGE_KEY, DataRow, DataTree, DelegationCard, Density, DescriptionList, Dialog, Disclosure, Drawer, DropdownMenu, EmptyState, EnvVarInput, Eyebrow, Field, FieldDescription, FieldError, FieldLabel, FileUpload, FolderIcon, Footer, Grid, GroupBar, HoverCard, IconButton, InfoTip, Input, InputGroup, Item, Kbd, Ledger, Link, McpServerIcon, Menubar, Message, MessageList, Meter, MultiSelect, NavigationMenu, NumberField, OTPField, OVERLAY_SIDE_OFFSET, PageShell, Pagination, Panel, PanelHeader, PasswordInput, Plussie, Popover, Progress, Radio, RadioGroup, Rating, Row, ScrollArea, ScrollableTabsList, ScrubInput, SeamCell, SeamGrid, SeamList, SearchInput, SectionHeader, SegmentedControl, Select, Separator, Sheet, Sidebar, Skeleton, SkillIcon, Slider, Sparkline, Spinner, Stack, StackIcon, StacksMatrixIcon, Stat, StatusBar, StatusDot, Stepper, Switch, TAB_FADE_PX, TREE_GUIDE_GLYPHS, Table, TableScrollRegion, Tabs, TagsInput, TerminalFrame, Textarea, ThemeProvider, Timeline, TitleBar, Toast, Toggle, ToggleGroup, Toolbar, Tooltip, Tree, TreeVisibilityToggle, TwoStepButton, UsageChart, activateRowFromClick, activateRowFromKeyDown, agentColor, agentColorStyle, bareControlClasses, buttonVariants, chipVariants, computeScrollEdges, controlClasses, controlGroupFocusClasses, controlSurface, controlVariants, edgeFadeMask, envReference, flattenTree, itemVariants, linkVariants, menuItemClasses, menuLabelClasses, menuPopupClasses, menuSeparatorClasses, overlayDescriptionClasses, overlayFooterClasses, overlayModalTransitionClasses, overlayPopupTransitionClasses, overlayPositionerClasses, overlaySurfaceClasses, overlayTextClasses, overlayTitleClasses, paginationRange, parseEnvReference, partitionFiles, prepaintScript, rowVariants, scrimClasses, useControlHeight, useCuePortalProps, useDensity, useSidebar, useTheme, useToast };
@@ -0,0 +1,68 @@
1
+ import "../lib/cva.js";
2
+ import * as React from "react";
3
+ //#region src/instruments/_data-row.d.ts
4
+ /**
5
+ * Whether a click on a row means "open this row", and act on it if it does.
6
+ *
7
+ * Exported because more surfaces need this reading than ship a `DataRow.Root`:
8
+ * `Table.Row` documents activation as the caller's job, and a console that draws
9
+ * its list as a `<tr>` in one view and a `DataRow.Root` in another would
10
+ * otherwise run two implementations of one decision — which is how the table
11
+ * view quietly loses modifier-click on the row's link while the ledger view
12
+ * keeps it. `DataRow.Root` calls this exact function; so should you.
13
+ *
14
+ * Four cases a naive `onClick={open}` gets wrong, and this is the whole reason
15
+ * the row is not simply a `<button>`:
16
+ *
17
+ * - **A control inside the row.** The action cluster, a menu trigger, a
18
+ * checkbox — pressing one is not the same gesture as picking the row. Anything
19
+ * under a `[data-stop]` ancestor is left entirely alone, which is why
20
+ * `DataRow.Actions` stamps that attribute on itself.
21
+ * - **A link inside the row.** A plain click on it should open the row's own
22
+ * surface (the drawer, the detail pane), so the anchor's navigation is
23
+ * suppressed — but ⌘/Ctrl/Shift/Alt-click must still open a tab, which is the
24
+ * whole value of having shipped a real `<a href>` in the first place.
25
+ * - **A secondary button.** Only the primary button activates; the middle
26
+ * button belongs to the browser.
27
+ * - **An already-handled event.** A caller's own `onClick` that called
28
+ * `preventDefault()` has said no.
29
+ *
30
+ * @param event The row's own click event.
31
+ * @param activate What "open this row" means to the surface.
32
+ * @example
33
+ * onClick={(event) => activateRowFromClick(event, () => open(row))}
34
+ * @example
35
+ * // The same decision on a table row, which owns its activation itself.
36
+ * <Table.Row
37
+ * interactive
38
+ * tabIndex={0}
39
+ * onClick={(event) => activateRowFromClick(event, () => open(device))}
40
+ * onKeyDown={(event) => activateRowFromKeyDown(event, () => open(device))}
41
+ * >
42
+ */
43
+ declare function activateRowFromClick(event: React.MouseEvent<HTMLElement>, activate: () => void): void;
44
+ /**
45
+ * Whether a key press on a row means "open this row", and act on it if it does.
46
+ *
47
+ * The other half of {@link activateRowFromClick}, and not optional: a row that
48
+ * opens on click and not on Enter is reachable by pointer only. It fires only
49
+ * when the row itself has focus, so the element it is attached to needs a
50
+ * `tabIndex` — a `<div>` and a `<tr>` are both unfocusable by default, and this
51
+ * handler on an unfocusable row is dead code.
52
+ *
53
+ * Guarded on `event.target === event.currentTarget` so a control inside the row
54
+ * keeps its own keys: without it a rename field on a row could never contain a
55
+ * space, and every action button's Enter would also open the row behind it.
56
+ *
57
+ * Space is prevented rather than merely handled, because the browser's default
58
+ * for Space on a focused non-control is to scroll the page — a row that opened
59
+ * a drawer *and* jumped the list a screenful would read as a bug.
60
+ *
61
+ * @param event The row's own keydown event.
62
+ * @param activate What "open this row" means to the surface.
63
+ * @example
64
+ * onKeyDown={(event) => activateRowFromKeyDown(event, () => open(row))}
65
+ */
66
+ declare function activateRowFromKeyDown(event: React.KeyboardEvent<HTMLElement>, activate: () => void): void;
67
+ //#endregion
68
+ export { activateRowFromClick, activateRowFromKeyDown };
@@ -0,0 +1,139 @@
1
+ import { cva } from "../lib/cva.js";
2
+ //#region src/instruments/_data-row.ts
3
+ /**
4
+ * The row recipe, in the three shapes the surfaces need.
5
+ *
6
+ * `layout` — `grid` is the row proper, whose children are its columns; `flex`
7
+ * is the tree row, which puts a disclosure chevron outside the grid so the
8
+ * chevron is not a column the caller has to count (see the column-count rule in
9
+ * {@link DATA_ROW_COLUMNS}).
10
+ *
11
+ * `indent` — the tree's depth step, folded into the row's own left padding
12
+ * rather than applied to an inner wrapper, because the guides
13
+ * ({@link DataTreeProps.guides}) are painted on the row's background box and
14
+ * have to start where the padding does.
15
+ *
16
+ * `interactive` — the row responds to a pointer and to the keyboard. The focus
17
+ * ring is *inset* (`-outline-offset-2`), the same ruling as `Row`: these rows
18
+ * live in clipped panes, where an outset ring on the first or last row is cut
19
+ * off by the pane's own rim. `outline-solid` rides along with every
20
+ * `outline-<n>` in this file because Tailwind v4 leaves `--tw-outline-style`
21
+ * unset otherwise and the ring never paints — `test/focus-ring.test.ts` is what
22
+ * keeps the pair together.
23
+ *
24
+ * The selected tint is in the base rather than in `interactive`: a static row in
25
+ * a selected group still reads as selected, and the attribute is the contract
26
+ * either way. It is declared after the hover wash on purpose — Tailwind emits
27
+ * `data-*` variants after `hover:`, so a selected row keeps its accent tint
28
+ * while the pointer is over it instead of flickering back to the hover grey.
29
+ *
30
+ * @example
31
+ * cn(dataRowVariants({ interactive: true }), className)
32
+ */
33
+ const dataRowVariants = cva([
34
+ "group/data-row w-full items-center gap-(--cue-space-3) py-(--cue-pad-row-y)",
35
+ "font-mono text-(length:--cue-text-ui) text-fg",
36
+ "border-t border-t-(--cue-hair) first:border-t-0",
37
+ "data-[selected]:bg-accent-soft data-[disabled]:pointer-events-none data-[disabled]:opacity-40"
38
+ ].join(" "), {
39
+ variants: {
40
+ layout: {
41
+ grid: "grid [grid-template-columns:var(--cue-data-row-cols,1fr_auto)]",
42
+ flex: "flex"
43
+ },
44
+ indent: {
45
+ true: "pr-(--cue-pad-row-x) pl-[calc(var(--cue-pad-row-x)_+_var(--depth)_*_var(--cue-data-tree-indent,1.25rem))]",
46
+ false: "px-(--cue-pad-row-x)"
47
+ },
48
+ interactive: {
49
+ true: "cursor-pointer outline-none hover:bg-(--cue-row-hover) focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-accent",
50
+ false: ""
51
+ }
52
+ },
53
+ defaultVariants: {
54
+ layout: "grid",
55
+ indent: false,
56
+ interactive: false
57
+ }
58
+ });
59
+ /**
60
+ * Whether a click on a row means "open this row", and act on it if it does.
61
+ *
62
+ * Exported because more surfaces need this reading than ship a `DataRow.Root`:
63
+ * `Table.Row` documents activation as the caller's job, and a console that draws
64
+ * its list as a `<tr>` in one view and a `DataRow.Root` in another would
65
+ * otherwise run two implementations of one decision — which is how the table
66
+ * view quietly loses modifier-click on the row's link while the ledger view
67
+ * keeps it. `DataRow.Root` calls this exact function; so should you.
68
+ *
69
+ * Four cases a naive `onClick={open}` gets wrong, and this is the whole reason
70
+ * the row is not simply a `<button>`:
71
+ *
72
+ * - **A control inside the row.** The action cluster, a menu trigger, a
73
+ * checkbox — pressing one is not the same gesture as picking the row. Anything
74
+ * under a `[data-stop]` ancestor is left entirely alone, which is why
75
+ * `DataRow.Actions` stamps that attribute on itself.
76
+ * - **A link inside the row.** A plain click on it should open the row's own
77
+ * surface (the drawer, the detail pane), so the anchor's navigation is
78
+ * suppressed — but ⌘/Ctrl/Shift/Alt-click must still open a tab, which is the
79
+ * whole value of having shipped a real `<a href>` in the first place.
80
+ * - **A secondary button.** Only the primary button activates; the middle
81
+ * button belongs to the browser.
82
+ * - **An already-handled event.** A caller's own `onClick` that called
83
+ * `preventDefault()` has said no.
84
+ *
85
+ * @param event The row's own click event.
86
+ * @param activate What "open this row" means to the surface.
87
+ * @example
88
+ * onClick={(event) => activateRowFromClick(event, () => open(row))}
89
+ * @example
90
+ * // The same decision on a table row, which owns its activation itself.
91
+ * <Table.Row
92
+ * interactive
93
+ * tabIndex={0}
94
+ * onClick={(event) => activateRowFromClick(event, () => open(device))}
95
+ * onKeyDown={(event) => activateRowFromKeyDown(event, () => open(device))}
96
+ * >
97
+ */
98
+ function activateRowFromClick(event, activate) {
99
+ if (event.defaultPrevented || event.button !== 0) return;
100
+ const target = event.target;
101
+ if (target === null) return;
102
+ if (target.closest("[data-stop]") !== null) return;
103
+ if (target.closest("a[href]") !== null) {
104
+ if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
105
+ event.preventDefault();
106
+ }
107
+ activate();
108
+ }
109
+ /**
110
+ * Whether a key press on a row means "open this row", and act on it if it does.
111
+ *
112
+ * The other half of {@link activateRowFromClick}, and not optional: a row that
113
+ * opens on click and not on Enter is reachable by pointer only. It fires only
114
+ * when the row itself has focus, so the element it is attached to needs a
115
+ * `tabIndex` — a `<div>` and a `<tr>` are both unfocusable by default, and this
116
+ * handler on an unfocusable row is dead code.
117
+ *
118
+ * Guarded on `event.target === event.currentTarget` so a control inside the row
119
+ * keeps its own keys: without it a rename field on a row could never contain a
120
+ * space, and every action button's Enter would also open the row behind it.
121
+ *
122
+ * Space is prevented rather than merely handled, because the browser's default
123
+ * for Space on a focused non-control is to scroll the page — a row that opened
124
+ * a drawer *and* jumped the list a screenful would read as a bug.
125
+ *
126
+ * @param event The row's own keydown event.
127
+ * @param activate What "open this row" means to the surface.
128
+ * @example
129
+ * onKeyDown={(event) => activateRowFromKeyDown(event, () => open(row))}
130
+ */
131
+ function activateRowFromKeyDown(event, activate) {
132
+ if (event.defaultPrevented) return;
133
+ if (event.target !== event.currentTarget) return;
134
+ if (event.key !== "Enter" && event.key !== " ") return;
135
+ event.preventDefault();
136
+ activate();
137
+ }
138
+ //#endregion
139
+ export { activateRowFromClick, activateRowFromKeyDown, dataRowVariants };
@@ -0,0 +1,94 @@
1
+ import * as React from "react";
2
+ //#region src/instruments/data-row.d.ts
3
+ /** What an interactive row discloses, when it discloses something. */
4
+ interface DataRowDisclosure {
5
+ /** Whether the surface this row opens is currently showing. */
6
+ expanded: boolean;
7
+ /**
8
+ * The `id` of the element the row opens, when that element is in the DOM.
9
+ *
10
+ * Omit it while the surface is closed and unrendered: `aria-controls`
11
+ * pointing at an id that does not exist is worse than no `aria-controls`.
12
+ */
13
+ controls?: string;
14
+ }
15
+ interface DataRowRootProps extends React.ComponentPropsWithoutRef<"div"> {
16
+ /**
17
+ * The row responds to a pointer and to the keyboard: hover wash, `cursor`,
18
+ * an inset focus ring and a tab stop. Defaults to `false`.
19
+ */
20
+ interactive?: boolean;
21
+ /**
22
+ * Draw the row as picked out of the list. Defaults to `false`.
23
+ *
24
+ * Sets `data-selected`, which is also what the hover-revealed action track and
25
+ * the accent tint key off — so a `<tr data-selected>` in the table idiom gets
26
+ * exactly the same treatment without going through this component.
27
+ */
28
+ selected?: boolean;
29
+ /** Grey the row out and stop it responding to anything. Defaults to `false`. */
30
+ disabled?: boolean;
31
+ /** What "open this row" means — a drawer, a detail pane, a route. */
32
+ onActivate?: () => void;
33
+ /**
34
+ * Expose the row as a disclosure: `data-expanded` always, `aria-expanded`
35
+ * when the row has a `role` that can carry it, and `aria-controls` when the
36
+ * disclosed element is on the page.
37
+ *
38
+ * **`aria-expanded` is gated on the role, because on a bare `<div>` it is
39
+ * worse than nothing.** A role-less div maps to `generic`, which supports
40
+ * only the global attributes — so the state is dropped outright by Blink,
41
+ * WebKit and Gecko alike (verified through Chromium's own accessibility
42
+ * tree), announces nothing, and adds a critical `aria-allowed-attr` finding
43
+ * to any axe run over the console that used it. `role` passes straight
44
+ * through as a div prop, so a row that genuinely is a disclosure says which
45
+ * kind it is — `role="button"` for a row that opens a drawer, `role="row"`
46
+ * inside a grid — and gets the attribute with it. Everything else gets
47
+ * `data-expanded`, which styles and tests exactly as well and promises
48
+ * nothing to a screen reader.
49
+ *
50
+ * The row is still not given a widget role on its own account: a
51
+ * `role="button"` row could not legally hold the buttons and links these rows
52
+ * exist to contain, and that judgement belongs to the caller who knows what
53
+ * their row does. Where the disclosure has to be bulletproof for assistive
54
+ * technology, reach for `DataTree` (real `treeitem` expansion) or a
55
+ * `Table.GroupRow` with a real toggle button in it.
56
+ */
57
+ disclosure?: DataRowDisclosure;
58
+ }
59
+ /** The native `<span>` surface every row slot shares, plus `className`. */
60
+ type DataRowSlotProps = React.ComponentPropsWithoutRef<"span">;
61
+ /**
62
+ * The dense interactive row, as one anatomy three surfaces share.
63
+ *
64
+ * `Ledger`, a grouped `Table` and `DataTree` are three drawings of the same row
65
+ * model, and this is the model: a marker, a label, a description, tags, a
66
+ * figure, and a trailing action cluster that is only there when you are looking
67
+ * at the row. Composing them yourself — rather than passing a `columns` array —
68
+ * is what keeps the primitive domain-neutral: a corpus of skills and a rig of
69
+ * fixtures need the same six slots and completely different columns.
70
+ *
71
+ * The slots are thin: each is a `<span>` with a `data-slot`, the type and
72
+ * truncation rule for its column, and nothing else. They may be used inside a
73
+ * `DataTree` row and inside a `Table.Cell` too — `Table.Row` carries the same
74
+ * `group/data-row` name, so `DataRow.Actions` reveals in the table idiom
75
+ * without a second implementation.
76
+ *
77
+ * @example
78
+ * <DataRow.Root interactive onActivate={() => open(skill)}>
79
+ * <DataRow.Marker><StatusDot tone="ok" /></DataRow.Marker>
80
+ * <DataRow.Label>{skill.name}</DataRow.Label>
81
+ * <DataRow.Meta>{skill.installs}</DataRow.Meta>
82
+ * </DataRow.Root>
83
+ */
84
+ declare const DataRow: {
85
+ Root: React.ForwardRefExoticComponent<DataRowRootProps & React.RefAttributes<HTMLDivElement>>;
86
+ Marker: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
87
+ Label: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
88
+ Description: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
89
+ Tags: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
90
+ Meta: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
91
+ Actions: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
92
+ };
93
+ //#endregion
94
+ export { DataRow, DataRowDisclosure, DataRowRootProps, DataRowSlotProps };
@@ -0,0 +1,151 @@
1
+ "use client";
2
+ import { cn } from "../lib/cn.js";
3
+ import { activateRowFromClick, activateRowFromKeyDown, dataRowVariants } from "./_data-row.js";
4
+ import * as React from "react";
5
+ import { jsx } from "react/jsx-runtime";
6
+ //#region src/instruments/data-row.tsx
7
+ /**
8
+ * The roles that carry `aria-expanded`, per ARIA 1.2's own "supported in roles"
9
+ * list, filtered to the ones a row could plausibly be given.
10
+ *
11
+ * The absent case is the one that matters: no `role` at all. A `<div>` is
12
+ * `generic`, `generic` supports only the globals, and every engine drops an
13
+ * `aria-expanded` it finds there rather than exposing a state — so emitting it
14
+ * anyway buys nothing and costs a critical axe violation.
15
+ */
16
+ const ROLES_SUPPORTING_EXPANDED = /* @__PURE__ */ new Set([
17
+ "application",
18
+ "button",
19
+ "checkbox",
20
+ "columnheader",
21
+ "combobox",
22
+ "grid",
23
+ "gridcell",
24
+ "link",
25
+ "listbox",
26
+ "menuitem",
27
+ "menuitemcheckbox",
28
+ "menuitemradio",
29
+ "row",
30
+ "rowheader",
31
+ "searchbox",
32
+ "switch",
33
+ "tab",
34
+ "table",
35
+ "textbox",
36
+ "treeitem"
37
+ ]);
38
+ /**
39
+ * The dense interactive row, as one anatomy three surfaces share.
40
+ *
41
+ * `Ledger`, a grouped `Table` and `DataTree` are three drawings of the same row
42
+ * model, and this is the model: a marker, a label, a description, tags, a
43
+ * figure, and a trailing action cluster that is only there when you are looking
44
+ * at the row. Composing them yourself — rather than passing a `columns` array —
45
+ * is what keeps the primitive domain-neutral: a corpus of skills and a rig of
46
+ * fixtures need the same six slots and completely different columns.
47
+ *
48
+ * The slots are thin: each is a `<span>` with a `data-slot`, the type and
49
+ * truncation rule for its column, and nothing else. They may be used inside a
50
+ * `DataTree` row and inside a `Table.Cell` too — `Table.Row` carries the same
51
+ * `group/data-row` name, so `DataRow.Actions` reveals in the table idiom
52
+ * without a second implementation.
53
+ *
54
+ * @example
55
+ * <DataRow.Root interactive onActivate={() => open(skill)}>
56
+ * <DataRow.Marker><StatusDot tone="ok" /></DataRow.Marker>
57
+ * <DataRow.Label>{skill.name}</DataRow.Label>
58
+ * <DataRow.Meta>{skill.installs}</DataRow.Meta>
59
+ * </DataRow.Root>
60
+ */
61
+ const DataRow = {
62
+ Root: React.forwardRef(function DataRowRoot({ className, interactive = false, selected = false, disabled = false, onActivate, disclosure, onClick, onKeyDown, role, ...elementProps }, ref) {
63
+ const expandable = role !== void 0 && ROLES_SUPPORTING_EXPANDED.has(role);
64
+ const activate = React.useCallback(() => {
65
+ if (!disabled) onActivate?.();
66
+ }, [disabled, onActivate]);
67
+ const handleClick = React.useCallback((event) => {
68
+ onClick?.(event);
69
+ if (interactive) activateRowFromClick(event, activate);
70
+ }, [
71
+ activate,
72
+ interactive,
73
+ onClick
74
+ ]);
75
+ const handleKeyDown = React.useCallback((event) => {
76
+ onKeyDown?.(event);
77
+ if (interactive) activateRowFromKeyDown(event, activate);
78
+ }, [
79
+ activate,
80
+ interactive,
81
+ onKeyDown
82
+ ]);
83
+ return /* @__PURE__ */ jsx("div", {
84
+ ref,
85
+ ...elementProps,
86
+ role,
87
+ "data-slot": "data-row",
88
+ "data-selected": selected ? "" : void 0,
89
+ "data-disabled": disabled ? "" : void 0,
90
+ "data-expanded": disclosure?.expanded === true ? "" : void 0,
91
+ tabIndex: interactive && !disabled ? 0 : void 0,
92
+ "aria-expanded": disclosure === void 0 || !expandable ? void 0 : disclosure.expanded,
93
+ "aria-controls": disclosure?.controls,
94
+ "aria-disabled": disabled ? true : void 0,
95
+ onClick: handleClick,
96
+ onKeyDown: handleKeyDown,
97
+ className: cn(dataRowVariants({ interactive }), className)
98
+ });
99
+ }),
100
+ Marker: React.forwardRef(function DataRowMarker({ className, ...elementProps }, ref) {
101
+ return /* @__PURE__ */ jsx("span", {
102
+ ref,
103
+ "data-slot": "data-row-marker",
104
+ className: cn("flex shrink-0 items-center", className),
105
+ ...elementProps
106
+ });
107
+ }),
108
+ Label: React.forwardRef(function DataRowLabel({ className, ...elementProps }, ref) {
109
+ return /* @__PURE__ */ jsx("span", {
110
+ ref,
111
+ "data-slot": "data-row-label",
112
+ className: cn("min-w-0 truncate text-fg", className),
113
+ ...elementProps
114
+ });
115
+ }),
116
+ Description: React.forwardRef(function DataRowDescription({ className, ...elementProps }, ref) {
117
+ return /* @__PURE__ */ jsx("span", {
118
+ ref,
119
+ "data-slot": "data-row-description",
120
+ className: cn("min-w-0 truncate text-(length:--cue-text-label) text-fg-muted", className),
121
+ ...elementProps
122
+ });
123
+ }),
124
+ Tags: React.forwardRef(function DataRowTags({ className, ...elementProps }, ref) {
125
+ return /* @__PURE__ */ jsx("span", {
126
+ ref,
127
+ "data-slot": "data-row-tags",
128
+ className: cn("flex min-w-0 items-center gap-(--cue-space-1)", className),
129
+ ...elementProps
130
+ });
131
+ }),
132
+ Meta: React.forwardRef(function DataRowMeta({ className, ...elementProps }, ref) {
133
+ return /* @__PURE__ */ jsx("span", {
134
+ ref,
135
+ "data-slot": "data-row-meta",
136
+ className: cn("shrink-0 tabular-nums text-fg-subtle", className),
137
+ ...elementProps
138
+ });
139
+ }),
140
+ Actions: React.forwardRef(function DataRowActions({ className, ...elementProps }, ref) {
141
+ return /* @__PURE__ */ jsx("span", {
142
+ ref,
143
+ "data-slot": "data-row-actions",
144
+ "data-stop": "",
145
+ className: cn("invisible inline-flex shrink-0 items-center gap-(--cue-space-1) [&>*]:shrink-0", "group-hover/data-row:visible group-focus-within/data-row:visible group-data-[selected]/data-row:visible", "[@media(hover:none)]:visible", className),
146
+ ...elementProps
147
+ });
148
+ })
149
+ };
150
+ //#endregion
151
+ export { DataRow };