@itcase/ui-web 1.9.90 → 1.9.92

package/dist/types/components/Icon/appearance/iconSize.d.ts

@@ -1,3 +1,171 @@
-import { IconAppearance } from '../Icon.interface';
-declare const iconAppearanceSize: IconAppearance;
+declare const iconAppearanceSize: {
+    size12_12: {
+        fillSize: "12";
+        badgeAppearanceSize: "sizeXXS";
+        badgeSize: "xxs";
+        iconSize: "12";
+    };
+    size14_12: {
+        fillSize: "14";
+        badgeAppearanceSize: "sizeXXS";
+        badgeSize: "xxs";
+        iconSize: "12";
+    };
+    size14_14: {
+        fillSize: "14";
+        badgeAppearanceSize: "sizeXXS";
+        badgeSize: "xxs";
+        iconSize: "14";
+    };
+    size16_12: {
+        fillSize: "16";
+        badgeAppearanceSize: "sizeXXS";
+        badgeSize: "xxs";
+        iconSize: "12";
+    };
+    size16_14: {
+        fillSize: "16";
+        badgeAppearanceSize: "sizeXXS";
+        badgeSize: "xxs";
+        iconSize: "14";
+    };
+    size16_16: {
+        fillSize: "16";
+        badgeAppearanceSize: "sizeXXS";
+        badgeSize: "xxs";
+        iconSize: "16";
+    };
+    size20_12: {
+        fillSize: "20";
+        badgeAppearanceSize: "sizeXXS";
+        badgeSize: "xxs";
+        iconSize: "12";
+    };
+    size20_14: {
+        fillSize: "20";
+        badgeAppearanceSize: "sizeXXS";
+        badgeSize: "xxs";
+        iconSize: "14";
+    };
+    size20_16: {
+        fillSize: "20";
+        badgeAppearanceSize: "sizeXXS";
+        badgeSize: "xxs";
+        iconSize: "16";
+    };
+    size20_20: {
+        fillSize: "20";
+        badgeAppearanceSize: "sizeXXS";
+        badgeSize: "xxs";
+        iconSize: "20";
+    };
+    size24_12: {
+        fillSize: "24";
+        badgeAppearanceSize: "sizeXXS";
+        badgeSize: "xxs";
+        iconSize: "12";
+    };
+    size24_14: {
+        fillSize: "24";
+        badgeAppearanceSize: "sizeXXS";
+        badgeSize: "xxs";
+        iconSize: "14";
+    };
+    size24_16: {
+        fillSize: "24";
+        badgeAppearanceSize: "sizeXXS";
+        badgeSize: "xxs";
+        iconSize: "16";
+    };
+    size24_20: {
+        fillSize: "24";
+        badgeAppearanceSize: "sizeXXS";
+        badgeSize: "xxs";
+        iconSize: "20";
+    };
+    size24_24: {
+        fillSize: "24";
+        badgeAppearanceSize: "sizeXXS";
+        badgeSize: "xxs";
+        iconSize: "24";
+    };
+    size32_12: {
+        fillSize: "32";
+        badgeAppearanceSize: "sizeXXS";
+        badgeSize: "xxs";
+        iconSize: "12";
+    };
+    size32_14: {
+        fillSize: "32";
+        badgeAppearanceSize: "sizeXXS";
+        badgeSize: "xxs";
+        iconSize: "14";
+    };
+    size32_16: {
+        fillSize: "32";
+        badgeAppearanceSize: "sizeXXS";
+        badgeSize: "xxs";
+        iconSize: "16";
+    };
+    size32_20: {
+        fillSize: "32";
+        badgeAppearanceSize: "sizeXXS";
+        badgeSize: "xxs";
+        iconSize: "20";
+    };
+    size32_24: {
+        fillSize: "32";
+        badgeAppearanceSize: "sizeXXS";
+        badgeSize: "xxs";
+        iconSize: "24";
+    };
+    size32_32: {
+        fillSize: "32";
+        badgeAppearanceSize: "sizeXXS";
+        badgeSize: "xxs";
+        iconSize: "32";
+    };
+    size40_12: {
+        fillSize: "40";
+        badgeAppearanceSize: "sizeXXS";
+        badgeSize: "xxs";
+        iconSize: "12";
+    };
+    size40_14: {
+        fillSize: "40";
+        badgeAppearanceSize: "sizeXXS";
+        badgeSize: "xxs";
+        iconSize: "14";
+    };
+    size40_16: {
+        fillSize: "40";
+        badgeAppearanceSize: "sizeXXS";
+        badgeSize: "xxs";
+        iconSize: "16";
+    };
+    size40_20: {
+        fillSize: "40";
+        badgeAppearanceSize: "sizeXXS";
+        badgeSize: "xxs";
+        iconSize: "20";
+    };
+    size40_24: {
+        fillSize: "40";
+        badgeAppearanceSize: "sizeXXS";
+        badgeSize: "xxs";
+        iconSize: "24";
+    };
+    size40_32: {
+        fillSize: "40";
+        badgeAppearanceSize: "sizeXXS";
+        badgeSize: "xxs";
+        iconSize: "32";
+    };
+    size40_40: {
+        fillSize: "40";
+        badgeAppearanceSize: "sizeXXS";
+        badgeSize: "xxs";
+        iconSize: "40";
+    };
+};
 export { iconAppearanceSize };

package/dist/types/components/Icon/appearance/iconSpecial.d.ts

@@ -1,3 +1,10 @@
-import { IconAppearance } from '../Icon.interface';
-declare const iconAppearanceSpecial: IconAppearance;
+declare const iconAppearanceSpecial: {
+    specialPrimary: {
+        fill: "specialPrimary";
+        fillHover: "specialHoverPrimary";
+        borderColor: "specialBorderQuaternary";
+        badgeAppearance: "surfacePrimary";
+        iconFill: "specialItemPrimary";
+    };
+};
 export { iconAppearanceSpecial };

package/dist/types/components/Icon/appearance/iconStyle.d.ts

@@ -1,3 +1,14 @@
-import { IconAppearance } from '../Icon.interface';
-declare const iconAppearanceStyle: IconAppearance;
+declare const iconAppearanceStyle: {
+    solid: {
+        borderColor: "none";
+    };
+    outlined: {
+        fill: "none";
+    };
+    full: {};
+    ghost: {
+        fill: "none";
+        borderColor: "none";
+    };
+};
 export { iconAppearanceStyle };

package/dist/types/components/Icon/appearance/iconSuccess.d.ts

@@ -1,3 +1,10 @@
-import { IconAppearance } from '../Icon.interface';
-declare const iconAppearanceSuccess: IconAppearance;
+declare const iconAppearanceSuccess: {
+    successPrimary: {
+        fill: "successPrimary";
+        fillHover: "successHoverPrimary";
+        borderColor: "successBorderPrimary";
+        badgeAppearance: "surfacePrimary";
+        iconFill: "successItemPrimary";
+    };
+};
 export { iconAppearanceSuccess };

package/dist/types/components/Icon/appearance/iconSurface.d.ts

@@ -1,3 +1,28 @@
-import { IconAppearance } from '../Icon.interface';
-declare const iconAppearanceSurface: IconAppearance;
+declare const iconAppearanceSurface: {
+    surfacePrimary: {
+        fill: "surfacePrimary";
+        fillHover: "surfaceHoverSecondary";
+        borderColor: "surfaceBorderTertiary";
+        badgeAppearance: "surfacePrimary";
+        iconFill: "surfaceItemPrimary";
+    };
+    surfaceQuaternary: {
+        fill: "surfaceQuaternary";
+        fillHover: "surfaceHoverQuaternary";
+        badgeAppearance: "accentPrimary";
+        iconFill: "surfaceItemPrimary";
+    };
+    surfaceSecondary: {
+        fill: "surfaceSecondary";
+        fillHover: "surfaceHoverTertiary";
+        badgeAppearance: "accentPrimary solid rounded";
+        iconFill: "surfaceItemPrimary";
+    };
+    surfaceTertiary: {
+        fill: "surfaceTertiary";
+        fillHover: "surfaceHoverTertiary";
+        badgeAppearance: "accentPrimary";
+        iconFill: "surfaceItemPrimary";
+    };
+};
 export { iconAppearanceSurface };

package/dist/types/components/Icon/appearance/iconSurface.js

@@ -14,7 +14,7 @@ const iconAppearanceSurface = {
     },
     surfaceSecondary: {
         fill: 'surfaceSecondary',
-        fillHover: 'surfaceHoverSecondary',
+        fillHover: 'surfaceHoverTertiary',
         badgeAppearance: 'accentPrimary solid rounded',
         iconFill: 'surfaceItemPrimary',
     },

package/dist/types/components/Icon/appearance/iconWarning.d.ts

@@ -1,3 +1,10 @@
-import { IconAppearance } from '../Icon.interface';
-declare const iconAppearanceWarning: IconAppearance;
+declare const iconAppearanceWarning: {
+    warningPrimary: {
+        fill: "warningPrimary";
+        fillHover: "warningHoverPrimary";
+        borderColor: "warningBorderSecondary";
+        badgeAppearance: "surfacePrimary";
+        iconFill: "warningItemPrimary";
+    };
+};
 export { iconAppearanceWarning };

package/dist/types/components/Input/Input.appearance.d.ts

@@ -1,3 +1,128 @@
-import { InputAppearance } from './Input.interface';
-declare const inputAppearance: InputAppearance;
+declare const inputAppearance: {
+    solid: {
+        borderColor: "none";
+        borderColorHover: "none";
+    };
+    outlined: {
+        fill: "none";
+    };
+    full: {};
+    ghost: {
+        fill: "none";
+        borderColor: "none";
+        borderColorHover: "none";
+    };
+    sizeXL: {
+        size: "xl";
+        textSize: "m";
+    };
+    sizeL: {
+        size: "l";
+        textSize: "m";
+    };
+    sizeM: {
+        size: "m";
+        textSize: "m";
+    };
+    sizeS: {
+        size: "s";
+        textSize: "s";
+    };
+    disabledPrimary: {
+        fill: "surfaceDisabled";
+        fillHover: "surfaceDisabled";
+        borderColor: "surfaceBorderDisabled";
+        borderColorHover: "surfaceBorderDisabled";
+        textColor: "surfaceTextQuaternary";
+        placeholderTextColor: "surfaceTextQuaternary";
+    };
+    disabledSecondary: {
+        fill: "surfaceSecondary";
+        borderColor: "surfaceBorderTertiary";
+        borderColorHover: "surfaceBorderQuaternary";
+        placeholderTextColor: "surfaceTextSecondary";
+    };
+    requirePrimary: {
+        fill: "warningTertiary";
+        fillHover: "warningSecondary";
+        borderColor: "warningBorderQuaternary";
+        borderColorHover: "warningBorderQuaternary";
+        textColor: "surfaceTextPrimary";
+        caret: "accentSecondary";
+        placeholderTextColor: "surfaceTextQuaternary";
+    };
+    requireSecondary: {
+        fill: "surfaceSecondary";
+        borderColor: "surfaceBorderTertiary";
+        borderColorHover: "surfaceBorderQuaternary";
+        caret: "accentSecondary";
+        placeholderTextColor: "surfaceTextSecondary";
+    };
+    successPrimary: {
+        fill: "successTertiary";
+        borderColor: "successBorderQuaternary";
+        borderColorHover: "successBorderQuaternary";
+        textColor: "surfaceTextPrimary";
+        caret: "accentSecondary";
+        placeholderTextColor: "surfaceTextQuaternary";
+    };
+    successSecondary: {
+        fill: "surfaceSecondary";
+        borderColor: "surfaceBorderTertiary";
+        borderColorHover: "surfaceBorderQuaternary";
+        caret: "accentSecondary";
+        placeholderTextColor: "surfaceTextSecondary";
+    };
+    circular: {
+        shape: "circular";
+    };
+    rounded: {
+        shape: "rounded";
+    };
+    roundedXL: {
+        shape: "rounded";
+    };
+    roundedL: {
+        shape: "rounded";
+    };
+    roundedM: {
+        shape: "rounded";
+    };
+    roundedS: {
+        shape: "rounded";
+    };
+    errorPrimary: {
+        fill: "errorTertiary";
+        borderColor: "errorBorderQuaternary";
+        borderColorHover: "errorBorderQuaternary";
+        textColor: "surfaceTextPrimary";
+        caret: "accentSecondary";
+        placeholderTextColor: "surfaceTextQuaternary";
+    };
+    errorSecondary: {
+        fill: "errorSecondary";
+        borderColor: "errorBorderTertiary";
+        borderColorHover: "errorBorderQuaternary";
+        caret: "accentSecondary";
+        placeholderTextColor: "errorTextSecondary";
+    };
+    defaultPrimary: {
+        fill: "surfaceSecondary";
+        fillHover: "surfaceTertiary";
+        borderColor: "surfaceBorderTertiary";
+        borderColorHover: "surfaceBorderQuaternary";
+        textColor: "surfaceTextPrimary";
+        caret: "accentSecondary";
+        placeholderTextColor: "surfaceTextQuaternary";
+    };
+    defaultSecondary: {
+        fill: "surfacePrimary";
+        fillHover: "surfaceTertiary";
+        borderColor: "surfaceBorderTertiary";
+        borderColorHover: "surfaceBorderQuaternary";
+        textColor: "surfaceTextPrimary";
+        caret: "accentSecondary";
+        placeholderTextColor: "surfaceTextQuaternary";
+    };
+};
 export { inputAppearance };

package/dist/types/components/Input/Input.d.ts

@@ -5,6 +5,7 @@ declare const Input: React.ForwardRefExoticComponent<import("./Input.interface")
     id?: string;
     appearance?: import("@itcase/types-ui").CompositeAppearanceStateDefault;
     autocomplete?: string;
+    autoComplete?: string;
     className?: string;
     dataTestId?: string;
     dataTour?: string;
@@ -12,11 +13,11 @@ declare const Input: React.ForwardRefExoticComponent<import("./Input.interface")
     isDisabled?: boolean;
     isReadOnly?: boolean;
     name?: string;
-    onBlur?: (event?: React.FocusEvent<HTMLInputElement>) => void;
-    onChange?: (event?: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
     onClick?: (event?: React.MouseEvent<HTMLElement>) => void;
-    onFocus?: (event?: React.FocusEvent<HTMLInputElement>) => void;
-    onKeyDown?: (event?: React.KeyboardEvent<HTMLInputElement>) => void;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
     placeholder?: string;
     type?: string;
     value?: string;

package/dist/types/components/Input/Input.interface.d.ts

@@ -1,4 +1,6 @@
-import { AppearanceConfig, AppearanceKeysState, BorderColorHoverProps, BorderColorProps, BorderWidthProps, CompositeAppearanceStateDefault, FillHoverProps, FillProps, ShapeProps, SizeProps, WidthProps } from '@itcase/types-ui';
+import { ChangeEventHandler, FocusEventHandler, KeyboardEventHandler, MouseEvent } from 'react';
+import { AppearanceConfig, AppearanceKeysState, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorHoverProps, BorderColorProps, BorderWidthProps, CompositeAppearanceStateDefault, FillHoverProps, FillProps, ShapeProps, SizeProps, WidthProps } from '@itcase/types-ui';
+import type { AppearancePartialRecord, AppearanceRecord } from '@itcase/types-ui';
 import type { StyleAttributes } from '@itcase/ui-core/hooks';
 import { TextProps } from 'src/components/Text/Text.interface';
 type InputAppearanceProps = {
@@ -25,6 +27,7 @@ type InputProps = InputAppearanceProps & StyleAttributes & {
     id?: string;
     appearance?: CompositeAppearanceStateDefault;
     autocomplete?: string;
+    autoComplete?: string;
     className?: string;
     dataTestId?: string;
     dataTour?: string;
@@ -32,15 +35,18 @@ type InputProps = InputAppearanceProps & StyleAttributes & {
     isDisabled?: boolean;
     isReadOnly?: boolean;
     name?: string;
-    onBlur?: (event?: React.FocusEvent<HTMLInputElement>) => void;
-    onChange?: (event?: React.ChangeEvent<HTMLInputElement>) => void;
-    onClick?: (event?: React.MouseEvent<HTMLElement>) => void;
-    onFocus?: (event?: React.FocusEvent<HTMLInputElement>) => void;
-    onKeyDown?: (event?: React.KeyboardEvent<HTMLInputElement>) => void;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onClick?: (event?: MouseEvent<HTMLElement>) => void;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
     placeholder?: string;
     type?: string;
     value?: string;
 };
 type InputConfig = AppearanceConfig<AppearanceKeysState, InputAppearanceProps>;
 type InputAppearance = InputConfig['appearance'];
-export type { InputAppearance, InputAppearanceProps, InputConfig, InputProps };
+type InputAppearanceStyle = AppearanceRecord<AppearanceStyleKey, InputAppearanceProps, 'borderColor' | 'borderColorHover' | 'fill'>;
+type InputAppearanceShape = Partial<Record<AppearanceShapeKey, Partial<Pick<InputAppearanceProps, 'shape'>>>>;
+type InputAppearanceSize = AppearancePartialRecord<AppearanceSizeKey, InputAppearanceProps, 'size' | 'textSize'>;
+export type { InputAppearance, InputAppearanceProps, InputAppearanceShape, InputAppearanceSize, InputAppearanceStyle, InputConfig, InputProps, };

package/dist/types/components/Input/appearance/inputDefault.d.ts

@@ -1,3 +1,21 @@
-import { InputAppearance } from '../Input.interface';
-declare const inputAppearanceDefault: InputAppearance;
+declare const inputAppearanceDefault: {
+    defaultPrimary: {
+        fill: "surfaceSecondary";
+        fillHover: "surfaceTertiary";
+        borderColor: "surfaceBorderTertiary";
+        borderColorHover: "surfaceBorderQuaternary";
+        textColor: "surfaceTextPrimary";
+        caret: "accentSecondary";
+        placeholderTextColor: "surfaceTextQuaternary";
+    };
+    defaultSecondary: {
+        fill: "surfacePrimary";
+        fillHover: "surfaceTertiary";
+        borderColor: "surfaceBorderTertiary";
+        borderColorHover: "surfaceBorderQuaternary";
+        textColor: "surfaceTextPrimary";
+        caret: "accentSecondary";
+        placeholderTextColor: "surfaceTextQuaternary";
+    };
+};
 export { inputAppearanceDefault };

package/dist/types/components/Input/appearance/inputDisabled.d.ts

@@ -1,3 +1,17 @@
-import { InputAppearance } from '../Input.interface';
-declare const inputAppearanceDisabled: InputAppearance;
+declare const inputAppearanceDisabled: {
+    disabledPrimary: {
+        fill: "surfaceDisabled";
+        fillHover: "surfaceDisabled";
+        borderColor: "surfaceBorderDisabled";
+        borderColorHover: "surfaceBorderDisabled";
+        textColor: "surfaceTextQuaternary";
+        placeholderTextColor: "surfaceTextQuaternary";
+    };
+    disabledSecondary: {
+        fill: "surfaceSecondary";
+        borderColor: "surfaceBorderTertiary";
+        borderColorHover: "surfaceBorderQuaternary";
+        placeholderTextColor: "surfaceTextSecondary";
+    };
+};
 export { inputAppearanceDisabled };

package/dist/types/components/Input/appearance/inputError.d.ts

@@ -1,3 +1,18 @@
-import { InputAppearance } from '../Input.interface';
-declare const inputAppearanceError: InputAppearance;
+declare const inputAppearanceError: {
+    errorPrimary: {
+        fill: "errorTertiary";
+        borderColor: "errorBorderQuaternary";
+        borderColorHover: "errorBorderQuaternary";
+        textColor: "surfaceTextPrimary";
+        caret: "accentSecondary";
+        placeholderTextColor: "surfaceTextQuaternary";
+    };
+    errorSecondary: {
+        fill: "errorSecondary";
+        borderColor: "errorBorderTertiary";
+        borderColorHover: "errorBorderQuaternary";
+        caret: "accentSecondary";
+        placeholderTextColor: "errorTextSecondary";
+    };
+};
 export { inputAppearanceError };

package/dist/types/components/Input/appearance/inputRequire.d.ts

@@ -1,3 +1,19 @@
-import { InputAppearance } from '../Input.interface';
-declare const inputAppearanceRequire: InputAppearance;
+declare const inputAppearanceRequire: {
+    requirePrimary: {
+        fill: "warningTertiary";
+        fillHover: "warningSecondary";
+        borderColor: "warningBorderQuaternary";
+        borderColorHover: "warningBorderQuaternary";
+        textColor: "surfaceTextPrimary";
+        caret: "accentSecondary";
+        placeholderTextColor: "surfaceTextQuaternary";
+    };
+    requireSecondary: {
+        fill: "surfaceSecondary";
+        borderColor: "surfaceBorderTertiary";
+        borderColorHover: "surfaceBorderQuaternary";
+        caret: "accentSecondary";
+        placeholderTextColor: "surfaceTextSecondary";
+    };
+};
 export { inputAppearanceRequire };

package/dist/types/components/Input/appearance/inputShape.d.ts

@@ -1,3 +1,21 @@
-import { InputAppearance } from '../Input.interface';
-declare const inputAppearanceShape: InputAppearance;
+declare const inputAppearanceShape: {
+    circular: {
+        shape: "circular";
+    };
+    rounded: {
+        shape: "rounded";
+    };
+    roundedXL: {
+        shape: "rounded";
+    };
+    roundedL: {
+        shape: "rounded";
+    };
+    roundedM: {
+        shape: "rounded";
+    };
+    roundedS: {
+        shape: "rounded";
+    };
+};
 export { inputAppearanceShape };

package/dist/types/components/Input/appearance/inputSize.d.ts

@@ -1,3 +1,19 @@
-import { InputAppearance } from '../Input.interface';
-declare const inputAppearanceSize: InputAppearance;
+declare const inputAppearanceSize: {
+    sizeXL: {
+        size: "xl";
+        textSize: "m";
+    };
+    sizeL: {
+        size: "l";
+        textSize: "m";
+    };
+    sizeM: {
+        size: "m";
+        textSize: "m";
+    };
+    sizeS: {
+        size: "s";
+        textSize: "s";
+    };
+};
 export { inputAppearanceSize };

package/dist/types/components/Input/appearance/inputStyle.d.ts

@@ -1,3 +1,16 @@
-import { InputAppearance } from '../Input.interface';
-declare const inputAppearanceStyle: InputAppearance;
+declare const inputAppearanceStyle: {
+    solid: {
+        borderColor: "none";
+        borderColorHover: "none";
+    };
+    outlined: {
+        fill: "none";
+    };
+    full: {};
+    ghost: {
+        fill: "none";
+        borderColor: "none";
+        borderColorHover: "none";
+    };
+};
 export { inputAppearanceStyle };

package/dist/types/components/Input/appearance/inputSuccess.d.ts

@@ -1,3 +1,18 @@
-import { InputAppearance } from '../Input.interface';
-declare const inputAppearanceSuccess: InputAppearance;
+declare const inputAppearanceSuccess: {
+    successPrimary: {
+        fill: "successTertiary";
+        borderColor: "successBorderQuaternary";
+        borderColorHover: "successBorderQuaternary";
+        textColor: "surfaceTextPrimary";
+        caret: "accentSecondary";
+        placeholderTextColor: "surfaceTextQuaternary";
+    };
+    successSecondary: {
+        fill: "surfaceSecondary";
+        borderColor: "surfaceBorderTertiary";
+        borderColorHover: "surfaceBorderQuaternary";
+        caret: "accentSecondary";
+        placeholderTextColor: "surfaceTextSecondary";
+    };
+};
 export { inputAppearanceSuccess };