@gataca/design-system 0.2.20 → 0.2.22

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

@@ -11,6 +11,8 @@ export { default as BrandButton } from './native/Buttons/BrandButton/index.nativ
 export { default as SegmentedButton } from './native/Buttons/SegmentedButton/index.native';
 export { default as Indicator } from './native/Indicator/Indicator/index.native';
 export { default as Avatar } from './native/Avatars/Avatar/index.native';
+export { default as AvatarGroup } from './native/Avatars/AvatarGroup/index.native';
+export { default as TopAppBar } from './native/TopAppBar/TopAppBar/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

@@ -10,6 +10,7 @@ export { default as BrandButton } from './web/Buttons/BrandButton/index.web';
 export { default as SegmentedButton } from './web/Buttons/SegmentedButton/index.web';
 export { default as Indicator } from './web/Indicator/Indicator/index.web';
 export { default as Avatar } from './web/Avatars/Avatar/index.web';
+export { default as AvatarGroup } from './web/Avatars/AvatarGroup/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.native.d.ts

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

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

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

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

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

package/dist/components/native/Avatars/AvatarGroup/styles.native.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {
+    avatarGroupContainer: {
+        display: "flex";
+        gap: number;
+        alignItems: "center";
+    };
+};
+export default _default;

package/dist/components/native/Buttons/ButtonIcon/ButtonIcon.config.native.d.ts

@@ -212,7 +212,8 @@ export declare const createColorMap: (Colors: ColorsType) => {
 export declare const getButtonIconGeneralStyles: (colors: ColorsType, color: string, style: string, state: string, icon: any, size: string, showStroke?: boolean) => {
     height: number;
     width: number;
-    border: string;
+    borderWidth: number;
+    borderColor: any;
     paddingVertical: number;
     paddingHorizontal: number;
     backgroundColor: any;

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

@@ -3,6 +3,7 @@ export type IconExtendedSize = '6' | '8' | '12' | '16' | '24' | '32';
 export type GatacaLogoIconSize = '12' | '16' | '24' | '32' | '64' | '71';
 export type LoaderPrototipeIconSize = '24' | '40';
 export type IconStyle = 'outline' | 'filled';
+export type BellIconStyle = 'outline' | 'filled' | 'active';
 export declare const iconStrokeWidthBySize: {
     '6': string;
     '8': string;

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

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

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

@@ -8,6 +8,7 @@ export { default as ShieldErrorIcon } from './icons/shieldError';
 export { default as SlashIcon } from './icons/slash';
 export { default as WarningIcon } from './icons/warning';
 export { default as HomeIcon } from './icons/home';
+export { default as BellIcon } from './icons/bell';
 export { default as ChevronLeftIcon } from './icons/chevronLeft';
 export { default as CheckCircleIcon } from './icons/checkCircle';
 export { default as gatacaLogoIcon } from './icons/gatacaLogo';

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

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

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

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

package/dist/components/native/TopAppBar/TopAppBar/topAppBar.config.d.ts

@@ -0,0 +1,31 @@
+import { ColorsType } from '../../../../styles';
+import { BellIconStyle, IconSize } from '../../Icons/icon_types';
+export declare const topAppBarIconMap: {
+    [key: string]: React.FC<{
+        size: IconSize;
+        color: string;
+        style?: BellIconStyle;
+    }>;
+};
+export declare const topAppBarShadows: (colors: ColorsType) => {
+    elevation: number;
+    shadowOffset: {
+        width: number;
+        height: number;
+    };
+    xAxis: number;
+    yAxis: number;
+    shadowOpacity: number;
+    shadowColor: string;
+}[];
+export declare const topAppBarEmptyShadows: () => {
+    elevation: number;
+    shadowOffset: {
+        width: number;
+        height: number;
+    };
+    xAxis: number;
+    yAxis: number;
+    shadowOpacity: number;
+    shadowColor: string;
+}[];

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

@@ -0,0 +1,32 @@
+declare const _default: {
+    multiShadowWrapper: {
+        width: "100%";
+    };
+    topAppBarContainer: {
+        display: "flex";
+        justifyContent: "space-between";
+        flexDirection: "row";
+        alignItems: "center";
+        gap: number;
+        alignSelf: "stretch";
+        width: "100%";
+        flexShrink: number;
+    };
+    mainContainer: {
+        display: "flex";
+        gap: number;
+        alignItems: "center";
+        justifyContent: "flex-start";
+        flexDirection: "row";
+    };
+    trailingContainter: {
+        alignSelf: "flex-end";
+        display: "flex";
+        flexDirection: "row";
+        justifyContent: "flex-end";
+        alignItems: "center";
+        minHeight: number;
+        gap: number;
+    };
+};
+export default _default;

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

@@ -0,0 +1,70 @@
+import { StyleType } from '../../../../styles';
+import { ColorsType } from '../../../../styles/Colors';
+import { AvatarColor, AvatarType } from '../../Avatars/Avatar/Avatar.types.native';
+import { ButtonIconColor, ButtonIconState } from '../../Buttons/ButtonIcon/ButtonIcon.types.native';
+import { BellIconStyle, IconSize, IconStyle } from '../../Icons/icon_types';
+import { IndicatorColor, IndicatorType } from '../../Indicator/Indicator/indicator_types.native';
+export type TopAppBarConfiguration = 'main-screen' | 'sub-screen' | 'sheet-screen';
+export type TopAppBarSize = '28' | '16' | '14' | '10' | '8' | '5' | '4';
+export type TopAppBarType = 'quantity' | 'status';
+export type TopAppBarTrailingContainerIcon = 'bell' | 'moreVertical' | 'trash' | 'search';
+export interface TopAppBarProps {
+    configuration: TopAppBarConfiguration;
+    bg?: boolean;
+    showBackIcon?: boolean;
+    backButtonAction?: (x?: any) => void;
+    text?: string;
+    trailingContainer?: {
+        leadingIcon?: {
+            icon: TopAppBarTrailingContainerIcon;
+            leadingIconAction?: (x?: any) => void;
+            style?: IconStyle | BellIconStyle;
+        };
+        trailingIcon?: {
+            icon: TopAppBarTrailingContainerIcon;
+            trailingIconAction?: (x?: any) => void;
+            style?: IconStyle | BellIconStyle;
+        };
+    };
+    avatar?: {
+        type: AvatarType;
+        image?: string;
+        text?: string;
+        color?: AvatarColor;
+        showIndicator?: boolean;
+        indicator?: {
+            color?: IndicatorColor;
+            type?: IndicatorType;
+            quantity?: number;
+        };
+        showButtonIcon?: boolean;
+        buttonIcon?: {
+            color?: ButtonIconColor;
+            state?: ButtonIconState;
+            Icon?: React.FC<{
+                size: IconSize;
+                style: IconStyle;
+                color: string;
+            }>;
+            onPress: (x?: any) => void;
+        };
+    };
+    headingContainerText?: string;
+    containerStyle?: any;
+}
+export declare const TopAppBarBorderWidthySize: Record<string, number>;
+export declare const createBgColorMap: (Colors: ColorsType) => {
+    purple: string;
+    red: string;
+    green: string;
+    blue: string;
+};
+export declare const fontMap: (fontStyles: StyleType) => {
+    '28': import("../../../../styles").FontsStyle;
+    '16': import("../../../../styles").FontsStyle;
+    '14': import("../../../../styles").FontsStyle;
+    '10': import("../../../../styles").FontsStyle;
+    '8': import("../../../../styles").FontsStyle;
+    '5': import("../../../../styles").FontsStyle;
+    '4': import("../../../../styles").FontsStyle;
+};

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

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

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

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

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

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

package/dist/components/web/Avatars/AvatarGroup/styles.web.d.ts

@@ -0,0 +1,3 @@
+export declare const styles: () => {
+    avatarGroupContainer: React.CSSProperties;
+};

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

@@ -3,6 +3,7 @@ export type IconExtendedSize = '6' | '8' | '12' | '16' | '24' | '32';
 export type GatacaLogoIconSize = '12' | '16' | '24' | '32' | '64' | '71';
 export type LoaderPrototipeIconSize = '24' | '40';
 export type IconStyle = 'outline' | 'filled';
+export type BellIconStyle = 'outline' | 'filled' | 'active';
 export declare const iconStrokeWidthBySize: {
     '6': string;
     '8': string;

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

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

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

@@ -7,6 +7,7 @@ export { default as ShieldCheckIcon } from './icons/shieldCheck';
 export { default as ShieldErrorIcon } from './icons/shieldError';
 export { default as SlashIcon } from './icons/slash';
 export { default as WarningIcon } from './icons/warning';
+export { default as BellIcon } from './icons/bell';
 export { default as HomeIcon } from './icons/home';
 export { default as ChevronLeftIcon } from './icons/chevronLeft';
 export { default as CheckCircleIcon } from './icons/checkCircle';