@razorpay/blade 9.7.0 → 10.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/index.d.ts +12 -12
- package/build/components/index.development.web.js +4643 -7222
- package/build/components/index.development.web.js.map +1 -1
- package/build/components/index.native.d.ts +12 -12
- package/build/components/index.native.js +419 -413
- package/build/components/index.native.js.map +1 -1
- package/build/components/index.production.web.js +4631 -7163
- package/build/components/index.production.web.js.map +1 -1
- package/build/css/bankingThemeDarkDesktop.css +1 -1
- package/build/css/bankingThemeDarkMobile.css +1 -1
- package/build/css/bankingThemeLightDesktop.css +1 -1
- package/build/css/bankingThemeLightMobile.css +1 -1
- package/build/css/paymentThemeDarkDesktop.css +1 -1
- package/build/css/paymentThemeDarkMobile.css +1 -1
- package/build/css/paymentThemeLightDesktop.css +1 -1
- package/build/css/paymentThemeLightMobile.css +1 -1
- package/build/tokens/index.d.ts +27 -27
- package/build/tokens/index.development.web.js +30 -71
- package/build/tokens/index.development.web.js.map +1 -1
- package/build/tokens/index.native.d.ts +27 -27
- package/build/tokens/index.native.js +4 -5
- package/build/tokens/index.native.js.map +1 -1
- package/build/tokens/index.production.web.js +20 -44
- package/build/tokens/index.production.web.js.map +1 -1
- package/build/utils/index.d.ts +12 -12
- package/build/utils/index.development.web.js +26 -60
- package/build/utils/index.development.web.js.map +1 -1
- package/build/utils/index.native.d.ts +12 -12
- package/build/utils/index.native.js +7 -7
- package/build/utils/index.native.js.map +1 -1
- package/build/utils/index.production.web.js +24 -55
- package/build/utils/index.production.web.js.map +1 -1
- package/package.json +23 -22
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.native.js","sources":["../../src/utils/getColorScheme/getColorScheme.native.ts","../../src/utils/getMediaQuery/getMediaQuery.ts","../../src/utils/getPlatformType/getPlatformType.ts","../../src/utils/useBreakpoint/useBreakpoint.ts","../../src/tokens/theme/theme.ts","../../src/utils/logger/logger.ts","../../src/utils/useColorScheme/useColorScheme.ts","../../src/utils/platform/isReactNative.ts","../../src/utils/platform/getOS.native.ts","../../src/utils/platform/platform.native.ts","../../src/utils/platform/castUtils.ts","../../src/utils/makeBorderSize/makeBorderSize.ts","../../src/utils/makeMotionTime/makeMotionTime.native.ts","../../src/utils/makeSpace/makeSpace.ts","../../src/utils/makeTypographySize/makeTypographySize.native.ts","../../src/utils/makeSize/makeSize.ts","../../src/utils/toTitleCase/toTitleCase.ts","../../src/utils/usePrevious/usePrevious.ts","../../src/components/BladeProvider/useTheme.ts"],"sourcesContent":["import { Appearance } from 'react-native';\nimport type { ColorSchemeNames, ColorSchemeNamesInput } from '~tokens/theme';\n\nexport const getColorScheme = (colorScheme: ColorSchemeNamesInput = 'light'): ColorSchemeNames => {\n // @TODO: convert this to hook as Appearance API also adds an eventListener which subscribes to the colorscheme changes on the device\n if (colorScheme === 'light' || colorScheme === 'dark') {\n return colorScheme;\n }\n\n if (colorScheme === 'system') {\n return Appearance.getColorScheme() ?? 'light';\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 type { StringWithAutocomplete } from '~utils/types';\nimport type {\n Border,\n Breakpoints,\n Motion,\n Spacing,\n TypographyWithPlatforms,\n ElevationWithColorModes,\n} from '~tokens/global';\n\nexport type ColorSchemeNames = 'dark' | 'light';\nexport type ColorSchemeNamesInput = ColorSchemeNames | 'system';\n\nexport type ColorSchemeModes = 'onDark' | 'onLight';\n\nexport type TextTypes = 'muted' | 'normal' | 'placeholder' | 'subdued' | 'subtle';\n\nexport type ColorContrastTypes = 'low' | 'high';\n\nexport type Feedback = 'information' | 'negative' | 'neutral' | 'notice' | 'positive';\n\nexport type ColorContrast = {\n [K in ColorContrastTypes as `${Extract<K, string>}Contrast`]: string;\n};\n\n// @TODO: this shall rather be Surface = 'level1' | 'level2' | 'level3' to keep in sync with color tokens\nexport type SurfaceLevels = 1 | 2 | 3;\n\nexport type ActionStates = {\n default: string;\n hover: string;\n focus: string;\n active: string;\n disabled: string;\n};\n\nexport type LinkActionStates = ActionStates & {\n visited: string;\n};\n\nexport type ActionStatesWithContrast = {\n default: ColorContrast;\n hover: ColorContrast;\n focus: ColorContrast;\n active: ColorContrast;\n disabled: ColorContrast;\n};\n\nexport type LinkActionStatesWithContrast = ActionStatesWithContrast & {\n visited: ColorContrast;\n};\n\nexport type ActionVariants = {\n primary: ActionStates;\n secondary: ActionStates;\n tertiary: ActionStates;\n link: LinkActionStates;\n};\n\nexport type ActionVariantsWithContrast = {\n primary: ActionStatesWithContrast;\n secondary: ActionStatesWithContrast;\n tertiary: ActionStatesWithContrast;\n link: ActionStatesWithContrast;\n};\n\n// export type ActionProperties = {\n// background: ActionVariants;\n// border: ActionVariants;\n// text: ActionVariants;\n// icon: ActionVariants;\n// };\n\nexport type FeedbackActions = {\n background: Pick<ActionVariantsWithContrast, 'primary'>;\n border: Pick<ActionVariantsWithContrast, 'primary'>;\n text: Pick<ActionVariantsWithContrast, 'link' | 'primary'>;\n icon: Pick<ActionVariantsWithContrast, 'link' | 'primary'>;\n};\n\nexport type Colors = {\n brand: {\n primary: Record<300 | 400 | 500 | 600 | 700 | 800, string>;\n secondary: Record<500, string>;\n gray: Record<200 | 300 | 400 | 500 | 600 | 700 | 'a50' | 'a100', ColorContrast>;\n };\n feedback: {\n background: Record<Feedback, ColorContrast>;\n border: Record<Feedback, ColorContrast>;\n text: Record<Feedback, ColorContrast>;\n icon: Record<Feedback, ColorContrast>;\n positive: {\n action: FeedbackActions;\n };\n negative: {\n action: FeedbackActions;\n };\n information: {\n action: FeedbackActions;\n };\n notice: {\n action: FeedbackActions;\n };\n neutral: {\n action: FeedbackActions;\n };\n };\n surface: {\n background: Record<'level1' | 'level2' | 'level3', ColorContrast>;\n border: Record<'normal' | 'subtle', ColorContrast>;\n text: Record<TextTypes, ColorContrast>;\n action: {\n icon: ActionStatesWithContrast;\n };\n };\n overlay: Record<'background', string>;\n action: {\n background: Omit<ActionVariants, 'link'>;\n border: Omit<ActionVariants, 'link'>;\n text: ActionVariants;\n icon: ActionVariants;\n };\n badge: {\n background: {\n blue: ColorContrast;\n };\n border: {\n blue: ColorContrast;\n };\n text: {\n blue: ColorContrast;\n };\n icon: {\n blue: ColorContrast;\n };\n };\n};\n\nexport type ColorsWithModes = Record<ColorSchemeModes, Colors>;\n\nexport type ThemeTokens = {\n name: 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete; // Can be used to watch over state changes between theme without watching over entire theme object\n border: Border;\n breakpoints: Breakpoints;\n colors: ColorsWithModes;\n motion: Motion;\n elevation: ElevationWithColorModes;\n spacing: Spacing;\n typography: TypographyWithPlatforms;\n};\n\nexport type SpacingValues = `${Spacing[keyof Spacing]}px`;\nexport type BorderWidthValues = `${Border['width'][keyof Border['width']]}px`;\nexport type BorderRadiusValues =\n | `${Border['radius'][Exclude<keyof Border['radius'], 'round'>]}px`\n | `${Border['radius'][Extract<keyof Border['radius'], 'round'>]}`;\n\nexport const colorSchemeNamesInput: ColorSchemeNamesInput[] = ['light', 'dark', 'system'];\n","type LogType = 'error' | 'warn' | 'log';\n\ntype LoggerOptions = {\n message: string;\n moduleName?: string;\n type: LogType;\n};\n\ntype ThrowBladeErrorOptions = {\n message: string;\n moduleName?: string;\n};\n\nconst PREFIX = '[Blade]:';\n\nconst throwBladeError = ({ message, moduleName }: ThrowBladeErrorOptions): void | never => {\n if (__DEV__) {\n const prefix = moduleName ? `[Blade: ${moduleName}]:` : PREFIX;\n throw new Error(`${prefix} ${message}`);\n }\n};\n\nconst getCommonLogger = (\n type: LogType,\n): typeof console.log | typeof console.error | typeof console.warn => {\n switch (type) {\n case 'error':\n return console.error;\n case 'warn':\n return console.warn;\n case 'log':\n default:\n return console.log;\n }\n};\n\nconst logger = ({ message, moduleName, type }: LoggerOptions): void => {\n if (__DEV__) {\n const prefix = moduleName ? `[Blade: ${moduleName}]:` : PREFIX;\n getCommonLogger(type)(`${prefix} ${message}`);\n }\n};\n\nexport { throwBladeError, logger };\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 { Platform } from 'react-native';\n\nexport const getOS = (): typeof Platform.OS => {\n return Platform.OS;\n};\n\nexport const isAndroid = (): boolean => getOS() === 'android';\n","/* eslint-disable @typescript-eslint/no-namespace */\nimport type { Brand, NativeOrWebBrand } from './types';\n\nnamespace Platform {\n export type Name = 'native';\n /**\n * Right now, the module resolution is set to resolve `.native` files,\n *\n * Thus Platform.Select<> type will return the `native` type\n */\n export type Select<Options extends { web: unknown; native: unknown }> = Brand<\n Options[Name],\n 'platform-native'\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>(\n time: T,\n): Platform.CastNative<MakeMotionTime<T>> => {\n return time;\n};\n","export const makeSpace = <T extends number>(size: T): `${T}px` => {\n return `${size}px`;\n};\n","export const makeTypographySize = <T extends number>(size: T): `${T}px` => {\n return `${size}px`;\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","Appearance","getMediaQuery","min","max","getPlatformType","navigator","product","document","process","deviceType","desktop","mobile","useBreakpoint","breakpoints","supportsMatchMedia","window","matchMedia","breakpointsTokenAndQueryCollection","useMemo","Object","entries","map","index","breakpointsArray","token","screenSize","maxValue","mediaQuery","undefined","getMatchedDeviceType","useCallback","matchedBreakpoint","matchedDeviceType","platform","includes","getMatchedBreakpoint","event","find","media","matches","useState","breakpointAndDevice","setBreakpointAndDevice","useEffect","handleMediaQueryChange","mediaQueryInstances","mediaQueryInstance","addEventListener","addListener","forEach","removeEventListener","removeListener","colorSchemeNamesInput","PREFIX","throwBladeError","message","moduleName","__DEV__","prefix","Error","useColorScheme","initialColorScheme","colorSchemeState","setColorSchemeState","setColorScheme","setThemeMode","toString","isReactNative","getOS","Platform","OS","isAndroid","castWebType","value","castNativeType","makeBorderSize","size","makeMotionTime","time","makeSpace","makeTypographySize","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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"}
|
|
1
|
+
{"version":3,"file":"index.native.js","sources":["../../src/utils/getColorScheme/getColorScheme.native.ts","../../src/utils/getMediaQuery/getMediaQuery.ts","../../src/utils/getPlatformType/getPlatformType.ts","../../src/utils/useBreakpoint/useBreakpoint.ts","../../src/tokens/theme/theme.ts","../../src/utils/logger/logger.ts","../../src/utils/useColorScheme/useColorScheme.ts","../../src/utils/platform/isReactNative.ts","../../src/utils/platform/getOS.native.ts","../../src/utils/platform/platform.native.ts","../../src/utils/platform/castUtils.ts","../../src/utils/makeBorderSize/makeBorderSize.ts","../../src/utils/makeMotionTime/makeMotionTime.native.ts","../../src/utils/makeSpace/makeSpace.ts","../../src/utils/makeTypographySize/makeTypographySize.native.ts","../../src/utils/makeSize/makeSize.ts","../../src/utils/toTitleCase/toTitleCase.ts","../../src/utils/usePrevious/usePrevious.ts","../../src/components/BladeProvider/useTheme.ts"],"sourcesContent":["import { Appearance } from 'react-native';\nimport type { ColorSchemeNames, ColorSchemeNamesInput } from '~tokens/theme';\n\nexport const getColorScheme = (colorScheme: ColorSchemeNamesInput = 'light'): ColorSchemeNames => {\n // @TODO: convert this to hook as Appearance API also adds an eventListener which subscribes to the colorscheme changes on the device\n if (colorScheme === 'light' || colorScheme === 'dark') {\n return colorScheme;\n }\n\n if (colorScheme === 'system') {\n return Appearance.getColorScheme() ?? 'light';\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 type { StringWithAutocomplete } from '~utils/types';\nimport type {\n Border,\n Breakpoints,\n Motion,\n Spacing,\n TypographyWithPlatforms,\n ElevationWithColorModes,\n} from '~tokens/global';\n\nexport type ColorSchemeNames = 'dark' | 'light';\nexport type ColorSchemeNamesInput = ColorSchemeNames | 'system';\n\nexport type ColorSchemeModes = 'onDark' | 'onLight';\n\nexport type TextTypes = 'muted' | 'normal' | 'placeholder' | 'subdued' | 'subtle';\n\nexport type ColorContrastTypes = 'low' | 'high';\n\nexport type Feedback = 'information' | 'negative' | 'neutral' | 'notice' | 'positive';\n\nexport type ColorContrast = {\n [K in ColorContrastTypes as `${Extract<K, string>}Contrast`]: string;\n};\n\n// @TODO: this shall rather be Surface = 'level1' | 'level2' | 'level3' to keep in sync with color tokens\nexport type SurfaceLevels = 1 | 2 | 3;\n\nexport type ActionStates = {\n default: string;\n hover: string;\n focus: string;\n active: string;\n disabled: string;\n};\n\nexport type LinkActionStates = ActionStates & {\n visited: string;\n};\n\nexport type ActionStatesWithContrast = {\n default: ColorContrast;\n hover: ColorContrast;\n focus: ColorContrast;\n active: ColorContrast;\n disabled: ColorContrast;\n};\n\nexport type LinkActionStatesWithContrast = ActionStatesWithContrast & {\n visited: ColorContrast;\n};\n\nexport type ActionVariants = {\n primary: ActionStates;\n secondary: ActionStates;\n tertiary: ActionStates;\n link: LinkActionStates;\n};\n\nexport type ActionVariantsWithContrast = {\n primary: ActionStatesWithContrast;\n secondary: ActionStatesWithContrast;\n tertiary: ActionStatesWithContrast;\n link: ActionStatesWithContrast;\n};\n\n// export type ActionProperties = {\n// background: ActionVariants;\n// border: ActionVariants;\n// text: ActionVariants;\n// icon: ActionVariants;\n// };\n\nexport type FeedbackActions = {\n background: Pick<ActionVariantsWithContrast, 'primary'>;\n border: Pick<ActionVariantsWithContrast, 'primary'>;\n text: Pick<ActionVariantsWithContrast, 'link' | 'primary'>;\n icon: Pick<ActionVariantsWithContrast, 'link' | 'primary'>;\n};\n\nexport type Colors = {\n brand: {\n primary: Record<300 | 400 | 500 | 600 | 700 | 800, string>;\n secondary: Record<500, string>;\n gray: Record<200 | 300 | 400 | 500 | 600 | 700 | 'a50' | 'a100', ColorContrast>;\n };\n feedback: {\n background: Record<Feedback, ColorContrast>;\n border: Record<Feedback, ColorContrast>;\n text: Record<Feedback, ColorContrast>;\n icon: Record<Feedback, ColorContrast>;\n positive: {\n action: FeedbackActions;\n };\n negative: {\n action: FeedbackActions;\n };\n information: {\n action: FeedbackActions;\n };\n notice: {\n action: FeedbackActions;\n };\n neutral: {\n action: FeedbackActions;\n };\n };\n surface: {\n background: Record<'level1' | 'level2' | 'level3', ColorContrast>;\n border: Record<'normal' | 'subtle', ColorContrast>;\n text: Record<TextTypes, ColorContrast>;\n action: {\n icon: ActionStatesWithContrast;\n };\n };\n overlay: Record<'background', string>;\n action: {\n background: Omit<ActionVariants, 'link'>;\n border: Omit<ActionVariants, 'link'>;\n text: ActionVariants;\n icon: ActionVariants;\n };\n badge: {\n background: {\n blue: ColorContrast;\n };\n border: {\n blue: ColorContrast;\n };\n text: {\n blue: ColorContrast;\n };\n icon: {\n blue: ColorContrast;\n };\n };\n};\n\nexport type ColorsWithModes = Record<ColorSchemeModes, Colors>;\n\nexport type ThemeTokens = {\n name: 'paymentTheme' | 'bankingTheme' | StringWithAutocomplete; // Can be used to watch over state changes between theme without watching over entire theme object\n border: Border;\n breakpoints: Breakpoints;\n colors: ColorsWithModes;\n motion: Motion;\n elevation: ElevationWithColorModes;\n spacing: Spacing;\n typography: TypographyWithPlatforms;\n};\n\nexport type SpacingValues = `${Spacing[keyof Spacing]}px`;\nexport type BorderWidthValues = `${Border['width'][keyof Border['width']]}px`;\nexport type BorderRadiusValues =\n | `${Border['radius'][Exclude<keyof Border['radius'], 'round'>]}px`\n | `${Border['radius'][Extract<keyof Border['radius'], 'round'>]}`;\n\nexport const colorSchemeNamesInput: ColorSchemeNamesInput[] = ['light', 'dark', 'system'];\n","type LogType = 'error' | 'warn' | 'log';\n\ntype LoggerOptions = {\n message: string;\n moduleName?: string;\n type: LogType;\n};\n\ntype ThrowBladeErrorOptions = {\n message: string;\n moduleName?: string;\n};\n\nconst PREFIX = '[Blade]:';\n\nconst throwBladeError = ({ message, moduleName }: ThrowBladeErrorOptions): void | never => {\n if (__DEV__) {\n const prefix = moduleName ? `[Blade: ${moduleName}]:` : PREFIX;\n throw new Error(`${prefix} ${message}`);\n }\n};\n\nconst getCommonLogger = (\n type: LogType,\n): typeof console.log | typeof console.error | typeof console.warn => {\n switch (type) {\n case 'error':\n return console.error;\n case 'warn':\n return console.warn;\n case 'log':\n default:\n return console.log;\n }\n};\n\nconst logger = ({ message, moduleName, type }: LoggerOptions): void => {\n if (__DEV__) {\n const prefix = moduleName ? `[Blade: ${moduleName}]:` : PREFIX;\n getCommonLogger(type)(`${prefix} ${message}`);\n }\n};\n\nexport { throwBladeError, logger };\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 { Platform } from 'react-native';\n\nexport const getOS = (): typeof Platform.OS => {\n return Platform.OS;\n};\n\nexport const isAndroid = (): boolean => getOS() === 'android';\n","/* eslint-disable @typescript-eslint/no-namespace */\nimport type { Brand, NativeOrWebBrand } from './types';\n\nnamespace Platform {\n export type Name = 'native';\n /**\n * Right now, the module resolution is set to resolve `.native` files,\n *\n * Thus Platform.Select<> type will return the `native` type\n */\n export type Select<Options extends { web: unknown; native: unknown }> = Brand<\n Options[Name],\n 'platform-native'\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>(\n time: T,\n): Platform.CastNative<MakeMotionTime<T>> => {\n return time;\n};\n","export const makeSpace = <T extends number>(size: T): `${T}px` => {\n return `${size}px`;\n};\n","export const makeTypographySize = <T extends number>(size: T): `${T}px` => {\n return `${size}px`;\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","_Appearance$getColorS","Appearance","getMediaQuery","_ref","min","max","getPlatformType","navigator","product","document","process","deviceType","desktop","mobile","useBreakpoint","_window","breakpoints","supportsMatchMedia","window","matchMedia","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","matches","_useState","useState","_useState2","breakpointAndDevice","setBreakpointAndDevice","useEffect","handleMediaQueryChange","mediaQueryInstances","_ref5","_ref5$mediaQuery","mediaQueryInstance","addEventListener","addListener","forEach","removeEventListener","removeListener","colorSchemeNamesInput","PREFIX","throwBladeError","message","moduleName","__DEV__","prefix","Error","useColorScheme","initialColorScheme","colorSchemeState","setColorSchemeState","setColorScheme","setThemeMode","toString","isReactNative","getOS","Platform","OS","isAndroid","castWebType","value","castNativeType","makeBorderSize","size","makeMotionTime","time","makeSpace","makeTypographySize","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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"}
|
|
@@ -10,21 +10,18 @@ var getColorScheme = function getColorScheme() {
|
|
|
10
10
|
system: 'default'
|
|
11
11
|
};
|
|
12
12
|
var supportsMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia === 'function';
|
|
13
|
-
|
|
14
13
|
if (colorScheme === 'light' || colorScheme === 'dark') {
|
|
15
14
|
return colorScheme;
|
|
16
15
|
}
|
|
17
|
-
|
|
18
16
|
if (colorScheme === 'system' && supportsMatchMedia && window.matchMedia(colorSchemeMediaQueryMap.dark).matches) {
|
|
19
17
|
return 'dark';
|
|
20
18
|
}
|
|
21
|
-
|
|
22
19
|
return 'light';
|
|
23
20
|
};
|
|
24
21
|
|
|
25
22
|
var getMediaQuery = function getMediaQuery(_ref) {
|
|
26
23
|
var min = _ref.min,
|
|
27
|
-
|
|
24
|
+
max = _ref.max;
|
|
28
25
|
return "screen and (min-width: ".concat(min, "px)").concat(max ? " and (max-width: ".concat(max, "px)") : '');
|
|
29
26
|
};
|
|
30
27
|
|
|
@@ -32,15 +29,12 @@ var getPlatformType = function getPlatformType() {
|
|
|
32
29
|
if (typeof navigator !== 'undefined' && navigator.product === 'ReactNative') {
|
|
33
30
|
return 'react-native';
|
|
34
31
|
}
|
|
35
|
-
|
|
36
32
|
if (typeof document !== 'undefined') {
|
|
37
33
|
return 'browser';
|
|
38
34
|
}
|
|
39
|
-
|
|
40
35
|
if (typeof process !== 'undefined') {
|
|
41
36
|
return 'node';
|
|
42
37
|
}
|
|
43
|
-
|
|
44
38
|
return 'unknown';
|
|
45
39
|
};
|
|
46
40
|
|
|
@@ -50,17 +44,14 @@ var deviceType = {
|
|
|
50
44
|
};
|
|
51
45
|
var useBreakpoint = function useBreakpoint(_ref) {
|
|
52
46
|
var _window;
|
|
53
|
-
|
|
54
47
|
var breakpoints = _ref.breakpoints;
|
|
55
48
|
var supportsMatchMedia = typeof document !== 'undefined' && typeof window !== 'undefined' && typeof ((_window = window) === null || _window === void 0 ? void 0 : _window.matchMedia) === 'function';
|
|
56
49
|
var breakpointsTokenAndQueryCollection = useMemo(function () {
|
|
57
50
|
return supportsMatchMedia ? Object.entries(breakpoints).map(function (_ref2, index, breakpointsArray) {
|
|
58
51
|
var _breakpointsArray;
|
|
59
|
-
|
|
60
52
|
var _ref3 = _slicedToArray(_ref2, 2),
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
53
|
+
token = _ref3[0],
|
|
54
|
+
screenSize = _ref3[1];
|
|
64
55
|
var min = screenSize;
|
|
65
56
|
var maxValue = (_breakpointsArray = breakpointsArray[index + 1]) === null || _breakpointsArray === void 0 ? void 0 : _breakpointsArray[1];
|
|
66
57
|
var mediaQuery = getMediaQuery({
|
|
@@ -77,7 +68,6 @@ var useBreakpoint = function useBreakpoint(_ref) {
|
|
|
77
68
|
var getMatchedDeviceType = useCallback(function (matchedBreakpoint) {
|
|
78
69
|
var matchedDeviceType = deviceType.mobile;
|
|
79
70
|
var platform = getPlatformType();
|
|
80
|
-
|
|
81
71
|
if (platform === 'react-native') {
|
|
82
72
|
matchedDeviceType = deviceType.mobile;
|
|
83
73
|
} else if (platform === 'browser') {
|
|
@@ -91,49 +81,40 @@ var useBreakpoint = function useBreakpoint(_ref) {
|
|
|
91
81
|
//@TODO: Check for useragent for node
|
|
92
82
|
matchedDeviceType = deviceType.desktop;
|
|
93
83
|
}
|
|
94
|
-
|
|
95
84
|
return matchedDeviceType;
|
|
96
85
|
}, []);
|
|
97
86
|
var getMatchedBreakpoint = useCallback(function (event) {
|
|
98
87
|
var _breakpointsTokenAndQ, _breakpointsTokenAndQ2;
|
|
99
|
-
|
|
100
88
|
var matchedBreakpoint = (_breakpointsTokenAndQ = (_breakpointsTokenAndQ2 = breakpointsTokenAndQueryCollection.find(function (_ref4) {
|
|
101
89
|
var _ref4$mediaQuery = _ref4.mediaQuery,
|
|
102
|
-
|
|
103
|
-
|
|
90
|
+
mediaQuery = _ref4$mediaQuery === void 0 ? '' : _ref4$mediaQuery;
|
|
104
91
|
// this will run whenever mediaQuery change event is triggered
|
|
105
92
|
if ((event === null || event === void 0 ? void 0 : event.media) === mediaQuery) {
|
|
106
93
|
return true;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
|
|
94
|
+
}
|
|
110
95
|
// 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
|
|
111
96
|
if (window.matchMedia(mediaQuery).matches) {
|
|
112
97
|
return true;
|
|
113
98
|
}
|
|
114
|
-
|
|
115
99
|
return false;
|
|
116
100
|
})) === null || _breakpointsTokenAndQ2 === void 0 ? void 0 : _breakpointsTokenAndQ2.token) !== null && _breakpointsTokenAndQ !== void 0 ? _breakpointsTokenAndQ : undefined;
|
|
117
101
|
return matchedBreakpoint;
|
|
118
102
|
}, [breakpointsTokenAndQueryCollection]);
|
|
119
|
-
|
|
120
103
|
var _useState = useState(function () {
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
104
|
+
var matchedBreakpoint = getMatchedBreakpoint();
|
|
105
|
+
var matchedDeviceType = getMatchedDeviceType(matchedBreakpoint);
|
|
106
|
+
return {
|
|
107
|
+
matchedBreakpoint: matchedBreakpoint,
|
|
108
|
+
matchedDeviceType: matchedDeviceType
|
|
109
|
+
};
|
|
110
|
+
}),
|
|
111
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
112
|
+
breakpointAndDevice = _useState2[0],
|
|
113
|
+
setBreakpointAndDevice = _useState2[1];
|
|
132
114
|
useEffect(function () {
|
|
133
115
|
if (!supportsMatchMedia) {
|
|
134
116
|
return undefined;
|
|
135
117
|
}
|
|
136
|
-
|
|
137
118
|
var handleMediaQueryChange = function handleMediaQueryChange(event) {
|
|
138
119
|
setBreakpointAndDevice(function () {
|
|
139
120
|
var matchedBreakpoint = getMatchedBreakpoint(event);
|
|
@@ -144,23 +125,20 @@ var useBreakpoint = function useBreakpoint(_ref) {
|
|
|
144
125
|
};
|
|
145
126
|
});
|
|
146
127
|
};
|
|
147
|
-
|
|
148
128
|
var mediaQueryInstances = breakpointsTokenAndQueryCollection.map(function (_ref5) {
|
|
149
129
|
var _ref5$mediaQuery = _ref5.mediaQuery,
|
|
150
|
-
|
|
130
|
+
mediaQuery = _ref5$mediaQuery === void 0 ? '' : _ref5$mediaQuery;
|
|
151
131
|
var mediaQueryInstance = window.matchMedia(mediaQuery);
|
|
152
132
|
/**
|
|
153
133
|
* the mediaquery event listener is available on mediaQuery instances and not `window`
|
|
154
134
|
* we iterate over all the breakpoints we have, register each instance and store them as `mediaQueryInstances` so we can later unregister all of them.
|
|
155
135
|
*/
|
|
156
|
-
|
|
157
136
|
if (mediaQueryInstance.addEventListener) {
|
|
158
137
|
mediaQueryInstance.addEventListener('change', handleMediaQueryChange);
|
|
159
138
|
} else {
|
|
160
139
|
// 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
|
|
161
140
|
mediaQueryInstance.addListener(handleMediaQueryChange);
|
|
162
141
|
}
|
|
163
|
-
|
|
164
142
|
return mediaQueryInstance;
|
|
165
143
|
});
|
|
166
144
|
return function () {
|
|
@@ -173,24 +151,22 @@ var useBreakpoint = function useBreakpoint(_ref) {
|
|
|
173
151
|
}
|
|
174
152
|
});
|
|
175
153
|
};
|
|
176
|
-
}, [breakpointsTokenAndQueryCollection, getMatchedBreakpoint, getMatchedDeviceType, supportsMatchMedia]);
|
|
154
|
+
}, [breakpointsTokenAndQueryCollection, getMatchedBreakpoint, getMatchedDeviceType, supportsMatchMedia]);
|
|
177
155
|
|
|
156
|
+
// @TODO: handle SSR scenarios
|
|
178
157
|
return breakpointAndDevice;
|
|
179
158
|
};
|
|
180
159
|
|
|
181
160
|
var useColorScheme = function useColorScheme() {
|
|
182
161
|
var initialColorScheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'light';
|
|
183
|
-
|
|
184
162
|
// if colorScheme defined use that else fallback to 'light'
|
|
185
163
|
var _useState = useState(function () {
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
164
|
+
return getColorScheme(initialColorScheme);
|
|
165
|
+
}),
|
|
166
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
167
|
+
colorSchemeState = _useState2[0],
|
|
168
|
+
setColorSchemeState = _useState2[1];
|
|
192
169
|
var setColorScheme = useCallback(function setThemeMode(colorScheme) {
|
|
193
|
-
|
|
194
170
|
setColorSchemeState(getColorScheme(colorScheme));
|
|
195
171
|
}, []);
|
|
196
172
|
return {
|
|
@@ -200,7 +176,6 @@ var useColorScheme = function useColorScheme() {
|
|
|
200
176
|
};
|
|
201
177
|
|
|
202
178
|
/* eslint-disable @typescript-eslint/no-namespace */
|
|
203
|
-
|
|
204
179
|
var isReactNative = function isReactNative() {
|
|
205
180
|
return getPlatformType() === 'react-native';
|
|
206
181
|
};
|
|
@@ -214,7 +189,6 @@ var isAndroid = function isAndroid() {
|
|
|
214
189
|
|
|
215
190
|
/* eslint-disable @typescript-eslint/no-namespace */
|
|
216
191
|
var Platform;
|
|
217
|
-
|
|
218
192
|
(function (_Platform) {})(Platform || (Platform = {}));
|
|
219
193
|
|
|
220
194
|
/**
|
|
@@ -234,6 +208,7 @@ var Platform;
|
|
|
234
208
|
var castWebType = function castWebType(value) {
|
|
235
209
|
return value;
|
|
236
210
|
};
|
|
211
|
+
|
|
237
212
|
/**
|
|
238
213
|
* @description
|
|
239
214
|
*
|
|
@@ -248,8 +223,6 @@ var castWebType = function castWebType(value) {
|
|
|
248
223
|
* // ^ number
|
|
249
224
|
* ```
|
|
250
225
|
*/
|
|
251
|
-
|
|
252
|
-
|
|
253
226
|
var castNativeType = function castNativeType(value) {
|
|
254
227
|
return value;
|
|
255
228
|
};
|
|
@@ -258,7 +231,6 @@ function makeBorderSize(size) {
|
|
|
258
231
|
if (typeof size === 'number') {
|
|
259
232
|
return "".concat(size, "px");
|
|
260
233
|
}
|
|
261
|
-
|
|
262
234
|
return size;
|
|
263
235
|
}
|
|
264
236
|
|
|
@@ -293,7 +265,6 @@ var toTitleCase = function toTitleCase(inputString) {
|
|
|
293
265
|
* @see {@link https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state}
|
|
294
266
|
* @deprecated This utility will be deprecated in subsequent version.
|
|
295
267
|
*/
|
|
296
|
-
|
|
297
268
|
function usePrevious(value) {
|
|
298
269
|
var ref = useRef();
|
|
299
270
|
useEffect(function () {
|
|
@@ -311,10 +282,8 @@ var ThemeContext = /*#__PURE__*/createContext({
|
|
|
311
282
|
return null;
|
|
312
283
|
}
|
|
313
284
|
});
|
|
314
|
-
|
|
315
285
|
var useTheme = function useTheme() {
|
|
316
286
|
var themeContext = useContext(ThemeContext);
|
|
317
|
-
|
|
318
287
|
return themeContext;
|
|
319
288
|
};
|
|
320
289
|
|
|
@@ -1 +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","colorSchemeMediaQueryMap","light","dark","system","supportsMatchMedia","window","matchMedia","matches","getMediaQuery","min","max","getPlatformType","navigator","product","document","process","deviceType","desktop","mobile","useBreakpoint","breakpoints","breakpointsTokenAndQueryCollection","useMemo","Object","entries","map","index","breakpointsArray","token","screenSize","maxValue","mediaQuery","undefined","getMatchedDeviceType","useCallback","matchedBreakpoint","matchedDeviceType","platform","includes","getMatchedBreakpoint","event","find","media","useState","breakpointAndDevice","setBreakpointAndDevice","useEffect","handleMediaQueryChange","mediaQueryInstances","mediaQueryInstance","addEventListener","addListener","forEach","removeEventListener","removeListener","useColorScheme","initialColorScheme","colorSchemeState","setColorSchemeState","setColorScheme","setThemeMode","isReactNative","getOS","isAndroid","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":";;;IAEaA,cAAc,GAAG,SAAjBA,cAAiB,GAAoE;AAAA,MAAnEC,WAAmE,uEAA9B,OAA8B;AAChG;AACA,MAAMC,wBAAwB,GAAG;AAC/BC,IAAAA,KAAK,EAAE,+BADwB;AAE/BC,IAAAA,IAAI,EAAE,8BAFyB;AAG/BC,IAAAA,MAAM,EAAE;AAHuB,GAAjC;AAKA,MAAMC,kBAAkB,GACtB,OAAOC,MAAP,KAAkB,WAAlB,IAAiC,OAAOA,MAAM,CAACC,UAAd,KAA6B,UADhE;;AAGA,MAAIP,WAAW,KAAK,OAAhB,IAA2BA,WAAW,KAAK,MAA/C,EAAuD;AACrD,WAAOA,WAAP;AACD;;AAED,MACEA,WAAW,KAAK,QAAhB,IACAK,kBADA,IAEAC,MAAM,CAACC,UAAP,CAAkBN,wBAAwB,CAACE,IAA3C,EAAiDK,OAHnD,EAIE;AACA,WAAO,MAAP;AACD;;AAED,SAAO,OAAP;AACD;;ICzBYC,aAAa,GAAG,SAAhBA,aAAgB,OAAyD;AAAA,MAAtDC,GAAsD,QAAtDA,GAAsD;AAAA,MAAjDC,GAAiD,QAAjDA,GAAiD;AACpF,0CAAiCD,GAAjC,gBAA0CC,GAAG,8BAAuBA,GAAvB,WAAkC,EAA/E;AACD;;ICAYC,eAAe,GAAG,SAAlBA,eAAkB,GAAqB;AAClD,MAAI,OAAOC,SAAP,KAAqB,WAArB,IAAoCA,SAAS,CAACC,OAAV,KAAsB,aAA9D,EAA6E;AAC3E,WAAO,cAAP;AACD;;AAED,MAAI,OAAOC,QAAP,KAAoB,WAAxB,EAAqC;AACnC,WAAO,SAAP;AACD;;AAED,MAAI,OAAOC,OAAP,KAAmB,WAAvB,EAAoC;AAClC,WAAO,MAAP;AACD;;AAED,SAAO,SAAP;AACD;;ACVD,IAAMC,UAAU,GAAG;AACjBC,EAAAA,OAAO,EAAE,SADQ;AAEjBC,EAAAA,MAAM,EAAE;AAFS,CAAnB;IAaaC,aAAa,GAAG,SAAhBA,aAAgB,OAIF;AAAA;;AAAA,MAHzBC,WAGyB,QAHzBA,WAGyB;AACzB,MAAMhB,kBAAkB,GACtB,OAAOU,QAAP,KAAoB,WAApB,IACA,OAAOT,MAAP,KAAkB,WADlB,IAEA,mBAAOA,MAAP,4CAAO,QAAQC,UAAf,MAA8B,UAHhC;AAKA,MAAMe,kCAAkC,GAAGC,OAAO,CAChD;AAAA,WACGlB,kBAAkB,GACfmB,MAAM,CAACC,OAAP,CAAeJ,WAAf,EAA4BK,GAA5B,CAAgC,iBAAsBC,KAAtB,EAA6BC,gBAA7B,EAAkD;AAAA;;AAAA;AAAA,UAAhDC,KAAgD;AAAA,UAAzCC,UAAyC;;AAChF,UAAMpB,GAAG,GAAGoB,UAAZ;AACA,UAAMC,QAAQ,wBAAGH,gBAAgB,CAACD,KAAK,GAAG,CAAT,CAAnB,sDAAG,kBAA8B,CAA9B,CAAjB;AACA,UAAMK,UAAU,GAAGvB,aAAa,CAAC;AAAEC,QAAAA,GAAG,EAAHA,GAAF;AAAOC,QAAAA,GAAG,EAAEoB,QAAQ,GAAGA,QAAQ,GAAG,CAAd,GAAkBE;AAAtC,OAAD,CAAhC;AACA,aAAO;AAAEJ,QAAAA,KAAK,EAALA,KAAF;AAASC,QAAAA,UAAU,EAAVA,UAAT;AAAqBE,QAAAA,UAAU,EAAVA;AAArB,OAAP;AACD,KALD,CADe,GAOf,EARN;AAAA,GADgD,EAchD,CAACX,WAAD,EAAchB,kBAAd,CAdgD,CAAlD;AAiBA,MAAM6B,oBAAoB,GAAGC,WAAW,CAAC,UAACC,iBAAD,EAA+C;AACtF,QAAIC,iBAA6B,GAAGpB,UAAU,CAACE,MAA/C;AACA,QAAMmB,QAAQ,GAAG1B,eAAe,EAAhC;;AACA,QAAI0B,QAAQ,KAAK,cAAjB,EAAiC;AAC/BD,MAAAA,iBAAiB,GAAGpB,UAAU,CAACE,MAA/B;AACD,KAFD,MAEO,IAAImB,QAAQ,KAAK,SAAjB,EAA4B;AACjC,UAAIF,iBAAiB,IAAI,CAAC,MAAD,EAAS,IAAT,EAAe,GAAf,EAAoBG,QAApB,CAA6BH,iBAA7B,CAAzB,EAA0E;AACxE;AACAC,QAAAA,iBAAiB,GAAGpB,UAAU,CAACE,MAA/B;AACD,OAHD,MAGO;AACLkB,QAAAA,iBAAiB,GAAGpB,UAAU,CAACC,OAA/B;AACD;AACF,KAPM,MAOA,IAAIoB,QAAQ,KAAK,MAAjB,EAAyB;AAC9B;AACAD,MAAAA,iBAAiB,GAAGpB,UAAU,CAACC,OAA/B;AACD;;AACD,WAAOmB,iBAAP;AACD,GAjBuC,EAiBrC,EAjBqC,CAAxC;AAmBA,MAAMG,oBAAoB,GAAGL,WAAW,CACtC,UAACM,KAAD,EAA6C;AAAA;;AAC3C,QAAML,iBAAiB,sDACrBd,kCAAkC,CAACoB,IAAnC,CAAwC,iBAAyB;AAAA,mCAAtBV,UAAsB;AAAA,UAAtBA,UAAsB,iCAAT,EAAS;;AAC/D;AACA,UAAI,CAAAS,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEE,KAAP,MAAiBX,UAArB,EAAiC;AAC/B,eAAO,IAAP;AACD,OAJ8D;;;AAK/D;AACA,UAAI1B,MAAM,CAACC,UAAP,CAAkByB,UAAlB,EAA8BxB,OAAlC,EAA2C;AACzC,eAAO,IAAP;AACD;;AACD,aAAO,KAAP;AACD,KAVD,CADqB,2DACrB,uBAUIqB,KAXiB,yEAWRI,SAXf;AAaA,WAAOG,iBAAP;AACD,GAhBqC,EAiBtC,CAACd,kCAAD,CAjBsC,CAAxC;;AAoBA,kBAAsDsB,QAAQ,CAAC,YAAM;AACnE,QAAMR,iBAAiB,GAAGI,oBAAoB,EAA9C;AACA,QAAMH,iBAAiB,GAAGH,oBAAoB,CAACE,iBAAD,CAA9C;AACA,WAAO;AACLA,MAAAA,iBAAiB,EAAjBA,iBADK;AAELC,MAAAA,iBAAiB,EAAjBA;AAFK,KAAP;AAID,GAP6D,CAA9D;AAAA;AAAA,MAAOQ,mBAAP;AAAA,MAA4BC,sBAA5B;;AASAC,EAAAA,SAAS,CAAC,YAAM;AACd,QAAI,CAAC1C,kBAAL,EAAyB;AACvB,aAAO4B,SAAP;AACD;;AAED,QAAMe,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACP,KAAD,EAAsC;AACnEK,MAAAA,sBAAsB,CAAC,YAAM;AAC3B,YAAMV,iBAAiB,GAAGI,oBAAoB,CAACC,KAAD,CAA9C;AACA,YAAMJ,iBAAiB,GAAGH,oBAAoB,CAACE,iBAAD,CAA9C;AAEA,eAAO;AAAEA,UAAAA,iBAAiB,EAAjBA,iBAAF;AAAqBC,UAAAA,iBAAiB,EAAjBA;AAArB,SAAP;AACD,OALqB,CAAtB;AAMD,KAPD;;AASA,QAAMY,mBAAmB,GAAG3B,kCAAkC,CAACI,GAAnC,CAAuC,iBAAyB;AAAA,mCAAtBM,UAAsB;AAAA,UAAtBA,UAAsB,iCAAT,EAAS;AAC1F,UAAMkB,kBAAkB,GAAG5C,MAAM,CAACC,UAAP,CAAkByB,UAAlB,CAA3B;AACA;AACN;AACA;AACA;;AACM,UAAIkB,kBAAkB,CAACC,gBAAvB,EAAyC;AACvCD,QAAAA,kBAAkB,CAACC,gBAAnB,CAAoC,QAApC,EAA8CH,sBAA9C;AACD,OAFD,MAEO;AACL;AACAE,QAAAA,kBAAkB,CAACE,WAAnB,CAA+BJ,sBAA/B;AACD;;AACD,aAAOE,kBAAP;AACD,KAb2B,CAA5B;AAeA,WAAO,YAAY;AACjBD,MAAAA,mBAAmB,CAACI,OAApB,CAA4B,UAACH,kBAAD,EAAwB;AAClD,YAAIA,kBAAkB,CAACI,mBAAvB,EAA4C;AAC1CJ,UAAAA,kBAAkB,CAACI,mBAAnB,CAAuC,QAAvC,EAAiDN,sBAAjD;AACD,SAFD,MAEO;AACL;AACAE,UAAAA,kBAAkB,CAACK,cAAnB,CAAkCP,sBAAlC;AACD;AACF,OAPD;AAQD,KATD;AAUD,GAvCQ,EAuCN,CACD1B,kCADC,EAEDkB,oBAFC,EAGDN,oBAHC,EAID7B,kBAJC,CAvCM,CAAT,CAvEyB;;AAsHzB,SAAOwC,mBAAP;AACD;;ICnIYW,cAAc,GAAG,SAAjBA,cAAiB,GAET;AAAA,MADnBC,kBACmB,uEADyB,OACzB;;AACnB;AACA,kBAAgDb,QAAQ,CAAmB;AAAA,WACzE7C,cAAc,CAAC0D,kBAAD,CAD2D;AAAA,GAAnB,CAAxD;AAAA;AAAA,MAAOC,gBAAP;AAAA,MAAyBC,mBAAzB;;AAIA,MAAMC,cAAc,GAAGzB,WAAW,CAAC,SAAS0B,YAAT,CAAsB7D,WAAtB,EAA0D;;AAS3F2D,IAAAA,mBAAmB,CAAC5D,cAAc,CAACC,WAAD,CAAf,CAAnB;AACD,GAViC,EAU/B,EAV+B,CAAlC;AAYA,SAAO;AACLA,IAAAA,WAAW,EAAE0D,gBADR;AAELE,IAAAA,cAAc,EAAdA;AAFK,GAAP;AAID;;ACnCD;;IAGME,aAAa,GAAG,SAAhBA,aAAgB,GAAe;AACnC,SAAOlD,eAAe,OAAO,cAA7B;AACD;;ICHYmD,KAAK,GAAG,SAARA,KAAQ,GAA0B;AAC7C,SAAO,KAAP;AACD;IAEYC,SAAS,GAAG,SAAZA,SAAY;AAAA,SAAe,KAAf;AAAA;;ACNzB;;;0BAGUC,aAAAA;;ACDV;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;IACMC,WAAW,GAAG,SAAdA,WAAc,CAAIC,KAAJ,EAAsC;AACxD,SAAOA,KAAP;AACD;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;IACMC,cAAc,GAAG,SAAjBA,cAAiB,CAAID,KAAJ,EAAyC;AAC9D,SAAOA,KAAP;AACD;;AClCM,SAASE,cAAT,CAAmDC,IAAnD,EAA0E;AAC/E,MAAI,OAAOA,IAAP,KAAgB,QAApB,EAA8B;AAC5B,qBAAUA,IAAV;AACD;;AACD,SAAOA,IAAP;AACD;;ICJYC,cAAc,GAAG,SAAjBA,cAAiB,CAAmBC,IAAnB,EAAoE;AAChG,mBAAUA,IAAV;AACD;;ICLYC,SAAS,GAAG,SAAZA,SAAY,CAAmBH,IAAnB,EAAyC;AAChE,mBAAUA,IAAV;AACD;;ICFYI,kBAAkB,GAAG,SAArBA,kBAAqB,CAACJ,IAAD,EAAkC;AAClE,MAAMK,QAAQ,GAAGL,IAAI,GAAG,EAAxB;AACA,mBAAUK,QAAV;AACD;;ICDYC,QAAQ,GAAG,SAAXA,QAAW,CAAmBN,IAAnB,EAAyC;AAC/D,mBAAUA,IAAV;AACD;;ACJD;AACA;AACA;IACaO,WAAW,GAAG,SAAdA,WAAc,CAACC,WAAD;AAAA,SACzBA,WAAW,CACRC,WADH,GAEGC,KAFH,CAES,GAFT,EAGGtD,GAHH,CAGO,UAACuD,IAAD;AAAA,WAAUA,IAAI,CAACC,MAAL,CAAY,CAAZ,EAAeC,WAAf,KAA+BF,IAAI,CAACG,KAAL,CAAW,CAAX,CAAzC;AAAA,GAHP,EAIGC,IAJH,CAIQ,GAJR,CADyB;AAAA;;ACA3B;AACA;AACA;AACA;AACA;;AACO,SAASC,WAAT,CAAwBnB,KAAxB,EAA8E;AACnF,MAAMoB,GAAG,GAAGC,MAAM,EAAlB;AAEAzC,EAAAA,SAAS,CAAC,YAAM;AACdwC,IAAAA,GAAG,CAACE,OAAJ,GAActB,KAAd;AACD,GAFQ,EAEN,CAACA,KAAD,CAFM,CAAT;AAIA,SAAOoB,GAAG,CAACE,OAAX;AACD;;ICLYC,YAAY,gBAAGC,aAAa,CAAe;AACtD;AACAC,EAAAA,KAAK,EAAE,IAF+C;AAGtD5F,EAAAA,WAAW,EAAE,OAHyC;AAItDsC,EAAAA,QAAQ,EAAE,WAJ4C;AAKtDsB,EAAAA,cAAc,EAAE;AAAA,WAAM,IAAN;AAAA;AALsC,CAAf;;IAQnCiC,QAAQ,GAAG,SAAXA,QAAW,GAAoB;AACnC,MAAMC,YAAY,GAAGC,UAAU,CAAeL,YAAf,CAA/B;;AAeA,SAAOI,YAAP;AACD;;;;"}
|
|
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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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@razorpay/blade",
|
|
3
3
|
"description": "The Design System that powers Razorpay",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "10.0.0",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"engines": {
|
|
7
7
|
"node": ">=18.12.1"
|
|
@@ -114,7 +114,7 @@
|
|
|
114
114
|
"postinstall": "patch-package"
|
|
115
115
|
},
|
|
116
116
|
"dependencies": {
|
|
117
|
-
"@babel/runtime": "7.
|
|
117
|
+
"@babel/runtime": "7.20.0",
|
|
118
118
|
"@types/body-scroll-lock": "3.1.0",
|
|
119
119
|
"@use-gesture/react": "10.2.24",
|
|
120
120
|
"body-scroll-lock": "4.0.0-beta.0",
|
|
@@ -124,16 +124,17 @@
|
|
|
124
124
|
"patch-package": "7.0.0"
|
|
125
125
|
},
|
|
126
126
|
"devDependencies": {
|
|
127
|
-
"@babel/core": "7.
|
|
127
|
+
"@babel/core": "7.20.2",
|
|
128
128
|
"@babel/plugin-transform-react-jsx": "7.16.5",
|
|
129
129
|
"@babel/plugin-transform-runtime": "7.16.5",
|
|
130
|
-
"@babel/preset-env": "7.
|
|
130
|
+
"@babel/preset-env": "7.20.2",
|
|
131
131
|
"@babel/preset-react": "7.16.5",
|
|
132
132
|
"@babel/preset-typescript": "7.16.5",
|
|
133
133
|
"@codesandbox/sandpack-react": "1.16.0",
|
|
134
134
|
"@gorhom/bottom-sheet": "4.4.6",
|
|
135
135
|
"@gorhom/portal": "1.0.14",
|
|
136
|
-
"@react-native
|
|
136
|
+
"@react-native/metro-config": "0.72.9",
|
|
137
|
+
"@react-native-async-storage/async-storage": "1.19.1",
|
|
137
138
|
"@react-native-community/datetimepicker": "5.0.1",
|
|
138
139
|
"@react-native-community/slider": "4.1.12",
|
|
139
140
|
"@rollup/plugin-alias": "3.1.9",
|
|
@@ -159,9 +160,9 @@
|
|
|
159
160
|
"@storybook/react-native": "6.0.1-alpha.7",
|
|
160
161
|
"@testing-library/jest-dom": "5.16.4",
|
|
161
162
|
"@testing-library/jest-native": "5.4.2",
|
|
162
|
-
"@testing-library/react": "
|
|
163
|
+
"@testing-library/react": "13.4.0",
|
|
163
164
|
"@testing-library/react-hooks": "8.0.1",
|
|
164
|
-
"@testing-library/react-native": "12.
|
|
165
|
+
"@testing-library/react-native": "12.2.0",
|
|
165
166
|
"@testing-library/user-event": "14.4.3",
|
|
166
167
|
"@types/body-scroll-lock": "3.1.0",
|
|
167
168
|
"@types/dedent": "0.7.0",
|
|
@@ -171,7 +172,7 @@
|
|
|
171
172
|
"@types/jsdom": "20.0.1",
|
|
172
173
|
"@types/lodash": "4.14.168",
|
|
173
174
|
"@types/react": "17.0.38",
|
|
174
|
-
"@types/react-native": "0.
|
|
175
|
+
"@types/react-native": "0.72.2",
|
|
175
176
|
"@types/react-test-renderer": "17.0.1",
|
|
176
177
|
"@types/styled-components": "5.1.25",
|
|
177
178
|
"@types/styled-components-react-native": "5.1.3",
|
|
@@ -199,18 +200,18 @@
|
|
|
199
200
|
"jscodeshift": "0.13.1",
|
|
200
201
|
"jsdom": "20.0.2",
|
|
201
202
|
"lodash": "4.17.21",
|
|
202
|
-
"metro-react-native-babel-preset": "0.
|
|
203
|
+
"metro-react-native-babel-preset": "0.76.7",
|
|
203
204
|
"moniker": "0.1.2",
|
|
204
205
|
"npm-run-all": "4.1.5",
|
|
205
206
|
"outdent": "0.8.0",
|
|
206
|
-
"react": "
|
|
207
|
-
"react-dom": "
|
|
208
|
-
"react-native": "0.
|
|
207
|
+
"react": "18.2.0",
|
|
208
|
+
"react-dom": "18.2.0",
|
|
209
|
+
"react-native": "0.72.3",
|
|
209
210
|
"react-native-gesture-handler": "2.9.0",
|
|
210
|
-
"react-native-reanimated": "
|
|
211
|
+
"react-native-reanimated": "3.4.1",
|
|
211
212
|
"react-native-svg": "12.3.0",
|
|
212
213
|
"react-scripts": "4.0.3",
|
|
213
|
-
"react-test-renderer": "
|
|
214
|
+
"react-test-renderer": "18.2.0",
|
|
214
215
|
"rollup": "2.61.1",
|
|
215
216
|
"rollup-plugin-dts": "4.0.1",
|
|
216
217
|
"rollup-plugin-peer-deps-external": "2.2.4",
|
|
@@ -226,10 +227,10 @@
|
|
|
226
227
|
"@gorhom/portal": "1.0.14",
|
|
227
228
|
"@floating-ui/react": "0.24.2",
|
|
228
229
|
"@floating-ui/react-native": "0.10.0",
|
|
229
|
-
"react": ">=
|
|
230
|
-
"react-dom": ">=
|
|
231
|
-
"react-native": "^0.
|
|
232
|
-
"react-native-reanimated": "^
|
|
230
|
+
"react": ">=18",
|
|
231
|
+
"react-dom": ">=18",
|
|
232
|
+
"react-native": "^0.72",
|
|
233
|
+
"react-native-reanimated": "^3.4.1",
|
|
233
234
|
"react-native-svg": "^12.3.0",
|
|
234
235
|
"styled-components": "^5",
|
|
235
236
|
"react-native-gesture-handler": "^2.9.0"
|
|
@@ -246,10 +247,10 @@
|
|
|
246
247
|
}
|
|
247
248
|
},
|
|
248
249
|
"resolutions": {
|
|
249
|
-
"@storybook/**/react-dom": "
|
|
250
|
-
"@storybook/**/react": "
|
|
251
|
-
"react-dom": "
|
|
252
|
-
"react": "
|
|
250
|
+
"@storybook/**/react-dom": "18.2.0",
|
|
251
|
+
"@storybook/**/react": "18.2.0",
|
|
252
|
+
"react-dom": "18.2.0",
|
|
253
|
+
"react": "18.2.0",
|
|
253
254
|
"styled-components": "^5"
|
|
254
255
|
},
|
|
255
256
|
"bundlemon": {
|