@gataca/design-system 4.0.0 → 4.1.0

package/dist/components/native/Credentials/LegalAgeCredential/legalAgeCredential.native.d.ts

@@ -0,0 +1,3 @@
+import { LegalageCredentialProps } from './legalAgeCredential_types.native';
+declare const LegalageCredential: (props: LegalageCredentialProps) => import("react/jsx-runtime").JSX.Element;
+export default LegalageCredential;

package/dist/components/native/Credentials/LegalAgeCredential/legalAgeCredential_config.d.ts

@@ -0,0 +1,22 @@
+import { ColorsType } from '../../../../styles/Colors';
+import { LegalageCredentialProps, LegalageCredentialSize } from './legalAgeCredential_types.native';
+type Age = NonNullable<LegalageCredentialProps['age']>;
+type AgeTheme = {
+    bgImage: any;
+    headerBgColors: string;
+    badgeBorderColors: string[];
+    badgeInnerBorderColors: string[];
+    badgeRadialGradientColors: string[];
+    badgeInnerBorderColor: string;
+    badgeOuterBorderColor: string;
+    glowColor: string;
+    ribbonColors: string[];
+};
+export declare const createAgeTheme: (colors: ColorsType) => Record<Age, AgeTheme>;
+type MainDataSizeTheme = {
+    mainDataStyle: any;
+    dataPadding: any;
+};
+export declare const createMainDataSizeTheme: (generalStyles: Record<string, any>) => Record<LegalageCredentialSize, MainDataSizeTheme>;
+export declare const resolveMainDataSizeTheme: (generalStyles: Record<string, any>, size?: LegalageCredentialSize) => MainDataSizeTheme;
+export {};

package/dist/components/native/Credentials/LegalAgeCredential/legalAgeCredential_styles.native.d.ts

@@ -0,0 +1,228 @@
+import { ColorsType } from '../../../../styles/Colors';
+import { StyleType } from '../../../../styles';
+export declare const styles: (colors: ColorsType, fontStyles: StyleType) => {
+    outerContainer: {
+        borderWidth: number;
+        borderColor: string;
+        width: "100%";
+        borderRadius: number;
+        marginLeft: "auto";
+        marginRight: "auto";
+        overflow: "hidden";
+        minHeight: number;
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+        backgroundColor: string;
+    } | {
+        borderWidth: number;
+        borderColor: string;
+        shadowColor: string;
+        shadowOpacity: number;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowRadius: number;
+        elevation: number;
+        width: "100%";
+        borderRadius: number;
+        marginLeft: "auto";
+        marginRight: "auto";
+        overflow: "hidden";
+        minHeight: number;
+        backgroundColor: string;
+    } | {
+        borderWidth: number;
+        borderColor: string;
+        elevation: number;
+        shadowColor: string;
+        shadowOpacity: number;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowRadius: number;
+        width: "100%";
+        borderRadius: number;
+        marginLeft: "auto";
+        marginRight: "auto";
+        overflow: "hidden";
+        minHeight: number;
+        backgroundColor: string;
+    };
+    imageBg: {
+        flex: number;
+        resizeMode: "cover";
+        justifyContent: "center";
+        padding: number;
+        borderRadius: number;
+        minHeight: number;
+        backgroundColor: string;
+    };
+    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;
+        position: "relative";
+        backgroundColor: string;
+    };
+    dataContainer: {
+        flexDirection: "column";
+        gap: number;
+        minHeight: number;
+        flex: number;
+        minWidth: number;
+        justifyContent: "space-between";
+        width: "100%";
+        paddingTop: number;
+    };
+    dataContainerPaddingDefault: {
+        padding: number;
+    };
+    dataContainerPaddingSmall: {
+        padding: number;
+    };
+    bottomDataContainer: {
+        flexDirection: "row";
+        alignItems: "flex-end";
+        justifyContent: "flex-start";
+        gap: number;
+        minHeight: number;
+        minWidth: number;
+    };
+    labelText: {
+        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";
+        paddingRight: number;
+    };
+    valueText: {
+        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";
+    };
+    badgeMedalContainer: {
+        position: "absolute";
+        top: number;
+        right: number;
+        transform: {
+            translateX: number;
+        }[];
+        width: number;
+        height: number;
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    outerRing: {
+        width: number;
+        height: number;
+        justifyContent: "center";
+        alignItems: "center";
+        position: "absolute";
+        left: number;
+    };
+    circularTextContainer: {
+        position: "absolute";
+        width: "100%";
+        height: "100%";
+        justifyContent: "center";
+        alignItems: "center";
+        zIndex: number;
+    } | {
+        shadowColor: string;
+        shadowOpacity: number;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowRadius: number;
+        elevation?: undefined;
+        position: "absolute";
+        width: "100%";
+        height: "100%";
+        justifyContent: "center";
+        alignItems: "center";
+        zIndex: number;
+    } | {
+        elevation: number;
+        shadowColor?: undefined;
+        shadowOpacity?: undefined;
+        shadowOffset?: undefined;
+        shadowRadius?: undefined;
+        position: "absolute";
+        width: "100%";
+        height: "100%";
+        justifyContent: "center";
+        alignItems: "center";
+        zIndex: number;
+    };
+    innerHexSvg: {
+        position: "absolute";
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    emblemContainer: {
+        width: number;
+        height: number;
+        justifyContent: "center";
+        alignItems: "center";
+        position: "absolute";
+        top: number;
+        left: number;
+        zIndex: number;
+    };
+    emblemImage: {
+        width: number;
+        height: number;
+    };
+    ribbon: {
+        width: number;
+        height: number;
+        marginTop: number;
+        zIndex: number;
+    };
+    innerBorder: {};
+};

package/dist/components/native/Credentials/LegalAgeCredential/legalAgeCredential_types.native.d.ts

@@ -0,0 +1,15 @@
+import { HeadingCredentialProps } from '../../Headings/HeadingCredential/HeadingCredential_types.native';
+export type LegalageCredentialAge = '16' | '18' | '21' | '65';
+export type LegalageCredentialSize = 'default' | 'small';
+export interface LegalageCredentialProps {
+    age?: LegalageCredentialAge;
+    size?: LegalageCredentialSize;
+    titleText: string;
+    headingCredential1: HeadingCredentialProps;
+    headingCredential2: HeadingCredentialProps;
+    onStarPress?: () => void;
+    isFavorite?: boolean;
+    certificateText?: string;
+    hasBadge?: boolean;
+    containerStyle?: any;
+}

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

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

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

@@ -0,0 +1,3 @@
+import { PersonalIdCredentialProps } from './personalIdCredential_types.native';
+declare const PersonalIdCredential: (props: PersonalIdCredentialProps) => import("react/jsx-runtime").JSX.Element;
+export default PersonalIdCredential;

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

@@ -0,0 +1,17 @@
+import { ColorsType } from '../../../../styles/Colors';
+import { PersonalIdCredentialsColors, PersonalIdCredentialsSize } from './personalIdCredential_types.native';
+type ColorTheme = {
+    idNumberColor: string;
+    gradientcolors: string[];
+    headerBgColor: string;
+};
+export declare const createColorTheme: (colors: ColorsType) => Record<PersonalIdCredentialsColors, ColorTheme>;
+type SizeTheme = {
+    generalContainerStyle: any;
+    mainDataStyle: any;
+    photoPositionStyle: any;
+    dataPadding: any;
+};
+export declare const createPersonalIdSizeTheme: (generalStyles: Record<string, any>) => Record<PersonalIdCredentialsSize, SizeTheme>;
+export declare const resolvePersonalIdSizeTheme: (generalStyles: Record<string, any>, size?: PersonalIdCredentialsSize) => SizeTheme;
+export {};

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

@@ -0,0 +1,258 @@
+import { ColorsType } from '../../../../styles/Colors';
+import { StyleType } from '../../../../styles/Fonts';
+export declare const styles: (colors: ColorsType, fontStyles: StyleType, thereIsPhoto: boolean) => {
+    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: {
+        borderRadius: 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;
+    };
+    fullNameSectionSmall: {
+        gap: number;
+    };
+    fullNamelabelText: {
+        marginRight: 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";
+    };
+    bottomContainer: {
+        flex: number;
+        width: "100%";
+        flexDirection: "row";
+        alignItems: "flex-start";
+        justifyContent: "space-between";
+        gap: number;
+    };
+    bottomDataContainer: {
+        flex: number;
+        width: "100%";
+        flexDirection: "column";
+        alignItems: "flex-start";
+        justifyContent: "space-between";
+        alignSelf: "stretch";
+        gap: number;
+    };
+    fieldSection: {
+        flex: number;
+        flexDirection: "column";
+        gap: number;
+        justifyContent: "flex-start";
+        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";
+    };
+    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";
+    };
+    photoDefault: {
+        right: number;
+    };
+    photoSmall: {
+        right: number;
+    };
+    photoImage: {
+        width: "100%";
+        height: "100%";
+        position: "absolute";
+        backgroundColor: string;
+        left: number;
+        top: 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/Icons/icons/withSelectedState/credentialView.d.ts

@@ -0,0 +1,9 @@
+import { IconSize, IconStyle } from '../../icon_types';
+type CredentialViewIconProps = {
+    id?: string;
+    size: IconSize;
+    color?: string;
+    style: IconStyle;
+};
+declare const CredentialViewIcon: (props: CredentialViewIconProps) => import("react/jsx-runtime").JSX.Element;
+export default CredentialViewIcon;

package/dist/components/native/Icons/icons/withSelectedState/stack.d.ts

@@ -0,0 +1,9 @@
+import { IconSize, IconStyle } from '../../icon_types';
+type StackIconProps = {
+    id?: string;
+    size: IconSize;
+    color?: string;
+    style: IconStyle;
+};
+declare const StackIcon: (props: StackIconProps) => import("react/jsx-runtime").JSX.Element;
+export default StackIcon;

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

@@ -11,6 +11,7 @@ export { default as KeyIcon } from './icons/withSelectedState/key';
 export { default as ConnectIcon } from './icons/withSelectedState/connect';
 export { default as ServicesLinkedV4Icon } from './icons/withSelectedState/servicesLinkedV4';
 export { default as CircleWarningIcon } from './icons/withSelectedState/circleWarning';
+export { default as CredentialViewIcon } from './icons/withSelectedState/credentialView';
 export { default as FeaturesIcon } from './icons/withSelectedState/features';
 export { default as UsersV2Icon } from './icons/withSelectedState/users';
 export { default as AwardIcon } from './icons/withSelectedState/award';
@@ -27,6 +28,7 @@ export { default as PaymentMethodIcon } from './icons/withSelectedState/paymentM
 export { default as StarIcon } from './icons/withSelectedState/star';
 export { default as SubscriptionsIcon } from './icons/withSelectedState/subscriptions';
 export { default as StampIcon } from './icons/withSelectedState/stamp';
+export { default as StackIcon } from './icons/withSelectedState/stack';
 export { default as SettingsIcon } from './icons/withSelectedState/settings';
 export { default as ServicesLinkedV2Icon } from './icons/withSelectedState/servicesLinkedV2';
 export { default as ShieldCheckIcon } from './icons/withSelectedState/shieldCheck';

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/web/Buttons/SegmentedButton/SegmentedButton.types.web.d.ts

@@ -1,8 +1,15 @@
+import { IconSize, IconStyle } from '../../Icons/icon_types';
 export type Size = 'medium' | 'small';
 export type SelectedColor = 'purple' | 'white';
 export interface SegmentedButtonItem {
     id: string;
-    text: string;
+    text?: string;
+    Icon?: React.FC<{
+        size: IconSize;
+        style: IconStyle;
+        color: string;
+    }>;
+    iconColor?: string;
 }
 export interface SegmentedButtonProps<D = any> {
     id?: string;

package/dist/components/web/Chips/Chip/Chip.config.web.d.ts

@@ -375,12 +375,14 @@ export declare const createColorMap: (Colors: ColorsType) => {
         };
         outline: {
             enable: {
+                bordersColor: string;
                 textColor: string;
             };
             hover: {
                 textColor: string;
             };
             active: {
+                backgroundColor: string;
                 textColor: string;
                 bordersColor: string;
             };

package/dist/components/web/Chips/Chip/Chip.types.web.d.ts

@@ -20,4 +20,5 @@ export interface ChipProps {
     showText?: boolean;
     tooltip?: ParentComponentTooltipProps;
     containerStyle?: any;
+    onClick?: (x?: any) => void;
 }