@gataca/design-system 0.3.59 → 0.3.61

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

@@ -30,6 +30,7 @@ export { default as Dialog } from './native/Dialog/Dialog/index.native';
 export { default as Tooltip } from './native/Tooltips/Tooltip/index.native';
 export { default as Popover } from './native/Popover/index.native';
 export { default as BottomStickyContainer } from './native/BottomSticky/BottomStickyContainer/index.native';
+export { default as TextField } from './native/TextField/TextField/index.native';
 export { default as Illustration } from './native/Illustrations/index.native';
 export { default as GatacaLogoHorIcon } from './native/Icons/icons/brand/gatacaLogoHor';
 export { default as GatacaLogoIcon } from './native/Icons/icons/brand/gatacaLogo';

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

@@ -25,6 +25,7 @@ export { default as NavigationBar } from './web/NavBar/NavigationBar/index.web';
 export { default as Alert } from './web/Alerts/Alert/index.web';
 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 Illustration } from './web/Illustrations/index.web';
 export { default as GatacaLogoHorIcon } from './web/Icons/icons/brand/gatacaLogoHor';
 export { default as GatacaLogoIcon } from './web/Icons/icons/brand/gatacaLogo';

package/dist/components/native/Cards/Credential/credential_types.native.d.ts

@@ -1,5 +1,6 @@
 import { HeadingCredentialChipColor } from '../../Headings/HeadingCredential/HeadingCredential_types.native';
 import { IconSize, IconStyle } from '../../Icons/icon_types';
+import { ParentComponentTooltipProps } from '../../Tooltips/Tooltip/tooltip_types.native';
 export type CredentialCardStates = 'open' | 'closed';
 export type VerifiedIcons = 'error' | 'check';
 export declare const verifiedIconMap: {
@@ -21,8 +22,12 @@ export type CredentialCardProps = {
     chip?: {
         text: string;
         containerStyle?: any;
+        tooltip?: ParentComponentTooltipProps;
+    };
+    verifiedIcon?: {
+        icon: VerifiedIcons;
+        tooltip?: ParentComponentTooltipProps;
     };
-    verifiedIcon?: VerifiedIcons;
     headingCredential1: {
         typeText: string;
         valueText?: string;
@@ -45,6 +50,7 @@ export type CredentialCardProps = {
         chip?: {
             color: HeadingCredentialChipColor;
             text: string;
+            tooltip?: ParentComponentTooltipProps;
         };
     };
     style?: any;

package/dist/components/native/Cards/MiniCredential/miniCredential_types.native.d.ts

@@ -27,4 +27,5 @@ export type MiniCredentialCardProps = {
         text_color?: string;
         hasGradient?: boolean;
     };
+    onPress?: (x?: any) => void;
 };

package/dist/components/native/Checkbox/Checkbox/checkbox_types.native.d.ts

@@ -1,3 +1,4 @@
+import { ParentComponentTooltipProps } from '../../Tooltips/Tooltip/tooltip_types.native';
 export type CheckboxSize = 'medium' | 'small';
 export type CheckboxState = 'active' | 'default' | 'hover' | 'disable' | 'error';
 export type CheckboxAlign = 'left' | 'right';
@@ -7,8 +8,8 @@ export interface CheckboxProps {
     leadingText?: string;
     size?: CheckboxSize;
     textAlign?: CheckboxAlign;
-    showInfoIcon?: boolean;
     textColor?: CheckboxTextColor;
     containerStyle?: any;
+    tooltip?: ParentComponentTooltipProps;
     onPress?: (x?: any) => void;
 }

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

@@ -1,3 +1,4 @@
+import { ParentComponentTooltipProps } from '../../Tooltips/Tooltip/tooltip_types.native';
 export type ChipColor = 'yellow' | 'lightYellow' | 'red' | 'grey' | 'white' | 'purple' | 'green' | 'blue' | 'teal' | 'pink' | 'black';
 export type ChipState = 'enable' | 'hover' | 'disable' | 'active';
 export type ChipStyle = 'outline' | 'filled';
@@ -15,5 +16,6 @@ export interface ChipProps {
     leadingIcon?: LeadingIcon;
     trailingIcon?: TrailingIcon;
     showText?: boolean;
+    tooltip?: ParentComponentTooltipProps;
     containerStyle?: any;
 }

package/dist/components/native/Headings/HeadingCredential/HeadingCredential_types.native.d.ts

@@ -1,3 +1,4 @@
+import { ParentComponentTooltipProps } from '../../Tooltips/Tooltip/tooltip_types.native';
 export type HeadingCredentialType = 'main' | 'content';
 export type HeadingCredentialAlign = 'left' | 'right';
 export type ImageSlotResizeMode = 'stretch' | 'cover';
@@ -11,6 +12,7 @@ export interface ImageSlotProps {
 export interface ChipProps {
     color?: HeadingCredentialChipColor;
     text: string;
+    tooltip?: ParentComponentTooltipProps;
 }
 export interface HeadingCredentialProps {
     type?: HeadingCredentialType;

package/dist/components/native/Lists/ListMetaContainer/listMetaContainer_types.native.d.ts

@@ -1,5 +1,6 @@
 import { ActionItemsProps } from '../../Action/ActionItems/actionItems_types.native';
 import { ChipProps } from '../../Chips/Chip/Chip.types.native';
+import { ParentComponentTooltipProps } from '../../Tooltips/Tooltip/tooltip_types.native';
 export type ListMetaContainerCondition = 'all' | 'title' | 'titleExtraInfo';
 export type ListMetaContainerSize = 'medium' | 'small';
 export type ListMetaContainerColor = 'black' | 'gray' | 'red' | 'white';
@@ -9,7 +10,7 @@ export interface ListMetaContainerProps {
     size?: ListMetaContainerSize;
     color?: ListMetaContainerColor;
     align?: ListMetaContainerAlign;
-    showInfoIcon?: boolean;
+    tooltip?: ParentComponentTooltipProps;
     chip?: ChipProps;
     actionItem?: ActionItemsProps;
     title?: string;

package/dist/components/native/RadioButton/RadioButton/radioButton_types.native.d.ts

@@ -1,3 +1,4 @@
+import { ParentComponentTooltipProps } from '../../Tooltips/Tooltip/tooltip_types.native';
 export type RadioButtonSize = 'medium' | 'small';
 export type RadioButtonState = 'active' | 'default' | 'hover' | 'disable';
 export type RadioButtonAlign = 'left' | 'right';
@@ -7,7 +8,7 @@ export interface RadioButtonProps {
     leadingText?: string;
     size?: RadioButtonSize;
     textAlign?: RadioButtonAlign;
-    showInfoIcon?: boolean;
+    tooltip?: ParentComponentTooltipProps;
     textColor?: RadioButtonColor;
     containerStyle?: any;
     onPress?: (x?: any) => void;

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

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

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

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

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

@@ -0,0 +1,17 @@
+import { StyleType } from '../../../../utils/theming';
+import { TextFieldSize, TextFieldState } from './textField_types.native';
+export declare const inputFont: (size: TextFieldSize, fontStyles: StyleType) => import("../../../../styles/Fonts").FontsStyle;
+export declare const labelFont: (size: TextFieldSize, fontStyles: StyleType) => import("../../../../styles/Fonts").FontsStyle;
+export declare const extraDescFont: (size: TextFieldSize, fontStyles: StyleType) => import("../../../../styles/Fonts").FontsStyle;
+export declare const inputBorder: {
+    enable: string;
+    disable: string;
+    hover: string;
+    active: string;
+    complete: string;
+    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";

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

@@ -0,0 +1,56 @@
+declare const _default: {
+    textFieldContainer: {
+        display: "flex";
+        flexDirection: "column";
+        alignItems: "flex-start";
+        gap: number;
+        alignSelf: "stretch";
+        width: "100%";
+    };
+    textFieldTopTextContainer: {
+        display: "flex";
+        flexDirection: "row";
+        justifyContent: "space-between";
+        width: "100%";
+        alignItems: "center";
+        gap: number;
+    };
+    textFieldLabelContainer: {
+        display: "flex";
+        flexDirection: "row";
+        justifyContent: "flex-start";
+        alignItems: "center";
+        gap: number;
+    };
+    textFieldLeadingIcon: {
+        position: "absolute";
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        display: "flex";
+        justifyContent: "center";
+        alignItems: "center";
+        zIndex: number;
+    };
+    textFieldInput: {
+        width: "100%";
+        borderWidth: number;
+        borderRadius: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+        position: "relative";
+    };
+    textFieldTrailingIcon: {
+        position: "absolute";
+        right: number;
+        top: number;
+        width: number;
+        height: number;
+        display: "flex";
+        justifyContent: "center";
+        alignItems: "center";
+        zIndex: number;
+    };
+};
+export default _default;

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

@@ -0,0 +1,42 @@
+import { KeyboardTypeOptions } from 'react-native';
+import { ParentComponentTooltipProps } from '../../Tooltips/Tooltip/tooltip_types.native';
+import { IconSize, IconStyle } from '../../Icons/icon_types';
+export type TextFieldSize = 'medium' | 'large';
+export type TextFieldState = 'enable' | 'disable' | 'hover' | 'active' | 'complete' | 'success' | 'error';
+export type TextFieldAutoComplete = 'additional-name' | 'address-line1' | 'address-line2' | 'birthdate-day' | 'birthdate-full' | 'birthdate-month' | 'birthdate-year' | 'cc-csc' | 'cc-exp' | 'cc-exp-day' | 'cc-exp-month' | 'cc-exp-year' | 'cc-number' | 'country' | 'current-password' | 'email' | 'family-name' | 'gender' | 'given-name' | 'honorific-prefix' | 'honorific-suffix' | 'name' | 'name-family' | 'name-given' | 'name-middle' | 'name-middle-initial' | 'name-prefix' | 'name-suffix' | 'new-password' | 'nickname' | 'one-time-code' | 'organization' | 'organization-title' | 'password' | 'password-new' | 'postal-address' | 'postal-address-country' | 'postal-address-extended' | 'postal-address-extended-postal-code' | 'postal-address-locality' | 'postal-address-region' | 'postal-code' | 'street-address' | 'sms-otp' | 'tel' | 'tel-country-code' | 'tel-national' | 'tel-device' | 'url' | 'username' | 'username-new' | 'off';
+export interface TextFieldProps {
+    state: TextFieldState;
+    textFieldSize: TextFieldSize;
+    label: {
+        text: string;
+        tooltip?: ParentComponentTooltipProps;
+    };
+    value?: string;
+    autoComplete?: TextFieldAutoComplete;
+    extraDescription?: string;
+    helperText?: string;
+    placeholder?: string;
+    keyboardType?: KeyboardTypeOptions;
+    leadingIcon?: {
+        Icon: React.FC<{
+            size: IconSize;
+            color: string;
+            style: IconStyle;
+        }>;
+        color?: string;
+        style?: string;
+        onPress?: (x?: any) => void;
+    };
+    trailingIcon?: {
+        Icon: React.FC<{
+            size: IconSize;
+            color: string;
+            style: IconStyle;
+        }>;
+        color?: string;
+        style?: string;
+        onPress?: (x?: any) => void;
+    };
+    containerStyle?: any;
+    onChangeText: (x?: any) => void;
+}

package/dist/components/native/Tooltips/Tooltip/tooltip_types.native.d.ts

@@ -47,3 +47,16 @@ export type CaretProps = {
     position: PopoverProps['position'];
     style?: ViewProps['style'];
 };
+export type ParentComponentTooltipProps = {
+    action?: PopableAction;
+    caretPosition?: PopoverProps['caretPosition'];
+    textAlign?: PopoverProps['textAlign'];
+    content: PopoverProps['children'];
+    numberOfLines?: PopoverProps['numberOfLines'];
+    position?: PopoverProps['position'];
+    strictPosition?: boolean;
+    style?: PopoverProps['style'];
+    visible?: boolean;
+    wrapperStyle?: ViewProps['style'];
+    onAction?: (visible: boolean) => void;
+};

package/dist/components/web/Cards/Credential/credential_types.web.d.ts

@@ -1,5 +1,6 @@
 import { HeadingCredentialChipColor } from '../../Headings/HeadingCredential/HeadingCredential_types.web';
 import { IconSize, IconStyle } from '../../Icons/icon_types';
+import { ParentComponentTooltipProps } from '../../Tooltips/Tooltip/tooltip_types.web';
 export type CredentialCardStates = 'open' | 'closed';
 export type VerifiedIcons = 'error' | 'check';
 export declare const verifiedIconMap: {
@@ -21,8 +22,12 @@ export type CredentialCardProps = {
     chip?: {
         text: string;
         containerStyle?: any;
+        tooltip?: ParentComponentTooltipProps;
+    };
+    verifiedIcon?: {
+        icon: VerifiedIcons;
+        tooltip?: ParentComponentTooltipProps;
     };
-    verifiedIcon?: VerifiedIcons;
     headingCredential1: {
         typeText: string;
         valueText?: string;
@@ -45,6 +50,7 @@ export type CredentialCardProps = {
         chip?: {
             color: HeadingCredentialChipColor;
             text: string;
+            tooltip?: ParentComponentTooltipProps;
         };
     };
     display?: {

package/dist/components/web/Cards/MiniCredential/miniCredential_types.web.d.ts

@@ -27,4 +27,5 @@ export type MiniCredentialCardProps = {
         text_color?: string;
         hasGradient?: boolean;
     };
+    onClick?: (x?: any) => void;
 };

package/dist/components/web/Checkbox/Checkbox/checkbox_types.web.d.ts

@@ -1,3 +1,4 @@
+import { ParentComponentTooltipProps } from '../../../native/Tooltips/Tooltip/tooltip_types.native';
 export type CheckboxSize = 'medium' | 'small';
 export type CheckboxState = 'active' | 'default' | 'hover' | 'disable' | 'error';
 export type CheckboxAlign = 'left' | 'right';
@@ -7,8 +8,8 @@ export interface CheckboxProps {
     leadingText?: string;
     size?: CheckboxSize;
     textAlign?: CheckboxAlign;
-    showInfoIcon?: boolean;
     textColor?: CheckboxTextColor;
     containerStyle?: any;
+    tooltip?: ParentComponentTooltipProps;
     onPress?: (x?: any) => void;
 }

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

@@ -1,3 +1,4 @@
+import { ParentComponentTooltipProps } from '../../Tooltips/Tooltip/tooltip_types.web';
 export type ChipColor = 'yellow' | 'lightYellow' | 'red' | 'grey' | 'white' | 'purple' | 'green' | 'blue' | 'teal' | 'pink' | 'black';
 export type ChipState = 'enable' | 'hover' | 'disable' | 'active';
 export type ChipStyle = 'outline' | 'filled';
@@ -15,5 +16,6 @@ export interface ChipProps {
     leadingIcon?: LeadingIcon;
     trailingIcon?: TrailingIcon;
     showText?: boolean;
+    tooltip?: ParentComponentTooltipProps;
     containerStyle?: any;
 }

package/dist/components/web/Headings/HeadingCredential/HeadingCredential_types.web.d.ts

@@ -1,3 +1,4 @@
+import { ParentComponentTooltipProps } from '../../Tooltips/Tooltip/tooltip_types.web';
 export type HeadingCredentialType = 'main' | 'content';
 export type HeadingCredentialAlign = 'left' | 'right';
 export type ImageSlotResizeMode = 'stretch' | 'cover';
@@ -11,6 +12,7 @@ export interface ImageSlotProps {
 export interface ChipProps {
     color?: HeadingCredentialChipColor;
     text: string;
+    tooltip?: ParentComponentTooltipProps;
 }
 export interface HeadingCredentialProps {
     type?: HeadingCredentialType;

package/dist/components/web/Lists/ListMetaContainer/listMetaContainer_types.web.d.ts

@@ -1,5 +1,6 @@
 import { ActionItemsProps } from '../../Action/ActionItems/actionItems_types.web';
 import { ChipProps } from '../../Chips/Chip/Chip.types.web';
+import { ParentComponentTooltipProps } from '../../Tooltips/Tooltip/tooltip_types.web';
 export type ListMetaContainerCondition = 'all' | 'title' | 'titleExtraInfo';
 export type ListMetaContainerSize = 'medium' | 'small';
 export type ListMetaContainerColor = 'black' | 'gray' | 'red' | 'white';
@@ -9,7 +10,7 @@ export interface ListMetaContainerProps {
     size?: ListMetaContainerSize;
     color?: ListMetaContainerColor;
     align?: ListMetaContainerAlign;
-    showInfoIcon?: boolean;
+    tooltip?: ParentComponentTooltipProps;
     chip?: ChipProps;
     actionItem?: ActionItemsProps;
     title?: string;

package/dist/components/web/RadioButton/RadioButton/radioButton_types.web.d.ts

@@ -1,3 +1,4 @@
+import { ParentComponentTooltipProps } from '../../Tooltips/Tooltip/tooltip_types.web';
 export type RadioButtonSize = 'medium' | 'small';
 export type RadioButtonState = 'active' | 'default' | 'hover' | 'disable';
 export type RadioButtonAlign = 'left' | 'right';
@@ -7,7 +8,7 @@ export interface RadioButtonProps {
     leadingText?: string;
     size?: RadioButtonSize;
     textAlign?: RadioButtonAlign;
-    showInfoIcon?: boolean;
+    tooltip?: ParentComponentTooltipProps;
     textColor?: RadioButtonColor;
     containerStyle?: any;
     onPress?: (x?: any) => void;

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

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

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

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

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

@@ -0,0 +1,17 @@
+import { StyleType } from '../../../../utils/theming';
+import { TextFieldSize, TextFieldState } from './textField_types.web';
+export declare const inputFont: (size: TextFieldSize, fontStyles: StyleType) => import("../../../../styles/Fonts").FontsStyle;
+export declare const labelFont: (size: TextFieldSize, fontStyles: StyleType) => import("../../../../styles/Fonts").FontsStyle;
+export declare const extraDescFont: (size: TextFieldSize, fontStyles: StyleType) => import("../../../../styles/Fonts").FontsStyle;
+export declare const inputBorder: {
+    enable: string;
+    disable: string;
+    hover: string;
+    active: string;
+    complete: string;
+    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";

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

@@ -0,0 +1,8 @@
+export declare const styles: {
+    textFieldContainer: React.CSSProperties;
+    textFieldTopTextContainer: React.CSSProperties;
+    textFieldLabelContainer: React.CSSProperties;
+    textFieldLeadingIcon: React.CSSProperties;
+    textFieldInput: React.CSSProperties;
+    textFieldTrailingIcon: React.CSSProperties;
+};

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

@@ -0,0 +1,45 @@
+import { IconSize, IconStyle } from '../../Icons/icon_types';
+import { ParentComponentTooltipProps } from '../../Tooltips/Tooltip/tooltip_types.web';
+export type TextFieldSize = 'medium' | 'large';
+export type TextFieldState = 'enable' | 'disable' | 'hover' | 'active' | 'complete' | 'success' | 'error';
+export type TextFieldType = 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'tel' | 'text' | 'time' | 'url' | 'week';
+export type TextFieldAutoComplete = 'additional-name' | 'address-line1' | 'address-line2' | 'birthdate-day' | 'birthdate-full' | 'birthdate-month' | 'birthdate-year' | 'cc-csc' | 'cc-exp' | 'cc-exp-day' | 'cc-exp-month' | 'cc-exp-year' | 'cc-number' | 'country' | 'current-password' | 'email' | 'family-name' | 'gender' | 'given-name' | 'honorific-prefix' | 'honorific-suffix' | 'name' | 'name-family' | 'name-given' | 'name-middle' | 'name-middle-initial' | 'name-prefix' | 'name-suffix' | 'new-password' | 'nickname' | 'one-time-code' | 'organization' | 'organization-title' | 'password' | 'password-new' | 'postal-address' | 'postal-address-country' | 'postal-address-extended' | 'postal-address-extended-postal-code' | 'postal-address-locality' | 'postal-address-region' | 'postal-code' | 'street-address' | 'sms-otp' | 'tel' | 'tel-country-code' | 'tel-national' | 'tel-device' | 'url' | 'username' | 'username-new' | 'off';
+export interface TextFieldProps {
+    state: TextFieldState;
+    textFieldSize: TextFieldSize;
+    label: {
+        text: string;
+        tooltip?: ParentComponentTooltipProps;
+    };
+    value?: string;
+    autoComplete?: TextFieldAutoComplete;
+    extraDescription?: string;
+    helperText?: string;
+    placeholder?: string;
+    type?: TextFieldType;
+    containerStyle?: any;
+    maxLength?: number;
+    minLength?: number;
+    leadingIcon?: {
+        Icon: React.FC<{
+            size: IconSize;
+            color: string;
+            style: IconStyle;
+        }>;
+        color?: string;
+        style?: string;
+        onClick?: (x?: any) => void;
+    };
+    trailingIcon?: {
+        Icon: React.FC<{
+            size: IconSize;
+            color: string;
+            style: IconStyle;
+        }>;
+        color?: string;
+        style?: string;
+        onClick?: (x?: any) => void;
+    };
+    onChange: (x?: any) => void;
+    onKeyPress?: (x?: any) => void;
+}

package/dist/components/web/Tooltips/Tooltip/tooltip_types.web.d.ts

@@ -48,3 +48,16 @@ export type CaretProps = {
     position: PopoverProps['position'];
     style?: any;
 };
+export type ParentComponentTooltipProps = {
+    action?: PopableAction;
+    caretPosition?: PopoverProps['caretPosition'];
+    textAlign?: PopoverProps['textAlign'];
+    content: PopoverProps['children'];
+    numberOfLines?: PopoverProps['numberOfLines'];
+    position?: PopoverProps['position'];
+    strictPosition?: boolean;
+    style?: PopoverProps['style'];
+    visible?: boolean;
+    wrapperStyle?: any;
+    onAction?: (visible: boolean) => void;
+};