@wistia/ui 0.9.5 → 0.9.6-beta.0bdb4e44.c8b94c3

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, ReactElement } 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, PropsWithChildren, 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';
@@ -12,6 +12,7 @@ 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';
+import { TabsProps as TabsProps$1, TabsContentProps as TabsContentProps$1, TabsListProps as TabsListProps$1, TabsTriggerProps as TabsTriggerProps$1 } from '@radix-ui/react-tabs';
 
 type UIProviderProps = {
     children: ReactNode;
@@ -1360,7 +1361,7 @@ type RadioGroupProps = FormGroupProps & {
     name?: string | undefined;
 };
 /**
- * For grouping like form elements togtether. Can serve as a checkbox
+ * For grouping like form elements together. Can serve as a checkbox
  */
 declare const RadioGroup: {
     ({ children, name, onChange, value, ...props }: RadioGroupProps): JSX.Element;
@@ -1373,7 +1374,7 @@ type CheckboxGroupProps = FormGroupProps & {
     name?: string | undefined;
 };
 /**
- * For grouping like form elements togtether. Can serve as a checkbox
+ * For grouping like form elements together. Can serve as a checkbox
  */
 declare const CheckboxGroup: {
     ({ children, name, onChange, value, ...props }: CheckboxGroupProps): JSX.Element;
@@ -2949,62 +2950,27 @@ type TableRowProps = HTMLAttributes<HTMLTableRowElement> & {
 };
 declare const TableRow: ({ children, ...props }: TableRowProps) => JSX.Element;
 
-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.
-     */
+type TabsProps = Pick<TabsProps$1, 'children' | 'defaultValue' | 'onValueChange' | 'value'>;
+declare const Tabs: {
+    ({ children, value: valueProp, onValueChange: onValueChangeProp, defaultValue, ...props }: TabsProps): JSX.Element;
+    displayName: string;
+};
+
+type TabsContentProps = Pick<TabsContentProps$1, 'children' | 'value'>;
+declare const TabsContent: {
+    ({ children, value }: TabsContentProps): JSX.Element;
+    displayName: string;
+};
+
+type TabsListProps = Pick<TabsListProps$1, 'aria-label'> & PropsWithChildren<{
     fullWidth?: boolean;
-    /**
-     * When true, the tab headers will remain fixed at the top while the content scrolls.
-     */
-    stickyHeaders?: 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>>;
+}>;
+declare const TabsList: {
+    ({ children, fullWidth, ...props }: TabsListProps): JSX.Element;
+    displayName: string;
+};
 
-type BaseProps = {
-    /**
-     * Disable the `SegmentedControlItem`
-     */
-    disabled?: boolean;
-    /**
-     * The value of the item
-     */
-    value: string;
-};
+type BaseProps = Pick<TabsTriggerProps$1, 'disabled' | 'value'>;
 type IconWithLabel = {
     /**
      * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
@@ -3035,14 +3001,8 @@ type NoIcon = {
     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 TabsTriggerProps = BaseProps & (IconWithAriaLabel | IconWithLabel | NoIcon);
+declare const TabsTrigger: react.ForwardRefExoticComponent<TabsTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 
 type TagProps = ComponentPropsWithoutRef<'div'> & {
     /**
@@ -3324,4 +3284,4 @@ declare const List: {
     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, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, type ListProps, 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, TableFoot, type TableFootProps, 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, useClipboard, useFocusTrap, useForceUpdate, useFormState, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, 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, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, type ListProps, 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, 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 UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useFocusTrap, useForceUpdate, useFormState, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };

package/dist/index.d.ts

@@ -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, ReactElement } 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, PropsWithChildren, 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';
@@ -12,6 +12,7 @@ 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';
+import { TabsProps as TabsProps$1, TabsContentProps as TabsContentProps$1, TabsListProps as TabsListProps$1, TabsTriggerProps as TabsTriggerProps$1 } from '@radix-ui/react-tabs';
 
 type UIProviderProps = {
     children: ReactNode;
@@ -1360,7 +1361,7 @@ type RadioGroupProps = FormGroupProps & {
     name?: string | undefined;
 };
 /**
- * For grouping like form elements togtether. Can serve as a checkbox
+ * For grouping like form elements together. Can serve as a checkbox
  */
 declare const RadioGroup: {
     ({ children, name, onChange, value, ...props }: RadioGroupProps): JSX.Element;
@@ -1373,7 +1374,7 @@ type CheckboxGroupProps = FormGroupProps & {
     name?: string | undefined;
 };
 /**
- * For grouping like form elements togtether. Can serve as a checkbox
+ * For grouping like form elements together. Can serve as a checkbox
  */
 declare const CheckboxGroup: {
     ({ children, name, onChange, value, ...props }: CheckboxGroupProps): JSX.Element;
@@ -2949,62 +2950,27 @@ type TableRowProps = HTMLAttributes<HTMLTableRowElement> & {
 };
 declare const TableRow: ({ children, ...props }: TableRowProps) => JSX.Element;
 
-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.
-     */
+type TabsProps = Pick<TabsProps$1, 'children' | 'defaultValue' | 'onValueChange' | 'value'>;
+declare const Tabs: {
+    ({ children, value: valueProp, onValueChange: onValueChangeProp, defaultValue, ...props }: TabsProps): JSX.Element;
+    displayName: string;
+};
+
+type TabsContentProps = Pick<TabsContentProps$1, 'children' | 'value'>;
+declare const TabsContent: {
+    ({ children, value }: TabsContentProps): JSX.Element;
+    displayName: string;
+};
+
+type TabsListProps = Pick<TabsListProps$1, 'aria-label'> & PropsWithChildren<{
     fullWidth?: boolean;
-    /**
-     * When true, the tab headers will remain fixed at the top while the content scrolls.
-     */
-    stickyHeaders?: 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>>;
+}>;
+declare const TabsList: {
+    ({ children, fullWidth, ...props }: TabsListProps): JSX.Element;
+    displayName: string;
+};
 
-type BaseProps = {
-    /**
-     * Disable the `SegmentedControlItem`
-     */
-    disabled?: boolean;
-    /**
-     * The value of the item
-     */
-    value: string;
-};
+type BaseProps = Pick<TabsTriggerProps$1, 'disabled' | 'value'>;
 type IconWithLabel = {
     /**
      * The [Icon](?path=/docs/components-icon--docs) component to use, e.g. `<Icon type="favorite" />`
@@ -3035,14 +3001,8 @@ type NoIcon = {
     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 TabsTriggerProps = BaseProps & (IconWithAriaLabel | IconWithLabel | NoIcon);
+declare const TabsTrigger: react.ForwardRefExoticComponent<TabsTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 
 type TagProps = ComponentPropsWithoutRef<'div'> & {
     /**
@@ -3324,4 +3284,4 @@ declare const List: {
     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, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, type ListProps, 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, TableFoot, type TableFootProps, 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, useClipboard, useFocusTrap, useForceUpdate, useFormState, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, 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, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, type ListProps, 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, 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 UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useFocusTrap, useForceUpdate, useFormState, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };