@gataca/design-system 1.0.22 → 1.0.24

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

@@ -134,6 +134,7 @@ export { default as MinusIcon } from './native/Icons/icons/minus';
 export { default as MoneyIcon } from './native/Icons/icons/money';
 export { default as MonitorIcon } from './native/Icons/icons/monitor';
 export { default as MoreVerticalIcon } from './native/Icons/icons/moreVertical';
+export { default as MoreHorizontalIcon } from './native/Icons/icons/moreHorizontal';
 export { default as PencilIcon } from './native/Icons/icons/pencil';
 export { default as PlayCircleIcon } from './native/Icons/icons/playCircle';
 export { default as PlusSquaresIcon } from './native/Icons/icons/plusSquares';

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

@@ -128,6 +128,7 @@ export { default as MinusIcon } from './web/Icons/icons/minus';
 export { default as MoneyIcon } from './web/Icons/icons/money';
 export { default as MonitorIcon } from './web/Icons/icons/monitor';
 export { default as MoreVerticalIcon } from './web/Icons/icons/moreVertical';
+export { default as MoreHorizontalIcon } from './web/Icons/icons/moreHorizontal';
 export { default as PencilIcon } from './web/Icons/icons/pencil';
 export { default as PlayCircleIcon } from './web/Icons/icons/playCircle';
 export { default as PlusSquaresIcon } from './web/Icons/icons/plusSquares';

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

@@ -0,0 +1,8 @@
+import { IconSize } from '../icon_types';
+type MoreHorizontalIconProps = {
+    id?: string;
+    size: IconSize;
+    color?: string;
+};
+declare const MoreHorizontalIcon: (props: MoreHorizontalIconProps) => import("react/jsx-runtime").JSX.Element;
+export default MoreHorizontalIcon;

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

@@ -97,6 +97,7 @@ export { default as MinusIcon } from './icons/minus';
 export { default as MoneyIcon } from './icons/money';
 export { default as MonitorIcon } from './icons/monitor';
 export { default as MoreVerticalIcon } from './icons/moreVertical';
+export { default as MoreHorizontalIcon } from './icons/moreHorizontal';
 export { default as PencilIcon } from './icons/pencil';
 export { default as PlayCircleIcon } from './icons/playCircle';
 export { default as PlusSquaresIcon } from './icons/plusSquares';

package/dist/components/native/Lists/ListItem/listItem.config.native.d.ts

@@ -0,0 +1,74 @@
+import { ColorsType } from '../../../../utils/theming';
+import { ListItemColor, ListItemState, ListItemType } from './listItem_types.native';
+export declare const createColorMap: (Colors: ColorsType) => {
+    white: {
+        enable: string;
+        hover: string;
+        active: string;
+    };
+    grey: {
+        enable: string;
+        hover: string;
+        active: string;
+    };
+    none: {
+        enable: string;
+        hover: string;
+        active: string;
+    };
+};
+export declare const getContainerStyles: (colors: ColorsType, color?: ListItemColor, type?: ListItemType, state?: ListItemState) => {
+    borderBottomRightRadius: number;
+    borderBottomLeftRadius: number;
+    borderRadius?: undefined;
+    borderWidth: number;
+    borderColor: string;
+    borderTopWidth?: undefined;
+    borderTopColor?: undefined;
+    backgroundColor: string;
+} | {
+    borderRadius: number;
+    borderBottomRightRadius?: undefined;
+    borderBottomLeftRadius?: undefined;
+    borderWidth: number;
+    borderColor: string;
+    borderTopWidth?: undefined;
+    borderTopColor?: undefined;
+    backgroundColor: string;
+} | {
+    borderBottomRightRadius: number;
+    borderBottomLeftRadius: number;
+    borderRadius?: undefined;
+    borderTopWidth: number;
+    borderTopColor: string;
+    borderWidth?: undefined;
+    borderColor?: undefined;
+    backgroundColor: string;
+} | {
+    borderRadius: number;
+    borderBottomRightRadius?: undefined;
+    borderBottomLeftRadius?: undefined;
+    borderTopWidth: number;
+    borderTopColor: string;
+    borderWidth?: undefined;
+    borderColor?: undefined;
+    backgroundColor: string;
+} | {
+    borderBottomRightRadius: number;
+    borderBottomLeftRadius: number;
+    borderRadius?: undefined;
+    borderWidth: number;
+    borderColor?: undefined;
+    borderTopWidth?: undefined;
+    borderTopColor?: undefined;
+    backgroundColor: string;
+} | {
+    borderRadius: number;
+    borderBottomRightRadius?: undefined;
+    borderBottomLeftRadius?: undefined;
+    borderWidth: number;
+    borderColor?: undefined;
+    borderTopWidth?: undefined;
+    borderTopColor?: undefined;
+    backgroundColor: string;
+};

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

@@ -12,7 +12,6 @@ declare const _default: {
         display: "flex";
         flexDirection: "row";
         justifyContent: "space-between";
-        alignItems: "center";
         gap: number;
         flexWrap: "wrap";
         alignSelf: "stretch";
@@ -24,17 +23,8 @@ declare const _default: {
         display: "flex";
         flexDirection: "row";
         justifyContent: "flex-start";
-        alignItems: "center";
         gap: number;
         flex: number;
     };
-    notificationContainer: {
-        display: "flex";
-        flexDirection: "column";
-        justifyContent: "center";
-        alignItems: "center";
-        cursor: "pointer";
-        marginLeft: "auto";
-    };
 };
 export default _default;

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

@@ -11,26 +11,20 @@ import { IconSize } from '../../Icons/icon_types';
 import { IconGroupProps } from '../../Icons/IconGroup/iconGroup_types.native';
 import { RadioButtonProps } from '../../RadioButton/RadioButton/radioButton_types.native';
 import { SwitchProps } from '../../Switch/Switch/switch_types.native';
-import { ListMetaContainerColor } from '../ListMetaContainer/listMetaContainer_types.native';
-export type ListItemType = 'filled' | 'ghost' | 'outline' | 'divider';
-export type ListItemState = 'enable' | 'active';
-export type ListItemCondition = 'all' | 'title' | 'titleExtraInfo';
-export type ListItemSize = 'medium' | 'small';
-export type ListItemColor = 'black' | 'gray' | 'white' | 'red';
-export type ListItemAlign = 'left' | 'right';
+import { ListMetaContainerProps } from '../ListMetaContainer/listMetaContainer_types.native';
+export type ListItemType = 'filled' | 'outline' | 'divider' | 'select';
+export type ListItemState = 'enable' | 'hover' | 'active';
+export type ListItemColor = 'white' | 'grey' | 'none';
+export type ListItemAlign = 'center' | 'top';
 export type ListItemLeading = 'none' | 'avatar' | 'credential' | 'icon' | 'chip' | 'indicator' | 'buttonIcon' | 'chipGroup';
-export type ListItemTrailing = 'none' | 'checkbox' | 'switch' | 'radioButton' | 'notifications' | 'icon' | 'segmentedButton' | 'value' | 'action' | 'button' | 'chip' | 'iconGroup';
+export type ListItemTrailing = 'none' | 'checkbox' | 'switch' | 'radioButton' | 'icon' | 'segmentedButton' | 'listMetaContainer' | 'action' | 'button' | 'chip' | 'iconGroup';
 export interface ListItemProps {
     id?: string;
+    color?: ListItemColor;
     type?: ListItemType;
     state?: ListItemState;
-    condition?: ListItemCondition;
-    title?: string;
-    content?: string;
-    extraInfo?: string | React.Component | any;
-    mainTextColor?: ListMetaContainerColor;
-    mainTextInfoColor?: ListMetaContainerColor;
-    mainActionItem?: ActionItemsProps;
+    align?: ListItemAlign;
+    listMetaContainer?: ListMetaContainerProps;
     leading: ListItemLeading;
     trailing: ListItemTrailing;
     helperText?: string;
@@ -55,16 +49,12 @@ export interface ListItemProps {
         }>;
         color?: string;
     };
+    typeSelectRadioButton?: RadioButtonProps;
     segmentedButton?: SegmentedButtonProps;
-    trailingValue?: string;
+    trailingListMetaContainer?: ListMetaContainerProps;
     hasHoverStyle?: boolean;
     containerStyle?: any;
     actionItem?: ActionItemsProps;
-    notification?: {
-        id?: string;
-        text: string;
-        onPress: (x?: any) => void;
-    };
     button?: ButtonProps;
     leadingChip?: ChipProps;
     chip?: ChipProps;

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

@@ -1,16 +1,22 @@
 import { ActionItemsProps } from '../../Action/ActionItems/actionItems_types.native';
+import { RoundedButtonProps } from '../../Buttons/RoundedButton/RoundedButton.types.native';
 import { ChipProps } from '../../Chips/Chip/Chip.types.native';
+import { IconSize, IconStyle } from '../../Icons/icon_types';
 import { ParentComponentTooltipProps } from '../../Tooltips/Tooltip/tooltip_types.native';
 export type ListMetaContainerCondition = 'all' | 'title' | 'titleExtraInfo';
+export type ListMetaContainerType = 'main' | 'notification';
+export type ListMetaContainerMainColor = 'white' | 'black';
 export type ListMetaContainerSize = 'medium' | 'small';
-export type ListMetaContainerColor = 'black' | 'gray' | 'red' | 'white';
+export type ListMetaContainerColor = 'black' | 'gray' | 'purple' | 'white';
 export type ListMetaContainerAlign = 'left' | 'right';
 export interface ListMetaContainerProps {
     id?: string;
     condition: ListMetaContainerCondition;
+    type?: ListMetaContainerType;
     size?: ListMetaContainerSize;
-    color?: ListMetaContainerColor;
-    infoColor?: ListMetaContainerColor;
+    mainColor?: ListMetaContainerMainColor;
+    titleColor?: ListMetaContainerColor;
+    contentColor?: ListMetaContainerColor;
     align?: ListMetaContainerAlign;
     tooltip?: ParentComponentTooltipProps;
     chip?: ChipProps;
@@ -18,5 +24,18 @@ export interface ListMetaContainerProps {
     title?: string;
     content?: string;
     extraInfo?: string | React.Component | any;
+    icon16px?: {
+        id?: string;
+        color?: string;
+        style?: IconStyle;
+        Icon?: React.FC<{
+            id?: string;
+            size: IconSize;
+            style?: IconStyle;
+            color: string;
+        }>;
+        onPress: (x?: any) => void;
+    };
+    roundedButton?: RoundedButtonProps;
     containerStyle?: any;
 }

package/dist/components/native/TopAppBar/TopAppBar/topAppBar_types.native.d.ts

@@ -1,17 +1,25 @@
 import { AvatarProps } from '../../Avatars/Avatar/Avatar.types.native';
 import { RoundedButtonState, TrailingIcon } from '../../Buttons/RoundedButton/RoundedButton.types.native';
 import { BellIconStyle, IconSize, IconStyle } from '../../Icons/icon_types';
-export type TopAppBarConfiguration = 'main-screen' | 'sub-screen' | 'sheet-screen';
+export type TopAppBarConfiguration = 'main-screen' | 'sub-screen' | 'sheet-screen' | 'action-screen';
 export type TopAppBarSize = '28' | '16' | '14' | '10' | '8' | '5' | '4';
 export type TopAppBarType = 'quantity' | 'status';
-export type TopAppBarTrailingContainerIcon = 'bell' | 'moreVertical' | 'trash' | 'search';
+export type TopAppBarTrailingContainerIcon = 'bell' | 'moreVertical' | 'trash' | 'search' | 'settings';
 export interface TopAppBarProps {
     id?: string;
     configuration: TopAppBarConfiguration;
     bg?: boolean;
     showBackIcon?: boolean;
     backButtonAction?: (x?: any) => void;
-    text?: string;
+    centerText?: string;
+    leftTextWithAction?: {
+        text: string;
+        action: (x?: any) => void;
+    };
+    rightTextWithAction?: {
+        text: string;
+        action: (x?: any) => void;
+    };
     trailingContainer?: {
         leadingIcon?: {
             icon: TopAppBarTrailingContainerIcon;

package/dist/components/web/Buttons/RoundedButton/RoundedButton.config.web.d.ts

@@ -349,8 +349,7 @@ export declare const createColorMap: (Colors: ColorsType) => {
 };
 export declare const getRoundedButtonGeneralStyles: (colors: ColorsType, color: string, style: string, state: string, size: string) => {
     minHeight: number;
-    paddingVertical: number;
-    paddingHorizontal: number;
+    padding: string;
     backgroundColor: any;
     borderColor: any;
     borderWidth: number;
@@ -358,8 +357,7 @@ export declare const getRoundedButtonGeneralStyles: (colors: ColorsType, color:
     cursor: string;
 };
 export declare const getRoundedButtonPaddings: (size: string, style: string) => {
-    paddingVertical: number;
-    paddingHorizontal: number;
+    padding: string;
 };
 export declare const getRoundedButtonMinHeight: (size: string) => 40 | 32;
 export declare const getRoundedButtonContentStyles: (fontStyles: StyleType, colors: ColorsType, color: string, style: string, state: string, size: string) => {

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

@@ -0,0 +1,9 @@
+import { IconSize } from '../icon_types';
+type MoreHorizontalIconProps = {
+    id?: string;
+    className?: string;
+    size: IconSize;
+    color?: string;
+};
+declare const MoreHorizontalIcon: (props: MoreHorizontalIconProps) => import("react/jsx-runtime").JSX.Element;
+export default MoreHorizontalIcon;

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

@@ -97,6 +97,7 @@ export { default as MinusIcon } from './icons/minus';
 export { default as MoneyIcon } from './icons/money';
 export { default as MonitorIcon } from './icons/monitor';
 export { default as MoreVerticalIcon } from './icons/moreVertical';
+export { default as MoreHorizontalIcon } from './icons/moreHorizontal';
 export { default as PencilIcon } from './icons/pencil';
 export { default as PlayCircleIcon } from './icons/playCircle';
 export { default as PlusSquaresIcon } from './icons/plusSquares';

package/dist/components/web/Lists/ListItem/listItem.config.web.d.ts

@@ -0,0 +1,62 @@
+import { ColorsType } from '../../../../utils/theming';
+import { ListItemColor, ListItemState, ListItemType } from './listItem_types.web';
+export declare const createColorMap: (Colors: ColorsType) => {
+    white: {
+        enable: string;
+        hover: string;
+        active: string;
+    };
+    grey: {
+        enable: string;
+        hover: string;
+        active: string;
+    };
+    none: {
+        enable: string;
+        hover: string;
+        active: string;
+    };
+};
+export declare const getContainerStyles: (colors: ColorsType, color?: ListItemColor, type?: ListItemType, state?: ListItemState) => {
+    borderBottomRightRadius: number;
+    borderBottomLeftRadius: number;
+    borderRadius?: undefined;
+    border: string;
+    borderTop?: undefined;
+    backgroundColor: string;
+} | {
+    borderRadius: number;
+    borderBottomRightRadius?: undefined;
+    borderBottomLeftRadius?: undefined;
+    border: string;
+    borderTop?: undefined;
+    backgroundColor: string;
+} | {
+    borderBottomRightRadius: number;
+    borderBottomLeftRadius: number;
+    borderRadius?: undefined;
+    borderTop: string;
+    border?: undefined;
+    backgroundColor: string;
+} | {
+    borderRadius: number;
+    borderBottomRightRadius?: undefined;
+    borderBottomLeftRadius?: undefined;
+    borderTop: string;
+    border?: undefined;
+    backgroundColor: string;
+} | {
+    borderBottomRightRadius: number;
+    borderBottomLeftRadius: number;
+    borderRadius?: undefined;
+    border: number;
+    borderTop?: undefined;
+    backgroundColor: string;
+} | {
+    borderRadius: number;
+    borderBottomRightRadius?: undefined;
+    borderBottomLeftRadius?: undefined;
+    border: number;
+    borderTop?: undefined;
+    backgroundColor: string;
+};

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

@@ -3,5 +3,4 @@ export declare const styles: () => {
     generalContainer: React.CSSProperties;
     listItemContainer: React.CSSProperties;
     listItemLeftContainer: React.CSSProperties;
-    notificationContainer: React.CSSProperties;
 };

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

@@ -11,35 +11,30 @@ import { IconSize } from '../../Icons/icon_types';
 import { IconGroupProps } from '../../Icons/IconGroup/iconGroup_types.web';
 import { RadioButtonProps } from '../../RadioButton/RadioButton/radioButton_types.web';
 import { SwitchProps } from '../../Switch/Switch/switch_types.web';
-import { ListMetaContainerColor } from '../ListMetaContainer/listMetaContainer_types.web';
-export type ListItemType = 'filled' | 'ghost' | 'outline' | 'divider';
-export type ListItemState = 'enable' | 'active';
-export type ListItemCondition = 'all' | 'title' | 'titleExtraInfo';
-export type ListItemSize = 'medium' | 'small';
-export type ListItemColor = 'black' | 'gray' | 'white' | 'red';
-export type ListItemAlign = 'left' | 'right';
+import { ListMetaContainerProps } from '../ListMetaContainer/listMetaContainer_types.web';
+export type ListItemType = 'filled' | 'outline' | 'divider' | 'select';
+export type ListItemState = 'enable' | 'hover' | 'active';
+export type ListItemColor = 'white' | 'grey' | 'none';
+export type ListItemAlign = 'center' | 'top';
 export type ListItemLeading = 'none' | 'avatar' | 'credential' | 'icon' | 'indicator' | 'chip' | 'buttonIcon' | 'chipGroup';
-export type ListItemTrailing = 'none' | 'checkbox' | 'switch' | 'radioButton' | 'notifications' | 'icon' | 'segmentedButton' | 'value' | 'action' | 'button' | 'chip' | 'iconGroup';
+export type ListItemTrailing = 'none' | 'checkbox' | 'switch' | 'radioButton' | 'icon' | 'segmentedButton' | 'listMetaContainer' | 'action' | 'button' | 'chip' | 'iconGroup';
 export interface ListItemProps {
     id?: string;
     className?: string;
+    color?: ListItemColor;
     type?: ListItemType;
     state?: ListItemState;
-    condition?: ListItemCondition;
-    title?: string;
-    content?: string;
-    extraInfo?: string | React.Component | any;
-    mainTextColor?: ListMetaContainerColor;
-    mainActionItem?: ActionItemsProps;
-    mainTextInfoColor?: ListMetaContainerColor;
+    align?: ListItemAlign;
+    listMetaContainer?: ListMetaContainerProps;
     leading: ListItemLeading;
     trailing: ListItemTrailing;
     helperText?: string;
     avatar?: AvatarProps;
     credential?: MiniCredentialCardProps;
-    containerStyle?: any;
+    leadingButtonIcon?: ButtonIconProps;
     checkbox?: CheckboxProps;
     switchOpt?: SwitchProps;
+    radioButton?: RadioButtonProps;
     iconGroup?: IconGroupProps;
     leadingIcon?: {
         Icon: React.FC<{
@@ -56,20 +51,14 @@ export interface ListItemProps {
         color?: string;
     };
     segmentedButton?: SegmentedButtonProps;
-    trailingValue?: string;
-    actionItem?: ActionItemsProps;
+    trailingListMetaContainer?: ListMetaContainerProps;
     hasHoverStyle?: boolean;
-    radioButton?: RadioButtonProps;
-    notification?: {
-        id?: string;
-        className?: string;
-        text: string;
-        onClick: (x?: any) => void;
-    };
+    containerStyle?: any;
+    actionItem?: ActionItemsProps;
     button?: ButtonProps;
     leadingChip?: ChipProps;
     chip?: ChipProps;
     chipGroup?: ChipGroupProps;
-    leadingButtonIcon?: ButtonIconProps;
+    typeSelectRadioButton?: RadioButtonProps;
     onClick?: (x?: any) => void;
 }

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

@@ -1,17 +1,23 @@
 import { ActionItemsProps } from '../../Action/ActionItems/actionItems_types.web';
+import { RoundedButtonProps } from '../../Buttons/RoundedButton/RoundedButton.types.web';
 import { ChipProps } from '../../Chips/Chip/Chip.types.web';
+import { IconSize, IconStyle } from '../../Icons/icon_types';
 import { ParentComponentTooltipProps } from '../../Tooltips/Tooltip/tooltip_types.web';
 export type ListMetaContainerCondition = 'all' | 'title' | 'titleExtraInfo';
+export type ListMetaContainerType = 'main' | 'notification';
+export type ListMetaContainerMainColor = 'white' | 'black';
 export type ListMetaContainerSize = 'medium' | 'small';
-export type ListMetaContainerColor = 'black' | 'gray' | 'red' | 'white';
+export type ListMetaContainerColor = 'black' | 'gray' | 'purple' | 'white';
 export type ListMetaContainerAlign = 'left' | 'right';
 export interface ListMetaContainerProps {
     id?: string;
     className?: string;
     condition: ListMetaContainerCondition;
+    type?: ListMetaContainerType;
     size?: ListMetaContainerSize;
-    color?: ListMetaContainerColor;
-    infoColor?: ListMetaContainerColor;
+    mainColor?: ListMetaContainerMainColor;
+    titleColor?: ListMetaContainerColor;
+    contentColor?: ListMetaContainerColor;
     align?: ListMetaContainerAlign;
     tooltip?: ParentComponentTooltipProps;
     chip?: ChipProps;
@@ -19,5 +25,20 @@ export interface ListMetaContainerProps {
     title?: string;
     content?: string;
     extraInfo?: string | React.Component | any;
+    icon16px?: {
+        id?: string;
+        className?: string;
+        color?: string;
+        style?: IconStyle;
+        Icon?: React.FC<{
+            id?: string;
+            className?: string;
+            size: IconSize;
+            style?: IconStyle;
+            color: string;
+        }>;
+        onClick: (x?: any) => void;
+    };
+    roundedButton?: RoundedButtonProps;
     containerStyle?: any;
 }