zebpay-ui 0.0.119 → 0.0.121

package/dist/esm/styles/colors.d.ts

@@ -88,6 +88,8 @@ declare const colors: {
     Zeb_Effects_Top_Shadow_Light: string;
     Zeb_BG_Mask: string;
     Zeb_Effects_Shadow_Light: string;
+    /** Figma V4 - Bottom area (extraDark bottom sheet) */
+    Zeb_Effects_Shadow_Extra_Dark_Bottom: string;
     Zeb_Effects_Shadow_Input: string;
     Zeb_Effects_Shadow_List: string;
     Zeb_Secondary_Subtext: string;

package/dist/esm/theme/ZThemeProvider.d.ts

@@ -0,0 +1,16 @@
+/** @jsxImportSource @emotion/react */
+import React from "react";
+import type { Theme } from "../globalTypings";
+import "./theme.css";
+import { ZColorScheme } from "./types";
+export interface ThemeContextValue {
+    theme: Theme;
+    zColorScheme: ZColorScheme;
+}
+export declare const ThemeContext: React.Context<ThemeContextValue | null>;
+export declare function useZTheme(): ThemeContextValue;
+export interface ZThemeProviderProps {
+    children: React.ReactNode;
+    theme?: Theme;
+}
+export declare function ZThemeProvider({ children, theme, }: ZThemeProviderProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/theme/componentColors.d.ts

@@ -0,0 +1,13 @@
+import type { Theme } from "../globalTypings";
+export declare function getPanelBackground(mode: Theme): string;
+export declare function getFieldBackground(mode: Theme): string;
+export declare function getInputSurfaceBackground(mode: Theme): string;
+export declare function getHoverBackground(mode: Theme): string;
+export declare function getPrimaryTextColor(mode: Theme): string;
+export declare function getMutedTextColor(mode: Theme): string;
+export declare function getAccentTextColor(mode: Theme): string;
+export declare function getSubtleBorderColor(mode: Theme): string;
+export declare function getCardBorderColor(mode: Theme): string;
+export declare function getDividerColor(mode: Theme): string;
+export declare function getShimmerBackground(mode: Theme): string;
+export declare function getIconBoxBackground(mode: Theme): string;

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

@@ -0,0 +1,5 @@
+export { ZThemeProvider, useZTheme, ThemeContext } from "./ZThemeProvider";
+export type { ZThemeProviderProps, ThemeContextValue } from "./ZThemeProvider";
+export { lightColorScheme, darkColorScheme, extraDarkColorScheme, getZColorSchemeForTheme, ZColors, ZGradientConst, } from "./zColorScheme";
+export { zColorTokens } from "./zColorTokens";
+export type { ZColorScheme } from "./types";

package/dist/esm/theme/types.d.ts

@@ -0,0 +1,118 @@
+export interface TabColorScheme {
+    primaryActiveText: string;
+    primaryActiveFill: string;
+    primaryDefaultFill: string;
+    primaryDefaultText: string;
+    primaryStroke: string;
+    secondaryActiveTab: string;
+    secondaryDefaultTab: string;
+    tertiaryFill: string;
+    tertiaryText: string;
+    tertiaryStroke: string;
+    tertiaryDefaultFill: string;
+    tertiaryDefaultText: string;
+    tertiaryDefaultStroke: string;
+}
+export interface ZColorScheme {
+    primary: {
+        title: string;
+        white: string;
+    };
+    secondary: {
+        subtext: string;
+        disabled: string;
+    };
+    background: {
+        bottomSheetScrim: string;
+        bottomSheetBar: string;
+        bottomSheetBg: string;
+        bottomSheetFg: string;
+        bottomSheetStroke: string;
+        fullScreenBg: string;
+        fullScreenFg01: string;
+        fullScreenFg02: string;
+    };
+    icon: {
+        primary: string;
+        secondary: string;
+        primaryTap: string;
+        secondaryTap: string;
+        header: string;
+        disabled: string;
+        success: string;
+        error: string;
+        pending: string;
+        noChange: string;
+        illustration: string;
+        fiat: string;
+        rnr: string;
+        navGrey: string;
+    };
+    functional: {
+        green: string;
+        green02: string;
+        red: string;
+        red02: string;
+        blue: string;
+        yellow: string;
+        grey: string;
+        greenTrans: string;
+        redTrans: string;
+        blueTrans: string;
+        yellowTrans: string;
+        greyTrans: string;
+        redTag: string;
+        greenTag: string;
+        greyTag: string;
+    };
+    toast: {
+        successFill: string;
+        successStroke: string;
+        successTitle: string;
+        successSubText: string;
+        infoFill: string;
+        infoStroke: string;
+        infoTitle: string;
+        infoSubText: string;
+        errorFill: string;
+        errorStroke: string;
+        errorTitle: string;
+        errorSubText: string;
+    };
+    stroke: {
+        card: string;
+        separator: string;
+        header: string;
+        bottomSheet: string;
+        gradientCard: string;
+    };
+    tag: {
+        greenStroke: string;
+        greenFilled: string;
+        greenTagText: string;
+        greyFilled: string;
+        greyTagText: string;
+        redStroke: string;
+        redFilled: string;
+        redTagText: string;
+        yellowStroke: string;
+        yellowTagText: string;
+        yellowTagTextDark: string;
+        greyTagStroke: string;
+        blueStroke: string;
+        blueTagText: string;
+    };
+    header: {
+        header: string;
+        listing: string;
+        table: string;
+    };
+    input: {
+        default: string;
+        disabled: string;
+        defaultStroke: string;
+        defaultVariant: string;
+    };
+    overlay: string;
+    tab: TabColorScheme;
+}

package/dist/esm/theme/zColorScheme.d.ts

@@ -0,0 +1,11 @@
+import { Theme } from "../globalTypings";
+import type { ZColorScheme } from "./types";
+import { ZColors, ZGradientConst } from "./zColors";
+/** Mobile v2 ZLightColorScheme */
+export declare const lightColorScheme: ZColorScheme;
+/** Mobile v2 ZDarkColorScheme — web blue / component `mode="dark"` */
+export declare const darkColorScheme: ZColorScheme;
+/** Mobile v2 ZDarkColorSchemeV4 — mobile dark / component `mode="extraDark"` */
+export declare const extraDarkColorScheme: ZColorScheme;
+export declare function getZColorSchemeForTheme(theme: Theme): ZColorScheme;
+export { ZColors, ZGradientConst };

package/dist/esm/theme/zColorTokens.d.ts

@@ -0,0 +1,33 @@
+/** CSS custom property references for gradual component migration. */
+export declare const zColorTokens: {
+    readonly primary: {
+        readonly title: "var(--color-primary-title)";
+        readonly white: "var(--color-primary-white)";
+    };
+    readonly secondary: {
+        readonly subtext: "var(--color-secondary-subtext)";
+        readonly disabled: "var(--color-secondary-disabled)";
+    };
+    readonly background: {
+        readonly fullScreenBg: "var(--color-background-full-screen)";
+        readonly fullScreenFg01: "var(--color-background-foreground-01)";
+        readonly fullScreenFg02: "var(--color-background-foreground-02)";
+        readonly bottomSheetBg: "var(--color-background-bottom-sheet-bg)";
+        readonly bottomSheetFg: "var(--color-background-bottom-sheet-fg)";
+    };
+    readonly input: {
+        readonly default: "var(--color-input-default)";
+        readonly disabled: "var(--color-input-disabled)";
+    };
+    readonly functional: {
+        readonly green: "var(--color-functional-green)";
+        readonly red: "var(--color-functional-red)";
+        readonly blue: "var(--color-functional-blue)";
+        readonly yellow: "var(--color-functional-yellow)";
+    };
+    readonly stroke: {
+        readonly separator: "var(--color-stroke-separator)";
+        readonly card: "var(--color-stroke-card)";
+    };
+    readonly overlay: "var(--color-overlay)";
+};

package/dist/esm/theme/zColors.d.ts

@@ -0,0 +1,93 @@
+/**
+ * Primitive palette mirrored from mobile v2 design system:
+ * zebpay_multiplatform/design/v2/.../znew/color/ZColors.kt
+ *
+ * Token suffix "V4" in some names matches the Kotlin source (dark palette revision),
+ * not the design system version — the design system module is v2.
+ */
+export declare const ZColors: {
+    readonly Black: "#000000";
+    readonly White: "#FFFFFF";
+    readonly Transparent: "transparent";
+    readonly Overlay: "#660C0C24";
+    readonly Blue01: "#222245";
+    readonly Blue02: "#181837";
+    readonly Blue03: "#338FFF";
+    readonly Blue04: "#C0C0EE";
+    readonly Blue05: "#E9EFF6";
+    readonly Blue06: "#33338FFF";
+    readonly Blue07: "#EEF5FF";
+    readonly Blue08: "#33C0C0EE";
+    readonly Blue09: "#151532";
+    readonly Blue10: "#D9EAFF";
+    readonly Blue11: "#0A338FFF";
+    readonly Blue12: "#EBF4FF";
+    readonly Grey01: "#C2C2DD";
+    readonly Grey02: "#34345A";
+    readonly Grey03: "#6B6B6B";
+    readonly Grey04: "#33C0C0EE";
+    readonly Grey05: "#E1E3E6";
+    readonly Grey06: "#C2C2C8";
+    readonly Grey07: "#B5B5D3";
+    readonly Green01: "#1ECAA2";
+    readonly Green02: "#31826F";
+    readonly Green03: "#212F4C";
+    readonly Green04: "#331ECAA2";
+    readonly Green06: "#00A37D";
+    readonly Red01: "#EA6161";
+    readonly Red02: "#BF5555";
+    readonly Red03: "#302544";
+    readonly Red04: "#33EA6161";
+    readonly Red06: "#DC5454";
+    readonly Yellow01: "#F9C35C";
+    readonly Yellow02: "#FFB100";
+    readonly Yellow03: "#2A273B";
+    readonly Yellow04: "#33F9C35C";
+    readonly Yellow05: "#986405";
+    readonly PrimaryTitleV4: "#F8F8F8";
+    readonly PrimaryWhiteV4: "#F8F8F8";
+    readonly SurfaceCardV4: "#1D212B";
+    readonly BottomSheetBgBar: "#313337";
+    readonly SecondarySubtextV4: "#C0C7DC";
+    readonly SecondaryDisabledV4: "#5F6267";
+    readonly SurfaceElevatedV4: "#26293E";
+    readonly GreenV4: "#0FC985";
+    readonly GreenTransBgV4: "#0E362F";
+    readonly GreyTransBgV4: "#14161C";
+    readonly RedTagTextV4: "#FF4848";
+    readonly IconTapSelectedV4: "#6A93FF";
+    readonly IconSecondaryV4: "#8B95B0";
+    readonly IconTapableSelectedV4: "#5786FF";
+    readonly InputDefaultV4: "#14161C";
+    readonly InputDisabledStrokeV4: "#5F6267";
+    readonly FullScreenBg01: "#1D212B";
+    readonly ToastSuccessStrokeV4: "#B3038153";
+    readonly ToastInfoStrokeV4: "#B3B09600";
+    readonly ToastErrorStrokeV4: "#B3C94444";
+    readonly TagYellowStrokeV4: "#FFF15A";
+    readonly TagYellowTextV4: "#FFF15A";
+    readonly TagGreyTextV4: "#C4C4C4";
+    readonly TagGreyFilledV4: "#313337";
+    readonly HeaderSecondaryFillV4: "#14161C";
+    readonly TabAccentV4: "#4660FE";
+    readonly FunctionalGreenV4: "#038153";
+    readonly FunctionalRedV4: "#E75252";
+    readonly FunctionalRed02V4: "#C94444";
+    readonly FunctionalYellowV4: "#B09600";
+    readonly FunctionalRedTransV4: "#3C1A23";
+    readonly FunctionalYellowTransV4: "#413A21";
+    readonly FunctionalBlueTransV4: "#182943";
+    readonly SuccessIconV4: "#15B178";
+    readonly ErrorIconV4: "#B84242";
+    readonly TabSecondaryV4: "#6A93FF";
+    readonly SheetScrimColor: "#F7252525";
+};
+/** Mirrored from mobile v2 ZGradientConst */
+export declare const ZGradientConst: {
+    gradient1: readonly ["#5D7BFE", "#0974FF"];
+    gradient1V4: readonly ["#5786FF", "#3751FE"];
+    white: readonly ["#FFFFFF", "#FFFFFF"];
+};
+export declare const linearGradient: (from: string, to: string, angle?: string) => string;
+export declare const solidGradient: (color: string) => string;
+export declare const gradientFromConst: (colors: readonly [string, string]) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zebpay-ui",
-  "version": "0.0.119",
+  "version": "0.0.121",
   "description": "A lightweight component and utilities library Design System created using React",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",