@noya-app/noya-designsystem 0.1.35 → 0.1.36

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.
@@ -0,0 +1,1053 @@
1
+ import * as React$1 from 'react';
2
+ import React__default, { CSSProperties, ReactNode, ComponentProps, SyntheticEvent, AriaRole, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, FocusEventHandler, InputHTMLAttributes, Ref, ReactHTML } from 'react';
3
+ import * as Icons from '@noya-app/noya-icons';
4
+ export { Icons };
5
+ import * as DialogPrimitive from '@radix-ui/react-dialog';
6
+ import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
7
+ import { Sketch } from '@noya-app/noya-file-format';
8
+ import * as _noya_app_noya_keymap from '@noya-app/noya-keymap';
9
+ import { KeyModifiers, PlatformName } from '@noya-app/noya-keymap';
10
+ import { Property } from 'csstype';
11
+ import * as _noya_app_noya_geometry from '@noya-app/noya-geometry';
12
+ import { Size } from '@noya-app/noya-geometry';
13
+ import { IItemScore } from 'vscode-fuzzy-scorer';
14
+ import { useSortable } from '@dnd-kit/sortable';
15
+ import * as PopoverPrimitive from '@radix-ui/react-popover';
16
+ import { SelectProps } from '@radix-ui/react-select';
17
+ import { Config } from 'tailwindcss';
18
+ import { ImperativePanelGroupHandle } from 'react-resizable-panels';
19
+ import { RgbaColor } from '@noya-app/noya-colorpicker';
20
+
21
+ interface Props$f {
22
+ size?: number;
23
+ opacity?: number;
24
+ color?: string;
25
+ trackColor?: string;
26
+ }
27
+ declare const ActivityIndicator: (props: Props$f) => React__default.ReactElement | null;
28
+
29
+ declare const Avatar: (props: {
30
+ image?: string;
31
+ name?: string;
32
+ fallback?: string;
33
+ size?: number;
34
+ overflow?: number;
35
+ style?: React__default.CSSProperties;
36
+ className?: string;
37
+ } & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement | null;
38
+ declare function AvatarStack({ size, children, }: {
39
+ size?: number;
40
+ children: React__default.ReactNode;
41
+ }): React__default.JSX.Element;
42
+
43
+ type ButtonVariant = "normal" | "primary" | "secondary" | "secondaryBright" | "thin" | "floating" | "none";
44
+ type ButtonSize = "small" | "normal" | "large" | "floating";
45
+ interface ButtonRootProps {
46
+ id?: string;
47
+ className?: string;
48
+ style?: CSSProperties;
49
+ tabIndex?: number;
50
+ children: ReactNode;
51
+ active?: boolean;
52
+ disabled?: boolean;
53
+ variant?: ButtonVariant;
54
+ size?: ButtonSize;
55
+ tooltip?: ReactNode;
56
+ onClick?: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
57
+ onPointerDown?: (event: React__default.PointerEvent<HTMLButtonElement>) => void;
58
+ contentStyle?: CSSProperties;
59
+ as?: React__default.ElementType;
60
+ htmlFor?: string;
61
+ href?: string;
62
+ target?: string;
63
+ rel?: string;
64
+ }
65
+ declare const Button: (props: ButtonRootProps & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement | null;
66
+
67
+ type ChipColorScheme = "primary" | "secondary" | "error";
68
+ type ChipSize = "small" | "medium" | "large";
69
+ type ChipVariant = "solid" | "outlined" | "ghost";
70
+ interface ChipProps {
71
+ id?: string;
72
+ className?: string;
73
+ colorScheme?: ChipColorScheme;
74
+ variant?: ChipVariant;
75
+ size?: ChipSize;
76
+ children?: React__default.ReactNode;
77
+ clickable?: boolean;
78
+ deletable?: boolean;
79
+ addable?: boolean;
80
+ monospace?: boolean;
81
+ onDelete?: () => void;
82
+ onAdd?: () => void;
83
+ onClick?: () => void;
84
+ onHoverDeleteChange?: (hovering: boolean) => void;
85
+ style?: React__default.CSSProperties;
86
+ tabIndex?: number;
87
+ }
88
+ declare const Chip: (props: ChipProps & React__default.RefAttributes<HTMLSpanElement>) => React__default.ReactElement | null;
89
+
90
+ type IconName = keyof typeof Icons;
91
+
92
+ declare function renderIcon(iconName: Exclude<ReactNode, string> | IconName): ReactNode;
93
+
94
+ declare const SEPARATOR_ITEM = "separator";
95
+ 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";
96
+ type RegularMenuItem<T extends string> = {
97
+ value?: T;
98
+ title: ReactNode;
99
+ shortcut?: string;
100
+ checked?: boolean;
101
+ disabled?: boolean;
102
+ icon?: Exclude<ReactNode, string> | IconName;
103
+ items?: MenuItem<T>[];
104
+ role?: MenuItemRole;
105
+ };
106
+ type MenuItem<T extends string> = typeof SEPARATOR_ITEM | RegularMenuItem<T>;
107
+ type ExtractMenuItemType<T> = T extends RegularMenuItem<infer U> ? U : never;
108
+ declare const KeyboardShortcut: (props: {
109
+ shortcut: string;
110
+ }) => React__default.ReactElement | null;
111
+
112
+ interface MenuItemProps<T extends string> {
113
+ value?: T;
114
+ children: ReactNode;
115
+ onSelect: (value: T) => void;
116
+ checked: boolean;
117
+ disabled: boolean;
118
+ indented: boolean;
119
+ shortcut?: string;
120
+ icon?: ReactNode;
121
+ items?: MenuItem<T>[];
122
+ }
123
+ interface MenuProps<T extends string> {
124
+ children: ReactNode;
125
+ items: MenuItem<T>[];
126
+ onSelect: (value: T) => void;
127
+ isNested?: boolean;
128
+ shouldBindKeyboardShortcuts?: boolean;
129
+ onOpenChange?: (open: boolean) => void;
130
+ }
131
+ declare const ContextMenu: <T extends string>(props: MenuProps<T>) => React__default.ReactElement | null;
132
+
133
+ declare const StyledContent: (props: Omit<DialogPrimitive.DialogContentProps & React__default.RefAttributes<HTMLDivElement>, "ref"> & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement | null;
134
+ interface IDialog {
135
+ containsElement: (element: HTMLElement) => boolean;
136
+ }
137
+ interface Props$e {
138
+ title?: ReactNode;
139
+ description?: ReactNode;
140
+ children?: ReactNode;
141
+ style?: ComponentProps<typeof StyledContent>["style"];
142
+ open: ComponentProps<typeof DialogPrimitive.Root>["open"];
143
+ onOpenChange?: ComponentProps<typeof DialogPrimitive.Root>["onOpenChange"];
144
+ onOpenAutoFocus?: ComponentProps<typeof DialogPrimitive.Content>["onOpenAutoFocus"];
145
+ closeOnInteractOutside?: boolean;
146
+ }
147
+ declare const Dialog: (props: Props$e & React__default.RefAttributes<IDialog>) => React__default.ReactElement | null;
148
+ declare const FullscreenDialog: (props: Props$e & React__default.RefAttributes<IDialog>) => React__default.ReactElement | null;
149
+
150
+ type DividerVariant = "normal" | "subtle" | "strong";
151
+ interface DividerProps {
152
+ variant?: DividerVariant;
153
+ overflow?: number | string;
154
+ className?: string;
155
+ style?: React__default.CSSProperties;
156
+ }
157
+ declare const Divider: (props: DividerProps) => React__default.ReactElement | null;
158
+ declare const DividerVertical: (props: DividerProps) => React__default.ReactElement | null;
159
+
160
+ /**
161
+ * A button that opens a menu when clicked, but also allows dragging the
162
+ */
163
+ declare const DraggableMenuButton: <T extends string>(props: {
164
+ items?: MenuItem<T>[];
165
+ onSelect?: (value: T) => void;
166
+ isVisible?: boolean;
167
+ }) => React__default.ReactElement | null;
168
+
169
+ declare const DropdownMenu: <T extends string>(props: MenuProps<T> & {
170
+ open?: boolean;
171
+ onCloseAutoFocus?: React__default.EventHandler<SyntheticEvent<unknown>>;
172
+ emptyState?: React__default.ReactNode;
173
+ } & Pick<RadixDropdownMenu.DropdownMenuContentProps & React__default.RefAttributes<HTMLDivElement>, "align" | "side" | "sideOffset" | "alignOffset" | "collisionPadding"> & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement | null;
174
+
175
+ declare const SUPPORTED_IMAGE_UPLOAD_TYPES: ("image/png" | "image/jpeg" | "image/webp" | "image/svg+xml" | "application/pdf")[];
176
+ declare const SUPPORTED_CANVAS_UPLOAD_TYPES: ("" | "image/png" | "image/jpeg" | "image/webp" | "image/svg+xml" | "application/pdf")[];
177
+ type SupportedImageUploadType = (typeof SUPPORTED_IMAGE_UPLOAD_TYPES)[number];
178
+ type SupportedCanvasUploadType = (typeof SUPPORTED_CANVAS_UPLOAD_TYPES)[number];
179
+ type SketchPattern = {
180
+ _class: 'pattern';
181
+ image?: Sketch.FileRef | Sketch.DataRef;
182
+ patternFillType: Sketch.PatternFillType;
183
+ patternTileScale: number;
184
+ };
185
+
186
+ interface Props$d {
187
+ id?: string;
188
+ value?: Sketch.Color | Sketch.Gradient | SketchPattern;
189
+ }
190
+ declare const FillInputField: (props: Props$d & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement | null;
191
+
192
+ declare const PatternPreviewBackground: (props: {
193
+ fillType: Sketch.PatternFillType;
194
+ tileScale: number;
195
+ imageRef: string;
196
+ }) => React__default.ReactElement | null;
197
+ interface Props$c {
198
+ value?: Sketch.Color | Sketch.Gradient | SketchPattern;
199
+ }
200
+ declare const FillPreviewBackground: (props: Props$c) => React__default.ReactElement | null;
201
+
202
+ interface FloatingWindowProps {
203
+ title?: string;
204
+ onClose?: () => void;
205
+ children: React__default.ReactNode;
206
+ initialWidth?: number;
207
+ initialHeight?: number;
208
+ initialX?: number;
209
+ initialY?: number;
210
+ minWidth?: number;
211
+ minHeight?: number;
212
+ toolbarContent?: React__default.ReactNode;
213
+ renderToolbar?: (props: {
214
+ title?: string;
215
+ toolbarContent?: React__default.ReactNode;
216
+ onClose?: () => void;
217
+ }) => React__default.ReactNode;
218
+ }
219
+ declare const FloatingWindow: React__default.FC<FloatingWindowProps>;
220
+
221
+ interface Props$b {
222
+ value: Sketch.GradientStop[];
223
+ selectedStop: number;
224
+ onChangeColor: (color: Sketch.Color) => void;
225
+ onChangePosition: (position: number) => void;
226
+ onAdd: (color: Sketch.Color, position: number) => void;
227
+ onDelete: () => void;
228
+ onSelectStop: (index: number) => void;
229
+ }
230
+ declare const GradientPicker: (props: Props$b) => React__default.ReactElement | null;
231
+
232
+ type GridViewSize = "xxs" | "xs" | "small" | "medium" | "large" | "xl";
233
+ interface ItemProps$2<MenuItemType extends string = string> {
234
+ id: string;
235
+ title?: ReactNode;
236
+ subtitle?: ReactNode;
237
+ loading?: boolean;
238
+ selected?: boolean;
239
+ onClick?: (event: React__default.MouseEvent) => void;
240
+ onPress?: (options: KeyModifiers) => void;
241
+ onDoubleClick?: () => void;
242
+ onHoverChange?: (isHovering: boolean) => void;
243
+ children?: ReactNode;
244
+ menuItems?: MenuItem<MenuItemType>[];
245
+ onSelectMenuItem?: (value: MenuItemType) => void;
246
+ onContextMenu?: () => void;
247
+ style?: CSSProperties;
248
+ }
249
+ type GridViewContextValue = {
250
+ size: GridViewSize;
251
+ textPosition: "overlay" | "below" | "toolip";
252
+ bordered: boolean;
253
+ disabled: boolean;
254
+ };
255
+ interface GridViewRootProps extends Partial<GridViewContextValue> {
256
+ children: ReactNode;
257
+ onClick?: () => void;
258
+ scrollable?: boolean;
259
+ }
260
+ declare namespace GridView {
261
+ const Root: (props: GridViewRootProps) => React__default.ReactElement | null;
262
+ const Item: <MenuItemType extends string>(props: ItemProps$2<MenuItemType> & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement | null;
263
+ const Section: (props: {
264
+ children?: ReactNode;
265
+ className?: string;
266
+ }) => React__default.ReactElement | null;
267
+ const SectionHeader: (props: {
268
+ title: string;
269
+ }) => React__default.ReactElement | null;
270
+ }
271
+
272
+ declare const IconButton: (props: Omit<ButtonRootProps, "size" | "flex" | "children" | "variant"> & {
273
+ iconName: IconName;
274
+ className?: string;
275
+ style?: CSSProperties;
276
+ selected?: boolean;
277
+ color?: string;
278
+ size?: number;
279
+ } & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement | null;
280
+
281
+ type Props$a = {
282
+ id?: string;
283
+ style?: any;
284
+ className?: string;
285
+ type?: "text" | "search";
286
+ disabled?: boolean;
287
+ value: string;
288
+ placeholder?: string;
289
+ role?: AriaRole;
290
+ name?: HTMLInputElement["name"];
291
+ onKeyDown?: KeyboardEventHandler;
292
+ onClick?: MouseEventHandler;
293
+ onDoubleClick?: MouseEventHandler;
294
+ onPointerDown?: PointerEventHandler;
295
+ onFocusCapture?: FocusEventHandler;
296
+ onFocusChange?: (isFocused: boolean) => void;
297
+ onBlur?: FocusEventHandler;
298
+ } & Pick<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "autoCapitalize" | "autoCorrect" | "spellCheck" | "autoFocus">;
299
+ type ReadOnlyProps = Props$a & {
300
+ readOnly: true;
301
+ };
302
+ type ControlledProps = Props$a & {
303
+ onChange: (value: string) => void;
304
+ };
305
+ type SubmittableProps = Props$a & {
306
+ onSubmit: (value: string) => void;
307
+ allowSubmittingWithSameValue?: boolean;
308
+ submitAutomaticallyAfterDelay?: number;
309
+ };
310
+ type TextInputProps = ReadOnlyProps | ControlledProps | SubmittableProps;
311
+
312
+ type LabelPosition = "start" | "end";
313
+ type InputFieldSize = "small" | "medium" | "large";
314
+ interface InputFieldLabelProps {
315
+ children?: ReactNode;
316
+ pointerEvents?: Property.PointerEvents;
317
+ style?: React__default.CSSProperties;
318
+ className?: string;
319
+ }
320
+ interface InputFieldDropdownProps<T extends string> {
321
+ id?: string;
322
+ items: MenuItem<T>[];
323
+ onSelect: (value: T) => void;
324
+ children?: ReactNode;
325
+ }
326
+ type InputFieldInputProps = TextInputProps & {
327
+ textAlign?: Property.TextAlign;
328
+ variant?: "bare";
329
+ };
330
+ type InputFieldNumberInputProps = Omit<TextInputProps, "value" | "onChange" | "onKeyDown" | "onSubmit"> & {
331
+ value: number | undefined;
332
+ onNudge?: (value: number) => void;
333
+ variant?: "bare";
334
+ } & ({
335
+ onChange: (value: number) => void;
336
+ } | {
337
+ onSubmit: (value: number) => void;
338
+ });
339
+ interface InputFieldRootProps {
340
+ id?: string;
341
+ flex?: string;
342
+ children?: ReactNode;
343
+ width?: number;
344
+ /** @default end */
345
+ labelPosition?: LabelPosition;
346
+ labelSize?: number;
347
+ hasDropdown?: boolean;
348
+ /** @default medium */
349
+ size?: InputFieldSize;
350
+ renderPopoverContent?: (options: {
351
+ width: number;
352
+ }) => ReactNode;
353
+ onFocusChange?: (isFocused: boolean) => void;
354
+ style?: React__default.CSSProperties;
355
+ className?: string;
356
+ }
357
+ declare namespace InputField {
358
+ const Root: (props: InputFieldRootProps) => React__default.ReactElement | null;
359
+ const Input: (props: InputFieldInputProps & React__default.RefAttributes<HTMLInputElement>) => React__default.ReactElement | null;
360
+ const Typeahead: (props: {
361
+ prefix: string;
362
+ value: string;
363
+ }) => React__default.ReactElement | null;
364
+ const NumberInput: (props: InputFieldNumberInputProps) => React__default.ReactElement | null;
365
+ const DropdownMenu: <T extends string>(props: InputFieldDropdownProps<T>) => React__default.ReactElement | null;
366
+ const Button: (props: React__default.ButtonHTMLAttributes<HTMLButtonElement> & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement | null;
367
+ const Label: (props: InputFieldLabelProps & React__default.RefAttributes<HTMLLabelElement>) => React__default.ReactElement | null;
368
+ const PrimitiveElement: ({ readOnly, disabled, className, ...props }: {
369
+ readOnly?: boolean;
370
+ disabled?: boolean;
371
+ } & React__default.DetailedHTMLProps<React__default.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>) => React__default.JSX.Element;
372
+ }
373
+
374
+ declare function fuzzyScore({ item, query }: {
375
+ item: string;
376
+ query: string;
377
+ }): IItemScore;
378
+ type IScoredItem = IItemScore & {
379
+ index: number;
380
+ };
381
+ declare function fuzzyFilter({ items, query, scoreThreshold, }: {
382
+ items: string[];
383
+ query: string;
384
+ scoreThreshold?: number;
385
+ }): IScoredItem[];
386
+ type IToken = {
387
+ type: 'text';
388
+ text: string;
389
+ } | {
390
+ type: 'match';
391
+ text: string;
392
+ };
393
+ type MatchRange = {
394
+ start: number;
395
+ end: number;
396
+ };
397
+ declare function fuzzyTokenize({ item, itemScore, }: {
398
+ item: string;
399
+ itemScore: IItemScore;
400
+ }): IToken[];
401
+
402
+ type CompletionItem = {
403
+ type?: undefined;
404
+ id: string;
405
+ name: string;
406
+ icon?: ReactNode;
407
+ alwaysInclude?: boolean;
408
+ };
409
+ type CompletionSectionHeader = {
410
+ type: 'sectionHeader';
411
+ id: string;
412
+ name: string;
413
+ maxVisibleItems?: number;
414
+ };
415
+ type CompletionListItem = (CompletionItem & IScoredItem) | CompletionSectionHeader;
416
+
417
+ type RelativeDropPosition = "above" | "below" | "inside";
418
+ type DropValidator = (sourceIndex: number, destinationIndex: number, position: RelativeDropPosition) => boolean;
419
+ declare const normalizeListDestinationIndex: (index: number, position: "above" | "below") => number;
420
+ type UseSortableReturnType = ReturnType<typeof useSortable>;
421
+ interface ItemProps$1<T> {
422
+ id: string;
423
+ disabled?: boolean;
424
+ children: (props: {
425
+ ref: Ref<T>;
426
+ relativeDropPosition?: RelativeDropPosition;
427
+ [key: string]: any;
428
+ } & UseSortableReturnType["attributes"]) => JSX.Element;
429
+ }
430
+ interface RootProps {
431
+ keys: string[];
432
+ children: ReactNode;
433
+ renderOverlay?: (index: number) => ReactNode;
434
+ onMoveItem?: (sourceIndex: number, destinationIndex: number, position: RelativeDropPosition) => void;
435
+ acceptsDrop?: DropValidator;
436
+ axis?: "x" | "y";
437
+ }
438
+ declare namespace Sortable {
439
+ const Item: <T extends HTMLElement>(props: ItemProps$1<T>) => React__default.ReactElement | null;
440
+ const Root: (props: RootProps) => React__default.ReactElement | null;
441
+ }
442
+
443
+ type ListRowMarginType = "none" | "top" | "bottom" | "vertical";
444
+ type ListRowPosition = "only" | "first" | "middle" | "last";
445
+ type ListColorScheme = "primary" | "secondary";
446
+ type PressEventName = "onClick" | "onPointerDown";
447
+ type ListRowContextValue = {
448
+ marginType: ListRowMarginType;
449
+ selectedPosition: ListRowPosition;
450
+ sortable: boolean;
451
+ expandable: boolean;
452
+ divider: boolean;
453
+ gap: number;
454
+ variant: ListViewVariant;
455
+ sectionHeaderVariant: ListViewSectionHeaderVariant;
456
+ pressEventName: PressEventName;
457
+ isSectionHeader: boolean;
458
+ colorScheme: ListColorScheme;
459
+ };
460
+ interface EditableRowProps {
461
+ value: string;
462
+ onSubmitEditing: (value: string) => void;
463
+ autoFocus: boolean;
464
+ placeholder?: string;
465
+ }
466
+ interface ListViewClickInfo {
467
+ shiftKey: boolean;
468
+ altKey: boolean;
469
+ metaKey: boolean;
470
+ ctrlKey: boolean;
471
+ }
472
+ interface ListViewRowProps<MenuItemType extends string = string> {
473
+ id?: string;
474
+ tabIndex?: number;
475
+ selected?: boolean;
476
+ /** @default 0 */
477
+ depth?: number;
478
+ disabled?: boolean;
479
+ hovered?: boolean;
480
+ sortable?: boolean;
481
+ gap?: number;
482
+ backgroundColor?: CSSProperties["backgroundColor"];
483
+ onPress?: (info: ListViewClickInfo) => void;
484
+ onDoubleClick?: () => void;
485
+ onHoverChange?: (isHovering: boolean) => void;
486
+ children?: ReactNode;
487
+ isSectionHeader?: boolean;
488
+ menuItems?: MenuItem<MenuItemType>[];
489
+ onSelectMenuItem?: (value: MenuItemType) => void;
490
+ onContextMenu?: () => void;
491
+ onMenuOpenChange?: (isOpen: boolean) => void;
492
+ onKeyDown?: (event: React__default.KeyboardEvent) => void;
493
+ style?: CSSProperties;
494
+ className?: string;
495
+ dragIndicatorStyle?: CSSProperties | ((props: {
496
+ depth: number;
497
+ indentation: number;
498
+ position: RelativeDropPosition;
499
+ }) => CSSProperties);
500
+ }
501
+ interface IVirtualizedList {
502
+ scrollToIndex(index: number): void;
503
+ }
504
+ type ListViewItemInfo = {
505
+ isDragging: boolean;
506
+ };
507
+ type ChildrenProps = {
508
+ children: ReactNode;
509
+ };
510
+ type RenderProps<T> = {
511
+ data: T[];
512
+ renderItem: (item: T, index: number, info: ListViewItemInfo) => ReactNode;
513
+ keyExtractor: (item: T, index: number) => string;
514
+ /**
515
+ * Each item must have an `id` in order to be sortable.
516
+ *
517
+ * Additionally, the key extracted with `keyExtractor` must match the ListItem.Row `id`.
518
+ */
519
+ sortable?: boolean;
520
+ virtualized?: Size;
521
+ };
522
+ type ListViewVariant = "normal" | "padded" | "bare";
523
+ type ListViewSectionHeaderVariant = "normal" | "label";
524
+ type ListViewRootProps = {
525
+ id?: string;
526
+ className?: string;
527
+ style?: CSSProperties;
528
+ onPress?: () => void;
529
+ scrollable?: boolean;
530
+ expandable?: boolean;
531
+ onMoveItem?: (sourceIndex: number, destinationIndex: number, position: RelativeDropPosition) => void;
532
+ indentation?: number;
533
+ acceptsDrop?: DropValidator;
534
+ pressEventName?: PressEventName;
535
+ variant?: ListViewVariant;
536
+ sectionHeaderVariant?: ListViewSectionHeaderVariant;
537
+ divider?: boolean;
538
+ gap?: number;
539
+ colorScheme?: ListColorScheme;
540
+ };
541
+ declare namespace ListView {
542
+ const RowTitle: (props: {
543
+ className?: string;
544
+ children: React__default.ReactNode;
545
+ } & React__default.HTMLAttributes<HTMLSpanElement>) => React__default.ReactElement | null;
546
+ const EditableRowTitle: (props: EditableRowProps) => React__default.ReactElement | null;
547
+ const Row: <MenuItemType extends string>(props: ListViewRowProps<MenuItemType> & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement | null;
548
+ const Root: <T = any>(props: ((ChildrenProps | RenderProps<T>) & ListViewRootProps) & React__default.RefAttributes<IVirtualizedList>) => React__default.ReactElement | null;
549
+ const RowContext: React__default.Context<ListRowContextValue>;
550
+ type ClickInfo = ListViewClickInfo;
551
+ type ItemInfo = ListViewItemInfo;
552
+ type RowProps<MenuItemType extends string = string> = ListViewRowProps<MenuItemType>;
553
+ type VirtualizedList = IVirtualizedList;
554
+ const DragIndicator: (props: React__default.HTMLAttributes<HTMLDivElement> & {
555
+ $relativeDropPosition: RelativeDropPosition;
556
+ $gap: number;
557
+ $offsetLeft: number;
558
+ $colorScheme: ListColorScheme;
559
+ } & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement | null;
560
+ const rowHeight = 31;
561
+ const sectionHeaderLabelHeight = 27;
562
+ const calculateHeight: (items: number, headerCount: number, headerVariant: ListViewSectionHeaderVariant) => number;
563
+ const normalizeDestinationIndex: (index: number, position: "above" | "below") => number;
564
+ }
565
+
566
+ interface CompletionMenuProps {
567
+ items: CompletionListItem[];
568
+ selectedIndex: number;
569
+ onSelectItem: (item: CompletionListItem) => void;
570
+ onHoverIndex: (index: number) => void;
571
+ listSize: Size;
572
+ }
573
+ declare const CompletionMenu: (props: CompletionMenuProps & React__default.RefAttributes<IVirtualizedList>) => React__default.ReactElement | null;
574
+ type InputFieldWithCompletionsProps = {
575
+ loading?: boolean;
576
+ initialValue?: string;
577
+ placeholder?: string;
578
+ items: (CompletionItem | CompletionSectionHeader)[];
579
+ onChange?: (value: string) => void;
580
+ onHoverItem?: (item: CompletionItem | undefined) => void;
581
+ onSelectItem?: (item: CompletionItem) => void;
582
+ onFocus?: (event: React__default.FocusEvent<HTMLInputElement>) => void;
583
+ onBlur?: (didSubmit: boolean, value: string) => void;
584
+ onDeleteWhenEmpty?: () => void;
585
+ size?: InputFieldSize;
586
+ style?: React__default.CSSProperties;
587
+ className?: string;
588
+ children?: React__default.ReactNode;
589
+ hideChildrenWhenFocused?: boolean;
590
+ hideMenuWhenEmptyValue?: boolean;
591
+ };
592
+ interface InputFieldWithCompletionsRef {
593
+ focus(): void;
594
+ setValue(value: string): void;
595
+ selectAllInputText(): void;
596
+ }
597
+ declare const InputFieldWithCompletions: (props: InputFieldWithCompletionsProps & React__default.RefAttributes<InputFieldWithCompletionsRef>) => React__default.ReactElement | null;
598
+
599
+ declare const InspectorContainer: (props: {
600
+ header?: React__default.ReactNode;
601
+ children?: React__default.ReactNode;
602
+ fallback?: React__default.ReactNode;
603
+ showDividers?: boolean;
604
+ id?: string;
605
+ className?: string;
606
+ style?: React__default.CSSProperties;
607
+ } & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement | null;
608
+
609
+ interface LabelRootProps {
610
+ label: ReactNode;
611
+ children: ReactNode;
612
+ }
613
+ declare namespace Label {
614
+ const Root: (props: LabelRootProps) => React__default.ReactElement | null;
615
+ }
616
+
617
+ interface ContainerProps {
618
+ children: ReactNode;
619
+ renderLabel: (provided: {
620
+ id: string;
621
+ index: number;
622
+ }) => ReactNode;
623
+ }
624
+ declare const LabeledElementView: (props: ContainerProps) => React__default.ReactElement | null;
625
+
626
+ type PopoverVariant = "normal" | "large";
627
+ interface Props$9 extends Pick<ComponentProps<(typeof PopoverPrimitive)["Content"]>, "onOpenAutoFocus" | "onCloseAutoFocus" | "onPointerDownOutside" | "onInteractOutside" | "onFocusOutside" | "side"> {
628
+ children: React__default.ReactNode;
629
+ trigger: React__default.ReactNode;
630
+ variant?: PopoverVariant;
631
+ closable?: boolean;
632
+ open?: boolean;
633
+ onOpenChange?: (open: boolean) => void;
634
+ sideOffset?: number;
635
+ onClickClose?: () => void;
636
+ showArrow?: boolean;
637
+ }
638
+ declare function Popover({ children, trigger, variant, closable, open, side, sideOffset, showArrow, onOpenChange, onOpenAutoFocus, onCloseAutoFocus, onPointerDownOutside, onInteractOutside, onFocusOutside, onClickClose, }: Props$9): React__default.JSX.Element;
639
+
640
+ type ProgressVariant = "normal" | "warning" | "primary" | "secondary";
641
+ declare function Progress({ value, variant, className, }: {
642
+ value: number;
643
+ variant?: ProgressVariant;
644
+ className?: string;
645
+ }): React__default.JSX.Element;
646
+
647
+ type RadioGroupColorScheme = "primary" | "secondary";
648
+ interface ItemProps {
649
+ value: string;
650
+ tooltip?: ReactNode;
651
+ children: ReactNode;
652
+ disabled?: boolean;
653
+ }
654
+ interface Props$8 {
655
+ id?: string;
656
+ value?: string;
657
+ onValueChange?: (value: string) => void;
658
+ /** @default primary */
659
+ colorScheme?: RadioGroupColorScheme;
660
+ allowEmpty?: boolean;
661
+ children: ReactNode;
662
+ }
663
+ declare namespace RadioGroup {
664
+ const Root: (props: Props$8) => React__default.ReactElement | null;
665
+ const Item: (props: ItemProps & React__default.RefAttributes<HTMLButtonElement>) => React__default.ReactElement | null;
666
+ }
667
+
668
+ interface Props$7 {
669
+ children?: ReactNode | ((scrollElementRef: HTMLDivElement) => ReactNode);
670
+ }
671
+ declare const ScrollArea: (props: Props$7) => React__default.ReactElement | null;
672
+
673
+ type Props$6<T extends string> = {
674
+ id?: string;
675
+ style?: React__default.CSSProperties;
676
+ className?: string;
677
+ menuItems: MenuItem<T>[];
678
+ value: T;
679
+ onSelect?: (value: T) => void;
680
+ placeholder?: string;
681
+ disabled?: boolean;
682
+ readOnly?: boolean;
683
+ label?: React__default.ReactNode;
684
+ } & Pick<SelectProps, "open">;
685
+ declare const SelectMenu: <T extends string = string>(props: Props$6<T>) => React__default.ReactElement | null;
686
+
687
+ interface Props$5 {
688
+ id?: string;
689
+ value: number;
690
+ onValueChange: (value: number) => void;
691
+ min: number;
692
+ max: number;
693
+ }
694
+ declare const Slider: ({ id, value, onValueChange, min, max, }: Props$5) => React__default.JSX.Element;
695
+
696
+ interface Props$4 {
697
+ size?: number | string;
698
+ inline?: boolean;
699
+ }
700
+ declare namespace Spacer {
701
+ const Vertical: (props: Props$4 & React__default.RefAttributes<HTMLSpanElement>) => React__default.ReactElement | null;
702
+ const Horizontal: (props: Props$4 & React__default.RefAttributes<HTMLSpanElement>) => React__default.ReactElement | null;
703
+ }
704
+
705
+ type SwitchColorScheme = "normal" | "primary" | "secondary";
706
+ interface Props$3 {
707
+ value: boolean;
708
+ onChange: (value: boolean) => void;
709
+ /** @default normal */
710
+ colorScheme?: SwitchColorScheme;
711
+ disabled?: boolean;
712
+ }
713
+ declare const Switch: ({ value, onChange, colorScheme, disabled, }: Props$3) => React__default.JSX.Element;
714
+
715
+ declare const config: Config;
716
+
717
+ type Theme = typeof config.theme.extend;
718
+
719
+ /**
720
+ * Utility for merging classes conditionally. Right side will override left side if there are any conflicts.
721
+ * Usage: cn('bg-red-500 text-white', 'bg-blue-500') // Returns: 'text-white bg-blue-500'
722
+ * @danger do not use this function to concatenate class names. Use it to merge classes conditionally.
723
+ */
724
+ declare const cn: (...classes: (string | boolean | undefined | null)[]) => string;
725
+ type ThemeExtend = NonNullable<Theme['extend']>;
726
+ type ThemeColor = keyof ThemeExtend['colors'];
727
+
728
+ type Variant = "title" | "subtitle" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "body" | "small" | "button" | "code" | "label";
729
+ declare const textStyles: Record<Variant, string>;
730
+ type TextProps = {
731
+ as?: keyof ReactHTML;
732
+ href?: string;
733
+ className?: string;
734
+ style?: React__default.CSSProperties;
735
+ variant: Variant;
736
+ color?: ThemeColor;
737
+ children: ReactNode;
738
+ onClick?: () => void;
739
+ onDoubleClick?: () => void;
740
+ onKeyDown?: (event: React__default.KeyboardEvent<HTMLSpanElement>) => void;
741
+ tabIndex?: number;
742
+ };
743
+ declare const Text$1: (props: TextProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement | null;
744
+ type PresetProps = Omit<TextProps, "variant">;
745
+ declare const Heading1: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement | null;
746
+ declare const Heading2: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement | null;
747
+ declare const Heading3: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement | null;
748
+ declare const Heading4: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement | null;
749
+ declare const Heading5: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement | null;
750
+ declare const Body: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement | null;
751
+ declare const Small: (props: PresetProps & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement | null;
752
+ declare const Italic: ({ children }: {
753
+ children: ReactNode;
754
+ }) => React__default.JSX.Element;
755
+
756
+ declare const useAutoResize: (value: string) => React__default.MutableRefObject<HTMLTextAreaElement | null>;
757
+ declare const AutoResizingTextArea: (props: {
758
+ onChangeText: (value: string) => void;
759
+ value?: string;
760
+ } & React__default.TextareaHTMLAttributes<HTMLTextAreaElement> & React__default.RefAttributes<HTMLTextAreaElement>) => React__default.ReactElement | null;
761
+
762
+ declare const Toast: ({ title, content, children, ...props }: {
763
+ title?: string;
764
+ content: ReactNode;
765
+ children?: React__default.ReactNode;
766
+ }) => React__default.JSX.Element;
767
+ declare const ToastProvider: ({ children }: {
768
+ children: React__default.ReactNode;
769
+ }) => React__default.JSX.Element;
770
+
771
+ interface Props$2 {
772
+ children: ReactNode;
773
+ content: ReactNode;
774
+ }
775
+ declare const Tooltip: (props: Props$2) => React__default.ReactElement | null;
776
+
777
+ type TreeRowBaseProps = {
778
+ icon?: Exclude<ReactNode, string> | IconName;
779
+ expanded?: boolean;
780
+ onClickChevron?: ({ altKey }: {
781
+ altKey: boolean;
782
+ }) => void;
783
+ };
784
+ type TreeViewRowProps<MenuItemType extends string> = ListView.RowProps<MenuItemType> & TreeRowBaseProps;
785
+ declare namespace TreeView {
786
+ const Root: <T = any>(props: (({
787
+ children: ReactNode;
788
+ } | {
789
+ data: T[];
790
+ renderItem: (item: T, index: number, info: {
791
+ isDragging: boolean;
792
+ }) => ReactNode;
793
+ keyExtractor: (item: T, index: number) => string;
794
+ sortable?: boolean;
795
+ virtualized?: _noya_app_noya_geometry.Size;
796
+ }) & {
797
+ id?: string;
798
+ className?: string;
799
+ style?: React__default.CSSProperties;
800
+ onPress?: () => void;
801
+ scrollable?: boolean;
802
+ expandable?: boolean;
803
+ onMoveItem?: (sourceIndex: number, destinationIndex: number, position: RelativeDropPosition) => void;
804
+ indentation?: number;
805
+ acceptsDrop?: DropValidator;
806
+ pressEventName?: "onClick" | "onPointerDown";
807
+ variant?: "normal" | "bare" | "padded";
808
+ sectionHeaderVariant?: "label" | "normal";
809
+ divider?: boolean;
810
+ gap?: number;
811
+ colorScheme?: "primary" | "secondary";
812
+ }) & React__default.RefAttributes<IVirtualizedList>) => React__default.ReactElement | null;
813
+ const RowTitle: (props: {
814
+ className?: string;
815
+ children: React__default.ReactNode;
816
+ } & React__default.HTMLAttributes<HTMLSpanElement>) => React__default.ReactElement | null;
817
+ const EditableRowTitle: (props: EditableRowProps) => React__default.ReactElement | null;
818
+ const Row: <MenuItemType extends string>(props: ListView.RowProps<MenuItemType> & TreeRowBaseProps & React__default.RefAttributes<HTMLLIElement>) => React__default.ReactElement | null;
819
+ type ClickInfo = ListView.ClickInfo;
820
+ type RowProps<MenuItemType extends string> = TreeViewRowProps<MenuItemType>;
821
+ }
822
+
823
+ declare const EDITOR_PANEL_GROUP_ID = "editor-panel-group";
824
+ declare const LEFT_SIDEBAR_ID = "editor-left-sidebar";
825
+ declare const RIGHT_SIDEBAR_ID = "editor-right-sidebar";
826
+ declare const CONTENT_AREA_ID = "editor-content-area";
827
+ type PanelLayoutState = {
828
+ leftSidebarCollapsed: boolean;
829
+ rightSidebarCollapsed: boolean;
830
+ };
831
+ declare function usePreservePanelSize(panelGroupRef: React__default.RefObject<ImperativePanelGroupHandle | null>, setPanelLayoutState?: (state: PanelLayoutState) => void): void;
832
+
833
+ interface Props$1 {
834
+ autoSavePrefix?: string;
835
+ leftSidebarContent?: React__default.ReactNode;
836
+ children?: React__default.ReactNode;
837
+ rightSidebarContent?: React__default.ReactNode;
838
+ hasRightSidebar?: boolean;
839
+ hasLeftSidebar?: boolean;
840
+ onChangeLayoutState?: (layoutState: PanelLayoutState) => void;
841
+ leftSidebarCanResize?: boolean;
842
+ id?: string;
843
+ className?: string;
844
+ style?: React__default.CSSProperties;
845
+ /**
846
+ * Accepts a number (px) or % string (e.g. "50%").
847
+ * Use % to avoid flicker server-rendering.
848
+ */
849
+ leftSidebarInitialSize?: number | string;
850
+ leftSidebarMinSize?: number | string;
851
+ /**
852
+ * Accepts a number (px) or % string (e.g. "50%").
853
+ * Use % to avoid flicker server-rendering.
854
+ */
855
+ rightSidebarInitialSize?: number | string;
856
+ rightSidebarMinSize?: number | string;
857
+ }
858
+ type IWorkspaceLayout = {
859
+ setLeftSidebarExpanded: (expanded: boolean) => void;
860
+ setRightSidebarExpanded: (expanded: boolean) => void;
861
+ toggleAllSidebars: () => void;
862
+ toggleLeftSidebar: () => void;
863
+ toggleRightSidebar: () => void;
864
+ };
865
+ declare const WorkspaceLayout: (props: Props$1 & React__default.RefAttributes<IWorkspaceLayout>) => React__default.ReactElement | null;
866
+
867
+ type DesignSystemConfigurationContextValue = {
868
+ platform: PlatformName;
869
+ };
870
+ declare const DesignSystemConfigurationProvider: (props: {
871
+ children: ReactNode;
872
+ platform?: PlatformName;
873
+ }) => React__default.ReactElement | null;
874
+ declare function useDesignSystemConfiguration(): DesignSystemConfigurationContextValue;
875
+
876
+ type DialogContextValue = {
877
+ openInputDialog(title: string, inputValue?: string): Promise<string | undefined>;
878
+ containsElement(element: HTMLElement): boolean;
879
+ };
880
+ declare const DialogProvider: ({ children, }: {
881
+ children: ReactNode;
882
+ }) => React__default.JSX.Element;
883
+ declare function useOpenInputDialog(): (title: string, inputValue?: string) => Promise<string | undefined>;
884
+ declare function useDialogContainsElement(): (element: HTMLElement) => boolean;
885
+
886
+ type FloatingWindowContextValue = {
887
+ createWindow: (element: React__default.ReactNode) => string;
888
+ closeWindow: (id: string) => void;
889
+ };
890
+ type CurrentWindowContextValue = {
891
+ id: string;
892
+ };
893
+ declare const FloatingWindowProvider: ({ children, }: {
894
+ children: React__default.ReactNode;
895
+ }) => React__default.JSX.Element;
896
+ declare const useFloatingWindowManager: () => FloatingWindowContextValue;
897
+ declare const useCurrentFloatingWindowInternal: () => CurrentWindowContextValue;
898
+
899
+ type ImageDataContextValue = {
900
+ getImageData: (ref: string) => ArrayBuffer | undefined;
901
+ };
902
+ declare const ImageDataProvider: (props: {
903
+ children: ReactNode;
904
+ getImageData?: (ref: string) => ArrayBuffer | undefined;
905
+ }) => React__default.ReactElement | null;
906
+ declare function useImageData(ref: string): ArrayBuffer | undefined;
907
+
908
+ type GlobalInputBlurContextValue = {
909
+ addListener: (f: () => void) => void;
910
+ removeListener: (f: () => void) => void;
911
+ trigger: () => void;
912
+ };
913
+ declare const GlobalInputBlurProvider: React$1.Provider<GlobalInputBlurContextValue>;
914
+ /**
915
+ * Some components store their editable state internally.
916
+ * We trigger this event before selection changes so that they can commit their
917
+ * edits before they unmount. This is more manual but simpler than doing so during
918
+ * the unmount phase (e.g. the return function of `useEffect`), since handlers are
919
+ * guaranteed to be called with the current data.
920
+ */
921
+ declare const useGlobalInputBlur: () => GlobalInputBlurContextValue;
922
+ declare function useGlobalInputBlurListener(f: () => void): void;
923
+ declare function useGlobalInputBlurTrigger(): () => void;
924
+
925
+ interface HoverEvent {
926
+ /** The type of hover event being fired. */
927
+ type: 'hoverstart' | 'hoverend';
928
+ /** The pointer type that triggered the hover event. */
929
+ pointerType: 'mouse' | 'pen';
930
+ /** The target element of the hover event. */
931
+ target: HTMLElement;
932
+ }
933
+ interface HoverEvents {
934
+ /** Handler that is called when a hover interaction starts. */
935
+ onHoverStart?(e: HoverEvent): void;
936
+ /** Handler that is called when a hover interaction ends. */
937
+ onHoverEnd?(e: HoverEvent): void;
938
+ /** Handler that is called when the hover state changes. */
939
+ onHoverChange?(isHovering: boolean): void;
940
+ }
941
+ interface HoverProps extends HoverEvents {
942
+ /** Whether the hover events should be disabled. */
943
+ isDisabled?: boolean;
944
+ }
945
+ interface HoverResult {
946
+ /** Props to spread on the target element. */
947
+ hoverProps: React$1.HTMLAttributes<HTMLElement>;
948
+ isHovered: boolean;
949
+ }
950
+ /**
951
+ * Handles pointer hover interactions for an element. Normalizes behavior
952
+ * across browsers and platforms, and ignores emulated mouse events on touch devices.
953
+ */
954
+ declare function useHover(props?: HoverProps): HoverResult;
955
+
956
+ declare function usePlatform(): _noya_app_noya_keymap.PlatformName;
957
+ /**
958
+ * Either ctrl or meta, depending on the platform
959
+ */
960
+ declare function usePlatformModKey(): 'ctrlKey' | 'metaKey';
961
+
962
+ declare const size: {
963
+ medium: string;
964
+ large: string;
965
+ xlarge: string;
966
+ xxlarge: string;
967
+ };
968
+ declare const mediaQuery: {
969
+ small: string;
970
+ medium: string;
971
+ large: string;
972
+ xlarge: string;
973
+ };
974
+
975
+ type Optional<T> = T | false | null | undefined;
976
+ type MenuConfig<T extends string> = Optional<Optional<RegularMenuItem<T>>[]>[];
977
+ declare function createSectionedMenu<T extends string>(...sections: MenuConfig<T>): MenuItem<T>[];
978
+
979
+ declare function getGradientBackground(value: Sketch.GradientStop[], type: Sketch.GradientType, direction?: number): string;
980
+
981
+ declare function useDarkMode(elementRef: React.RefObject<HTMLElement>): {
982
+ isDark: boolean;
983
+ elementRef: React$1.RefObject<HTMLElement>;
984
+ };
985
+
986
+ declare function sketchColorToRgba(value: Sketch.Color): RgbaColor;
987
+ declare function sketchColorToRgbaString(value: Sketch.Color): string;
988
+ declare function rgbaToSketchColor(value: RgbaColor): Sketch.Color;
989
+ declare function sketchColorToHex(value: Sketch.Color): string;
990
+
991
+ declare function withSeparatorElements(elements: ReactNode, separator: ReactNode | (() => ReactNode)): (string | number | React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>> | Iterable<ReactNode> | React$1.ReactPortal)[];
992
+
993
+ type SetNumberMode = "replace" | "adjust";
994
+ declare function getNewValue(value: number, mode: SetNumberMode, delta?: number): number;
995
+ type DimensionValue = number | undefined;
996
+ interface Props {
997
+ id?: string;
998
+ value: DimensionValue;
999
+ onSetValue: (value: number, mode: SetNumberMode) => void;
1000
+ label?: string;
1001
+ size?: number;
1002
+ placeholder?: string;
1003
+ disabled?: boolean;
1004
+ trigger?: "change" | "submit";
1005
+ }
1006
+ declare const DimensionInput: (props: Props) => React__default.ReactElement | null;
1007
+
1008
+ declare const Section: (props: React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement | null;
1009
+ declare const SectionHeader: (props: React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement | null;
1010
+ type TitleTextStyle = "small" | "heading5" | "heading4" | "heading3";
1011
+ declare const Title: (props: React__default.HTMLAttributes<HTMLDivElement> & {
1012
+ $textStyle?: TitleTextStyle;
1013
+ } & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement | null;
1014
+ declare const Row: (props: React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement | null;
1015
+ declare const Column: (props: React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>) => React__default.ReactElement | null;
1016
+ declare const Checkbox: (props: React__default.InputHTMLAttributes<HTMLInputElement> & React__default.RefAttributes<HTMLInputElement>) => React__default.ReactElement | null;
1017
+ declare const Text: (props: React__default.HTMLAttributes<HTMLSpanElement> & React__default.RefAttributes<HTMLSpanElement>) => React__default.ReactElement | null;
1018
+ declare const VerticalSeparator: () => React__default.JSX.Element;
1019
+ declare const HorizontalSeparator: () => React__default.JSX.Element;
1020
+ declare const RowLabel: (props: React__default.HTMLAttributes<HTMLSpanElement> & {
1021
+ $textStyle?: TitleTextStyle | "label";
1022
+ } & React__default.RefAttributes<HTMLSpanElement>) => React__default.ReactElement | null;
1023
+ interface LabeledRowProps {
1024
+ id?: string;
1025
+ children: ReactNode;
1026
+ label: ReactNode;
1027
+ labelTextStyle?: TitleTextStyle;
1028
+ right?: ReactNode;
1029
+ className?: string;
1030
+ }
1031
+ declare const LabeledRow: (props: LabeledRowProps) => React__default.ReactElement | null;
1032
+
1033
+ declare const InspectorPrimitives_Checkbox: typeof Checkbox;
1034
+ declare const InspectorPrimitives_Column: typeof Column;
1035
+ declare const InspectorPrimitives_HorizontalSeparator: typeof HorizontalSeparator;
1036
+ declare const InspectorPrimitives_LabeledRow: typeof LabeledRow;
1037
+ declare const InspectorPrimitives_Row: typeof Row;
1038
+ declare const InspectorPrimitives_RowLabel: typeof RowLabel;
1039
+ declare const InspectorPrimitives_Section: typeof Section;
1040
+ declare const InspectorPrimitives_SectionHeader: typeof SectionHeader;
1041
+ declare const InspectorPrimitives_Text: typeof Text;
1042
+ declare const InspectorPrimitives_Title: typeof Title;
1043
+ declare const InspectorPrimitives_VerticalSeparator: typeof VerticalSeparator;
1044
+ declare namespace InspectorPrimitives {
1045
+ export { InspectorPrimitives_Checkbox as Checkbox, InspectorPrimitives_Column as Column, InspectorPrimitives_HorizontalSeparator as HorizontalSeparator, InspectorPrimitives_LabeledRow as LabeledRow, InspectorPrimitives_Row as Row, InspectorPrimitives_RowLabel as RowLabel, InspectorPrimitives_Section as Section, InspectorPrimitives_SectionHeader as SectionHeader, InspectorPrimitives_Text as Text, InspectorPrimitives_Title as Title, InspectorPrimitives_VerticalSeparator as VerticalSeparator };
1046
+ }
1047
+
1048
+ declare module "react" {
1049
+ function memo<A, B>(Component: (props: A) => B): (props: A) => React.ReactElement | null;
1050
+ function forwardRef<T, P = {}>(render: (props: P, ref: React.ForwardedRef<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
1051
+ }
1052
+
1053
+ export { ActivityIndicator, AutoResizingTextArea, Avatar, AvatarStack, Body, Button, type ButtonRootProps, CONTENT_AREA_ID, Chip, type ChipProps, type CompletionItem, type CompletionListItem, CompletionMenu, type CompletionSectionHeader, ContextMenu, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, Dialog, type DialogContextValue, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, DraggableMenuButton, type DropValidator, DropdownMenu, EDITOR_PANEL_GROUP_ID, type EditableRowProps, type ExtractMenuItemType, 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 IToken, type IVirtualizedList, type IWorkspaceLayout, IconButton, type IconName, type ImageDataContextValue, ImageDataProvider, InputField, type InputFieldInputProps, type InputFieldSize, InputFieldWithCompletions, type InputFieldWithCompletionsProps, type InputFieldWithCompletionsRef, InspectorContainer, InspectorPrimitives, Italic, KeyboardShortcut, LEFT_SIDEBAR_ID, Label, LabeledElementView, type ListRowMarginType, type ListRowPosition, ListView, type MatchRange, type MenuConfig, type MenuItem, type MenuItemProps, type MenuProps, type Optional, type PanelLayoutState, PatternPreviewBackground, Popover, Progress, RIGHT_SIDEBAR_ID, RadioGroup, type RegularMenuItem, type RelativeDropPosition, SEPARATOR_ITEM, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, ScrollArea, SelectMenu, type SetNumberMode, type SketchPattern, Slider, Small, Sortable, Spacer, type SupportedCanvasUploadType, type SupportedImageUploadType, Switch, Text$1 as Text, type TextProps, type Theme, type ThemeColor, Toast, ToastProvider, Tooltip, TreeView, WorkspaceLayout, cn, createSectionedMenu, fuzzyFilter, fuzzyScore, fuzzyTokenize, getGradientBackground, getNewValue, mediaQuery, normalizeListDestinationIndex, renderIcon, rgbaToSketchColor, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, textStyles, useAutoResize, useCurrentFloatingWindowInternal, useDarkMode, useDesignSystemConfiguration, useDialogContainsElement, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useOpenInputDialog, usePlatform, usePlatformModKey, usePreservePanelSize, withSeparatorElements };