@gataca/design-system 1.0.42 → 1.0.45

package/dist/components/native/Credentials/PersonalIdCredential/personalIdCredential_styles.native.d.ts

@@ -0,0 +1,298 @@
+import { ColorsType } from '../../../../styles/Colors';
+import { StyleType } from '../../../../styles/Fonts';
+export declare const styles: (colors: ColorsType, fontStyles: StyleType) => {
+    outerContainer: {
+        borderWidth: number;
+        borderColor: string;
+        borderRadius: number;
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    } | {
+        borderWidth: number;
+        borderColor: string;
+        shadowColor: string;
+        shadowOpacity: number;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowRadius: number;
+        elevation: number;
+        borderRadius: number;
+    } | {
+        borderWidth: number;
+        borderColor: string;
+        elevation: number;
+        shadowColor: string;
+        shadowOpacity: number;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowRadius: number;
+        borderRadius: number;
+    };
+    containerDefault: {
+        width: "100%";
+        minHeight: number;
+        borderRadius: number;
+    };
+    containerSmall: {
+        width: "100%";
+        minHeight: number;
+        borderRadius: number;
+    };
+    gradientContainer: {
+        overflow: "hidden";
+        position: "relative";
+    };
+    mainDataContainerDefault: {
+        width: "100%";
+        minHeight: number;
+    };
+    mainDataContainerSmall: {
+        width: "100%";
+        minHeight: number;
+    };
+    mainDataContainer: {
+        borderRadius: number;
+        flexDirection: "column";
+        flex: number;
+    };
+    headerContainer: {
+        borderTopLeftRadius: number;
+        borderTopRightRadius: number;
+        paddingVertical: number;
+        justifyContent: "center";
+        alignItems: "flex-start";
+    };
+    headerPaddingDefault: {
+        paddingHorizontal: number;
+    };
+    headerPaddingSmall: {
+        paddingHorizontal: number;
+    };
+    headerTextContainer: {
+        marginRight: number;
+        gap: number;
+    };
+    headerText: {
+        color: string;
+        fontFamily?: string;
+        fontSize?: number;
+        lineHeight?: number;
+        textDecoration?: string;
+        fontWeight?: "bold" | "normal" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
+        opacity?: number;
+        fontStyle?: "normal" | "italic";
+    };
+    mainDataContent: {
+        flex: number;
+        flexDirection: "column";
+        paddingTop: number;
+        paddingHorizontal: number;
+        paddingBottom: number;
+    };
+    dataContainerWithBg: {
+        flex: number;
+        borderLeftWidth: number;
+        borderRightWidth: number;
+        borderBottomWidth: number;
+        borderTopWidth: number;
+        borderColor: string;
+        borderBottomLeftRadius: number;
+        borderBottomRightRadius: number;
+        paddingTop: number;
+        flexDirection: "column";
+        gap: number;
+        backgroundColor: string;
+    };
+    dataContainerPaddingDefault: {
+        paddingHorizontal: number;
+        paddingBottom: number;
+    };
+    dataContainerPaddingSmall: {
+        paddingHorizontal: number;
+        paddingBottom: number;
+    };
+    fullNameSectionDefault: {
+        gap: number;
+    };
+    fullNamelabelText: {
+        marginRight: number;
+    };
+    fullNameSectionSmall: {
+        gap: number;
+    };
+    labelText: {
+        color: string;
+        fontFamily?: string;
+        fontSize?: number;
+        lineHeight?: number;
+        textDecoration?: string;
+        fontWeight?: "bold" | "normal" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
+        opacity?: number;
+        fontStyle?: "normal" | "italic";
+    };
+    fullNameText: {
+        marginRight: number;
+        color: string;
+        fontFamily?: string;
+        fontSize?: number;
+        lineHeight?: number;
+        textDecoration?: string;
+        fontWeight?: "bold" | "normal" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
+        opacity?: number;
+        fontStyle?: "normal" | "italic";
+    };
+    firstBottomDataContainer: {
+        flex: number;
+        width: "100%";
+        flexDirection: "row";
+        alignItems: "flex-start";
+        justifyContent: "space-between";
+        gap: number;
+    };
+    bottomDataContainer: {
+        flex: number;
+        width: "100%";
+        flexDirection: "row";
+        alignItems: "flex-end";
+        justifyContent: "space-between";
+        gap: number;
+    };
+    fieldSection: {
+        flex: number;
+        flexDirection: "column";
+        gap: number;
+        justifyContent: "center";
+        minHeight: number;
+        minWidth: number;
+    };
+    rowFieldSection: {
+        flex: number;
+        flexDirection: "row";
+        gap: number;
+        justifyContent: "space-between";
+        alignItems: "baseline";
+        minHeight: number;
+        minWidth: number;
+    };
+    valueText: {
+        color: string;
+        fontFamily?: string;
+        fontSize?: number;
+        lineHeight?: number;
+        textDecoration?: string;
+        fontWeight?: "bold" | "normal" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
+        opacity?: number;
+        fontStyle?: "normal" | "italic";
+    };
+    idNumberText: {
+        fontFamily?: string;
+        fontSize?: number;
+        lineHeight?: number;
+        color?: string;
+        textDecoration?: string;
+        fontWeight?: "bold" | "normal" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
+        opacity?: number;
+        fontStyle?: "normal" | "italic";
+    };
+    starButton: {
+        backgroundColor: string;
+        borderRadius: number;
+        padding: number;
+        justifyContent: "center";
+        alignItems: "center";
+        flexShrink: number;
+    };
+    starIconContainer: {
+        width: number;
+        height: number;
+        overflow: "hidden";
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    starIcon: {
+        width: number;
+        height: number;
+    };
+    starIconPlaceholder: {
+        fontSize: number;
+        color: string;
+        textAlign: "center";
+    };
+    photoDefault: {
+        right: number;
+    };
+    photoSmall: {
+        right: number;
+    };
+    photo: {
+        position: "absolute";
+        top: number;
+        width: number;
+        height: number;
+        borderRadius: number;
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+        overflow: "hidden";
+    } | {
+        shadowColor: string;
+        shadowOpacity: number;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowRadius: number;
+        elevation: number;
+        position: "absolute";
+        top: number;
+        width: number;
+        height: number;
+        borderRadius: number;
+        overflow: "hidden";
+    } | {
+        elevation: number;
+        shadowColor: string;
+        shadowOpacity: number;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowRadius: number;
+        position: "absolute";
+        top: number;
+        width: number;
+        height: number;
+        borderRadius: number;
+        overflow: "hidden";
+    };
+    photoImage: {
+        width: "100%";
+        height: "150%";
+        position: "absolute";
+        left: number;
+        top: number;
+    };
+    borderOverlay: {
+        position: "absolute";
+        left: number;
+        top: number;
+        borderWidth: number;
+        borderColor: string;
+        borderRadius: number;
+    };
+};

package/dist/components/native/Credentials/PersonalIdCredential/personalIdCredential_types.native.d.ts

@@ -0,0 +1,18 @@
+import { ImageSourcePropType } from 'react-native';
+import { HeadingCredentialProps } from '../../Headings/HeadingCredential/HeadingCredential_types.native';
+export type PersonalIdCredentialsColors = 'grey' | 'blue';
+export type PersonalIdCredentialsSize = 'default' | 'small';
+export interface PersonalIdCredentialProps {
+    headingCredential1: HeadingCredentialProps;
+    headingCredential2: HeadingCredentialProps;
+    headingCredential3: HeadingCredentialProps;
+    headingCredential4: HeadingCredentialProps;
+    headingCredential5: HeadingCredentialProps;
+    headingCredential6: HeadingCredentialProps;
+    photo?: ImageSourcePropType;
+    color?: PersonalIdCredentialsColors;
+    isFavorite?: boolean;
+    size?: PersonalIdCredentialsSize;
+    containerStyle?: any;
+    onStarPress?: () => void;
+}

package/dist/components/native/Illustrations/illustrations_types.d.ts

@@ -1,5 +1,5 @@
 export type IllustrationSize = 80 | 120 | 142;
-export type IllustrationName = 'success' | 'error' | 'upgrade' | 'downgrade' | 'mail' | 'warningYellow' | 'updateBlue' | 'skull' | 'sandboxConnect' | 'logout' | 'heartbreak' | 'time' | 'search' | 'credentialPrimary' | 'credentialSecondary' | 'credentialTertiary';
+export type IllustrationName = 'success' | 'error' | 'upgrade' | 'downgrade' | 'mail' | 'warningYellow' | 'updateBlue' | 'skull' | 'sandboxConnect' | 'logout' | 'heartbreak' | 'time' | 'search' | 'credentialPrimary' | 'credentialSecondary' | 'credentialTertiary' | 'medalStar' | 'medalCheck';
 export type IllustrationProps = {
     id?: string;
     imgName: IllustrationName;
@@ -33,6 +33,12 @@ export declare const IllustrationsMap: {
     credentialPrimary: any;
     credentialSecondary: any;
     credentialTertiary: any;
+    medalStar: any;
+    medalCheck: any;
+    legalAgeBgPurple: any;
+    legalAgeBgGreen: any;
+    legalAgeBgBlack: any;
+    legalAgeBgGrey: any;
 };
 export declare const stateIllustrations: string[];
 export declare const credentialIllustrations: string[];

package/dist/components/native/Lists/ListItem/listItem_types.native.d.ts

@@ -4,7 +4,7 @@ import { ButtonProps } from '../../Buttons/Button/Button.types.native';
 import { ButtonIconProps } from '../../Buttons/ButtonIcon/ButtonIcon.types.native';
 import { RoundedButtonProps } from '../../Buttons/RoundedButton/RoundedButton.types.native';
 import { SegmentedButtonProps } from '../../Buttons/SegmentedButton/SegmentedButton.types.native';
-import { MiniCredentialCardProps } from '../../Cards/MiniCredential/miniCredential_types.native';
+import { MiniCredentialCardProps } from '../../Credentials/MiniCredential/miniCredential_types.native';
 import { CheckboxProps } from '../../Checkbox/Checkbox/checkbox_types.native';
 import { ChipProps } from '../../Chips/Chip/Chip.types.native';
 import { ChipGroupProps } from '../../Chips/ChipGroup/ChipGroup.types.native';

package/dist/components/native/TextField/TextField/textField_config.d.ts

@@ -12,6 +12,6 @@ export declare const inputBorder: {
     success: string;
     error: string;
 };
-export declare const inputColor: (state: TextFieldState, value?: string) => "neutral1000" | "neutral600";
-export declare const inputBackgroundColor: (state: TextFieldState) => "neutral300" | "neutral100";
-export declare const helperTextColor: (state: TextFieldState) => "success300" | "alert300" | "neutral600";
+export declare const inputColor: (state: TextFieldState, value?: string) => "neutral600" | "neutral1000";
+export declare const inputBackgroundColor: (state: TextFieldState) => "neutral100" | "neutral300";
+export declare const helperTextColor: (state: TextFieldState) => "neutral600" | "success300" | "alert300";

package/dist/components/web/Indicator/NumberBadges/NumberBadges.web.d.ts

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

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

@@ -0,0 +1,2 @@
+import NumberBadges from './NumberBadges.web';
+export default NumberBadges;

package/dist/components/web/Indicator/NumberBadges/numberBadges_styles.web.d.ts

@@ -0,0 +1,3 @@
+export declare const styles: () => {
+    numberBadgesContainer: React.CSSProperties;
+};

package/dist/components/web/Indicator/NumberBadges/numberBadges_types.web.d.ts

@@ -0,0 +1,20 @@
+export type NumberBadgesState = 'enable' | 'hover' | 'disable' | 'active';
+export interface NumberBadgesProps {
+    id?: string;
+    className?: string;
+    state: NumberBadgesState;
+    number: number;
+    containerStyle?: any;
+}
+export declare enum numberBadgesBgColorByState {
+    'enable' = "neutral500",
+    'active' = "primary700",
+    'disable' = "neutral500",
+    'hover' = "neutral600"
+}
+export declare enum numberBadgesTextColorByState {
+    'enable' = "neutral100",
+    'active' = "neutral100",
+    'disable' = "neutral600",
+    'hover' = "neutral100"
+}

package/dist/components/web/Lists/ListItem/listItem_types.web.d.ts

@@ -4,7 +4,7 @@ import { ButtonProps } from '../../Buttons/Button/Button.types.web';
 import { ButtonIconProps } from '../../Buttons/ButtonIcon/ButtonIcon.types.web';
 import { RoundedButtonProps } from '../../Buttons/RoundedButton/RoundedButton.types.web';
 import { SegmentedButtonProps } from '../../Buttons/SegmentedButton/SegmentedButton.types.web';
-import { MiniCredentialCardProps } from '../../Cards/MiniCredential/miniCredential_types.web';
+import { MiniCredentialCardProps } from '../../Credentials/MiniCredential/miniCredential_types.web';
 import { CheckboxProps } from '../../Checkbox/Checkbox/checkbox_types.web';
 import { ChipProps } from '../../Chips/Chip/Chip.types.web';
 import { ChipGroupProps } from '../../Chips/ChipGroup/ChipGroup.types.web';

package/dist/components/web/Tabs/ButtonTabs/ButtonTabs.config.web.d.ts

@@ -0,0 +1,61 @@
+import { ColorsType, StyleType } from '../../../../utils/theming';
+export declare const createColorMap: (Colors: ColorsType) => {
+    white: {
+        fill: {
+            enable: {
+                backgroundColor: string;
+                textColor: string;
+            };
+            active: {
+                backgroundColor: string;
+                textColor: string;
+            };
+            hover: {
+                backgroundColor: string;
+                textColor: string;
+            };
+            disable: {
+                backgroundColor: string;
+                textColor: string;
+            };
+        };
+    };
+    grey: {
+        fill: {
+            enable: {
+                backgroundColor: string;
+                textColor: string;
+            };
+            hover: {
+                backgroundColor: string;
+                textColor: string;
+            };
+            disable: {
+                backgroundColor: string;
+                textColor: string;
+            };
+        };
+    };
+};
+export declare const getButtonGeneralStyles: (colors: ColorsType, color: string, state: string) => {
+    backgroundColor: any;
+    borderColor: any;
+    borderWidth: number;
+    textColor: any;
+    cursor: string;
+    padding: string;
+    minHeight: number;
+};
+export declare const getButtonContentStyles: (fontStyles: StyleType, colors: ColorsType, color: string, state: string) => {
+    styles: {
+        lineHeight: string;
+        color: any;
+        fontFamily?: string;
+        fontSize?: number;
+        textDecoration?: string;
+        fontWeight?: "bold" | "normal" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900";
+        opacity?: number;
+        fontStyle?: "normal" | "italic";
+    };
+    iconColor: any;
+};

package/dist/components/web/Tabs/ButtonTabs/ButtonTabs.web.d.ts

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

package/dist/components/web/Tabs/ButtonTabs/buttonTabs_styles.web.d.ts

@@ -0,0 +1,5 @@
+export declare const styles: () => {
+    tabsContainer: React.CSSProperties;
+    buttonContainer: React.CSSProperties;
+    iconContainer: React.CSSProperties;
+};

package/dist/components/web/Tabs/ButtonTabs/buttonTabs_types.web.d.ts

@@ -0,0 +1,24 @@
+export type ButtonTabState = 'enable' | 'hover' | 'disable' | 'active';
+export interface ButtonTabProps {
+    id?: string;
+    className?: string;
+    state: ButtonTabState;
+    text?: string;
+    numberBadge?: number;
+    loading?: boolean;
+    containerStyle?: any;
+}
+export interface ButtonTabsProps {
+    id?: string;
+    className?: string;
+    tabs: ButtonTabProps[];
+    selectedTabIndex: number;
+    containerStyle?: any;
+    onChange: (index?: number) => void;
+}
+export declare enum textColorByState {
+    'enable' = "neutral1000",
+    'active' = "primary700",
+    'disable' = "neutral500",
+    'hover' = "neutral1000"
+}

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

@@ -0,0 +1,2 @@
+import ButtonTabs from './ButtonTabs.web';
+export default ButtonTabs;

package/dist/components/web/Tabs/Tabs/tabs_types.web.d.ts

@@ -22,12 +22,6 @@ export declare enum textColorByState {
     'disable' = "neutral500",
     'hover' = "neutral1000"
 }
-export declare enum numberBadgeColorByState {
-    'enable' = "neutral500",
-    'active' = "primary700",
-    'disable' = "neutral500",
-    'hover' = "neutral600"
-}
 export declare enum borderColorByState {
     'enable' = "neutral400",
     'active' = "primary700",

package/dist/components/web/TextField/TextField/textField_config.d.ts

@@ -12,6 +12,6 @@ export declare const inputBorder: {
     success: string;
     error: string;
 };
-export declare const inputColor: (state: TextFieldState, value?: string) => "neutral1000" | "neutral600";
-export declare const inputBackgroundColor: (state: TextFieldState) => "neutral300" | "neutral100";
-export declare const helperTextColor: (state: TextFieldState) => "success300" | "alert300" | "neutral600";
+export declare const inputColor: (state: TextFieldState, value?: string) => "neutral600" | "neutral1000";
+export declare const inputBackgroundColor: (state: TextFieldState) => "neutral100" | "neutral300";
+export declare const helperTextColor: (state: TextFieldState) => "neutral600" | "success300" | "alert300";