@razorpay/blade 12.49.7 → 12.51.0

package/build/types/tokens/index.d.ts

@@ -468,6 +468,12 @@ type Emphasis = {
     muted: string;
     disabled: string;
 };
+type ChartCategoricalEmphasis = Pick<Emphasis, 'subtle' | 'moderate' | 'intense'> & {
+    faint: string;
+    strong: string;
+};
+type ChartSequentialEmphasis = Omit<ColorChromaticScale, 'a50' | 'a150' | 'a100' | 'a200' | 'a400'>;
+type ChartColorCategories = 'azure' | 'emerald' | 'crimson' | 'cider' | 'sapphire' | 'orchid' | 'magenta' | 'topaz' | 'gray';
 type SubtleOrIntenseEmphasis = Pick<Emphasis, 'subtle' | 'intense'>;
 type InteractiveStates = {
     default: string;
@@ -525,6 +531,12 @@ type Colors = {
         border: SubtleOrIntenseEmphasis;
     };
     transparent: string;
+    chart: {
+        background: {
+            categorical: Record<ChartColorCategories, ChartCategoricalEmphasis>;
+            sequential: Record<Exclude<ChartColorCategories, 'gray'>, ChartSequentialEmphasis>;
+        };
+    };
 };
 type ColorsWithModes = Record<ColorSchemeModes, Colors>;
 type ThemeTokens = {

package/build/types/tokens/index.native.d.ts

@@ -468,6 +468,12 @@ type Emphasis = {
     muted: string;
     disabled: string;
 };
+type ChartCategoricalEmphasis = Pick<Emphasis, 'subtle' | 'moderate' | 'intense'> & {
+    faint: string;
+    strong: string;
+};
+type ChartSequentialEmphasis = Omit<ColorChromaticScale, 'a50' | 'a150' | 'a100' | 'a200' | 'a400'>;
+type ChartColorCategories = 'azure' | 'emerald' | 'crimson' | 'cider' | 'sapphire' | 'orchid' | 'magenta' | 'topaz' | 'gray';
 type SubtleOrIntenseEmphasis = Pick<Emphasis, 'subtle' | 'intense'>;
 type InteractiveStates = {
     default: string;
@@ -525,6 +531,12 @@ type Colors = {
         border: SubtleOrIntenseEmphasis;
     };
     transparent: string;
+    chart: {
+        background: {
+            categorical: Record<ChartColorCategories, ChartCategoricalEmphasis>;
+            sequential: Record<Exclude<ChartColorCategories, 'gray'>, ChartSequentialEmphasis>;
+        };
+    };
 };
 type ColorsWithModes = Record<ColorSchemeModes, Colors>;
 type ThemeTokens = {

package/build/types/utils/index.d.ts

@@ -110,6 +110,25 @@ type Breakpoints = Readonly<{
     xl: number;
 }>;
 
+type ColorChromaticScale = Readonly<{
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    1000: string;
+    a50: string;
+    a100: string;
+    a150: string;
+    a200: string;
+    a400: string;
+}>;
+
 type FontFamily = {
     /** Used for all type of textual content except code snippets, and headings */
     text: string;
@@ -488,6 +507,12 @@ type Emphasis = {
     muted: string;
     disabled: string;
 };
+type ChartCategoricalEmphasis = Pick<Emphasis, 'subtle' | 'moderate' | 'intense'> & {
+    faint: string;
+    strong: string;
+};
+type ChartSequentialEmphasis = Omit<ColorChromaticScale, 'a50' | 'a150' | 'a100' | 'a200' | 'a400'>;
+type ChartColorCategories = 'azure' | 'emerald' | 'crimson' | 'cider' | 'sapphire' | 'orchid' | 'magenta' | 'topaz' | 'gray';
 type SubtleOrIntenseEmphasis = Pick<Emphasis, 'subtle' | 'intense'>;
 type InteractiveStates = {
     default: string;
@@ -545,6 +570,12 @@ type Colors = {
         border: SubtleOrIntenseEmphasis;
     };
     transparent: string;
+    chart: {
+        background: {
+            categorical: Record<ChartColorCategories, ChartCategoricalEmphasis>;
+            sequential: Record<Exclude<ChartColorCategories, 'gray'>, ChartSequentialEmphasis>;
+        };
+    };
 };
 type ColorsWithModes = Record<ColorSchemeModes, Colors>;
 type ThemeTokens = {

package/build/types/utils/index.native.d.ts

@@ -110,6 +110,25 @@ type Breakpoints = Readonly<{
     xl: number;
 }>;
 
+type ColorChromaticScale = Readonly<{
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    1000: string;
+    a50: string;
+    a100: string;
+    a150: string;
+    a200: string;
+    a400: string;
+}>;
+
 type FontFamily = {
     /** Used for all type of textual content except code snippets, and headings */
     text: string;
@@ -488,6 +507,12 @@ type Emphasis = {
     muted: string;
     disabled: string;
 };
+type ChartCategoricalEmphasis = Pick<Emphasis, 'subtle' | 'moderate' | 'intense'> & {
+    faint: string;
+    strong: string;
+};
+type ChartSequentialEmphasis = Omit<ColorChromaticScale, 'a50' | 'a150' | 'a100' | 'a200' | 'a400'>;
+type ChartColorCategories = 'azure' | 'emerald' | 'crimson' | 'cider' | 'sapphire' | 'orchid' | 'magenta' | 'topaz' | 'gray';
 type SubtleOrIntenseEmphasis = Pick<Emphasis, 'subtle' | 'intense'>;
 type InteractiveStates = {
     default: string;
@@ -545,6 +570,12 @@ type Colors = {
         border: SubtleOrIntenseEmphasis;
     };
     transparent: string;
+    chart: {
+        background: {
+            categorical: Record<ChartColorCategories, ChartCategoricalEmphasis>;
+            sequential: Record<Exclude<ChartColorCategories, 'gray'>, ChartSequentialEmphasis>;
+        };
+    };
 };
 type ColorsWithModes = Record<ColorSchemeModes, Colors>;
 type ThemeTokens = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@razorpay/blade",
   "description": "The Design System that powers Razorpay",
-  "version": "12.49.7",
+  "version": "12.51.0",
   "license": "MIT",
   "engines": {
     "node": ">=18.12.1"
@@ -149,7 +149,8 @@
     "@mantine/hooks": "6.0.21",
     "dayjs": "1.11.10",
     "react-window": "1.8.11",
-    "react-zoom-pan-pinch": "3.7.0"
+    "react-zoom-pan-pinch": "3.7.0",
+    "recharts": "3.1.2"
   },
   "devDependencies": {
     "http-server": "14.1.1",