@wistia/ui 0.4.10-beta.ec177e4f.e232e9c → 0.4.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, Dispatch, SetStateAction, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ChangeEvent, ForwardedRef, Ref, ElementType, InputHTMLAttributes, RefObject, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { ReactNode, Dispatch, SetStateAction, ComponentPropsWithoutRef, JSX, ComponentPropsWithRef, MouseEvent, ChangeEvent, ForwardedRef, Ref, JSXElementConstructor, ElementType as ElementType$1, InputHTMLAttributes, RefObject, ForwardRefExoticComponent, RefAttributes } from 'react';
 import { LinkProps as LinkProps$1 } from 'react-router-dom';
 import * as styled_components from 'styled-components';
 import { DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuRadioGroupProps, DropdownMenuRadioItemProps, DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu';
@@ -528,95 +528,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: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    /**
-     * Specifies how the browser distributes space between and around
-     * items along the cross-axis of their container; has no effect on
-     * single line flexible boxes
-     */
-    alignContent?: AlignContentType;
-    /**
-     * Specifies how the browser distributes space between and around
-     * items along the cross-axis of their container; the difference
-     * to the alignContent prop is that alignItems specifies the
-     * alignment of the items within the current container's line,
-     * whereas alignContent specifies the alignment of the lines themselves
-     */
-    alignItems?: AlignItemsType;
-    /**
-     * Specifies how the browser aligns items of the current line, overriding the
-     * alignItems value of parent; if any of the item's cross-axis margin is set to auto,
-     * then alignSelf is ignored
-     *
-     * *Note: only works for nested `<Box />`*
-     */
-    alignSelf?: AlignSelfType;
-    /**
-     * Specifies the initial main size of an item
-     *
-     * *Note: only works for nested `<Box />`*
-     */
-    basis?: string;
-    /**
-     * Pass an arbitrary child node
-     */
-    children?: ReactNode;
-    /**
-     * Specifies the main axis of the container
-     */
-    direction?: DirectionType;
-    /**
-     * Specifies whether the width and/or height should fill the container
-     */
-    fill?: FillType;
-    /**
-     * Specifies whether the width and/or height should fill the viewport
-     */
-    fillViewport?: FillType;
-    /**
-     * Specifies the gaps (gutters) between rows and columns
-     */
-    gap?: Gap | Spacings;
-    /**
-     * Specifies what amount of space inside the flex container the item should take up
-     *
-     * *Note: only works for nested `<Box />`*
-     */
-    grow?: number | string;
-    /**
-     * @ignore
-     * Used internally to track if a Box is a child of another Box component
-     */
-    hasBoxParent?: boolean;
-    /**
-     * Make Layout behave like an inline element but still lay out its content according to flexbox model
-     */
-    inline?: boolean;
-    /**
-     * Specifies how the browser distributes space between and around
-     * items along the main axis of their container
-     */
-    justifyContent?: JustifyContentType;
-    /**
-     * Specifies the order used to lay out an item in its container. Items within the same
-     * container are rendered in ascending order according to their order values.
-     * Elements with the _same_ order value are rendered in the order in which they appear in code
-     *
-     * *Note: only works for nested `<Box />`*
-     */
-    order?: number | "inherit" | "initial" | "unset";
-    /**
-     * Specifies how items will shrink inside the container when the default size of
-     * items is larger than their container
-     *
-     * *Note: only works for nested `<Box />`*
-     */
-    shrink?: number;
-    /**
-     * Specifies whether items are forced into a single line or can be wrapped onto multiple lines
-     */
-    wrapItems?: boolean;
-} & react.RefAttributes<HTMLDivElement>>;
+declare const Box: {
+    ({ alignContent, alignItems, alignSelf, basis, children, direction, fill, fillViewport, gap, grow, hasBoxParent, inline, justifyContent, order, shrink, wrapItems, ...otherProps }: BoxProps): JSX.Element;
+    displayName: string;
+};
 
 type BreadcrumbsProps = ComponentPropsWithoutRef<'div'> & {
     /**
@@ -978,18 +893,24 @@ declare const CheckboxGroup: {
     displayName: string;
 };
 
-type UnknownRecord = Record<string, unknown>;
-type PropsOf<Component extends ElementType> = ComponentPropsWithoutRef<Component>;
-type ExtendedProps<Props = UnknownRecord, OverrideProps = UnknownRecord> = Omit<Props, keyof OverrideProps> & OverrideProps;
-type ComponentProp<Component extends ElementType> = {
-    renderAs?: Component;
+type ExtendedProps<Props = Record<string, unknown>, OverrideProps = Record<string, unknown>> = Omit<Props, keyof OverrideProps> & OverrideProps;
+type ElementType = JSXElementConstructor<any> | keyof JSX.IntrinsicElements;
+type PropsOf<C extends ElementType> = JSX.LibraryManagedAttributes<C, ComponentPropsWithoutRef<C>>;
+type ComponentProp<C> = {
+    /**
+     *  Render a different element or component
+     *
+     * @type ElementType | ComponentType
+     * @default 'div'
+     */
+    renderAs?: C;
 };
-/**
- * extend the polymorphic component props to always include children
- */
-type PolymorphicComponentProps<Component extends ElementType, Props = UnknownRecord> = ExtendedProps<PropsOf<Component>, ComponentProp<Component> & Props> & {
-    children?: ReactNode;
-    ref?: ComponentPropsWithRef<Component>['ref'];
+type InheritedProps<C extends ElementType, Props = Record<string, unknown>> = ExtendedProps<PropsOf<C>, Props>;
+type PolymorphicRef<C> = C extends ElementType ? ComponentPropsWithRef<C>['ref'] : never;
+type PolymorphicComponentProps<C, Props = Record<string, unknown>> = C extends ElementType ? InheritedProps<C, ComponentProp<C> & Props> & {
+    ref?: PolymorphicRef<C>;
+} : Props & {
+    renderAs: ElementType;
 };
 
 type AlignmentTypes$1 = 'center' | 'justify' | 'left' | 'right';
@@ -1036,7 +957,7 @@ type HeadingProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT> & {
      * Prevents text from being highlighted and copied
      */
     preventUserSelect?: boolean;
-    renderAs?: ElementType;
+    renderAs?: ElementType$1;
     /**
      * The text style to display. This will also affect what element (h1, h2, etc) is rendered, unless the `renderAs` prop is used
      */
@@ -1045,9 +966,89 @@ type HeadingProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT> & {
 /**
  * Displaying heading text, both visually and semantically
  */
-declare const Heading: (<C extends ElementType = "h1">(props: PolymorphicComponentProps<C, HeadingProps>) => react.ReactElement | null) & {
-    [x: string]: unknown;
-};
+declare const Heading: (<C = "h1">(props: PolymorphicComponentProps<C, HeadingProps>) => react.ReactElement) & Omit<react.FunctionComponent<(Omit<Omit<any, "ref">, "key" | "disabled" | keyof react.HTMLAttributes<HTMLHeadingElement> | "align" | "ellipsis" | "inline" | "colorScheme" | "variant" | "renderAs" | "preventUserSelect"> & {
+    renderAs?: any;
+} & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
+    /**
+     * The horizontal alignment
+     * <br />
+     * _Note: this only affects block elements_
+     */
+    align?: AlignmentTypes$1;
+    /**
+     * The content of the heading
+     */
+    children: ReactNode;
+    /**
+     * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * Styles to text as disabled
+     */
+    disabled?: boolean;
+    /**
+     * Attempt to keep the text to a single line by truncating with an ellipsis
+     * <br />
+     * _Note: this only affects block elements_
+     */
+    ellipsis?: boolean;
+    /**
+     * Display the text as inline content
+     */
+    inline?: boolean;
+    /**
+     * Prevents text from being highlighted and copied
+     */
+    preventUserSelect?: boolean;
+    renderAs?: ElementType$1;
+    /**
+     * The text style to display. This will also affect what element (h1, h2, etc) is rendered, unless the `renderAs` prop is used
+     */
+    variant?: keyof typeof variantStyleMap$1;
+} & {
+    ref?: any;
+}) | (Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
+    /**
+     * The horizontal alignment
+     * <br />
+     * _Note: this only affects block elements_
+     */
+    align?: AlignmentTypes$1;
+    /**
+     * The content of the heading
+     */
+    children: ReactNode;
+    /**
+     * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * Styles to text as disabled
+     */
+    disabled?: boolean;
+    /**
+     * Attempt to keep the text to a single line by truncating with an ellipsis
+     * <br />
+     * _Note: this only affects block elements_
+     */
+    ellipsis?: boolean;
+    /**
+     * Display the text as inline content
+     */
+    inline?: boolean;
+    /**
+     * Prevents text from being highlighted and copied
+     */
+    preventUserSelect?: boolean;
+    renderAs?: ElementType$1;
+    /**
+     * The text style to display. This will also affect what element (h1, h2, etc) is rendered, unless the `renderAs` prop is used
+     */
+    variant?: keyof typeof variantStyleMap$1;
+} & {
+    renderAs: keyof react.JSX.IntrinsicElements | react.JSXElementConstructor<any>;
+})>, never> & Record<string, never>;
 
 declare const iconMap: {
     'ab-test': (props: react.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
@@ -1632,7 +1633,7 @@ type TextProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * This will inherit the jsdoc block from PolymorphicComponent
      */
-    renderAs?: ElementType;
+    renderAs?: ElementType$1;
     /**
      * The text style to display
      */
@@ -1641,9 +1642,103 @@ type TextProps = ComponentPropsWithoutRef<'div'> & {
 /**
  * Used for rending paragraphs and inline text.
  */
-declare const Text: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, TextProps>) => react.ReactElement | null) & {
-    [x: string]: unknown;
-};
+declare const Text: (<C = "div">(props: PolymorphicComponentProps<C, TextProps>) => react.ReactElement) & Omit<react.FunctionComponent<(Omit<Omit<any, "ref">, "key" | "disabled" | keyof react.HTMLAttributes<HTMLDivElement> | "align" | "ellipsis" | "inline" | "colorScheme" | "variant" | "prominence" | "renderAs" | "preventUserSelect"> & {
+    renderAs?: any;
+} & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * The horizontal alignment
+     * <br />
+     * _Note: this only affects block elements_
+     */
+    align?: AlignmentTypes;
+    /**
+     * The text content
+     */
+    children?: ReactNode | undefined;
+    /**
+     * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * Allows user to override default button colors
+     */
+    disabled?: boolean;
+    /**
+     * Attempt to keep the text to a single line by truncating with an ellipsis
+     * <br />
+     * _Note: this only affects block elements_
+     */
+    ellipsis?: boolean;
+    /**
+     * Display the text as inline content
+     */
+    inline?: boolean;
+    /**
+     * Prevents text from being highlighted and copied
+     */
+    preventUserSelect?: boolean;
+    /**
+     * Text prominence affects color. Use 'primary' for main non-interactive text, 'secondary' for supporting text, and 'button' in specific cases where text is used in an interactive component.
+     */
+    prominence?: "button" | "primary" | "secondary";
+    /**
+     * This will inherit the jsdoc block from PolymorphicComponent
+     */
+    renderAs?: ElementType$1;
+    /**
+     * The text style to display
+     */
+    variant?: keyof typeof variantStyleMap | undefined;
+} & {
+    ref?: any;
+}) | (Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    /**
+     * The horizontal alignment
+     * <br />
+     * _Note: this only affects block elements_
+     */
+    align?: AlignmentTypes;
+    /**
+     * The text content
+     */
+    children?: ReactNode | undefined;
+    /**
+     * Sets the [color scheme](../?path=/docs/docs-color-schemes--docs)
+     */
+    colorScheme?: ColorSchemeTypes;
+    /**
+     * Allows user to override default button colors
+     */
+    disabled?: boolean;
+    /**
+     * Attempt to keep the text to a single line by truncating with an ellipsis
+     * <br />
+     * _Note: this only affects block elements_
+     */
+    ellipsis?: boolean;
+    /**
+     * Display the text as inline content
+     */
+    inline?: boolean;
+    /**
+     * Prevents text from being highlighted and copied
+     */
+    preventUserSelect?: boolean;
+    /**
+     * Text prominence affects color. Use 'primary' for main non-interactive text, 'secondary' for supporting text, and 'button' in specific cases where text is used in an interactive component.
+     */
+    prominence?: "button" | "primary" | "secondary";
+    /**
+     * This will inherit the jsdoc block from PolymorphicComponent
+     */
+    renderAs?: ElementType$1;
+    /**
+     * The text style to display
+     */
+    variant?: keyof typeof variantStyleMap | undefined;
+} & {
+    renderAs: keyof react.JSX.IntrinsicElements | react.JSXElementConstructor<any>;
+})>, never> & Record<string, never>;
 
 type MenuItemLabelProps = {
     /**
@@ -2011,15 +2106,19 @@ type StackProps = {
      * The default behavior is `vertical`. Can be a [responsive prop](/docs/ui-docs-responsive-props--docs).
      */
     direction?: 'horizontal' | 'vertical';
-    renderAs?: ElementType;
+    renderAs?: ElementType$1;
 };
 /**
  * Used to layout its children in a vertical or horizontal stack. The gap between each item in the stack can be customized.
  * This allows for layouting children in a consistent way without needing to manually add margins or padding.
  */
-declare const Stack: (<C extends ElementType = "div">(props: PolymorphicComponentProps<C, StackProps>) => react.ReactElement | null) & {
-    [x: string]: unknown;
-};
+declare const Stack: (<C = "div">(props: PolymorphicComponentProps<C, StackProps>) => react.ReactElement) & Omit<react.FunctionComponent<(Omit<Omit<any, "ref">, keyof StackProps> & {
+    renderAs?: any;
+} & StackProps & {
+    ref?: any;
+}) | (StackProps & {
+    renderAs: keyof react.JSX.IntrinsicElements | react.JSXElementConstructor<any>;
+})>, never> & Record<string, never>;
 
 type TagProps = ComponentPropsWithoutRef<'div'> & {
     /**