Merge branch 'master' into feat/timepicker-ut-interactive-test

Author: swapnil-kr1

packages/blade-mcp/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @razorpay/blade-mcp
 
+## 1.6.0
+
+### Minor Changes
+
+- ab1773547: feat(blade-mcp): update knowledgebase with AreaChart
+
 ## 1.5.0
 
 ### Minor Changes

packages/blade-mcp/knowledgebase/components/AreaChart.md

@@ -0,0 +1,139 @@
+# AreaChart
+
+## Component Name
+
+AreaChart
+
+## Description
+
+AreaChart is a data visualization component built on top of Recharts that displays quantitative data as filled areas under curves. It supports single and multiple data series, stacked areas, and various styling options. The component is designed for showing trends over time, comparing multiple datasets, and highlighting data patterns with customizable colors and interactive features.
+
+## Important Constraints
+
+- Maximum of 10 areas can be configured in a single chart (throws error if exceeded)
+- `ChartAreaWrapper` only accepts `ChartArea` components as direct children for proper indexing
+- `dataKey` prop is required for each `ChartArea` component to specify which data field to display
+- `name` prop is required for each `ChartArea` component for legend and tooltip display
+- Data array must contain objects with consistent key structure across all data points
+- `colorTheme` currently only supports 'default' value (other themes will log warning)
+
+## TypeScript Types
+
+These types define the props that the AreaChart component and its subcomponents accept:
+
+```typescript
+
+type ChartAreaProps {
+  type?: 'step' | 'stepAfter' | 'stepBefore' | 'linear' | 'monotone';
+  connectNulls?: boolean;
+  showLegend?: boolean;
+  dataKey: string;
+  name: string;
+  stackId?: string | number;
+  color?: ChartsCategoricalColorToken;
+  dot?: RechartAreaProps['dot'];
+  activeDot?: RechartAreaProps['activeDot'];
+}
+
+type data = {
+  [key: string]: string | number | null;
+};
+
+type ChartAreaWrapperProps = {
+  children?: React.ReactNode;
+  colorTheme?: colorTheme;
+  data: data[];
+};
+
+type ChartReferenceLineProps = {
+  /**
+   * The y-coordinate of the reference line.
+   */
+  y?: RechartsReferenceLineProps['y'];
+  /**
+   * The x-coordinate  of the reference line.
+   */
+  x?: RechartsReferenceLineProps['x'];
+  /**
+   * The label of the reference line.
+   */
+  label: string;
+};
+
+type ChartXAxisProps = Omit<RechartsXAxisProps, 'tick' | 'label' | 'dataKey' | 'stroke'> & {
+  /**
+   * The label of the x-axis.
+   */
+  label?: string;
+  /**
+   * The data key of the x-axis.
+   */
+  dataKey?: string;
+};
+
+type ChartYAxisProps = Omit<RechartsYAxisProps, 'tick' | 'label' | 'dataKey' | 'stroke'> & {
+  /**
+   * The label of the y-axis.
+   */
+  label?: string;
+  /**
+   * The data key of the y-axis.
+   */
+  dataKey?: string;
+};
+
+type ChartTooltipProps = ComponentProps<typeof RechartsTooltip>;
+
+type ChartLegendProps = ComponentProps<typeof RechartsLegend>;
+
+type ChartCartesianGridProps = ComponentProps<typeof RechartsCartesianGrid>;
+
+type ChartsCategoricalColorToken = `chart.background.categorical.${ChartColorCategories}.${keyof ChartCategoricalEmphasis}`;
+
+type colorTheme = 'default';
+```
+
+## Examples
+
+### Basic Area Chart with Single Data Series
+
+```typescript
+import React from 'react';
+import {
+  ChartAreaWrapper,
+  ChartArea,
+  ChartXAxis,
+  ChartYAxis,
+  ChartCartesianGrid,
+  ChartTooltip,
+  Box,
+} from '@razorpay/blade/components';
+
+function BasicAreaChart() {
+  const data = [
+    { month: 'Jan', revenue: 4000 },
+    { month: 'Feb', revenue: 3000 },
+    { month: 'Mar', revenue: 2000 },
+    { month: 'Apr', revenue: 2780 },
+    { month: 'May', revenue: 1890 },
+    { month: 'Jun', revenue: 2390 },
+  ];
+
+  return (
+    <Box width="100%" height="400px">
+      <ChartAreaWrapper data={data}>
+        <ChartCartesianGrid />
+        <CharChartXAxis dataKey="month" />
+        <ChartYAxis />
+        <ChartTooltip />
+        <Area
+          dataKey="revenue"
+          name="Revenue"
+          type="monotone"
+          color="chart.background.categorical.azure.intense"
+        />
+      </ChartAreaWrapper>
+    </Box>
+  );
+}
+```

packages/blade-mcp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@razorpay/blade-mcp",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Model Context Protocol server for Blade",
   "main": "dist/server.js",
   "type": "module",

packages/blade/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @razorpay/blade
 
+## 12.53.1
+
+### Patch Changes
+
+- 0ff0152b2: fix(ActionListItem): support non-string values in item
+
+## 12.53.0
+
+### Minor Changes
+
+- ab1773547: feat(blade): add AreaChart component
+
+  [Docs Link](https://blade.razorpay.com/?path=/docs/components-charts-areachart--docs)
+
 ## 12.52.0
 
 ### Minor Changes

packages/blade/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@razorpay/blade",
   "description": "The Design System that powers Razorpay",
-  "version": "12.52.0",
+  "version": "12.53.1",
   "license": "MIT",
   "engines": {
     "node": ">=18.12.1"

packages/blade/src/components/BottomSheet/BottomSheet.web.tsx

@@ -250,8 +250,17 @@ const _BottomSheet = ({
       lastOffset: [_, lastOffsetY],
       down,
       dragging,
+      event,
       args: [{ isContentDragging = false } = {}] = [],
     }) => {
+      // Check if the touch started on a scrollable element (e.g., SpinWheel in TimePicker)
+      // This prevents BottomSheet drag gestures from interfering with internal scrolling
+      const touchTarget = event?.target as Element | undefined;
+      const isScrollableContent = touchTarget?.closest('[data-allow-scroll]');
+
+      if (isScrollableContent) {
+        return;
+      }
       setIsDragging(Boolean(dragging));
       // lastOffsetY is the previous position user stopped dragging the sheet
       // movementY is the drag amount from the bottom of the screen, so as you drag up the movementY goes into negatives

packages/blade/src/components/Charts/AreaChart/AreaChart.native.tsx

@@ -0,0 +1,23 @@
+import type { ChartAreaWrapperProps, ChartAreaProps } from './types';
+import { throwBladeError } from '~utils/logger';
+import { Text } from '~components/Typography';
+
+const ChartAreaWrapper = (_prop: ChartAreaProps): React.ReactElement => {
+  throwBladeError({
+    message: 'ChartAreaWrapper is not yet implemented for native',
+    moduleName: 'ChartAreaWrapper',
+  });
+
+  return <Text>AreaChartWrapper is not available for Native mobile apps.</Text>;
+};
+
+const ChartArea = (_prop: ChartAreaWrapperProps): React.ReactElement => {
+  throwBladeError({
+    message: 'ChartArea is not yet implemented for native',
+    moduleName: 'ChartArea',
+  });
+
+  return <Text>ChartArea is not available for Native mobile apps.</Text>;
+};
+
+export { ChartAreaWrapper, ChartArea };