@wistia/ui 0.23.0 → 0.24.0-beta.69711dfb.bc58919

package/dist/index.d.ts

@@ -5,17 +5,10 @@ import * as _$styled_components0 from "styled-components";
 import { css } from "styled-components";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, ImageDimensionsValidator, PersistentFileAmountLimitValidator } from "use-file-picker/validators";
-import { CollapsibleContentProps } from "@radix-ui/react-collapsible";
 import { Color } from "culori/fn";
-import { ToggleGroupSingleProps } from "@radix-ui/react-toggle-group";
-import * as _$_radix_ui_react_popover0 from "@radix-ui/react-popover";
-import { Anchor, Close, PopoverContentProps as PopoverContentProps$1, Portal, Root as Root$2, Trigger as Trigger$1 } from "@radix-ui/react-popover";
 import * as Ariakit from "@ariakit/react";
-import { DropdownMenuCheckboxItemProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps } from "@radix-ui/react-dropdown-menu";
 import { Schema } from "yup";
-import { HoverCardContentProps } from "@radix-ui/react-hover-card";
 import ReactMarkdown from "react-markdown";
-import { TabsContentProps, TabsListProps, TabsProps, TabsTriggerProps } from "@radix-ui/react-tabs";
 import { ExtractContentTypeFromConfig, FilePickerReturnTypes, ImperativeFilePickerReturnTypes, UseFilePickerConfig, useImperativeFilePickerConfig } from "use-file-picker/types";
 export * from "use-file-picker/types";
 
@@ -617,7 +610,7 @@ declare const ActionButton: _$react.ForwardRefExoticComponent<(Omit<{
    * Changes the secondary icon for different use cases
    */
   variant?: "default" | "gated" | "menu-down" | "menu-up";
-} & Omit<ButtonAsButtonProps, "variant" | "fullWidth" | "isLoading" | "leftIcon" | "rightIcon" | "size" | "unstyled">, "ref"> | Omit<{
+} & Omit<ButtonAsButtonProps, "variant" | "isLoading" | "leftIcon" | "fullWidth" | "unstyled" | "rightIcon" | "size">, "ref"> | Omit<{
   /**
    * @override
    * The text to display for the ActionButton
@@ -646,7 +639,7 @@ declare const ActionButton: _$react.ForwardRefExoticComponent<(Omit<{
    * Changes the secondary icon for different use cases
    */
   variant?: "default" | "gated" | "menu-down" | "menu-up";
-} & Omit<ButtonAsLinkProps, "variant" | "fullWidth" | "isLoading" | "leftIcon" | "rightIcon" | "size" | "unstyled">, "ref">) & _$react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+} & Omit<ButtonAsLinkProps, "variant" | "isLoading" | "leftIcon" | "fullWidth" | "unstyled" | "rightIcon" | "size">, "ref">) & _$react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 //#endregion
 //#region src/components/Avatar/Avatar.d.ts
 type AvatarInstanceType = 'image' | 'initials';
@@ -1341,7 +1334,7 @@ type CollapsibleTriggerProps = {
    * A trigger element that will toggle the collapsible content.
    * Usually a [Button](?path=/docs/components-button--docs).
    */
-  children: ReactNode;
+  children: ReactElement;
 };
 declare const CollapsibleTrigger: ({
   children
@@ -1657,7 +1650,7 @@ declare const CollapsibleTriggerIcon: {
 };
 //#endregion
 //#region src/components/Collapsible/CollapsibleContent.d.ts
-type CollapsibleContentProps$1 = {
+type CollapsibleContentProps = {
   /**
    * The number of lines to clamp the content to when `Collapsible` is closed.
    */
@@ -1665,12 +1658,12 @@ type CollapsibleContentProps$1 = {
   /**
    * The content that will be hidden when `Collapsible` is closed.
    */
-  children: CollapsibleContentProps['children'];
+  children: ReactNode;
 };
 declare const CollapsibleContent: ({
   clamp,
   children
-}: CollapsibleContentProps$1) => _$react_jsx_runtime0.JSX.Element;
+}: CollapsibleContentProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/ColorPicker/ColorGrid.d.ts
 type ColorGridProps = PropsWithChildren & {
@@ -2040,7 +2033,7 @@ declare const ContextMenu: ({
   side,
   onRequestClose,
   compact
-}: ContextMenuProps) => _$react_jsx_runtime0.JSX.Element | null;
+}: ContextMenuProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/CustomizableThemeWrapper/CustomizableThemeWrapper.d.ts
 type CustomizableTokens = '--wui-color-backdrop' | '--wui-color-bg-app' | '--wui-color-bg-fill-active' | '--wui-color-bg-fill-hover' | '--wui-color-bg-fill-white ' | '--wui-color-bg-fill' | '--wui-color-bg-surface-active' | '--wui-color-bg-surface-disabled' | '--wui-color-bg-surface-hover' | '--wui-color-bg-surface-secondary-active' | '--wui-color-bg-surface-secondary-hover' | '--wui-color-bg-surface-secondary' | '--wui-color-bg-surface-selected-active' | '--wui-color-bg-surface-selected-hover' | '--wui-color-bg-surface-selected' | '--wui-color-bg-surface-tertiary' | '--wui-color-bg-surface' | '--wui-color-bg-tooltip' | '--wui-color-border-active-selected' | '--wui-color-border-active' | '--wui-color-border-disabled' | '--wui-color-border-hover-selected' | '--wui-color-border-hover' | '--wui-color-border-secondary-active' | '--wui-color-border-secondary-hover' | '--wui-color-border-secondary' | '--wui-color-border-selected' | '--wui-color-border' | '--wui-color-drop-shadow' | '--wui-color-focus-color' | '--wui-color-focus-ring-disabled' | '--wui-color-focus-ring' | '--wui-color-icon-disabled' | '--wui-color-icon-on-fill' | '--wui-color-icon-selected' | '--wui-color-icon' | '--wui-color-invalid-indicator' | '--wui-color-notification-pill-color' | '--wui-color-segmented-control-checked-background' | '--wui-color-text-button' | '--wui-color-text-disabled' | '--wui-color-text-link' | '--wui-color-text-on-fill-white-selected' | '--wui-color-text-on-fill' | '--wui-color-text-secondary' | '--wui-color-text-selected' | '--wui-color-text' | '--wui-typography-family-brand' | '--wui-typography-family-default' | '--wui-typography-family-mono' | '--wui-typography-weight-body-bold' | '--wui-typography-weight-body' | '--wui-typography-weight-heading' | '--wui-typography-weight-label-bold' | '--wui-typography-weight-label';
@@ -3114,8 +3107,7 @@ type GridProps = ComponentPropsWithoutRef<'div'> & {
 declare const Grid: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, GridProps>) => _$react.ReactElement | null) & UnknownRecord;
 //#endregion
 //#region src/components/PreviewCard/PreviewCard.d.ts
-type ContentProps$1 = Omit<HoverCardContentProps, 'alignOffset' | 'arrowPadding' | 'asChild' | 'collisionPadding' | 'hideWhenDetached' | 'sideOffset'>;
-type PreviewCardProps = ContentProps$1 & {
+type PreviewCardProps = {
   /**
    * The content of the preview card
    */
@@ -3132,7 +3124,7 @@ type PreviewCardProps = ContentProps$1 & {
    * The [Link](?path=/docs/components-link--docs) that opens the preview card when hovered.
    * Preview cards should only be used on links—do not use on non-interactive elements (e.g. buttons or plain text).
    */
-  trigger: JSX.Element;
+  trigger: ReactElement;
   /**
    * If true, the preview card will use the unstyled Content component instead of StyledContent
    */
@@ -3155,6 +3147,14 @@ type PreviewCardProps = ContentProps$1 & {
    * Force the preview card to be open without user interaction (for debugging and CI)
    */
   forceOpen?: boolean;
+  /**
+   * The preferred side of the trigger to render on
+   */
+  side?: 'bottom' | 'left' | 'right' | 'top';
+  /**
+   * The preferred alignment against the trigger
+   */
+  align?: 'center' | 'end' | 'start';
 };
 /**
  * Preview cards reveal content on hover. **Everything in the card must also exist at the destination**—never put information only in the preview. This pattern is for sighted-only, so treat the card as a preview, not a source of truth.
@@ -3171,6 +3171,8 @@ declare const PreviewCard: {
     closeDelay,
     colorScheme,
     forceOpen,
+    side,
+    align,
     ...props
   }: PreviewCardProps): JSX.Element;
   displayName: string;
@@ -3200,7 +3202,7 @@ declare const IconButton: _$react.ForwardRefExoticComponent<(Omit<{
    * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
    */
   children: JSX.Element;
-} & Omit<ButtonAsButtonProps, "fullWidth" | "leftIcon" | "rightIcon">, "ref"> | Omit<{
+} & Omit<ButtonAsButtonProps, "leftIcon" | "fullWidth" | "rightIcon">, "ref"> | Omit<{
   /**
    * Accessible text for screen readers.
    */
@@ -3209,7 +3211,7 @@ declare const IconButton: _$react.ForwardRefExoticComponent<(Omit<{
    * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
    */
   children: JSX.Element;
-} & Omit<ButtonAsLinkProps, "fullWidth" | "leftIcon" | "rightIcon">, "ref">) & _$react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+} & Omit<ButtonAsLinkProps, "leftIcon" | "fullWidth" | "rightIcon">, "ref">) & _$react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 //#endregion
 //#region src/components/Image/Image.d.ts
 type ImageProps = ComponentPropsWithoutRef<'img'> & {
@@ -3289,7 +3291,7 @@ type InputClickToCopyProps = Omit<InputProps, 'autoSelect' | 'disabled' | 'right
 /**
  * Provides a readonly input that copies the text to the clipboard when clicked.
  */
-declare const InputClickToCopy: _$react.ForwardRefExoticComponent<Omit<InputProps, "type" | "rightIcon" | "disabled" | "value" | "autoSelect"> & {
+declare const InputClickToCopy: _$react.ForwardRefExoticComponent<Omit<InputProps, "type" | "disabled" | "rightIcon" | "value" | "autoSelect"> & {
   /**
    * When disabled, the copy action will not be triggered
    */
@@ -3499,10 +3501,6 @@ type MenuProps = MenuControlProps & {
    * The label for the trigger element, this is ignored if `trigger` is defined
    */
   label?: string;
-  /**
-   * Callback for when the user clicks or focuses outside of the menu
-   */
-  onInteractOutside?: DropdownMenuContentProps['onInteractOutside'];
   /**
    * The side the menu appears on, relative to the trigger
    */
@@ -3624,7 +3622,7 @@ type MenuItemButtonProps = ButtonProps & {
 };
 //#endregion
 //#region src/components/Menu/MenuItem.d.ts
-declare const MenuItem: _$react.ForwardRefExoticComponent<(Omit<DropdownMenuItemProps & BaseButtonProps & _$react.ClassAttributes<HTMLButtonElement> & _$react.ButtonHTMLAttributes<HTMLButtonElement> & {
+declare const MenuItem: _$react.ForwardRefExoticComponent<(Omit<BaseButtonProps & _$react.ClassAttributes<HTMLButtonElement> & _$react.ButtonHTMLAttributes<HTMLButtonElement> & {
   href?: never;
   type?: "button" | "reset" | "submit";
   children: _$react.ReactNode;
@@ -3646,7 +3644,16 @@ declare const MenuItem: _$react.ForwardRefExoticComponent<(Omit<DropdownMenuItem
    * Treats the menu item as a link when provided
    */
   href?: MenuItemButtonProps["href"];
-}, "ref"> | Omit<DropdownMenuItemProps & BaseButtonProps & _$react.ClassAttributes<HTMLAnchorElement> & _$react.AnchorHTMLAttributes<HTMLAnchorElement> & {
+  /**
+   * Whether the menu should close when this item is clicked
+   * @default true
+   */
+  closeOnClick?: boolean;
+  /**
+   * Callback when the item is selected
+   */
+  onSelect?: (event: SyntheticEvent) => void;
+}, "ref"> | Omit<BaseButtonProps & _$react.ClassAttributes<HTMLAnchorElement> & _$react.AnchorHTMLAttributes<HTMLAnchorElement> & {
   beforeAction?: (() => Promise<void>) | (() => void);
   children: _$react.ReactNode;
   colorScheme?: ColorSchemeTypes;
@@ -3682,7 +3689,16 @@ declare const MenuItem: _$react.ForwardRefExoticComponent<(Omit<DropdownMenuItem
    * Treats the menu item as a link when provided
    */
   href?: MenuItemButtonProps["href"];
-}, "ref"> | Omit<DropdownMenuItemProps & BaseButtonProps & _$react.ClassAttributes<HTMLAnchorElement> & _$react.AnchorHTMLAttributes<HTMLAnchorElement> & {
+  /**
+   * Whether the menu should close when this item is clicked
+   * @default true
+   */
+  closeOnClick?: boolean;
+  /**
+   * Callback when the item is selected
+   */
+  onSelect?: (event: SyntheticEvent) => void;
+}, "ref"> | Omit<BaseButtonProps & _$react.ClassAttributes<HTMLAnchorElement> & _$react.AnchorHTMLAttributes<HTMLAnchorElement> & {
   beforeAction?: (() => Promise<void>) | (() => void);
   children: _$react.ReactNode;
   colorScheme?: ColorSchemeTypes;
@@ -3724,6 +3740,15 @@ declare const MenuItem: _$react.ForwardRefExoticComponent<(Omit<DropdownMenuItem
    * Treats the menu item as a link when provided
    */
   href?: MenuItemButtonProps["href"];
+  /**
+   * Whether the menu should close when this item is clicked
+   * @default true
+   */
+  closeOnClick?: boolean;
+  /**
+   * Callback when the item is selected
+   */
+  onSelect?: (event: SyntheticEvent) => void;
 }, "ref">) & _$react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 //#endregion
 //#region src/components/Menu/MenuItemLabel.d.ts
@@ -3749,15 +3774,19 @@ declare const MenuItemDescription: ({
 }: MenuItemDescriptionProps) => _$react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/Menu/MenuRadioGroup.d.ts
-type MenuRadioGroupProps = DropdownMenuRadioGroupProps & {
+type MenuRadioGroupProps = {
   /**
    * The radio items
    */
   children: ReactNode | ReactNode[];
   /**
-   * @ignore
+   * The value of the selected radio item
    */
-  asChild?: never;
+  value?: string;
+  /**
+   * Callback when the value changes
+   */
+  onValueChange?: (value: string) => void;
 };
 declare const MenuRadioGroup: {
   ({
@@ -3768,7 +3797,7 @@ declare const MenuRadioGroup: {
 };
 //#endregion
 //#region src/components/Menu/RadioMenuItem.d.ts
-type RadioMenuItemProps = DropdownMenuRadioItemProps & MenuItemButtonProps & {
+type RadioMenuItemProps = MenuItemButtonProps & {
   /**
    * Optional `Icon` to use as the indicator that the radio item is selected. Must be an instance of [Icon](../?path=/docs/components-icon--docs)
    */
@@ -3776,7 +3805,7 @@ type RadioMenuItemProps = DropdownMenuRadioItemProps & MenuItemButtonProps & {
   /**
    * The value of the item
    */
-  value: DropdownMenuRadioItemProps['value'];
+  value: string;
   /**
    * @ignore
    */
@@ -3789,6 +3818,10 @@ type RadioMenuItemProps = DropdownMenuRadioItemProps & MenuItemButtonProps & {
    * @ignore
    */
   ref?: never;
+  /**
+   * Callback when the item is selected
+   */
+  onSelect?: (event: SyntheticEvent) => void;
 };
 declare const RadioMenuItem: {
   ({
@@ -3801,7 +3834,7 @@ declare const RadioMenuItem: {
 };
 //#endregion
 //#region src/components/Menu/CheckboxMenuItem.d.ts
-type CheckboxMenuItemProps = DropdownMenuCheckboxItemProps & MenuItemButtonProps & {
+type CheckboxMenuItemProps = MenuItemButtonProps & {
   /** Callback to fire when the checked status changes */onCheckedChange: (checked: boolean) => void;
   /**
    * Optional `Icon` to use as the indicator that the checkbox item is selected. Must be an instance of [Icon](../?path=/docs/components-icon--docs)
@@ -3823,6 +3856,10 @@ type CheckboxMenuItemProps = DropdownMenuCheckboxItemProps & MenuItemButtonProps
    * @ignore
    */
   ref?: never;
+  /**
+   * Callback when the item is selected
+   */
+  onSelect?: (event: SyntheticEvent) => void;
 };
 declare const CheckboxMenuItem: {
   ({
@@ -4067,8 +4104,7 @@ type UncontrolledPopoverProps = {
   onOpenChange?: never;
 };
 type PopoverControlProps = ControlledPopoverProps | UncontrolledPopoverProps;
-type ContentProps = Omit<PopoverContentProps$1, 'alignOffset' | 'arrowPadding' | 'asChild' | 'collisionPadding' | 'hideWhenDetached' | 'sideOffset' | 'updatePositionStrategy'>;
-type PopoverProps = ContentProps & PopoverControlProps & {
+type PopoverProps = PopoverControlProps & {
   /**
    * The content of the popover
    */
@@ -4092,13 +4128,13 @@ type PopoverProps = ContentProps & PopoverControlProps & {
   /**
    * An interactive element. Most commonly a [Button](?path=/docs/components-button--docs) or [IconButton]([Button](?path=/docs/components-iconbutton--docs)).
    */
-  trigger: JSX.Element;
+  trigger: ReactElement;
   /**
    * If true, the popover will use the unstyled Content component instead of StyledContent
    */
   unstyled?: boolean;
   /**
-   * If true, the popover will use a custom radix arrow to trigger
+   * If true, the popover will use a custom arrow on the trigger
    */
   withArrow?: boolean;
   /**
@@ -4110,13 +4146,24 @@ type PopoverProps = ContentProps & PopoverControlProps & {
    * Inline styles applied to the popover popup
    */
   style?: CSSProperties;
+  /**
+   * The preferred side of the trigger to render on
+   */
+  side?: 'bottom' | 'left' | 'right' | 'top';
+  /**
+   * The preferred alignment against the trigger
+   */
+  align?: 'center' | 'end' | 'start';
+  /**
+   * Whether the trigger should be treated as a native button (default: true)
+   */
+  nativeButton?: boolean;
 };
 /**
  * Displays rich content in a portal, triggered by a button.
  *
- * For more control — custom anchor, access to event handlers like
- * `onPointerDownOutside`, no injected close button, etc. — compose the
- * primitives directly: `PopoverRoot`, `PopoverTrigger`, `PopoverAnchor`,
+ * For more control — custom anchor, no injected close button, etc. — compose
+ * the primitives directly: `PopoverRoot`, `PopoverTrigger`, `PopoverAnchor`,
  * `PopoverPortal`, `PopoverContent`, `PopoverClose`.
  */
 declare const Popover: {
@@ -4133,19 +4180,31 @@ declare const Popover: {
     isAnimated,
     colorScheme,
     style,
+    side,
+    align,
+    nativeButton,
     ...props
   }: PopoverProps): JSX.Element;
   displayName: string;
 };
 //#endregion
 //#region src/components/Popover/PopoverAnchor.d.ts
-type PopoverAnchorProps = ComponentPropsWithoutRef<typeof Anchor>;
+type PopoverAnchorProps = {
+  children: ReactNode;
+};
 /**
  * Positions the popover relative to an element other than the trigger. Useful
  * when the element the user interacts with (e.g. a text input) is separate
  * from what the popover attaches to.
+ *
+ * Wrap the anchor element and nest `PopoverTrigger` inside it.
  */
-declare const PopoverAnchor: _$react.ForwardRefExoticComponent<Omit<_$_radix_ui_react_popover0.PopoverAnchorProps & _$react.RefAttributes<HTMLDivElement>, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+declare const PopoverAnchor: {
+  ({
+    children
+  }: PopoverAnchorProps): JSX.Element;
+  displayName: string;
+};
 //#endregion
 //#region src/components/Popover/PopoverArrow.d.ts
 type PopoverArrowProps = {
@@ -4162,13 +4221,25 @@ declare const PopoverArrow: {
 };
 //#endregion
 //#region src/components/Popover/PopoverClose.d.ts
-type PopoverCloseProps = ComponentPropsWithoutRef<typeof Close>;
+type PopoverCloseProps = Omit<ComponentPropsWithoutRef<'button'>, 'render'> & {
+  /**
+   * A React element to merge close behavior onto.
+   * When provided, the close button renders this element instead of a plain `<button>`.
+   */
+  render?: ReactElement;
+};
 /**
  * An element that closes the popover when activated. Defaults to a `<button>`;
- * pass `asChild` to merge the close behavior onto a single child element. For
+ * pass `render` to merge the close behavior onto a single child element. For
  * a pre-styled icon close button, use `PopoverCloseButton`.
  */
-declare const PopoverClose: _$react.ForwardRefExoticComponent<Omit<_$_radix_ui_react_popover0.PopoverCloseProps & _$react.RefAttributes<HTMLButtonElement>, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
+declare const PopoverClose: _$react.ForwardRefExoticComponent<Omit<Omit<_$react.DetailedHTMLProps<_$react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "render"> & {
+  /**
+   * A React element to merge close behavior onto.
+   * When provided, the close button renders this element instead of a plain `<button>`.
+   */
+  render?: ReactElement;
+} & _$react.RefAttributes<HTMLButtonElement>>;
 //#endregion
 //#region src/components/Popover/PopoverCloseButton.d.ts
 type PopoverCloseButtonProps = {
@@ -4186,44 +4257,48 @@ declare const PopoverCloseButton: {
 };
 //#endregion
 //#region src/components/Popover/PopoverContent.d.ts
-type PopoverContentProps = Omit<PopoverContentProps$1, 'asChild'> & {
+type PopoverContentProps = {
   /** Sets the [color scheme](/docs/color-schemes) applied inside the portal. */colorScheme?: ColorSchemeTypes; /** Remove the default surface styling (padding, background, border, etc.). */
   unstyled?: boolean; /** Applied as `max-width` on the popover surface. Pass `"none"` to uncap. */
   maxWidth?: string; /** Applied as `max-height` on the popover surface. Pass `"none"` to uncap. */
-  maxHeight?: string;
+  maxHeight?: string; /** Which side of the trigger to render the popover on. */
+  side?: 'bottom' | 'left' | 'right' | 'top'; /** How to align the popover relative to the specified side. */
+  align?: 'center' | 'end' | 'start'; /** Distance between the anchor and the popup in pixels. */
+  sideOffset?: number; /** Inline styles applied to the popup. */
+  style?: CSSProperties; /** The popover content. */
+  children?: React.ReactNode; /** Role applied to the popup element. */
+  role?: string;
 };
 /**
  * The styled popover surface. Place inside a `PopoverRoot` (typically wrapped
- * in a `PopoverPortal`). Forwards all Radix Content props, including
- * dismissal/focus event handlers such as `onPointerDownOutside`,
- * `onOpenAutoFocus`, and `onCloseAutoFocus`.
+ * in a `PopoverPortal`). Wraps a `Positioner` and `Popup` internally.
  */
-declare const PopoverContent: _$react.ForwardRefExoticComponent<Omit<PopoverContentProps$1, "asChild"> & {
-  /** Sets the [color scheme](/docs/color-schemes) applied inside the portal. */colorScheme?: ColorSchemeTypes; /** Remove the default surface styling (padding, background, border, etc.). */
-  unstyled?: boolean; /** Applied as `max-width` on the popover surface. Pass `"none"` to uncap. */
-  maxWidth?: string; /** Applied as `max-height` on the popover surface. Pass `"none"` to uncap. */
-  maxHeight?: string;
-} & _$react.RefAttributes<HTMLDivElement>>;
+declare const PopoverContent: _$react.ForwardRefExoticComponent<PopoverContentProps & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 //#region src/components/Popover/PopoverPortal.d.ts
-type PopoverPortalProps = ComponentPropsWithoutRef<typeof Portal>;
+type PopoverPortalProps = {
+  children: ReactNode;
+};
 /**
  * Portals the popover content out of the DOM hierarchy of its trigger so it can
  * escape clipping ancestors (`overflow: hidden`, transformed containers, etc.).
  */
 declare const PopoverPortal: {
-  (props: PopoverPortalProps): JSX.Element;
+  ({
+    children
+  }: PopoverPortalProps): JSX.Element;
   displayName: string;
 };
 //#endregion
 //#region src/components/Popover/PopoverRoot.d.ts
-type RadixRootProps = ComponentPropsWithoutRef<typeof Root$2>;
-type PopoverRootProps = Omit<RadixRootProps, 'open'> & {
+type PopoverRootProps = {
   /**
    * Controlled open state. When provided, pair with `onOpenChange` to update it.
-   * Leave unset for uncontrolled behavior (Radix manages state internally).
+   * Leave unset for uncontrolled behavior.
    */
-  isOpen?: boolean;
+  isOpen?: boolean; /** Called when the popover open state changes. */
+  onOpenChange?: (isOpen: boolean) => void; /** The composable popover children (Trigger, Portal, etc.). */
+  children: ReactNode;
 };
 /**
  * The root of a composable popover. Wrap `PopoverTrigger` (or `PopoverAnchor`)
@@ -4234,19 +4309,44 @@ type PopoverRootProps = Omit<RadixRootProps, 'open'> & {
 declare const PopoverRoot: {
   ({
     isOpen,
-    ...props
+    onOpenChange,
+    children
   }: PopoverRootProps): JSX.Element;
   displayName: string;
 };
 //#endregion
 //#region src/components/Popover/PopoverTrigger.d.ts
-type PopoverTriggerProps = ComponentPropsWithoutRef<typeof Trigger$1>;
+type PopoverTriggerProps = Omit<ComponentPropsWithoutRef<'button'>, 'render'> & {
+  /**
+   * A React element to merge trigger behavior onto.
+   * When provided, the trigger renders this element instead of a plain `<button>`.
+   */
+  render?: ReactElement;
+  /**
+   * Whether the trigger should be treated as a native button.
+   * Set to `false` if the rendered element is not a button (e.g. `<div>`).
+   * @default true
+   */
+  nativeButton?: boolean;
+};
 /**
  * The button that toggles the popover open and closed. By default it renders a
- * `<button>` wrapping its children; pass `asChild` to merge the trigger
+ * `<button>` wrapping its children; pass `render` to merge the trigger
  * behavior onto a single child element (e.g. a `Button` or `IconButton`).
  */
-declare const PopoverTrigger: _$react.ForwardRefExoticComponent<Omit<_$_radix_ui_react_popover0.PopoverTriggerProps & _$react.RefAttributes<HTMLButtonElement>, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
+declare const PopoverTrigger: _$react.ForwardRefExoticComponent<Omit<Omit<_$react.DetailedHTMLProps<_$react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "render"> & {
+  /**
+   * A React element to merge trigger behavior onto.
+   * When provided, the trigger renders this element instead of a plain `<button>`.
+   */
+  render?: ReactElement;
+  /**
+   * Whether the trigger should be treated as a native button.
+   * Set to `false` if the rendered element is not a button (e.g. `<div>`).
+   * @default true
+   */
+  nativeButton?: boolean;
+} & _$react.RefAttributes<HTMLButtonElement>>;
 //#endregion
 //#region src/components/ProgressBar/ProgressBar.d.ts
 type ProgressBarProps = ComponentPropsWithoutRef<'div'> & {
@@ -4602,7 +4702,7 @@ declare const ScrollArea: _$react.ForwardRefExoticComponent<HTMLAttributes<HTMLD
 } & _$react.RefAttributes<HTMLDivElement>>;
 //#endregion
 //#region src/components/SegmentedControl/SegmentedControl.d.ts
-type SegmentedControlProps = Omit<ToggleGroupSingleProps, 'type'> & {
+type SegmentedControlProps = {
   /**
    * `SegmentedControlItem`s that will be rendered in grouping
    */
@@ -4631,7 +4731,7 @@ type SegmentedControlProps = Omit<ToggleGroupSingleProps, 'type'> & {
 /**
  * Provides a horizontal set of segments for switching between different values
  */
-declare const SegmentedControl: ForwardRefExoticComponent<RefAttributes<HTMLDivElement> & SegmentedControlProps>;
+declare const SegmentedControl: ForwardRefExoticComponent<RefAttributes<HTMLDivElement> & SegmentedControlProps & HTMLAttributes<HTMLDivElement>>;
 //#endregion
 //#region src/components/SegmentedControl/SegmentedControlItem.d.ts
 type BaseProps$1 = {
@@ -4816,7 +4916,7 @@ type SliderProps = Omit<ComponentPropsWithoutRef<'div'>, 'onChange'> & {
    * (e.g. on mouseup, touchend, or keyup). Useful for analytics or
    * expensive operations where only the final value matters.
    */
-  onValueCommit?: (value: number[]) => void;
+  onValueCommitted?: (value: number[]) => void;
   /**
    * Value to be added or subtracted on each step
    */
@@ -4836,7 +4936,7 @@ declare const Slider: {
     max,
     min,
     onChange,
-    onValueCommit,
+    onValueCommitted,
     step,
     value,
     "data-testid": dataTestId,
@@ -5123,7 +5223,12 @@ declare const TableRow: ({
 }: TableRowProps) => JSX.Element;
 //#endregion
 //#region src/components/Tabs/Tabs.d.ts
-type TabsProps$1 = Pick<TabsProps, 'children' | 'defaultValue' | 'onValueChange' | 'value'>;
+type TabsProps = {
+  children?: React.ReactNode;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  value?: string;
+};
 declare const Tabs: {
   ({
     children,
@@ -5131,22 +5236,27 @@ declare const Tabs: {
     onValueChange: onValueChangeProp,
     defaultValue,
     ...props
-  }: TabsProps$1): JSX.Element;
+  }: TabsProps): JSX.Element;
   displayName: string;
 };
 //#endregion
 //#region src/components/Tabs/TabsContent.d.ts
-type TabsContentProps$1 = Pick<TabsContentProps, 'children' | 'value'>;
+type TabsContentProps = {
+  children?: ReactNode;
+  value: string;
+};
 declare const TabsContent: {
   ({
     children,
     value
-  }: TabsContentProps$1): JSX.Element;
+  }: TabsContentProps): JSX.Element;
   displayName: string;
 };
 //#endregion
 //#region src/components/Tabs/TabsList.d.ts
-type TabsListProps$1 = Pick<TabsListProps, 'aria-label'> & PropsWithChildren<{
+type TabsListProps = {
+  'aria-label'?: string;
+} & PropsWithChildren<{
   fullWidth?: boolean;
 }>;
 declare const TabsList: {
@@ -5154,12 +5264,15 @@ declare const TabsList: {
     children,
     fullWidth,
     ...props
-  }: TabsListProps$1): JSX.Element;
+  }: TabsListProps): JSX.Element;
   displayName: string;
 };
 //#endregion
 //#region src/components/Tabs/TabsTrigger.d.ts
-type BaseProps = Pick<TabsTriggerProps, 'disabled' | 'value'>;
+type BaseProps = {
+  disabled?: boolean;
+  value: string;
+};
 type IconWithLabel = {
   /**
    * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
@@ -5190,8 +5303,8 @@ type NoIcon = {
   label?: ReactNode | string;
   'aria-label'?: never;
 };
-type TabsTriggerProps$1 = BaseProps & (IconWithAriaLabel | IconWithLabel | NoIcon);
-declare const TabsTrigger: _$react.ForwardRefExoticComponent<TabsTriggerProps$1 & _$react.RefAttributes<HTMLButtonElement>>;
+type TabsTriggerProps = BaseProps & (IconWithAriaLabel | IconWithLabel | NoIcon);
+declare const TabsTrigger: _$react.ForwardRefExoticComponent<TabsTriggerProps & _$react.RefAttributes<HTMLButtonElement>>;
 //#endregion
 //#region src/components/Tag/Tag.d.ts
 type TagProps = ComponentPropsWithoutRef<'div'> & {