@wistia/ui 0.8.8 → 0.8.9-beta.8e513df6.87f52b0

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import react__default, { ReactNode, LegacyRef, MutableRefObject, RefCallback, Dispatch, SetStateAction, RefObject, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ElementType, ChangeEvent, ForwardedRef, Ref, SyntheticEvent, InputHTMLAttributes, ForwardRefExoticComponent, RefAttributes, HTMLAttributes } from 'react';
+import react__default, { ReactNode, LegacyRef, MutableRefObject, RefCallback, Dispatch, SetStateAction, RefObject, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ElementType, ChangeEvent, ForwardedRef, Ref, SyntheticEvent, InputHTMLAttributes, ForwardRefExoticComponent, RefAttributes, HTMLAttributes, ReactElement } from 'react';
 export * from 'use-file-picker/types';
 export { useFilePicker, useImperativeFilePicker } from 'use-file-picker';
 export { FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, ImageDimensionsValidator, PersistentFileAmountLimitValidator } from 'use-file-picker/validators';
@@ -202,11 +202,12 @@ type LinkAsButtonProps = BaseProps$2 & ComponentPropsWithRef<'button'> & {
 };
 type LinkProps = LinkAsButtonProps | LinkAsLinkProps;
 /**
- * Links are used for navigation. If no `href` is supplied, a button that is visually styled to apper as a link
- * is used. If used in a react-router context, their [Link](https://reactrouter.com/en/main/components/link). component is used, otherwise a native a tag.
+ * Links are used for navigation. If no `href` is supplied, a button that is visually styled to appear as a link
+ * is rendered. If used in a `react-router` context, their [Link](https://reactrouter.com/en/main/components/link).
+ * component is used, otherwise a native `a` element.
+ *
  * This means in addition to its own props, `Link` can use props from `react-router-dom`'s `Link` component. View their documentation [here](https://reactrouter.com/en/main/components/link).
  * The one prop we ignore from react-router is `to`. We use `href` instead and map it under the hood.
- *
  */
 declare const Link: react.ForwardRefExoticComponent<(Omit<LinkAsLinkProps, "ref"> | Omit<LinkAsButtonProps, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
@@ -758,7 +759,7 @@ declare const Breadcrumbs: {
 type BreadcrumbProps = ButtonAsLinkProps & {
     /**
      * An [Icon](../?path=/docs/components-icon--docs) to show at the beginning of the breadcrumb
-     * */
+     */
     icon?: ButtonAsLinkProps['leftIcon'];
     /**
      * The text of the breadcrumb link
@@ -838,51 +839,51 @@ type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
     width?: string;
     /**
      * @ignore
-     * */
+     */
     alignContent?: BoxProps['alignContent'];
     /**
      * @ignore
-     * */
+     */
     alignItems?: BoxProps['alignItems'];
     /**
      * @ignore
-     * */
+     */
     alignSelf?: BoxProps['alignSelf'];
     /**
      * @ignore
-     * */
+     */
     basis?: BoxProps['basis'];
     /**
      * @ignore
-     * */
+     */
     fill?: BoxProps['fill'];
     /**
      * @ignore
-     * */
+     */
     fillViewport?: BoxProps['fillViewport'];
     /**
      * @ignore
-     * */
+     */
     grow?: BoxProps['grow'];
     /**
      * @ignore
-     * */
+     */
     inline?: BoxProps['inline'];
     /**
      * @ignore
-     * */
+     */
     justifyContent?: BoxProps['justifyContent'];
     /**
      * @ignore
-     * */
+     */
     order?: BoxProps['order'];
     /**
      * @ignore
-     * */
+     */
     shrink?: BoxProps['shrink'];
     /**
      * @ignore
-     * */
+     */
     wrapItems?: BoxProps['wrapItems'];
 };
 /**
@@ -1786,6 +1787,38 @@ declare const Input: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HT
     type?: "email" | "multiline" | "number" | "phone" | "search" | "text" | "url";
 } & react.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
 
+type InputClickToCopyProps = Omit<InputProps, 'autoSelect' | 'disabled' | 'rightIcon' | 'type' | 'value'> & {
+    /**
+     * When disabled, the copy action will not be triggered
+     */
+    disabled?: boolean;
+    /**
+     * Callback function that is called when the value is copied to the clipboard
+     */
+    onCopy?: (value: string) => void;
+    /**
+     * the value of what is copied
+     */
+    value: string;
+};
+/**
+ * Provides a readonly input that copies the text to the clipboard when clicked.
+ */
+declare const InputClickToCopy: react.ForwardRefExoticComponent<Omit<InputProps, "type" | "disabled" | "value" | "rightIcon" | "autoSelect"> & {
+    /**
+     * When disabled, the copy action will not be triggered
+     */
+    disabled?: boolean;
+    /**
+     * Callback function that is called when the value is copied to the clipboard
+     */
+    onCopy?: (value: string) => void;
+    /**
+     * the value of what is copied
+     */
+    value: string;
+} & react.RefAttributes<HTMLInputElement>>;
+
 type LabelProps = ComponentPropsWithoutRef<'label'> & {
     /**
      * Pass an arbitrary child node
@@ -1821,7 +1854,7 @@ type ControlledMenuProps = {
     /**
      * Is the menu open.
      * Must be used with `onOpenChange`.
-     * */
+     */
     isOpen: boolean;
     /** When an attempt to toggle the menu is triggered.
      *  Must be used with `isOpen`.
@@ -1861,7 +1894,7 @@ type MenuProps = MenuControlProps & {
     onInteractOutside?: DropdownMenuContentProps['onInteractOutside'];
     /**
      * Replace the default trigger with a custom button or other element
-     * */
+     */
     trigger?: ReactNode;
     /**
      * Props to pass to the trigger component, the default trigger is Button
@@ -1946,23 +1979,23 @@ type MenuItemButtonProps = ButtonProps & {
     rightIcon?: ButtonProps['rightIcon'];
     /**
      * @ignore
-     * */
+     */
     fullWidth?: never;
     /**
      * @ignore
-     * */
+     */
     asChild?: never;
     /**
      * @ignore
-     * */
+     */
     variant?: never;
     /**
      * @ignore
-     * */
+     */
     size?: never;
     /**
      * @ignore
-     * */
+     */
     unstyled?: never;
 };
 
@@ -2310,7 +2343,7 @@ type ControlledPopoverProps = {
     /**
      * Is the popover open.
      * Must be used with `onOpenChange`.
-     * */
+     */
     isOpen: boolean;
     /** When an attempt to toggle the popover is triggered.
      *  Must be used with `isOpen`.
@@ -2342,7 +2375,7 @@ type PopoverProps = ContentProps & PopoverControlProps & {
     hideCloseButton?: boolean;
     /**
      * An interactive element. Most commonly a [Button](?path=/docs/components-button--docs) or [IconButton]([Button](?path=/docs/components-iconbutton--docs)).
-     * */
+     */
     trigger: JSX.Element;
     /**
      * If true, the popover will use the unstyled Content component instead of StyledContent
@@ -2980,85 +3013,6 @@ declare const Tag: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<
     onClickRemoveLabel?: string | undefined;
 } & react.RefAttributes<HTMLDivElement>>;
 
-type TooltipProps = {
-    /**
-     * The content of the tooltip
-     */
-    content: ReactNode;
-    /**
-     * The button or other interactive element that triggers the tooltip
-     */
-    children: ReactNode;
-    /**
-     * The delay in milliseconds before the tooltip appears
-     */
-    delay?: number;
-    /**
-     * The preferred direction to render the tooltip if no collisions prevent it
-     */
-    direction?: 'bottom' | 'left' | 'right' | 'top';
-    /**
-     * @ignore
-     * Force the tooltip to be open without user interaction (for debugging and CI)
-     */
-    forceOpen?: boolean;
-    /**
-     * Hides the arrow
-     */
-    hideArrow?: boolean;
-};
-/**
- * Tooltips are a way to provide additional information or context to a user when they hover or focus an element.
- * For elements that are not interactive, consider using a [Popover](/docs/ui-docs-popover--docs) instead.
- * TODO - add link to Popover docs when they exist
- */
-declare const Tooltip: {
-    ({ delay, direction, content, children, forceOpen, hideArrow, }: TooltipProps): JSX.Element;
-    displayName: string;
-};
-
-type WistiaLogoProps = Omit<ComponentPropsWithoutRef<'svg'>, 'href'> & {
-    /**
-     * An optional accessible description for the logo
-     */
-    description?: string;
-    /**
-     * Height, in pixels, of the logo
-     */
-    height?: number;
-    /**
-     * @ignore
-     * Change the color when hovering over the logo
-     */
-    hoverColor?: string;
-    /**
-     * Display just the icon portion of the logo (ie. hide `Wistia` text)
-     * note: there is no analogue to this because by brand guidelines, the
-     * `Wistia` text must not be displayed without the "flags" iconography
-     */
-    iconOnly?: boolean;
-    /**
-     * If provided, will wrap the logo in a link
-     */
-    href?: string;
-    /**
-     * An accessible title for the logo (defaults to "Wistia Logo")
-     */
-    title?: string;
-    /**
-     * Style of the logo
-     */
-    variant?: 'dark' | 'light' | 'standard';
-    /**
-     * If true, the logo will be optically centered within its container
-     */
-    opticallyCentered?: boolean;
-};
-declare const WistiaLogo: {
-    ({ description, height, hoverColor, href, iconOnly, opticallyCentered, title, variant, ...props }: WistiaLogoProps): react_jsx_runtime.JSX.Element;
-    displayName: string;
-};
-
 type ThumbnailBadgeProps = {
     /**
      * Icon to display on the left side of the badge
@@ -3139,36 +3093,95 @@ declare const Thumbnail: react.ForwardRefExoticComponent<Omit<react.DetailedHTML
     children?: ReactNode;
 } & react.RefAttributes<HTMLDivElement>>;
 
-type InputClickToCopyProps = Omit<InputProps, 'autoSelect' | 'disabled' | 'rightIcon' | 'type' | 'value'> & {
+type ThumbnailCollageProps = {
     /**
-     * When disabled, the copy action will not be triggered
+     * An array of `Thumbnail` components to show in the collage. Supports up to 3 `Thumbnail`s.
      */
-    disabled?: boolean;
+    children?: ReactElement<ThumbnailProps>[] | undefined;
     /**
-     * Callback function that is called when the value is copied to the clipboard
+     * The type of gradient to show if no `Thumbnail`s are provided
      */
-    onCopy?: (value: string) => void;
+    gradientBackground?: GradientNameType;
+};
+declare const ThumbnailCollage: ({ children, gradientBackground, ...props }: ThumbnailCollageProps) => JSX.Element;
+
+type TooltipProps = {
     /**
-     * the value of what is copied
+     * The content of the tooltip
      */
-    value: string;
+    content: ReactNode;
+    /**
+     * The button or other interactive element that triggers the tooltip
+     */
+    children: ReactNode;
+    /**
+     * The delay in milliseconds before the tooltip appears
+     */
+    delay?: number;
+    /**
+     * The preferred direction to render the tooltip if no collisions prevent it
+     */
+    direction?: 'bottom' | 'left' | 'right' | 'top';
+    /**
+     * @ignore
+     * Force the tooltip to be open without user interaction (for debugging and CI)
+     */
+    forceOpen?: boolean;
+    /**
+     * Hides the arrow
+     */
+    hideArrow?: boolean;
 };
 /**
- * Provides a readonly input that copies the text to the clipboard when clicked.
+ * Tooltips are a way to provide additional information or context to a user when they hover or focus an element.
+ * For elements that are not interactive, consider using a [Popover](/docs/ui-docs-popover--docs) instead.
+ * TODO - add link to Popover docs when they exist
  */
-declare const InputClickToCopy: react.ForwardRefExoticComponent<Omit<InputProps, "type" | "disabled" | "value" | "rightIcon" | "autoSelect"> & {
+declare const Tooltip: {
+    ({ delay, direction, content, children, forceOpen, hideArrow, }: TooltipProps): JSX.Element;
+    displayName: string;
+};
+
+type WistiaLogoProps = Omit<ComponentPropsWithoutRef<'svg'>, 'href'> & {
     /**
-     * When disabled, the copy action will not be triggered
+     * An optional accessible description for the logo
      */
-    disabled?: boolean;
+    description?: string;
     /**
-     * Callback function that is called when the value is copied to the clipboard
+     * Height, in pixels, of the logo
      */
-    onCopy?: (value: string) => void;
+    height?: number;
     /**
-     * the value of what is copied
+     * @ignore
+     * Change the color when hovering over the logo
      */
-    value: string;
-} & react.RefAttributes<HTMLInputElement>>;
+    hoverColor?: string;
+    /**
+     * Display just the icon portion of the logo (ie. hide `Wistia` text)
+     * note: there is no analogue to this because by brand guidelines, the
+     * `Wistia` text must not be displayed without the "flags" iconography
+     */
+    iconOnly?: boolean;
+    /**
+     * If provided, will wrap the logo in a link
+     */
+    href?: string;
+    /**
+     * An accessible title for the logo (defaults to "Wistia Logo")
+     */
+    title?: string;
+    /**
+     * Style of the logo
+     */
+    variant?: 'dark' | 'light' | 'standard';
+    /**
+     * If true, the logo will be optically centered within its container
+     */
+    opticallyCentered?: boolean;
+};
+declare const WistiaLogo: {
+    ({ description, height, hoverColor, href, iconOnly, opticallyCentered, title, variant, ...props }: WistiaLogoProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, type EllipsisProps, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useFocusTrap, useFormState, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, useToast, useWindowSize };
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, type EllipsisProps, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useFocusTrap, useFormState, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, useToast, useWindowSize };