@razorpay/blade 11.15.1 → 11.16.0

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

@@ -4606,11 +4606,34 @@ type ChipProps = {
      */
     value?: string;
 } & TestID & StyledPropsBlade;
-type ChipGroupProps = {
+type ChipGroupCommonProps = {
     /**
-     * Accessibility label for the ChipGroup
+     * Sets the position of the label
+     *
+     * @default 'top'
      */
-    accessibilityLabel: string;
+    labelPosition?: 'top' | 'left';
+    /**
+     * Help text of the chip group
+     */
+    helpText?: string;
+    /**
+     * Error text of the chip group
+     * Renders when `validationState` is set to 'error'
+     *
+     * Overrides helpText
+     */
+    errorText?: string;
+    /**
+     * Sets the validation state of the ChipGroup
+     */
+    validationState?: 'error' | 'none';
+    /**
+     * Renders a necessity indicator after ChipGroup label
+     *
+     * If set to `undefined` it renders nothing.
+     */
+    necessityIndicator?: 'required' | 'optional' | 'none';
     /**
      * Accepts multiple Chip components as children
      */
@@ -4626,6 +4649,11 @@ type ChipGroupProps = {
      * @default false
      */
     isDisabled?: boolean;
+    /**
+     * Sets the required state of the ChipGroup component.
+     * @default false
+     */
+    isRequired?: boolean;
     /**
      * Specifies the name attribute for the ChipGroup component.
      * When provided, this attribute ensures that the Chip elements within the group are semantically associated, allowing them to be grouped logically for form submission.
@@ -4642,7 +4670,7 @@ type ChipGroupProps = {
     }) => void;
     /**
      * Defines the selection behavior within the ChipGroup component.
-     * When set to 'single', only one Chip can be selected at a time, akin to a radio button group.
+     * When set to 'single', only one Chip can be selected at a time, akin to a chip button group.
      * When set to 'multiple', multiple Chips can be concurrently selected, simulating checkbox-like behavior within the group.
      *
      * @default "single"
@@ -4667,6 +4695,27 @@ type ChipGroupProps = {
      */
     color?: 'primary' | 'positive' | 'negative';
 } & TestID & StyledPropsBlade;
+type ChipGroupPropsWithA11yLabel = {
+    /**
+     * Label to be shown for the input field
+     */
+    label?: undefined;
+    /**
+     * Accessibility label for the input
+     */
+    accessibilityLabel: string;
+};
+type ChipGroupPropsWithLabel = {
+    /**
+     * Label to be shown for the input field
+     */
+    label: string;
+    /**
+     * Accessibility label for the input
+     */
+    accessibilityLabel?: string;
+};
+type ChipGroupProps = (ChipGroupPropsWithA11yLabel | ChipGroupPropsWithLabel) & ChipGroupCommonProps;
 
 declare const Chip: React__default.ForwardRefExoticComponent<{
     children: StringChildrenType;
@@ -5015,7 +5064,7 @@ declare const Chip: React__default.ForwardRefExoticComponent<{
     } | undefined;
 }, "visibility">, "__brand__">> & React__default.RefAttributes<BladeElementRef>>;
 
-declare const ChipGroup: ({ accessibilityLabel, children, isDisabled, name, defaultValue, onChange, value, size, color, testID, selectionType, ...styledProps }: ChipGroupProps) => React__default.ReactElement;
+declare const ChipGroup: ({ accessibilityLabel, label, labelPosition, necessityIndicator, validationState, errorText, helpText, isRequired, children, isDisabled, name, defaultValue, onChange, value, size, color, testID, selectionType, ...styledProps }: ChipGroupProps) => React__default.ReactElement;
 
 type CollapsibleProps = {
     /**
@@ -5388,6 +5437,14 @@ type IndicatorCommonProps = {
      * @default neutral
      */
     color?: FeedbackColors | 'primary';
+    /**
+     * Sets the emphasis of the indicator
+     *
+     * If set to intense it will show a background circle
+     *
+     * @default subtle
+     */
+    emphasis?: 'subtle' | 'intense';
     /**
      * Size of the indicator
      *
@@ -5416,7 +5473,7 @@ type IndicatorWithA11yLabel = {
     children?: StringChildrenType;
 };
 type IndicatorProps = IndicatorCommonProps & (IndicatorWithA11yLabel | IndicatorWithoutA11yLabel);
-declare const Indicator: ({ accessibilityLabel, children, size, color, testID, ...styledProps }: IndicatorProps) => ReactElement;
+declare const Indicator: ({ accessibilityLabel, children, size, color, emphasis, testID, ...styledProps }: IndicatorProps) => ReactElement;
 
 type FormInputLabelProps = {
     /**

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

@@ -142,6 +142,7 @@ type ColorNeutralGrayScale = Readonly<{
     1100: string;
     1200: string;
     1300: string;
+    a25: string;
     a50: string;
     a75: string;
     a100: string;
@@ -184,30 +185,32 @@ declare const colors: Color;
 type Opacity = Readonly<{
     /**0: 0 */
     0: number;
-    /**1: 0.09 */
-    1: number;
-    /**2: 0.12 */
-    2: number;
-    /**3: 0.18 */
-    3: number;
-    /**4: 0.24 */
-    4: number;
-    /**5: 0.32 */
-    5: number;
-    /**6: 0.48 */
-    6: number;
-    /**7: 0.56 */
-    7: number;
-    /**8: 0.64 */
-    8: number;
-    /**9: 0.72 */
-    9: number;
-    /**10: 0.8 */
-    10: number;
-    /**11: 0.88 */
-    11: number;
-    /**12: 1.0 */
-    12: number;
+    /**50: 0.06 */
+    50: number;
+    /**100: 0.09 */
+    100: number;
+    /**200: 0.12 */
+    200: number;
+    /**300: 0.18 */
+    300: number;
+    /**400: 0.24 */
+    400: number;
+    /**500: 0.32 */
+    500: number;
+    /**600: 0.48 */
+    600: number;
+    /**700: 0.56 */
+    700: number;
+    /**800: 0.64 */
+    800: number;
+    /**900: 0.72 */
+    900: number;
+    /**1000: 0.8 */
+    1000: number;
+    /**1100: 0.88 */
+    1100: number;
+    /**1200: 1.0 */
+    1200: number;
 }>;
 declare const opacity: Opacity;
 

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

@@ -142,6 +142,7 @@ type ColorNeutralGrayScale = Readonly<{
     1100: string;
     1200: string;
     1300: string;
+    a25: string;
     a50: string;
     a75: string;
     a100: string;
@@ -184,30 +185,32 @@ declare const colors: Color;
 type Opacity = Readonly<{
     /**0: 0 */
     0: number;
-    /**1: 0.09 */
-    1: number;
-    /**2: 0.12 */
-    2: number;
-    /**3: 0.18 */
-    3: number;
-    /**4: 0.24 */
-    4: number;
-    /**5: 0.32 */
-    5: number;
-    /**6: 0.48 */
-    6: number;
-    /**7: 0.56 */
-    7: number;
-    /**8: 0.64 */
-    8: number;
-    /**9: 0.72 */
-    9: number;
-    /**10: 0.8 */
-    10: number;
-    /**11: 0.88 */
-    11: number;
-    /**12: 1.0 */
-    12: number;
+    /**50: 0.06 */
+    50: number;
+    /**100: 0.09 */
+    100: number;
+    /**200: 0.12 */
+    200: number;
+    /**300: 0.18 */
+    300: number;
+    /**400: 0.24 */
+    400: number;
+    /**500: 0.32 */
+    500: number;
+    /**600: 0.48 */
+    600: number;
+    /**700: 0.56 */
+    700: number;
+    /**800: 0.64 */
+    800: number;
+    /**900: 0.72 */
+    900: number;
+    /**1000: 0.8 */
+    1000: number;
+    /**1100: 0.88 */
+    1100: number;
+    /**1200: 1.0 */
+    1200: number;
 }>;
 declare const opacity: Opacity;
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@razorpay/blade",
   "description": "The Design System that powers Razorpay",
-  "version": "11.15.1",
+  "version": "11.16.0",
   "license": "MIT",
   "engines": {
     "node": ">=18.12.1"
@@ -275,8 +275,8 @@
     "typescript-transform-paths": "3.4.7",
     "@types/body-scroll-lock": "3.1.0",
     "ramda": "0.29.1",
-    "@razorpay/i18nify-js": "1.8.0",
-    "@razorpay/i18nify-react": "4.0.6"
+    "@razorpay/i18nify-js": "1.9.3",
+    "@razorpay/i18nify-react": "4.0.8"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -292,7 +292,7 @@
     "react-hot-toast": "2.4.1",
     "@gorhom/bottom-sheet": "^4.4.6",
     "@gorhom/portal": "^1.0.14",
-    "@razorpay/i18nify-js": "^1.8.0"
+    "@razorpay/i18nify-js": "^1.9.3"
   },
   "peerDependenciesMeta": {
     "react-native": {