@zealicsolutions/web-ui 0.2.65 → 0.2.66

package/dist/esm/src/helpers/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const sizings: (string | number)[];
+export declare const fonts: string[];

package/dist/esm/src/index.d.ts

@@ -6,3 +6,4 @@ export * from './hooks';
 export * from './theme';
 export * from './fieldsConfiguration';
 export * from './contexts';
+export * from 'helpers/constants';

package/dist/esm/src/molecules/Tab/Tab.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
+import { FontSizesTypes, SizesTypes, ThemeColors } from 'theme';
+import { StylesType } from 'typescript';
 import { MenuItem } from '..';
 export declare type TabOption<T = string> = {
     menuText: string;
@@ -19,8 +21,15 @@ export declare type TabProps<T = string, K = string> = {
     onOptionClick?: (optionKey: K) => void;
     tabTheme?: TabTheme;
     divider?: boolean;
+    tabFont?: FontSizesTypes;
+    textSize?: SizesTypes | number;
+    tabPadding?: SizesTypes | number;
+    textColor?: ThemeColors | string;
+    selectedTabTextColor?: ThemeColors | string;
+    selectedTabIndicatorColor?: ThemeColors | string;
+    styles?: StylesType;
 };
-declare const ZealTab: <T extends string, K extends string>({ options, onClick, text, tabKey, vertical, onOptionClick, tabTheme, ...tabProps }: TabProps<T, K>, ref: React.ForwardedRef<TabElement>) => JSX.Element;
+declare const ZealTab: <T extends string, K extends string>({ options, onClick, text, tabKey, vertical, onOptionClick, tabTheme, tabFont, tabPadding, selectedTabIndicatorColor, textSize, textColor, ...tabProps }: TabProps<T, K>, ref: React.ForwardedRef<TabElement>) => JSX.Element;
 export declare const Tab: <T, K>(props: TabProps<T, K> & {
     ref?: React.ForwardedRef<TabElement> | undefined;
 }) => ReturnType<typeof ZealTab>;

package/dist/esm/src/molecules/Tab/styles.d.ts

@@ -1,10 +1,7 @@
-import { TabProps, TabTheme } from './Tab';
-declare type TabContainerProps = Pick<TabProps, 'isActive' | 'disabled' | 'tabTheme'>;
-export declare const TabText: import("styled-components").StyledComponent<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").BoxTypeMap<{}, "div">>, import("styled-components").DefaultTheme, import("atoms").TextWrapperProps & {
-    variant: string;
-} & {
-    tabTheme?: TabTheme | undefined;
-}, "variant">;
+import { TabProps } from './Tab';
+declare type TabContainerProps = Pick<TabProps, 'isActive' | 'disabled' | 'tabTheme' | 'selectedTabTextColor' | 'styles' | 'textColor'>;
+declare type TabTextProps = Pick<TabProps, 'tabTheme' | 'textSize' | 'textColor' | 'tabPadding'>;
+export declare const TabText: import("styled-components").StyledComponent<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").BoxTypeMap<{}, "div">>, import("styled-components").DefaultTheme, import("atoms").TextWrapperProps & TabTextProps, never>;
 export declare const TabContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TabContainerProps, never>;
 export declare const CaretIconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TabContainerProps, never>;
 export {};

package/dist/esm/src/molecules/Tab/utils.d.ts

@@ -1,2 +1,4 @@
 import { TabTheme } from 'molecules/Tab/Tab';
-export declare const getColorForCaretDownIcon: (tabTheme?: TabTheme, disabled?: boolean) => string;
+import { ThemeColors } from 'theme';
+export declare const getColorForCaretDownIcon: (color?: ThemeColors | string, tabTheme?: TabTheme, disabled?: boolean) => string;
+export declare const getSelectionIndicatorColor: (selectedTabIndicatorColor?: ThemeColors | string, isActiveTab?: boolean, tabTheme?: TabTheme) => string;

package/dist/esm/src/molecules/TabGroup/TabGroup.d.ts

@@ -1,15 +1,24 @@
 /// <reference types="react" />
 import { CSSProperties } from 'styled-components';
-import { SizesTypes } from 'theme/types';
+import { FontSizesTypes, SizesTypes, ThemeColors } from 'theme/types';
+import { StylesType } from 'typescript';
 import { TabProps, TabTheme } from '../Tab/Tab';
 export declare type TabGroupProps<T = string, K = string> = {
     tabs: Pick<TabProps<T, K>, 'text' | 'tabKey' | 'disabled' | 'options' | 'divider'>[];
     activeTabKey: T;
-    spacing?: SizesTypes;
     onTabChange?: (tabKey: T) => void;
     onOptionClick?: (optionKey: K) => void;
-    style?: CSSProperties;
+    styles?: StylesType;
     vertical?: boolean;
     tabTheme?: TabTheme;
+    tabFont?: FontSizesTypes;
+    textSize?: SizesTypes | number;
+    tabPadding?: SizesTypes | number;
+    tabSpacing?: SizesTypes;
+    textColor?: ThemeColors | string;
+    selectedTabTextColor?: ThemeColors | string;
+    selectedTabIndicatorColor?: ThemeColors | string;
+    containerStyle?: CSSProperties;
+    containerProps?: Record<string, unknown>;
 };
-export declare const TabGroup: <T extends string, K extends string>({ tabs, spacing, vertical, activeTabKey, onTabChange, style, tabTheme, }: TabGroupProps<T, K>) => JSX.Element;
+export declare const TabGroup: <T extends string, K extends string>({ tabs, vertical, activeTabKey, onTabChange, tabTheme, containerStyle, containerProps, tabSpacing, ...props }: TabGroupProps<T, K>) => JSX.Element;

package/dist/esm/src/molecules/TabGroup/TabGroup.stories.d.ts

@@ -3,7 +3,7 @@ import type { ComponentStory } from '@storybook/react';
 import { TabGroup as TabGroupComponent } from './TabGroup';
 declare const _default: {
     title: string;
-    component: <T extends string, K extends string>({ tabs, spacing, vertical, activeTabKey, onTabChange, style, tabTheme, }: import("./TabGroup").TabGroupProps<T, K>) => JSX.Element;
+    component: <T extends string, K extends string>({ tabs, vertical, activeTabKey, onTabChange, tabTheme, containerStyle, containerProps, tabSpacing, ...props }: import("./TabGroup").TabGroupProps<T, K>) => JSX.Element;
 };
 export default _default;
 export declare const TabGroup: ComponentStory<typeof TabGroupComponent>;

package/dist/esm/src/molecules/TabGroup/styles.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TabTheme } from 'molecules/Tab/Tab';
-import { SizesTypes } from 'theme/types';
+import { SizesTypes, ThemeColors } from 'theme/types';
 export declare const TabsWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     spacing: SizesTypes;
     vertical: boolean;
@@ -12,6 +12,7 @@ declare type TabSliderProps = {
     isActiveTab?: boolean;
     vertical?: boolean;
     tabTheme?: TabTheme;
+    selectedTabIndicatorColor?: ThemeColors | string;
 };
 export declare const TabSlider: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, TabSliderProps, never>;
 export declare const TabWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
@@ -25,5 +26,6 @@ export declare const TabWrapper: import("styled-components").StyledComponent<"di
 } & {
     disabled?: boolean | undefined;
     tabTheme?: TabTheme | undefined;
+    selectedTabTextColor?: string | undefined;
 }, "withoutOpacityEffect">;
 export {};

package/dist/esm/src/organisms/ProfileInformation/ProfileInformation.d.ts

@@ -1,7 +1,7 @@
+import { AvatarProps } from 'atoms';
+import { TabProps } from 'molecules';
 import { ReactNode } from 'react';
 import type { Callback } from 'typescript';
-import { AvatarProps } from '../../atoms';
-import { TabProps } from '../../molecules/Tab/Tab';
 export declare type ProfileInformationProps<TabKeys extends string> = {
     backgroundImageUrl: string;
     avatarProps: AvatarProps;

package/dist/index.d.ts

@@ -15,12 +15,12 @@ import { FeedContentTemplateTypes as FeedContentTemplateTypes$1, FeedContentProp
 import { TooltipProps as TooltipProps$1 } from 'rc-tooltip/lib/Tooltip';
 import { WithGoogleMapProps } from 'react-google-maps/lib/withGoogleMap';
 import { WithScriptjsProps } from 'react-google-maps/lib/withScriptjs';
-import { IconNames as IconNames$2, TouchableOpacityProps as TouchableOpacityProps$1, InputProps as InputProps$1, ImageProps as ImageProps$1, ButtonProps as ButtonProps$1, TextButtonProps as TextButtonProps$1, RadioButtonsProps as RadioButtonsProps$1, HorizontalButtonsProps as HorizontalButtonsProps$1, IconProps as IconProps$1 } from 'atoms';
+import { IconNames as IconNames$2, TouchableOpacityProps as TouchableOpacityProps$1, InputProps as InputProps$1, ImageProps as ImageProps$1, ButtonProps as ButtonProps$1, TextButtonProps as TextButtonProps$1, RadioButtonsProps as RadioButtonsProps$1, HorizontalButtonsProps as HorizontalButtonsProps$1, IconProps as IconProps$1, AvatarProps as AvatarProps$1 } from 'atoms';
 import { Control, ControllerProps } from 'react-hook-form/dist/types';
 import { SelectOption as SelectOption$1 } from 'atoms/Select/types';
 import { ControllerProps as ControllerProps$1, DeepPartial, FieldValues, FormState, Control as Control$1 } from 'react-hook-form';
 import { ProcessTrackerStatus as ProcessTrackerStatus$1, FilteredFeedContentType as FilteredFeedContentType$1, ConsentProps as ConsentProps$1, HeroSliderProps as HeroSliderProps$1, ProcessTrackerProps as ProcessTrackerProps$1 } from 'organisms';
-import { FieldSectionProps as FieldSectionProps$1, MenuItemsProps as MenuItemsProps$1, InputFieldProps as InputFieldProps$1, HeroImageProps as HeroImageProps$1, ColumnsProps as ColumnsProps$1, EmphasizedTextProps as EmphasizedTextProps$1, TabGroupProps as TabGroupProps$1, AvatarDropdownProps as AvatarDropdownProps$1, FeedContentHeaderProps as FeedContentHeaderProps$1, AlertProps as AlertProps$1, BottomNaVBarItemProps as BottomNaVBarItemProps$1 } from 'molecules';
+import { FieldSectionProps as FieldSectionProps$1, MenuItemsProps as MenuItemsProps$1, InputFieldProps as InputFieldProps$1, TabProps as TabProps$1, HeroImageProps as HeroImageProps$1, ColumnsProps as ColumnsProps$1, EmphasizedTextProps as EmphasizedTextProps$1, TabGroupProps as TabGroupProps$1, AvatarDropdownProps as AvatarDropdownProps$1, FeedContentHeaderProps as FeedContentHeaderProps$1, AlertProps as AlertProps$1, BottomNaVBarItemProps as BottomNaVBarItemProps$1 } from 'molecules';
 import { SetPasswordFields, MaxRuleValidation, MinRuleValidation } from 'organisms/SetPasswordForm/types';
 import { UIFields as UIFields$2 } from 'fieldsConfiguration';
 import { ConsentProps as ConsentProps$2 } from 'organisms/Consent/Consent';
@@ -36,6 +36,7 @@ import { AlertProps as AlertProps$2 } from 'molecules/Alert/Alert';
 import { LoginFields as LoginFields$1 } from 'organisms/LoginForm/types';
 import { AnnotationsList as AnnotationsList$1 } from 'contexts/MlrRichTextViewerContext/types';
 import * as contexts_MlrRichTextViewerContext_MlrRichTextViewerContext from 'contexts/MlrRichTextViewerContext/MlrRichTextViewerContext';
+export * from 'helpers/constants';
 
 declare type ButtonVariant = 'primary' | 'secondary' | 'text';
 declare type BaseButtonProps = PropsWithChildren<{
@@ -548,8 +549,15 @@ declare type TabProps<T = string, K = string> = {
     onOptionClick?: (optionKey: K) => void;
     tabTheme?: TabTheme;
     divider?: boolean;
+    tabFont?: FontSizesTypes$2;
+    textSize?: SizesTypes$1 | number;
+    tabPadding?: SizesTypes$1 | number;
+    textColor?: ThemeColors$2 | string;
+    selectedTabTextColor?: ThemeColors$2 | string;
+    selectedTabIndicatorColor?: ThemeColors$2 | string;
+    styles?: StylesType;
 };
-declare const ZealTab: <T extends string, K extends string>({ options, onClick, text, tabKey, vertical, onOptionClick, tabTheme, ...tabProps }: TabProps<T, K>, ref: React__default.ForwardedRef<TabElement>) => JSX.Element;
+declare const ZealTab: <T extends string, K extends string>({ options, onClick, text, tabKey, vertical, onOptionClick, tabTheme, tabFont, tabPadding, selectedTabIndicatorColor, textSize, textColor, ...tabProps }: TabProps<T, K>, ref: React__default.ForwardedRef<TabElement>) => JSX.Element;
 declare const Tab: <T, K>(props: TabProps<T, K> & {
     ref?: React__default.ForwardedRef<TabElement> | undefined;
 }) => ReturnType<typeof ZealTab>;
@@ -557,14 +565,22 @@ declare const Tab: <T, K>(props: TabProps<T, K> & {
 declare type TabGroupProps<T = string, K = string> = {
     tabs: Pick<TabProps<T, K>, 'text' | 'tabKey' | 'disabled' | 'options' | 'divider'>[];
     activeTabKey: T;
-    spacing?: SizesTypes$2;
     onTabChange?: (tabKey: T) => void;
     onOptionClick?: (optionKey: K) => void;
-    style?: CSSProperties;
+    styles?: StylesType;
     vertical?: boolean;
     tabTheme?: TabTheme;
+    tabFont?: FontSizesTypes$1;
+    textSize?: SizesTypes$2 | number;
+    tabPadding?: SizesTypes$2 | number;
+    tabSpacing?: SizesTypes$2;
+    textColor?: ThemeColors$1 | string;
+    selectedTabTextColor?: ThemeColors$1 | string;
+    selectedTabIndicatorColor?: ThemeColors$1 | string;
+    containerStyle?: CSSProperties;
+    containerProps?: Record<string, unknown>;
 };
-declare const TabGroup: <T extends string, K extends string>({ tabs, spacing, vertical, activeTabKey, onTabChange, style, tabTheme, }: TabGroupProps<T, K>) => JSX.Element;
+declare const TabGroup: <T extends string, K extends string>({ tabs, vertical, activeTabKey, onTabChange, tabTheme, containerStyle, containerProps, tabSpacing, ...props }: TabGroupProps<T, K>) => JSX.Element;
 
 declare type FieldSectionProps<T extends object> = {
     label: string;
@@ -796,8 +812,8 @@ declare type FooterLink = {
 
 declare type ProfileInformationProps<TabKeys extends string> = {
     backgroundImageUrl: string;
-    avatarProps: AvatarProps;
-    tabs: TabProps<string, TabKeys>[];
+    avatarProps: AvatarProps$1;
+    tabs: TabProps$1<string, TabKeys>[];
     tabContents: Record<TabKeys, () => ReactNode>;
     initialTabKey: TabKeys;
     title: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zealicsolutions/web-ui",
-  "version": "0.2.65",
+  "version": "0.2.66",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/Zealic_Solutions/zeal-ui-web.git"