@razorpay/blade 8.1.0 → 8.2.3

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

@@ -24,6 +24,7 @@ declare type Border$1 = Readonly<{
     radius: BorderRadius$1;
     width: BorderWidth$1;
 }>;
+declare const border: Border$1;
 
 declare type Breakpoints$1 = Readonly<{
     /**
@@ -94,6 +95,7 @@ declare type Breakpoints$1 = Readonly<{
      */
     xl: number;
 }>;
+declare const breakpoints: Breakpoints$1;
 
 declare type ColorChromaticScale = Readonly<{
     50: string;
@@ -157,13 +159,6 @@ declare type Color = Readonly<{
 }>;
 declare const colors: Color;
 
-declare type FontFamily$1 = {
-    /** Used for all type of textual content except code snippets */
-    text: string;
-    /** Used for code snippets  */
-    code: string;
-};
-
 declare type Opacity = Readonly<{
     /**0: 0 */
     0: number;
@@ -186,6 +181,14 @@ declare type Opacity = Readonly<{
     /**9: 1.0 */
     9: number;
 }>;
+declare const opacity: Opacity;
+
+declare type FontFamily$1 = {
+    /** Used for all type of textual content except code snippets */
+    text: string;
+    /** Used for code snippets  */
+    code: string;
+};
 
 declare type FontWeight$1 = {
     regular: 400;
@@ -338,6 +341,9 @@ declare type Typography$1 = {
         800: number;
     };
 };
+declare type TypographyPlatforms$1 = 'onDesktop' | 'onMobile';
+declare type TypographyWithPlatforms$1 = Record<TypographyPlatforms$1, Typography$1>;
+declare const typography: TypographyWithPlatforms$1;
 
 /**
  * When any of the values are changed here, do change the jsdoc comments in BaseBox/types/spacingTypes.ts as well
@@ -370,6 +376,7 @@ declare type Spacing$1 = Readonly<{
     /** 11: 56(px/rem/pt) */
     11: 56;
 }>;
+declare const spacing: Spacing$1;
 
 type BorderRadius = Readonly<{
   /** none: 0(px/rem/pt) */
@@ -670,6 +677,8 @@ type Spacing = Readonly<{
   11: 56;
 }>;
 
+type ColorSchemeModes$1 = 'onDark' | 'onLight';
+
 /* eslint-disable no-console */
 
 
@@ -809,6 +818,44 @@ type Motion$1 = Readonly<{
   easing: Easing$1;
 }>;
 
+type ElevationLevels$1 = 'none' | 'lowRaised' | 'midRaised' | 'highRaised';
+
+type ElevationStyles$1 = Readonly<{
+  elevation: number;
+  shadowColor: string;
+  shadowOpacity: number;
+  shadowRadius: number;
+  shadowOffset: {
+    /**
+     * x-axis
+     */
+    width: number;
+    /**
+     * y-axis
+     */
+    height: number;
+  };
+}>;
+
+type Elevation$1 = Record<
+  ElevationLevels$1,
+  Platform.Select<{
+    web: string;
+    native: ElevationStyles$1;
+  }>
+>;
+
+type ElevationWithColorModes$1 = Record<ColorSchemeModes$1, Elevation$1>;
+
+type DotNotationMotionStringToken<TokenType> = {
+  [K in keyof TokenType]: `${Extract<K, string>}.${TokenType[K] extends Record<
+    string,
+    string | EasingFunctionFactory$1
+  >
+    ? Extract<keyof TokenType[K], string | EasingFunctionFactory$1>
+    : DotNotationMotionStringToken<TokenType[K]>}`;
+}[keyof TokenType];
+
 /**
  *
  * When combined with union, this type utility will give you autocomplete of union while still supporting any string value as input
@@ -920,6 +967,10 @@ declare type Motion = Readonly<{
     duration: Duration;
     easing: Easing;
 }>;
+declare type EasingString = `easing.${DotNotationMotionStringToken<Easing>}`;
+declare type DurationString = `duration.${keyof Duration}`;
+declare type DelayString = `delay.${keyof Delay}`;
+declare const motion: Motion;
 
 /**
  * Size tokens are currently not exposed for users (therefore not available in theme)
@@ -976,162 +1027,143 @@ declare const size: {
 };
 declare type Size = typeof size;
 
-type ColorSchemeNames = 'dark' | 'light';
-type ColorSchemeNamesInput = ColorSchemeNames | 'system';
-
-type ColorSchemeModes = 'onDark' | 'onLight';
-
-type ShadowLevels = 1 | 2 | 3 | 4 | 5;
-
-type TextTypes = 'muted' | 'normal' | 'placeholder' | 'subdued' | 'subtle';
-
-type ColorContrastTypes = 'low' | 'high';
-
-type Shadows = {
-  offsetX: {
-    level: Record<ShadowLevels, number>;
-  };
-  offsetY: {
-    level: Record<ShadowLevels, number>;
-  };
-  blurRadius: {
-    level: Record<ShadowLevels, number>;
-  };
-  color: Record<
-    ColorSchemeModes,
-    {
-      level: Record<ShadowLevels, string>;
-    }
-  >;
-  androidElevation: {
-    level: Record<ShadowLevels, number>;
-  };
-};
-
-type Feedback = 'information' | 'negative' | 'neutral' | 'notice' | 'positive';
-
-type ColorContrast = {
-  [K in ColorContrastTypes as `${Extract<K, string>}Contrast`]: string;
+declare type ColorSchemeNames = 'dark' | 'light';
+declare type ColorSchemeNamesInput = ColorSchemeNames | 'system';
+declare type ColorSchemeModes = 'onDark' | 'onLight';
+declare type TextTypes = 'muted' | 'normal' | 'placeholder' | 'subdued' | 'subtle';
+declare type ColorContrastTypes = 'low' | 'high';
+declare type Feedback = 'information' | 'negative' | 'neutral' | 'notice' | 'positive';
+declare type ColorContrast = {
+    [K in ColorContrastTypes as `${Extract<K, string>}Contrast`]: string;
 };
-
-type ActionStates = {
-  default: string;
-  hover: string;
-  focus: string;
-  active: string;
-  disabled: string;
+declare type ActionStates = {
+    default: string;
+    hover: string;
+    focus: string;
+    active: string;
+    disabled: string;
 };
-
-type LinkActionStates = ActionStates & {
-  visited: string;
+declare type LinkActionStates = ActionStates & {
+    visited: string;
 };
-
-type ActionStatesWithContrast = {
-  default: ColorContrast;
-  hover: ColorContrast;
-  focus: ColorContrast;
-  active: ColorContrast;
-  disabled: ColorContrast;
+declare type ActionStatesWithContrast = {
+    default: ColorContrast;
+    hover: ColorContrast;
+    focus: ColorContrast;
+    active: ColorContrast;
+    disabled: ColorContrast;
 };
-
-type ActionVariants = {
-  primary: ActionStates;
-  secondary: ActionStates;
-  tertiary: ActionStates;
-  link: LinkActionStates;
+declare type ActionVariants = {
+    primary: ActionStates;
+    secondary: ActionStates;
+    tertiary: ActionStates;
+    link: LinkActionStates;
 };
-
-type ActionVariantsWithContrast = {
-  primary: ActionStatesWithContrast;
-  secondary: ActionStatesWithContrast;
-  tertiary: ActionStatesWithContrast;
-  link: ActionStatesWithContrast;
+declare 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'>;
+declare 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;
+declare 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>;
     };
-    information: {
-      action: FeedbackActions;
+    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;
+        };
     };
-    notice: {
-      action: FeedbackActions;
+    surface: {
+        background: Record<'level1' | 'level2' | 'level3', ColorContrast>;
+        border: Record<'normal' | 'subtle', ColorContrast>;
+        text: Record<TextTypes, ColorContrast>;
+        action: {
+            icon: ActionStatesWithContrast;
+        };
     };
-    neutral: {
-      action: FeedbackActions;
-    };
-  };
-  surface: {
-    background: Record<'level1' | 'level2' | 'level3', ColorContrast>;
-    border: Record<'normal' | 'subtle', ColorContrast>;
-    text: Record<TextTypes, ColorContrast>;
+    overlay: Record<'background', string>;
     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;
+        background: Omit<ActionVariants, 'link'>;
+        border: Omit<ActionVariants, 'link'>;
+        text: ActionVariants;
+        icon: ActionVariants;
     };
-    icon: {
-      blue: ColorContrast;
+    badge: {
+        background: {
+            blue: ColorContrast;
+        };
+        border: {
+            blue: ColorContrast;
+        };
+        text: {
+            blue: ColorContrast;
+        };
+        icon: {
+            blue: ColorContrast;
+        };
     };
-  };
+};
+declare type ColorsWithModes = Record<ColorSchemeModes, Colors>;
+declare type ThemeTokens = {
+    name: 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete;
+    border: Border;
+    breakpoints: Breakpoints;
+    colors: ColorsWithModes;
+    motion: Motion$1;
+    elevation: ElevationWithColorModes$1;
+    spacing: Spacing;
+    typography: TypographyWithPlatforms;
 };
 
-type ColorsWithModes = Record<ColorSchemeModes, Colors>;
+declare type ElevationLevels = 'none' | 'lowRaised' | 'midRaised' | 'highRaised';
+declare type ElevationStyles = Readonly<{
+    elevation: number;
+    shadowColor: string;
+    shadowOpacity: number;
+    shadowRadius: number;
+    shadowOffset: {
+        /**
+         * x-axis
+         */
+        width: number;
+        /**
+         * y-axis
+         */
+        height: number;
+    };
+}>;
+declare type Elevation = Record<ElevationLevels, Platform.Select<{
+    web: string;
+    native: ElevationStyles;
+}>>;
+declare type ElevationWithColorModes = Record<ColorSchemeModes, Elevation>;
 
-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$1;
-  spacing: Spacing;
-  shadows: Shadows;
-  typography: TypographyWithPlatforms;
-};
+declare const elevation: ElevationWithColorModes;
 
 declare const paymentTheme: ThemeTokens;
 
@@ -1175,6 +1207,4 @@ declare type OverrideTheme = {
  */
 declare const overrideTheme: ({ baseThemeTokens, overrides }: OverrideTheme) => ThemeTokens;
 
-declare const colorSchemeNamesInput: ColorSchemeNamesInput[];
-
-export { Border$1 as Border, Breakpoints$1 as Breakpoints, Color, ColorSchemeNames, ColorSchemeNamesInput, ColorsWithModes, FontFamily$1 as FontFamily, Motion, Opacity, Shadows, Size, Spacing$1 as Spacing, ThemeTokens, Typography$1 as Typography, bankingTheme, colorSchemeNamesInput, colors, overrideTheme, paymentTheme };
+export { Border$1 as Border, Breakpoints$1 as Breakpoints, Color, ColorSchemeNames, ColorSchemeNamesInput, ColorsWithModes, DelayString, DurationString, EasingFunctionFactory, EasingString, Elevation, ElevationWithColorModes, FontFamily$1 as FontFamily, FontSize$1 as FontSize, Motion, Opacity, Size, Spacing$1 as Spacing, ThemeTokens, Typography$1 as Typography, TypographyPlatforms$1 as TypographyPlatforms, TypographyWithPlatforms$1 as TypographyWithPlatforms, bankingTheme, border, breakpoints, colors, elevation, motion, opacity, overrideTheme, paymentTheme, size, spacing, typography };