@razorpay/blade 10.1.0 → 10.2.0

package/build/utils/index.production.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.production.web.js","sources":["../../src/utils/getColorScheme/getColorScheme.web.ts","../../src/utils/getMediaQuery/getMediaQuery.ts","../../src/utils/getPlatformType/getPlatformType.ts","../../src/utils/useBreakpoint/useBreakpoint.ts","../../src/utils/useColorScheme/useColorScheme.ts","../../src/utils/platform/isReactNative.ts","../../src/utils/platform/getOS.web.ts","../../src/utils/platform/platform.ts","../../src/utils/platform/castUtils.ts","../../src/utils/makeBorderSize/makeBorderSize.ts","../../src/utils/makeMotionTime/makeMotionTime.web.ts","../../src/utils/makeSpace/makeSpace.ts","../../src/utils/makeTypographySize/makeTypographySize.web.ts","../../src/utils/makeSize/makeSize.ts","../../src/utils/toTitleCase/toTitleCase.ts","../../src/utils/usePrevious/usePrevious.ts","../../src/components/BladeProvider/useTheme.ts"],"sourcesContent":["import type { ColorSchemeNames, ColorSchemeNamesInput } from '~tokens/theme';\n\nexport const getColorScheme = (colorScheme: ColorSchemeNamesInput = 'light'): ColorSchemeNames => {\n  // @TODO: create a useMediaQuery hook with an event listener which will subscribe to changes and move all this logic there\n  const colorSchemeMediaQueryMap = {\n    light: '(prefers-color-scheme: light)',\n    dark: '(prefers-color-scheme: dark)',\n    system: 'default',\n  };\n  const supportsMatchMedia =\n    typeof window !== 'undefined' && typeof window.matchMedia === 'function';\n\n  if (colorScheme === 'light' || colorScheme === 'dark') {\n    return colorScheme;\n  }\n\n  if (\n    colorScheme === 'system' &&\n    supportsMatchMedia &&\n    window.matchMedia(colorSchemeMediaQueryMap.dark).matches\n  ) {\n    return 'dark';\n  }\n\n  return 'light';\n};\n","export const getMediaQuery = ({ min, max }: { min: number; max?: number }): string => {\n  return `screen and (min-width: ${min}px)${max ? ` and (max-width: ${max}px)` : ''}`;\n};\n","export type PlatformTypes = 'browser' | 'node' | 'react-native' | 'unknown';\n\nexport const getPlatformType = (): PlatformTypes => {\n  if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {\n    return 'react-native';\n  }\n\n  if (typeof document !== 'undefined') {\n    return 'browser';\n  }\n\n  if (typeof process !== 'undefined') {\n    return 'node';\n  }\n\n  return 'unknown';\n};\n","/* eslint-disable @typescript-eslint/restrict-plus-operands */\nimport { useEffect, useState, useCallback, useMemo } from 'react';\nimport { getPlatformType } from '../getPlatformType';\nimport { getMediaQuery } from '../getMediaQuery';\nimport type { Breakpoints } from '~tokens/global';\n\nconst deviceType = {\n  desktop: 'desktop',\n  mobile: 'mobile',\n} as const;\n\ntype DeviceType = keyof typeof deviceType;\ntype Breakpoint = keyof Breakpoints | undefined;\n\ntype BreakpointAndDevice = {\n  matchedBreakpoint: Breakpoint;\n  matchedDeviceType: DeviceType;\n};\n\nexport const useBreakpoint = ({\n  breakpoints,\n}: {\n  breakpoints: Breakpoints;\n}): BreakpointAndDevice => {\n  const supportsMatchMedia =\n    typeof document !== 'undefined' &&\n    typeof window !== 'undefined' &&\n    typeof window?.matchMedia === 'function';\n\n  const breakpointsTokenAndQueryCollection = useMemo(\n    () =>\n      (supportsMatchMedia\n        ? Object.entries(breakpoints).map(([token, screenSize], index, breakpointsArray) => {\n            const min = screenSize;\n            const maxValue = breakpointsArray[index + 1]?.[1];\n            const mediaQuery = getMediaQuery({ min, max: maxValue ? maxValue - 1 : undefined });\n            return { token, screenSize, mediaQuery };\n          })\n        : []) as {\n        token: keyof Breakpoints;\n        screenSize: number;\n        mediaQuery: string;\n      }[],\n    [breakpoints, supportsMatchMedia],\n  );\n\n  const getMatchedDeviceType = useCallback((matchedBreakpoint: Breakpoint): DeviceType => {\n    let matchedDeviceType: DeviceType = deviceType.mobile;\n    const platform = getPlatformType();\n    if (platform === 'react-native') {\n      matchedDeviceType = deviceType.mobile;\n    } else if (platform === 'browser') {\n      if (matchedBreakpoint && ['base', 'xs', 's'].includes(matchedBreakpoint)) {\n        // tablet is also categorised as mobile\n        matchedDeviceType = deviceType.mobile;\n      } else {\n        matchedDeviceType = deviceType.desktop;\n      }\n    } else if (platform === 'node') {\n      //@TODO: Check for useragent for node\n      matchedDeviceType = deviceType.desktop;\n    }\n    return matchedDeviceType;\n  }, []);\n\n  const getMatchedBreakpoint = useCallback(\n    (event?: MediaQueryListEvent): Breakpoint => {\n      const matchedBreakpoint =\n        breakpointsTokenAndQueryCollection.find(({ mediaQuery = '' }) => {\n          // this will run whenever mediaQuery change event is triggered\n          if (event?.media === mediaQuery) {\n            return true;\n          }\n          // this will run when the state is initialised for the first time and hence the event object will be empty so we'll fallback to browser's window object\n          if (window.matchMedia(mediaQuery).matches) {\n            return true;\n          }\n          return false;\n        })?.token ?? undefined;\n\n      return matchedBreakpoint;\n    },\n    [breakpointsTokenAndQueryCollection],\n  );\n\n  const [breakpointAndDevice, setBreakpointAndDevice] = useState(() => {\n    const matchedBreakpoint = getMatchedBreakpoint();\n    const matchedDeviceType = getMatchedDeviceType(matchedBreakpoint);\n    return {\n      matchedBreakpoint,\n      matchedDeviceType,\n    };\n  });\n\n  useEffect(() => {\n    if (!supportsMatchMedia) {\n      return undefined;\n    }\n\n    const handleMediaQueryChange = (event: MediaQueryListEvent): void => {\n      setBreakpointAndDevice(() => {\n        const matchedBreakpoint = getMatchedBreakpoint(event);\n        const matchedDeviceType = getMatchedDeviceType(matchedBreakpoint);\n\n        return { matchedBreakpoint, matchedDeviceType };\n      });\n    };\n\n    const mediaQueryInstances = breakpointsTokenAndQueryCollection.map(({ mediaQuery = '' }) => {\n      const mediaQueryInstance = window.matchMedia(mediaQuery);\n      /**\n       * the mediaquery event listener is available on mediaQuery instances and not `window`\n       * we iterate over all the breakpoints we have, register each instance and store them as `mediaQueryInstances` so we can later unregister all of them.\n       */\n      if (mediaQueryInstance.addEventListener) {\n        mediaQueryInstance.addEventListener('change', handleMediaQueryChange);\n      } else {\n        // In older browsers MediaQueryList do not yet inherit from EventTarget, So using addListener as fallback - https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener\n        mediaQueryInstance.addListener(handleMediaQueryChange);\n      }\n      return mediaQueryInstance;\n    });\n\n    return (): void => {\n      mediaQueryInstances.forEach((mediaQueryInstance) => {\n        if (mediaQueryInstance.removeEventListener) {\n          mediaQueryInstance.removeEventListener('change', handleMediaQueryChange);\n        } else {\n          // In older browsers MediaQueryList do not yet inherit from EventTarget, So using removeListener as fallback - https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/removeListener\n          mediaQueryInstance.removeListener(handleMediaQueryChange);\n        }\n      });\n    };\n  }, [\n    breakpointsTokenAndQueryCollection,\n    getMatchedBreakpoint,\n    getMatchedDeviceType,\n    supportsMatchMedia,\n  ]);\n\n  // @TODO: handle SSR scenarios\n  return breakpointAndDevice;\n};\n","import { useState, useCallback } from 'react';\nimport { getColorScheme } from '../getColorScheme';\nimport { colorSchemeNamesInput } from '~tokens/theme/theme';\nimport type { ColorSchemeNames, ColorSchemeNamesInput } from '~tokens/theme';\nimport { throwBladeError } from '~utils/logger';\n\nexport type UseColorScheme = {\n  colorScheme: ColorSchemeNames;\n  setColorScheme: (colorScheme: ColorSchemeNamesInput) => void;\n};\n\nexport const useColorScheme = (\n  initialColorScheme: ColorSchemeNamesInput = 'light',\n): UseColorScheme => {\n  // if colorScheme defined use that else fallback to 'light'\n  const [colorSchemeState, setColorSchemeState] = useState<ColorSchemeNames>(() =>\n    getColorScheme(initialColorScheme),\n  );\n\n  const setColorScheme = useCallback(function setThemeMode(colorScheme: ColorSchemeNamesInput) {\n    if (__DEV__) {\n      if (!colorSchemeNamesInput.includes(colorScheme)) {\n        throwBladeError({\n          message: `Expected color scheme to be one of [${colorSchemeNamesInput.toString()}] but received ${colorScheme}`,\n          moduleName: 'useColorScheme',\n        });\n      }\n    }\n    setColorSchemeState(getColorScheme(colorScheme));\n  }, []);\n\n  return {\n    colorScheme: colorSchemeState,\n    setColorScheme,\n  };\n};\n","/* eslint-disable @typescript-eslint/no-namespace */\nimport { getPlatformType } from '../getPlatformType';\n\nconst isReactNative = (): boolean => {\n  return getPlatformType() === 'react-native';\n};\n\nexport { isReactNative };\n","import type { Platform } from 'react-native';\n\nexport const getOS = (): typeof Platform.OS => {\n  return 'web';\n};\n\nexport const isAndroid = (): boolean => false;\n","/* eslint-disable @typescript-eslint/no-namespace */\nimport type { Brand, NativeOrWebBrand } from './types';\n\nnamespace Platform {\n  export type Name = 'web';\n  /**\n   * Right now, the module resolution is set to resolve `.web` files,\n   *\n   * Thus Platform.Select<> type will return the `web` type\n   */\n  export type Select<Options extends { web: unknown; native: unknown }> = Brand<\n    Options[Name],\n    'platform-web'\n  >;\n\n  export type CastNative<T extends NativeOrWebBrand | undefined> = Extract<\n    T,\n    { __brand__?: 'platform-native' | 'platform-all' }\n  >;\n\n  export type CastWeb<T extends NativeOrWebBrand | undefined> = Extract<\n    T,\n    { __brand__?: 'platform-web' | 'platform-all' }\n  >;\n}\n\nexport { Platform };\n","import type { Platform } from '.';\n\n/**\n * @description\n *\n * Casts a Platform.Select<> type to web type\n *\n * @example\n *\n * ```ts\n * type Example = Platform.Select<{ web: string; native: number }>;\n *\n * const extractedWebType = castWebType('' as Example);\n * //    ^ string\n * ```\n */\nconst castWebType = <T>(value: T): Platform.CastWeb<T> => {\n  return value as Platform.CastWeb<typeof value>;\n};\n\n/**\n * @description\n *\n * Casts a Platform.Select<> type to native type\n *\n * @example\n *\n * ```ts\n * type Example = Platform.Select<{ web: string; native: number }>;\n *\n * const extractedNativeType = castNativeType('' as Example);\n * //    ^ number\n * ```\n */\nconst castNativeType = <T>(value: T): Platform.CastNative<T> => {\n  return value as Platform.CastNative<typeof value>;\n};\n\nexport { castWebType, castNativeType };\n","export function makeBorderSize<T extends number>(size: T): `${T}px`;\nexport function makeBorderSize<T extends string>(size: T): T;\nexport function makeBorderSize<T extends number | string>(size: T): `${T}px` | T {\n  if (typeof size === 'number') {\n    return `${size}px`;\n  }\n  return size;\n}\n","import type { MakeMotionTime } from './types';\nimport type { Platform } from '~utils';\n\nexport const makeMotionTime = <T extends number>(time: T): Platform.CastWeb<MakeMotionTime<T>> => {\n  return `${time}ms`;\n};\n","export const makeSpace = <T extends number>(size: T): `${T}px` => {\n  return `${size}px`;\n};\n","export const makeTypographySize = (size: number): `${number}rem` => {\n  const remValue = size / 16;\n  return `${remValue}rem`;\n};\n","export type MakeSize<T extends number> = `${T}px`;\n\nexport const makeSize = <T extends number>(size: T): `${T}px` => {\n  return `${size}px`;\n};\n","/**\n * @deprecated This utility will be deprecated in subsequent version.\n */\nexport const toTitleCase = (inputString: string): string =>\n  inputString\n    .toLowerCase()\n    .split(' ')\n    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))\n    .join(' ');\n","import type { MutableRefObject } from 'react';\nimport { useEffect, useRef } from 'react';\n\n/**\n * a type-safe version of the `usePrevious` hook described here:\n * @see {@link https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state}\n * @deprecated This utility will be deprecated in subsequent version.\n */\nexport function usePrevious<T>(value: T): MutableRefObject<T | undefined>['current'] {\n  const ref = useRef<T>();\n\n  useEffect(() => {\n    ref.current = value;\n  }, [value]);\n\n  return ref.current;\n}\n","import { useContext, createContext } from 'react';\nimport type { UseColorScheme } from '../../utils/useColorScheme';\nimport type { Theme } from './';\nimport type { TypographyPlatforms } from '~tokens/global';\nimport { throwBladeError } from '~utils/logger';\n\nexport type ThemeContext = UseColorScheme & {\n  theme: Theme;\n  platform: TypographyPlatforms;\n};\n\nexport const ThemeContext = createContext<ThemeContext>({\n  // @ts-expect-error set null\n  theme: null,\n  colorScheme: 'light',\n  platform: 'onDesktop',\n  setColorScheme: () => null,\n});\n\nconst useTheme = (): ThemeContext => {\n  const themeContext = useContext<ThemeContext>(ThemeContext);\n  if (__DEV__) {\n    if (!themeContext.theme) {\n      throwBladeError({\n        message: 'BladeProvider is missing theme',\n        moduleName: 'BladeProvider',\n      });\n    }\n    if (themeContext === undefined) {\n      throwBladeError({\n        message: 'useTheme must be used within BladeProvider',\n        moduleName: 'BladeProvider',\n      });\n    }\n  }\n  return themeContext;\n};\n\nexport default useTheme;\n"],"names":["getColorScheme","colorScheme","arguments","length","undefined","colorSchemeMediaQueryMap","light","dark","system","supportsMatchMedia","window","matchMedia","matches","getMediaQuery","_ref","min","max","concat","getPlatformType","navigator","product","document","process","deviceType","desktop","mobile","useBreakpoint","_window","breakpoints","breakpointsTokenAndQueryCollection","useMemo","Object","entries","map","_ref2","index","breakpointsArray","_breakpointsArray","_ref3","_slicedToArray","token","screenSize","maxValue","mediaQuery","getMatchedDeviceType","useCallback","matchedBreakpoint","matchedDeviceType","platform","includes","getMatchedBreakpoint","event","_breakpointsTokenAndQ","_breakpointsTokenAndQ2","find","_ref4","_ref4$mediaQuery","media","_useState","useState","_useState2","breakpointAndDevice","setBreakpointAndDevice","useEffect","handleMediaQueryChange","mediaQueryInstances","_ref5","_ref5$mediaQuery","mediaQueryInstance","addEventListener","addListener","forEach","removeEventListener","removeListener","useColorScheme","initialColorScheme","colorSchemeState","setColorSchemeState","setColorScheme","setThemeMode","isReactNative","getOS","isAndroid","Platform","_Platform","castWebType","value","castNativeType","makeBorderSize","size","makeMotionTime","time","makeSpace","makeTypographySize","remValue","makeSize","toTitleCase","inputString","toLowerCase","split","word","charAt","toUpperCase","slice","join","usePrevious","ref","useRef","current","ThemeContext","createContext","theme","useTheme","themeContext","useContext"],"mappings":"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"}
+{"version":3,"file":"index.production.web.js","sources":["../../src/utils/getColorScheme/getColorScheme.web.ts","../../src/utils/getMediaQuery/getMediaQuery.ts","../../src/utils/getPlatformType/getPlatformType.ts","../../src/utils/useBreakpoint/useBreakpoint.ts","../../src/utils/useColorScheme/useColorScheme.ts","../../src/utils/useIsomorphicLayoutEffect.ts","../../src/utils/useInterval.ts","../../src/utils/platform/isReactNative.ts","../../src/utils/platform/getOS.web.ts","../../src/utils/platform/platform.ts","../../src/utils/platform/castUtils.ts","../../src/utils/makeBorderSize/makeBorderSize.ts","../../src/utils/makeMotionTime/makeMotionTime.web.ts","../../src/utils/makeSpace/makeSpace.ts","../../src/utils/makeTypographySize/makeTypographySize.web.ts","../../src/utils/makeSize/makeSize.ts","../../src/utils/toTitleCase/toTitleCase.ts","../../src/utils/usePrevious/usePrevious.ts","../../src/components/BladeProvider/useTheme.ts"],"sourcesContent":["import type { ColorSchemeNames, ColorSchemeNamesInput } from '~tokens/theme';\n\nexport const getColorScheme = (colorScheme: ColorSchemeNamesInput = 'light'): ColorSchemeNames => {\n  // @TODO: create a useMediaQuery hook with an event listener which will subscribe to changes and move all this logic there\n  const colorSchemeMediaQueryMap = {\n    light: '(prefers-color-scheme: light)',\n    dark: '(prefers-color-scheme: dark)',\n    system: 'default',\n  };\n  const supportsMatchMedia =\n    typeof window !== 'undefined' && typeof window.matchMedia === 'function';\n\n  if (colorScheme === 'light' || colorScheme === 'dark') {\n    return colorScheme;\n  }\n\n  if (\n    colorScheme === 'system' &&\n    supportsMatchMedia &&\n    window.matchMedia(colorSchemeMediaQueryMap.dark).matches\n  ) {\n    return 'dark';\n  }\n\n  return 'light';\n};\n","export const getMediaQuery = ({ min, max }: { min: number; max?: number }): string => {\n  return `screen and (min-width: ${min}px)${max ? ` and (max-width: ${max}px)` : ''}`;\n};\n","export type PlatformTypes = 'browser' | 'node' | 'react-native' | 'unknown';\n\nexport const getPlatformType = (): PlatformTypes => {\n  if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {\n    return 'react-native';\n  }\n\n  if (typeof document !== 'undefined') {\n    return 'browser';\n  }\n\n  if (typeof process !== 'undefined') {\n    return 'node';\n  }\n\n  return 'unknown';\n};\n","/* eslint-disable @typescript-eslint/restrict-plus-operands */\nimport { useEffect, useState, useCallback, useMemo } from 'react';\nimport { getPlatformType } from '../getPlatformType';\nimport { getMediaQuery } from '../getMediaQuery';\nimport type { Breakpoints } from '~tokens/global';\n\nconst deviceType = {\n  desktop: 'desktop',\n  mobile: 'mobile',\n} as const;\n\ntype DeviceType = keyof typeof deviceType;\ntype Breakpoint = keyof Breakpoints | undefined;\n\ntype BreakpointAndDevice = {\n  matchedBreakpoint: Breakpoint;\n  matchedDeviceType: DeviceType;\n};\n\nexport const useBreakpoint = ({\n  breakpoints,\n}: {\n  breakpoints: Breakpoints;\n}): BreakpointAndDevice => {\n  const supportsMatchMedia =\n    typeof document !== 'undefined' &&\n    typeof window !== 'undefined' &&\n    typeof window?.matchMedia === 'function';\n\n  const breakpointsTokenAndQueryCollection = useMemo(\n    () =>\n      (supportsMatchMedia\n        ? Object.entries(breakpoints).map(([token, screenSize], index, breakpointsArray) => {\n            const min = screenSize;\n            const maxValue = breakpointsArray[index + 1]?.[1];\n            const mediaQuery = getMediaQuery({ min, max: maxValue ? maxValue - 1 : undefined });\n            return { token, screenSize, mediaQuery };\n          })\n        : []) as {\n        token: keyof Breakpoints;\n        screenSize: number;\n        mediaQuery: string;\n      }[],\n    [breakpoints, supportsMatchMedia],\n  );\n\n  const getMatchedDeviceType = useCallback((matchedBreakpoint: Breakpoint): DeviceType => {\n    let matchedDeviceType: DeviceType = deviceType.mobile;\n    const platform = getPlatformType();\n    if (platform === 'react-native') {\n      matchedDeviceType = deviceType.mobile;\n    } else if (platform === 'browser') {\n      if (matchedBreakpoint && ['base', 'xs', 's'].includes(matchedBreakpoint)) {\n        // tablet is also categorised as mobile\n        matchedDeviceType = deviceType.mobile;\n      } else {\n        matchedDeviceType = deviceType.desktop;\n      }\n    } else if (platform === 'node') {\n      //@TODO: Check for useragent for node\n      matchedDeviceType = deviceType.desktop;\n    }\n    return matchedDeviceType;\n  }, []);\n\n  const getMatchedBreakpoint = useCallback(\n    (event?: MediaQueryListEvent): Breakpoint => {\n      const matchedBreakpoint =\n        breakpointsTokenAndQueryCollection.find(({ mediaQuery = '' }) => {\n          // this will run whenever mediaQuery change event is triggered\n          if (event?.media === mediaQuery) {\n            return true;\n          }\n          // this will run when the state is initialised for the first time and hence the event object will be empty so we'll fallback to browser's window object\n          if (window.matchMedia(mediaQuery).matches) {\n            return true;\n          }\n          return false;\n        })?.token ?? undefined;\n\n      return matchedBreakpoint;\n    },\n    [breakpointsTokenAndQueryCollection],\n  );\n\n  const [breakpointAndDevice, setBreakpointAndDevice] = useState(() => {\n    const matchedBreakpoint = getMatchedBreakpoint();\n    const matchedDeviceType = getMatchedDeviceType(matchedBreakpoint);\n    return {\n      matchedBreakpoint,\n      matchedDeviceType,\n    };\n  });\n\n  useEffect(() => {\n    if (!supportsMatchMedia) {\n      return undefined;\n    }\n\n    const handleMediaQueryChange = (event: MediaQueryListEvent): void => {\n      setBreakpointAndDevice(() => {\n        const matchedBreakpoint = getMatchedBreakpoint(event);\n        const matchedDeviceType = getMatchedDeviceType(matchedBreakpoint);\n\n        return { matchedBreakpoint, matchedDeviceType };\n      });\n    };\n\n    const mediaQueryInstances = breakpointsTokenAndQueryCollection.map(({ mediaQuery = '' }) => {\n      const mediaQueryInstance = window.matchMedia(mediaQuery);\n      /**\n       * the mediaquery event listener is available on mediaQuery instances and not `window`\n       * we iterate over all the breakpoints we have, register each instance and store them as `mediaQueryInstances` so we can later unregister all of them.\n       */\n      if (mediaQueryInstance.addEventListener) {\n        mediaQueryInstance.addEventListener('change', handleMediaQueryChange);\n      } else {\n        // In older browsers MediaQueryList do not yet inherit from EventTarget, So using addListener as fallback - https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener\n        mediaQueryInstance.addListener(handleMediaQueryChange);\n      }\n      return mediaQueryInstance;\n    });\n\n    return (): void => {\n      mediaQueryInstances.forEach((mediaQueryInstance) => {\n        if (mediaQueryInstance.removeEventListener) {\n          mediaQueryInstance.removeEventListener('change', handleMediaQueryChange);\n        } else {\n          // In older browsers MediaQueryList do not yet inherit from EventTarget, So using removeListener as fallback - https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/removeListener\n          mediaQueryInstance.removeListener(handleMediaQueryChange);\n        }\n      });\n    };\n  }, [\n    breakpointsTokenAndQueryCollection,\n    getMatchedBreakpoint,\n    getMatchedDeviceType,\n    supportsMatchMedia,\n  ]);\n\n  // @TODO: handle SSR scenarios\n  return breakpointAndDevice;\n};\n","import { useState, useCallback } from 'react';\nimport { getColorScheme } from '../getColorScheme';\nimport { colorSchemeNamesInput } from '~tokens/theme/theme';\nimport type { ColorSchemeNames, ColorSchemeNamesInput } from '~tokens/theme';\nimport { throwBladeError } from '~utils/logger';\n\nexport type UseColorScheme = {\n  colorScheme: ColorSchemeNames;\n  setColorScheme: (colorScheme: ColorSchemeNamesInput) => void;\n};\n\nexport const useColorScheme = (\n  initialColorScheme: ColorSchemeNamesInput = 'light',\n): UseColorScheme => {\n  // if colorScheme defined use that else fallback to 'light'\n  const [colorSchemeState, setColorSchemeState] = useState<ColorSchemeNames>(() =>\n    getColorScheme(initialColorScheme),\n  );\n\n  const setColorScheme = useCallback(function setThemeMode(colorScheme: ColorSchemeNamesInput) {\n    if (__DEV__) {\n      if (!colorSchemeNamesInput.includes(colorScheme)) {\n        throwBladeError({\n          message: `Expected color scheme to be one of [${colorSchemeNamesInput.toString()}] but received ${colorScheme}`,\n          moduleName: 'useColorScheme',\n        });\n      }\n    }\n    setColorSchemeState(getColorScheme(colorScheme));\n  }, []);\n\n  return {\n    colorScheme: colorSchemeState,\n    setColorScheme,\n  };\n};\n","import * as React from 'react';\nimport { getPlatformType } from './getPlatformType';\n\nconst isBrowser = getPlatformType() == 'browser';\n\n/**\n * useIsomorphicLayoutEffect enables us to safely call `useLayoutEffect` on the browser\n * (for SSR reasons)\n *\n * React currently throws a warning when using useLayoutEffect on the server.\n * To get around it, we can conditionally useEffect on the server (no-op) and\n * useLayoutEffect in the browser.\n *\n * @see https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85\n */\nexport const useIsomorphicLayoutEffect = isBrowser ? React.useLayoutEffect : React.useEffect;\n","/* eslint-disable consistent-return */\nimport React from 'react';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\nfunction useInterval(\n  callback: () => void,\n  { delay, enable }: { delay: number; enable?: boolean },\n): void {\n  const intervalRef = React.useRef<number | null>(null);\n  const savedCallback = React.useRef(callback);\n\n  // keep the callback updated\n  useIsomorphicLayoutEffect(() => {\n    savedCallback.current = callback;\n  }, [callback]);\n\n  React.useEffect(() => {\n    const tick = (): void => savedCallback.current();\n\n    if (enable) {\n      intervalRef.current = window.setInterval(tick, delay);\n      return () => window.clearInterval(intervalRef.current!);\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    return () => {};\n  }, [delay, enable]);\n}\n\nexport { useInterval };\n","/* eslint-disable @typescript-eslint/no-namespace */\nimport { getPlatformType } from '../getPlatformType';\n\nconst isReactNative = (): boolean => {\n  return getPlatformType() === 'react-native';\n};\n\nexport { isReactNative };\n","import type { Platform } from 'react-native';\n\nexport const getOS = (): typeof Platform.OS => {\n  return 'web';\n};\n\nexport const isAndroid = (): boolean => false;\n","/* eslint-disable @typescript-eslint/no-namespace */\nimport type { Brand, NativeOrWebBrand } from './types';\n\nnamespace Platform {\n  export type Name = 'web';\n  /**\n   * Right now, the module resolution is set to resolve `.web` files,\n   *\n   * Thus Platform.Select<> type will return the `web` type\n   */\n  export type Select<Options extends { web: unknown; native: unknown }> = Brand<\n    Options[Name],\n    'platform-web'\n  >;\n\n  export type CastNative<T extends NativeOrWebBrand | undefined> = Extract<\n    T,\n    { __brand__?: 'platform-native' | 'platform-all' }\n  >;\n\n  export type CastWeb<T extends NativeOrWebBrand | undefined> = Extract<\n    T,\n    { __brand__?: 'platform-web' | 'platform-all' }\n  >;\n}\n\nexport { Platform };\n","import type { Platform } from '.';\n\n/**\n * @description\n *\n * Casts a Platform.Select<> type to web type\n *\n * @example\n *\n * ```ts\n * type Example = Platform.Select<{ web: string; native: number }>;\n *\n * const extractedWebType = castWebType('' as Example);\n * //    ^ string\n * ```\n */\nconst castWebType = <T>(value: T): Platform.CastWeb<T> => {\n  return value as Platform.CastWeb<typeof value>;\n};\n\n/**\n * @description\n *\n * Casts a Platform.Select<> type to native type\n *\n * @example\n *\n * ```ts\n * type Example = Platform.Select<{ web: string; native: number }>;\n *\n * const extractedNativeType = castNativeType('' as Example);\n * //    ^ number\n * ```\n */\nconst castNativeType = <T>(value: T): Platform.CastNative<T> => {\n  return value as Platform.CastNative<typeof value>;\n};\n\nexport { castWebType, castNativeType };\n","export function makeBorderSize<T extends number>(size: T): `${T}px`;\nexport function makeBorderSize<T extends string>(size: T): T;\nexport function makeBorderSize<T extends number | string>(size: T): `${T}px` | T {\n  if (typeof size === 'number') {\n    return `${size}px`;\n  }\n  return size;\n}\n","import type { MakeMotionTime } from './types';\nimport type { Platform } from '~utils';\n\nexport const makeMotionTime = <T extends number>(time: T): Platform.CastWeb<MakeMotionTime<T>> => {\n  return `${time}ms`;\n};\n","export const makeSpace = <T extends number>(size: T): `${T}px` => {\n  return `${size}px`;\n};\n","export const makeTypographySize = (size: number): `${number}rem` => {\n  const remValue = size / 16;\n  return `${remValue}rem`;\n};\n","export type MakeSize<T extends number> = `${T}px`;\n\nexport const makeSize = <T extends number>(size: T): `${T}px` => {\n  return `${size}px`;\n};\n","/**\n * @deprecated This utility will be deprecated in subsequent version.\n */\nexport const toTitleCase = (inputString: string): string =>\n  inputString\n    .toLowerCase()\n    .split(' ')\n    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))\n    .join(' ');\n","import type { MutableRefObject } from 'react';\nimport { useEffect, useRef } from 'react';\n\n/**\n * a type-safe version of the `usePrevious` hook described here:\n * @see {@link https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state}\n * @deprecated This utility will be deprecated in subsequent version.\n */\nexport function usePrevious<T>(value: T): MutableRefObject<T | undefined>['current'] {\n  const ref = useRef<T>();\n\n  useEffect(() => {\n    ref.current = value;\n  }, [value]);\n\n  return ref.current;\n}\n","import { useContext, createContext } from 'react';\nimport type { UseColorScheme } from '../../utils/useColorScheme';\nimport type { Theme } from './';\nimport type { TypographyPlatforms } from '~tokens/global';\nimport { throwBladeError } from '~utils/logger';\n\nexport type ThemeContext = UseColorScheme & {\n  theme: Theme;\n  platform: TypographyPlatforms;\n};\n\nexport const ThemeContext = createContext<ThemeContext>({\n  // @ts-expect-error set null\n  theme: null,\n  colorScheme: 'light',\n  platform: 'onDesktop',\n  setColorScheme: () => null,\n});\n\nconst useTheme = (): ThemeContext => {\n  const themeContext = useContext<ThemeContext>(ThemeContext);\n  if (__DEV__) {\n    if (!themeContext.theme) {\n      throwBladeError({\n        message: 'BladeProvider is missing theme',\n        moduleName: 'BladeProvider',\n      });\n    }\n    if (themeContext === undefined) {\n      throwBladeError({\n        message: 'useTheme must be used within BladeProvider',\n        moduleName: 'BladeProvider',\n      });\n    }\n  }\n  return themeContext;\n};\n\nexport default useTheme;\n"],"names":["getColorScheme","colorScheme","arguments","length","undefined","colorSchemeMediaQueryMap","light","dark","system","supportsMatchMedia","window","matchMedia","matches","getMediaQuery","_ref","min","max","concat","getPlatformType","navigator","product","document","process","deviceType","desktop","mobile","useBreakpoint","_window","breakpoints","breakpointsTokenAndQueryCollection","useMemo","Object","entries","map","_ref2","index","breakpointsArray","_breakpointsArray","_ref3","_slicedToArray","token","screenSize","maxValue","mediaQuery","getMatchedDeviceType","useCallback","matchedBreakpoint","matchedDeviceType","platform","includes","getMatchedBreakpoint","event","_breakpointsTokenAndQ","_breakpointsTokenAndQ2","find","_ref4","_ref4$mediaQuery","media","_useState","useState","_useState2","breakpointAndDevice","setBreakpointAndDevice","useEffect","handleMediaQueryChange","mediaQueryInstances","_ref5","_ref5$mediaQuery","mediaQueryInstance","addEventListener","addListener","forEach","removeEventListener","removeListener","useColorScheme","initialColorScheme","colorSchemeState","setColorSchemeState","setColorScheme","setThemeMode","isBrowser","useIsomorphicLayoutEffect","React","useLayoutEffect","useInterval","callback","delay","enable","intervalRef","useRef","savedCallback","current","tick","setInterval","clearInterval","isReactNative","getOS","isAndroid","Platform","_Platform","castWebType","value","castNativeType","makeBorderSize","size","makeMotionTime","time","makeSpace","makeTypographySize","remValue","makeSize","toTitleCase","inputString","toLowerCase","split","word","charAt","toUpperCase","slice","join","usePrevious","ref","ThemeContext","createContext","theme","useTheme","themeContext","useContext"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@razorpay/blade",
   "description": "The Design System that powers Razorpay",
-  "version": "10.1.0",
+  "version": "10.2.0",
   "license": "MIT",
   "engines": {
     "node": ">=18.12.1"
@@ -81,7 +81,7 @@
     "types:generate-types:web": "tsc -p ./tsconfig-generate-types.web.json",
     "types:generate-types:native": "tsc -p ./tsconfig-generate-types.native.json",
     "types:typecheck:web": "tsc -p ./tsconfig-typecheck.web.json",
-    "types:typecheck:native": "tsc -p ./tsconfig-typecheck.native.json",
+    "dtypes:typecheck:native": "tsc -p ./tsconfig-typecheck.native.json",
     "types:copy-declarations:web": "copyfiles -u 1 \"src/**/*.d.ts\" build/types/web",
     "types:copy-declarations:native": "copyfiles -u 1 \"src/**/*.d.ts\" build/types/native",
     "build:generate-root-imports": "rollup -c && node ./scripts/generateRootImports.js",
@@ -124,6 +124,7 @@
     "patch-package": "7.0.0"
   },
   "devDependencies": {
+    "chromatic": "6.22.0",
     "@babel/core": "7.20.2",
     "@babel/plugin-transform-react-jsx": "7.16.5",
     "@babel/plugin-transform-runtime": "7.16.5",
@@ -143,21 +144,21 @@
     "@rollup/plugin-node-resolve": "13.1.1",
     "@rollup/plugin-replace": "5.0.2",
     "@size-limit/preset-big-lib": "8.2.4",
-    "@storybook/addon-a11y": "6.3.0",
-    "@storybook/addon-actions": "6.3.0",
-    "@storybook/addon-controls": "6.3",
-    "@storybook/addon-docs": "6.3.0",
-    "@storybook/addon-essentials": "6.3.0",
-    "@storybook/addon-links": "6.3.0",
-    "@storybook/addon-ondevice-actions": "6.0.1-beta.7",
-    "@storybook/addon-ondevice-backgrounds": "6.0.1-alpha.7",
-    "@storybook/addon-ondevice-controls": "6.0.1-alpha.7",
-    "@storybook/addon-ondevice-notes": "6.0.1-alpha.7",
+    "@storybook/addon-a11y": "6.5.16",
+    "@storybook/addon-actions": "6.5.16",
+    "@storybook/addon-controls": "6.5.16",
+    "@storybook/addon-docs": "6.5.16",
+    "@storybook/addon-essentials": "6.5.16",
+    "@storybook/addon-links": "6.5.16",
+    "@storybook/addon-ondevice-actions": "6.5.5",
+    "@storybook/addon-ondevice-backgrounds": "6.5.5",
+    "@storybook/addon-ondevice-controls": "6.5.5",
+    "@storybook/addon-ondevice-notes": "6.5.5",
     "@storybook/design-system": "7.3.4",
-    "@storybook/node-logger": "6.3.0",
+    "@storybook/node-logger": "6.5.16",
     "@storybook/preset-create-react-app": "3.2.0",
-    "@storybook/react": "6.3.0",
-    "@storybook/react-native": "6.0.1-alpha.7",
+    "@storybook/react": "6.5.16",
+    "@storybook/react-native": "6.5.5",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/jest-native": "5.4.2",
     "@testing-library/react": "13.4.0",
@@ -220,7 +221,8 @@
     "styled-components": "5.3.5",
     "tsconfig-paths-webpack-plugin": "3.5.2",
     "jsdom-testing-mocks": "1.9.0",
-    "postinstall-postinstall": "2.1.0"
+    "postinstall-postinstall": "2.1.0",
+    "react-native-safe-area-context": "3.4.1"
   },
   "peerDependencies": {
     "@gorhom/bottom-sheet": "^4",