index.d.ts 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438
  1. import { E as EmotionCache, I as Interpolation, C as CSSInterpolation, S as SerializedStyles, K as Keyframes, a as ComponentSelector, T as Typography, b as Color, B as Background, c as ThemeVars, d as StorybookTheme } from './create-8dd9d29b.js';
  2. export { A as Animation, l as Brand, e as CSSObject, j as Easing, k as TextSize, i as ThemeVarsColors, h as ThemeVarsPartial, g as background, f as color, n as create, m as themes, t as typography } from './create-8dd9d29b.js';
  3. import * as React$1 from 'react';
  4. import { Provider, ReactElement, createElement, ReactNode } from 'react';
  5. // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
  6. // TypeScript Version: 2.2
  7. interface StylisElement {
  8. type: string
  9. value: string
  10. props: Array<string> | string
  11. root: StylisElement | null
  12. parent: StylisElement | null
  13. children: Array<StylisElement> | string
  14. line: number
  15. column: number
  16. length: number
  17. return: string
  18. }
  19. type StylisPluginCallback = (
  20. element: StylisElement,
  21. index: number,
  22. children: Array<StylisElement>,
  23. callback: StylisPluginCallback
  24. ) => string | void
  25. type StylisPlugin = (
  26. element: StylisElement,
  27. index: number,
  28. children: Array<StylisElement>,
  29. callback: StylisPluginCallback
  30. ) => string | void
  31. interface Options {
  32. nonce?: string
  33. stylisPlugins?: Array<StylisPlugin>
  34. key: string
  35. container?: Node
  36. speedy?: boolean
  37. /** @deprecate use `insertionPoint` instead */
  38. prepend?: boolean
  39. insertionPoint?: HTMLElement
  40. }
  41. declare function createCache(options: Options): EmotionCache
  42. type WithConditionalCSSProp<P> = 'className' extends keyof P
  43. ? string extends P['className' & keyof P]
  44. ? { css?: Interpolation<Theme> }
  45. : {}
  46. : {}
  47. // unpack all here to avoid infinite self-referencing when defining our own JSX namespace
  48. type ReactJSXElement = JSX.Element
  49. type ReactJSXElementClass = JSX.ElementClass
  50. type ReactJSXElementAttributesProperty = JSX.ElementAttributesProperty
  51. type ReactJSXElementChildrenAttribute = JSX.ElementChildrenAttribute
  52. type ReactJSXLibraryManagedAttributes<C, P> = JSX.LibraryManagedAttributes<C, P>
  53. type ReactJSXIntrinsicAttributes = JSX.IntrinsicAttributes
  54. type ReactJSXIntrinsicClassAttributes<T> = JSX.IntrinsicClassAttributes<T>
  55. type ReactJSXIntrinsicElements = JSX.IntrinsicElements
  56. // based on the code from @types/react@18.2.8
  57. // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/3197efc097d522c4bf02b94e1a0766d007d6cdeb/types/react/index.d.ts#LL3204C13-L3204C13
  58. type ReactJSXElementType = string | React.JSXElementConstructor<any>
  59. declare namespace EmotionJSX {
  60. type ElementType = ReactJSXElementType
  61. interface Element extends ReactJSXElement {}
  62. interface ElementClass extends ReactJSXElementClass {}
  63. interface ElementAttributesProperty
  64. extends ReactJSXElementAttributesProperty {}
  65. interface ElementChildrenAttribute extends ReactJSXElementChildrenAttribute {}
  66. type LibraryManagedAttributes<C, P> = WithConditionalCSSProp<P> &
  67. ReactJSXLibraryManagedAttributes<C, P>
  68. interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes {}
  69. interface IntrinsicClassAttributes<T>
  70. extends ReactJSXIntrinsicClassAttributes<T> {}
  71. type IntrinsicElements = {
  72. [K in keyof ReactJSXIntrinsicElements]: ReactJSXIntrinsicElements[K] & {
  73. css?: Interpolation<Theme>
  74. }
  75. }
  76. }
  77. /**
  78. * @desc Utility type for getting props type of React component.
  79. * It takes `defaultProps` into an account - making props with defaults optional.
  80. */
  81. type PropsOf<
  82. C extends keyof JSX.IntrinsicElements | React$1.JSXElementConstructor<any>
  83. > = JSX.LibraryManagedAttributes<C, React$1.ComponentProps<C>>
  84. // We need to use this version of Omit as it's distributive (Will preserve unions)
  85. type DistributiveOmit<T, U> = T extends any
  86. ? Pick<T, Exclude<keyof T, U>>
  87. : never
  88. // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
  89. // TypeScript Version: 3.1
  90. interface ThemeProviderProps {
  91. theme: Partial<Theme> | ((outerTheme: Theme) => Theme)
  92. children: React$1.ReactNode
  93. }
  94. declare function useTheme(): Theme
  95. interface ThemeProvider {
  96. (props: ThemeProviderProps): React$1.ReactElement
  97. }
  98. declare const ThemeProvider: ThemeProvider
  99. type withTheme = <
  100. C extends React$1.ComponentType<React$1.ComponentProps<C>>
  101. >(
  102. component: C
  103. ) => React$1.FC<DistributiveOmit<PropsOf<C>, 'theme'> & { theme?: Theme }>
  104. declare const withTheme: withTheme
  105. // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
  106. // TypeScript Version: 3.4
  107. // tslint:disable-next-line: no-empty-interface
  108. interface Theme {}
  109. declare const CacheProvider: Provider<EmotionCache>
  110. declare function css(
  111. template: TemplateStringsArray,
  112. ...args: Array<CSSInterpolation>
  113. ): SerializedStyles
  114. declare function css(...args: Array<CSSInterpolation>): SerializedStyles
  115. interface GlobalProps {
  116. styles: Interpolation<Theme>
  117. }
  118. /**
  119. * @desc
  120. * JSX generic are supported only after TS@2.9
  121. */
  122. declare function Global(props: GlobalProps): ReactElement
  123. declare function keyframes(
  124. template: TemplateStringsArray,
  125. ...args: Array<CSSInterpolation>
  126. ): Keyframes
  127. declare function keyframes(...args: Array<CSSInterpolation>): Keyframes
  128. interface ArrayClassNamesArg extends Array<ClassNamesArg> {}
  129. type ClassNamesArg =
  130. | undefined
  131. | null
  132. | string
  133. | boolean
  134. | { [className: string]: boolean | null | undefined }
  135. | ArrayClassNamesArg
  136. interface ClassNamesContent {
  137. css(template: TemplateStringsArray, ...args: Array<CSSInterpolation>): string
  138. css(...args: Array<CSSInterpolation>): string
  139. cx(...args: Array<ClassNamesArg>): string
  140. theme: Theme
  141. }
  142. interface ClassNamesProps {
  143. children(content: ClassNamesContent): ReactNode
  144. }
  145. /**
  146. * @desc
  147. * JSX generic are supported only after TS@2.9
  148. */
  149. declare function ClassNames(props: ClassNamesProps): ReactElement
  150. declare const jsx: typeof createElement
  151. declare namespace jsx {
  152. namespace JSX {
  153. type ElementType = EmotionJSX.ElementType
  154. interface Element extends EmotionJSX.Element {}
  155. interface ElementClass extends EmotionJSX.ElementClass {}
  156. interface ElementAttributesProperty
  157. extends EmotionJSX.ElementAttributesProperty {}
  158. interface ElementChildrenAttribute
  159. extends EmotionJSX.ElementChildrenAttribute {}
  160. type LibraryManagedAttributes<C, P> = EmotionJSX.LibraryManagedAttributes<
  161. C,
  162. P
  163. >
  164. interface IntrinsicAttributes extends EmotionJSX.IntrinsicAttributes {}
  165. interface IntrinsicClassAttributes<T>
  166. extends EmotionJSX.IntrinsicClassAttributes<T> {}
  167. type IntrinsicElements = EmotionJSX.IntrinsicElements
  168. }
  169. }
  170. // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
  171. // TypeScript Version: 3.2
  172. /** Same as StyledOptions but shouldForwardProp must be a type guard */
  173. interface FilteringStyledOptions<
  174. Props = Record<string, any>,
  175. ForwardedProps extends keyof Props & string = keyof Props & string
  176. > {
  177. label?: string
  178. shouldForwardProp?: (propName: string) => propName is ForwardedProps
  179. target?: string
  180. }
  181. interface StyledOptions<Props = Record<string, any>> {
  182. label?: string
  183. shouldForwardProp?: (propName: string) => boolean
  184. target?: string
  185. }
  186. /**
  187. * @typeparam ComponentProps Props which will be included when withComponent is called
  188. * @typeparam SpecificComponentProps Props which will *not* be included when withComponent is called
  189. */
  190. interface StyledComponent<
  191. ComponentProps extends {},
  192. SpecificComponentProps extends {} = {},
  193. JSXProps extends {} = {}
  194. > extends React$1.FC<ComponentProps & SpecificComponentProps & JSXProps>,
  195. ComponentSelector {
  196. withComponent<C extends React$1.ComponentClass<React$1.ComponentProps<C>>>(
  197. component: C
  198. ): StyledComponent<
  199. ComponentProps & PropsOf<C>,
  200. {},
  201. { ref?: React$1.Ref<InstanceType<C>> }
  202. >
  203. withComponent<C extends React$1.ComponentType<React$1.ComponentProps<C>>>(
  204. component: C
  205. ): StyledComponent<ComponentProps & PropsOf<C>>
  206. withComponent<Tag extends keyof JSX.IntrinsicElements>(
  207. tag: Tag
  208. ): StyledComponent<ComponentProps, JSX.IntrinsicElements[Tag]>
  209. }
  210. /**
  211. * @typeparam ComponentProps Props which will be included when withComponent is called
  212. * @typeparam SpecificComponentProps Props which will *not* be included when withComponent is called
  213. */
  214. interface CreateStyledComponent<
  215. ComponentProps extends {},
  216. SpecificComponentProps extends {} = {},
  217. JSXProps extends {} = {}
  218. > {
  219. /**
  220. * @typeparam AdditionalProps Additional props to add to your styled component
  221. */
  222. <AdditionalProps extends {} = {}>(
  223. ...styles: Array<
  224. Interpolation<
  225. ComponentProps &
  226. SpecificComponentProps &
  227. AdditionalProps & { theme: Theme }
  228. >
  229. >
  230. ): StyledComponent<
  231. ComponentProps & AdditionalProps,
  232. SpecificComponentProps,
  233. JSXProps
  234. >
  235. (
  236. template: TemplateStringsArray,
  237. ...styles: Array<
  238. Interpolation<ComponentProps & SpecificComponentProps & { theme: Theme }>
  239. >
  240. ): StyledComponent<ComponentProps, SpecificComponentProps, JSXProps>
  241. /**
  242. * @typeparam AdditionalProps Additional props to add to your styled component
  243. */
  244. <AdditionalProps extends {}>(
  245. template: TemplateStringsArray,
  246. ...styles: Array<
  247. Interpolation<
  248. ComponentProps &
  249. SpecificComponentProps &
  250. AdditionalProps & { theme: Theme }
  251. >
  252. >
  253. ): StyledComponent<
  254. ComponentProps & AdditionalProps,
  255. SpecificComponentProps,
  256. JSXProps
  257. >
  258. }
  259. /**
  260. * @desc
  261. * This function accepts a React component or tag ('div', 'a' etc).
  262. *
  263. * @example styled(MyComponent)({ width: 100 })
  264. * @example styled(MyComponent)(myComponentProps => ({ width: myComponentProps.width })
  265. * @example styled('div')({ width: 100 })
  266. * @example styled('div')<Props>(props => ({ width: props.width })
  267. */
  268. interface CreateStyled$1 {
  269. <
  270. C extends React$1.ComponentClass<React$1.ComponentProps<C>>,
  271. ForwardedProps extends keyof React$1.ComponentProps<C> &
  272. string = keyof React$1.ComponentProps<C> & string
  273. >(
  274. component: C,
  275. options: FilteringStyledOptions<React$1.ComponentProps<C>, ForwardedProps>
  276. ): CreateStyledComponent<
  277. Pick<PropsOf<C>, ForwardedProps> & {
  278. theme?: Theme
  279. },
  280. {},
  281. {
  282. ref?: React$1.Ref<InstanceType<C>>
  283. }
  284. >
  285. <C extends React$1.ComponentClass<React$1.ComponentProps<C>>>(
  286. component: C,
  287. options?: StyledOptions<React$1.ComponentProps<C>>
  288. ): CreateStyledComponent<
  289. PropsOf<C> & {
  290. theme?: Theme
  291. },
  292. {},
  293. {
  294. ref?: React$1.Ref<InstanceType<C>>
  295. }
  296. >
  297. <
  298. C extends React$1.ComponentType<React$1.ComponentProps<C>>,
  299. ForwardedProps extends keyof React$1.ComponentProps<C> &
  300. string = keyof React$1.ComponentProps<C> & string
  301. >(
  302. component: C,
  303. options: FilteringStyledOptions<React$1.ComponentProps<C>, ForwardedProps>
  304. ): CreateStyledComponent<
  305. Pick<PropsOf<C>, ForwardedProps> & {
  306. theme?: Theme
  307. }
  308. >
  309. <C extends React$1.ComponentType<React$1.ComponentProps<C>>>(
  310. component: C,
  311. options?: StyledOptions<React$1.ComponentProps<C>>
  312. ): CreateStyledComponent<
  313. PropsOf<C> & {
  314. theme?: Theme
  315. }
  316. >
  317. <
  318. Tag extends keyof JSX.IntrinsicElements,
  319. ForwardedProps extends keyof JSX.IntrinsicElements[Tag] &
  320. string = keyof JSX.IntrinsicElements[Tag] & string
  321. >(
  322. tag: Tag,
  323. options: FilteringStyledOptions<JSX.IntrinsicElements[Tag], ForwardedProps>
  324. ): CreateStyledComponent<
  325. { theme?: Theme; as?: React$1.ElementType },
  326. Pick<JSX.IntrinsicElements[Tag], ForwardedProps>
  327. >
  328. <Tag extends keyof JSX.IntrinsicElements>(
  329. tag: Tag,
  330. options?: StyledOptions<JSX.IntrinsicElements[Tag]>
  331. ): CreateStyledComponent<
  332. { theme?: Theme; as?: React$1.ElementType },
  333. JSX.IntrinsicElements[Tag]
  334. >
  335. }
  336. // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
  337. // TypeScript Version: 3.2
  338. type StyledTags = {
  339. [Tag in keyof JSX.IntrinsicElements]: CreateStyledComponent<
  340. {
  341. theme?: Theme
  342. as?: React.ElementType
  343. },
  344. JSX.IntrinsicElements[Tag]
  345. >
  346. }
  347. interface CreateStyled extends CreateStyled$1, StyledTags {}
  348. declare const styled: CreateStyled
  349. // Definitions by: Junyoung Clare Jang <https://github.com/Ailrun>
  350. // TypeScript Version: 2.1
  351. declare function isPropValid(prop: string): boolean
  352. type Value = string | number;
  353. interface Return {
  354. [key: string]: {
  355. [key: string]: Value;
  356. };
  357. }
  358. declare const createReset: ({ typography }: {
  359. typography: Typography;
  360. }) => Return;
  361. declare const createGlobal: ({ color, background, typography, }: {
  362. color: Color;
  363. background: Background;
  364. typography: Typography;
  365. }) => Return;
  366. declare const convert: (inherit?: ThemeVars) => StorybookTheme;
  367. declare const ensure: (input: ThemeVars) => StorybookTheme;
  368. declare const lightenColor: (color: string) => string;
  369. declare const darkenColor: (color: string) => string;
  370. declare const ignoreSsrWarning = "/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */";
  371. export { Background, CacheProvider, ClassNames, Color, Global, Keyframes, StorybookTheme, StyledComponent, ThemeProvider, ThemeVars, Typography, convert, createCache, createGlobal, createReset, css, darkenColor as darken, ensure, ignoreSsrWarning, isPropValid, jsx, keyframes, lightenColor as lighten, styled, useTheme, withTheme };
  372. interface Theme extends StorybookTheme {}
  373. export type { Theme };