@foxford/ui 2.21.1 → 2.21.2-beta-a8b0c62-20240328

package/dts/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import * as react from 'react';
-import { Component, CSSProperties, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, PureComponent } from 'react';
+import { CSSProperties, Component, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, PureComponent } from 'react';
 import * as styled_components from 'styled-components';
 import { DefaultTheme, FlattenSimpleInterpolation, CSSObject, Interpolation, ThemeProps, SimpleInterpolation, css, StyledProps } from 'styled-components';
 import { Classes } from 'react-modal';
@@ -11,59 +11,6 @@ import { Styles, Props } from 'react-floater/lib/types';
 import { InputState, MaskOptions } from 'react-input-mask';
 import { ReactSelectProps } from 'react-select';
 
-declare type H = 'h1' | 'h2' | 'h3' | 'h4';
-interface TextHeadingProps extends Omit<TextProps, 'content' | 'as'> {
-    /** Default set of size, lineHeight and weight props */
-    h?: H;
-    /** Children react node */
-    children?: React.ReactNode;
-}
-
-/**
- * @visibleName Text.Heading
- */
-declare const TextHeading: {
-    (props: TextHeadingProps): JSX.Element;
-    displayName: string;
-};
-
-interface TextEllipseProps extends Omit<TextProps, 'content'> {
-    /** Toggle text for folded state */
-    moreText?: string;
-    /** Toggle text for unfolded state */
-    lessText?: string;
-    /** Classname */
-    className?: string;
-    /** Html content */
-    content: string | string[];
-    /** Characters quantity for ellipsed text */
-    chars?: number;
-    /** Wrap text in quotes */
-    quoted?: boolean;
-    /** Flag to show toggler */
-    showToggler?: boolean;
-}
-interface TextEllipseState {
-    isUnFolded: boolean;
-    isEllipsed: boolean;
-}
-/**
- * Расширен:
- * - [`BaseProps`](#/Миксины)
- * - [`Color`](#/Миксины)
- * - [`Display`](#/Миксины)
- * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)
- */
-declare class TextEllipse extends Component<TextEllipseProps, TextEllipseState> {
-    static displayName: string;
-    constructor(props: TextEllipseProps);
-    componentDidUpdate({ content }: TextEllipseProps): void;
-    getContent: (props: Omit<TextEllipseProps, 'className' | 'moreText' | 'lessText' | 'showToggler'>) => "" | JSX.Element;
-    getQuted: (content: string) => string;
-    toggle: () => void;
-    render(): JSX.Element;
-}
-
 declare enum DefaultColorNames {
     white = "white",
     black = "black",
@@ -872,110 +819,11 @@ declare type ThemePreset = 'default' | 'brand';
 declare type ThemeMode = 'light' | 'dark';
 declare type ThemeName = 'mother' | 'baby' | 'teen' | 'adult';
 
-declare type ResponsivePropKey = 'size' | keyof CSSProperties;
-declare type ResponsiveProps<K extends ResponsivePropKey, V> = {
-    [key in K]?: V | [DESKTOP: V, TABLET: V, MOBILE: V] | [XL: V, L: V, M: V, S: V, XS: V, XXS: V];
-} & {
-    [key in `${K}${Breakpoint}`]?: V;
-};
-
-declare type SizeProperty = 'size';
-declare type SizeValue = Size | CSSGlobalValue | number;
-declare type ResponsiveSizeProps = ResponsiveProps<SizeProperty, SizeValue> & {
-    sizeUnits?: CSSUnit;
-    sizes?: Partial<Sizes>;
-};
-
-declare type MarginProperty = 'margin' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft';
-declare type MarginValue = CSSGlobalValue | (string & {}) | number;
-declare type ResponsiveMarginProps = ResponsiveProps<MarginProperty, MarginValue> & {
-    marginUnits?: CSSUnit;
-};
-
-declare type ColorPropertyVariants = 'color' | 'fontColor' | `${string}Color` | `color${string}`;
-declare type ColorCalcProperty = (_color: CSSColor) => FlattenSimpleInterpolation | null;
-declare type ColorCssProperty = string | ColorCalcProperty;
-declare type ColorProperty<T extends ColorPropertyVariants = 'color'> = {
-    [key in `${T}`]?: Color;
-};
-declare const color: (color?: Color | string, cssProperty?: ColorCssProperty) => () => (props: {
-    theme: DefaultTheme;
-}) => FlattenSimpleInterpolation | null;
-
-declare type Display = 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'table-cell' | 'inherit' | 'none';
-interface DisplayProperty {
-    display?: Display;
-}
-
-declare type TypographyAppearance = 'display' | 'heading' | 'subheading' | 'subheading-compact' | 'body' | 'caption';
-interface TextProps extends ResponsiveSizeProps, ResponsiveMarginProps, DisplayProperty, ColorProperty, BaseProps, Omit<React.ComponentPropsWithRef<'div'>, 'color'> {
-    /** Root node polymorphic type */
-    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span';
-    /** Predefined styles and sizes */
-    appearance?: TypographyAppearance;
-    /** Font family */
-    fontFamily?: string;
-    /** Font weight */
-    weight?: CSSFontWeight;
-    /** White space */
-    whiteSpace?: string;
-    /** Font style */
-    fontStyle?: 'normal' | 'italic';
-    /** Text transform */
-    transform?: 'capitalize' | 'uppercase' | 'lowercase';
-    /** Underline content */
-    underline?: CSSBorderStyle | boolean;
-    /** Text align */
-    textAlign?: 'left' | 'center' | 'right' | 'justify' | 'start' | 'end';
-    /** Line height */
-    lineHeight?: 'l' | 'm' | 's' | 'xs' | number;
-    /** React children */
-    children?: React.ReactNode;
-    /** @ignore @deprecated Use Anchor interface */
-    underlineLinks?: boolean;
-    /** @ignore @deprecated Use children */
-    content?: string;
-}
-
-/**
- *
- * Component accepts all \<div\> attributes.
- *
- * Responsive "size", "margin" props are supported.
- *
- * Exposed "ref" attached to root node.
- *
- * See full [TextProps](https://github.com/foxford/ui/blob/master/src/components/Text/types.ts)
- */
-declare const Text: React.ForwardRefExoticComponent<TextProps> & {
-    Heading: typeof TextHeading;
-    Ellipse: typeof TextEllipse;
-};
-
 interface BaseProps {
     preset?: ThemePreset;
     className?: string;
     style?: React.CSSProperties;
-    cursor?: string;
 }
-declare type ColorPaletteProps<T extends ColorPaletteKey = ColorPaletteKey> = {
-    palette?: Partial<Record<T, Color>>;
-};
-declare type ColorPaletteInterpolationProps<K extends ColorPaletteKey, T extends ColorPaletteProps<K>> = Omit<T, 'palette'> & {
-    palette: Partial<Record<K, CSSColor>>;
-};
-declare type ColorSchemaProps = {
-    primary?: boolean;
-    secondary?: boolean;
-    tertiary?: boolean;
-    quaternary?: boolean;
-};
-declare type TypographyProps = {
-    textProps?: TextProps;
-};
-declare type RenderProps<T> = T & {
-    baseTextProps: Partial<TextProps>;
-};
 
 /**
  * Converts HEX color code to RGB(A) string
@@ -1052,6 +900,139 @@ declare const responsiveNamedProperty: <T extends PropsProperties>({ sizes, pred
  */
 declare const responsiveProperty: (propName: string, cssProperty?: string | null, sizing?: null | string) => () => (props: any) => styled_components.FlattenInterpolation<styled_components.ThemeProps<styled_components.DefaultTheme>> | null;
 
+declare type H = 'h1' | 'h2' | 'h3' | 'h4';
+interface TextHeadingProps extends Omit<TextProps, 'content' | 'as'> {
+    /** Default set of size, lineHeight and weight props */
+    h?: H;
+    /** Children react node */
+    children?: React.ReactNode;
+}
+
+/**
+ * @visibleName Text.Heading
+ */
+declare const TextHeading: {
+    (props: TextHeadingProps): JSX.Element;
+    displayName: string;
+};
+
+interface TextEllipseProps extends Omit<TextProps, 'content'> {
+    /** Toggle text for folded state */
+    moreText?: string;
+    /** Toggle text for unfolded state */
+    lessText?: string;
+    /** Classname */
+    className?: string;
+    /** Html content */
+    content: string | string[];
+    /** Characters quantity for ellipsed text */
+    chars?: number;
+    /** Wrap text in quotes */
+    quoted?: boolean;
+    /** Flag to show toggler */
+    showToggler?: boolean;
+}
+interface TextEllipseState {
+    isUnFolded: boolean;
+    isEllipsed: boolean;
+}
+/**
+ * Расширен:
+ * - [`BaseProps`](#/Миксины)
+ * - [`Color`](#/Миксины)
+ * - [`Display`](#/Миксины)
+ * - [`ResponsiveNamedProperty<'size'>`](#/Миксины)
+ */
+declare class TextEllipse extends Component<TextEllipseProps, TextEllipseState> {
+    static displayName: string;
+    constructor(props: TextEllipseProps);
+    componentDidUpdate({ content }: TextEllipseProps): void;
+    getContent: (props: Omit<TextEllipseProps, 'className' | 'moreText' | 'lessText' | 'showToggler'>) => "" | JSX.Element;
+    getQuted: (content: string) => string;
+    toggle: () => void;
+    render(): JSX.Element;
+}
+
+declare type ResponsivePropKey = 'size' | keyof CSSProperties;
+declare type ResponsiveProps<K extends ResponsivePropKey, V> = {
+    [key in K]?: V | [DESKTOP: V, TABLET: V, MOBILE: V] | [XL: V, L: V, M: V, S: V, XS: V, XXS: V];
+} & {
+    [key in `${K}${Breakpoint}`]?: V;
+};
+
+declare type SizeProperty = 'size';
+declare type SizeValue = Size | CSSGlobalValue | number;
+declare type ResponsiveSizeProps = ResponsiveProps<SizeProperty, SizeValue> & {
+    sizeUnits?: CSSUnit;
+    sizes?: Partial<Sizes>;
+};
+
+declare type MarginProperty = 'margin' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft';
+declare type MarginValue = CSSGlobalValue | (string & {}) | number;
+declare type ResponsiveMarginProps = ResponsiveProps<MarginProperty, MarginValue> & {
+    marginUnits?: CSSUnit;
+};
+
+declare type ColorPropertyVariants = 'color' | 'fontColor' | `${string}Color` | `color${string}`;
+declare type ColorCalcProperty = (_color: CSSColor) => FlattenSimpleInterpolation | null;
+declare type ColorCssProperty = string | ColorCalcProperty;
+declare type ColorProperty<T extends ColorPropertyVariants = 'color'> = {
+    [key in `${T}`]?: Color;
+};
+declare const color: (color?: Color | string, cssProperty?: ColorCssProperty) => () => (props: {
+    theme: DefaultTheme;
+}) => FlattenSimpleInterpolation | null;
+
+declare type Display = 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'table-cell' | 'inherit' | 'none';
+interface DisplayProperty {
+    display?: Display;
+}
+
+declare type TypographyAppearance = 'display' | 'heading' | 'subheading' | 'subheading-compact' | 'body' | 'caption';
+interface TextProps extends ResponsiveSizeProps, ResponsiveMarginProps, DisplayProperty, ColorProperty, Omit<React.ComponentPropsWithRef<'div'>, 'color'> {
+    /** Root node polymorphic type */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span';
+    /** Predefined styles and sizes */
+    appearance?: TypographyAppearance;
+    /** Font family */
+    fontFamily?: string;
+    /** Font weight */
+    weight?: CSSFontWeight;
+    /** White space */
+    whiteSpace?: string;
+    /** Font style */
+    fontStyle?: 'normal' | 'italic';
+    /** Text transform */
+    transform?: 'capitalize' | 'uppercase' | 'lowercase';
+    /** Underline content */
+    underline?: CSSBorderStyle | boolean;
+    /** Text align */
+    textAlign?: 'left' | 'center' | 'right' | 'justify' | 'start' | 'end';
+    /** Line height */
+    lineHeight?: 'l' | 'm' | 's' | 'xs' | number;
+    /** React children */
+    children?: React.ReactNode;
+    /** @ignore @deprecated Use Anchor interface */
+    underlineLinks?: boolean;
+    /** @ignore @deprecated Use children */
+    content?: string;
+}
+
+/**
+ *
+ * Component accepts all \<div\> attributes.
+ *
+ * Responsive "size", "margin" props are supported.
+ *
+ * Exposed "ref" attached to root node.
+ *
+ * See full [TextProps](https://github.com/foxford/ui/blob/master/src/components/Text/types.ts)
+ */
+declare const Text: React.ForwardRefExoticComponent<TextProps> & {
+    Heading: typeof TextHeading;
+    Ellipse: typeof TextEllipse;
+};
+
 declare global {
     // Some users of this package are don't use "dom" libs
     interface EventTarget {}
@@ -1252,17 +1233,25 @@ declare type AnchorPalette = {
     colorHover: CSSColor;
     colorDisabled: CSSColor;
 };
-interface AnchorProps extends ResponsiveSizeProps, ResponsiveMarginProps, TypographyProps, ColorPaletteProps<keyof AnchorPalette>, BaseProps, Omit<React.ComponentPropsWithRef<'a'>, 'color' | 'children'>, 
+interface AnchorProps extends ResponsiveSizeProps, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'a'>, 'color' | 'children'>, 
 /** @deprecated Use palette */
 ColorProperty<'color'>, 
 /** @deprecated Use children as function */
 DisplayProperty {
+    /** UI: brand (v3), or default (v2) */
+    preset?: ThemePreset;
     /** React children */
-    children?: React.ReactNode | ((props: RenderProps<TypographyProps & {
+    children?: React.ReactNode | ((props: {
+        baseTextProps: Partial<TextProps>;
+        textProps: TextProps;
         iconBaseProps: Partial<IconProps>;
         iconProps: AnchorProps['iconProps'];
         icon: AnchorProps['icon'];
-    }>) => React.ReactNode);
+    }) => React.ReactNode);
+    /** Custom colors */
+    palette?: Partial<Record<keyof AnchorPalette, Color>>;
+    /** Props for text component */
+    textProps?: TextProps;
     /** Underline text content */
     underline?: CSSBorderStyle | boolean;
     /** Icons before and after content */
@@ -1319,7 +1308,7 @@ declare type ButtonPalette = {
     borderColorDisabled: CSSColor;
     shadowColor: CSSColor;
 };
-interface ButtonProps extends BaseProps, ResponsiveSizeProps, ColorPaletteProps<keyof ButtonPalette>, TypographyProps, ColorProperty, ColorProperty<'fontColor'>, ResponsiveNamedProperty<'margin'>, ResponsiveNamedProperty<'marginTop'>, ResponsiveNamedProperty<'marginRight'>, ResponsiveNamedProperty<'marginBottom'>, ResponsiveNamedProperty<'marginLeft'>, ResponsiveNamedProperty<'fluid', boolean>, ResponsiveNamedProperty<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number>, Omit<React.ComponentPropsWithRef<'button'>, 'color' | 'children'>, 
+interface ButtonProps extends ResponsiveSizeProps, ColorProperty, ColorProperty<'fontColor'>, ResponsiveNamedProperty<'margin'>, ResponsiveNamedProperty<'marginTop'>, ResponsiveNamedProperty<'marginRight'>, ResponsiveNamedProperty<'marginBottom'>, ResponsiveNamedProperty<'marginLeft'>, ResponsiveNamedProperty<'fluid', boolean>, ResponsiveNamedProperty<'width', 'auto' | 'l' | 'm' | 's' | 'xs' | number>, Omit<React.ComponentPropsWithRef<'button'>, 'color' | 'children'>, 
 /** @deprecated Use children as function or inline prop */
 DisplayProperty, 
 /** @deprecated */
@@ -1336,12 +1325,20 @@ ResponsiveNamedProperty<'paddingLeft'>,
 ResponsiveNamedProperty<'fontSize'>, 
 /** @deprecated Use size props */
 ResponsiveNamedProperty<'height', 'l' | 'm' | 's' | 'xs' | number> {
+    /** UI: brand (v3), or default (v2) */
+    preset?: ThemePreset;
+    /** Custom colors */
+    palette?: Partial<Record<keyof ButtonPalette, Color>>;
     /** React children */
-    children?: React.ReactNode | ((props: RenderProps<TypographyProps & {
+    children?: React.ReactNode | ((props: {
+        baseTextProps: Partial<TextProps>;
+        textProps: TextProps;
         iconBaseProps: Partial<IconProps>;
         iconProps: ButtonProps['iconProps'];
         icon: ButtonProps['icon'];
-    }>) => React.ReactNode);
+    }) => React.ReactNode);
+    /** Props for text component */
+    textProps?: TextProps;
     /** Display inline */
     inline?: boolean;
     /** Icons before and after content */
@@ -1481,7 +1478,11 @@ declare type ArrowPalette = {
     borderColorDisabled: CSSColor;
     shadowColor: CSSColor;
 };
-interface ArrowProps extends BaseProps, ColorPaletteProps<keyof ArrowPalette>, ResponsiveSizeProps, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'button'>, 'children'> {
+interface ArrowProps extends ResponsiveSizeProps, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'button'>, 'children'> {
+    /** UI: brand (v3), or default (v2) */
+    preset?: ThemePreset;
+    /** Custom colors */
+    palette?: Partial<Record<keyof ArrowPalette, Color>>;
     /** Props for icon component */
     iconProps?: IconProps;
     /** Shape variant */
@@ -1531,7 +1532,9 @@ declare type InputCheckboxPalette = {
     backgroundColorDisabledChecked: CSSColor;
     borderColorDisabledChecked: CSSColor;
 };
-interface InputCheckboxProps extends BaseProps, ResponsiveSizeProps, ColorPaletteProps<keyof InputCheckboxPalette>, Omit<React.ComponentPropsWithRef<'input'>, 'size' | 'children'> {
+interface InputCheckboxProps extends ResponsiveSizeProps, Omit<React.ComponentPropsWithRef<'input'>, 'size' | 'children'> {
+    /** Custom colors */
+    palette?: Partial<Record<keyof InputCheckboxPalette, Color>>;
     /** Display inline */
     inline?: boolean;
     /** Indeterminate state appearance */
@@ -1588,7 +1591,9 @@ declare enum SizeInput {
     xs = 140
 }
 
-interface TextareaProps extends BaseProps, ColorProperty, ColorProperty<'placeholderColor'>, ResponsiveNamedProperty<'width', 'auto' | keyof typeof SizeInput | number>, Omit<React.ComponentPropsWithoutRef<'textarea'>, 'color'> {
+interface TextareaProps extends ColorProperty, ColorProperty<'placeholderColor'>, ResponsiveNamedProperty<'width', 'auto' | keyof typeof SizeInput | number>, Omit<React.ComponentPropsWithoutRef<'textarea'>, 'color'> {
+    /** UI: brand (v3), or default (v2) */
+    preset?: ThemePreset;
     /** Specifies the visible max number of lines in a text area */
     maxRows?: number;
     /** Value */
@@ -1608,7 +1613,9 @@ declare const Textarea: {
     displayName: string;
 };
 
-interface SwitcherProps extends BaseProps, ColorProperty<'color'>, ColorProperty<'inactiveColor'> {
+interface SwitcherProps extends ColorProperty<'color'>, ColorProperty<'inactiveColor'> {
+    /** UI: brand (v3), or default (v2) */
+    preset?: ThemePreset;
     /** Input id */
     id?: string;
     /** Input name */
@@ -1631,13 +1638,28 @@ declare type ArrowBadgePalette = {
     color: CSSColor;
     backgroundColor: CSSColor;
 };
-interface ArrowBadgeProps extends ResponsiveSizeProps, ResponsiveMarginProps, ColorSchemaProps, 
+interface ArrowBadgeProps extends ResponsiveSizeProps, ResponsiveMarginProps, 
 /** @deprecated Use palette */
 ColorProperty<'color'>, 
 /** @deprecated Use palette */
-ColorProperty<'backgroundColor'>, ColorPaletteProps<keyof ArrowBadgePalette>, TypographyProps, BaseProps, Omit<React.ComponentPropsWithRef<'div'>, 'color' | 'children'> {
+ColorProperty<'backgroundColor'>, Omit<React.ComponentPropsWithRef<'div'>, 'color' | 'children'> {
     /** React children */
-    children: React.ReactNode | ((props: RenderProps<TypographyProps>) => React.ReactNode);
+    children: React.ReactNode | ((props: {
+        baseTextProps: Partial<TextProps>;
+        textProps: TextProps;
+    }) => React.ReactNode);
+    /** Custom colors */
+    palette?: Partial<Record<keyof ArrowBadgePalette, Color>>;
+    /** Props for text component */
+    textProps?: TextProps;
+    /** Appearance variant */
+    primary?: boolean;
+    /** Appearance variant */
+    secondary?: boolean;
+    /** Appearance variant */
+    tertiary?: boolean;
+    /** Appearance variant */
+    quaternary?: boolean;
     /** Pointed left */
     left?: boolean;
     /** Pointed right */
@@ -1669,33 +1691,42 @@ declare type TabPalette = {
     backgroundColorDisabled: CSSColor;
     borderColorDisabled: CSSColor;
 };
-interface TabProps extends ResponsiveSizeProps, ResponsiveMarginProps, BaseProps, 
-/** Use palette with brand preset */
+interface TabProps extends ResponsiveSizeProps, ResponsiveMarginProps, 
+/** @deprecated Use palette */
 ColorProperty<'color'>, 
-/** Use palette with brand preset */
-ColorProperty<'borderColor'>, 
-/** Custom colors (brand preset) */
-ColorPaletteProps<keyof TabPalette>, TypographyProps, Omit<React.ComponentPropsWithRef<'button'>, 'color' | 'children'> {
+/** @deprecated Use palette */
+ColorProperty<'borderColor'>, Omit<React.ComponentPropsWithRef<'button'>, 'color' | 'children'> {
+    /** UI: brand (v3), or default (v2) */
+    preset?: ThemePreset;
+    /** Custom colors */
+    palette?: Partial<Record<keyof TabPalette, Color>>;
     /** React children */
-    children: React.ReactNode | ((props: RenderProps<TypographyProps>) => React.ReactNode);
-    /** Active styles applied */
+    children: React.ReactNode | ((props: {
+        textProps: TextProps;
+        baseTextProps: Partial<TextProps>;
+    }) => React.ReactNode);
+    /** Props for text component */
+    textProps?: TextProps;
+    /** Active appearance */
     active?: boolean;
-    /** Appearance variant (brand preset) */
+    /** Appearance variant */
     outline?: boolean;
-    /** Appearance variant (brand preset) */
+    /** Appearance variant */
     onColored?: boolean;
-    /** Appearance variant (default preset) */
+    /** Appearance variant */
+    black?: boolean;
+    /** Pointed left */
+    left?: boolean;
+    /** Pointed right */
+    right?: boolean;
+    /** Border radius applied */
+    rounded?: boolean;
+    /** @ignore */
     compact?: boolean;
-    /** Appearance variant (default preset) */
+    /** @ignore */
     crispy?: boolean;
-    /** Appearance variant (default preset) */
+    /** @ignore */
     crispyCompact?: boolean;
-    /** Pointed left (brand preset) */
-    left?: boolean;
-    /** Pointed right (brand preset) */
-    right?: boolean;
-    /** Border radius applied (brand preset) */
-    rounded?: number;
     /** @ignore @deprecated Use button interface */
     as?: React.ElementType<any>;
     /** @ignore @deprecated Use compact, crispy, crispyCompact */
@@ -1718,17 +1749,31 @@ declare type BadgePalette = {
     color: CSSColor;
     backgroundColor: CSSColor;
 };
-interface BadgeProps extends ResponsiveSizeProps, ResponsiveMarginProps, ColorSchemaProps, TypographyProps, BaseProps, 
+interface BadgeProps extends ResponsiveSizeProps, ResponsiveMarginProps, 
 /** @deprecated Use palette */
 ColorProperty, 
 /** @deprecated Use children as function */
-DisplayProperty, ColorPaletteProps<keyof BadgePalette>, Omit<React.ComponentPropsWithRef<'div'>, 'color' | 'children'> {
+DisplayProperty, Omit<React.ComponentPropsWithRef<'div'>, 'color' | 'children'> {
     /** React children */
-    children?: React.ReactNode | ((props: RenderProps<TypographyProps & {
+    children?: React.ReactNode | ((props: {
+        baseTextProps: Partial<TextProps>;
+        textProps: TextProps;
         iconBaseProps: Partial<IconProps>;
         iconProps: BadgeProps['iconProps'];
         icon: BadgeProps['icon'];
-    }>) => React.ReactNode);
+    }) => React.ReactNode);
+    /** Custom colors */
+    palette?: Partial<Record<keyof BadgePalette, Color>>;
+    /** Props for text component */
+    textProps?: TextProps;
+    /** Appearance variant */
+    primary?: boolean;
+    /** Appearance variant */
+    secondary?: boolean;
+    /** Appearance variant */
+    tertiary?: boolean;
+    /** Appearance variant */
+    quaternary?: boolean;
     /** Appearance variant */
     round?: boolean;
     /** Root border radius  */
@@ -3234,22 +3279,17 @@ declare class InputPhone extends PureComponent<typeof InputPhone.defaultProps &
     render(): JSX.Element;
 }
 
-declare type FormInputLabelPalette = {
+declare type InputPalette = {
     color: CSSColor;
     backgroundColor: CSSColor;
     borderColor: CSSColor;
     colorHover: CSSColor;
     backgroundColorHover: CSSColor;
     borderColorHover: CSSColor;
-};
-
-declare type InputPalette = {
     inputColor: CSSColor;
     inputPlaceholderColor: CSSColor;
     inputColorDisabled: CSSColor;
     inputPlaceholderColorDisabled: CSSColor;
-};
-declare type InputControlsPalette = {
     controlsColor: CSSColor;
     controlsBackgroundColor: CSSColor;
     controlsSeparatorColor: CSSColor;
@@ -3260,13 +3300,17 @@ declare type InputControlsPalette = {
     controlsColorDisabled: CSSColor;
     controlsBackgroundColorDisabled: CSSColor;
 };
-interface InputProps extends BaseProps, ResponsiveSizeProps, ResponsiveMarginProps, TypographyProps, ColorPaletteProps<keyof InputPalette | keyof InputControlsPalette | keyof FormInputLabelPalette>, Omit<React.ComponentPropsWithRef<'input'>, 'children' | 'size' | 'type' | 'value' | 'defaultValue' | 'color' | 'width'>, 
+interface InputProps extends ResponsiveSizeProps, ResponsiveMarginProps, Omit<React.ComponentPropsWithRef<'input'>, 'children' | 'size' | 'type' | 'value' | 'defaultValue' | 'color' | 'width'>, 
 /** @deprecated Use palette */
 ColorProperty, 
 /** @deprecated Use palette */
 ColorProperty<'placeholderColor'>, 
 /** @ignore Control width with container */
 ResponsiveNamedProperty<'width', 'auto' | keyof typeof SizeInput | number> {
+    /** UI: brand (v3), or default (v2) */
+    preset?: ThemePreset;
+    /** Custom colors */
+    palette?: Partial<Record<keyof InputPalette, Color>>;
     /** Input mask.
      *  Look up [docs v2.0.4](https://www.npmjs.com/package/react-input-mask/v/2.0.4?activeTab=code) */
     mask?: string;
@@ -3295,6 +3339,8 @@ ResponsiveNamedProperty<'width', 'auto' | keyof typeof SizeInput | number> {
     icon?: JSX.Element;
     /** Props for icon component */
     iconProps?: IconProps;
+    /** Props for text component */
+    textProps?: TextProps;
     /** Input controls */
     controls?: {
         additional?: {
@@ -3368,7 +3414,9 @@ declare type InputRadioPalette = {
     backgroundColorDisabledChecked: CSSColor;
     borderColorDisabledChecked: CSSColor;
 };
-interface InputRadioProps extends BaseProps, ResponsiveSizeProps, ColorPaletteProps<keyof InputRadioPalette>, Omit<React.ComponentPropsWithRef<'input'>, 'size' | 'children'> {
+interface InputRadioProps extends ResponsiveSizeProps, Omit<React.ComponentPropsWithRef<'input'>, 'size' | 'children'> {
+    /** Custom colors */
+    palette?: Partial<Record<keyof InputRadioPalette, Color>>;
     /** Display inline */
     inline?: boolean;
     /** Appearance variant */
@@ -3494,9 +3542,13 @@ declare type FormLabelPalette = {
     backgroundColorHover: CSSColor;
     borderColorHover: CSSColor;
 };
-interface FormLabelProps extends BaseProps, TypographyProps, ResponsiveSizeProps, ResponsiveMarginProps, ColorPaletteProps<keyof FormLabelPalette>, React.ComponentPropsWithRef<'label'> {
+interface FormLabelProps extends ResponsiveSizeProps, ResponsiveMarginProps, React.ComponentPropsWithRef<'label'> {
+    /** Custom colors */
+    palette?: Partial<Record<keyof FormLabelPalette, Color>>;
     /** Render radio or checkbox input */
-    control: JSX.Element | ((props: Required<Pick<FormLabelProps, 'size'>> & Pick<FormLabelProps, 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL' | 'cursor' | 'disabled' | 'error' | 'success' | 'checked' | 'onColored'>) => JSX.Element);
+    control: JSX.Element | ((props: Required<Pick<FormLabelProps, 'size'>> & Pick<FormLabelProps, 'sizeXXS' | 'sizeXS' | 'sizeS' | 'sizeM' | 'sizeL' | 'sizeXL' | 'disabled' | 'error' | 'success' | 'checked' | 'onColored'>) => JSX.Element);
+    /** Props for text component */
+    textProps?: TextProps;
     /** Text content */
     label?: React.ReactNode;
     /** Display inline */
@@ -3527,4 +3579,4 @@ interface FormLabelProps extends BaseProps, TypographyProps, ResponsiveSizeProps
  */
 declare const FormLabel: React.ForwardRefExoticComponent<FormLabelProps>;
 
-export { ActionBtn, Alert, Amount, Anchor, Arrow, ArrowBadge, Avatar, Badge, BaseProps, Breakpoint, Button, COUNTRY_DATA, CSSBorderStyle, CSSColor, CSSFontWeight, CSSGlobalValue, CSSUnit, CSSVerticalAlign, CURRENCY_MAP, Checkbox, Color, ColorNames, ColorPaletteInterpolationProps, ColorPaletteKey, ColorPaletteProps, ColorSchemaProps, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, FormLabel, HEX, INITIAL_MASK, Icon, Input, Modal, Nullable, Paper, Progress, RGB, RGBA, Radio, RenderProps, withThemeScrollable as Scrollable, Section, Select, Separator, Size, Sizes, Spacer, Spinner, Switcher, Tab, Tabs, Tag, Text, Textarea, Theme, ThemeMode, ThemeName, ThemePreset, ThemeProvider, Tooltip, TypographyProps, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, defaultIcons, desktopFirst, hexToRgbA, isHex, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, vAlign };
+export { ActionBtn, Alert, Amount, Anchor, Arrow, ArrowBadge, Avatar, Badge, BaseProps, Breakpoint, Button, COUNTRY_DATA, CSSBorderStyle, CSSColor, CSSFontWeight, CSSGlobalValue, CSSUnit, CSSVerticalAlign, CURRENCY_MAP, Checkbox, Color, ColorNames, ColorPaletteKey, Container, ContextMenu, CurrencyCodes, DEFAULT_MASK, FormLabel, HEX, INITIAL_MASK, Icon, Input, Modal, Nullable, Paper, Progress, RGB, RGBA, Radio, withThemeScrollable as Scrollable, Section, Select, Separator, Size, Sizes, Spacer, Spinner, Switcher, Tab, Tabs, Tag, Text, Textarea, Theme, ThemeMode, ThemeName, ThemePreset, ThemeProvider, Tooltip, adultDarkTheme, adultLightTheme, babyDarkTheme, babyLightTheme, baseInputStyle, buildMediaQuery, color, defaultIcons, desktopFirst, hexToRgbA, isHex, mobileFirst, motherDarkTheme, motherLightTheme, property, responsiveNamedProperty, responsiveProperty, screenL, screenM, screenMaxL, screenMaxM, screenMaxS, screenMaxXl, screenMaxXs, screenMaxXxs, screenMinL, screenMinM, screenMinS, screenMinXl, screenMinXs, screenRetina, screenS, screenXl, screenXs, teenDarkTheme, teenLightTheme, defaultTheme as theme, vAlign };

package/hocs/withMergedProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"withMergedProps.js","sources":["../../../src/hocs/withMergedProps.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { useTheme } from 'styled-components'\nimport { mergeDeepLeft } from 'ramda'\nimport type { DefaultTheme } from 'styled-components'\nimport type { BaseProps, ColorPaletteProps } from 'shared/interfaces'\nimport type { ResponsiveSizeProps } from 'mixins/responsive-size'\nimport type { CSSColor, Sizes, Color, ThemePreset, ColorPaletteKey } from 'shared/types'\n\nconst injectThemeColors = (\n  colors: Partial<Record<ColorPaletteKey, Color>> = {},\n  theme: DefaultTheme\n): Partial<Record<ColorPaletteKey, CSSColor>> =>\n  Object.keys(colors).reduce((resultColors, colorKey) => {\n    const color = colors[colorKey]\n    resultColors[colorKey] = theme.colors[color] ?? color\n    return resultColors\n  }, {} as Record<ColorPaletteKey, CSSColor>)\n\nexport const withMergedProps = <\n  T extends ResponsiveSizeProps & ColorPaletteProps & BaseProps,\n  P extends HTMLElement = HTMLElement\n>(\n  Component: React.FC<\n    Omit<T, 'sizes' | 'preset' | 'palette'> & {\n      sizes: Sizes\n      preset: ThemePreset\n      palette: Partial<Record<ColorPaletteKey, CSSColor>>\n    } & React.RefAttributes<P>\n  >,\n  options: {\n    displayName: string\n    sizes: Sizes | ((props: Omit<T, 'sizes' | 'preset'> & { preset: ThemePreset }) => Sizes)\n  }\n) => {\n  const WithMergedProps = forwardRef<P, T>((props, ref) => {\n    const theme = useTheme()\n\n    const forwardProps = mergeDeepLeft(props, theme.components?.[options.displayName] ?? {}) as T\n    const preset = forwardProps.preset ?? theme.preset\n    const componentSizes =\n      typeof options.sizes === 'function' ? options.sizes({ ...forwardProps, preset }) : options.sizes\n    const sizes = (forwardProps.sizes ? mergeDeepLeft(forwardProps.sizes, componentSizes) : componentSizes) as Sizes\n    const palette = forwardProps.palette ? injectThemeColors(forwardProps.palette, theme) : {}\n\n    Component.displayName = options.displayName\n\n    return <Component {...forwardProps} preset={preset} sizes={sizes} palette={palette} ref={ref} />\n  })\n\n  WithMergedProps.displayName = `WithMergedProps${options.displayName}`\n  return WithMergedProps\n}\n"],"names":["withMergedProps","Component","options","WithMergedProps","forwardRef","props","ref","_theme$components$opt","_theme$components","_forwardProps$preset","theme","useTheme","forwardProps","mergeDeepLeft","components","displayName","preset","componentSizes","sizes","palette","e","r","colors","arguments","length","undefined","Object","keys","reduce","resultColors","colorKey","_theme$colors$color","color","_jsx","_objectSpread"],"mappings":"sNAkBaA,EAAkB,CAI7BC,EAOAC,KAKA,IAAMC,EAAkBC,IAAkBC,EAAOC,KAAQ,IAAAC,EAAAC,EAAAC,EACvD,IAAMC,EAAQC,IAEd,IAAMC,EAAeC,EAAcR,EAAD,UAAA,UAAQK,EAAMI,kBAAd,IAAAN,SAAQA,EAAmBN,EAAQa,oBAAAA,IAAnCR,EAAAA,EAAmD,IACrF,IAAMS,EAAgCN,UAAvBE,EAAaI,cAAAA,IAAUN,EAAAA,EAAAA,EAAMM,OAC5C,IAAMC,EACqB,mBAAlBf,EAAQgB,MAAuBhB,EAAQgB,aAAWN,GAAnB,GAAA,CAAiCI,OAAAA,KAAYd,EAAQgB,MAC7F,IAAMA,EAASN,EAAaM,MAAQL,EAAcD,EAAaM,MAAOD,GAAkBA,EACxF,IAAME,EAAUP,EAAaO,QAlCP,SAAAC,EAAAC,GAAA,IACxBC,+BADwBF,EAAAA,EAC0B,GAD1B,IAExBV,EAFwBa,UAAAC,OAAA,EAAAH,OAAAI,EAAA,OAIxBC,OAAOC,KAAKL,GAAQM,QAAO,CAACC,EAAcC,KAAa,IAAAC,EACrD,IAAMC,EAAQV,EAAOQ,GAErB,OADAD,EAAaC,GAAb,QAAyBpB,EAAAA,EAAMY,OAAOU,UAAAA,IAAtCD,EAAAA,EAAgDC,EACzCH,IACN,IARqB,CAkCmCjB,EAAaO,QAAST,GAAS,GAIxF,OAFAT,EAAUc,YAAcb,EAAQa,YAEzBkB,EAAChC,EAADiC,EAAAA,EAAA,GAAetB,GAAf,GAAA,CAA6BI,OAAQA,EAAQE,MAAOA,EAAOC,QAASA,EAASb,IAAKA,QAI3F,OADAH,EAAgBY,YAAgCb,kBAAAA,OAAAA,EAAQa,aACjDZ"}
+{"version":3,"file":"withMergedProps.js","sources":["../../../src/hocs/withMergedProps.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport { useTheme } from 'styled-components'\nimport { mergeDeepLeft } from 'ramda'\nimport type { DefaultTheme } from 'styled-components'\nimport type { ResponsiveSizeProps } from 'mixins/responsive-size'\nimport type { CSSColor, Sizes, Color, ThemePreset, ColorPaletteKey } from 'shared/types'\n\nconst injectThemeColors = (\n  colors: Partial<Record<ColorPaletteKey, Color>> = {},\n  theme: DefaultTheme\n): Partial<Record<ColorPaletteKey, CSSColor>> =>\n  Object.keys(colors).reduce((resultColors, colorKey) => {\n    const color = colors[colorKey]\n    resultColors[colorKey] = theme.colors[color] ?? color\n    return resultColors\n  }, {} as Record<ColorPaletteKey, CSSColor>)\n\nexport const withMergedProps = <\n  T extends ResponsiveSizeProps & {\n    preset?: ThemePreset\n    palette?: Partial<Record<ColorPaletteKey, Color>>\n  },\n  P extends HTMLElement = HTMLElement\n>(\n  Component: React.FC<\n    Omit<T, 'sizes' | 'preset' | 'palette'> & {\n      sizes: Sizes\n      preset: ThemePreset\n      palette: Partial<Record<ColorPaletteKey, CSSColor>>\n    } & React.RefAttributes<P>\n  >,\n  options: {\n    displayName: string\n    sizes: Sizes | ((props: Omit<T, 'sizes' | 'preset'> & { preset: ThemePreset }) => Sizes)\n  }\n) => {\n  const WithMergedProps = forwardRef<P, T>((props, ref) => {\n    const theme = useTheme()\n\n    const forwardProps = mergeDeepLeft(props, theme.components?.[options.displayName] ?? {}) as T\n    const preset = forwardProps.preset ?? theme.preset\n    const componentSizes =\n      typeof options.sizes === 'function' ? options.sizes({ ...forwardProps, preset }) : options.sizes\n    const sizes = (forwardProps.sizes ? mergeDeepLeft(forwardProps.sizes, componentSizes) : componentSizes) as Sizes\n    const palette = forwardProps.palette ? injectThemeColors(forwardProps.palette, theme) : {}\n\n    Component.displayName = options.displayName\n\n    return <Component {...forwardProps} preset={preset} sizes={sizes} palette={palette} ref={ref} />\n  })\n\n  WithMergedProps.displayName = `WithMergedProps${options.displayName}`\n  return WithMergedProps\n}\n"],"names":["withMergedProps","Component","options","WithMergedProps","forwardRef","props","ref","_theme$components$opt","_theme$components","_forwardProps$preset","theme","useTheme","forwardProps","mergeDeepLeft","components","displayName","preset","componentSizes","sizes","palette","e","r","colors","arguments","length","undefined","Object","keys","reduce","resultColors","colorKey","_theme$colors$color","color","_jsx","_objectSpread"],"mappings":"sNAiBaA,EAAkB,CAO7BC,EAOAC,KAKA,IAAMC,EAAkBC,IAAkBC,EAAOC,KAAQ,IAAAC,EAAAC,EAAAC,EACvD,IAAMC,EAAQC,IAEd,IAAMC,EAAeC,EAAcR,EAAD,UAAA,UAAQK,EAAMI,kBAAd,IAAAN,SAAQA,EAAmBN,EAAQa,oBAAAA,IAAnCR,EAAAA,EAAmD,IACrF,IAAMS,EAAgCN,UAAvBE,EAAaI,cAAAA,IAAUN,EAAAA,EAAAA,EAAMM,OAC5C,IAAMC,EACqB,mBAAlBf,EAAQgB,MAAuBhB,EAAQgB,aAAWN,GAAnB,GAAA,CAAiCI,OAAAA,KAAYd,EAAQgB,MAC7F,IAAMA,EAASN,EAAaM,MAAQL,EAAcD,EAAaM,MAAOD,GAAkBA,EACxF,IAAME,EAAUP,EAAaO,QArCP,SAAAC,EAAAC,GAAA,IACxBC,+BADwBF,EAAAA,EAC0B,GAD1B,IAExBV,EAFwBa,UAAAC,OAAA,EAAAH,OAAAI,EAAA,OAIxBC,OAAOC,KAAKL,GAAQM,QAAO,CAACC,EAAcC,KAAa,IAAAC,EACrD,IAAMC,EAAQV,EAAOQ,GAErB,OADAD,EAAaC,GAAb,QAAyBpB,EAAAA,EAAMY,OAAOU,UAAAA,IAAtCD,EAAAA,EAAgDC,EACzCH,IACN,IARqB,CAqCmCjB,EAAaO,QAAST,GAAS,GAIxF,OAFAT,EAAUc,YAAcb,EAAQa,YAEzBkB,EAAChC,EAADiC,EAAAA,EAAA,GAAetB,GAAf,GAAA,CAA6BI,OAAQA,EAAQE,MAAOA,EAAOC,QAASA,EAASb,IAAKA,QAI3F,OADAH,EAAgBY,YAAgCb,kBAAAA,OAAAA,EAAQa,aACjDZ"}