@cdek-it/react-native-ui-kit 0.6.9 → 1.0.0-beta.0

package/dist/components/Button/utils/ButtonContainer.js

@@ -1,10 +1,430 @@
+import { useContext } from 'react';
 import { Pressable } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
 import { genericMemo } from '../../../utils/genericMemo';
-import { useButtonContainerCallbackStyle } from './useButtonContainerCallbackStyle';
-export const ButtonContainerComponent = ({ style, size, disabled, loading, variant, shape, iconOnly, children, containerVariantStyles, pressedVariantStyles, pressableRef, ...props }) => {
-    const containerCallbackStyle = useButtonContainerCallbackStyle(size, variant, shape, disabled, loading, iconOnly, style, containerVariantStyles, pressedVariantStyles);
-    return (<Pressable accessibilityRole='button' disabled={disabled || loading} ref={pressableRef} style={containerCallbackStyle} {...props}>
+import { ButtonPressedContext } from './ButtonPressedContext';
+import { ButtonVariantContext } from './ButtonVariantContext';
+const ButtonContainerComponent = ({ style, size, disabled, loading, shape, isIconOnly, children, pressableRef, onPressIn, onPressOut, ...props }) => {
+    const pressed = useContext(ButtonPressedContext);
+    const { variant, severity } = useContext(ButtonVariantContext);
+    buttonContainerStyles.useVariants({
+        size,
+        shape,
+        variant,
+        severity,
+        pressed: pressed ? 'true' : 'false',
+        disabled: disabled || loading ? 'true' : 'false',
+        iconOnly: isIconOnly ? 'true' : 'false',
+    });
+    const resolvedStyle = typeof style === 'function'
+        ? (state) => [
+            buttonContainerStyles.container,
+            isIconOnly && buttonContainerStyles.iconOnly,
+            style(state),
+        ]
+        : [
+            buttonContainerStyles.container,
+            isIconOnly && buttonContainerStyles.iconOnly,
+            ...(style ? [style] : []),
+        ];
+    return (<Pressable accessibilityRole='button' disabled={disabled || loading} ref={pressableRef} style={resolvedStyle} onPressIn={onPressIn} onPressOut={onPressOut} {...props}>
       {children}
     </Pressable>);
 };
 export const ButtonContainer = genericMemo(ButtonContainerComponent);
+const buttonContainerStyles = StyleSheet.create(({ theme, border, spacing, sizing }) => ({
+    container: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderWidth: border.Width.border,
+        variants: {
+            size: {
+                xlarge: {
+                    paddingHorizontal: spacing.Padding['p-6'],
+                    paddingVertical: theme.Button.Common.buttonPaddingTopBottom,
+                    height: theme.Button.Common.buttonHeightXL,
+                    minHeight: theme.Button.Common.buttonHeightXL,
+                    maxHeight: theme.Button.Common.buttonHeightXL,
+                    gap: spacing.Gap['gap-3'],
+                    borderRadius: theme.General.borderRadius2XL,
+                },
+                large: {
+                    paddingHorizontal: spacing.Padding['p-6'],
+                    paddingVertical: theme.Button.Common.buttonPaddingTopBottom,
+                    height: theme.Button.Common.buttonHeightLG,
+                    minHeight: theme.Button.Common.buttonHeightLG,
+                    maxHeight: theme.Button.Common.buttonHeightLG,
+                    gap: spacing.Gap['gap-3'],
+                    borderRadius: theme.General.borderRadius2XL,
+                },
+                base: {
+                    paddingHorizontal: theme.Button.Common.buttonPaddingLeftRight,
+                    paddingVertical: theme.Button.Common.buttonPaddingTopBottom,
+                    height: theme.Button.Common.buttonHeight,
+                    minHeight: theme.Button.Common.buttonHeight,
+                    maxHeight: theme.Button.Common.buttonHeight,
+                    gap: theme.General.inlineSpacing,
+                    borderRadius: theme.General.borderRadiusXL,
+                },
+                small: {
+                    paddingHorizontal: spacing.Padding['p-3'],
+                    paddingVertical: theme.Button.Common.buttonPaddingTopBottom,
+                    height: theme.Button.Common.buttonHeightSM,
+                    minHeight: theme.Button.Common.buttonHeightSM,
+                    maxHeight: theme.Button.Common.buttonHeightSM,
+                    gap: theme.General.inlineSpacing,
+                    borderRadius: theme.General.borderRadiusXL,
+                },
+            },
+            shape: {
+                square: {},
+                circle: { borderRadius: border.Radius['rounded-full'] },
+            },
+            variant: {
+                primary: {
+                    borderColor: theme.Button.Brand.buttonBorderColor,
+                    backgroundColor: theme.Button.Brand.buttonBg,
+                },
+                secondary: {
+                    borderColor: theme.Button.Primary.secondaryButtonBorderColor,
+                    backgroundColor: theme.Button.Primary.secondaryButtonBg,
+                },
+                tertiary: {
+                    borderColor: theme.Button.Secondary.helpButtonBorderColor,
+                    backgroundColor: theme.Button.Secondary.helpButtonBg,
+                },
+                text: {
+                    borderColor: theme.Button.Brand.buttonBorderColor,
+                    backgroundColor: theme.Button.Text.textButtonBg,
+                },
+                link: {
+                    paddingHorizontal: 0,
+                    paddingVertical: spacing.Padding['p-1'],
+                    height: 'auto',
+                    minHeight: 'auto',
+                    borderColor: theme.Button.Brand.buttonBorderColor,
+                    backgroundColor: theme.Button.Text.textButtonBg,
+                },
+                basic: {
+                    borderColor: theme.Button.Brand.buttonBorderColor,
+                    backgroundColor: theme.Button.Brand.buttonBg,
+                },
+                outlined: {
+                    borderColor: theme.Button.Brand.buttonBorderColor,
+                    backgroundColor: theme.Button.Text.textButtonBg,
+                },
+            },
+            severity: { info: {}, success: {}, warning: {}, danger: {} },
+            pressed: { true: {}, false: {} },
+            disabled: {
+                true: {
+                    backgroundColor: theme.Button.Disabled.disabledButtonBg,
+                    borderColor: theme.Button.Disabled.disabledButtonBorderColor,
+                },
+                false: {},
+            },
+            iconOnly: { true: {}, false: {} },
+        },
+        compoundVariants: [
+            // basic button pressed
+            {
+                variant: 'primary',
+                pressed: 'true',
+                styles: {
+                    borderColor: theme.Button.Brand.buttonBorderColor,
+                    backgroundColor: theme.Button.Brand.buttonHoverBg,
+                },
+            },
+            {
+                variant: 'secondary',
+                pressed: 'true',
+                styles: {
+                    borderColor: theme.Button.Primary.secondaryButtonHoverBorderColor,
+                    backgroundColor: theme.Button.Primary.secondaryButtonHoverBg,
+                },
+            },
+            {
+                variant: 'tertiary',
+                pressed: 'true',
+                styles: {
+                    borderColor: theme.Button.Secondary.helpButtonHoverBorderColor,
+                    backgroundColor: theme.Button.Secondary.helpButtonHoverBg,
+                },
+            },
+            {
+                variant: 'text',
+                pressed: 'true',
+                styles: {
+                    borderColor: theme.Button.Brand.buttonBorderColor,
+                    backgroundColor: theme.Button.Text.textButtonHoverBg,
+                },
+            },
+            // severity container (override placeholder variant styles)
+            {
+                variant: 'basic',
+                severity: 'info',
+                styles: {
+                    borderColor: theme.Button.Severity.Info.Basic.infoButtonBorderColor,
+                    backgroundColor: theme.Button.Severity.Info.Basic.infoButtonBg,
+                },
+            },
+            {
+                variant: 'outlined',
+                severity: 'info',
+                styles: {
+                    borderColor: theme.Button.Severity.Info.Outlined.infoOutlinedButtonBorderColor,
+                    backgroundColor: theme.Button.Severity.Info.Outlined.infoOutlinedButtonBg,
+                },
+            },
+            {
+                variant: 'text',
+                severity: 'info',
+                styles: {
+                    borderColor: theme.Button.Severity.Info.Basic.infoButtonBorderColor,
+                    backgroundColor: theme.Button.Severity.Info.Text.infoTextButtonBg,
+                },
+            },
+            {
+                variant: 'basic',
+                severity: 'success',
+                styles: {
+                    borderColor: theme.Button.Severity.Success.Basic.successButtonBorderColor,
+                    backgroundColor: theme.Button.Severity.Success.Basic.successButtonBg,
+                },
+            },
+            {
+                variant: 'outlined',
+                severity: 'success',
+                styles: {
+                    borderColor: theme.Button.Severity.Success.Outlined
+                        .successOutlinedButtonBorderColor,
+                    backgroundColor: theme.Button.Severity.Success.Outlined.successOutlinedButtonBg,
+                },
+            },
+            {
+                variant: 'text',
+                severity: 'success',
+                styles: {
+                    borderColor: theme.Button.Severity.Success.Basic.successButtonBorderColor,
+                    backgroundColor: theme.Button.Severity.Success.Text.successTextButtonBg,
+                },
+            },
+            {
+                variant: 'basic',
+                severity: 'warning',
+                styles: {
+                    borderColor: theme.Button.Severity.Warning.Basic.warningButtonBorderColor,
+                    backgroundColor: theme.Button.Severity.Warning.Basic.warningButtonBg,
+                },
+            },
+            {
+                variant: 'outlined',
+                severity: 'warning',
+                styles: {
+                    borderColor: theme.Button.Severity.Warning.Outlined
+                        .warningOutlinedButtonBorderColor,
+                    backgroundColor: theme.Button.Severity.Warning.Outlined.warningOutlinedButtonBg,
+                },
+            },
+            {
+                variant: 'text',
+                severity: 'warning',
+                styles: {
+                    borderColor: theme.Button.Severity.Warning.Basic.warningButtonBorderColor,
+                    backgroundColor: theme.Button.Severity.Warning.Text.warningTextButtonBg,
+                },
+            },
+            {
+                variant: 'basic',
+                severity: 'danger',
+                styles: {
+                    borderColor: theme.Button.Severity.Danger.Basic.dangerButtonBorderColor,
+                    backgroundColor: theme.Button.Severity.Danger.Basic.dangerButtonBg,
+                },
+            },
+            {
+                variant: 'outlined',
+                severity: 'danger',
+                styles: {
+                    borderColor: theme.Button.Severity.Danger.Outlined
+                        .dangerOutlinedButtonBorderColor,
+                    backgroundColor: theme.Button.Severity.Danger.Outlined.dangerOutlinedButtonBg,
+                },
+            },
+            {
+                variant: 'text',
+                severity: 'danger',
+                styles: {
+                    borderColor: theme.Button.Severity.Danger.Basic.dangerButtonBorderColor,
+                    backgroundColor: theme.Button.Severity.Danger.Text.dangerTextButtonBg,
+                },
+            },
+            // severity pressed
+            {
+                variant: 'basic',
+                severity: 'info',
+                pressed: 'true',
+                styles: {
+                    borderColor: theme.Button.Severity.Info.Basic.infoButtonBorderColor,
+                    backgroundColor: theme.Button.Severity.Info.Basic.infoButtonHoverBg,
+                },
+            },
+            {
+                variant: 'outlined',
+                severity: 'info',
+                pressed: 'true',
+                styles: {
+                    borderColor: theme.Button.Severity.Info.Outlined
+                        .infoOutlinedButtonHoverBorderColor,
+                    backgroundColor: theme.Button.Severity.Info.Outlined.infoOutlinedButtonHoverBg,
+                },
+            },
+            {
+                variant: 'text',
+                severity: 'info',
+                pressed: 'true',
+                styles: {
+                    borderColor: theme.Surface['surface-transparent'],
+                    backgroundColor: theme.Button.Severity.Info.Text.infoTextButtonHoverBg,
+                },
+            },
+            {
+                variant: 'basic',
+                severity: 'success',
+                pressed: 'true',
+                styles: {
+                    borderColor: theme.Button.Severity.Success.Basic.successButtonBorderColor,
+                    backgroundColor: theme.Button.Severity.Success.Basic.successButtonHoverBg,
+                },
+            },
+            {
+                variant: 'outlined',
+                severity: 'success',
+                pressed: 'true',
+                styles: {
+                    borderColor: theme.Button.Severity.Success.Outlined
+                        .successOutlinedButtonHoverBorderColor,
+                    backgroundColor: theme.Button.Severity.Success.Outlined
+                        .successOutlinedButtonHoverBg,
+                },
+            },
+            {
+                variant: 'text',
+                severity: 'success',
+                pressed: 'true',
+                styles: {
+                    borderColor: theme.Surface['surface-transparent'],
+                    backgroundColor: theme.Button.Severity.Success.Text.successTextButtonHoverBg,
+                },
+            },
+            {
+                variant: 'basic',
+                severity: 'warning',
+                pressed: 'true',
+                styles: {
+                    borderColor: theme.Button.Severity.Warning.Basic.warningButtonBorderColor,
+                    backgroundColor: theme.Button.Severity.Warning.Basic.warningButtonHoverBg,
+                },
+            },
+            {
+                variant: 'outlined',
+                severity: 'warning',
+                pressed: 'true',
+                styles: {
+                    borderColor: theme.Button.Severity.Warning.Outlined
+                        .warningOutlinedButtonHoverBorderColor,
+                    backgroundColor: theme.Button.Severity.Warning.Outlined
+                        .warningOutlinedButtonHoverBg,
+                },
+            },
+            {
+                variant: 'text',
+                severity: 'warning',
+                pressed: 'true',
+                styles: {
+                    borderColor: theme.Surface['surface-transparent'],
+                    backgroundColor: theme.Button.Severity.Warning.Text.warningTextButtonHoverBg,
+                },
+            },
+            {
+                variant: 'basic',
+                severity: 'danger',
+                pressed: 'true',
+                styles: {
+                    borderColor: theme.Button.Severity.Danger.Basic.dangerButtonBorderColor,
+                    backgroundColor: theme.Button.Severity.Danger.Basic.dangerButtonHoverBg,
+                },
+            },
+            {
+                variant: 'outlined',
+                severity: 'danger',
+                pressed: 'true',
+                styles: {
+                    borderColor: theme.Button.Severity.Danger.Outlined
+                        .dangerOutlinedButtonHoverBorderColor,
+                    backgroundColor: theme.Button.Severity.Danger.Outlined.dangerOutlinedButtonHoverBg,
+                },
+            },
+            {
+                variant: 'text',
+                severity: 'danger',
+                pressed: 'true',
+                styles: {
+                    borderColor: theme.Surface['surface-transparent'],
+                    backgroundColor: theme.Button.Severity.Danger.Text.dangerTextButtonHoverBg,
+                },
+            },
+            // link + iconOnly special sizes
+            {
+                variant: 'link',
+                iconOnly: 'true',
+                size: 'xlarge',
+                styles: {
+                    paddingHorizontal: spacing.Gap['gap-1'],
+                    paddingVertical: spacing.Gap['gap-1'],
+                    height: sizing.Height['h-2'],
+                    minHeight: sizing.Height['h-2'],
+                    maxHeight: sizing.Height['h-2'],
+                },
+            },
+            {
+                variant: 'link',
+                iconOnly: 'true',
+                size: 'large',
+                styles: {
+                    paddingHorizontal: spacing.Gap['gap-0'],
+                    paddingVertical: spacing.Gap['gap-0'],
+                    height: 24.5,
+                    minHeight: 24.5,
+                    maxHeight: 24.5,
+                },
+            },
+            {
+                variant: 'link',
+                iconOnly: 'true',
+                size: 'base',
+                styles: {
+                    paddingHorizontal: spacing.Gap['gap-1'],
+                    paddingVertical: spacing.Gap['gap-1'],
+                    height: 21.5,
+                    minHeight: 21.5,
+                    maxHeight: 21.5,
+                },
+            },
+            {
+                variant: 'link',
+                iconOnly: 'true',
+                size: 'small',
+                styles: {
+                    paddingHorizontal: spacing.Gap['gap-1'],
+                    paddingVertical: spacing.Gap['gap-1'],
+                    height: sizing.Height['h-1'],
+                    minHeight: sizing.Height['h-2'],
+                    maxHeight: sizing.Height['h-2'],
+                },
+            },
+        ],
+    },
+    iconOnly: { aspectRatio: 1 },
+}));

package/dist/components/Button/utils/ButtonIcon.d.ts

@@ -1,4 +1,8 @@
-import type { BaseButtonProps, ButtonVariant, VariantStyles } from '../types';
-export type ButtonIconComponentProps<Variant extends ButtonVariant> = Pick<Required<BaseButtonProps<Variant>>, 'size' | 'variant' | 'disabled' | 'loading'> & Pick<BaseButtonProps<Variant>, 'Icon'> & Pick<VariantStyles<Variant>, 'iconVariantStyles'>;
-export declare const ButtonIconComponent: <Variant extends ButtonVariant>({ size, variant, disabled, loading, Icon, iconVariantStyles, }: ButtonIconComponentProps<Variant>) => import("react").JSX.Element | null;
-export declare const ButtonIcon: <Variant extends ButtonVariant>({ size, variant, disabled, loading, Icon, iconVariantStyles, }: ButtonIconComponentProps<Variant>) => import("react").JSX.Element | null;
+import type { BaseButtonProps, ButtonSize } from '../types';
+export interface ButtonIconProps {
+    readonly size: ButtonSize;
+    readonly disabled: boolean;
+    readonly loading: boolean;
+    readonly Icon?: BaseButtonProps<never>['Icon'];
+}
+export declare const ButtonIcon: ({ size, disabled, loading, Icon, }: ButtonIconProps) => import("react").JSX.Element | null;

package/dist/components/Button/utils/ButtonIcon.js

@@ -1,11 +1,154 @@
+import { useContext } from 'react';
+import { StyleSheet } from 'react-native-unistyles';
 import { SvgUniversal } from '../../../utils/SvgUniversal';
 import { genericMemo } from '../../../utils/genericMemo';
-import { useIconStyle } from './useIconStyle';
-export const ButtonIconComponent = ({ size, variant, disabled, loading, Icon, iconVariantStyles, }) => {
-    const iconStyle = useIconStyle(size, variant, disabled, loading, iconVariantStyles);
+import { ButtonPressedContext } from './ButtonPressedContext';
+import { ButtonVariantContext } from './ButtonVariantContext';
+const ButtonIconComponent = ({ size, disabled, loading, Icon, }) => {
+    const pressed = useContext(ButtonPressedContext);
+    const { variant, severity } = useContext(ButtonVariantContext);
+    buttonIconStyles.useVariants({
+        size,
+        variant,
+        severity,
+        pressed: pressed ? 'true' : 'false',
+        disabled: disabled || loading ? 'true' : 'false',
+    });
     if (!Icon) {
         return null;
     }
-    return (<SvgUniversal height={iconStyle.height} source={Icon} style={iconStyle} testID='Button_Icon' width={iconStyle.width}/>);
+    return (<SvgUniversal {...buttonIconStyles.icon} source={Icon} testID='Button_Icon'/>);
 };
 export const ButtonIcon = genericMemo(ButtonIconComponent);
+const buttonIconStyles = StyleSheet.create(({ theme, typography }) => ({
+    icon: {
+        variants: {
+            size: {
+                xlarge: {
+                    height: typography.Size['text-2xl'],
+                    width: typography.Size['text-2xl'],
+                },
+                large: {
+                    height: typography.Size['text-2xl'],
+                    width: typography.Size['text-2xl'],
+                },
+                base: {
+                    height: typography.Size['text-xl'],
+                    width: typography.Size['text-xl'],
+                },
+                small: {
+                    height: typography.Size['text-base'],
+                    width: typography.Size['text-base'],
+                },
+            },
+            variant: {
+                primary: { color: theme.Button.Brand.buttonTextColor },
+                secondary: { color: theme.Button.Primary.secondaryButtonTextColor },
+                tertiary: { color: theme.Button.Secondary.helpButtonTextColor },
+                text: { color: theme.Button.Text.textButtonTextColor },
+                link: { color: theme.Button.Text.textButtonTextColor },
+                basic: { color: theme.Button.Brand.buttonTextColor },
+                outlined: { color: theme.Button.Brand.buttonTextColor },
+            },
+            severity: { info: {}, success: {}, warning: {}, danger: {} },
+            pressed: { true: {}, false: {} },
+            disabled: {
+                true: { color: theme.Button.Disabled.disabledButtonTextColor },
+                false: {},
+            },
+        },
+        compoundVariants: [
+            // link pressed
+            {
+                variant: 'link',
+                pressed: 'true',
+                styles: { color: typography.Color.Common['text-color-secondary'] },
+            },
+            // severity icon colors
+            {
+                variant: 'basic',
+                severity: 'info',
+                styles: { color: theme.Button.Severity.Info.Basic.infoButtonTextColor },
+            },
+            {
+                variant: 'outlined',
+                severity: 'info',
+                styles: {
+                    color: theme.Button.Severity.Info.Outlined.infoOutlinedButtonTextColor,
+                },
+            },
+            {
+                variant: 'text',
+                severity: 'info',
+                styles: {
+                    color: theme.Button.Severity.Info.Text.infoTextButtonTextColor,
+                },
+            },
+            {
+                variant: 'basic',
+                severity: 'success',
+                styles: {
+                    color: theme.Button.Severity.Success.Basic.successButtonTextColor,
+                },
+            },
+            {
+                variant: 'outlined',
+                severity: 'success',
+                styles: {
+                    color: theme.Button.Severity.Success.Outlined
+                        .successOutlinedButtonTextColor,
+                },
+            },
+            {
+                variant: 'text',
+                severity: 'success',
+                styles: {
+                    color: theme.Button.Severity.Success.Text.successTextButtonTextColor,
+                },
+            },
+            {
+                variant: 'basic',
+                severity: 'warning',
+                styles: {
+                    color: theme.Button.Severity.Warning.Basic.warningButtonTextColor,
+                },
+            },
+            {
+                variant: 'outlined',
+                severity: 'warning',
+                styles: {
+                    color: theme.Button.Severity.Warning.Outlined
+                        .warningOutlinedButtonTextColor,
+                },
+            },
+            {
+                variant: 'text',
+                severity: 'warning',
+                styles: {
+                    color: theme.Button.Severity.Warning.Text.warningTextButtonTextColor,
+                },
+            },
+            {
+                variant: 'basic',
+                severity: 'danger',
+                styles: {
+                    color: theme.Button.Severity.Danger.Basic.dangerButtonTextColor,
+                },
+            },
+            {
+                variant: 'outlined',
+                severity: 'danger',
+                styles: {
+                    color: theme.Button.Severity.Danger.Outlined.dangerOutlinedButtonTextColor,
+                },
+            },
+            {
+                variant: 'text',
+                severity: 'danger',
+                styles: {
+                    color: theme.Button.Severity.Danger.Text.dangerTextButtonTextColor,
+                },
+            },
+        ],
+    },
+}));

package/dist/components/Button/utils/ButtonLabel.d.ts

@@ -1,4 +1,9 @@
-import type { BaseButtonProps, ButtonVariant, VariantStyles } from '../types';
-export type ButtonLabelComponentProps<Variant extends ButtonVariant> = Pick<BaseButtonProps<Variant>, 'iconOnly' | 'label'> & Pick<Required<BaseButtonProps<Variant>>, 'size' | 'variant' | 'disabled' | 'loading'> & Pick<VariantStyles<Variant>, 'labelVariantStyles'>;
-export declare const ButtonLabelComponent: <Variant extends ButtonVariant>({ label, iconOnly, size, disabled, loading, variant, labelVariantStyles, }: ButtonLabelComponentProps<Variant>) => import("react").JSX.Element | null;
-export declare const ButtonLabel: <Variant extends ButtonVariant>({ label, iconOnly, size, disabled, loading, variant, labelVariantStyles, }: ButtonLabelComponentProps<Variant>) => import("react").JSX.Element | null;
+import type { BaseButtonProps, ButtonSize } from '../types';
+export interface ButtonLabelProps {
+    readonly iconOnly?: BaseButtonProps<never>['iconOnly'];
+    readonly label?: string;
+    readonly size: ButtonSize;
+    readonly disabled: boolean;
+    readonly loading: boolean;
+}
+export declare const ButtonLabel: ({ label, iconOnly, size, disabled, loading, }: ButtonLabelProps) => import("react").JSX.Element | null;