@gataca/design-system 0.2.37 → 0.2.39

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

@@ -16,6 +16,9 @@ export { default as AvatarGroup } from './native/Avatars/AvatarGroup/index.nativ
 export { default as TopAppBar } from './native/TopAppBar/TopAppBar/index.native';
 export { default as ListMetaContainer } from './native/Lists/ListMetaContainer/index.native';
 export { default as ListItem } from './native/Lists/ListItem/index.native';
+export { default as Checkbox } from './native/Checkbox/Checkbox/index.native';
+export { default as RadioButton } from './native/RadioButton/RadioButton/index.native';
+export { default as Switch } from './native/Switch/Switch/index.native';
 export { default as CheckIcon } from './native/Icons/icons/check';
 export { default as InfoIcon } from './native/Icons/icons/info';
 export { default as ChevronDownIcon } from './native/Icons/icons/chevronDown';

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

@@ -14,6 +14,9 @@ export { default as Avatar } from './web/Avatars/Avatar/index.web';
 export { default as AvatarGroup } from './web/Avatars/AvatarGroup/index.web';
 export { default as ListMetaContainer } from './web/Lists/ListMetaContainer/index.web';
 export { default as ListItem } from './web/Lists/ListItem/index.web';
+export { default as Checkbox } from './web/Checkbox/Checkbox/index.web';
+export { default as RadioButton } from './web/RadioButton/RadioButton/index.web';
+export { default as Switch } from './web/Switch/Switch/index.web';
 export { default as CheckIcon } from './web/Icons/icons/check';
 export { default as InfoIcon } from './web/Icons/icons/info';
 export { default as ChevronDownIcon } from './web/Icons/icons/chevronDown';

package/dist/components/native/Avatars/AvatarGroup/avatarGroup.types.native.d.ts

@@ -2,7 +2,7 @@ import { HeadingContainerProps } from '../../Headings/HeadingContainer/HeadingCo
 import { AvatarProps } from '../Avatar/Avatar.types.native';
 export type AvatarGroupAlign = 'horizontal' | 'vertical';
 export interface AvatarGroupProps {
-    avatar: AvatarProps;
+    avatar?: AvatarProps;
     headingContainer: HeadingContainerProps;
     align: AvatarGroupAlign;
     containerStyle?: any;

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

@@ -1,6 +1,6 @@
 import { ColorsType } from '../../../../styles/Colors';
 import { StyleType } from '../../../../styles';
-export declare const styles: (colors: ColorsType, fontStyles: StyleType, background_color?: string) => {
+export declare const styles: (topDataHeight: number, colors: ColorsType, fontStyles: StyleType, background_color?: string) => {
     credCardContainer: {
         display: "flex";
         flexDirection: "column";

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

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

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

@@ -0,0 +1,16 @@
+declare const _default: {
+    checkboxContainer: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        gap: number;
+        alignSelf: "flex-start";
+    };
+    checkboxTextContainer: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        gap: number;
+    };
+};
+export default _default;

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

@@ -0,0 +1,12 @@
+export type CheckboxSize = 'medium' | 'small';
+export type CheckboxState = 'active' | 'default' | 'hover' | 'disable';
+export type CheckboxAlign = 'left' | 'right';
+export interface CheckboxProps {
+    state: CheckboxState;
+    leadingText?: string;
+    size?: CheckboxSize;
+    textAlign?: CheckboxAlign;
+    showInfoIcon?: boolean;
+    containerStyle?: any;
+    onPress?: (x?: any) => void;
+}

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

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

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

@@ -5,10 +5,49 @@ declare const _default: {
         gap: number;
         alignItems: "flex-end";
     };
-    image: {
+    imageContainer: {
+        position: "relative";
         width: number;
         height: number;
+        overflow: "hidden";
         borderRadius: number;
     };
+    landscapeImage: {
+        position: "absolute";
+        left: "-100%";
+        right: "-100%";
+        top: "-100%";
+        bottom: "-100%";
+        margin: "auto";
+        minWidth: "100%";
+        minHeight: "100%";
+        maxHeight: "100%";
+        objectFit: "cover";
+    };
+    portraitImage: {
+        position: "absolute";
+        left: "-100%";
+        right: "-100%";
+        top: "-100%";
+        bottom: "-100%";
+        margin: "auto";
+        minWidth: "100%";
+        minHeight: "100%";
+        maxWidth: "100%";
+        objectFit: "cover";
+    };
+    squareImage: {
+        position: "absolute";
+        left: "-100%";
+        right: "-100%";
+        top: "-100%";
+        bottom: "-100%";
+        margin: "auto";
+        minWidth: "100%";
+        minHeight: "100%";
+        maxWidth: "100%";
+        maxHeight: "100%";
+        objectFit: "cover";
+    };
 };
 export default _default;

package/dist/components/native/Icons/icons/checkbox.d.ts

@@ -0,0 +1,9 @@
+import { ColorsType } from '../../../../styles';
+import { CheckboxSize, CheckboxState } from '../../Checkbox/Checkbox/checkbox_types.native';
+type ChekboxIconProps = {
+    size: CheckboxSize;
+    colors: ColorsType;
+    state: CheckboxState;
+};
+declare const ChekboxIcon: (props: ChekboxIconProps) => import("react/jsx-runtime").JSX.Element;
+export default ChekboxIcon;

package/dist/components/native/Icons/icons/radioButton.d.ts

@@ -0,0 +1,9 @@
+import { ColorsType } from '../../../../styles';
+import { RadioButtonSize, RadioButtonState } from '../../RadioButton/RadioButton/radioButton_types.native';
+type RadioButtonIconProps = {
+    size: RadioButtonSize;
+    colors: ColorsType;
+    state: RadioButtonState;
+};
+declare const RadioButtonIcon: (props: RadioButtonIconProps) => import("react/jsx-runtime").JSX.Element;
+export default RadioButtonIcon;

package/dist/components/native/Lists/ListItem/listItem_types.native.d.ts

@@ -1,5 +1,9 @@
 import { AvatarProps } from '../../Avatars/Avatar/Avatar.types.native';
 import { MiniCredentialCardProps } from '../../Cards/MiniCredential/miniCredential_types.native';
+import { CheckboxProps } from '../../Checkbox/Checkbox/checkbox_types.native';
+import { IconSize } from '../../Icons/icon_types';
+import { RadioButtonProps } from '../../RadioButton/RadioButton/radioButton_types.native';
+import { SwitchProps } from '../../Switch/Switch/switch_types.native';
 export type ListItemCondition = 'all' | 'title' | 'titleExtraInfo';
 export type ListItemSize = 'medium' | 'small';
 export type ListItemColor = 'black' | 'gray';
@@ -16,6 +20,17 @@ export interface ListItemProps {
     helperText?: string;
     avatar?: AvatarProps;
     credential?: MiniCredentialCardProps;
+    checkbox?: CheckboxProps;
+    switchOpt?: SwitchProps;
+    radioButton?: RadioButtonProps;
+    LeadingIcon?: React.FC<{
+        size: IconSize;
+        color: string;
+    }>;
+    TrailingIcon?: React.FC<{
+        size: IconSize;
+        color: string;
+    }>;
     containerStyle?: any;
     onPress?: (x: any) => void;
 }

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

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

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

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

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

@@ -0,0 +1,16 @@
+declare const _default: {
+    radioButtonContainer: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        gap: number;
+        alignSelf: "flex-start";
+    };
+    radioButtonTextContainer: {
+        display: "flex";
+        flexDirection: "row";
+        alignItems: "center";
+        gap: number;
+    };
+};
+export default _default;

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

@@ -0,0 +1,12 @@
+export type RadioButtonSize = 'medium' | 'small';
+export type RadioButtonState = 'active' | 'default' | 'hover' | 'disable';
+export type RadioButtonAlign = 'left' | 'right';
+export interface RadioButtonProps {
+    state: RadioButtonState;
+    leadingText?: string;
+    size?: RadioButtonSize;
+    textAlign?: RadioButtonAlign;
+    showInfoIcon?: boolean;
+    containerStyle?: any;
+    onPress?: (x?: any) => void;
+}

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

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

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

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

package/dist/components/native/Switch/Switch/switch_styles.native.d.ts

@@ -0,0 +1,19 @@
+export declare const styles: {
+    generalContainer: {
+        display: "flex";
+        justifyContent: "flex-start";
+        alignItems: "center";
+        flexDirection: "row";
+        gap: number;
+    };
+    container: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        display: "flex";
+        justifyContent: "center";
+    };
+    circle: {
+        borderRadius: number;
+    };
+};

package/dist/components/native/Switch/Switch/switch_types.native.d.ts

@@ -0,0 +1,10 @@
+export type SwitchSize = '32' | '24';
+export type SwitchState = 'enable' | 'hover' | 'disable';
+export interface SwitchProps {
+    state: SwitchState;
+    size: SwitchSize;
+    text?: string;
+    isActive?: boolean;
+    containerStyle?: any;
+    onChange: (isActive?: boolean) => void;
+}

package/dist/components/web/Avatars/AvatarGroup/avatarGroup.types.web.d.ts

@@ -2,7 +2,7 @@ import { HeadingContainerProps } from '../../Headings/HeadingContainer/HeadingCo
 import { AvatarProps } from '../Avatar/Avatar.types.web';
 export type AvatarGroupAlign = 'horizontal' | 'vertical';
 export interface AvatarGroupProps {
-    avatar: AvatarProps;
+    avatar?: AvatarProps;
     headingContainer: HeadingContainerProps;
     align: AvatarGroupAlign;
     containerStyle?: any;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ColorsType } from '../../../../styles/Colors';
 import { StyleType } from '../../../../styles';
-export declare const styles: (colors: ColorsType, fontStyles: StyleType, background_color?: string, verifiedIcon?: boolean, hasGradient?: boolean) => {
+export declare const styles: (topDataHeight: number, colors: ColorsType, fontStyles: StyleType, background_color?: string, verifiedIcon?: boolean, hasGradient?: boolean) => {
     credCardContainer: React.CSSProperties;
     linearGradientOverlay: React.CSSProperties;
     credCardMainContent: React.CSSProperties;

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

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

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const styles: () => {
+    checkboxContainer: React.CSSProperties;
+    checkboxTextContainer: React.CSSProperties;
+};

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

@@ -0,0 +1,12 @@
+export type CheckboxSize = 'medium' | 'small';
+export type CheckboxState = 'active' | 'default' | 'hover' | 'disable';
+export type CheckboxAlign = 'left' | 'right';
+export interface CheckboxProps {
+    state: CheckboxState;
+    leadingText?: string;
+    size?: CheckboxSize;
+    textAlign?: CheckboxAlign;
+    showInfoIcon?: boolean;
+    containerStyle?: any;
+    onPress?: (x?: any) => void;
+}

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

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

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

@@ -1,5 +1,8 @@
 import React from 'react';
 export declare const styles: () => {
     headingCredentialContainer: React.CSSProperties;
-    image: React.CSSProperties;
+    imageContainer: React.CSSProperties;
+    landscapeImage: React.CSSProperties;
+    portraitImage: React.CSSProperties;
+    squareImage: React.CSSProperties;
 };

package/dist/components/web/Icons/icons/checkbox.d.ts

@@ -0,0 +1,9 @@
+import { ColorsType } from '../../../../styles';
+import { CheckboxSize, CheckboxState } from '../../Checkbox/Checkbox/checkbox_types.web';
+type ChekboxIconProps = {
+    size: CheckboxSize;
+    colors: ColorsType;
+    state: CheckboxState;
+};
+declare const ChekboxIcon: (props: ChekboxIconProps) => import("react/jsx-runtime").JSX.Element;
+export default ChekboxIcon;

package/dist/components/web/Icons/icons/radioButton.d.ts

@@ -0,0 +1,9 @@
+import { ColorsType } from '../../../../styles';
+import { RadioButtonSize, RadioButtonState } from '../../RadioButton/RadioButton/radioButton_types.web';
+type RadioButtonIconProps = {
+    size: RadioButtonSize;
+    colors: ColorsType;
+    state: RadioButtonState;
+};
+declare const RadioButtonIcon: (props: RadioButtonIconProps) => import("react/jsx-runtime").JSX.Element;
+export default RadioButtonIcon;

package/dist/components/web/Lists/ListItem/listItem_types.web.d.ts

@@ -1,5 +1,9 @@
 import { AvatarProps } from '../../Avatars/Avatar/Avatar.types.web';
 import { MiniCredentialCardProps } from '../../Cards/MiniCredential/miniCredential_types.web';
+import { CheckboxProps } from '../../Checkbox/Checkbox/checkbox_types.web';
+import { IconSize } from '../../Icons/icon_types';
+import { RadioButtonProps } from '../../RadioButton/RadioButton/radioButton_types.web';
+import { SwitchProps } from '../../Switch/Switch/switch_types.web';
 export type ListItemCondition = 'all' | 'title' | 'titleExtraInfo';
 export type ListItemSize = 'medium' | 'small';
 export type ListItemColor = 'black' | 'gray';
@@ -17,5 +21,16 @@ export interface ListItemProps {
     avatar?: AvatarProps;
     credential?: MiniCredentialCardProps;
     containerStyle?: any;
+    checkbox?: CheckboxProps;
+    switchOpt?: SwitchProps;
+    LeadingIcon?: React.FC<{
+        size: IconSize;
+        color: string;
+    }>;
+    TrailingIcon?: React.FC<{
+        size: IconSize;
+        color: string;
+    }>;
+    radioButton?: RadioButtonProps;
     onPress?: (x: any) => void;
 }

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

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

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

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

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const styles: () => {
+    radioButtonContainer: React.CSSProperties;
+    radioButtonTextContainer: React.CSSProperties;
+};

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

@@ -0,0 +1,12 @@
+export type RadioButtonSize = 'medium' | 'small';
+export type RadioButtonState = 'active' | 'default' | 'hover' | 'disable';
+export type RadioButtonAlign = 'left' | 'right';
+export interface RadioButtonProps {
+    state: RadioButtonState;
+    leadingText?: string;
+    size?: RadioButtonSize;
+    textAlign?: RadioButtonAlign;
+    showInfoIcon?: boolean;
+    containerStyle?: any;
+    onPress?: (x?: any) => void;
+}

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

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

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

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

package/dist/components/web/Switch/Switch/switch_styles.web.d.ts

@@ -0,0 +1,8 @@
+import { ColorsType, StyleType } from '../../../../styles';
+import { SwitchSize, SwitchState } from './switch_types.web';
+export declare const styles: (width: number, currentState: SwitchState, circleSize: number, borderWidth: number, active: boolean, colors: ColorsType, fontStyles: StyleType, size: SwitchSize) => {
+    switchContainer: React.CSSProperties;
+    switch: React.CSSProperties;
+    switchCircle: React.CSSProperties;
+    text: React.CSSProperties;
+};

package/dist/components/web/Switch/Switch/switch_types.web.d.ts

@@ -0,0 +1,10 @@
+export type SwitchSize = '32' | '24';
+export type SwitchState = 'enable' | 'hover' | 'disable';
+export interface SwitchProps {
+    state: SwitchState;
+    size: SwitchSize;
+    text?: string;
+    isActive?: boolean;
+    containerStyle?: any;
+    onChange: (isActive?: boolean) => void;
+}