@tamagui/core 1.0.0-alpha.0 → 1.0.0-alpha.12

package/src/hooks/useFeatures.tsx

@@ -1,51 +1,66 @@
 import React from 'react'
 
 import { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'
-import { addMediaQueryListener, removeMediaQueryListener } from './useMedia'
+import { addMediaQueryListener, mediaState, removeMediaQueryListener } from './useMedia'
 
-// only needed on native
-// dynamic loading of features to avoid heavy views
+type FeatureDefinition = {
+  isEnabled: (props: any) => boolean
+  Component: any
+}
 
-const createDefinition = ({ Component, propNames }: { Component; propNames: string[] }) => ({
+const createDefinition = ({
+  Component,
+  propNames,
+}: {
+  Component: any
+  propNames: string[]
+}): FeatureDefinition => ({
   isEnabled: (props: any) => propNames.some((name) => !!props[name]),
   Component,
 })
 
-const mediaQueryPropNames = [
-  '$xs',
-  '$sm',
-  '$md',
-  '$lg',
-  '$xl',
-  '$xxl',
-  '$pointerCoarse',
-  '$hoverNone',
-  '$tall',
-  '$short',
-  '$gtSm',
-  '$notXs',
-  '$gtMd',
-  '$gtLg',
-]
+let featureDefinitions: Record<string, FeatureDefinition> | null = null
 
-const featureDefinitions = {
-  measureLayout: createDefinition({
-    Component: (props) => {
-      console.log('measure', props)
-      return null
-    },
-    propNames: ['onLayout'],
-  }),
+export const useFeatures = (props: any, utils?: { forceUpdate?: Function }) => {
+  if (!featureDefinitions) {
+    featureDefinitions = loadFeatures()
+  }
+  const features: JSX.Element[] = []
+  for (const name in featureDefinitions) {
+    const { isEnabled, Component } = featureDefinitions[name]
+    if (isEnabled(props) && Component) {
+      features.push(<Component key={name} {...props} _utils={utils} />)
+    }
+  }
+  return features
+}
 
-  // will update the parent whenever media query changes
-  mediaQuery: createDefinition({
-    Component: (props) => {
-      if (isWeb) {
-        // no need for media queries are inserted and run in css
-        return
-      }
+function loadFeatures(): Record<string, FeatureDefinition> {
+  return {
+    // TODO
+    // measureLayout: createDefinition({
+    //   Component: (props) => {
+    //     console.log('measure', props)
+    //     return null
+    //   },
+    //   propNames: ['onLayout'],
+    // }),
+
+    // will update the parent whenever media query changes
+    // no need on web, media queries are inserted and run in css
+    ...(!isWeb && {
+      mediaQuery: loadMediaQueryFeature(),
+    }),
+  }
+}
+
+function loadMediaQueryFeature() {
+  const mediaPropNames = Object.keys(mediaState)
+
+  return createDefinition({
+    Component: (props: any) => {
+      const keys = mediaPropNames.flatMap((x) => (x in props ? x.slice(1) : []))
 
-      const keys = mediaQueryPropNames.flatMap((x) => (x in props ? x.slice(1) : []))
       useIsomorphicLayoutEffect(() => {
         for (const key of keys) {
           addMediaQueryListener(key, props._utils.forceUpdate)
@@ -56,23 +71,9 @@ const featureDefinitions = {
           }
         }
       }, [keys.join(',')])
+
       return null
     },
-    propNames: mediaQueryPropNames,
-  }),
-}
-
-const featureNames = Object.keys(featureDefinitions)
-const numFeatures = featureNames.length
-
-export const useFeatures = (props: any, utils?: { forceUpdate?: Function }) => {
-  const features: JSX.Element[] = []
-  for (let i = 0; i < numFeatures; i++) {
-    const name = featureNames[i]
-    const { isEnabled, Component } = featureDefinitions[name] as any //FeatureDefinition
-    if (isEnabled(props) && Component) {
-      features.push(<Component key={name} {...props} _utils={utils} />)
-    }
-  }
-  return features
+    propNames: mediaPropNames,
+  })
 }

package/src/hooks/useMedia.tsx

@@ -1,3 +1,4 @@
+import { useForceUpdate } from '@tamagui/use-force-update'
 import { useRef } from 'react'
 
 import { useIsomorphicLayoutEffect } from '../constants/platform'
@@ -9,7 +10,6 @@ import {
   MediaQueryState,
 } from '../types'
 import { useConstant } from './useConstant'
-import { useForceUpdate } from './useForceUpdate'
 
 export const mediaState: { [key in keyof MediaQueryState]: boolean } = {} as any
 const mediaQueryListeners: { [key: string]: Set<Function> } = {}
@@ -28,13 +28,15 @@ let conf: MediaQueries | null = null
 export const mediaQueryConfig = new Proxy<MediaQueries>({} as any, {
   get(target, key) {
     if (!conf) {
-      throw new Error(`Be sure to run configureMedia before accessing mediaQueryConfig`)
+      console.warn('Warning: accessing media query before init')
+      return null
     }
     return Reflect.get(conf, key)
   },
   ownKeys() {
     if (!conf) {
-      throw new Error(`Be sure to run configureMedia before accessing mediaQueryConfig`)
+      console.warn('Warning: accessing media query before init')
+      return []
     }
     return Object.keys(conf)
   },

package/src/hooks/useTheme.tsx

@@ -1,3 +1,4 @@
+import { useForceUpdate } from '@tamagui/use-force-update'
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'
 
 import { useIsomorphicLayoutEffect } from '../constants/platform'
@@ -6,7 +7,6 @@ import { ThemeName } from '../types'
 import { ThemeContext } from '../views/ThemeContext'
 import { ThemeManagerContext } from '../views/ThemeManagerContext'
 import { GET_DEFAULT_THEME } from '../views/ThemeProvider'
-import { useForceUpdate } from './useForceUpdate'
 
 type UseThemeState = {
   uuid: Object
@@ -24,17 +24,16 @@ const areEqualSets = (a: Set<string>, b: Set<string>) => {
   return true
 }
 
-export const useThemeName = () => {
+export const useThemeName = (opts?: { parent?: true }) => {
   const parent = useContext(ThemeManagerContext)
   const [name, setName] = useState(parent.name)
-  useEffect(() => {
-    return parent.onChangeTheme((next) => {
-      setName((prev) => {
-        if (prev === next) return prev
-        return next
-      })
+
+  useIsomorphicLayoutEffect(() => {
+    return parent.onChangeTheme((next, manager) => {
+      setName(opts?.parent ? manager.parentName : next)
     })
   }, [parent])
+
   return name || 'light'
 }
 

package/src/index.ts

@@ -17,9 +17,9 @@ export * from './helpers/isObj'
 export * from './helpers/getStylesAtomic'
 export * from './helpers/matchMedia'
 export * from './helpers/themeable'
+export * from './helpers/isTamaguiElement'
 
 export * from './hooks/useConstant'
-export * from './hooks/useForceUpdate'
 export * from './hooks/useMedia'
 export * from './hooks/useTheme'
 
@@ -30,4 +30,3 @@ export * from './views/Theme'
 export * from './views/ThemeInverse'
 export * from './views/ThemeProvider'
 export * from './views/TextAncestorContext'
-export * from './views/SafeAreaProvider'

package/src/types.tsx

@@ -88,7 +88,7 @@ export type Shorthands = TamaguiConfig['shorthands']
 export type Media = TamaguiConfig['media']
 export type Themes = TamaguiConfig['themes']
 // themes
-export type ThemeName = keyof Themes extends `${infer Prefix}-light`
+export type ThemeName = keyof Themes extends `${infer Prefix}-${string}`
   ? Prefix | keyof Themes
   : keyof Themes
 export type ThemeKeys = keyof ThemeObject
@@ -110,6 +110,7 @@ export type TamaguiInternalConfig<
   tokensParsed: CreateTokens<Variable>
   themeConfig: any
   getCSS: () => string
+  parsed: boolean
 }
 
 // prevents const intersections from being clobbered into string, keeping the consts
@@ -224,7 +225,7 @@ export type WithThemeValues<T extends object> = {
 type WithShorthands<StyleProps> = {
   [Key in keyof Shorthands]?: Shorthands[Key] extends keyof StyleProps
     ? StyleProps[Shorthands[Key]] | null
-    : {}
+    : undefined
 }
 
 //
@@ -262,11 +263,11 @@ type WebOnlyStyleProps = {
   pointerEvents?: ViewProps['pointerEvents']
 }
 
-type StackStyleProps = WithThemeShorthandsPseudosAndMedia<
-  Omit<ViewStyle, 'display' | 'backfaceVisibility' | 'elevation'> &
-    TransformStyleProps &
-    WebOnlyStyleProps
->
+export type StackStylePropsBase = Omit<ViewStyle, 'display' | 'backfaceVisibility' | 'elevation'> &
+  TransformStyleProps &
+  WebOnlyStyleProps
+
+export type StackStyleProps = WithThemeShorthandsPseudosAndMedia<StackStylePropsBase>
 
 export type StackProps = Omit<RNWInternalProps, 'children'> &
   Omit<ViewProps, 'display' | 'children'> &
@@ -319,7 +320,7 @@ export type StaticComponent<
    * If you create a styled frame component this is a HoC to extract
    * styles from all parents.
    */
-  extractable: <X>(a: X) => X
+  extractable: <X>(a: X, opts?: StaticConfig) => X
 }
 
 export type TamaguiProviderProps = Partial<Omit<ThemeProviderProps, 'children'>> & {

package/src/views/Text.tsx

@@ -1,6 +1,7 @@
+import { stylePropsTextOnly, validStyles } from '@tamagui/helpers'
+
 import { isWeb } from '../constants/platform'
 import { createComponent } from '../createComponent'
-import { stylePropsTextOnly, validStyles } from '../static'
 import { TextProps } from '../types'
 
 const ellipseStyle = {

package/src/views/Theme.tsx

@@ -3,13 +3,13 @@ import React, { useContext, useState } from 'react'
 import { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'
 import { getThemeParentClassName } from '../createTamagui'
 import { useConstant } from '../hooks/useConstant'
-import { ThemeName, Themes } from '../types'
+import { ThemeName } from '../types'
 import { ThemeContext } from './ThemeContext'
 import { ThemeManager, ThemeManagerContext } from './ThemeManagerContext'
 
 export type ThemeProps = {
   disableThemeClass?: boolean
-  name: ThemeName | null
+  name: Exclude<ThemeName, number> | null
   children?: any
 }
 
@@ -18,30 +18,49 @@ export const Theme = (props: ThemeProps) => {
   const themes = useContext(ThemeContext)
   const [parentName, setParentName] = useState(parent.name || 'light')
   if (!themes) {
-    console.warn('no themes???', props)
+    console.warn('Error, no themes in context', props)
     return props.children
   }
-  const name = props.name as string
-  const theme = themes[name] || themes[`${name}-${parentName}`]
-  const themeManager = useConstant<ThemeManager>(() => {
+
+  const nextNameParent = `${props.name}-${parentName}`
+  const nextNameParentParent = `${props.name}-${parent.parentName}`
+  const name = !props.name
+    ? null
+    : props.name in themes
+    ? props.name
+    : nextNameParent in themes
+    ? nextNameParent
+    : nextNameParentParent in themes
+    ? nextNameParentParent
+    : null
+  const theme = name ? themes[name] : null
+  const themeManager = useConstant<ThemeManager | null>(() => {
+    if (!theme) {
+      return null
+    }
     const manager = new ThemeManager()
     if (name) {
-      manager.setActiveTheme(name, themes[name])
+      manager.setActiveTheme({ name, theme: themes[name], parentName })
     }
     return manager
   })
 
   useIsomorphicLayoutEffect(() => {
-    themeManager.setActiveTheme(name, theme)
+    if (!themeManager) {
+      return
+    }
+    if (name) {
+      themeManager.setActiveTheme({ name, theme, parentName })
+    }
     return parent.onChangeTheme((next) => {
       if (next) {
-        themeManager.setActiveTheme(next, themes[next])
+        themeManager.setActiveTheme({ name: next, theme: themes[next], parentName })
         setParentName(next)
       }
     })
-  }, [themes, name])
+  }, [themes, name, parentName])
 
-  if (!name) {
+  if (!name || !theme) {
     return props.children
   }
 
@@ -57,16 +76,18 @@ export const Theme = (props: ThemeProps) => {
     if (props.disableThemeClass) {
       return contents
     }
-    const color = themes[name]?.['color']?.['variable']
-    return (
-      <div
-        className={getThemeParentClassName(name)}
-        // in order to provide currentColor, set color by default
-        style={{ display: 'contents', color }}
-      >
-        {contents}
-      </div>
-    )
+    if (name) {
+      const color = themes[name]?.['color']?.['variable']
+      return (
+        <div
+          className={getThemeParentClassName(props.name)}
+          // in order to provide currentColor, set color by default
+          style={{ display: 'contents', color }}
+        >
+          {contents}
+        </div>
+      )
+    }
   }
 
   return contents

package/src/views/ThemeInverse.tsx

@@ -18,6 +18,5 @@ export const ThemeInverse = (props: { children: any }) => {
   const themeName = useThemeName()
   const defaultTheme = useDefaultThemeName()
   const name = inversions[themeName] || inversions[defaultTheme] || null
-  console.log('todo fixme invert', { themeName, defaultTheme, next: name })
   return <Theme name={name}>{props.children}</Theme>
 }

package/src/views/ThemeManagerContext.tsx

@@ -1,16 +1,28 @@
 import { createContext } from 'react'
 
+type ThemeListener = (name: string | null, themeManager: ThemeManager) => void
+
 export class ThemeManager {
   name: string | null = 'light'
+  parentName: string | null = null
   keys = new Map<any, Set<string>>()
   listeners = new Map<any, Function>()
-  callbacks = new Set<Function>()
+  themeListeners = new Set<ThemeListener>()
   theme = null
 
-  setActiveTheme(name: string | null, theme?: any) {
+  setActiveTheme({
+    name,
+    theme,
+    parentName,
+  }: {
+    parentName?: string | null
+    name: string | null
+    theme?: any
+  }) {
     if (name === this.name) return
     this.name = name
     this.theme = theme
+    this.parentName = parentName || null
     this.update()
   }
 
@@ -28,13 +40,13 @@ export class ThemeManager {
         this.listeners.get(uuid)?.()
       }
     }
-    this.callbacks.forEach((cb) => cb(this.name))
+    this.themeListeners.forEach((cb) => cb(this.name, this))
   }
 
-  onChangeTheme(cb: (name: string | null) => void) {
-    this.callbacks.add(cb)
+  onChangeTheme(cb: ThemeListener) {
+    this.themeListeners.add(cb)
     return () => {
-      this.callbacks.delete(cb)
+      this.themeListeners.delete(cb)
     }
   }
 

package/types/constants/constants.d.ts

@@ -0,0 +1,8 @@
+export declare const stackDefaultStyles: {
+    display?: string | undefined;
+    flexBasis?: string | undefined;
+    boxSizing?: string | undefined;
+    alignItems: string;
+    flexShrink: number;
+};
+//# sourceMappingURL=constants.d.ts.map

package/types/constants/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/constants/constants.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB;;;;;;CAS9B,CAAA"}

package/types/constants/platform.d.ts

@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+export declare const isWeb: boolean;
+export declare const isSSR: boolean;
+export declare const useIsomorphicLayoutEffect: typeof useEffect;
+export declare const isChrome: boolean;
+export declare const supportsTouchWeb: boolean;
+export declare const isTouchDevice: boolean;
+export declare const isWebIOS: boolean;
+//# sourceMappingURL=platform.d.ts.map

package/types/constants/platform.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"platform.d.ts","sourceRoot":"","sources":["../../src/constants/platform.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAmB,MAAM,OAAO,CAAA;AAGlD,eAAO,MAAM,KAAK,SAAuE,CAAA;AACzF,eAAO,MAAM,KAAK,SAAyC,CAAA;AAC3D,eAAO,MAAM,yBAAyB,kBAAsC,CAAA;AAC5E,eAAO,MAAM,QAAQ,SAA+E,CAAA;AACpG,eAAO,MAAM,gBAAgB,SAA4D,CAAA;AACzF,eAAO,MAAM,aAAa,SAA6B,CAAA;AACvD,eAAO,MAAM,QAAQ,SAKA,CAAA"}

package/types/constants/pseudos.d.ts

@@ -0,0 +1,15 @@
+export declare const pseudos: {
+    focusStyle: {
+        name: string;
+        priority: number;
+    };
+    pressStyle: {
+        name: string;
+        priority: number;
+    };
+    hoverStyle: {
+        name: string;
+        priority: number;
+    };
+};
+//# sourceMappingURL=pseudos.d.ts.map

package/types/constants/pseudos.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pseudos.d.ts","sourceRoot":"","sources":["../../src/constants/pseudos.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;;;;;;;;CAanB,CAAA"}

package/types/constants/rnw.d.ts

@@ -0,0 +1,2 @@
+export declare const rnw: Record<string, any>;
+//# sourceMappingURL=rnw.d.ts.map

package/types/constants/rnw.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rnw.d.ts","sourceRoot":"","sources":["../../src/constants/rnw.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,CAAA"}

package/types/createComponent.d.ts

@@ -0,0 +1,17 @@
+import { ViewStyle } from 'react-native';
+import { StaticComponent, StaticConfig, StaticConfigParsed } from './types';
+export declare const mouseUps: Set<Function>;
+declare type DefaultProps = {};
+export declare function createComponent<A extends Object = DefaultProps>(configIn: Partial<StaticConfig> | StaticConfigParsed): StaticComponent<A, void, StaticConfigParsed, any>;
+export declare const Spacer: StaticComponent<{
+    size?: number | `$${string}` | `$${number}` | undefined;
+    flex?: number | boolean | undefined;
+}, void, StaticConfigParsed, any>;
+export declare function spacedChildren({ isZStack, children, space, flexDirection, }: {
+    isZStack?: boolean;
+    children: any;
+    space?: any;
+    flexDirection?: ViewStyle['flexDirection'];
+}): any;
+export {};
+//# sourceMappingURL=createComponent.d.ts.map

package/types/createComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createComponent.d.ts","sourceRoot":"","sources":["../src/createComponent.tsx"],"names":[],"mappings":"AAaA,OAAO,EAA0B,SAAS,EAAE,MAAM,cAAc,CAAA;AAWhE,OAAO,EAEL,eAAe,EACf,YAAY,EACZ,kBAAkB,EAEnB,MAAM,SAAS,CAAA;AAIhB,eAAO,MAAM,QAAQ,eAAsB,CAAA;AAS3C,aAAK,YAAY,GAAG,EAAE,CAAA;AAEtB,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,YAAY,EAC7D,QAAQ,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG,kBAAkB,qDAudrD;AAOD,eAAO,MAAM,MAAM;;;iCAyBjB,CAAA;AAEF,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,aAAa,GACd,EAAE;IACD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,GAAG,CAAA;IACb,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,aAAa,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAA;CAC3C,OAwCA"}

package/types/createFont.d.ts

@@ -0,0 +1,3 @@
+import { GenericFont } from './types';
+export declare const createFont: <A extends GenericFont>(font: A) => A;
+//# sourceMappingURL=createFont.d.ts.map

package/types/createFont.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createFont.d.ts","sourceRoot":"","sources":["../src/createFont.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,eAAO,MAAM,UAAU,uCA2BtB,CAAA"}

package/types/createShorthands.d.ts

@@ -0,0 +1,2 @@
+export declare function createShorthands<A extends Record<string, string>>(shorthands: A): A;
+//# sourceMappingURL=createShorthands.d.ts.map

package/types/createShorthands.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createShorthands.d.ts","sourceRoot":"","sources":["../src/createShorthands.ts"],"names":[],"mappings":"AAEA,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC,GAAG,CAAC,CAEnF"}

package/types/createTamagui.d.ts

@@ -0,0 +1,38 @@
+import { Variable } from './createVariable';
+import { CreateTamaguiConfig, GenericTamaguiConfig, MediaQueryKey, TamaguiInternalConfig, TamaguiProviderProps } from './types';
+export declare type CreateTamaguiProps = TamaguiProviderProps & Omit<GenericTamaguiConfig, 'themes'> & {
+    themes: {
+        [key: string]: {
+            [key: string]: string | number | Variable;
+        };
+    };
+    mediaQueryDefaultActive?: MediaQueryKey[];
+};
+export declare const getHasConfigured: () => boolean;
+export declare const getTamagui: () => TamaguiInternalConfig<import("./types").CreateTokens<string | number | Variable>, {
+    [key: string]: {
+        bg: string | Variable;
+        bg2: string | Variable;
+        bg3: string | Variable;
+        bg4: string | Variable;
+        color: string | Variable;
+        color2: string | Variable;
+        color3: string | Variable;
+        color4: string | Variable;
+        borderColor: string | Variable;
+        borderColor2: string | Variable;
+        shadowColor: string | Variable;
+        shadowColor2: string | Variable;
+    };
+}, {}, {
+    [x: string]: {
+        [key: string]: string | number;
+    };
+}>;
+export declare const getTokens: () => import("./types").CreateTokens<Variable>;
+declare type ConfigListener = (conf: TamaguiInternalConfig) => void;
+export declare const onConfiguredOnce: (cb: ConfigListener) => void;
+export declare function createTamagui<Conf extends CreateTamaguiProps>(config: Conf): Conf extends CreateTamaguiConfig<infer A, infer B, infer C, infer D> ? TamaguiInternalConfig<A, B, C, D> : unknown;
+export declare function getThemeParentClassName(themeName?: string | null): string;
+export {};
+//# sourceMappingURL=createTamagui.d.ts.map

package/types/createTamagui.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createTamagui.d.ts","sourceRoot":"","sources":["../src/createTamagui.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAA8B,MAAM,kBAAkB,CAAA;AAIvE,OAAO,EACL,mBAAmB,EACnB,oBAAoB,EACpB,aAAa,EACb,qBAAqB,EACrB,oBAAoB,EACrB,MAAM,SAAS,CAAA;AAEhB,oBAAY,kBAAkB,GAAG,oBAAoB,GAGnD,IAAI,CAAC,oBAAoB,EAAE,QAAQ,CAAC,GAAG;IACrC,MAAM,EAAE;QACN,CAAC,GAAG,EAAE,MAAM,GAAG;YACb,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAA;SAC1C,CAAA;KACF,CAAA;IAED,uBAAuB,CAAC,EAAE,aAAa,EAAE,CAAA;CAC1C,CAAA;AAIH,eAAO,MAAM,gBAAgB,eAAe,CAAA;AAE5C,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;EAAc,CAAA;AACrC,eAAO,MAAM,SAAS,gDAA2B,CAAA;AAEjD,aAAK,cAAc,GAAG,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAA;AAE3D,eAAO,MAAM,gBAAgB,OAAQ,cAAc,SAMlD,CAAA;AAID,wBAAgB,aAAa,CAAC,IAAI,SAAS,kBAAkB,EAC3D,MAAM,EAAE,IAAI,GACX,IAAI,SAAS,mBAAmB,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,GACnE,qBAAqB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,GACjC,OAAO,CAoIV;AAED,wBAAgB,uBAAuB,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,UAEhE"}

package/types/createTheme.d.ts

@@ -0,0 +1,5 @@
+import { Variable } from './createVariable';
+export declare const createTheme: <Theme extends {
+    [key: string]: string | Variable;
+}>(theme: Theme) => { [key in keyof Theme]: Variable; };
+//# sourceMappingURL=createTheme.d.ts.map

package/types/createTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createTheme.d.ts","sourceRoot":"","sources":["../src/createTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAkB,MAAM,kBAAkB,CAAA;AAE3D,eAAO,MAAM,WAAW;;uDAgBvB,CAAA"}

package/types/createTokens.d.ts

@@ -0,0 +1,55 @@
+import { Variable } from './createVariable';
+import { CreateTokens } from './types';
+export declare function createTokens<T extends CreateTokens>(tokens: T): MakeTokens<T>;
+export declare const mapTokensToVariables: (tokens: CreateTokens, parentPath?: string) => CreateTokens<Variable>;
+declare type MakeTokens<T> = T extends {
+    font: {
+        [key in infer A]: {
+            size: infer B;
+            lineHeight: infer C;
+            letterSpacing: infer D;
+            weight: infer Z;
+            family: infer Y;
+        };
+    };
+    color: infer E;
+    space: infer F;
+    size: infer G;
+    radius: infer H;
+    zIndex: infer J;
+} ? {
+    font: {
+        [key in A]: {
+            size: {
+                [key in keyof B]: Variable;
+            };
+            lineHeight: {
+                [key in keyof C]: Variable;
+            };
+            letterSpacing: {
+                [key in keyof D]: Variable;
+            };
+            weight: {
+                [key in keyof Z]: Variable;
+            };
+            family: Y;
+        };
+    };
+    color: {
+        [key in keyof E]: Variable;
+    };
+    space: {
+        [key in keyof F]: Variable;
+    };
+    size: {
+        [key in keyof G]: Variable;
+    };
+    radius: {
+        [key in keyof H]: Variable;
+    };
+    zIndex: {
+        [key in keyof J]: Variable;
+    };
+} : never;
+export {};
+//# sourceMappingURL=createTokens.d.ts.map

package/types/createTokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createTokens.d.ts","sourceRoot":"","sources":["../src/createTokens.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAkB,MAAM,kBAAkB,CAAA;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAItC,wBAAgB,YAAY,CAAC,CAAC,SAAS,YAAY,EAAE,MAAM,EAAE,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAM7E;AAMD,eAAO,MAAM,oBAAoB,WACvB,YAAY,0BAEnB,aAAa,QAAQ,CAavB,CAAA;AAGD,aAAK,UAAU,CAAC,CAAC,IAAI,CAAC,SAAS;IAC7B,IAAI,EAAE;SACH,GAAG,IAAI,MAAM,CAAC,GAAG;YAChB,IAAI,EAAE,MAAM,CAAC,CAAA;YACb,UAAU,EAAE,MAAM,CAAC,CAAA;YACnB,aAAa,EAAE,MAAM,CAAC,CAAA;YACtB,MAAM,EAAE,MAAM,CAAC,CAAA;YACf,MAAM,EAAE,MAAM,CAAC,CAAA;SAChB;KACF,CAAA;IACD,KAAK,EAAE,MAAM,CAAC,CAAA;IACd,KAAK,EAAE,MAAM,CAAC,CAAA;IACd,IAAI,EAAE,MAAM,CAAC,CAAA;IACb,MAAM,EAAE,MAAM,CAAC,CAAA;IACf,MAAM,EAAE,MAAM,CAAC,CAAA;CAChB,GACG;IACE,IAAI,EAAE;SACH,GAAG,IAAI,CAAC,GAAG;YACV,IAAI,EAAE;iBACH,GAAG,IAAI,MAAM,CAAC,GAAG,QAAQ;aAC3B,CAAA;YACD,UAAU,EAAE;iBACT,GAAG,IAAI,MAAM,CAAC,GAAG,QAAQ;aAC3B,CAAA;YACD,aAAa,EAAE;iBACZ,GAAG,IAAI,MAAM,CAAC,GAAG,QAAQ;aAC3B,CAAA;YACD,MAAM,EAAE;iBACL,GAAG,IAAI,MAAM,CAAC,GAAG,QAAQ;aAC3B,CAAA;YACD,MAAM,EAAE,CAAC,CAAA;SACV;KACF,CAAA;IACD,KAAK,EAAE;SACJ,GAAG,IAAI,MAAM,CAAC,GAAG,QAAQ;KAC3B,CAAA;IACD,KAAK,EAAE;SACJ,GAAG,IAAI,MAAM,CAAC,GAAG,QAAQ;KAC3B,CAAA;IACD,IAAI,EAAE;SACH,GAAG,IAAI,MAAM,CAAC,GAAG,QAAQ;KAC3B,CAAA;IACD,MAAM,EAAE;SACL,GAAG,IAAI,MAAM,CAAC,GAAG,QAAQ;KAC3B,CAAA;IACD,MAAM,EAAE;SACL,GAAG,IAAI,MAAM,CAAC,GAAG,QAAQ;KAC3B,CAAA;CACF,GACD,KAAK,CAAA"}