@assure-one/design-system 1.42.0 → 1.43.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1,17 +1,17 @@
1
1
  "use client";
2
- import { useFormReset, badgeVariants, DataTableBody, DataTableRow, DataTableCell, Badge, Pagination, TableBody, TableRow, TableCell, Table, TableHeader, TableHead, ToggleGroup, ToggleGroupItem } from './chunk-YMRSFVW7.js';
3
- export { Badge, DataTable, DataTableBody, DataTableCell, DataTableCellDue, DataTableCellId, DataTableCellMono, DataTableCellName, DataTableCheckbox, DataTableHead, DataTableHeader, DataTablePagination, DataTableResultsCount, DataTableRow, DataTableSearch, DataTableSpacer, DataTableToolbar, DataTableView, EmptyValue, PROGRESS_LEGACY_TO_INTENT, Pagination, ProgressBar, ProgressRing, SERVICE_TONES, STATUS_DOT_TONE_TO_INTENT, SegmentedProgress, StatusDot, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, ToggleGroup, ToggleGroupItem, badgeVariants, compareSortValues, nextSortDirection, progressBarVariants, progressRingVariants, resolveBadgeAppearance, serviceToneLabel, serviceToneStyle, statusDotVariants, useDataTable } from './chunk-YMRSFVW7.js';
4
- import { Collapsible, CollapsibleTrigger, CollapsibleContent, PlainLink, Combobox, CmdkCompatContext, Sheet, SheetContent, SheetTitle } from './chunk-H53VF62B.js';
5
- export { BrandScope, BrandScopeProvider, Chip, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, DEFAULT_COMBOBOX_MESSAGES, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarBrand, SidebarBrandText, SidebarDrawer, SidebarFooter, SidebarLink, SidebarLinkAction, SidebarLinkBadge, SidebarLinkGroup, SidebarLinkLabel, SidebarPinButton, SidebarProvider, SidebarSection, SidebarTrigger, SidebarUser, assetPath, brandScope, chipVariants, getAssetBasePath, resolveChipStyle, setAssetBasePath, sidebarLinkBadgeVariants, useBrandScope, useSidebarPeekLock, useSidebarState } from './chunk-H53VF62B.js';
6
- import { withPortalContainer, Backdrop, alertDialogAnatomy, OverlaySurface, OverlayTitle, OverlayDescription, Button, slot, useDsMessages, useLinkComponent, surfaceAnatomy, stateAttributes, cardAnatomy, ModalPortal, kbdAnatomy, FieldContext, fieldAnatomy, useFieldContext, MENU_SUB_TRIGGER_CHEVRON, menuSubTriggerClasses, MENU_INSET, contextMenuAnatomy, presence, menuItemClasses, MENU_ITEM_DANGER, MENU_INDICATOR_WELL, MENU_CHECK_GLYPH, menuIndicatorItemClasses, MENU_RADIO_GLYPH, menuLabelClasses, menuSeparatorClasses, useFieldControl, useMergedRefs, joinIds, Popover, PopoverTrigger, PopoverContent, FormBridge, CONTROL_SIZE_CLASSES, dialogAnatomy, DismissButton, DEFAULT_OVERLAY_MESSAGES, DISMISS_GLYPH_CLASSES, OverlayBody, headingAnatomy, deprecate, floatingSurfaceClasses, FLOATING_PADDING, FLOATING_WIDTH, labelAnatomy, warnLegacyButtonProps, resolveButtonIcons, buttonVariants, INERT_CLASSES, DISABLED_LOOK_CLASSES, inertHandlers, INERT_ATTRIBUTES, linkButtonAnatomy, useControllableState, controlChrome, mergeRefs, numberInputAnatomy, EN_MESSAGES, phoneFieldAnatomy, Input, useFieldsetContext, radioGroupAnatomy, microInteractions, CONTROL_LABEL_TEXT, searchInputAnatomy, IconButton, codeAnatomy, Slot, textAnatomy, stackAnatomy, inlineAnatomy, statusBadgeAnatomy, Tooltip, TooltipTrigger, TooltipContent, useFieldsetState, FieldsetContext, fieldsetAnatomy, useFieldsetLegend, shellAnatomy, Avatar, dataTableAnatomy, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, useId as useId$1, partId, errorOnce, isLabelable, Spinner, Select, Checkbox, FIELD_PARTS, SelectRoot, SelectTrigger, SelectValue, SelectContent, SelectItem, OverlayHeader, OverlayFooter, commandAnatomy, menuShortcutClasses, useFormReset as useFormReset$1, sideDrawerAnatomy, Portal, toastAnatomy, useExitPresence, TooltipProvider, TOOLTIP_DEFAULT_DELAY_MS, DesignSystemContext, PortalContainerContext, ModalRoot, ModalOverlay, ModalContent, ModalTitle, ModalDescription } from './chunk-M2HMZ2RW.js';
7
- export { Avatar, Button, Checkbox, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FileChip, FileUpload, IconButton, Input, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, Pressable, SPINNER_TONE_TO_INTENT, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Spinner, Textarea, ThemeScope, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, buttonVariants, iconButtonVariants, inputVariants, resolveButtonStyle, spinnerVariants, textareaVariants, useDsMessages, useFieldControl } from './chunk-M2HMZ2RW.js';
8
- import { cn, ChevronDownIcon, EyeIcon, DownloadIcon, ChevronRightIcon, CheckIcon, CircleIcon, CopyIcon, CalendarIcon, XIcon, AlertTriangleIcon, ArrowRightIcon, ArrowLeftIcon, FileTextIcon, ZoomOutIcon, ZoomInIcon, TrendingUpIcon, TrendingDownIcon, SearchIcon, TableIcon, StarIcon, ListChecksIcon, CheckCircleSolidIcon, HelpCircleIcon, UserIcon, SendIcon, SettingsIcon, ChevronLeftIcon, FolderOpenIcon, FolderClosedIcon, MinusIcon, AlertCircleIcon, CheckCircle2Icon, PlusIcon, LoaderIcon, InfoCircleSolidIcon, AlertTriangleSolidIcon, XCircleSolidIcon, RotateCcwIcon, InfoIcon, CommandIcon } from './chunk-AF3QYJ24.js';
9
- export { AlertCircleIcon, AlertTriangleIcon, AlertTriangleSolidIcon, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowRightSmallIcon, ArrowUpIcon, ArrowUpRightIcon, AtSignIcon, BanIcon, BarChartIcon, BellIcon, BoldIcon, BrainIcon, BriefcaseIcon, Building2Icon, BuildingIcon, CalculatorIcon, CalendarIcon, CameraIcon, ChatBubbleIcon, CheckCheckIcon, CheckCircle2Icon, CheckCircleSolidIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, CircleDotIcon, CircleIcon, ClipboardCheckIcon, ClockIcon, CloseIcon, CommandIcon, CopyIcon, CornerDownLeftIcon, CreditCardIcon, DocumentIcon, DollarSignIcon, DownloadIcon, ExternalLinkIcon, ExtractIcon, EyeIcon, EyeOffIcon, FileChartColumnIcon, FileIcon, FileReturnIcon, FileTextIcon, FilterIcon, FlagIcon, FolderClosedIcon, FolderDownIcon, FolderOpenIcon, FolderPlusIcon, FolderUpIcon, GlobeIcon, GoogleBrandIcon, GraduationCapIcon, GripHorizontalIcon, GripVerticalIcon, HelpCircleIcon, HistoryIcon, HomeIcon, InboxIcon, InfoCircleSolidIcon, InfoIcon, ItalicIcon, KanbanIcon, KeyIcon, LandmarkIcon, LayersIcon, LayoutDashboardIcon, LayoutGridIcon, LayoutListIcon, LightningIcon, Link2Icon, LinkIcon, ListChecksIcon, ListIcon, ListOrderedIcon, LoaderIcon, LockIcon, LockKeyholeIcon, LockOpenIcon, LogOutIcon, MailIcon, MapPinIcon, MaximizeIcon, MenuIcon, MessageCircleIcon, MessageCircleMoreIcon, MessageCircleWarningIcon, MicIcon, MicrosoftBrandIcon, MinimizeIcon, MinusIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MousePointer2Icon, MoveIcon, PaletteIcon, PanelLeftCloseIcon, PanelLeftIcon, PanelRightCloseIcon, PanelRightIcon, PaperclipIcon, PauseIcon, PenSignIcon, PenToolIcon, PencilIcon, PhoneIcon, PlayIcon, PlusIcon, ReceiptIcon, RefreshCwIcon, ReplyIcon, RotateCcwIcon, SaveIcon, SearchIcon, SendIcon, SettingsIcon, ShieldIcon, SigmaIcon, SlashIcon, SmartphoneIcon, SparkleIcon, SparklesIcon, SquarePlayIcon, StarIcon, StopIcon, StrikethroughIcon, SunIcon, TableIcon, TagIcon, TeamIcon, ThumbsDownIcon, ThumbsUpIcon, TimerIcon, Trash2Icon, TrashIcon, TrashSolidIcon, TrendingDownIcon, TrendingUpIcon, TypeIcon, UnderlineIcon, UploadIcon, UserCircleIcon, UserIcon, UsersIcon, VideoIcon, Volume2Icon, VolumeXIcon, WorkflowIcon, XCircleSolidIcon, XIcon, ZoomInIcon, ZoomOutIcon, cn, createIcon } from './chunk-AF3QYJ24.js';
2
+ import { Skeleton, ToggleGroup, ToggleGroupItem, badgeVariants, DataTableBody, DataTableRow, DataTableCell, Badge, Pagination, TableBody, TableRow, TableCell, Table, TableHeader, TableHead } from './chunk-5AL4W32Z.js';
3
+ export { Badge, DataTable, DataTableBody, DataTableCell, DataTableCellDue, DataTableCellId, DataTableCellMono, DataTableCellName, DataTableCheckbox, DataTableHead, DataTableHeader, DataTablePagination, DataTableResultsCount, DataTableRow, DataTableSearch, DataTableSpacer, DataTableToolbar, DataTableView, EmptyValue, PROGRESS_LEGACY_TO_INTENT, Pagination, ProgressBar, ProgressRing, SERVICE_TONES, STATUS_DOT_TONE_TO_INTENT, SegmentedProgress, Skeleton, SkeletonCircle, SkeletonText, StatusDot, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, ToggleGroup, ToggleGroupItem, badgeVariants, compareSortValues, nextSortDirection, progressBarVariants, progressRingVariants, resolveBadgeAppearance, serviceToneLabel, serviceToneStyle, statusDotVariants, useDataTable } from './chunk-5AL4W32Z.js';
4
+ import { Collapsible, CollapsibleTrigger, CollapsibleContent, PlainLink, Combobox, Sidebar, SidebarFooter, SidebarUser, useSidebarState, SidebarSection, SidebarLinkGroup, SidebarLink, SidebarLinkLabel, SidebarLinkBadge, CmdkCompatContext, Sheet, SheetContent, SheetTitle } from './chunk-L5IQK3GV.js';
5
+ export { BrandScope, BrandScopeProvider, Chip, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, DEFAULT_COMBOBOX_MESSAGES, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarBrand, SidebarBrandText, SidebarDrawer, SidebarFooter, SidebarLink, SidebarLinkAction, SidebarLinkBadge, SidebarLinkGroup, SidebarLinkLabel, SidebarPinButton, SidebarProvider, SidebarSection, SidebarTrigger, SidebarUser, assetPath, brandScope, chipVariants, getAssetBasePath, resolveChipStyle, setAssetBasePath, sidebarLinkBadgeVariants, useBrandScope, useSidebarPeekLock, useSidebarState } from './chunk-L5IQK3GV.js';
6
+ import { withPortalContainer, Backdrop, alertDialogAnatomy, OverlaySurface, OverlayTitle, OverlayDescription, Button, slot, useDsMessages, useLinkComponent, surfaceAnatomy, stateAttributes, cardAnatomy, ModalPortal, kbdAnatomy, FieldContext, fieldAnatomy, useFieldContext, MENU_SUB_TRIGGER_CHEVRON, menuSubTriggerClasses, MENU_INSET, contextMenuAnatomy, presence, menuItemClasses, MENU_ITEM_DANGER, MENU_INDICATOR_WELL, MENU_CHECK_GLYPH, menuIndicatorItemClasses, MENU_RADIO_GLYPH, menuLabelClasses, menuSeparatorClasses, useFieldControl, useMergedRefs, joinIds, Popover, PopoverTrigger, PopoverContent, FormBridge, CONTROL_SIZE_CLASSES, dialogAnatomy, DismissButton, DEFAULT_OVERLAY_MESSAGES, DISMISS_GLYPH_CLASSES, OverlayBody, headingAnatomy, deprecate, floatingSurfaceClasses, FLOATING_PADDING, FLOATING_WIDTH, labelAnatomy, warnLegacyButtonProps, resolveButtonIcons, buttonVariants, INERT_CLASSES, DISABLED_LOOK_CLASSES, inertHandlers, INERT_ATTRIBUTES, linkButtonAnatomy, useControllableState, controlChrome, mergeRefs, numberInputAnatomy, EN_MESSAGES, phoneFieldAnatomy, Input, useFieldsetContext, useFormReset2, radioGroupAnatomy, microInteractions, CONTROL_LABEL_TEXT, searchInputAnatomy, IconButton, Tooltip, TooltipTrigger, TooltipContent, codeAnatomy, Slot, textAnatomy, stackAnatomy, inlineAnatomy, statusBadgeAnatomy, useFieldsetState, FieldsetContext, fieldsetAnatomy, useFieldsetLegend, shellAnatomy, Avatar, dataTableAnatomy, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuCheckboxItem, useId as useId$1, partId, errorOnce, isLabelable, Spinner, Select, Checkbox, FIELD_PARTS, SelectRoot, SelectTrigger, SelectValue, SelectContent, SelectItem, OverlayHeader, OverlayFooter, commandAnatomy, menuShortcutClasses, useFormReset, sideDrawerAnatomy, Portal, toastAnatomy, useExitPresence, TooltipProvider, TOOLTIP_DEFAULT_DELAY_MS, DesignSystemContext, PortalContainerContext, ModalRoot, ModalOverlay, ModalContent, ModalTitle, ModalDescription } from './chunk-VK6SW34V.js';
7
+ export { Avatar, Button, Checkbox, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FileChip, FileUpload, IconButton, Input, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, Pressable, SPINNER_TONE_TO_INTENT, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Spinner, Textarea, ThemeScope, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, buttonVariants, iconButtonVariants, inputVariants, resolveButtonStyle, spinnerVariants, textareaVariants, useDsMessages, useFieldControl } from './chunk-VK6SW34V.js';
8
+ import { cn, ChevronDownIcon, EyeIcon, DownloadIcon, ChevronRightIcon, CheckIcon, CircleIcon, CopyIcon, CalendarIcon, XIcon, AlertTriangleIcon, ArrowRightIcon, ArrowLeftIcon, FileTextIcon, ZoomOutIcon, ZoomInIcon, TrendingUpIcon, TrendingDownIcon, SearchIcon, TableIcon, StarIcon, RowsIcon, Rows4Icon, ListChecksIcon, CheckCircleSolidIcon, HelpCircleIcon, UserIcon, SendIcon, SettingsIcon, ChevronLeftIcon, FolderOpenIcon, FolderClosedIcon, MinusIcon, AlertCircleIcon, CheckCircle2Icon, PlusIcon, LoaderIcon, InfoCircleSolidIcon, AlertTriangleSolidIcon, XCircleSolidIcon, RotateCcwIcon, InfoIcon, CommandIcon } from './chunk-TBDTXAFH.js';
9
+ export { AlertCircleIcon, AlertTriangleIcon, AlertTriangleSolidIcon, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowRightSmallIcon, ArrowUpIcon, ArrowUpRightIcon, AtSignIcon, BanIcon, BarChartIcon, BellIcon, BoldIcon, BrainIcon, BriefcaseIcon, Building2Icon, BuildingIcon, CalculatorIcon, CalendarIcon, CameraIcon, ChatBubbleIcon, CheckCheckIcon, CheckCircle2Icon, CheckCircleSolidIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownUpIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpDownIcon, CircleDotIcon, CircleIcon, ClipboardCheckIcon, ClockIcon, CloseIcon, CommandIcon, CopyIcon, CornerDownLeftIcon, CreditCardIcon, DocumentIcon, DollarSignIcon, DownloadIcon, ExternalLinkIcon, ExtractIcon, EyeIcon, EyeOffIcon, FileChartColumnIcon, FileIcon, FileReturnIcon, FileTextIcon, FilterIcon, FlagIcon, FolderClosedIcon, FolderDownIcon, FolderOpenIcon, FolderPlusIcon, FolderUpIcon, GlobeIcon, GoogleBrandIcon, GraduationCapIcon, GripHorizontalIcon, GripVerticalIcon, HelpCircleIcon, HistoryIcon, HomeIcon, InboxIcon, InfoCircleSolidIcon, InfoIcon, ItalicIcon, KanbanIcon, KeyIcon, LandmarkIcon, LayersIcon, LayoutDashboardIcon, LayoutGridIcon, LayoutListIcon, LightningIcon, Link2Icon, LinkIcon, ListChecksIcon, ListIcon, ListOrderedIcon, LoaderIcon, LockIcon, LockKeyholeIcon, LockOpenIcon, LogOutIcon, MailIcon, MapPinIcon, MaximizeIcon, MenuIcon, MessageCircleIcon, MessageCircleMoreIcon, MessageCircleWarningIcon, MicIcon, MicrosoftBrandIcon, MinimizeIcon, MinusIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MousePointer2Icon, MoveIcon, PaletteIcon, PanelLeftCloseIcon, PanelLeftIcon, PanelRightCloseIcon, PanelRightIcon, PaperclipIcon, PauseIcon, PenSignIcon, PenToolIcon, PencilIcon, PhoneIcon, PlayIcon, PlusIcon, ReceiptIcon, RefreshCwIcon, ReplyIcon, RotateCcwIcon, Rows4Icon, RowsIcon, SaveIcon, SearchIcon, SendIcon, SettingsIcon, ShieldIcon, SigmaIcon, SlashIcon, SmartphoneIcon, SparkleIcon, SparklesIcon, SquarePlayIcon, StarIcon, StopIcon, StrikethroughIcon, SunIcon, TableIcon, TagIcon, TeamIcon, ThumbsDownIcon, ThumbsUpIcon, TimerIcon, Trash2Icon, TrashIcon, TrashSolidIcon, TrendingDownIcon, TrendingUpIcon, TypeIcon, UnderlineIcon, UploadIcon, UserCircleIcon, UserIcon, UsersIcon, VideoIcon, Volume2Icon, VolumeXIcon, WorkflowIcon, XCircleSolidIcon, XIcon, ZoomInIcon, ZoomOutIcon, cn, createIcon } from './chunk-TBDTXAFH.js';
10
10
  export { systemTokens } from './chunk-CPOGSNXS.js';
11
11
  import './chunk-EUHGZA6Q.js';
12
12
  export { colors, radii, reference, shadows, spacing, surfaces, typography } from './chunk-YRHRVOLV.js';
13
- import * as React28 from 'react';
14
- import { forwardRef, useId, useRef, useState, useEffect, createContext, useCallback, useMemo, useImperativeHandle, Children, isValidElement, cloneElement, useSyncExternalStore, useContext } from 'react';
13
+ import * as React30 from 'react';
14
+ import { forwardRef, useId, useRef, useState, useLayoutEffect, createContext, useEffect, useCallback, useMemo, useImperativeHandle, Children, isValidElement, cloneElement, useSyncExternalStore, useContext } from 'react';
15
15
  import * as AccordionPrimitive from '@radix-ui/react-accordion';
16
16
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
17
17
  import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
@@ -33,7 +33,7 @@ import { useFormStatus } from 'react-dom';
33
33
  import { Branch } from '@radix-ui/react-dismissable-layer';
34
34
  import * as VisuallyHiddenPrimitive from '@radix-ui/react-visually-hidden';
35
35
 
36
- var Accordion = React28.forwardRef(function Accordion2({ className, ...props }, ref) {
36
+ var Accordion = React30.forwardRef(function Accordion2({ className, ...props }, ref) {
37
37
  return /* @__PURE__ */ jsx(
38
38
  AccordionPrimitive.Root,
39
39
  {
@@ -44,22 +44,28 @@ var Accordion = React28.forwardRef(function Accordion2({ className, ...props },
44
44
  );
45
45
  });
46
46
  Accordion.displayName = AccordionPrimitive.Root.displayName;
47
- var AccordionItem = React28.forwardRef(function AccordionItem2({ className, ...props }, ref) {
47
+ var AccordionItem = React30.forwardRef(function AccordionItem2({ className, ...props }, ref) {
48
48
  return /* @__PURE__ */ jsx(AccordionPrimitive.Item, { ref, className: cn(className), ...props });
49
49
  });
50
50
  AccordionItem.displayName = AccordionPrimitive.Item.displayName;
51
- var AccordionTrigger = React28.forwardRef(function AccordionTrigger2({ children, className, ...props }, ref) {
51
+ var AccordionTrigger = React30.forwardRef(function AccordionTrigger2({ children, className, ...props }, ref) {
52
52
  return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "ds:flex", children: /* @__PURE__ */ jsxs(
53
53
  AccordionPrimitive.Trigger,
54
54
  {
55
55
  ref,
56
56
  className: cn(
57
- "ds:group group ds:text-fg ds:flex ds:flex-1 ds:items-center ds:justify-between ds:gap-4 ds:py-4 ds:text-left ds:text-sm ds:font-medium",
57
+ "ds:group group ds:text-fg ds:flex ds:flex-1 ds:items-center ds:justify-between ds:gap-4 ds:rounded-control ds:py-4 ds:text-left ds:text-sm ds:font-medium",
58
58
  "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
59
59
  "ds:hover:text-fg-2",
60
60
  "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
61
61
  "ds:data-[disabled]:cursor-not-allowed ds:data-[disabled]:opacity-50 ds:data-[disabled]:hover:text-fg",
62
+ // `aria-expanded` twin: a TooltipTrigger asChild ancestor can
63
+ // clobber this trigger's own `data-state` with the tooltip's (see
64
+ // toggle-group.tsx's note on the same bug), but never sets
65
+ // `aria-expanded` — which Radix's Collapsible-backed Accordion
66
+ // trigger always carries alongside `data-state`.
62
67
  "ds:[&[data-state=open]>svg]:rotate-180",
68
+ "ds:[&[aria-expanded=true]>svg]:rotate-180",
63
69
  className
64
70
  ),
65
71
  ...props,
@@ -77,7 +83,7 @@ var AccordionTrigger = React28.forwardRef(function AccordionTrigger2({ children,
77
83
  ) });
78
84
  });
79
85
  AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
80
- var AccordionContent = React28.forwardRef(function AccordionContent2({ children, className, ...props }, ref) {
86
+ var AccordionContent = React30.forwardRef(function AccordionContent2({ children, className, ...props }, ref) {
81
87
  return /* @__PURE__ */ jsx(
82
88
  AccordionPrimitive.Content,
83
89
  {
@@ -97,7 +103,7 @@ AccordionContent.displayName = AccordionPrimitive.Content.displayName;
97
103
  var AlertDialog = AlertDialogPrimitive.Root;
98
104
  var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
99
105
  var AlertDialogPortal = withPortalContainer(AlertDialogPrimitive.Portal);
100
- var AlertDialogOverlay = React28.forwardRef((props, ref) => /* @__PURE__ */ jsx(
106
+ var AlertDialogOverlay = React30.forwardRef((props, ref) => /* @__PURE__ */ jsx(
101
107
  Backdrop,
102
108
  {
103
109
  as: AlertDialogPrimitive.Overlay,
@@ -108,7 +114,7 @@ var AlertDialogOverlay = React28.forwardRef((props, ref) => /* @__PURE__ */ jsx(
108
114
  }
109
115
  ));
110
116
  AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
111
- var AlertDialogContent = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
117
+ var AlertDialogContent = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
112
118
  /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
113
119
  /* @__PURE__ */ jsx(
114
120
  OverlaySurface,
@@ -129,9 +135,9 @@ var AlertDialogHeader = (props) => /* @__PURE__ */ jsx(OverlayHeader, { anatomy:
129
135
  AlertDialogHeader.displayName = "AlertDialogHeader";
130
136
  var AlertDialogFooter = (props) => /* @__PURE__ */ jsx(OverlayFooter, { anatomy: alertDialogAnatomy, layout: "inset", ...props });
131
137
  AlertDialogFooter.displayName = "AlertDialogFooter";
132
- var AlertDialogTitle = React28.forwardRef((props, ref) => /* @__PURE__ */ jsx(OverlayTitle, { as: AlertDialogPrimitive.Title, anatomy: alertDialogAnatomy, ref, ...props }));
138
+ var AlertDialogTitle = React30.forwardRef((props, ref) => /* @__PURE__ */ jsx(OverlayTitle, { as: AlertDialogPrimitive.Title, anatomy: alertDialogAnatomy, ref, ...props }));
133
139
  AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
134
- var AlertDialogDescription = React28.forwardRef((props, ref) => /* @__PURE__ */ jsx(
140
+ var AlertDialogDescription = React30.forwardRef((props, ref) => /* @__PURE__ */ jsx(
135
141
  OverlayDescription,
136
142
  {
137
143
  as: AlertDialogPrimitive.Description,
@@ -144,7 +150,7 @@ AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayNam
144
150
  var EMPHASES = /* @__PURE__ */ new Set(["solid", "soft", "outline", "ghost", "link"]);
145
151
  var isEmphasis = (word) => EMPHASES.has(word);
146
152
  var LEGACY_ACTION_HOVER = "ds:hover:bg-destructive/90";
147
- var AlertDialogAction = React28.forwardRef(({ variant, intent, className, ...props }, ref) => {
153
+ var AlertDialogAction = React30.forwardRef(({ variant, intent, className, ...props }, ref) => {
148
154
  const legacy = variant === void 0 && intent === void 0;
149
155
  const resolvedIntent = intent ?? (variant === void 0 || isEmphasis(variant) ? "danger" : void 0);
150
156
  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, { ref, asChild: true, ...slot(alertDialogAnatomy, "action"), children: /* @__PURE__ */ jsx(
@@ -160,7 +166,7 @@ var AlertDialogAction = React28.forwardRef(({ variant, intent, className, ...pro
160
166
  });
161
167
  AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
162
168
  var LEGACY_CANCEL_HOVER = "ds:hover:border-rule-strong ds:hover:text-fg";
163
- var AlertDialogCancel = React28.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, { ref, asChild: true, ...slot(alertDialogAnatomy, "cancel"), children: /* @__PURE__ */ jsx(
169
+ var AlertDialogCancel = React30.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, { ref, asChild: true, ...slot(alertDialogAnatomy, "cancel"), children: /* @__PURE__ */ jsx(
164
170
  Button,
165
171
  {
166
172
  variant: "outline",
@@ -258,9 +264,11 @@ var AreaChart = forwardRef(function AreaChart2({ data, height = 140, formatValue
258
264
  const wrapRef = useRef(null);
259
265
  const [width, setWidth] = useState(620);
260
266
  const [hover, setHover] = useState(null);
261
- useEffect(() => {
267
+ useLayoutEffect(() => {
262
268
  const el = wrapRef.current;
263
269
  if (!el) return;
270
+ const measured = el.getBoundingClientRect().width;
271
+ if (measured > 0) setWidth(measured);
264
272
  const ro = new ResizeObserver((entries) => {
265
273
  for (const entry of entries) setWidth(entry.contentRect.width);
266
274
  });
@@ -287,6 +295,7 @@ var AreaChart = forwardRef(function AreaChart2({ data, height = 140, formatValue
287
295
  width,
288
296
  height,
289
297
  viewBox: `0 0 ${width} ${height}`,
298
+ className: "ds:block ds:h-auto ds:max-w-full",
290
299
  role: "img",
291
300
  "aria-label": "Area trend chart",
292
301
  onMouseLeave: () => setHover(null),
@@ -351,7 +360,7 @@ var AreaChart = forwardRef(function AreaChart2({ data, height = 140, formatValue
351
360
  ] });
352
361
  });
353
362
  AreaChart.displayName = "AreaChart";
354
- var AspectRatio = React28.forwardRef(function AspectRatio2({ className, ratio = 16 / 9, ...props }, ref) {
363
+ var AspectRatio = React30.forwardRef(function AspectRatio2({ className, ratio = 16 / 9, ...props }, ref) {
355
364
  return /* @__PURE__ */ jsx(
356
365
  AspectRatioPrimitive.Root,
357
366
  {
@@ -1086,15 +1095,15 @@ function Calendar({
1086
1095
  const range = isRange ? selected : void 0;
1087
1096
  const locale = useLocale(typeof localeProp === "string" ? localeProp : void 0);
1088
1097
  const localeObject = typeof localeProp === "object" ? localeProp : void 0;
1089
- const localeProps = React28.useMemo(
1098
+ const localeProps = React30.useMemo(
1090
1099
  () => localeObject ? {} : calendarLocaleProps(locale),
1091
1100
  [locale, localeObject]
1092
1101
  );
1093
1102
  const hydrated = useHydrated();
1094
- const clockToday = React28.useMemo(() => hydrated ? startOfDay(/* @__PURE__ */ new Date()) : void 0, [hydrated]);
1103
+ const clockToday = React30.useMemo(() => hydrated ? startOfDay(/* @__PURE__ */ new Date()) : void 0, [hydrated]);
1095
1104
  const today = todayProp ?? clockToday;
1096
1105
  const anchor = props.month ?? props.defaultMonth ?? todayProp;
1097
- const { modifiers, modifiersClassNames } = React28.useMemo(() => {
1106
+ const { modifiers, modifiersClassNames } = React30.useMemo(() => {
1098
1107
  const buckets = {};
1099
1108
  for (const h of highlights) {
1100
1109
  const key = h.color ?? "primary";
@@ -1109,7 +1118,7 @@ function Calendar({
1109
1118
  }
1110
1119
  return { modifiers: mods, modifiersClassNames: modClasses };
1111
1120
  }, [highlights]);
1112
- const disabledMatcher = React28.useMemo(() => {
1121
+ const disabledMatcher = React30.useMemo(() => {
1113
1122
  if (!minDate && !maxDate) return void 0;
1114
1123
  if (minDate && maxDate) return [{ before: minDate }, { after: maxDate }];
1115
1124
  if (minDate) return { before: minDate };
@@ -1117,7 +1126,7 @@ function Calendar({
1117
1126
  }, [minDate, maxDate]);
1118
1127
  const rangeFrom = range?.from;
1119
1128
  const rangeTo = range?.to;
1120
- const navRange = React28.useMemo(
1129
+ const navRange = React30.useMemo(
1121
1130
  () => captionLayout === "label" ? void 0 : resolveCalendarNavRange({
1122
1131
  minDate,
1123
1132
  maxDate,
@@ -1182,7 +1191,7 @@ function Calendar({
1182
1191
  day: "ds:flex-1 ds:text-center ds:relative ds:p-0",
1183
1192
  day_button: cn(
1184
1193
  "ds:inline-flex ds:size-8 ds:w-full ds:items-center ds:justify-center ds:rounded-input ds:font-mono ds:tabular-nums ds:text-(length:--control-font-size-md) ds:text-fg",
1185
- "ds:transition-colors ds:duration-[var(--duration-instant)] ds:motion-reduce:transition-none",
1194
+ "ds:transition-colors ds:duration-[var(--duration-instant)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
1186
1195
  "ds:hover:bg-surface-hover",
1187
1196
  "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
1188
1197
  "ds:disabled:pointer-events-none ds:disabled:cursor-not-allowed ds:disabled:text-fg-disabled"
@@ -1279,7 +1288,10 @@ var CardHeader = forwardRef(
1279
1288
  ref,
1280
1289
  ...slot(cardAnatomy, "header"),
1281
1290
  className: cn(
1282
- "ds:grid ds:auto-cols-fr ds:grid-cols-[1fr_auto] ds:items-start ds:gap-1.5 ds:p-6 ds:[.border-b]:pb-4",
1291
+ // `border-rule` colours the documented `className="border-b"` divider
1292
+ // the way CardFooter's border is coloured (Tailwind 4 would otherwise
1293
+ // paint it `currentColor`); it draws nothing without a border width.
1294
+ "ds:grid ds:auto-cols-fr ds:grid-cols-[1fr_auto] ds:items-start ds:gap-1.5 ds:border-rule ds:p-6 ds:[.border-b]:pb-4",
1283
1295
  className
1284
1296
  ),
1285
1297
  ...props
@@ -1295,7 +1307,12 @@ var CardTitle = forwardRef(function CardTitle2({ className, children, headingLev
1295
1307
  {
1296
1308
  ref,
1297
1309
  ...slot(cardAnatomy, "title"),
1298
- className: cn("ds:text-fg ds:text-base ds:leading-tight ds:font-medium", className),
1310
+ className: cn(
1311
+ // Column 1 of CardHeader's `1fr auto` grid, so a description stacks
1312
+ // under the title instead of flowing into the action column.
1313
+ "ds:col-start-1 ds:text-fg ds:text-base ds:leading-tight ds:font-medium",
1314
+ className
1315
+ ),
1299
1316
  ...props,
1300
1317
  children
1301
1318
  }
@@ -1308,7 +1325,7 @@ var CardDescription = forwardRef(function CardDescription2({ className, ...props
1308
1325
  {
1309
1326
  ref,
1310
1327
  ...slot(cardAnatomy, "description"),
1311
- className: cn("ds:text-fg-3 ds:text-sm", className),
1328
+ className: cn("ds:col-start-1 ds:text-fg-3 ds:text-sm", className),
1312
1329
  ...props
1313
1330
  }
1314
1331
  );
@@ -1552,17 +1569,17 @@ function CommandPalette({
1552
1569
  }) {
1553
1570
  const messages = useDsMessages("commandPalette", messagesProp);
1554
1571
  const placeholder = placeholderProp ?? messages.search;
1555
- const [internalOpen, setInternalOpen] = React28.useState(defaultOpen);
1572
+ const [internalOpen, setInternalOpen] = React30.useState(defaultOpen);
1556
1573
  const isControlled = controlledOpen !== void 0;
1557
1574
  const open = isControlled ? controlledOpen : internalOpen;
1558
- const setOpen = React28.useCallback(
1575
+ const setOpen = React30.useCallback(
1559
1576
  (value) => {
1560
1577
  if (!isControlled) setInternalOpen(value);
1561
1578
  onOpenChange?.(value);
1562
1579
  },
1563
1580
  [isControlled, onOpenChange]
1564
1581
  );
1565
- React28.useEffect(() => {
1582
+ React30.useEffect(() => {
1566
1583
  function handleKeyDown(e) {
1567
1584
  if ((e.metaKey || e.ctrlKey) && e.key === "k") {
1568
1585
  e.preventDefault();
@@ -1881,19 +1898,19 @@ function ConfirmDialog({
1881
1898
  }) {
1882
1899
  const messages = useDsMessages("confirm", messagesOverride);
1883
1900
  const isControlled = open !== void 0;
1884
- const [uncontrolledOpen, setUncontrolledOpen] = React28.useState(defaultOpen);
1901
+ const [uncontrolledOpen, setUncontrolledOpen] = React30.useState(defaultOpen);
1885
1902
  const resolvedOpen = isControlled ? open : uncontrolledOpen;
1886
- const [pending, setPending] = React28.useState(false);
1887
- const [error, setError] = React28.useState(void 0);
1888
- const actionRef = React28.useRef(null);
1889
- const mounted = React28.useRef(true);
1890
- React28.useEffect(() => {
1903
+ const [pending, setPending] = React30.useState(false);
1904
+ const [error, setError] = React30.useState(void 0);
1905
+ const actionRef = React30.useRef(null);
1906
+ const mounted = React30.useRef(true);
1907
+ React30.useEffect(() => {
1891
1908
  mounted.current = true;
1892
1909
  return () => {
1893
1910
  mounted.current = false;
1894
1911
  };
1895
1912
  }, []);
1896
- const setDialogOpen = React28.useCallback(
1913
+ const setDialogOpen = React30.useCallback(
1897
1914
  (nextOpen) => {
1898
1915
  onOpenChange?.(nextOpen);
1899
1916
  if (!isControlled) setUncontrolledOpen(nextOpen);
@@ -2022,7 +2039,7 @@ var ContextMenuGroup = ContextMenuPrimitive.Group;
2022
2039
  var ContextMenuPortal = withPortalContainer(ContextMenuPrimitive.Portal);
2023
2040
  var ContextMenuSub = ContextMenuPrimitive.Sub;
2024
2041
  var ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
2025
- var ContextMenuSubTrigger = React28.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
2042
+ var ContextMenuSubTrigger = React30.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
2026
2043
  ContextMenuPrimitive.SubTrigger,
2027
2044
  {
2028
2045
  ref,
@@ -2036,7 +2053,7 @@ var ContextMenuSubTrigger = React28.forwardRef(({ className, inset, children, ..
2036
2053
  }
2037
2054
  ));
2038
2055
  ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
2039
- var ContextMenuSubContent = React28.forwardRef(({ className, ...props }, ref) => (
2056
+ var ContextMenuSubContent = React30.forwardRef(({ className, ...props }, ref) => (
2040
2057
  // Portal the sub-content to the body. The parent Content is transformed
2041
2058
  // while its presence keyframes run, which makes it the containing block for
2042
2059
  // `position: fixed` descendants — and its `overflow-hidden` would then clip
@@ -2056,7 +2073,7 @@ var ContextMenuSubContent = React28.forwardRef(({ className, ...props }, ref) =>
2056
2073
  ) })
2057
2074
  ));
2058
2075
  ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
2059
- var ContextMenuContent = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPortal, { children: /* @__PURE__ */ jsx(
2076
+ var ContextMenuContent = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPortal, { children: /* @__PURE__ */ jsx(
2060
2077
  ContextMenuPrimitive.Content,
2061
2078
  {
2062
2079
  ref,
@@ -2070,7 +2087,7 @@ var ContextMenuContent = React28.forwardRef(({ className, ...props }, ref) => /*
2070
2087
  }
2071
2088
  ) }));
2072
2089
  ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
2073
- var ContextMenuItem = React28.forwardRef(({ className, destructive, inset, ...props }, ref) => /* @__PURE__ */ jsx(
2090
+ var ContextMenuItem = React30.forwardRef(({ className, destructive, inset, ...props }, ref) => /* @__PURE__ */ jsx(
2074
2091
  ContextMenuPrimitive.Item,
2075
2092
  {
2076
2093
  ref,
@@ -2085,7 +2102,7 @@ var ContextMenuItem = React28.forwardRef(({ className, destructive, inset, ...pr
2085
2102
  }
2086
2103
  ));
2087
2104
  ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
2088
- var ContextMenuCheckboxItem = React28.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
2105
+ var ContextMenuCheckboxItem = React30.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
2089
2106
  ContextMenuPrimitive.CheckboxItem,
2090
2107
  {
2091
2108
  ref,
@@ -2099,7 +2116,7 @@ var ContextMenuCheckboxItem = React28.forwardRef(({ className, children, ...prop
2099
2116
  }
2100
2117
  ));
2101
2118
  ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
2102
- var ContextMenuRadioItem = React28.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
2119
+ var ContextMenuRadioItem = React30.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
2103
2120
  ContextMenuPrimitive.RadioItem,
2104
2121
  {
2105
2122
  ref,
@@ -2113,7 +2130,7 @@ var ContextMenuRadioItem = React28.forwardRef(({ className, children, ...props }
2113
2130
  }
2114
2131
  ));
2115
2132
  ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
2116
- var ContextMenuLabel = React28.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
2133
+ var ContextMenuLabel = React30.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
2117
2134
  ContextMenuPrimitive.Label,
2118
2135
  {
2119
2136
  ref,
@@ -2127,7 +2144,7 @@ var ContextMenuLabel = React28.forwardRef(({ className, inset, ...props }, ref)
2127
2144
  }
2128
2145
  ));
2129
2146
  ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
2130
- var ContextMenuSeparator = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
2147
+ var ContextMenuSeparator = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
2131
2148
  ContextMenuPrimitive.Separator,
2132
2149
  {
2133
2150
  ref,
@@ -2148,10 +2165,13 @@ ContextMenuShortcut.displayName = "ContextMenuShortcut";
2148
2165
  var CopyButton = forwardRef(function CopyButton2({ value, feedbackDuration = 2e3, messages: messagesProp, className, children, ...props }, ref) {
2149
2166
  const messages = useDsMessages("copyButton", messagesProp);
2150
2167
  const [copied, setCopied] = useState(false);
2168
+ const resetTimer = useRef(void 0);
2169
+ useEffect(() => () => clearTimeout(resetTimer.current), []);
2151
2170
  const handleCopy = useCallback(async () => {
2152
2171
  await navigator.clipboard.writeText(value);
2153
2172
  setCopied(true);
2154
- setTimeout(() => setCopied(false), feedbackDuration);
2173
+ clearTimeout(resetTimer.current);
2174
+ resetTimer.current = setTimeout(() => setCopied(false), feedbackDuration);
2155
2175
  }, [value, feedbackDuration]);
2156
2176
  return /* @__PURE__ */ jsx(
2157
2177
  "button",
@@ -2168,7 +2188,14 @@ var CopyButton = forwardRef(function CopyButton2({ value, feedbackDuration = 2e3
2168
2188
  ),
2169
2189
  "aria-label": copied ? messages.copied : messages.copy,
2170
2190
  ...props,
2171
- children: copied ? /* @__PURE__ */ jsx(CheckIcon, { size: 16, "aria-hidden": "true" }) : children ?? /* @__PURE__ */ jsx(CopyIcon, { size: 16, "aria-hidden": "true" })
2191
+ children: copied ? /* @__PURE__ */ jsx(
2192
+ CheckIcon,
2193
+ {
2194
+ size: 16,
2195
+ "aria-hidden": "true",
2196
+ className: "ds:text-success-fg ds:motion-safe:animate-in ds:motion-safe:fade-in-0 ds:motion-safe:zoom-in-50 ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)]"
2197
+ }
2198
+ ) : children ?? /* @__PURE__ */ jsx(CopyIcon, { size: 16, "aria-hidden": "true" })
2172
2199
  }
2173
2200
  );
2174
2201
  });
@@ -2297,7 +2324,7 @@ function YearGrid({ selected, onSelect, minYear, maxYear, formatLabel, autoFocus
2297
2324
  className: cn(
2298
2325
  "ds:rounded-input ds:font-mono ds:text-(length:--control-font-size-md) ds:tabular-nums",
2299
2326
  "ds:inline-flex ds:h-10 ds:items-center ds:justify-center",
2300
- "ds:transition-colors ds:duration-[var(--duration-instant)] ds:motion-reduce:transition-none",
2327
+ "ds:transition-colors ds:duration-[var(--duration-instant)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
2301
2328
  "ds:hover:bg-surface-hover",
2302
2329
  "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
2303
2330
  "ds:disabled:text-fg-disabled ds:disabled:pointer-events-none ds:disabled:cursor-not-allowed",
@@ -2865,7 +2892,7 @@ DateRangePicker.displayName = "DateRangePicker";
2865
2892
  var Dialog = DialogPrimitive.Root;
2866
2893
  var DialogTrigger = DialogPrimitive.Trigger;
2867
2894
  var DialogPortal = withPortalContainer(DialogPrimitive.Portal);
2868
- var DialogOverlay = React28.forwardRef((props, ref) => /* @__PURE__ */ jsx(
2895
+ var DialogOverlay = React30.forwardRef((props, ref) => /* @__PURE__ */ jsx(
2869
2896
  Backdrop,
2870
2897
  {
2871
2898
  as: DialogPrimitive.Overlay,
@@ -2899,7 +2926,7 @@ var DIALOG_HEIGHTS = {
2899
2926
  full: "ds:h-[calc(100vh-6rem)]"
2900
2927
  };
2901
2928
  function useTitleRequired(element) {
2902
- React28.useEffect(() => {
2929
+ React30.useEffect(() => {
2903
2930
  if (process.env.NODE_ENV === "production" || process.env.NODE_ENV === "test") return;
2904
2931
  const timer = setTimeout(() => {
2905
2932
  const node = element.current;
@@ -2916,7 +2943,7 @@ function useTitleRequired(element) {
2916
2943
  return () => clearTimeout(timer);
2917
2944
  }, [element]);
2918
2945
  }
2919
- var DialogContent = React28.forwardRef(
2946
+ var DialogContent = React30.forwardRef(
2920
2947
  ({
2921
2948
  size = "md",
2922
2949
  height = "auto",
@@ -2928,7 +2955,7 @@ var DialogContent = React28.forwardRef(
2928
2955
  children,
2929
2956
  ...props
2930
2957
  }, ref) => {
2931
- const element = React28.useRef(null);
2958
+ const element = React30.useRef(null);
2932
2959
  const mergedRef = useMergedRefs(ref, element);
2933
2960
  useTitleRequired(element);
2934
2961
  const heightRow = DIALOG_HEIGHTS[height];
@@ -2966,7 +2993,7 @@ var DialogContent = React28.forwardRef(
2966
2993
  }
2967
2994
  );
2968
2995
  DialogContent.displayName = DialogPrimitive.Content.displayName;
2969
- var DialogClose = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
2996
+ var DialogClose = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
2970
2997
  DialogPrimitive.Close,
2971
2998
  {
2972
2999
  ref,
@@ -2978,15 +3005,15 @@ var DialogClose = React28.forwardRef(({ className, ...props }, ref) => /* @__PUR
2978
3005
  DialogClose.displayName = "DialogClose";
2979
3006
  var DialogHeader = (props) => /* @__PURE__ */ jsx(OverlayHeader, { anatomy: dialogAnatomy, layout: "inset", dismissGutter: true, ...props });
2980
3007
  DialogHeader.displayName = "DialogHeader";
2981
- var DialogBody = React28.forwardRef(
3008
+ var DialogBody = React30.forwardRef(
2982
3009
  ({ padding = "none", ...props }, ref) => /* @__PURE__ */ jsx(OverlayBody, { anatomy: dialogAnatomy, layout: "inset", padding, ref, ...props })
2983
3010
  );
2984
3011
  DialogBody.displayName = "DialogBody";
2985
3012
  var DialogFooter = (props) => /* @__PURE__ */ jsx(OverlayFooter, { anatomy: dialogAnatomy, layout: "inset", ...props });
2986
3013
  DialogFooter.displayName = "DialogFooter";
2987
- var DialogTitle = React28.forwardRef((props, ref) => /* @__PURE__ */ jsx(OverlayTitle, { as: DialogPrimitive.Title, anatomy: dialogAnatomy, ref, ...props }));
3014
+ var DialogTitle = React30.forwardRef((props, ref) => /* @__PURE__ */ jsx(OverlayTitle, { as: DialogPrimitive.Title, anatomy: dialogAnatomy, ref, ...props }));
2988
3015
  DialogTitle.displayName = DialogPrimitive.Title.displayName;
2989
- var DialogDescription = React28.forwardRef((props, ref) => /* @__PURE__ */ jsx(
3016
+ var DialogDescription = React30.forwardRef((props, ref) => /* @__PURE__ */ jsx(
2990
3017
  OverlayDescription,
2991
3018
  {
2992
3019
  as: DialogPrimitive.Description,
@@ -3016,7 +3043,7 @@ var chipVariants2 = cva(
3016
3043
  }
3017
3044
  }
3018
3045
  );
3019
- var DismissibleChip = React28.forwardRef(function DismissibleChip2({ label, onDismiss, variant, className, ...props }, ref) {
3046
+ var DismissibleChip = React30.forwardRef(function DismissibleChip2({ label, onDismiss, variant, className, ...props }, ref) {
3020
3047
  const messages = useDsMessages("dismissibleChip");
3021
3048
  return /* @__PURE__ */ jsxs(
3022
3049
  "button",
@@ -3130,7 +3157,7 @@ var DonutChart = forwardRef(function DonutChart2({
3130
3157
  onBlur: () => setHover(null),
3131
3158
  className: cn(
3132
3159
  "ds:flex ds:w-full ds:items-center ds:gap-2 ds:rounded-[var(--radius-icon)] ds:px-1.5 ds:py-1 ds:text-left ds:text-sm ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
3133
- hover === i ? "ds:bg-bg-2" : "ds:hover:bg-surface-hover"
3160
+ hover === i ? "ds:bg-surface-hover" : "ds:hover:bg-surface-hover"
3134
3161
  ),
3135
3162
  children: [
3136
3163
  /* @__PURE__ */ jsx(
@@ -3350,7 +3377,7 @@ var ErrorState = forwardRef(function ErrorState2({
3350
3377
  {
3351
3378
  className: cn(
3352
3379
  "ds:text-fg-3 ds:hover:text-fg ds:mx-auto ds:w-auto ds:gap-1 ds:rounded-md",
3353
- "ds:px-1.5 ds:py-0.5 ds:text-xs ds:font-medium ds:transition-colors",
3380
+ "ds:px-1.5 ds:py-0.5 ds:text-xs ds:font-medium ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)]",
3354
3381
  "ds:motion-reduce:transition-none"
3355
3382
  ),
3356
3383
  children: [
@@ -3361,7 +3388,7 @@ var ErrorState = forwardRef(function ErrorState2({
3361
3388
  size: 12,
3362
3389
  "aria-hidden": "true",
3363
3390
  className: cn(
3364
- "ds:transition-transform ds:motion-reduce:transition-none",
3391
+ "ds:transition-transform ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
3365
3392
  detailsOpen && "ds:rotate-180"
3366
3393
  )
3367
3394
  }
@@ -3512,9 +3539,10 @@ var FormSection = forwardRef(function FormSection2({ title, description, action,
3512
3539
  "<FormSection> is deprecated. Render <Fieldset> with a <FieldsetLegend>. Removed in 3.0."
3513
3540
  );
3514
3541
  return /* @__PURE__ */ jsxs("fieldset", { ref, className: cn("ds:min-w-0", className), ...props, children: [
3542
+ /* @__PURE__ */ jsx("legend", { className: "ds:sr-only", children: title }),
3515
3543
  /* @__PURE__ */ jsxs("div", { className: "ds:flex ds:items-start ds:justify-between ds:gap-3", children: [
3516
3544
  /* @__PURE__ */ jsxs("div", { className: "ds:min-w-0", children: [
3517
- /* @__PURE__ */ jsx("legend", { className: "ds:text-fg ds:text-sm ds:font-semibold", children: title }),
3545
+ /* @__PURE__ */ jsx("p", { "aria-hidden": "true", className: "ds:text-fg ds:text-sm ds:font-semibold", children: title }),
3518
3546
  description && /* @__PURE__ */ jsx("p", { className: "ds:text-fg-3 ds:mt-0.5 ds:text-xs ds:leading-relaxed", children: description })
3519
3547
  ] }),
3520
3548
  action && /* @__PURE__ */ jsx("div", { className: "ds:shrink-0", children: action })
@@ -3526,7 +3554,7 @@ FormSection.displayName = "FormSection";
3526
3554
  var HoverCard = HoverCardPrimitive.Root;
3527
3555
  var HoverCardTrigger = HoverCardPrimitive.Trigger;
3528
3556
  var HoverCardPortal = withPortalContainer(HoverCardPrimitive.Portal);
3529
- var HoverCardContent = React28.forwardRef(
3557
+ var HoverCardContent = React30.forwardRef(
3530
3558
  ({
3531
3559
  className,
3532
3560
  align = "center",
@@ -3647,19 +3675,19 @@ function KeyboardShortcutsDialog({
3647
3675
  messages: messagesProp
3648
3676
  } = {}) {
3649
3677
  const messages = useDsMessages("keyboardShortcuts", messagesProp);
3650
- const [internalOpen, setInternalOpen] = React28.useState(defaultOpen);
3678
+ const [internalOpen, setInternalOpen] = React30.useState(defaultOpen);
3651
3679
  const isControlled = controlledOpen !== void 0;
3652
3680
  const open = isControlled ? controlledOpen : internalOpen;
3653
- const openRef = React28.useRef(open);
3681
+ const openRef = React30.useRef(open);
3654
3682
  openRef.current = open;
3655
- const setOpen = React28.useCallback(
3683
+ const setOpen = React30.useCallback(
3656
3684
  (value) => {
3657
3685
  if (!isControlled) setInternalOpen(value);
3658
3686
  onOpenChange?.(value);
3659
3687
  },
3660
3688
  [isControlled, onOpenChange]
3661
3689
  );
3662
- React28.useEffect(() => {
3690
+ React30.useEffect(() => {
3663
3691
  if (hotkey === null) return;
3664
3692
  function handleKeyDown(e) {
3665
3693
  const target = e.target;
@@ -3698,7 +3726,7 @@ function KeyboardShortcutsDialog({
3698
3726
  className: "ds:flex ds:items-center ds:justify-between ds:gap-3 ds:py-1",
3699
3727
  children: [
3700
3728
  /* @__PURE__ */ jsx("span", { className: "ds:text-fg ds:text-sm", children: shortcut.description }),
3701
- /* @__PURE__ */ jsx("div", { className: "ds:flex ds:shrink-0 ds:items-center ds:gap-1", children: shortcut.keys.map((key, i) => /* @__PURE__ */ jsxs(React28.Fragment, { children: [
3729
+ /* @__PURE__ */ jsx("div", { className: "ds:flex ds:shrink-0 ds:items-center ds:gap-1", children: shortcut.keys.map((key, i) => /* @__PURE__ */ jsxs(React30.Fragment, { children: [
3702
3730
  i > 0 && /* @__PURE__ */ jsx("span", { className: "ds:text-fg-4 ds:mx-0.5 ds:text-(length:--text-caption)", children: messages.then }),
3703
3731
  /* @__PURE__ */ jsx(Kbd, { children: key })
3704
3732
  ] }, i)) })
@@ -3719,7 +3747,7 @@ function KeyboardShortcutsDialog({
3719
3747
  var labelVariants = cva(
3720
3748
  "ds:text-(length:--text-label) ds:font-medium ds:leading-none ds:text-fg ds:select-none ds:peer-disabled:cursor-not-allowed ds:peer-disabled:text-fg-disabled ds:has-[+input:disabled]:text-fg-disabled"
3721
3749
  );
3722
- var Label2 = React28.forwardRef(
3750
+ var Label2 = React30.forwardRef(
3723
3751
  function Label3({ children, required, className, id, htmlFor, onClick, ...props }, ref) {
3724
3752
  const field = useFieldContext();
3725
3753
  const fieldLabelId = useFieldPart("label", id, field !== null);
@@ -3868,49 +3896,6 @@ var LinkAction = forwardRef(function LinkAction2({ arrow, iconRight, children, c
3868
3896
  );
3869
3897
  });
3870
3898
  LinkAction.displayName = "LinkAction";
3871
- var SKELETON_SURFACE = cn(
3872
- "skeleton ds:bg-skeleton ds:relative ds:overflow-hidden",
3873
- "ds:after:absolute ds:after:inset-0 ds:after:-translate-x-full",
3874
- "ds:after:bg-[linear-gradient(90deg,transparent,var(--color-skeleton-sheen),transparent)]",
3875
- "ds:motion-safe:after:animate-skeleton-shimmer"
3876
- );
3877
- var Skeleton = forwardRef(function Skeleton2({ className, ...props }, ref) {
3878
- return /* @__PURE__ */ jsx(
3879
- "div",
3880
- {
3881
- ref,
3882
- className: cn(SKELETON_SURFACE, "ds:rounded-icon", className),
3883
- "aria-hidden": "true",
3884
- ...props
3885
- }
3886
- );
3887
- });
3888
- Skeleton.displayName = "Skeleton";
3889
- var SkeletonText = forwardRef(function SkeletonText2({ lines = 3, className, ...props }, ref) {
3890
- return /* @__PURE__ */ jsx("div", { ref, className: cn("ds:space-y-2", className), "aria-hidden": "true", ...props, children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx(
3891
- "div",
3892
- {
3893
- className: cn(SKELETON_SURFACE, "ds:rounded-icon ds:h-4", i === lines - 1 && "ds:w-3/4")
3894
- },
3895
- i
3896
- )) });
3897
- });
3898
- SkeletonText.displayName = "SkeletonText";
3899
- var SkeletonCircle = forwardRef(
3900
- function SkeletonCircle2({ size = 40, className, ...props }, ref) {
3901
- return /* @__PURE__ */ jsx(
3902
- "div",
3903
- {
3904
- ref,
3905
- className: cn(SKELETON_SURFACE, "ds:rounded-full", className),
3906
- style: { width: size, height: size },
3907
- "aria-hidden": "true",
3908
- ...props
3909
- }
3910
- );
3911
- }
3912
- );
3913
- SkeletonCircle.displayName = "SkeletonCircle";
3914
3899
  var LoadingRows = forwardRef(function LoadingRows2({
3915
3900
  count = 3,
3916
3901
  rowHeight = "ds:h-14",
@@ -4137,7 +4122,7 @@ function MultiFilterPill({
4137
4122
  "span",
4138
4123
  {
4139
4124
  className: cn(
4140
- "ds:flex ds:size-4 ds:shrink-0 ds:items-center ds:justify-center ds:rounded-[3px] ds:border ds:transition-colors ds:duration-[var(--duration-fast)] ds:motion-reduce:transition-none",
4125
+ "ds:flex ds:size-4 ds:shrink-0 ds:items-center ds:justify-center ds:rounded-[3px] ds:border ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
4141
4126
  isSelected ? "ds:border-brand ds:bg-brand ds:text-fg-on-brand" : "ds:border-rule-strong ds:bg-surface"
4142
4127
  ),
4143
4128
  "aria-hidden": "true",
@@ -4191,7 +4176,7 @@ function MultiSelectField({
4191
4176
  size = "md",
4192
4177
  id
4193
4178
  }) {
4194
- const selected = React28.useMemo(
4179
+ const selected = React30.useMemo(
4195
4180
  () => new Set(value ? value.split(",").filter(Boolean) : []),
4196
4181
  [value]
4197
4182
  );
@@ -4204,7 +4189,7 @@ function MultiSelectField({
4204
4189
  }
4205
4190
  onChange(Array.from(next).join(","));
4206
4191
  };
4207
- const generatedId = React28.useId();
4192
+ const generatedId = React30.useId();
4208
4193
  const groupId = id ?? generatedId;
4209
4194
  return /* @__PURE__ */ jsxs("div", { className: cn("ds:w-full", className), children: [
4210
4195
  /* @__PURE__ */ jsx(
@@ -4587,8 +4572,8 @@ function OTPInput({
4587
4572
  "aria-labelledby": ariaLabelledBy,
4588
4573
  "aria-describedby": ariaDescribedBy
4589
4574
  });
4590
- const inputRef = React28.useRef(null);
4591
- useFormReset$1(inputRef, () => setValue(defaultValue ?? ""), wiring.name, form);
4575
+ const inputRef = React30.useRef(null);
4576
+ useFormReset(inputRef, () => setValue(defaultValue ?? ""), wiring.name, form);
4592
4577
  const errorId = `${wiring.id}-error`;
4593
4578
  const hasError = wiring["aria-invalid"] === true;
4594
4579
  const messages = useDsMessages("otpInput");
@@ -4648,7 +4633,7 @@ function OTPSlot({ isActive, char, hasFakeCaret, hasError }) {
4648
4633
  className: cn(
4649
4634
  "ds:relative ds:flex ds:h-12 ds:w-10 ds:items-center ds:justify-center",
4650
4635
  "ds:rounded-input ds:bg-surface ds:text-fg ds:border ds:font-mono ds:text-lg ds:tabular-nums",
4651
- "ds:transition-[color,background-color,border-color,box-shadow] ds:duration-[var(--duration-fast)]",
4636
+ "ds:transition-[color,background-color,border-color,box-shadow] ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
4652
4637
  "ds:sm:h-14 ds:sm:w-12 ds:sm:text-xl",
4653
4638
  "ds:border-field-border",
4654
4639
  isActive && "ds:[border-color:var(--focus-ring-border)] ds:z-[calc(var(--z-base)+10)] ds:[box-shadow:var(--shadow-focus-ring-field)]",
@@ -5652,18 +5637,18 @@ function PriorityIcon({ priority, size = 16, className, ...props }) {
5652
5637
  )),
5653
5638
  priority === "urgent" && /* @__PURE__ */ jsxs(Fragment, { children: [
5654
5639
  /* @__PURE__ */ jsx("rect", { x: "2", y: "2", width: "12", height: "12", rx: "3", fill: "var(--ds-color-priority-urgent, var(--color-priority-urgent))" }),
5655
- /* @__PURE__ */ jsx("rect", { x: "7.25", y: "3.75", width: "1.5", height: "5", rx: "0.75", fill: "#fff" }),
5656
- /* @__PURE__ */ jsx("circle", { cx: "8", cy: "11.25", r: "1", fill: "#fff" })
5640
+ /* @__PURE__ */ jsx("rect", { x: "7.25", y: "3.75", width: "1.5", height: "5", rx: "0.75", fill: "var(--ds-color-feedback-danger-solid-fg, var(--color-fg-on-danger))" }),
5641
+ /* @__PURE__ */ jsx("circle", { cx: "8", cy: "11.25", r: "1", fill: "var(--ds-color-feedback-danger-solid-fg, var(--color-fg-on-danger))" })
5657
5642
  ] })
5658
5643
  ]
5659
5644
  }
5660
5645
  );
5661
5646
  }
5662
- var RadioGroupContext = React28.createContext({
5647
+ var RadioGroupContext = React30.createContext({
5663
5648
  appearance: "plain",
5664
5649
  invalid: false
5665
5650
  });
5666
- var RadioGroup2 = React28.forwardRef(function RadioGroup3({
5651
+ var RadioGroup2 = React30.forwardRef(function RadioGroup3({
5667
5652
  className,
5668
5653
  appearance = "plain",
5669
5654
  invalid,
@@ -5695,12 +5680,12 @@ var RadioGroup2 = React28.forwardRef(function RadioGroup3({
5695
5680
  defaultProp: defaultValue ?? null,
5696
5681
  onChange: onValueChange
5697
5682
  });
5698
- const initialValue = React28.useRef(valueProp ?? defaultValue ?? null);
5699
- const rootRef = React28.useRef(null);
5700
- useFormReset(rootRef, () => setValue(initialValue.current));
5683
+ const initialValue = React30.useRef(valueProp ?? defaultValue ?? null);
5684
+ const rootRef = React30.useRef(null);
5685
+ useFormReset2(rootRef, () => setValue(initialValue.current));
5701
5686
  const mergedRef = useMergedRefs(ref, rootRef);
5702
5687
  const isInvalid = wiring["aria-invalid"] === true;
5703
- const context = React28.useMemo(
5688
+ const context = React30.useMemo(
5704
5689
  () => ({ appearance, invalid: isInvalid }),
5705
5690
  [appearance, isInvalid]
5706
5691
  );
@@ -5733,10 +5718,11 @@ var ITEM_CLASSES = cn(
5733
5718
  "ds:hover:border-fg-4",
5734
5719
  "ds:focus-visible:[border-color:var(--focus-ring-border)] ds:focus-visible:[box-shadow:var(--shadow-focus-ring-field)] ds:focus-visible:outline-none",
5735
5720
  "ds:data-[state=checked]:border-brand",
5736
- "ds:disabled:bg-bg-disabled ds:disabled:border-rule ds:disabled:cursor-not-allowed",
5721
+ "ds:disabled:bg-bg-disabled ds:disabled:border-rule ds:disabled:text-fg-disabled ds:disabled:cursor-not-allowed",
5722
+ "ds:disabled:data-[state=checked]:border-rule",
5737
5723
  "ds:aria-[invalid=true]:border-danger-line"
5738
5724
  );
5739
- var RadioGroupItem = React28.forwardRef(function RadioGroupItem2({
5725
+ var RadioGroupItem = React30.forwardRef(function RadioGroupItem2({
5740
5726
  className,
5741
5727
  label,
5742
5728
  description,
@@ -5745,9 +5731,9 @@ var RadioGroupItem = React28.forwardRef(function RadioGroupItem2({
5745
5731
  "aria-invalid": ariaInvalid,
5746
5732
  ...props
5747
5733
  }, ref) {
5748
- const generatedId = React28.useId();
5734
+ const generatedId = React30.useId();
5749
5735
  const id = providedId ?? generatedId;
5750
- const { appearance, invalid } = React28.useContext(RadioGroupContext);
5736
+ const { appearance, invalid } = React30.useContext(RadioGroupContext);
5751
5737
  const card = appearance === "card";
5752
5738
  const descriptionId = card && description ? `${id}-description` : void 0;
5753
5739
  const root = /* @__PURE__ */ jsx(
@@ -5764,8 +5750,8 @@ var RadioGroupItem = React28.forwardRef(function RadioGroupItem2({
5764
5750
  RadioGroupPrimitive.Indicator,
5765
5751
  {
5766
5752
  ...slot(radioGroupAnatomy, "indicator"),
5767
- className: "ds:flex ds:items-center ds:justify-center",
5768
- children: /* @__PURE__ */ jsx(CircleIcon, { className: "ds:fill-brand ds:text-brand ds:size-2", "aria-hidden": "true" })
5753
+ className: "ds:flex ds:items-center ds:justify-center ds:motion-safe:animate-in ds:motion-safe:fade-in-0 ds:motion-safe:zoom-in-50 ds:duration-[var(--motion-duration-press)] ds:ease-[var(--motion-ease-enter)]",
5754
+ children: /* @__PURE__ */ jsx(CircleIcon, { className: "ds:fill-current ds:size-2", "aria-hidden": "true" })
5769
5755
  }
5770
5756
  )
5771
5757
  }
@@ -5883,19 +5869,19 @@ function ResponsiveDialog({
5883
5869
  side,
5884
5870
  size = "md"
5885
5871
  }) {
5886
- const [uncontrolledOpen, setUncontrolledOpen] = React28.useState(defaultOpen);
5872
+ const [uncontrolledOpen, setUncontrolledOpen] = React30.useState(defaultOpen);
5887
5873
  const controlled = open !== void 0;
5888
5874
  const isOpen = controlled ? open : uncontrolledOpen;
5889
- const handleOpenChange = React28.useCallback(
5875
+ const handleOpenChange = React30.useCallback(
5890
5876
  (next) => {
5891
5877
  if (!controlled) setUncontrolledOpen(next);
5892
5878
  onOpenChange?.(next);
5893
5879
  },
5894
5880
  [controlled, onOpenChange]
5895
5881
  );
5896
- const close = React28.useCallback(() => handleOpenChange(false), [handleOpenChange]);
5882
+ const close = React30.useCallback(() => handleOpenChange(false), [handleOpenChange]);
5897
5883
  const hasTitle = title !== void 0 && title !== null && title !== "";
5898
- React28.useEffect(() => {
5884
+ React30.useEffect(() => {
5899
5885
  if (process.env.NODE_ENV === "production" || process.env.NODE_ENV === "test") return;
5900
5886
  if (!hasTitle) {
5901
5887
  errorOnce(
@@ -5953,7 +5939,7 @@ var RouteTransition = forwardRef(
5953
5939
  }
5954
5940
  );
5955
5941
  RouteTransition.displayName = "RouteTransition";
5956
- var ScrollArea = React28.forwardRef(function ScrollArea2({ className, children, ...props }, ref) {
5942
+ var ScrollArea = React30.forwardRef(function ScrollArea2({ className, children, ...props }, ref) {
5957
5943
  return /* @__PURE__ */ jsxs(
5958
5944
  ScrollAreaPrimitive.Root,
5959
5945
  {
@@ -5976,7 +5962,7 @@ var ScrollArea = React28.forwardRef(function ScrollArea2({ className, children,
5976
5962
  );
5977
5963
  });
5978
5964
  ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
5979
- var ScrollBar = React28.forwardRef(function ScrollBar2({ className, orientation = "vertical", ...props }, ref) {
5965
+ var ScrollBar = React30.forwardRef(function ScrollBar2({ className, orientation = "vertical", ...props }, ref) {
5980
5966
  return /* @__PURE__ */ jsx(
5981
5967
  ScrollAreaPrimitive.ScrollAreaScrollbar,
5982
5968
  {
@@ -6034,7 +6020,7 @@ function searchInputVariants({
6034
6020
  class: cn(SEARCH_RESET, row, classProp, className) || void 0
6035
6021
  });
6036
6022
  }
6037
- var SearchInput = React28.forwardRef(
6023
+ var SearchInput = React30.forwardRef(
6038
6024
  function SearchInput2({
6039
6025
  value,
6040
6026
  onValueChange,
@@ -6073,20 +6059,20 @@ var SearchInput = React28.forwardRef(
6073
6059
  "aria-labelledby": ariaLabelledBy,
6074
6060
  "aria-describedby": ariaDescribedBy
6075
6061
  });
6076
- const inputRef = React28.useRef(null);
6062
+ const inputRef = React30.useRef(null);
6077
6063
  const setRefs = useMergedRefs(ref, wiringRef, inputRef);
6078
6064
  const debouncedValue = useDebounce(value, debounceMs);
6079
- const isFirstRender = React28.useRef(true);
6080
- React28.useEffect(() => {
6065
+ const isFirstRender = React30.useRef(true);
6066
+ React30.useEffect(() => {
6081
6067
  if (isFirstRender.current) {
6082
6068
  isFirstRender.current = false;
6083
6069
  return;
6084
6070
  }
6085
6071
  onSearch?.(debouncedValue);
6086
6072
  }, [debouncedValue, onSearch]);
6087
- const latestChange = React28.useRef(onValueChange);
6073
+ const latestChange = React30.useRef(onValueChange);
6088
6074
  latestChange.current = onValueChange;
6089
- React28.useEffect(() => {
6075
+ React30.useEffect(() => {
6090
6076
  const owner = inputRef.current?.form;
6091
6077
  if (!owner) return;
6092
6078
  const handle = () => latestChange.current("");
@@ -6229,20 +6215,20 @@ function SearchSelect({
6229
6215
  const createNewLabel = createNewLabelProp ?? copy.createNew;
6230
6216
  const isSingleMode = value !== void 0 || onValueChange !== void 0;
6231
6217
  const closeOnSelect = isSingleMode || closeOnSelectProp;
6232
- const byId = React28.useMemo(() => new Map(options.map((o) => [o.id, o])), [options]);
6218
+ const byId = React30.useMemo(() => new Map(options.map((o) => [o.id, o])), [options]);
6233
6219
  const singleSelectedOption = isSingleMode && value ? byId.get(value) ?? null : null;
6234
- const selected = React28.useMemo(
6220
+ const selected = React30.useMemo(
6235
6221
  () => isSingleMode ? singleSelectedOption ? [singleSelectedOption] : [] : selectedProp ?? [],
6236
6222
  [isSingleMode, singleSelectedOption, selectedProp]
6237
6223
  );
6238
- const selectedIds = React28.useMemo(() => selected.map((s) => s.id), [selected]);
6239
- const [open, setOpen] = React28.useState(false);
6240
- const [search, setSearch] = React28.useState("");
6241
- const [activeChip, setActiveChip] = React28.useState(null);
6242
- const hasGroups = React28.useMemo(() => options.some((o) => o.group != null), [options]);
6243
- const hasLeadingDot = React28.useMemo(() => options.some((o) => !!o.color), [options]);
6244
- const pinnedSet = React28.useMemo(() => new Set(pinnedGroups ?? []), [pinnedGroups]);
6245
- const chips = React28.useMemo(() => {
6224
+ const selectedIds = React30.useMemo(() => selected.map((s) => s.id), [selected]);
6225
+ const [open, setOpen] = React30.useState(false);
6226
+ const [search, setSearch] = React30.useState("");
6227
+ const [activeChip, setActiveChip] = React30.useState(null);
6228
+ const hasGroups = React30.useMemo(() => options.some((o) => o.group != null), [options]);
6229
+ const hasLeadingDot = React30.useMemo(() => options.some((o) => !!o.color), [options]);
6230
+ const pinnedSet = React30.useMemo(() => new Set(pinnedGroups ?? []), [pinnedGroups]);
6231
+ const chips = React30.useMemo(() => {
6246
6232
  if (!groupFilter || !hasGroups) return [];
6247
6233
  const seen = [];
6248
6234
  for (const option of options) {
@@ -6254,7 +6240,7 @@ function SearchSelect({
6254
6240
  }, [groupFilter, hasGroups, options, pinnedSet]);
6255
6241
  const chipActive = chips.length > 0 && activeChip !== null;
6256
6242
  const trimmed = search.trim();
6257
- const groupCounts = React28.useMemo(() => {
6243
+ const groupCounts = React30.useMemo(() => {
6258
6244
  const counts = /* @__PURE__ */ new Map();
6259
6245
  if (!showGroupCounts || trimmed) return counts;
6260
6246
  for (const option of options) {
@@ -6264,7 +6250,7 @@ function SearchSelect({
6264
6250
  }
6265
6251
  return counts;
6266
6252
  }, [showGroupCounts, trimmed, options, selectedIds]);
6267
- const rows = React28.useMemo(
6253
+ const rows = React30.useMemo(
6268
6254
  () => options.filter((option) => !chipActive || option.group === activeChip).map((option) => {
6269
6255
  const heading = chipActive ? void 0 : option.group ?? void 0;
6270
6256
  const count = heading ? groupCounts.get(heading) : void 0;
@@ -6287,7 +6273,7 @@ function SearchSelect({
6287
6273
  };
6288
6274
  const singleValue = closeOnSelect ? selected[0] ?? null : null;
6289
6275
  const showValue = singleValue !== null && !open;
6290
- const renderValue = React28.useCallback(
6276
+ const renderValue = React30.useCallback(
6291
6277
  (row) => {
6292
6278
  const source = sourceOf(row);
6293
6279
  return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -6316,7 +6302,7 @@ function SearchSelect({
6316
6302
  },
6317
6303
  [descriptionVariant]
6318
6304
  );
6319
- const messages = React28.useMemo(
6305
+ const messages = React30.useMemo(
6320
6306
  () => ({
6321
6307
  empty: search ? copy.empty : copy.noOptions,
6322
6308
  clear: singleValue ? copy.clearNamed(singleValue.label) : copy.clear,
@@ -6456,7 +6442,7 @@ function SearchSelect({
6456
6442
  ] });
6457
6443
  }
6458
6444
  SearchSelect.displayName = "SearchSelect";
6459
- var Separator2 = React28.forwardRef(function Separator3({ className, orientation = "horizontal", decorative = true, ...props }, ref) {
6445
+ var Separator2 = React30.forwardRef(function Separator3({ className, orientation = "horizontal", decorative = true, ...props }, ref) {
6460
6446
  return /* @__PURE__ */ jsx(
6461
6447
  SeparatorPrimitive.Root,
6462
6448
  {
@@ -6593,13 +6579,14 @@ var THUMB_SIZE = {
6593
6579
  md: "ds:size-4",
6594
6580
  lg: "ds:size-(--control-icon-xl)"
6595
6581
  };
6596
- var Slider = React28.forwardRef(
6582
+ var Slider = React30.forwardRef(
6597
6583
  function Slider2({
6598
6584
  className,
6599
6585
  label,
6600
6586
  showValue,
6601
6587
  size,
6602
6588
  invalid,
6589
+ thumbLabels,
6603
6590
  id,
6604
6591
  name,
6605
6592
  disabled,
@@ -6630,9 +6617,9 @@ var Slider = React28.forwardRef(
6630
6617
  defaultProp: defaultValue,
6631
6618
  onChange: onValueChange
6632
6619
  });
6633
- const initialValue = React28.useRef(valueProp ?? defaultValue);
6634
- const rootRef = React28.useRef(null);
6635
- useFormReset(rootRef, () => setValue(initialValue.current), form);
6620
+ const initialValue = React30.useRef(valueProp ?? defaultValue);
6621
+ const rootRef = React30.useRef(null);
6622
+ useFormReset2(rootRef, () => setValue(initialValue.current), form);
6636
6623
  const mergedRef = useMergedRefs(ref, rootRef);
6637
6624
  const displayValue = (() => {
6638
6625
  const v = value;
@@ -6643,6 +6630,7 @@ var Slider = React28.forwardRef(
6643
6630
  const labelledBy = wiring["aria-labelledby"];
6644
6631
  const accessibleName = labelledBy ? void 0 : ariaLabel ?? label ?? "Slider value";
6645
6632
  const resolvedSize = size ?? "md";
6633
+ const thumbCount = Array.isArray(value) && value.length > 1 ? value.length : 1;
6646
6634
  return /* @__PURE__ */ jsxs("div", { className: "ds:w-full", children: [
6647
6635
  (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "ds:mb-2 ds:flex ds:items-center ds:justify-between ds:gap-2", children: [
6648
6636
  label ? /* @__PURE__ */ jsx(
@@ -6687,7 +6675,7 @@ var Slider = React28.forwardRef(
6687
6675
  children: /* @__PURE__ */ jsx(SliderPrimitive.Range, { className: "ds:bg-brand ds:data-[disabled]:bg-fg-disabled ds:absolute ds:h-full" })
6688
6676
  }
6689
6677
  ),
6690
- /* @__PURE__ */ jsx(
6678
+ Array.from({ length: thumbCount }, (_, index) => /* @__PURE__ */ jsx(
6691
6679
  SliderPrimitive.Thumb,
6692
6680
  {
6693
6681
  className: cn(
@@ -6701,12 +6689,13 @@ var Slider = React28.forwardRef(
6701
6689
  "ds:data-[disabled]:pointer-events-none ds:data-[disabled]:cursor-not-allowed",
6702
6690
  "ds:data-[disabled]:border-fg-disabled ds:data-[disabled]:bg-bg-disabled"
6703
6691
  ),
6704
- "aria-label": accessibleName,
6705
- "aria-labelledby": labelledBy,
6692
+ "aria-label": thumbLabels?.[index] ?? accessibleName,
6693
+ "aria-labelledby": thumbLabels?.[index] ? void 0 : labelledBy,
6706
6694
  "aria-describedby": wiring["aria-describedby"],
6707
6695
  "aria-invalid": ariaInvalid ?? wiring["aria-invalid"]
6708
- }
6709
- )
6696
+ },
6697
+ index
6698
+ ))
6710
6699
  ]
6711
6700
  }
6712
6701
  )
@@ -6987,7 +6976,7 @@ var StackedBarChart = forwardRef(
6987
6976
  children: ticks.map((t) => /* @__PURE__ */ jsx(
6988
6977
  "span",
6989
6978
  {
6990
- className: "ds:absolute ds:right-0 ds:-translate-y-1/2 ds:leading-none",
6979
+ className: "ds:absolute ds:right-0 ds:translate-y-1/2 ds:leading-none",
6991
6980
  style: { bottom: `${t / niceMax * 100}%` },
6992
6981
  children: formatValue(t)
6993
6982
  },
@@ -7410,7 +7399,9 @@ var StickyActionBar = forwardRef(
7410
7399
  className: cn(
7411
7400
  mode === "fixed" ? "ds:fixed" : "ds:sticky",
7412
7401
  "ds:inset-x-0 ds:z-[calc(var(--z-base)+20)] ds:flex ds:flex-wrap ds:items-center ds:gap-3",
7413
- "ds:border-t ds:border-rule ds:bg-surface/80 ds:px-4 ds:py-3 ds:backdrop-blur-md ds:sm:px-6",
7402
+ // Translucent only where the blur behind it exists; an opaque bar
7403
+ // otherwise, so page content never shows through un-blurred.
7404
+ "ds:border-t ds:border-rule ds:bg-surface ds:px-4 ds:py-3 ds:backdrop-blur-md ds:sm:px-6",
7414
7405
  "ds:supports-[backdrop-filter]:bg-surface/80",
7415
7406
  offsetForMobileNav ? "ds:bottom-[calc(3.5rem_+_env(safe-area-inset-bottom))] ds:sm:bottom-0" : "ds:bottom-0",
7416
7407
  className
@@ -7539,6 +7530,55 @@ var SuiteProgress = forwardRef(function SuiteProgress2({
7539
7530
  );
7540
7531
  });
7541
7532
  SuiteProgress.displayName = "SuiteProgress";
7533
+ var TableDensityToggle = React30.forwardRef(
7534
+ function TableDensityToggle2({
7535
+ value,
7536
+ onValueChange,
7537
+ size = "sm",
7538
+ messages: messagesOverride,
7539
+ "aria-label": ariaLabel,
7540
+ "aria-labelledby": ariaLabelledBy,
7541
+ className
7542
+ }, ref) {
7543
+ const messages = useDsMessages("tableDensity", messagesOverride);
7544
+ const itemClassName = "ds:aspect-square ds:px-0 ds:[&_svg]:size-4";
7545
+ return /* @__PURE__ */ jsxs(
7546
+ ToggleGroup,
7547
+ {
7548
+ ref,
7549
+ type: "single",
7550
+ variant: "segmented",
7551
+ size,
7552
+ value,
7553
+ onValueChange: (next) => {
7554
+ if (next) onValueChange(next);
7555
+ },
7556
+ "aria-label": ariaLabelledBy ? void 0 : ariaLabel ?? messages.label,
7557
+ "aria-labelledby": ariaLabelledBy,
7558
+ className,
7559
+ children: [
7560
+ /* @__PURE__ */ jsxs(Tooltip, { children: [
7561
+ /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
7562
+ ToggleGroupItem,
7563
+ {
7564
+ value: "comfortable",
7565
+ "aria-label": messages.comfortable,
7566
+ className: itemClassName,
7567
+ children: /* @__PURE__ */ jsx(RowsIcon, {})
7568
+ }
7569
+ ) }),
7570
+ /* @__PURE__ */ jsx(TooltipContent, { children: messages.comfortable })
7571
+ ] }),
7572
+ /* @__PURE__ */ jsxs(Tooltip, { children: [
7573
+ /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(ToggleGroupItem, { value: "compact", "aria-label": messages.compact, className: itemClassName, children: /* @__PURE__ */ jsx(Rows4Icon, {}) }) }),
7574
+ /* @__PURE__ */ jsx(TooltipContent, { children: messages.compact })
7575
+ ] })
7576
+ ]
7577
+ }
7578
+ );
7579
+ }
7580
+ );
7581
+ TableDensityToggle.displayName = "TableDensityToggle";
7542
7582
  var ToastContext = createContext(null);
7543
7583
  function useToast() {
7544
7584
  const ctx = useContext(ToastContext);
@@ -8194,7 +8234,7 @@ var StatusBadge = forwardRef(function StatusBadge2({
8194
8234
  className: cn(
8195
8235
  "ds:inline-flex ds:shrink-0 ds:items-center ds:justify-center",
8196
8236
  // The dot is its own 6px box, as on Badge; glyphs and the spinner sit in the 14px icon box.
8197
- !showDot && "ds:size-3.5"
8237
+ !showDot && "ds:size-3.5 ds:[&>svg]:max-h-full ds:[&>svg]:max-w-full"
8198
8238
  ),
8199
8239
  "aria-hidden": "true",
8200
8240
  children: indicator
@@ -8285,6 +8325,9 @@ function MultiSelect(props) {
8285
8325
  return /* @__PURE__ */ jsx(Combobox, { ...props, multiple: true });
8286
8326
  }
8287
8327
  MultiSelect.displayName = "MultiSelect";
8328
+
8329
+ // src/foundation/use-reduced-motion.ts
8330
+ var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
8288
8331
  var statusLabel = {
8289
8332
  "not-started": "Not started",
8290
8333
  "in-progress": "In progress",
@@ -8333,8 +8376,9 @@ var QuestionnairePanel = forwardRef(
8333
8376
  const selectedCardRef = useRef(null);
8334
8377
  const titleId = useId();
8335
8378
  useEffect(() => {
8379
+ const reduce = typeof window !== "undefined" && window.matchMedia?.(REDUCED_MOTION_QUERY).matches;
8336
8380
  selectedCardRef.current?.scrollIntoView({
8337
- behavior: "smooth",
8381
+ behavior: reduce ? "auto" : "smooth",
8338
8382
  block: "center",
8339
8383
  inline: "center"
8340
8384
  });
@@ -8369,7 +8413,7 @@ var QuestionnairePanel = forwardRef(
8369
8413
  "aria-expanded": isOpen,
8370
8414
  className: cn(
8371
8415
  "ds:text-brand ds:flex ds:h-8 ds:w-full ds:items-center ds:gap-2 ds:px-4 ds:text-left ds:text-[11px] ds:font-bold ds:tracking-[0.08em] ds:uppercase",
8372
- "ds:hover:bg-brand-bg/50 ds:transition-colors ds:duration-[var(--duration-fast)]",
8416
+ "ds:hover:bg-brand-bg/50 ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
8373
8417
  "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none"
8374
8418
  ),
8375
8419
  children: [
@@ -8381,7 +8425,7 @@ var QuestionnairePanel = forwardRef(
8381
8425
  size: 13,
8382
8426
  "aria-hidden": "true",
8383
8427
  className: cn(
8384
- "ds:text-brand ds:transition-transform ds:duration-[var(--duration-fast)]",
8428
+ "ds:text-brand ds:transition-transform ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
8385
8429
  !isOpen && "ds:-rotate-90"
8386
8430
  )
8387
8431
  }
@@ -8400,7 +8444,7 @@ var QuestionnairePanel = forwardRef(
8400
8444
  "data-active": selected ? "true" : void 0,
8401
8445
  className: cn(
8402
8446
  "ds:group ds:flex ds:h-8 ds:w-full ds:items-center ds:gap-3 ds:px-5 ds:text-left",
8403
- "ds:text-fg-2 ds:transition-colors ds:duration-[var(--duration-fast)]",
8447
+ "ds:text-fg-2 ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
8404
8448
  "ds:hover:bg-surface-hover ds:hover:text-fg",
8405
8449
  "ds:focus-visible:[box-shadow:var(--shadow-focus-ring)] ds:focus-visible:outline-none",
8406
8450
  selected && "ds:bg-brand-bg ds:text-brand ds:font-semibold"
@@ -8639,7 +8683,9 @@ var FolderTree = forwardRef(function FolderTree2({ nodes, activeId, onSelect, de
8639
8683
  toggle(node.id);
8640
8684
  },
8641
8685
  className: cn(
8642
- "ds:shrink-0 ds:text-fg-4 ds:transition-transform ds:duration-[var(--motion-duration-feedback)] ds:motion-reduce:transition-none",
8686
+ "ds:shrink-0 ds:rounded-icon ds:text-fg-4 ds:hover:text-fg-2",
8687
+ "ds:transition-[color,transform] ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
8688
+ "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
8643
8689
  isOpen && "ds:rotate-90"
8644
8690
  ),
8645
8691
  children: /* @__PURE__ */ jsx(ChevronRightIcon, { size: 13, "aria-hidden": "true" })
@@ -8714,7 +8760,13 @@ function SegmentedControl({
8714
8760
  ...disabled !== void 0 && { disabled },
8715
8761
  "aria-label": aria["aria-label"],
8716
8762
  "aria-labelledby": aria["aria-labelledby"],
8717
- className: cn("ds:bg-bg-2 ds:rounded-pill ds:p-0.5", className),
8763
+ className: cn(
8764
+ // `segmented` gets its track chrome from `ToggleGroup` itself
8765
+ // (quiet surface-sunken well, control radius, hairline border) —
8766
+ // this preset's own bare pill track is the `default`/`outline` look.
8767
+ variant === "segmented" ? void 0 : "ds:bg-bg-2 ds:rounded-pill ds:p-0.5",
8768
+ className
8769
+ ),
8718
8770
  children: options.map((option) => /* @__PURE__ */ jsxs(
8719
8771
  ToggleGroupItem,
8720
8772
  {
@@ -8783,6 +8835,195 @@ var Content6 = forwardRef(function Content7({ padding = "default", padTop, padBo
8783
8835
  );
8784
8836
  });
8785
8837
  Content6.displayName = "Content";
8838
+ function matchesPath(href, currentPath, mode = "prefix") {
8839
+ if (currentPath === href) return true;
8840
+ if (mode === "exact") return false;
8841
+ return currentPath.startsWith(href.endsWith("/") ? href : `${href}/`);
8842
+ }
8843
+ function findActiveId(sections, currentPath) {
8844
+ let activeId = null;
8845
+ let longest = -1;
8846
+ const visit = (items) => {
8847
+ for (const item of items) {
8848
+ if (matchesPath(item.href, currentPath, item.match) && item.href.length > longest) {
8849
+ longest = item.href.length;
8850
+ activeId = item.id;
8851
+ }
8852
+ if (item.children) visit(item.children);
8853
+ }
8854
+ };
8855
+ for (const section of sections) visit(section.items);
8856
+ return activeId;
8857
+ }
8858
+ function hasActiveDescendant(item, activeId) {
8859
+ if (!item.children || activeId == null) return false;
8860
+ return item.children.some((child) => child.id === activeId || hasActiveDescendant(child, activeId));
8861
+ }
8862
+ var TRUNCATED_LABEL_CLASSNAME = "ds:line-clamp-none ds:truncate";
8863
+ function getNodeText(node) {
8864
+ if (node == null || typeof node === "boolean") return "";
8865
+ if (typeof node === "string" || typeof node === "number") return String(node);
8866
+ if (Array.isArray(node)) return node.map(getNodeText).filter(Boolean).join(" ");
8867
+ if (React30.isValidElement(node)) {
8868
+ return getNodeText(node.props.children);
8869
+ }
8870
+ return "";
8871
+ }
8872
+ function getAccessibleLabel(item) {
8873
+ const parts = [getNodeText(item.label), item.badge != null ? getNodeText(item.badge) : ""];
8874
+ return parts.filter(Boolean).join(", ") || void 0;
8875
+ }
8876
+ function AppSidebarItemContent({ item, showTitle }) {
8877
+ return /* @__PURE__ */ jsxs(Fragment, { children: [
8878
+ item.icon,
8879
+ /* @__PURE__ */ jsx(
8880
+ SidebarLinkLabel,
8881
+ {
8882
+ className: TRUNCATED_LABEL_CLASSNAME,
8883
+ title: showTitle && typeof item.label === "string" ? item.label : void 0,
8884
+ children: item.label
8885
+ }
8886
+ ),
8887
+ item.badge != null && /* @__PURE__ */ jsx(SidebarLinkBadge, { tone: item.badgeTone, children: item.badge })
8888
+ ] });
8889
+ }
8890
+ function AppSidebarLeafLink({
8891
+ item,
8892
+ active,
8893
+ showTitle,
8894
+ RouterLink
8895
+ }) {
8896
+ return /* @__PURE__ */ jsx(SidebarLink, { asChild: true, active, "aria-label": getAccessibleLabel(item), children: /* @__PURE__ */ jsx(RouterLink, { href: item.href, ...item.linkProps, children: /* @__PURE__ */ jsx(AppSidebarItemContent, { item, showTitle }) }) });
8897
+ }
8898
+ function AppSidebarRow({
8899
+ item,
8900
+ activeId,
8901
+ showTitle,
8902
+ RouterLink
8903
+ }) {
8904
+ const active = item.id === activeId;
8905
+ if (!item.children || item.children.length === 0) {
8906
+ return /* @__PURE__ */ jsx(AppSidebarLeafLink, { item, active, showTitle, RouterLink });
8907
+ }
8908
+ return /* @__PURE__ */ jsx(
8909
+ SidebarLinkGroup,
8910
+ {
8911
+ id: item.id,
8912
+ icon: item.icon,
8913
+ label: (
8914
+ // `SidebarLinkGroup` wraps `label` in its own frozen `line-clamp-1`
8915
+ // span (not ours to override via className), so truncation has to
8916
+ // come from this inner block instead: a definite width (`w-full`)
8917
+ // plus the standard ellipsis trio truncates regardless of the
8918
+ // ancestor's `-webkit-box` display.
8919
+ /* @__PURE__ */ jsx(
8920
+ "span",
8921
+ {
8922
+ className: "ds:block ds:w-full ds:truncate",
8923
+ title: showTitle && typeof item.label === "string" ? item.label : void 0,
8924
+ children: item.label
8925
+ }
8926
+ )
8927
+ ),
8928
+ href: item.href,
8929
+ active,
8930
+ defaultOpen: active || hasActiveDescendant(item, activeId),
8931
+ children: item.children.map((child) => /* @__PURE__ */ jsx(AppSidebarRow, { item: child, activeId, showTitle, RouterLink }, child.id))
8932
+ }
8933
+ );
8934
+ }
8935
+ function AppSidebarNav({
8936
+ sections,
8937
+ currentPath,
8938
+ sectionClassName,
8939
+ collapsible = false
8940
+ }) {
8941
+ const RouterLink = useLinkComponent() ?? PlainLink;
8942
+ const activeId = React30.useMemo(() => findActiveId(sections, currentPath), [sections, currentPath]);
8943
+ const { state } = useSidebarState();
8944
+ const showTitle = !(collapsible && state === "rail");
8945
+ return /* @__PURE__ */ jsx(Fragment, { children: sections.map((section) => /* @__PURE__ */ jsx(
8946
+ SidebarSection,
8947
+ {
8948
+ label: section.label,
8949
+ headerActions: section.headerActions,
8950
+ className: sectionClassName,
8951
+ children: section.items.map((item) => /* @__PURE__ */ jsx(
8952
+ AppSidebarRow,
8953
+ {
8954
+ item,
8955
+ activeId,
8956
+ showTitle,
8957
+ RouterLink
8958
+ },
8959
+ item.id
8960
+ ))
8961
+ },
8962
+ section.id
8963
+ )) });
8964
+ }
8965
+ AppSidebarNav.displayName = "AppSidebarNav";
8966
+ var AppSidebar = React30.forwardRef(function AppSidebar2({
8967
+ sections,
8968
+ currentPath,
8969
+ sectionClassName,
8970
+ brand,
8971
+ footer,
8972
+ user,
8973
+ variant = "flush",
8974
+ collapsible,
8975
+ className,
8976
+ classNames,
8977
+ ...props
8978
+ }, ref) {
8979
+ return /* @__PURE__ */ jsxs(
8980
+ Sidebar,
8981
+ {
8982
+ ref,
8983
+ variant,
8984
+ ...collapsible !== void 0 && { collapsible },
8985
+ className: cn(classNames?.root, className),
8986
+ ...props,
8987
+ children: [
8988
+ brand,
8989
+ /* @__PURE__ */ jsx(
8990
+ AppSidebarNav,
8991
+ {
8992
+ sections,
8993
+ currentPath,
8994
+ sectionClassName: cn(classNames?.section, sectionClassName),
8995
+ collapsible
8996
+ }
8997
+ ),
8998
+ (footer != null || user != null) && /* @__PURE__ */ jsxs(SidebarFooter, { className: "ds:mt-auto ds:border-t-0 ds:px-0 ds:pt-2 ds:pb-0", children: [
8999
+ footer,
9000
+ user != null && /* @__PURE__ */ jsx(
9001
+ "div",
9002
+ {
9003
+ className: cn(
9004
+ "ds:flex ds:w-full ds:min-w-0 ds:items-center ds:gap-2.5 ds:border-rule ds:border-t ds:px-2 ds:pt-2.5",
9005
+ // <SidebarUser> already renders a 28px avatar (`size="sm"`)
9006
+ // and a 13px/medium name — both already the body-sm role's
9007
+ // computed size. Only the subtitle moves off its default
9008
+ // fg-4/mono treatment, reached through the part's own
9009
+ // `data-slot` (ADR-008) instead of a second copy of
9010
+ // SidebarUser's markup.
9011
+ "ds:[&_[data-slot=sidebar-user-subtitle]]:font-sans ds:[&_[data-slot=sidebar-user-subtitle]]:text-caption ds:[&_[data-slot=sidebar-user-subtitle]]:text-fg-3",
9012
+ // Rail: the card's border/padding has nothing left to frame
9013
+ // once the name/subtitle collapse to a lone avatar —
9014
+ // <SidebarUser> already carries `data-collapsed` for it.
9015
+ "ds:has-[[data-collapsed]]:border-0 ds:has-[[data-collapsed]]:px-0 ds:has-[[data-collapsed]]:pt-0",
9016
+ classNames?.footer
9017
+ ),
9018
+ children: /* @__PURE__ */ jsx(SidebarUser, { ...user })
9019
+ }
9020
+ )
9021
+ ] })
9022
+ ]
9023
+ }
9024
+ );
9025
+ });
9026
+ AppSidebar.displayName = "AppSidebar";
8786
9027
  var AppHeader = forwardRef(function AppHeader2({ className, ...props }, ref) {
8787
9028
  return /* @__PURE__ */ jsx(
8788
9029
  "header",
@@ -9402,7 +9643,12 @@ var KanbanColumn = forwardRef(function KanbanColumn2({ title, count, className,
9402
9643
  KanbanColumn.displayName = "KanbanColumn";
9403
9644
  var kanbanCardBase = cn(
9404
9645
  "ds:bg-surface ds:border ds:border-rule ds:rounded-card ds:shadow-quiet ds:p-3 ds:space-y-2 ds:cursor-grab",
9405
- "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:hover:border-rule-strong ds:motion-reduce:transition-none"
9646
+ // Card `interactive`'s lift (F14): a shadow step, no geometry, so a column
9647
+ // never jitters under the pointer.
9648
+ "ds:transition-[border-color,box-shadow] ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:hover:border-rule-strong ds:hover:shadow-raised ds:motion-reduce:transition-none",
9649
+ "ds:active:cursor-grabbing",
9650
+ // Drag libraries (dnd-kit, @hello-pangea/dnd) make the card focusable.
9651
+ "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]"
9406
9652
  );
9407
9653
  var priorityConfig = {
9408
9654
  high: { label: "High", variant: "destructive" },
@@ -9458,7 +9704,7 @@ var MessageBubble = forwardRef(function MessageBubble2({ avatar, name, timestamp
9458
9704
  "span",
9459
9705
  {
9460
9706
  className: cn(
9461
- "ds:ml-auto ds:opacity-0 ds:transition-opacity ds:motion-reduce:transition-none",
9707
+ "ds:ml-auto ds:opacity-0 ds:transition-opacity ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
9462
9708
  "ds:group-hover/bubble:opacity-100 ds:group-focus-within/bubble:opacity-100"
9463
9709
  ),
9464
9710
  children: actions
@@ -9504,7 +9750,9 @@ var MessageBubbleAction = forwardRef(
9504
9750
  ref,
9505
9751
  type,
9506
9752
  className: cn(
9507
- "ds:text-fg-4 ds:text-[10px] ds:focus-visible:outline-none",
9753
+ "ds:text-fg-4 ds:text-[10px] ds:rounded-badge",
9754
+ "ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
9755
+ "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
9508
9756
  destructive ? "ds:hover:text-danger-fg" : "ds:hover:text-fg",
9509
9757
  className
9510
9758
  ),
@@ -9568,7 +9816,9 @@ var MessageComposer = forwardRef(
9568
9816
  className: cn(
9569
9817
  "ds:relative ds:flex ds:flex-col",
9570
9818
  "ds:border-rule ds:bg-input-background ds:rounded-xl ds:border",
9571
- "ds:transition-shadow ds:duration-[var(--motion-duration-feedback)] ds:motion-reduce:transition-none",
9819
+ // Border, fill and shadow move together on focus-within; transitioning the
9820
+ // shadow alone let the border and fill snap.
9821
+ "ds:transition-[border-color,background-color,box-shadow] ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
9572
9822
  "ds:focus-within:border-accent-ring ds:focus-within:bg-surface ds:focus-within:shadow-flat",
9573
9823
  isDisabled && "ds:pointer-events-none ds:opacity-60",
9574
9824
  className
@@ -9584,16 +9834,17 @@ var MessageComposer = forwardRef(
9584
9834
  className: "ds:flex ds:w-full ds:gap-1.5 ds:overflow-x-auto",
9585
9835
  style: { maskImage, WebkitMaskImage: maskImage },
9586
9836
  children: chipsLoading ? Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsx(
9587
- "div",
9837
+ Skeleton,
9588
9838
  {
9589
9839
  "aria-hidden": "true",
9590
- className: "ds:bg-bg-3 ds:h-6 ds:w-20 ds:shrink-0 ds:animate-pulse ds:rounded-full ds:motion-reduce:animate-none"
9840
+ className: "ds:h-6 ds:w-20 ds:shrink-0 ds:rounded-full"
9591
9841
  },
9592
9842
  i
9593
9843
  )) : chips.map((chip) => /* @__PURE__ */ jsx(
9594
9844
  "button",
9595
9845
  {
9596
9846
  type: "button",
9847
+ disabled: isDisabled,
9597
9848
  onClick: () => onChipPick?.(chip),
9598
9849
  title: chip.label,
9599
9850
  className: cn(
@@ -9663,7 +9914,7 @@ var NotificationPanelHeader = forwardRef(
9663
9914
  {
9664
9915
  type: "button",
9665
9916
  onClick: onMarkAllRead,
9666
- className: "ds:text-brand ds:rounded-md ds:px-1.5 ds:py-1 ds:text-sm ds:font-medium ds:hover:bg-[color:var(--color-brand-bg)] ds:focus-visible:ring-accent ds:outline-none ds:focus-visible:ring-2",
9917
+ className: "ds:text-brand ds:rounded-md ds:px-1.5 ds:py-1 ds:text-sm ds:font-medium ds:hover:bg-brand-bg ds:active:bg-brand-bg-hover ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none ds:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
9667
9918
  children: "Mark all read"
9668
9919
  }
9669
9920
  ),
@@ -9673,7 +9924,7 @@ var NotificationPanelHeader = forwardRef(
9673
9924
  type: "button",
9674
9925
  onClick: onSettings,
9675
9926
  "aria-label": "Notification settings",
9676
- className: "ds:text-fg-3 ds:hover:text-fg ds:hover:bg-surface-hover ds:rounded-md ds:p-1 ds:[&_svg]:size-[15px]",
9927
+ className: "ds:text-fg-3 ds:hover:text-fg ds:hover:bg-surface-hover ds:active:bg-control-active-bg ds:rounded-md ds:p-1 ds:[&_svg]:size-[15px] ds:transition-colors ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
9677
9928
  children: /* @__PURE__ */ jsx(SettingsIcon, {})
9678
9929
  }
9679
9930
  )
@@ -9707,8 +9958,9 @@ var NotificationFilter = forwardRef(
9707
9958
  onClick: () => onValueChange(option),
9708
9959
  "aria-pressed": selected,
9709
9960
  className: cn(
9710
- "ds:inline-flex ds:items-center ds:gap-1.5 ds:rounded-lg ds:px-2.5 ds:py-1 ds:capitalize ds:transition-colors",
9711
- "ds:focus-visible:ring-accent ds:outline-none ds:focus-visible:ring-2",
9961
+ "ds:inline-flex ds:items-center ds:gap-1.5 ds:rounded-lg ds:px-2.5 ds:py-1 ds:capitalize",
9962
+ "ds:transition-[color,background-color,box-shadow] ds:duration-[var(--motion-duration-feedback)] ds:ease-[var(--motion-ease-enter)] ds:motion-reduce:transition-none",
9963
+ "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
9712
9964
  selected ? "ds:bg-surface ds:text-brand ds:ring-1 ds:ring-[color:var(--color-brand-line)]" : "ds:text-fg-3 ds:hover:text-fg"
9713
9965
  ),
9714
9966
  children: [
@@ -9781,7 +10033,9 @@ var NotificationItem = forwardRef(
9781
10033
  className: cn(
9782
10034
  "ds:flex ds:w-full ds:gap-3 ds:px-4 ds:py-3 ds:text-left ds:outline-none",
9783
10035
  "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
9784
- unread ? "ds:bg-brand-bg ds:hover:bg-brand-bg-hover ds:focus-visible:bg-brand-bg-hover" : "ds:hover:bg-surface-hover/60 ds:focus-visible:bg-bg-2/60",
10036
+ unread ? "ds:bg-brand-bg ds:hover:bg-brand-bg-hover ds:focus-visible:bg-brand-bg-hover" : "ds:hover:bg-surface-hover/60 ds:focus-visible:bg-surface-hover/60",
10037
+ // Rows stack edge to edge, so focus is an inset outline (TableRow's).
10038
+ "ds:focus-visible:outline-2 ds:focus-visible:-outline-offset-2 ds:focus-visible:outline-[var(--focus-ring-border)]",
9785
10039
  className
9786
10040
  ),
9787
10041
  ...props,
@@ -9835,7 +10089,7 @@ var NotificationPanelFooter = forwardRef(
9835
10089
  className: cn(
9836
10090
  "ds:border-rule ds:text-fg ds:hover:bg-surface-hover ds:w-full ds:border-t ds:px-4 ds:py-3 ds:text-center ds:text-sm ds:font-medium",
9837
10091
  "ds:transition-colors ds:duration-[var(--duration-fast)] ds:ease-[var(--ease-out-quart)] ds:motion-reduce:transition-none",
9838
- "ds:focus-visible:ring-accent ds:outline-none ds:focus-visible:ring-2",
10092
+ "ds:focus-visible:outline-none ds:focus-visible:[box-shadow:var(--shadow-focus-ring)]",
9839
10093
  className
9840
10094
  ),
9841
10095
  ...props,
@@ -9894,7 +10148,7 @@ var FilterChip = forwardRef(function FilterChip2({ active = false, size, count,
9894
10148
  );
9895
10149
  });
9896
10150
  FilterChip.displayName = "FilterChip";
9897
- var BulkActionBarContext = React28.createContext({ tone: "surface" });
10151
+ var BulkActionBarContext = React30.createContext({ tone: "surface" });
9898
10152
  function actionClasses(tone, destructive) {
9899
10153
  const base = cn(
9900
10154
  "ds:inline-flex ds:h-8 ds:items-center ds:gap-1.5 ds:rounded-btn ds:px-3 ds:text-[13px] ds:font-medium",
@@ -9907,18 +10161,18 @@ function actionClasses(tone, destructive) {
9907
10161
  if (tone === "inverse") {
9908
10162
  return cn(
9909
10163
  base,
9910
- "ds:data-[state=open]:bg-selection-floating-active-bg",
10164
+ "ds:data-[state=open]:bg-selection-floating-active-bg ds:aria-expanded:bg-selection-floating-active-bg",
9911
10165
  destructive ? "ds:bg-danger-fg ds:text-fg-on-danger ds:hover:bg-danger-fg-hover ds:active:bg-danger-fg-active" : "ds:text-selection-floating-muted-fg ds:hover:bg-selection-floating-hover-bg ds:hover:text-selection-floating-fg"
9912
10166
  );
9913
10167
  }
9914
10168
  return cn(
9915
10169
  base,
9916
- "ds:data-[state=open]:bg-control-active-bg",
10170
+ "ds:data-[state=open]:bg-control-active-bg ds:aria-expanded:bg-control-active-bg",
9917
10171
  destructive ? "ds:text-control-destructive-fg ds:hover:bg-control-destructive-hover-bg" : "ds:text-control-fg ds:hover:bg-control-hover-bg ds:hover:text-control-hover-fg"
9918
10172
  );
9919
10173
  }
9920
- var BulkActionBarAction = React28.forwardRef(function BulkActionBarAction2({ asChild = false, destructive, className, type, ...props }, ref) {
9921
- const { tone } = React28.use(BulkActionBarContext);
10174
+ var BulkActionBarAction = React30.forwardRef(function BulkActionBarAction2({ asChild = false, destructive, className, type, ...props }, ref) {
10175
+ const { tone } = React30.use(BulkActionBarContext);
9922
10176
  const Comp = asChild ? Slot : "button";
9923
10177
  return /* @__PURE__ */ jsx(
9924
10178
  Comp,
@@ -9932,7 +10186,7 @@ var BulkActionBarAction = React28.forwardRef(function BulkActionBarAction2({ asC
9932
10186
  });
9933
10187
  BulkActionBarAction.displayName = "BulkActionBarAction";
9934
10188
  function BulkActionBarSeparator({ className }) {
9935
- const { tone } = React28.use(BulkActionBarContext);
10189
+ const { tone } = React30.use(BulkActionBarContext);
9936
10190
  return /* @__PURE__ */ jsx(
9937
10191
  "span",
9938
10192
  {
@@ -9945,6 +10199,7 @@ function BulkActionBarSeparator({ className }) {
9945
10199
  }
9946
10200
  );
9947
10201
  }
10202
+ var BAR_ENTER = "ds:motion-safe:animate-in ds:motion-safe:fade-in-0 ds:motion-safe:slide-in-from-bottom-2 ds:duration-[var(--motion-duration-overlay)] ds:ease-[var(--motion-ease-enter)]";
9948
10203
  function BulkActionBarClear({
9949
10204
  variant,
9950
10205
  clearLabel,
@@ -9990,7 +10245,7 @@ function BulkActionBar({
9990
10245
  const labelText = label ?? `${selectedCount} selected`;
9991
10246
  const tone = variant === "page-floating" ? "inverse" : "surface";
9992
10247
  const content = /* @__PURE__ */ jsxs(BulkActionBarContext, { value: { tone }, children: [
9993
- /* @__PURE__ */ jsx("span", { className: "ds:text-sm ds:font-medium ds:tabular-nums", children: labelText }),
10248
+ /* @__PURE__ */ jsx("span", { className: "ds:text-sm ds:font-medium ds:tabular-nums ds:whitespace-nowrap", children: labelText }),
9994
10249
  /* @__PURE__ */ jsx(BulkActionBarSeparator, {}),
9995
10250
  /* @__PURE__ */ jsx("div", { className: "ds:flex ds:flex-wrap ds:items-center ds:gap-1", children }),
9996
10251
  /* @__PURE__ */ jsx("div", { className: "ds:min-w-2 ds:flex-1" }),
@@ -10014,7 +10269,7 @@ function BulkActionBar({
10014
10269
  ),
10015
10270
  ...props,
10016
10271
  children: [
10017
- /* @__PURE__ */ jsx("div", { className: "ds:border-rule ds:bg-surface ds:text-fg ds:flex ds:items-center ds:gap-3 ds:rounded-card ds:border ds:px-6 ds:py-3 ds:shadow-card", children: content }),
10272
+ /* @__PURE__ */ jsx("div", { className: cn("ds:border-rule ds:bg-surface ds:text-fg ds:flex ds:items-center ds:gap-3 ds:rounded-card ds:border ds:px-6 ds:py-3 ds:shadow-card", BAR_ENTER), children: content }),
10018
10273
  footer
10019
10274
  ]
10020
10275
  }
@@ -10030,7 +10285,7 @@ function BulkActionBar({
10030
10285
  ),
10031
10286
  ...props,
10032
10287
  children: [
10033
- /* @__PURE__ */ jsx("div", { className: "ds:bg-selection-floating-bg ds:text-selection-floating-fg ds:flex ds:items-center ds:gap-2 ds:rounded-card ds:px-3.5 ds:py-1.5 ds:shadow-pop", children: content }),
10288
+ /* @__PURE__ */ jsx("div", { className: cn("ds:bg-selection-floating-bg ds:text-selection-floating-fg ds:flex ds:items-center ds:gap-2 ds:rounded-card ds:px-3.5 ds:py-1.5 ds:shadow-pop", BAR_ENTER), children: content }),
10034
10289
  footer
10035
10290
  ]
10036
10291
  }
@@ -10042,7 +10297,7 @@ function BulkActionBar({
10042
10297
  className: cn("ds:sticky ds:bottom-4 ds:z-[var(--z-sticky)] ds:mt-3 ds:flex ds:justify-center", className),
10043
10298
  ...props,
10044
10299
  children: [
10045
- /* @__PURE__ */ jsx("div", { className: "ds:border-rule ds:bg-surface ds:flex ds:w-fit ds:max-w-full ds:items-center ds:gap-3 ds:overflow-x-auto ds:rounded-card ds:border ds:px-4 ds:py-2 ds:shadow-card", children: content }),
10300
+ /* @__PURE__ */ jsx("div", { className: cn("ds:border-rule ds:bg-surface ds:flex ds:w-fit ds:max-w-full ds:items-center ds:gap-3 ds:overflow-x-auto ds:rounded-card ds:border ds:px-4 ds:py-2 ds:shadow-card", BAR_ENTER), children: content }),
10046
10301
  footer
10047
10302
  ]
10048
10303
  }
@@ -10394,7 +10649,14 @@ function DisplayMenu({
10394
10649
  {
10395
10650
  ref: flyoutRef,
10396
10651
  tabIndex: -1,
10397
- style: { top: flyout.top, width: FLYOUT_WIDTH, maxHeight: flyout.maxHeight },
10652
+ "data-ds-presence": "floating",
10653
+ "data-state": "open",
10654
+ style: {
10655
+ top: flyout.top,
10656
+ width: FLYOUT_WIDTH,
10657
+ maxHeight: flyout.maxHeight,
10658
+ transformOrigin: flyout.side === "left" ? "right top" : "left top"
10659
+ },
10398
10660
  className: cn(
10399
10661
  // Column + overflow-hidden so the option list (the only flexible
10400
10662
  // part) absorbs the height cap, while the search box and Clear
@@ -10507,35 +10769,35 @@ function DisplayMenu({
10507
10769
  function EmptyRow({ label = "No matches" }) {
10508
10770
  return /* @__PURE__ */ jsx("p", { className: "ds:px-2 ds:py-3 ds:text-center ds:text-[11px] ds:text-fg-3", children: label });
10509
10771
  }
10510
- var StickyStackContext = React28.createContext(null);
10772
+ var StickyStackContext = React30.createContext(null);
10511
10773
  function StickyStack({
10512
10774
  layers,
10513
10775
  top = 0,
10514
10776
  layerMode = "fixed",
10515
10777
  children
10516
10778
  }) {
10517
- const [layerHeights, setLayerHeights] = React28.useState({});
10518
- const normalizedLayers = React28.useMemo(() => {
10779
+ const [layerHeights, setLayerHeights] = React30.useState({});
10780
+ const normalizedLayers = React30.useMemo(() => {
10519
10781
  const names = [...layers];
10520
10782
  if (new Set(names).size !== names.length) {
10521
10783
  throw new Error("StickyStack layer names must be unique.");
10522
10784
  }
10523
10785
  return names;
10524
10786
  }, [layers]);
10525
- const setLayerHeight = React28.useCallback((name, height) => {
10787
+ const setLayerHeight = React30.useCallback((name, height) => {
10526
10788
  setLayerHeights((current) => {
10527
10789
  if (current[name] === height) return current;
10528
10790
  return { ...current, [name]: height };
10529
10791
  });
10530
10792
  }, []);
10531
- const value = React28.useMemo(
10793
+ const value = React30.useMemo(
10532
10794
  () => ({ layers: normalizedLayers, layerHeights, setLayerHeight, top, layerMode }),
10533
10795
  [layerHeights, layerMode, normalizedLayers, setLayerHeight, top]
10534
10796
  );
10535
10797
  return /* @__PURE__ */ jsx(StickyStackContext, { value, children });
10536
10798
  }
10537
10799
  function useStickyStack(componentName) {
10538
- const context = React28.use(StickyStackContext);
10800
+ const context = React30.use(StickyStackContext);
10539
10801
  if (!context) {
10540
10802
  throw new Error(`${componentName} must be rendered inside StickyStack.`);
10541
10803
  }
@@ -10558,21 +10820,21 @@ function stackOffset(context, layerName, includeNamedLayer) {
10558
10820
  const base = cssLength(top);
10559
10821
  return measuredOffset === 0 ? base : `calc(${base} + ${measuredOffset}px)`;
10560
10822
  }
10561
- var StickyStackLayer = React28.forwardRef(
10823
+ var StickyStackLayer = React30.forwardRef(
10562
10824
  function StickyStackLayer2({ name, hostClassName, layerMode, className, children, style, ...props }, forwardedRef) {
10563
10825
  const context = useStickyStack("StickyStackLayer");
10564
10826
  const { setLayerHeight } = context;
10565
10827
  const mode = layerMode ?? context.layerMode;
10566
10828
  const top = stackOffset(context, name, false);
10567
- const hostRef = React28.useRef(null);
10568
- const layerRef = React28.useRef(null);
10569
- const [bounds, setBounds] = React28.useState({
10829
+ const hostRef = React30.useRef(null);
10830
+ const layerRef = React30.useRef(null);
10831
+ const [bounds, setBounds] = React30.useState({
10570
10832
  height: 0,
10571
10833
  left: 0,
10572
10834
  ready: false,
10573
10835
  width: 0
10574
10836
  });
10575
- const setLayerRef = React28.useCallback(
10837
+ const setLayerRef = React30.useCallback(
10576
10838
  (node) => {
10577
10839
  layerRef.current = node;
10578
10840
  if (typeof forwardedRef === "function") forwardedRef(node);
@@ -10580,7 +10842,7 @@ var StickyStackLayer = React28.forwardRef(
10580
10842
  },
10581
10843
  [forwardedRef]
10582
10844
  );
10583
- const measure = React28.useCallback(() => {
10845
+ const measure = React30.useCallback(() => {
10584
10846
  const host = hostRef.current;
10585
10847
  const layer = layerRef.current;
10586
10848
  if (!host || !layer) return;
@@ -10597,7 +10859,7 @@ var StickyStackLayer = React28.forwardRef(
10597
10859
  );
10598
10860
  setLayerHeight(name, next.height);
10599
10861
  }, [name, setLayerHeight]);
10600
- React28.useLayoutEffect(() => {
10862
+ React30.useLayoutEffect(() => {
10601
10863
  measure();
10602
10864
  let frame = 0;
10603
10865
  const scheduleMeasure = () => {
@@ -10650,7 +10912,7 @@ var StickyStackLayer = React28.forwardRef(
10650
10912
  }
10651
10913
  );
10652
10914
  StickyStackLayer.displayName = "StickyStackLayer";
10653
- var StickyStackSticky = React28.forwardRef(
10915
+ var StickyStackSticky = React30.forwardRef(
10654
10916
  function StickyStackSticky2({ after, className, style, ...props }, ref) {
10655
10917
  const context = useStickyStack("StickyStackSticky");
10656
10918
  const top = stackOffset(context, after, true);
@@ -10671,7 +10933,7 @@ var StickyStackSticky = React28.forwardRef(
10671
10933
  }
10672
10934
  );
10673
10935
  StickyStackSticky.displayName = "StickyStackSticky";
10674
- var StickyStackSectionHeader = React28.forwardRef(function StickyStackSectionHeader2(props, ref) {
10936
+ var StickyStackSectionHeader = React30.forwardRef(function StickyStackSectionHeader2(props, ref) {
10675
10937
  return /* @__PURE__ */ jsx(StickyStackSticky, { ref, "data-sticky-stack-section-header": "", ...props });
10676
10938
  });
10677
10939
  StickyStackSectionHeader.displayName = "StickyStackSectionHeader";
@@ -10681,7 +10943,7 @@ function defineStatusMap(map) {
10681
10943
  if (map === void 0) return (entries) => entries;
10682
10944
  return map;
10683
10945
  }
10684
- var ConfirmHostContext = React28.createContext(null);
10946
+ var ConfirmHostContext = React30.createContext(null);
10685
10947
  var isServer = typeof window === "undefined";
10686
10948
  function missingHost(hook) {
10687
10949
  if (process.env.NODE_ENV === "production" || process.env.NODE_ENV === "test") return;
@@ -10692,8 +10954,8 @@ function missingHost(hook) {
10692
10954
  );
10693
10955
  }
10694
10956
  function useConfirm() {
10695
- const host = React28.useContext(ConfirmHostContext);
10696
- return React28.useMemo(() => {
10957
+ const host = React30.useContext(ConfirmHostContext);
10958
+ return React30.useMemo(() => {
10697
10959
  if (host) return host.confirm;
10698
10960
  return () => {
10699
10961
  missingHost("useConfirm");
@@ -10702,8 +10964,8 @@ function useConfirm() {
10702
10964
  }, [host]);
10703
10965
  }
10704
10966
  function usePrompt() {
10705
- const host = React28.useContext(ConfirmHostContext);
10706
- return React28.useMemo(() => {
10967
+ const host = React30.useContext(ConfirmHostContext);
10968
+ return React30.useMemo(() => {
10707
10969
  if (host) return host.prompt;
10708
10970
  return () => {
10709
10971
  missingHost("usePrompt");
@@ -10712,12 +10974,12 @@ function usePrompt() {
10712
10974
  }, [host]);
10713
10975
  }
10714
10976
  function ConfirmHost({ children }) {
10715
- const [queue, setQueue] = React28.useState([]);
10716
- const nextId = React28.useRef(0);
10717
- const enqueue = React28.useCallback((request) => {
10977
+ const [queue, setQueue] = React30.useState([]);
10978
+ const nextId = React30.useRef(0);
10979
+ const enqueue = React30.useCallback((request) => {
10718
10980
  setQueue((previous) => [...previous, request]);
10719
10981
  }, []);
10720
- const value = React28.useMemo(
10982
+ const value = React30.useMemo(
10721
10983
  () => ({
10722
10984
  confirm: (options) => {
10723
10985
  if (isServer) return Promise.resolve(false);
@@ -10735,7 +10997,7 @@ function ConfirmHost({ children }) {
10735
10997
  [enqueue]
10736
10998
  );
10737
10999
  const current = queue[0];
10738
- const settle = React28.useCallback(() => {
11000
+ const settle = React30.useCallback(() => {
10739
11001
  setQueue((previous) => previous.slice(1));
10740
11002
  }, []);
10741
11003
  return /* @__PURE__ */ jsxs(ConfirmHostContext, { value, children: [
@@ -10746,8 +11008,8 @@ function ConfirmHost({ children }) {
10746
11008
  }
10747
11009
  ConfirmHost.displayName = "ConfirmHost";
10748
11010
  function useSettleOnce(resolve) {
10749
- const done = React28.useRef(false);
10750
- return React28.useCallback(
11011
+ const done = React30.useRef(false);
11012
+ return React30.useCallback(
10751
11013
  (value) => {
10752
11014
  if (done.current) return;
10753
11015
  done.current = true;
@@ -10770,7 +11032,7 @@ function HostedConfirm({
10770
11032
  request,
10771
11033
  onSettled
10772
11034
  }) {
10773
- const [open, setOpen] = React28.useState(true);
11035
+ const [open, setOpen] = React30.useState(true);
10774
11036
  const settle = useSettleOnce(request.resolve);
10775
11037
  return /* @__PURE__ */ jsx(
10776
11038
  ConfirmDialog,
@@ -10795,8 +11057,8 @@ function HostedPrompt({
10795
11057
  onSettled
10796
11058
  }) {
10797
11059
  const { options } = request;
10798
- const [open, setOpen] = React28.useState(true);
10799
- const [value, setValue] = React28.useState(options.defaultValue ?? "");
11060
+ const [open, setOpen] = React30.useState(true);
11061
+ const [value, setValue] = React30.useState(options.defaultValue ?? "");
10800
11062
  const settle = useSettleOnce(request.resolve);
10801
11063
  const empty = value.trim() === "";
10802
11064
  const accessibleName = options.label === void 0 && typeof options.title === "string" ? options.title : void 0;
@@ -11298,7 +11560,7 @@ function PeoplePicker(props) {
11298
11560
  ...rest
11299
11561
  } = props;
11300
11562
  const messages = useDsMessages("peoplePicker");
11301
- const byId = React28.useMemo(
11563
+ const byId = React30.useMemo(
11302
11564
  () => new Map(people.map((person) => [person.id, person])),
11303
11565
  [people]
11304
11566
  );
@@ -11375,7 +11637,39 @@ function PeoplePicker(props) {
11375
11637
  }
11376
11638
  );
11377
11639
  }
11640
+ function readStorage(key) {
11641
+ if (!key || typeof window === "undefined") return null;
11642
+ try {
11643
+ const stored = window.localStorage.getItem(key);
11644
+ return stored === "comfortable" || stored === "compact" ? stored : null;
11645
+ } catch {
11646
+ return null;
11647
+ }
11648
+ }
11649
+ function writeStorage(key, next) {
11650
+ if (!key || typeof window === "undefined") return;
11651
+ try {
11652
+ window.localStorage.setItem(key, next);
11653
+ } catch {
11654
+ }
11655
+ }
11656
+ function useTableDensity(options) {
11657
+ const { storageKey, defaultDensity = "comfortable" } = options ?? {};
11658
+ const [density, setDensityState] = useState(defaultDensity);
11659
+ useEffect(() => {
11660
+ const stored = readStorage(storageKey);
11661
+ if (stored && stored !== defaultDensity) setDensityState(stored);
11662
+ }, []);
11663
+ const setDensity = useCallback(
11664
+ (next) => {
11665
+ setDensityState(next);
11666
+ writeStorage(storageKey, next);
11667
+ },
11668
+ [storageKey]
11669
+ );
11670
+ return { density, setDensity };
11671
+ }
11378
11672
 
11379
- export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityEventItem, ActivityItem, ActivityList, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppHeader, AppHeaderActions, AppHeaderBreadcrumb, AppHeaderSearch, AppHeaderTitle, AreaChart, AspectRatio, AttachmentChip, AvatarGroup, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BulkActionBar, BulkActionBarAction, BulkActionBarSeparator, COUNTRY_CODES, Calendar, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Code, CommandPalette, ConfirmActionButton, ConfirmDialog, ConfirmHost, Content6 as Content, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CountryFlag2 as CountryFlag, CountrySelect, DATE_DISPLAY_PLACEHOLDER, DEFAULT_PHONE_FIELD_MESSAGES, DangerAction, DataItem, DataTablePattern, DatePicker, DateRangePicker, DesignSystemProvider, DetailGrid, DetailMain, DetailSpine, DetailSpineHeader, DetailSpineSection, DetailSpineStats, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DismissibleChip, DisplayMenu, DonutChart, EmptyState, ErrorState, Eyebrow, Field, FieldControl, FieldDescription, FieldError, Fieldset, FieldsetLegend, FileTypeBadge, FilterChip, FolderTree, FormError, FormSection, FormSuccess, Heading, HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger, ICON_TILE_TONE_TO_INTENT, IconAction, IconTile, InfoHint, Inline, Kanban, KanbanCard, KanbanColumn, Kbd, KbdHint, KeyboardShortcutsDialog, KpiCard, Label2 as Label, LinkAction, LinkButton, LoadingRows, Main, MasterDetailLayout, MessageBubble, MessageBubbleAction, MessageBubbleTombstone, MessageComposer, MetadataGrid, MultiFilterPill, MultiSelect, MultiSelectField, MutedSpec, NotificationFilter, NotificationItem, NotificationList, NotificationPanel, NotificationPanelFooter, NotificationPanelHeader, NumberInput, Numeric, OTPInput, PageHeader, PageHeaderSep, PageHeaderSpec, PdfPreview, PeoplePicker, PhoneCountryInput, PhoneField, PhoneInput, PrimaryAction, PriorityIcon, QuestionnairePanel, RadioGroup2 as RadioGroup, RadioGroupItem, RankedBars, ResponsiveDialog, RouteTransition, ScrollArea, ScrollBar, SearchInput, SearchSelect, SecondaryAction, SectionCard, SegmentedControl, SelectableKpiCard, Separator2 as Separator, Shell, SideDrawer, Skeleton, SkeletonCircle, SkeletonText, Slider, SpreadsheetPreview, Stack, StackedBarChart, StarRating, StatusBadge, StatusIcon, Stepper, StickyActionBar, StickyStack, StickyStackLayer, StickyStackSectionHeader, StickyStackSticky, SubmitButton, SuiteProgress, Surface, TableEmpty, TableError, TableLoading, Text, ToastProvider, Toolbar, VisuallyHidden, YEAR_DISPLAY_PLACEHOLDER, alertVariants, applyMask, applyYearMask, attachmentChipVariants, cardVariants, dateToIso, defineStatusMap, displayToIso, fileTypeBadgeVariants, fileTypeFromName, filterChipVariants, getFlagEmoji, resolveIconTileVariants as iconTileVariants, isoToDate, isoToDisplay, isoToYear, labelVariants, parsePhoneForEditing, searchInputVariants, starRatingVariants, suiteProgressFillVariants, useConfirm, usePrompt, useToast, yearToIso };
11673
+ export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityEventItem, ActivityItem, ActivityList, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppHeader, AppHeaderActions, AppHeaderBreadcrumb, AppHeaderSearch, AppHeaderTitle, AppSidebar, AppSidebarNav, AreaChart, AspectRatio, AttachmentChip, AvatarGroup, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BulkActionBar, BulkActionBarAction, BulkActionBarSeparator, COUNTRY_CODES, Calendar, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Code, CommandPalette, ConfirmActionButton, ConfirmDialog, ConfirmHost, Content6 as Content, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CountryFlag2 as CountryFlag, CountrySelect, DATE_DISPLAY_PLACEHOLDER, DEFAULT_PHONE_FIELD_MESSAGES, DangerAction, DataItem, DataTablePattern, DatePicker, DateRangePicker, DesignSystemProvider, DetailGrid, DetailMain, DetailSpine, DetailSpineHeader, DetailSpineSection, DetailSpineStats, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DismissibleChip, DisplayMenu, DonutChart, EmptyState, ErrorState, Eyebrow, Field, FieldControl, FieldDescription, FieldError, Fieldset, FieldsetLegend, FileTypeBadge, FilterChip, FolderTree, FormError, FormSection, FormSuccess, Heading, HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger, ICON_TILE_TONE_TO_INTENT, IconAction, IconTile, InfoHint, Inline, Kanban, KanbanCard, KanbanColumn, Kbd, KbdHint, KeyboardShortcutsDialog, KpiCard, Label2 as Label, LinkAction, LinkButton, LoadingRows, Main, MasterDetailLayout, MessageBubble, MessageBubbleAction, MessageBubbleTombstone, MessageComposer, MetadataGrid, MultiFilterPill, MultiSelect, MultiSelectField, MutedSpec, NotificationFilter, NotificationItem, NotificationList, NotificationPanel, NotificationPanelFooter, NotificationPanelHeader, NumberInput, Numeric, OTPInput, PageHeader, PageHeaderSep, PageHeaderSpec, PdfPreview, PeoplePicker, PhoneCountryInput, PhoneField, PhoneInput, PrimaryAction, PriorityIcon, QuestionnairePanel, RadioGroup2 as RadioGroup, RadioGroupItem, RankedBars, ResponsiveDialog, RouteTransition, ScrollArea, ScrollBar, SearchInput, SearchSelect, SecondaryAction, SectionCard, SegmentedControl, SelectableKpiCard, Separator2 as Separator, Shell, SideDrawer, Slider, SpreadsheetPreview, Stack, StackedBarChart, StarRating, StatusBadge, StatusIcon, Stepper, StickyActionBar, StickyStack, StickyStackLayer, StickyStackSectionHeader, StickyStackSticky, SubmitButton, SuiteProgress, Surface, TableDensityToggle, TableEmpty, TableError, TableLoading, Text, ToastProvider, Toolbar, VisuallyHidden, YEAR_DISPLAY_PLACEHOLDER, alertVariants, applyMask, applyYearMask, attachmentChipVariants, cardVariants, dateToIso, defineStatusMap, displayToIso, fileTypeBadgeVariants, fileTypeFromName, filterChipVariants, getFlagEmoji, resolveIconTileVariants as iconTileVariants, isoToDate, isoToDisplay, isoToYear, labelVariants, parsePhoneForEditing, searchInputVariants, starRatingVariants, suiteProgressFillVariants, useConfirm, usePrompt, useTableDensity, useToast, yearToIso };
11380
11674
  //# sourceMappingURL=index.js.map
11381
11675
  //# sourceMappingURL=index.js.map