@wistia/ui 0.0.8 → 0.0.10

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, JSX, ComponentPropsWithoutRef, ComponentPropsWithRef, MouseEvent, JSXElementConstructor, ElementType as ElementType$1 } from 'react';
+import { ReactNode, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, JSXElementConstructor, ElementType as ElementType$1 } from 'react';
 import { LinkProps as LinkProps$1 } from 'react-router-dom';
 import * as styled_components from 'styled-components';
 
@@ -56,6 +56,60 @@ type AriaLiveContextType = {
 };
 declare const useAriaLive: () => AriaLiveContextType;
 
+declare const colorSchemeOptions: readonly ["inherit", "default", "info", "success", "warning", "error", "blue", "green", "orange", "pink", "purple", "yellow"];
+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`
+     * TODO - link to a color scheme page
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * The `Icon` component to use. Must be an instance of [Icon](/?path=/docs/components-icon--docs)
+     */
+    icon?: JSX.Element;
+    /**
+     * The text to display in the `Badge`
+     */
+    label: string;
+};
+/**
+ * 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"> & {
+    /**
+     * Set the color scheme of the `Badge`
+     * TODO - link to a color scheme page
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * The `Icon` component to use. Must be an instance of [Icon](/?path=/docs/components-icon--docs)
+     */
+    icon?: JSX.Element;
+    /**
+     * The text to display in the `Badge`
+     */
+    label: string;
+} & react.RefAttributes<HTMLDivElement>>;
+
 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';
 type AlignItemsType = 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch';
@@ -66,6 +120,16 @@ type Gap = {
     column: number | string;
     row: number | string;
 };
+/**
+ * CSS property => Box prop:
+ * flex-direction => direction
+ * justify-content => justifyContent
+ * align-items => alignItems
+ * align-content => alignContent
+ * flex-wrap => wrapItems
+ * gap => gap
+ * display: inline-flex => inline
+ */
 type BoxProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Specifies how the browser distributes space between and around
@@ -159,15 +223,12 @@ type BoxProps = ComponentPropsWithoutRef<'div'> & {
  * Box is a layout container using [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox).
  */
 declare const Box: {
-    ({ alignContent, alignItems, children, direction, hasBoxParent, fill, fillViewport, inline, justifyContent, wrapItems, ...otherProps }: BoxProps): JSX.Element;
+    ({ alignContent, alignItems, children, direction, hasBoxParent, fill, fillViewport, gap, inline, justifyContent, wrapItems, ...otherProps }: BoxProps): JSX.Element;
     displayName: string;
 };
 
-type ButtonSizes = 'hero' | 'large' | 'medium' | 'small';
 type ButtonVariants = 'ghost' | 'outline' | 'soft' | 'solid';
 
-type ColorSchemeTypes = 'inherit' | 'default' | 'info' | 'success' | 'warning' | 'error' | 'blue' | 'green' | 'orange' | 'pink' | 'purple' | 'yellow';
-
 type LinkTypes = 'default' | 'email' | 'external' | 'phone';
 type BaseProps = {
     /**
@@ -229,6 +290,7 @@ type ResponsiveObject<T> = AtLeastOneBreakpoint<Record<Breakpoints, T>> & {
     base: T;
 };
 
+type ButtonSizes = 'lg' | 'md' | 'sm' | 'xl';
 type BaseButtonProps = {
     /**
      * Text that appears inside of the button
@@ -268,7 +330,7 @@ type BaseButtonProps = {
      * 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)
@@ -280,8 +342,6 @@ type BaseButtonProps = {
     rightIcon?: JSX.Element | undefined;
     /**
      * The size of button to display. Can be used as a [responsive prop](/docs/ui-docs-responsive-props--docs)
-     *
-     * @type 'small' | 'medium' | 'large' | 'hero'
      */
     size?: ButtonSizes | ResponsiveObject<ButtonSizes>;
     /**
@@ -732,7 +792,9 @@ type IconButtonProps = {
      * Accessible text for screen readers. Also shows up in a tooltip unless `disableTooltip` is true.
      */
     label: string;
-    /** Disable the tooltip */
+    /**
+     * Disable the tooltip
+     */
     disableTooltip?: boolean;
     /**
      * The Icon component to use, e.g. `<Icon type="favorite" />`
@@ -748,7 +810,9 @@ declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
      * Accessible text for screen readers. Also shows up in a tooltip unless `disableTooltip` is true.
      */
     label: string;
-    /** Disable the tooltip */
+    /**
+     * Disable the tooltip
+     */
     disableTooltip?: boolean;
     /**
      * The Icon component to use, e.g. `<Icon type="favorite" />`
@@ -759,7 +823,9 @@ declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
      * Accessible text for screen readers. Also shows up in a tooltip unless `disableTooltip` is true.
      */
     label: string;
-    /** Disable the tooltip */
+    /**
+     * Disable the tooltip
+     */
     disableTooltip?: boolean;
     /**
      * The Icon component to use, e.g. `<Icon type="favorite" />`
@@ -767,6 +833,37 @@ declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
     children: JSX.Element;
 } & Omit<ButtonAsLinkProps, "leftIcon" | "fullWidth" | "rightIcon">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
+type LabelProps = ComponentPropsWithoutRef<'label'> & {
+    /**
+     * Pass an arbitrary child node
+     */
+    children?: ReactNode;
+    /**
+     * To indicate that the label is for a disabled form component
+     */
+    disabled?: boolean;
+    /**
+     * ID of the form component that the label should be associated with
+     */
+    htmlFor?: string | undefined;
+    /**
+     * Use if label describes a required form component
+     */
+    required?: boolean;
+    /**
+     * For label text that needs to be available to assistive technology (e.g. screen readers)
+     * but otherwise hidden on screen.
+     */
+    screenReaderOnly?: boolean;
+};
+/**
+ * Labels are used to give a title to a form component (eg. Input, Select, etc.)
+ */
+declare const Label: {
+    ({ children, disabled, htmlFor, required, screenReaderOnly, ...otherProps }: LabelProps): JSX.Element;
+    displayName: string;
+};
+
 type ScreenReaderOnlyProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Pass an arbitrary child node
@@ -793,17 +890,18 @@ declare const ScreenReaderOnly: {
 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 StackProps = {
+    /**
+     * Optional children
+     */
     children?: ReactNode | undefined;
     /**
      * The gap between each item in the stack. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
      * TODO: add link to Spacing docs
-     *
      */
     gap?: Spacings;
     /**
      * Vertical is equivalent to `flex-direction: column;`, horizontal is equivalent to `flex-direction: row;`.
      * The default behavior is `vertical`. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
-     *
      */
     direction?: 'horizontal' | 'vertical';
     renderAs?: ElementType$1;
@@ -1057,4 +1155,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-export { Box, Button, ButtonGroup, type ButtonProps, Divider, Ellipsis, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Link, type LinkProps, ScreenReaderOnly, Stack, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useMq, useWindowSize };
+export { Badge, type BadgeProps, Box, type BoxProps, Button, ButtonGroup, type ButtonProps, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Label, type LabelProps, Link, type LinkProps, ScreenReaderOnly, Stack, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useMq, 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, JSX, ComponentPropsWithoutRef, ComponentPropsWithRef, MouseEvent, JSXElementConstructor, ElementType as ElementType$1 } from 'react';
+import { ReactNode, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, JSXElementConstructor, ElementType as ElementType$1 } from 'react';
 import { LinkProps as LinkProps$1 } from 'react-router-dom';
 import * as styled_components from 'styled-components';
 
@@ -56,6 +56,60 @@ type AriaLiveContextType = {
 };
 declare const useAriaLive: () => AriaLiveContextType;
 
+declare const colorSchemeOptions: readonly ["inherit", "default", "info", "success", "warning", "error", "blue", "green", "orange", "pink", "purple", "yellow"];
+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`
+     * TODO - link to a color scheme page
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * The `Icon` component to use. Must be an instance of [Icon](/?path=/docs/components-icon--docs)
+     */
+    icon?: JSX.Element;
+    /**
+     * The text to display in the `Badge`
+     */
+    label: string;
+};
+/**
+ * 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"> & {
+    /**
+     * Set the color scheme of the `Badge`
+     * TODO - link to a color scheme page
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * The `Icon` component to use. Must be an instance of [Icon](/?path=/docs/components-icon--docs)
+     */
+    icon?: JSX.Element;
+    /**
+     * The text to display in the `Badge`
+     */
+    label: string;
+} & react.RefAttributes<HTMLDivElement>>;
+
 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';
 type AlignItemsType = 'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch';
@@ -66,6 +120,16 @@ type Gap = {
     column: number | string;
     row: number | string;
 };
+/**
+ * CSS property => Box prop:
+ * flex-direction => direction
+ * justify-content => justifyContent
+ * align-items => alignItems
+ * align-content => alignContent
+ * flex-wrap => wrapItems
+ * gap => gap
+ * display: inline-flex => inline
+ */
 type BoxProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Specifies how the browser distributes space between and around
@@ -159,15 +223,12 @@ type BoxProps = ComponentPropsWithoutRef<'div'> & {
  * Box is a layout container using [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox).
  */
 declare const Box: {
-    ({ alignContent, alignItems, children, direction, hasBoxParent, fill, fillViewport, inline, justifyContent, wrapItems, ...otherProps }: BoxProps): JSX.Element;
+    ({ alignContent, alignItems, children, direction, hasBoxParent, fill, fillViewport, gap, inline, justifyContent, wrapItems, ...otherProps }: BoxProps): JSX.Element;
     displayName: string;
 };
 
-type ButtonSizes = 'hero' | 'large' | 'medium' | 'small';
 type ButtonVariants = 'ghost' | 'outline' | 'soft' | 'solid';
 
-type ColorSchemeTypes = 'inherit' | 'default' | 'info' | 'success' | 'warning' | 'error' | 'blue' | 'green' | 'orange' | 'pink' | 'purple' | 'yellow';
-
 type LinkTypes = 'default' | 'email' | 'external' | 'phone';
 type BaseProps = {
     /**
@@ -229,6 +290,7 @@ type ResponsiveObject<T> = AtLeastOneBreakpoint<Record<Breakpoints, T>> & {
     base: T;
 };
 
+type ButtonSizes = 'lg' | 'md' | 'sm' | 'xl';
 type BaseButtonProps = {
     /**
      * Text that appears inside of the button
@@ -268,7 +330,7 @@ type BaseButtonProps = {
      * 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)
@@ -280,8 +342,6 @@ type BaseButtonProps = {
     rightIcon?: JSX.Element | undefined;
     /**
      * The size of button to display. Can be used as a [responsive prop](/docs/ui-docs-responsive-props--docs)
-     *
-     * @type 'small' | 'medium' | 'large' | 'hero'
      */
     size?: ButtonSizes | ResponsiveObject<ButtonSizes>;
     /**
@@ -732,7 +792,9 @@ type IconButtonProps = {
      * Accessible text for screen readers. Also shows up in a tooltip unless `disableTooltip` is true.
      */
     label: string;
-    /** Disable the tooltip */
+    /**
+     * Disable the tooltip
+     */
     disableTooltip?: boolean;
     /**
      * The Icon component to use, e.g. `<Icon type="favorite" />`
@@ -748,7 +810,9 @@ declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
      * Accessible text for screen readers. Also shows up in a tooltip unless `disableTooltip` is true.
      */
     label: string;
-    /** Disable the tooltip */
+    /**
+     * Disable the tooltip
+     */
     disableTooltip?: boolean;
     /**
      * The Icon component to use, e.g. `<Icon type="favorite" />`
@@ -759,7 +823,9 @@ declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
      * Accessible text for screen readers. Also shows up in a tooltip unless `disableTooltip` is true.
      */
     label: string;
-    /** Disable the tooltip */
+    /**
+     * Disable the tooltip
+     */
     disableTooltip?: boolean;
     /**
      * The Icon component to use, e.g. `<Icon type="favorite" />`
@@ -767,6 +833,37 @@ declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
     children: JSX.Element;
 } & Omit<ButtonAsLinkProps, "leftIcon" | "fullWidth" | "rightIcon">, "ref">) & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
+type LabelProps = ComponentPropsWithoutRef<'label'> & {
+    /**
+     * Pass an arbitrary child node
+     */
+    children?: ReactNode;
+    /**
+     * To indicate that the label is for a disabled form component
+     */
+    disabled?: boolean;
+    /**
+     * ID of the form component that the label should be associated with
+     */
+    htmlFor?: string | undefined;
+    /**
+     * Use if label describes a required form component
+     */
+    required?: boolean;
+    /**
+     * For label text that needs to be available to assistive technology (e.g. screen readers)
+     * but otherwise hidden on screen.
+     */
+    screenReaderOnly?: boolean;
+};
+/**
+ * Labels are used to give a title to a form component (eg. Input, Select, etc.)
+ */
+declare const Label: {
+    ({ children, disabled, htmlFor, required, screenReaderOnly, ...otherProps }: LabelProps): JSX.Element;
+    displayName: string;
+};
+
 type ScreenReaderOnlyProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Pass an arbitrary child node
@@ -793,17 +890,18 @@ declare const ScreenReaderOnly: {
 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 StackProps = {
+    /**
+     * Optional children
+     */
     children?: ReactNode | undefined;
     /**
      * The gap between each item in the stack. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
      * TODO: add link to Spacing docs
-     *
      */
     gap?: Spacings;
     /**
      * Vertical is equivalent to `flex-direction: column;`, horizontal is equivalent to `flex-direction: row;`.
      * The default behavior is `vertical`. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
-     *
      */
     direction?: 'horizontal' | 'vertical';
     renderAs?: ElementType$1;
@@ -1057,4 +1155,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-export { Box, Button, ButtonGroup, type ButtonProps, Divider, Ellipsis, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Link, type LinkProps, ScreenReaderOnly, Stack, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useMq, useWindowSize };
+export { Badge, type BadgeProps, Box, type BoxProps, Button, ButtonGroup, type ButtonProps, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, Divider, Ellipsis, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Label, type LabelProps, Link, type LinkProps, ScreenReaderOnly, Stack, Text, type TextProps, Tooltip, type TooltipProps, UIProvider, WistiaLogo, colorSchemeOptions, copyToClipboard, ellipsisFlexParentStyle, ellipsisStyle, iconSizeMap, mq, useActiveMq, useAriaLive, useMq, useWindowSize };