@noya-app/noya-designsystem 0.1.45 → 0.1.46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.mts CHANGED
@@ -1,14 +1,14 @@
1
1
  import * as React from 'react';
2
- import React__default, { CSSProperties, ReactNode, AriaRole, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, FocusEventHandler, InputHTMLAttributes, LabelHTMLAttributes, ForwardedRef, HTMLAttributes, ComponentProps, SyntheticEvent, ReactHTML } from 'react';
2
+ import React__default, { ReactHTML, ReactNode, CSSProperties, HTMLAttributes, AriaRole, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, FocusEventHandler, InputHTMLAttributes, LabelHTMLAttributes, ForwardedRef, ComponentProps, SyntheticEvent } from 'react';
3
3
  import { IItemScore } from 'vscode-fuzzy-scorer';
4
- import { Property } from 'csstype';
5
4
  import * as Icons from '@noya-app/noya-icons';
6
5
  export { Icons };
7
6
  import * as _noya_app_noya_geometry from '@noya-app/noya-geometry';
8
7
  import { Size } from '@noya-app/noya-geometry';
9
8
  import { useSortable } from '@dnd-kit/sortable';
9
+ import { Property } from 'csstype';
10
10
  import * as _noya_app_noya_designsystem from '@noya-app/noya-designsystem';
11
- import { ComboboxOption as ComboboxOption$1 } from '@noya-app/noya-designsystem';
11
+ import { SelectableMenuItem as SelectableMenuItem$1 } from '@noya-app/noya-designsystem';
12
12
  import * as DialogPrimitive from '@radix-ui/react-dialog';
13
13
  import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
14
14
  import { Sketch } from '@noya-app/noya-file-format';
@@ -21,13 +21,13 @@ import { SelectProps } from '@radix-ui/react-select';
21
21
  import { ImperativePanelGroupHandle } from 'react-resizable-panels';
22
22
  import { RgbaColor } from '@noya-app/noya-colorpicker';
23
23
 
24
- interface Props$d {
24
+ interface Props$e {
25
25
  size?: number;
26
26
  opacity?: number;
27
27
  color?: string;
28
28
  trackColor?: string;
29
29
  }
30
- declare const ActivityIndicator: React.NamedExoticComponent<Props$d>;
30
+ declare const ActivityIndicator: React.NamedExoticComponent<Props$e>;
31
31
 
32
32
  type AnimatePresenceProps = {
33
33
  children: React__default.ReactNode;
@@ -83,411 +83,555 @@ declare const AvatarStack: React__default.NamedExoticComponent<{
83
83
  className?: string;
84
84
  }>;
85
85
 
86
- type ButtonVariant = "normal" | "primary" | "secondary" | "secondaryBright" | "thin" | "floating" | "none";
87
- type ButtonSize = "small" | "normal" | "large" | "floating";
88
- interface ButtonRootProps {
89
- id?: string;
90
- className?: string;
91
- style?: CSSProperties;
92
- tabIndex?: number;
93
- children: ReactNode;
94
- active?: boolean;
95
- disabled?: boolean;
96
- variant?: ButtonVariant;
97
- size?: ButtonSize;
98
- tooltip?: ReactNode;
99
- onClick?: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
100
- onPointerDown?: (event: React__default.PointerEvent<HTMLButtonElement>) => void;
101
- contentStyle?: CSSProperties;
102
- as?: React__default.ElementType;
103
- htmlFor?: string;
104
- href?: string;
105
- target?: string;
106
- rel?: string;
107
- }
108
- declare const Button: React__default.ForwardRefExoticComponent<ButtonRootProps & React__default.RefAttributes<HTMLButtonElement>>;
109
-
110
- interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
111
- colorScheme?: "primary" | "secondary";
112
- }
113
- declare const Checkbox$1: React.MemoExoticComponent<React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>>;
114
-
115
- type ChipColorScheme = "primary" | "secondary" | "error";
116
- type ChipSize = "small" | "medium" | "large";
117
- type ChipVariant = "solid" | "outlined" | "ghost";
118
- interface ChipProps {
119
- id?: string;
120
- className?: string;
121
- colorScheme?: ChipColorScheme;
122
- variant?: ChipVariant;
123
- size?: ChipSize;
124
- children?: React__default.ReactNode;
125
- clickable?: boolean;
126
- deletable?: boolean;
127
- addable?: boolean;
128
- monospace?: boolean;
129
- onDelete?: () => void;
130
- onAdd?: () => void;
131
- onClick?: () => void;
132
- onHoverDeleteChange?: (hovering: boolean) => void;
133
- style?: React__default.CSSProperties;
134
- tabIndex?: number;
135
- }
136
- declare const Chip: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<ChipProps & React__default.RefAttributes<HTMLSpanElement>>>;
137
-
138
- declare function fuzzyScore({ item, query }: {
139
- item: string;
140
- query: string;
141
- }): IItemScore;
142
- type IScoredItem = IItemScore & {
143
- index: number;
144
- };
145
- declare function fuzzyFilter({ items, query, scoreThreshold, }: {
146
- items: string[];
147
- query: string;
148
- scoreThreshold?: number;
149
- }): IScoredItem[];
150
- type IToken = {
151
- type: 'text';
152
- text: string;
153
- } | {
154
- type: 'match';
155
- text: string;
156
- };
157
- type MatchRange = {
158
- start: number;
159
- end: number;
86
+ declare const config: {
87
+ content: string[];
88
+ corePlugins: {
89
+ preflight: false;
90
+ };
91
+ theme: {
92
+ extend: {
93
+ colors: {
94
+ "logo-fill": string;
95
+ "logo-highlight": string;
96
+ background: string;
97
+ text: string;
98
+ "text-muted": string;
99
+ "text-subtle": string;
100
+ "text-disabled": string;
101
+ "text-decorative-light": string;
102
+ "divider-subtle": string;
103
+ divider: string;
104
+ "divider-strong": string;
105
+ primary: string;
106
+ "primary-light": string;
107
+ "primary-pastel": string;
108
+ secondary: string;
109
+ "secondary-light": string;
110
+ "secondary-pastel": string;
111
+ "secondary-bright": string;
112
+ "input-background": string;
113
+ "input-background-light": string;
114
+ "code-background": string;
115
+ "code-background-dark": string;
116
+ "selected-background": string;
117
+ "breadcrumb-text": string;
118
+ "breadcrumb-text-hover": string;
119
+ "breadcrumb-icon": string;
120
+ "canvas-background": string;
121
+ "canvas-grid": string;
122
+ "sidebar-background": string;
123
+ "sidebar-background-transparent": string;
124
+ "popover-background": string;
125
+ "popover-divider": string;
126
+ "listview-raised-background": string;
127
+ "listview-editing-background": string;
128
+ "slider-thumb-background": string;
129
+ "slider-border": string;
130
+ "segmented-control-item": string;
131
+ mask: string;
132
+ "transparent-checker": string;
133
+ scrollbar: string;
134
+ "placeholder-dots": string;
135
+ "drag-outline": string;
136
+ "active-background": string;
137
+ "thumbnail-background": string;
138
+ "thumbnail-shadow": string;
139
+ "inline-code-text": string;
140
+ "inline-code-background": string;
141
+ "text-link": string;
142
+ "text-link-focused": string;
143
+ icon: string;
144
+ "icon-selected": string;
145
+ warning: string;
146
+ dot: string;
147
+ "row-highlight": string;
148
+ "table-row-background": string;
149
+ "chip-primary-bg": string;
150
+ "chip-secondary-bg": string;
151
+ "chip-error-bg": string;
152
+ "chip-default-bg": string;
153
+ "chip-primary-shadow": string;
154
+ "chip-secondary-shadow": string;
155
+ "chip-error-shadow": string;
156
+ "chip-default-shadow": string;
157
+ "floating-button": string;
158
+ };
159
+ fontFamily: {
160
+ sans: [string, string, string, string, string, string, string, string, string, string];
161
+ mono: [string, string, string, string, string];
162
+ };
163
+ fontSize: {
164
+ title: [string, {
165
+ lineHeight: string;
166
+ letterSpacing: string;
167
+ }];
168
+ subtitle: [string, {
169
+ lineHeight: string;
170
+ letterSpacing: string;
171
+ }];
172
+ heading1: [string, {
173
+ lineHeight: string;
174
+ letterSpacing: string;
175
+ }];
176
+ heading2: [string, {
177
+ lineHeight: string;
178
+ letterSpacing: string;
179
+ }];
180
+ heading3: [string, {
181
+ lineHeight: string;
182
+ letterSpacing: string;
183
+ }];
184
+ heading4: [string, {
185
+ lineHeight: string;
186
+ }];
187
+ heading5: [string, {
188
+ lineHeight: string;
189
+ }];
190
+ body: [string, {
191
+ lineHeight: string;
192
+ }];
193
+ small: [string, {
194
+ lineHeight: string;
195
+ }];
196
+ code: [string, {
197
+ lineHeight: string;
198
+ }];
199
+ button: [string, {
200
+ lineHeight: string;
201
+ letterSpacing: string;
202
+ }];
203
+ label: [string, {
204
+ lineHeight: string;
205
+ letterSpacing: string;
206
+ }];
207
+ };
208
+ spacing: {
209
+ nano: string;
210
+ micro: string;
211
+ small: string;
212
+ medium: string;
213
+ large: string;
214
+ xlarge: string;
215
+ xxlarge: string;
216
+ "inset-top": string;
217
+ "sidebar-width": string;
218
+ "toolbar-height": string;
219
+ "toolbar-separator": string;
220
+ "inspector-h-separator": string;
221
+ "inspector-v-separator": string;
222
+ "dialog-padding": string;
223
+ };
224
+ keyframes: {
225
+ spin: {
226
+ "0%": {
227
+ transform: string;
228
+ };
229
+ "100%": {
230
+ transform: string;
231
+ };
232
+ };
233
+ shimmer: {
234
+ "0%": {
235
+ backgroundPosition: string;
236
+ };
237
+ "100%": {
238
+ backgroundPosition: string;
239
+ };
240
+ };
241
+ };
242
+ animation: {
243
+ spin: string;
244
+ shimmer: string;
245
+ };
246
+ zIndex: {
247
+ interactable: string;
248
+ label: string;
249
+ menu: string;
250
+ };
251
+ };
252
+ };
253
+ safelist: string[];
160
254
  };
161
- declare function fuzzyTokenize({ item, itemScore, }: {
162
- item: string;
163
- itemScore: IItemScore;
164
- }): IToken[];
165
255
 
166
- type ComboboxOption = {
167
- type?: undefined;
168
- id: string;
169
- name: string;
170
- icon?: ReactNode;
171
- shortcut?: string;
172
- disabled?: boolean;
173
- alwaysInclude?: boolean;
174
- checked?: boolean;
175
- };
176
- type ComboboxSectionHeader = {
177
- type: "sectionHeader";
178
- id: string;
179
- name: string;
180
- maxVisibleItems?: number;
181
- };
182
- type ComboboxItem = ComboboxOption | ComboboxSectionHeader;
183
- type InternalComboboxItem = (ComboboxOption & IScoredItem) | ComboboxSectionHeader;
184
- type ComboboxStateSnapshot = {
185
- filter: string;
186
- selectedIndex: number;
187
- filteredItems: InternalComboboxItem[];
188
- lastSubmittedValue: {
189
- filter: string;
190
- itemName: string;
256
+ type Theme = (typeof config.theme)["extend"];
257
+ type ThemeColor = keyof Theme["colors"];
258
+ declare const cssVars: {
259
+ colors: {
260
+ logoFill: string;
261
+ logoHighlight: string;
262
+ background: string;
263
+ text: string;
264
+ textMuted: string;
265
+ textSubtle: string;
266
+ textDisabled: string;
267
+ textDecorativeLight: string;
268
+ dividerSubtle: string;
269
+ divider: string;
270
+ dividerStrong: string;
271
+ primary: string;
272
+ primaryLight: string;
273
+ primaryPastel: string;
274
+ secondary: string;
275
+ secondaryLight: string;
276
+ secondaryPastel: string;
277
+ secondaryBright: string;
278
+ inputBackground: string;
279
+ inputBackgroundLight: string;
280
+ codeBackground: string;
281
+ codeBackgroundDark: string;
282
+ selectedBackground: string;
283
+ breadcrumbText: string;
284
+ breadcrumbTextHover: string;
285
+ breadcrumbIcon: string;
286
+ canvasBackground: string;
287
+ canvasGrid: string;
288
+ sidebarBackground: string;
289
+ sidebarBackgroundTransparent: string;
290
+ popoverBackground: string;
291
+ popoverDivider: string;
292
+ listviewRaisedBackground: string;
293
+ listviewEditingBackground: string;
294
+ sliderThumbBackground: string;
295
+ sliderBorder: string;
296
+ segmentedControlItem: string;
297
+ mask: string;
298
+ transparentChecker: string;
299
+ scrollbar: string;
300
+ placeholderDots: string;
301
+ dragOutline: string;
302
+ activeBackground: string;
303
+ thumbnailBackground: string;
304
+ thumbnailShadow: string;
305
+ inlineCodeText: string;
306
+ inlineCodeBackground: string;
307
+ textLink: string;
308
+ textLinkFocused: string;
309
+ icon: string;
310
+ iconSelected: string;
311
+ warning: string;
312
+ dot: string;
313
+ rowHighlight: string;
314
+ tableRowBackground: string;
315
+ chipPrimaryBg: string;
316
+ chipSecondaryBg: string;
317
+ chipErrorBg: string;
318
+ chipDefaultBg: string;
319
+ chipPrimaryShadow: string;
320
+ chipSecondaryShadow: string;
321
+ chipErrorShadow: string;
322
+ chipDefaultShadow: string;
323
+ floatingButton: string;
324
+ };
325
+ fontFamily: {
326
+ sans: [string, string, string, string, string, string, string, string, string, string];
327
+ mono: [string, string, string, string, string];
328
+ };
329
+ fontSize: {
330
+ title: [string, {
331
+ lineHeight: string;
332
+ letterSpacing: string;
333
+ }];
334
+ subtitle: [string, {
335
+ lineHeight: string;
336
+ letterSpacing: string;
337
+ }];
338
+ heading1: [string, {
339
+ lineHeight: string;
340
+ letterSpacing: string;
341
+ }];
342
+ heading2: [string, {
343
+ lineHeight: string;
344
+ letterSpacing: string;
345
+ }];
346
+ heading3: [string, {
347
+ lineHeight: string;
348
+ letterSpacing: string;
349
+ }];
350
+ heading4: [string, {
351
+ lineHeight: string;
352
+ }];
353
+ heading5: [string, {
354
+ lineHeight: string;
355
+ }];
356
+ body: [string, {
357
+ lineHeight: string;
358
+ }];
359
+ small: [string, {
360
+ lineHeight: string;
361
+ }];
362
+ code: [string, {
363
+ lineHeight: string;
364
+ }];
365
+ button: [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
+ };
390
+ keyframes: {
391
+ spin: {
392
+ "0%": {
393
+ transform: string;
394
+ };
395
+ "100%": {
396
+ transform: string;
397
+ };
398
+ };
399
+ shimmer: {
400
+ "0%": {
401
+ backgroundPosition: string;
402
+ };
403
+ "100%": {
404
+ backgroundPosition: string;
405
+ };
406
+ };
407
+ };
408
+ animation: {
409
+ spin: string;
410
+ shimmer: string;
411
+ };
412
+ zIndex: {
413
+ interactable: string;
414
+ label: string;
415
+ menu: string;
191
416
  };
192
417
  };
193
- declare class ComboboxState {
194
- private filter;
195
- private selectedIndex;
196
- private items;
197
- private lastSubmittedValue;
198
- private subscribers;
199
- private version;
200
- private _cachedSnapshot;
201
- constructor(items: ComboboxItem[], initialValue: string, allowArbitraryValues: boolean);
202
- subscribe: (listener: () => void) => (() => void);
203
- private notifyChange;
204
- private getFilteredItems;
205
- getSnapshot: () => ComboboxStateSnapshot;
206
- setItems(items: ComboboxItem[]): void;
207
- setFilter(filter: string): void;
208
- moveSelection(direction: "up" | "down"): void;
209
- selectCurrentItem(item?: InternalComboboxItem): InternalComboboxItem | undefined;
210
- restoreLastSubmittedValue(): void;
211
- reset(newFilter?: string): void;
212
- getSelectedItem(): InternalComboboxItem | undefined;
213
- getTypeaheadValue(): string | undefined;
214
- setSelectedIndex(index: number): void;
215
- submitArbitraryFilter(filter: string): void;
216
- }
217
- declare function getNextIndex<T>(items: T[], currentIndex: number, direction: "next" | "previous", isDisabled: (item: T) => boolean): number;
218
- declare function useComboboxState(state: ComboboxState): ComboboxStateSnapshot;
219
-
220
- type IconName = keyof typeof Icons;
221
418
 
222
- declare function renderIcon(iconName: Exclude<React.ReactNode, string> | IconName): React.ReactNode;
419
+ type KebabToCamelCase<S extends string> = S extends `${infer First}-${infer Rest}` ? `${First}${Capitalize<KebabToCamelCase<Rest>>}` : S;
223
420
 
224
- type SeparatorItem = {
225
- type: "separator";
226
- };
227
- type MenuItemRole = "undo" | "redo" | "cut" | "copy" | "paste" | "pasteAndMatchStyle" | "delete" | "selectAll" | "reload" | "forceReload" | "toggleDevTools" | "resetZoom" | "zoomIn" | "zoomOut" | "toggleSpellChecker" | "togglefullscreen" | "window" | "minimize" | "close" | "help" | "about" | "services" | "hide" | "hideOthers" | "unhide" | "quit" | "showSubstitutions" | "toggleSmartQuotes" | "toggleSmartDashes" | "toggleTextReplacement" | "startSpeaking" | "stopSpeaking" | "zoom" | "front" | "appMenu" | "fileMenu" | "editMenu" | "viewMenu" | "shareMenu" | "recentDocuments" | "toggleTabBar" | "selectNextTab" | "selectPreviousTab" | "mergeAllWindows" | "clearRecentDocuments" | "moveTabToNewWindow" | "windowMenu";
228
- type RegularMenuItem<T extends string> = {
229
- value?: T;
230
- title: ReactNode;
231
- shortcut?: string;
232
- checked?: boolean;
233
- disabled?: boolean;
234
- icon?: Exclude<ReactNode, string> | IconName;
235
- items?: MenuItem<T>[];
236
- role?: MenuItemRole;
237
- type?: undefined;
238
- alwaysInclude?: boolean;
239
- };
240
- type SectionHeaderMenuItem = {
241
- type: "sectionHeader";
242
- id: string;
243
- title: string;
244
- maxVisibleItems?: number;
245
- variant?: "normal" | "label";
246
- };
247
- type MenuItem<T extends string> = SeparatorItem | RegularMenuItem<T> | SectionHeaderMenuItem;
248
- type ExtractMenuItemType<T> = T extends RegularMenuItem<infer U> ? U : never;
249
- declare const CHECKBOX_WIDTH = 16;
250
- declare const CHECKBOX_RIGHT_INSET = 8;
251
- declare const styles: {
252
- separatorStyle: string;
253
- itemStyle: ({ disabled }: {
254
- disabled?: boolean;
255
- }) => string;
256
- itemIndicatorStyle: string;
257
- contentStyle: string;
421
+ type Variant = "title" | "subtitle" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "body" | "small" | "button" | "code" | "label";
422
+ declare const textStyles: Record<Variant, string>;
423
+ type TextProps = {
424
+ as?: keyof ReactHTML;
425
+ href?: string;
426
+ className?: string;
427
+ style?: React__default.CSSProperties;
428
+ variant: Variant;
429
+ color?: KebabToCamelCase<ThemeColor>;
430
+ children: ReactNode;
431
+ id?: string;
432
+ onClick?: () => void;
433
+ onDoubleClick?: () => void;
434
+ onKeyDown?: (event: React__default.KeyboardEvent<HTMLSpanElement>) => void;
435
+ tabIndex?: number;
258
436
  };
259
- declare function getKeyboardShortcutsForMenuItems<T extends string>(menuItems: MenuItem<T>[], onSelect: (type: T) => void): Record<string, () => void>;
260
- declare const KeyboardShortcut: React__default.NamedExoticComponent<{
261
- shortcut: string;
262
- }>;
263
- declare const SectionHeader$1: React__default.NamedExoticComponent<Omit<SectionHeaderMenuItem, "type" | "maxVisibleItems"> & {
264
- isFirst?: boolean;
265
- indented?: boolean;
266
- }>;
437
+ declare const Text$1: React__default.ForwardRefExoticComponent<TextProps & React__default.RefAttributes<HTMLElement>>;
438
+ type PresetProps = Omit<TextProps, "variant">;
439
+ declare const Heading1: React__default.ForwardRefExoticComponent<PresetProps & React__default.RefAttributes<HTMLElement>>;
440
+ declare const Heading2: React__default.ForwardRefExoticComponent<PresetProps & React__default.RefAttributes<HTMLElement>>;
441
+ declare const Heading3: React__default.ForwardRefExoticComponent<PresetProps & React__default.RefAttributes<HTMLElement>>;
442
+ declare const Heading4: React__default.ForwardRefExoticComponent<PresetProps & React__default.RefAttributes<HTMLElement>>;
443
+ declare const Heading5: React__default.ForwardRefExoticComponent<PresetProps & React__default.RefAttributes<HTMLElement>>;
444
+ declare const Body: React__default.ForwardRefExoticComponent<PresetProps & React__default.RefAttributes<HTMLElement>>;
445
+ declare const Small: React__default.ForwardRefExoticComponent<PresetProps & React__default.RefAttributes<HTMLElement>>;
446
+ declare const Italic: ({ children }: {
447
+ children: ReactNode;
448
+ }) => React__default.JSX.Element;
267
449
 
268
- type Props$c = {
450
+ type BreadcrumbTextProps = Omit<TextProps, "variant" | "whiteSpace" | "lineHeight" | "userSelect">;
451
+ declare const BreadcrumbText: React__default.ForwardRefExoticComponent<BreadcrumbTextProps & React__default.RefAttributes<HTMLSpanElement>>;
452
+
453
+ type ButtonVariant = "normal" | "primary" | "secondary" | "secondaryBright" | "thin" | "floating" | "none";
454
+ type ButtonSize = "small" | "normal" | "large" | "floating";
455
+ interface ButtonRootProps {
269
456
  id?: string;
270
- style?: any;
271
457
  className?: string;
272
- type?: "text" | "search";
458
+ style?: CSSProperties;
459
+ tabIndex?: number;
460
+ children: ReactNode;
461
+ active?: boolean;
273
462
  disabled?: boolean;
274
- value: string;
275
- placeholder?: string;
276
- role?: AriaRole;
277
- name?: HTMLInputElement["name"];
278
- onKeyDown?: KeyboardEventHandler;
279
- onClick?: MouseEventHandler;
280
- onDoubleClick?: MouseEventHandler;
281
- onPointerDown?: PointerEventHandler;
282
- onFocusCapture?: FocusEventHandler;
283
- onFocusChange?: (isFocused: boolean) => void;
284
- onBlur?: FocusEventHandler;
285
- } & Pick<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "autoCapitalize" | "autoCorrect" | "spellCheck" | "autoFocus">;
286
- type ReadOnlyProps = Props$c & {
287
- readOnly: true;
288
- };
289
- type ControlledProps = Props$c & {
290
- onChange: (value: string) => void;
291
- onFocus?: FocusEventHandler;
292
- onBlur?: FocusEventHandler;
293
- };
294
- type SubmittableProps = Props$c & {
295
- onSubmit: (value: string) => void;
296
- allowSubmittingWithSameValue?: boolean;
297
- submitAutomaticallyAfterDelay?: number;
298
- };
299
- type TextInputProps = ReadOnlyProps | ControlledProps | SubmittableProps;
463
+ variant?: ButtonVariant;
464
+ size?: ButtonSize;
465
+ tooltip?: ReactNode;
466
+ onClick?: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
467
+ onPointerDown?: (event: React__default.PointerEvent<HTMLButtonElement>) => void;
468
+ contentStyle?: CSSProperties;
469
+ as?: React__default.ElementType;
470
+ htmlFor?: string;
471
+ href?: string;
472
+ target?: string;
473
+ rel?: string;
474
+ }
475
+ declare const Button: React__default.ForwardRefExoticComponent<ButtonRootProps & React__default.RefAttributes<HTMLButtonElement>>;
300
476
 
301
- type LabelPosition = "inset" | "start" | "end" | "above";
302
- interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
303
- /** @default start */
304
- position?: Exclude<LabelPosition, "inset">;
477
+ interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
478
+ colorScheme?: "primary" | "secondary";
305
479
  }
306
- type InsetLabelProps = {
307
- /** @default medium */
308
- size?: InputFieldSize;
309
- /** when used with an InputField.Root and label position is inset, it will add padding to the right of the label to account for the button */
310
- buttonSize?: number;
311
- } & LabelHTMLAttributes<HTMLLabelElement>;
312
- declare const insetLabelTextStyles = "font-sans text-label uppercase text-text-disabled leading-[19px] font-bold text-[60%] truncate pointer-events-none text-right";
313
- declare const insetLabelStyles = "flex items-center absolute top-0 bottom-0 z-label";
314
- declare const InsetLabel: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<{
315
- /** @default medium */
316
- size?: InputFieldSize;
317
- /** when used with an InputField.Root and label position is inset, it will add padding to the right of the label to account for the button */
318
- buttonSize?: number;
319
- } & React__default.LabelHTMLAttributes<HTMLLabelElement> & React__default.RefAttributes<HTMLLabelElement>>>;
320
- declare const Label: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<LabelProps & React__default.RefAttributes<HTMLLabelElement>>>;
480
+ declare const Checkbox$1: React.MemoExoticComponent<React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>>;
321
481
 
322
- type InputFieldSize = "small" | "medium" | "large";
323
- type InputFieldContextValue = {
324
- labelSize?: number;
325
- buttonSize?: number;
326
- /** @default medium */
327
- size: InputFieldSize;
328
- isFocused: boolean;
329
- onFocusChange: (isFocused: boolean) => void;
330
- inputRef?: ForwardedRef<HTMLInputElement>;
331
- setInputRef?: (ref: ForwardedRef<HTMLInputElement>) => void;
332
- setLabelWidth?: (width: number) => void;
333
- setButtonWidth?: (width: number) => void;
334
- id?: string;
335
- label?: ReactNode;
336
- labelPosition?: LabelPosition;
337
- };
338
- declare const useInputFieldContext: () => InputFieldContextValue;
339
- declare const getFieldSpacing: ({ buttonSize, labelSize, variant, }: {
340
- buttonSize?: number;
341
- labelSize?: number;
342
- variant?: InputFieldVariant;
343
- }) => {
344
- paddingLeft: string;
345
- paddingRight: string;
346
- };
347
- interface InputFieldDropdownProps<T extends string> {
482
+ type ChipColorScheme = "primary" | "secondary" | "error";
483
+ type ChipSize = "small" | "medium" | "large";
484
+ type ChipVariant = "solid" | "outlined" | "ghost";
485
+ interface ChipProps {
348
486
  id?: string;
349
- items: MenuItem<T>[];
350
- onSelect: (value: T) => void;
351
- children?: ReactNode;
352
- }
353
- type InputFieldVariant = "normal" | "bare";
354
- type InputFieldInputProps = TextInputProps & {
355
- textAlign?: Property.TextAlign;
356
- variant?: "bare";
357
- };
358
- type InputFieldNumberInputProps = Omit<TextInputProps, "value" | "onChange" | "onKeyDown" | "onSubmit" | "readOnly"> & {
359
- value: number | undefined;
360
- onNudge?: (value: number) => void;
361
- variant?: "bare";
362
- onFocus?: FocusEventHandler;
363
- onBlur?: FocusEventHandler;
364
- readOnly?: boolean;
365
487
  className?: string;
366
- } & ({
367
- onChange: (value: number) => void;
368
- } | {
369
- onSubmit: (value: number) => void;
370
- });
371
- declare function InputFieldNumberInput(props: InputFieldNumberInputProps): React__default.JSX.Element;
372
- interface InputFieldRootProps {
373
- id?: string;
374
- children?: ReactNode;
375
- width?: number;
376
- labelSize?: number;
377
- /** @default medium */
378
- size?: InputFieldSize;
379
- renderPopoverContent?: (options: {
380
- width: number;
381
- }) => ReactNode;
382
- /**
383
- * if there is a popover, this is the offset from the trigger
384
- * @default 3
385
- */
386
- sideOffset?: number;
387
- onFocusChange?: (isFocused: boolean) => void;
488
+ colorScheme?: ChipColorScheme;
489
+ variant?: ChipVariant;
490
+ size?: ChipSize;
491
+ children?: React__default.ReactNode;
492
+ clickable?: boolean;
493
+ deletable?: boolean;
494
+ addable?: boolean;
495
+ monospace?: boolean;
496
+ onDelete?: () => void;
497
+ onAdd?: () => void;
498
+ onClick?: () => void;
499
+ onHoverDeleteChange?: (hovering: boolean) => void;
388
500
  style?: React__default.CSSProperties;
389
- className?: string;
501
+ tabIndex?: number;
390
502
  }
391
- declare function InputFieldRoot({ id: idProp, children, width, sideOffset, labelSize, size, renderPopoverContent, onFocusChange, style, className, }: InputFieldRootProps): React__default.JSX.Element;
392
- type InputFieldProps = InputFieldRootProps & InputFieldInputProps;
393
- declare const InputField: React__default.ForwardRefExoticComponent<InputFieldProps & React__default.RefAttributes<HTMLInputElement>> & {
394
- readonly Root: React__default.MemoExoticComponent<typeof InputFieldRoot>;
395
- readonly Input: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<InputFieldInputProps & React__default.RefAttributes<HTMLInputElement>>>;
396
- readonly Typeahead: React__default.MemoExoticComponent<(props: {
397
- prefix: string;
398
- value: string;
399
- isFocused: boolean;
400
- }) => React__default.JSX.Element>;
401
- readonly NumberInput: React__default.MemoExoticComponent<typeof InputFieldNumberInput>;
402
- readonly DropdownMenu: <T extends string>(props: InputFieldDropdownProps<T>) => React__default.ReactElement | null;
403
- readonly Button: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<React__default.ButtonHTMLAttributes<HTMLButtonElement> & ButtonRootProps & {
404
- buttonClassName?: string;
405
- variant?: "floating" | "normal";
406
- } & React__default.RefAttributes<HTMLButtonElement>>>;
407
- readonly Label: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<React__default.LabelHTMLAttributes<HTMLLabelElement> & React__default.RefAttributes<HTMLLabelElement>>>;
408
- readonly PrimitiveElement: ({ readOnly, disabled, className, style, ...props }: {
409
- readOnly?: boolean;
410
- disabled?: boolean;
411
- } & React__default.DetailedHTMLProps<React__default.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>) => React__default.JSX.Element;
503
+ declare const Chip: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<ChipProps & React__default.RefAttributes<HTMLSpanElement>>>;
504
+
505
+ type GridViewSize = "xxs" | "xs" | "small" | "medium" | "large" | "xl";
506
+ declare const getGridSize: (size: GridViewSize) => {
507
+ minColumnWidth: string;
508
+ gap: number;
412
509
  };
510
+ declare const Grid: <T, M extends string = string>(props: CollectionProps<T, M> & {
511
+ ref?: React__default.ForwardedRef<CollectionRef>;
512
+ } & React__default.RefAttributes<CollectionRef>) => React__default.ReactElement | null;
413
513
 
414
- type BaseComboboxProps = {
415
- id?: string;
416
- loading?: boolean;
417
- placeholder?: string;
418
- items: ComboboxItem[];
419
- onFocus?: (event: React__default.FocusEvent<HTMLInputElement>) => void;
420
- onDeleteWhenEmpty?: () => void;
421
- size?: InputFieldSize;
422
- style?: React__default.CSSProperties;
423
- className?: string;
424
- label?: React__default.ReactNode;
425
- children?: React__default.ReactNode;
426
- hideMenuWhenEmptyValue?: boolean;
427
- readOnly?: boolean;
428
- tabBehavior?: "autocomplete" | "select";
429
- openMenuBehavior?: "showAllItems" | "showFilteredItems";
514
+ declare function fuzzyScore({ item, query }: {
515
+ item: string;
516
+ query: string;
517
+ }): IItemScore;
518
+ type IScoredItem = IItemScore & {
519
+ index: number;
430
520
  };
431
- type StringModeOnlyProps = {
432
- mode: "string";
433
- value?: string;
434
- onChange?: (value: string) => void;
435
- onSelectItem?: (value: string) => void;
436
- onBlur?: (didSubmit: boolean, value: string) => void;
437
- onHoverItem?: (value: string | undefined) => void;
438
- allowArbitraryValues?: boolean;
521
+ declare function fuzzyFilter({ items, query, scoreThreshold, }: {
522
+ items: string[];
523
+ query: string;
524
+ scoreThreshold?: number;
525
+ }): IScoredItem[];
526
+ type IToken = {
527
+ type: "text";
528
+ text: string;
529
+ } | {
530
+ type: "match";
531
+ text: string;
439
532
  };
440
- type StringModeProps = BaseComboboxProps & StringModeOnlyProps;
441
- type OptionModeOnlyProps = {
442
- mode?: "option";
443
- value?: ComboboxOption;
444
- onChange?: (value: ComboboxOption) => void;
445
- onSelectItem?: (value: ComboboxOption) => void;
446
- onBlur?: (didSubmit: boolean, value: ComboboxOption) => void;
447
- onHoverItem?: (value: ComboboxOption | undefined) => void;
448
- allowArbitraryValues?: false;
533
+ type MatchRange = {
534
+ start: number;
535
+ end: number;
449
536
  };
450
- type OptionModeProps = BaseComboboxProps & OptionModeOnlyProps;
451
- type ComboboxProps = StringModeProps | OptionModeProps;
452
- interface ComboboxRef {
453
- focus(): void;
454
- setValue(value: string | ComboboxOption): void;
455
- selectAllInputText(): void;
456
- }
457
- declare const Combobox: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<ComboboxProps & React__default.RefAttributes<ComboboxRef>>>;
537
+ declare function fuzzyTokenize({ item, itemScore, }: {
538
+ item: string;
539
+ itemScore: IItemScore;
540
+ }): IToken[];
458
541
 
459
- type RelativeDropPosition = "above" | "below" | "inside";
460
- type DropValidator = (sourceIndex: number, destinationIndex: number, position: RelativeDropPosition) => boolean;
461
- declare const normalizeListDestinationIndex: (index: number, position: "above" | "below") => number;
462
- type UseSortableReturnType = ReturnType<typeof useSortable>;
463
- interface ItemProps$1<T> {
464
- id: string;
465
- disabled?: boolean;
466
- children: (props: {
467
- ref: React.Ref<T>;
468
- relativeDropPosition?: RelativeDropPosition;
469
- [key: string]: any;
470
- } & UseSortableReturnType["attributes"]) => JSX.Element;
471
- }
472
- interface RootProps {
473
- keys: string[];
474
- children: React.ReactNode;
475
- renderOverlay?: (index: number) => React.ReactNode;
476
- onMoveItem?: (sourceIndex: number, destinationIndex: number, position: RelativeDropPosition) => void;
477
- acceptsDrop?: DropValidator;
478
- axis?: "x" | "y";
479
- }
480
- declare namespace Sortable {
481
- const Item: <T extends HTMLElement>(props: ItemProps$1<T>) => React.ReactElement | null;
482
- const Root: (props: RootProps) => React.ReactElement | null;
483
- }
542
+ type IconName = keyof typeof Icons;
484
543
 
485
- type ListRowMarginType = "none" | "top" | "bottom" | "vertical";
486
- type ListRowPosition = "only" | "first" | "middle" | "last";
487
- type ListColorScheme = "primary" | "secondary";
488
- type PressEventName = "onClick" | "onPointerDown";
489
- type ListRowContextValue = {
490
- marginType: ListRowMarginType;
544
+ declare function renderIcon(iconName: Exclude<React.ReactNode, string> | IconName): React.ReactNode;
545
+
546
+ type MenuItemRole = "undo" | "redo" | "cut" | "copy" | "paste" | "pasteAndMatchStyle" | "delete" | "selectAll" | "reload" | "forceReload" | "toggleDevTools" | "resetZoom" | "zoomIn" | "zoomOut" | "toggleSpellChecker" | "togglefullscreen" | "window" | "minimize" | "close" | "help" | "about" | "services" | "hide" | "hideOthers" | "unhide" | "quit" | "showSubstitutions" | "toggleSmartQuotes" | "toggleSmartDashes" | "toggleTextReplacement" | "startSpeaking" | "stopSpeaking" | "zoom" | "front" | "appMenu" | "fileMenu" | "editMenu" | "viewMenu" | "shareMenu" | "recentDocuments" | "toggleTabBar" | "selectNextTab" | "selectPreviousTab" | "mergeAllWindows" | "clearRecentDocuments" | "moveTabToNewWindow" | "windowMenu";
547
+ type SeparatorItem = {
548
+ type: "separator";
549
+ };
550
+ type BaseMenuItem = {
551
+ checked?: boolean;
552
+ disabled?: boolean;
553
+ icon?: Exclude<ReactNode, string> | IconName;
554
+ role?: MenuItemRole;
555
+ alwaysInclude?: boolean;
556
+ title: NonNullable<ReactNode>;
557
+ };
558
+ type SectionHeaderMenuItem = {
559
+ type: "sectionHeader";
560
+ id: string;
561
+ title: ReactNode;
562
+ maxVisibleItems?: number;
563
+ variant?: "normal" | "label";
564
+ };
565
+ type SelectableMenuItem<T extends string> = BaseMenuItem & {
566
+ type?: undefined;
567
+ shortcut?: string;
568
+ value: T;
569
+ };
570
+ type SubMenuItem<T extends string> = BaseMenuItem & {
571
+ type: "submenu";
572
+ items: MenuItem<T>[];
573
+ id: string;
574
+ };
575
+ type NonSelectableMenuItem<T extends string> = SeparatorItem | SectionHeaderMenuItem | SubMenuItem<T>;
576
+ type MenuItem<T extends string> = SeparatorItem | SelectableMenuItem<T> | SectionHeaderMenuItem | SubMenuItem<T>;
577
+ type ScoredSelectableMenuItem<T extends string> = SelectableMenuItem<T> & IScoredItem;
578
+ type ScoredMenuItem<T extends string> = ScoredSelectableMenuItem<T> | SectionHeaderMenuItem;
579
+ type ExtractMenuItemType<T> = T extends SelectableMenuItem<infer U> ? U : never;
580
+ declare const isSelectableMenuItem: <T extends string>(item: MenuItem<T>) => item is SelectableMenuItem<T>;
581
+ declare const isNonSelectableMenuItem: <T extends string>(item: MenuItem<T>) => item is NonSelectableMenuItem<T>;
582
+ declare const isMenuItemSectionHeader: (item: MenuItem<string>) => item is SectionHeaderMenuItem;
583
+ declare const isSelectableMenuItemWithScore: (item: MenuItem<string>) => item is ScoredSelectableMenuItem<string>;
584
+ declare const CHECKBOX_WIDTH = 16;
585
+ declare const CHECKBOX_RIGHT_INSET = 8;
586
+ declare const styles: {
587
+ separatorStyle: string;
588
+ itemStyle: ({ disabled }: {
589
+ disabled?: boolean;
590
+ }) => string;
591
+ itemIndicatorStyle: string;
592
+ contentStyle: string;
593
+ };
594
+ declare function getKeyboardShortcutsForMenuItems<T extends string>(menuItems: MenuItem<T>[], onSelect: (type: T) => void): Record<string, () => void>;
595
+ declare const KeyboardShortcut: React__default.NamedExoticComponent<{
596
+ shortcut: string;
597
+ }>;
598
+ declare const SectionHeader$1: React__default.NamedExoticComponent<Omit<SectionHeaderMenuItem, "type" | "maxVisibleItems"> & {
599
+ isFirst?: boolean;
600
+ indented?: boolean;
601
+ }>;
602
+
603
+ type RelativeDropPosition = "above" | "below" | "inside";
604
+ type DropValidator = (sourceIndex: number, destinationIndex: number, position: RelativeDropPosition) => boolean;
605
+ declare const normalizeListDestinationIndex: (index: number, position: "above" | "below") => number;
606
+ type UseSortableReturnType = ReturnType<typeof useSortable>;
607
+ interface ItemProps$1<T> {
608
+ id: string;
609
+ disabled?: boolean;
610
+ children: (props: {
611
+ ref: React.Ref<T>;
612
+ relativeDropPosition?: RelativeDropPosition;
613
+ [key: string]: any;
614
+ } & UseSortableReturnType["attributes"]) => JSX.Element;
615
+ }
616
+ interface RootProps {
617
+ keys: string[];
618
+ children: React.ReactNode;
619
+ renderOverlay?: (index: number) => React.ReactNode;
620
+ onMoveItem?: (sourceIndex: number, destinationIndex: number, position: RelativeDropPosition) => void;
621
+ acceptsDrop?: DropValidator;
622
+ axis?: "x" | "y";
623
+ }
624
+ declare namespace Sortable {
625
+ const Item: <T extends HTMLElement>(props: ItemProps$1<T>) => React.ReactElement | null;
626
+ const Root: (props: RootProps) => React.ReactElement | null;
627
+ }
628
+
629
+ type ListRowMarginType = "none" | "top" | "bottom" | "vertical";
630
+ type ListRowPosition = "only" | "first" | "middle" | "last";
631
+ type ListColorScheme = "primary" | "secondary";
632
+ type PressEventName = "onClick" | "onPointerDown";
633
+ type ListRowContextValue = {
634
+ marginType: ListRowMarginType;
491
635
  selectedPosition: ListRowPosition;
492
636
  sortable: boolean;
493
637
  expandable: boolean;
@@ -613,97 +757,342 @@ declare namespace ListView {
613
757
  } & React__default.RefAttributes<HTMLDivElement>>;
614
758
  const rowHeight = 31;
615
759
  const sectionHeaderLabelHeight = 27;
616
- const calculateHeight: (items: number, headerCount: number, headerVariant: ListViewSectionHeaderVariant) => number;
760
+ const calculateHeight: ({ menuItemsCount, sectionHeaderCount, }: {
761
+ menuItemsCount: number;
762
+ sectionHeaderCount: number;
763
+ }) => number;
617
764
  const normalizeDestinationIndex: (index: number, position: "above" | "below") => number;
618
765
  }
619
766
 
620
- interface ComboboxMenuProps {
621
- items: InternalComboboxItem[];
622
- selectedIndex: number;
623
- onSelectItem: (item: InternalComboboxItem) => void;
624
- onHoverIndex: (index: number) => void;
625
- listSize: Size;
626
- style?: React__default.CSSProperties;
627
- }
628
- declare const ComboboxMenu: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<ComboboxMenuProps & React__default.RefAttributes<IVirtualizedList>>>;
629
-
630
- interface ISearchCompletionMenu {
631
- focus: () => void;
767
+ type CollectionViewType = "grid" | "list";
768
+ type CollectionRef = {
769
+ editName: (id: string) => void;
770
+ };
771
+ interface CollectionProps<T, M extends string = string> {
772
+ className?: string;
773
+ items: T[];
774
+ getId: (item: T) => string;
775
+ getName: (item: T) => string;
776
+ getExpanded?: (item: T) => boolean | undefined;
777
+ /**
778
+ * Whether directories should be expandable.
779
+ * @default true
780
+ */
781
+ expandable?: boolean;
782
+ /**
783
+ * Whether to allow renaming files
784
+ * @default true
785
+ */
786
+ renamable?: boolean;
787
+ menuItems?: MenuItem<M>[];
788
+ onSelectMenuItem?: (action: M, selectedItems: T[]) => void;
789
+ onRename?: (item: T, newName: string) => void;
790
+ renderThumbnail?: (item: T, selected: boolean) => React__default.ReactNode;
791
+ renderAction?: (item: T, selected: boolean) => React__default.ReactNode;
792
+ renderDetail?: (item: T, selected: boolean) => React__default.ReactNode;
793
+ /** Callback when selection changes. If not provided, selection will be disabled. */
794
+ onSelectionChange?: (selectedItemIds: string[], event?: ListView.ClickInfo) => void;
795
+ scrollable?: boolean;
796
+ itemRoleDescription?: string;
797
+ /** Position of the detail content. Defaults to 'end'. */
798
+ detailPosition?: "end" | "below";
799
+ /** Size of the list items. Defaults to 'medium'. */
800
+ size?: GridViewSize;
801
+ /** For testing: Override the hover state with a specific item ID */
802
+ testHoveredId?: string;
803
+ /** For testing: Override the renaming state with a specific item ID */
804
+ testRenamingId?: string;
805
+ setExpanded?: (item: T, expanded: boolean) => void;
806
+ acceptsDrop?: ListViewRootProps["acceptsDrop"];
807
+ onMoveItem?: ListViewRootProps["onMoveItem"];
808
+ getDepth?: (item: T) => number;
809
+ onFilesDrop?: (event: React__default.DragEvent<Element>) => void;
810
+ getRenamable?: (item: T) => boolean;
811
+ /** Currently selected file IDs */
812
+ selectedIds?: string[];
813
+ viewType?: CollectionViewType;
814
+ onDoubleClickItem?: (itemId: string) => void;
632
815
  }
633
- declare const SearchCompletionMenu: React__default.ForwardRefExoticComponent<{
634
- onSelect: (item: ComboboxOption$1) => void;
635
- onHover?: (item: ComboboxOption$1) => void;
636
- onClose: () => void;
637
- items: ComboboxOption$1[];
638
- width?: number;
639
- } & React__default.RefAttributes<ISearchCompletionMenu>>;
816
+ declare const Collection: <T, M extends string = string>(props: CollectionProps<T, M> & React__default.RefAttributes<CollectionRef>) => React__default.ReactElement | null;
640
817
 
641
- declare const CommandPalette: React__default.NamedExoticComponent<{
642
- showCommandPalette: boolean;
643
- setShowCommandPalette: (value: boolean) => void;
644
- } & Pick<{
645
- onSelect: (item: _noya_app_noya_designsystem.ComboboxOption) => void;
646
- onHover?: (item: _noya_app_noya_designsystem.ComboboxOption) => void;
647
- onClose: () => void;
648
- items: _noya_app_noya_designsystem.ComboboxOption[];
649
- width?: number;
650
- } & React__default.RefAttributes<ISearchCompletionMenu>, "onSelect" | "items" | "onHover">>;
818
+ type Props$d = {
819
+ id?: string;
820
+ style?: any;
821
+ className?: string;
822
+ type?: "text" | "search";
823
+ disabled?: boolean;
824
+ value: string;
825
+ placeholder?: string;
826
+ role?: AriaRole;
827
+ name?: HTMLInputElement["name"];
828
+ onKeyDown?: KeyboardEventHandler;
829
+ onClick?: MouseEventHandler;
830
+ onDoubleClick?: MouseEventHandler;
831
+ onPointerDown?: PointerEventHandler;
832
+ onFocusCapture?: FocusEventHandler;
833
+ onFocusChange?: (isFocused: boolean) => void;
834
+ onBlur?: FocusEventHandler;
835
+ } & Pick<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "autoCapitalize" | "autoCorrect" | "spellCheck" | "autoFocus">;
836
+ type ReadOnlyProps = Props$d & {
837
+ readOnly: true;
838
+ };
839
+ type ControlledProps = Props$d & {
840
+ onChange: (value: string) => void;
841
+ onFocus?: FocusEventHandler;
842
+ onBlur?: FocusEventHandler;
843
+ };
844
+ type SubmittableProps = Props$d & {
845
+ onSubmit: (value: string) => void;
846
+ allowSubmittingWithSameValue?: boolean;
847
+ submitAutomaticallyAfterDelay?: number;
848
+ };
849
+ type TextInputProps = ReadOnlyProps | ControlledProps | SubmittableProps;
651
850
 
652
- interface MenuItemProps<T extends string> {
653
- value?: T;
654
- children: ReactNode;
655
- onSelect: (value: T) => void;
656
- checked: boolean;
657
- disabled: boolean;
658
- indented: boolean;
659
- shortcut?: string;
660
- icon?: ReactNode;
661
- items?: MenuItem<T>[];
851
+ type LabelPosition = "inset" | "start" | "end" | "above";
852
+ interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
853
+ /** @default start */
854
+ position?: Exclude<LabelPosition, "inset">;
662
855
  }
663
- interface MenuProps<T extends string> {
664
- children: ReactNode;
856
+ type InsetLabelProps = {
857
+ /** @default medium */
858
+ size?: InputFieldSize;
859
+ /** when used with an InputField.Root and label position is inset, it will add padding to the right of the label to account for the button */
860
+ buttonSize?: number;
861
+ } & LabelHTMLAttributes<HTMLLabelElement>;
862
+ declare const insetLabelTextStyles = "font-sans text-label uppercase text-text-disabled leading-[19px] font-bold text-[60%] truncate pointer-events-none text-right";
863
+ declare const insetLabelStyles = "flex items-center absolute top-0 bottom-0 z-label";
864
+ declare const InsetLabel: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<{
865
+ /** @default medium */
866
+ size?: InputFieldSize;
867
+ /** when used with an InputField.Root and label position is inset, it will add padding to the right of the label to account for the button */
868
+ buttonSize?: number;
869
+ } & React__default.LabelHTMLAttributes<HTMLLabelElement> & React__default.RefAttributes<HTMLLabelElement>>>;
870
+ declare const Label: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<LabelProps & React__default.RefAttributes<HTMLLabelElement>>>;
871
+
872
+ type InputFieldSize = "small" | "medium" | "large";
873
+ type InputFieldContextValue = {
874
+ labelSize?: number;
875
+ buttonSize?: number;
876
+ /** @default medium */
877
+ size: InputFieldSize;
878
+ isFocused: boolean;
879
+ onFocusChange: (isFocused: boolean) => void;
880
+ inputRef?: ForwardedRef<HTMLInputElement>;
881
+ setInputRef?: (ref: ForwardedRef<HTMLInputElement>) => void;
882
+ setLabelWidth?: (width: number) => void;
883
+ setButtonWidth?: (width: number) => void;
884
+ id?: string;
885
+ label?: ReactNode;
886
+ labelPosition?: LabelPosition;
887
+ };
888
+ declare const useInputFieldContext: () => InputFieldContextValue;
889
+ declare const getFieldSpacing: ({ buttonSize, labelSize, variant, }: {
890
+ buttonSize?: number;
891
+ labelSize?: number;
892
+ variant?: InputFieldVariant;
893
+ }) => {
894
+ paddingLeft: string;
895
+ paddingRight: string;
896
+ };
897
+ interface InputFieldDropdownProps<T extends string> {
898
+ id?: string;
665
899
  items: MenuItem<T>[];
666
900
  onSelect: (value: T) => void;
667
- shouldBindKeyboardShortcuts?: boolean;
668
- onOpenChange?: (open: boolean) => void;
669
- }
670
- declare const ContextMenu: <T extends string>(props: MenuProps<T>) => React__default.ReactElement | null;
671
-
672
- declare const StyledContent: React__default.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React__default.RefAttributes<HTMLDivElement>, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
673
- interface IDialog {
674
- containsElement: (element: HTMLElement) => boolean;
675
- }
676
- interface Props$b {
677
- title?: ReactNode;
678
- description?: ReactNode;
679
901
  children?: ReactNode;
680
- style?: ComponentProps<typeof StyledContent>["style"];
681
- open: ComponentProps<typeof DialogPrimitive.Root>["open"];
682
- onOpenChange?: ComponentProps<typeof DialogPrimitive.Root>["onOpenChange"];
683
- onOpenAutoFocus?: ComponentProps<typeof DialogPrimitive.Content>["onOpenAutoFocus"];
684
- closeOnInteractOutside?: boolean;
685
- showCloseButton?: boolean;
686
- className?: string;
687
902
  }
688
- declare const Dialog: React__default.ForwardRefExoticComponent<Props$b & React__default.RefAttributes<IDialog>>;
689
- declare const FullscreenDialog: React__default.ForwardRefExoticComponent<Props$b & React__default.RefAttributes<IDialog>>;
690
-
691
- type DividerVariant = "normal" | "subtle" | "strong";
692
- interface DividerProps {
693
- variant?: DividerVariant;
694
- overflow?: number | string;
903
+ type InputFieldVariant = "normal" | "bare";
904
+ type InputFieldInputProps = TextInputProps & {
905
+ textAlign?: Property.TextAlign;
906
+ variant?: "bare";
907
+ };
908
+ type InputFieldNumberInputProps = Omit<TextInputProps, "value" | "onChange" | "onKeyDown" | "onSubmit" | "readOnly"> & {
909
+ value: number | undefined;
910
+ onNudge?: (value: number) => void;
911
+ variant?: "bare";
912
+ onFocus?: FocusEventHandler;
913
+ onBlur?: FocusEventHandler;
914
+ readOnly?: boolean;
695
915
  className?: string;
696
- style?: React__default.CSSProperties;
697
- }
698
- declare const Divider: React__default.NamedExoticComponent<DividerProps>;
699
- declare const DividerVertical: React__default.NamedExoticComponent<DividerProps>;
700
-
701
- /**
702
- * A button that opens a menu when clicked, but also allows dragging the
703
- */
704
- declare const DraggableMenuButton: <T extends string>(props: {
705
- items?: MenuItem<T>[];
706
- onSelect?: (value: T) => void;
916
+ } & ({
917
+ onChange: (value: number) => void;
918
+ } | {
919
+ onSubmit: (value: number) => void;
920
+ });
921
+ declare function InputFieldNumberInput(props: InputFieldNumberInputProps): React__default.JSX.Element;
922
+ interface InputFieldRootProps {
923
+ id?: string;
924
+ children?: ReactNode;
925
+ width?: number;
926
+ labelSize?: number;
927
+ /** @default medium */
928
+ size?: InputFieldSize;
929
+ renderPopoverContent?: (options: {
930
+ width: number;
931
+ }) => ReactNode;
932
+ /**
933
+ * if there is a popover, this is the offset from the trigger
934
+ * @default 3
935
+ */
936
+ sideOffset?: number;
937
+ onFocusChange?: (isFocused: boolean) => void;
938
+ style?: React__default.CSSProperties;
939
+ className?: string;
940
+ }
941
+ declare function InputFieldRoot({ id: idProp, children, width, sideOffset, labelSize, size, renderPopoverContent, onFocusChange, style, className, }: InputFieldRootProps): React__default.JSX.Element;
942
+ type InputFieldProps = InputFieldRootProps & InputFieldInputProps;
943
+ declare const InputField: React__default.ForwardRefExoticComponent<InputFieldProps & React__default.RefAttributes<HTMLInputElement>> & {
944
+ readonly Root: React__default.MemoExoticComponent<typeof InputFieldRoot>;
945
+ readonly Input: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<InputFieldInputProps & React__default.RefAttributes<HTMLInputElement>>>;
946
+ readonly Typeahead: React__default.MemoExoticComponent<(props: {
947
+ prefix: string;
948
+ value: string;
949
+ isFocused: boolean;
950
+ }) => React__default.JSX.Element>;
951
+ readonly NumberInput: React__default.MemoExoticComponent<typeof InputFieldNumberInput>;
952
+ readonly DropdownMenu: <T extends string>(props: InputFieldDropdownProps<T>) => React__default.ReactElement | null;
953
+ readonly Button: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<React__default.ButtonHTMLAttributes<HTMLButtonElement> & ButtonRootProps & {
954
+ buttonClassName?: string;
955
+ variant?: "floating" | "normal";
956
+ } & React__default.RefAttributes<HTMLButtonElement>>>;
957
+ readonly Label: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<React__default.LabelHTMLAttributes<HTMLLabelElement> & React__default.RefAttributes<HTMLLabelElement>>>;
958
+ readonly PrimitiveElement: ({ readOnly, disabled, className, style, ...props }: {
959
+ readOnly?: boolean;
960
+ disabled?: boolean;
961
+ } & React__default.DetailedHTMLProps<React__default.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>) => React__default.JSX.Element;
962
+ };
963
+
964
+ type BaseComboboxProps<T extends string> = {
965
+ id?: string;
966
+ loading?: boolean;
967
+ placeholder?: string;
968
+ items: MenuItem<T>[];
969
+ onFocus?: (event: React__default.FocusEvent<HTMLInputElement>) => void;
970
+ onDeleteWhenEmpty?: () => void;
971
+ size?: InputFieldSize;
972
+ style?: React__default.CSSProperties;
973
+ className?: string;
974
+ label?: React__default.ReactNode;
975
+ children?: React__default.ReactNode;
976
+ hideMenuWhenEmptyValue?: boolean;
977
+ readOnly?: boolean;
978
+ tabBehavior?: "autocomplete" | "select";
979
+ openMenuBehavior?: "showAllItems" | "showFilteredItems";
980
+ };
981
+ type StringModeOnlyProps = {
982
+ mode: "string";
983
+ value?: string;
984
+ onChange?: (value: string) => void;
985
+ onSelectItem?: (value: string) => void;
986
+ onBlur?: (didSubmit: boolean, value: string) => void;
987
+ onHoverItem?: (value: string | undefined) => void;
988
+ allowArbitraryValues?: boolean;
989
+ };
990
+ type StringModeProps<T extends string> = BaseComboboxProps<T> & StringModeOnlyProps;
991
+ type OptionModeOnlyProps<T extends string> = {
992
+ mode?: "option";
993
+ value?: SelectableMenuItem<T>;
994
+ onChange?: (value: SelectableMenuItem<T>) => void;
995
+ onSelectItem?: (value: SelectableMenuItem<T>) => void;
996
+ onBlur?: (didSubmit: boolean, value: SelectableMenuItem<T>) => void;
997
+ onHoverItem?: (value: SelectableMenuItem<T> | undefined) => void;
998
+ allowArbitraryValues?: false;
999
+ };
1000
+ type OptionModeProps<T extends string> = BaseComboboxProps<T> & OptionModeOnlyProps<T>;
1001
+ type ComboboxProps<T extends string> = StringModeProps<T> | OptionModeProps<T>;
1002
+ interface ComboboxRef<T extends string> {
1003
+ focus(): void;
1004
+ setValue(value: string | SelectableMenuItem<T>): void;
1005
+ selectAllInputText(): void;
1006
+ }
1007
+ declare const Combobox: <T extends string>(props: ComboboxProps<T> & React__default.RefAttributes<ComboboxRef<T>>) => React__default.ReactElement | null;
1008
+
1009
+ interface ComboboxMenuProps<T extends string> {
1010
+ items: ScoredMenuItem<T>[];
1011
+ selectedIndex: number;
1012
+ onSelectItem: (item: ScoredMenuItem<T>) => void;
1013
+ onHoverIndex: (index: number) => void;
1014
+ listSize: Size;
1015
+ style?: React__default.CSSProperties;
1016
+ }
1017
+ declare const ComboboxMenu: <T extends string>(props: ComboboxMenuProps<T> & React__default.RefAttributes<IVirtualizedList>) => React__default.ReactElement | null;
1018
+
1019
+ interface ISearchCompletionMenu {
1020
+ focus: () => void;
1021
+ }
1022
+ declare const SearchCompletionMenu: React__default.ForwardRefExoticComponent<{
1023
+ onSelect: (item: SelectableMenuItem$1<string>) => void;
1024
+ onHover?: (item: SelectableMenuItem$1<string>) => void;
1025
+ onClose: () => void;
1026
+ items: SelectableMenuItem$1<string>[];
1027
+ width?: number;
1028
+ } & React__default.RefAttributes<ISearchCompletionMenu>>;
1029
+
1030
+ declare const CommandPalette: React__default.NamedExoticComponent<{
1031
+ showCommandPalette: boolean;
1032
+ setShowCommandPalette: (value: boolean) => void;
1033
+ } & Pick<{
1034
+ onSelect: (item: _noya_app_noya_designsystem.SelectableMenuItem<string>) => void;
1035
+ onHover?: (item: _noya_app_noya_designsystem.SelectableMenuItem<string>) => void;
1036
+ onClose: () => void;
1037
+ items: _noya_app_noya_designsystem.SelectableMenuItem<string>[];
1038
+ width?: number;
1039
+ } & React__default.RefAttributes<ISearchCompletionMenu>, "onSelect" | "items" | "onHover">>;
1040
+
1041
+ interface MenuItemProps<T extends string> {
1042
+ value?: T;
1043
+ children: ReactNode;
1044
+ onSelect: (value: T) => void;
1045
+ checked: boolean;
1046
+ disabled: boolean;
1047
+ indented: boolean;
1048
+ shortcut?: string;
1049
+ icon?: ReactNode;
1050
+ items?: MenuItem<T>[];
1051
+ }
1052
+ interface MenuProps<T extends string> {
1053
+ children: ReactNode;
1054
+ items: MenuItem<T>[];
1055
+ onSelect: (value: T) => void;
1056
+ shouldBindKeyboardShortcuts?: boolean;
1057
+ onOpenChange?: (open: boolean) => void;
1058
+ }
1059
+ declare const ContextMenu: <T extends string>(props: MenuProps<T>) => React__default.ReactElement | null;
1060
+
1061
+ declare const StyledContent: React__default.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React__default.RefAttributes<HTMLDivElement>, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
1062
+ interface IDialog {
1063
+ containsElement: (element: HTMLElement) => boolean;
1064
+ }
1065
+ interface Props$c {
1066
+ title?: ReactNode;
1067
+ description?: ReactNode;
1068
+ children?: ReactNode;
1069
+ style?: ComponentProps<typeof StyledContent>["style"];
1070
+ open: ComponentProps<typeof DialogPrimitive.Root>["open"];
1071
+ onOpenChange?: ComponentProps<typeof DialogPrimitive.Root>["onOpenChange"];
1072
+ onOpenAutoFocus?: ComponentProps<typeof DialogPrimitive.Content>["onOpenAutoFocus"];
1073
+ closeOnInteractOutside?: boolean;
1074
+ showCloseButton?: boolean;
1075
+ className?: string;
1076
+ }
1077
+ declare const Dialog: React__default.ForwardRefExoticComponent<Props$c & React__default.RefAttributes<IDialog>>;
1078
+ declare const FullscreenDialog: React__default.ForwardRefExoticComponent<Props$c & React__default.RefAttributes<IDialog>>;
1079
+
1080
+ type DividerVariant = "normal" | "subtle" | "strong";
1081
+ interface DividerProps {
1082
+ variant?: DividerVariant;
1083
+ overflow?: number | string;
1084
+ className?: string;
1085
+ style?: React__default.CSSProperties;
1086
+ }
1087
+ declare const Divider: React__default.NamedExoticComponent<DividerProps>;
1088
+ declare const DividerVertical: React__default.NamedExoticComponent<DividerProps>;
1089
+
1090
+ /**
1091
+ * A button that opens a menu when clicked, but also allows dragging the
1092
+ */
1093
+ declare const DraggableMenuButton: <T extends string>(props: {
1094
+ items?: MenuItem<T>[];
1095
+ onSelect?: (value: T) => void;
707
1096
  isVisible?: boolean;
708
1097
  }) => React__default.ReactElement | null;
709
1098
 
@@ -720,6 +1109,40 @@ declare const DropdownMenu: <T extends string>(props: MenuProps<T> & {
720
1109
  contentStyle?: React__default.CSSProperties;
721
1110
  } & Pick<RadixDropdownMenu.DropdownMenuContentProps & React__default.RefAttributes<HTMLDivElement>, "align" | "side" | "sideOffset" | "alignOffset" | "collisionPadding"> & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement | null;
722
1111
 
1112
+ type RenderPreviewProps = {
1113
+ children: string;
1114
+ onClick: () => void;
1115
+ ref: React__default.Ref<HTMLElement & HTMLAnchorElement & HTMLSpanElement>;
1116
+ tabIndex: number;
1117
+ onKeyDown: (e: React__default.KeyboardEvent) => void;
1118
+ style?: React__default.CSSProperties;
1119
+ className?: string;
1120
+ };
1121
+ type Props$b = {
1122
+ value: string;
1123
+ children?: (props: RenderPreviewProps) => React__default.ReactNode;
1124
+ placeholder?: string;
1125
+ onChange?: (value: string) => void;
1126
+ onSubmit?: (value: string) => void;
1127
+ style?: React__default.CSSProperties;
1128
+ textStyle?: React__default.CSSProperties;
1129
+ className?: string;
1130
+ id?: string;
1131
+ disabled?: boolean;
1132
+ focused?: boolean;
1133
+ textClassName?: string;
1134
+ readOnly?: boolean;
1135
+ onBlur?: () => void;
1136
+ /**
1137
+ * If true, will render an unfocused input. This should only be used for visual regression tests.
1138
+ */
1139
+ testFocused?: boolean;
1140
+ };
1141
+ interface EditableTextRef {
1142
+ startEditing: () => void;
1143
+ }
1144
+ declare const EditableText: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<Props$b & React__default.RefAttributes<EditableTextRef>>>;
1145
+
723
1146
  type FadeDirection = "left" | "right" | "top" | "bottom";
724
1147
  type FadeProps = {
725
1148
  children: ReactNode;
@@ -793,7 +1216,6 @@ interface Props$8 {
793
1216
  }
794
1217
  declare const GradientPicker: React.NamedExoticComponent<Props$8>;
795
1218
 
796
- type GridViewSize = "xxs" | "xs" | "small" | "medium" | "large" | "xl";
797
1219
  interface ItemProps<MenuItemType extends string = string> {
798
1220
  id: string;
799
1221
  title?: ReactNode;
@@ -801,635 +1223,250 @@ interface ItemProps<MenuItemType extends string = string> {
801
1223
  loading?: boolean;
802
1224
  selected?: boolean;
803
1225
  onClick?: (event: React__default.MouseEvent) => void;
804
- onPress?: (options: KeyModifiers) => void;
1226
+ onSelect?: (options: KeyModifiers) => void;
805
1227
  onDoubleClick?: () => void;
806
1228
  onHoverChange?: (isHovering: boolean) => void;
807
1229
  children?: ReactNode;
808
1230
  menuItems?: MenuItem<MenuItemType>[];
809
1231
  onSelectMenuItem?: (value: MenuItemType) => void;
810
1232
  onContextMenu?: () => void;
1233
+ onMenuOpenChange?: (open: boolean) => void;
811
1234
  style?: CSSProperties;
1235
+ action?: ReactNode;
1236
+ testHoveredId?: string;
1237
+ onKeyDown?: (event: React__default.KeyboardEvent) => void;
1238
+ hovered?: boolean;
812
1239
  }
813
1240
  type GridViewContextValue = {
814
- size: GridViewSize;
1241
+ minColumnWidth: string;
815
1242
  textPosition: "overlay" | "below" | "toolip";
816
1243
  bordered: boolean;
817
1244
  disabled: boolean;
1245
+ gap: number;
818
1246
  };
819
1247
  interface GridViewRootProps extends Partial<GridViewContextValue> {
820
1248
  children: ReactNode;
821
1249
  onClick?: () => void;
822
1250
  scrollable?: boolean;
1251
+ className?: string;
823
1252
  }
824
- declare function GridViewRoot({ size, children, scrollable, onClick, textPosition, bordered, disabled, }: GridViewRootProps): React__default.JSX.Element;
1253
+ declare function GridViewRoot({ minColumnWidth, gap, children, scrollable, onClick, textPosition, bordered, disabled, className, }: GridViewRootProps): React__default.JSX.Element;
825
1254
  declare function GridViewSection({ children, className, }: {
826
1255
  children?: ReactNode;
827
- className?: string;
828
- }): React__default.JSX.Element;
829
- declare function GridViewSectionHeader({ title }: {
830
- title: string;
831
- }): React__default.JSX.Element;
832
- declare namespace GridView {
833
- const Root: React__default.MemoExoticComponent<typeof GridViewRoot>;
834
- const Item: React__default.MemoExoticComponent<(<MenuItemType extends string>(props: ItemProps<MenuItemType> & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement | null)>;
835
- const Section: React__default.MemoExoticComponent<typeof GridViewSection>;
836
- const SectionHeader: React__default.MemoExoticComponent<typeof GridViewSectionHeader>;
837
- }
838
-
839
- declare const IconButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<ButtonRootProps, "size" | "children" | "variant" | "flex"> & {
840
- iconName: IconName;
841
- className?: string;
842
- style?: React.CSSProperties;
843
- selected?: boolean;
844
- color?: string;
845
- size?: number;
846
- } & React.RefAttributes<HTMLButtonElement>>>;
847
-
848
- declare const InspectorContainer: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<{
849
- header?: React__default.ReactNode;
850
- children?: React__default.ReactNode;
851
- fallback?: React__default.ReactNode;
852
- showDividers?: boolean;
853
- id?: string;
854
- className?: string;
855
- style?: React__default.CSSProperties;
856
- } & React__default.RefAttributes<HTMLDivElement>>>;
857
-
858
- type MenuSeparatorComponent = React__default.FC<{
859
- className?: string;
860
- }>;
861
- type MenuItemTextComponent = React__default.FC<{
862
- children?: React__default.ReactNode;
863
- }>;
864
- type MenuItemComponent = React__default.ForwardRefExoticComponent<React__default.RefAttributes<HTMLDivElement> & React__default.PropsWithoutRef<{
865
- className?: string;
866
- disabled?: boolean;
867
- children?: React__default.ReactNode;
868
- value: string;
869
- onSelect?: (event: any) => void;
870
- }>>;
871
- type MenuCheckboxItemComponent = React__default.FC<{
872
- checked?: boolean | "indeterminate";
873
- disabled?: boolean;
874
- onSelect?: (event: any) => void;
875
- className?: string;
876
- children?: React__default.ReactNode;
877
- }>;
878
- type MenuItemIndicatorComponent = React__default.FC<{
879
- className?: string;
880
- children?: React__default.ReactNode;
881
- }>;
882
- type MenuComponents = {
883
- Separator: MenuSeparatorComponent;
884
- ItemText: MenuItemTextComponent;
885
- Item: MenuItemComponent;
886
- CheckboxItem?: MenuCheckboxItemComponent;
887
- ItemIndicator?: MenuItemIndicatorComponent;
888
- Sub?: typeof RadixDropdownMenu.Sub | typeof RadixContextMenu.Sub;
889
- SubTrigger?: typeof RadixDropdownMenu.SubTrigger | typeof RadixContextMenu.SubTrigger;
890
- SubContent?: typeof RadixDropdownMenu.SubContent | typeof RadixContextMenu.SubContent;
891
- Portal?: typeof RadixDropdownMenu.Portal | typeof RadixContextMenu.Portal;
892
- };
893
- type MenuViewportProps<T extends string> = {
894
- items: MenuItem<T>[];
895
- Components: MenuComponents;
896
- onSelect?: (value: any) => void;
897
- };
898
- declare const MenuViewport: <T extends string>({ items, Components, onSelect, }: MenuViewportProps<T>) => React__default.JSX.Element;
899
-
900
- interface ContainerProps {
901
- children: React.ReactNode;
902
- renderLabel: (provided: {
903
- id: string;
904
- index: number;
905
- }) => React.ReactNode;
906
- }
907
- declare const LabeledElementView: React.NamedExoticComponent<ContainerProps>;
908
-
909
- declare const labeledFieldStyles: (labelPosition?: LabelPosition) => string;
910
- declare const LabeledField: React__default.NamedExoticComponent<{
911
- children: React__default.ReactNode;
912
- label: React__default.ReactNode;
913
- labelPosition?: LabelPosition;
914
- /** Used for both the `id` of the field and the `htmlFor` of the label, unless `id` and `htmlFor` are explicitly provided */
915
- fieldId?: string;
916
- className?: string;
917
- style?: React__default.CSSProperties;
918
- /** @default 100 */
919
- minWidth?: number;
920
- }>;
921
-
922
- type MessageProps = {
923
- role: "user" | "assistant" | "system" | "data";
924
- children?: React__default.ReactNode;
925
- user?: MultiplayerUser;
926
- /** @default 27 */
927
- avatarSize?: number;
928
- };
929
- declare const Message: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<MessageProps & React__default.RefAttributes<HTMLDivElement>>>;
930
-
931
- type PopoverVariant = "normal" | "large";
932
- interface Props$7 extends Pick<ComponentProps<(typeof PopoverPrimitive)["Content"]>, "onOpenAutoFocus" | "onCloseAutoFocus" | "onPointerDownOutside" | "onInteractOutside" | "onFocusOutside" | "side"> {
933
- children: React__default.ReactNode;
934
- trigger: React__default.ReactNode;
935
- variant?: PopoverVariant;
936
- closable?: boolean;
937
- open?: boolean;
938
- onOpenChange?: (open: boolean) => void;
939
- sideOffset?: number;
940
- onClickClose?: () => void;
941
- showArrow?: boolean;
942
- className?: string;
943
- }
944
- declare function Popover({ children, trigger, variant, closable, open, side, sideOffset, showArrow, onOpenChange, onOpenAutoFocus, onCloseAutoFocus, onPointerDownOutside, onInteractOutside, onFocusOutside, onClickClose, className, }: Props$7): React__default.JSX.Element;
945
-
946
- type ProgressVariant = "normal" | "warning" | "primary" | "secondary";
947
- declare function Progress({ value, variant, className, }: {
948
- value: number;
949
- variant?: ProgressVariant;
950
- className?: string;
951
- }): React.JSX.Element;
952
-
953
- interface Props$6 {
954
- children?: React.ReactNode | ((scrollElementRef: HTMLDivElement) => React.ReactNode);
955
- }
956
- declare const ScrollArea: React.NamedExoticComponent<Props$6>;
957
-
958
- type SegmentedControlColorScheme = "primary" | "secondary";
959
- interface SegmentedControlProps<T extends string> {
960
- id?: string;
961
- value?: T;
962
- onValueChange?: (value: T) => void;
963
- /** @default primary */
964
- colorScheme?: SegmentedControlColorScheme;
965
- allowEmpty?: boolean;
966
- separator?: boolean;
967
- items: SegmentedControlItemProps<T>[];
968
- className?: string;
969
- style?: React__default.CSSProperties;
970
- }
971
- type SegmentedControlItemProps<T extends string> = {
972
- title?: ReactNode;
973
- className?: string;
974
- style?: React__default.CSSProperties;
975
- tooltip?: ReactNode;
976
- } & Pick<RegularMenuItem<T>, "value" | "disabled" | "icon" | "role">;
977
- declare const SegmentedControl: React__default.MemoExoticComponent<(<T extends string>({ id: idProp, value, onValueChange, colorScheme, allowEmpty, items, separator, className, style, }: SegmentedControlProps<T>) => React__default.JSX.Element)>;
978
-
979
- type Props$5<T extends string> = {
980
- id?: string;
981
- style?: React__default.CSSProperties;
982
- className?: string;
983
- items: MenuItem<T>[];
984
- value: T;
985
- onSelect?: (value: T) => void;
986
- placeholder?: string;
987
- disabled?: boolean;
988
- readOnly?: boolean;
989
- label?: React__default.ReactNode;
990
- onFocus?: FocusEventHandler;
991
- onBlur?: FocusEventHandler;
992
- contentStyle?: React__default.CSSProperties;
993
- } & Pick<SelectProps, "open" | "onOpenChange">;
994
- declare const SelectMenu: <T extends string = string>(props: Props$5<T>) => React__default.ReactElement | null;
995
-
996
- interface SidebarListProps<T, M extends string = string> {
997
- className?: string;
998
- items: T[];
999
- getId: (item: T) => string;
1000
- getName: (item: T) => string;
1001
- getExpanded?: (item: T) => boolean | undefined;
1002
- expandable?: boolean;
1003
- menuItems?: MenuItem<M>[];
1004
- onSelectMenuItem?: (action: M, selectedItems: T[]) => void;
1005
- onRename?: (itemId: string, newName: string) => void;
1006
- renderThumbnail?: (item: T) => React__default.ReactNode;
1007
- renderHoverAction?: (item: T, selected: boolean) => React__default.ReactNode;
1008
- renderDetail?: (item: T) => React__default.ReactNode;
1009
- onSelectionChange?: (selectedItems: T[]) => void;
1010
- scrollable?: boolean;
1011
- itemRoleDescription?: string;
1012
- /** Position of the detail content. Defaults to 'end'. */
1013
- detailPosition?: "end" | "below";
1014
- /** Size of the list items. Defaults to 'medium'. */
1015
- size?: "medium" | "large";
1016
- /** For testing: Override the hover state with a specific item ID */
1017
- testHoveredId?: string;
1018
- /** For testing: Override the renaming state with a specific item ID */
1019
- testRenamingId?: string;
1020
- setExpanded?: (item: T, expanded: boolean) => void;
1021
- acceptsDrop?: ListViewRootProps["acceptsDrop"];
1022
- onMoveItem?: ListViewRootProps["onMoveItem"];
1023
- getDepth?: (item: T) => number;
1024
- onFilesDrop?: (event: React__default.DragEvent<Element>) => void;
1025
- }
1026
- declare function SidebarList<T, M extends string = string>({ className, items, getId, getName, expandable, getExpanded, getDepth, setExpanded, menuItems, onSelectMenuItem, onRename, renderThumbnail, renderHoverAction, renderDetail, onSelectionChange, itemRoleDescription, detailPosition, size, testHoveredId, testRenamingId, scrollable, acceptsDrop, onMoveItem, onFilesDrop, }: SidebarListProps<T, M>): React__default.JSX.Element;
1027
-
1028
- type ColorScheme = "primary" | "secondary";
1029
- interface Props$4 {
1030
- id?: string;
1031
- style?: React__default.CSSProperties;
1032
- className?: string;
1033
- value: number;
1034
- onValueChange: (value: number) => void;
1035
- min: number;
1036
- max: number;
1037
- step?: number;
1038
- colorScheme?: ColorScheme;
1039
- label?: React__default.ReactNode;
1040
- onFocus?: FocusEventHandler;
1041
- onBlur?: FocusEventHandler;
1042
- readOnly?: boolean;
1043
- }
1044
- declare const Slider: React__default.NamedExoticComponent<Props$4>;
1045
-
1046
- interface Props$3 {
1047
- size?: number | string;
1048
- inline?: boolean;
1049
- }
1050
- declare namespace Spacer {
1051
- const Vertical: React.ForwardRefExoticComponent<Props$3 & React.RefAttributes<HTMLSpanElement>>;
1052
- const Horizontal: React.ForwardRefExoticComponent<Props$3 & React.RefAttributes<HTMLSpanElement>>;
1053
- }
1054
-
1055
- type SwitchColorScheme = "primary" | "secondary";
1056
- interface Props$2 {
1057
- id?: string;
1058
- value: boolean;
1059
- onChange: (value: boolean) => void;
1060
- /** @default normal */
1061
- colorScheme?: SwitchColorScheme;
1062
- disabled?: boolean;
1063
- onFocus?: React.FocusEventHandler;
1064
- onBlur?: React.FocusEventHandler;
1065
- className?: string;
1066
- style?: React.CSSProperties;
1067
- }
1068
- declare const Switch: ({ id, value, onChange, colorScheme, disabled, onFocus, onBlur, style, className, }: Props$2) => React.JSX.Element;
1069
-
1070
- declare const config: {
1071
- content: string[];
1072
- corePlugins: {
1073
- preflight: false;
1074
- };
1075
- theme: {
1076
- extend: {
1077
- colors: {
1078
- "logo-fill": string;
1079
- "logo-highlight": string;
1080
- background: string;
1081
- text: string;
1082
- "text-muted": string;
1083
- "text-subtle": string;
1084
- "text-disabled": string;
1085
- "text-decorative-light": string;
1086
- "divider-subtle": string;
1087
- divider: string;
1088
- "divider-strong": string;
1089
- primary: string;
1090
- "primary-light": string;
1091
- "primary-pastel": string;
1092
- secondary: string;
1093
- "secondary-light": string;
1094
- "secondary-pastel": string;
1095
- "secondary-bright": string;
1096
- "input-background": string;
1097
- "input-background-light": string;
1098
- "code-background": string;
1099
- "code-background-dark": string;
1100
- "selected-background": string;
1101
- "breadcrumb-text": string;
1102
- "breadcrumb-text-hover": string;
1103
- "breadcrumb-icon": string;
1104
- "canvas-background": string;
1105
- "canvas-grid": string;
1106
- "sidebar-background": string;
1107
- "sidebar-background-transparent": string;
1108
- "popover-background": string;
1109
- "popover-divider": string;
1110
- "listview-raised-background": string;
1111
- "listview-editing-background": string;
1112
- "slider-thumb-background": string;
1113
- "slider-border": string;
1114
- "segmented-control-item": string;
1115
- mask: string;
1116
- "transparent-checker": string;
1117
- scrollbar: string;
1118
- "placeholder-dots": string;
1119
- "drag-outline": string;
1120
- "active-background": string;
1121
- "thumbnail-background": string;
1122
- "thumbnail-shadow": string;
1123
- "inline-code-text": string;
1124
- "inline-code-background": string;
1125
- "text-link": string;
1126
- "text-link-focused": string;
1127
- icon: string;
1128
- "icon-selected": string;
1129
- warning: string;
1130
- dot: string;
1131
- "row-highlight": string;
1132
- "table-row-background": string;
1133
- "chip-primary-bg": string;
1134
- "chip-secondary-bg": string;
1135
- "chip-error-bg": string;
1136
- "chip-default-bg": string;
1137
- "chip-primary-shadow": string;
1138
- "chip-secondary-shadow": string;
1139
- "chip-error-shadow": string;
1140
- "chip-default-shadow": string;
1141
- "floating-button": string;
1142
- };
1143
- fontFamily: {
1144
- sans: [string, string, string, string, string, string, string, string, string, string];
1145
- mono: [string, string, string, string, string];
1146
- };
1147
- fontSize: {
1148
- title: [string, {
1149
- lineHeight: string;
1150
- letterSpacing: string;
1151
- }];
1152
- subtitle: [string, {
1153
- lineHeight: string;
1154
- letterSpacing: string;
1155
- }];
1156
- heading1: [string, {
1157
- lineHeight: string;
1158
- letterSpacing: string;
1159
- }];
1160
- heading2: [string, {
1161
- lineHeight: string;
1162
- letterSpacing: string;
1163
- }];
1164
- heading3: [string, {
1165
- lineHeight: string;
1166
- letterSpacing: string;
1167
- }];
1168
- heading4: [string, {
1169
- lineHeight: string;
1170
- }];
1171
- heading5: [string, {
1172
- lineHeight: string;
1173
- }];
1174
- body: [string, {
1175
- lineHeight: string;
1176
- }];
1177
- small: [string, {
1178
- lineHeight: string;
1179
- }];
1180
- code: [string, {
1181
- lineHeight: string;
1182
- }];
1183
- button: [string, {
1184
- lineHeight: string;
1185
- letterSpacing: string;
1186
- }];
1187
- label: [string, {
1188
- lineHeight: string;
1189
- letterSpacing: string;
1190
- }];
1191
- };
1192
- spacing: {
1193
- nano: string;
1194
- micro: string;
1195
- small: string;
1196
- medium: string;
1197
- large: string;
1198
- xlarge: string;
1199
- xxlarge: string;
1200
- "inset-top": string;
1201
- "sidebar-width": string;
1202
- "toolbar-height": string;
1203
- "toolbar-separator": string;
1204
- "inspector-h-separator": string;
1205
- "inspector-v-separator": string;
1206
- "dialog-padding": string;
1207
- };
1208
- keyframes: {
1209
- spin: {
1210
- "0%": {
1211
- transform: string;
1212
- };
1213
- "100%": {
1214
- transform: string;
1215
- };
1216
- };
1217
- shimmer: {
1218
- "0%": {
1219
- backgroundPosition: string;
1220
- };
1221
- "100%": {
1222
- backgroundPosition: string;
1223
- };
1224
- };
1225
- };
1226
- animation: {
1227
- spin: string;
1228
- shimmer: string;
1229
- };
1230
- zIndex: {
1231
- interactable: string;
1232
- label: string;
1233
- menu: string;
1234
- };
1235
- };
1236
- };
1237
- safelist: string[];
1238
- };
1239
-
1240
- type Theme = (typeof config.theme)["extend"];
1241
- type ThemeColor = keyof Theme["colors"];
1242
- declare const cssVars: {
1243
- colors: {
1244
- logoFill: string;
1245
- logoHighlight: string;
1246
- background: string;
1247
- text: string;
1248
- textMuted: string;
1249
- textSubtle: string;
1250
- textDisabled: string;
1251
- textDecorativeLight: string;
1252
- dividerSubtle: string;
1253
- divider: string;
1254
- dividerStrong: string;
1255
- primary: string;
1256
- primaryLight: string;
1257
- primaryPastel: string;
1258
- secondary: string;
1259
- secondaryLight: string;
1260
- secondaryPastel: string;
1261
- secondaryBright: string;
1262
- inputBackground: string;
1263
- inputBackgroundLight: string;
1264
- codeBackground: string;
1265
- codeBackgroundDark: string;
1266
- selectedBackground: string;
1267
- breadcrumbText: string;
1268
- breadcrumbTextHover: string;
1269
- breadcrumbIcon: string;
1270
- canvasBackground: string;
1271
- canvasGrid: string;
1272
- sidebarBackground: string;
1273
- sidebarBackgroundTransparent: string;
1274
- popoverBackground: string;
1275
- popoverDivider: string;
1276
- listviewRaisedBackground: string;
1277
- listviewEditingBackground: string;
1278
- sliderThumbBackground: string;
1279
- sliderBorder: string;
1280
- segmentedControlItem: string;
1281
- mask: string;
1282
- transparentChecker: string;
1283
- scrollbar: string;
1284
- placeholderDots: string;
1285
- dragOutline: string;
1286
- activeBackground: string;
1287
- thumbnailBackground: string;
1288
- thumbnailShadow: string;
1289
- inlineCodeText: string;
1290
- inlineCodeBackground: string;
1291
- textLink: string;
1292
- textLinkFocused: string;
1293
- icon: string;
1294
- iconSelected: string;
1295
- warning: string;
1296
- dot: string;
1297
- rowHighlight: string;
1298
- tableRowBackground: string;
1299
- chipPrimaryBg: string;
1300
- chipSecondaryBg: string;
1301
- chipErrorBg: string;
1302
- chipDefaultBg: string;
1303
- chipPrimaryShadow: string;
1304
- chipSecondaryShadow: string;
1305
- chipErrorShadow: string;
1306
- chipDefaultShadow: string;
1307
- floatingButton: string;
1308
- };
1309
- fontFamily: {
1310
- sans: [string, string, string, string, string, string, string, string, string, string];
1311
- mono: [string, string, string, string, string];
1312
- };
1313
- fontSize: {
1314
- title: [string, {
1315
- lineHeight: string;
1316
- letterSpacing: string;
1317
- }];
1318
- subtitle: [string, {
1319
- lineHeight: string;
1320
- letterSpacing: string;
1321
- }];
1322
- heading1: [string, {
1323
- lineHeight: string;
1324
- letterSpacing: string;
1325
- }];
1326
- heading2: [string, {
1327
- lineHeight: string;
1328
- letterSpacing: string;
1329
- }];
1330
- heading3: [string, {
1331
- lineHeight: string;
1332
- letterSpacing: string;
1333
- }];
1334
- heading4: [string, {
1335
- lineHeight: string;
1336
- }];
1337
- heading5: [string, {
1338
- lineHeight: string;
1339
- }];
1340
- body: [string, {
1341
- lineHeight: string;
1342
- }];
1343
- small: [string, {
1344
- lineHeight: string;
1345
- }];
1346
- code: [string, {
1347
- lineHeight: string;
1348
- }];
1349
- button: [string, {
1350
- lineHeight: string;
1351
- letterSpacing: string;
1352
- }];
1353
- label: [string, {
1354
- lineHeight: string;
1355
- letterSpacing: string;
1356
- }];
1357
- };
1358
- spacing: {
1359
- nano: string;
1360
- micro: string;
1361
- small: string;
1362
- medium: string;
1363
- large: string;
1364
- xlarge: string;
1365
- xxlarge: string;
1366
- insetTop: string;
1367
- sidebarWidth: string;
1368
- toolbarHeight: string;
1369
- toolbarSeparator: string;
1370
- inspectorHSeparator: string;
1371
- inspectorVSeparator: string;
1372
- dialogPadding: string;
1373
- };
1374
- keyframes: {
1375
- spin: {
1376
- "0%": {
1377
- transform: string;
1378
- };
1379
- "100%": {
1380
- transform: string;
1381
- };
1382
- };
1383
- shimmer: {
1384
- "0%": {
1385
- backgroundPosition: string;
1386
- };
1387
- "100%": {
1388
- backgroundPosition: string;
1389
- };
1390
- };
1391
- };
1392
- animation: {
1393
- spin: string;
1394
- shimmer: string;
1395
- };
1396
- zIndex: {
1397
- interactable: string;
1398
- label: string;
1399
- menu: string;
1400
- };
1256
+ className?: string;
1257
+ }): React__default.JSX.Element;
1258
+ declare function GridViewSectionHeader({ title }: {
1259
+ title: string;
1260
+ }): React__default.JSX.Element;
1261
+ declare namespace GridView {
1262
+ const Root: React__default.MemoExoticComponent<typeof GridViewRoot>;
1263
+ const Item: <MenuItemType extends string>(props: ItemProps<MenuItemType> & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement | null;
1264
+ const Section: React__default.MemoExoticComponent<typeof GridViewSection>;
1265
+ const SectionHeader: React__default.MemoExoticComponent<typeof GridViewSectionHeader>;
1266
+ }
1267
+
1268
+ declare const IconButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<ButtonRootProps, "size" | "children" | "variant" | "flex"> & {
1269
+ iconName: IconName;
1270
+ className?: string;
1271
+ style?: React.CSSProperties;
1272
+ selected?: boolean;
1273
+ color?: string;
1274
+ size?: number;
1275
+ } & React.RefAttributes<HTMLButtonElement>>>;
1276
+
1277
+ declare const InspectorContainer: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<{
1278
+ header?: React__default.ReactNode;
1279
+ children?: React__default.ReactNode;
1280
+ fallback?: React__default.ReactNode;
1281
+ showDividers?: boolean;
1282
+ id?: string;
1283
+ className?: string;
1284
+ style?: React__default.CSSProperties;
1285
+ } & React__default.RefAttributes<HTMLDivElement>>>;
1286
+
1287
+ type MenuSeparatorComponent = React__default.FC<{
1288
+ className?: string;
1289
+ }>;
1290
+ type MenuItemTextComponent = React__default.FC<{
1291
+ children?: React__default.ReactNode;
1292
+ }>;
1293
+ type MenuItemComponent = React__default.ForwardRefExoticComponent<React__default.RefAttributes<HTMLDivElement> & React__default.PropsWithoutRef<{
1294
+ className?: string;
1295
+ disabled?: boolean;
1296
+ children?: React__default.ReactNode;
1297
+ value: string;
1298
+ onSelect?: (event: any) => void;
1299
+ }>>;
1300
+ type MenuCheckboxItemComponent = React__default.FC<{
1301
+ checked?: boolean | "indeterminate";
1302
+ disabled?: boolean;
1303
+ onSelect?: (event: any) => void;
1304
+ className?: string;
1305
+ children?: React__default.ReactNode;
1306
+ }>;
1307
+ type MenuItemIndicatorComponent = React__default.FC<{
1308
+ className?: string;
1309
+ children?: React__default.ReactNode;
1310
+ }>;
1311
+ type MenuComponents = {
1312
+ Separator: MenuSeparatorComponent;
1313
+ ItemText: MenuItemTextComponent;
1314
+ Item: MenuItemComponent;
1315
+ CheckboxItem?: MenuCheckboxItemComponent;
1316
+ ItemIndicator?: MenuItemIndicatorComponent;
1317
+ Sub?: typeof RadixDropdownMenu.Sub | typeof RadixContextMenu.Sub;
1318
+ SubTrigger?: typeof RadixDropdownMenu.SubTrigger | typeof RadixContextMenu.SubTrigger;
1319
+ SubContent?: typeof RadixDropdownMenu.SubContent | typeof RadixContextMenu.SubContent;
1320
+ Portal?: typeof RadixDropdownMenu.Portal | typeof RadixContextMenu.Portal;
1401
1321
  };
1322
+ type MenuViewportProps<T extends string> = {
1323
+ items: MenuItem<T>[];
1324
+ Components: MenuComponents;
1325
+ onSelect?: (value: any) => void;
1326
+ };
1327
+ declare const MenuViewport: <T extends string>({ items, Components, onSelect, }: MenuViewportProps<T>) => React__default.JSX.Element;
1402
1328
 
1403
- type KebabToCamelCase<S extends string> = S extends `${infer First}-${infer Rest}` ? `${First}${Capitalize<KebabToCamelCase<Rest>>}` : S;
1329
+ interface ContainerProps {
1330
+ children: React.ReactNode;
1331
+ renderLabel: (provided: {
1332
+ id: string;
1333
+ index: number;
1334
+ }) => React.ReactNode;
1335
+ }
1336
+ declare const LabeledElementView: React.NamedExoticComponent<ContainerProps>;
1404
1337
 
1405
- type Variant = "title" | "subtitle" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "body" | "small" | "button" | "code" | "label";
1406
- declare const textStyles: Record<Variant, string>;
1407
- type TextProps = {
1408
- as?: keyof ReactHTML;
1409
- href?: string;
1338
+ declare const labeledFieldStyles: (labelPosition?: LabelPosition) => string;
1339
+ declare const LabeledField: React__default.NamedExoticComponent<{
1340
+ children: React__default.ReactNode;
1341
+ label: React__default.ReactNode;
1342
+ labelPosition?: LabelPosition;
1343
+ /** Used for both the `id` of the field and the `htmlFor` of the label, unless `id` and `htmlFor` are explicitly provided */
1344
+ fieldId?: string;
1410
1345
  className?: string;
1411
1346
  style?: React__default.CSSProperties;
1412
- variant: Variant;
1413
- color?: KebabToCamelCase<ThemeColor>;
1414
- children: ReactNode;
1415
- id?: string;
1416
- onClick?: () => void;
1417
- onDoubleClick?: () => void;
1418
- onKeyDown?: (event: React__default.KeyboardEvent<HTMLSpanElement>) => void;
1419
- tabIndex?: number;
1347
+ /** @default 100 */
1348
+ minWidth?: number;
1349
+ }>;
1350
+
1351
+ declare const List: <T, M extends string = string>(props: CollectionProps<T, M> & {
1352
+ ref?: React__default.ForwardedRef<CollectionRef>;
1353
+ } & React__default.RefAttributes<CollectionRef>) => React__default.ReactElement | null;
1354
+
1355
+ type MessageProps = {
1356
+ role: "user" | "assistant" | "system" | "data";
1357
+ children?: React__default.ReactNode;
1358
+ user?: MultiplayerUser;
1359
+ /** @default 27 */
1360
+ avatarSize?: number;
1420
1361
  };
1421
- declare const Text$1: React__default.ForwardRefExoticComponent<TextProps & React__default.RefAttributes<HTMLElement>>;
1422
- type PresetProps = Omit<TextProps, "variant">;
1423
- declare const Heading1: React__default.ForwardRefExoticComponent<PresetProps & React__default.RefAttributes<HTMLElement>>;
1424
- declare const Heading2: React__default.ForwardRefExoticComponent<PresetProps & React__default.RefAttributes<HTMLElement>>;
1425
- declare const Heading3: React__default.ForwardRefExoticComponent<PresetProps & React__default.RefAttributes<HTMLElement>>;
1426
- declare const Heading4: React__default.ForwardRefExoticComponent<PresetProps & React__default.RefAttributes<HTMLElement>>;
1427
- declare const Heading5: React__default.ForwardRefExoticComponent<PresetProps & React__default.RefAttributes<HTMLElement>>;
1428
- declare const Body: React__default.ForwardRefExoticComponent<PresetProps & React__default.RefAttributes<HTMLElement>>;
1429
- declare const Small: React__default.ForwardRefExoticComponent<PresetProps & React__default.RefAttributes<HTMLElement>>;
1430
- declare const Italic: ({ children }: {
1431
- children: ReactNode;
1432
- }) => React__default.JSX.Element;
1362
+ declare const Message: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<MessageProps & React__default.RefAttributes<HTMLDivElement>>>;
1363
+
1364
+ type PopoverVariant = "normal" | "large";
1365
+ interface Props$7 extends Pick<ComponentProps<(typeof PopoverPrimitive)["Content"]>, "onOpenAutoFocus" | "onCloseAutoFocus" | "onPointerDownOutside" | "onInteractOutside" | "onFocusOutside" | "side"> {
1366
+ children: React__default.ReactNode;
1367
+ trigger: React__default.ReactNode;
1368
+ variant?: PopoverVariant;
1369
+ closable?: boolean;
1370
+ open?: boolean;
1371
+ onOpenChange?: (open: boolean) => void;
1372
+ sideOffset?: number;
1373
+ onClickClose?: () => void;
1374
+ showArrow?: boolean;
1375
+ className?: string;
1376
+ }
1377
+ declare function Popover({ children, trigger, variant, closable, open, side, sideOffset, showArrow, onOpenChange, onOpenAutoFocus, onCloseAutoFocus, onPointerDownOutside, onInteractOutside, onFocusOutside, onClickClose, className, }: Props$7): React__default.JSX.Element;
1378
+
1379
+ type ProgressVariant = "normal" | "warning" | "primary" | "secondary";
1380
+ declare function Progress({ value, variant, className, }: {
1381
+ value: number;
1382
+ variant?: ProgressVariant;
1383
+ className?: string;
1384
+ }): React.JSX.Element;
1385
+
1386
+ interface Props$6 {
1387
+ children?: React.ReactNode | ((scrollElementRef: HTMLDivElement) => React.ReactNode);
1388
+ }
1389
+ declare const ScrollArea: React.NamedExoticComponent<Props$6>;
1390
+
1391
+ type SegmentedControlColorScheme = "primary" | "secondary";
1392
+ interface SegmentedControlProps<T extends string> {
1393
+ id?: string;
1394
+ value?: T;
1395
+ onValueChange?: (value: T) => void;
1396
+ /** @default primary */
1397
+ colorScheme?: SegmentedControlColorScheme;
1398
+ allowEmpty?: boolean;
1399
+ separator?: boolean;
1400
+ items: SegmentedControlItemProps<T>[];
1401
+ className?: string;
1402
+ style?: React__default.CSSProperties;
1403
+ }
1404
+ type SegmentedControlItemProps<T extends string> = {
1405
+ title?: ReactNode;
1406
+ className?: string;
1407
+ style?: React__default.CSSProperties;
1408
+ tooltip?: ReactNode;
1409
+ } & Pick<SelectableMenuItem<T>, "value" | "disabled" | "icon" | "role" | "title">;
1410
+ declare const SegmentedControl: <T extends string>(props: SegmentedControlProps<T>) => React__default.ReactElement | null;
1411
+
1412
+ type Props$5<T extends string> = {
1413
+ id?: string;
1414
+ style?: React__default.CSSProperties;
1415
+ className?: string;
1416
+ items: MenuItem<T>[];
1417
+ value: T;
1418
+ onSelect?: (value: T) => void;
1419
+ placeholder?: string;
1420
+ disabled?: boolean;
1421
+ readOnly?: boolean;
1422
+ label?: React__default.ReactNode;
1423
+ onFocus?: FocusEventHandler;
1424
+ onBlur?: FocusEventHandler;
1425
+ contentStyle?: React__default.CSSProperties;
1426
+ } & Pick<SelectProps, "open" | "onOpenChange">;
1427
+ declare const SelectMenu: <T extends string = string>(props: Props$5<T>) => React__default.ReactElement | null;
1428
+
1429
+ type ColorScheme = "primary" | "secondary";
1430
+ interface Props$4 {
1431
+ id?: string;
1432
+ style?: React__default.CSSProperties;
1433
+ className?: string;
1434
+ value: number;
1435
+ onValueChange: (value: number) => void;
1436
+ min: number;
1437
+ max: number;
1438
+ step?: number;
1439
+ colorScheme?: ColorScheme;
1440
+ label?: React__default.ReactNode;
1441
+ onFocus?: FocusEventHandler;
1442
+ onBlur?: FocusEventHandler;
1443
+ readOnly?: boolean;
1444
+ }
1445
+ declare const Slider: React__default.NamedExoticComponent<Props$4>;
1446
+
1447
+ interface Props$3 {
1448
+ size?: number | string;
1449
+ inline?: boolean;
1450
+ }
1451
+ declare namespace Spacer {
1452
+ const Vertical: React.ForwardRefExoticComponent<Props$3 & React.RefAttributes<HTMLSpanElement>>;
1453
+ const Horizontal: React.ForwardRefExoticComponent<Props$3 & React.RefAttributes<HTMLSpanElement>>;
1454
+ }
1455
+
1456
+ type SwitchColorScheme = "primary" | "secondary";
1457
+ interface Props$2 {
1458
+ id?: string;
1459
+ value: boolean;
1460
+ onChange: (value: boolean) => void;
1461
+ /** @default normal */
1462
+ colorScheme?: SwitchColorScheme;
1463
+ disabled?: boolean;
1464
+ onFocus?: React.FocusEventHandler;
1465
+ onBlur?: React.FocusEventHandler;
1466
+ className?: string;
1467
+ style?: React.CSSProperties;
1468
+ }
1469
+ declare const Switch: ({ id, value, onChange, colorScheme, disabled, onFocus, onBlur, style, className, }: Props$2) => React.JSX.Element;
1433
1470
 
1434
1471
  declare const useAutoResize: (value: string | undefined) => React__default.MutableRefObject<HTMLTextAreaElement | null>;
1435
1472
  declare const TextArea: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<{
@@ -1473,6 +1510,7 @@ type TreeRowBaseProps = {
1473
1510
  onClickChevron?: ({ altKey }: {
1474
1511
  altKey: boolean;
1475
1512
  }) => void;
1513
+ onDoubleClick?: () => void;
1476
1514
  };
1477
1515
  type TreeViewRowProps<MenuItemType extends string> = ListView.RowProps<MenuItemType> & TreeRowBaseProps;
1478
1516
  declare namespace TreeView {
@@ -1724,7 +1762,7 @@ declare const mediaQuery: {
1724
1762
  declare function cx(...args: Array<string | number | boolean | null | undefined>): string;
1725
1763
 
1726
1764
  type Optional<T> = T | false | null | undefined;
1727
- type MenuConfig<T extends string> = Optional<Optional<RegularMenuItem<T>>[]>[];
1765
+ type MenuConfig<T extends string> = Optional<Optional<MenuItem<T>>[]>[];
1728
1766
  declare function createSectionedMenu<T extends string>(...sections: MenuConfig<T>): MenuItem<T>[];
1729
1767
 
1730
1768
  declare function getGradientBackground(value: Sketch.GradientStop[], type: Sketch.GradientType, direction?: number): string;
@@ -1736,6 +1774,42 @@ declare const colorForStringValues: Record<string, string>;
1736
1774
  */
1737
1775
  declare function colorFromString(str: string): string;
1738
1776
 
1777
+ type ComboboxStateSnapshot<T extends string> = {
1778
+ filter: string;
1779
+ selectedIndex: number;
1780
+ filteredItems: ScoredMenuItem<T>[];
1781
+ lastSubmittedValue: {
1782
+ filter: string;
1783
+ itemName: string;
1784
+ };
1785
+ };
1786
+ declare class ComboboxState<T extends string> {
1787
+ private filter;
1788
+ private selectedIndex;
1789
+ private items;
1790
+ private lastSubmittedValue;
1791
+ private subscribers;
1792
+ private version;
1793
+ private _cachedSnapshot;
1794
+ constructor(items: MenuItem<T>[], initialTitle: string, allowArbitraryValues: boolean);
1795
+ subscribe: (listener: () => void) => (() => void);
1796
+ private notifyChange;
1797
+ private getFilteredItems;
1798
+ getSnapshot: () => ComboboxStateSnapshot<T>;
1799
+ setItems(items: MenuItem<T>[]): void;
1800
+ setFilter(filter: string): void;
1801
+ moveSelection(direction: "up" | "down"): void;
1802
+ selectCurrentItem(item?: ScoredMenuItem<T>): SelectableMenuItem<T> | undefined;
1803
+ restoreLastSubmittedValue(): void;
1804
+ reset(newFilter?: string): void;
1805
+ getSelectedItem(): ScoredMenuItem<T> | undefined;
1806
+ getTypeaheadValue(): string | undefined;
1807
+ setSelectedIndex(index: number): void;
1808
+ submitArbitraryFilter(filter: string): void;
1809
+ }
1810
+ declare function getNextIndex<T>(items: T[], currentIndex: number, direction: "next" | "previous", isDisabled: (item: T) => boolean): number;
1811
+ declare function useComboboxState<T extends string>(state: ComboboxState<T>): ComboboxStateSnapshot<T>;
1812
+
1739
1813
  /**
1740
1814
  * Updates the selection state based on user interaction.
1741
1815
  * Handles single selection, multi-selection with meta/ctrl, and range selection with shift.
@@ -1835,4 +1909,4 @@ declare function ToolbarMenu<T extends string>({ items, onSelectMenuItem, }: {
1835
1909
  onSelectMenuItem?: (value: T) => void;
1836
1910
  }): React__default.JSX.Element;
1837
1911
 
1838
- export { ActivityIndicator, AnimatePresence, type AnimatePresenceProps, Avatar, type AvatarProps, AvatarStack, type BaseComboboxProps, BaseToolbar, type BaseToolbarProps, Body, Button, type ButtonRootProps, CHECKBOX_RIGHT_INSET, CHECKBOX_WIDTH, CONTENT_AREA_ID, Checkbox$1 as Checkbox, Chip, type ChipProps, Combobox, type ComboboxItem, ComboboxMenu, type ComboboxOption, type ComboboxProps, type ComboboxRef, type ComboboxSectionHeader, ComboboxState, type ComboboxStateSnapshot, CommandPalette, ContextMenu, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, Dialog, type DialogContextValue, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, DraggableMenuButton, type DropValidator, DropdownMenu, type DropdownRootProps, EDITOR_PANEL_GROUP_ID, type EditableRowProps, type ExtractMenuItemType, Fade, type FadeDirection, type FadeProps, FillInputField, FillPreviewBackground, FloatingWindow, FloatingWindowProvider, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, GradientPicker, GridView, type GridViewSize, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, type IScoredItem, type ISearchCompletionMenu, type IToken, type IVirtualizedList, type IWorkspaceLayout, IconButton, type IconName, type ImageDataContextValue, ImageDataProvider, IndentContext, InputField, type InputFieldInputProps, type InputFieldProps, type InputFieldSize, InsetLabel, type InsetLabelProps, InspectorContainer, InspectorPrimitives, type InternalComboboxItem, Italic, KeyboardShortcut, LEFT_SIDEBAR_ID, Label, LabelContext, type LabelPosition, LabelPositionContext, type LabelPositionContextValue, type LabelProps, LabelWidthContext, type LabelWidthContextValue, LabeledElementView, LabeledField, type ListRowMarginType, type ListRowPosition, ListView, type ListViewRootProps, type MatchRange, type MenuComponents, type MenuConfig, type MenuItem, type MenuItemProps, type MenuItemRole, type MenuProps, MenuViewport, Message, type MessageProps, type OptionModeOnlyProps, type OptionModeProps, type Optional, type PanelLayoutState, PatternPreviewBackground, Popover, Progress, RIGHT_SIDEBAR_ID, type RegularMenuItem, type RelativeDropPosition, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, ScrollArea, SearchCompletionMenu, SectionHeader$1 as SectionHeader, type SectionHeaderMenuItem, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectMenu, type SeparatorItem, type SetNumberMode, type SideOptions, SidebarList, type SketchPattern, Slider, Small, Sortable, 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, UserPointer, type UserPointerProps, WorkspaceLayout, type WorkspaceLayoutProps, colorForStringValues, colorFromString, createSectionedMenu, cssVars, cx, fuzzyFilter, fuzzyScore, fuzzyTokenize, getFieldSpacing, getGradientBackground, getKeyboardShortcutsForMenuItems, getNewValue, getNextIndex, insetLabelStyles, insetLabelTextStyles, labeledFieldStyles, mediaQuery, normalizeListDestinationIndex, renderIcon, rgbaToSketchColor, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, styles, textStyles, updateSelection, useAutoResize, useComboboxState, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDialogContainsElement, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useIndent, useInputFieldContext, useLabel, useLabelPosition, useLabelWidth, useOpenConfirmationDialog, useOpenInputDialog, usePlatform, usePlatformModKey, usePreservePanelSize, useTheme, withSeparatorElements };
1912
+ export { ActivityIndicator, AnimatePresence, type AnimatePresenceProps, Avatar, type AvatarProps, AvatarStack, type BaseComboboxProps, BaseToolbar, type BaseToolbarProps, Body, BreadcrumbText, Button, type ButtonRootProps, CHECKBOX_RIGHT_INSET, CHECKBOX_WIDTH, CONTENT_AREA_ID, Checkbox$1 as Checkbox, Chip, type ChipProps, Collection, type CollectionProps, type CollectionRef, type CollectionViewType, Combobox, ComboboxMenu, type ComboboxProps, type ComboboxRef, ComboboxState, type ComboboxStateSnapshot, CommandPalette, ContextMenu, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, Dialog, type DialogContextValue, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, DraggableMenuButton, type DropValidator, DropdownMenu, type DropdownRootProps, EDITOR_PANEL_GROUP_ID, type EditableRowProps, EditableText, type EditableTextRef, type ExtractMenuItemType, Fade, type FadeDirection, type FadeProps, 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, type IScoredItem, type ISearchCompletionMenu, type IToken, type IVirtualizedList, type IWorkspaceLayout, IconButton, type IconName, type ImageDataContextValue, ImageDataProvider, IndentContext, InputField, type InputFieldInputProps, type InputFieldProps, type InputFieldSize, InsetLabel, type InsetLabelProps, InspectorContainer, InspectorPrimitives, Italic, KeyboardShortcut, LEFT_SIDEBAR_ID, Label, LabelContext, type LabelPosition, LabelPositionContext, type LabelPositionContextValue, type LabelProps, LabelWidthContext, type LabelWidthContextValue, LabeledElementView, LabeledField, List, type ListRowMarginType, type ListRowPosition, ListView, type ListViewRootProps, type MatchRange, type MenuComponents, type MenuConfig, type MenuItem, type MenuItemProps, type MenuItemRole, type MenuProps, MenuViewport, Message, type MessageProps, type NonSelectableMenuItem, type OptionModeOnlyProps, type OptionModeProps, type Optional, type PanelLayoutState, PatternPreviewBackground, Popover, Progress, RIGHT_SIDEBAR_ID, type RelativeDropPosition, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, type ScoredMenuItem, ScrollArea, SearchCompletionMenu, SectionHeader$1 as SectionHeader, type SectionHeaderMenuItem, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectMenu, type SelectableMenuItem, type SeparatorItem, type SetNumberMode, type SideOptions, type SketchPattern, Slider, Small, Sortable, 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, UserPointer, type UserPointerProps, WorkspaceLayout, type WorkspaceLayoutProps, colorForStringValues, colorFromString, createSectionedMenu, cssVars, cx, fuzzyFilter, fuzzyScore, fuzzyTokenize, getFieldSpacing, getGradientBackground, getGridSize, getKeyboardShortcutsForMenuItems, getNewValue, getNextIndex, insetLabelStyles, insetLabelTextStyles, isMenuItemSectionHeader, isNonSelectableMenuItem, isSelectableMenuItem, isSelectableMenuItemWithScore, labeledFieldStyles, mediaQuery, normalizeListDestinationIndex, renderIcon, rgbaToSketchColor, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, styles, textStyles, updateSelection, useAutoResize, useComboboxState, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDialogContainsElement, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useIndent, useInputFieldContext, useLabel, useLabelPosition, useLabelWidth, useOpenConfirmationDialog, useOpenInputDialog, usePlatform, usePlatformModKey, usePreservePanelSize, useTheme, withSeparatorElements };