@wistia/ui 0.0.10 → 0.0.12

package/dist/index.d.mts

@@ -56,6 +56,39 @@ type AriaLiveContextType = {
 };
 declare const useAriaLive: () => AriaLiveContextType;
 
+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'> & {
@@ -975,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
@@ -1023,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
@@ -1067,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
@@ -1155,4 +1197,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-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 };
+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,6 +56,39 @@ type AriaLiveContextType = {
 };
 declare const useAriaLive: () => AriaLiveContextType;
 
+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'> & {
@@ -975,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
@@ -1023,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
@@ -1067,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
@@ -1155,4 +1197,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-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 };
+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 };