@gataca/design-system 0.3.60 → 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/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/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;
+}