@gataca/design-system 3.37.1 → 4.0.1

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

@@ -1,10 +1,13 @@
 export { default as Chip } from './native/Chips/Chip/index.native';
 export { default as ActionItems } from './native/Action/ActionItems/index.native';
 export { default as MultiShadowContainer } from './native/MultiShadowContainer/index.native';
-export { default as CredentialCard } from './native/Cards/Credential/index.native';
-export { default as MiniCredentialCard } from './native/Cards/MiniCredential/index.native';
 export { default as HeadingAvatarsCard } from './native/Cards/HeadingAvatars/index.native';
 export { default as ConsentCard } from './native/Cards/Consent/index.native';
+export { default as CredentialCard } from './native/Credentials/Credential/index.native';
+export { default as MiniCredentialCard } from './native/Credentials/MiniCredential/index.native';
+export { default as DiplomaCredential } from './native/Credentials/DiplomaCredential/index.native';
+export { default as LegalAgeCredential } from './native/Credentials/LegalAgeCredential/index.native';
+export { default as PersonalIdCredential } from './native/Credentials/PersonalIdCredential/index.native';
 export { default as HeadingCredential } from './native/Headings/HeadingCredential/index.native';
 export { default as HeadingContainer } from './native/Headings/HeadingContainer/index.native';
 export { default as StatusHeadingContainer } from './native/Headings/StatusHeadingContainer/index.native';

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

@@ -1,7 +1,7 @@
 export { default as Chip } from './web/Chips/Chip/index.web';
 export { default as ActionItems } from './web/Action/ActionItems/index.web';
-export { default as CredentialCard } from './web/Cards/Credential/index.web';
-export { default as MiniCredentialCard } from './web/Cards/MiniCredential/index.web';
+export { default as CredentialCard } from './web/Credentials/Credential/index.web';
+export { default as MiniCredentialCard } from './web/Credentials/MiniCredential/index.web';
 export { default as HeadingAvatarsCard } from './web/Cards/HeadingAvatars/index.web';
 export { default as ConsentCard } from './web/Cards/Consent/index.web';
 export { default as HeadingCredential } from './web/Headings/HeadingCredential/index.web';
@@ -13,6 +13,7 @@ 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 NumberBadges } from './web/Indicator/NumberBadges/index.web';
 export { default as Avatar } from './web/Avatars/Avatar/index.web';
 export { default as AvatarGroup } from './web/Avatars/AvatarGroup/index.web';
 export { default as List } from './web/Lists/List/index.web';
@@ -28,6 +29,8 @@ export { default as Tooltip } from './web/Tooltips/Tooltip/index.web';
 export { default as Popover } from './web/Popover/index.web';
 export { default as TextField } from './web/TextField/TextField/index.web';
 export { default as MenuItem } from './web/Menus/MenuItem/index.web';
+export { default as Tabs } from './web/Tabs/Tabs/index.web';
+export { default as ButtonTabs } from './web/Tabs/ButtonTabs/index.web';
 export { default as IconGroup } from './web/Icons/IconGroup/index.web';
 export { default as Illustration } from './web/Illustrations/index.web';
 export { default as GatacaLogoHorIcon } from './web/Icons/icons/brand/gatacaLogoHor';

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

@@ -12,11 +12,16 @@ export interface ButtonProps {
     state?: ButtonState;
     style?: ButtonStyle;
     textSize?: TextSize;
-    LeadingIcon?: React.FC<{
-        size: IconSize;
-        style: IconStyle;
-        color: string;
-    }>;
+    leadingIcon?: {
+        Icon: React.FC<{
+            size: IconSize;
+            style: IconStyle;
+            color: string;
+        }>;
+        size?: IconSize;
+        style?: IconStyle;
+        color?: string;
+    };
     showText?: boolean;
     containerStyle?: any;
     onPress?: (x?: any) => void;

package/dist/components/native/Credentials/DiplomaCredential/components/CircularText.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+interface CircularTextProps {
+    /**
+     * The text to display in circular form
+     * @example "CERTIFICATE"
+     */
+    text: string;
+    /**
+     * Radius of the circle (distance from center to text)
+     * @default 30
+     */
+    radius?: number;
+    /**
+     * Font size for the text
+     * @default 8
+     */
+    fontSize?: number;
+    /**
+     * Font family for the text
+     * @default 'Poppins-Bold'
+     */
+    fontFamily?: string;
+    /**
+     * Text color
+     * @default '#8C5E19'
+     */
+    color?: string;
+    /**
+     * Container style
+     */
+    style?: ViewStyle;
+    /**
+     * Starting rotation angle in degrees
+     * @default 0
+     */
+    startAngle?: number;
+}
+/**
+ * CircularText Component
+ *
+ * Displays text arranged in a circular pattern.
+ * Each letter is individually positioned and rotated around a center point.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CircularText
+ *   text="CERTIFICATE"
+ *   radius={30}
+ *   fontSize={8}
+ *   color="#8C5E19"
+ * />
+ * ```
+ */
+declare const CircularText: React.FC<CircularTextProps>;
+export default CircularText;

package/dist/components/native/Credentials/DiplomaCredential/components/Ribbon.d.ts

@@ -0,0 +1 @@
+export declare function Ribbon(): import("react/jsx-runtime").JSX.Element;

package/dist/components/native/Credentials/DiplomaCredential/diplomaCredential.native.d.ts

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

package/dist/components/native/Credentials/DiplomaCredential/diplomaCredential_config.d.ts

@@ -0,0 +1,28 @@
+import { ColorsType } from '../../../../styles/Colors';
+import { DiplomaCredentialColors, DiplomaCredentialSize } from './diplomaCredential_types.native';
+type DiplomaTheme = {
+    gradientColors: string[];
+    gradientStart: {
+        x: number;
+        y: number;
+    };
+    gradientEnd: {
+        x: number;
+        y: number;
+    };
+    labelColor: string;
+    primaryTextColor: string;
+    generalContainerStyle: any;
+    innerContainerStyle: any;
+    mainDataStyle: any;
+    frameStrokeStyle: any;
+    badgeDiplomaStyle: any;
+};
+type CreateDiplomaThemeArgs = {
+    colors: ColorsType;
+    generalStyles: Record<string, any>;
+    color?: DiplomaCredentialColors;
+    size?: DiplomaCredentialSize;
+};
+export declare const createDiplomaTheme: ({ colors, generalStyles, color, size, }: CreateDiplomaThemeArgs) => DiplomaTheme;
+export {};

package/dist/components/native/Credentials/DiplomaCredential/diplomaCredential_styles.native.d.ts

@@ -0,0 +1,432 @@
+import { ColorsType } from '../../../../styles/Colors';
+import { StyleType } from '../../../../styles';
+export declare const styles: (colors: ColorsType, fontStyles: StyleType) => {
+    outerContainer: {
+        padding: number;
+        elevation: number;
+        borderWidth: number;
+        borderColor: string;
+        backgroundColor: string;
+        borderRadius: number;
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        overflow: "hidden";
+    } | {
+        padding: number;
+        elevation: number;
+        borderWidth: number;
+        borderColor: string;
+        backgroundColor: string;
+        shadowColor: string;
+        shadowOpacity: number;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowRadius: number;
+        borderRadius: number;
+        overflow: "hidden";
+    } | {
+        padding: number;
+        elevation: number;
+        borderWidth: number;
+        borderColor: string;
+        backgroundColor: string;
+        shadowColor: string;
+        shadowOpacity: number;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowRadius: number;
+        borderRadius: number;
+        overflow: "hidden";
+    };
+    containerDefault: {
+        width: "100%";
+        borderRadius: number;
+    };
+    containerSmall: {
+        width: "100%";
+        borderRadius: number;
+    };
+    innerContainerDefault: {
+        width: "100%";
+        padding: number;
+        borderRadius: number;
+    };
+    innerContainerSmall: {
+        width: "100%";
+        padding: number;
+        borderRadius: number;
+    };
+    borderGradient: {
+        padding: number;
+        overflow: "hidden";
+        borderRadius: number;
+        width: "100%";
+    };
+    gradientContainer: {
+        overflow: "hidden";
+        position: "relative";
+        borderRadius: number;
+        flex: number;
+    };
+    frameStrokeDefault: {
+        position: "absolute";
+        left: number;
+        top: number;
+        width: "100%";
+        minHeight: number;
+    };
+    frameStrokeSmall: {
+        position: "absolute";
+        left: "50%";
+        top: "50%";
+        width: "100%";
+        minHeight: number;
+        transform: ({
+            translateX: number;
+            translateY?: undefined;
+        } | {
+            translateY: number;
+            translateX?: undefined;
+        })[];
+    };
+    mainDataContainerDefault: {
+        width: "100%";
+        minHeight: number;
+        padding: number;
+    };
+    mainDataContainerSmall: {
+        width: "100%";
+        minHeight: number;
+        padding: number;
+    };
+    mainDataContainer: {
+        borderRadius: number;
+        justifyContent: "space-between";
+        marginRight: number;
+        zIndex: number;
+        gap: number;
+        width: "100%";
+    };
+    careerNameSection: {
+        width: "60%";
+        gap: number;
+        flexShrink: number;
+    };
+    careerNameText: {
+        flexWrap: "wrap";
+        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";
+    };
+    completedBySection: {
+        width: "100%";
+        gap: number;
+        flexShrink: number;
+    };
+    labelText: {
+        paddingRight: number;
+        flexWrap: "wrap";
+        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";
+    };
+    completedByText: {
+        flexWrap: "wrap";
+        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";
+    };
+    bottomDataContainer: {
+        flexDirection: "row";
+        alignItems: "flex-end";
+        justifyContent: "space-between";
+        gap: number;
+        width: "100%";
+    };
+    institutionSection: {
+        flex: number;
+        gap: number;
+        justifyContent: "center";
+        minHeight: number;
+        minWidth: number;
+    };
+    institutionText: {
+        flexWrap: "wrap";
+        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";
+    };
+    badgeDiploma: {
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+    };
+    badgeDiplomaDefault: {
+        position: "absolute";
+        right: number;
+        top: number;
+        width: number;
+        height: number;
+        zIndex: number;
+    };
+    badgeDiplomaSmall: {
+        position: "absolute";
+        marginLeft: number;
+        width: number;
+        right: number;
+        top: number;
+        height: number;
+        zIndex: number;
+    };
+    completeBadgeImage: {
+        width: number;
+        height: number;
+    };
+    medalRibbon: {
+        position: "absolute";
+        top: number;
+        left: "50%";
+        width: number;
+        height: number;
+        transform: {
+            translateX: number;
+        }[];
+        shadowColor: string;
+    } | {
+        shadowColor: string;
+        shadowOpacity: number;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowRadius: number;
+        elevation?: undefined;
+        position: "absolute";
+        top: number;
+        left: "50%";
+        width: number;
+        height: number;
+        transform: {
+            translateX: number;
+        }[];
+    } | {
+        elevation: number;
+        shadowOpacity: number;
+        shadowColor: string;
+        shadowOffset?: undefined;
+        shadowRadius?: undefined;
+        position: "absolute";
+        top: number;
+        left: "50%";
+        width: number;
+        height: number;
+        transform: {
+            translateX: number;
+        }[];
+    };
+    badgeMedalContainer: {
+        position: "absolute";
+        top: number;
+        left: "50%";
+        transform: {
+            translateX: number;
+        }[];
+        width: number;
+        height: number;
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+    } | {
+        shadowColor: string;
+        shadowOpacity: number;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowRadius: number;
+        elevation?: undefined;
+        position: "absolute";
+        top: number;
+        left: "50%";
+        transform: {
+            translateX: number;
+        }[];
+        width: number;
+        height: number;
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+    } | {
+        elevation: number;
+        shadowColor?: undefined;
+        shadowOpacity?: undefined;
+        shadowOffset?: undefined;
+        shadowRadius?: undefined;
+        position: "absolute";
+        top: number;
+        left: "50%";
+        transform: {
+            translateX: number;
+        }[];
+        width: number;
+        height: number;
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+    outerRing: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        position: "relative";
+        shadowColor: string;
+    } | {
+        shadowColor: string;
+        shadowOpacity: number;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowRadius: number;
+        elevation?: undefined;
+        width: number;
+        height: number;
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        position: "relative";
+    } | {
+        elevation: number;
+        shadowColor: string;
+        shadowOpacity?: undefined;
+        shadowOffset?: undefined;
+        shadowRadius?: undefined;
+        width: number;
+        height: number;
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        position: "relative";
+    };
+    circularTextContainer: {
+        position: "absolute";
+        width: number;
+        height: number;
+        justifyContent: "center";
+        alignItems: "center";
+        zIndex: number;
+    };
+    innerCircleContainer: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        overflow: "hidden";
+        position: "relative";
+        borderWidth: number;
+        borderColor: string;
+        zIndex: number;
+    };
+    innerCircleSvg: {
+        position: "absolute";
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+    };
+    borderRing: {
+        position: "absolute";
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+        borderRadius: number;
+        zIndex: number;
+    };
+    emblemContainer: {
+        width: number;
+        height: number;
+        justifyContent: "center";
+        alignItems: "center";
+        zIndex: number;
+    };
+    emblemImage: {
+        width: number;
+        height: number;
+    };
+    emblemPlaceholder: {
+        fontSize: number;
+        lineHeight: number;
+        marginTop: number;
+        color: string;
+        fontWeight: "bold";
+        textAlign: "center";
+        textShadowColor: string;
+        textShadowOffset: {
+            width: number;
+            height: number;
+        };
+        textShadowRadius: number;
+    };
+};

package/dist/components/native/Credentials/DiplomaCredential/diplomaCredential_types.native.d.ts

@@ -0,0 +1,20 @@
+import { HeadingCredentialProps } from '../../Headings/HeadingCredential/HeadingCredential_types.native';
+export type DiplomaCredentialColors = 'white' | 'black';
+export type DiplomaCredentialSize = 'default' | 'small';
+export interface DiplomaCredentialProps {
+    headingCredential1: HeadingCredentialProps;
+    headingCredential2: HeadingCredentialProps;
+    headingCredential3: HeadingCredentialProps;
+    color?: DiplomaCredentialColors;
+    size?: DiplomaCredentialSize;
+    certificateText?: string;
+    containerStyle?: any;
+    images?: {
+        frameStroke?: any;
+        medalBadge?: any;
+        medalRibbon?: any;
+        medalEmblem?: any;
+    };
+    onStarPress?: () => void;
+    isFavorite?: boolean;
+}

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

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

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

@@ -0,0 +1,9 @@
+type Props = {
+    text: string;
+    backgroundColor: string;
+    height?: number;
+    paddingLeft?: number;
+    paddingRight?: number;
+};
+export declare function DynamicBadgeBanner({ text, backgroundColor, height, paddingLeft, paddingRight, }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,17 @@
+import { ViewStyle } from 'react-native';
+type Props = {
+    size: number;
+    text: string;
+    gradientColors: string[];
+    borderColor?: string;
+    textStartAngle?: number;
+    fontSize?: number;
+    style?: ViewStyle;
+    children?: any;
+};
+/**
+ * Hexagonal outer ring with circular/around-the-edge text,
+ * all contained within the same `size` square.
+ */
+export default function HexagonBadgeRing({ size, text, gradientColors, borderColor, fontSize, style, children }: Props): import("react/jsx-runtime").JSX.Element;
+export {};