@exsto/ds 0.0.1-rc.17 → 0.0.1-rc.18

package/README.md

@@ -81,6 +81,8 @@ query, so a subtree can be dark inside a light page.
 |---|---|
 | `@exsto/ds` | React components |
 | `@exsto/ds/date-picker` | The DatePicker (one day, typed or picked), on its own entry so the main one stays inside its size budget |
+| `@exsto/ds/time-field` | The TimeField (a time of day typed in segments), on its own entry for the same reason |
+| `@exsto/ds/file-input` | The FileInput (files picked or dropped, listed and removable), on its own entry for the same reason |
 | `@exsto/ds/rich-text-editor` | The rich-text editor, on its own entry so its engine loads only where it is used |
 | `@exsto/ds/styles.css` | Precompiled tokens and component styles |
 | `@exsto/ds/theme.css` | Uncompiled tokens, brand layer, and the Tailwind `@theme` mapping |
@@ -152,10 +154,42 @@ const missing = state.kind === 'empty'; // 'refused' is already said by the pick
 
 Refused text is reported each time it changes, also when the field held no day before, and emptying the field afterwards reports `empty`. A parent's `aria-invalid` only draws the invalid border; the picker's own message is added to `aria-describedby` once, after the parent's. `DateRangePicker`, for a range, is in the main entry.
 
+## Time
+
+`TimeField` is a time of day typed in segments (hours, minutes, optional seconds, AM/PM where the locale uses it), with ArrowUp and ArrowDown to step a segment, ArrowLeft and ArrowRight to move between them, and the names a screen reader needs for each. It is on its own entry, like the DatePicker. The value is an `HH:mm` (or `HH:mm:ss`) string in 24-hour form, whatever the hour cycle on screen.
+
+```tsx
+import { TimeField } from '@exsto/ds/time-field';
+
+<TimeField aria-label="Start time" value={time} onValueChange={setTime} />;
+```
+
+## Files
+
+`FileInput` chooses files by picking or dropping them. A real `<input type="file">` lies under the drop area, so Tab, Enter and Space, the system's file dialog, a drop and a screen reader's name come from the browser; on top of that it lists the chosen files with their sizes and a remove button named after each, checks them against `accept`, `maxSize` and `maxFiles` (a drop skips the dialog's own filter), and says in one live region what was added, removed or refused. It is on its own entry, like the DatePicker.
+
+```tsx
+import { FileInput } from '@exsto/ds/file-input';
+
+<FileInput aria-label="Attachments" multiple accept=".pdf,image/*" maxSize={5 * 1024 * 1024} value={files} onValueChange={setFiles} onReject={(rejected) => report(rejected)} />;
+```
+
 ## Open popups and keyboard audits
 
 While a menu, dialog, sheet, popover, select or drawer is open, Base UI puts two empty `<span tabindex="0" data-base-ui-focus-guard>` around it. They are the sentinels that hand focus back into the popup when Tab runs past either end, so they are focusable on purpose, and they always were. From `0.0.1-rc.16` the design system also takes their `aria-hidden` off while the popup is open, because a focusable element that is hidden from assistive technology fails axe's `aria-hidden-focus` (WCAG 4.1.2). A check that walks the Tab order should skip `[data-base-ui-focus-guard]`, as it skips any other sentinel: they hold no text and name nothing.
 
+## Composing a popup of your own
+
+Select, Combobox, MultiSelect and the menus share one shape, and the pieces are exported so a popup an app builds itself matches them instead of copying their classes:
+
+```tsx
+import { cn, POPUP_FRAME_CLASS, POPUP_LIST_HEIGHT_CLASS, POPUP_LIST_WIDTH_CLASS, popupItemClass } from '@exsto/ds';
+```
+
+- `popupItemClass(flavor?, checkable?)` is one row: 32px tall, 8px of padding, the highlight and the chosen weight. `'base-ui'` (the default) is for Base UI parts, `'cmdk'` for cmdk's; `checkable` leaves room at the end for the check, which sits at `POPUP_ITEM_INDICATOR_CLASS`.
+- `POPUP_GROUP_LABEL_CLASS` is a group's heading. `ComboboxGroup`, `ComboboxLabel`, `ComboboxCollection` and `ComboboxSeparator` give a Combobox its groups, drawn the same way Select draws its own.
+- `POPUP_FRAME_CLASS` is the frame (a 10px radius and a 1px ring, no border). `POPUP_LIST_WIDTH_CLASS` is its width: at least the control and 8rem, as wide as the longest row, 28rem at most. `POPUP_LIST_HEIGHT_CLASS` caps the scrolling part: eight rows, or as many whole rows as the room allows, so a list never ends on half a row. Put it on a `ScrollArea` that holds the list's own `p-1`, inside a popup that is a flex column with `max-h-(--available-height)`.
+
 ## Status
 
 Release candidates (`0.0.1-rc.N`). The API is not stable yet; treat minor versions

package/dist/ds/src/file-input.d.ts

@@ -0,0 +1,9 @@
+/**
+ * `@exsto/ds/file-input` - the FileInput, on its own entry on purpose.
+ *
+ * A file field that is a real `<input type="file">` under a drop area, with the list of what was chosen, the checks against
+ * `accept`, `maxSize` and `maxFiles`, and a live region that says what was added, removed or refused: about 10 KB unminified.
+ * Re-exported from `@exsto/ds` it would be one more thing in the entry every consumer loads and a bundler cannot always tell
+ * it unused. Here an app pays for it only on the pages that import this path.
+ */
+export * from '../../ui/src/components/edyn/file-input';

package/dist/ds/src/time-field.d.ts

@@ -0,0 +1,9 @@
+/**
+ * `@exsto/ds/time-field` - the TimeField, on its own entry on purpose.
+ *
+ * A time of day typed in segments (hours, minutes, optional seconds, AM/PM where the locale uses it) with the arrow keys,
+ * Tab and the screen-reader names a native time input has: about 11 KB unminified. Re-exported from `@exsto/ds` it would be
+ * one more thing in the entry every consumer loads and a bundler cannot always tell it unused. Here an app pays for it only on
+ * the pages that import this path.
+ */
+export * from '../../ui/src/components/edyn/time-field';

package/dist/file-input.js

@@ -0,0 +1,2 @@
+import { DEFAULT_FILE_INPUT_LABELS, FileInput, formatBytes, matchesAccept, sortFiles } from "./ui/src/components/edyn/file-input/file-input.js";
+export { DEFAULT_FILE_INPUT_LABELS, FileInput, formatBytes, matchesAccept, sortFiles };

package/dist/index.js

@@ -13,7 +13,8 @@ import { AVATAR_TONES, InitialsAvatar, avatarTone, initialsOf } from "./ui/src/c
 import { useMergedRefs } from "./ui/src/hooks/use-merged-refs.js";
 import { ScrollArea, ScrollBar } from "./ui/src/components/ui/scroll-area/scroll-area.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/src/components/ui/tooltip/tooltip.js";
-import { DEFAULT_MULTI_SELECT_LABELS, MultiSelect, VIRTUALIZE_FROM, fullSelection, resolveChosen, summarize } from "./ui/src/components/edyn/multi-select/multi-select.js";
+import { POPUP_FRAME_CLASS, POPUP_GROUP_LABEL_CLASS, POPUP_ITEM_INDICATOR_CLASS, POPUP_LIST_HEIGHT_CLASS, POPUP_LIST_WIDTH_CLASS, popupItemClass } from "./ui/src/lib/popup-list.js";
+import { DEFAULT_MULTI_SELECT_LABELS, MultiSelect, SEARCH_FROM, VIRTUALIZE_FROM, fullSelection, resolveChosen, summarize } from "./ui/src/components/edyn/multi-select/multi-select.js";
 import { DEFAULT_PRESENCE_LABELS, PRESENCE_STATES, Presence } from "./ui/src/components/edyn/presence/presence.js";
 import { PROGRESS_LINE_COLOR, ProgressLine } from "./ui/src/components/edyn/progress-line/progress-line.js";
 import { RICH_TEXT_ATTRIBUTES, RICH_TEXT_ELEMENTS, RICH_TEXT_LINK_PROTOCOLS, isAllowedRichTextHref } from "./ui/src/components/edyn/rich-text-content/allow-list.js";
@@ -33,7 +34,7 @@ import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious
 import { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent } from "./ui/src/components/ui/chart/chart.js";
 import { Checkbox } from "./ui/src/components/ui/checkbox/checkbox.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/src/components/ui/collapsible/collapsible.js";
-import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem } from "./ui/src/components/ui/combobox/combobox.js";
+import { Combobox, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxSeparator } from "./ui/src/components/ui/combobox/combobox.js";
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./ui/src/components/ui/dialog/dialog.js";
 import { Input } from "./ui/src/components/ui/input/input.js";
 import { Textarea } from "./ui/src/components/ui/textarea/textarea.js";
@@ -74,4 +75,4 @@ import { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants } from "./ui
 import { Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, createToastManager, toast, useToastManager } from "./ui/src/components/ui/toast/toast.js";
 import { Toggle, toggleVariants } from "./ui/src/components/ui/toggle/toggle.js";
 import { ToggleGroup, ToggleGroupItem } from "./ui/src/components/ui/toggle-group/toggle-group.js";
-export { AVATAR_TONES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AnimatedNumber, AspectRatio, Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger, AudioPlayer, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Bubble, BubbleContent, BubbleGroup, BubbleReactions, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DEFAULT_MULTI_SELECT_LABELS, DEFAULT_PRESENCE_LABELS, DateRangePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldDescription, FieldError, FieldLabel, HoverCard, HoverCardContent, HoverCardTrigger, Indicator, InitialsAvatar, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, Marker, MarkerContent, MarkerIcon, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MultiSelect, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, NumberText, PRESENCE_STATES, PROGRESS_DURATION, PROGRESS_EASE, PROGRESS_LINE_COLOR, Pagination, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Presence, Progress, ProgressLine, Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireInput, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSkip, QuestionnaireSubmit, QuestionnaireTitle, RICH_TEXT_ATTRIBUTES, RICH_TEXT_BODY_CLASS, RICH_TEXT_ELEMENTS, RICH_TEXT_LINK_PROTOCOLS, RICH_TEXT_MENTION_CLASS, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, RichTextContent, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VIRTUALIZE_FROM, VideoPlayer, avatarTone, badgeVariants, buttonVariants, clampPage, cn, createToastManager, dateToDay, dayToDate, formatCount, formatMediaTime, fullSelection, getPaginationRange, indicatorVariants, initialsOf, isAllowedRichTextHref, markerVariants, navigationMenuTriggerStyle, progressFill, progressTrack, resolveChosen, richTextToNodes, spinnerVariants, summarize, tabsListVariants, toast, toggleVariants, useAnimatedValues, useCarousel, useDirection, useIsMobile, useMediaPlayer, useMergedRefs, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, useSidebar, useToastManager };
+export { AVATAR_TONES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AnimatedNumber, AspectRatio, Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger, AudioPlayer, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Bubble, BubbleContent, BubbleGroup, BubbleReactions, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxSeparator, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DEFAULT_MULTI_SELECT_LABELS, DEFAULT_PRESENCE_LABELS, DateRangePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DirectionProvider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldDescription, FieldError, FieldLabel, HoverCard, HoverCardContent, HoverCardTrigger, Indicator, InitialsAvatar, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, Kbd, KbdGroup, Label, Marker, MarkerContent, MarkerIcon, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MultiSelect, NativeSelect, NativeSelectOptGroup, NativeSelectOption, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, NumberText, POPUP_FRAME_CLASS, POPUP_GROUP_LABEL_CLASS, POPUP_ITEM_INDICATOR_CLASS, POPUP_LIST_HEIGHT_CLASS, POPUP_LIST_WIDTH_CLASS, PRESENCE_STATES, PROGRESS_DURATION, PROGRESS_EASE, PROGRESS_LINE_COLOR, Pagination, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Presence, Progress, ProgressLine, Questionnaire, QuestionnaireActions, QuestionnaireChoice, QuestionnaireChoiceDescription, QuestionnaireChoices, QuestionnaireDescription, QuestionnaireError, QuestionnaireInput, QuestionnaireItem, QuestionnaireNext, QuestionnairePrevious, QuestionnaireProgress, QuestionnaireSkip, QuestionnaireSubmit, QuestionnaireTitle, RICH_TEXT_ATTRIBUTES, RICH_TEXT_BODY_CLASS, RICH_TEXT_ELEMENTS, RICH_TEXT_LINK_PROTOCOLS, RICH_TEXT_MENTION_CLASS, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, RichTextContent, SEARCH_FROM, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastContent, ToastDescription, ToastPortal, ToastProvider, ToastTitle, ToastViewport, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VIRTUALIZE_FROM, VideoPlayer, avatarTone, badgeVariants, buttonVariants, clampPage, cn, createToastManager, dateToDay, dayToDate, formatCount, formatMediaTime, fullSelection, getPaginationRange, indicatorVariants, initialsOf, isAllowedRichTextHref, markerVariants, navigationMenuTriggerStyle, popupItemClass, progressFill, progressTrack, resolveChosen, richTextToNodes, spinnerVariants, summarize, tabsListVariants, toast, toggleVariants, useAnimatedValues, useCarousel, useDirection, useIsMobile, useMediaPlayer, useMergedRefs, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility, useSidebar, useToastManager };

package/dist/source-hash.txt

@@ -1 +1 @@
-188147f3f789366cf669116233eddeed7297dad660bbaa9749fc44c833dabdd3
+e7f64dd8a5e900b4cc6189554ed97571e1a11bc66a714ebfa14d32bfe3bae156

package/dist/styles.css

@@ -1128,6 +1128,10 @@
     max-height: calc(var(--spacing) * 88);
   }
 
+  .max-h-\[min\(16\.5rem\,round\(down\,var\(--available-height\,100dvh\)_-_0\.5rem\,2rem\)_\+_0\.5rem\)\] {
+    max-height: min(16.5rem, round(down, var(--available-height, 100dvh) - .5rem, 2rem) + .5rem);
+  }
+
   .max-h-inherit {
     max-height: inherit;
   }
@@ -1220,6 +1224,10 @@
     width: calc(var(--spacing) * 5);
   }
 
+  .w-7 {
+    width: calc(var(--spacing) * 7);
+  }
+
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
@@ -1280,10 +1288,6 @@
     max-width: calc(100% - 2rem);
   }
 
-  .max-w-\[max\(24rem\,var\(--anchor-width\)\)\] {
-    max-width: max(24rem, var(--anchor-width));
-  }
-
   .max-w-\[max\(var\(--anchor-width\)\,min\(28rem\,var\(--available-width\)\)\)\] {
     max-width: max(var(--anchor-width), min(28rem, var(--available-width)));
   }
@@ -1304,10 +1308,6 @@
     max-width: var(--container-xs);
   }
 
-  .min-w-\(--anchor-width\) {
-    min-width: var(--anchor-width);
-  }
-
   .min-w-\(--cell-size\) {
     min-width: var(--cell-size);
   }
@@ -1332,10 +1332,6 @@
     min-width: calc(var(--spacing) * 32);
   }
 
-  .min-w-36 {
-    min-width: calc(var(--spacing) * 36);
-  }
-
   .min-w-40 {
     min-width: calc(var(--spacing) * 40);
   }
@@ -1348,12 +1344,8 @@
     min-width: 14ch;
   }
 
-  .min-w-\[96px\] {
-    min-width: 96px;
-  }
-
-  .min-w-\[var\(--anchor-width\)\] {
-    min-width: var(--anchor-width);
+  .min-w-\[max\(8rem\,var\(--anchor-width\)\)\] {
+    min-width: max(8rem, var(--anchor-width));
   }
 
   .flex-1 {
@@ -1567,6 +1559,10 @@
     cursor: default;
   }
 
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
+
   .cursor-pointer {
     cursor: pointer;
   }
@@ -1799,6 +1795,10 @@
     overflow-x: hidden !important;
   }
 
+  .overflow-x-visible {
+    overflow-x: visible;
+  }
+
   .overflow-y-auto {
     overflow-y: auto;
   }
@@ -1984,6 +1984,10 @@
     }
   }
 
+  .border-destructive {
+    border-color: var(--destructive);
+  }
+
   .border-input {
     border-color: var(--input);
   }
@@ -2377,10 +2381,6 @@
     padding-bottom: calc(var(--spacing) * 4);
   }
 
-  .pl-1\.5 {
-    padding-left: calc(var(--spacing) * 1.5);
-  }
-
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
@@ -2633,10 +2633,18 @@
     text-decoration-line: underline;
   }
 
+  .underline-offset-3 {
+    text-underline-offset: 3px;
+  }
+
   .underline-offset-4 {
     text-underline-offset: 4px;
   }
 
+  .caret-transparent {
+    caret-color: #0000;
+  }
+
   .opacity-0 {
     opacity: 0;
   }
@@ -2721,6 +2729,16 @@
     --tw-ring-color: var(--card);
   }
 
+  .ring-destructive\/20 {
+    --tw-ring-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .ring-destructive\/20 {
+      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+    }
+  }
+
   .ring-foreground\/10 {
     --tw-ring-color: var(--foreground);
   }
@@ -3055,6 +3073,10 @@
     grid-column-start: 2;
   }
 
+  .group-data-highlighted\:text-foreground:is(:where(.group)[data-highlighted] *) {
+    color: var(--foreground);
+  }
+
   .group-data-indeterminate\/checkbox-indicator\:block:is(:where(.group\/checkbox-indicator)[data-indeterminate] *) {
     display: block;
   }
@@ -3561,6 +3583,14 @@
     background-color: var(--primary);
   }
 
+  .selection\:bg-transparent ::selection {
+    background-color: #0000;
+  }
+
+  .selection\:bg-transparent::selection {
+    background-color: #0000;
+  }
+
   .selection\:text-primary-foreground ::selection {
     color: var(--primary-foreground);
   }
@@ -3908,6 +3938,10 @@
     border-bottom-right-radius: var(--radius);
   }
 
+  .empty\:hidden:empty {
+    display: none;
+  }
+
   .empty\:p-0:empty {
     padding: 0;
   }
@@ -3961,6 +3995,16 @@
       }
     }
 
+    .hover\:bg-foreground\/4:hover {
+      background-color: var(--foreground);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-foreground\/4:hover {
+        background-color: color-mix(in oklab, var(--foreground) 4%, transparent);
+      }
+    }
+
     .hover\:bg-foreground\/6:hover {
       background-color: var(--foreground);
     }
@@ -4048,6 +4092,16 @@
     background-color: var(--accent);
   }
 
+  .focus\:bg-foreground\/10:focus {
+    background-color: var(--foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .focus\:bg-foreground\/10:focus {
+      background-color: color-mix(in oklab, var(--foreground) 10%, transparent);
+    }
+  }
+
   .focus\:bg-muted:focus {
     background-color: var(--muted);
   }
@@ -4477,6 +4531,25 @@
     padding: 0;
   }
 
+  .has-\[input\:focus-visible\]\:border-ring:has(:is(input:focus-visible)) {
+    border-color: var(--ring);
+  }
+
+  .has-\[input\:focus-visible\]\:ring-3:has(:is(input:focus-visible)) {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .has-\[input\:focus-visible\]\:ring-ring\/50:has(:is(input:focus-visible)) {
+    --tw-ring-color: var(--ring);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .has-\[input\:focus-visible\]\:ring-ring\/50:has(:is(input:focus-visible)) {
+      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
+    }
+  }
+
   .has-\[select\:disabled\]\:opacity-50:has(:is(select:disabled)) {
     opacity: .5;
   }
@@ -4715,6 +4788,20 @@
     opacity: 0;
   }
 
+  .data-dragging\:border-ring[data-dragging] {
+    border-color: var(--ring);
+  }
+
+  .data-dragging\:bg-foreground\/6[data-dragging] {
+    background-color: var(--foreground);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .data-dragging\:bg-foreground\/6[data-dragging] {
+      background-color: color-mix(in oklab, var(--foreground) 6%, transparent);
+    }
+  }
+
   .data-ending-style\:scale-90[data-ending-style] {
     --tw-scale-x: 90%;
     --tw-scale-y: 90%;
@@ -4743,6 +4830,10 @@
     opacity: 1;
   }
 
+  .data-has-overflow-x\:pb-\(--scroll-bar-reserve\)[data-has-overflow-x] {
+    padding-bottom: var(--scroll-bar-reserve);
+  }
+
   .data-highlighted\:bg-foreground\/6[data-highlighted] {
     background-color: var(--foreground);
   }
@@ -4813,10 +4904,6 @@
     border-color: var(--ring);
   }
 
-  .data-popup-open\:bg-accent[data-popup-open] {
-    background-color: var(--accent);
-  }
-
   .data-popup-open\:bg-foreground\/6[data-popup-open] {
     background-color: var(--foreground);
   }
@@ -4837,10 +4924,6 @@
     }
   }
 
-  .data-popup-open\:text-accent-foreground[data-popup-open] {
-    color: var(--accent-foreground);
-  }
-
   .data-popup-open\:ring-3[data-popup-open] {
     --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -5885,6 +5968,16 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .dark\:border-destructive\/50:is(.dark *) {
+    border-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:border-destructive\/50:is(.dark *) {
+      border-color: color-mix(in oklab, var(--destructive) 50%, transparent);
+    }
+  }
+
   .dark\:border-input:is(.dark *) {
     border-color: var(--input);
   }
@@ -5975,6 +6068,16 @@
     color: var(--color-red-300);
   }
 
+  .dark\:ring-destructive\/40:is(.dark *) {
+    --tw-ring-color: var(--destructive);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:ring-destructive\/40:is(.dark *) {
+      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+    }
+  }
+
   .dark\:group-data-checked\/questionnaire-choice\:bg-primary:is(.dark *):is(:is(:where(.group\/questionnaire-choice):where([data-state="checked"]), :where(.group\/questionnaire-choice):where([data-checked]:not([data-checked="false"]))) *) {
     background-color: var(--primary);
   }
@@ -6750,6 +6853,12 @@
     border-bottom-width: 1px;
   }
 
+  @media (hover: hover) {
+    .\[\&_tr\]\:hover\:bg-transparent tr:hover {
+      background-color: #0000;
+    }
+  }
+
   .\[\&_tr\:last-child\]\:border-0 tr:last-child {
     border-style: var(--tw-border-style);
     border-width: 0;
@@ -6991,14 +7100,6 @@
     color: currentColor;
   }
 
-  :is(.focus\:\*\:\[svg\]\:text-accent-foreground:focus > *):is(svg) {
-    color: var(--accent-foreground);
-  }
-
-  :is(.data-\[variant\=destructive\]\:\*\:\[svg\]\:text-destructive[data-variant="destructive"] > *):is(svg) {
-    color: var(--destructive);
-  }
-
   :is(.data-\[variant\=destructive\]\:\*\:\[svg\]\:text-destructive\![data-variant="destructive"] > *):is(svg) {
     color: var(--destructive) !important;
   }
@@ -7710,6 +7811,10 @@
   initial-value: 0;
 }
 
+[data-slot="scroll-area"] {
+  --scroll-bar-reserve: calc(var(--scroll-bar-size) + var(--scroll-bar-gap));
+}
+
 [data-slot="scroll-area-scrollbar"] {
   --scroll-bar-offset-top: calc(var(--scroll-bar-gap) + var(--scroll-bar-start));
   --scroll-bar-length: calc(100% - var(--scroll-bar-gap) * 2 - var(--scroll-bar-start));

package/dist/time-field.js

@@ -0,0 +1,2 @@
+import { DEFAULT_TIME_FIELD_LABELS, EMPTY_TIME, TimeField, editSegment, formatTime, localeHourCycle, parseTime, rangeOf, stepValue, typeDigit } from "./ui/src/components/edyn/time-field/time-field.js";
+export { DEFAULT_TIME_FIELD_LABELS, EMPTY_TIME, TimeField, editSegment, formatTime, localeHourCycle, parseTime, rangeOf, stepValue, typeDigit };

package/dist/ui/src/components/edyn/file-input/file-input.d.ts

@@ -0,0 +1,90 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export type TFileRejectReason = 'type' | 'size' | 'count';
+export interface IFileRejection {
+    file: File;
+    reason: TFileRejectReason;
+}
+/** The words a FileInput says and announces. Pass the ones to change. */
+export interface IFileInputLabels {
+    /** The prompt in the drop area when it takes one file, before the "browse" link. */
+    dropOne: string;
+    /** The same, when it takes several. */
+    dropMany: string;
+    browse: string;
+    /** The accessible name of the file chooser itself, when the caller gives it no name of its own. */
+    chooseOne: string;
+    chooseMany: string;
+    /** The accessible name of the list of chosen files. */
+    list: string;
+    remove: (name: string) => string;
+    /** Announced when files are added. */
+    added: (count: number) => string;
+    /** Announced when a file is taken out. */
+    removed: (name: string) => string;
+    /** Said, and shown, for a file that was refused. */
+    rejection: (name: string, reason: TFileRejectReason, limit: string) => string;
+}
+export declare const DEFAULT_FILE_INPUT_LABELS: IFileInputLabels;
+/** 1,536 bytes as "1.5 KB": the size a person reads next to a file's name. */
+export declare const formatBytes: (bytes: number) => string;
+/** Whether a file is one `accept` allows: an extension (`.pdf`), a type (`application/pdf`) or a family of types (`image/*`). No `accept` allows all. */
+export declare const matchesAccept: (file: {
+    name: string;
+    type: string;
+}, accept: string | undefined) => boolean;
+export interface ISortFilesInput {
+    incoming: readonly File[];
+    current: readonly File[];
+    multiple: boolean;
+    accept?: string;
+    maxSize?: number;
+    maxFiles?: number;
+}
+/**
+ * Which of the files just offered are taken, and which are refused and why. A file already chosen is skipped without a word. With one
+ * file allowed, the first acceptable one replaces what was chosen and the rest are refused as too many.
+ */
+export declare const sortFiles: ({ incoming, current, multiple, accept, maxSize, maxFiles, }: ISortFilesInput) => {
+    accepted: File[];
+    rejected: IFileRejection[];
+};
+export interface IFileInputProps extends Omit<ComponentPropsWithoutRef<'div'>, 'defaultValue' | 'onChange' | 'children' | 'id'> {
+    /** The chosen files. Leave it out and the field keeps them itself. */
+    value?: readonly File[];
+    defaultValue?: readonly File[];
+    onValueChange?: (files: File[]) => void;
+    /** What the picker offers, and what a drop is held to: extensions (`.pdf`), types (`application/pdf`) or families (`image/*`). */
+    accept?: string;
+    /** Several files, added to each other, instead of one that is replaced. */
+    multiple?: boolean;
+    /** The most a file may weigh, in bytes. */
+    maxSize?: number;
+    /** The most files that may be chosen. Several-file fields only. */
+    maxFiles?: number;
+    /** Called with the files that were refused, each with the reason. They are also listed under the field. */
+    onReject?: (rejections: IFileRejection[]) => void;
+    disabled?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+    /** Submits the chosen files with a form, under this name. */
+    name?: string;
+    /** For a `<Label htmlFor>` to name the field. */
+    id?: string;
+    /** What the field accepts, in words ("PDF or PNG, up to 5 MB"), read with the field. */
+    hint?: ReactNode;
+    labels?: Partial<IFileInputLabels>;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+/**
+ * Chooses files by picking them or by dropping them on the field, in the kit's look. It exists so an app does not fall back to
+ * `<input type="file">`, which cannot be styled and has no list of what was chosen.
+ *
+ * The control is a real file input laid over the whole drop area, so Tab, Enter and Space, the system's file dialog, a drop and a
+ * screen reader's name for it all come from the browser. What the browser lacks is added around it: the list of chosen files with a
+ * button to take each out, the checks against `accept`, `maxSize` and `maxFiles` (a drop skips the dialog's own filter), and a
+ * live region that says what was added, removed or refused.
+ *
+ * Name the field with `aria-label`, `aria-labelledby` or a `<Label htmlFor={id}>`; with none of those it is named "Choose files".
+ */
+export declare const FileInput: ({ value, defaultValue, onValueChange, accept, multiple, maxSize, maxFiles, onReject, disabled, invalid, required, name, id, hint, labels: labelOverrides, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }: IFileInputProps) => import('react').JSX.Element;