@wistia/ui 0.0.23 → 0.0.25

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 } from 'react';
+import { ReactNode, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ChangeEvent, ForwardedRef, Ref, JSXElementConstructor, ElementType as ElementType$1, InputHTMLAttributes } 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';
@@ -50,10 +50,14 @@ 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;
+    colorScheme?: ColorSchemeTypes;
     /**
      * Children
      */
@@ -63,7 +67,7 @@ type ColorSchemeWrapperProps = ComponentPropsWithoutRef<'div'> & {
  * A wrapper to apply a color scheme to its children.
  */
 declare const ColorSchemeWrapper: {
-    ({ colorScheme, children, ...otherProps }: ColorSchemeWrapperProps): JSX.Element;
+    ({ __nav, colorScheme, children, ...otherProps }: ColorSchemeWrapperProps): JSX.Element;
     displayName: string;
 };
 
@@ -83,8 +87,7 @@ type BaseProps = {
      */
     children: ReactNode;
     /**
-     * Set the color scheme of the button
-     * TODO - link to a color scheme page
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `Link`
      */
     colorScheme?: ColorSchemeTypes;
     /**
@@ -139,8 +142,7 @@ type BaseButtonProps = {
      */
     children?: ReactNode;
     /**
-     * Set the color scheme of the button
-     * TODO - link to a color scheme page
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `Button`
      */
     colorScheme?: ColorSchemeTypes;
     /**
@@ -288,8 +290,7 @@ declare const Avatar: {
 
 type BadgeProps = ComponentPropsWithoutRef<'div'> & {
     /**
-     * Set the color scheme of the `Badge`
-     * TODO - link to a color scheme page
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `Badge`
      */
     colorScheme?: ColorSchemeTypes;
     /**
@@ -306,8 +307,7 @@ type BadgeProps = ComponentPropsWithoutRef<'div'> & {
  */
 declare const Badge: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     /**
-     * Set the color scheme of the `Badge`
-     * TODO - link to a color scheme page
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `Badge`
      */
     colorScheme?: ColorSchemeTypes;
     /**
@@ -835,7 +835,7 @@ declare const Heading: (<C = "h1">(props: PolymorphicComponentProps<C, HeadingPr
      */
     variant?: keyof typeof variantStyleMap$1;
 } & {
-    renderAs: react.JSXElementConstructor<any> | keyof react.JSX.IntrinsicElements;
+    renderAs: keyof react.JSX.IntrinsicElements | react.JSXElementConstructor<any>;
 })>, never> & Record<string, never>;
 
 declare const iconMap: {
@@ -1004,8 +1004,7 @@ declare const iconSizeMap: {
 };
 type IconProps = ComponentPropsWithoutRef<'svg'> & {
     /**
-     * Set the color scheme of the button
-     * TODO - link to a color scheme page
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `Icon`
      */
     colorScheme?: ColorSchemeTypes;
     /**
@@ -1471,7 +1470,7 @@ declare const Text: (<C = "div">(props: PolymorphicComponentProps<C, TextProps>)
      */
     variant?: keyof typeof variantStyleMap | undefined;
 } & {
-    renderAs: react.JSXElementConstructor<any> | keyof react.JSX.IntrinsicElements;
+    renderAs: keyof react.JSX.IntrinsicElements | react.JSXElementConstructor<any>;
 })>, never> & Record<string, never>;
 
 type MenuItemLabelProps = {
@@ -1698,12 +1697,12 @@ declare const Stack: (<C = "div">(props: PolymorphicComponentProps<C, StackProps
 } & StackProps & {
     ref?: any;
 }) | (StackProps & {
-    renderAs: react.JSXElementConstructor<any> | keyof react.JSX.IntrinsicElements;
+    renderAs: keyof react.JSX.IntrinsicElements | react.JSXElementConstructor<any>;
 })>, never> & Record<string, never>;
 
 type TagProps = ComponentPropsWithoutRef<'div'> & {
     /**
-     * Set the [color scheme](/?path=/docs/docs-color-schemes--docs) of the `Tag`
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `Tag`
      */
     colorScheme?: ColorSchemeTypes;
     /**
@@ -1728,7 +1727,7 @@ type TagProps = ComponentPropsWithoutRef<'div'> & {
  */
 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`
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `Tag`
      */
     colorScheme?: ColorSchemeTypes;
     /**
@@ -1828,4 +1827,68 @@ declare const WistiaLogo: {
     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, useToast, useWindowSize };
+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, 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 } from 'react';
+import { ReactNode, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ChangeEvent, ForwardedRef, Ref, JSXElementConstructor, ElementType as ElementType$1, InputHTMLAttributes } 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';
@@ -50,10 +50,14 @@ 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;
+    colorScheme?: ColorSchemeTypes;
     /**
      * Children
      */
@@ -63,7 +67,7 @@ type ColorSchemeWrapperProps = ComponentPropsWithoutRef<'div'> & {
  * A wrapper to apply a color scheme to its children.
  */
 declare const ColorSchemeWrapper: {
-    ({ colorScheme, children, ...otherProps }: ColorSchemeWrapperProps): JSX.Element;
+    ({ __nav, colorScheme, children, ...otherProps }: ColorSchemeWrapperProps): JSX.Element;
     displayName: string;
 };
 
@@ -83,8 +87,7 @@ type BaseProps = {
      */
     children: ReactNode;
     /**
-     * Set the color scheme of the button
-     * TODO - link to a color scheme page
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `Link`
      */
     colorScheme?: ColorSchemeTypes;
     /**
@@ -139,8 +142,7 @@ type BaseButtonProps = {
      */
     children?: ReactNode;
     /**
-     * Set the color scheme of the button
-     * TODO - link to a color scheme page
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `Button`
      */
     colorScheme?: ColorSchemeTypes;
     /**
@@ -288,8 +290,7 @@ declare const Avatar: {
 
 type BadgeProps = ComponentPropsWithoutRef<'div'> & {
     /**
-     * Set the color scheme of the `Badge`
-     * TODO - link to a color scheme page
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `Badge`
      */
     colorScheme?: ColorSchemeTypes;
     /**
@@ -306,8 +307,7 @@ type BadgeProps = ComponentPropsWithoutRef<'div'> & {
  */
 declare const Badge: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     /**
-     * Set the color scheme of the `Badge`
-     * TODO - link to a color scheme page
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `Badge`
      */
     colorScheme?: ColorSchemeTypes;
     /**
@@ -835,7 +835,7 @@ declare const Heading: (<C = "h1">(props: PolymorphicComponentProps<C, HeadingPr
      */
     variant?: keyof typeof variantStyleMap$1;
 } & {
-    renderAs: react.JSXElementConstructor<any> | keyof react.JSX.IntrinsicElements;
+    renderAs: keyof react.JSX.IntrinsicElements | react.JSXElementConstructor<any>;
 })>, never> & Record<string, never>;
 
 declare const iconMap: {
@@ -1004,8 +1004,7 @@ declare const iconSizeMap: {
 };
 type IconProps = ComponentPropsWithoutRef<'svg'> & {
     /**
-     * Set the color scheme of the button
-     * TODO - link to a color scheme page
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `Icon`
      */
     colorScheme?: ColorSchemeTypes;
     /**
@@ -1471,7 +1470,7 @@ declare const Text: (<C = "div">(props: PolymorphicComponentProps<C, TextProps>)
      */
     variant?: keyof typeof variantStyleMap | undefined;
 } & {
-    renderAs: react.JSXElementConstructor<any> | keyof react.JSX.IntrinsicElements;
+    renderAs: keyof react.JSX.IntrinsicElements | react.JSXElementConstructor<any>;
 })>, never> & Record<string, never>;
 
 type MenuItemLabelProps = {
@@ -1698,12 +1697,12 @@ declare const Stack: (<C = "div">(props: PolymorphicComponentProps<C, StackProps
 } & StackProps & {
     ref?: any;
 }) | (StackProps & {
-    renderAs: react.JSXElementConstructor<any> | keyof react.JSX.IntrinsicElements;
+    renderAs: keyof react.JSX.IntrinsicElements | react.JSXElementConstructor<any>;
 })>, never> & Record<string, never>;
 
 type TagProps = ComponentPropsWithoutRef<'div'> & {
     /**
-     * Set the [color scheme](/?path=/docs/docs-color-schemes--docs) of the `Tag`
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `Tag`
      */
     colorScheme?: ColorSchemeTypes;
     /**
@@ -1728,7 +1727,7 @@ type TagProps = ComponentPropsWithoutRef<'div'> & {
  */
 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`
+     * Set the [color scheme](../?path=/docs/docs-color-schemes--docs) of the `Tag`
      */
     colorScheme?: ColorSchemeTypes;
     /**
@@ -1828,4 +1827,68 @@ declare const WistiaLogo: {
     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, useToast, useWindowSize };
+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, 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 };