import { ComponentPropsWithRef, ComponentPropsWithoutRef, ElementType, ForwardRefExoticComponent, PropsWithChildren, ReactElement, ReactNode } from 'react'; import { ProgressColor } from './styles'; export type GetStatusProps = { status?: 'normal' | 'success' | 'error'; }; export type UseMessageProps = GetStatusProps & { id: string; message?: ReactNode; }; export type GetChipProps = { children?: ReactNode; iconName?: string | null; contentBefore?: ReactNode; contentAfter?: ReactNode; size?: 'small' | 'medium'; }; export type Spacing = 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs'; export type LabelColor = 'green' | 'blue' | 'purple' | 'navy' | 'orange' | 'yellow' | 'red' | 'light-gray' | 'dark-gray'; export type ProgressProps = ComponentPropsWithRef<'progress'> & { label: string; id: string; max: number; value: number; color?: keyof typeof ProgressColor; [key: `data-${string}`]: string; }; export type CellSize = 'auto' | 'fill' | 'masonry' | 'none' | 'subgrid' | `${'max' | 'min'}-content` | `${number}${string}` | `fit-content(${string})` | `minmax(${string})` | `repeat(${string})` | number; /** props applied to all polymorphic components */ export type BasePolymorphicComponentProps = { component?: C; }; /** * utility type used to define the names of all props unique to a polymorphic component. * * @example * * ```ts * type BaseButtonProps = { * size: "small" | "medium" | "large" * } * type BaseButtonPropKeys = PolyMorphicComponentPropNames * // BaseButtonPropKeys = "component" | size" * ``` * */ export type PolyMorphicComponentPropNames = keyof (BasePolymorphicComponentProps & P); /** * utility type used to define all props belonging to a polymorphic component. This includes * omitting any props belonging to a passed component that are already defined by the polymorphic * component's props. * * @example * * ```ts * type BaseButtonProps = { * // "title" is a global HTML attribute so it will collide with any passed component that is a HTMLElement, e.g. as='button' * title: "My" | "Custom" | "Title" | "Type"; * } * type ButtonProps = PolymorphicComponentProps * // ButtonProps<'button'>['title'] = "My" | "Custom" | "Title" | "Type" * ``` * */ export type PolymorphicComponentProps = PropsWithChildren> & Omit, PolyMorphicComponentPropNames>; /** utility type used for defining the expected type for a ref of a polymorphic component */ export type PolymorphicRef = ComponentPropsWithRef['ref']; /** * utility type used to define all props belonging to a polymorphic component, including the * expected "ref" prop * * See {@link PolymorphicComponentProps} and {@link PolymorphicRef}. * */ export type PolymorphicComponentPropsWithRef = PolymorphicComponentProps & { ref?: PolymorphicRef; }; /** * Type for a polymorphic component created with forwardRef that can be used * with styled-components and maintains generic capabilities. * * This combines ForwardRefExoticComponent (which styled-components expects) * with a generic function signature for polymorphic behavior. * * @example * ```ts * const Button = forwardRef(BaseButton) as PolymorphicForwardRefComponent< * 'button', * BaseButtonProps * >; * ``` */ export type PolymorphicForwardRefComponent = ForwardRefExoticComponent> & { (props: PolymorphicComponentPropsWithRef): ReactElement | null; displayName?: string; }; /** * {@linkcode ComponentPropsWithRef}, omitting the given `Props`. */ export type OmitProps> = Omit, Props>;