@tamagui/web 1.88.13 → 1.89.0-1706308641099

package/dist/esm/hooks/useProps.mjs

@@ -0,0 +1,40 @@
+import { useContext } from "react";
+import { ComponentContext } from "../contexts/ComponentContext.mjs";
+import { defaultComponentStateMounted } from "../defaultComponentState.mjs";
+import { useSplitStyles } from "../helpers/getSplitStyles.mjs";
+import { Stack } from "../views/Stack.mjs";
+import { useMedia } from "./useMedia.mjs";
+import { useThemeWithState } from "./useTheme.mjs";
+function useProps(props, opts) {
+  const [propsOut, styleOut] = usePropsAndStyle(props, {
+    ...opts,
+    noExpand: !0,
+    noNormalize: !0,
+    resolveValues: "none"
+  });
+  return {
+    ...propsOut,
+    ...styleOut
+  };
+}
+function useStyle(props, opts) {
+  return usePropsAndStyle(props, opts)[1];
+}
+function usePropsAndStyle(props, opts) {
+  const staticConfig = opts?.forComponent?.staticConfig ?? Stack.staticConfig,
+    [themeState, theme] = useThemeWithState({
+      componentName: staticConfig.componentName
+    }),
+    componentContext = useContext(ComponentContext),
+    media = useMedia(),
+    splitStyles = useSplitStyles(props, staticConfig, theme, themeState.state?.name || "", defaultComponentStateMounted, {
+      isAnimated: !1,
+      mediaState: media,
+      noSkip: !0,
+      noClassNames: !0,
+      resolveValues: "auto",
+      ...opts
+    }, null, componentContext);
+  return [splitStyles.viewProps, splitStyles.style, theme, media];
+}
+export { useProps, usePropsAndStyle, useStyle };

package/dist/esm/hooks/useTheme.mjs

@@ -0,0 +1,222 @@
+import { isClient, isServer } from "@tamagui/constants";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
+import { getConfig } from "../config.mjs";
+import { getVariable } from "../createVariable.mjs";
+import { isEqualShallow } from "../helpers/createShallowSetState.mjs";
+import { ThemeManager, getHasThemeUpdatingProps } from "../helpers/ThemeManager.mjs";
+import { ThemeManagerIDContext } from "../helpers/ThemeManagerContext.mjs";
+const emptyProps = {
+  name: null
+};
+let cached;
+function getDefaultThemeProxied() {
+  if (cached) return cached;
+  const config = getConfig(),
+    name = config.themes.light ? "light" : Object.keys(config.themes)[0],
+    defaultTheme = config.themes[name];
+  return cached = getThemeProxied({
+    theme: defaultTheme,
+    name
+  }), cached;
+}
+const useTheme = (props = emptyProps) => {
+    const [_, theme] = useThemeWithState(props);
+    return theme || getDefaultThemeProxied();
+  },
+  useThemeWithState = props => {
+    const keys = useRef([]),
+      changedThemeState = useChangeThemeEffect(props, !1, keys.current, isServer ? void 0 : () => {
+        const next = props.shouldUpdate?.() ?? (keys.current.length > 0 ? !0 : void 0);
+        return process.env.NODE_ENV === "development" && typeof props.debug == "string" && props.debug !== "profile" && console.info("  \u{1F3A8} useTheme() shouldUpdate?", next, {
+          shouldUpdateProp: props.shouldUpdate?.(),
+          keys: [...keys.current]
+        }), next;
+      }),
+      {
+        themeManager,
+        state
+      } = changedThemeState;
+    process.env.NODE_ENV === "development" && (state?.theme || process.env.TAMAGUI_DISABLE_NO_THEME_WARNING !== "1" && console.warn(`[tamagui] No theme found, this could be due to an invalid theme name (given theme props ${JSON.stringify(props)}).
+
+If this is intended and you are using Tamagui without any themes, you can disable this warning by setting the environment variable TAMAGUI_DISABLE_NO_THEME_WARNING=1`));
+    const themeProxied = useMemo(() => !themeManager || !state?.theme ? {} : getThemeProxied(state, props.deopt, themeManager, keys.current, props.debug), [state?.theme, themeManager, props.deopt, props.debug]);
+    return process.env.NODE_ENV === "development" && props.debug === "verbose" && (console.groupCollapsed("  \u{1F539} useTheme =>", state?.name), console.info("returning state", changedThemeState, "from props", props), console.groupEnd()), [changedThemeState, themeProxied];
+  };
+function getThemeProxied({
+  theme,
+  name,
+  scheme
+}, deopt = !1, themeManager, keys, debug) {
+  if (!theme) return {};
+  const config = getConfig();
+  function track(key) {
+    keys && !keys.includes(key) && (keys.push(key), process.env.NODE_ENV === "development" && debug && console.info(` \u{1F3A8} useTheme() tracking new key: ${key}`));
+  }
+  return new Proxy(theme, {
+    has(_, key) {
+      if (Reflect.has(theme, key)) return !0;
+      if (typeof key == "string") return key[0] === "$" && (key = key.slice(1)), themeManager?.allKeys.has(key);
+    },
+    get(_, key) {
+      if (
+      // dont ask me, idk why but on hermes you can see that useTheme()[undefined] passes in STRING undefined to proxy
+      // if someone is crazy enough to use "undefined" as a theme key then this not working is on them
+      key !== "undefined" && typeof key == "string") {
+        const keyString = key[0] === "$" ? key.slice(1) : key,
+          val = theme[keyString];
+        if (val && typeof val == "object") return new Proxy(val, {
+          // when they touch the actual value we only track it
+          // if its a variable (web), its ignored!
+          get(_2, subkey) {
+            if (subkey === "val") track(keyString);else if (subkey === "get") return platform => getVariable(val);
+            return Reflect.get(val, subkey);
+          }
+        });
+        if (process.env.NODE_ENV === "development" && process.env.TAMAGUI_FEAT_THROW_ON_MISSING_THEME_VALUE === "1") throw new Error(`[tamagui] No theme key "${key}" found in theme ${name}. 
+  Keys in theme: ${Object.keys(theme).join(", ")}`);
+      }
+      return Reflect.get(_, key);
+    }
+  });
+}
+const activeThemeManagers = /* @__PURE__ */new Set(),
+  _uidToManager = /* @__PURE__ */new WeakMap(),
+  _idToUID = {},
+  getId = id => _idToUID[id],
+  getThemeManager = id => _uidToManager.get(getId(id)),
+  registerThemeManager = t => {
+    if (!_idToUID[t.id]) {
+      const id = _idToUID[t.id] = {};
+      _uidToManager.set(id, t);
+    }
+  },
+  useChangeThemeEffect = (props, isRoot = !1, keys, shouldUpdate) => {
+    const {
+        disable
+      } = props,
+      parentManagerId = useContext(ThemeManagerIDContext),
+      parentManager = getThemeManager(parentManagerId);
+    if (!isRoot && !parentManager || disable) return {
+      isNewTheme: !1,
+      state: parentManager?.state,
+      themeManager: parentManager
+    };
+    const [themeState, setThemeState] = useState(createState),
+      {
+        state,
+        mounted,
+        isNewTheme,
+        themeManager,
+        inversed
+      } = themeState,
+      isInversingOnMount = !!(!themeState.mounted && props.inverse);
+    function getShouldUpdateTheme(manager = themeManager, nextState, prevState = state, forceShouldChange = !1) {
+      const forceUpdate = shouldUpdate?.();
+      if (!manager || !forceShouldChange && forceUpdate === !1) return;
+      const next = nextState || manager.getState(props, parentManager);
+      if (forceShouldChange) return next;
+      if (next && !(forceUpdate !== !0 && !manager.getStateShouldChange(next, prevState))) return next;
+    }
+    if (isServer || (useEffect(() => {
+      if (!themeManager) return;
+      if (props.inverse && !mounted) {
+        setThemeState(prev => createState({
+          ...prev,
+          mounted: !0
+        }));
+        return;
+      }
+      (isNewTheme || getShouldUpdateTheme(themeManager)) && (activeThemeManagers.add(themeManager), setThemeState(createState));
+      const selfListenerDispose = themeManager.onChangeTheme((_a, _b, forced) => {
+          forced && setThemeState(prev => createState(prev, !0));
+        }),
+        disposeChangeListener = parentManager?.onChangeTheme((name, manager, forced) => {
+          const force = forced || shouldUpdate?.() || props.deopt || void 0,
+            shouldTryUpdate = force ?? !!(keys?.length || isNewTheme);
+          process.env.NODE_ENV === "development" && props.debug === "verbose" && console.info(" \u{1F538} onChange", themeManager.id, {
+            force,
+            shouldTryUpdate,
+            props,
+            name,
+            manager,
+            keys
+          }), shouldTryUpdate && setThemeState(prev => createState(prev, force));
+        }, themeManager.id);
+      return () => {
+        selfListenerDispose(), disposeChangeListener?.(), isNewTheme && activeThemeManagers.delete(themeManager);
+      };
+    }, [themeManager, parentManager, isNewTheme, props.componentName, props.inverse, props.name, props.reset, mounted]), process.env.NODE_ENV === "development" && props.debug !== "profile" && useEffect(() => (globalThis.TamaguiThemeManagers ??= /* @__PURE__ */new Set(), globalThis.TamaguiThemeManagers.add(themeManager), () => {
+      globalThis.TamaguiThemeManagers.delete(themeManager);
+    }), [themeManager])), isInversingOnMount) return {
+      isNewTheme: !1,
+      inversed: !1,
+      themeManager: parentManager,
+      state: {
+        name: "",
+        ...parentManager?.state,
+        className: ""
+      }
+    };
+    return {
+      state,
+      isNewTheme,
+      inversed,
+      themeManager
+    };
+    function createState(prev, force = !1) {
+      if (prev && shouldUpdate?.() === !1 && !force) return prev;
+      let themeManager2 = parentManager,
+        state2;
+      if (getHasThemeUpdatingProps(props)) {
+        const getNewThemeManager = () => new ThemeManager(props, isRoot ? "root" : parentManager);
+        if (prev?.themeManager) {
+          themeManager2 = prev.themeManager;
+          const forceChange = force || !!keys?.length,
+            next = themeManager2.getState(props, parentManager),
+            nextState = getShouldUpdateTheme(themeManager2, next, prev.state, forceChange);
+          nextState ? (state2 = nextState, prev.isNewTheme ? themeManager2.updateState(nextState) : themeManager2 = getNewThemeManager()) : prev.isNewTheme && parentManager && !next && (themeManager2 = parentManager);
+        } else themeManager2 = getNewThemeManager(), state2 = {
+          ...themeManager2.state
+        };
+      }
+      const isNewTheme2 = !!(themeManager2 !== parentManager || props.inverse);
+      isNewTheme2 && registerThemeManager(themeManager2);
+      const mounted2 = props.inverse ? isRoot || prev?.mounted : !0;
+      state2 || (isNewTheme2 ? state2 = themeManager2.state : (state2 = parentManager.state, themeManager2 = parentManager));
+      const wasInversed = prev?.inversed,
+        inversed2 = isNewTheme2 && state2.scheme !== parentManager?.state.scheme ? !0 : wasInversed != null ? !1 : null,
+        response = {
+          themeManager: themeManager2,
+          isNewTheme: isNewTheme2,
+          mounted: mounted2,
+          inversed: inversed2
+        },
+        shouldReturnPrev = prev && !force &&
+        // isEqualShallow uses the second arg as the keys so this should compare without state first...
+        isEqualShallow(prev, response) &&
+        // ... and then compare just the state, because we make a new state obj but is likely the same
+        isEqualShallow(prev.state, state2);
+      if (prev && shouldReturnPrev) return prev;
+      if (response.state = state2, process.env.NODE_ENV === "development" && props.debug && isClient) {
+        console.groupCollapsed(` \u{1F537} ${themeManager2.id} useChangeThemeEffect createState`);
+        const parentState = {
+            ...parentManager?.state
+          },
+          parentId = parentManager?.id,
+          themeManagerState = {
+            ...themeManager2.state
+          };
+        console.info({
+          props,
+          parentState,
+          parentId,
+          themeManager: themeManager2,
+          prev,
+          response,
+          themeManagerState
+        }), console.groupEnd();
+      }
+      return response;
+    }
+  };
+export { activeThemeManagers, getThemeManager, getThemeProxied, useChangeThemeEffect, useTheme, useThemeWithState };

package/dist/esm/hooks/useThemeName.mjs

@@ -0,0 +1,15 @@
+import { useIsomorphicLayoutEffect } from "@tamagui/constants";
+import { useContext, useState } from "react";
+import { ThemeManagerIDContext } from "../helpers/ThemeManagerContext.mjs";
+import { getThemeManager } from "./useTheme.mjs";
+function useThemeName(opts) {
+  const manager = getThemeManager(useContext(ThemeManagerIDContext)),
+    [name, setName] = useState(manager?.state.name || "");
+  return useIsomorphicLayoutEffect(() => {
+    if (manager) return setName(manager.state.name), manager.onChangeTheme((next, manager2) => {
+      const name2 = opts?.parent && manager2.state.parentName || next;
+      name2 && setName(name2);
+    });
+  }, [manager?.state.name]), name;
+}
+export { useThemeName };

package/dist/esm/index.mjs

@@ -0,0 +1,61 @@
+export * from "./Tamagui.mjs";
+export * from "./createComponent.mjs";
+export * from "./createShorthands.mjs";
+export * from "./createTheme.mjs";
+export * from "./createTamagui.mjs";
+export * from "./createFont.mjs";
+export * from "./createTokens.mjs";
+export * from "./createVariable.mjs";
+export * from "./createVariables.mjs";
+export * from "./insertFont.mjs";
+export * from "./styled.mjs";
+export * from "./setupReactNative.mjs";
+export * from "./interfaces/GetRef.mjs";
+import { setupDev, getConfig, getThemes, getTokens, updateConfig, getToken, getTokenValue } from "./config.mjs";
+export * from "./constants/constants.mjs";
+export * from "./contexts/ComponentContext.mjs";
+export * from "./helpers/createStyledContext.mjs";
+export * from "./helpers/expandStyles.mjs";
+export * from "./helpers/createMediaStyle.mjs";
+export * from "./helpers/normalizeStyle.mjs";
+export * from "./helpers/propMapper.mjs";
+export * from "./helpers/getExpandedShorthands.mjs";
+export * from "./helpers/getSplitStyles.mjs";
+export * from "./helpers/getStylesAtomic.mjs";
+export * from "./helpers/getThemeCSSRules.mjs";
+export * from "./helpers/getVariantExtras.mjs";
+export * from "./helpers/isTamaguiComponent.mjs";
+export * from "./helpers/isTamaguiElement.mjs";
+export * from "./helpers/matchMedia.mjs";
+export * from "./helpers/mergeProps.mjs";
+export * from "./helpers/normalizeColor.mjs";
+export * from "./helpers/proxyThemeVariables.mjs";
+export * from "./helpers/proxyThemeToParents.mjs";
+export * from "./helpers/pseudoDescriptors.mjs";
+export * from "./helpers/themeable.mjs";
+export * from "./helpers/themes.mjs";
+export * from "./helpers/createShallowSetState.mjs";
+export * from "./internalWithTheme.mjs";
+import { configureMedia, mediaState, useMedia, getMedia, mediaObjectToString, mediaQueryConfig } from "./hooks/useMedia.mjs";
+export * from "./hooks/useTheme.mjs";
+export * from "./hooks/useThemeName.mjs";
+export * from "./hooks/useConfiguration.mjs";
+export * from "./hooks/useIsTouchDevice.mjs";
+export * from "./hooks/useProps.mjs";
+export * from "./hooks/useConfiguration.mjs";
+export * from "./views/Slot.mjs";
+export * from "./views/Stack.mjs";
+export * from "./views/View.mjs";
+export * from "./views/Text.mjs";
+export * from "./views/Theme.mjs";
+export * from "./views/ThemeProvider.mjs";
+export * from "./views/FontLanguage.mjs";
+export * from "./views/TamaguiProvider.mjs";
+export * from "./views/Configuration.mjs";
+export * from "@tamagui/use-did-finish-ssr";
+export * from "@tamagui/use-event";
+export * from "@tamagui/compose-refs";
+export * from "@tamagui/helpers";
+export * from "@tamagui/constants";
+export * from "./setupHooks.mjs";
+export { configureMedia, getConfig, getMedia, getThemes, getToken, getTokenValue, getTokens, mediaObjectToString, mediaQueryConfig, mediaState, setupDev, updateConfig, useMedia };

package/dist/esm/inject-styles.mjs

@@ -0,0 +1,13 @@
+const stylesheets = {},
+  injectStyles = ({
+    filePath,
+    css
+  }) => {
+    let stylesheet = stylesheets[filePath];
+    if (!stylesheet) {
+      const styleEl = document.createElement("style");
+      styleEl.setAttribute("data-file", filePath), styleEl.setAttribute("type", "text/css"), stylesheet = stylesheets[filePath] = styleEl, document.head.appendChild(styleEl);
+    }
+    stylesheet.innerHTML = css;
+  };
+export { injectStyles };

package/dist/esm/insertFont.mjs

@@ -0,0 +1,44 @@
+import { setConfigFont } from "./config.mjs";
+import { createFont } from "./createFont.mjs";
+import { createVariables } from "./createVariables.mjs";
+import { registerCSSVariable, variableToCSS } from "./helpers/registerCSSVariable.mjs";
+function insertFont(name, fontIn) {
+  const font = createFont(fontIn),
+    tokened = createVariables(font, name),
+    parsed = parseFont(tokened);
+  if (typeof document < "u") {
+    const fontVars = registerFontVariables(parsed),
+      style = document.createElement("style");
+    style.innerText = `:root .font_${name} {${fontVars.join(";")}}`, style.setAttribute("data-tamagui-font", name), document.head.appendChild(style);
+  }
+  return setConfigFont(name, tokened, parsed), parsed;
+}
+const updateFont = insertFont;
+function parseFont(definition) {
+  const parsed = {};
+  for (const attrKey in definition) {
+    const attr = definition[attrKey];
+    if (attrKey === "family" || attrKey === "face") parsed[attrKey] = attr;else {
+      parsed[attrKey] = {};
+      for (const key in attr) {
+        let val = attr[key];
+        val.val?.[0] === "$" && (val = val.val), parsed[attrKey][`$${key}`] = val;
+      }
+    }
+  }
+  return parsed;
+}
+function registerFontVariables(parsedFont) {
+  const response = [];
+  for (const fkey in parsedFont) if (fkey !== "face") {
+    if (fkey === "family") {
+      const val = parsedFont[fkey];
+      registerCSSVariable(val), response.push(variableToCSS(val));
+    } else for (const fskey in parsedFont[fkey]) if (typeof parsedFont[fkey][fskey] != "string") {
+      const val = parsedFont[fkey][fskey];
+      registerCSSVariable(val), response.push(variableToCSS(val));
+    }
+  }
+  return response;
+}
+export { insertFont, parseFont, registerFontVariables, updateFont };

package/dist/esm/internalWithTheme.mjs

@@ -0,0 +1,14 @@
+import { useTheme } from "./hooks/useTheme.mjs";
+import { jsx } from "react/jsx-runtime";
+const internalWithTheme = (Component, styleProvider) => props => {
+  const {
+      expressions,
+      ...rest
+    } = props,
+    theme = useTheme();
+  return /* @__PURE__ */jsx(Component, {
+    style: styleProvider(theme, expressions),
+    ...rest
+  });
+};
+export { internalWithTheme };

package/dist/esm/setupHooks.mjs

@@ -0,0 +1,5 @@
+const hooks = {};
+function setupHooks(next) {
+  Object.assign(hooks, next);
+}
+export { hooks, setupHooks };

package/dist/esm/setupReactNative.mjs

@@ -0,0 +1,24 @@
+const ReactNativeStaticConfigs = /* @__PURE__ */new WeakMap();
+function getReactNativeConfig(Component) {
+  if (Component) return Component.getSize && Component.prefetch ? RNConfigs.Image : Component.displayName === "Text" && Component.render ? RNConfigs.Text : Component.render && (Component.displayName === "ScrollView" || Component.displayName === "View") ? RNConfigs.default : Component.State?.blurTextInput ? RNConfigs.TextInput : ReactNativeStaticConfigs.get(Component);
+}
+const RNConfigs = {
+  Image: {
+    isReactNative: !0,
+    inlineProps: /* @__PURE__ */new Set(["src", "width", "height"])
+  },
+  Text: {
+    isReactNative: !0,
+    isText: !0
+  },
+  TextInput: {
+    isReactNative: !0,
+    isInput: !0,
+    isText: !0
+  },
+  default: {
+    isReactNative: !0
+  }
+};
+function setupReactNative(rnExports) {}
+export { getReactNativeConfig, setupReactNative };

package/dist/esm/styled.mjs

@@ -0,0 +1,56 @@
+import { createComponent } from "./createComponent.mjs";
+import { mergeVariants } from "./helpers/mergeVariants.mjs";
+import { getReactNativeConfig } from "./setupReactNative.mjs";
+function styled(ComponentIn, options, staticExtractionOptions) {
+  if (process.env.NODE_ENV !== "production" && !ComponentIn) throw new Error("No component given to styled()");
+  const parentStaticConfig = ComponentIn.staticConfig,
+    isPlainStyledComponent = !!parentStaticConfig && !(parentStaticConfig.isReactNative || parentStaticConfig.isHOC);
+  let Component = parentStaticConfig?.isHOC && !parentStaticConfig?.isStyledHOC || isPlainStyledComponent ? ComponentIn : parentStaticConfig?.Component || ComponentIn;
+  const reactNativeConfig = parentStaticConfig ? void 0 : getReactNativeConfig(Component),
+    isReactNative = !!(reactNativeConfig || staticExtractionOptions?.isReactNative || parentStaticConfig?.isReactNative),
+    staticConfigProps = (() => {
+      if (options) {
+        let {
+          variants,
+          name,
+          defaultVariants,
+          acceptsClassName: acceptsClassNameProp,
+          context,
+          ...defaultProps
+        } = options;
+        defaultVariants && (defaultProps = {
+          ...defaultVariants,
+          ...defaultProps
+        }), parentStaticConfig && (parentStaticConfig.isHOC && !parentStaticConfig.isStyledHOC || (defaultProps = {
+          ...parentStaticConfig.defaultProps,
+          ...defaultProps
+        }, parentStaticConfig.variants && (variants = mergeVariants(parentStaticConfig.variants, variants)))), parentStaticConfig?.isHOC && name && (defaultProps.componentName = name);
+        const isText = !!(staticExtractionOptions?.isText || parentStaticConfig?.isText),
+          acceptsClassName = acceptsClassNameProp ?? (isPlainStyledComponent || isReactNative || parentStaticConfig?.isHOC && parentStaticConfig?.acceptsClassName),
+          conf = {
+            ...parentStaticConfig,
+            ...staticExtractionOptions,
+            ...(!isPlainStyledComponent && {
+              Component
+            }),
+            // @ts-expect-error
+            variants,
+            defaultProps,
+            defaultVariants,
+            componentName: name || parentStaticConfig?.componentName,
+            isReactNative,
+            isText,
+            acceptsClassName,
+            context,
+            ...reactNativeConfig,
+            isStyledHOC: !!parentStaticConfig?.isHOC,
+            parentStaticConfig
+          };
+        return (defaultProps.children || !acceptsClassName || context) && (conf.neverFlatten = !0), conf;
+      }
+    })(),
+    component = createComponent(staticConfigProps || {});
+  for (const key in ComponentIn) key in component || (component[key] = ComponentIn[key]);
+  return component;
+}
+export { styled };

package/dist/esm/types.mjs

@@ -0,0 +1,2 @@
+export * from "./interfaces/KeyTypes.mjs";
+export * from "./interfaces/TamaguiComponentState.mjs";

package/dist/esm/views/Configuration.mjs

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { ComponentContext } from "../contexts/ComponentContext.mjs";
+import { jsx } from "react/jsx-runtime";
+const Configuration = props => {
+  const current = useContext(ComponentContext);
+  return /* @__PURE__ */jsx(ComponentContext.Provider, {
+    ...current,
+    ...props
+  });
+};
+Configuration.displayName = "Configuration";
+export { Configuration };

package/dist/esm/views/FontLanguage.mjs

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+const FontLanguage = ({
+  children,
+  ...props
+}) => /* @__PURE__ */jsx("div", {
+  style: {
+    display: "contents"
+  },
+  className: Object.entries(props).map(([name, language]) => `t_lang-${name}-${language}`).join(" "),
+  children
+});
+FontLanguage.displayName = "FontLanguage";
+export { FontLanguage };

package/dist/esm/views/Slot.mjs

@@ -0,0 +1,53 @@
+import { composeRefs } from "@tamagui/compose-refs";
+import { isWeb } from "@tamagui/constants";
+import { composeEventHandlers } from "@tamagui/helpers";
+import { Children, cloneElement, forwardRef, isValidElement } from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+const Slot = forwardRef(function (props, forwardedRef) {
+  const {
+    children,
+    ...slotProps
+  } = props;
+  if (isValidElement(children)) {
+    const mergedProps = mergeSlotProps(children, slotProps);
+    return cloneElement(children, children.type.avoidForwardRef ? mergedProps : {
+      ...mergedProps,
+      ref: composeRefs(forwardedRef, children.ref)
+    });
+  }
+  return Children.count(children) > 1 ? Children.only(null) : null;
+});
+Slot.displayName = "Slot";
+const Slottable = ({
+  children
+}) => /* @__PURE__ */jsx(Fragment, {
+  children
+});
+Slottable.displayName = "Slottable";
+const pressMap = isWeb ? {
+  onPress: "onClick",
+  onPressOut: "onMouseUp",
+  onPressIn: "onMouseDown"
+} : {};
+function mergeSlotProps(child, slotProps) {
+  const childProps = child.props,
+    overrideProps = {
+      ...childProps
+    },
+    isHTMLChild = typeof child.type == "string";
+  if (isHTMLChild) for (const key in pressMap) key in slotProps && (slotProps[pressMap[key]] = slotProps[key], delete slotProps[key]);
+  for (let propName in childProps) {
+    const slotPropValue = slotProps[propName],
+      childPropValue = childProps[propName];
+    isHTMLChild && propName in pressMap && (propName = pressMap[propName], delete overrideProps[propName]), handleRegex.test(propName) ? overrideProps[propName] = composeEventHandlers(childPropValue, slotPropValue) : propName === "style" ? overrideProps[propName] = {
+      ...slotPropValue,
+      ...childPropValue
+    } : propName === "className" && (overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" "));
+  }
+  return {
+    ...slotProps,
+    ...overrideProps
+  };
+}
+const handleRegex = /^on[A-Z]/;
+export { Slot, Slottable };

package/dist/esm/views/Stack.mjs

@@ -0,0 +1,10 @@
+import { validStyles } from "@tamagui/helpers";
+import { stackDefaultStyles } from "../constants/constants.mjs";
+import { createComponent } from "../createComponent.mjs";
+const Stack = createComponent({
+  acceptsClassName: !0,
+  defaultProps: stackDefaultStyles,
+  validStyles
+});
+Stack.displayName = "Stack";
+export { Stack };

package/dist/esm/views/TamaguiProvider.mjs

@@ -0,0 +1,32 @@
+import { isClient } from "@tamagui/constants";
+import * as React from "react";
+import { ComponentContext } from "../contexts/ComponentContext.mjs";
+import { setupMediaListeners } from "../hooks/useMedia.mjs";
+import { ThemeProvider } from "./ThemeProvider.mjs";
+import { jsx } from "react/jsx-runtime";
+function TamaguiProvider({
+  children,
+  disableInjectCSS,
+  config,
+  ...themePropsProvider
+}) {
+  return setupMediaListeners(), isClient && React.useLayoutEffect(() => {
+    if (config.disableSSR || document.documentElement.classList.contains("t_unmounted") && document.documentElement.classList.remove("t_unmounted"), !disableInjectCSS) {
+      const style = document.createElement("style");
+      return style.appendChild(document.createTextNode(config.getCSS())), document.head.appendChild(style), () => {
+        document.head.removeChild(style);
+      };
+    }
+  }, [config, disableInjectCSS]), /* @__PURE__ */jsx(ComponentContext.Provider, {
+    animationDriver: config.animations,
+    children: /* @__PURE__ */jsx(ThemeProvider, {
+      themeClassNameOnRoot: config.themeClassNameOnRoot,
+      disableRootThemeClass: config.disableRootThemeClass,
+      ...themePropsProvider,
+      defaultTheme: themePropsProvider.defaultTheme ?? Object.keys(config.themes)[0],
+      children
+    })
+  });
+}
+TamaguiProvider.displayName = "TamaguiProvider";
+export { TamaguiProvider };