@wistia/ui 0.20.16 → 0.20.17

package/dist/index.d.ts

@@ -1729,6 +1729,20 @@ type ContextMenuProps = {
  */
 declare const ContextMenu: ({ position, triggerRef, children, side, onRequestClose, compact, }: ContextMenuProps) => react_jsx_runtime.JSX.Element | null;
 
+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';
+type CustomizableThemeWrapperProps = ComponentPropsWithoutRef<'div'> & {
+    children: ReactNode;
+    overrides: Partial<Record<CustomizableTokens, number | string>>;
+};
+/**
+ * Used for overriding the default theme tokens with custom values.
+ * This should only be used when the ui systems team has been consulted first.
+ */
+declare const CustomizableThemeWrapper: {
+    ({ children, overrides, ...props }: CustomizableThemeWrapperProps): JSX.Element;
+    displayName: string;
+};
+
 type DataCardProps = ComponentPropsWithoutRef<'div'> & Partial<Pick<ButtonAsLinkProps, 'beforeAction' | 'disabled' | 'href' | 'onClick' | 'type'>> & {
     /**
      * Label text displayed above the value
@@ -3160,6 +3174,58 @@ declare const FilterMenuItem: {
 };
 declare const FilterMenu: react.ForwardRefExoticComponent<FilterMenuProps & react.RefAttributes<HTMLButtonElement>>;
 
+type MeterSegment = {
+    /**
+     * The percentage value this segment represents (0-100)
+     */
+    value: number;
+    /**
+     * The color for this segment using design token names (e.g., 'blue-9', 'green-9', 'red-9')
+     */
+    color: string;
+    /**
+     * Optional label for this segment shown in the key. Can be a string or React node for rich formatting.
+     */
+    label?: ReactNode;
+};
+type MeterProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Array of segments to display in the meter
+     */
+    segments: MeterSegment[];
+    /**
+     * Optional label displayed above the meter bar
+     */
+    label?: ReactNode;
+    /**
+     * Optional meta information displayed to the right of the label (e.g., "45 / 50", "100 / 200GB")
+     */
+    labelMeta?: ReactNode;
+    /**
+     * Optional description displayed underneath the meter bar
+     */
+    description?: ReactNode;
+    /**
+     * Whether to hide the key below the meter bar with segment labels and colors
+     */
+    hideKey?: boolean;
+    /**
+     * Optional accessible description for screen readers. If not provided, one will be generated from the segments.
+     */
+    'aria-label'?: string;
+    /**
+     * The maximum value that the meter represents (defaults to 100)
+     */
+    max?: number;
+};
+/**
+ * A meter component that visually represents one to many segments as portions of a whole
+ */
+declare const Meter: {
+    ({ segments, label, labelMeta, description, hideKey, max, "aria-label": ariaLabel, ...props }: MeterProps): JSX.Element;
+    displayName: string;
+};
+
 type ModalProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * The content of the modal.
@@ -3873,6 +3939,50 @@ declare const Slider: {
     displayName: string;
 };
 
+type SplitButtonProps = {
+    /**
+     * The text for the primary button
+     */
+    children?: ButtonProps['children'];
+    colorScheme?: ButtonProps['colorScheme'];
+    /**
+     * The icon to use for the menu toggle, defaults to a down caret
+     * @default <Icon type="caret-down" />
+     */
+    menuIcon?: JSX.Element;
+    /**
+     * The menu items to render within the menu. If the secondary behavior of `SplitButton` should be a button, rather than a menu, omit `menuItems` and use `secondaryAction` instead.
+     */
+    menuItems?: ReactNode;
+    /**
+     * The label to use for the menu, only for screenreaders
+     */
+    menuLabel?: string;
+    /**
+     * If using `menuItems`, any additional props to pass to the `Menu` component
+     */
+    menuProps?: Omit<ComponentProps<typeof Menu>, 'children' | 'disabled' | 'trigger'>;
+    /**
+     * Secondary action should not be used when menuItems is set
+     */
+    secondaryAction?: JSX.Element;
+    /**
+     * The size of button to display. Can be used as a [responsive prop](/docs/ui-docs-responsive-props--docs)
+     */
+    size?: ButtonSizes | ResponsiveObject<ButtonSizes>;
+    /**
+     * A visual style for the button
+     */
+    variant?: ButtonVariants;
+} & (ButtonAsButtonProps | ButtonAsLinkProps);
+/**
+ * A SplitButton is an extension of [Button]() that adds a menu to the right hand side of the button.
+ */
+declare const SplitButton: {
+    ({ children, menuLabel, menuIcon, menuItems, disabled, colorScheme, variant, secondaryAction, size, unstyled, menuProps, ...props }: SplitButtonProps): JSX.Element;
+    displayName: string;
+};
+
 type StackProps = {
     /**
      * Optional children
@@ -4405,62 +4515,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-type SplitButtonProps = {
-    /**
-     * The text for the primary button
-     */
-    children?: ButtonProps['children'];
-    colorScheme?: ButtonProps['colorScheme'];
-    /**
-     * The icon to use for the menu toggle, defaults to a down caret
-     * @default <Icon type="caret-down" />
-     */
-    menuIcon?: JSX.Element;
-    /**
-     * The menu items to render within the menu. If the secondary behavior of `SplitButton` should be a button, rather than a menu, omit `menuItems` and use `secondaryAction` instead.
-     */
-    menuItems?: ReactNode;
-    /**
-     * The label to use for the menu, only for screenreaders
-     */
-    menuLabel?: string;
-    /**
-     * If using `menuItems`, any additional props to pass to the `Menu` component
-     */
-    menuProps?: Omit<ComponentProps<typeof Menu>, 'children' | 'disabled' | 'trigger'>;
-    /**
-     * Secondary action should not be used when menuItems is set
-     */
-    secondaryAction?: JSX.Element;
-    /**
-     * The size of button to display. Can be used as a [responsive prop](/docs/ui-docs-responsive-props--docs)
-     */
-    size?: ButtonSizes | ResponsiveObject<ButtonSizes>;
-    /**
-     * A visual style for the button
-     */
-    variant?: ButtonVariants;
-} & (ButtonAsButtonProps | ButtonAsLinkProps);
-/**
- * A SplitButton is an extension of [Button]() that adds a menu to the right hand side of the button.
- */
-declare const SplitButton: {
-    ({ children, menuLabel, menuIcon, menuItems, disabled, colorScheme, variant, secondaryAction, size, unstyled, menuProps, ...props }: SplitButtonProps): JSX.Element;
-    displayName: string;
-};
-
-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';
-type CustomizableThemeWrapperProps = ComponentPropsWithoutRef<'div'> & {
-    children: ReactNode;
-    overrides: Partial<Record<CustomizableTokens, number | string>>;
-};
-/**
- * Used for overriding the default theme tokens with custom values.
- * This should only be used when the ui systems team has been consulted first.
- */
-declare const CustomizableThemeWrapper: {
-    ({ children, overrides, ...props }: CustomizableThemeWrapperProps): JSX.Element;
-    displayName: string;
-};
-
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Banner, BannerImage, 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, 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, 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, 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, BannerImage, 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, 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, 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 };