@noya-app/noya-designsystem 0.1.50 → 0.1.52

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 (56) hide show
  1. package/.turbo/turbo-build.log +10 -13
  2. package/CHANGELOG.md +19 -0
  3. package/dist/index.css +1 -1
  4. package/dist/index.d.mts +314 -203
  5. package/dist/index.d.ts +314 -203
  6. package/dist/index.js +6473 -12656
  7. package/dist/index.js.map +1 -1
  8. package/dist/index.mjs +8399 -14605
  9. package/dist/index.mjs.map +1 -1
  10. package/package.json +15 -12
  11. package/postcss.config.js +7 -0
  12. package/src/components/ActionMenu.tsx +12 -5
  13. package/src/components/Banner.tsx +2 -2
  14. package/src/components/BaseToolbar.tsx +6 -2
  15. package/src/components/Breadcrumbs.tsx +32 -2
  16. package/src/components/Button.tsx +30 -19
  17. package/src/components/Chip.tsx +3 -0
  18. package/src/components/Collection.tsx +12 -3
  19. package/src/components/ColorSwatch.tsx +42 -0
  20. package/src/components/ColorSwatchControl.tsx +92 -0
  21. package/src/components/ComboboxMenu.tsx +10 -1
  22. package/src/components/Dialog.tsx +1 -1
  23. package/src/components/FillInputField.tsx +1 -1
  24. package/src/components/Grid.tsx +22 -12
  25. package/src/components/GridView.tsx +1 -1
  26. package/src/components/LabeledField.tsx +4 -1
  27. package/src/components/List.tsx +37 -26
  28. package/src/components/ListView.tsx +7 -4
  29. package/src/components/MediaThumbnail.tsx +63 -15
  30. package/src/components/Popover.tsx +1 -1
  31. package/src/components/SearchCompletionMenu.tsx +12 -12
  32. package/src/components/SegmentedControl.tsx +2 -2
  33. package/src/components/SelectionToolbar.tsx +70 -0
  34. package/src/components/Switch.tsx +1 -1
  35. package/src/components/Text.tsx +2 -2
  36. package/src/components/Toast.tsx +13 -7
  37. package/src/components/Toolbar.tsx +33 -11
  38. package/src/components/Tooltip.tsx +4 -2
  39. package/src/components/catppuccin/fileIcons.ts +2430 -0
  40. package/src/components/connected-users-menu/ConnectedUsersMenuLayout.tsx +3 -1
  41. package/src/components/file-explorer/FileExplorerLayout.tsx +12 -2
  42. package/src/components/internal/Menu.tsx +5 -4
  43. package/src/components/internal/MenuViewport.tsx +2 -0
  44. package/src/components/internal/TextInput.tsx +7 -2
  45. package/src/components/pipeline/PipelineResultLayout.tsx +18 -0
  46. package/src/contexts/DialogContext.tsx +20 -5
  47. package/src/index.css +103 -34
  48. package/src/index.tsx +3 -0
  49. package/src/theme/index.ts +7 -2
  50. package/src/theme/themeUtils.ts +10 -3
  51. package/src/utils/classNames.ts +4 -3
  52. package/src/utils/combobox.ts +18 -13
  53. package/src/utils/moveTreeItem.ts +4 -4
  54. package/tailwind.config.ts +2 -239
  55. package/tailwind.d.ts +1 -1
  56. package/tsup.config.ts +1 -4
package/dist/index.d.ts CHANGED
@@ -3,14 +3,14 @@ import React__default, { ReactNode, CSSProperties, ReactHTML, HTMLAttributes, Ar
3
3
  import { IItemScore } from 'vscode-fuzzy-scorer';
4
4
  import * as Icons from '@noya-app/noya-icons';
5
5
  export { Icons };
6
- import * as tailwindcss_types_config from 'tailwindcss/types/config';
6
+ import tailwindConfig from '@noya-app/noya-tailwind-config';
7
7
  import * as _noya_app_noya_geometry from '@noya-app/noya-geometry';
8
- import { Size } from '@noya-app/noya-geometry';
8
+ import { Size, Rect } from '@noya-app/noya-geometry';
9
9
  import { UniqueIdentifier } from '@dnd-kit/core';
10
10
  import { useSortable } from '@dnd-kit/sortable';
11
11
  import { Property } from 'csstype';
12
12
  import * as _noya_app_noya_designsystem from '@noya-app/noya-designsystem';
13
- import { SectionProps as SectionProps$1, BannerProps as BannerProps$1 } from '@noya-app/noya-designsystem';
13
+ import { SectionProps as SectionProps$1, BannerProps as BannerProps$1, MenuItem as MenuItem$1 } from '@noya-app/noya-designsystem';
14
14
  import * as DialogPrimitive from '@radix-ui/react-dialog';
15
15
  import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
16
16
  import { Sketch } from '@noya-app/noya-file-format';
@@ -82,6 +82,7 @@ type SelectableMenuItem<T extends string> = BaseMenuItem & {
82
82
  shortcut?: string;
83
83
  value: T;
84
84
  testSelected?: boolean;
85
+ tooltip?: ReactNode;
85
86
  };
86
87
  type SubMenuItem<T extends string> = BaseMenuItem & {
87
88
  type: "submenu";
@@ -128,10 +129,13 @@ declare const SectionHeader$1: React__default.NamedExoticComponent<Omit<SectionH
128
129
  type ActionMenuProps<TMenu extends string> = {
129
130
  menuItems: MenuItem<TMenu>[];
130
131
  onSelect: (action: TMenu) => void;
131
- selected: boolean;
132
- onOpenChange: (open: boolean) => void;
132
+ selected?: boolean;
133
+ disabled?: boolean;
134
+ onOpenChange?: (open: boolean) => void;
133
135
  className?: string;
134
136
  style?: React__default.CSSProperties;
137
+ variant?: "normal" | "bare";
138
+ color?: string;
135
139
  };
136
140
  declare const ActionMenu: <TMenu extends string>(props: ActionMenuProps<TMenu>) => React__default.ReactElement | null;
137
141
 
@@ -218,194 +222,207 @@ declare const AvatarStack: React__default.NamedExoticComponent<{
218
222
  }>;
219
223
 
220
224
  type BannerProps = {
221
- label?: string;
225
+ label?: ReactNode;
222
226
  className?: string;
223
227
  style?: CSSProperties;
224
228
  };
225
229
  declare function Banner({ label, className, style }: BannerProps): React__default.JSX.Element;
226
230
 
227
- declare const config: {
228
- content: string[];
229
- corePlugins: {
230
- preflight: false;
231
+ type Theme = (typeof tailwindConfig.theme)["extend"];
232
+ type ThemeColor = keyof Theme["colors"];
233
+ declare const cssVars: {
234
+ colors: {
235
+ logoFill: string;
236
+ logoHighlight: string;
237
+ background: string;
238
+ text: string;
239
+ textMuted: string;
240
+ textSubtle: string;
241
+ textDisabled: string;
242
+ textDecorativeLight: string;
243
+ dividerSubtle: string;
244
+ divider: string;
245
+ dividerStrong: string;
246
+ primary: string;
247
+ primaryLight: string;
248
+ primaryPastel: string;
249
+ secondary: string;
250
+ secondaryLight: string;
251
+ secondaryPastel: string;
252
+ secondaryBright: string;
253
+ inputBackground: string;
254
+ inputBackgroundLight: string;
255
+ listViewHoverBackground: string;
256
+ listViewThumbnailBackground: string;
257
+ codeBackground: string;
258
+ codeBackgroundDark: string;
259
+ selectedBackground: string;
260
+ breadcrumbText: string;
261
+ breadcrumbTextHover: string;
262
+ breadcrumbIcon: string;
263
+ canvasBackground: string;
264
+ canvasGrid: string;
265
+ sidebarBackground: string;
266
+ popoverBackground: string;
267
+ popoverDivider: string;
268
+ listviewRaisedBackground: string;
269
+ listviewEditingBackground: string;
270
+ sliderThumbBackground: string;
271
+ sliderBorder: string;
272
+ segmentedControlItem: string;
273
+ mask: string;
274
+ transparentChecker: string;
275
+ scrollbar: string;
276
+ placeholderDots: string;
277
+ dragOutline: string;
278
+ activeBackground: string;
279
+ thumbnailBackground: string;
280
+ thumbnailShadow: string;
281
+ inlineCodeText: string;
282
+ inlineCodeBackground: string;
283
+ textLink: string;
284
+ textLinkFocused: string;
285
+ icon: string;
286
+ iconSelected: string;
287
+ warning: string;
288
+ dot: string;
289
+ rowHighlight: string;
290
+ tableRowBackground: string;
291
+ chipPrimaryBg: string;
292
+ chipSecondaryBg: string;
293
+ chipErrorBg: string;
294
+ chipDefaultBg: string;
295
+ chipPrimaryShadow: string;
296
+ chipSecondaryShadow: string;
297
+ chipErrorShadow: string;
298
+ chipDefaultShadow: string;
299
+ floatingButton: string;
300
+ blockBorder: string;
301
+ blockHighlight: string;
302
+ selectedListItemBackground: string;
303
+ selectedListItemText: string;
304
+ selectedListItemIconBackground: string;
305
+ cmKeyword: string;
306
+ cmFunction: string;
307
+ cmControlKeyword: string;
308
+ cmClassType: string;
309
+ cmRegexp: string;
310
+ cmLink: string;
311
+ cmString: string;
312
+ cmNumber: string;
313
+ cmComment: string;
314
+ cmOperator: string;
315
+ cmVariable: string;
316
+ cmType: string;
317
+ cmError: string;
318
+ cmWarning: string;
319
+ cmInfo: string;
231
320
  };
232
- theme: {
233
- extend: {
234
- colors: {
235
- "logo-fill": string;
236
- "logo-highlight": string;
237
- background: string;
238
- text: string;
239
- "text-muted": string;
240
- "text-subtle": string;
241
- "text-disabled": string;
242
- "text-decorative-light": string;
243
- "divider-subtle": string;
244
- divider: string;
245
- "divider-strong": string;
246
- primary: string;
247
- "primary-light": string;
248
- "primary-pastel": string;
249
- secondary: string;
250
- "secondary-light": string;
251
- "secondary-pastel": string;
252
- "secondary-bright": string;
253
- "input-background": string;
254
- "input-background-light": string;
255
- "list-view-hover-background": string;
256
- "list-view-thumbnail-background": string;
257
- "code-background": string;
258
- "code-background-dark": string;
259
- "selected-background": string;
260
- "breadcrumb-text": string;
261
- "breadcrumb-text-hover": string;
262
- "breadcrumb-icon": string;
263
- "canvas-background": string;
264
- "canvas-grid": string;
265
- "sidebar-background": string;
266
- "sidebar-background-transparent": string;
267
- "popover-background": string;
268
- "popover-divider": string;
269
- "listview-raised-background": string;
270
- "listview-editing-background": string;
271
- "slider-thumb-background": string;
272
- "slider-border": string;
273
- "segmented-control-item": string;
274
- mask: string;
275
- "transparent-checker": string;
276
- scrollbar: string;
277
- "placeholder-dots": string;
278
- "drag-outline": string;
279
- "active-background": string;
280
- "thumbnail-background": string;
281
- "thumbnail-shadow": string;
282
- "inline-code-text": string;
283
- "inline-code-background": string;
284
- "text-link": string;
285
- "text-link-focused": string;
286
- icon: string;
287
- "icon-selected": string;
288
- warning: string;
289
- dot: string;
290
- "row-highlight": string;
291
- "table-row-background": string;
292
- "chip-primary-bg": string;
293
- "chip-secondary-bg": string;
294
- "chip-error-bg": string;
295
- "chip-default-bg": string;
296
- "chip-primary-shadow": string;
297
- "chip-secondary-shadow": string;
298
- "chip-error-shadow": string;
299
- "chip-default-shadow": string;
300
- "floating-button": string;
301
- "block-border": string;
302
- "block-highlight": string;
303
- };
304
- fontFamily: {
305
- sans: [string, string, string, string, string, string, string, string, string, string];
306
- mono: [string, string, string, string, string];
307
- };
308
- fontSize: {
309
- title: [string, {
310
- lineHeight: string;
311
- letterSpacing: string;
312
- }];
313
- subtitle: [string, {
314
- lineHeight: string;
315
- letterSpacing: string;
316
- }];
317
- heading1: [string, {
318
- lineHeight: string;
319
- letterSpacing: string;
320
- }];
321
- heading2: [string, {
322
- lineHeight: string;
323
- letterSpacing: string;
324
- }];
325
- heading3: [string, {
326
- lineHeight: string;
327
- letterSpacing: string;
328
- }];
329
- heading4: [string, {
330
- lineHeight: string;
331
- }];
332
- heading5: [string, {
333
- lineHeight: string;
334
- }];
335
- body: [string, {
336
- lineHeight: string;
337
- }];
338
- small: [string, {
339
- lineHeight: string;
340
- }];
341
- code: [string, {
342
- lineHeight: string;
343
- }];
344
- button: [string, {
345
- lineHeight: string;
346
- letterSpacing: string;
347
- }];
348
- label: [string, {
349
- lineHeight: string;
350
- letterSpacing: string;
351
- }];
352
- };
353
- spacing: {
354
- nano: string;
355
- micro: string;
356
- small: string;
357
- medium: string;
358
- large: string;
359
- xlarge: string;
360
- xxlarge: string;
361
- "inset-top": string;
362
- "sidebar-width": string;
363
- "toolbar-height": string;
364
- "toolbar-separator": string;
365
- "inspector-h-separator": string;
366
- "inspector-v-separator": string;
367
- "dialog-padding": string;
368
- "input-height": string;
321
+ fontFamily: {
322
+ sans: [string, string, string, string, string, string, string, string, string, string];
323
+ mono: [string, string, string, string, string, string];
324
+ };
325
+ fontSize: {
326
+ title: [string, {
327
+ lineHeight: string;
328
+ letterSpacing: string;
329
+ }];
330
+ subtitle: [string, {
331
+ lineHeight: string;
332
+ letterSpacing: string;
333
+ }];
334
+ heading1: [string, {
335
+ lineHeight: string;
336
+ letterSpacing: string;
337
+ }];
338
+ heading2: [string, {
339
+ lineHeight: string;
340
+ letterSpacing: string;
341
+ }];
342
+ heading3: [string, {
343
+ lineHeight: string;
344
+ letterSpacing: string;
345
+ }];
346
+ heading4: [string, {
347
+ lineHeight: string;
348
+ }];
349
+ heading5: [string, {
350
+ lineHeight: string;
351
+ }];
352
+ body: [string, {
353
+ lineHeight: string;
354
+ }];
355
+ small: [string, {
356
+ lineHeight: string;
357
+ }];
358
+ code: [string, {
359
+ lineHeight: string;
360
+ }];
361
+ button: [string, {
362
+ lineHeight: string;
363
+ letterSpacing: string;
364
+ }];
365
+ listSmall: [string, {
366
+ lineHeight: string;
367
+ letterSpacing: string;
368
+ }];
369
+ label: [string, {
370
+ lineHeight: string;
371
+ letterSpacing: string;
372
+ }];
373
+ };
374
+ spacing: {
375
+ nano: string;
376
+ micro: string;
377
+ small: string;
378
+ medium: string;
379
+ large: string;
380
+ xlarge: string;
381
+ xxlarge: string;
382
+ insetTop: string;
383
+ sidebarWidth: string;
384
+ toolbarHeight: string;
385
+ toolbarSeparator: string;
386
+ inspectorHSeparator: string;
387
+ inspectorVSeparator: string;
388
+ dialogPadding: string;
389
+ inputHeight: string;
390
+ };
391
+ keyframes: {
392
+ spin: {
393
+ "0%": {
394
+ transform: string;
369
395
  };
370
- keyframes: {
371
- spin: {
372
- "0%": {
373
- transform: string;
374
- };
375
- "100%": {
376
- transform: string;
377
- };
378
- };
379
- shimmer: {
380
- "0%": {
381
- backgroundPosition: string;
382
- };
383
- "100%": {
384
- backgroundPosition: string;
385
- };
386
- };
396
+ "100%": {
397
+ transform: string;
387
398
  };
388
- animation: {
389
- spin: string;
390
- shimmer: string;
399
+ };
400
+ shimmer: {
401
+ "0%": {
402
+ backgroundPosition: string;
391
403
  };
392
- zIndex: {
393
- interactable: string;
394
- label: string;
395
- menu: string;
404
+ "100%": {
405
+ backgroundPosition: string;
396
406
  };
397
407
  };
398
408
  };
399
- safelist: string[];
400
- plugins: {
401
- handler: tailwindcss_types_config.PluginCreator;
402
- config?: Partial<tailwindcss_types_config.Config> | undefined;
403
- }[];
409
+ animation: {
410
+ spin: string;
411
+ shimmer: string;
412
+ };
413
+ zIndex: {
414
+ interactable: string;
415
+ label: string;
416
+ menu: string;
417
+ };
418
+ boxShadow: {
419
+ dialog: string;
420
+ popover: string;
421
+ activeInput: string;
422
+ segment: string;
423
+ };
404
424
  };
405
-
406
- type Theme = (typeof config.theme)["extend"];
407
- type ThemeColor = keyof Theme["colors"];
408
- declare const cssVars: {
425
+ declare const cssVarNames: {
409
426
  colors: {
410
427
  logoFill: string;
411
428
  logoHighlight: string;
@@ -438,7 +455,6 @@ declare const cssVars: {
438
455
  canvasBackground: string;
439
456
  canvasGrid: string;
440
457
  sidebarBackground: string;
441
- sidebarBackgroundTransparent: string;
442
458
  popoverBackground: string;
443
459
  popoverDivider: string;
444
460
  listviewRaisedBackground: string;
@@ -475,10 +491,28 @@ declare const cssVars: {
475
491
  floatingButton: string;
476
492
  blockBorder: string;
477
493
  blockHighlight: string;
494
+ selectedListItemBackground: string;
495
+ selectedListItemText: string;
496
+ selectedListItemIconBackground: string;
497
+ cmKeyword: string;
498
+ cmFunction: string;
499
+ cmControlKeyword: string;
500
+ cmClassType: string;
501
+ cmRegexp: string;
502
+ cmLink: string;
503
+ cmString: string;
504
+ cmNumber: string;
505
+ cmComment: string;
506
+ cmOperator: string;
507
+ cmVariable: string;
508
+ cmType: string;
509
+ cmError: string;
510
+ cmWarning: string;
511
+ cmInfo: string;
478
512
  };
479
513
  fontFamily: {
480
514
  sans: [string, string, string, string, string, string, string, string, string, string];
481
- mono: [string, string, string, string, string];
515
+ mono: [string, string, string, string, string, string];
482
516
  };
483
517
  fontSize: {
484
518
  title: [string, {
@@ -520,6 +554,10 @@ declare const cssVars: {
520
554
  lineHeight: string;
521
555
  letterSpacing: string;
522
556
  }];
557
+ listSmall: [string, {
558
+ lineHeight: string;
559
+ letterSpacing: string;
560
+ }];
523
561
  label: [string, {
524
562
  lineHeight: string;
525
563
  letterSpacing: string;
@@ -569,6 +607,12 @@ declare const cssVars: {
569
607
  label: string;
570
608
  menu: string;
571
609
  };
610
+ boxShadow: {
611
+ dialog: string;
612
+ popover: string;
613
+ activeInput: string;
614
+ segment: string;
615
+ };
572
616
  };
573
617
  declare const INPUT_HEIGHT = 27;
574
618
 
@@ -605,6 +649,7 @@ declare const Italic: ({ children }: {
605
649
 
606
650
  type BreadcrumbTextProps = Omit<TextProps, "variant" | "whiteSpace" | "lineHeight" | "userSelect">;
607
651
  declare const BreadcrumbText: React__default.ForwardRefExoticComponent<BreadcrumbTextProps & React__default.RefAttributes<HTMLSpanElement>>;
652
+ declare const BreadcrumbSlash: () => React__default.JSX.Element;
608
653
 
609
654
  type ButtonVariant = "normal" | "primary" | "secondary" | "secondaryBright" | "thin" | "floating" | "none";
610
655
  type ButtonSize = "small" | "normal" | "large" | "floating";
@@ -627,6 +672,7 @@ interface ButtonRootProps {
627
672
  href?: string;
628
673
  target?: string;
629
674
  rel?: string;
675
+ download?: string;
630
676
  }
631
677
  declare const Button: React__default.ForwardRefExoticComponent<ButtonRootProps & React__default.RefAttributes<HTMLButtonElement>>;
632
678
 
@@ -656,18 +702,10 @@ interface ChipProps {
656
702
  style?: React__default.CSSProperties;
657
703
  tabIndex?: number;
658
704
  role?: string;
705
+ disabled?: boolean;
659
706
  }
660
707
  declare const Chip: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<ChipProps & React__default.RefAttributes<HTMLSpanElement>>>;
661
708
 
662
- type GridViewSize = "xxs" | "xs" | "small" | "medium" | "large" | "xl";
663
- declare const getGridSize: (size: GridViewSize) => {
664
- minColumnWidth: string;
665
- gap: number;
666
- };
667
- declare const Grid: <T, M extends string = string>(props: CollectionProps<T, M> & {
668
- ref?: React__default.ForwardedRef<CollectionRef>;
669
- } & React__default.RefAttributes<CollectionRef>) => React__default.ReactElement | null;
670
-
671
709
  type RelativeDropPosition = "above" | "below" | "inside";
672
710
  type DropValidator = (sourceIndex: number, targetIndex: number, position: RelativeDropPosition) => boolean;
673
711
  declare const normalizeListTargetIndex: (index: number, position: "above" | "below") => number;
@@ -879,6 +917,7 @@ type CollectionRef = {
879
917
  type CollectionThumbnailProps<T> = {
880
918
  item: T;
881
919
  selected: boolean;
920
+ size?: CollectionItemSize;
882
921
  };
883
922
  type CollectionRenderActionProps<T> = {
884
923
  item: T;
@@ -905,7 +944,7 @@ interface CollectionProps<T, M extends string = string> {
905
944
  menuItems?: MenuItem<M>[];
906
945
  onSelectMenuItem?: (action: M, selectedItems: T[]) => void;
907
946
  onRename?: (item: T, newName: string) => void;
908
- renderThumbnail?: ({ item, selected, }: CollectionThumbnailProps<T>) => React__default.ReactNode;
947
+ renderThumbnail?: ({ item, selected, size, }: CollectionThumbnailProps<T>) => React__default.ReactNode;
909
948
  renderAction?: "menu" | ((props: CollectionRenderActionProps<T>) => React__default.ReactNode);
910
949
  renderDetail?: (item: T, selected: boolean) => React__default.ReactNode;
911
950
  /** Callback when selection changes. If not provided, selection will be disabled. */
@@ -915,7 +954,7 @@ interface CollectionProps<T, M extends string = string> {
915
954
  /** Position of the detail content. Defaults to 'end'. */
916
955
  detailPosition?: "end" | "below";
917
956
  /** Size of the list items. Defaults to 'medium'. */
918
- size?: GridViewSize;
957
+ size?: CollectionItemSize;
919
958
  /** Size of the thumbnail. Defaults to 'auto', which will be based on the size prop. */
920
959
  thumbnailSize?: CollectionThumbnailSize;
921
960
  /** For testing: Override the hover state with a specific item ID */
@@ -942,6 +981,39 @@ interface CollectionProps<T, M extends string = string> {
942
981
  dragIndicatorStyle?: ListViewRowProps<M>["dragIndicatorStyle"];
943
982
  }
944
983
  declare const Collection: <T, M extends string = string>(props: CollectionProps<T, M> & React__default.RefAttributes<CollectionRef>) => React__default.ReactElement | null;
984
+ type CollectionItemSize = "xxs" | "xs" | "small" | "medium" | "large" | "xl";
985
+
986
+ type ColorSwatchSize = "xsmall" | "small" | "medium" | "large";
987
+ declare const colorSwatchSizeMap: {
988
+ xsmall: number;
989
+ small: number;
990
+ medium: number;
991
+ large: number;
992
+ };
993
+ declare const ColorSwatch: React__default.ForwardRefExoticComponent<{
994
+ color: string;
995
+ size?: ColorSwatchSize;
996
+ checked?: boolean;
997
+ } & React__default.ButtonHTMLAttributes<HTMLButtonElement> & React__default.RefAttributes<HTMLButtonElement>>;
998
+
999
+ type TokenValue = string | {
1000
+ ref: string;
1001
+ };
1002
+ type ColorSwatchControlProps = {
1003
+ options: TokenValue[];
1004
+ value?: TokenValue;
1005
+ /** @default "small" */
1006
+ size?: ColorSwatchSize;
1007
+ readOnly?: boolean;
1008
+ onValueChange?: (value: TokenValue) => void;
1009
+ onFocus?: React__default.FocusEventHandler<HTMLButtonElement>;
1010
+ onBlur?: React__default.FocusEventHandler<HTMLButtonElement>;
1011
+ className?: string;
1012
+ id?: string;
1013
+ style?: React__default.CSSProperties;
1014
+ disabled?: boolean;
1015
+ };
1016
+ declare function ColorSwatchControl(props: ColorSwatchControlProps): React__default.JSX.Element;
945
1017
 
946
1018
  type InputSize = "small" | "medium" | "large";
947
1019
 
@@ -975,6 +1047,8 @@ type SubmittableProps = Props$d & {
975
1047
  onSubmit: (value: string) => void;
976
1048
  allowSubmittingWithSameValue?: boolean;
977
1049
  submitAutomaticallyAfterDelay?: number;
1050
+ /** @default true */
1051
+ submitOnBlur?: boolean;
978
1052
  };
979
1053
  type TextInputProps = ReadOnlyProps | ControlledProps | SubmittableProps;
980
1054
 
@@ -1118,6 +1192,8 @@ interface ComboboxMenuProps<T extends string> {
1118
1192
  listSize: Size;
1119
1193
  style?: React__default.CSSProperties;
1120
1194
  indented?: boolean;
1195
+ /** @default right */
1196
+ iconPosition?: "left" | "right";
1121
1197
  }
1122
1198
  declare const ComboboxMenu: <T extends string>(props: ComboboxMenuProps<T> & React__default.RefAttributes<IVirtualizedList>) => React__default.ReactElement | null;
1123
1199
 
@@ -1270,7 +1346,7 @@ declare const DropdownMenu: <T extends string>(props: MenuProps<T> & {
1270
1346
  onCloseAutoFocus?: React__default.EventHandler<SyntheticEvent<unknown>>;
1271
1347
  emptyState?: React__default.ReactNode;
1272
1348
  contentStyle?: React__default.CSSProperties;
1273
- } & Pick<RadixDropdownMenu.DropdownMenuContentProps & React__default.RefAttributes<HTMLDivElement>, "align" | "side" | "sideOffset" | "alignOffset" | "collisionPadding"> & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement | null;
1349
+ } & Pick<RadixDropdownMenu.DropdownMenuContentProps & React__default.RefAttributes<HTMLDivElement>, "align" | "sideOffset" | "side" | "alignOffset" | "collisionPadding"> & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement | null;
1274
1350
 
1275
1351
  type RenderPreviewProps = {
1276
1352
  children: string;
@@ -1330,9 +1406,10 @@ declare const FileExplorerUploadButton: ({ showUploadButton, onUpload, children,
1330
1406
  children?: React__default.ReactNode;
1331
1407
  }) => React__default.JSX.Element;
1332
1408
  declare const FileExplorerCollection: <T, M extends string = string>(props: CollectionProps<T, M> & React__default.RefAttributes<CollectionRef>) => React__default.ReactElement | null;
1333
- declare const FileExplorerDetail: ({ selected, children, }: {
1409
+ declare const FileExplorerDetail: ({ selected, size, children, }: {
1334
1410
  selected: boolean;
1335
1411
  children: React__default.ReactNode;
1412
+ size?: CollectionItemSize;
1336
1413
  }) => React__default.JSX.Element;
1337
1414
  declare const FileExplorerEmptyState: ({ label, ...props }: BannerProps$1) => React__default.JSX.Element;
1338
1415
 
@@ -1393,6 +1470,14 @@ interface Props$8 {
1393
1470
  }
1394
1471
  declare const GradientPicker: React$1.NamedExoticComponent<Props$8>;
1395
1472
 
1473
+ declare const getGridSize: (size: CollectionItemSize) => {
1474
+ minColumnWidth: string;
1475
+ gap: number;
1476
+ };
1477
+ declare const Grid: <T, M extends string = string>(props: CollectionProps<T, M> & {
1478
+ ref?: React__default.ForwardedRef<CollectionRef>;
1479
+ } & React__default.RefAttributes<CollectionRef>) => React__default.ReactElement | null;
1480
+
1396
1481
  interface ItemProps<MenuItemType extends string = string> {
1397
1482
  id: string;
1398
1483
  title?: ReactNode;
@@ -1531,6 +1616,7 @@ declare const LabeledField: React__default.NamedExoticComponent<{
1531
1616
  children: React__default.ReactNode;
1532
1617
  label: React__default.ReactNode;
1533
1618
  labelPosition?: LabelPosition;
1619
+ labelStyle?: React__default.CSSProperties;
1534
1620
  /** Used for both the `id` of the field and the `htmlFor` of the label, unless `id` and `htmlFor` are explicitly provided */
1535
1621
  fieldId?: string;
1536
1622
  className?: string;
@@ -1555,6 +1641,8 @@ type MediaThumbnailProps = {
1555
1641
  * If provided, use this icon instead of the default one for the asset type
1556
1642
  */
1557
1643
  iconName?: IconName;
1644
+ size?: CollectionItemSize;
1645
+ fileName?: string;
1558
1646
  };
1559
1647
  declare const getThumbnailColors: (colorScheme: ColorScheme$1, selected: boolean) => {
1560
1648
  icon: string;
@@ -1579,6 +1667,9 @@ declare const PipelineResultLink: ({ url }: {
1579
1667
  declare const PipelineResultLayout: ({ children, }: {
1580
1668
  children: React__default.ReactNode;
1581
1669
  }) => React__default.JSX.Element;
1670
+ declare function getPipelineResultLink(value: unknown): {
1671
+ url: string;
1672
+ } | undefined;
1582
1673
 
1583
1674
  type PopoverVariant = "normal" | "large";
1584
1675
  interface Props$7 extends Pick<ComponentProps<(typeof PopoverPrimitive)["Content"]>, "onOpenAutoFocus" | "onCloseAutoFocus" | "onPointerDownOutside" | "onInteractOutside" | "onFocusOutside" | "side"> {
@@ -1655,6 +1746,13 @@ type SegmentedControlItemProps<T extends string> = {
1655
1746
  } & Pick<SelectableMenuItem<T>, "value" | "disabled" | "icon" | "role" | "title">;
1656
1747
  declare const SegmentedControl: <T extends string>(props: SegmentedControlProps<T>) => React__default.ReactElement | null;
1657
1748
 
1749
+ type SelectionToolbarProps<T extends string> = {
1750
+ rect: Rect;
1751
+ menuItems: MenuItem$1<T>[];
1752
+ onSelectMenuItem: (item: T) => void;
1753
+ };
1754
+ declare const SelectionToolbar: <T extends string>(props: SelectionToolbarProps<T>) => React__default.ReactElement | null;
1755
+
1658
1756
  type Props$5<T extends string> = {
1659
1757
  id?: string;
1660
1758
  style?: React__default.CSSProperties;
@@ -1746,6 +1844,7 @@ declare const ToastProvider: ({ children }: {
1746
1844
  interface Props$1 {
1747
1845
  children: React$1.ReactNode;
1748
1846
  content: React$1.ReactNode;
1847
+ sideOffset?: number;
1749
1848
  }
1750
1849
  declare const Tooltip: React$1.NamedExoticComponent<Props$1>;
1751
1850
 
@@ -1856,7 +1955,10 @@ type DialogContextValue = {
1856
1955
  placeholder?: string;
1857
1956
  initialValue?: string;
1858
1957
  })): Promise<string | undefined>;
1859
- openConfirmationDialog(options: string | BaseDialogContents): Promise<boolean>;
1958
+ openConfirmationDialog(options: string | (BaseDialogContents & {
1959
+ confirmButtonLabel?: string;
1960
+ cancelButtonLabel?: string;
1961
+ })): Promise<boolean>;
1860
1962
  containsElement(element: HTMLElement): boolean;
1861
1963
  };
1862
1964
  type BaseDialogContents = {
@@ -1874,7 +1976,10 @@ declare function useOpenInputDialog(): (options: string | (BaseDialogContents &
1874
1976
  initialValue?: string;
1875
1977
  })) => Promise<string | undefined>;
1876
1978
  declare function useDialogContainsElement(): (element: HTMLElement) => boolean;
1877
- declare function useOpenConfirmationDialog(): (options: string | BaseDialogContents) => Promise<boolean>;
1979
+ declare function useOpenConfirmationDialog(): (options: string | (BaseDialogContents & {
1980
+ confirmButtonLabel?: string;
1981
+ cancelButtonLabel?: string;
1982
+ })) => Promise<boolean>;
1878
1983
  declare function useOpenDialog(): (options: BaseDialogContents & {
1879
1984
  children: ReactNode | ((props: RenderableProps) => ReactNode);
1880
1985
  }) => Promise<void>;
@@ -2011,7 +2116,7 @@ declare const mediaQuery: {
2011
2116
  };
2012
2117
 
2013
2118
  type ClassNameItem = string | number | BigInt | boolean | null | undefined;
2014
- type Category = "text" | "color" | "font" | "flex";
2119
+ type Category = "text" | "color" | "font" | "flex" | "position";
2015
2120
  type Options = {
2016
2121
  categories?: Category[];
2017
2122
  };
@@ -2064,11 +2169,17 @@ declare class ComboboxState<T extends string> {
2064
2169
  setSelectedIndex(index: number): void;
2065
2170
  submitArbitraryFilter(filter: string): void;
2066
2171
  }
2067
- declare function getNextIndex<T>(items: T[], currentIndex: number, direction: "next" | "previous", isDisabled: (item: T) => boolean): number;
2172
+ declare function filterWithGroupedSections<T extends string>(items: MenuItem<T>[], query: string): ScoredMenuItem<T>[];
2173
+ declare function getNextIndex<T>({ items, currentIndex, direction, isDisabled, }: {
2174
+ items: T[];
2175
+ currentIndex: number;
2176
+ direction: "next" | "previous";
2177
+ isDisabled: (item: T) => boolean;
2178
+ }): number;
2068
2179
  declare function useComboboxState<T extends string>(state: ComboboxState<T>): ComboboxStateSnapshot<T>;
2069
2180
 
2070
2181
  type MoveOptions = {
2071
- indexPaths: number[][];
2182
+ paths: number[][];
2072
2183
  to: number[];
2073
2184
  };
2074
2185
  type MoveTreeItemOptions<T> = {
@@ -2188,9 +2299,9 @@ interface ToolbarProps<T extends string = string> {
2188
2299
  shouldBindKeyboardShortcuts?: boolean;
2189
2300
  }
2190
2301
  declare function Toolbar<T extends string = string>({ children, logo, leftMenuItems, rightMenuItems, onSelectMenuItem, shouldBindKeyboardShortcuts, }: ToolbarProps<T>): React__default.JSX.Element;
2191
- declare function ToolbarMenu<T extends string>({ items, onSelectMenuItem, }: {
2302
+ declare const ToolbarMenu: <T extends string>(props: {
2192
2303
  items: MenuItem<T>[];
2193
2304
  onSelectMenuItem?: (value: T) => void;
2194
- }): React__default.JSX.Element;
2305
+ }) => React__default.ReactElement | null;
2195
2306
 
2196
- export { AIAssistantInput, AIAssistantLayout, AIAssistantLoadingIndicator, type AcceptsDropOptions, ActionMenu, ActivityIndicator, AnimatePresence, type AnimatePresenceProps, Avatar, type AvatarProps, AvatarStack, Banner, type BannerProps, type BaseComboboxProps, BaseToolbar, type BaseToolbarProps, Body, BreadcrumbText, Button, type ButtonRootProps, CHECKBOX_INDENT_WIDTH, CHECKBOX_RIGHT_INSET, CHECKBOX_WIDTH, CONTENT_AREA_ID, Checkbox$1 as Checkbox, Chip, type ChipProps, Collection, type CollectionProps, type CollectionRef, type CollectionRenderActionProps, type CollectionThumbnailProps, type CollectionThumbnailSize, type CollectionViewType, Combobox, ComboboxMenu, type ComboboxProps, type ComboboxRef, ComboboxState, type ComboboxStateSnapshot, CommandPalette, ConnectedUsersMenuLayout, ContextMenu, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, type DetectSizeType, Dialog, type DialogContextValue, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, type DragIndicatorStyleProps, DraggableMenuButton, Drawer, type DrawerProps, type DropValidator, DropdownMenu, type DropdownRootProps, EDITOR_PANEL_GROUP_ID, type EditableRowProps, EditableText, type EditableTextRef, type ExtractMenuItemType, Fade, type FadeDirection, type FadeProps, FileExplorerCollection, FileExplorerDetail, FileExplorerEmptyState, FileExplorerLayout, FileExplorerUploadButton, FillInputField, FillPreviewBackground, FloatingWindow, FloatingWindowProvider, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, GradientPicker, Grid, GridView, type GridViewSize, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, INPUT_HEIGHT, type IScoredItem, type ISearchCompletionMenu, type IToken, type IVirtualizedList, IconButton, type IconName, type ImageDataContextValue, ImageDataProvider, IndentContext, InputField, type InputFieldInputProps, type InputFieldProps, type InputFieldSize, InspectorContainer, InspectorPrimitives, Italic, KeyboardShortcut, LEFT_SIDEBAR_ID, Label, LabelContext, type LabelPosition, LabelPositionContext, type LabelPositionContextValue, type LabelProps, LabelWidthContext, type LabelWidthContextValue, LabeledElementView, LabeledField, type LayoutProps, List, type ListRowMarginType, type ListRowPosition, ListView, type ListViewItemInfo, type ListViewRootProps, type ListViewRowProps, Logo, type MatchRange, MediaThumbnail, type MenuComponents, type MenuConfig, type MenuItem, type MenuItemIcon, type MenuItemProps, type MenuItemRole, type MenuProps, MenuViewport, Message, type MessageProps, type MoveTreeItemOptions, type NonSelectableMenuItem, type OptionModeOnlyProps, type OptionModeProps, type Optional, type PanelLayoutState, PatternPreviewBackground, type PercentageSidebarOptions, PipelineResultLayout, PipelineResultLink, Popover, Progress, RIGHT_SIDEBAR_ID, type RelativeDropPosition, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, type ScoredMenuItem, ScrollArea, SearchCompletionMenu, Section$1 as Section, SectionHeader$1 as SectionHeader, type SectionHeaderMenuItem, type SectionProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectMenu, type SelectableMenuItem, type SeparatorItem, type SetNumberMode, type SideOptions, type SideType, type SidebarRef, type SketchPattern, Slider, Small, Sortable, type SortableItemContextProps, Spacer, type StringModeOnlyProps, type StringModeProps, type SupportedCanvasUploadType, type SupportedImageUploadType, Switch, Text$1 as Text, TextArea, TextAreaRow, type TextProps, type Theme, type ThemeColor, Toast, ToastProvider, Toolbar, ToolbarMenu, type ToolbarProps, Tooltip, TreeView, type UseThemeReturnType, UserAvatar, UserPointer, type UserPointerProps, WorkspaceLayout, type WorkspaceLayoutProps, type WorkspaceLayoutRef, acceptsDrop, colorForStringValues, colorFromString, createSectionedMenu, cssVars, cx, defaultAcceptsDrop, fuzzyFilter, fuzzyScore, fuzzyTokenize, getFieldSpacing, getGradientBackground, getGridSize, getKeyboardShortcutsForMenuItems, getMenuItemKey, getNewValue, getNextIndex, getThumbnailColors, isMenuItemSectionHeader, isNonSelectableMenuItem, isSelectableMenuItem, isSelectableMenuItemWithScore, labeledFieldStyles, mediaQuery, mergeConflictingClassNames, moveTreeItem, normalizeListTargetIndex, popoverStyle, renderIcon, rgbaToSketchColor, separator, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, styles, textStyles, updateSelection, useAutoResize, useComboboxState, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDialogContainsElement, useDialogContext, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useIndent, useInputFieldContext, useLabel, useLabelPosition, useLabelWidth, useOpenConfirmationDialog, useOpenDialog, useOpenInputDialog, usePlatform, usePlatformModKey, usePreservePanelSize, useTheme, validateDropIndicator, withSeparatorElements };
2307
+ export { AIAssistantInput, AIAssistantLayout, AIAssistantLoadingIndicator, type AcceptsDropOptions, ActionMenu, ActivityIndicator, AnimatePresence, type AnimatePresenceProps, Avatar, type AvatarProps, AvatarStack, Banner, type BannerProps, type BaseComboboxProps, BaseToolbar, type BaseToolbarProps, Body, BreadcrumbSlash, BreadcrumbText, Button, type ButtonRootProps, CHECKBOX_INDENT_WIDTH, CHECKBOX_RIGHT_INSET, CHECKBOX_WIDTH, CONTENT_AREA_ID, 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, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, type DetectSizeType, Dialog, type DialogContextValue, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, type DragIndicatorStyleProps, DraggableMenuButton, Drawer, type DrawerProps, type DropValidator, DropdownMenu, type DropdownRootProps, EDITOR_PANEL_GROUP_ID, type EditableRowProps, EditableText, type EditableTextRef, type ExtractMenuItemType, Fade, type FadeDirection, type FadeProps, FileExplorerCollection, FileExplorerDetail, FileExplorerEmptyState, FileExplorerLayout, FileExplorerUploadButton, FillInputField, FillPreviewBackground, FloatingWindow, FloatingWindowProvider, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, GradientPicker, Grid, GridView, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, INPUT_HEIGHT, type IScoredItem, type ISearchCompletionMenu, type IToken, type IVirtualizedList, IconButton, type IconName, type ImageDataContextValue, ImageDataProvider, IndentContext, InputField, type InputFieldInputProps, type InputFieldProps, type InputFieldSize, InspectorContainer, InspectorPrimitives, Italic, KeyboardShortcut, LEFT_SIDEBAR_ID, Label, LabelContext, type LabelPosition, LabelPositionContext, type LabelPositionContextValue, type LabelProps, LabelWidthContext, type LabelWidthContextValue, LabeledElementView, LabeledField, type LayoutProps, List, type ListRowMarginType, type ListRowPosition, ListView, type ListViewItemInfo, type ListViewRootProps, type ListViewRowProps, Logo, type MatchRange, MediaThumbnail, type MenuComponents, type MenuConfig, type MenuItem, type MenuItemIcon, type MenuItemProps, type MenuItemRole, type MenuProps, MenuViewport, Message, type MessageProps, type MoveTreeItemOptions, type NonSelectableMenuItem, type OptionModeOnlyProps, type OptionModeProps, type Optional, type PanelLayoutState, PatternPreviewBackground, type PercentageSidebarOptions, PipelineResultLayout, PipelineResultLink, Popover, Progress, RIGHT_SIDEBAR_ID, type RelativeDropPosition, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, type ScoredMenuItem, ScrollArea, SearchCompletionMenu, Section$1 as Section, SectionHeader$1 as SectionHeader, type SectionHeaderMenuItem, type SectionProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectMenu, type SelectableMenuItem, SelectionToolbar, type SeparatorItem, type SetNumberMode, type SideOptions, type SideType, type SidebarRef, type SketchPattern, Slider, Small, Sortable, type SortableItemContextProps, Spacer, type StringModeOnlyProps, type StringModeProps, type SupportedCanvasUploadType, type SupportedImageUploadType, Switch, Text$1 as Text, TextArea, TextAreaRow, type TextProps, type Theme, type ThemeColor, Toast, ToastProvider, type TokenValue, Toolbar, ToolbarMenu, type ToolbarProps, Tooltip, TreeView, type UseThemeReturnType, UserAvatar, UserPointer, type UserPointerProps, WorkspaceLayout, type WorkspaceLayoutProps, type WorkspaceLayoutRef, acceptsDrop, colorForStringValues, colorFromString, colorSwatchSizeMap, createSectionedMenu, cssVarNames, cssVars, cx, defaultAcceptsDrop, filterWithGroupedSections, fuzzyFilter, fuzzyScore, fuzzyTokenize, getFieldSpacing, getGradientBackground, getGridSize, getKeyboardShortcutsForMenuItems, getMenuItemKey, getNewValue, getNextIndex, getPipelineResultLink, getThumbnailColors, isMenuItemSectionHeader, isNonSelectableMenuItem, isSelectableMenuItem, isSelectableMenuItemWithScore, labeledFieldStyles, mediaQuery, mergeConflictingClassNames, moveTreeItem, normalizeListTargetIndex, popoverStyle, renderIcon, rgbaToSketchColor, separator, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, styles, textStyles, updateSelection, useAutoResize, useComboboxState, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDialogContainsElement, useDialogContext, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useIndent, useInputFieldContext, useLabel, useLabelPosition, useLabelWidth, useOpenConfirmationDialog, useOpenDialog, useOpenInputDialog, usePlatform, usePlatformModKey, usePreservePanelSize, useTheme, validateDropIndicator, withSeparatorElements };