zebpay-ui 0.0.131 → 0.0.132

package/dist/cjs/components/Button/styles.d.ts

@@ -1,7 +1,7 @@
 import { Theme } from "../../globalTypings";
 export declare const general: (width?: number) => import("@emotion/react").SerializedStyles;
 /** web link ≈ mobile ZTextButton */
-export declare const linkButton: (mode: Theme) => import("@emotion/react").SerializedStyles;
+export declare const linkButton: (mode: Theme, preserveTextCase?: boolean) => import("@emotion/react").SerializedStyles;
 /** web primary ≈ mobile ZFilledButton */
 export declare const primaryButton: (mode: Theme) => import("@emotion/react").SerializedStyles;
 /** web secondary ≈ mobile ZOutlineButton */
@@ -19,3 +19,4 @@ export declare const getLoaderColors: (mode: Theme, disabled?: boolean) => {
     fillColor: string;
     trackColor: string;
 };
+export declare const v4button: (mode: Theme) => import("@emotion/react").SerializedStyles;

package/dist/cjs/components/Button/typings.d.ts

@@ -1,5 +1,5 @@
 import { Interpolation, Theme } from "@emotion/react";
-import { Theme as ModeTheme } from "../../globalTypings";
+import { Theme as ModeTheme, ThemeVersion } from "../../globalTypings";
 export type ButtonSize = "small" | "medium" | "large" | "full-width";
 export type ButtonTypeAttribute = "button" | "reset" | "submit";
 export type ButtonType = "link" | "primary" | "secondary" | "special" | "tertiary" | "tab";
@@ -15,4 +15,6 @@ export interface ButtonProps {
     width?: number;
     mode?: ModeTheme;
     children?: React.ReactNode;
+    themeVersion?: ThemeVersion;
+    preserveTextCase?: boolean;
 }

package/dist/cjs/components/Tabs/Tabs.d.ts

@@ -0,0 +1,5 @@
+/** @jsxImportSource @emotion/react */
+import React from "react";
+import { TabProps } from "./typings";
+declare const Tabs: React.FC<TabProps>;
+export default Tabs;

package/dist/cjs/components/Tabs/TabsDropdown/index.d.ts

@@ -1,14 +1,14 @@
 /** @jsxImportSource @emotion/react */
 import React from "react";
 import { Theme } from "../../../globalTypings";
-import { TabItem, TabType } from "../typings";
+import { TabItem, TabsDropdownType } from "../typings";
 interface TabsDropdownProps {
     isSelected: boolean;
     showTitle: React.JSX.Element | string;
     selectedTab: string;
     list: TabItem[];
     onChange: (value: TabItem) => void;
-    type: TabType;
+    type: TabsDropdownType;
     theme: Theme;
 }
 declare const TabsDropdown: React.FC<TabsDropdownProps>;

package/dist/cjs/components/Tabs/V4Slide.d.ts

@@ -0,0 +1,10 @@
+/** @jsxImportSource @emotion/react */
+import React from "react";
+import { Theme } from "../../globalTypings";
+import { V4SlideRect } from "./useV4Slide";
+type V4SlideProps = {
+    theme: Theme;
+    rect: V4SlideRect;
+};
+declare const V4Slide: React.FC<V4SlideProps>;
+export default V4Slide;

package/dist/cjs/components/Tabs/V4Tabs/V4PillTabs.d.ts

@@ -0,0 +1,5 @@
+/** @jsxImportSource @emotion/react */
+import React from "react";
+import { V4TabProps } from "../typings";
+declare const V4Tabs: React.FC<V4TabProps>;
+export default V4Tabs;

package/dist/cjs/components/Tabs/V4Tabs/index.d.ts

@@ -0,0 +1,5 @@
+/** @jsxImportSource @emotion/react */
+import React from "react";
+import { V4TabProps } from "../typings";
+declare const V4Tabs: React.FC<V4TabProps>;
+export default V4Tabs;

package/dist/cjs/components/Tabs/index.d.ts

@@ -1,5 +1,2 @@
-/** @jsxImportSource @emotion/react */
-import React from "react";
-import { TabProps } from "./typings";
-declare const Tabs: React.FC<TabProps>;
-export default Tabs;
+export { default } from "./Tabs";
+export { default as V4Tabs } from "./V4Tabs/index";

package/dist/cjs/components/Tabs/styles.d.ts

@@ -13,3 +13,11 @@ export declare const tertiaryActive: (theme: Theme) => import("@emotion/react").
 export declare const borderRadius: import("@emotion/react").SerializedStyles;
 export declare const secondaryDisabled: (theme: Theme) => import("@emotion/react").SerializedStyles;
 export declare const secondaryCornerAccent: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const v4Nav: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const v4Slide: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const v4TabWrap: import("@emotion/react").SerializedStyles;
+export declare const v4: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const v4Active: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const liveTagWrap: import("@emotion/react").SerializedStyles;
+export declare const liveTagDot: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const liveTagStyle: (theme: Theme) => import("@emotion/react").SerializedStyles;

package/dist/cjs/components/Tabs/typings.d.ts

@@ -2,12 +2,16 @@ import { SerializedStyles } from "@emotion/react";
 import React from "react";
 import { Theme } from "../../globalTypings";
 export type TabType = "primary" | "secondary" | "tertiary";
+/** Dropdown trigger can also render v4 pill styles when used by V4Tabs */
+export type TabsDropdownType = TabType | "v4";
 export interface TabItem {
     title: React.JSX.Element | string;
     tab: string;
     style?: SerializedStyles;
     isCustomActiveState?: boolean;
     hasCornerAccent?: boolean;
+    /** V4Tabs — shows a LIVE tag (via Tags) next to the title */
+    liveTag?: boolean | string;
 }
 export interface LoadingParam {
     width: number;
@@ -28,3 +32,17 @@ export interface TabProps {
     hideTick?: boolean;
     selectedTabStyle?: SerializedStyles;
 }
+export interface V4TabProps {
+    selectedTab: string;
+    tabsList: TabItem[];
+    tabsCount?: number;
+    dropdownPlaceHolder?: React.JSX.Element | string;
+    onChange: (value: string) => void;
+    type?: TabType;
+    style?: SerializedStyles;
+    disabled?: boolean;
+    theme?: Theme;
+    loading?: boolean;
+    loadingParam?: LoadingParam;
+    selectedTabStyle?: SerializedStyles;
+}

package/dist/cjs/components/Tabs/useV4Slide.d.ts

@@ -0,0 +1,23 @@
+import { Theme } from "../../globalTypings";
+import { TabItem } from "./typings";
+export type V4SlideRect = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+type UseV4SlideParams = {
+    enabled: boolean;
+    selectedTab: string;
+    theme: Theme;
+    loading: boolean;
+    tabsCount?: number;
+    tabs: TabItem[];
+};
+/** Measures the selected v4 tab and drives the sliding active pill. */
+export declare function useV4Slide({ enabled, selectedTab, theme, loading, tabsCount, tabs, }: UseV4SlideParams): {
+    navRef: import("react").RefObject<HTMLDivElement | null>;
+    setTabItemRef: (tabKey: string, el: HTMLElement | null) => void;
+    v4Slide: V4SlideRect | null;
+};
+export {};

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

@@ -21,7 +21,7 @@ import SearchInput from "./SearchInput";
 import Select from "./Select";
 import Shimmer from "./Shimmer";
 import SidePanel from "./SidePanel";
-import Tabs from "./Tabs";
+import Tabs, { V4Tabs } from "./Tabs";
 import Tags from "./Tags";
 import { Toast, generateToast } from "./Toast";
 import Tooltip from "./Tooltip";
@@ -32,4 +32,4 @@ import Pagination from "./Pagination";
 import MobileBottomDrawer from "./MobileBottomDrawer";
 import MobileCalendarPicker from "./MobileCalenderPicker";
 import Notes from "./Notes";
-export { Accordion, AccordionV2, Button, Card, Checkbox, CircularLoader, CalendarPicker, Divider, Icon, IconButton, IconBox, Input, InputDropDown, PinInput, Popper, QuantityInput, Radio, RadioGroup, RewardOMeter, Select, Shimmer, SearchInput, SidePanel, Tags, Tabs, Toast, Tooltip, Switch, Avatar, AvatarGroup, Pagination, MobileBottomDrawer, MobileCalendarPicker, Notes, generateToast, };
+export { Accordion, AccordionV2, Button, Card, Checkbox, CircularLoader, CalendarPicker, Divider, Icon, IconButton, IconBox, Input, InputDropDown, PinInput, Popper, QuantityInput, Radio, RadioGroup, RewardOMeter, Select, Shimmer, SearchInput, SidePanel, Tags, Tabs, V4Tabs, Toast, Tooltip, Switch, Avatar, AvatarGroup, Pagination, MobileBottomDrawer, MobileCalendarPicker, Notes, generateToast, };

package/dist/cjs/globalTypings.d.ts

@@ -1,3 +1,3 @@
 export type Theme = "light" | "dark" | "extraDark";
-/** Color scheme generation — v2 (mobile znew) or v3 */
-export type ThemeVersion = "v2" | "v3";
+/** Color scheme generation — v2, v3, v4 */
+export type ThemeVersion = "v2" | "v3" | "v4";