@noya-app/noya-designsystem 0.1.94 → 0.1.96

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 (43) hide show
  1. package/.turbo/turbo-build.log +9 -9
  2. package/.turbo/turbo-typecheck.log +1 -0
  3. package/CHANGELOG.md +16 -0
  4. package/dist/index.css +1 -1
  5. package/dist/index.d.mts +158 -93
  6. package/dist/index.d.ts +158 -93
  7. package/dist/index.js +1307 -1034
  8. package/dist/index.js.map +1 -1
  9. package/dist/index.mjs +1231 -962
  10. package/dist/index.mjs.map +1 -1
  11. package/package.json +6 -5
  12. package/src/__tests__/SharedDragProvider.test.ts +72 -29
  13. package/src/__tests__/fuzzyScorer.test.ts +49 -1
  14. package/src/components/Button.tsx +1 -1
  15. package/src/components/Combobox.tsx +23 -3
  16. package/src/components/ComboboxMenu.tsx +32 -15
  17. package/src/components/ContextMenu.tsx +26 -7
  18. package/src/components/DimensionInput.tsx +12 -2
  19. package/src/components/DropdownMenu.tsx +23 -8
  20. package/src/components/InputField.tsx +1 -0
  21. package/src/components/InspectorContainer.tsx +16 -1
  22. package/src/components/List.tsx +25 -3
  23. package/src/components/Popover.tsx +13 -1
  24. package/src/components/Section.tsx +35 -11
  25. package/src/components/SegmentedControl.tsx +14 -4
  26. package/src/components/Toolbar.tsx +16 -1
  27. package/src/components/ToolbarItems.tsx +322 -0
  28. package/src/components/Tooltip.tsx +8 -1
  29. package/src/components/__tests__/Card.test.tsx +2 -1
  30. package/src/components/__tests__/InputField.test.tsx +3 -1
  31. package/src/components/__tests__/ToolbarItems.test.tsx +205 -0
  32. package/src/components/internal/Menu.tsx +4 -1
  33. package/src/components/internal/TextInput.tsx +43 -2
  34. package/src/components/internal/__tests__/TextInput.test.tsx +79 -2
  35. package/src/components/listView/ListViewEditableRowTitle.tsx +37 -1
  36. package/src/components/listView/ListViewRow.tsx +3 -0
  37. package/src/components/listView/__tests__/ListViewEditableRowTitle.test.tsx +69 -0
  38. package/src/components/sorting/Sortable.tsx +4 -1
  39. package/src/index.tsx +0 -1
  40. package/src/utils/combobox.ts +22 -5
  41. package/src/utils/fuzzyScorer.ts +71 -0
  42. package/tailwind.config.ts +7 -0
  43. package/src/components/InspectorPrimitives.tsx +0 -188
package/dist/index.d.mts CHANGED
@@ -33,6 +33,16 @@ declare function fuzzyFilter({ items, query, scoreThreshold, }: {
33
33
  query: string;
34
34
  scoreThreshold?: number;
35
35
  }): IScoredItem[];
36
+ /**
37
+ * Word-boundary filter for name-like lists (e.g. font families): ranks
38
+ * exact > prefix > word-start matches and only falls back to substring
39
+ * matches when nothing matches at a word boundary. Prevents queries like
40
+ * "Play" from surfacing every "* Display" family via mid-word substrings.
41
+ */
42
+ declare function wordPrefixFilter({ items, query, }: {
43
+ items: string[];
44
+ query: string;
45
+ }): IScoredItem[];
36
46
  type IToken = {
37
47
  type: "text";
38
48
  text: string;
@@ -789,7 +799,7 @@ type TextProps = {
789
799
  onKeyDown?: (event: React__default.KeyboardEvent<HTMLSpanElement>) => void;
790
800
  tabIndex?: number;
791
801
  };
792
- declare const Text$1: React__default.ForwardRefExoticComponent<TextProps & React__default.RefAttributes<HTMLElement>>;
802
+ declare const Text: React__default.ForwardRefExoticComponent<TextProps & React__default.RefAttributes<HTMLElement>>;
793
803
  type PresetProps = Omit<TextProps, "variant">;
794
804
  declare const Heading1: React__default.ForwardRefExoticComponent<PresetProps & React__default.RefAttributes<HTMLElement>>;
795
805
  declare const Heading2: React__default.ForwardRefExoticComponent<PresetProps & React__default.RefAttributes<HTMLElement>>;
@@ -842,7 +852,7 @@ declare const Card: React__default.ForwardRefExoticComponent<CardProps & React__
842
852
  interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type"> {
843
853
  colorScheme?: "primary" | "secondary";
844
854
  }
845
- declare const Checkbox$1: React$1.NamedExoticComponent<CheckboxProps & React$1.RefAttributes<HTMLInputElement>>;
855
+ declare const Checkbox: React$1.NamedExoticComponent<CheckboxProps & React$1.RefAttributes<HTMLInputElement>>;
846
856
 
847
857
  type ChipColorScheme = "primary" | "secondary" | "info" | "error";
848
858
  type ChipSize = "small" | "medium" | "large" | "xl";
@@ -1260,6 +1270,61 @@ type ColorSwatchControlProps = {
1260
1270
  };
1261
1271
  declare function ColorSwatchControl(props: ColorSwatchControlProps): React__default.JSX.Element;
1262
1272
 
1273
+ /**
1274
+ * How a combobox matches its filter text against item titles:
1275
+ * - "fuzzy": vscode-style fuzzy scoring (default)
1276
+ * - "wordPrefix": word-boundary prefixes ranked exact > prefix > word-start,
1277
+ * substring only as a fallback (right for name lists like font families)
1278
+ */
1279
+ type ComboboxFilterStrategy = "fuzzy" | "wordPrefix";
1280
+ type ComboboxStateSnapshot<T extends string> = {
1281
+ filter: string;
1282
+ selectedIndex: number;
1283
+ filteredItems: ScoredMenuItem<T>[];
1284
+ lastSubmittedValue: {
1285
+ filter: string;
1286
+ itemName: string;
1287
+ };
1288
+ };
1289
+ declare class ComboboxState<T extends string> {
1290
+ private filter;
1291
+ private selectedIndex;
1292
+ private items;
1293
+ private lastSubmittedValue;
1294
+ private subscribers;
1295
+ private version;
1296
+ private _cachedSnapshot;
1297
+ private filterStrategy;
1298
+ constructor(items: MenuItem<T>[], initialTitle: string, allowArbitraryValues: boolean, filterStrategy?: ComboboxFilterStrategy);
1299
+ subscribe: (listener: () => void) => (() => void);
1300
+ private notifyChange;
1301
+ private getFilteredItems;
1302
+ getSnapshot: () => ComboboxStateSnapshot<T>;
1303
+ setItems(items: MenuItem<T>[]): void;
1304
+ setFilter(filter: string): void;
1305
+ moveSelection(direction: "up" | "down"): void;
1306
+ selectCurrentItem(item?: ScoredMenuItem<T>): SelectableMenuItem<T> | undefined;
1307
+ restoreLastSubmittedValue(): void;
1308
+ reset(newFilter?: string, options?: {
1309
+ selectedItemTitle?: string;
1310
+ selectedItemValue?: string | number;
1311
+ }): void;
1312
+ getSelectedItem(): ScoredMenuItem<T> | undefined;
1313
+ getTypeaheadValue(): string | undefined;
1314
+ setSelectedIndex(index: number): void;
1315
+ submitArbitraryFilter(filter: string): void;
1316
+ }
1317
+ declare function filterWithGroupedSections<T extends string>(items: MenuItem<T>[], query: string, options?: {
1318
+ filterStrategy?: ComboboxFilterStrategy;
1319
+ }): ScoredMenuItem<T>[];
1320
+ declare function getNextIndex<T>({ items, currentIndex, direction, isDisabled, }: {
1321
+ items: T[];
1322
+ currentIndex: number;
1323
+ direction: "next" | "previous";
1324
+ isDisabled: (item: T) => boolean;
1325
+ }): number;
1326
+ declare function useComboboxState<T extends string>(state: ComboboxState<T>): ComboboxStateSnapshot<T>;
1327
+
1263
1328
  type InputSize = "small" | "medium" | "large";
1264
1329
 
1265
1330
  type Props$a = {
@@ -1408,6 +1473,13 @@ type BaseComboboxProps<T extends string> = {
1408
1473
  tabBehavior?: "autocomplete" | "select";
1409
1474
  openMenuBehavior?: "showAllItems" | "showFilteredItems";
1410
1475
  iconPosition?: "left" | "right";
1476
+ /** Wraps each menu item's label (receives the default highlighted content) */
1477
+ renderItemContent?: (item: ScoredMenuItem<T>, defaultContent: React__default.ReactNode) => React__default.ReactNode;
1478
+ /**
1479
+ * How filter text matches item titles ("fuzzy" default; "wordPrefix" for
1480
+ * name lists). Fixed at mount.
1481
+ */
1482
+ filterStrategy?: ComboboxFilterStrategy;
1411
1483
  };
1412
1484
  type StringModeOnlyProps = {
1413
1485
  mode: "string";
@@ -1451,6 +1523,12 @@ interface ComboboxMenuProps<T extends string> {
1451
1523
  itemHeight?: number;
1452
1524
  /** Optional per-item height resolver */
1453
1525
  getRowHeightForItem?: (item: ScoredMenuItem<T>, index: number) => number;
1526
+ /**
1527
+ * Wraps an item's rendered label (e.g. to style a font family's row in its
1528
+ * own typeface). Receives the default label content, which includes the
1529
+ * fuzzy-match highlighting.
1530
+ */
1531
+ renderItemContent?: (item: ScoredMenuItem<T>, defaultContent: React__default.ReactNode) => React__default.ReactNode;
1454
1532
  }
1455
1533
  declare const ComboboxMenu: <T extends string>(props: ComboboxMenuProps<T> & React__default.RefAttributes<IVirtualizedList>) => React__default.ReactElement<any> | null;
1456
1534
 
@@ -1503,6 +1581,8 @@ interface MenuProps<T extends string> {
1503
1581
  onSelect: (value: T) => void;
1504
1582
  shouldBindKeyboardShortcuts?: boolean;
1505
1583
  onOpenChange?: (open: boolean) => void;
1584
+ /** Extra styles (e.g. CSS variable overrides) for the menu surface. */
1585
+ contentStyle?: React__default.CSSProperties;
1506
1586
  }
1507
1587
  declare const ContextMenu: <T extends string>(props: MenuProps<T>) => React__default.ReactElement<any> | null;
1508
1588
 
@@ -2012,6 +2092,9 @@ declare const InspectorContainer: React__default.NamedExoticComponent<{
2012
2092
  header?: React__default.ReactNode;
2013
2093
  children?: React__default.ReactNode;
2014
2094
  fallback?: React__default.ReactNode;
2095
+ /** Pinned to the bottom edge when content is short; scrolls after the
2096
+ * content when it overflows (pushed, not sticky). */
2097
+ footer?: React__default.ReactNode;
2015
2098
  showDividers?: boolean;
2016
2099
  id?: string;
2017
2100
  className?: string;
@@ -2160,19 +2243,28 @@ interface Props$7 {
2160
2243
  style?: React__default.CSSProperties;
2161
2244
  portalContainer?: HTMLElement | null;
2162
2245
  side?: "top" | "bottom" | "left" | "right";
2246
+ /** Cross-axis alignment against the anchor. @default "center" */
2247
+ align?: "start" | "center" | "end";
2163
2248
  initialFocus?: React__default.ComponentProps<typeof Popover$1.Popup>["initialFocus"];
2164
2249
  /**
2165
2250
  * Called when an interaction outside the popover occurs.
2166
2251
  * Return false to prevent the popover from closing.
2167
2252
  */
2168
2253
  shouldCloseOnInteractOutside?: (event: PointerEvent) => boolean;
2254
+ /**
2255
+ * Whether the trigger ultimately renders a native `<button>`. Pass false
2256
+ * for non-button triggers (e.g. an input container) so Base UI doesn't log
2257
+ * a nativeButton mismatch console error.
2258
+ * @default true
2259
+ */
2260
+ nativeButtonTrigger?: boolean;
2169
2261
  }
2170
2262
  declare const popoverStyle: {
2171
2263
  base: string;
2172
2264
  large: string;
2173
2265
  normal: string;
2174
2266
  };
2175
- declare function Popover({ children, trigger, variant, closable, open, side, sideOffset, showArrow, onOpenChange, onClickClose, className, portalContainer, style, initialFocus, shouldCloseOnInteractOutside, }: Props$7): React__default.JSX.Element;
2267
+ declare function Popover({ children, trigger, variant, closable, open, side, align, sideOffset, showArrow, onOpenChange, onClickClose, className, portalContainer, style, initialFocus, shouldCloseOnInteractOutside, nativeButtonTrigger, }: Props$7): React__default.JSX.Element;
2176
2268
 
2177
2269
  type ColorScheme$3 = "normal" | "warning" | "primary" | "secondary";
2178
2270
  declare function Progress({ value, colorScheme, color, className, style: styleProp, }: {
@@ -2248,7 +2340,7 @@ type SectionHeaderProps = {
2248
2340
  right?: React__default.ReactNode;
2249
2341
  headerSeparator?: "space" | "dot";
2250
2342
  };
2251
- declare function SectionHeader$1({ style, className, title, titleIcon, right, headerSeparator, titleTextStyle, titleClassName, onClickTitle, }: SectionHeaderProps): React__default.JSX.Element;
2343
+ declare function SectionHeader({ style, className, title, titleIcon, right, headerSeparator, titleTextStyle, titleClassName, onClickTitle, }: SectionHeaderProps): React__default.JSX.Element;
2252
2344
  type SectionProps = {
2253
2345
  children: React__default.ReactNode;
2254
2346
  hideRightWhenCollapsed?: boolean;
@@ -2261,7 +2353,7 @@ type ExpandableSectionProps = {
2261
2353
  storageKey: string;
2262
2354
  initialVisibility?: "show" | "hide";
2263
2355
  };
2264
- declare const Section$1: React__default.NamedExoticComponent<{
2356
+ declare const Section: React__default.NamedExoticComponent<{
2265
2357
  children: React__default.ReactNode;
2266
2358
  hideRightWhenCollapsed?: boolean;
2267
2359
  extraPadding?: boolean;
@@ -2270,7 +2362,11 @@ declare const Section$1: React__default.NamedExoticComponent<{
2270
2362
  headerStyle?: CSSProperties;
2271
2363
  } & Omit<SectionHeaderProps, "className" | "style"> & Partial<ExpandableSectionProps>>;
2272
2364
 
2273
- type SegmentedControlColorScheme = "primary" | "secondary";
2365
+ /**
2366
+ * "primaryTint" is Figma-UI3-style: a light primary-tinted active segment
2367
+ * with a primary-colored glyph, instead of the solid primary fill.
2368
+ */
2369
+ type SegmentedControlColorScheme = "primary" | "secondary" | "primaryTint";
2274
2370
  type SegmentedControlVariant = "default" | "tabs" | "buttons";
2275
2371
  type SegmentedControlItemWidth = "auto" | "equal" | "fit";
2276
2372
  interface SegmentedControlProps<T extends string> {
@@ -2553,6 +2649,9 @@ interface Props$1 {
2553
2649
  sideOffset?: number;
2554
2650
  side?: "top" | "bottom" | "left" | "right";
2555
2651
  portalContainer?: HTMLElement | null;
2652
+ /** Overrides the popup chrome entirely (e.g. a dark chip over a dark
2653
+ * toolbar). The default light surface is used when omitted. */
2654
+ contentClassName?: string;
2556
2655
  }
2557
2656
  declare const Tooltip: React$1.NamedExoticComponent<Props$1>;
2558
2657
 
@@ -2977,51 +3076,6 @@ declare const colorForStringValues: Record<string, string>;
2977
3076
  */
2978
3077
  declare function colorFromString(str: string): string;
2979
3078
 
2980
- type ComboboxStateSnapshot<T extends string> = {
2981
- filter: string;
2982
- selectedIndex: number;
2983
- filteredItems: ScoredMenuItem<T>[];
2984
- lastSubmittedValue: {
2985
- filter: string;
2986
- itemName: string;
2987
- };
2988
- };
2989
- declare class ComboboxState<T extends string> {
2990
- private filter;
2991
- private selectedIndex;
2992
- private items;
2993
- private lastSubmittedValue;
2994
- private subscribers;
2995
- private version;
2996
- private _cachedSnapshot;
2997
- constructor(items: MenuItem<T>[], initialTitle: string, allowArbitraryValues: boolean);
2998
- subscribe: (listener: () => void) => (() => void);
2999
- private notifyChange;
3000
- private getFilteredItems;
3001
- getSnapshot: () => ComboboxStateSnapshot<T>;
3002
- setItems(items: MenuItem<T>[]): void;
3003
- setFilter(filter: string): void;
3004
- moveSelection(direction: "up" | "down"): void;
3005
- selectCurrentItem(item?: ScoredMenuItem<T>): SelectableMenuItem<T> | undefined;
3006
- restoreLastSubmittedValue(): void;
3007
- reset(newFilter?: string, options?: {
3008
- selectedItemTitle?: string;
3009
- selectedItemValue?: string | number;
3010
- }): void;
3011
- getSelectedItem(): ScoredMenuItem<T> | undefined;
3012
- getTypeaheadValue(): string | undefined;
3013
- setSelectedIndex(index: number): void;
3014
- submitArbitraryFilter(filter: string): void;
3015
- }
3016
- declare function filterWithGroupedSections<T extends string>(items: MenuItem<T>[], query: string): ScoredMenuItem<T>[];
3017
- declare function getNextIndex<T>({ items, currentIndex, direction, isDisabled, }: {
3018
- items: T[];
3019
- currentIndex: number;
3020
- direction: "next" | "previous";
3021
- isDisabled: (item: T) => boolean;
3022
- }): number;
3023
- declare function useComboboxState<T extends string>(state: ComboboxState<T>): ComboboxStateSnapshot<T>;
3024
-
3025
3079
  declare const editableBlockStyles: (viewType?: "editable" | "readOnly" | "preview") => string | undefined;
3026
3080
 
3027
3081
  type MoveOptions = {
@@ -3089,49 +3143,11 @@ interface Props {
3089
3143
  placeholder?: string;
3090
3144
  disabled?: boolean;
3091
3145
  trigger?: "change" | "submit";
3146
+ /** Unit suffix rendered inside the field's right edge (e.g. "px", "%"). */
3147
+ suffix?: string;
3092
3148
  }
3093
3149
  declare const DimensionInput: React$1.NamedExoticComponent<Props>;
3094
3150
 
3095
- declare const Section: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
3096
- declare const SectionHeader: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
3097
- type TitleTextStyle = "small" | "heading5" | "heading4" | "heading3";
3098
- declare const Title: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & {
3099
- $textStyle?: TitleTextStyle;
3100
- } & React__default.RefAttributes<HTMLDivElement>>;
3101
- declare const Row: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
3102
- declare const Column: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
3103
- declare const Checkbox: React__default.ForwardRefExoticComponent<React__default.InputHTMLAttributes<HTMLInputElement> & React__default.RefAttributes<HTMLInputElement>>;
3104
- declare const Text: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLSpanElement> & React__default.RefAttributes<HTMLSpanElement>>;
3105
- declare const VerticalSeparator: () => React__default.JSX.Element;
3106
- declare const HorizontalSeparator: () => React__default.JSX.Element;
3107
- declare const RowLabel: React__default.ForwardRefExoticComponent<React__default.LabelHTMLAttributes<HTMLLabelElement> & {
3108
- $textStyle?: TitleTextStyle | "label";
3109
- } & React__default.RefAttributes<HTMLLabelElement>>;
3110
- interface LabeledRowProps {
3111
- id?: string;
3112
- children: ReactNode;
3113
- label: ReactNode;
3114
- labelTextStyle?: TitleTextStyle;
3115
- right?: ReactNode;
3116
- className?: string;
3117
- }
3118
- declare const LabeledRow: React__default.NamedExoticComponent<LabeledRowProps>;
3119
-
3120
- declare const InspectorPrimitives_Checkbox: typeof Checkbox;
3121
- declare const InspectorPrimitives_Column: typeof Column;
3122
- declare const InspectorPrimitives_HorizontalSeparator: typeof HorizontalSeparator;
3123
- declare const InspectorPrimitives_LabeledRow: typeof LabeledRow;
3124
- declare const InspectorPrimitives_Row: typeof Row;
3125
- declare const InspectorPrimitives_RowLabel: typeof RowLabel;
3126
- declare const InspectorPrimitives_Section: typeof Section;
3127
- declare const InspectorPrimitives_SectionHeader: typeof SectionHeader;
3128
- declare const InspectorPrimitives_Text: typeof Text;
3129
- declare const InspectorPrimitives_Title: typeof Title;
3130
- declare const InspectorPrimitives_VerticalSeparator: typeof VerticalSeparator;
3131
- declare namespace InspectorPrimitives {
3132
- export { InspectorPrimitives_Checkbox as Checkbox, InspectorPrimitives_Column as Column, InspectorPrimitives_HorizontalSeparator as HorizontalSeparator, InspectorPrimitives_LabeledRow as LabeledRow, InspectorPrimitives_Row as Row, InspectorPrimitives_RowLabel as RowLabel, InspectorPrimitives_Section as Section, InspectorPrimitives_SectionHeader as SectionHeader, InspectorPrimitives_Text as Text, InspectorPrimitives_Title as Title, InspectorPrimitives_VerticalSeparator as VerticalSeparator };
3133
- }
3134
-
3135
3151
  interface BaseToolbarProps {
3136
3152
  children?: React__default.ReactNode;
3137
3153
  left?: React__default.ReactNode;
@@ -3233,6 +3249,50 @@ interface AppToolbarProps<T extends string = string> {
3233
3249
  declare function useBindKeyboardShortcutsForMenuItems<T extends string>(items: MenuItem<T>[], onSelectMenuItem?: (value: T) => void): void;
3234
3250
  declare function AppToolbar<T extends string = string>({ children, logo, leftMenuItems, rightMenuItems, onSelectMenuItem, shouldBindKeyboardShortcuts, dividerOverflow, }: AppToolbarProps<T>): React__default.JSX.Element;
3235
3251
 
3252
+ type ToolbarSeparatorItem = {
3253
+ type: "separator";
3254
+ };
3255
+ /** A split-button slot: the primary button activates the group's
3256
+ * representative tool and the adjacent chevron opens a flyout menu listing
3257
+ * every item in the group. */
3258
+ type ToolbarGroupItem<T extends string> = {
3259
+ type: "group";
3260
+ id: string;
3261
+ items: SelectableMenuItem<T>[];
3262
+ };
3263
+ /** A button (icon or text) that opens a Popover with arbitrary content. */
3264
+ type ToolbarPopoverItem = {
3265
+ type: "popover";
3266
+ id: string;
3267
+ title: ReactNode;
3268
+ icon?: MenuItemIcon;
3269
+ content: ReactNode | ((close: () => void) => ReactNode);
3270
+ };
3271
+ /**
3272
+ * A declarative item for `ToolbarItems` (`Toolbar.Items`). Selectable items
3273
+ * reuse the menu system's `SelectableMenuItem`, so the same definitions can
3274
+ * feed a toolbar, a dropdown, or a context menu.
3275
+ */
3276
+ type ToolbarItem<T extends string> = SelectableMenuItem<T> | ToolbarSeparatorItem | ToolbarGroupItem<T> | ToolbarPopoverItem;
3277
+ type PopupSide = "top" | "bottom" | "left" | "right";
3278
+ interface ToolbarItemsProps<T extends string> {
3279
+ items: ToolbarItem<T>[];
3280
+ onSelect: (value: T) => void;
3281
+ /**
3282
+ * Side the group flyouts and popovers open on. Bottom-of-screen toolbars
3283
+ * want "top".
3284
+ * @default "top"
3285
+ */
3286
+ side?: PopupSide;
3287
+ /** @default "top" */
3288
+ tooltipSide?: PopupSide;
3289
+ }
3290
+ /**
3291
+ * Renders a flat list of `ToolbarItem`s inside a `Toolbar`, styled entirely
3292
+ * by the standard (light) theme tokens. Also available as `Toolbar.Items`.
3293
+ */
3294
+ declare function ToolbarItems<T extends string>({ items, onSelect, side, tooltipSide, }: ToolbarItemsProps<T>): React__default.JSX.Element;
3295
+
3236
3296
  type ToolbarSize = "small" | "medium";
3237
3297
  interface ToolbarProps extends HTMLAttributes<HTMLDivElement> {
3238
3298
  /**
@@ -3241,7 +3301,12 @@ interface ToolbarProps extends HTMLAttributes<HTMLDivElement> {
3241
3301
  */
3242
3302
  size?: ToolbarSize;
3243
3303
  }
3244
- declare const Toolbar: React__default.ForwardRefExoticComponent<ToolbarProps & React__default.RefAttributes<HTMLDivElement>>;
3304
+ /** The floating toolbar surface. `Toolbar.Items` renders a declarative
3305
+ * `ToolbarItem[]` (icon buttons, separators, split-button groups, popovers)
3306
+ * inside it. */
3307
+ declare const Toolbar: React__default.ForwardRefExoticComponent<ToolbarProps & React__default.RefAttributes<HTMLDivElement>> & {
3308
+ Items: typeof ToolbarItems;
3309
+ };
3245
3310
 
3246
3311
  type ToolbarDrawerProps = {
3247
3312
  children: ReactNode;
@@ -3250,4 +3315,4 @@ type ToolbarDrawerProps = {
3250
3315
  };
3251
3316
  declare const ToolbarDrawer: React__default.NamedExoticComponent<ToolbarDrawerProps & React__default.RefAttributes<HTMLDivElement>>;
3252
3317
 
3253
- export { AIAssistantInput, AIAssistantLayout, AIAssistantLoadingIndicator, type AcceptsDrop, type AcceptsDropOptions, type AcceptsFromList, ActionMenu, type ActivityIconSemanticColor, ActivityIndicator, ActivityLog, type ActivityLogItem, Anchor, AnimatePresence, type AnimatePresenceChildState, type AnimatePresenceProps, AppToolbar, type AppToolbarProps, Avatar, type AvatarProps, AvatarStack, Banner, type BannerProps, type BaseComboboxProps, BaseToolbar, BaseToolbarContainer, type BaseToolbarProps, Body, BreadcrumbSlash, BreadcrumbText, Button, type ButtonProps, CHECKBOX_INDENT_WIDTH, CHECKBOX_RIGHT_INSET, CHECKBOX_WIDTH, Card, type CardProps, Checkbox$1 as Checkbox, Chip, type ChipProps, Collection, type CollectionItemSize, type CollectionProps, type CollectionRef, type CollectionRenderActionProps, type CollectionThumbnailProps, type CollectionThumbnailSize, type CollectionViewType, ColorSwatch, ColorSwatchControl, type ColorSwatchSize, Combobox, ComboboxMenu, type ComboboxProps, type ComboboxRef, ComboboxState, type ComboboxStateSnapshot, CommandPalette, ConnectedUsersMenuLayout, ContextMenu, ContinuousPointerSensor, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, type DetectSizeType, Dialog, type DialogContextValue, DialogNavigator, type DialogNavigatorProps, type DialogProps, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, type DragItem, type DragState, DraggableMenuButton, Drawer, type DrawerProps, type DropValidator, DropdownMenu, type DropdownMenuProps, EditableText, type EditableTextRef, EmojiPicker, type EmojiPickerStorage, ExtraSmall, type ExtractMenuItemType, Fade, type FadeDirection, type FadeProps, FileExplorerCollection, FileExplorerDetail, FileExplorerEmptyState, FileExplorerLayout, FileExplorerUploadButton, FileUploadIndicator, FileUploadList, FloatingWindow, FloatingWindowProvider, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, Grid, GridBackground, GridView, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, INPUT_HEIGHT, type IScoredItem, type ISearchCompletionMenu, type IToken, type IVirtualizedList, Icon, IconButton, type IconName, type IconProp, ImageBlockComponent, type ImageDataContextValue, ImageDataProvider, IndentContext, InputField, type InputFieldInputProps, type InputFieldProps, type InputFieldSize, InspectorContainer, InspectorPrimitives, Italic, type ItemChildrenExtraProps, type ItemChildrenProps, KeyboardShortcut, Label, LabelContext, type LabelProps, type LabelType, LabelTypeContext, type LabelTypeContextValue, LabelWidthContext, type LabelWidthContextValue, LabeledElementView, LabeledField, type LayoutProps, type LinkComponent, LinkComponentProvider, List, ListMenu, type ListMenuProps, ListNavigator, type ListNavigatorProps, ListView, Logo, type MatchRange, MediaThumbnail, type MediaThumbnailProps, type MenuConfig, type MenuItem, type MenuItemIcon, type MenuItemProps, type MenuItemRole, type MenuProps, Message, type MessageProps, type MoveDragItemHandler, type MoveDragItemParameters, type MoveTreeItemOptions, Navigator, type NavigatorHeaderProps, type NavigatorNavigation, type NavigatorParams, type NavigatorProps, type NavigatorPushFunction, type NavigatorRenderContext, type NavigatorRenderHeader, type NavigatorReplaceFunction, type NavigatorRoute, type NavigatorRoutesConfig, type NavigatorScreenProps, type NavigatorStackEntry, type NonSelectableMenuItem, type OpenPortalControlsContextValue, type OpenPortalsContextValue, OpenPortalsProvider, type OptionModeOnlyProps, type OptionModeProps, type Optional, type OverlayLayout, OverlayToolbar, type OverlayToolbarProps, type OverlayToolbarRect, type PanelLayoutState, PipelineResultLayout, PipelineResultLink, Popover, type PopoverMenuItem, type PortalScopeContextValue, PortalScopeProvider, Progress, type RelativeDropPosition, type RenderPanel, type RenderThumbnailIconProps, ResizableContainer, RingProgress, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, type ScoredMenuItem, ScrollArea, type ScrollToIndexAlign, type ScrollToIndexOptions, type ScrollToIndexPadding, ScrollableSidebar, SearchCompletionMenu, Section$1 as Section, SectionHeader$1 as SectionHeader, SectionHeaderMenuItem, type SectionProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectMenu, type SelectableMenuItem, SelectionToolbarContainer, type SeparatorItem, type SetNumberMode, SharedDragProvider, type SharedDragProviderProps, type SideOptions, type SideType, type SidebarOptions, type SidebarRef, type SidebarState, type SketchPattern, Slider, Small, Sortable, SortableItemContext, type SortableItemContextProps, type SortableProps, Spacer, type StackItem, StackNavigator, type StackNavigatorHeaderProps, type StackNavigatorProps, type StackNavigatorRenderHeader, StatCard, type StatCardColorScheme, type StatCardProps, type StatCardTrend, Stepper, type StringModeOnlyProps, type StringModeProps, type SubMenuItem, type SupportedCanvasUploadType, type SupportedImageUploadType, Switch, Tabs, type TabsProps, Text$1 as Text, TextArea, TextAreaRow, type TextProps, type Theme, type ThemeColor, Toast, ToastProvider, type TokenValue, Toolbar, ToolbarDrawer, ToolbarMenu, ToolbarMenuButton, ToolbarMenuContext, ToolbarMenuDropdown, ToolbarMenuItem, ToolbarMenuPopover, type ToolbarProps, ToolbarShortcut, type ToolbarSize, type ToolbarVariant, Tooltip, TreeView, type UseThemeReturnType, UserAvatar, UserPicker, type UserPickerProps, type UserPickerUser, UserPointer, type UserPointerProps, type ValidateDropIndicatorParams, Virtualized, type VirtualizedProps, type VirtualizedRenderItem, WorkspaceLayout, type WorkspaceLayoutGroup, type WorkspaceLayoutProps, type WorkspaceLayoutRef, type WorkspaceLayoutState, type WorkspaceSideContextValue, WorkspaceSideProvider, acceptsDrop, colorForStringValues, colorFromString, colorSwatchSizeMap, createDialogNavigator, createDragItemKey, createNavigator, createSectionedMenu, createSharedDrag, cssVarNames, cssVars, cx, decodeImageSrc, defaultAcceptsDrop, dragItemKeySeparator, editableBlockStyles, filterWithGroupedSections, formatByteSize, fuzzyFilter, fuzzyScore, fuzzyTokenize, getCheckedMenuItemAccessibilityProps, getClosestPortalScope, getFieldSpacing, getGridSize, getItemFirstCollisionDetection, getKeyboardShortcutsForMenuItems, getMenuItemKey, getNewValue, getNextIndex, getPipelineResultLink, getThumbnailColors, getUserDisplayName, isMenuItemSectionHeader, isNonSelectableMenuItem, isPopoverMenuItem, isSelectableMenuItem, isSelectableMenuItemWithScore, isSubMenuItem, labeledFieldStyles, mergeConflictingClassNames, moveTreeItem, normalizeListTargetIndex, parseDragItemKey, popoverStyle, portalScopeDataSetName, portalScopePropName, portalScopeProps, proseTheme, renderIcon, separator, snapIndicatorEdgesToDevicePixels, styles, textStyles, toolbarTransparentStyle, updateSelection, useAutoResize, useBindKeyboardShortcutsForMenuItems, useComboboxState, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDialogContainsElement, useDialogContext, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHasOpenPortals, useHover, useImageData, useIndent, useInputFieldContext, useLabel, useLabelType, useLabelWidth, useLinkComponent, useNavigator, useNavigatorRoute, useOpenConfirmationDialog, useOpenDialog, useOpenInputDialog, useOpenPortalsControls, usePlatform, usePlatformModKey, usePortalScopeId, useTheme, useToast, useWorkspaceSide, validateDropIndicator, whiteboardProseTheme, withDragProvider, withSeparatorElements };
3318
+ export { AIAssistantInput, AIAssistantLayout, AIAssistantLoadingIndicator, type AcceptsDrop, type AcceptsDropOptions, type AcceptsFromList, ActionMenu, type ActivityIconSemanticColor, ActivityIndicator, ActivityLog, type ActivityLogItem, Anchor, AnimatePresence, type AnimatePresenceChildState, type AnimatePresenceProps, AppToolbar, type AppToolbarProps, Avatar, type AvatarProps, AvatarStack, Banner, type BannerProps, type BaseComboboxProps, BaseToolbar, BaseToolbarContainer, type BaseToolbarProps, Body, BreadcrumbSlash, BreadcrumbText, Button, type ButtonProps, CHECKBOX_INDENT_WIDTH, CHECKBOX_RIGHT_INSET, CHECKBOX_WIDTH, Card, type CardProps, Checkbox, Chip, type ChipProps, Collection, type CollectionItemSize, type CollectionProps, type CollectionRef, type CollectionRenderActionProps, type CollectionThumbnailProps, type CollectionThumbnailSize, type CollectionViewType, ColorSwatch, ColorSwatchControl, type ColorSwatchSize, Combobox, type ComboboxFilterStrategy, ComboboxMenu, type ComboboxProps, type ComboboxRef, ComboboxState, type ComboboxStateSnapshot, CommandPalette, ConnectedUsersMenuLayout, ContextMenu, ContinuousPointerSensor, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, type DetectSizeType, Dialog, type DialogContextValue, DialogNavigator, type DialogNavigatorProps, type DialogProps, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, type DragItem, type DragState, DraggableMenuButton, Drawer, type DrawerProps, type DropValidator, DropdownMenu, type DropdownMenuProps, EditableText, type EditableTextRef, EmojiPicker, type EmojiPickerStorage, ExtraSmall, type ExtractMenuItemType, Fade, type FadeDirection, type FadeProps, FileExplorerCollection, FileExplorerDetail, FileExplorerEmptyState, FileExplorerLayout, FileExplorerUploadButton, FileUploadIndicator, FileUploadList, FloatingWindow, FloatingWindowProvider, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, Grid, GridBackground, GridView, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, INPUT_HEIGHT, type IScoredItem, type ISearchCompletionMenu, type IToken, type IVirtualizedList, Icon, IconButton, type IconName, type IconProp, ImageBlockComponent, type ImageDataContextValue, ImageDataProvider, IndentContext, InputField, type InputFieldInputProps, type InputFieldProps, type InputFieldSize, InspectorContainer, Italic, type ItemChildrenExtraProps, type ItemChildrenProps, KeyboardShortcut, Label, LabelContext, type LabelProps, type LabelType, LabelTypeContext, type LabelTypeContextValue, LabelWidthContext, type LabelWidthContextValue, LabeledElementView, LabeledField, type LayoutProps, type LinkComponent, LinkComponentProvider, List, ListMenu, type ListMenuProps, ListNavigator, type ListNavigatorProps, ListView, Logo, type MatchRange, MediaThumbnail, type MediaThumbnailProps, type MenuConfig, type MenuItem, type MenuItemIcon, type MenuItemProps, type MenuItemRole, type MenuProps, Message, type MessageProps, type MoveDragItemHandler, type MoveDragItemParameters, type MoveTreeItemOptions, Navigator, type NavigatorHeaderProps, type NavigatorNavigation, type NavigatorParams, type NavigatorProps, type NavigatorPushFunction, type NavigatorRenderContext, type NavigatorRenderHeader, type NavigatorReplaceFunction, type NavigatorRoute, type NavigatorRoutesConfig, type NavigatorScreenProps, type NavigatorStackEntry, type NonSelectableMenuItem, type OpenPortalControlsContextValue, type OpenPortalsContextValue, OpenPortalsProvider, type OptionModeOnlyProps, type OptionModeProps, type Optional, type OverlayLayout, OverlayToolbar, type OverlayToolbarProps, type OverlayToolbarRect, type PanelLayoutState, PipelineResultLayout, PipelineResultLink, Popover, type PopoverMenuItem, type PortalScopeContextValue, PortalScopeProvider, Progress, type RelativeDropPosition, type RenderPanel, type RenderThumbnailIconProps, ResizableContainer, RingProgress, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, type ScoredMenuItem, ScrollArea, type ScrollToIndexAlign, type ScrollToIndexOptions, type ScrollToIndexPadding, ScrollableSidebar, SearchCompletionMenu, Section, SectionHeader, SectionHeaderMenuItem, type SectionProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectMenu, type SelectableMenuItem, SelectionToolbarContainer, type SeparatorItem, type SetNumberMode, SharedDragProvider, type SharedDragProviderProps, type SideOptions, type SideType, type SidebarOptions, type SidebarRef, type SidebarState, type SketchPattern, Slider, Small, Sortable, SortableItemContext, type SortableItemContextProps, type SortableProps, Spacer, type StackItem, StackNavigator, type StackNavigatorHeaderProps, type StackNavigatorProps, type StackNavigatorRenderHeader, StatCard, type StatCardColorScheme, type StatCardProps, type StatCardTrend, Stepper, type StringModeOnlyProps, type StringModeProps, type SubMenuItem, type SupportedCanvasUploadType, type SupportedImageUploadType, Switch, Tabs, type TabsProps, Text, TextArea, TextAreaRow, type TextProps, type Theme, type ThemeColor, Toast, ToastProvider, type TokenValue, Toolbar, ToolbarDrawer, type ToolbarGroupItem, type ToolbarItem, ToolbarItems, type ToolbarItemsProps, ToolbarMenu, ToolbarMenuButton, ToolbarMenuContext, ToolbarMenuDropdown, ToolbarMenuItem, ToolbarMenuPopover, type ToolbarPopoverItem, type ToolbarProps, type ToolbarSeparatorItem, ToolbarShortcut, type ToolbarSize, type ToolbarVariant, Tooltip, TreeView, type UseThemeReturnType, UserAvatar, UserPicker, type UserPickerProps, type UserPickerUser, UserPointer, type UserPointerProps, type ValidateDropIndicatorParams, Virtualized, type VirtualizedProps, type VirtualizedRenderItem, WorkspaceLayout, type WorkspaceLayoutGroup, type WorkspaceLayoutProps, type WorkspaceLayoutRef, type WorkspaceLayoutState, type WorkspaceSideContextValue, WorkspaceSideProvider, acceptsDrop, colorForStringValues, colorFromString, colorSwatchSizeMap, createDialogNavigator, createDragItemKey, createNavigator, createSectionedMenu, createSharedDrag, cssVarNames, cssVars, cx, decodeImageSrc, defaultAcceptsDrop, dragItemKeySeparator, editableBlockStyles, filterWithGroupedSections, formatByteSize, fuzzyFilter, fuzzyScore, fuzzyTokenize, getCheckedMenuItemAccessibilityProps, getClosestPortalScope, getFieldSpacing, getGridSize, getItemFirstCollisionDetection, getKeyboardShortcutsForMenuItems, getMenuItemKey, getNewValue, getNextIndex, getPipelineResultLink, getThumbnailColors, getUserDisplayName, isMenuItemSectionHeader, isNonSelectableMenuItem, isPopoverMenuItem, isSelectableMenuItem, isSelectableMenuItemWithScore, isSubMenuItem, labeledFieldStyles, mergeConflictingClassNames, moveTreeItem, normalizeListTargetIndex, parseDragItemKey, popoverStyle, portalScopeDataSetName, portalScopePropName, portalScopeProps, proseTheme, renderIcon, separator, snapIndicatorEdgesToDevicePixels, styles, textStyles, toolbarTransparentStyle, updateSelection, useAutoResize, useBindKeyboardShortcutsForMenuItems, useComboboxState, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDialogContainsElement, useDialogContext, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHasOpenPortals, useHover, useImageData, useIndent, useInputFieldContext, useLabel, useLabelType, useLabelWidth, useLinkComponent, useNavigator, useNavigatorRoute, useOpenConfirmationDialog, useOpenDialog, useOpenInputDialog, useOpenPortalsControls, usePlatform, usePlatformModKey, usePortalScopeId, useTheme, useToast, useWorkspaceSide, validateDropIndicator, whiteboardProseTheme, withDragProvider, withSeparatorElements, wordPrefixFilter };