@sableui/react 0.11.0 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (87) hide show
  1. package/AGENTS.md +10 -4
  2. package/CHANGELOG.md +170 -0
  3. package/DESIGN.md +1 -1
  4. package/README.md +15 -1
  5. package/bin/sable.mjs +254 -10
  6. package/dist/components/app-header/app-header.meta.js +2 -1
  7. package/dist/components/button/button.js +3 -0
  8. package/dist/components/button/button.meta.js +1 -1
  9. package/dist/components/button/button.variants.js +1 -1
  10. package/dist/components/button-group/button-group.js +17 -0
  11. package/dist/components/button-group/button-group.meta.js +72 -0
  12. package/dist/components/button-group/index.js +7 -0
  13. package/dist/components/caret-menu/caret-menu.js +221 -0
  14. package/dist/components/caret-menu/caret-menu.meta.js +119 -0
  15. package/dist/components/caret-menu/index.js +8 -0
  16. package/dist/components/chat-composer/chat-composer.js +30 -7
  17. package/dist/components/chat-composer/chat-composer.meta.js +27 -8
  18. package/dist/components/combobox/combobox.meta.js +26 -0
  19. package/dist/components/input-group/index.js +7 -0
  20. package/dist/components/input-group/input-group.js +66 -0
  21. package/dist/components/input-group/input-group.meta.js +106 -0
  22. package/dist/components/menu/index.js +2 -0
  23. package/dist/components/menu/menu.js +51 -9
  24. package/dist/components/menu/menu.meta.js +11 -2
  25. package/dist/components/menubar/index.js +8 -0
  26. package/dist/components/menubar/menubar.js +42 -0
  27. package/dist/components/menubar/menubar.meta.js +99 -0
  28. package/dist/components/message-scroller/message-scroller.meta.js +4 -0
  29. package/dist/components/navigation-menu/index.js +19 -0
  30. package/dist/components/navigation-menu/navigation-menu.js +108 -0
  31. package/dist/components/navigation-menu/navigation-menu.meta.js +141 -0
  32. package/dist/components/overflow-menu/overflow-menu.meta.js +13 -1
  33. package/dist/components/pagination/pagination.js +11 -5
  34. package/dist/components/pagination/pagination.meta.js +21 -3
  35. package/dist/components/scroller/scroller.js +8 -4
  36. package/dist/components/scroller/scroller.meta.js +6 -0
  37. package/dist/components/sheet/sheet.js +82 -9
  38. package/dist/components/sheet/sheet.meta.js +41 -4
  39. package/dist/components/sheet/sheet.variants.js +8 -1
  40. package/dist/components/sidebar/sidebar.js +13 -2
  41. package/dist/components/sidebar/sidebar.meta.js +10 -0
  42. package/dist/components/streaming-text/streaming-text.meta.js +5 -1
  43. package/dist/file-hashes.json +47 -31
  44. package/dist/icon-sets/reicon.js +2 -0
  45. package/dist/index.d.ts +655 -162
  46. package/dist/index.js +12 -1
  47. package/dist/lib/taxonomy.js +5 -0
  48. package/dist/lib/use-caret-trigger.js +187 -0
  49. package/dist/lib/use-copy.js +6 -1
  50. package/dist/lib/use-smooth-wheel.js +164 -0
  51. package/dist/patterns/chat-panel.js +1 -1
  52. package/dist/patterns/chat-panel.meta.js +1 -0
  53. package/dist/styles.css +25 -0
  54. package/llms/components/app-header.md +1 -1
  55. package/llms/components/button-group.md +55 -0
  56. package/llms/components/button.md +1 -1
  57. package/llms/components/caret-menu.md +100 -0
  58. package/llms/components/chat-composer.md +24 -7
  59. package/llms/components/combobox.md +12 -0
  60. package/llms/components/input-group.md +78 -0
  61. package/llms/components/menu.md +16 -1
  62. package/llms/components/menubar.md +110 -0
  63. package/llms/components/message-scroller.md +1 -0
  64. package/llms/components/navigation-menu.md +113 -0
  65. package/llms/components/overflow-menu.md +26 -1
  66. package/llms/components/pagination.md +15 -3
  67. package/llms/components/scroller.md +1 -0
  68. package/llms/components/sheet.md +18 -3
  69. package/llms/components/sidebar.md +2 -0
  70. package/llms/components/streaming-text.md +2 -1
  71. package/llms/patterns/chat-panel.md +4 -1
  72. package/llms/tasks/building-a-chat.md +158 -0
  73. package/llms/tasks/building-with-sable.md +4 -1
  74. package/llms/tasks/converting-an-app.md +7 -0
  75. package/llms/tasks/extending-a-component.md +170 -0
  76. package/llms/tasks/getting-started.md +22 -4
  77. package/llms/tasks/migrating-from-shadcn.md +351 -0
  78. package/llms-full.txt +1321 -26
  79. package/llms.txt +13 -4
  80. package/package.json +3 -2
  81. package/registry.json +979 -23
  82. package/scripts/lint-rules.mjs +35 -0
  83. package/scripts/wiring.mjs +541 -0
  84. package/skills/entry/SKILL.md +3 -2
  85. package/skills/sable/SKILL.md +26 -5
  86. package/targets/ios.json +45 -0
  87. package/dist/lib/use-wheel-to-horizontal.js +0 -65
package/dist/index.d.ts CHANGED
@@ -9,11 +9,12 @@ export { AspectBox, AspectBoxProps, Bleed, BleedProps, Breakpoint, Center, Cente
9
9
  export { Icon, IconContextValue, IconProps, IconProvider, IconProviderProps, composeIconSets, useIconSet } from './icon/index.js';
10
10
  export { a as IconRenderProps, I as IconSet, b as IconVariant } from './registry-CyL28OzJ.js';
11
11
  import * as react from 'react';
12
- import { ReactNode, ComponentPropsWithoutRef, ElementType, ReactElement, Ref, ComponentPropsWithRef, MouseEvent, ComponentProps, FormEvent } from 'react';
12
+ import { ReactNode, ComponentPropsWithoutRef, ElementType, ReactElement, Ref, ComponentPropsWithRef, MouseEvent, ComponentProps, AriaAttributes, FormEvent } from 'react';
13
13
  import { VariantProps } from 'class-variance-authority';
14
14
  import { useRender } from '@base-ui/react/use-render';
15
15
  import * as class_variance_authority_types from 'class-variance-authority/types';
16
16
  import * as _base_ui_react from '@base-ui/react';
17
+ import { Menu as Menu$1 } from '@base-ui/react/menu';
17
18
  import { AlertDialog as AlertDialog$1 } from '@base-ui/react/alert-dialog';
18
19
  import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
19
20
  import { Separator as Separator$1 } from '@base-ui/react/separator';
@@ -33,7 +34,8 @@ import { Radio as Radio$1 } from '@base-ui/react/radio';
33
34
  import { RadioGroup as RadioGroup$1 } from '@base-ui/react/radio-group';
34
35
  import { Select as Select$1 } from '@base-ui/react/select';
35
36
  import { Popover as Popover$1 } from '@base-ui/react/popover';
36
- import { Menu as Menu$1 } from '@base-ui/react/menu';
37
+ import { NavigationMenu as NavigationMenu$1 } from '@base-ui/react/navigation-menu';
38
+ import { Menubar as Menubar$1 } from '@base-ui/react/menubar';
37
39
  import { Drawer } from '@base-ui/react/drawer';
38
40
  import { DayPickerProps } from 'react-day-picker';
39
41
  import { Toast } from '@base-ui/react/toast';
@@ -422,6 +424,36 @@ declare namespace Button {
422
424
 
423
425
  declare const buttonMeta: ComponentMeta;
424
426
 
427
+ type ButtonGroupProps = ComponentPropsWithRef<"div">;
428
+ /**
429
+ * Buttons joined into one control — a split button ("Copy page" beside the
430
+ * chevron that opens its menu), or a short run of related actions.
431
+ *
432
+ * <ButtonGroup aria-label="Page actions">
433
+ * <Button variant="outline" size="sm">Copy page</Button>
434
+ * <Menu>
435
+ * <MenuTrigger render={<Button variant="outline" size="icon-sm" aria-label="More actions" />}>
436
+ * <Icon name="chevron-down" />
437
+ * </MenuTrigger>
438
+ * …
439
+ * </Menu>
440
+ * </ButtonGroup>
441
+ *
442
+ * The children stay ordinary Buttons, each with its own variant and size; the
443
+ * group only joins them. It squares the inner corners through the per-side
444
+ * radius vars Button reads (`--button-radius-s` / `-e`), so the outer corners
445
+ * keep the theme's button shape. Bordered buttons overlap by their hairline so
446
+ * the seam is one line, not two; filled and ghost buttons get a hairline seam
447
+ * in their own ink, which reads on any fill. A focused child is raised so its
448
+ * ring is not clipped by its neighbour.
449
+ *
450
+ * Give every child the same height (`sm` with `icon-sm`, `md` with `icon`):
451
+ * the group aligns them but cannot reconcile two heights into one edge.
452
+ */
453
+ declare function ButtonGroup({ className, role, ...props }: ButtonGroupProps): react.JSX.Element;
454
+
455
+ declare const buttonGroupMeta: ComponentMeta;
456
+
425
457
  interface CardProps extends ComponentPropsWithRef<"div"> {
426
458
  /** "default" = raised surface (bg-card + edge + soft shadow). "flat" = transparent. */
427
459
  variant?: "default" | "flat";
@@ -536,6 +568,303 @@ declare function CardFooter({ actions, className, children, ...props }: CardFoot
536
568
 
537
569
  declare const cardMeta: ComponentMeta;
538
570
 
571
+ /** A character that opens suggestions at the caret: `@` for people, `/` for commands. */
572
+ interface CaretTrigger {
573
+ /** The character typed to open suggestions, e.g. `"@"`, `"/"`, `"#"`, `":"`. */
574
+ char: string;
575
+ /**
576
+ * Only at the start of the field (leading whitespace allowed), as a slash
577
+ * command is: `/sum` at the start opens, `and/or` mid-sentence does not.
578
+ * @default false
579
+ */
580
+ atStart?: boolean;
581
+ /**
582
+ * Let the query hold spaces, for multi-word names (`@Sam Riv`). Off, a
583
+ * space ends the query and closes suggestions, which is what a command
584
+ * wants. A newline always ends it.
585
+ * @default false
586
+ */
587
+ allowSpaces?: boolean;
588
+ /** Close once the query grows past this many characters. @default 32 */
589
+ maxQueryLength?: number;
590
+ }
591
+ /** The trigger the caret is inside, and what has been typed after it. */
592
+ interface CaretTriggerMatch {
593
+ /** The trigger that matched, as passed in. */
594
+ trigger: CaretTrigger;
595
+ /** The text typed after the trigger character, up to the caret. */
596
+ query: string;
597
+ /** Index of the trigger character in the field's value. */
598
+ start: number;
599
+ /** Index just past the query (the caret). `replace()` swaps `start…end`. */
600
+ end: number;
601
+ }
602
+ type CaretTriggerField = HTMLTextAreaElement | HTMLInputElement;
603
+ interface UseCaretTriggerOptions {
604
+ /** The characters that open suggestions. */
605
+ triggers: CaretTrigger[];
606
+ }
607
+ interface UseCaretTriggerResult {
608
+ /**
609
+ * Attach to the text field: `ref` on Textarea or Input, `fieldRef` on
610
+ * ChatComposer. To keep a ref of your own as well, merge the two.
611
+ */
612
+ fieldRef: (node: CaretTriggerField | null) => void;
613
+ /** The attached field, once mounted. CaretMenu listens to its keys. */
614
+ field: CaretTriggerField | null;
615
+ /** The open trigger and its query, or null when suggestions are closed. */
616
+ match: CaretTriggerMatch | null;
617
+ /**
618
+ * The caret's box at the trigger character, in viewport coordinates, for
619
+ * anchoring a popup. Measured on demand (it moves when the field scrolls).
620
+ */
621
+ getAnchorRect: () => DOMRect | null;
622
+ /**
623
+ * Swap the trigger and its query for `text`: `"@Sam Rivera "` for a
624
+ * mention, `""` to clear a slash command after running it. Goes through the
625
+ * field's own input path, so a controlled value updates and undo works.
626
+ */
627
+ replace: (text: string) => void;
628
+ /** Close suggestions for this trigger until the caret leaves it. Escape does this. */
629
+ dismiss: () => void;
630
+ }
631
+ /**
632
+ * Watch a plain text field for a trigger character at the caret — `@` for a
633
+ * mention, `/` for a command — and report what has been typed after it.
634
+ *
635
+ * Headless, and the value stays a string: a mention becomes text in the
636
+ * message (`@Sam Rivera`), not a token. That is what a textarea can hold, and
637
+ * it covers slash commands entirely and mentions as most chat apps send them.
638
+ * Chips inside the field need a rich-text editor, which Sable does not own
639
+ * (`sable docs extending-a-component`). Pair it with CaretMenu for the list.
640
+ *
641
+ * const trigger = useCaretTrigger({ triggers: [{ char: "@", allowSpaces: true }, { char: "/", atStart: true }] })
642
+ * <ChatComposer fieldRef={trigger.fieldRef} … />
643
+ * <CaretMenu trigger={trigger} label="Suggestions">…</CaretMenu>
644
+ *
645
+ * The rules a trigger follows, each one a bug in a naive version:
646
+ *
647
+ * - **Word boundary.** The character opens suggestions only at the start of
648
+ * the field or after whitespace or an opening bracket, so `ana@example.com`
649
+ * and `and/or` stay text.
650
+ * - **Caret, not value.** The match is read at the caret, so moving the caret
651
+ * out of `@sam` (arrow keys, a click elsewhere) closes it and moving back
652
+ * reopens it. A selection (not a bare caret) never matches.
653
+ * - **Composition.** While an IME is composing, the value is provisional; the
654
+ * match updates on `compositionend`, not on every candidate.
655
+ * - **Dismissal sticks.** Escape closes this trigger until the caret leaves it
656
+ * or its character is deleted. Re-reading the value must not reopen it on
657
+ * the next keystroke.
658
+ */
659
+ declare function useCaretTrigger({ triggers }: UseCaretTriggerOptions): UseCaretTriggerResult;
660
+
661
+ /**
662
+ * Menu — themed dropdown over Base UI's Menu (roving focus, typeahead, ARIA
663
+ * menu/menuitem wiring, collision-aware positioning, Esc/outside dismissal all
664
+ * come from Base UI). Compose:
665
+ *
666
+ * <Menu>
667
+ * <MenuTrigger render={<Button variant="secondary">Options</Button>} />
668
+ * <MenuContent>
669
+ * <MenuItem>Edit</MenuItem>
670
+ * <MenuItem>Duplicate</MenuItem>
671
+ * <MenuSeparator />
672
+ * <MenuGroup>
673
+ * <MenuGroupLabel>Danger</MenuGroupLabel>
674
+ * <MenuItem>Delete</MenuItem>
675
+ * </MenuGroup>
676
+ * </MenuContent>
677
+ * </Menu>
678
+ *
679
+ * State surfaces via Base UI data-attributes: data-[highlighted] (active item),
680
+ * data-[disabled], and data-[starting-style]/data-[ending-style] (open/close).
681
+ */
682
+ declare const Menu: <Payload>(props: Menu$1.Root.Props<Payload>) => react.JSX.Element;
683
+ declare const MenuTrigger: Menu$1.Trigger;
684
+ declare const MenuPortal: {
685
+ (props: Omit<_base_ui_react.ContextMenuPortalProps, "ref"> & react.RefAttributes<HTMLDivElement>): react.JSX.Element;
686
+ displayName: string;
687
+ };
688
+ type PositionerProps$6 = ComponentProps<typeof Menu$1.Positioner>;
689
+ type ContentProps$8 = Omit<ComponentProps<typeof Menu$1.Popup>, "className"> & {
690
+ className?: string;
691
+ /** Which side of the trigger to render against. @default "bottom" */
692
+ side?: PositionerProps$6["side"];
693
+ /** Alignment along the chosen side. @default "start" */
694
+ align?: PositionerProps$6["align"];
695
+ /** Gap between trigger and popup, in px. @default 6 */
696
+ sideOffset?: PositionerProps$6["sideOffset"];
697
+ };
698
+ /**
699
+ * The dropdown surface. Composes Portal + Positioner + Popup so callers pass a
700
+ * single element. Defaults to the `bottom` side, `start` aligned, 6px offset.
701
+ */
702
+ declare function MenuContent({ className, children, side, align, sideOffset, ...props }: ContentProps$8): react.JSX.Element;
703
+ type ItemContent = {
704
+ /** A leading icon. Beside a `description` it sits in a small tile spanning both lines. */
705
+ icon?: ReactNode;
706
+ /**
707
+ * A second, quieter line under the label: what the action does, where a
708
+ * label alone is ambiguous ("Copy page" → "Copy page as Markdown for LLMs").
709
+ */
710
+ description?: ReactNode;
711
+ };
712
+ type ItemProps$5 = Omit<ComponentProps<typeof Menu$1.Item>, "className"> & ItemContent & {
713
+ className?: string;
714
+ /**
715
+ * `destructive` for an action that deletes or cannot be undone. It keeps the
716
+ * destructive ink when highlighted — the default highlight repaints the row
717
+ * in accent ink, which hid the warning exactly when the row was targeted —
718
+ * and washes the highlight in the destructive tone instead.
719
+ * @default "default"
720
+ */
721
+ variant?: "default" | "destructive";
722
+ };
723
+ /** A single interactive row. Highlights via Base UI's data-[highlighted]. */
724
+ declare function MenuItem({ className, variant, icon, description, children, ...props }: ItemProps$5): react.JSX.Element;
725
+ type LinkItemProps = Omit<ComponentProps<typeof Menu$1.LinkItem>, "className"> & ItemContent & {
726
+ className?: string;
727
+ };
728
+ /**
729
+ * A row that navigates: a real `<a>`, so it opens in a new tab, middle-clicks
730
+ * and copies as a link, which a MenuItem with an onClick cannot. Pass `href`,
731
+ * and `target="_blank"` for a page outside the app; the row then marks itself
732
+ * as leaving with a trailing ↗.
733
+ */
734
+ declare function MenuLinkItem({ className, icon, description, children, target, ...props }: LinkItemProps): react.JSX.Element;
735
+ type SeparatorProps$3 = Omit<ComponentProps<typeof Menu$1.Separator>, "className"> & {
736
+ className?: string;
737
+ };
738
+ /** A hairline rule between item runs. Bleeds past the popup padding. */
739
+ declare function MenuSeparator({ className, ...props }: SeparatorProps$3): react.JSX.Element;
740
+ type GroupProps$3 = Omit<ComponentProps<typeof Menu$1.Group>, "className"> & {
741
+ className?: string;
742
+ };
743
+ /** Groups related items with a label for screen readers. */
744
+ declare function MenuGroup({ className, ...props }: GroupProps$3): react.JSX.Element;
745
+ type GroupLabelProps$3 = Omit<ComponentProps<typeof Menu$1.GroupLabel>, "className"> & {
746
+ className?: string;
747
+ };
748
+ /** The label for a MenuGroup. Auto-associated with the group it sits in. */
749
+ declare function MenuGroupLabel({ className, ...props }: GroupLabelProps$3): react.JSX.Element;
750
+ /**
751
+ * A nested menu. Wraps a `MenuSubmenuTrigger` and its own `MenuContent`:
752
+ *
753
+ * <MenuSubmenu>
754
+ * <MenuSubmenuTrigger>Effort</MenuSubmenuTrigger>
755
+ * <MenuContent side="inline-end" align="start">…</MenuContent>
756
+ * </MenuSubmenu>
757
+ *
758
+ * `side="inline-end"` rather than `"right"` so the submenu opens away from the
759
+ * parent in RTL as well as LTR — Base UI flips it at the collision boundary
760
+ * either way, but starting on the correct side avoids a flip on every open.
761
+ */
762
+ declare const MenuSubmenu: typeof Menu$1.SubmenuRoot;
763
+ type SubmenuTriggerProps = Omit<ComponentProps<typeof Menu$1.SubmenuTrigger>, "className"> & {
764
+ className?: string;
765
+ /** Trailing value shown before the chevron — the current choice, usually. */
766
+ value?: ComponentProps<"span">["children"];
767
+ };
768
+ /**
769
+ * The row that opens a submenu. Styled as a MenuItem plus a trailing chevron,
770
+ * and optionally the current `value` — which is what lets a settings menu read
771
+ * as `Effort High ›` rather than making the reader open each row to find out
772
+ * what is set.
773
+ */
774
+ declare function MenuSubmenuTrigger({ className, children, value, ...props }: SubmenuTriggerProps): react.JSX.Element;
775
+ /**
776
+ * A single-choice group inside a menu. Controlled via `value`/`onValueChange`,
777
+ * uncontrolled via `defaultValue`.
778
+ */
779
+ declare const MenuRadioGroup: react.NamedExoticComponent<Omit<_base_ui_react.ContextMenuRadioGroupProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
780
+ type RadioItemProps = Omit<ComponentProps<typeof Menu$1.RadioItem>, "className"> & {
781
+ className?: string;
782
+ };
783
+ /**
784
+ * One option in a MenuRadioGroup. The check sits in a reserved leading column
785
+ * rather than appearing and disappearing with the selection — otherwise every
786
+ * label shifts sideways as the reader moves the highlight, which is the exact
787
+ * thing a menu of options must not do.
788
+ */
789
+ declare function MenuRadioItem({ className, children, ...props }: RadioItemProps): react.JSX.Element;
790
+ type CheckboxItemProps = Omit<ComponentProps<typeof Menu$1.CheckboxItem>, "className"> & {
791
+ className?: string;
792
+ };
793
+ /**
794
+ * A toggling row. Same reserved leading column as MenuRadioItem, so a menu
795
+ * mixing the two keeps one text margin.
796
+ */
797
+ declare function MenuCheckboxItem({ className, children, ...props }: CheckboxItemProps): react.JSX.Element;
798
+
799
+ interface CaretMenuProps {
800
+ /** The result of `useCaretTrigger`, attached to the field the suggestions are for. */
801
+ trigger: UseCaretTriggerResult;
802
+ /** The list's accessible name, e.g. "People" or "Commands". */
803
+ label: string;
804
+ /**
805
+ * A row under the items for what the list is doing: "Searching…", "No one
806
+ * matches", "Couldn't load people". It is also announced, politely, in place
807
+ * of the suggestion count. With no items and no status the menu stays shut.
808
+ */
809
+ status?: ReactNode;
810
+ /** `CaretMenuItem`s, already filtered for `trigger.match.query`. */
811
+ children?: ReactNode;
812
+ /** Layout classes for the popup (a width, say). */
813
+ className?: string;
814
+ }
815
+ /**
816
+ * CaretMenu — suggestions at the caret of a text field, for mentions and slash
817
+ * commands. Pair it with `useCaretTrigger`, which watches the field; this draws
818
+ * the list beside the trigger and drives it from the field's keys.
819
+ *
820
+ * const trigger = useCaretTrigger({ triggers: [{ char: "@", allowSpaces: true }] })
821
+ * const q = trigger.match?.query.toLowerCase() ?? ""
822
+ * <Textarea ref={trigger.fieldRef} … />
823
+ * <CaretMenu trigger={trigger} label="People">
824
+ * {people.filter((p) => p.name.toLowerCase().includes(q)).map((p) => (
825
+ * <CaretMenuItem key={p.id} onSelect={() => trigger.replace(`@${p.name} `)}>{p.name}</CaretMenuItem>
826
+ * ))}
827
+ * </CaretMenu>
828
+ *
829
+ * **Focus never leaves the field.** That is the whole interaction: the person
830
+ * is typing, and a list that took focus would eat the next keystroke. So the
831
+ * field carries the list's semantics and the popup is only ever pointed at:
832
+ *
833
+ * - An `<input>` becomes the ARIA combobox it is (`role="combobox"`,
834
+ * `aria-expanded`). A `<textarea>` keeps its textbox role, because
835
+ * `combobox` would lose `aria-multiline` and screen readers would stop
836
+ * treating it as a place to write paragraphs. A textbox may not carry
837
+ * `aria-expanded`, so for both, opening is also announced through a polite
838
+ * status ("3 suggestions"), mounted from the start so it is heard.
839
+ * - Both get `aria-autocomplete="list"`, `aria-controls` (the listbox) and
840
+ * `aria-activedescendant` (the highlighted option), which is how a screen
841
+ * reader follows the arrow keys without focus moving.
842
+ * - ↑/↓ move the highlight, Enter or Tab pick it, Escape closes the list and
843
+ * stays out of the way of a Dialog's own Escape. Shift+Enter is left alone,
844
+ * so a line break is still a line break.
845
+ * - Rows keep focus where it is on pointer down, so clicking one does not blur
846
+ * the field (which would close the list before the click lands).
847
+ *
848
+ * Positioned by hand at the caret rather than through a Base UI positioner:
849
+ * every Base UI popup manages focus, and this one must never take it. It
850
+ * flips above the caret when there is more room there, caps its height to the
851
+ * room it has, and keeps clear of the viewport's edges.
852
+ */
853
+ declare function CaretMenu({ trigger, label, status, children, className }: CaretMenuProps): react.JSX.Element;
854
+ type CaretMenuItemProps = Omit<ComponentPropsWithRef<"div">, "onSelect"> & ItemContent & {
855
+ /** What choosing the row does: `trigger.replace("@Sam Rivera ")` for a mention, run the command and `trigger.replace("")` for a slash command. */
856
+ onSelect: () => void;
857
+ /** Shown but not choosable; skipped by the arrow keys. @default false */
858
+ disabled?: boolean;
859
+ };
860
+ /**
861
+ * One suggestion. Takes `icon` and `description` like MenuItem, and looks
862
+ * like one, so a mention list and a menu are the same rows.
863
+ */
864
+ declare function CaretMenuItem({ onSelect, disabled, icon, description, className, children, id, ...props }: CaretMenuItemProps): react.JSX.Element;
865
+
866
+ declare const caretMenuMeta: ComponentMeta;
867
+
539
868
  /**
540
869
  * A badge is two independent choices: how it is DRAWN (`appearance`) and what
541
870
  * it MEANS (`tone`). They used to be one flat list of eleven variants that mixed
@@ -725,7 +1054,7 @@ declare const AlertDialogFooter: typeof DialogFooter;
725
1054
 
726
1055
  declare const dialogMeta: ComponentMeta;
727
1056
 
728
- interface SeparatorProps$3 extends Omit<ComponentProps<typeof Separator$1>, "className"> {
1057
+ interface SeparatorProps$2 extends Omit<ComponentProps<typeof Separator$1>, "className"> {
729
1058
  /** Axis of the rule. Horizontal spans the inline width; vertical the block height. */
730
1059
  orientation?: "horizontal" | "vertical";
731
1060
  /**
@@ -741,7 +1070,7 @@ interface SeparatorProps$3 extends Omit<ComponentProps<typeof Separator$1>, "cla
741
1070
  * that stretches to its flex parent's height. Tinted with the `border` token.
742
1071
  * Pass `label` (horizontal only) for a centered caption between two rules.
743
1072
  */
744
- declare function Separator({ orientation, label, className, ...props }: SeparatorProps$3): react.JSX.Element;
1073
+ declare function Separator({ orientation, label, className, ...props }: SeparatorProps$2): react.JSX.Element;
745
1074
  declare namespace Separator {
746
1075
  var displayName: string;
747
1076
  }
@@ -804,6 +1133,48 @@ declare namespace Input {
804
1133
 
805
1134
  declare const inputMeta: ComponentMeta;
806
1135
 
1136
+ /** The control wiring a Field hands its child, forwarded to the input. */
1137
+ type ControlProps$1 = {
1138
+ id?: string;
1139
+ required?: boolean;
1140
+ disabled?: boolean;
1141
+ "aria-describedby"?: AriaAttributes["aria-describedby"];
1142
+ "aria-invalid"?: AriaAttributes["aria-invalid"];
1143
+ };
1144
+ interface InputGroupProps extends Omit<ComponentPropsWithRef<"div">, keyof ControlProps$1 | "children">, ControlProps$1 {
1145
+ /** Inside the field, before the text: a prefix ("https://", "$"), an icon, or a borderless Button. */
1146
+ leading?: ReactNode;
1147
+ /** Inside the field, after the text: a suffix (".com", "kg"), an icon, or a borderless Button (copy, reveal, clear). */
1148
+ trailing?: ReactNode;
1149
+ /** The single `<Input />` the addons sit around. */
1150
+ children: ReactElement;
1151
+ }
1152
+ /**
1153
+ * InputGroup — an Input with addons inside the same field: a prefix or suffix
1154
+ * ("https://", ".com", "$"), an icon, or a borderless Button such as copy or
1155
+ * reveal. One shell, one focus ring, one error state, so the addons read as
1156
+ * part of the field rather than things placed beside it (that is Field's
1157
+ * `trailing`: an Apply button next to a promo code).
1158
+ *
1159
+ * <Field label="Website">
1160
+ * <InputGroup leading="https://" trailing=".com"><Input placeholder="example" /></InputGroup>
1161
+ * </Field>
1162
+ *
1163
+ * The group wears the field shell and the Input inside gives up its own border,
1164
+ * fill and ring. A Field's wiring (id, aria-describedby, aria-invalid,
1165
+ * required, disabled) is forwarded to the Input, so the label still points at
1166
+ * the text box and the error still reaches it. A Button addon sits a hairline
1167
+ * step in from the edge on every side (the addon shrinks its padding when it
1168
+ * holds one), so the button reads as inside the field and its glyph lands near
1169
+ * the text's inset.
1170
+ */
1171
+ declare function InputGroup({ leading, trailing, children, className, id, required, disabled, "aria-describedby": describedBy, "aria-invalid": invalid, ...props }: InputGroupProps): react.JSX.Element;
1172
+ declare namespace InputGroup {
1173
+ var displayName: string;
1174
+ }
1175
+
1176
+ declare const inputGroupMeta: ComponentMeta;
1177
+
807
1178
  interface TextareaProps extends ComponentPropsWithRef<"textarea"> {
808
1179
  /**
809
1180
  * Grow to fit content as the user types, via CSS `field-sizing: content`
@@ -1060,7 +1431,7 @@ declare namespace Label {
1060
1431
 
1061
1432
  declare const labelMeta: ComponentMeta;
1062
1433
 
1063
- type RootProps$6 = Omit<ComponentProps<typeof Switch$1.Root>, "className"> & {
1434
+ type RootProps$7 = Omit<ComponentProps<typeof Switch$1.Root>, "className"> & {
1064
1435
  className?: string;
1065
1436
  };
1066
1437
  /**
@@ -1074,14 +1445,14 @@ type RootProps$6 = Omit<ComponentProps<typeof Switch$1.Root>, "className"> & {
1074
1445
  * Use it for immediate-effect toggles. For deferred/form-submit choices that
1075
1446
  * need a visible label and validation, reach for a checkbox instead.
1076
1447
  */
1077
- declare function Switch({ className, ...props }: RootProps$6): react.JSX.Element;
1448
+ declare function Switch({ className, ...props }: RootProps$7): react.JSX.Element;
1078
1449
  declare namespace Switch {
1079
1450
  var displayName: string;
1080
1451
  }
1081
1452
 
1082
1453
  declare const switchMeta: ComponentMeta;
1083
1454
 
1084
- type RootProps$5 = Omit<ComponentProps<typeof Checkbox$1.Root>, "className"> & {
1455
+ type RootProps$6 = Omit<ComponentProps<typeof Checkbox$1.Root>, "className"> & {
1085
1456
  className?: string;
1086
1457
  };
1087
1458
  /**
@@ -1098,7 +1469,7 @@ type RootProps$5 = Omit<ComponentProps<typeof Checkbox$1.Root>, "className"> & {
1098
1469
  * The box and its mark are shared with CheckboxCard (`CHECK_BOX` +
1099
1470
  * `CheckboxMark`), so the standalone control and the card's box cannot drift.
1100
1471
  */
1101
- declare function Checkbox({ className, children, ...props }: RootProps$5): react.JSX.Element;
1472
+ declare function Checkbox({ className, children, ...props }: RootProps$6): react.JSX.Element;
1102
1473
  declare namespace Checkbox {
1103
1474
  var displayName: string;
1104
1475
  }
@@ -1126,14 +1497,14 @@ declare const checkboxMeta: ComponentMeta;
1126
1497
  */
1127
1498
  declare const Tabs: react.ForwardRefExoticComponent<Omit<_base_ui_react.TabsRootProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
1128
1499
  type TabsVariant = "underline" | "pill";
1129
- type ListProps = Omit<ComponentProps<typeof Tabs$1.List>, "className"> & {
1500
+ type ListProps$1 = Omit<ComponentProps<typeof Tabs$1.List>, "className"> & {
1130
1501
  className?: string;
1131
1502
  /** `underline` (default) or `pill`. Triggers inside inherit it. */
1132
1503
  variant?: TabsVariant;
1133
1504
  };
1134
1505
  /** The tablist — a row of triggers, on a divider rule or as pills. */
1135
- declare function TabsList({ className, variant, ...props }: ListProps): react.JSX.Element;
1136
- type TriggerProps$3 = Omit<ComponentProps<typeof Tabs$1.Tab>, "className"> & {
1506
+ declare function TabsList({ className, variant, ...props }: ListProps$1): react.JSX.Element;
1507
+ type TriggerProps$4 = Omit<ComponentProps<typeof Tabs$1.Tab>, "className"> & {
1137
1508
  className?: string;
1138
1509
  };
1139
1510
  /**
@@ -1146,7 +1517,7 @@ type TriggerProps$3 = Omit<ComponentProps<typeof Tabs$1.Tab>, "className"> & {
1146
1517
  * A badge or icon beside the label is spaced like Button's (`--control-gap`):
1147
1518
  * the label is its own trimmed span, so a typed space after it collapses.
1148
1519
  */
1149
- declare function TabsTrigger({ className, children, ...props }: TriggerProps$3): react.JSX.Element;
1520
+ declare function TabsTrigger({ className, children, ...props }: TriggerProps$4): react.JSX.Element;
1150
1521
  type PanelProps$3 = Omit<ComponentProps<typeof Tabs$1.Panel>, "className"> & {
1151
1522
  className?: string;
1152
1523
  };
@@ -1175,15 +1546,15 @@ declare const TooltipPortal: {
1175
1546
  (props: Omit<_base_ui_react.TooltipPortalProps, "ref"> & react.RefAttributes<HTMLDivElement>): react.JSX.Element;
1176
1547
  displayName: string;
1177
1548
  };
1178
- type PositionerProps$6 = ComponentProps<typeof Tooltip$1.Positioner>;
1549
+ type PositionerProps$5 = ComponentProps<typeof Tooltip$1.Positioner>;
1179
1550
  type PopupProps = Omit<ComponentProps<typeof Tooltip$1.Popup>, "className"> & {
1180
1551
  className?: string;
1181
1552
  /** Which side of the trigger to render against. @default "top" */
1182
- side?: PositionerProps$6["side"];
1553
+ side?: PositionerProps$5["side"];
1183
1554
  /** Alignment along the chosen side. @default "center" */
1184
- align?: PositionerProps$6["align"];
1555
+ align?: PositionerProps$5["align"];
1185
1556
  /** Gap between trigger and popup, in px. @default 6 */
1186
- sideOffset?: PositionerProps$6["sideOffset"];
1557
+ sideOffset?: PositionerProps$5["sideOffset"];
1187
1558
  };
1188
1559
  /**
1189
1560
  * The tooltip surface. Composes Portal + Positioner + Popup so callers pass a
@@ -1267,13 +1638,13 @@ declare const avatarGroupVariants: (props?: ({
1267
1638
  *
1268
1639
  * <Avatar src={user.pfp} alt={user.name} fallback="AM" size="lg" />
1269
1640
  */
1270
- type RootProps$4 = Omit<ComponentProps<typeof Avatar$1.Root>, "className"> & VariantProps<typeof avatarVariants> & {
1641
+ type RootProps$5 = Omit<ComponentProps<typeof Avatar$1.Root>, "className"> & VariantProps<typeof avatarVariants> & {
1271
1642
  className?: string;
1272
1643
  };
1273
1644
  /** The row sizes. `xl`/`2xl` are portraits, which are never stacked. */
1274
1645
  type AvatarGroupSize = NonNullable<VariantProps<typeof avatarGroupVariants>["size"]>;
1275
1646
  /** The circular frame. Clips the image; holds the `size` axis. */
1276
- declare function AvatarRoot({ size, className, ...props }: RootProps$4): react.JSX.Element;
1647
+ declare function AvatarRoot({ size, className, ...props }: RootProps$5): react.JSX.Element;
1277
1648
  declare namespace AvatarRoot {
1278
1649
  var displayName: string;
1279
1650
  }
@@ -1293,7 +1664,7 @@ declare function AvatarFallback({ className, ...props }: FallbackProps): react.J
1293
1664
  declare namespace AvatarFallback {
1294
1665
  var displayName: string;
1295
1666
  }
1296
- interface AvatarProps extends RootProps$4 {
1667
+ interface AvatarProps extends RootProps$5 {
1297
1668
  /** Image source. When omitted (or it fails to load), the fallback shows. */
1298
1669
  src?: string;
1299
1670
  /** Alt text for the image. Falls back to an empty string for decorative use. */
@@ -1331,7 +1702,7 @@ declare function Avatar({ src, alt, fallback, fallbackDelay, size, status, varia
1331
1702
  declare namespace Avatar {
1332
1703
  var displayName: string;
1333
1704
  }
1334
- interface AvatarGroupCountProps extends Omit<RootProps$4, "children"> {
1705
+ interface AvatarGroupCountProps extends Omit<RootProps$5, "children"> {
1335
1706
  /** How many people are not shown. Renders as "+N". */
1336
1707
  count: number;
1337
1708
  /** What screen readers hear instead of "+N". Defaults to "and N more". */
@@ -1639,7 +2010,7 @@ type ProgressSize = "sm" | "md" | "lg";
1639
2010
  * Pass `value={null}` (or omit it) for an indeterminate bar — the fill spans the
1640
2011
  * full track and pulses while work is in flight.
1641
2012
  */
1642
- type RootProps$3 = Omit<ComponentProps<typeof Progress$1.Root>, "className" | "value"> & {
2013
+ type RootProps$4 = Omit<ComponentProps<typeof Progress$1.Root>, "className" | "value"> & {
1643
2014
  className?: string;
1644
2015
  /**
1645
2016
  * Current value, 0–100 by default (see `min`/`max`). Omit or pass `null`
@@ -1655,7 +2026,7 @@ type RootProps$3 = Omit<ComponentProps<typeof Progress$1.Root>, "className" | "v
1655
2026
  * children are supplied it renders a default Track + Indicator so the common
1656
2027
  * case is a single self-contained element.
1657
2028
  */
1658
- declare function Progress({ className, children, value, size, ...props }: RootProps$3): react.JSX.Element;
2029
+ declare function Progress({ className, children, value, size, ...props }: RootProps$4): react.JSX.Element;
1659
2030
  declare namespace Progress {
1660
2031
  var displayName: string;
1661
2032
  }
@@ -1716,7 +2087,7 @@ declare const progressMeta: ComponentMeta;
1716
2087
 
1717
2088
  type MeterTone = "primary" | "3" | "success" | "warning" | "destructive";
1718
2089
  type MeterSize = "sm" | "md" | "lg";
1719
- type RootProps$2 = Omit<ComponentProps<typeof Meter$1.Root>, "className"> & {
2090
+ type RootProps$3 = Omit<ComponentProps<typeof Meter$1.Root>, "className"> & {
1720
2091
  className?: string;
1721
2092
  /**
1722
2093
  * Fill colour, mapped to a semantic token. Choose it from your own
@@ -1760,7 +2131,7 @@ type RootProps$2 = Omit<ComponentProps<typeof Meter$1.Root>, "className"> & {
1760
2131
  *
1761
2132
  * `shape="ring"` draws the same measurement as a circular gauge (it was Gauge).
1762
2133
  */
1763
- declare function Meter({ className, children, tone, shape, size, strokeWidth, showValue, ...props }: RootProps$2): react.JSX.Element;
2134
+ declare function Meter({ className, children, tone, shape, size, strokeWidth, showValue, ...props }: RootProps$3): react.JSX.Element;
1764
2135
  declare namespace Meter {
1765
2136
  var displayName: string;
1766
2137
  }
@@ -2551,7 +2922,7 @@ declare const SelectGroup: react.ForwardRefExoticComponent<Omit<_base_ui_react.S
2551
2922
  * value outside the default trigger.
2552
2923
  */
2553
2924
  declare const SelectValue: react.ForwardRefExoticComponent<Omit<_base_ui_react.SelectValueProps, "ref"> & react.RefAttributes<HTMLSpanElement>>;
2554
- type TriggerProps$2 = Omit<ComponentProps<typeof Select$1.Trigger>, "className" | "children"> & {
2925
+ type TriggerProps$3 = Omit<ComponentProps<typeof Select$1.Trigger>, "className" | "children"> & {
2555
2926
  className?: string;
2556
2927
  /** Placeholder text shown when no value is selected. */
2557
2928
  placeholder?: ReactNode;
@@ -2583,16 +2954,16 @@ type TriggerProps$2 = Omit<ComponentProps<typeof Select$1.Trigger>, "className"
2583
2954
  * The trigger button. Composes Base UI's Trigger + Value (the selected label)
2584
2955
  * and a trailing chevron Icon slot that flips via `data-[popup-open]`.
2585
2956
  */
2586
- declare function SelectTrigger({ className, placeholder, size, children, ...props }: TriggerProps$2): react.JSX.Element;
2587
- type PositionerProps$5 = ComponentProps<typeof Select$1.Positioner>;
2957
+ declare function SelectTrigger({ className, placeholder, size, children, ...props }: TriggerProps$3): react.JSX.Element;
2958
+ type PositionerProps$4 = ComponentProps<typeof Select$1.Positioner>;
2588
2959
  type ContentProps$7 = Omit<ComponentProps<typeof Select$1.Popup>, "className"> & {
2589
2960
  className?: string;
2590
2961
  /** Which side of the trigger to render against. @default "bottom" */
2591
- side?: PositionerProps$5["side"];
2962
+ side?: PositionerProps$4["side"];
2592
2963
  /** Alignment along the chosen side. @default "start" */
2593
- align?: PositionerProps$5["align"];
2964
+ align?: PositionerProps$4["align"];
2594
2965
  /** Gap between trigger and popup, in px. @default 6 */
2595
- sideOffset?: PositionerProps$5["sideOffset"];
2966
+ sideOffset?: PositionerProps$4["sideOffset"];
2596
2967
  };
2597
2968
  /**
2598
2969
  * The popup surface. Composes Portal + Positioner + Popup + List so callers pass
@@ -2612,16 +2983,16 @@ type ItemProps$4 = Omit<ComponentProps<typeof Select$1.Item>, "className"> & {
2612
2983
  * instead of the display text.
2613
2984
  */
2614
2985
  declare function SelectItem({ className, children, label, ...props }: ItemProps$4): react.JSX.Element;
2615
- type GroupLabelProps$3 = Omit<ComponentProps<typeof Select$1.GroupLabel>, "className"> & {
2986
+ type GroupLabelProps$2 = Omit<ComponentProps<typeof Select$1.GroupLabel>, "className"> & {
2616
2987
  className?: string;
2617
2988
  };
2618
2989
  /** A heading for a SelectGroup. Auto-associated for screen readers by Base UI. */
2619
- declare function SelectGroupLabel({ className, ...props }: GroupLabelProps$3): react.JSX.Element;
2620
- type SeparatorProps$2 = Omit<ComponentProps<typeof Select$1.Separator>, "className"> & {
2990
+ declare function SelectGroupLabel({ className, ...props }: GroupLabelProps$2): react.JSX.Element;
2991
+ type SeparatorProps$1 = Omit<ComponentProps<typeof Select$1.Separator>, "className"> & {
2621
2992
  className?: string;
2622
2993
  };
2623
2994
  /** A thin divider between groups of items. Decorative (Base UI marks it aria-hidden). */
2624
- declare function SelectSeparator({ className, ...props }: SeparatorProps$2): react.JSX.Element;
2995
+ declare function SelectSeparator({ className, ...props }: SeparatorProps$1): react.JSX.Element;
2625
2996
 
2626
2997
  declare const selectMeta: ComponentMeta;
2627
2998
 
@@ -2647,21 +3018,21 @@ declare const PopoverPortal: {
2647
3018
  displayName: string;
2648
3019
  };
2649
3020
  declare const PopoverClose: react.ForwardRefExoticComponent<Omit<_base_ui_react.PopoverCloseProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
2650
- type PositionerProps$4 = ComponentProps<typeof Popover$1.Positioner>;
3021
+ type PositionerProps$3 = ComponentProps<typeof Popover$1.Positioner>;
2651
3022
  type ContentProps$6 = Omit<ComponentProps<typeof Popover$1.Popup>, "className"> & {
2652
3023
  className?: string;
2653
3024
  /** Which side of the trigger to render against. @default "bottom" */
2654
- side?: PositionerProps$4["side"];
3025
+ side?: PositionerProps$3["side"];
2655
3026
  /** Alignment along the chosen side. @default "center" */
2656
- align?: PositionerProps$4["align"];
3027
+ align?: PositionerProps$3["align"];
2657
3028
  /** Gap between trigger and popup, in px. @default 8 */
2658
- sideOffset?: PositionerProps$4["sideOffset"];
3029
+ sideOffset?: PositionerProps$3["sideOffset"];
2659
3030
  /**
2660
3031
  * Position against a different element/ref than the trigger (an element, a
2661
3032
  * ref, or a getter). Base UI has no separate Anchor part — pass it here to
2662
3033
  * decouple where the popover opens from what toggles it.
2663
3034
  */
2664
- anchor?: PositionerProps$4["anchor"];
3035
+ anchor?: PositionerProps$3["anchor"];
2665
3036
  };
2666
3037
  /**
2667
3038
  * The popover surface. Composes Portal + Positioner + Popup so callers pass a
@@ -2686,126 +3057,131 @@ declare function PopoverArrow({ className, ...props }: ArrowProps$1): react.JSX.
2686
3057
 
2687
3058
  declare const popoverMeta: ComponentMeta;
2688
3059
 
3060
+ declare const menuMeta: ComponentMeta;
3061
+
2689
3062
  /**
2690
- * Menu — themed dropdown over Base UI's Menu (roving focus, typeahead, ARIA
2691
- * menu/menuitem wiring, collision-aware positioning, Esc/outside dismissal all
2692
- * come from Base UI). Compose:
2693
- *
2694
- * <Menu>
2695
- * <MenuTrigger render={<Button variant="secondary">Options</Button>} />
2696
- * <MenuContent>
2697
- * <MenuItem>Edit</MenuItem>
2698
- * <MenuItem>Duplicate</MenuItem>
2699
- * <MenuSeparator />
2700
- * <MenuGroup>
2701
- * <MenuGroupLabel>Danger</MenuGroupLabel>
2702
- * <MenuItem>Delete</MenuItem>
2703
- * </MenuGroup>
2704
- * </MenuContent>
2705
- * </Menu>
2706
- *
2707
- * State surfaces via Base UI data-attributes: data-[highlighted] (active item),
2708
- * data-[disabled], and data-[starting-style]/data-[ending-style] (open/close).
2709
- */
2710
- declare const Menu: <Payload>(props: Menu$1.Root.Props<Payload>) => react.JSX.Element;
2711
- declare const MenuTrigger: Menu$1.Trigger;
2712
- declare const MenuPortal: {
2713
- (props: Omit<_base_ui_react.ContextMenuPortalProps, "ref"> & react.RefAttributes<HTMLDivElement>): react.JSX.Element;
2714
- displayName: string;
2715
- };
2716
- type PositionerProps$3 = ComponentProps<typeof Menu$1.Positioner>;
2717
- type ContentProps$5 = Omit<ComponentProps<typeof Menu$1.Popup>, "className"> & {
3063
+ * NavigationMenu — a site header's primary nav over Base UI's NavigationMenu
3064
+ * (hover/focus-to-open triggers, arrow-key roving across the bar, Esc and
3065
+ * outside dismissal, `aria-current` on the active link). Compose:
3066
+ *
3067
+ * <NavigationMenu>
3068
+ * <NavigationMenuList>
3069
+ * <NavigationMenuItem>
3070
+ * <NavigationMenuTrigger>Product</NavigationMenuTrigger>
3071
+ * <NavigationMenuContent className="grid w-[30rem] grid-cols-2">
3072
+ * <NavigationMenuLink href="/editor" description="Write and review together.">Editor</NavigationMenuLink>
3073
+ * <NavigationMenuLink href="/sync" description="Offline first, conflict free.">Sync</NavigationMenuLink>
3074
+ * </NavigationMenuContent>
3075
+ * </NavigationMenuItem>
3076
+ * <NavigationMenuItem>
3077
+ * <NavigationMenuLink href="/pricing">Pricing</NavigationMenuLink>
3078
+ * </NavigationMenuItem>
3079
+ * </NavigationMenuList>
3080
+ * </NavigationMenu>
3081
+ *
3082
+ * The root also renders the one floating panel every trigger shares (Portal +
3083
+ * Positioner + Popup + Viewport), so callers never assemble it. Moving between
3084
+ * triggers keeps that panel open: it glides to the new trigger, resizes to the
3085
+ * new content, and the content slides in from the side it was reached from.
3086
+ *
3087
+ * Links are router-agnostic: `render={<Link to="/pricing" />}` keeps Base UI's
3088
+ * roving focus and `active` (→ `aria-current="page"`) on your router's link.
3089
+ */
3090
+ type RootProps$2 = Omit<ComponentProps<typeof NavigationMenu$1.Root>, "className"> & {
2718
3091
  className?: string;
2719
- /** Which side of the trigger to render against. @default "bottom" */
2720
- side?: PositionerProps$3["side"];
2721
- /** Alignment along the chosen side. @default "start" */
2722
- align?: PositionerProps$3["align"];
2723
- /** Gap between trigger and popup, in px. @default 6 */
2724
- sideOffset?: PositionerProps$3["sideOffset"];
3092
+ /** Alignment of the panel along its trigger. @default "start" */
3093
+ align?: ComponentProps<typeof NavigationMenu$1.Positioner>["align"];
3094
+ /** Gap between the bar and the panel, in px. @default 8 */
3095
+ sideOffset?: ComponentProps<typeof NavigationMenu$1.Positioner>["sideOffset"];
2725
3096
  };
2726
- /**
2727
- * The dropdown surface. Composes Portal + Positioner + Popup so callers pass a
2728
- * single element. Defaults to the `bottom` side, `start` aligned, 6px offset.
2729
- */
2730
- declare function MenuContent({ className, children, side, align, sideOffset, ...props }: ContentProps$5): react.JSX.Element;
2731
- type ItemProps$3 = Omit<ComponentProps<typeof Menu$1.Item>, "className"> & {
3097
+ declare function NavigationMenu({ className, children, align, sideOffset, ...props }: RootProps$2): react.JSX.Element;
3098
+ type ListProps = Omit<ComponentProps<typeof NavigationMenu$1.List>, "className"> & {
2732
3099
  className?: string;
2733
- /**
2734
- * `destructive` for an action that deletes or cannot be undone. It keeps the
2735
- * destructive ink when highlighted — the default highlight repaints the row
2736
- * in accent ink, which hid the warning exactly when the row was targeted —
2737
- * and washes the highlight in the destructive tone instead.
2738
- * @default "default"
2739
- */
2740
- variant?: "default" | "destructive";
2741
3100
  };
2742
- /** A single interactive row. Highlights via Base UI's data-[highlighted]. */
2743
- declare function MenuItem({ className, variant, ...props }: ItemProps$3): react.JSX.Element;
2744
- type SeparatorProps$1 = Omit<ComponentProps<typeof Menu$1.Separator>, "className"> & {
3101
+ /** The bar: a `<ul>` of items. Arrow keys rove across it. */
3102
+ declare function NavigationMenuList({ className, ...props }: ListProps): react.JSX.Element;
3103
+ type ItemProps$3 = Omit<ComponentProps<typeof NavigationMenu$1.Item>, "className"> & {
2745
3104
  className?: string;
2746
3105
  };
2747
- /** A hairline rule between item runs. Bleeds past the popup padding. */
2748
- declare function MenuSeparator({ className, ...props }: SeparatorProps$1): react.JSX.Element;
2749
- type GroupProps$3 = Omit<ComponentProps<typeof Menu$1.Group>, "className"> & {
3106
+ /** One `<li>` in the bar: a NavigationMenuLink, or a Trigger with its Content. */
3107
+ declare function NavigationMenuItem({ className, ...props }: ItemProps$3): react.JSX.Element;
3108
+ type TriggerProps$2 = Omit<ComponentProps<typeof NavigationMenu$1.Trigger>, "className"> & {
2750
3109
  className?: string;
2751
3110
  };
2752
- /** Groups related items with a label for screen readers. */
2753
- declare function MenuGroup({ className, ...props }: GroupProps$3): react.JSX.Element;
2754
- type GroupLabelProps$2 = Omit<ComponentProps<typeof Menu$1.GroupLabel>, "className"> & {
3111
+ /** Opens its item's Content on hover, click or Enter. Carries its own chevron. */
3112
+ declare function NavigationMenuTrigger({ className, children, ...props }: TriggerProps$2): react.JSX.Element;
3113
+ type ContentProps$5 = Omit<ComponentProps<typeof NavigationMenu$1.Content>, "className"> & {
2755
3114
  className?: string;
2756
3115
  };
2757
- /** The label for a MenuGroup. Auto-associated with the group it sits in. */
2758
- declare function MenuGroupLabel({ className, ...props }: GroupLabelProps$2): react.JSX.Element;
2759
3116
  /**
2760
- * A nested menu. Wraps a `MenuSubmenuTrigger` and its own `MenuContent`:
2761
- *
2762
- * <MenuSubmenu>
2763
- * <MenuSubmenuTrigger>Effort</MenuSubmenuTrigger>
2764
- * <MenuContent side="inline-end" align="start">…</MenuContent>
2765
- * </MenuSubmenu>
2766
- *
2767
- * `side="inline-end"` rather than `"right"` so the submenu opens away from the
2768
- * parent in RTL as well as LTR — Base UI flips it at the collision boundary
2769
- * either way, but starting on the correct side avoids a flip on every open.
3117
+ * An item's panel content, rendered into the shared panel when its trigger
3118
+ * opens. Size it with layout classes (`w-[30rem] grid grid-cols-2`); the panel
3119
+ * follows. It slides in from the side it was reached from.
2770
3120
  */
2771
- declare const MenuSubmenu: typeof Menu$1.SubmenuRoot;
2772
- type SubmenuTriggerProps = Omit<ComponentProps<typeof Menu$1.SubmenuTrigger>, "className"> & {
3121
+ declare function NavigationMenuContent({ className, ...props }: ContentProps$5): react.JSX.Element;
3122
+ type LinkProps = Omit<ComponentProps<typeof NavigationMenu$1.Link>, "className"> & {
2773
3123
  className?: string;
2774
- /** Trailing value shown before the chevron — the current choice, usually. */
2775
- value?: ComponentProps<"span">["children"];
3124
+ /**
3125
+ * A second line under the title, in a panel: what is behind the link
3126
+ * ("Write and review together"). Ignored in the bar, where a link is one word.
3127
+ */
3128
+ description?: ReactNode;
2776
3129
  };
2777
3130
  /**
2778
- * The row that opens a submenu. Styled as a MenuItem plus a trailing chevron,
2779
- * and optionally the current `value` — which is what lets a settings menu read
2780
- * as `Effort High ›` rather than making the reader open each row to find out
2781
- * what is set.
3131
+ * A link: a bar entry when it sits in a NavigationMenuItem, a two-line row
3132
+ * when it sits in a NavigationMenuContent. `active` marks the current page
3133
+ * (`aria-current="page"`); `render={<Link to="…" />}` uses your router.
2782
3134
  */
2783
- declare function MenuSubmenuTrigger({ className, children, value, ...props }: SubmenuTriggerProps): react.JSX.Element;
3135
+ declare function NavigationMenuLink({ className, description, children, ...props }: LinkProps): react.JSX.Element;
3136
+
3137
+ declare const navigationMenuMeta: ComponentMeta;
3138
+
2784
3139
  /**
2785
- * A single-choice group inside a menu. Controlled via `value`/`onValueChange`,
2786
- * uncontrolled via `defaultValue`.
3140
+ * Menubar — an application's row of menus (File, Edit, View), over Base UI's
3141
+ * Menubar. Each menu is an ordinary Sable `Menu`; the bar only joins them:
3142
+ *
3143
+ * <Menubar aria-label="Editor">
3144
+ * <Menu>
3145
+ * <MenubarTrigger>File</MenubarTrigger>
3146
+ * <MenuContent>
3147
+ * <MenuItem>New</MenuItem>
3148
+ * </MenuContent>
3149
+ * </Menu>
3150
+ * <Menu>
3151
+ * <MenubarTrigger>Edit</MenubarTrigger>
3152
+ * <MenuContent>…</MenuContent>
3153
+ * </Menu>
3154
+ * </Menubar>
3155
+ *
3156
+ * Base UI owns the joining: `role="menubar"`, one tab stop for the whole bar,
3157
+ * ←/→ between the titles, ↓ into the open menu, and — once one menu is open —
3158
+ * moving the pointer across the bar opens its neighbours without another click.
3159
+ * Every row, group, submenu and checkbox inside is the Menu part you already
3160
+ * know; there is no Menubar-specific item.
2787
3161
  */
2788
- declare const MenuRadioGroup: react.NamedExoticComponent<Omit<_base_ui_react.ContextMenuRadioGroupProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
2789
- type RadioItemProps = Omit<ComponentProps<typeof Menu$1.RadioItem>, "className"> & {
3162
+ type MenubarProps = Omit<ComponentProps<typeof Menubar$1>, "className"> & {
2790
3163
  className?: string;
2791
3164
  };
2792
- /**
2793
- * One option in a MenuRadioGroup. The check sits in a reserved leading column
2794
- * rather than appearing and disappearing with the selection — otherwise every
2795
- * label shifts sideways as the reader moves the highlight, which is the exact
2796
- * thing a menu of options must not do.
2797
- */
2798
- declare function MenuRadioItem({ className, children, ...props }: RadioItemProps): react.JSX.Element;
2799
- type CheckboxItemProps = Omit<ComponentProps<typeof Menu$1.CheckboxItem>, "className"> & {
3165
+ declare function Menubar({ className, ...props }: MenubarProps): react.JSX.Element;
3166
+ declare namespace Menubar {
3167
+ var displayName: string;
3168
+ }
3169
+ type MenubarTriggerProps = Omit<ComponentProps<typeof MenuTrigger>, "className"> & {
2800
3170
  className?: string;
2801
3171
  };
2802
3172
  /**
2803
- * A toggling row. Same reserved leading column as MenuRadioItem, so a menu
2804
- * mixing the two keeps one text margin.
3173
+ * A menu's title in the bar. Styled as a small ghost Button (the same classes,
3174
+ * so it follows the density ladder and the theme's button shape), set in the
3175
+ * control tier a menu row uses rather than a button's louder label, and held in
3176
+ * the accent wash while its menu is open so the reader can see which title the
3177
+ * popup belongs to.
2805
3178
  */
2806
- declare function MenuCheckboxItem({ className, children, ...props }: CheckboxItemProps): react.JSX.Element;
3179
+ declare function MenubarTrigger({ className, children, ...props }: MenubarTriggerProps): react.JSX.Element;
3180
+ declare namespace MenubarTrigger {
3181
+ var displayName: string;
3182
+ }
2807
3183
 
2808
- declare const menuMeta: ComponentMeta;
3184
+ declare const menubarMeta: ComponentMeta;
2809
3185
 
2810
3186
  /**
2811
3187
  * Edge-anchored sheet surface. The shared base pins the popup to a viewport
@@ -2831,18 +3207,35 @@ declare const menuMeta: ComponentMeta;
2831
3207
  * off-screen from where the finger left it. A swipe dismissal scales the exit
2832
3208
  * duration by --drawer-swipe-strength (a fast flick leaves faster), still in
2833
3209
  * units of the motion token, so reduced motion keeps it instant.
3210
+ *
3211
+ * Snap points (bottom only): Base UI writes the active stop as
3212
+ * --drawer-snap-point-offset, the distance the full panel sits below its
3213
+ * resting place, and the bottom side adds it to the swipe travel in the same
3214
+ * transform. A release glides to the next stop on the same transform
3215
+ * transition as the enter/exit, so reduced motion snaps there instantly.
3216
+ *
3217
+ * The on-screen keyboard: --sheet-keyboard-inset (SheetContent, from
3218
+ * visualViewport) lifts a bottom sheet off the keyboard and takes the keyboard
3219
+ * out of its height budget, where `dvh` alone does not.
2834
3220
  */
2835
3221
  declare const sheetVariants: (props?: ({
2836
3222
  side?: "bottom" | "left" | "right" | "top" | null | undefined;
2837
3223
  } & class_variance_authority_types.ClassProp) | undefined) => string;
2838
3224
 
3225
+ /** A snap point: a fraction of the viewport (0–1), pixels (> 1), or a `px` / `rem` string. */
3226
+ type SheetSnapPoint = number | string;
2839
3227
  /**
2840
- * Root props. Everything Base UI Drawer.Root takes except the swipe direction
2841
- * (derived from SheetContent's `side`) and snap points (a bottom-sheet feature
2842
- * Sheet's styling does not implement).
3228
+ * Root props: everything Base UI Drawer.Root takes except the swipe direction,
3229
+ * which comes from SheetContent's `side`.
3230
+ *
3231
+ * Snap points are a bottom sheet's: stops the panel rests at between closed
3232
+ * and fully open, dragged between by its handle or any touch swipe. They take
3233
+ * effect only with `side="bottom"`; a side or top sheet ignores them and a
3234
+ * development build says so, rather than half-applying a bottom-sheet gesture
3235
+ * to a panel that slides sideways.
2843
3236
  */
2844
- type SheetProps<Payload = unknown> = Omit<Drawer.Root.Props<Payload>, "swipeDirection" | "snapPoints" | "snapPoint" | "defaultSnapPoint" | "onSnapPointChange" | "snapToSequentialPoints">;
2845
- declare function Sheet<Payload = unknown>(props: SheetProps<Payload>): react.JSX.Element;
3237
+ type SheetProps<Payload = unknown> = Omit<Drawer.Root.Props<Payload>, "swipeDirection">;
3238
+ declare function Sheet<Payload = unknown>({ snapPoints, snapPoint, defaultSnapPoint, onSnapPointChange, snapToSequentialPoints, ...props }: SheetProps<Payload>): react.JSX.Element;
2846
3239
  declare const SheetTrigger: Drawer.Trigger;
2847
3240
  declare const SheetClose: Drawer.Close;
2848
3241
  declare const SheetPortal: {
@@ -2852,15 +3245,7 @@ declare const SheetPortal: {
2852
3245
  type ContentProps$4 = Omit<ComponentProps<typeof Drawer.Popup>, "className"> & VariantProps<typeof sheetVariants> & {
2853
3246
  className?: string;
2854
3247
  };
2855
- /**
2856
- * Backdrop + edge-anchored popup surface. Renders through a portal. Pick the
2857
- * entry edge with `side` ("right" | "left" | "top" | "bottom", default "right").
2858
- *
2859
- * The children sit in Base UI's Drawer.Content (as `display: contents`, so they
2860
- * stay flex items of the popup column): a mouse drag that starts on content
2861
- * selects text instead of dragging the sheet. Touch swipes work anywhere.
2862
- */
2863
- declare function SheetContent({ className, children, side, initialFocus, ref, ...props }: ContentProps$4): react.JSX.Element;
3248
+ declare function SheetContent({ className, children, side, initialFocus, ref, style, ...props }: ContentProps$4): react.JSX.Element;
2864
3249
  type TitleProps$1 = Omit<ComponentProps<typeof Drawer.Title>, "className"> & {
2865
3250
  className?: string;
2866
3251
  };
@@ -4070,8 +4455,19 @@ interface PaginationProps extends Omit<ComponentPropsWithRef<"nav">, "onChange">
4070
4455
  page: number;
4071
4456
  /** Total number of pages. */
4072
4457
  total: number;
4073
- /** Called with the next page when a control is activated. */
4074
- onPageChange: (page: number) => void;
4458
+ /**
4459
+ * Called with the next page when a control is activated. Optional when
4460
+ * `pageLink` is set and the URL is the page state.
4461
+ */
4462
+ onPageChange?: (page: number) => void;
4463
+ /**
4464
+ * Make every page control a real link: return the element to render for a
4465
+ * page, `(page) => <a href={`?page=${page}`} />` or a router's
4466
+ * `(page) => <Link to={`?page=${page}`} />`. Links are crawlable and open
4467
+ * in a new tab; without this the controls are buttons for client-only paging.
4468
+ * Previous/next at the bounds stay disabled buttons, never a link to nowhere.
4469
+ */
4470
+ pageLink?: (page: number) => ReactElement;
4075
4471
  /**
4076
4472
  * How many page buttons to show on each side of the current page before the
4077
4473
  * list collapses into ellipses. First and last pages are always shown.
@@ -4092,7 +4488,7 @@ interface PaginationProps extends Omit<ComponentPropsWithRef<"nav">, "onChange">
4092
4488
  * const [page, setPage] = useState(1)
4093
4489
  * <Pagination page={page} total={10} onPageChange={setPage} />
4094
4490
  */
4095
- declare function Pagination({ page, total, onPageChange, siblingCount, label, className, ref, ...props }: PaginationProps): react.JSX.Element;
4491
+ declare function Pagination({ page, total, onPageChange, pageLink, siblingCount, label, className, ref, ...props }: PaginationProps): react.JSX.Element;
4096
4492
  declare namespace Pagination {
4097
4493
  var displayName: string;
4098
4494
  }
@@ -5179,8 +5575,19 @@ interface SidebarProps extends ComponentPropsWithRef<"aside"> {
5179
5575
  * @default "app"
5180
5576
  */
5181
5577
  variant?: "app" | "inline";
5578
+ /**
5579
+ * Which surface the rail is painted on.
5580
+ * - `rail` (default) — its own `--sidebar-*` surface, with a border. Right
5581
+ * for a full-height rail that frames the app on its own; a theme can tint
5582
+ * it, or paint it dark on a light page.
5583
+ * - `page` — the page's own surface and ink, no border. Use it when a
5584
+ * full-width header sits above the rail: a tinted column that starts
5585
+ * under a page-coloured bar reads as pasted on, not as chrome.
5586
+ * @default "rail"
5587
+ */
5588
+ surface?: "rail" | "page";
5182
5589
  }
5183
- declare function Sidebar({ collapsed, icons, variant, className, children, ...props }: SidebarProps): react.JSX.Element;
5590
+ declare function Sidebar({ collapsed, icons, variant, surface, className, children, ...props }: SidebarProps): react.JSX.Element;
5184
5591
  declare namespace Sidebar {
5185
5592
  var displayName: string;
5186
5593
  }
@@ -6972,6 +7379,15 @@ interface ScrollerProps extends ComponentPropsWithRef<"div"> {
6972
7379
  * @default true
6973
7380
  */
6974
7381
  wheelScroll?: boolean;
7382
+ /**
7383
+ * Ease mouse-wheel steps toward their target, the inertia a smooth-scroll
7384
+ * library adds, on either axis. Only a mouse wheel: trackpads and touch keep
7385
+ * their own momentum, keys and scrollbar drags stay native, and reduced
7386
+ * motion (the OS preference or MotionProvider) turns it off. Anything else
7387
+ * that moves the region, such as `scrollIntoView`, stops the easing.
7388
+ * @default true
7389
+ */
7390
+ smoothWheel?: boolean;
6975
7391
  /**
6976
7392
  * Accessible name for the scroll region. A scrollable region that takes
6977
7393
  * focus should say what it contains — without one, a screen reader announces
@@ -7037,7 +7453,7 @@ interface ScrollerProps extends ComponentPropsWithRef<"div"> {
7037
7453
  * <div className="flex gap-3">…wide content…</div>
7038
7454
  * </Scroller>
7039
7455
  */
7040
- declare function Scroller({ orientation, wheelScroll, label, className, viewportClassName, children, ref, style, onScroll, onKeyDown, ...props }: ScrollerProps): react.JSX.Element;
7456
+ declare function Scroller({ orientation, wheelScroll, smoothWheel, label, className, viewportClassName, children, ref, style, onScroll, onKeyDown, ...props }: ScrollerProps): react.JSX.Element;
7041
7457
  declare namespace Scroller {
7042
7458
  var displayName: string;
7043
7459
  }
@@ -7695,15 +8111,26 @@ interface ChatComposerProps extends Omit<ComponentPropsWithRef<"form">, "onSubmi
7695
8111
  /**
7696
8112
  * Called with the trimmed message when the reader sends. An uncontrolled
7697
8113
  * composer clears itself afterwards; a controlled one is the caller's to
7698
- * clear, since only they know whether the send succeeded.
8114
+ * clear, since only they know whether the send succeeded. With `allowEmpty`
8115
+ * the message can be `""`.
7699
8116
  */
7700
8117
  onSend?: (value: string) => void;
8118
+ /**
8119
+ * Let the reader send with no text, because the app has something else to
8120
+ * send — pending attachments, a picked file. Pass it only while that is true
8121
+ * (`allowEmpty={files.length > 0}`), or send is enabled with nothing to send.
8122
+ * `onSend` then receives `""`.
8123
+ * @default false
8124
+ */
8125
+ allowEmpty?: boolean;
7701
8126
  /** Placeholder for the field. @default "Send a message…" */
7702
8127
  placeholder?: string;
7703
8128
  /**
7704
8129
  * Which key sends. `enter` for chat: Enter sends, Shift+Enter breaks the line.
7705
8130
  * `mod-enter` for long-form replies (an email, a support answer): Enter breaks
7706
8131
  * the line and ⌘/Ctrl+Enter sends, so a paragraph break never mails a draft.
8132
+ * On a touch device (`pointer: coarse`) `enter` behaves as `mod-enter`: the
8133
+ * soft keyboard's Return breaks the line and the send button sends.
7707
8134
  * @default "enter"
7708
8135
  */
7709
8136
  sendOn?: "enter" | "mod-enter";
@@ -7733,8 +8160,14 @@ interface ChatComposerProps extends Omit<ComponentPropsWithRef<"form">, "onSubmi
7733
8160
  sendLabel?: string;
7734
8161
  /** Accessible label for the stop button. @default "Stop generating" */
7735
8162
  stopLabel?: string;
7736
- /** Helper or counter text below the controls. */
7737
- footer?: ReactNode;
8163
+ /**
8164
+ * Helper or counter text below the controls. A function receives the send
8165
+ * key in effect, so a keyboard hint stays true on touch, where `enter`
8166
+ * becomes `mod-enter`; return null and the row goes away.
8167
+ */
8168
+ footer?: ReactNode | ((state: {
8169
+ sendOn: "enter" | "mod-enter";
8170
+ }) => ReactNode);
7738
8171
  /** Ref to the underlying textarea — for focusing after a send, or on mount. */
7739
8172
  fieldRef?: ComponentPropsWithRef<"textarea">["ref"];
7740
8173
  }
@@ -7754,18 +8187,23 @@ interface ChatComposerProps extends Omit<ComponentPropsWithRef<"form">, "onSubmi
7754
8187
  * The three details that are the whole job:
7755
8188
  *
7756
8189
  * - **Enter sends, Shift+Enter breaks the line** (or, with `sendOn="mod-enter"`,
7757
- * Enter breaks it and ⌘/Ctrl+Enter sends) — and neither fires mid-IME.
8190
+ * Enter breaks it and ⌘/Ctrl+Enter sends) — and neither fires mid-IME. On
8191
+ * a touch device Return always breaks the line: a soft keyboard has no
8192
+ * Shift+Return, so Enter-to-send would leave no way to write a second line.
7758
8193
  * A Japanese, Chinese, or Korean reader confirming a candidate in the
7759
8194
  * composition popup presses Enter to *choose a word*, and a composer that
7760
8195
  * reads that as "send" mails half a sentence. `event.nativeEvent.isComposing`
7761
8196
  * is the guard, and it is the single most commonly missed line in a chat input.
8197
+ * An Enter that something else already handled (`preventDefault()`) does not
8198
+ * send either: that is how a CaretMenu on `fieldRef` picks a suggestion.
7762
8199
  * - **Whitespace never sends.** The send button is disabled until there is
7763
- * something to send, so the affordance and the behaviour agree.
8200
+ * something to send, so the affordance and the behaviour agree. When the
8201
+ * something is a file rather than text, the app says so with `allowEmpty`.
7764
8202
  * - **Send becomes stop while busy**, in place, when `onStop` is given.
7765
8203
  * Interrupting a long generation is the most common thing a reader wants
7766
8204
  * during one, and it belongs where their cursor already is.
7767
8205
  */
7768
- declare function ChatComposer({ value, defaultValue, onValueChange, onSend, placeholder, sendOn, busy, onStop, disabled, invalid, attachments, leading, actions, onAttach, label, sendLabel, stopLabel, footer, fieldRef, className, children, ...props }: ChatComposerProps): react.JSX.Element;
8206
+ declare function ChatComposer({ value, defaultValue, onValueChange, onSend, allowEmpty, placeholder, sendOn, busy, onStop, disabled, invalid, attachments, leading, actions, onAttach, label, sendLabel, stopLabel, footer, fieldRef, className, children, ...props }: ChatComposerProps): react.JSX.Element;
7769
8207
  declare namespace ChatComposer {
7770
8208
  var displayName: string;
7771
8209
  }
@@ -8407,6 +8845,8 @@ interface UseCopyResult {
8407
8845
  /** True for `timeout` ms after a successful copy — swap the icon on it. */
8408
8846
  copied: boolean;
8409
8847
  }
8848
+ /** The text to copy, or a function that produces it at click time. */
8849
+ type CopySource = string | (() => string | Promise<string>);
8410
8850
  /**
8411
8851
  * Copy text to the clipboard and know, briefly, that it worked. Copying is a
8412
8852
  * BEHAVIOUR, not a kind of button: pair this with the ordinary icon Button so a
@@ -8417,10 +8857,63 @@ interface UseCopyResult {
8417
8857
  * <Icon name={copied ? "check" : "copy"} />
8418
8858
  * </Button>
8419
8859
  *
8860
+ * Text that costs something to produce (a file to fetch, a document to
8861
+ * serialise) is passed as a function, called only on click:
8862
+ * `useCopy(() => fetch(url).then((r) => r.text()))`. A promise goes to the
8863
+ * clipboard as a pending ClipboardItem, because Safari honours a write only
8864
+ * when it starts inside the click, not after an await.
8865
+ *
8420
8866
  * Clipboard access is guarded, so it is SSR-safe and fails quietly (resolving
8421
- * false) where the API is missing or the write is refused.
8867
+ * false) where the API is missing, the write is refused, or the text rejects.
8868
+ */
8869
+ declare function useCopy(text: CopySource, { timeout }?: UseCopyOptions): UseCopyResult;
8870
+
8871
+ interface SmoothWheelOptions {
8872
+ /** The axis the element scrolls on. @default "vertical" */
8873
+ axis?: "vertical" | "horizontal";
8874
+ /**
8875
+ * Horizontal only: a vertical mouse wheel scrolls the element sideways. Most
8876
+ * mice have no horizontal wheel, so without it the content past the fold is
8877
+ * out of reach. @default true
8878
+ */
8879
+ mapVertical?: boolean;
8880
+ /**
8881
+ * Ease mouse-wheel steps toward their target instead of jumping. Trackpads,
8882
+ * touch, keys and scrollbar drags stay native, and reduced motion (the OS
8883
+ * preference or MotionProvider) turns it off. @default true
8884
+ */
8885
+ smooth?: boolean;
8886
+ }
8887
+ /**
8888
+ * Mouse-wheel scrolling for one scroll container: eased steps (the inertia a
8889
+ * smooth-scroll library such as Lenis adds), and on a horizontal strip, a
8890
+ * vertical wheel mapped sideways. Returns a ref callback for the scrolling
8891
+ * element. Already wired into `<Scroller>`; use it directly for a scroll
8892
+ * container of your own.
8893
+ *
8894
+ * const wheel = useSmoothWheel()
8895
+ * <div ref={wheel} className="overflow-y-auto scrollbar-quiet">…</div>
8896
+ *
8897
+ * Unlike a page-level smooth scroller, it owns one element and only the mouse
8898
+ * wheel, so it never fights the browser over anything else:
8899
+ *
8900
+ * 1. **It releases at the ends.** At either end the event passes through and
8901
+ * the page (or the scroller around this one) scrolls, which is what the
8902
+ * reader was doing. Intercepting unconditionally traps the page.
8903
+ * 2. **It leaves trackpads, touch and `shift+wheel` alone** (see `isNotch`), and
8904
+ * a trackpad's own horizontal swipe on a strip, which the browser already
8905
+ * scrolls.
8906
+ * 3. **Anything else that scrolls the element wins.** A scrollbar drag, a key,
8907
+ * `scrollIntoView` from a highlighted row or a stick-to-bottom chat: the
8908
+ * moment the position moves without us, the easing stops and that movement
8909
+ * stands.
8910
+ * 4. **It normalises `deltaMode`** — see `toPixels`.
8911
+ *
8912
+ * The wheel listener is non-passive, because `preventDefault` is the mechanism.
8913
+ * It is attached only when there is something to do: a vertical element with
8914
+ * easing off, or under reduced motion, gets no listener at all.
8422
8915
  */
8423
- declare function useCopy(text: string, { timeout }?: UseCopyOptions): UseCopyResult;
8916
+ declare function useSmoothWheel({ axis, mapVertical, smooth, }?: SmoothWheelOptions): (node: HTMLElement | null) => void;
8424
8917
 
8425
8918
  /**
8426
8919
  * The palette: nine colour families and a scale under every tone, generated
@@ -8473,6 +8966,6 @@ declare const PALETTE_TONES: readonly ["tone-1", "tone-2", "tone-3", "tone-info"
8473
8966
  /** Everything the palette names: neutral, the families, then the tone scales. */
8474
8967
  declare const PALETTE_SCALES: readonly ["neutral", ...string[], "tone-1", "tone-2", "tone-3", "tone-info", "tone-warning", "success", "destructive"];
8475
8968
 
8476
- declare const SABLE_UI_VERSION: "0.11.0";
8969
+ declare const SABLE_UI_VERSION: "0.12.0";
8477
8970
 
8478
- export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, AppHeader, type AppHeaderProps, AppShell, type AppShellProps, AreaChart, type AreaChartProps, type ArtTone, Attachment, type AttachmentProps, Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, type AvatarGroupCountProps, type AvatarGroupProps, AvatarImage, type AvatarProps, AvatarRoot, BADGE_APPEARANCES, BADGE_TONES, Badge, type BadgeAppearance, type BadgeProps, type BadgeTone, Banner, type BannerProps, BarChart, type BarChartProps, BottomNav, BottomNavItem, type BottomNavItemProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbPage, type BreadcrumbPageProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Breadcrumbs, type BreadcrumbsProps, Browser, type BrowserProps, Bubble, type BubbleProps, BubbleReaction, type BubbleReactionProps, BubbleReactions, type BubbleReactionsProps, Button, type ButtonBleed, type ButtonProps, CHART_SERIES_COUNT, COMPONENT_GROUPS, COMPONENT_TAXONOMY, Calendar, type CalendarProps, Card, CardAction, CardContent, type CardContentProps, CardDescription, CardFooter, type CardFooterProps, CardHeader, CardList, type CardProps, CardTitle, type CardTitleProps, Carousel, type CarouselProps, type CarouselSlidesToShow, type ChartCategories, type ChartCenterLabel, type ChartCurve, type ChartDatum, type ChartSeries, type ChartTone, type ChartTooltipIndicator, type ChartTooltipOptions, type ChartValueFormatter, ChatComposer, type ChatComposerProps, Checkbox, CheckboxCard, type CheckboxCardProps, type CheckboxCardTone, CheckboxGroup, type CheckboxGroupProps, Code, CodeBlock, type CodeBlockProps, CodeHighlightProvider, type CodeHighlighter, type CodeProps, Collapsible, CollapsibleIndicator, CollapsiblePanel, CollapsibleTrigger, ColorField, type ColorFieldProps, Combobox, ComboboxChips, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, type ComboboxItemGroup, ComboboxItemIndicator, ComboboxList, ComboboxPortal, type ComboboxProps, ComboboxValue, ComboboxVirtualList, type ComboboxVirtualListProps, type CommandFilter, type CommandItem, CommandMenu, CommandMenuGroup, type CommandMenuGroupProps, CommandMenuItem, type CommandMenuItemProps, CommandMenuPanel, type CommandMenuPanelProps, type CommandMenuProps, CommandMenuTrigger, type CommandMenuTriggerProps, type ComponentGroup, type ComponentGuidance, ComponentMeta, type ComponentRegister, type ConstraintFlag, ContextCard, ContextCardArrow, ContextCardContent, ContextCardPortal, ContextCardTrigger, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, DataTable, type DataTableColumn, type DataTableProps, type DataTableRowKey, DatePicker, type DatePickerProps, DateTile, type DateTileProps, Density, DensityProvider, Density as DensityValue, DestructiveActionModal, type DestructiveActionModalProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, type DialogSize, DialogTitle, DialogTrigger, DisclosurePicker, DisclosurePickerEmpty, DisclosurePickerList, type DisclosurePickerListProps, DisclosurePickerOption, type DisclosurePickerOptionProps, DisclosurePickerPanel, type DisclosurePickerPanelProps, type DisclosurePickerProps, type DisclosurePickerSearch, DisclosurePickerTrigger, type DisclosurePickerTriggerProps, EmptyState, type EmptyStateProps, Entity, type EntityProps, Feedback, type FeedbackData, type FeedbackProps, type FeedbackRating, Field, type FieldProps, Fieldset, FieldsetContent, FieldsetDescription, FieldsetFooter, FieldsetLegend, type FieldsetVariant, FileDropzone, type FileDropzoneProps, type FileRejection, type FileRejectionCode, FontPicker, type FontPickerFont, type FontPickerOption, type FontPickerProps, Form, type FormProps, GlidingHighlight, type GlidingHighlightProps, GradientArt, type GradientArtProps, type Hsv, InlineStatus, type InlineStatusProps, type StatusTone as InlineTone, Input, type InputProps$1 as InputProps, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, Label, type LabelProps$2 as LabelProps, LineChart, type LineChartProps, Marker, type MarkerProps, Marquee, type MarqueeProps, MediaImage, type MediaImageProps, MediaTile, type MediaTileProps, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Message, type MessageProps, MessageScroller, type MessageScrollerHandle, type MessageScrollerProps, Meter, MeterIndicator, MeterLabel, type MeterSize, type MeterTone, MeterTrack, MeterValue, MiddleTruncate, type MiddleTruncateProps, type MotionPolicy, MotionProvider, type MotionProviderProps, Note, type NoteAction, type NoteProps, NotificationBadge, type NotificationBadgeProps, NumberField, type NumberFieldProps, type OrbMode, type OrbSize, OtpField, type OtpFieldProps, OverflowMenu, type OverflowMenuProps, PALETTE_COLORS, PALETTE_FAMILIES, PALETTE_SCALES, PALETTE_STEPS, PALETTE_TONES, PageHeader, type PageHeaderProps, PageLoader, type PageLoaderProps, Pagination, type PaginationProps, type PaletteColor, type PaletteFamily, type PaletteStep, Panel, PanelGroup, PanelResizer, type PanelResizerProps, PanelSection, type PanelWidthBounds, Phone, type PhoneProps, PieChart, type PieChartProps, Pill, type PillProps, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle, PopoverTrigger, Presence, type PresenceProps, type Presentation, PresentationProvider, Progress, ProgressIndicator, ProgressLabel, type ProgressSize, ProgressTrack, ProgressValue, PropertyGroup, PropertyPair, PropertyRow, RadarChart, type RadarChartProps, RadialChart, type RadialChartProps, Radio, RadioCard, type RadioCardProps, type RadioCardTone, RadioGroup, RelativeTime, type RelativeTimeProps, Reveal, type RevealProps, type Rgb, SABLE_UI_VERSION, SEGMENTED_BAR_TONES, STATUS_TONES, STATUS_TONE_ICON, type ScrollCommandOptions, Scroller, type ScrollerProps, ScrubField, type ScrubFieldProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedBar, type SegmentedBarProps, type SegmentedBarSegment, type SegmentedBarTone, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps$3 as SeparatorProps, SettingsMenu, type SettingsMenuProps, SettingsRow, type SettingsRowProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetList, SheetPortal, SheetTitle, SheetTrigger, ShowMore, type ShowMoreProps, SideNav, type SideNavActiveVariant, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, type SideNavSize, Sidebar, SidebarBrand, type SidebarBrandProps, SidebarFooter, SidebarHeader, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarProps, SimpleTooltip, Skeleton, SkipLink, Slider, SliderControl, SliderIndicator, SliderRoot, SliderThumb, SliderTrack, SliderValue, Sparkline, type SparklineProps, Spinner, type SpinnerProps, StatusBar, StatusBarGroup, StatusBarSeparator, StatusDot, type StatusDotProps, type StatusTone, type StepStatus, Stepper, StepperItem, type StepperItemProps, type StepperOrientation, type StepperProps, StreamingText, type StreamingTextProps, Switch, TRANSPARENT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsList, TabsPanel, TabsTrigger, TextReveal, type TextRevealProps, Textarea, type TextareaProps, ThemeId, ThemeManifest, ThemeMode$1 as ThemeManifestMode, type ThemeMode, ThemePreview, type ThemePreviewProps, ThemeSelector, type ThemeSelectorProps, ThemeSwitcher, type ThemeSwitcherProps, ThinkingOrb, type ThinkingOrbProps, ToastAction, type ToastApi, ToastClose, ToastContent, ToastDescription, type ToastManagerApi, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, ToastRoot, ToastTitle, type ToastType, ToastViewport, Toggle, ToggleGroup, type ToggleGroupAppearance, Toggle as ToggleGroupItem, Toolbar, ToolbarButton, type ToolbarButtonProps, ToolbarGroup, type ToolbarGroupProps, ToolbarInput, type ToolbarInputProps, ToolbarLink, type ToolbarLinkProps, type ToolbarProps, ToolbarSeparator, type ToolbarSeparatorProps, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Tree, TreeAddRow, TreeEmpty, TreeRow, TreeSection, type UseCopyOptions, type UseCopyResult, type UseInViewOptions, type UsePanelWidthOptions, Video, type VideoProps, ViewTransitionName, type ViewTransitionNameProps, Workspace, WorkspaceBar, WorkspaceCanvas, accordionMeta, appHeaderMeta, appShellMeta, areaChartMeta, attachmentMeta, avatarGroupVariants, avatarMeta, avatarVariants, badgeMeta, badgeVariants, bannerMeta, bannerVariants, barChartMeta, bottomNavMeta, breadcrumbsMeta, browserMeta, bubbleMeta, buttonMeta, buttonVariants, calendarMeta, cardMeta, carouselMeta, chartColor, toneColor as chartToneColor, chatComposerMeta, checkboxCardMeta, checkboxMeta, cn, codeBlockMeta, codeMeta, collapsibleMeta, colorFieldMeta, comboboxMeta, commandMenuMeta, componentGuidance, componentLabel, componentSlug, componentsInGroup, contextCardMeta, contextMenuMeta, dataTableMeta, datePickerMeta, dateTileMeta, destructiveActionModalMeta, dialogMeta, disclosurePickerMeta, emptyStateMeta, entityMeta, feedbackMeta, fieldsetMeta, fileDropzoneMeta, fileDropzoneVariants, fontPickerMeta, formMeta, formatFileSize, formatHex, glidingHighlightMeta, gradientArtMeta, hsvToRgb, hueColor, inlineStatusMeta, inputMeta, isPaletteColor, isTransparent, kbdMeta, labelMeta, lineChartMeta, markerMeta, marqueeMeta, mediaImageMeta, mediaTileMeta, menuMeta, messageMeta, messageScrollerMeta, meterIndicatorVariants, meterMeta, meterTrackVariants, middleTruncateMeta, noteMeta, noteVariants, notificationBadgeMeta, notificationCountVariants, notificationDotVariants, numberFieldMeta, otpFieldMeta, overflowMenuMeta, pageHeaderMeta, pageLoaderMeta, paginationMeta, panelGroupMeta, panelSectionMeta, parseHex, phoneMeta, pieChartMeta, pillMeta, pillVariants, popoverMeta, progressMeta, progressTrackVariants, radarChartMeta, radialChartMeta, radioCardMeta, radioMeta, relativeTimeMeta, rgbToHsv, scrollerMeta, scrubFieldMeta, searchInputMeta, sectionHeaderMeta, segmentedBarMeta, segmentedBarSegmentVariants, segmentedBarVariants, selectMeta, separatorMeta, settingsMenuMeta, sheetMeta, sheetVariants, showMoreMeta, sideNavMeta, sidebarMeta, skeletonMeta, sliderMeta, sparklineMeta, spinnerMeta, startViewTransition, statusBarMeta, statusDotMeta, statusDotVariants, stepperConnectorVariants, stepperIndicatorVariants, stepperMeta, streamingTextMeta, supportsViewTransitions, switchMeta, tableMeta, tabsMeta, textareaMeta, themeSelectorMeta, themeSwitcherMeta, thinkingOrbMeta, toast, toastMeta, toggleMeta, toolbarGroupVariants, toolbarMeta, toolbarSeparatorVariants, toolbarVariants, tooltipMeta, treeIndent, treeMeta, useAnchoredDensity, useComboboxFilteredItems, useCommandMenuShortcut, useCopy, useDensity, useDisclosurePicker, useInView, useMotion, usePanelWidth, usePresentation, useReducedMotion, useScrollActivity, useSidebar, useToast, useToastManager, useTypeTier, videoMeta, workspaceMeta };
8971
+ export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, AppHeader, type AppHeaderProps, AppShell, type AppShellProps, AreaChart, type AreaChartProps, type ArtTone, Attachment, type AttachmentProps, Avatar, AvatarFallback, AvatarGroup, AvatarGroupCount, type AvatarGroupCountProps, type AvatarGroupProps, AvatarImage, type AvatarProps, AvatarRoot, BADGE_APPEARANCES, BADGE_TONES, Badge, type BadgeAppearance, type BadgeProps, type BadgeTone, Banner, type BannerProps, BarChart, type BarChartProps, BottomNav, BottomNavItem, type BottomNavItemProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbPage, type BreadcrumbPageProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Breadcrumbs, type BreadcrumbsProps, Browser, type BrowserProps, Bubble, type BubbleProps, BubbleReaction, type BubbleReactionProps, BubbleReactions, type BubbleReactionsProps, Button, type ButtonBleed, ButtonGroup, type ButtonGroupProps, type ButtonProps, CHART_SERIES_COUNT, COMPONENT_GROUPS, COMPONENT_TAXONOMY, Calendar, type CalendarProps, Card, CardAction, CardContent, type CardContentProps, CardDescription, CardFooter, type CardFooterProps, CardHeader, CardList, type CardProps, CardTitle, type CardTitleProps, CaretMenu, CaretMenuItem, type CaretMenuItemProps, type CaretMenuProps, type CaretTrigger, type CaretTriggerField, type CaretTriggerMatch, Carousel, type CarouselProps, type CarouselSlidesToShow, type ChartCategories, type ChartCenterLabel, type ChartCurve, type ChartDatum, type ChartSeries, type ChartTone, type ChartTooltipIndicator, type ChartTooltipOptions, type ChartValueFormatter, ChatComposer, type ChatComposerProps, Checkbox, CheckboxCard, type CheckboxCardProps, type CheckboxCardTone, CheckboxGroup, type CheckboxGroupProps, Code, CodeBlock, type CodeBlockProps, CodeHighlightProvider, type CodeHighlighter, type CodeProps, Collapsible, CollapsibleIndicator, CollapsiblePanel, CollapsibleTrigger, ColorField, type ColorFieldProps, Combobox, ComboboxChips, ComboboxClear, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, type ComboboxItemGroup, ComboboxItemIndicator, ComboboxList, ComboboxPortal, type ComboboxProps, ComboboxValue, ComboboxVirtualList, type ComboboxVirtualListProps, type CommandFilter, type CommandItem, CommandMenu, CommandMenuGroup, type CommandMenuGroupProps, CommandMenuItem, type CommandMenuItemProps, CommandMenuPanel, type CommandMenuPanelProps, type CommandMenuProps, CommandMenuTrigger, type CommandMenuTriggerProps, type ComponentGroup, type ComponentGuidance, ComponentMeta, type ComponentRegister, type ConstraintFlag, ContextCard, ContextCardArrow, ContextCardContent, ContextCardPortal, ContextCardTrigger, ContextMenu, ContextMenuContent, ContextMenuGroup, ContextMenuGroupLabel, ContextMenuItem, ContextMenuPortal, ContextMenuSeparator, ContextMenuTrigger, type CopySource, DataTable, type DataTableColumn, type DataTableProps, type DataTableRowKey, DatePicker, type DatePickerProps, DateTile, type DateTileProps, Density, DensityProvider, Density as DensityValue, DestructiveActionModal, type DestructiveActionModalProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, type DialogSize, DialogTitle, DialogTrigger, DisclosurePicker, DisclosurePickerEmpty, DisclosurePickerList, type DisclosurePickerListProps, DisclosurePickerOption, type DisclosurePickerOptionProps, DisclosurePickerPanel, type DisclosurePickerPanelProps, type DisclosurePickerProps, type DisclosurePickerSearch, DisclosurePickerTrigger, type DisclosurePickerTriggerProps, EmptyState, type EmptyStateProps, Entity, type EntityProps, Feedback, type FeedbackData, type FeedbackProps, type FeedbackRating, Field, type FieldProps, Fieldset, FieldsetContent, FieldsetDescription, FieldsetFooter, FieldsetLegend, type FieldsetVariant, FileDropzone, type FileDropzoneProps, type FileRejection, type FileRejectionCode, FontPicker, type FontPickerFont, type FontPickerOption, type FontPickerProps, Form, type FormProps, GlidingHighlight, type GlidingHighlightProps, GradientArt, type GradientArtProps, type Hsv, InlineStatus, type InlineStatusProps, type StatusTone as InlineTone, Input, InputGroup, type InputGroupProps, type InputProps$1 as InputProps, Kbd, KbdGroup, type KbdGroupProps, type KbdProps, Label, type LabelProps$2 as LabelProps, LineChart, type LineChartProps, Marker, type MarkerProps, Marquee, type MarqueeProps, MediaImage, type MediaImageProps, MediaTile, type MediaTileProps, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuSubmenu, MenuSubmenuTrigger, MenuTrigger, Menubar, type MenubarProps, MenubarTrigger, type MenubarTriggerProps, Message, type MessageProps, MessageScroller, type MessageScrollerHandle, type MessageScrollerProps, Meter, MeterIndicator, MeterLabel, type MeterSize, type MeterTone, MeterTrack, MeterValue, MiddleTruncate, type MiddleTruncateProps, type MotionPolicy, MotionProvider, type MotionProviderProps, NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, Note, type NoteAction, type NoteProps, NotificationBadge, type NotificationBadgeProps, NumberField, type NumberFieldProps, type OrbMode, type OrbSize, OtpField, type OtpFieldProps, OverflowMenu, type OverflowMenuProps, PALETTE_COLORS, PALETTE_FAMILIES, PALETTE_SCALES, PALETTE_STEPS, PALETTE_TONES, PageHeader, type PageHeaderProps, PageLoader, type PageLoaderProps, Pagination, type PaginationProps, type PaletteColor, type PaletteFamily, type PaletteStep, Panel, PanelGroup, PanelResizer, type PanelResizerProps, PanelSection, type PanelWidthBounds, Phone, type PhoneProps, PieChart, type PieChartProps, Pill, type PillProps, Popover, PopoverArrow, PopoverClose, PopoverContent, PopoverDescription, PopoverPortal, PopoverTitle, PopoverTrigger, Presence, type PresenceProps, type Presentation, PresentationProvider, Progress, ProgressIndicator, ProgressLabel, type ProgressSize, ProgressTrack, ProgressValue, PropertyGroup, PropertyPair, PropertyRow, RadarChart, type RadarChartProps, RadialChart, type RadialChartProps, Radio, RadioCard, type RadioCardProps, type RadioCardTone, RadioGroup, RelativeTime, type RelativeTimeProps, Reveal, type RevealProps, type Rgb, SABLE_UI_VERSION, SEGMENTED_BAR_TONES, STATUS_TONES, STATUS_TONE_ICON, type ScrollCommandOptions, Scroller, type ScrollerProps, ScrubField, type ScrubFieldProps, SearchInput, type SearchInputProps, SectionHeader, type SectionHeaderProps, SegmentedBar, type SegmentedBarProps, type SegmentedBarSegment, type SegmentedBarTone, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPortal, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps$2 as SeparatorProps, SettingsMenu, type SettingsMenuProps, SettingsRow, type SettingsRowProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetList, SheetPortal, type SheetProps, type SheetSnapPoint, SheetTitle, SheetTrigger, ShowMore, type ShowMoreProps, SideNav, type SideNavActiveVariant, SideNavGroup, type SideNavGroupProps, SideNavItem, type SideNavItemProps, type SideNavProps, type SideNavSize, Sidebar, SidebarBrand, type SidebarBrandProps, SidebarFooter, SidebarHeader, SidebarItem, type SidebarItemProps, SidebarNav, type SidebarProps, SimpleTooltip, Skeleton, SkipLink, Slider, SliderControl, SliderIndicator, SliderRoot, SliderThumb, SliderTrack, SliderValue, type SmoothWheelOptions, Sparkline, type SparklineProps, Spinner, type SpinnerProps, StatusBar, StatusBarGroup, StatusBarSeparator, StatusDot, type StatusDotProps, type StatusTone, type StepStatus, Stepper, StepperItem, type StepperItemProps, type StepperOrientation, type StepperProps, StreamingText, type StreamingTextProps, Switch, TRANSPARENT, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsPanel as TabsContent, TabsList, TabsPanel, TabsTrigger, TextReveal, type TextRevealProps, Textarea, type TextareaProps, ThemeId, ThemeManifest, ThemeMode$1 as ThemeManifestMode, type ThemeMode, ThemePreview, type ThemePreviewProps, ThemeSelector, type ThemeSelectorProps, ThemeSwitcher, type ThemeSwitcherProps, ThinkingOrb, type ThinkingOrbProps, ToastAction, type ToastApi, ToastClose, ToastContent, ToastDescription, type ToastManagerApi, type ToastOptions, type ToastPosition, ToastProvider, type ToastProviderProps, ToastRoot, ToastTitle, type ToastType, ToastViewport, Toggle, ToggleGroup, type ToggleGroupAppearance, Toggle as ToggleGroupItem, Toolbar, ToolbarButton, type ToolbarButtonProps, ToolbarGroup, type ToolbarGroupProps, ToolbarInput, type ToolbarInputProps, ToolbarLink, type ToolbarLinkProps, type ToolbarProps, ToolbarSeparator, type ToolbarSeparatorProps, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Tree, TreeAddRow, TreeEmpty, TreeRow, TreeSection, type UseCaretTriggerOptions, type UseCaretTriggerResult, type UseCopyOptions, type UseCopyResult, type UseInViewOptions, type UsePanelWidthOptions, Video, type VideoProps, ViewTransitionName, type ViewTransitionNameProps, Workspace, WorkspaceBar, WorkspaceCanvas, accordionMeta, appHeaderMeta, appShellMeta, areaChartMeta, attachmentMeta, avatarGroupVariants, avatarMeta, avatarVariants, badgeMeta, badgeVariants, bannerMeta, bannerVariants, barChartMeta, bottomNavMeta, breadcrumbsMeta, browserMeta, bubbleMeta, buttonGroupMeta, buttonMeta, buttonVariants, calendarMeta, cardMeta, caretMenuMeta, carouselMeta, chartColor, toneColor as chartToneColor, chatComposerMeta, checkboxCardMeta, checkboxMeta, cn, codeBlockMeta, codeMeta, collapsibleMeta, colorFieldMeta, comboboxMeta, commandMenuMeta, componentGuidance, componentLabel, componentSlug, componentsInGroup, contextCardMeta, contextMenuMeta, dataTableMeta, datePickerMeta, dateTileMeta, destructiveActionModalMeta, dialogMeta, disclosurePickerMeta, emptyStateMeta, entityMeta, feedbackMeta, fieldsetMeta, fileDropzoneMeta, fileDropzoneVariants, fontPickerMeta, formMeta, formatFileSize, formatHex, glidingHighlightMeta, gradientArtMeta, hsvToRgb, hueColor, inlineStatusMeta, inputGroupMeta, inputMeta, isPaletteColor, isTransparent, kbdMeta, labelMeta, lineChartMeta, markerMeta, marqueeMeta, mediaImageMeta, mediaTileMeta, menuMeta, menubarMeta, messageMeta, messageScrollerMeta, meterIndicatorVariants, meterMeta, meterTrackVariants, middleTruncateMeta, navigationMenuMeta, noteMeta, noteVariants, notificationBadgeMeta, notificationCountVariants, notificationDotVariants, numberFieldMeta, otpFieldMeta, overflowMenuMeta, pageHeaderMeta, pageLoaderMeta, paginationMeta, panelGroupMeta, panelSectionMeta, parseHex, phoneMeta, pieChartMeta, pillMeta, pillVariants, popoverMeta, progressMeta, progressTrackVariants, radarChartMeta, radialChartMeta, radioCardMeta, radioMeta, relativeTimeMeta, rgbToHsv, scrollerMeta, scrubFieldMeta, searchInputMeta, sectionHeaderMeta, segmentedBarMeta, segmentedBarSegmentVariants, segmentedBarVariants, selectMeta, separatorMeta, settingsMenuMeta, sheetMeta, sheetVariants, showMoreMeta, sideNavMeta, sidebarMeta, skeletonMeta, sliderMeta, sparklineMeta, spinnerMeta, startViewTransition, statusBarMeta, statusDotMeta, statusDotVariants, stepperConnectorVariants, stepperIndicatorVariants, stepperMeta, streamingTextMeta, supportsViewTransitions, switchMeta, tableMeta, tabsMeta, textareaMeta, themeSelectorMeta, themeSwitcherMeta, thinkingOrbMeta, toast, toastMeta, toggleMeta, toolbarGroupVariants, toolbarMeta, toolbarSeparatorVariants, toolbarVariants, tooltipMeta, treeIndent, treeMeta, useAnchoredDensity, useCaretTrigger, useComboboxFilteredItems, useCommandMenuShortcut, useCopy, useDensity, useDisclosurePicker, useInView, useMotion, usePanelWidth, usePresentation, useReducedMotion, useScrollActivity, useSidebar, useSmoothWheel, useToast, useToastManager, useTypeTier, videoMeta, workspaceMeta };