@razorpay/blade 11.11.0 → 11.12.0

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

@@ -1283,7 +1283,7 @@ type BaseBoxVisualProps = MakeObjectResponsive<{
     lineHeight: SpacingValueType;
     touchAction: CSSObject['touchAction'];
     userSelect: CSSObject['userSelect'];
-} & PickCSSByPlatform<'border' | 'borderLeft' | 'borderRight' | 'borderTop' | 'borderBottom' | 'opacity' | 'pointerEvents'>>;
+} & PickCSSByPlatform<'border' | 'borderLeft' | 'borderRight' | 'borderTop' | 'borderBottom' | 'opacity' | 'pointerEvents' | 'cursor'>>;
 type BoxVisualProps = MakeObjectResponsive<{
     backgroundColor: BackgroundColorString<'surface'> | 'transparent';
 }> & {
@@ -6292,6 +6292,14 @@ type PasswordInputPropsWithLabel = {
 type PasswordInputProps = (PasswordInputPropsWithA11yLabel | PasswordInputPropsWithLabel) & PasswordInputCommonProps;
 declare const PasswordInput: React__default.ForwardRefExoticComponent<PasswordInputProps & React__default.RefAttributes<BladeElementRef>>;
 
+type TaggedInputProps = {
+    isTaggedInput?: boolean;
+    tags?: string[];
+    onTagChange?: ({ tags }: {
+        tags: string[];
+    }) => void;
+};
+
 type TextAreaCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'onSubmit' | 'value' | 'isDisabled' | 'isRequired' | 'maxCharacters' | 'autoFocus' | 'numberOfLines' | 'testID' | 'size'> & {
     /**
      * Decides whether to render a clear icon button
@@ -6301,7 +6309,7 @@ type TextAreaCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' |
      * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`
      */
     onClearButtonClick?: () => void;
-} & StyledPropsBlade;
+} & TaggedInputProps & StyledPropsBlade;
 type TextAreaPropsWithA11yLabel = {
     /**
      * Label to be shown for the input field
@@ -6358,7 +6366,7 @@ type TextInputCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel'
      * @default text
      */
     type?: Type;
-} & StyledPropsBlade;
+} & TaggedInputProps & StyledPropsBlade;
 type TextInputPropsWithA11yLabel = {
     /**
      * Label to be shown for the input field
@@ -6704,7 +6712,7 @@ declare const PhoneNumberInput: React__default.ForwardRefExoticComponent<Partial
     successText?: string | undefined;
     leadingIcon?: IconComponent | undefined;
     trailingIcon?: IconComponent | undefined;
-    keyboardReturnKeyType?: "search" | "default" | "done" | "next" | "previous" | "go" | "send" | undefined;
+    keyboardReturnKeyType?: "search" | "default" | "next" | "done" | "previous" | "go" | "send" | undefined;
     autoCompleteSuggestionType?: ("on" | ("none" | "name" | "email" | "password" | "username" | "telephone" | "newPassword" | "oneTimeCode" | "postalCode" | "countryName" | "creditCardNumber" | "creditCardCSC" | "creditCardExpiry" | "creditCardExpiryMonth" | "creditCardExpiryYear")) | undefined;
 } & {
     defaultValue?: string | undefined;
@@ -9520,6 +9528,14 @@ declare const TooltipInteractiveWrapper: styled_components.StyledComponent<"div"
         readonly l?: "transparent" | "feedback.background.neutral.subtle" | "feedback.background.neutral.intense" | "feedback.background.information.subtle" | "feedback.background.information.intense" | "feedback.background.negative.subtle" | "feedback.background.negative.intense" | "feedback.background.notice.subtle" | "feedback.background.notice.intense" | "feedback.background.positive.subtle" | "feedback.background.positive.intense" | "surface.background.gray.subtle" | "surface.background.gray.moderate" | "surface.background.gray.intense" | "surface.background.primary.subtle" | "surface.background.primary.intense" | "surface.background.sea.subtle" | "surface.background.sea.intense" | "surface.background.cloud.subtle" | "surface.background.cloud.intense" | "interactive.background.neutral.fadedHighlighted" | "interactive.background.neutral.disabled" | "interactive.background.neutral.default" | "interactive.background.neutral.highlighted" | "interactive.background.neutral.faded" | "interactive.background.information.fadedHighlighted" | "interactive.background.information.disabled" | "interactive.background.information.default" | "interactive.background.information.highlighted" | "interactive.background.information.faded" | "interactive.background.negative.fadedHighlighted" | "interactive.background.negative.disabled" | "interactive.background.negative.default" | "interactive.background.negative.highlighted" | "interactive.background.negative.faded" | "interactive.background.notice.fadedHighlighted" | "interactive.background.notice.disabled" | "interactive.background.notice.default" | "interactive.background.notice.highlighted" | "interactive.background.notice.faded" | "interactive.background.positive.fadedHighlighted" | "interactive.background.positive.disabled" | "interactive.background.positive.default" | "interactive.background.positive.highlighted" | "interactive.background.positive.faded" | "interactive.background.staticBlack.fadedHighlighted" | "interactive.background.staticBlack.disabled" | "interactive.background.staticBlack.default" | "interactive.background.staticBlack.highlighted" | "interactive.background.staticBlack.faded" | "interactive.background.staticWhite.fadedHighlighted" | "interactive.background.staticWhite.disabled" | "interactive.background.staticWhite.default" | "interactive.background.staticWhite.highlighted" | "interactive.background.staticWhite.faded" | "interactive.background.gray.fadedHighlighted" | "interactive.background.gray.disabled" | "interactive.background.gray.default" | "interactive.background.gray.highlighted" | "interactive.background.gray.faded" | "interactive.background.primary.fadedHighlighted" | "interactive.background.primary.disabled" | "interactive.background.primary.default" | "interactive.background.primary.highlighted" | "interactive.background.primary.faded" | "overlay.background.subtle" | "overlay.background.moderate" | "popup.background.subtle" | "popup.background.intense" | (string & Record<never, never>) | undefined;
         readonly xl?: "transparent" | "feedback.background.neutral.subtle" | "feedback.background.neutral.intense" | "feedback.background.information.subtle" | "feedback.background.information.intense" | "feedback.background.negative.subtle" | "feedback.background.negative.intense" | "feedback.background.notice.subtle" | "feedback.background.notice.intense" | "feedback.background.positive.subtle" | "feedback.background.positive.intense" | "surface.background.gray.subtle" | "surface.background.gray.moderate" | "surface.background.gray.intense" | "surface.background.primary.subtle" | "surface.background.primary.intense" | "surface.background.sea.subtle" | "surface.background.sea.intense" | "surface.background.cloud.subtle" | "surface.background.cloud.intense" | "interactive.background.neutral.fadedHighlighted" | "interactive.background.neutral.disabled" | "interactive.background.neutral.default" | "interactive.background.neutral.highlighted" | "interactive.background.neutral.faded" | "interactive.background.information.fadedHighlighted" | "interactive.background.information.disabled" | "interactive.background.information.default" | "interactive.background.information.highlighted" | "interactive.background.information.faded" | "interactive.background.negative.fadedHighlighted" | "interactive.background.negative.disabled" | "interactive.background.negative.default" | "interactive.background.negative.highlighted" | "interactive.background.negative.faded" | "interactive.background.notice.fadedHighlighted" | "interactive.background.notice.disabled" | "interactive.background.notice.default" | "interactive.background.notice.highlighted" | "interactive.background.notice.faded" | "interactive.background.positive.fadedHighlighted" | "interactive.background.positive.disabled" | "interactive.background.positive.default" | "interactive.background.positive.highlighted" | "interactive.background.positive.faded" | "interactive.background.staticBlack.fadedHighlighted" | "interactive.background.staticBlack.disabled" | "interactive.background.staticBlack.default" | "interactive.background.staticBlack.highlighted" | "interactive.background.staticBlack.faded" | "interactive.background.staticWhite.fadedHighlighted" | "interactive.background.staticWhite.disabled" | "interactive.background.staticWhite.default" | "interactive.background.staticWhite.highlighted" | "interactive.background.staticWhite.faded" | "interactive.background.gray.fadedHighlighted" | "interactive.background.gray.disabled" | "interactive.background.gray.default" | "interactive.background.gray.highlighted" | "interactive.background.gray.faded" | "interactive.background.primary.fadedHighlighted" | "interactive.background.primary.disabled" | "interactive.background.primary.default" | "interactive.background.primary.highlighted" | "interactive.background.primary.faded" | "overlay.background.subtle" | "overlay.background.moderate" | "popup.background.subtle" | "popup.background.intense" | (string & Record<never, never>) | undefined;
     };
+    cursor?: csstype.Property.Cursor | {
+        readonly base?: csstype.Property.Cursor | undefined;
+        readonly xs?: csstype.Property.Cursor | undefined;
+        readonly s?: csstype.Property.Cursor | undefined;
+        readonly m?: csstype.Property.Cursor | undefined;
+        readonly l?: csstype.Property.Cursor | undefined;
+        readonly xl?: csstype.Property.Cursor | undefined;
+    } | undefined;
     lineHeight: SpacingValueType | {
         readonly base?: SpacingValueType | undefined;
         readonly xs?: SpacingValueType | undefined;

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

@@ -1282,7 +1282,7 @@ type BaseBoxVisualProps = MakeObjectResponsive<{
     lineHeight: SpacingValueType;
     touchAction: CSSObject['touchAction'];
     userSelect: CSSObject['userSelect'];
-} & PickCSSByPlatform<'border' | 'borderLeft' | 'borderRight' | 'borderTop' | 'borderBottom' | 'opacity' | 'pointerEvents'>>;
+} & PickCSSByPlatform<'border' | 'borderLeft' | 'borderRight' | 'borderTop' | 'borderBottom' | 'opacity' | 'pointerEvents' | 'cursor'>>;
 type BoxVisualProps = MakeObjectResponsive<{
     backgroundColor: BackgroundColorString<'surface'> | 'transparent';
 }> & {
@@ -5430,7 +5430,7 @@ declare const SelectInput: React__default.ForwardRefExoticComponent<(({
 } | {
     label: string;
     accessibilityLabel?: string | undefined;
-}) & Pick<BaseInputProps, "name" | "label" | "testID" | "prefix" | "size" | "placeholder" | "accessibilityLabel" | "onBlur" | "onFocus" | "onClick" | "autoFocus" | "isDisabled" | "isRequired" | "validationState" | "necessityIndicator" | "helpText" | "errorText" | "successText" | "suffix"> & {
+}) & Pick<BaseInputProps, "name" | "label" | "testID" | "prefix" | "size" | "accessibilityLabel" | "placeholder" | "onBlur" | "onFocus" | "autoFocus" | "onClick" | "isDisabled" | "isRequired" | "validationState" | "necessityIndicator" | "helpText" | "errorText" | "successText" | "suffix"> & {
     icon?: IconComponent | undefined;
     value?: string | string[] | undefined;
     defaultValue?: string | string[] | undefined;
@@ -5489,7 +5489,7 @@ declare const SelectInput: React__default.ForwardRefExoticComponent<(({
  *
  * Checkout {@link https://blade.razorpay.com/?path=/docs/components-dropdown-with-autocomplete--with-single-select AutoComplete Documentation}.
  */
-declare const AutoComplete: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "name" | "label" | "testID" | "prefix" | "size" | "placeholder" | "accessibilityLabel" | "onBlur" | "onFocus" | "onClick" | "autoFocus" | "isDisabled" | "isRequired" | "validationState" | "necessityIndicator" | "helpText" | "errorText" | "successText" | "suffix"> & {
+declare const AutoComplete: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "name" | "label" | "testID" | "prefix" | "size" | "accessibilityLabel" | "placeholder" | "onBlur" | "onFocus" | "autoFocus" | "onClick" | "isDisabled" | "isRequired" | "validationState" | "necessityIndicator" | "helpText" | "errorText" | "successText" | "suffix"> & {
     icon?: IconComponent | undefined;
     value?: string | string[] | undefined;
     defaultValue?: string | string[] | undefined;
@@ -5707,6 +5707,14 @@ type PasswordInputPropsWithLabel = {
 type PasswordInputProps = (PasswordInputPropsWithA11yLabel | PasswordInputPropsWithLabel) & PasswordInputCommonProps;
 declare const PasswordInput: React__default.ForwardRefExoticComponent<PasswordInputProps & React__default.RefAttributes<BladeElementRef>>;
 
+type TaggedInputProps = {
+    isTaggedInput?: boolean;
+    tags?: string[];
+    onTagChange?: ({ tags }: {
+        tags: string[];
+    }) => void;
+};
+
 type TextAreaCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'placeholder' | 'defaultValue' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'onSubmit' | 'value' | 'isDisabled' | 'isRequired' | 'maxCharacters' | 'autoFocus' | 'numberOfLines' | 'testID' | 'size'> & {
     /**
      * Decides whether to render a clear icon button
@@ -5716,7 +5724,7 @@ type TextAreaCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' |
      * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`
      */
     onClearButtonClick?: () => void;
-} & StyledPropsBlade;
+} & TaggedInputProps & StyledPropsBlade;
 type TextAreaPropsWithA11yLabel = {
     /**
      * Label to be shown for the input field
@@ -5773,7 +5781,7 @@ type TextInputCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel'
      * @default text
      */
     type?: Type;
-} & StyledPropsBlade;
+} & TaggedInputProps & StyledPropsBlade;
 type TextInputPropsWithA11yLabel = {
     /**
      * Label to be shown for the input field

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@razorpay/blade",
   "description": "The Design System that powers Razorpay",
-  "version": "11.11.0",
+  "version": "11.12.0",
   "license": "MIT",
   "engines": {
     "node": ">=18.12.1"
@@ -208,10 +208,10 @@
     "@types/jest-axe": "3.5.5",
     "@types/jscodeshift": "0.11.6",
     "@types/jsdom": "20.0.1",
-    "@types/react": "17.0.38",
+    "@types/react": "18.2.24",
     "@types/react-native": "0.72.2",
     "@types/react-test-renderer": "17.0.1",
-    "@types/styled-components": "5.1.25",
+    "@types/styled-components": "5.1.34",
     "@types/styled-components-react-native": "5.1.3",
     "@types/tinycolor2": "1.4.3",
     "@types/react-router-dom": "5.3.3",
@@ -250,7 +250,7 @@
     "react-native": "0.72.3",
     "react-native-gesture-handler": "2.9.0",
     "react-native-reanimated": "3.4.2",
-    "react-native-svg": "12.3.0",
+    "react-native-svg": "15.1.0",
     "react-scripts": "5.0.1",
     "react-test-renderer": "18.2.0",
     "rollup": "3.28.1",
@@ -271,7 +271,7 @@
     "react-native-safe-area-context": "3.4.1",
     "ttypescript": "1.5.15",
     "typescript": "4.9",
-    "typescript-transform-paths": "3.4.6",
+    "typescript-transform-paths": "3.4.7",
     "@types/body-scroll-lock": "3.1.0",
     "ramda": "0.29.1",
     "@razorpay/i18nify-js": "1.8.0",
@@ -306,6 +306,8 @@
     "@storybook/**/react": "18.2.0",
     "react-dom": "18.2.0",
     "react": "18.2.0",
+    "@types/react": "18.2.24",
+    "@types/styled-components": "5.1.34",
     "styled-components": "^5"
   }
 }