@wistia/ui 0.21.0 → 0.21.1-beta.ec434e13.d5c984b

package/dist/index.d.ts

@@ -8,6 +8,7 @@ import { Color } from 'culori/fn';
 import * as Ariakit from '@ariakit/react';
 import * as styled_components from 'styled-components';
 import { Schema } from 'yup';
+import { HoverCardContentProps } from '@radix-ui/react-hover-card';
 import ReactMarkdown from 'react-markdown';
 import { DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu';
 import { PopoverContentProps } from '@radix-ui/react-popover';
@@ -613,11 +614,11 @@ declare const Avatar: {
 type BadgeVariants = 'default' | 'outline';
 type BadgeProps = ComponentPropsWithoutRef<'div'> & {
     /**
-     * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
+     * Sets the [color scheme](/docs/color-schemes)
      */
     colorScheme?: ColorSchemeTypes;
     /**
-     * Optional `Icon` component to use. Must be an instance of [Icon](../?path=/docs/components-icon--docs)
+     * Optional `Icon` component to use. Must be an instance of [Icon](/docs/components/Icon)
      */
     icon?: JSX.Element | undefined;
     /**
@@ -634,11 +635,11 @@ type BadgeProps = ComponentPropsWithoutRef<'div'> & {
  */
 declare const Badge: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     /**
-     * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
+     * Sets the [color scheme](/docs/color-schemes)
      */
     colorScheme?: ColorSchemeTypes;
     /**
-     * Optional `Icon` component to use. Must be an instance of [Icon](../?path=/docs/components-icon--docs)
+     * Optional `Icon` component to use. Must be an instance of [Icon](/docs/components/Icon)
      */
     icon?: JSX.Element | undefined;
     /**
@@ -749,7 +750,8 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
     /**
      * Specifies how the browser distributes space between and around
      * items along the cross-axis of their container; has no effect on
-     * single line flexible boxes. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
+     * single line flexible boxes. Can be a [responsive prop](/docs/responsive-props).
+     * @type ResponsiveObject<"center" | "flex-end" | "flex-start" | "space-around" | "space-between" | "stretch">
      */
     alignContent?: AlignContentType | ResponsiveObject<AlignContentType>;
     /**
@@ -758,23 +760,28 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
      * to the alignContent prop is that alignItems specifies the
      * alignment of the items within the current container's line,
      * whereas alignContent specifies the alignment of the lines themselves.
-     * Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
+     * Can be a [responsive prop](/docs/responsive-props).
+     * @type ResponsiveObject<"baseline" | "center" | "flex-end" | "flex-start" | "stretch">
      */
     alignItems?: AlignItemsType | ResponsiveObject<AlignItemsType>;
     /**
      * Specifies how the browser aligns items of the current line, overriding the
      * alignItems value of parent; if any of the item's cross-axis margin is set to auto,
-     * then alignSelf is ignored. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
+     * then alignSelf is ignored. Can be a [responsive prop](/docs/responsive-props).
      *
      * *Note: only works for nested `<Box />`*
+     *
+     * @type ResponsiveObject<'auto' | 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch'>
      */
     alignSelf?: AlignSelfType | ResponsiveObject<AlignSelfType>;
     /**
-     * Specifies the initial main size of an item. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
+     * Specifies the initial main size of an item. Can be a [responsive prop](/docs/responsive-props).
      *
      * *Note: Cannot be used with `flexMode` prop.*
      *
      * *Note: only works for nested `<Box />`*
+     * @type ResponsiveObject<'string'>
+  
      */
     basis?: ResponsiveObject<string> | string;
     /**
@@ -782,17 +789,19 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
      */
     children?: ReactNode;
     /**
-     * Specifies the main axis of the container. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
+     * Specifies the main axis of the container. Can be a [responsive prop](/docs/responsive-props).
+     * @type ResponsiveObject<'column-reverse' | 'column' | 'row-reverse' | 'row'>
      */
     direction?: DirectionType | ResponsiveObject<DirectionType>;
     /**
      * Specifies whether the width and/or height should fill the container.
-     * Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
+     * Can be a [responsive prop](/docs/responsive-props).
      *
      * *Note: Cannot be used with height/width props when setting the corresponding dimension.*
      *
      * For example, `fill="vertical"` or `fill={true}` cannot be used with the `height` prop,
      * and `fill="horizontal"` or `fill={true}` cannot be used with the `width` prop.
+     * @type ResponsiveObject<boolean | 'horizontal' | 'vertical'>
      */
     fill?: FillType | ResponsiveObject<FillType>;
     /**
@@ -802,49 +811,58 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
      *
      * For example, `fillViewport="vertical"` or `fillViewport={true}` cannot be used with the `height` prop,
      * and `fillViewport="horizontal"` or `fillViewport={true}` cannot be used with the `width` prop.
+     * @type boolean | 'horizontal' | 'vertical'
      */
     fillViewport?: FillType;
     /**
-     * Predefined `flex` behavior patterns. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
+     * Predefined `flex` behavior patterns. Can be a [responsive prop](/docs/responsive-props).
      *
      * - `grow`: fills available space (`flex: 1 0 0`)
      * - `initial`: default behavior (`flex: 0 1 auto`)
      * - `equal`: equal space distribution (`flex: 1`)
      * - `rigid`: fixed size (`flex: 0 0 auto`)
      * - `fluid`: responsive (`flex: 1 1 auto`)
+     *
+     * @type ResponsiveObject<'equal' | 'fluid' | 'grow' | 'initial' | 'rigid'>
      */
     flexMode?: FlexModeType | ResponsiveObject<FlexModeType>;
     /**
      * Specifies the gaps (gutters) between rows and columns.
-     * Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
+     * Can be a [responsive prop](/docs/responsive-props).
      *
      * Can be either a single spacing value that applies to both row and column gaps,
      * or an object specifying different values for row and column gaps.
+     *
+     * @type ResponsiveObject<Spacings | { row: Spacings; column: Spacings }>
      */
     gap?: Gap$1 | ResponsiveGap$1 | Spacings;
     /**
      * Specifies what amount of space inside the flex container the item should take up.
-     * Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
+     * Can be a [responsive prop](/docs/responsive-props).
      *
      * *Note: Cannot be used with `flexMode` prop.*
      *
      * *Note: only works for nested `<Box />`*
+     * @type ResponsiveObject<number | string>
      */
     grow?: ResponsiveObject<number | string> | number | string;
     /**
-     * Specifies the height of the box. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
+     * Specifies the height of the box. Can be a [responsive prop](/docs/responsive-props).
      *
      * *Note: Cannot be used with fill="vertical" or fillViewport="vertical"*
+     * @type ResponsiveObject<string>
      */
     height?: ResponsiveObject<string> | string;
     /**
      * Make Layout behave like an inline element but still lay out its content according to flexbox model.
-     * Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
+     * Can be a [responsive prop](/docs/responsive-props).
+     * @type ResponsiveObject<boolean>
      */
     inline?: ResponsiveObject<boolean> | boolean;
     /**
      * Specifies how the browser distributes space between and around
-     * items along the main axis of their container. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
+     * items along the main axis of their container. Can be a [responsive prop](/docs/responsive-props).
+     * @type ResponsiveObject<'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'space-evenly'>
      */
     justifyContent?: JustifyContentType | ResponsiveObject<JustifyContentType>;
     /**
@@ -858,22 +876,25 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
     renderAs?: ElementType;
     /**
      * Specifies how items will shrink inside the container when the default size of
-     * items is larger than their container. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
+     * items is larger than their container. Can be a [responsive prop](/docs/responsive-props).
      *
      * *Note: Cannot be used with `flexMode` prop.*
      *
      * *Note: only works for nested `<Box />`*
+     * @type ResponsiveObject<number>
      */
     shrink?: ResponsiveObject<number> | number;
     /**
      * Specifies whether items are forced into a single line or can be wrapped onto multiple lines.
-     * Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
+     * Can be a [responsive prop](/docs/responsive-props).
+     * @type ResponsiveObject<boolean>
      */
     wrapItems?: ResponsiveObject<boolean> | boolean;
     /**
-     * Specifies the width of the box. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
+     * Specifies the width of the box. Can be a [responsive prop](/docs/responsive-props).
      *
      * *Note: Cannot be used with fill="horizontal" or fillViewport="horizontal"*
+     * @type ResponsiveObject<string>
      */
     width?: ResponsiveObject<string> | string;
 };
@@ -2620,6 +2641,51 @@ type GridProps = ComponentPropsWithoutRef<'div'> & {
 };
 declare const Grid: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, GridProps>) => react.ReactElement | null) & UnknownRecord;
 
+type ContentProps$1 = Omit<HoverCardContentProps, 'alignOffset' | 'arrowPadding' | 'asChild' | 'collisionPadding' | 'hideWhenDetached' | 'sideOffset'>;
+type PreviewCardProps = ContentProps$1 & {
+    /**
+     * The content of the preview card
+     */
+    children: ReactNode;
+    /**
+     * The maximum width of the preview card
+     */
+    maxWidth?: string;
+    /**
+     * The maximum height of the preview card
+     */
+    maxHeight?: string;
+    /**
+     * 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;
+    /**
+     * If true, the preview card will use the unstyled Content component instead of StyledContent
+     */
+    unstyled?: boolean;
+    /**
+     * Specifies the internal padding of the preview card. Uses the design system's spacing scale.
+     */
+    paddingSize?: Spacings;
+    /**
+     * Duration in ms from when the mouse enters the trigger until the preview card opens
+     */
+    openDelay?: number;
+    /**
+     * Duration in ms from when the mouse leaves the trigger until the preview card closes
+     */
+    closeDelay?: number;
+    colorScheme?: ColorSchemeTypes;
+};
+/**
+ * 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.
+ */
+declare const PreviewCard: {
+    ({ children, trigger, maxWidth, maxHeight, unstyled, paddingSize, openDelay, closeDelay, colorScheme, ...props }: PreviewCardProps): JSX.Element;
+    displayName: string;
+};
+
 type IconButtonProps = {
     /**
      * Accessible text for screen readers.
@@ -4567,4 +4633,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Banner, type BannerProps, 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, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, type ColorGridOptionProps, type ColorGridProps, ColorList, ColorListGroup, type ColorListGroupProps, ColorListOption, type ColorListOptionProps, type ColorListProps, ColorPicker, ColorPickerPopoverContent, type ColorPickerPopoverContentProps, type ColorPickerProps, ColorPickerSection, type ColorPickerSectionProps, ColorPickerTrigger, type ColorPickerTriggerProps, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Combobox, ComboboxOption, type ComboboxOptionProps, type ComboboxProps, ContextMenu, type ContextMenuProps, ContrastControls, CustomizableThemeWrapper, type CustomizableThemeWrapperProps, DataCard, DataCardHoverArrow, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, DataList, DataListItem, DataListItemLabel, DataListItemValue, type DataListProps, Divider, EditableHeading, type EditableHeadingProps, EditableText, EditableTextCancelButton, EditableTextContext, EditableTextDisplay, EditableTextInput, EditableTextLabel, type EditableTextProps, EditableTextRoot, type EditableTextRootProps, EditableTextSubmitButton, EditableTextTrigger, Ellipsis, type EllipsisProps, FeatureCard, FeatureCardImage, type FeatureCardProps, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Grid, type GridProps, Heading, type HeadingProps, HexColorInput, type HexColorInputProps, HueSlider, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, InputPassword, type InputPasswordProps, type InputProps, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Mark, type MarkProps, Markdown, type MarkdownProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Meter, type MeterProps, type MeterSegment, Modal, ModalCallout, ModalCallouts, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioCard, RadioCardImage, type RadioCardImageProps, type RadioCardProps, RadioGroup, RadioMenuItem, type RadioProps, SaturationAndValuePicker, ScreenReaderOnly, ScrollArea, type ScrollAreaProps, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Slider, type SliderProps, SplitButton, type SplitButtonProps, Stack, SubMenu, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseActiveMqReturnType, type UseIsHoveredReturnType, type UseMqReturnType, type UseToastProps, ValueNameOrHexCode, ValueSwatch, WistiaLogo, calculateContrast, coerceToBoolean, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useKeyPress, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize, validateWithYup };
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Banner, type BannerProps, 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, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, type ColorGridOptionProps, type ColorGridProps, ColorList, ColorListGroup, type ColorListGroupProps, ColorListOption, type ColorListOptionProps, type ColorListProps, ColorPicker, ColorPickerPopoverContent, type ColorPickerPopoverContentProps, type ColorPickerProps, ColorPickerSection, type ColorPickerSectionProps, ColorPickerTrigger, type ColorPickerTriggerProps, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Combobox, ComboboxOption, type ComboboxOptionProps, type ComboboxProps, ContextMenu, type ContextMenuProps, ContrastControls, CustomizableThemeWrapper, type CustomizableThemeWrapperProps, DataCard, DataCardHoverArrow, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, DataList, DataListItem, DataListItemLabel, DataListItemValue, type DataListProps, Divider, EditableHeading, type EditableHeadingProps, EditableText, EditableTextCancelButton, EditableTextContext, EditableTextDisplay, EditableTextInput, EditableTextLabel, type EditableTextProps, EditableTextRoot, type EditableTextRootProps, EditableTextSubmitButton, EditableTextTrigger, Ellipsis, type EllipsisProps, FeatureCard, FeatureCardImage, type FeatureCardProps, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Grid, type GridProps, Heading, type HeadingProps, HexColorInput, type HexColorInputProps, HueSlider, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, InputPassword, type InputPasswordProps, type InputProps, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Mark, type MarkProps, Markdown, type MarkdownProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Meter, type MeterProps, type MeterSegment, Modal, ModalCallout, ModalCallouts, type ModalProps, Popover, type PopoverProps, PreviewCard, type PreviewCardProps, ProgressBar, type ProgressBarProps, Radio, RadioCard, RadioCardImage, type RadioCardImageProps, type RadioCardProps, RadioGroup, RadioMenuItem, type RadioProps, SaturationAndValuePicker, ScreenReaderOnly, ScrollArea, type ScrollAreaProps, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Slider, type SliderProps, SplitButton, type SplitButtonProps, Stack, SubMenu, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, TabsList, TabsTrigger, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseActiveMqReturnType, type UseIsHoveredReturnType, type UseMqReturnType, type UseToastProps, ValueNameOrHexCode, ValueSwatch, WistiaLogo, calculateContrast, coerceToBoolean, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useKeyPress, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize, validateWithYup };