@gataca/design-system 4.0.1 → 4.2.0

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

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

@@ -0,0 +1,56 @@
+import React from 'react';
+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?: React.CSSProperties;
+    /**
+     * 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/web/Credentials/DiplomaCredential/components/Ribbon.d.ts

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

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

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

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

@@ -0,0 +1,28 @@
+import { ColorsType } from '../../../../styles/Colors';
+import { DiplomaCredentialColors, DiplomaCredentialSize } from './diplomaCredential_types.web';
+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/web/Credentials/DiplomaCredential/diplomaCredential_styles.web.d.ts

@@ -0,0 +1,4 @@
+import { ColorsType } from '../../../../styles/Colors';
+import { StyleType } from '../../../../styles';
+import React from 'react';
+export declare const styles: (colors: ColorsType, fontStyles: StyleType) => Record<string, React.CSSProperties>;

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

@@ -0,0 +1,15 @@
+import { HeadingCredentialProps } from '../../Headings/HeadingCredential/HeadingCredential_types.web';
+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/web/Credentials/DiplomaCredential/index.web.d.ts

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

package/dist/components/web/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/web/Credentials/LegalAgeCredential/components/HexagonBadgeRing.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+type Props = {
+    size: number;
+    text: string;
+    gradientColors: string[];
+    borderColor?: string;
+    textStartAngle?: number;
+    fontSize?: number;
+    style?: React.CSSProperties;
+    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/web/Credentials/LegalAgeCredential/components/HexagonText.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+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?: React.CSSProperties;
+    /**
+     * 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/web/Credentials/LegalAgeCredential/components/InnerBadgeHexagon.d.ts

@@ -0,0 +1,14 @@
+export declare function InnerBadgeHexagon({ 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/web/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/web/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/web/Credentials/LegalAgeCredential/index.web.d.ts

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

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

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

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

@@ -0,0 +1,24 @@
+import { ColorsType } from '../../../../styles/Colors';
+import { LegalageCredentialProps, LegalageCredentialSize } from './legalAgeCredential_types.web';
+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[];
+    labelColor: string;
+    valueColor: 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/web/Credentials/LegalAgeCredential/legalAgeCredential_styles.web.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ColorsType } from '../../../../styles/Colors';
+import { StyleType } from '../../../../styles';
+export declare const styles: (colors: ColorsType, fontStyles: StyleType) => Record<string, React.CSSProperties>;

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

@@ -0,0 +1,15 @@
+import { HeadingCredentialProps } from '../../Headings/HeadingCredential/HeadingCredential_types.web';
+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/web/Credentials/PersonalIdCredential/index.web.d.ts

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

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

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

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

@@ -0,0 +1,17 @@
+import { ColorsType } from '../../../../styles/Colors';
+import { PersonalIdCredentialsColors, PersonalIdCredentialsSize } from './personalIdCredential_types.web';
+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/web/Credentials/PersonalIdCredential/personalIdCredential_styles.web.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ColorsType } from '../../../../styles/Colors';
+import { StyleType } from '../../../../styles/Fonts';
+export declare const styles: (colors: ColorsType, fontStyles: StyleType) => Record<string, React.CSSProperties>;

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

@@ -0,0 +1,19 @@
+import { HeadingCredentialProps } from '../../Headings/HeadingCredential/HeadingCredential_types.web';
+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?: {
+        uri: string;
+    };
+    color?: PersonalIdCredentialsColors;
+    isFavorite?: boolean;
+    size?: PersonalIdCredentialsSize;
+    containerStyle?: React.CSSProperties;
+    onStarPress?: () => void;
+}

package/dist/components/web/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/web/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/web/Icons/index.web.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/web/Illustrations/illustrations_types.d.ts

@@ -34,6 +34,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/web/Indicator/NumberBadges/numberBadges_types.web.d.ts

@@ -13,8 +13,8 @@ export declare enum numberBadgesBgColorByState {
     'hover' = "neutral600"
 }
 export declare enum numberBadgesTextColorByState {
-    'enable' = "neutral100",
-    'active' = "neutral100",
+    'enable' = "fundationWhite",
+    'active' = "fundationWhite",
     'disable' = "neutral600",
-    'hover' = "neutral100"
+    'hover' = "fundationWhite"
 }

package/dist/components/web/Menus/MenuItem/MenuItem_types.web.d.ts

@@ -51,8 +51,8 @@ export declare enum stateLeadingIconColors {
     'hover' = "neutral1000"
 }
 export declare enum backgroundColorByState {
-    'enable' = "neutral100",
+    'enable' = "fundationWhite",
     'active' = "primary100",
-    'disable' = "neutral100",
+    'disable' = "fundationWhite",
     'hover' = "neutral200"
 }

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

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