@razorpay/blade 8.15.3 → 9.0.1

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

@@ -1,6 +1,37 @@
 import { Platform as Platform$2 } from 'react-native';
 import { MutableRefObject } from 'react';
 
+type BorderRadius = Readonly<{
+  /** none: 0(px/rem/pt) */
+  none: 0;
+  /** small: 2(px/rem/pt) */
+  small: 2;
+  /** medium: 4(px/rem/pt) */
+  medium: 4;
+  /** large: 8(px/rem/pt) */
+  large: 8;
+  /** max: 9999(px/rem/pt). This will round the left and right side of the box element */
+  max: 9999;
+  /** round: 50%(pt). This will turn the box element into a circle */
+  round: '50%';
+}>;
+
+type BorderWidth = Readonly<{
+  /** none: 0(px/rem/pt) */
+  none: 0;
+  /** thinner: 0.5(px/rem/pt) */
+  thinner: 0.5;
+  /** thin: 1(px/rem/pt) */
+  thin: 1;
+  /** thick: 1.5(px/rem/pt) */
+  thick: 1.5;
+}>;
+
+type Border = Readonly<{
+  radius: BorderRadius;
+  width: BorderWidth;
+}>;
+
 type Breakpoints = Readonly<{
   /**
    * `base` is used for responsive styling following a **mobile first** approach. It starts from 0px till the next existing token
@@ -71,6 +102,211 @@ type Breakpoints = Readonly<{
   xl: number;
 }>;
 
+type FontFamily = {
+  /** Used for all type of textual content except code snippets */
+  text: string;
+  /** Used for code snippets  */
+  code: string;
+};
+
+type FontWeight = {
+  regular: 400;
+  bold: 700;
+};
+
+/**
+ * For font size and line-heights we can’t say from xl to 2xl the value will necessary increase.
+ * it might decrease or remain same because these are alias tokens and we need aliases for cross platform.
+ * so for example xl on mobile can be 32px and on desktop xl can be 34px,
+ * similarly 2xl on mobile can be 34px but on desktop doesn’t necessarily mean 2xl will be more than xl(34px) it can be 32 as well since visually they make better hierarchy.
+ */
+
+type FontSize = {
+  /** desktop: 9(px/rem/pt)
+   *
+   * mobile: 9(px/rem/pt)
+   */
+  10: number;
+  /** desktop: 10(px/rem/pt)
+   *
+   * mobile: 10(px/rem/pt)
+   */
+  25: number;
+  /** desktop: 11(px/rem/pt)
+   *
+   * mobile: 11(px/rem/pt)
+   */
+  50: number;
+  /** desktop: 12(px/rem/pt)
+   *
+   * mobile: 12(px/rem/pt)
+   */
+  75: number;
+  /** desktop: 14(px/rem/pt)
+   *
+   * mobile: 14(px/rem/pt)
+   */
+  100: number;
+  /** desktop: 16(px/rem/pt)
+   *
+   * mobile: 16(px/rem/pt)
+   */
+  200: number;
+  /** desktop: 18(px/rem/pt)
+   *
+   * mobile: 16(px/rem/pt)
+   */
+  300: number;
+  /** desktop: 20(px/rem/pt)
+   *
+   * mobile: 18(px/rem/pt)
+   */
+  400: number;
+  /** desktop: 22(px/rem/pt)
+   *
+   * mobile: 20(px/rem/pt)
+   */
+  500: number;
+  /** desktop: 24(px/rem/pt)
+   *
+   * mobile: 20(px/rem/pt)
+   */
+  600: number;
+  /** desktop: 28(px/rem/pt)
+   *
+   * mobile: 24(px/rem/pt)
+   */
+  700: number;
+  /** desktop: 32(px/rem/pt)
+   *
+   * mobile: 28(px/rem/pt)
+   */
+  800: number;
+  /** desktop: 36(px/rem/pt)
+   *
+   * mobile: 32(px/rem/pt)
+   */
+  900: number;
+  /** desktop: 40(px/rem/pt)
+   *
+   * mobile: 32(px/rem/pt)
+   */
+  1000: number;
+};
+
+type Typography = {
+  fonts: {
+    family: FontFamily;
+    size: FontSize;
+    weight: FontWeight;
+  };
+  lineHeights: {
+    /** desktop: 0(px/rem/pt)
+     *
+     * mobile: 0(px/rem/pt)
+     */
+    0: number;
+    /** desktop: 14(px/rem/pt)
+     *
+     * mobile: 14(px/rem/pt)
+     */
+    25: number;
+    /** desktop: 16(px/rem/pt)
+     *
+     * mobile: 16(px/rem/pt)
+     */
+    50: number;
+    /** desktop: 18(px/rem/pt)
+     *
+     * mobile: 18(px/rem/pt)
+     */
+    75: number;
+    /** desktop: 20(px/rem/pt)
+     *
+     * mobile: 20(px/rem/pt)
+     */
+    100: number;
+    /** desktop: 24(px/rem/pt)
+     *
+     * mobile: 20(px/rem/pt)
+     */
+    200: number;
+    /** desktop: 24(px/rem/pt)
+     *
+     * mobile: 24(px/rem/pt)
+     */
+    300: number;
+    /** desktop: 28(px/rem/pt)
+     *
+     * mobile: 24(px/rem/pt)
+     */
+    400: number;
+    /** desktop: 32(px/rem/pt)
+     *
+     * mobile: 28(px/rem/pt)
+     */
+    500: number;
+    /** desktop: 40(px/rem/pt)
+     *
+     * mobile: 32(px/rem/pt)
+     */
+    600: number;
+    /** desktop: 40(px/rem/pt)
+     *
+     * mobile: 40(px/rem/pt)
+     */
+    700: number;
+    /** desktop: 48(px/rem/pt)
+     *
+     * mobile: 40(px/rem/pt)
+     */
+    800: number;
+  };
+  // letterSpacings: {};
+};
+
+type TypographyPlatforms = 'onDesktop' | 'onMobile';
+
+type TypographyWithPlatforms = Record<TypographyPlatforms, Typography>;
+
+/**
+ * When any of the values are changed here, do change the jsdoc comments in BaseBox/types/spacingTypes.ts as well
+ *
+ * {@link ../../components/Box/BaseBox/types/spacingTypes.ts}
+ */
+
+type Spacing = Readonly<{
+  /** 0: 0(px/rem/pt) */
+  0: 0;
+  /** 1: 2(px/rem/pt) */
+  1: 2;
+  /** 2: 4(px/rem/pt) */
+  2: 4;
+  /** 3: 8(px/rem/pt) */
+  3: 8;
+  /** 4: 12(px/rem/pt) */
+  4: 12;
+  /** 5: 16(px/rem/pt) */
+  5: 16;
+  /** 6: 20(px/rem/pt) */
+  6: 20;
+  /** 7: 24(px/rem/pt) */
+  7: 24;
+  /** 8: 32(px/rem/pt) */
+  8: 32;
+  /** 9: 40(px/rem/pt) */
+  9: 40;
+  /** 10: 48(px/rem/pt) */
+  10: 48;
+  /** 11: 56(px/rem/pt) */
+  11: 56;
+}>;
+
+type UseColorScheme$1 = {
+  colorScheme: ColorSchemeNames;
+  setColorScheme: (colorScheme: ColorSchemeNamesInput) => void;
+};
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 /**
@@ -107,9 +343,321 @@ declare namespace Platform$1 {
   >;
 }
 
+type Theme = {
+  name: ThemeTokens['name'];
+  border: Border;
+  breakpoints: Breakpoints;
+  colors: Colors;
+  spacing: Spacing;
+  motion: Motion;
+  elevation: Elevation;
+  typography: Typography;
+};
+
+type ThemeContext = UseColorScheme$1 & {
+  theme: Theme;
+  platform: TypographyPlatforms;
+};
+
+declare const ThemeContext = createContext<ThemeContext>({
+  // @ts-expect-error set null
+  theme: null,
+  colorScheme: 'light',
+  platform: 'onDesktop',
+  setColorScheme: () => null,
+});
+
+declare const useTheme = (): ThemeContext => {
+  const themeContext = useContext<ThemeContext>(ThemeContext);
+  if (!themeContext.theme) {
+    throw new Error(`[@razorpay/blade:BladeProvider]: BladeProvider is missing theme`);
+  }
+  if (themeContext === undefined) {
+    throw new Error(`[@razorpay/blade:BladeProvider]: useTheme must be used within BladeProvider`);
+  }
+  return themeContext;
+};
+
+type Duration = {
+  /** `70` milliseconds */
+  '2xquick': 70;
+  /** `150` milliseconds */
+  xquick: 150;
+  /** `200` milliseconds */
+  quick: 200;
+  /** `250` milliseconds */
+  moderate: 250;
+  /** `300` milliseconds */
+  xmoderate: 300;
+  /** `400` milliseconds */
+  gentle: 400;
+  /** `600` milliseconds */
+  xgentle: 600;
+  /** `900` milliseconds */
+  '2xgentle': 900;
+};
+
+type Delay = {
+  /** `70` milliseconds */
+  '2xshort': 70;
+  /** `120` milliseconds */
+  xshort: 120;
+  /** `180` milliseconds */
+  short: 180;
+  /** `3000` milliseconds */
+  long: 3000;
+  /** `5000` milliseconds */
+  xlong: 5000;
+};
+
+type EasingFunctionFactory = { factory: () => (value: number) => number }; // similar to EasingFunctionFactory of `react-native-reanimated`
+type EasingType<Value extends string> = Platform$1.Select<{
+  web: Value;
+  native: EasingFunctionFactory;
+}>;
+
+type Easing = {
+  /** Easings for all standard animations*/
+  standard: {
+    /** `cubic-bezier(0.5, 0, 0.3, 1.5)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    attentive: EasingType<'cubic-bezier(0.5, 0, 0.3, 1.5)'>;
+    /** `cubic-bezier(0.3, 0, 0.2, 1)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    effective: EasingType<'cubic-bezier(0.3, 0, 0.2, 1)'>;
+    /** `cubic-bezier(0.5, 0, 0, 1)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    revealing: EasingType<'cubic-bezier(0.5, 0, 0, 1)'>;
+    /** `cubic-bezier(1, 0.5, 0, 0.5)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    wary: EasingType<'cubic-bezier(1, 0.5, 0, 0.5)'>;
+  };
+  /** Easings for all entrance animations*/
+  entrance: {
+    /** `cubic-bezier(0.5, 0, 0.3, 1.5)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    attentive: EasingType<'cubic-bezier(0.5, 0, 0.3, 1.5)'>;
+    /** `cubic-bezier(0, 0, 0.2, 1)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    effective: EasingType<'cubic-bezier(0, 0, 0.2, 1)'>;
+    /** `cubic-bezier(0, 0, 0, 1)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    revealing: EasingType<'cubic-bezier(0, 0, 0, 1)'>;
+  };
+  /** Easings for all exit animations*/
+  exit: {
+    /** `cubic-bezier(0.7, 0, 0.5, 1)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    attentive: EasingType<'cubic-bezier(0.7, 0, 0.5, 1)'>;
+    /** `cubic-bezier(0.17, 0, 1, 1)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    effective: EasingType<'cubic-bezier(0.17, 0, 1, 1)'>;
+    /** `cubic-bezier(0.5, 0, 1, 1)`
+     *
+     *  Returns a `string` of `"cubic-bezier(...)"` for web & react-native-reanimated's Easing Function of type `EasingFunctionFactory` for native */
+    revealing: EasingType<'cubic-bezier(0.5, 0, 1, 1)'>;
+  };
+};
+
+type Motion = Readonly<{
+  delay: Delay;
+  duration: Duration;
+  easing: Easing;
+}>;
+
+type ElevationLevels = 'none' | 'lowRaised' | 'midRaised' | 'highRaised';
+
+type ElevationStyles = Readonly<{
+  elevation: number;
+  shadowColor: string;
+  shadowOpacity: number;
+  shadowRadius: number;
+  shadowOffset: {
+    /**
+     * x-axis
+     */
+    width: number;
+    /**
+     * y-axis
+     */
+    height: number;
+  };
+}>;
+
+type Elevation = Record<
+  ElevationLevels,
+  Platform$1.Select<{
+    web: string;
+    native: ElevationStyles;
+  }>
+>;
+
+type ElevationWithColorModes = Record<ColorSchemeModes, Elevation>;
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+
+/**
+ *
+ * When combined with union, this type utility will give you autocomplete of union while still supporting any string value as input
+ *
+ * ### Usage
+ *
+ * ```ts
+ * type ThemeName = 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete;
+ * ```
+ *
+ * This will show paymentTheme and bankingTheme in autocomplete but also allow any other string as value.
+ *
+ * More details - https://github.com/razorpay/blade/pull/1031/commits/86b6ee0facf45e7556739efcbfa5396b11b1b3c9#r1121298293
+ * Related TS Issue - https://github.com/microsoft/TypeScript/issues/29729
+ *
+ */
+type StringWithAutocomplete = string & Record<never, never>;
+
 type ColorSchemeNames = 'dark' | 'light';
 type ColorSchemeNamesInput = ColorSchemeNames | 'system';
 
+type ColorSchemeModes = 'onDark' | 'onLight';
+
+type TextTypes = 'muted' | 'normal' | 'placeholder' | 'subdued' | 'subtle';
+
+type ColorContrastTypes = 'low' | 'high';
+
+type Feedback = 'information' | 'negative' | 'neutral' | 'notice' | 'positive';
+
+type ColorContrast = {
+  [K in ColorContrastTypes as `${Extract<K, string>}Contrast`]: string;
+};
+
+type ActionStates = {
+  default: string;
+  hover: string;
+  focus: string;
+  active: string;
+  disabled: string;
+};
+
+type LinkActionStates = ActionStates & {
+  visited: string;
+};
+
+type ActionStatesWithContrast = {
+  default: ColorContrast;
+  hover: ColorContrast;
+  focus: ColorContrast;
+  active: ColorContrast;
+  disabled: ColorContrast;
+};
+
+type ActionVariants = {
+  primary: ActionStates;
+  secondary: ActionStates;
+  tertiary: ActionStates;
+  link: LinkActionStates;
+};
+
+type ActionVariantsWithContrast = {
+  primary: ActionStatesWithContrast;
+  secondary: ActionStatesWithContrast;
+  tertiary: ActionStatesWithContrast;
+  link: ActionStatesWithContrast;
+};
+
+// export type ActionProperties = {
+//   background: ActionVariants;
+//   border: ActionVariants;
+//   text: ActionVariants;
+//   icon: ActionVariants;
+// };
+
+type FeedbackActions = {
+  background: Pick<ActionVariantsWithContrast, 'primary'>;
+  border: Pick<ActionVariantsWithContrast, 'primary'>;
+  text: Pick<ActionVariantsWithContrast, 'link' | 'primary'>;
+  icon: Pick<ActionVariantsWithContrast, 'link' | 'primary'>;
+};
+
+type Colors = {
+  brand: {
+    primary: Record<300 | 400 | 500 | 600 | 700 | 800, string>;
+    secondary: Record<500, string>;
+    gray: Record<200 | 300 | 400 | 500 | 600 | 700 | 'a50' | 'a100', ColorContrast>;
+  };
+  feedback: {
+    background: Record<Feedback, ColorContrast>;
+    border: Record<Feedback, ColorContrast>;
+    text: Record<Feedback, ColorContrast>;
+    icon: Record<Feedback, ColorContrast>;
+    positive: {
+      action: FeedbackActions;
+    };
+    negative: {
+      action: FeedbackActions;
+    };
+    information: {
+      action: FeedbackActions;
+    };
+    notice: {
+      action: FeedbackActions;
+    };
+    neutral: {
+      action: FeedbackActions;
+    };
+  };
+  surface: {
+    background: Record<'level1' | 'level2' | 'level3', ColorContrast>;
+    border: Record<'normal' | 'subtle', ColorContrast>;
+    text: Record<TextTypes, ColorContrast>;
+    action: {
+      icon: ActionStatesWithContrast;
+    };
+  };
+  overlay: Record<'background', string>;
+  action: {
+    background: Omit<ActionVariants, 'link'>;
+    border: Omit<ActionVariants, 'link'>;
+    text: ActionVariants;
+    icon: ActionVariants;
+  };
+  badge: {
+    background: {
+      blue: ColorContrast;
+    };
+    border: {
+      blue: ColorContrast;
+    };
+    text: {
+      blue: ColorContrast;
+    };
+    icon: {
+      blue: ColorContrast;
+    };
+  };
+};
+
+type ColorsWithModes = Record<ColorSchemeModes, Colors>;
+
+type ThemeTokens = {
+  name: 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete; // Can be used to watch over state changes between theme without watching over entire theme object
+  border: Border;
+  breakpoints: Breakpoints;
+  colors: ColorsWithModes;
+  motion: Motion;
+  elevation: ElevationWithColorModes;
+  spacing: Spacing;
+  typography: TypographyWithPlatforms;
+};
+
 declare const getColorScheme: (colorScheme?: ColorSchemeNamesInput) => ColorSchemeNames;
 
 declare const getMediaQuery: ({ min, max }: {
@@ -237,4 +785,4 @@ declare const toTitleCase: (inputString: string) => string;
  */
 declare function usePrevious<T>(value: T): MutableRefObject<T | undefined>['current'];
 
-export { MakeSize, Platform, PlatformTypes, UseColorScheme, castNativeType, castWebType, getColorScheme, getMediaQuery, getOS, getPlatformType, isAndroid, isReactNative, makeBorderSize, makeMotionTime, makeSize, makeSpace, makeTypographySize, toTitleCase, useBreakpoint, useColorScheme, usePrevious };
+export { MakeSize, Platform, PlatformTypes, ThemeContext, UseColorScheme, castNativeType, castWebType, getColorScheme, getMediaQuery, getOS, getPlatformType, isAndroid, isReactNative, makeBorderSize, makeMotionTime, makeSize, makeSpace, makeTypographySize, toTitleCase, useBreakpoint, useColorScheme, usePrevious, useTheme };

package/build/utils/index.native.js

@@ -1,6 +1,6 @@
 import { Appearance, Platform as Platform$1 } from 'react-native';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useMemo, useCallback, useState, useEffect, useRef } from 'react';
+import { useMemo, useCallback, useState, useEffect, useRef, createContext, useContext } from 'react';
 
 var getColorScheme=function getColorScheme(){var colorScheme=arguments.length>0&&arguments[0]!==undefined?arguments[0]:'light';if(colorScheme==='light'||colorScheme==='dark'){return colorScheme;}if(colorScheme==='system'){var _Appearance$getColorS;return (_Appearance$getColorS=Appearance.getColorScheme())!=null?_Appearance$getColorS:'light';}return 'light';};
 
@@ -36,5 +36,7 @@ var toTitleCase=function toTitleCase(inputString){return inputString.toLowerCase
 
 function usePrevious(value){var ref=useRef();useEffect(function(){ref.current=value;},[value]);return ref.current;}
 
-export { Platform, castNativeType, castWebType, getColorScheme, getMediaQuery, getOS, getPlatformType, isAndroid, isReactNative, makeBorderSize, makeMotionTime, makeSize, makeSpace, makeTypographySize, toTitleCase, useBreakpoint, useColorScheme, usePrevious };
+var ThemeContext=createContext({theme:null,colorScheme:'light',platform:'onDesktop',setColorScheme:function setColorScheme(){return null;}});var useTheme=function useTheme(){var themeContext=useContext(ThemeContext);if(!themeContext.theme){throw new Error("[@razorpay/blade:BladeProvider]: BladeProvider is missing theme");}if(themeContext===undefined){throw new Error("[@razorpay/blade:BladeProvider]: useTheme must be used within BladeProvider");}return themeContext;};
+
+export { Platform, ThemeContext, castNativeType, castWebType, getColorScheme, getMediaQuery, getOS, getPlatformType, isAndroid, isReactNative, makeBorderSize, makeMotionTime, makeSize, makeSpace, makeTypographySize, toTitleCase, useBreakpoint, useColorScheme, usePrevious, useTheme };
 //# sourceMappingURL=index.native.js.map