@zealicsolutions/web-ui 0.2.61 → 0.2.62

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

@@ -7,6 +7,7 @@ export declare type TabOption<T = string> = {
     isSelected?: boolean;
 };
 declare type TabElement = HTMLDivElement | null;
+export declare type TabTheme = 'light' | 'dark';
 export declare type TabProps<T = string, K = string> = {
     tabKey: T;
     text: string;
@@ -16,8 +17,10 @@ export declare type TabProps<T = string, K = string> = {
     onClick?: (key: T) => void;
     options?: MenuItem<K>[];
     onOptionClick?: (optionKey: K) => void;
+    tabTheme?: TabTheme;
+    divider?: boolean;
 };
-declare const ZealTab: <T extends string, K extends string>({ options, onClick, text, tabKey, vertical, onOptionClick, ...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, ...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,7 +1,9 @@
-import { TabProps } from './Tab';
-declare type TabContainerProps = Pick<TabProps, 'isActive' | 'disabled'>;
-export declare const TabText: import("styled-components").StyledComponent<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").BoxTypeMap<{}, "div">>, import("styled-components").DefaultTheme, import("../../atoms/TextWrapper/TextWrapper").TextWrapperProps & {
+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">;
 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>;

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

@@ -0,0 +1,2 @@
+import { TabTheme } from 'molecules/Tab/Tab';
+export declare const getColorForCaretDownIcon: (tabTheme?: TabTheme, disabled?: boolean) => string;

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

@@ -1,14 +1,15 @@
 /// <reference types="react" />
 import { CSSProperties } from 'styled-components';
 import { SizesTypes } from 'theme/types';
-import { TabProps } from '../Tab/Tab';
+import { TabProps, TabTheme } from 'molecules/Tab/Tab';
 export declare type TabGroupProps<T = string, K = string> = {
-    tabs: Pick<TabProps<T, K>, 'text' | 'tabKey' | 'disabled' | 'options'>[];
+    tabs: Pick<TabProps<T, K>, 'text' | 'tabKey' | 'disabled' | 'options' | 'divider'>[];
     activeTabKey: T;
     spacing?: SizesTypes;
     onTabChange?: (tabKey: T) => void;
     onOptionClick?: (optionKey: K) => void;
     style?: CSSProperties;
     vertical?: boolean;
+    tabTheme?: TabTheme;
 };
-export declare const TabGroup: <T extends string, K extends string>({ tabs, spacing, vertical, activeTabKey, onTabChange, style, }: TabGroupProps<T, K>) => JSX.Element;
+export declare const TabGroup: <T extends string, K extends string>({ tabs, spacing, vertical, activeTabKey, onTabChange, style, tabTheme, }: 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, }: import("./TabGroup").TabGroupProps<T, K>) => JSX.Element;
+    component: <T extends string, K extends string>({ tabs, spacing, vertical, activeTabKey, onTabChange, style, tabTheme, }: 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,3 +1,5 @@
+/// <reference types="react" />
+import { TabTheme } from 'molecules/Tab/Tab';
 import { SizesTypes } from 'theme/types';
 export declare const TabsWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     spacing: SizesTypes;
@@ -7,6 +9,21 @@ export declare const TabGroupContainer: import("styled-components").StyledCompon
 declare type TabSliderProps = {
     width: number;
     left: number;
+    isActiveTab?: boolean;
+    vertical?: boolean;
+    tabTheme?: TabTheme;
 };
 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, {
+    activeOpacity?: number | undefined;
+    withoutOpacityEffect?: boolean | undefined;
+    disabled?: boolean | undefined;
+} & {
+    children?: import("react").ReactNode;
+} & {
+    withoutOpacityEffect: boolean;
+} & {
+    disabled?: boolean | undefined;
+    tabTheme?: TabTheme | undefined;
+}, "withoutOpacityEffect">;
 export {};

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 export declare const useTabAnimation: (activeTab: string) => {
-    setActiveTabIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
-    tabUnderlineLeft: number;
-    tabUnderlineWidth: number;
+    tabsUnderlineLeft: number[];
+    tabsUnderlineWidth: number[];
     tabsRef: import("react").MutableRefObject<(HTMLDivElement | null)[]>;
 };

package/dist/index.d.ts

@@ -19,6 +19,7 @@ import { IconNames as IconNames$2, TouchableOpacityProps as TouchableOpacityProp
 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 { TabProps as TabProps$1, TabTheme as TabTheme$1 } from 'molecules/Tab/Tab';
 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 { SetPasswordFields, MaxRuleValidation, MinRuleValidation } from 'organisms/SetPasswordForm/types';
@@ -562,27 +563,17 @@ declare type AvatarDropdownProps<T> = {
 };
 declare const AvatarDropdown: <T extends string | number>({ avatarProps, menuConfig, }: AvatarDropdownProps<T>) => JSX.Element;
 
-declare type TabProps<T = string, K = string> = {
-    tabKey: T;
-    text: string;
-    disabled?: boolean;
-    vertical?: boolean;
-    isActive?: boolean;
-    onClick?: (key: T) => void;
-    options?: MenuItem<K>[];
-    onOptionClick?: (optionKey: K) => void;
-};
-
 declare type TabGroupProps<T = string, K = string> = {
-    tabs: Pick<TabProps<T, K>, 'text' | 'tabKey' | 'disabled' | 'options'>[];
+    tabs: Pick<TabProps$1<T, K>, 'text' | 'tabKey' | 'disabled' | 'options' | 'divider'>[];
     activeTabKey: T;
     spacing?: SizesTypes$2;
     onTabChange?: (tabKey: T) => void;
     onOptionClick?: (optionKey: K) => void;
     style?: CSSProperties;
     vertical?: boolean;
+    tabTheme?: TabTheme$1;
 };
-declare const TabGroup: <T extends string, K extends string>({ tabs, spacing, vertical, activeTabKey, onTabChange, style, }: TabGroupProps<T, K>) => JSX.Element;
+declare const TabGroup: <T extends string, K extends string>({ tabs, spacing, vertical, activeTabKey, onTabChange, style, tabTheme, }: TabGroupProps<T, K>) => JSX.Element;
 
 declare type FieldSectionProps<T extends object> = {
     label: string;
@@ -812,6 +803,20 @@ declare type FooterLink = {
     location: string;
 };
 
+declare type TabTheme = 'light' | 'dark';
+declare type TabProps<T = string, K = string> = {
+    tabKey: T;
+    text: string;
+    disabled?: boolean;
+    vertical?: boolean;
+    isActive?: boolean;
+    onClick?: (key: T) => void;
+    options?: MenuItem<K>[];
+    onOptionClick?: (optionKey: K) => void;
+    tabTheme?: TabTheme;
+    divider?: boolean;
+};
+
 declare type ProfileInformationProps<TabKeys extends string> = {
     backgroundImageUrl: string;
     avatarProps: AvatarProps;

package/package.json

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