@wistia/ui 0.0.9 → 0.0.10

package/dist/index.d.mts

@@ -56,8 +56,25 @@ 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];
+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 +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
@@ -196,11 +223,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 +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
@@ -303,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)
@@ -315,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>;
     /**
@@ -808,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
@@ -834,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;
@@ -1098,22 +1155,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 { 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,25 @@ 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];
+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 +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
@@ -196,11 +223,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 +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
@@ -303,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)
@@ -315,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>;
     /**
@@ -808,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
@@ -834,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;
@@ -1098,22 +1155,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 { 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 };