@wistia/ui 0.6.40 → 0.6.41-beta.c3bbd05d.43de7c7

package/dist/index.d.mts

@@ -8,6 +8,7 @@ import * as react_router from 'react-router';
 import { LinkProps as LinkProps$1 } from 'react-router-dom';
 import { CollapsibleContentProps as CollapsibleContentProps$1 } from '@radix-ui/react-collapsible';
 import * as styled_components from 'styled-components';
+import { FlattenSimpleInterpolation } from 'styled-components';
 import { DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu';
 import { PopoverContentProps } from '@radix-ui/react-popover';
 import { ToggleGroupSingleProps } from '@radix-ui/react-toggle-group';
@@ -552,6 +553,9 @@ type UnknownRecord = Record<string, unknown>;
 type PropsOf<Component extends ElementType> = ComponentPropsWithoutRef<Component>;
 type ExtendedProps<Props = UnknownRecord, OverrideProps = UnknownRecord> = Omit<Props, keyof OverrideProps> & OverrideProps;
 type ComponentProp<Component extends ElementType> = {
+    /**
+     * The component or HTML element to render as the root instead of the default.
+     */
     renderAs?: Component;
 };
 /**
@@ -2316,6 +2320,14 @@ type PopoverProps = ContentProps & PopoverControlProps & {
      * The content of the popover
      */
     children: ReactNode;
+    /**
+     * The maximum width of the popover
+     */
+    maxWidth?: string;
+    /**
+     * The maximum height of the popover
+     */
+    maxHeight?: string;
     /**
      * Determines if the close button is visible (if false, `esc` will still close the Modal)
      */
@@ -2333,7 +2345,7 @@ type PopoverProps = ContentProps & PopoverControlProps & {
  * Displays rich content in a portal, triggered by a button.
  */
 declare const Popover: {
-    ({ children, trigger, isOpen, hideCloseButton, onOpenChange, unstyled, ...props }: PopoverProps): JSX.Element;
+    ({ children, trigger, isOpen, hideCloseButton, maxWidth, maxHeight, onOpenChange, unstyled, ...props }: PopoverProps): JSX.Element;
     displayName: string;
 };
 
@@ -3037,4 +3049,84 @@ declare const WistiaLogo: {
     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, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, 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, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useFocusTrap, useFormState, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, useToast, useWindowSize };
+type ThumbnailBadgeProps = {
+    /**
+     * Icon to display on the left side of the badge
+     */
+    icon?: JSX.Element | undefined;
+    /**
+     * Text content to display in the badge
+     */
+    label: string;
+};
+declare const ThumbnailBadge: {
+    ({ icon, label, ...otherProps }: ThumbnailBadgeProps): JSX.Element;
+    displayName: string;
+};
+
+declare const gradients: {
+    defaultDarkOne: FlattenSimpleInterpolation;
+    defaultDarkTwo: FlattenSimpleInterpolation;
+    defaultLightOne: FlattenSimpleInterpolation;
+    defaultLightTwo: FlattenSimpleInterpolation;
+    defaultMidOne: FlattenSimpleInterpolation;
+    defaultMidTwo: FlattenSimpleInterpolation;
+    green: FlattenSimpleInterpolation;
+    greenWithPop: FlattenSimpleInterpolation;
+    pink: FlattenSimpleInterpolation;
+    pinkWithPop: FlattenSimpleInterpolation;
+    playfulGradientOne: FlattenSimpleInterpolation;
+    playfulGradientTwo: FlattenSimpleInterpolation;
+    purple: FlattenSimpleInterpolation;
+    purpleWithPop: FlattenSimpleInterpolation;
+    yellow: FlattenSimpleInterpolation;
+    yellowWithPop: FlattenSimpleInterpolation;
+};
+type GradientNameType = keyof typeof gradients;
+
+type ThumbnailProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * The type of gradient to show either behind the icon or when there is no thumbnail image
+     */
+    gradientBackground?: GradientNameType;
+    /**
+     * Width of the thumbnail. By default, the thumbnail will grow to fit its container.
+     */
+    width?: string;
+    /**
+     * The desired display of the thumbnail, either wide or square
+     */
+    thumbnailImageType?: 'square' | 'wide' | undefined;
+    /**
+     * The URL of the thumbnail image to display
+     */
+    thumbnailUrl: string | null;
+    /**
+     * Children to render inside the thumbnail; must be a `ThumbnailBadge` component
+     */
+    children?: ReactNode;
+};
+declare const Thumbnail: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * The type of gradient to show either behind the icon or when there is no thumbnail image
+     */
+    gradientBackground?: GradientNameType;
+    /**
+     * Width of the thumbnail. By default, the thumbnail will grow to fit its container.
+     */
+    width?: string;
+    /**
+     * The desired display of the thumbnail, either wide or square
+     */
+    thumbnailImageType?: "square" | "wide" | undefined;
+    /**
+     * The URL of the thumbnail image to display
+     */
+    thumbnailUrl: string | null;
+    /**
+     * Children to render inside the thumbnail; must be a `ThumbnailBadge` component
+     */
+    children?: ReactNode;
+} & react.RefAttributes<HTMLDivElement>>;
+
+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, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, 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, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useFocusTrap, useFormState, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, useToast, useWindowSize };

package/dist/index.d.ts

@@ -8,6 +8,7 @@ import * as react_router from 'react-router';
 import { LinkProps as LinkProps$1 } from 'react-router-dom';
 import { CollapsibleContentProps as CollapsibleContentProps$1 } from '@radix-ui/react-collapsible';
 import * as styled_components from 'styled-components';
+import { FlattenSimpleInterpolation } from 'styled-components';
 import { DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu';
 import { PopoverContentProps } from '@radix-ui/react-popover';
 import { ToggleGroupSingleProps } from '@radix-ui/react-toggle-group';
@@ -552,6 +553,9 @@ type UnknownRecord = Record<string, unknown>;
 type PropsOf<Component extends ElementType> = ComponentPropsWithoutRef<Component>;
 type ExtendedProps<Props = UnknownRecord, OverrideProps = UnknownRecord> = Omit<Props, keyof OverrideProps> & OverrideProps;
 type ComponentProp<Component extends ElementType> = {
+    /**
+     * The component or HTML element to render as the root instead of the default.
+     */
     renderAs?: Component;
 };
 /**
@@ -2316,6 +2320,14 @@ type PopoverProps = ContentProps & PopoverControlProps & {
      * The content of the popover
      */
     children: ReactNode;
+    /**
+     * The maximum width of the popover
+     */
+    maxWidth?: string;
+    /**
+     * The maximum height of the popover
+     */
+    maxHeight?: string;
     /**
      * Determines if the close button is visible (if false, `esc` will still close the Modal)
      */
@@ -2333,7 +2345,7 @@ type PopoverProps = ContentProps & PopoverControlProps & {
  * Displays rich content in a portal, triggered by a button.
  */
 declare const Popover: {
-    ({ children, trigger, isOpen, hideCloseButton, onOpenChange, unstyled, ...props }: PopoverProps): JSX.Element;
+    ({ children, trigger, isOpen, hideCloseButton, maxWidth, maxHeight, onOpenChange, unstyled, ...props }: PopoverProps): JSX.Element;
     displayName: string;
 };
 
@@ -3037,4 +3049,84 @@ declare const WistiaLogo: {
     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, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, 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, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useFocusTrap, useFormState, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, useToast, useWindowSize };
+type ThumbnailBadgeProps = {
+    /**
+     * Icon to display on the left side of the badge
+     */
+    icon?: JSX.Element | undefined;
+    /**
+     * Text content to display in the badge
+     */
+    label: string;
+};
+declare const ThumbnailBadge: {
+    ({ icon, label, ...otherProps }: ThumbnailBadgeProps): JSX.Element;
+    displayName: string;
+};
+
+declare const gradients: {
+    defaultDarkOne: FlattenSimpleInterpolation;
+    defaultDarkTwo: FlattenSimpleInterpolation;
+    defaultLightOne: FlattenSimpleInterpolation;
+    defaultLightTwo: FlattenSimpleInterpolation;
+    defaultMidOne: FlattenSimpleInterpolation;
+    defaultMidTwo: FlattenSimpleInterpolation;
+    green: FlattenSimpleInterpolation;
+    greenWithPop: FlattenSimpleInterpolation;
+    pink: FlattenSimpleInterpolation;
+    pinkWithPop: FlattenSimpleInterpolation;
+    playfulGradientOne: FlattenSimpleInterpolation;
+    playfulGradientTwo: FlattenSimpleInterpolation;
+    purple: FlattenSimpleInterpolation;
+    purpleWithPop: FlattenSimpleInterpolation;
+    yellow: FlattenSimpleInterpolation;
+    yellowWithPop: FlattenSimpleInterpolation;
+};
+type GradientNameType = keyof typeof gradients;
+
+type ThumbnailProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * The type of gradient to show either behind the icon or when there is no thumbnail image
+     */
+    gradientBackground?: GradientNameType;
+    /**
+     * Width of the thumbnail. By default, the thumbnail will grow to fit its container.
+     */
+    width?: string;
+    /**
+     * The desired display of the thumbnail, either wide or square
+     */
+    thumbnailImageType?: 'square' | 'wide' | undefined;
+    /**
+     * The URL of the thumbnail image to display
+     */
+    thumbnailUrl: string | null;
+    /**
+     * Children to render inside the thumbnail; must be a `ThumbnailBadge` component
+     */
+    children?: ReactNode;
+};
+declare const Thumbnail: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * The type of gradient to show either behind the icon or when there is no thumbnail image
+     */
+    gradientBackground?: GradientNameType;
+    /**
+     * Width of the thumbnail. By default, the thumbnail will grow to fit its container.
+     */
+    width?: string;
+    /**
+     * The desired display of the thumbnail, either wide or square
+     */
+    thumbnailImageType?: "square" | "wide" | undefined;
+    /**
+     * The URL of the thumbnail image to display
+     */
+    thumbnailUrl: string | null;
+    /**
+     * Children to render inside the thumbnail; must be a `ThumbnailBadge` component
+     */
+    children?: ReactNode;
+} & react.RefAttributes<HTMLDivElement>>;
+
+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, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, 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, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useFocusTrap, useFormState, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, useToast, useWindowSize };