@wistia/ui 0.4.0 → 0.4.2-beta.1edded51.b4258de

package/dist/index.d.mts

@@ -377,7 +377,7 @@ declare const Badge: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProp
     label: string;
 } & react.RefAttributes<HTMLDivElement>>;
 
-type Spacings = 'space-01' | 'space-02' | 'space-03' | 'space-04' | 'space-05' | 'space-06' | 'space-07' | 'space-08' | 'space-09' | 'space-10' | 'space-11';
+type Spacings = 'space-01' | 'space-02' | 'space-03' | 'space-04' | 'space-05' | 'space-06' | 'space-07' | 'space-08' | 'space-09';
 
 type JustifyContentType = 'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'space-evenly';
 type AlignContentType = 'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'stretch';
@@ -519,6 +519,93 @@ declare const ButtonGroup: {
     displayName: string;
 };
 
+type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Content to be rendered inside the Card component
+     */
+    children: ReactNode;
+    /**
+     * Specifies the background and border color of the card.
+     */
+    prominence?: 'default' | 'secondary' | 'tertiary';
+    /**
+     * Determines the color scheme for the card and its children.
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * Specifies the internal padding of the card. Uses the design system's spacing scale.
+     */
+    paddingSize?: Spacings;
+    /**
+     * When true, adds a border around the card based on its colorScheme and prominence.
+     */
+    border?: boolean;
+    /**
+     * Sets the flex direction of the card's contents.
+     */
+    direction?: BoxProps['direction'];
+    /**
+     * Specifies the gaps (gutters) between rows and columns
+     */
+    gap?: BoxProps['gap'];
+    /**
+     * @ignore
+     * */
+    alignContent?: BoxProps['alignContent'];
+    /**
+     * @ignore
+     * */
+    alignItems?: BoxProps['alignItems'];
+    /**
+     * @ignore
+     * */
+    alignSelf?: BoxProps['alignSelf'];
+    /**
+     * @ignore
+     * */
+    basis?: BoxProps['basis'];
+    /**
+     * @ignore
+     * */
+    fill?: BoxProps['fill'];
+    /**
+     * @ignore
+     * */
+    fillViewport?: BoxProps['fillViewport'];
+    /**
+     * @ignore
+     * */
+    grow?: BoxProps['grow'];
+    /**
+     * @ignore
+     * */
+    inline?: BoxProps['inline'];
+    /**
+     * @ignore
+     * */
+    justifyContent?: BoxProps['justifyContent'];
+    /**
+     * @ignore
+     * */
+    order?: BoxProps['order'];
+    /**
+     * @ignore
+     * */
+    shrink?: BoxProps['shrink'];
+    /**
+     * @ignore
+     * */
+    wrapItems?: BoxProps['wrapItems'];
+};
+/**
+ * A flexible container component that groups related content with consistent spacing and styling.
+ * Cards can be used to visually distinguish content sections. Extends the [Box component.](https://wistia.github.io/vhs/storybook-ui/?path=/docs/components-box--docs)
+ */
+declare const Card: {
+    ({ children, paddingSize, gap, direction, colorScheme, prominence, border, ...props }: CardProps): JSX.Element;
+    displayName: string;
+};
+
 type CheckboxProps = Omit<ComponentPropsWithRef<'label'>, 'onChange'> & {
     /**
      * Indicates the state of the checkbox
@@ -1125,6 +1212,10 @@ declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
 } & Omit<ButtonAsLinkProps, "leftIcon" | "fullWidth" | "rightIcon">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
 type InputProps = Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, 'type'> & {
+    /**
+     * When enabled, focusing the input will select the entire text within
+     */
+    autoSelect?: boolean;
     /**
      * Sets the validity status of the input
      */
@@ -1158,6 +1249,10 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElemen
  * Component description goes here
  */
 declare const Input: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, "type"> & {
+    /**
+     * When enabled, focusing the input will select the entire text within
+     */
+    autoSelect?: boolean;
     /**
      * Sets the validity status of the input
      */
@@ -1479,7 +1574,7 @@ type TextProps = ComponentPropsWithoutRef<'div'> & {
 /**
  * Used for rending paragraphs and inline text.
  */
-declare const Text: (<C = "div">(props: PolymorphicComponentProps<C, TextProps>) => react.ReactElement) & Omit<react.FunctionComponent<(Omit<Omit<any, "ref">, "key" | "disabled" | keyof react.HTMLAttributes<HTMLDivElement> | "align" | "ellipsis" | "inline" | "colorScheme" | "variant" | "renderAs" | "preventUserSelect" | "prominence"> & {
+declare const Text: (<C = "div">(props: PolymorphicComponentProps<C, TextProps>) => react.ReactElement) & Omit<react.FunctionComponent<(Omit<Omit<any, "ref">, "key" | "disabled" | keyof react.HTMLAttributes<HTMLDivElement> | "align" | "ellipsis" | "inline" | "colorScheme" | "variant" | "prominence" | "renderAs" | "preventUserSelect"> & {
     renderAs?: any;
 } & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     /**
@@ -2044,4 +2139,4 @@ type BreadcrumbProps = {
 };
 declare const Breadcrumb: ({ icon, href, children }: BreadcrumbProps) => react_jsx_runtime.JSX.Element;
 
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, 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, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useFormState, useMq, useToast, useWindowSize };
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, 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, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useFormState, useMq, useToast, useWindowSize };

package/dist/index.d.ts

@@ -377,7 +377,7 @@ declare const Badge: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProp
     label: string;
 } & react.RefAttributes<HTMLDivElement>>;
 
-type Spacings = 'space-01' | 'space-02' | 'space-03' | 'space-04' | 'space-05' | 'space-06' | 'space-07' | 'space-08' | 'space-09' | 'space-10' | 'space-11';
+type Spacings = 'space-01' | 'space-02' | 'space-03' | 'space-04' | 'space-05' | 'space-06' | 'space-07' | 'space-08' | 'space-09';
 
 type JustifyContentType = 'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'space-evenly';
 type AlignContentType = 'center' | 'flex-end' | 'flex-start' | 'space-around' | 'space-between' | 'stretch';
@@ -519,6 +519,93 @@ declare const ButtonGroup: {
     displayName: string;
 };
 
+type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Content to be rendered inside the Card component
+     */
+    children: ReactNode;
+    /**
+     * Specifies the background and border color of the card.
+     */
+    prominence?: 'default' | 'secondary' | 'tertiary';
+    /**
+     * Determines the color scheme for the card and its children.
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * Specifies the internal padding of the card. Uses the design system's spacing scale.
+     */
+    paddingSize?: Spacings;
+    /**
+     * When true, adds a border around the card based on its colorScheme and prominence.
+     */
+    border?: boolean;
+    /**
+     * Sets the flex direction of the card's contents.
+     */
+    direction?: BoxProps['direction'];
+    /**
+     * Specifies the gaps (gutters) between rows and columns
+     */
+    gap?: BoxProps['gap'];
+    /**
+     * @ignore
+     * */
+    alignContent?: BoxProps['alignContent'];
+    /**
+     * @ignore
+     * */
+    alignItems?: BoxProps['alignItems'];
+    /**
+     * @ignore
+     * */
+    alignSelf?: BoxProps['alignSelf'];
+    /**
+     * @ignore
+     * */
+    basis?: BoxProps['basis'];
+    /**
+     * @ignore
+     * */
+    fill?: BoxProps['fill'];
+    /**
+     * @ignore
+     * */
+    fillViewport?: BoxProps['fillViewport'];
+    /**
+     * @ignore
+     * */
+    grow?: BoxProps['grow'];
+    /**
+     * @ignore
+     * */
+    inline?: BoxProps['inline'];
+    /**
+     * @ignore
+     * */
+    justifyContent?: BoxProps['justifyContent'];
+    /**
+     * @ignore
+     * */
+    order?: BoxProps['order'];
+    /**
+     * @ignore
+     * */
+    shrink?: BoxProps['shrink'];
+    /**
+     * @ignore
+     * */
+    wrapItems?: BoxProps['wrapItems'];
+};
+/**
+ * A flexible container component that groups related content with consistent spacing and styling.
+ * Cards can be used to visually distinguish content sections. Extends the [Box component.](https://wistia.github.io/vhs/storybook-ui/?path=/docs/components-box--docs)
+ */
+declare const Card: {
+    ({ children, paddingSize, gap, direction, colorScheme, prominence, border, ...props }: CardProps): JSX.Element;
+    displayName: string;
+};
+
 type CheckboxProps = Omit<ComponentPropsWithRef<'label'>, 'onChange'> & {
     /**
      * Indicates the state of the checkbox
@@ -1125,6 +1212,10 @@ declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
 } & Omit<ButtonAsLinkProps, "leftIcon" | "fullWidth" | "rightIcon">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
 type InputProps = Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, 'type'> & {
+    /**
+     * When enabled, focusing the input will select the entire text within
+     */
+    autoSelect?: boolean;
     /**
      * Sets the validity status of the input
      */
@@ -1158,6 +1249,10 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElemen
  * Component description goes here
  */
 declare const Input: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, "type"> & {
+    /**
+     * When enabled, focusing the input will select the entire text within
+     */
+    autoSelect?: boolean;
     /**
      * Sets the validity status of the input
      */
@@ -1479,7 +1574,7 @@ type TextProps = ComponentPropsWithoutRef<'div'> & {
 /**
  * Used for rending paragraphs and inline text.
  */
-declare const Text: (<C = "div">(props: PolymorphicComponentProps<C, TextProps>) => react.ReactElement) & Omit<react.FunctionComponent<(Omit<Omit<any, "ref">, "key" | "disabled" | keyof react.HTMLAttributes<HTMLDivElement> | "align" | "ellipsis" | "inline" | "colorScheme" | "variant" | "renderAs" | "preventUserSelect" | "prominence"> & {
+declare const Text: (<C = "div">(props: PolymorphicComponentProps<C, TextProps>) => react.ReactElement) & Omit<react.FunctionComponent<(Omit<Omit<any, "ref">, "key" | "disabled" | keyof react.HTMLAttributes<HTMLDivElement> | "align" | "ellipsis" | "inline" | "colorScheme" | "variant" | "prominence" | "renderAs" | "preventUserSelect"> & {
     renderAs?: any;
 } & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     /**
@@ -2044,4 +2139,4 @@ type BreadcrumbProps = {
 };
 declare const Breadcrumb: ({ icon, href, children }: BreadcrumbProps) => react_jsx_runtime.JSX.Element;
 
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, 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, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useFormState, useMq, useToast, useWindowSize };
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Checkbox, CheckboxGroup, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, 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, Stack, SubMenu, Tag, type TagProps, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useFormState, useMq, useToast, useWindowSize };