@wistia/ui 0.5.3 → 0.5.4-beta.31b8aad1.95d4301

package/dist/index.d.mts

@@ -134,7 +134,7 @@ declare const ColorSchemeWrapper: {
 type ButtonVariants = 'ghost' | 'outline' | 'soft' | 'solid';
 
 type LinkTypes = 'default' | 'email' | 'external' | 'phone';
-type BaseProps$1 = {
+type BaseProps$2 = {
     /**
      * A Promise to invoke before navigating to location.
      * _Caution: if used with `external` type prop a new window will **not** be opened_
@@ -175,11 +175,11 @@ type BaseProps$1 = {
      */
     underline?: boolean;
 };
-type LinkAsLinkProps = BaseProps$1 & ComponentPropsWithRef<'a'> & Omit<LinkProps$1, 'to'> & {
+type LinkAsLinkProps = BaseProps$2 & ComponentPropsWithRef<'a'> & Omit<LinkProps$1, 'to'> & {
     href: string | undefined;
     type?: LinkTypes;
 };
-type LinkAsButtonProps = BaseProps$1 & ComponentPropsWithRef<'button'> & {
+type LinkAsButtonProps = BaseProps$2 & ComponentPropsWithRef<'button'> & {
     href?: never;
     type?: 'button' | 'reset' | 'submit';
 };
@@ -763,6 +763,78 @@ type CheckboxProps = Omit<ComponentPropsWithRef<'label'>, 'onChange'> & {
 };
 declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
+type DataCardProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Label text displayed above the value
+     */
+    label: ReactNode;
+    /**
+     * Main value to display in the card
+     */
+    value: ReactNode;
+    /**
+     * Optional content to display in the top-right corner
+     */
+    upperRightSlot?: ReactNode;
+    /**
+     * Sets the color scheme of the card
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * Controls the loading state of the card
+     */
+    isLoading?: boolean;
+    /**
+     * Optional trend arrow to display below the value. Use the `DataCardTrend` component to create this.
+     */
+    trend?: JSX.Element;
+};
+/**
+ * A single DataCard for use in the DataCards component
+ */
+declare const DataCard: {
+    ({ label, value, upperRightSlot, colorScheme, isLoading, trend, ...props }: DataCardProps): JSX.Element;
+    displayName: string;
+};
+
+type DataCardsProps = ComponentPropsWithoutRef<'dl'> & {
+    /**
+     * Should be at least one `DataCard` component
+     */
+    children: ReactNode;
+    /**
+     * String to pass to the `max-width` property of its children. [View the syntax on MDN →](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#syntax)
+     */
+    cardMaxWidth?: string;
+    /**
+     * Sets the color scheme of the cards, can be overriden at the card level
+     */
+    colorScheme?: ColorSchemeTypes;
+};
+/**
+ * Displays a series of cards tailor made for displaying analytics data
+ */
+declare const DataCards: {
+    ({ children, cardMaxWidth, colorScheme, ...props }: DataCardsProps): JSX.Element;
+    displayName: string;
+};
+
+type DataCardTrendProps = {
+    /**
+     * Direction of the trend arrow
+     */
+    direction?: 'down' | 'up';
+    /**
+     * Outlook of the trend arrow
+     */
+    outlook?: 'negative' | 'positive';
+    /**
+     * Content to display next to the trend arrow
+     */
+    children: JSX.Element | string;
+};
+declare const DataCardTrend: ({ direction, outlook, children, ...props }: DataCardTrendProps) => JSX.Element;
+
 type DividerProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Orientation of the divider.
@@ -777,6 +849,49 @@ declare const Divider: {
     displayName: string;
 };
 
+type EditableHeadingProps = {
+    /**
+     * The initial text content of the heading.
+     * This will be displayed and used as the starting value when editing begins.
+     */
+    children: string;
+    /**
+     * Callback fired when editing is completed (on blur or Enter key). Does not fire if the value is empty or the same as the previous value.
+     * @param value The new text content after editing
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Callback fired when the editing state changes.
+     * @param isEditing True when entering edit mode, false when exiting
+     */
+    onEditingChange?: (isEditing: boolean) => void;
+    /**
+     * Custom tooltip text shown when hovering over the heading.
+     */
+    tooltipText?: string;
+    /**
+     * Sets an aria-label for the input and label for the screen reader only button.
+     */
+    ariaLabel?: string;
+    /**
+     * Force editing state for testing purposes
+     *
+     */
+    forceEditing?: boolean;
+    /**
+     * When true, prevents the heading from entering edit mode
+     * @default false
+     */
+    editingDisabled?: boolean;
+};
+/**
+ * A special heading component that allows for inline editing. When clicked or activated via keyboard,
+ * it transforms into an editable text field. In its default state, it renders as a heading with
+ * an accessible button that enables editing mode. The component handles empty values, keyboard
+ * navigation (Enter to save, Escape to cancel), and provides callbacks for value and state changes.
+ */
+declare const EditableHeading: ({ children, onValueChange, onEditingChange, tooltipText, ariaLabel, forceEditing, editingDisabled, }: EditableHeadingProps) => JSX.Element;
+
 declare const ellipsisStyle: styled_components.FlattenSimpleInterpolation;
 declare const ellipsisFlexParentStyle: styled_components.FlattenSimpleInterpolation;
 type EllipsisProps = ComponentPropsWithoutRef<'div'> & {
@@ -1584,7 +1699,7 @@ type TextProps = ComponentPropsWithoutRef<'div'> & {
 /**
  * Used for rending paragraphs and inline text.
  */
-declare const Text: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, TextProps>) => react.ReactElement | null) & UnknownRecord;
+declare const Text: (<C extends ElementType = "p">(props: PolymorphicComponentProps<C, TextProps>) => react.ReactElement | null) & UnknownRecord;
 
 type MenuItemLabelProps = {
     /**
@@ -1881,7 +1996,7 @@ type SegmentedControlProps = Omit<ToggleGroupSingleProps, 'type'> & {
      */
     fullWidth?: boolean | undefined;
     /**
-     * Callback function invoked when the value changes
+     * Callback function invoked when the `SegmentedControlItem` value changes
      */
     onSelectedValueChange: (value: string) => void;
     /**
@@ -1894,7 +2009,7 @@ type SegmentedControlProps = Omit<ToggleGroupSingleProps, 'type'> & {
  */
 declare const SegmentedControl: ForwardRefExoticComponent<RefAttributes<HTMLDivElement> & SegmentedControlProps>;
 
-type BaseProps = {
+type BaseProps$1 = {
     /**
      * Disable the `SegmentedControlItem`
      */
@@ -1904,7 +2019,7 @@ type BaseProps = {
      */
     value: string;
 };
-type IconWithLabel = {
+type IconWithLabel$1 = {
     /**
      * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
@@ -1915,7 +2030,7 @@ type IconWithLabel = {
     label?: ReactNode | string | undefined;
     'aria-label'?: never;
 };
-type IconWithAriaLabel = {
+type IconWithAriaLabel$1 = {
     /**
      * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
      */
@@ -1926,7 +2041,7 @@ type IconWithAriaLabel = {
     'aria-label'?: string | undefined;
     label?: never;
 };
-type NoIcon = {
+type NoIcon$1 = {
     icon?: undefined;
     /**
      * The label of the item
@@ -1934,9 +2049,80 @@ type NoIcon = {
     label?: ReactNode | string | undefined;
     'aria-label'?: never;
 };
-type SegmentedControlItemProps = BaseProps & (IconWithAriaLabel | IconWithLabel | NoIcon);
+type SegmentedControlItemProps = BaseProps$1 & (IconWithAriaLabel$1 | IconWithLabel$1 | NoIcon$1);
 declare const SegmentedControlItem: react.ForwardRefExoticComponent<SegmentedControlItemProps & react.RefAttributes<HTMLButtonElement>>;
 
+type SelectProps = {
+    /**
+     * Sets the validity status of the input
+     *
+     * @default false
+     */
+    'aria-invalid'?: boolean;
+    /**
+     * A group of `Option` or `OptionGroup`s
+     */
+    children: ReactNode;
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * When true, the select can't be interacted with.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If true, the select will fill its container
+     */
+    fullWidth?: ResponsiveObject<boolean> | boolean;
+    /**
+     * Called when a value is changed.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Text shown when no value is selected
+     */
+    placeholder?: string;
+    /**
+     * The controlled value. Must be used in conjunction with `onChange`.
+     */
+    value?: string;
+};
+/**
+ * Display a list of options and choose one of them. Replacement for the native Select HTML element.
+ */
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
+
+type SelectOptionProps = {
+    /**
+     * The visual content of the select
+     */
+    children: ReactNode;
+    /**
+     * The value to set
+     */
+    value: string;
+    /**
+     * When true, this option will not be selectable
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Optional text used for typeahead purposes. By default the typeahead behavior will use the `.textContent` of the Option.
+     * Use this when the content is complex, or you have non-textual content inside.
+     */
+    textValue?: string;
+};
+declare const SelectOption: react.ForwardRefExoticComponent<SelectOptionProps & react.RefAttributes<HTMLDivElement>>;
+
+type SelectOptionGroupProps = {
+    /** The label of the group */
+    label: string;
+    /** At least one `Option` */
+    children: ReactNode;
+};
+declare const SelectOptionGroup: ({ children, label, ...props }: SelectOptionGroupProps) => react_jsx_runtime.JSX.Element;
+
 type StackProps = {
     /**
      * Optional children
@@ -1960,6 +2146,97 @@ type StackProps = {
  */
 declare const Stack: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, StackProps>) => react.ReactElement | null) & UnknownRecord;
 
+type BaseTabsProps = {
+    /**
+     * Accesible label to describe the `TabList`
+     */
+    'aria-label': string;
+    /**
+     * `Tab` components that will be rendered
+     */
+    children: ReactNode;
+    /**
+     * When true, the tabs will span the full width of the container.
+     */
+    fullWidth?: boolean;
+};
+type ControlledTabsProps = BaseTabsProps & {
+    /**
+     * The value of the `Tab` which should be selected; used for controlled mode
+     */
+    selectedValue: string;
+    /**
+     * Callback invoked when the selected `Tab` value changes; used for controlled mode
+     */
+    onSelectedValueChange: (value: string) => void;
+    /**
+     * This prop should not be provided in controlled mode.
+     */
+    defaultSelectedValue?: never;
+};
+type UncontrolledTabsProps = BaseTabsProps & {
+    /**
+     * The `Tab` that will be initially selected; used for uncontrolled mode
+     */
+    defaultSelectedValue: string;
+    /**
+     * These props should not be provided in uncontrolled mode.
+     */
+    selectedValue?: never;
+    onSelectedValueChange?: never;
+};
+type TabsProps = ControlledTabsProps | UncontrolledTabsProps;
+declare const Tabs: react.ForwardRefExoticComponent<TabsProps & react.RefAttributes<HTMLDivElement>>;
+
+type BaseProps = {
+    /**
+     * Disable the `SegmentedControlItem`
+     */
+    disabled?: boolean;
+    /**
+     * The value of the item
+     */
+    value: string;
+};
+type IconWithLabel = {
+    /**
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
+     */
+    icon?: JSX.Element;
+    /**
+     * The label of the item
+     */
+    label?: ReactNode | string;
+    'aria-label'?: never;
+};
+type IconWithAriaLabel = {
+    /**
+     * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
+     */
+    icon?: JSX.Element;
+    /**
+     * Use this when displaying an icon without a label
+     */
+    'aria-label'?: string;
+    label?: never;
+};
+type NoIcon = {
+    icon?: undefined;
+    /**
+     * The label of the item
+     */
+    label?: ReactNode | string;
+    'aria-label'?: never;
+};
+type TabItemProps = BaseProps & (IconWithAriaLabel | IconWithLabel | NoIcon);
+
+type TabProps = Omit<TabItemProps, 'children'> & {
+    children?: ReactNode;
+};
+declare const Tab: react.ForwardRefExoticComponent<Omit<TabItemProps, "children"> & {
+    children?: ReactNode;
+} & react.RefAttributes<HTMLDivElement>>;
+
 type TagProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
@@ -2087,190 +2364,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-type SelectProps = {
-    /**
-     * Sets the validity status of the input
-     *
-     * @default false
-     */
-    'aria-invalid'?: boolean;
-    /**
-     * A group of `Option` or `OptionGroup`s
-     */
-    children: ReactNode;
-    colorScheme?: ColorSchemeTypes;
-    /**
-     * When true, the select can't be interacted with.
-     *
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * If true, the select will fill its container
-     */
-    fullWidth?: ResponsiveObject<boolean> | boolean;
-    /**
-     * Called when a value is changed.
-     */
-    onChange?: (value: string) => void;
-    /**
-     * Text shown when no value is selected
-     */
-    placeholder?: string;
-    /**
-     * The controlled value. Must be used in conjunction with `onChange`.
-     */
-    value?: string;
-};
-/**
- * Display a list of options and choose one of them. Replacement for the native Select HTML element.
- */
-declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
-
-type SelectOptionProps = {
-    /**
-     * The visual content of the select
-     */
-    children: ReactNode;
-    /**
-     * The value to set
-     */
-    value: string;
-    /**
-     * When true, this option will not be selectable
-     *
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Optional text used for typeahead purposes. By default the typeahead behavior will use the `.textContent` of the Option.
-     * Use this when the content is complex, or you have non-textual content inside.
-     */
-    textValue?: string;
-};
-declare const SelectOption: react.ForwardRefExoticComponent<SelectOptionProps & react.RefAttributes<HTMLDivElement>>;
-
-type SelectOptionGroupProps = {
-    /** The label of the group */
-    label: string;
-    /** At least one `Option` */
-    children: ReactNode;
-};
-declare const SelectOptionGroup: ({ children, label, ...props }: SelectOptionGroupProps) => react_jsx_runtime.JSX.Element;
-
-type DataCardProps = ComponentPropsWithoutRef<'div'> & {
-    /**
-     * Label text displayed above the value
-     */
-    label: ReactNode;
-    /**
-     * Main value to display in the card
-     */
-    value: ReactNode;
-    /**
-     * Optional content to display in the top-right corner
-     */
-    upperRightSlot?: ReactNode;
-    /**
-     * Sets the color scheme of the card
-     */
-    colorScheme?: ColorSchemeTypes;
-    /**
-     * Controls the loading state of the card
-     */
-    isLoading?: boolean;
-    /**
-     * Optional trend arrow to display below the value. Use the `DataCardTrend` component to create this.
-     */
-    trend?: JSX.Element;
-};
-/**
- * A single DataCard for use in the DataCards component
- */
-declare const DataCard: {
-    ({ label, value, upperRightSlot, colorScheme, isLoading, trend, ...props }: DataCardProps): JSX.Element;
-    displayName: string;
-};
-
-type DataCardsProps = ComponentPropsWithoutRef<'dl'> & {
-    /**
-     * Should be at least one `DataCard` component
-     */
-    children: ReactNode;
-    /**
-     * String to pass to the `max-width` property of its children. [View the syntax on MDN →](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#syntax)
-     */
-    cardMaxWidth?: string;
-    /**
-     * Sets the color scheme of the cards, can be overriden at the card level
-     */
-    colorScheme?: ColorSchemeTypes;
-};
-/**
- * Displays a series of cards tailor made for displaying analytics data
- */
-declare const DataCards: {
-    ({ children, cardMaxWidth, colorScheme, ...props }: DataCardsProps): JSX.Element;
-    displayName: string;
-};
-
-type DataCardTrendProps = {
-    /**
-     * Direction of the trend arrow
-     */
-    direction?: 'down' | 'up';
-    /**
-     * Outlook of the trend arrow
-     */
-    outlook?: 'negative' | 'positive';
-    /**
-     * Content to display next to the trend arrow
-     */
-    children: JSX.Element | string;
-};
-declare const DataCardTrend: ({ direction, outlook, children, ...props }: DataCardTrendProps) => JSX.Element;
-
-type EditableHeadingProps = {
-    /**
-     * The initial text content of the heading.
-     * This will be displayed and used as the starting value when editing begins.
-     */
-    children: string;
-    /**
-     * Callback fired when editing is completed (on blur or Enter key). Does not fire if the value is empty or the same as the previous value.
-     * @param value The new text content after editing
-     */
-    onValueChange?: (value: string) => void;
-    /**
-     * Callback fired when the editing state changes.
-     * @param isEditing True when entering edit mode, false when exiting
-     */
-    onEditingChange?: (isEditing: boolean) => void;
-    /**
-     * Custom tooltip text shown when hovering over the heading.
-     */
-    tooltipText?: string;
-    /**
-     * Sets an aria-label for the input and label for the screen reader only button.
-     */
-    ariaLabel?: string;
-    /**
-     * Force editing state for testing purposes
-     *
-     */
-    forceEditing?: boolean;
-    /**
-     * When true, prevents the heading from entering edit mode
-     * @default false
-     */
-    editingDisabled?: boolean;
-};
-/**
- * A special heading component that allows for inline editing. When clicked or activated via keyboard,
- * it transforms into an editable text field. In its default state, it renders as a heading with
- * an accessible button that enables editing mode. The component handles empty values, keyboard
- * navigation (Enter to save, Escape to cancel), and provides callbacks for value and state changes.
- */
-declare const EditableHeading: ({ children, onValueChange, onEditingChange, tooltipText, ariaLabel, forceEditing, editingDisabled, }: EditableHeadingProps) => JSX.Element;
-
-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, Checkbox, CheckboxGroup, CheckboxMenuItem, 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, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, 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, Checkbox, CheckboxGroup, CheckboxMenuItem, 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, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Tab, type TabProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useBoolean, useFormState, useKey, useMq, useToast, useWindowSize };