@gataca/design-system 0.2.16 → 0.2.18

package/dist/components/index.native.d.ts

@@ -9,6 +9,8 @@ export { default as RoundedButton } from './native/Buttons/RoundedButton/index.n
 export { default as ButtonIcon } from './native/Buttons/ButtonIcon/index.native';
 export { default as BrandButton } from './native/Buttons/BrandButton/index.native';
 export { default as SegmentedButton } from './native/Buttons/SegmentedButton/index.native';
+export { default as Indicator } from './native/Indicator/Indicator/index.native';
+export { default as Avatar } from './native/Avatars/Avatar/index.native';
 export { default as CheckIcon } from './native/Icons/icons/check';
 export { default as InfoIcon } from './native/Icons/icons/info';
 export { default as ChevronDownIcon } from './native/Icons/icons/chevronDown';

package/dist/components/index.web.d.ts

@@ -8,6 +8,8 @@ export { default as RoundedButton } from './web/Buttons/RoundedButton/index.web'
 export { default as ButtonIcon } from './web/Buttons/ButtonIcon/index.web';
 export { default as BrandButton } from './web/Buttons/BrandButton/index.web';
 export { default as SegmentedButton } from './web/Buttons/SegmentedButton/index.web';
+export { default as Indicator } from './web/Indicator/Indicator/index.web';
+export { default as Avatar } from './web/Avatars/Avatar/index.web';
 export { default as CheckIcon } from './web/Icons/icons/check';
 export { default as InfoIcon } from './web/Icons/icons/info';
 export { default as ChevronDownIcon } from './web/Icons/icons/chevronDown';

package/dist/components/native/Avatars/Avatar/Avatar.config.native.d.ts

@@ -0,0 +1,214 @@
+import { ColorsType, StyleType } from '../../../../utils/theming';
+import { AvatarType } from './Avatar.types.native';
+export declare const createColorMap: (Colors: ColorsType) => {
+    white: {
+        enable: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+        hover: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+        disable: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+    };
+    black: {
+        enable: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+        hover: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+        disable: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+    };
+    purple: {
+        enable: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+        hover: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+        disable: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+    };
+    lightPurple: {
+        enable: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+        hover: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+        disable: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+    };
+    red: {
+        enable: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+        hover: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+        disable: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+    };
+    green: {
+        enable: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+        hover: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+        disable: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+    };
+    yellow: {
+        enable: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+        hover: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+        disable: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+    };
+    blue: {
+        enable: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+        hover: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+        disable: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+    };
+    teal: {
+        enable: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+        hover: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+        disable: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+    };
+    lightTeal: {
+        enable: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+        hover: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+        disable: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+    };
+    grey: {
+        enable: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+        hover: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+        disable: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+    };
+    pink: {
+        enable: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+        hover: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+        disable: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+    };
+    lightPink: {
+        enable: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+        hover: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+        disable: {
+            backgroundColor: string;
+            iconColor: string;
+        };
+    };
+};
+export declare const avatarBgColorMap: (Colors: ColorsType) => {
+    black: string;
+    purple: string;
+    pink: string;
+    teal: string;
+    gray: string;
+};
+export declare const avatarContainerSizeMap: Record<string, any>;
+export declare const avatarSizeMap: Record<string, any>;
+export declare const avatarBorderRadiousMap: Record<string, any>;
+export declare const avatarFontsMap: (fonts: StyleType) => {
+    '2xl': import("../../../../styles/Fonts").FontsStyle;
+    large: import("../../../../styles/Fonts").FontsStyle;
+    medium: import("../../../../styles/Fonts").FontsStyle;
+    small: import("../../../../styles/Fonts").FontsStyle;
+};
+export declare const avatarIndicatorSizeMap: Record<string, string>;
+export declare const avatarButtonIconSizeMap: Record<string, string>;
+export declare const getAvatarGeneralStyles: (colors: ColorsType, size: string, color: string, type?: AvatarType, image?: string) => {
+    backgroundColor: any;
+    backgroundImage: any;
+    borderRadius: any;
+    height: any;
+    width: any;
+};
+export declare const getAvatarPaddings: (size: string) => "8px" | "12px";
+export declare const getAvatarMinSize: (size: string) => 48 | 40 | 32;
+export declare const getAvatarTextStyles: (fontStyles: StyleType, colors: ColorsType, size: string) => any;

package/dist/components/native/Avatars/Avatar/Avatar.native.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { AvatarProps } from './Avatar.types.native';
+declare const Avatar: (props: React.PropsWithChildren<AvatarProps>) => import("react/jsx-runtime").JSX.Element;
+export default Avatar;

package/dist/components/native/Avatars/Avatar/Avatar.types.native.d.ts

@@ -0,0 +1,57 @@
+import { ButtonIconColor, ButtonIconState } from '../../Buttons/ButtonIcon/ButtonIcon.types.native';
+import { IconSize, IconStyle } from '../../Icons/icon_types';
+import { IndicatorColor, IndicatorType } from '../../Indicator/Indicator/indicator_types.native';
+export type Size = 'large' | 'medium' | 'small';
+export type AvatarForm = 'square' | 'round';
+export type AvatarType = 'image' | 'initials';
+export type AvatarSize = '2xl' | 'large' | 'medium' | 'small';
+export type AvatarColor = 'gray' | 'teal' | 'pink' | 'purple' | 'black';
+export interface AvatarProps {
+    type: AvatarType;
+    image?: string;
+    text?: string;
+    size: AvatarSize;
+    color?: AvatarColor;
+    showIndicator?: boolean;
+    indicator?: {
+        color?: IndicatorColor;
+        type?: IndicatorType;
+        quantity?: number;
+    };
+    showButtonIcon?: boolean;
+    buttonIcon?: {
+        color?: ButtonIconColor;
+        state?: ButtonIconState;
+        Icon?: React.FC<{
+            size: IconSize;
+            style: IconStyle;
+            color: string;
+        }>;
+        onPress: (x?: any) => void;
+    };
+    containerStyle?: any;
+}
+export type AvatarCircleSize = {
+    '2xl': 109;
+    xl: 78.1;
+    large: 6.1;
+    medium: 40;
+    small: 32;
+    xsmall: 24.4;
+};
+export type AvatarIndicatorSize = {
+    '2xl': 24;
+    xl: 22;
+    large: 12;
+    medium: 10;
+    small: 8;
+    xsmall: 4;
+};
+export type AvatarFontStyle = {
+    '2xl': 'heading2';
+    xl: 'heading4';
+    large: 'heading5';
+    medium: 'bodyBoldMD';
+    small: 'bodyBoldSmall';
+    xsmall: 'bodyBoldCap';
+};

package/dist/components/native/Avatars/Avatar/index.native.d.ts

@@ -0,0 +1,2 @@
+import Avatar from './Avatar.native';
+export default Avatar;

package/dist/components/native/Avatars/Avatar/styles.native.d.ts

@@ -0,0 +1,12 @@
+declare const _default: {
+    avatarCircle: {
+        display: "flex";
+        alignItems: "center";
+        justifyContent: "center";
+        flexDirection: "row";
+        gap: number;
+        borderWidth: number;
+        position: "relative";
+    };
+};
+export default _default;

package/dist/components/native/Buttons/ButtonIcon/ButtonIcon.config.native.d.ts

@@ -4,16 +4,28 @@ export declare const createColorMap: (Colors: ColorsType) => {
         enable: {
             backgroundColor: string;
             iconColor: string;
+            borderColor: string;
+        };
+        hover: {
+            backgroundColor: string;
+            iconColor: string;
+            borderColor: string;
         };
         disable: {
             backgroundColor: string;
             iconColor: string;
         };
     };
-    black: {
+    grey: {
         enable: {
             backgroundColor: string;
             iconColor: string;
+            borderColor: string;
+        };
+        hover: {
+            backgroundColor: string;
+            iconColor: string;
+            borderColor: string;
         };
         disable: {
             backgroundColor: string;
@@ -24,6 +36,12 @@ export declare const createColorMap: (Colors: ColorsType) => {
         enable: {
             backgroundColor: string;
             iconColor: string;
+            borderColor: string;
+        };
+        hover: {
+            backgroundColor: string;
+            iconColor: string;
+            borderColor: string;
         };
         disable: {
             backgroundColor: string;
@@ -34,6 +52,12 @@ export declare const createColorMap: (Colors: ColorsType) => {
         enable: {
             backgroundColor: string;
             iconColor: string;
+            borderColor: string;
+        };
+        hover: {
+            backgroundColor: string;
+            iconColor: string;
+            borderColor: string;
         };
         disable: {
             backgroundColor: string;
@@ -44,6 +68,12 @@ export declare const createColorMap: (Colors: ColorsType) => {
         enable: {
             backgroundColor: string;
             iconColor: string;
+            borderColor: string;
+        };
+        hover: {
+            backgroundColor: string;
+            iconColor: string;
+            borderColor: string;
         };
         disable: {
             backgroundColor: string;
@@ -54,6 +84,12 @@ export declare const createColorMap: (Colors: ColorsType) => {
         enable: {
             backgroundColor: string;
             iconColor: string;
+            borderColor: string;
+        };
+        hover: {
+            backgroundColor: string;
+            iconColor: string;
+            borderColor: string;
         };
         disable: {
             backgroundColor: string;
@@ -64,6 +100,12 @@ export declare const createColorMap: (Colors: ColorsType) => {
         enable: {
             backgroundColor: string;
             iconColor: string;
+            borderColor: string;
+        };
+        hover: {
+            backgroundColor: string;
+            iconColor: string;
+            borderColor: string;
         };
         disable: {
             backgroundColor: string;
@@ -74,6 +116,12 @@ export declare const createColorMap: (Colors: ColorsType) => {
         enable: {
             backgroundColor: string;
             iconColor: string;
+            borderColor: string;
+        };
+        hover: {
+            backgroundColor: string;
+            iconColor: string;
+            borderColor: string;
         };
         disable: {
             backgroundColor: string;
@@ -84,6 +132,12 @@ export declare const createColorMap: (Colors: ColorsType) => {
         enable: {
             backgroundColor: string;
             iconColor: string;
+            borderColor: string;
+        };
+        hover: {
+            backgroundColor: string;
+            iconColor: string;
+            borderColor: string;
         };
         disable: {
             backgroundColor: string;
@@ -94,16 +148,28 @@ export declare const createColorMap: (Colors: ColorsType) => {
         enable: {
             backgroundColor: string;
             iconColor: string;
+            borderColor: string;
+        };
+        hover: {
+            backgroundColor: string;
+            iconColor: string;
+            borderColor: string;
         };
         disable: {
             backgroundColor: string;
             iconColor: string;
         };
     };
-    grey: {
+    lightGrey: {
         enable: {
             backgroundColor: string;
             iconColor: string;
+            borderColor: string;
+        };
+        hover: {
+            backgroundColor: string;
+            iconColor: string;
+            borderColor: string;
         };
         disable: {
             backgroundColor: string;
@@ -114,6 +180,12 @@ export declare const createColorMap: (Colors: ColorsType) => {
         enable: {
             backgroundColor: string;
             iconColor: string;
+            borderColor: string;
+        };
+        hover: {
+            backgroundColor: string;
+            iconColor: string;
+            borderColor: string;
         };
         disable: {
             backgroundColor: string;
@@ -124,6 +196,12 @@ export declare const createColorMap: (Colors: ColorsType) => {
         enable: {
             backgroundColor: string;
             iconColor: string;
+            borderColor: string;
+        };
+        hover: {
+            backgroundColor: string;
+            iconColor: string;
+            borderColor: string;
         };
         disable: {
             backgroundColor: string;
@@ -131,9 +209,10 @@ export declare const createColorMap: (Colors: ColorsType) => {
         };
     };
 };
-export declare const getButtonIconGeneralStyles: (colors: ColorsType, color: string, style: string, state: string, size: string) => {
-    minHeight: number;
+export declare const getButtonIconGeneralStyles: (colors: ColorsType, color: string, style: string, state: string, icon: any, size: string, showStroke?: boolean) => {
+    height: number;
     width: number;
+    border: string;
     paddingVertical: number;
     paddingHorizontal: number;
     backgroundColor: any;
@@ -141,11 +220,17 @@ export declare const getButtonIconGeneralStyles: (colors: ColorsType, color: str
     cursor: string;
     borderRadius: number;
 };
+export declare const borderWidthMap: Record<string, number>;
+export declare const indicatorSizeMap: Record<string, string>;
+export declare const paddingMap: Record<string, number>;
 export declare const getButtonIconPaddings: (size: string) => {
     paddingVertical: number;
     paddingHorizontal: number;
 };
-export declare const getButtonIconMinSize: (size: string) => 48 | 40 | 32;
+export declare const iconSizeMap: Record<string, any>;
+export declare const getIconSize: (icon: any, size: string) => any;
+export declare const buttonIconSizeMap: Record<string, number>;
+export declare const getButtonIconMinSize: (icon: any, size: string) => number;
 export declare const getButtonIconContentStyles: (fontStyles: StyleType, colors: ColorsType, color: string, state: string) => {
     styles: {
         lineHeight: number | undefined;

package/dist/components/native/Buttons/ButtonIcon/ButtonIcon.types.native.d.ts

@@ -1,8 +1,9 @@
 import { IconSize, IconStyle } from '../../Icons/icon_types';
-export type ButtonIconColor = 'yellow' | 'red' | 'grey' | 'white' | 'purple' | 'lightPurple' | 'green' | 'blue' | 'teal' | 'lightTeal' | 'pink' | 'lightPink';
-export type ButtonIconState = 'enable' | 'disable';
+import { IndicatorColor } from '../../Indicator/Indicator/indicator_types.native';
+export type ButtonIconColor = 'yellow' | 'red' | 'grey' | 'lightGrey' | 'white' | 'purple' | 'lightPurple' | 'green' | 'blue' | 'teal' | 'lightTeal' | 'pink' | 'lightPink';
+export type ButtonIconState = 'enable' | 'hover' | 'disable';
 export type ButtonIconStyle = 'square' | 'round';
-export type Size = 'large' | 'medium' | 'small';
+export type Size = '2xlarge' | 'xlarge' | 'large' | 'medium' | 'small' | 'xsmall' | '2xsmall' | '3xsmall';
 export type ButtonIconForm = 'square' | 'round';
 export interface ButtonIconProps {
     color?: ButtonIconColor;
@@ -14,5 +15,12 @@ export interface ButtonIconProps {
         style: IconStyle;
         color: string;
     }>;
+    showIndicator?: boolean;
+    indicator?: {
+        quantity?: number;
+        color?: IndicatorColor;
+    };
+    showStroke?: boolean;
+    containerStyle?: any;
     onPress?: (x?: any) => void;
 }

package/dist/components/native/Buttons/ButtonIcon/styles.native.d.ts

@@ -6,6 +6,7 @@ declare const _default: {
         flexDirection: "row";
         gap: number;
         borderWidth: number;
+        position: "relative";
     };
 };
 export default _default;

package/dist/components/native/Icons/icon_types.d.ts

@@ -1,9 +1,11 @@
 export type IconSize = '16' | '24' | '32';
-export type IconExtendedSize = '12' | '16' | '24' | '32';
+export type IconExtendedSize = '6' | '8' | '12' | '16' | '24' | '32';
 export type GatacaLogoIconSize = '12' | '16' | '24' | '32' | '64' | '71';
 export type LoaderPrototipeIconSize = '24' | '40';
 export type IconStyle = 'outline' | 'filled';
 export declare const iconStrokeWidthBySize: {
+    '6': string;
+    '8': string;
     '12': string;
     '16': string;
     '24': string;

package/dist/components/native/Icons/icons/camera.d.ts

@@ -1,6 +1,6 @@
-import { IconSize } from '../icon_types';
+import { IconExtendedSize, IconSize } from '../icon_types';
 type CameraIconProps = {
-    size: IconSize;
+    size: IconSize | IconExtendedSize;
     color?: string;
 };
 declare const CameraIcon: (props: CameraIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/native/Icons/icons/check.d.ts

@@ -1,6 +1,6 @@
-import { IconSize } from '../icon_types';
+import { IconExtendedSize, IconSize } from '../icon_types';
 type CheckIconProps = {
-    size: IconSize;
+    size: IconSize | IconExtendedSize;
     color?: string;
 };
 declare const CheckIcon: (props: CheckIconProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/native/Indicator/Indicator/index.native.d.ts

@@ -0,0 +1,2 @@
+import Indicator from './indicator.native';
+export default Indicator;

package/dist/components/native/Indicator/Indicator/indicator.native.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IndicatorProps } from './indicator_types.native';
+declare const Indicator: (props: React.PropsWithChildren<IndicatorProps>) => import("react/jsx-runtime").JSX.Element;
+export default Indicator;

package/dist/components/native/Indicator/Indicator/indicator_styles.native.d.ts

@@ -0,0 +1,15 @@
+declare const _default: {
+    indicatorContainer: {
+        display: "flex";
+        justifyContent: "center";
+        alignItems: "center";
+        gap: number;
+        flexShrink: number;
+    };
+    indicatorText: {
+        minWidth: "100%";
+        textAlign: "center";
+        alignSelf: "center";
+    };
+};
+export default _default;

package/dist/components/native/Indicator/Indicator/indicator_types.native.d.ts

@@ -0,0 +1,28 @@
+import { StyleType } from '../../../../styles';
+import { ColorsType } from '../../../../styles/Colors';
+export type IndicatorColor = 'purple' | 'green' | 'red' | 'blue';
+export type IndicatorSize = '28' | '16' | '14' | '10' | '8' | '5' | '4';
+export type IndicatorType = 'quantity' | 'status';
+export interface IndicatorProps {
+    size: IndicatorSize;
+    color: IndicatorColor;
+    type: IndicatorType;
+    quantity?: number;
+    containerStyle?: any;
+}
+export declare const IndicatorBorderWidthySize: Record<string, number>;
+export declare const createBgColorMap: (Colors: ColorsType) => {
+    purple: string;
+    red: string;
+    green: string;
+    blue: string;
+};
+export declare const fontMap: (fontStyles: StyleType) => {
+    '28': import("../../../../styles").FontsStyle;
+    '16': import("../../../../styles").FontsStyle;
+    '14': import("../../../../styles").FontsStyle;
+    '10': import("../../../../styles").FontsStyle;
+    '8': import("../../../../styles").FontsStyle;
+    '5': import("../../../../styles").FontsStyle;
+    '4': import("../../../../styles").FontsStyle;
+};