@wistia/ui 0.1.1 → 0.1.2

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ChangeEvent, ForwardedRef, Ref, JSXElementConstructor, ElementType as ElementType$1, RefObject, InputHTMLAttributes } from 'react';
+import { ReactNode, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ChangeEvent, ForwardedRef, Ref, JSXElementConstructor, ElementType as ElementType$1, InputHTMLAttributes, RefObject } from 'react';
 import { LinkProps as LinkProps$1 } from 'react-router-dom';
 import * as styled_components from 'styled-components';
 import { DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu';
@@ -243,6 +243,63 @@ type AriaLiveContextType = {
 };
 declare const useAriaLive: () => AriaLiveContextType;
 
+type ActionButtonProps = {
+    /**
+     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     */
+    icon: JSX.Element;
+    /**
+     * Disables the button
+     */
+    disabled?: boolean;
+    /**
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `ActionButton` when hovered. By default, it will inherit the `colorScheme` prop.
+     */
+    hoverColorScheme?: ColorSchemeTypes;
+    /**
+     * Changes the secondary icon for different use cases
+     */
+    variant?: 'default' | 'gated' | 'menu-down' | 'menu-up';
+} & (Omit<ButtonAsButtonProps, 'fullWidth' | 'isLoading' | 'leftIcon' | 'rightIcon' | 'size' | 'unstyled' | 'variant'> | Omit<ButtonAsLinkProps, 'fullWidth' | 'isLoading' | 'leftIcon' | 'rightIcon' | 'size' | 'unstyled' | 'variant'>);
+/**
+ * Action Button component is used as one of a group of main actions on the page.
+ */
+declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
+    /**
+     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     */
+    icon: JSX.Element;
+    /**
+     * Disables the button
+     */
+    disabled?: boolean;
+    /**
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `ActionButton` when hovered. By default, it will inherit the `colorScheme` prop.
+     */
+    hoverColorScheme?: ColorSchemeTypes;
+    /**
+     * Changes the secondary icon for different use cases
+     */
+    variant?: "default" | "gated" | "menu-down" | "menu-up";
+} & Omit<ButtonAsButtonProps, "size" | "isLoading" | "leftIcon" | "fullWidth" | "unstyled" | "rightIcon" | "variant">, "ref"> | Omit<{
+    /**
+     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     */
+    icon: JSX.Element;
+    /**
+     * Disables the button
+     */
+    disabled?: boolean;
+    /**
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `ActionButton` when hovered. By default, it will inherit the `colorScheme` prop.
+     */
+    hoverColorScheme?: ColorSchemeTypes;
+    /**
+     * Changes the secondary icon for different use cases
+     */
+    variant?: "default" | "gated" | "menu-down" | "menu-up";
+} & Omit<ButtonAsLinkProps, "size" | "isLoading" | "leftIcon" | "fullWidth" | "unstyled" | "rightIcon" | "variant">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+
 type AvatarInstanceType = 'image' | 'initials';
 type AvatarProps = ComponentPropsWithoutRef<'div'> & {
     /**
@@ -1037,6 +1094,70 @@ declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
     children: JSX.Element;
 } & Omit<ButtonAsLinkProps, "leftIcon" | "fullWidth" | "rightIcon">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, 'type'> & {
+    /**
+     * Sets the validity status of the input
+     */
+    'aria-invalid'?: boolean;
+    /**
+     * Set the disabled state of the input
+     */
+    disabled?: boolean;
+    /**
+     * If true, the input will fill the width of its parent
+     */
+    fullWidth?: boolean;
+    /**
+     * If true, the input will use a monospace font
+     */
+    monospace?: boolean;
+    /**
+     * Icon to display on the left side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
+     */
+    leftIcon?: JSX.Element | undefined;
+    /**
+     * Icon to display on the right side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
+     */
+    rightIcon?: JSX.Element | undefined;
+    /**
+     * The type of the input
+     */
+    type?: 'email' | 'multiline' | 'number' | 'phone' | 'search' | 'text' | 'url';
+};
+/**
+ * Component description goes here
+ */
+declare const Input: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, "type"> & {
+    /**
+     * Sets the validity status of the input
+     */
+    'aria-invalid'?: boolean;
+    /**
+     * Set the disabled state of the input
+     */
+    disabled?: boolean;
+    /**
+     * If true, the input will fill the width of its parent
+     */
+    fullWidth?: boolean;
+    /**
+     * If true, the input will use a monospace font
+     */
+    monospace?: boolean;
+    /**
+     * Icon to display on the left side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
+     */
+    leftIcon?: JSX.Element | undefined;
+    /**
+     * Icon to display on the right side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
+     */
+    rightIcon?: JSX.Element | undefined;
+    /**
+     * The type of the input
+     */
+    type?: "email" | "multiline" | "number" | "phone" | "search" | "text" | "url";
+} & react.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+
 type LabelProps = ComponentPropsWithoutRef<'label'> & {
     /**
      * Pass an arbitrary child node
@@ -1855,68 +1976,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-type InputProps = Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, 'type'> & {
-    /**
-     * Sets the validity status of the input
-     */
-    'aria-invalid'?: boolean;
-    /**
-     * Set the disabled state of the input
-     */
-    disabled?: boolean;
-    /**
-     * If true, the input will fill the width of its parent
-     */
-    fullWidth?: boolean;
-    /**
-     * If true, the input will use a monospace font
-     */
-    monospace?: boolean;
-    /**
-     * Icon to display on the left side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
-     */
-    leftIcon?: JSX.Element | undefined;
-    /**
-     * Icon to display on the right side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
-     */
-    rightIcon?: JSX.Element | undefined;
-    /**
-     * The type of the input
-     */
-    type?: 'email' | 'multiline' | 'number' | 'phone' | 'search' | 'text' | 'url';
-};
-/**
- * Component description goes here
- */
-declare const Input: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, "type"> & {
-    /**
-     * Sets the validity status of the input
-     */
-    'aria-invalid'?: boolean;
-    /**
-     * Set the disabled state of the input
-     */
-    disabled?: boolean;
-    /**
-     * If true, the input will fill the width of its parent
-     */
-    fullWidth?: boolean;
-    /**
-     * If true, the input will use a monospace font
-     */
-    monospace?: boolean;
-    /**
-     * Icon to display on the left side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
-     */
-    leftIcon?: JSX.Element | undefined;
-    /**
-     * Icon to display on the right side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
-     */
-    rightIcon?: JSX.Element | undefined;
-    /**
-     * The type of the input
-     */
-    type?: "email" | "multiline" | "number" | "phone" | "search" | "text" | "url";
-} & react.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
-
-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, 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, 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 };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ChangeEvent, ForwardedRef, Ref, JSXElementConstructor, ElementType as ElementType$1, RefObject, InputHTMLAttributes } from 'react';
+import { ReactNode, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ChangeEvent, ForwardedRef, Ref, JSXElementConstructor, ElementType as ElementType$1, InputHTMLAttributes, RefObject } from 'react';
 import { LinkProps as LinkProps$1 } from 'react-router-dom';
 import * as styled_components from 'styled-components';
 import { DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu';
@@ -243,6 +243,63 @@ type AriaLiveContextType = {
 };
 declare const useAriaLive: () => AriaLiveContextType;
 
+type ActionButtonProps = {
+    /**
+     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     */
+    icon: JSX.Element;
+    /**
+     * Disables the button
+     */
+    disabled?: boolean;
+    /**
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `ActionButton` when hovered. By default, it will inherit the `colorScheme` prop.
+     */
+    hoverColorScheme?: ColorSchemeTypes;
+    /**
+     * Changes the secondary icon for different use cases
+     */
+    variant?: 'default' | 'gated' | 'menu-down' | 'menu-up';
+} & (Omit<ButtonAsButtonProps, 'fullWidth' | 'isLoading' | 'leftIcon' | 'rightIcon' | 'size' | 'unstyled' | 'variant'> | Omit<ButtonAsLinkProps, 'fullWidth' | 'isLoading' | 'leftIcon' | 'rightIcon' | 'size' | 'unstyled' | 'variant'>);
+/**
+ * Action Button component is used as one of a group of main actions on the page.
+ */
+declare const ActionButton: react.ForwardRefExoticComponent<(Omit<{
+    /**
+     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     */
+    icon: JSX.Element;
+    /**
+     * Disables the button
+     */
+    disabled?: boolean;
+    /**
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `ActionButton` when hovered. By default, it will inherit the `colorScheme` prop.
+     */
+    hoverColorScheme?: ColorSchemeTypes;
+    /**
+     * Changes the secondary icon for different use cases
+     */
+    variant?: "default" | "gated" | "menu-down" | "menu-up";
+} & Omit<ButtonAsButtonProps, "size" | "isLoading" | "leftIcon" | "fullWidth" | "unstyled" | "rightIcon" | "variant">, "ref"> | Omit<{
+    /**
+     * The Icon component to use, e.g. `<Icon type="favorite" />`
+     */
+    icon: JSX.Element;
+    /**
+     * Disables the button
+     */
+    disabled?: boolean;
+    /**
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `ActionButton` when hovered. By default, it will inherit the `colorScheme` prop.
+     */
+    hoverColorScheme?: ColorSchemeTypes;
+    /**
+     * Changes the secondary icon for different use cases
+     */
+    variant?: "default" | "gated" | "menu-down" | "menu-up";
+} & Omit<ButtonAsLinkProps, "size" | "isLoading" | "leftIcon" | "fullWidth" | "unstyled" | "rightIcon" | "variant">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+
 type AvatarInstanceType = 'image' | 'initials';
 type AvatarProps = ComponentPropsWithoutRef<'div'> & {
     /**
@@ -1037,6 +1094,70 @@ declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
     children: JSX.Element;
 } & Omit<ButtonAsLinkProps, "leftIcon" | "fullWidth" | "rightIcon">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, 'type'> & {
+    /**
+     * Sets the validity status of the input
+     */
+    'aria-invalid'?: boolean;
+    /**
+     * Set the disabled state of the input
+     */
+    disabled?: boolean;
+    /**
+     * If true, the input will fill the width of its parent
+     */
+    fullWidth?: boolean;
+    /**
+     * If true, the input will use a monospace font
+     */
+    monospace?: boolean;
+    /**
+     * Icon to display on the left side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
+     */
+    leftIcon?: JSX.Element | undefined;
+    /**
+     * Icon to display on the right side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
+     */
+    rightIcon?: JSX.Element | undefined;
+    /**
+     * The type of the input
+     */
+    type?: 'email' | 'multiline' | 'number' | 'phone' | 'search' | 'text' | 'url';
+};
+/**
+ * Component description goes here
+ */
+declare const Input: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, "type"> & {
+    /**
+     * Sets the validity status of the input
+     */
+    'aria-invalid'?: boolean;
+    /**
+     * Set the disabled state of the input
+     */
+    disabled?: boolean;
+    /**
+     * If true, the input will fill the width of its parent
+     */
+    fullWidth?: boolean;
+    /**
+     * If true, the input will use a monospace font
+     */
+    monospace?: boolean;
+    /**
+     * Icon to display on the left side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
+     */
+    leftIcon?: JSX.Element | undefined;
+    /**
+     * Icon to display on the right side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
+     */
+    rightIcon?: JSX.Element | undefined;
+    /**
+     * The type of the input
+     */
+    type?: "email" | "multiline" | "number" | "phone" | "search" | "text" | "url";
+} & react.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+
 type LabelProps = ComponentPropsWithoutRef<'label'> & {
     /**
      * Pass an arbitrary child node
@@ -1855,68 +1976,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-type InputProps = Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, 'type'> & {
-    /**
-     * Sets the validity status of the input
-     */
-    'aria-invalid'?: boolean;
-    /**
-     * Set the disabled state of the input
-     */
-    disabled?: boolean;
-    /**
-     * If true, the input will fill the width of its parent
-     */
-    fullWidth?: boolean;
-    /**
-     * If true, the input will use a monospace font
-     */
-    monospace?: boolean;
-    /**
-     * Icon to display on the left side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
-     */
-    leftIcon?: JSX.Element | undefined;
-    /**
-     * Icon to display on the right side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
-     */
-    rightIcon?: JSX.Element | undefined;
-    /**
-     * The type of the input
-     */
-    type?: 'email' | 'multiline' | 'number' | 'phone' | 'search' | 'text' | 'url';
-};
-/**
- * Component description goes here
- */
-declare const Input: react.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>, "type"> & {
-    /**
-     * Sets the validity status of the input
-     */
-    'aria-invalid'?: boolean;
-    /**
-     * Set the disabled state of the input
-     */
-    disabled?: boolean;
-    /**
-     * If true, the input will fill the width of its parent
-     */
-    fullWidth?: boolean;
-    /**
-     * If true, the input will use a monospace font
-     */
-    monospace?: boolean;
-    /**
-     * Icon to display on the left side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
-     */
-    leftIcon?: JSX.Element | undefined;
-    /**
-     * Icon to display on the right side of the input, Must be an instance of [Icon](?path=/docs/components-icon--docs)
-     */
-    rightIcon?: JSX.Element | undefined;
-    /**
-     * The type of the input
-     */
-    type?: "email" | "multiline" | "number" | "phone" | "search" | "text" | "url";
-} & react.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
-
-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, 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, 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 };