@wistia/ui 0.0.9 → 0.0.11

package/dist/index.d.mts

@@ -56,8 +56,58 @@ type AriaLiveContextType = {
 };
 declare const useAriaLive: () => AriaLiveContextType;
 
-declare const colorSchemeValues: readonly ["inherit", "default", "info", "success", "warning", "error", "blue", "green", "orange", "pink", "purple", "yellow"];
-type ColorSchemeTypes = (typeof colorSchemeValues)[number];
+type AvatarInstanceType = 'image' | 'initials';
+type AvatarProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * The height and width of the avatar (overrides size prop)
+     */
+    heightAndWidth?: number;
+    /**
+     * The URL of the image to display
+     */
+    imageUrl?: string | null;
+    /**
+     * A string that will deterministically set the initials & background color of the avatar
+     *
+     * _note: only first initial shown regardless of characters provided_
+     */
+    name?: string | null;
+    /**
+     * A predefined size for the avatar
+     */
+    size?: 'lg' | 'md' | 'sm';
+    /**
+     * A callback that is invoked after the image has loaded or failed to load
+     */
+    onImageLoad?: (avatarType: AvatarInstanceType) => void;
+};
+/**
+ * An avatar uses a photo, initials or icon to represent an entity
+ */
+declare const Avatar: {
+    ({ imageUrl, heightAndWidth, name, size, onImageLoad, ...otherProps }: AvatarProps): JSX.Element;
+    displayName: string;
+};
+
+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'> & {
     /**
@@ -103,6 +153,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
@@ -196,11 +256,10 @@ 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 LinkTypes = 'default' | 'email' | 'external' | 'phone';
@@ -264,6 +323,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
@@ -303,7 +363,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)
@@ -315,8 +375,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>;
     /**
@@ -808,6 +866,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
@@ -834,17 +923,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;
@@ -918,6 +1008,9 @@ type TextProps = ComponentPropsWithoutRef<'div'> & {
      * Text prominence affects color. Use 'highContrast' for main non-interactive text, 'vibrant' for interactive elements, and 'secondary' for less important or supplementary content.
      */
     prominence?: keyof typeof prominenceMap;
+    /**
+     * This will inherit the jsdoc block from PolymorphicComponent
+     */
     renderAs?: ElementType$1;
     /**
      * The text style to display
@@ -966,6 +1059,9 @@ declare const Text: (<C = "div">(props: PolymorphicComponentProps<C, TextProps>)
      * Text prominence affects color. Use 'highContrast' for main non-interactive text, 'vibrant' for interactive elements, and 'secondary' for less important or supplementary content.
      */
     prominence?: keyof typeof prominenceMap;
+    /**
+     * This will inherit the jsdoc block from PolymorphicComponent
+     */
     renderAs?: ElementType$1;
     /**
      * The text style to display
@@ -1010,6 +1106,9 @@ declare const Text: (<C = "div">(props: PolymorphicComponentProps<C, TextProps>)
      * Text prominence affects color. Use 'highContrast' for main non-interactive text, 'vibrant' for interactive elements, and 'secondary' for less important or supplementary content.
      */
     prominence?: keyof typeof prominenceMap;
+    /**
+     * This will inherit the jsdoc block from PolymorphicComponent
+     */
     renderAs?: ElementType$1;
     /**
      * The text style to display
@@ -1098,22 +1197,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-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;
-};
-
-export { Badge, type BadgeProps, Box, Button, ButtonGroup, type ButtonProps, ColorSchemeWrapper, type ColorSchemeWrapperProps, 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 { Avatar, type AvatarInstanceType, type AvatarProps, 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

@@ -56,8 +56,58 @@ type AriaLiveContextType = {
 };
 declare const useAriaLive: () => AriaLiveContextType;
 
-declare const colorSchemeValues: readonly ["inherit", "default", "info", "success", "warning", "error", "blue", "green", "orange", "pink", "purple", "yellow"];
-type ColorSchemeTypes = (typeof colorSchemeValues)[number];
+type AvatarInstanceType = 'image' | 'initials';
+type AvatarProps = ComponentPropsWithoutRef<'div'> & {
+    /**
+     * The height and width of the avatar (overrides size prop)
+     */
+    heightAndWidth?: number;
+    /**
+     * The URL of the image to display
+     */
+    imageUrl?: string | null;
+    /**
+     * A string that will deterministically set the initials & background color of the avatar
+     *
+     * _note: only first initial shown regardless of characters provided_
+     */
+    name?: string | null;
+    /**
+     * A predefined size for the avatar
+     */
+    size?: 'lg' | 'md' | 'sm';
+    /**
+     * A callback that is invoked after the image has loaded or failed to load
+     */
+    onImageLoad?: (avatarType: AvatarInstanceType) => void;
+};
+/**
+ * An avatar uses a photo, initials or icon to represent an entity
+ */
+declare const Avatar: {
+    ({ imageUrl, heightAndWidth, name, size, onImageLoad, ...otherProps }: AvatarProps): JSX.Element;
+    displayName: string;
+};
+
+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'> & {
     /**
@@ -103,6 +153,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
@@ -196,11 +256,10 @@ 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 LinkTypes = 'default' | 'email' | 'external' | 'phone';
@@ -264,6 +323,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
@@ -303,7 +363,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)
@@ -315,8 +375,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>;
     /**
@@ -808,6 +866,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
@@ -834,17 +923,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;
@@ -918,6 +1008,9 @@ type TextProps = ComponentPropsWithoutRef<'div'> & {
      * Text prominence affects color. Use 'highContrast' for main non-interactive text, 'vibrant' for interactive elements, and 'secondary' for less important or supplementary content.
      */
     prominence?: keyof typeof prominenceMap;
+    /**
+     * This will inherit the jsdoc block from PolymorphicComponent
+     */
     renderAs?: ElementType$1;
     /**
      * The text style to display
@@ -966,6 +1059,9 @@ declare const Text: (<C = "div">(props: PolymorphicComponentProps<C, TextProps>)
      * Text prominence affects color. Use 'highContrast' for main non-interactive text, 'vibrant' for interactive elements, and 'secondary' for less important or supplementary content.
      */
     prominence?: keyof typeof prominenceMap;
+    /**
+     * This will inherit the jsdoc block from PolymorphicComponent
+     */
     renderAs?: ElementType$1;
     /**
      * The text style to display
@@ -1010,6 +1106,9 @@ declare const Text: (<C = "div">(props: PolymorphicComponentProps<C, TextProps>)
      * Text prominence affects color. Use 'highContrast' for main non-interactive text, 'vibrant' for interactive elements, and 'secondary' for less important or supplementary content.
      */
     prominence?: keyof typeof prominenceMap;
+    /**
+     * This will inherit the jsdoc block from PolymorphicComponent
+     */
     renderAs?: ElementType$1;
     /**
      * The text style to display
@@ -1098,22 +1197,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-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;
-};
-
-export { Badge, type BadgeProps, Box, Button, ButtonGroup, type ButtonProps, ColorSchemeWrapper, type ColorSchemeWrapperProps, 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 { Avatar, type AvatarInstanceType, type AvatarProps, 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 };