@wistia/ui 0.0.18 → 0.0.20

package/dist/index.d.mts

@@ -126,7 +126,7 @@ type BadgeProps = ComponentPropsWithoutRef<'div'> & {
     label: string;
 };
 /**
- * A badge is a compact label, with optional icon, to convey status or context.
+ * A `Badge` is a compact label, with optional icon, to convey status or context.
  */
 declare const Badge: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     /**
@@ -1392,6 +1392,93 @@ declare const CheckboxMenuItem: {
     displayName: string;
 };
 
+type RadioProps = ComponentPropsWithoutRef<'input'> & {
+    /**
+     * Indicates the state of the radio
+     */
+    checked?: boolean;
+    /**
+     * Disables input
+     */
+    disabled?: boolean;
+    /**
+     * Indicates that there is an error with the input
+     */
+    hasError?: boolean;
+    /**
+     * Provides an ID for the input
+     */
+    id?: string;
+    /**
+     * The label for the input
+     */
+    label: JSX.Element | string;
+    /**
+     * The description for the radio
+     */
+    description?: JSX.Element | string | undefined;
+    /**
+     * Should match the ID attribute of the radio.
+     * Can be used to group together multiple radios
+     */
+    name?: string;
+    /**
+     * Callback function invoked when the value changes
+     */
+    onChange?: (event: ChangeEvent) => unknown;
+    /**
+     * Make Radio a required element
+     */
+    required?: boolean;
+    /**
+     * The value attribute of the input
+     */
+    value?: string;
+};
+declare const Radio: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    /**
+     * Indicates the state of the radio
+     */
+    checked?: boolean;
+    /**
+     * Disables input
+     */
+    disabled?: boolean;
+    /**
+     * Indicates that there is an error with the input
+     */
+    hasError?: boolean;
+    /**
+     * Provides an ID for the input
+     */
+    id?: string;
+    /**
+     * The label for the input
+     */
+    label: JSX.Element | string;
+    /**
+     * The description for the radio
+     */
+    description?: JSX.Element | string | undefined;
+    /**
+     * Should match the ID attribute of the radio.
+     * Can be used to group together multiple radios
+     */
+    name?: string;
+    /**
+     * Callback function invoked when the value changes
+     */
+    onChange?: (event: ChangeEvent) => unknown;
+    /**
+     * Make Radio a required element
+     */
+    required?: boolean;
+    /**
+     * The value attribute of the input
+     */
+    value?: string;
+} & react.RefAttributes<HTMLInputElement>>;
+
 type ScreenReaderOnlyProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Pass an arbitrary child node
@@ -1446,6 +1533,54 @@ declare const Stack: (<C = "div">(props: PolymorphicComponentProps<C, StackProps
     renderAs: react.JSXElementConstructor<any> | keyof react.JSX.IntrinsicElements;
 })>, never> & Record<string, never>;
 
+type TagProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Set the [color scheme](/?path=/docs/docs-color-schemes--docs) of the `Tag`
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * Valid URL for the `Tag` label to link to
+     */
+    href?: string;
+    /**
+     * Text label for the `Tag`
+     */
+    label: ReactNode;
+    /**
+     * Callback function to be called when the `x` button is clicked
+     */
+    onClickRemove?: ((event: MouseEvent<HTMLButtonElement>) => void) | undefined;
+    /**
+     * Accessible label for the `x` button (ie. "Remove tag")
+     */
+    onClickRemoveLabel?: string | undefined;
+};
+/**
+ * A `Tag` is an optionally linked label, with an optional action button, to categorize content.
+ */
+declare const Tag: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * Set the [color scheme](/?path=/docs/docs-color-schemes--docs) of the `Tag`
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * Valid URL for the `Tag` label to link to
+     */
+    href?: string;
+    /**
+     * Text label for the `Tag`
+     */
+    label: ReactNode;
+    /**
+     * Callback function to be called when the `x` button is clicked
+     */
+    onClickRemove?: ((event: MouseEvent<HTMLButtonElement>) => void) | undefined;
+    /**
+     * Accessible label for the `x` button (ie. "Remove tag")
+     */
+    onClickRemoveLabel?: string | undefined;
+} & react.RefAttributes<HTMLDivElement>>;
+
 type TooltipProps = {
     /**
      * The content of the tooltip
@@ -1525,4 +1660,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-export { Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Button, ButtonGroup, type ButtonProps, Checkbox, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, RadioMenuItem, ScreenReaderOnly, Stack, SubMenu, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useMq, useWindowSize };
+export { Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Button, ButtonGroup, type ButtonProps, Checkbox, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Radio, 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, useMq, useWindowSize };

package/dist/index.d.ts

@@ -126,7 +126,7 @@ type BadgeProps = ComponentPropsWithoutRef<'div'> & {
     label: string;
 };
 /**
- * A badge is a compact label, with optional icon, to convey status or context.
+ * A `Badge` is a compact label, with optional icon, to convey status or context.
  */
 declare const Badge: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     /**
@@ -1392,6 +1392,93 @@ declare const CheckboxMenuItem: {
     displayName: string;
 };
 
+type RadioProps = ComponentPropsWithoutRef<'input'> & {
+    /**
+     * Indicates the state of the radio
+     */
+    checked?: boolean;
+    /**
+     * Disables input
+     */
+    disabled?: boolean;
+    /**
+     * Indicates that there is an error with the input
+     */
+    hasError?: boolean;
+    /**
+     * Provides an ID for the input
+     */
+    id?: string;
+    /**
+     * The label for the input
+     */
+    label: JSX.Element | string;
+    /**
+     * The description for the radio
+     */
+    description?: JSX.Element | string | undefined;
+    /**
+     * Should match the ID attribute of the radio.
+     * Can be used to group together multiple radios
+     */
+    name?: string;
+    /**
+     * Callback function invoked when the value changes
+     */
+    onChange?: (event: ChangeEvent) => unknown;
+    /**
+     * Make Radio a required element
+     */
+    required?: boolean;
+    /**
+     * The value attribute of the input
+     */
+    value?: string;
+};
+declare const Radio: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
+    /**
+     * Indicates the state of the radio
+     */
+    checked?: boolean;
+    /**
+     * Disables input
+     */
+    disabled?: boolean;
+    /**
+     * Indicates that there is an error with the input
+     */
+    hasError?: boolean;
+    /**
+     * Provides an ID for the input
+     */
+    id?: string;
+    /**
+     * The label for the input
+     */
+    label: JSX.Element | string;
+    /**
+     * The description for the radio
+     */
+    description?: JSX.Element | string | undefined;
+    /**
+     * Should match the ID attribute of the radio.
+     * Can be used to group together multiple radios
+     */
+    name?: string;
+    /**
+     * Callback function invoked when the value changes
+     */
+    onChange?: (event: ChangeEvent) => unknown;
+    /**
+     * Make Radio a required element
+     */
+    required?: boolean;
+    /**
+     * The value attribute of the input
+     */
+    value?: string;
+} & react.RefAttributes<HTMLInputElement>>;
+
 type ScreenReaderOnlyProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Pass an arbitrary child node
@@ -1446,6 +1533,54 @@ declare const Stack: (<C = "div">(props: PolymorphicComponentProps<C, StackProps
     renderAs: react.JSXElementConstructor<any> | keyof react.JSX.IntrinsicElements;
 })>, never> & Record<string, never>;
 
+type TagProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Set the [color scheme](/?path=/docs/docs-color-schemes--docs) of the `Tag`
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * Valid URL for the `Tag` label to link to
+     */
+    href?: string;
+    /**
+     * Text label for the `Tag`
+     */
+    label: ReactNode;
+    /**
+     * Callback function to be called when the `x` button is clicked
+     */
+    onClickRemove?: ((event: MouseEvent<HTMLButtonElement>) => void) | undefined;
+    /**
+     * Accessible label for the `x` button (ie. "Remove tag")
+     */
+    onClickRemoveLabel?: string | undefined;
+};
+/**
+ * A `Tag` is an optionally linked label, with an optional action button, to categorize content.
+ */
+declare const Tag: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * Set the [color scheme](/?path=/docs/docs-color-schemes--docs) of the `Tag`
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * Valid URL for the `Tag` label to link to
+     */
+    href?: string;
+    /**
+     * Text label for the `Tag`
+     */
+    label: ReactNode;
+    /**
+     * Callback function to be called when the `x` button is clicked
+     */
+    onClickRemove?: ((event: MouseEvent<HTMLButtonElement>) => void) | undefined;
+    /**
+     * Accessible label for the `x` button (ie. "Remove tag")
+     */
+    onClickRemoveLabel?: string | undefined;
+} & react.RefAttributes<HTMLDivElement>>;
+
 type TooltipProps = {
     /**
      * The content of the tooltip
@@ -1525,4 +1660,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-export { Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Button, ButtonGroup, type ButtonProps, Checkbox, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, RadioMenuItem, ScreenReaderOnly, Stack, SubMenu, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useMq, useWindowSize };
+export { Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Button, ButtonGroup, type ButtonProps, Checkbox, CheckboxMenuItem, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Radio, 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, useMq, useWindowSize };