@tamagui/core 1.0.0-beta.152 → 1.0.0-beta.17

package/dist/jsx/createComponent.js

@@ -13,20 +13,23 @@ import React, {
   useRef,
   useState
 } from "react";
-import { StyleSheet, Text, View } from "react-native";
+import { Pressable, StyleSheet, Text, View } from "react-native";
 import { onConfiguredOnce } from "./conf";
 import { stackDefaultStyles } from "./constants/constants";
-import { isAndroid, isTouchDevice, isWeb, useIsomorphicLayoutEffect } from "./constants/platform";
+import { isAndroid, isWeb, useIsomorphicLayoutEffect } from "./constants/platform";
 import { rnw } from "./constants/rnw";
-import { isVariable } from "./createVariable";
 import { createShallowUpdate } from "./helpers/createShallowUpdate";
 import { extendStaticConfig, parseStaticConfig } from "./helpers/extendStaticConfig";
-import { getSplitStyles } from "./helpers/getSplitStyles";
+import { insertSplitStyles, useSplitStyles } from "./helpers/getSplitStyles";
 import { getAllSelectors } from "./helpers/insertStyleRule";
+import { BaseButton } from "./helpers/nativeGestureHandler";
+import { proxyThemeVariables } from "./helpers/proxyThemeVariables";
 import { wrapThemeManagerContext } from "./helpers/wrapThemeManagerContext";
 import { useFeatures } from "./hooks/useFeatures";
+import { useIsTouchDevice } from "./hooks/useIsTouchDevice";
 import { usePressable } from "./hooks/usePressable";
 import { getThemeManagerIfChanged, useTheme } from "./hooks/useTheme";
+import { Slot } from "./views/Slot";
 import { TextAncestorContext } from "./views/TextAncestorContext";
 React["keep"];
 const defaultComponentState = {
@@ -43,55 +46,70 @@ if (typeof document !== "undefined") {
     mouseUps.forEach((x) => x());
     mouseUps.clear();
   });
+  document.addEventListener("touchend", () => {
+    mouseUps.forEach((x) => x());
+    mouseUps.clear();
+  });
+  document.addEventListener("touchcancel", () => {
+    mouseUps.forEach((x) => x());
+    mouseUps.clear();
+  });
 }
-function createComponent(configIn) {
-  let staticConfig;
-  if ("parsed" in configIn) {
-    staticConfig = configIn;
-  } else {
-    staticConfig = parseStaticConfig(configIn);
+function mergeShorthands({ defaultProps }, { shorthands }) {
+  for (const key in defaultProps) {
+    defaultProps[shorthands[key] || key] = defaultProps[key];
   }
-  const { Component, validStyles, isText, isZStack, componentName } = staticConfig;
-  const componentClassName = `is_${componentName}`;
-  const validStyleProps = validStyles || stylePropsView;
+}
+__name(mergeShorthands, "mergeShorthands");
+let initialTheme;
+function createComponent(configIn, ParentComponent) {
+  const staticConfig = (() => {
+    const config = extendStaticConfig(configIn, ParentComponent);
+    if ("parsed" in config) {
+      return config;
+    } else {
+      return parseStaticConfig(config);
+    }
+  })();
+  const componentClassName = `is_${staticConfig.componentName}`;
   let tamaguiConfig;
   let AnimatedText;
   let AnimatedView;
   let avoidClasses = true;
-  let defaultPseudos = {};
   let defaultNativeStyle;
-  let defaultNativeStyleSheet = null;
-  let defaultsClassName = null;
-  let initialTheme;
-  let defaultSplitStyleResult = null;
+  let defaultNativeStyleSheet;
+  let tamaguiDefaultProps;
+  let initialSplitStyles;
   function addPseudoToStyles(styles, name, pseudos) {
     const pseudoStyle = pseudos[name];
     const shouldNestObject = isWeb && name !== "enterStyle" && name !== "exitStyle";
-    if (pseudoStyle) {
-      styles.push(shouldNestObject ? { [name]: pseudoStyle } : pseudoStyle);
-    }
-    const defaultPseudoStyle = defaultPseudos[name];
+    const defaultPseudoStyle = initialSplitStyles.pseudos[name];
     if (defaultPseudoStyle) {
       styles.push(shouldNestObject ? { [name]: defaultPseudoStyle } : defaultPseudoStyle);
     }
+    if (pseudoStyle) {
+      styles.push(shouldNestObject ? { [name]: pseudoStyle } : pseudoStyle);
+    }
   }
   __name(addPseudoToStyles, "addPseudoToStyles");
   const component = forwardRef((props, forwardedRef) => {
     var _a, _b, _c, _d;
+    props = tamaguiDefaultProps && !props.asChild ? { ...tamaguiDefaultProps, ...props } : props;
+    const { Component, componentName, isText, isZStack } = staticConfig;
     if (process.env.NODE_ENV === "development") {
       if (props["debug"]) {
-        console.warn(componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]", "debug on");
-        console.log("props in:", props);
+        console.log("\u26A0\uFE0F", staticConfig.componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]", "debug on");
+        console.log("props in:", props, Object.keys(props));
         if (props["debug"] === "break")
           debugger;
       }
     }
     const forceUpdate = useForceUpdate();
-    const theme = useTheme(props.theme, componentName, props, forceUpdate);
+    const theme = useTheme(props.theme, staticConfig.componentName, props, forceUpdate);
     const [state, set_] = useState(defaultComponentState);
     const setStateShallow = createShallowUpdate(set_);
     const shouldAvoidClasses = !!(props.animation && avoidClasses);
-    const splitStyles = getSplitStyles(props, staticConfig, theme, shouldAvoidClasses ? { ...state, noClassNames: true, resolveVariablesAs: "value" } : state, shouldAvoidClasses ? null : defaultsClassName);
+    const splitStyles = useSplitStyles(props, staticConfig, theme, shouldAvoidClasses ? { ...state, noClassNames: true, resolveVariablesAs: "value" } : state, shouldAvoidClasses || props.asChild ? null : initialSplitStyles.classNames);
     const { viewProps: viewPropsIn, pseudos, medias, style, classNames } = splitStyles;
     const useAnimations = (_a = tamaguiConfig.animations) == null ? void 0 : _a.useAnimations;
     const isAnimated = !!(useAnimations && props.animation);
@@ -110,6 +128,7 @@ function createComponent(configIn) {
     const {
       tag,
       hitSlop,
+      asChild,
       children,
       pointerEvents,
       onPress,
@@ -144,6 +163,7 @@ function createComponent(configIn) {
       accessibilityRole,
       collapsable,
       focusable,
+      onClick,
       theme: _themeProp,
       defaultVariants,
       onLayout,
@@ -166,7 +186,7 @@ function createComponent(configIn) {
       };
     }
     useIsomorphicLayoutEffect(() => {
-      if (typeof window !== "undefined") {
+      if (typeof window !== "undefined" && (hasEnterStyle || props.animation)) {
         setStateShallow({
           mounted: true
         });
@@ -176,7 +196,7 @@ function createComponent(configIn) {
         mouseUps.delete(unPress);
         internal.current.isMounted = false;
       };
-    }, [hasEnterStyle]);
+    }, [hasEnterStyle, props.animation]);
     if (nativeID) {
       viewProps.id = nativeID;
     }
@@ -192,7 +212,7 @@ function createComponent(configIn) {
       if (accessibilityRole)
         viewProps.accessibilityRole = accessibilityRole;
     }
-    if (isWeb) {
+    if (isWeb && !asChild) {
       rnw.useResponderEvents(hostRef, {
         onMoveShouldSetResponder,
         onMoveShouldSetResponderCapture,
@@ -253,7 +273,7 @@ function createComponent(configIn) {
         const className = classList.join(" ");
         if (process.env.NODE_ENV === "development") {
           if (props["debug"]) {
-            console.log("  \xBB className", { isStringElement, pseudos, state, defaultsClassName, classNames, propsClassName: props.className, style, classList, className: className.trim().split(" "), themeClassName: theme.className, values: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) });
+            console.log("  \xBB className", { isStringElement, pseudos, state, classNames, propsClassName: props.className, style, classList, className: className.trim().split(" "), themeClassName: theme.className, values: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) });
           }
         }
         viewProps.className = className;
@@ -294,11 +314,16 @@ function createComponent(configIn) {
         viewProps.ref = forwardedRef;
       }
     }
-    const attachPress = !!(pseudos && pseudos.pressStyle || defaultPseudos && defaultPseudos.pressStyle || onPress || onPressOut || onPressIn);
-    const isHoverable = isWeb && !isTouchDevice;
+    const initialPseudos = initialSplitStyles.pseudos;
+    const attachPress = !!(pseudos && pseudos.pressStyle || initialPseudos && initialPseudos.pressStyle || onPress || onPressOut || onPressIn || onClick);
+    const isTouch = useIsTouchDevice();
+    const isHoverable = isWeb && !isTouch;
     const attachHover = isHoverable && !!(pseudos && pseudos.hoverStyle || onHoverIn || onHoverOut || onMouseEnter || onMouseLeave);
-    const pressEventKey = isStringElement ? "onClick" : "onPress";
-    const shouldAttach = attachPress || attachHover || "pressStyle" in props || "onPress" in props || "onPressIn" in props || "onPressOut" in props || isWeb && ("hoverStyle" in props || "onHoverIn" in props || "onHoverOut" in props || "onMouseEnter" in props || "onMouseLeave" in props);
+    const handlesPressEvents = !isStringElement && !asChild;
+    const pressKey = handlesPressEvents ? "onPress" : "onClick";
+    const pressInKey = handlesPressEvents ? "onPressIn" : "onMouseDown";
+    const pressOutKey = handlesPressEvents ? "onPressOut" : "onMouseUp";
+    const shouldAttach = !asChild && (attachPress || attachHover || "pressStyle" in props || "onPress" in props || "onPressIn" in props || "onPressOut" in props || isWeb && ("hoverStyle" in props || "onHoverIn" in props || "onHoverOut" in props || "onMouseEnter" in props || "onMouseLeave" in props));
     const unPress = useCallback(() => {
       if (!internal.current.isMounted)
         return;
@@ -308,12 +333,10 @@ function createComponent(configIn) {
       });
     }, []);
     const events = shouldAttach ? {
-      ...!isWeb && {
-        onPressOut: (e) => {
-          unPress();
-          onPressOut == null ? void 0 : onPressOut(e);
-        }
-      },
+      [pressOutKey]: attachPress ? (e) => {
+        unPress();
+        onPressOut == null ? void 0 : onPressOut(e);
+      } : void 0,
       ...isHoverable && {
         onMouseEnter: attachHover ? (e) => {
           let next = {};
@@ -346,37 +369,29 @@ function createComponent(configIn) {
           onMouseLeave == null ? void 0 : onMouseLeave(e);
         } : void 0
       },
-      onMouseDown: attachPress ? (e) => {
+      [pressInKey]: attachPress ? (e) => {
         setStateShallow({
           press: true,
           pressIn: true
         });
         onPressIn == null ? void 0 : onPressIn(e);
         onMouseDown == null ? void 0 : onMouseDown(e);
+        if (isWeb) {
+          mouseUps.add(unPress);
+        }
       } : null,
-      [pressEventKey]: attachPress ? (e) => {
-        onPress == null ? void 0 : onPress(e);
+      [pressKey]: attachPress ? (e) => {
         unPress();
-        onPressOut == null ? void 0 : onPressOut(e);
+        onClick == null ? void 0 : onClick(e);
+        onPress == null ? void 0 : onPress(e);
       } : null
     } : null;
-    let childEls = !children ? children : wrapThemeManagerContext(spacedChildren({
+    const childEls = !children || asChild ? children : wrapThemeManagerContext(spacedChildren({
       children,
       space,
       flexDirection: props.flexDirection || ((_b = staticConfig.defaultProps) == null ? void 0 : _b.flexDirection),
       isZStack
     }), getThemeManagerIfChanged(theme));
-    const [pressProps] = usePressable(events ? {
-      disabled,
-      ...hitSlop && {
-        hitSlop
-      },
-      onPressIn: events.onMouseDown,
-      onPressOut: events.onPressOut,
-      onPress: events[pressEventKey]
-    } : {
-      disabled: true
-    });
     let content;
     if (isWeb) {
       if (staticConfig.isReactNativeWeb) {
@@ -393,14 +408,41 @@ function createComponent(configIn) {
         }
       }
     }
-    if (events) {
-      if (!isStringElement) {
-        Object.assign(viewProps, pressProps);
-      } else {
-        Object.assign(viewProps, events);
+    if (asChild) {
+      ViewComponent = Slot;
+      const onlyChild = React.Children.only(children);
+      Object.assign(viewProps, onlyChild.props);
+    }
+    if (isWeb) {
+      const [pressableProps] = usePressable(events ? {
+        disabled,
+        ...hitSlop && {
+          hitSlop
+        },
+        onPressOut: events[pressOutKey],
+        onPressIn: events[pressInKey],
+        onPress: events[pressKey]
+      } : {
+        disabled: true
+      });
+      if (events) {
+        if (handlesPressEvents) {
+          Object.assign(viewProps, pressableProps);
+        } else {
+          Object.assign(viewProps, events);
+        }
       }
     }
     content = createElement(ViewComponent, viewProps, childEls);
+    if (!isWeb) {
+      if (attachPress && events) {
+        content = <Pressable onPressIn={events[pressInKey]} onPress={events[pressKey]}><BaseButton onActiveStateChange={(isActive) => {
+          if (!isActive) {
+            unPress();
+          }
+        }}>{content}</BaseButton></Pressable>;
+      }
+    }
     if (isWeb && events && attachHover) {
       content = <span className="tui_Hoverable" style={{
         display: "contents"
@@ -408,8 +450,7 @@ function createComponent(configIn) {
     }
     if (process.env.NODE_ENV === "development") {
       if (props["debug"]) {
-        viewProps["debug"] = true;
-        console.log("  \xBB ", { propsIn: { ...props }, propsOut: { ...viewProps }, state, splitStyles, defaultsClassName, animationStyles, isStringElement, classNamesIn: (_c = props.className) == null ? void 0 : _c.split(" "), classNamesOut: (_d = viewProps.className) == null ? void 0 : _d.split(" "), pressProps, events, shouldAttach, ViewComponent, viewProps, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses, animation: props.animation, style, defaultNativeStyle, defaultSplitStyleResult, ...typeof window !== "undefined" ? { theme, themeState: theme.__state, themeClassName: theme.className, staticConfig, tamaguiConfig } : null });
+        console.log("  \xBB ", { propsIn: { ...props }, propsOut: { ...viewProps }, state, splitStyles, animationStyles, isStringElement, classNamesIn: (_c = props.className) == null ? void 0 : _c.split(" "), classNamesOut: (_d = viewProps.className) == null ? void 0 : _d.split(" "), events, shouldAttach, ViewComponent, viewProps, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses, animation: props.animation, style, defaultNativeStyle, initialSplitStyles, ...typeof window !== "undefined" ? { theme, themeState: theme.__state, themeClassName: theme.className, staticConfig, tamaguiConfig } : null });
       }
     }
     if (features.length) {
@@ -420,66 +461,81 @@ function createComponent(configIn) {
     }
     return content;
   });
+  component.displayName = staticConfig.componentName;
   onConfiguredOnce((conf) => {
     var _a, _b, _c, _d;
     if (process.env.IS_STATIC === "is_static") {
       return;
     }
-    const shouldDebug = (_a = staticConfig.defaultProps) == null ? void 0 : _a.debug;
     tamaguiConfig = conf;
-    avoidClasses = !!((_b = tamaguiConfig.animations) == null ? void 0 : _b.avoidClasses);
-    AnimatedText = (_c = tamaguiConfig.animations) == null ? void 0 : _c.Text;
-    AnimatedView = (_d = tamaguiConfig == null ? void 0 : tamaguiConfig.animations) == null ? void 0 : _d.View;
-    initialTheme = conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]];
-    defaultSplitStyleResult = getSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, {
+    mergeShorthands(staticConfig, tamaguiConfig);
+    avoidClasses = !!((_a = tamaguiConfig.animations) == null ? void 0 : _a.avoidClasses);
+    AnimatedText = (_b = tamaguiConfig.animations) == null ? void 0 : _b.Text;
+    AnimatedView = (_c = tamaguiConfig == null ? void 0 : tamaguiConfig.animations) == null ? void 0 : _c.View;
+    initialTheme = initialTheme || proxyThemeVariables(conf.themes[conf.defaultTheme || Object.keys(conf.themes)[0]]);
+    initialSplitStyles = insertSplitStyles(staticConfig.defaultProps, staticConfig, initialTheme, {
       mounted: true,
       hover: false,
       press: false,
       pressIn: false,
       focus: false,
-      resolveVariablesAs: "both"
+      resolveVariablesAs: "both",
+      keepVariantsAsProps: true
     });
-    const { classNames, pseudos, style, viewProps } = defaultSplitStyleResult;
-    if (isWeb) {
-      defaultsClassName = classNames;
-    }
-    defaultPseudos = pseudos;
+    const defaults = {
+      ...component.defaultProps,
+      ...initialSplitStyles.viewProps
+    };
     defaultNativeStyle = {};
-    for (const key in style) {
-      const v = style[key];
-      defaultNativeStyle[key] = isVariable(v) ? v.val : v;
+    const validStyles = staticConfig.validStyles || stylePropsView;
+    for (const key in staticConfig.defaultProps) {
+      const val = staticConfig.defaultProps[key];
+      if (typeof val === "string" && val[0] === "$" || !validStyles[key]) {
+        defaults[key] = val;
+      } else {
+        defaultNativeStyle[key] = val;
+      }
     }
     defaultNativeStyleSheet = StyleSheet.create({
       base: defaultNativeStyle
     });
-    component.displayName = staticConfig.componentName;
-    component.defaultProps = {
-      ...viewProps,
-      ...component.defaultProps
-    };
-    if (process.env.NODE_ENV === "development" && shouldDebug && process.env.IS_STATIC !== "is_static") {
-      console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, { staticConfig, ...defaultSplitStyleResult });
+    if (Object.keys(defaults).length) {
+      tamaguiDefaultProps = defaults;
+    }
+    if (process.env.NODE_ENV === "development" && ((_d = staticConfig.defaultProps) == null ? void 0 : _d.debug)) {
+      if (process.env.IS_STATIC !== "is_static") {
+        console.log(`\u{1F41B} [${staticConfig.componentName || "Component"}]`, {
+          staticConfig,
+          initialSplitStyles,
+          tamaguiDefaultProps,
+          defaultNativeStyle,
+          defaults
+        });
+      }
     }
   });
   let res = component;
   if (configIn.memo) {
     res = memo(res);
   }
-  res["whyDidYouRender"] = true;
   res["staticConfig"] = {
-    validStyles: validStyleProps,
+    validStyles: staticConfig.validStyles || stylePropsView,
     ...staticConfig
   };
-  res["extractable"] = (Component2, conf) => {
-    Component2["staticConfig"] = extendStaticConfig(res, {
+  if (process.env.NODE_ENV === "development") {
+    res["whyDidYouRender"] = true;
+  }
+  res["extractable"] = (Component, conf) => {
+    Component["staticConfig"] = extendStaticConfig({
+      Component,
       ...conf,
       neverFlatten: true,
       defaultProps: {
-        ...Component2.defaultProps,
+        ...Component.defaultProps,
         ...conf == null ? void 0 : conf.defaultProps
       }
-    });
-    return Component2;
+    }, res);
+    return Component;
   };
   return res;
 }
@@ -520,6 +576,9 @@ const Spacer = createComponent({
         minWidth: 0
       }
     }
+  },
+  defaultVariants: {
+    direction: "horizontal"
   }
 });
 function spacedChildren({
@@ -530,47 +589,48 @@ function spacedChildren({
   spaceFlex
 }) {
   var _a;
-  const childrenList = Children.toArray(children);
+  const childrenList = Array.isArray(children) ? children : Children.toArray(children);
   const len = childrenList.length;
-  if (len === 1) {
+  if (len <= 1) {
     return childrenList;
   }
-  const next = [];
+  const final = [];
   for (const [index, child] of childrenList.entries()) {
-    if (child === null || child === void 0) {
+    if (child === null || child === void 0 || child === false || Array.isArray(child) && child.length === 0) {
       continue;
     }
     if (!child || child["key"] && !isZStack) {
-      next.push(child);
+      final.push(child);
     } else {
-      next.push(<Fragment key={index}>{isZStack ? <AbsoluteFill>{child}</AbsoluteFill> : child}</Fragment>);
+      final.push(<Fragment key={index}>{isZStack ? <AbsoluteFill>{child}</AbsoluteFill> : child}</Fragment>);
     }
     if ((_a = child["type"]) == null ? void 0 : _a["isVisuallyHidden"]) {
       continue;
     }
-    if (index !== len - 1) {
-      if (space) {
-        next.push(<Spacer key={`_${index}_spacer`} direction={flexDirection === "row" || flexDirection === "row-reverse" ? "horizontal" : "vertical"} size={space} {...spaceFlex && {
-          flex: spaceFlex
-        }} />);
-      }
+    const next = childrenList[index + 1];
+    if (next && space) {
+      final.push(<Spacer key={`_${index}_spacer`} direction={flexDirection === "row" || flexDirection === "row-reverse" ? "horizontal" : "vertical"} size={space} {...spaceFlex && {
+        flex: spaceFlex
+      }} />);
     }
   }
-  return next;
+  return final;
 }
 __name(spacedChildren, "spacedChildren");
-const AbsoluteFill = /* @__PURE__ */ __name((props) => isWeb ? <div style={{
-  position: "absolute",
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0
-}}>{props.children}</div> : <View style={StyleSheet.absoluteFill}>{props.child}</View>, "AbsoluteFill");
+function AbsoluteFill(props) {
+  return isWeb ? <div style={{
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  }}>{props.children}</div> : <View style={StyleSheet.absoluteFill}>{props.child}</View>;
+}
+__name(AbsoluteFill, "AbsoluteFill");
 export {
   AbsoluteFill,
   Spacer,
   createComponent,
-  defaultComponentState,
   mouseUps,
   spacedChildren
 };

package/dist/jsx/createTamagui.js

@@ -28,7 +28,7 @@ function createTamagui(config) {
     defaultActive: config.mediaQueryDefaultActive
   });
   const themeConfig = (() => {
-    var _a, _b;
+    var _a, _b, _c;
     let cssRules = [];
     const varsByValue = /* @__PURE__ */ new Map();
     if (isWeb) {
@@ -75,13 +75,16 @@ function createTamagui(config) {
       }
       if (isWeb) {
         const isDarkOrLightBase = themeName === "dark" || themeName === "light";
-        const isDark = themeName.includes("dark_");
+        const isDark = themeName.startsWith("dark");
         const selector = `${CNP}${themeName}`;
-        const addDarkLightSels = hasDarkLight && !isDarkOrLightBase;
         const selectors = [selector];
-        if (addDarkLightSels) {
+        if (hasDarkLight) {
           const childSelector = `${CNP}${themeName.replace("dark_", "").replace("light_", "")}`;
-          const [stronger, weaker] = isDark ? ["dark", "light"] : ["light", "dark"];
+          const order = isDark ? ["dark", "light"] : ["light", "dark"];
+          if (isDarkOrLightBase) {
+            order.reverse();
+          }
+          const [stronger, weaker] = order;
           const max = (_b = config.maxDarkLightNesting) != null ? _b : 3;
           new Array(max * 2).fill(void 0).forEach((_, pi) => {
             if (pi % 2 === 1)
@@ -92,25 +95,56 @@ function createTamagui(config) {
             selectors.push(`${(parents.length > 1 ? parents.slice(1) : parents).join(" ")} ${childSelector}`);
           });
         }
-        const cssRule = `${selectors.join(", ")} {
-${vars}
-}`;
-        cssRules.push(cssRule);
+        const rootSep = config.themeClassNameOnRoot ? "" : " ";
+        cssRules.push(`${selectors.map((x) => `:root${rootSep}${x}`).join(", ")} {${vars}}`);
+        if ((_c = config.shouldAddPrefersColorThemes) != null ? _c : true) {
+          if (isDarkOrLightBase) {
+            cssRules.push(`@media(prefers-color-scheme: ${isDark ? "dark" : "light"}) {
+    body { background:${theme.background}; color: ${theme.color} }
+    :root {${vars} } 
+  }`);
+          }
+        }
       }
     }
     varsByValue.clear();
     Object.freeze(cssRules);
+    const css = cssRules.join("\n");
     return {
       cssRules,
-      css: cssRules.join("\n")
+      css
     };
   })();
   const tokensParsed = parseTokens(config.tokens);
+  const fontsParsed = (() => {
+    if (!config.fonts) {
+      throw new Error(`No fonts defined!`);
+    }
+    const res = {};
+    for (const familyName in config.fonts) {
+      const family = config.fonts[familyName];
+      const parsed = {};
+      for (const attrKey in family) {
+        const attr = family[attrKey];
+        if (attrKey === "family") {
+          parsed[attrKey] = attr;
+          continue;
+        }
+        parsed[attrKey] = Object.keys(attr).reduce((acc, cur) => {
+          acc[`$${cur}`] = attr[cur];
+          return acc;
+        }, {});
+      }
+      res[`$${familyName}`] = parsed;
+    }
+    return res;
+  })();
   const getCSS = /* @__PURE__ */ __name(() => {
     return `${themeConfig.css}
 ${getInsertedRules().join("\n")}`;
   }, "getCSS");
   const next = {
+    fonts: {},
     animations: {},
     shorthands: {},
     media: {},
@@ -120,6 +154,7 @@ ${getInsertedRules().join("\n")}`;
       defaultTheme: "light",
       ...config
     }),
+    fontsParsed,
     themeConfig,
     tokensParsed,
     parsed: true,
@@ -138,24 +173,6 @@ const parseTokens = /* @__PURE__ */ __name((tokens) => {
   const res = {};
   for (const key in tokens) {
     res[key] = {};
-    if (key === "font") {
-      for (const family in tokens.font) {
-        const obj = {};
-        res.font[`$${family}`] = obj;
-        for (const attrKey in tokens.font[family]) {
-          const attr = tokens.font[family][attrKey];
-          if (attrKey === "family") {
-            obj[attrKey] = attr;
-            continue;
-          }
-          obj[attrKey] = Object.keys(attr).reduce((acc, cur) => {
-            acc[`$${cur}`] = attr[cur];
-            return acc;
-          }, {});
-        }
-      }
-      continue;
-    }
     for (const skey in tokens[key]) {
       res[key][`$${skey}`] = tokens[key][skey];
     }

package/dist/jsx/createTokens.js

@@ -6,17 +6,13 @@ function createTokens(tokens) {
   if (process.env.NODE_ENV === "development") {
     validateTokens(tokens);
   }
-  return setupTokens(tokens);
-}
-__name(createTokens, "createTokens");
-function setupTokens(tokens) {
   return mapTokensToVariables(tokens);
 }
-__name(setupTokens, "setupTokens");
+__name(createTokens, "createTokens");
 const mapTokensToVariables = /* @__PURE__ */ __name((tokens, parentPath = "") => {
   const res = {};
   for (const key in tokens) {
-    const val = tokens[key];
+    let val = tokens[key];
     const name = parentPath ? `${parentPath}-${key}` : key;
     if (val && typeof val === "object") {
       res[key] = mapTokensToVariables(tokens[key], name);

package/dist/jsx/createVariable.js

@@ -22,12 +22,17 @@ function isVariable(v) {
 }
 __name(isVariable, "isVariable");
 function getVariableValue(v) {
-  if (isVariable(v)) {
+  if (isVariable(v))
     return v.val;
-  }
   return v;
 }
 __name(getVariableValue, "getVariableValue");
+function getVariableName(v) {
+  if (isVariable(v))
+    return v.name;
+  return v;
+}
+__name(getVariableName, "getVariableName");
 const createCSSVariable = /* @__PURE__ */ __name((val, includeVar = true) => {
   const name = val.replace(/[^a-z0-9\_\-]+/i, "_");
   return includeVar ? `var(--${name})` : name;
@@ -37,6 +42,7 @@ export {
   Variable,
   createCSSVariable,
   createVariable,
+  getVariableName,
   getVariableValue,
   isVariable
 };