@razorpay/blade

/// <reference types="react" /> import * as React$1 from 'react'; import React__default, { ReactNode, ReactElement, SyntheticEvent, ImgHTMLAttributes, HTMLAttributeReferrerPolicy, ReactChild, KeyboardEvent } from 'react'; import { View, ViewStyle, AccessibilityRole, GestureResponderEvent, TouchableOpacity } from 'react-native'; import { CSSObject } from 'styled-components'; import * as csstype from 'csstype'; import { ReactDOMAttributes } from '@use-gesture/react/dist/declarations/src/types'; import { CurrencyCodeType } from '@razorpay/i18nify-js/currency'; import { AnimationControls, TargetAndTransition, Tween } from 'framer-motion'; import { DateValue, DatesRangeValue, DatePickerProps as DatePickerProps$1, DayOfWeek } from '@mantine/dates'; export { DateValue, DatesRangeValue } from '@mantine/dates'; import { Placement, UseFloatingOptions } from '@floating-ui/react'; import { CountryCodeType } from '@razorpay/i18nify-js'; import { Toast } from 'react-hot-toast'; type BorderRadius = Readonly<{ /** none: 0(px/rem/pt) */ none: 0; /** xsmall: 1(px/rem/pt) */ xsmall: 1; /** small: 2(px/rem/pt) */ small: 2; /** medium: 4(px/rem/pt) */ medium: 4; /** large: 8(px/rem/pt) */ large: 8; /** xlarge: 12(px/rem/pt) */ xlarge: 12; /** 2xlarge: 16(px/rem/pt) */ '2xlarge': 16; /** 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; /** thicker: 2(px/rem/pt) */ thicker: 2; }>; 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 * * Think of this as styles without any media query. * * ### Example * * This code will set margin as `spacing.2` on "m" size screens and above. And as `spacing.1` on less than "m" size screens * ```jsx * <Box margin={{ base: 'spacing.1', m: 'spacing.2' }} /> * ``` * * This roughly translates into - * * ``` * .Box { * margin: 'spacing.1'; * } * * ＠media screen and (min-width: 768px) { * .Box { * margin: 'spacing.2'; * } * } * ``` */ base: number; /** * `@media screen and (min-width: 320px)` * * Small Mobiles */ xs: number; /** * `@media screen and (min-width: 480px)` * * Mobiles and Small Tablets */ s: number; /** * `@media screen and (min-width: 768px)` * * Medium and Large Tablets. * * Dimensions with `m` and above can be treated as desktop in mobile-first approach (with min-width). * Hence this breakpoint can be used for desktop styling. * * E.g. next example will keep flexDirection `row` on mobiles and `column` on large tablets, desktop, and larger screens * * ```jsx * <Box display="flex" flexDirection={{ base: 'row', m: 'column' }} /> * ``` * */ m: number; /** * `@media screen and (min-width: 1024px)` * * Desktop */ l: number; /** * `@media screen and (min-width: 1200px)` * * HD Desktop */ xl: number; }>; type FontFamily = { /** Used for all type of textual content except code snippets, and headings */ text: string; /** Used for code snippets */ code: string; /** Used for headings */ heading: string; }; type FontWeight = { regular: 400; medium: 500; semibold: 600; 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: 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: 24(px/rem/pt) * * mobile: 20(px/rem/pt) */ 500: number; /** desktop: 32(px/rem/pt) * * mobile: 24(px/rem/pt) */ 600: number; /** desktop: 40(px/rem/pt) * * mobile: 32(px/rem/pt) */ 700: number; /** desktop: 48(px/rem/pt) * * mobile: 34(px/rem/pt) */ 800: number; /** desktop: 56(px/rem/pt) * * mobile: 36(px/rem/pt) */ 900: number; /** desktop: 64(px/rem/pt) * * mobile: 38(px/rem/pt) */ 1000: number; /** desktop: 72(px/rem/pt) * * mobile: 40(px/rem/pt) */ 1100: 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: 24(px/rem/pt) */ 200: number; /** desktop: 24(px/rem/pt) * * mobile: 22(px/rem/pt) */ 300: number; /** desktop: 26(px/rem/pt) * * mobile: 24(px/rem/pt) */ 400: number; /** desktop: 32(px/rem/pt) * * mobile: 26(px/rem/pt) */ 500: number; /** desktop: 38(px/rem/pt) * * mobile: 32(px/rem/pt) */ 600: number; /** desktop: 46(px/rem/pt) * * mobile: 38(px/rem/pt) */ 700: number; /** desktop: 56(px/rem/pt) * * mobile: 40(px/rem/pt) */ 800: number; /** desktop: 64(px/rem/pt) * * mobile: 42(px/rem/pt) */ 900: number; /** desktop: 70(px/rem/pt) * * mobile: 46(px/rem/pt) */ 1000: number; /** desktop: 78(px/rem/pt) * * mobile: 48(px/rem/pt) */ 1100: number; }; letterSpacings: { /** -1% */ 50: number; /** 0% */ 100: number; }; }; 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 = { colorScheme: ColorSchemeNames; setColorScheme: (colorScheme: ColorSchemeNamesInput) => void; }; /** * Brands a type making them act as nominal * @see https://medium.com/@KevinBGreene/surviving-the-typescript-ecosystem-branding-and-type-tagging-6cf6e516523d */ type Brand<Type, Name extends string> = Type & { __brand__?: Name; }; type NativeOrWebBrand = Brand<any, 'native' | 'web'>; declare namespace Platform { type Name = 'web'; /** * Right now, the module resolution is set to resolve `.web` files, * * Thus Platform.Select<> type will return the `web` type */ type Select<Options extends { web: unknown; native: unknown; }> = Brand<Options[Name], 'platform-web'>; type CastNative<T extends NativeOrWebBrand | undefined> = Extract<T, { __brand__?: 'platform-native' | 'platform-all'; }>; type CastWeb<T extends NativeOrWebBrand | undefined> = Extract<T, { __brand__?: 'platform-web' | 'platform-all'; }>; } type BladeProviderProps = { themeTokens: ThemeTokens; colorScheme?: ColorSchemeNamesInput; children: ReactNode; }; declare const BladeProvider: ({ themeTokens, colorScheme: initialColorScheme, children, }: BladeProviderProps) => ReactElement; type Theme = { name: ThemeTokens['name']; border: Border; breakpoints: Breakpoints; colors: Colors; spacing: Spacing; motion: Motion; elevation: Elevation; typography: Typography; }; type ThemeContext = UseColorScheme & { theme: Theme; platform: TypographyPlatforms; }; declare const ThemeContext: React$1.Context<ThemeContext>; declare const useTheme: () => ThemeContext; type Duration = { /** `80` milliseconds */ '2xquick': 80; /** `160` milliseconds */ xquick: 160; /** `200` milliseconds */ quick: 200; /** `280` milliseconds */ moderate: 280; /** `360` milliseconds */ xmoderate: 360; /** `480` milliseconds */ gentle: 480; /** `640` milliseconds */ xgentle: 640; /** `960` milliseconds */ '2xgentle': 960; }; type Delay = { /** `80` milliseconds */ '2xquick': 80; /** `160` milliseconds */ xquick: 160; /** `280` milliseconds */ moderate: 280; /** `480` milliseconds */ gentle: 480; /** `960` milliseconds */ xgentle: 960; /** `2000` milliseconds */ long: 2000; /** `3000` milliseconds */ xlong: 3000; /** `5000` milliseconds */ '2xlong': 5000; }; type EasingFactoryFn = { factory: () => (value: number) => number; }; type EasingType<Value extends string> = Platform.Select<{ web: Value; native: EasingFactoryFn; }>; type Easing = { /** * Linear Easing * * Use Case: Marquee, Progress Bar, etc * * Returns cubic-bezier string in web and EasingFactoryFn of react-native-reanimated in native */ linear: EasingType<'cubic-bezier(0, 0, 0, 0)'>; /** * Entrance Animation Easing * * Use Case: Entry of modals, drawer, dropdown, etc * * Returns cubic-bezier string in web and EasingFactoryFn of react-native-reanimated in native */ entrance: EasingType<'cubic-bezier(0, 0, 0.2, 1)'>; /** * Exit Animation Easing * * Use Case: Exit of modals, drawer, dropdown, etc * * Returns cubic-bezier string in web and EasingFactoryFn of react-native-reanimated in native */ exit: EasingType<'cubic-bezier(0.17, 0, 1, 1)'>; /** * Standard Easing * * Use Case: Morph * * Returns cubic-bezier string in web and EasingFactoryFn of react-native-reanimated in native */ standard: EasingType<'cubic-bezier(0.3, 0, 0.2, 1)'>; /** * Emphasized Easing * * Use Case: Hover states of interactive items * * Returns cubic-bezier string in web and EasingFactoryFn of react-native-reanimated in native */ emphasized: EasingType<'cubic-bezier(0.5, 0, 0, 1)'>; /** * Overshoot Easing * * Use Case: Toast notifications * * Returns cubic-bezier string in web and EasingFactoryFn of react-native-reanimated in native */ overshoot: EasingType<'cubic-bezier(0.5, 0, 0.3, 1.5)'>; /** * Error Easing * * Use Case: Error States * * Returns cubic-bezier string in web and EasingFactoryFn of react-native-reanimated in native */ shake: EasingType<'cubic-bezier(1, 0.5, 0, 0.5)'>; }; type Motion = Readonly<{ delay: Delay; duration: Duration; easing: Easing; }>; type DotNotationSpacingStringToken = `spacing.${keyof Spacing}`; /** * Use this when you want children to be string. * * This covers scenarios like * ```jsx * <Heading>Hi</Heading> * <Heading>{dynamicVariable} something</Heading> * ``` * * * ### Usage * * ```ts * import type { StringChildrenType } from '~helpers/types'; * * type MyProps = { * children: StringChildrenType; * } * ``` */ type StringChildrenType = React__default.ReactText | React__default.ReactText[]; /** * * 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 = 'themeOne' | 'themeTwo' | StringWithAutocomplete; * ``` * * This will show themeOne and themeTwo 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 TestID = { /** * Test id that can be used to select element in testing environments * * Checkout https://testing-library.com/docs/queries/bytestid/ */ testID?: string; }; /** * Similar to `Pick` except this returns `never` when value doesn't exist (native `Pick` returns `unknown`). * * You might have to ts-ignore the non-existing type error while using this. This is done so that you can get jsdoc from actual type. * * E.g. This will pick from ViewStyle prop if value exists else returns undefined. * * ```ts * // @ts-expect-error: T passed here may not neccessarily exist. We return `never` type when it doesn't * native: PickIfExist<ViewStyle, T>; * ``` */ type PickIfExist<T, K extends keyof T> = { [P in K]: P extends keyof T ? T[P] : never; }; /** * Picks the types based on the platform (web / native). * * E.g. * ```ts * type CSSObject = PickCSSByPlatform<'display'> * // On Web --> This will be all possible web display properties like `block`, `flex`, `inline`, and more. * // On Native --> This will be just `flex` and `none` * ``` */ type PickCSSByPlatform<T extends keyof React__default.CSSProperties | keyof ViewStyle> = Platform.Select<{ web: PickIfExist<CSSObject, T>; native: PickIfExist<ViewStyle, T>; }>; type BladeElementRef = Platform.Select<{ web: HTMLElement; native: View; }>; type ContainerElementType = Platform.Select<{ web: HTMLDivElement; native: View; }>; /** * This type is used to add data-analytics attributes to components. * This is used to track user interactions on the components. * The key is always `data-analytics-` followed by the attribute name. * eg: `data-analytics-action="click"` * eg: `data-analytics-section="header"` */ type DataAnalyticsAttribute = { [key: DataAnalyticsKey]: string; }; type ColorSchemeNames = 'dark' | 'light'; type ColorSchemeNamesInput = ColorSchemeNames | 'system'; type ColorSchemeModes = 'onDark' | 'onLight'; type FeedbackColors = 'information' | 'negative' | 'neutral' | 'notice' | 'positive'; type Emphasis = { subtle: string; moderate: string; intense: string; normal: string; muted: string; disabled: string; }; type SubtleOrIntenseEmphasis = Pick<Emphasis, 'subtle' | 'intense'>; type SubtleOrIntense = keyof SubtleOrIntenseEmphasis; type InteractiveStates = { default: string; highlighted: string; disabled: string; faded: string; }; type OnEmphasis = { onSubtle: string; onIntense: string; }; type ColorCategories = { staticBlack: Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>; staticWhite: Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>; gray: Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>; onSea: Pick<OnEmphasis, 'onSubtle' | 'onIntense'>; onCloud: Pick<OnEmphasis, 'onSubtle' | 'onIntense'>; primary: Pick<Emphasis, 'normal'>; }; type InteractiveColorKeys = FeedbackColors | Exclude<keyof ColorCategories, 'onSea' | 'onCloud'>; type Colors = { interactive: { background: Record<InteractiveColorKeys, InteractiveStates & { fadedHighlighted: string; }>; border: Record<InteractiveColorKeys, InteractiveStates>; text: Record<InteractiveColorKeys | 'onPrimary', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>; icon: Record<InteractiveColorKeys | 'onPrimary', Pick<Emphasis, 'normal' | 'subtle' | 'muted' | 'disabled'>>; }; feedback: { background: Record<FeedbackColors, SubtleOrIntenseEmphasis>; border: Record<FeedbackColors, SubtleOrIntenseEmphasis>; text: Record<FeedbackColors, SubtleOrIntenseEmphasis>; icon: Record<FeedbackColors, SubtleOrIntenseEmphasis>; }; surface: { background: { gray: Pick<Emphasis, 'subtle' | 'moderate' | 'intense'>; primary: SubtleOrIntenseEmphasis; sea: SubtleOrIntenseEmphasis; cloud: SubtleOrIntenseEmphasis; }; border: { gray: Pick<Emphasis, 'normal' | 'subtle' | 'muted'>; primary: Pick<Emphasis, 'normal' | 'muted'>; }; text: ColorCategories; icon: ColorCategories; }; overlay: { background: Pick<Emphasis, 'moderate' | 'subtle'>; }; popup: { background: SubtleOrIntenseEmphasis; border: SubtleOrIntenseEmphasis; }; transparent: string; }; type ColorsWithModes = Record<ColorSchemeModes, Colors>; type ThemeTokens = { name: 'bladeTheme' | StringWithAutocomplete; border: Border; breakpoints: Breakpoints; colors: ColorsWithModes; motion: Motion; elevation: ElevationWithColorModes; spacing: Spacing; typography: TypographyWithPlatforms; }; 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.Select<{ web: string; native: ElevationStyles; }>>; type ElevationWithColorModes = Record<ColorSchemeModes, Elevation>; /** * Returns the value or the responsive object with that value * * ## Usage * * Example if you pass string argument, return type will be string or responsive object with string value * * `MakeValueResponsive<string>` * ```ts * string | * { * base?: string; * xs?: string; * s?: string; * // ... other breakpoints * } * ``` * */ type MakeValueResponsive<T> = [T] extends [never] ? never : T | { [P in keyof Breakpoints]?: T; }; /** * Turns all the values in object into responsive object. * * ```ts * MakeObjectResponsive<{ hello: string}> * * // Outputs: * { * hello: string | { * base?: string; * xs?: string; * s?: string; * // ... other breakpoints * } * } * ``` */ type MakeObjectResponsive<T, K extends keyof T = Extract<keyof T, string>> = { [P in K]: MakeValueResponsive<T[P]>; }; type ArrayOfMaxLength4<T> = readonly [T?, T?, T?, T?]; type SpaceUnits = 'px' | '%' | 'fr' | 'rem' | 'em' | 'vh' | 'vw'; type SpacingValueType = DotNotationSpacingStringToken | `${string}${SpaceUnits}` | `calc(${string})` | 'auto' | `min(${string})` | `max(${string})` | 'none' | 'initial' | 'fit-content' | 'max-content' | 'min-content'; /** * @IMPORTANT * * I wish there was better way to re-use jsdoc but I checked and there isn't so we have to explicitly add docs to each prop. * * When you want to change a specific token value, you can select the entire block of spacing value mapping and do find and replace on it * * Checkout example of find and replace query- * {@link https://user-images.githubusercontent.com/30949385/221802507-40c7adbc-484a-47b3-9035-ae1e97080b51.png} * */ type PaddingProps = MakeObjectResponsive<{ /** * ### Padding Shorthand * * #### Usage * * ```jsx * padding="spacing.3" * padding="20px" * padding={["spacing.3", "spacing.1", "spacing.0", "10px"]} * ``` * * --- * #### Spacing to Pixel values * * - `spacing.0` - 0px * - `spacing.1` - 2px * - `spacing.2` - 4px * - `spacing.3` - 8px * - `spacing.4` - 12px * - `spacing.5` - 16px * - `spacing.6` - 20px * - `spacing.7` - 24px * - `spacing.8` - 32px * - `spacing.9` - 40px * - `spacing.10` - 48px * - `spacing.11` - 56px * * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--docs&globals=measureEnabled:false Spacing Token Ref} * */ padding: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>; /** * ### Padding Horizontal * * #### Usage * * ```jsx * paddingX="spacing.3" * paddingX="20px" * ``` * * --- * #### Spacing to Pixel values * * - `spacing.0` - 0px * - `spacing.1` - 2px * - `spacing.2` - 4px * - `spacing.3` - 8px * - `spacing.4` - 12px * - `spacing.5` - 16px * - `spacing.6` - 20px * - `spacing.7` - 24px * - `spacing.8` - 32px * - `spacing.9` - 40px * - `spacing.10` - 48px * - `spacing.11` - 56px * * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--docs&globals=measureEnabled:false Spacing Token Ref} * */ paddingX: SpacingValueType; /** * ### Padding Vertical * * #### Usage * * ```jsx * paddingY="spacing.3" * paddingY="20px" * ``` * * --- * #### Spacing to Pixel values * * - `spacing.0` - 0px * - `spacing.1` - 2px * - `spacing.2` - 4px * - `spacing.3` - 8px * - `spacing.4` - 12px * - `spacing.5` - 16px * - `spacing.6` - 20px * - `spacing.7` - 24px * - `spacing.8` - 32px * - `spacing.9` - 40px * - `spacing.10` - 48px * - `spacing.11` - 56px * * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--docs&globals=measureEnabled:false Spacing Token Ref} * */ paddingY: SpacingValueType; /** * ### Padding Top * * #### Usage * * ```jsx * paddingTop="spacing.3" * paddingTop="20px" * ``` * * --- * #### Spacing to Pixel values * * - `spacing.0` - 0px * - `spacing.1` - 2px * - `spacing.2` - 4px * - `spacing.3` - 8px * - `spacing.4` - 12px * - `spacing.5` - 16px * - `spacing.6` - 20px * - `spacing.7` - 24px * - `spacing.8` - 32px * - `spacing.9` - 40px * - `spacing.10` - 48px * - `spacing.11` - 56px * * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--docs&globals=measureEnabled:false Spacing Token Ref} */ paddingTop: SpacingValueType; /** * ### Padding Right * * #### Usage * * ```jsx * paddingRight="spacing.3" * paddingRight="20px" * ``` * * --- * #### Spacing to Pixel values * * - `spacing.0` - 0px * - `spacing.1` - 2px * - `spacing.2` - 4px * - `spacing.3` - 8px * - `spacing.4` - 12px * - `spacing.5` - 16px * - `spacing.6` - 20px * - `spacing.7` - 24px * - `spacing.8` - 32px * - `spacing.9` - 40px * - `spacing.10` - 48px * - `spacing.11` - 56px * * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--docs&globals=measureEnabled:false Spacing Token Ref} */ paddingRight: SpacingValueType; /** * ### Padding Bottom * * #### Usage * * ```jsx * paddingBottom="spacing.3" * paddingBottom="20px" * ``` * * --- * #### Spacing to Pixel values * * - `spacing.0` - 0px * - `spacing.1` - 2px * - `spacing.2` - 4px * - `spacing.3` - 8px * - `spacing.4` - 12px * - `spacing.5` - 16px * - `spacing.6` - 20px * - `spacing.7` - 24px * - `spacing.8` - 32px * - `spacing.9` - 40px * - `spacing.10` - 48px * - `spacing.11` - 56px * * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--docs&globals=measureEnabled:false Spacing Token Ref} */ paddingBottom: SpacingValueType; /** * ### Padding Left * * #### Usage * * ```jsx * paddingLeft="spacing.3" * paddingLeft="20px" * ``` * * --- * #### Spacing to Pixel values * * - `spacing.0` - 0px * - `spacing.1` - 2px * - `spacing.2` - 4px * - `spacing.3` - 8px * - `spacing.4` - 12px * - `spacing.5` - 16px * - `spacing.6` - 20px * - `spacing.7` - 24px * - `spacing.8` - 32px * - `spacing.9` - 40px * - `spacing.10` - 48px * - `spacing.11` - 56px * * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--docs&globals=measureEnabled:false Spacing Token Ref} */ paddingLeft: SpacingValueType; }>; type MarginProps = MakeObjectResponsive<{ /** * ### Margin Shorthand * * #### Usage * * ```jsx * margin="spacing.3" * margin="20px" * margin={["spacing.3", "spacing.1", "spacing.0", "10px"]} * ``` * * --- * #### Spacing to Pixel values * * - `spacing.0` - 0px * - `spacing.1` - 2px * - `spacing.2` - 4px * - `spacing.3` - 8px * - `spacing.4` - 12px * - `spacing.5` - 16px * - `spacing.6` - 20px * - `spacing.7` - 24px * - `spacing.8` - 32px * - `spacing.9` - 40px * - `spacing.10` - 48px * - `spacing.11` - 56px * * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--docs&globals=measureEnabled:false Spacing Token Ref} * */ margin: SpacingValueType | ArrayOfMaxLength4<SpacingValueType>; /** * ### Margin Horizontal * * #### Usage * * ```jsx * marginX="spacing.3" * marginX="20px" * ``` * * --- * #### Spacing to Pixel values * * - `spacing.0` - 0px * - `spacing.1` - 2px * - `spacing.2` - 4px * - `spacing.3` - 8px * - `spacing.4` - 12px * - `spacing.5` - 16px * - `spacing.6` - 20px * - `spacing.7` - 24px * - `spacing.8` - 32px * - `spacing.9` - 40px * - `spacing.10` - 48px * - `spacing.11` - 56px * * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--docs&globals=measureEnabled:false Spacing Token Ref} * */ marginX: SpacingValueType; /** * ### Margin Vertical * * #### Usage * * ```jsx * marginY="spacing.3" * marginY="20px" * ``` * * --- * #### Spacing to Pixel values * * - `spacing.0` - 0px * - `spacing.1` - 2px * - `spacing.2` - 4px * - `spacing.3` - 8px * - `spacing.4` - 12px * - `spacing.5` - 16px * - `spacing.6` - 20px * - `spacing.7` - 24px * - `spacing.8` - 32px * - `spacing.9` - 40px * - `spacing.10` - 48px * - `spacing.11` - 56px * * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--docs&globals=measureEnabled:false Spacing Token Ref} * */ marginY: SpacingValueType; /** * ### Margin Top * * #### Usage * * ```jsx * marginTop="spacing.3" * marginTop="20px" * ``` * * --- * #### Spacing to Pixel values * * - `spacing.0` - 0px * - `spacing.1` - 2px * - `spacing.2` - 4px * - `spacing.3` - 8px * - `spacing.4` - 12px * - `spacing.5` - 16px * - `spacing.6` - 20px * - `spacing.7` - 24px * - `spacing.8` - 32px * - `spacing.9` - 40px * - `spacing.10` - 48px * - `spacing.11` - 56px * * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--docs&globals=measureEnabled:false Spacing Token Ref} */ marginTop: SpacingValueType; /** * ### Margin Right * * #### Usage * * ```jsx * marginRight="spacing.3" * marginRight="20px" * ``` * * --- * #### Spacing to Pixel values * * - `spacing.0` - 0px * - `spacing.1` - 2px * - `spacing.2` - 4px * - `spacing.3` - 8px * - `spacing.4` - 12px * - `spacing.5` - 16px * - `spacing.6` - 20px * - `spacing.7` - 24px * - `spacing.8` - 32px * - `spacing.9` - 40px * - `spacing.10` - 48px * - `spacing.11` - 56px * * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--docs&globals=measureEnabled:false Spacing Token Ref} */ marginRight: SpacingValueType; /** * ### Margin Bottom * * #### Usage * * ```jsx * marginBottom="spacing.3" * marginBottom="20px" * ``` * * --- * #### Spacing to Pixel values * * - `spacing.0` - 0px * - `spacing.1` - 2px * - `spacing.2` - 4px * - `spacing.3` - 8px * - `spacing.4` - 12px * - `spacing.5` - 16px * - `spacing.6` - 20px * - `spacing.7` - 24px * - `spacing.8` - 32px * - `spacing.9` - 40px * - `spacing.10` - 48px * - `spacing.11` - 56px * * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--docs&globals=measureEnabled:false Spacing Token Ref} */ marginBottom: SpacingValueType; /** * ### Margin Left * * #### Usage * * ```jsx * marginLeft="spacing.3" * marginLeft="20px" * ``` * * --- * #### Spacing to Pixel values * * - `spacing.0` - 0px * - `spacing.1` - 2px * - `spacing.2` - 4px * - `spacing.3` - 8px * - `spacing.4` - 12px * - `spacing.5` - 16px * - `spacing.6` - 20px * - `spacing.7` - 24px * - `spacing.8` - 32px * - `spacing.9` - 40px * - `spacing.10` - 48px * - `spacing.11` - 56px * * {@linkcode https://blade.razorpay.com/?path=/story/tokens-spacing--docs&globals=measureEnabled:false Spacing Token Ref} */ marginLeft: SpacingValueType; }>; type BladeCommonEvents = { onBlur?: Platform.Select<{ native: undefined | ((event: any) => void); web: React.FocusEventHandler; }>; onFocus?: Platform.Select<{ native: undefined | ((event: any) => void); web: React.FocusEventHandler; }>; onMouseLeave?: Platform.Select<{ web: React.MouseEventHandler; native: undefined; }>; onMouseMove?: Platform.Select<{ web: React.MouseEventHandler; native: undefined; }>; onMouseDown?: Platform.Select<{ web: React.MouseEventHandler; native: undefined | ((event: any) => void); }>; onMouseUp?: Platform.Select<{ web: React.MouseEventHandler; native: undefined | ((event: any) => void); }>; onPointerDown?: Platform.Select<{ web: React.PointerEventHandler; native: undefined; }>; onPointerEnter?: Platform.Select<{ web: React.PointerEventHandler; native: undefined; }>; onTouchStart?: Platform.Select<{ native: undefined | ((event: any) => void); web: React.TouchEventHandler; }>; onTouchEnd?: Platform.Select<{ native: undefined | ((event: any) => void); web: React.TouchEventHandler; }>; }; /** * @template TokenType token type generic * @description Tokenises objects to dot notation strings, eg: `surface.text.gray.normal` */ type DotNotationToken<_TokenType, TokenType = Omit<_TokenType, 'name'>> = { [K in keyof TokenType]: TokenType[K] extends string | number | ElevationStyles ? `${Extract<K, number | string>}` : `${Extract<K, number | string>}.${TokenType[K] extends Record<string, string | number | boolean | EasingType<string>> ? Extract<keyof TokenType[K], number | string> : DotNotationToken<TokenType[K]>}`; }[keyof TokenType]; type LayoutProps = MakeObjectResponsive<{ height: SpacingValueType; minHeight: SpacingValueType; maxHeight: SpacingValueType; width: SpacingValueType; minWidth: SpacingValueType; maxWidth: SpacingValueType; } & PickCSSByPlatform<'display' | 'overflow' | 'overflowX' | 'overflowY' | 'textAlign' | 'whiteSpace'>>; type FlexboxProps = MakeObjectResponsive<{ /** * This uses the native gap property which might not work on older browsers. * If you want to support older browsers, you might want to use `margin` instead. * * @see https://caniuse.com/?search=gap */ gap: SpacingValueType; /** * This uses the native row-gap property which might not work on older browsers. * If you want to support older browsers, you might want to use `margin` instead. * * @see https://caniuse.com/?search=row-gap */ rowGap: SpacingValueType; /** * This uses the native column-gap property which might not work on older browsers. * If you want to support older browsers, you might want to use `margin` instead. * * @see https://caniuse.com/?search=column-gap */ columnGap: SpacingValueType; /** * The **`flex`** CSS shorthand property sets how a flex _item_ will grow or shrink to fit the space available in its flex container. * * @see https://developer.mozilla.org/docs/Web/CSS/flex */ flex: string | number; } & PickCSSByPlatform<'flexWrap' | 'flexDirection' | 'flexGrow' | 'flexShrink' | 'flexBasis' | 'alignItems' | 'alignContent' | 'alignSelf' | 'justifyItems' | 'justifyContent' | 'justifySelf' | 'placeSelf' | 'placeItems' | 'order'>>; type PositionProps = MakeObjectResponsive<{ top: SpacingValueType; right: SpacingValueType; bottom: SpacingValueType; left: SpacingValueType; } & PickCSSByPlatform<'position' | 'zIndex'>>; type GridProps = MakeObjectResponsive<PickCSSByPlatform<'grid' | 'gridColumn' | 'gridRow' | 'gridRowStart' | 'gridRowEnd' | 'gridColumnStart' | 'gridColumnEnd' | 'gridArea' | 'gridAutoFlow' | 'gridAutoRows' | 'gridAutoColumns' | 'gridTemplate' | 'gridTemplateAreas' | 'gridTemplateColumns' | 'gridTemplateRows'>>; type ColorObjects = 'feedback' | 'surface' | 'interactive'; type BackgroundOnlyColorObjects = 'popup' | 'overlay'; type BackgroundColorString<T extends ColorObjects | BackgroundOnlyColorObjects> = `${T}.background.${DotNotationToken<Theme['colors'][T]['background']>}`; type BorderColorString<T extends ColorObjects> = `${T}.border.${DotNotationToken<Theme['colors'][T]['border']>}`; declare const validBoxAsValues: readonly ["div", "section", "footer", "header", "main", "aside", "nav", "span", "label"]; type BoxAsType = typeof validBoxAsValues[number]; type CommonBoxVisualProps = MakeObjectResponsive<{ borderRadius: keyof Border['radius']; borderWidth: keyof Border['width']; borderColor: BorderColorString<'surface'>; borderTopWidth: keyof Border['width']; borderTopColor: BorderColorString<'surface'>; borderRightWidth: keyof Border['width']; borderRightColor: BorderColorString<'surface'>; borderBottomWidth: keyof Border['width']; borderBottomColor: BorderColorString<'surface'>; borderLeftWidth: keyof Border['width']; borderLeftColor: BorderColorString<'surface'>; borderTopLeftRadius: keyof Border['radius']; borderTopRightRadius: keyof Border['radius']; borderBottomRightRadius: keyof Border['radius']; borderBottomLeftRadius: keyof Border['radius']; } & PickCSSByPlatform<'backgroundImage' | 'backgroundSize' | 'backgroundPosition' | 'backgroundOrigin' | 'backgroundRepeat' | 'pointerEvents' | 'opacity' | 'visibility' | 'transform' | 'transformOrigin' | 'clipPath' | 'borderStyle' | 'borderTopStyle' | 'borderBottomStyle' | 'borderLeftStyle' | 'borderRightStyle'> & { /** * Sets the elevation for Box * * eg: `theme.elevation.midRaised` * * @default `theme.elevation.lowRaised` * * **Links:** * - Docs: https://blade.razorpay.com/?path=/docs/tokens-elevation--docs */ elevation?: keyof Elevation; }>; type BaseBoxVisualProps = MakeObjectResponsive<{ backgroundColor: BackgroundColorString<'feedback'> | BackgroundColorString<'surface'> | BackgroundColorString<'interactive'> | BackgroundColorString<'overlay'> | BackgroundColorString<'popup'> | 'transparent' | (string & Record<never, never>); lineHeight: SpacingValueType; touchAction: CSSObject['touchAction']; userSelect: CSSObject['userSelect']; } & PickCSSByPlatform<'border' | 'borderLeft' | 'borderRight' | 'borderTop' | 'borderBottom' | 'opacity' | 'pointerEvents' | 'cursor'>>; type BoxVisualProps = MakeObjectResponsive<{ backgroundColor: BackgroundColorString<'surface'> | BackgroundColorString<'overlay'> | 'transparent'; }> & { as: BoxAsType; }; type StyledPropsBlade = Partial<Omit<MarginProps & Pick<FlexboxProps, 'alignSelf' | 'justifySelf' | 'placeSelf' | 'order'> & PositionProps & Pick<GridProps, 'gridColumn' | 'gridRow' | 'gridRowStart' | 'gridRowEnd' | 'gridColumnStart' | 'gridColumnEnd' | 'gridArea'> & Pick<LayoutProps, 'display'> & Pick<CommonBoxVisualProps, 'visibility'>, '__brand__'>>; type BoxCallbackProps = Omit<Platform.Select<{ web: { /** * **Warning** * * Make sure to not use Box when you want to create a trigger that performs action on hover. * You would probably want to render it as `button` using `styled.button` instead. * * Use this for hoverable containers in cases like custom menus. */ onMouseOver: React.MouseEventHandler<HTMLElement>; /** * **Warning** * * Make sure to not use Box when you want to create a trigger that performs action on hover. * You would probably want to render it as `button` using `styled.button` instead. * * Use this for hoverable containers in cases like custom menus. */ onMouseEnter: React.MouseEventHandler<HTMLElement>; /** * **Warning** * * Make sure to not use Box when you want to create a trigger that performs action on hover. * You would probably want to render it as `button` using `styled.button` instead. * * Use this for hoverable containers in cases like custom menus. */ onMouseLeave: React.MouseEventHandler<HTMLElement>; onScroll: React.UIEventHandler<HTMLElement>; }; native: Record<'onMouseOver' | 'onMouseEnter' | 'onMouseLeave' | 'onScroll', undefined>; }>, '__brand__'>; type BoxDragAndDropProps = Omit<Platform.Select<{ web: { draggable: boolean; onDragStart: React.DragEventHandler<HTMLElement>; onDragEnter: React.DragEventHandler<HTMLElement>; onDragLeave: React.DragEventHandler<HTMLElement>; onDragOver: React.DragEventHandler<HTMLElement>; onDragEnd: React.DragEventHandler<HTMLElement>; onDrop: React.DragEventHandler<HTMLElement>; }; native: Record<'draggable' | 'onDragStart' | 'onDragEnter' | 'onDragLeave' | 'onDragOver' | 'onDragEnd' | 'onDrop', undefined>; }>, '__brand__'>; type BoxProps = Partial<PaddingProps & MarginProps & LayoutProps & FlexboxProps & PositionProps & GridProps & BoxCallbackProps & BoxDragAndDropProps & CommonBoxVisualProps & BoxVisualProps & { children?: React.ReactNode | React.ReactNode[]; tabIndex?: number; id?: string; } & TestID & DataAnalyticsAttribute>; type BaseBoxProps = Omit<BoxProps, keyof BoxVisualProps> & Partial<DataAnalyticsAttribute & BaseBoxVisualProps & { className?: string; id?: string; tabIndex?: number; }> & BladeCommonEvents; type BoxRefType = Platform.Select<{ web: Omit<HTMLElement, 'style'>; native: View; }>; declare const Box: React__default.ForwardRefExoticComponent<Partial<PaddingProps & MarginProps & { width: SpacingValueType | { readonly base?: SpacingValueType | undefined; readonly xs?: SpacingValueType | undefined; readonly s?: SpacingValueType | undefined; readonly m?: SpacingValueType | undefined; readonly l?: SpacingValueType | undefined; readonly xl?: SpacingValueType | undefined; }; display?: csstype.Property.Display | { readonly base?: csstype.Property.Display | undefined; readonly xs?: csstype.Property.Display | undefined; readonly s?: csstype.Property.Display | undefined; readonly m?: csstype.Property.Display | undefined; readonly l?: csstype.Property.Display | undefined; readonly xl?: csstype.Property.Display | undefined; } | undefined; height: SpacingValueType | { readonly base?: SpacingValueType | undefined; readonly xs?: SpacingValueType | undefined; readonly s?: SpacingValueType | undefined; readonly m?: SpacingValueType | undefined; readonly l?: SpacingValueType | undefined; readonly xl?: SpacingValueType | undefined; }; maxHeight: SpacingValueType | { readonly base?: SpacingValueType | undefined; readonly xs?: SpacingValueType | undefined; readonly s?: SpacingValueType | undefined; readonly m?: SpacingValueType | undefined; readonly l?: SpacingValueType | undefined; readonly xl?: SpacingValueType | undefined; }; maxWidth: SpacingValueType | { readonly base?: SpacingValueType | undefined; readonly xs?: SpacingValueType | undefined; readonly s?: SpacingValueType | undefined; readonly m?: SpacingValueType | undefined; readonly l?: SpacingValueType | undefined; readonly xl?: SpacingValueType | undefined; }; minHeight: SpacingValueType | { readonly base?: SpacingValueType | undefined; readonly xs?: SpacingValueType | undefined; readonly s?: SpacingValueType | undefined; readonly m?: SpacingValueType | undefined; readonly l?: SpacingValueType | undefined; readonly xl?: SpacingValueType | undefined; }; minWidth: SpacingValueType | { readonly base?: SpacingValueType | undefined; readonly xs?: SpacingValueType | undefined; readonly s?: SpacingValueType | undefined; readonly m?: SpacingValueType | undefined; readonly l?: SpacingValueType | undefined; readonly xl?: SpacingValueType | undefined; }; overflowX?: csstype.Property.OverflowX | { readonly base?: csstype.Property.OverflowX | undefined; readonly xs?: csstype.Property.OverflowX | undefined; readonly s?: csstype.Property.OverflowX | undefined; readonly m?: csstype.Property.OverflowX | undefined; readonly l?: csstype.Property.OverflowX | undefined; readonly xl?: csstype.Property.OverflowX | undefined; } | undefined; overflowY?: csstype.Property.OverflowY | { readonly base?: csstype.Property.OverflowY | undefined; readonly xs?: csstype.Property.OverflowY | undefined; readonly s?: csstype.Property.OverflowY | undefined; readonly m?: csstype.Property.OverflowY | undefined; readonly l?: csstype.Property.OverflowY | undefined; readonly xl?: csstype.Property.OverflowY | undefined; } | undefined; textAlign?: csstype.Property.TextAlign | { readonly base?: csstype.Property.TextAlign | undefined; readonly xs?: csstype.Property.TextAlign | undefined; readonly s?: csstype.Property.TextAlign | undefined; readonly m?: csstype.Property.TextAlign | undefined; readonly l?: csstype.Property.TextAlign | undefined; readonly xl?: csstype.Property.TextAlign | undefined; } | undefined; whiteSpace?: csstype.Property.WhiteSpace | { readonly base?: csstype.Property.WhiteSpace | undefined; readonly xs?: csstype.Property.WhiteSpace | undefined; readonly s?: csstype.Property.WhiteSpace | undefined; readonly m?: csstype.Property.WhiteSpace | undefined; readonly l?: csstype.Property.WhiteSpace | undefined; readonly xl?: csstype.Property.WhiteSpace | undefined; } | undefined; overflow?: csstype.Property.Overflow | { readonly base?: csstype.Property.Overflow | undefined; readonly xs?: csstype.Property.Overflow | undefined; readonly s?: csstype.Property.Overflow | undefined; readonly m?: csstype.Property.Overflow | undefined; readonly l?: csstype.Property.Overflow | undefined; readonly xl?: csstype.Property.Overflow | undefined; } | undefined; __brand__?: "platform-web" | { readonly base?: "platform-web" | undefined; readonly xs?: "platform-web" | undefined; readonly s?: "platform-web" | undefined; readonly m?: "platform-web" | undefined; readonly l?: "platform-web" | undefined; readonly xl?: "platform-web" | undefined; } | undefined; } & FlexboxProps & { bottom: SpacingValueType | { readonly base?: SpacingValueType | undefined; readonly xs?: SpacingValueType | undefined; readonly s?: SpacingValueType | undefined; readonly m?: SpacingValueType | undefined; readonly l?: SpacingValueType | undefined; readonly xl?: SpacingValueType | undefined; }; left: SpacingValueType | { readonly base?: SpacingValueType | undefined; readonly xs?: SpacingValueType | undefined; readonly s?: SpacingValueType | undefined; readonly m?: SpacingValueType | undefined; readonly l?: SpacingValueType | undefined; readonly xl?: SpacingValueType | undefined; }; position?: csstype.Property.Position | { readonly base?: csstype.Property.Position | undefined; readonly xs?: csstype.Property.Position | undefined; readonly s?: csstype.Property.Position | undefined; readonly m?: csstype.Property.Position | undefined; readonly l?: csstype.Property.Position | undefined; readonly xl?: csstype.Property.Position | undefined; } | undefined; right: SpacingValueType | { readonly base?: SpacingValueType | undefined; readonly xs?: SpacingValueType | undefined; readonly s?: SpacingValueType | undefined; readonly m?: SpacingValueType | undefined; readonly l?: SpacingValueType | undefined; readonly xl?: SpacingValueType | undefined; }; top: SpacingValueType | { readonly base?: SpacingValueType | undefined; readonly xs?: SpacingValueType | undefined; readonly s?: SpacingValueType | undefined; readonly m?: SpacingValueType | undefined; readonly l?: SpacingValueType | undefined; readonly xl?: SpacingValueType | undefined; }; zIndex?: csstype.Property.ZIndex | { readonly base?: csstype.Property.ZIndex | undefined; readonly xs?: csstype.Property.ZIndex | undefined; readonly s?: csstype.Property.ZIndex | undefined; readonly m?: csstype.Property.ZIndex | undefined; readonly l?: csstype.Property.ZIndex | undefined; readonly xl?: csstype.Property.ZIndex | undefined; } | undefined; __brand__?: "platform-web" | { readonly base?: "platform-web" | undefined; readonly xs?: "platform-web" | undefined; readonly s?: "platform-web" | undefined; readonly m?: "platform-web" | undefined; readonly l?: "platform-web" | undefined; readonly xl?: "platform-web" | undefined; } | undefined; } & { gridAutoColumns?: csstype.Property.GridAutoColumns<string | number> | { readonly base?: csstype.Property.GridAutoColumns<string | number> | undefined; readonly xs?: csstype.Property.GridAutoColumns<string | number> | undefined; readonly s?: csstype.Property.GridAutoColumns<string | number> | undefined; readonly m?: csstype.Property.GridAutoColumns<string | number> | undefined; readonly l?: csstype.Property.GridAutoColumns<string | number> | undefined; readonly xl?: csstype.Property.GridAutoColumns<string | number> | undefined; } | undefined; gridAutoFlow?: csstype.Property.GridAutoFlow | { readonly base?: csstype.Property.GridAutoFlow | undefined; readonly xs?: csstype.Property.GridAutoFlow | undefined; readonly s?: csstype.Property.GridAutoFlow | undefined; readonly m?: csstype.Property.GridAutoFlow | undefined; readonly l?: csstype.Property.GridAutoFlow | undefined; readonly xl?: csstype.Property.GridAutoFlow | undefined; } | undefined; gridAutoRows?: csstype.Property.Gri