@wistia/ui 0.5.4 → 0.5.5-beta.72ca8428.4bdcb4b

package/dist/index.d.mts

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode, Dispatch, SetStateAction, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ElementType, ChangeEvent, ForwardedRef, Ref, InputHTMLAttributes, RefObject, ForwardRefExoticComponent, RefAttributes } from 'react';
 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 { DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu';
 import { ToggleGroupSingleProps } from '@radix-ui/react-toggle-group';
@@ -763,6 +764,46 @@ type CheckboxProps = Omit<ComponentPropsWithRef<'label'>, 'onChange'> & {
 };
 declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
+type CollapsibleProps = {
+    /**
+     * `CollapsibleTrigger` and `CollapsibleContent` must be included somewhere inside these children.
+     */
+    children: ReactNode;
+    /**
+     * Whether the collapsible content is open or closed. If not provided, the collapsible will be uncontrolled.
+     */
+    isOpen?: boolean;
+    /**
+     * Callback for when the trigger is toggled. If not provided, the collapsible will be uncontrolled.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+};
+/**
+ * Toggle the visibility of content with a trigger.
+ */
+declare const Collapsible: {
+    ({ children, isOpen, onOpenChange, }: CollapsibleProps): JSX.Element;
+    displayName: string;
+};
+
+type CollapsibleTriggerProps = {
+    /**
+     * A trigger element that will toggle the collapsible content.
+     * Usually a [Button](?path=/docs/components-button--docs).
+     */
+    children: ReactNode;
+};
+declare const CollapsibleTrigger: ({ children }: CollapsibleTriggerProps) => react_jsx_runtime.JSX.Element;
+
+type CollapsibleContentProps = {
+    clamp?: number;
+    /**
+     * The content that will be hidden when `Collapsible` is closed.
+     */
+    children: CollapsibleContentProps$1['children'];
+};
+declare const CollapsibleContent: ({ clamp, children }: CollapsibleContentProps) => react_jsx_runtime.JSX.Element;
+
 type DataCardProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Label text displayed above the value
@@ -2052,77 +2093,6 @@ type NoIcon$1 = {
 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
@@ -2364,4 +2334,75 @@ 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, 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 };
+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;
+
+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, 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, 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 };

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode, Dispatch, SetStateAction, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ElementType, ChangeEvent, ForwardedRef, Ref, InputHTMLAttributes, RefObject, ForwardRefExoticComponent, RefAttributes } from 'react';
 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 { DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu';
 import { ToggleGroupSingleProps } from '@radix-ui/react-toggle-group';
@@ -763,6 +764,46 @@ type CheckboxProps = Omit<ComponentPropsWithRef<'label'>, 'onChange'> & {
 };
 declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
 
+type CollapsibleProps = {
+    /**
+     * `CollapsibleTrigger` and `CollapsibleContent` must be included somewhere inside these children.
+     */
+    children: ReactNode;
+    /**
+     * Whether the collapsible content is open or closed. If not provided, the collapsible will be uncontrolled.
+     */
+    isOpen?: boolean;
+    /**
+     * Callback for when the trigger is toggled. If not provided, the collapsible will be uncontrolled.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+};
+/**
+ * Toggle the visibility of content with a trigger.
+ */
+declare const Collapsible: {
+    ({ children, isOpen, onOpenChange, }: CollapsibleProps): JSX.Element;
+    displayName: string;
+};
+
+type CollapsibleTriggerProps = {
+    /**
+     * A trigger element that will toggle the collapsible content.
+     * Usually a [Button](?path=/docs/components-button--docs).
+     */
+    children: ReactNode;
+};
+declare const CollapsibleTrigger: ({ children }: CollapsibleTriggerProps) => react_jsx_runtime.JSX.Element;
+
+type CollapsibleContentProps = {
+    clamp?: number;
+    /**
+     * The content that will be hidden when `Collapsible` is closed.
+     */
+    children: CollapsibleContentProps$1['children'];
+};
+declare const CollapsibleContent: ({ clamp, children }: CollapsibleContentProps) => react_jsx_runtime.JSX.Element;
+
 type DataCardProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Label text displayed above the value
@@ -2052,77 +2093,6 @@ type NoIcon$1 = {
 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
@@ -2364,4 +2334,75 @@ 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, 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 };
+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;
+
+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, 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, 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 };