@wistia/ui 0.0.8 → 0.0.9

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,43 @@ 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 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';
@@ -166,8 +203,6 @@ declare const Box: {
 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 = {
     /**
@@ -732,7 +767,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 +785,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 +798,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" />`
@@ -1057,4 +1098,22 @@ 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 };
+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 };

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,43 @@ 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 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';
@@ -166,8 +203,6 @@ declare const Box: {
 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 = {
     /**
@@ -732,7 +767,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 +785,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 +798,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" />`
@@ -1057,4 +1098,22 @@ 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 };
+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 };