@wistia/ui 0.0.22 → 0.0.24

package/dist/index.d.ts

@@ -47,6 +47,206 @@ declare const useMq: () => MediaQueryBooleans;
 type MediaQueryLabels = keyof MediaQueryBooleans;
 declare const useActiveMq: () => MediaQueryLabels[];
 
+declare const colorSchemeOptions: readonly ["inherit", "default", "info", "success", "warning", "error", "blue", "green", "orange", "pink", "purple", "yellow", "vendor-hubspot", "vendor-marketo", "vendor-pardot"];
+type ColorSchemeTypes = (typeof colorSchemeOptions)[number];
+type ColorSchemeWrapperProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * @ignore For use in creating navs - will override any colorScheme prop
+     */
+    __nav?: boolean;
+    /**
+     * The color scheme to apply
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * Children
+     */
+    children: ReactNode;
+};
+/**
+ * A wrapper to apply a color scheme to its children.
+ */
+declare const ColorSchemeWrapper: {
+    ({ __nav, colorScheme, children, ...otherProps }: ColorSchemeWrapperProps): JSX.Element;
+    displayName: string;
+};
+
+type ButtonVariants = 'ghost' | 'outline' | 'soft' | 'solid';
+
+type LinkTypes = 'default' | 'email' | 'external' | 'phone';
+type BaseProps = {
+    /**
+     * A Promise to invoke before navigating to location.
+     * _Caution: if used with `external` type prop a new window will **not** be opened_
+     */
+    beforeAction?: (() => Promise<void>) | (() => void);
+    /**
+     * Text that appears inside of the link
+     *
+     * @type ReactNode
+     */
+    children: ReactNode;
+    /**
+     * Set the color scheme of the button
+     * TODO - link to a color scheme page
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * Disables the link
+     */
+    disabled?: boolean;
+    /**
+     * Type of link to display
+     *
+     *   * `email` creates a mailto
+     *   * `phone` creates a telephone number
+     *   * `external` will open links in a new window
+     */
+    type?: LinkTypes | undefined;
+    /**
+     * Whether the link should be underlined
+     */
+    underline?: boolean;
+};
+type LinkAsLinkProps = BaseProps & ComponentPropsWithRef<'a'> & Omit<LinkProps$1, 'to'> & {
+    href: string | undefined;
+    type?: LinkTypes;
+};
+type LinkAsButtonProps = BaseProps & ComponentPropsWithRef<'button'> & {
+    href?: never;
+    type?: 'button' | 'reset' | 'submit';
+};
+type LinkProps = LinkAsButtonProps | LinkAsLinkProps;
+/**
+ * Links are used for navigation. If no `href` is supplied, a button that is visually styled to apper as a link
+ * is used. If used in a react-router context, their [Link](https://reactrouter.com/en/main/components/link). component is used, otherwise a native a tag.
+ * This means in addition to its own props, `Link` can use props from `react-router-dom`'s `Link` component. View their documentation [here](https://reactrouter.com/en/main/components/link).
+ * The one prop we ignore from react-router is `to`. We use `href` instead and map it under the hood.
+ *
+ */
+declare const Link: react.ForwardRefExoticComponent<(Omit<LinkAsLinkProps, "ref"> | Omit<LinkAsButtonProps, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+
+type Breakpoints = 'isLgAndDown' | 'isLgAndUp' | 'isMdAndDown' | 'isMdAndUp' | 'isSmAndDown' | 'isSmAndUp' | 'isXlAndDown' | 'isXlAndUp' | 'isXsAndDown' | 'isXsAndUp';
+type AtLeastOneBreakpoint<T, U = {
+    [K in keyof T]: Pick<T, K>;
+}> = Partial<T> & U[keyof U];
+type ResponsiveObject<T> = AtLeastOneBreakpoint<Record<Breakpoints, T>> & {
+    base: T;
+};
+
+type ButtonSizes = 'lg' | 'md' | 'sm' | 'xl';
+type BaseButtonProps = {
+    /**
+     * Text that appears inside of the button
+     *
+     * @type ReactNode
+     */
+    children?: ReactNode;
+    /**
+     * Set the color scheme of the button
+     * TODO - link to a color scheme page
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * Disables the button
+     */
+    disabled?: boolean;
+    /**
+     * Show a spinner when the button is in a loading state
+     */
+    isLoading?: boolean;
+    /**
+     * Icon to display on the left side of the button, Must be an instance of [Icon](?path=/docs/components-icon--docs)
+     */
+    leftIcon?: JSX.Element | undefined;
+    /**
+     * Callback function invoked when the button is clicked
+     *
+     * @type (event: MouseEvent) => void
+     */
+    onClick?: ((event: MouseEvent) => void) | undefined;
+    /**
+     * @ignore
+     * Force a button into a particular css state (for debugging)
+     */
+    forceState?: 'active' | 'focus' | 'hover' | undefined;
+    /**
+     * If true, the button will fill its container
+     *
+     * @type boolean | ResponsiveObject<boolean>
+     */
+    fullWidth?: ResponsiveObject<boolean> | boolean;
+    /**
+     * Provides a button without any styling (useful for wrapping another element)
+     */
+    unstyled?: boolean;
+    /**
+     * Icon to display on the right side of the button, Must be an instance of [Icon](?path=/docs/components-icon--docs)
+     */
+    rightIcon?: JSX.Element | undefined;
+    /**
+     * The size of button to display. Can be used as a [responsive prop](/docs/ui-docs-responsive-props--docs)
+     */
+    size?: ButtonSizes | ResponsiveObject<ButtonSizes>;
+    /**
+     * A visual style for the button
+     */
+    variant?: ButtonVariants;
+};
+type ButtonAsLinkProps = BaseButtonProps & ComponentPropsWithRef<'a'> & {
+    href: string | undefined;
+    children: ReactNode;
+    /**
+     * This just allows pathrough to beforeAction for link
+     * @ignore
+     */
+    beforeAction?: (() => Promise<void>) | (() => void);
+    /**
+     * This just allows pathrough to beforeAction for link
+     * @ignore
+     */
+    type?: LinkTypes;
+};
+type ButtonAsButtonProps = BaseButtonProps & ComponentPropsWithRef<'button'> & {
+    href?: never;
+    type?: 'button' | 'reset' | 'submit';
+    children: ReactNode;
+};
+type ButtonProps = ButtonAsButtonProps | ButtonAsLinkProps;
+/**
+ * Button component is used to trigger an action or event,
+ * such as submitting a form, opening a Dialog, canceling an
+ * action, or performing a delete operation. It replaces the HTML `<button>` element,
+ * unless an `href` attribute is passed, in which it will render an `<a>` element.
+ */
+declare const Button: react.ForwardRefExoticComponent<(Omit<ButtonAsLinkProps, "ref"> | Omit<ButtonAsButtonProps, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+
+type ToastProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * Action can be undefined (default dismiss button), a Button component or false to hide the dismiss button
+     */
+    action?: React.ReactElement<typeof Button> | undefined;
+    /**
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `Toast`
+     */
+    colorScheme?: ColorSchemeTypes | undefined;
+    /**
+     * Optional `Icon` component to use. Must be an instance of [Icon](/?path=/docs/components-icon--docs)
+     */
+    icon?: JSX.Element | undefined;
+    /**
+     * The message displayed in the toast
+     */
+    message: JSX.Element | string;
+};
+
+type Position = 'bottom-center' | 'bottom-left' | 'bottom-right' | 'top-center' | 'top-left' | 'top-right';
+type UseToastProps = ToastProps & {
+    position?: Position;
+    duration?: number;
+};
+declare const useToast: () => (({ message, icon, colorScheme, action, position, duration, }: UseToastProps) => void);
+
 declare const useWindowSize: (interval?: number) => {
     width: number;
     height: number;
@@ -90,26 +290,6 @@ declare const Avatar: {
     displayName: string;
 };
 
-declare const colorSchemeOptions: readonly ["inherit", "default", "info", "success", "warning", "error", "blue", "green", "orange", "pink", "purple", "yellow", "vendor-hubspot", "vendor-marketo", "vendor-pardot"];
-type ColorSchemeTypes = (typeof colorSchemeOptions)[number];
-type ColorSchemeWrapperProps = ComponentPropsWithoutRef<'div'> & {
-    /**
-     * The color scheme to apply
-     */
-    colorScheme: ColorSchemeTypes;
-    /**
-     * Children
-     */
-    children: ReactNode;
-};
-/**
- * A wrapper to apply a color scheme to its children.
- */
-declare const ColorSchemeWrapper: {
-    ({ colorScheme, children, ...otherProps }: ColorSchemeWrapperProps): JSX.Element;
-    displayName: string;
-};
-
 type BadgeProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Set the color scheme of the `Badge`
@@ -117,7 +297,7 @@ type BadgeProps = ComponentPropsWithoutRef<'div'> & {
      */
     colorScheme?: ColorSchemeTypes;
     /**
-     * The `Icon` component to use. Must be an instance of [Icon](/?path=/docs/components-icon--docs)
+     * The `Icon` component to use. Must be an instance of [Icon](../?path=/docs/components-icon--docs)
      */
     icon?: JSX.Element;
     /**
@@ -135,7 +315,7 @@ declare const Badge: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProp
      */
     colorScheme?: ColorSchemeTypes;
     /**
-     * The `Icon` component to use. Must be an instance of [Icon](/?path=/docs/components-icon--docs)
+     * The `Icon` component to use. Must be an instance of [Icon](../?path=/docs/components-icon--docs)
      */
     icon?: JSX.Element;
     /**
@@ -261,156 +441,6 @@ declare const Box: {
     displayName: string;
 };
 
-type ButtonVariants = 'ghost' | 'outline' | 'soft' | 'solid';
-
-type LinkTypes = 'default' | 'email' | 'external' | 'phone';
-type BaseProps = {
-    /**
-     * A Promise to invoke before navigating to location.
-     * _Caution: if used with `external` type prop a new window will **not** be opened_
-     */
-    beforeAction?: (() => Promise<void>) | (() => void);
-    /**
-     * Text that appears inside of the link
-     *
-     * @type ReactNode
-     */
-    children: ReactNode;
-    /**
-     * Set the color scheme of the button
-     * TODO - link to a color scheme page
-     */
-    colorScheme?: ColorSchemeTypes;
-    /**
-     * Disables the link
-     */
-    disabled?: boolean;
-    /**
-     * Type of link to display
-     *
-     *   * `email` creates a mailto
-     *   * `phone` creates a telephone number
-     *   * `external` will open links in a new window
-     */
-    type?: LinkTypes | undefined;
-    /**
-     * Whether the link should be underlined
-     */
-    underline?: boolean;
-};
-type LinkAsLinkProps = BaseProps & ComponentPropsWithRef<'a'> & Omit<LinkProps$1, 'to'> & {
-    href: string | undefined;
-    type?: LinkTypes;
-};
-type LinkAsButtonProps = BaseProps & ComponentPropsWithRef<'button'> & {
-    href?: never;
-    type?: 'button' | 'reset' | 'submit';
-};
-type LinkProps = LinkAsButtonProps | LinkAsLinkProps;
-/**
- * Links are used for navigation. If no `href` is supplied, a button that is visually styled to apper as a link
- * is used. If used in a react-router context, their [Link](https://reactrouter.com/en/main/components/link). component is used, otherwise a native a tag.
- * This means in addition to its own props, `Link` can use props from `react-router-dom`'s `Link` component. View their documentation [here](https://reactrouter.com/en/main/components/link).
- * The one prop we ignore from react-router is `to`. We use `href` instead and map it under the hood.
- *
- */
-declare const Link: react.ForwardRefExoticComponent<(Omit<LinkAsLinkProps, "ref"> | Omit<LinkAsButtonProps, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
-
-type Breakpoints = 'isLgAndDown' | 'isLgAndUp' | 'isMdAndDown' | 'isMdAndUp' | 'isSmAndDown' | 'isSmAndUp' | 'isXlAndDown' | 'isXlAndUp' | 'isXsAndDown' | 'isXsAndUp';
-type AtLeastOneBreakpoint<T, U = {
-    [K in keyof T]: Pick<T, K>;
-}> = Partial<T> & U[keyof U];
-type ResponsiveObject<T> = AtLeastOneBreakpoint<Record<Breakpoints, T>> & {
-    base: T;
-};
-
-type ButtonSizes = 'lg' | 'md' | 'sm' | 'xl';
-type BaseButtonProps = {
-    /**
-     * Text that appears inside of the button
-     *
-     * @type ReactNode
-     */
-    children?: ReactNode;
-    /**
-     * Set the color scheme of the button
-     * TODO - link to a color scheme page
-     */
-    colorScheme?: ColorSchemeTypes;
-    /**
-     * Disables the button
-     */
-    disabled?: boolean;
-    /**
-     * Show a spinner when the button is in a loading state
-     */
-    isLoading?: boolean;
-    /**
-     * Icon to display on the left side of the button, Must be an instance of [Icon](?path=/docs/components-icon--docs)
-     */
-    leftIcon?: JSX.Element | undefined;
-    /**
-     * Callback function invoked when the button is clicked
-     *
-     * @type (event: MouseEvent) => void
-     */
-    onClick?: ((event: MouseEvent) => void) | undefined;
-    /**
-     * @ignore
-     * Force a button into a particular css state (for debugging)
-     */
-    forceState?: 'active' | 'focus' | 'hover' | undefined;
-    /**
-     * If true, the button will fill its container
-     *
-     * @type boolean | ResponsiveObject<boolean>
-     */
-    fullWidth?: ResponsiveObject<boolean> | boolean;
-    /**
-     * Provides a button without any styling (useful for wrapping another element)
-     */
-    unstyled?: boolean;
-    /**
-     * Icon to display on the right side of the button, Must be an instance of [Icon](?path=/docs/components-icon--docs)
-     */
-    rightIcon?: JSX.Element | undefined;
-    /**
-     * The size of button to display. Can be used as a [responsive prop](/docs/ui-docs-responsive-props--docs)
-     */
-    size?: ButtonSizes | ResponsiveObject<ButtonSizes>;
-    /**
-     * A visual style for the button
-     */
-    variant?: ButtonVariants;
-};
-type ButtonAsLinkProps = BaseButtonProps & ComponentPropsWithRef<'a'> & {
-    href: string | undefined;
-    children: ReactNode;
-    /**
-     * This just allows pathrough to beforeAction for link
-     * @ignore
-     */
-    beforeAction?: (() => Promise<void>) | (() => void);
-    /**
-     * This just allows pathrough to beforeAction for link
-     * @ignore
-     */
-    type?: LinkTypes;
-};
-type ButtonAsButtonProps = BaseButtonProps & ComponentPropsWithRef<'button'> & {
-    href?: never;
-    type?: 'button' | 'reset' | 'submit';
-    children: ReactNode;
-};
-type ButtonProps = ButtonAsButtonProps | ButtonAsLinkProps;
-/**
- * Button component is used to trigger an action or event,
- * such as submitting a form, opening a Dialog, canceling an
- * action, or performing a delete operation. It replaces the HTML `<button>` element,
- * unless an `href` attribute is passed, in which it will render an `<a>` element.
- */
-declare const Button: react.ForwardRefExoticComponent<(Omit<ButtonAsLinkProps, "ref"> | Omit<ButtonAsButtonProps, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
-
 type ButtonGroupProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Align buttons to the left or right of their container
@@ -617,6 +647,44 @@ declare const FormField: {
     displayName: string;
 };
 
+type FormGroupProps = Omit<ComponentPropsWithoutRef<'fieldset'>, 'onChange'> & {
+    children: ReactNode;
+    label?: ReactNode;
+};
+/**
+ * For grouping like form elements together.
+ */
+declare const FormGroup: {
+    ({ children, label, ...props }: FormGroupProps): JSX.Element;
+    displayName: string;
+};
+
+type RadioGroupProps = FormGroupProps & {
+    onChange?: ((event: ChangeEvent<HTMLInputElement>) => void) | undefined;
+    value?: string | undefined;
+    name?: string | undefined;
+};
+/**
+ * For grouping like form elements togtether. Can serve as a checkbox
+ */
+declare const RadioGroup: {
+    ({ children, name, onChange, value, ...props }: RadioGroupProps): JSX.Element;
+    displayName: string;
+};
+
+type CheckboxGroupProps = FormGroupProps & {
+    onChange?: ((event: ChangeEvent<HTMLInputElement>) => void) | undefined;
+    value?: string | undefined;
+    name?: string | undefined;
+};
+/**
+ * For grouping like form elements togtether. Can serve as a checkbox
+ */
+declare const CheckboxGroup: {
+    ({ children, name, onChange, value, ...props }: CheckboxGroupProps): JSX.Element;
+    displayName: string;
+};
+
 type ExtendedProps<Props = Record<string, unknown>, OverrideProps = Record<string, unknown>> = Omit<Props, keyof OverrideProps> & OverrideProps;
 type ElementType = JSXElementConstructor<any> | keyof JSX.IntrinsicElements;
 type PropsOf<C extends ElementType> = JSX.LibraryManagedAttributes<C, ComponentPropsWithoutRef<C>>;
@@ -1764,42 +1832,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-type FormGroupProps = Omit<ComponentPropsWithoutRef<'fieldset'>, 'onChange'> & {
-    children: ReactNode;
-    label?: ReactNode;
-};
-/**
- * For grouping like form elements together.
- */
-declare const FormGroup: {
-    ({ children, label, ...props }: FormGroupProps): JSX.Element;
-    displayName: string;
-};
-
-type RadioGroupProps = FormGroupProps & {
-    onChange?: ((event: ChangeEvent<HTMLInputElement>) => void) | undefined;
-    value?: string | undefined;
-    name?: string | undefined;
-};
-/**
- * For grouping like form elements togtether. Can serve as a checkbox
- */
-declare const RadioGroup: {
-    ({ children, name, onChange, value, ...props }: RadioGroupProps): JSX.Element;
-    displayName: string;
-};
-
-type CheckboxGroupProps = FormGroupProps & {
-    onChange?: ((event: ChangeEvent<HTMLInputElement>) => void) | undefined;
-    value?: string | undefined;
-    name?: string | undefined;
-};
-/**
- * For grouping like form elements togtether. Can serve as a checkbox
- */
-declare const CheckboxGroup: {
-    ({ children, name, onChange, value, ...props }: CheckboxGroupProps): JSX.Element;
-    displayName: string;
-};
-
-export { Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, 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, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, 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, useWindowSize };
+export { Avatar, type AvatarInstanceType, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, 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, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, 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 };