@sanity/ui 3.4.5 → 3.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/dist/_chunks/{theme.cjs → getScopedTheme.cjs} +3534 -3597
  2. package/dist/_chunks/getScopedTheme.cjs.map +1 -0
  3. package/dist/_chunks/{theme.js → getScopedTheme.js} +3477 -3525
  4. package/dist/_chunks/getScopedTheme.js.map +1 -0
  5. package/dist/_chunks/{tabList.cjs → portalProvider.cjs} +1561 -1554
  6. package/dist/_chunks/portalProvider.cjs.map +1 -0
  7. package/dist/_chunks/{useTheme.d.ts → portalProvider.d.cts} +307 -647
  8. package/dist/_chunks/portalProvider.d.cts.map +1 -0
  9. package/dist/_chunks/{useTheme.d.cts → portalProvider.d.ts} +307 -647
  10. package/dist/_chunks/portalProvider.d.ts.map +1 -0
  11. package/dist/_chunks/{tabList.js → portalProvider.js} +1359 -1352
  12. package/dist/_chunks/portalProvider.js.map +1 -0
  13. package/dist/_chunks/{theme.d.ts → rgba.d.cts} +178 -453
  14. package/dist/_chunks/rgba.d.cts.map +1 -0
  15. package/dist/_chunks/{theme.d.cts → rgba.d.ts} +178 -453
  16. package/dist/_chunks/rgba.d.ts.map +1 -0
  17. package/dist/_visual-editing.cjs +3 -2
  18. package/dist/_visual-editing.d.cts +1 -1
  19. package/dist/_visual-editing.d.ts +1 -1
  20. package/dist/_visual-editing.js +2 -1
  21. package/dist/index.cjs +2802 -2798
  22. package/dist/index.cjs.map +1 -1
  23. package/dist/index.d.cts +549 -203
  24. package/dist/index.d.cts.map +1 -1
  25. package/dist/index.d.ts +549 -203
  26. package/dist/index.d.ts.map +1 -1
  27. package/dist/index.js +2781 -2777
  28. package/dist/index.js.map +1 -1
  29. package/dist/theme.cjs +53 -2
  30. package/dist/theme.cjs.map +1 -0
  31. package/dist/theme.d.cts +278 -2
  32. package/dist/theme.d.cts.map +1 -0
  33. package/dist/theme.d.ts +278 -2
  34. package/dist/theme.d.ts.map +1 -0
  35. package/dist/theme.js +52 -1
  36. package/dist/theme.js.map +1 -0
  37. package/package.json +4 -4
  38. package/dist/_chunks/tabList.cjs.map +0 -1
  39. package/dist/_chunks/tabList.js.map +0 -1
  40. package/dist/_chunks/theme.cjs.map +0 -1
  41. package/dist/_chunks/theme.d.cts.map +0 -1
  42. package/dist/_chunks/theme.d.ts.map +0 -1
  43. package/dist/_chunks/theme.js.map +0 -1
  44. package/dist/_chunks/useTheme.d.cts.map +0 -1
  45. package/dist/_chunks/useTheme.d.ts.map +0 -1
@@ -1,5 +1,5 @@
1
- import { Ct as BaseTheme$1, Dt as Theme_v2, Et as Theme$1, Hn as ThemeColorSchemeKey$1, In as ThemeColorAvatarColorKey, Qt as ThemeColorToneKey, Rn as ThemeColorButtonModeKey$1, St as createColorTheme$1, Wn as ThemeColorStateToneKey, c as parseColor$1, cn as ThemeFontSize$1, d as rgbToHex$1, dn as ThemeFonts$1, f as rgbToHsl$1, g as multiply$1, gn as ThemeColorSyntax$1, h as screen$1, in as ThemeLayer$1, l as hexToRgb$1, ln as ThemeFontWeight$1, nn as ThemeBoxShadow, on as ThemeFont$1, rn as ThemeShadow$1, s as rgba$1, sn as ThemeFontKey$1, tn as ThemeStyles, u as hslToRgb$1, un as ThemeFontWeightKey$1, v as HSL$1, wt as RootTheme$1, y as RGB$1, zn as ThemeColorCardToneKey } from "./theme.cjs";
2
- import { Component, HTMLProps, PropsWithChildren, Ref } from "react";
1
+ import { At as ThemeColorSchemeKey$1, Ct as ThemeColorSyntax$1, Dt as ThemeColorCardToneKey, Et as ThemeColorButtonModeKey$1, Ht as HSL$1, Mt as ThemeColorStateToneKey, St as ThemeFonts$1, Ut as RGB$1, _ as Theme_v2, _t as ThemeFont$1, a as rgbToHex$1, bt as ThemeFontWeight$1, c as screen$1, f as createColorTheme$1, ft as ThemeStyles, g as Theme$1, gt as ThemeLayer$1, ht as ThemeShadow$1, i as hslToRgb$1, l as multiply$1, m as RootTheme$1, mt as ThemeBoxShadow, n as parseColor$1, o as rgbToHsl$1, p as BaseTheme$1, r as hexToRgb$1, t as rgba$1, vt as ThemeFontKey$1, xt as ThemeFontWeightKey$1, yt as ThemeFontSize$1 } from "./rgba.js";
2
+ import { Ref } from "react";
3
3
  /**
4
4
  * @public
5
5
  * @deprecated Use `BaseTheme` from `@sanity/ui/theme` instead.
@@ -143,24 +143,27 @@ declare const studioTheme: BaseTheme$1;
143
143
  /**
144
144
  * @public
145
145
  */
146
- type AvatarPosition = 'top' | 'bottom' | 'inside';
147
- /**
148
- * @public
149
- */
150
- type AvatarSize = 0 | 1 | 2 | 3;
151
- /**
152
- * @public
153
- */
154
- type AvatarStatus = 'online' | 'editing' | 'inactive';
146
+ type Radius = number | 'full';
155
147
  /**
156
148
  * @public
157
- * @deprecated No longer used
158
149
  */
159
- type BadgeMode = 'default' | 'outline';
150
+ interface HotkeysProps {
151
+ fontSize?: number | number[];
152
+ gap?: number | number[];
153
+ padding?: number | number[];
154
+ radius?: Radius | Radius[];
155
+ /**
156
+ * @deprecated Use `gap` instead. `space` will be removed in v4.
157
+ */
158
+ space?: number | number[];
159
+ keys?: string[];
160
+ }
160
161
  /**
162
+ * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
163
+ *
161
164
  * @public
162
165
  */
163
- type BadgeTone = ThemeColorStateToneKey;
166
+ declare const Hotkeys: import("react").ForwardRefExoticComponent<HotkeysProps & Omit<import("react").HTMLProps<HTMLElement>, "as" | "ref" | "size"> & import("react").RefAttributes<HTMLElement>>;
164
167
  /**
165
168
  * @public
166
169
  */
@@ -177,49 +180,6 @@ type BoxHeight = 'stretch' | 'fill';
177
180
  * @public
178
181
  */
179
182
  type BoxOverflow = 'visible' | 'hidden' | 'auto';
180
- /**
181
- * @public
182
- */
183
- type ButtonMode = ThemeColorButtonModeKey$1;
184
- /**
185
- * @public
186
- */
187
- type ButtonTextAlign = 'left' | 'right' | 'center';
188
- /**
189
- * @public
190
- */
191
- type ButtonTone = ThemeColorStateToneKey;
192
- /**
193
- * @public
194
- */
195
- type ButtonWidth = 'fill';
196
- /**
197
- * @public
198
- */
199
- type CardTone = ThemeColorCardToneKey | 'inherit';
200
- /**
201
- * Assign properties from `U` to `T`, excluding properties that already exist in `T`.
202
- *
203
- * @public
204
- */
205
- type Assign<T extends object, U extends object> = Omit<T, keyof U> & U;
206
- /** @public */
207
- type EmptyProps = object;
208
- /** @public */
209
- type TagType = keyof React.JSX.IntrinsicElements;
210
- /** @public */
211
- type ComponentType<P = any> = React.FunctionComponent<P> | React.ComponentClass<P> | React.ExoticComponent<P>;
212
- /** @public */
213
- type ElementType$1<P = any> = TagType | ComponentType<P>;
214
- /**
215
- * Resolves the props of a polymorphic component: the props of the element/component passed to `as`
216
- * (defaulting to the component's own element), with the component's own props assigned on top.
217
- *
218
- * @public
219
- */
220
- type Props<P extends EmptyProps, E extends ElementType$1<P>> = Assign<E extends TagType ? React.JSX.IntrinsicElements[E] : React.ComponentProps<E>, P & {
221
- as?: E;
222
- }>;
223
183
  /**
224
184
  * @public
225
185
  */
@@ -276,48 +236,6 @@ type GridItemRowStart = 'auto' | number;
276
236
  * @public
277
237
  */
278
238
  type GridItemRowEnd = 'auto' | number;
279
- /**
280
- * Placement of floating UI elements.
281
- *
282
- * @public
283
- */
284
- type Placement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
285
- /**
286
- * @beta
287
- */
288
- type PopoverMargins = [number, number, number, number];
289
- /**
290
- * @public
291
- */
292
- type Radius = number | 'full';
293
- /**
294
- * @public
295
- */
296
- type SelectableTone = ThemeColorStateToneKey;
297
- /**
298
- * @public
299
- */
300
- type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial';
301
- /**
302
- * @public
303
- */
304
- interface HotkeysProps {
305
- fontSize?: number | number[];
306
- gap?: number | number[];
307
- padding?: number | number[];
308
- radius?: Radius | Radius[];
309
- /**
310
- * @deprecated Use `gap` instead. `space` will be removed in v4.
311
- */
312
- space?: number | number[];
313
- keys?: string[];
314
- }
315
- /**
316
- * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
317
- *
318
- * @public
319
- */
320
- declare const Hotkeys: import("react").ForwardRefExoticComponent<HotkeysProps & Omit<import("react").HTMLProps<HTMLElement>, "as" | "ref" | "size"> & import("react").RefAttributes<HTMLElement>>;
321
239
  /**
322
240
  * @public
323
241
  */
@@ -495,283 +413,263 @@ interface MenuProps extends ResponsivePaddingProps {
495
413
  */
496
414
  declare const Menu: import("react").ForwardRefExoticComponent<Omit<MenuProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "height" | "role" | "tabIndex">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
497
415
  /**
416
+ * Assign properties from `U` to `T`, excluding properties that already exist in `T`.
417
+ *
498
418
  * @public
499
419
  */
500
- type MenuDividerProps<E extends ElementType$1 = 'hr'> = Props<EmptyProps, E>;
420
+ type Assign<T extends object, U extends object> = Omit<T, keyof U> & U;
421
+ /** @public */
422
+ type EmptyProps = object;
423
+ /** @public */
424
+ type TagType = keyof React.JSX.IntrinsicElements;
425
+ /** @public */
426
+ type ComponentType<P = any> = React.FunctionComponent<P> | React.ComponentClass<P> | React.ExoticComponent<P>;
427
+ /** @public */
428
+ type ElementType$1<P = any> = TagType | ComponentType<P>;
501
429
  /**
430
+ * Resolves the props of a polymorphic component: the props of the element/component passed to `as`
431
+ * (defaulting to the component's own element), with the component's own props assigned on top.
432
+ *
502
433
  * @public
503
434
  */
504
- declare const MenuDivider: <E extends ElementType$1 = 'hr'>(props: MenuDividerProps<E>) => React.JSX.Element;
435
+ type Props<P extends EmptyProps, E extends ElementType$1<P>> = Assign<E extends TagType ? React.JSX.IntrinsicElements[E] : React.ComponentProps<E>, P & {
436
+ as?: E;
437
+ }>;
505
438
  /**
506
439
  * @public
507
440
  */
508
- interface AvatarOwnProps {
509
- /** @beta */
510
- __unstable_hideInnerStroke?: boolean;
511
- animateArrowFrom?: AvatarPosition;
512
- arrowPosition?: AvatarPosition;
513
- color?: ThemeColorAvatarColorKey;
514
- initials?: string;
515
- onImageLoadError?: (event: Error) => void;
516
- size?: AvatarSize | AvatarSize[];
517
- src?: string;
518
- /**
519
- * The status of the entity this Avatar represents.
520
- * @alpha
521
- */
522
- status?: AvatarStatus;
523
- title?: string;
524
- }
441
+ type MenuDividerProps<E extends ElementType$1 = 'hr'> = Props<EmptyProps, E>;
525
442
  /**
526
443
  * @public
527
444
  */
528
- type AvatarProps<E extends ElementType$1 = 'div'> = Props<AvatarOwnProps, E>;
445
+ declare const MenuDivider: <E extends ElementType$1 = 'hr'>(props: MenuDividerProps<E>) => React.JSX.Element;
529
446
  /**
530
- * Avatars are used to represent people and other agents (e.g. bots).
531
- *
532
447
  * @public
533
448
  */
534
- declare const Avatar: <E extends ElementType$1 = 'div'>(props: AvatarProps<E>) => React.JSX.Element;
449
+ type CardTone = ThemeColorCardToneKey | 'inherit';
535
450
  /**
451
+ * Placement of floating UI elements.
452
+ *
536
453
  * @public
537
454
  */
538
- interface AvatarCounterProps {
539
- count: number;
540
- size?: AvatarSize | AvatarSize[];
541
- /** @deprecated No longer supported. */
542
- tone?: 'navbar';
543
- }
455
+ type Placement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
544
456
  /**
545
- * @public
457
+ * @beta
546
458
  */
547
- declare const AvatarCounter: import("react").ForwardRefExoticComponent<AvatarCounterProps & import("react").RefAttributes<HTMLDivElement>>;
459
+ type PopoverMargins = [number, number, number, number];
548
460
  /**
549
461
  * @public
550
462
  */
551
- interface AvatarStackProps {
552
- children: React.ReactNode;
553
- maxLength?: number;
554
- size?: AvatarSize | AvatarSize[];
555
- /** @deprecated No longer supported. */
556
- tone?: 'navbar';
463
+ interface LayerProps {
464
+ as?: React.ElementType | keyof React.JSX.IntrinsicElements;
465
+ /** A callback that fires when the layer becomes the top layer when it was not the top layer before. */
466
+ onActivate?: (props: {
467
+ activeElement: HTMLElement | null;
468
+ }) => void;
469
+ zOffset?: number | number[];
557
470
  }
558
471
  /**
559
472
  * @public
560
473
  */
561
- declare const AvatarStack: import("react").ForwardRefExoticComponent<AvatarStackProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "ref"> & import("react").RefAttributes<HTMLDivElement>>;
562
- /**
563
- * @internal
564
- */
565
- interface AvatarRootStyleProps {
566
- $color: ThemeColorAvatarColorKey;
567
- }
568
- /**
569
- * @internal
570
- */
571
- interface ResponsiveAvatarSizeStyleProps {
572
- $size: AvatarSize[];
474
+ declare const Layer: import("react").ForwardRefExoticComponent<Omit<LayerProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
475
+ /** @beta */
476
+ type PopoverUpdateCallback = () => void;
477
+ /** @public */
478
+ type PopoverWidth = number | 'auto';
479
+ /** @public */
480
+ interface PopoverProps extends Omit<LayerProps, 'as'>, ResponsiveRadiusProps, ResponsiveShadowProps {
481
+ /** @beta */
482
+ __unstable_margins?: PopoverMargins;
483
+ /**
484
+ * Whether the popover should animate in and out.
485
+ *
486
+ * @beta
487
+ * @defaultValue false
488
+ */
489
+ animate?: boolean;
490
+ arrow?: boolean;
491
+ /** @deprecated Use `floatingBoundary` and/or `referenceBoundary` instead */
492
+ boundaryElement?: HTMLElement | null;
493
+ children?: React.JSX.Element;
494
+ /**
495
+ * When `true`, prevent overflow within the current boundary:
496
+ * - by flipping on its side axis
497
+ * - by resizing
498
+ /*
499
+ * Note that:
500
+ * - setting `preventOverflow` to `true` also prevents overflow on its side axis
501
+ * - setting `matchReferenceWidth` to `true` also causes the popover to resize
502
+ *
503
+ * @defaultValue false
504
+ */
505
+ constrainSize?: boolean;
506
+ content?: React.ReactNode;
507
+ disabled?: boolean;
508
+ fallbackPlacements?: Placement[];
509
+ floatingBoundary?: HTMLElement | null;
510
+ /**
511
+ * When `true`, set the maximum width to match the reference element, and also prevent overflow within
512
+ * the current boundary by resizing.
513
+ *
514
+ * Note that setting `constrainSize` to `true` also causes the popover to resize
515
+ *
516
+ * @defaultValue false
517
+ */
518
+ matchReferenceWidth?: boolean;
519
+ /**
520
+ * When true, blocks all pointer interaction with elements beneath the popover until closed.
521
+ *
522
+ * @beta
523
+ * @defaultValue false
524
+ */
525
+ modal?: boolean;
526
+ open?: boolean;
527
+ overflow?: BoxOverflow;
528
+ padding?: number | number[];
529
+ placement?: Placement;
530
+ /**
531
+ * When 'flip' (default), the placement is determined from the initial placement and the
532
+ * fallback placements in order. Whichever fits in the viewport first.
533
+ *
534
+ * When 'autoPlacement', the initial placement and all fallback placements are evaluated
535
+ * and the placement with the most viewport space available.
536
+ *
537
+ * Option is only relevant if either `constrainSize` or `preventOverflow` is `true`
538
+ */
539
+ placementStrategy?: 'flip' | 'autoPlacement';
540
+ /** Whether or not to render the popover in a portal element. */
541
+ portal?: boolean | string;
542
+ preventOverflow?: boolean;
543
+ referenceBoundary?: HTMLElement | null;
544
+ /**
545
+ * When defined, the popover will be positioned relative to this element.
546
+ * The children of the popover won't be rendered.
547
+ */
548
+ referenceElement?: HTMLElement | null;
549
+ scheme?: ThemeColorSchemeKey$1;
550
+ tone?: CardTone;
551
+ /** @beta */
552
+ updateRef?: Ref<PopoverUpdateCallback | undefined>;
553
+ width?: PopoverWidth | PopoverWidth[];
573
554
  }
574
555
  /**
575
- * The props that `Box` adds on top of the element it renders as.
556
+ * The `Popover` component is used to display some content on top of another.
576
557
  *
577
558
  * @public
578
559
  */
579
- interface BoxOwnProps extends ResponsiveFlexItemProps, ResponsiveBoxProps, ResponsiveGridItemProps, ResponsiveMarginProps, ResponsivePaddingProps {
580
- forwardedAs?: ElementType$1;
581
- }
582
- /**
583
- * @public
584
- */
585
- type BoxProps<E extends ElementType$1 = 'div'> = Props<BoxOwnProps, E>;
560
+ declare const Popover: import("react").ForwardRefExoticComponent<Omit<PopoverProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "children" | "content" | "width">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
586
561
  /**
587
- * The `Box` component is a basic layout wrapper component which provides utility properties
588
- * for flex, margins and padding.
589
- *
590
562
  * @public
591
563
  */
592
- declare const Box: <E extends ElementType$1 = 'div'>(props: BoxProps<E>) => React.JSX.Element;
564
+ type SelectableTone = ThemeColorStateToneKey;
593
565
  /**
594
566
  * @public
595
567
  */
596
- interface BadgeOwnProps extends BoxOwnProps, ResponsiveRadiusProps {
568
+ interface MenuGroupOwnProps {
597
569
  fontSize?: number | number[];
598
- /** @deprecated No longer used. */
599
- mode?: BadgeMode;
600
- tone?: BadgeTone;
601
- }
602
- /**
603
- * @public
604
- */
605
- type BadgeProps<E extends ElementType$1 = 'div'> = Props<BadgeOwnProps, E>;
606
- /**
607
- * Badges are used to tag resources.
608
- *
609
- * @public
610
- */
611
- declare const Badge: <E extends ElementType$1 = 'div'>(props: BadgeProps<E>) => React.JSX.Element;
612
- /**
613
- * @public
614
- */
615
- interface ButtonOwnProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
616
- fontSize?: number | number[];
617
- mode?: ButtonMode;
618
570
  icon?: React.ElementType | React.ReactNode;
619
- iconRight?: React.ElementType | React.ReactNode;
620
- justify?: FlexJustify | FlexJustify[];
621
- /**
622
- * @beta Do not use in production, as this might change.
623
- */
624
- loading?: boolean;
625
- selected?: boolean;
571
+ menu?: Omit<MenuProps, 'onClickOutside' | 'onEscape' | 'onItemClick' | 'onKeyDown' | 'onMouseEnter' | 'registerElement' | 'shouldFocus' | 'onBlurCapture'>;
572
+ padding?: number | number[];
573
+ popover?: Omit<PopoverProps, 'content' | 'open'>;
574
+ radius?: Radius | Radius[];
575
+ gap?: number | number[];
626
576
  /**
627
577
  * @deprecated Use `gap` instead. `space` will be removed in v4.
628
578
  */
629
579
  space?: number | number[];
630
- gap?: number | number[];
631
- muted?: boolean;
632
- text?: React.ReactNode;
633
- textAlign?: ButtonTextAlign;
634
- textWeight?: ThemeFontWeightKey$1;
635
- tone?: ButtonTone;
636
- type?: 'button' | 'reset' | 'submit';
637
- width?: ButtonWidth;
580
+ text: React.ReactNode;
581
+ tone?: SelectableTone;
638
582
  }
639
583
  /**
640
584
  * @public
641
585
  */
642
- type ButtonProps<E extends ElementType$1 = 'button'> = Props<ButtonOwnProps, E>;
586
+ type MenuGroupProps<E extends ElementType$1 = 'button'> = Props<MenuGroupOwnProps, E>;
643
587
  /**
644
588
  * @public
645
589
  */
646
- declare const Button: <E extends ElementType$1 = 'button'>(props: ButtonProps<E>) => React.JSX.Element;
590
+ declare const MenuGroup: <E extends ElementType$1 = 'button'>(props: MenuGroupProps<E>) => React.JSX.Element;
647
591
  /**
648
592
  * @public
649
593
  */
650
- interface CardOwnProps extends BoxOwnProps, ResponsiveBorderProps, ResponsiveRadiusProps, ResponsiveShadowProps {
651
- /**
652
- * Do not use in production.
653
- * @beta
654
- */
655
- __unstable_checkered?: boolean;
656
- /**
657
- * Do not use in production.
658
- * @beta
659
- */
660
- __unstable_focusRing?: boolean;
661
- disabled?: boolean;
662
- muted?: boolean;
594
+ interface MenuItemOwnProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
595
+ fontSize?: number | number[];
596
+ hotkeys?: string[];
597
+ icon?: React.ElementType | React.ReactNode;
598
+ iconRight?: React.ElementType | React.ReactNode;
663
599
  pressed?: boolean;
664
- scheme?: ThemeColorSchemeKey$1;
665
600
  selected?: boolean;
666
- tone?: CardTone;
667
- }
668
- /**
669
- * @public
670
- */
671
- type CardProps<E extends ElementType$1 = 'div'> = Props<CardOwnProps, E>;
672
- /**
673
- * The `Card` component acts much like a `Box`, but with a background and foreground color.
674
- * Components within a `Card` inherit its colors.
675
- *
676
- * @public
677
- */
678
- declare const Card: <E extends ElementType$1 = 'div'>(props: CardProps<E>) => React.JSX.Element;
679
- /**
680
- * @internal
681
- */
682
- interface CardStyleProps {
683
- $checkered: boolean;
684
- $focusRing: boolean;
685
- $muted: boolean;
686
- $tone: ThemeColorToneKey;
601
+ gap?: number | number[];
602
+ /**
603
+ * @deprecated Use `gap` instead. `space` will be removed in v4.
604
+ */
605
+ space?: number | number[];
606
+ text?: React.ReactNode;
607
+ tone?: SelectableTone;
687
608
  }
688
609
  /**
689
610
  * @public
690
611
  */
691
- interface CodeOwnProps {
692
- /** Define the language to use for syntax highlighting. */
693
- language?: string;
694
- size?: number | number[];
695
- weight?: string;
696
- }
612
+ type MenuItemProps<E extends ElementType$1 = 'button'> = Props<MenuItemOwnProps, E>;
697
613
  /**
698
614
  * @public
699
615
  */
700
- type CodeProps<E extends ElementType$1 = 'pre'> = Props<CodeOwnProps, E>;
616
+ declare const MenuItem: <E extends ElementType$1 = 'button'>(props: MenuItemProps<E>) => React.JSX.Element;
701
617
  /**
702
618
  * @public
703
619
  */
704
- declare const Code: <E extends ElementType$1 = 'pre'>(props: CodeProps<E>) => React.JSX.Element;
620
+ type ButtonMode = ThemeColorButtonModeKey$1;
705
621
  /**
706
622
  * @public
707
623
  */
708
- interface ContainerOwnProps extends BoxOwnProps, ResponsiveWidthProps {}
624
+ type ButtonTextAlign = 'left' | 'right' | 'center';
709
625
  /**
710
626
  * @public
711
627
  */
712
- type ContainerProps<E extends ElementType$1 = 'div'> = Props<ContainerOwnProps, E>;
628
+ type ButtonTone = ThemeColorStateToneKey;
713
629
  /**
714
- * The `Container` component wraps content layout in a defined set of widths.
715
- *
716
630
  * @public
717
631
  */
718
- declare const Container: <E extends ElementType$1 = 'div'>(props: ContainerProps<E>) => React.JSX.Element;
632
+ type ButtonWidth = 'fill';
719
633
  /**
720
634
  * @public
721
635
  */
722
- interface FlexOwnProps extends Omit<BoxOwnProps, 'display'>, ResponsiveFlexProps, ResponsiveFlexItemProps {
723
- gap?: number | number[];
636
+ interface TabProps {
637
+ /**
638
+ * The `id` of the correlating `TabPanel` component.
639
+ */
640
+ 'aria-controls': string;
641
+ 'id': string;
642
+ 'icon'?: React.ElementType | React.ReactNode;
643
+ 'focused'?: boolean;
644
+ 'fontSize'?: number | number[];
645
+ 'label'?: React.ReactNode;
646
+ 'padding'?: number | number[];
647
+ 'selected'?: boolean;
648
+ 'tone'?: ButtonTone;
724
649
  }
725
650
  /**
726
651
  * @public
727
652
  */
728
- type FlexProps<E extends ElementType$1 = 'div'> = Props<FlexOwnProps, E>;
729
- /**
730
- * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
731
- *
732
- * @public
733
- */
734
- declare const Flex: <E extends ElementType$1 = 'div'>(props: FlexProps<E>) => React.JSX.Element;
735
- /**
736
- * @public
737
- */
738
- interface GridOwnProps extends Omit<BoxOwnProps, 'display'>, ResponsiveGridProps {}
739
- /**
740
- * @public
741
- */
742
- type GridProps<E extends ElementType$1 = 'div'> = Props<GridOwnProps, E>;
653
+ declare const Tab: import("react").ForwardRefExoticComponent<Omit<TabProps & Omit<import("react").HTMLProps<HTMLButtonElement>, "aria-controls" | "as" | "id" | "label" | "type" | "width">, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
743
654
  /**
744
- * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
655
+ * The props that `Box` adds on top of the element it renders as.
745
656
  *
746
657
  * @public
747
658
  */
748
- declare const Grid: <E extends ElementType$1 = 'div'>(props: GridProps<E>) => React.JSX.Element;
749
- /**
750
- * @public
751
- */
752
- interface HeadingOwnProps {
753
- accent?: boolean;
754
- align?: TextAlign | TextAlign[];
755
- muted?: boolean;
756
- size?: number | number[];
757
- /**
758
- * Controls how overflowing text is treated.
759
- * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
760
- * @beta
761
- */
762
- textOverflow?: 'ellipsis';
763
- weight?: ThemeFontWeightKey$1;
659
+ interface BoxOwnProps extends ResponsiveFlexItemProps, ResponsiveBoxProps, ResponsiveGridItemProps, ResponsiveMarginProps, ResponsivePaddingProps {
660
+ forwardedAs?: ElementType$1;
764
661
  }
765
662
  /**
766
663
  * @public
767
664
  */
768
- type HeadingProps<E extends ElementType$1 = 'div'> = Props<HeadingOwnProps, E>;
665
+ type BoxProps<E extends ElementType$1 = 'div'> = Props<BoxOwnProps, E>;
769
666
  /**
770
- * Typographic headings.
667
+ * The `Box` component is a basic layout wrapper component which provides utility properties
668
+ * for flex, margins and padding.
771
669
  *
772
670
  * @public
773
671
  */
774
- declare const Heading: <E extends ElementType$1 = 'div'>(props: HeadingProps<E>) => React.JSX.Element;
672
+ declare const Box: <E extends ElementType$1 = 'div'>(props: BoxProps<E>) => React.JSX.Element;
775
673
  /**
776
674
  * @public
777
675
  */
@@ -797,271 +695,154 @@ declare const Inline: <E extends ElementType$1 = 'div'>(props: InlineProps<E>) =
797
695
  /**
798
696
  * @public
799
697
  */
800
- interface KBDOwnProps {
801
- fontSize?: number | number[];
802
- padding?: number | number[];
803
- radius?: Radius | Radius[];
804
- }
805
- /**
806
- * @public
807
- */
808
- type KBDProps<E extends ElementType$1 = 'kbd'> = Props<KBDOwnProps, E>;
809
- /**
810
- * Used to define some text as keyboard input.
811
- *
812
- * @public
813
- */
814
- declare const KBD: <E extends ElementType$1 = 'kbd'>(props: KBDProps<E>) => React.JSX.Element;
815
- /**
816
- * @public
817
- */
818
- interface LabelOwnProps {
819
- accent?: boolean;
820
- align?: TextAlign | TextAlign[];
821
- muted?: boolean;
822
- size?: number | number[];
823
- /**
824
- * Controls how overflowing text is treated.
825
- * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
826
- * @beta
827
- */
828
- textOverflow?: 'ellipsis';
829
- weight?: ThemeFontWeightKey$1;
698
+ interface TabListProps extends Omit<InlineOwnProps, 'height'> {
699
+ children: Array<React.JSX.Element | null | undefined | false>;
830
700
  }
831
701
  /**
832
702
  * @public
833
703
  */
834
- type LabelProps<E extends ElementType$1 = 'div'> = Props<LabelOwnProps, E>;
835
- /**
836
- * Typographic labels.
837
- *
838
- * @public
839
- */
840
- declare const Label: <E extends ElementType$1 = 'div'>(props: LabelProps<E>) => React.JSX.Element;
841
- /** @internal */
842
- declare const Arrow: import("react").ForwardRefExoticComponent<Omit<{
843
- width: number;
844
- height: number;
845
- radius?: number;
846
- } & Omit<HTMLProps<HTMLDivElement>, "height" | "width">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
704
+ declare const TabList: import("react").ForwardRefExoticComponent<Omit<TabListProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "height">, "ref"> & import("react").RefAttributes<unknown>>;
847
705
  /**
848
- * DO NOT USE IN PRODUCTION
849
- * @beta
706
+ * @internal
850
707
  */
851
- type ErrorBoundaryProps = PropsWithChildren<{
852
- onCatch: (params: {
853
- error: Error;
854
- info: React.ErrorInfo;
855
- }) => void;
856
- }>;
708
+ declare function _isEnterToClickElement(element: HTMLElement): boolean;
857
709
  /**
858
- * DO NOT USE IN PRODUCTION
859
- * @beta
710
+ * @internal
860
711
  */
861
- interface ErrorBoundaryState {
862
- error: Error | null;
863
- }
712
+ declare function isHTMLElement(node: unknown): node is HTMLElement;
864
713
  /**
865
- * DO NOT USE IN PRODUCTION
866
- * @beta
714
+ * @internal
867
715
  */
868
- declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
869
- state: ErrorBoundaryState;
870
- static getDerivedStateFromError(error: Error): ErrorBoundaryState;
871
- componentDidCatch(error: Error, info: React.ErrorInfo): void;
872
- render(): React.ReactNode;
873
- }
716
+ declare function isHTMLAnchorElement(element: unknown): element is HTMLAnchorElement;
874
717
  /**
875
- * @public
718
+ * @internal
876
719
  */
877
- interface LayerProps {
878
- as?: React.ElementType | keyof React.JSX.IntrinsicElements;
879
- /** A callback that fires when the layer becomes the top layer when it was not the top layer before. */
880
- onActivate?: (props: {
881
- activeElement: HTMLElement | null;
882
- }) => void;
883
- zOffset?: number | number[];
884
- }
720
+ declare function isHTMLInputElement(element: unknown): element is HTMLInputElement;
885
721
  /**
886
- * @public
722
+ * @internal
887
723
  */
888
- declare const Layer: import("react").ForwardRefExoticComponent<Omit<LayerProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
724
+ declare function isHTMLButtonElement(element: unknown): element is HTMLButtonElement;
889
725
  /**
890
- * @public
726
+ * @internal
891
727
  */
892
- interface LayerProviderProps {
893
- children?: React.ReactNode;
894
- zOffset?: number | number[];
895
- }
728
+ declare function isHTMLSelectElement(element: unknown): element is HTMLSelectElement;
896
729
  /**
897
- * @public
730
+ * @internal
898
731
  */
899
- declare function LayerProvider(props: LayerProviderProps): React.JSX.Element;
732
+ declare function isHTMLTextAreaElement(element: unknown): element is HTMLTextAreaElement;
900
733
  /**
901
- * @public
734
+ * @internal
902
735
  */
903
- interface PortalProps {
904
- children: React.ReactNode;
905
- /**
906
- * @beta This API might change. DO NOT USE IN PRODUCTION.
907
- */
908
- __unstable_name?: string;
909
- }
736
+ declare function containsOrEqualsElement(element: HTMLElement, node: Node): boolean;
910
737
  /**
738
+ * Returns true if a dark color scheme is preferred, false if a light color scheme is preferred or the preference is not known.
739
+ *
740
+ * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-color-scheme: light)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
741
+ *
742
+ * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
743
+ * Chrome supports reading the `prefers-color-scheme` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme
744
+ * @example https://gist.github.com/stipsan/13c0cccf8dfc34f4b44bb1b984baf7df
745
+ *
911
746
  * @public
912
747
  */
913
- declare function Portal(props: PortalProps): React.ReactPortal | null;
748
+ declare function usePrefersDark(getServerSnapshot?: () => boolean): boolean;
914
749
  /**
915
750
  * @public
916
751
  */
917
- interface PortalProviderProps {
752
+ interface ButtonOwnProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
753
+ fontSize?: number | number[];
754
+ mode?: ButtonMode;
755
+ icon?: React.ElementType | React.ReactNode;
756
+ iconRight?: React.ElementType | React.ReactNode;
757
+ justify?: FlexJustify | FlexJustify[];
918
758
  /**
919
- * @deprecated Use `<BoundaryElementProvider element={...} />` instead
759
+ * @beta Do not use in production, as this might change.
920
760
  */
921
- boundaryElement?: HTMLElement | null;
922
- children: React.ReactNode;
923
- element?: HTMLElement | null;
761
+ loading?: boolean;
762
+ selected?: boolean;
924
763
  /**
925
- * @beta
764
+ * @deprecated Use `gap` instead. `space` will be removed in v4.
926
765
  */
927
- __unstable_elements?: Record<string, HTMLElement | null | undefined>;
766
+ space?: number | number[];
767
+ gap?: number | number[];
768
+ muted?: boolean;
769
+ text?: React.ReactNode;
770
+ textAlign?: ButtonTextAlign;
771
+ textWeight?: ThemeFontWeightKey$1;
772
+ tone?: ButtonTone;
773
+ type?: 'button' | 'reset' | 'submit';
774
+ width?: ButtonWidth;
928
775
  }
929
776
  /**
930
777
  * @public
931
778
  */
932
- declare function PortalProvider(props: PortalProviderProps): React.JSX.Element;
933
- /**
934
- * @beta
935
- */
936
- interface VirtualListChangeOpts {
937
- fromIndex: number;
938
- gap: number;
939
- itemHeight: number;
940
- scrollHeight: number;
941
- scrollTop: number;
942
- toIndex: number;
943
- }
944
- /**
945
- * @beta
946
- */
947
- interface VirtualListProps<Item = any> {
948
- as?: React.ElementType | keyof React.JSX.IntrinsicElements;
949
- gap?: number;
950
- getItemKey?: (item: Item, itemIndex: number) => string;
951
- items?: Item[];
952
- onChange?: (opts: VirtualListChangeOpts) => void;
953
- renderItem?: (item: Item) => React.ReactNode;
954
- }
779
+ type ButtonProps<E extends ElementType$1 = 'button'> = Props<ButtonOwnProps, E>;
955
780
  /**
956
- * @beta
781
+ * @public
957
782
  */
958
- declare const VirtualList: import("react").ForwardRefExoticComponent<VirtualListProps<any> & StackOwnProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "children" | "onChange" | "ref"> & import("react").RefAttributes<HTMLDivElement>>;
959
- /** @beta */
960
- type PopoverUpdateCallback = () => void;
961
- /** @public */
962
- type PopoverWidth = number | 'auto';
963
- /** @public */
964
- interface PopoverProps extends Omit<LayerProps, 'as'>, ResponsiveRadiusProps, ResponsiveShadowProps {
965
- /** @beta */
966
- __unstable_margins?: PopoverMargins;
967
- /**
968
- * Whether the popover should animate in and out.
969
- *
970
- * @beta
971
- * @defaultValue false
972
- */
973
- animate?: boolean;
974
- arrow?: boolean;
975
- /** @deprecated Use `floatingBoundary` and/or `referenceBoundary` instead */
976
- boundaryElement?: HTMLElement | null;
977
- children?: React.JSX.Element;
978
- /**
979
- * When `true`, prevent overflow within the current boundary:
980
- * - by flipping on its side axis
981
- * - by resizing
982
- /*
983
- * Note that:
984
- * - setting `preventOverflow` to `true` also prevents overflow on its side axis
985
- * - setting `matchReferenceWidth` to `true` also causes the popover to resize
986
- *
987
- * @defaultValue false
988
- */
989
- constrainSize?: boolean;
990
- content?: React.ReactNode;
991
- disabled?: boolean;
992
- fallbackPlacements?: Placement[];
993
- floatingBoundary?: HTMLElement | null;
994
- /**
995
- * When `true`, set the maximum width to match the reference element, and also prevent overflow within
996
- * the current boundary by resizing.
997
- *
998
- * Note that setting `constrainSize` to `true` also causes the popover to resize
999
- *
1000
- * @defaultValue false
1001
- */
1002
- matchReferenceWidth?: boolean;
783
+ declare const Button: <E extends ElementType$1 = 'button'>(props: ButtonProps<E>) => React.JSX.Element;
784
+ /**
785
+ * @public
786
+ */
787
+ interface CardOwnProps extends BoxOwnProps, ResponsiveBorderProps, ResponsiveRadiusProps, ResponsiveShadowProps {
1003
788
  /**
1004
- * When true, blocks all pointer interaction with elements beneath the popover until closed.
1005
- *
789
+ * Do not use in production.
1006
790
  * @beta
1007
- * @defaultValue false
1008
- */
1009
- modal?: boolean;
1010
- open?: boolean;
1011
- overflow?: BoxOverflow;
1012
- padding?: number | number[];
1013
- placement?: Placement;
1014
- /**
1015
- * When 'flip' (default), the placement is determined from the initial placement and the
1016
- * fallback placements in order. Whichever fits in the viewport first.
1017
- *
1018
- * When 'autoPlacement', the initial placement and all fallback placements are evaluated
1019
- * and the placement with the most viewport space available.
1020
- *
1021
- * Option is only relevant if either `constrainSize` or `preventOverflow` is `true`
1022
791
  */
1023
- placementStrategy?: 'flip' | 'autoPlacement';
1024
- /** Whether or not to render the popover in a portal element. */
1025
- portal?: boolean | string;
1026
- preventOverflow?: boolean;
1027
- referenceBoundary?: HTMLElement | null;
792
+ __unstable_checkered?: boolean;
1028
793
  /**
1029
- * When defined, the popover will be positioned relative to this element.
1030
- * The children of the popover won't be rendered.
794
+ * Do not use in production.
795
+ * @beta
1031
796
  */
1032
- referenceElement?: HTMLElement | null;
797
+ __unstable_focusRing?: boolean;
798
+ disabled?: boolean;
799
+ muted?: boolean;
800
+ pressed?: boolean;
1033
801
  scheme?: ThemeColorSchemeKey$1;
802
+ selected?: boolean;
1034
803
  tone?: CardTone;
1035
- /** @beta */
1036
- updateRef?: Ref<PopoverUpdateCallback | undefined>;
1037
- width?: PopoverWidth | PopoverWidth[];
1038
804
  }
1039
805
  /**
1040
- * The `Popover` component is used to display some content on top of another.
806
+ * @public
807
+ */
808
+ type CardProps<E extends ElementType$1 = 'div'> = Props<CardOwnProps, E>;
809
+ /**
810
+ * The `Card` component acts much like a `Box`, but with a background and foreground color.
811
+ * Components within a `Card` inherit its colors.
1041
812
  *
1042
813
  * @public
1043
814
  */
1044
- declare const Popover: import("react").ForwardRefExoticComponent<Omit<PopoverProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "children" | "content" | "width">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
815
+ declare const Card: <E extends ElementType$1 = 'div'>(props: CardProps<E>) => React.JSX.Element;
1045
816
  /**
1046
817
  * @public
1047
818
  */
1048
- interface SelectProps {
1049
- fontSize?: number | number[];
819
+ interface FlexOwnProps extends Omit<BoxOwnProps, 'display'>, ResponsiveFlexProps, ResponsiveFlexItemProps {
1050
820
  gap?: number | number[];
1051
- padding?: number | number[];
1052
- radius?: Radius | Radius[];
1053
- /**
1054
- * @deprecated Use `gap` instead. `space` will be removed in v4.
1055
- */
1056
- space?: number | number[];
1057
- customValidity?: string;
1058
821
  }
1059
822
  /**
1060
- * The `Select` component provides control of options.
823
+ * @public
824
+ */
825
+ type FlexProps<E extends ElementType$1 = 'div'> = Props<FlexOwnProps, E>;
826
+ /**
827
+ * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
828
+ *
829
+ * @public
830
+ */
831
+ declare const Flex: <E extends ElementType$1 = 'div'>(props: FlexProps<E>) => React.JSX.Element;
832
+ /**
833
+ * @public
834
+ */
835
+ interface GridOwnProps extends Omit<BoxOwnProps, 'display'>, ResponsiveGridProps {}
836
+ /**
837
+ * @public
838
+ */
839
+ type GridProps<E extends ElementType$1 = 'div'> = Props<GridOwnProps, E>;
840
+ /**
841
+ * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
1061
842
  *
1062
843
  * @public
1063
844
  */
1064
- declare const Select: import("react").ForwardRefExoticComponent<Omit<SelectProps & Omit<import("react").HTMLProps<HTMLSelectElement>, "as">, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
845
+ declare const Grid: <E extends ElementType$1 = 'div'>(props: GridProps<E>) => React.JSX.Element;
1065
846
  /**
1066
847
  * @public
1067
848
  */
@@ -1095,6 +876,10 @@ type StackProps<E extends ElementType$1 = 'div'> = Props<StackOwnProps, E>;
1095
876
  * @public
1096
877
  */
1097
878
  declare const Stack: <E extends ElementType$1 = 'div'>(props: StackProps<E>) => React.JSX.Element;
879
+ /**
880
+ * @public
881
+ */
882
+ type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial';
1098
883
  /**
1099
884
  * @public
1100
885
  */
@@ -1122,26 +907,6 @@ type TextProps<E extends ElementType$1 = 'div'> = Props<TextOwnProps, E>;
1122
907
  * @public
1123
908
  */
1124
909
  declare const Text: <E extends ElementType$1 = 'div'>(props: TextProps<E>) => React.JSX.Element;
1125
- /**
1126
- * @public
1127
- */
1128
- interface TextAreaProps extends ResponsiveRadiusProps {
1129
- /**
1130
- * @beta
1131
- */
1132
- __unstable_disableFocusRing?: boolean;
1133
- border?: boolean;
1134
- customValidity?: string;
1135
- fontSize?: number | number[];
1136
- padding?: number | number[];
1137
- weight?: ThemeFontWeightKey$1;
1138
- }
1139
- /**
1140
- * A multiline text input.
1141
- *
1142
- * @public
1143
- */
1144
- declare const TextArea: import("react").ForwardRefExoticComponent<Omit<TextAreaProps & Omit<import("react").HTMLProps<HTMLTextAreaElement>, "as">, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
1145
910
  /**
1146
911
  * @public
1147
912
  */
@@ -1235,173 +1000,68 @@ interface TooltipProps extends Omit<LayerProps, 'as'> {
1235
1000
  declare const Tooltip: import("react").ForwardRefExoticComponent<Omit<TooltipProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "children" | "content">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
1236
1001
  /**
1237
1002
  * @public
1238
- * */
1239
- interface TooltipDelayGroupProviderProps {
1003
+ */
1004
+ interface ThemeProviderProps {
1240
1005
  children?: React.ReactNode;
1241
- /**
1242
- * Handles the delays to open or close a tooltip inside a group
1243
- *
1244
- * If only a `number` is passed, it will be used for both opening and closing.
1245
- *
1246
- * If an object `{open: number; close:number}` is passed, it can be used to set different delays for each action.
1247
- *
1248
- * @public
1249
- */
1250
- delay: Delay;
1006
+ scheme?: ThemeColorSchemeKey$1;
1007
+ theme?: RootTheme$1;
1008
+ tone?: ThemeColorCardToneKey;
1251
1009
  }
1252
- /**
1253
- * @public
1254
- * Provides context for a group of tooltip elements that should share a delay
1255
- * which temporarily becomes 1 ms after the first floating element of the group opens.
1256
- */
1257
- declare function TooltipDelayGroupProvider(props: TooltipDelayGroupProviderProps): React.JSX.Element;
1258
1010
  /**
1259
1011
  * @public
1260
1012
  */
1261
- interface MenuGroupOwnProps {
1262
- fontSize?: number | number[];
1263
- icon?: React.ElementType | React.ReactNode;
1264
- menu?: Omit<MenuProps, 'onClickOutside' | 'onEscape' | 'onItemClick' | 'onKeyDown' | 'onMouseEnter' | 'registerElement' | 'shouldFocus' | 'onBlurCapture'>;
1265
- padding?: number | number[];
1266
- popover?: Omit<PopoverProps, 'content' | 'open'>;
1267
- radius?: Radius | Radius[];
1268
- gap?: number | number[];
1269
- /**
1270
- * @deprecated Use `gap` instead. `space` will be removed in v4.
1271
- */
1272
- space?: number | number[];
1273
- text: React.ReactNode;
1274
- tone?: SelectableTone;
1275
- }
1013
+ declare function ThemeProvider(props: ThemeProviderProps): React.JSX.Element;
1276
1014
  /**
1277
1015
  * @public
1278
1016
  */
1279
- type MenuGroupProps<E extends ElementType$1 = 'button'> = Props<MenuGroupOwnProps, E>;
1017
+ declare function useTheme(): Theme$1;
1280
1018
  /**
1281
1019
  * @public
1282
1020
  */
1283
- declare const MenuGroup: <E extends ElementType$1 = 'button'>(props: MenuGroupProps<E>) => React.JSX.Element;
1021
+ declare function useTheme_v2(): Theme_v2;
1284
1022
  /**
1285
1023
  * @public
1286
1024
  */
1287
- interface MenuItemOwnProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
1288
- fontSize?: number | number[];
1289
- hotkeys?: string[];
1290
- icon?: React.ElementType | React.ReactNode;
1291
- iconRight?: React.ElementType | React.ReactNode;
1292
- pressed?: boolean;
1293
- selected?: boolean;
1294
- gap?: number | number[];
1295
- /**
1296
- * @deprecated Use `gap` instead. `space` will be removed in v4.
1297
- */
1298
- space?: number | number[];
1299
- text?: React.ReactNode;
1300
- tone?: SelectableTone;
1025
+ interface LayerProviderProps {
1026
+ children?: React.ReactNode;
1027
+ zOffset?: number | number[];
1301
1028
  }
1302
1029
  /**
1303
1030
  * @public
1304
1031
  */
1305
- type MenuItemProps<E extends ElementType$1 = 'button'> = Props<MenuItemOwnProps, E>;
1306
- /**
1307
- * @public
1308
- */
1309
- declare const MenuItem: <E extends ElementType$1 = 'button'>(props: MenuItemProps<E>) => React.JSX.Element;
1032
+ declare function LayerProvider(props: LayerProviderProps): React.JSX.Element;
1310
1033
  /**
1311
1034
  * @public
1312
1035
  */
1313
- interface TabProps {
1036
+ interface PortalProps {
1037
+ children: React.ReactNode;
1314
1038
  /**
1315
- * The `id` of the correlating `TabPanel` component.
1039
+ * @beta This API might change. DO NOT USE IN PRODUCTION.
1316
1040
  */
1317
- 'aria-controls': string;
1318
- 'id': string;
1319
- 'icon'?: React.ElementType | React.ReactNode;
1320
- 'focused'?: boolean;
1321
- 'fontSize'?: number | number[];
1322
- 'label'?: React.ReactNode;
1323
- 'padding'?: number | number[];
1324
- 'selected'?: boolean;
1325
- 'tone'?: ButtonTone;
1326
- }
1327
- /**
1328
- * @public
1329
- */
1330
- declare const Tab: import("react").ForwardRefExoticComponent<Omit<TabProps & Omit<import("react").HTMLProps<HTMLButtonElement>, "aria-controls" | "as" | "id" | "label" | "type" | "width">, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
1331
- /**
1332
- * @public
1333
- */
1334
- interface TabListProps extends Omit<InlineOwnProps, 'height'> {
1335
- children: Array<React.JSX.Element | null | undefined | false>;
1041
+ __unstable_name?: string;
1336
1042
  }
1337
1043
  /**
1338
1044
  * @public
1339
1045
  */
1340
- declare const TabList: import("react").ForwardRefExoticComponent<Omit<TabListProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "height">, "ref"> & import("react").RefAttributes<unknown>>;
1341
- /**
1342
- * @internal
1343
- */
1344
- declare function _isEnterToClickElement(element: HTMLElement): boolean;
1345
- /**
1346
- * @internal
1347
- */
1348
- declare function isHTMLElement(node: unknown): node is HTMLElement;
1349
- /**
1350
- * @internal
1351
- */
1352
- declare function isHTMLAnchorElement(element: unknown): element is HTMLAnchorElement;
1353
- /**
1354
- * @internal
1355
- */
1356
- declare function isHTMLInputElement(element: unknown): element is HTMLInputElement;
1357
- /**
1358
- * @internal
1359
- */
1360
- declare function isHTMLButtonElement(element: unknown): element is HTMLButtonElement;
1361
- /**
1362
- * @internal
1363
- */
1364
- declare function isHTMLSelectElement(element: unknown): element is HTMLSelectElement;
1365
- /**
1366
- * @internal
1367
- */
1368
- declare function isHTMLTextAreaElement(element: unknown): element is HTMLTextAreaElement;
1369
- /**
1370
- * @internal
1371
- */
1372
- declare function containsOrEqualsElement(element: HTMLElement, node: Node): boolean;
1373
- /**
1374
- * Returns true if a dark color scheme is preferred, false if a light color scheme is preferred or the preference is not known.
1375
- *
1376
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-color-scheme: light)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
1377
- *
1378
- * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
1379
- * Chrome supports reading the `prefers-color-scheme` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme
1380
- * @example https://gist.github.com/stipsan/13c0cccf8dfc34f4b44bb1b984baf7df
1381
- *
1382
- * @public
1383
- */
1384
- declare function usePrefersDark(getServerSnapshot?: () => boolean): boolean;
1046
+ declare function Portal(props: PortalProps): React.ReactPortal | null;
1385
1047
  /**
1386
1048
  * @public
1387
1049
  */
1388
- interface ThemeProviderProps {
1389
- children?: React.ReactNode;
1390
- scheme?: ThemeColorSchemeKey$1;
1391
- theme?: RootTheme$1;
1392
- tone?: ThemeColorCardToneKey;
1050
+ interface PortalProviderProps {
1051
+ /**
1052
+ * @deprecated Use `<BoundaryElementProvider element={...} />` instead
1053
+ */
1054
+ boundaryElement?: HTMLElement | null;
1055
+ children: React.ReactNode;
1056
+ element?: HTMLElement | null;
1057
+ /**
1058
+ * @beta
1059
+ */
1060
+ __unstable_elements?: Record<string, HTMLElement | null | undefined>;
1393
1061
  }
1394
1062
  /**
1395
1063
  * @public
1396
1064
  */
1397
- declare function ThemeProvider(props: ThemeProviderProps): React.JSX.Element;
1398
- /**
1399
- * @public
1400
- */
1401
- declare function useTheme(): Theme$1;
1402
- /**
1403
- * @public
1404
- */
1405
- declare function useTheme_v2(): Theme_v2;
1406
- export { Portal as $, BadgeMode as $n, AvatarOwnProps as $t, TextInputProps as A, GridAutoCols as An, screen as Ar, Code as At, Spinner as B, ElementType$1 as Bn, Badge as Bt, MenuGroupProps as C, Placement as Cn, hexToRgb as Cr, GridProps as Ct, TooltipProps as D, GridItemRow as Dn, rgbToHex as Dr, Container as Dt, Tooltip as E, GridItemColumnStart as En, parseColor as Er, FlexProps as Et, TextOwnProps as F, FlexJustify as Fn, CardOwnProps as Ft, PopoverProps as G, ButtonMode as Gn, BoxProps as Gt, Select as H, Props as Hn, BadgeProps as Ht, TextProps as I, FlexValue as In, CardProps as It, VirtualList as J, ButtonWidth as Jn, AvatarStack as Jt, PopoverUpdateCallback as K, ButtonTextAlign as Kn, AvatarRootStyleProps as Kt, Stack as L, FlexWrap as Ln, Button as Lt, TextArea as M, GridAutoRows as Mn, CodeProps as Mt, TextAreaProps as N, FlexAlign as Nn, CardStyleProps as Nt, TextInput as O, GridItemRowEnd as On, rgbToHsl as Or, ContainerOwnProps as Ot, Text as P, FlexDirection as Pn, Card as Pt, PortalProviderProps as Q, BoxSizing as Qn, Avatar as Qt, StackOwnProps as R, Assign as Rn, ButtonOwnProps as Rt, MenuGroupOwnProps as S, PopoverMargins as Sn, createColorTheme as Sr, GridOwnProps as St, TooltipDelayGroupProviderProps as T, GridItemColumnEnd as Tn, multiply as Tr, FlexOwnProps as Tt, SelectProps as U, TagType as Un, Box as Ut, SpinnerProps as V, EmptyProps as Vn, BadgeOwnProps as Vt, Popover as W, CardTone as Wn, BoxOwnProps as Wt, VirtualListProps as X, BoxHeight as Xn, AvatarCounter as Xt, VirtualListChangeOpts as Y, BoxDisplay as Yn, AvatarStackProps as Yt, PortalProvider as Z, BoxOverflow as Zn, AvatarCounterProps as Zt, TabProps as _, Hotkeys as _n, ThemeFontWeight as _r, InlineProps as _t, usePrefersDark as a, Delay as an, BoxShadow as ar, ErrorBoundary as at, MenuItemProps as b, SelectableTone as bn, ThemeLayer as br, HeadingProps as bt, isHTMLAnchorElement as c, ResponsiveFlexItemProps as cn, RootTheme as cr, Arrow as ct, isHTMLInputElement as d, ResponsiveGridProps as dn, ThemeColorButtonModeKey as dr, LabelProps as dt, AvatarProps as en, BadgeTone as er, PortalProps as et, isHTMLSelectElement as f, ResponsiveMarginProps as fn, ThemeColorSchemeKey as fr, KBD as ft, Tab as g, ResponsiveWidthProps as gn, ThemeFontSize as gr, InlineOwnProps as gt, TabListProps as h, ResponsiveShadowProps as hn, ThemeFontKey as hr, Inline as ht, ThemeProviderProps as i, MenuProps as in, BaseTheme as ir, LayerProps as it, TextInputType as j, GridAutoFlow as jn, studioTheme as jr, CodeOwnProps as jt, TextInputClearButtonProps as k, GridItemRowStart as kn, rgba as kr, ContainerProps as kt, isHTMLButtonElement as l, ResponsiveFlexProps as ln, Styles as lr, Label as lt, TabList as m, ResponsiveRadiusProps as mn, ThemeFont as mr, KBDProps as mt, useTheme_v2 as n, MenuDividerProps as nn, AvatarSize as nr, LayerProviderProps as nt, _isEnterToClickElement as o, ResponsiveBorderProps as on, HSL as or, ErrorBoundaryProps as ot, isHTMLTextAreaElement as p, ResponsivePaddingProps as pn, ThemeColorSyntax as pr, KBDOwnProps as pt, PopoverWidth as q, ButtonTone as qn, ResponsiveAvatarSizeStyleProps as qt, ThemeProvider as r, Menu as rn, AvatarStatus as rr, Layer as rt, containsOrEqualsElement as s, ResponsiveBoxProps as sn, RGB as sr, ErrorBoundaryState as st, useTheme as t, MenuDivider as tn, AvatarPosition as tr, LayerProvider as tt, isHTMLElement as u, ResponsiveGridItemProps as un, Theme as ur, LabelOwnProps as ut, MenuItem as v, HotkeysProps as vn, ThemeFontWeightKey as vr, Heading as vt, TooltipDelayGroupProvider as w, GridItemColumn as wn, hslToRgb as wr, Flex as wt, MenuGroup as x, Radius as xn, ThemeShadow as xr, Grid as xt, MenuItemOwnProps as y, TextAlign as yn, ThemeFonts as yr, HeadingOwnProps as yt, StackProps as z, ComponentType as zn, ButtonProps as zt };
1407
- //# sourceMappingURL=useTheme.d.cts.map
1065
+ declare function PortalProvider(props: PortalProviderProps): React.JSX.Element;
1066
+ export { BoxOwnProps as $, GridAutoRows as $t, FlexOwnProps as A, createColorTheme as An, TagType as At, containsOrEqualsElement as B, ResponsiveMarginProps as Bt, StackProps as C, ThemeFontKey as Cn, MenuDivider as Ct, GridOwnProps as D, ThemeFonts as Dn, ElementType$1 as Dt, Grid as E, ThemeFontWeightKey as En, ComponentType as Et, Button as F, rgbToHex as Fn, ResponsiveBoxProps as Ft, isHTMLSelectElement as G, GridItemColumn as Gt, isHTMLButtonElement as H, ResponsiveRadiusProps as Ht, ButtonOwnProps as I, rgbToHsl as In, ResponsiveFlexItemProps as It, TabListProps as J, GridItemRow as Jt, isHTMLTextAreaElement as K, GridItemColumnEnd as Kt, ButtonProps as L, rgba as Ln, ResponsiveFlexProps as Lt, Card as M, hslToRgb as Mn, MenuProps as Mt, CardOwnProps as N, multiply as Nn, Delay as Nt, GridProps as O, ThemeLayer as On, EmptyProps as Ot, CardProps as P, parseColor as Pn, ResponsiveBorderProps as Pt, Box as Q, GridAutoFlow as Qt, usePrefersDark as R, screen as Rn, ResponsiveGridItemProps as Rt, StackOwnProps as S, ThemeFont as Sn, CardTone as St, SpinnerProps as T, ThemeFontWeight as Tn, Assign as Tt, isHTMLElement as U, ResponsiveShadowProps as Ut, isHTMLAnchorElement as V, ResponsivePaddingProps as Vt, isHTMLInputElement as W, ResponsiveWidthProps as Wt, InlineOwnProps as X, GridItemRowStart as Xt, Inline as Y, GridItemRowEnd as Yt, InlineProps as Z, GridAutoCols as Zt, Text as _, Styles as _n, PopoverWidth as _t, LayerProvider as a, BoxDisplay as an, ButtonTone as at, TextAlign as b, ThemeColorSchemeKey as bn, PopoverMargins as bt, useTheme_v2 as c, BoxSizing as cn, MenuItemOwnProps as ct, Tooltip as d, Radius as dn, MenuGroupOwnProps as dt, FlexAlign as en, BoxProps as et, TooltipProps as f, BaseTheme as fn, MenuGroupProps as ft, TextInputType as g, RootTheme as gn, PopoverUpdateCallback as gt, TextInputProps as h, RGB as hn, PopoverProps as ht, PortalProps as i, FlexWrap as in, ButtonTextAlign as it, FlexProps as j, hexToRgb as jn, Menu as jt, Flex as k, ThemeShadow as kn, Props as kt, ThemeProvider as l, Hotkeys as ln, MenuItemProps as lt, TextInputClearButtonProps as m, HSL as mn, Popover as mt, PortalProviderProps as n, FlexJustify as nn, TabProps as nt, LayerProviderProps as o, BoxHeight as on, ButtonWidth as ot, TextInput as p, BoxShadow as pn, SelectableTone as pt, TabList as q, GridItemColumnStart as qt, Portal as r, FlexValue as rn, ButtonMode as rt, useTheme as s, BoxOverflow as sn, MenuItem as st, PortalProvider as t, FlexDirection as tn, Tab as tt, ThemeProviderProps as u, HotkeysProps as un, MenuGroup as ut, TextOwnProps as v, Theme as vn, Layer as vt, Spinner as w, ThemeFontSize as wn, MenuDividerProps as wt, Stack as x, ThemeColorSyntax as xn, Placement as xt, TextProps as y, ThemeColorButtonModeKey as yn, LayerProps as yt, _isEnterToClickElement as z, studioTheme as zn, ResponsiveGridProps as zt };
1067
+ //# sourceMappingURL=portalProvider.d.ts.map