@gataca/design-system 4.0.0 → 4.1.0

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

@@ -1,10 +1,14 @@
 export { default as Chip } from './native/Chips/Chip/index.native';
+export { default as ChipGroup } from './native/Chips/ChipGroup/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';
@@ -48,6 +52,7 @@ export { default as KeyIcon } from './native/Icons/icons/withSelectedState/key';
 export { default as ConnectIcon } from './native/Icons/icons/withSelectedState/connect';
 export { default as ServicesLinkedV4Icon } from './native/Icons/icons/withSelectedState/servicesLinkedV4';
 export { default as CircleWarningIcon } from './native/Icons/icons/withSelectedState/circleWarning';
+export { default as CredentialViewIcon } from './native/Icons/icons/withSelectedState/credentialView';
 export { default as FeaturesIcon } from './native/Icons/icons/withSelectedState/features';
 export { default as UsersV2Icon } from './native/Icons/icons/withSelectedState/users';
 export { default as AwardIcon } from './native/Icons/icons/withSelectedState/award';
@@ -64,6 +69,7 @@ export { default as PaymentMethodIcon } from './native/Icons/icons/withSelectedS
 export { default as StarIcon } from './native/Icons/icons/withSelectedState/star';
 export { default as SubscriptionsIcon } from './native/Icons/icons/withSelectedState/subscriptions';
 export { default as StampIcon } from './native/Icons/icons/withSelectedState/stamp';
+export { default as StackIcon } from './native/Icons/icons/withSelectedState/stack';
 export { default as SquareIcon } from './native/Icons/icons/withSelectedState/square';
 export { default as SettingsIcon } from './native/Icons/icons/withSelectedState/settings';
 export { default as ServicesLinkedV2Icon } from './native/Icons/icons/withSelectedState/servicesLinkedV2';

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

@@ -1,7 +1,8 @@
 export { default as Chip } from './web/Chips/Chip/index.web';
+export { default as ChipGroup } from './web/Chips/ChipGroup/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';
@@ -46,6 +47,7 @@ export { default as KeyIcon } from './web/Icons/icons/withSelectedState/key';
 export { default as ConnectIcon } from './web/Icons/icons/withSelectedState/connect';
 export { default as ServicesLinkedV4Icon } from './web/Icons/icons/withSelectedState/servicesLinkedV4';
 export { default as CircleWarningIcon } from './web/Icons/icons/withSelectedState/circleWarning';
+export { default as CredentialViewIcon } from './web/Icons/icons/withSelectedState/credentialView';
 export { default as FeaturesIcon } from './web/Icons/icons/withSelectedState/features';
 export { default as UsersV2Icon } from './web/Icons/icons/withSelectedState/users';
 export { default as AwardIcon } from './web/Icons/icons/withSelectedState/award';
@@ -62,6 +64,7 @@ export { default as PaymentMethodIcon } from './web/Icons/icons/withSelectedStat
 export { default as StarIcon } from './web/Icons/icons/withSelectedState/star';
 export { default as SubscriptionsIcon } from './web/Icons/icons/withSelectedState/subscriptions';
 export { default as StampIcon } from './web/Icons/icons/withSelectedState/stamp';
+export { default as StackIcon } from './web/Icons/icons/withSelectedState/stack';
 export { default as SquareIcon } from './web/Icons/icons/withSelectedState/square';
 export { default as SettingsIcon } from './web/Icons/icons/withSelectedState/settings';
 export { default as ServicesLinkedV2Icon } from './web/Icons/icons/withSelectedState/servicesLinkedV2';

package/dist/components/native/Buttons/SegmentedButton/SegmentedButton.types.native.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/native/Chips/Chip/Chip.config.native.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/native/Chips/Chip/Chip.types.native.d.ts

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

package/dist/components/native/{Cards → Credentials}/Credential/credential_styles.native.d.ts

@@ -16,6 +16,8 @@ export declare const styles: (colors: ColorsType, fontStyles: StyleType, backgro
         borderRadius: number;
         width: "100%";
         alignSelf: "stretch";
+        borderWidth: number;
+        borderColor: string;
     };
     credCardMainContent: {
         display: "flex";

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,27 @@
+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;
+    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,319 @@
+import { ColorsType } from '../../../../styles/Colors';
+import { StyleType } from '../../../../styles';
+export declare const styles: (colors: ColorsType, fontStyles: StyleType) => {
+    outerContainer: {
+        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;
+        elevation: number;
+        borderRadius: number;
+        overflow: "hidden";
+        padding: number;
+        borderWidth: number;
+        borderColor: string;
+        backgroundColor: string;
+    } | {
+        elevation: number;
+        shadowColor: string;
+        shadowOpacity: number;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowRadius: number;
+        borderRadius: number;
+        overflow: "hidden";
+        padding: number;
+        borderWidth: number;
+        borderColor: string;
+        backgroundColor: string;
+    };
+    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%";
+    };
+    mainDataContainerDefault: {
+        width: "100%";
+        minHeight: number;
+        padding: number;
+    };
+    mainDataContainerSmall: {
+        width: "100%";
+        minHeight: number;
+        padding: number;
+    };
+    mainDataContainer: {
+        borderRadius: number;
+        justifyContent: "space-between";
+        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";
+    };
+    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;
+    };
+    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;
+        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?: undefined;
+        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;
+    };
+};

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

@@ -0,0 +1,15 @@
+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;
+    hasBadge?: boolean;
+    isFavorite?: boolean;
+    onStarPress?: () => void;
+}

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 {};

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+interface HexagonTextProps {
+    text: string;
+    /**
+     * Circumradius: distance from the center to each hexagon vertex
+     * @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 Colors.neutral1000
+     */
+    color?: string;
+    /**
+     * Container style
+     */
+    style?: ViewStyle;
+    /**
+     * Full hexagon rotation in degrees.
+     * @default 0
+     */
+    startAngle?: number;
+    /**
+     * Text offset along the perimeter (0..1).
+     * 0 = starts at the first edge; 0.5 = half a turn.
+     * @default 0
+     */
+    startOffset?: number;
+    /**
+     * If true, tries to keep letters readable by avoiding rotations > 90°.
+     * @default false
+     */
+    keepUpright?: boolean;
+}
+declare const HexagonText: React.FC<HexagonTextProps>;
+export default HexagonText;

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

@@ -0,0 +1,14 @@
+export declare function InnerBadgeHexagon({ size, cornerRadius, colors, strokeColor, strokeWidth, style, shadowColor, shadow1Opacity, shadow1Blur, shadow2Opacity, shadow2Blur, shadowEnabled, }: {
+    size: number;
+    cornerRadius?: number;
+    colors: string[];
+    strokeColor?: string;
+    strokeWidth?: number;
+    style?: any;
+    shadowEnabled?: boolean;
+    shadowColor?: string;
+    shadow1Opacity?: number;
+    shadow1Blur?: number;
+    shadow2Opacity?: number;
+    shadow2Blur?: number;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,14 @@
+export declare function OuterBadgeHexagon({ size, cornerRadius, colors, strokeColor, strokeWidth, style, shadow1Blur, shadow2Blur, }: {
+    size: number;
+    cornerRadius?: number;
+    colors: string[];
+    strokeColor?: string;
+    strokeWidth?: number;
+    style?: any;
+    shadowEnabled?: boolean;
+    shadowColor?: string;
+    shadow1Opacity?: number;
+    shadow1Blur?: number;
+    shadow2Opacity?: number;
+    shadow2Blur?: number;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,3 @@
+export declare function Ribbon({ ribbonColors }: {
+    ribbonColors: string[];
+}): import("react/jsx-runtime").JSX.Element;

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

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