@tamagui/core 1.0.1-beta.28 → 1.0.1-beta.31

package/dist/esm/helpers/prefixStyles.js

@@ -0,0 +1,166 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import createPrefixer from "inline-style-prefixer/lib/createPrefixer";
+import backgroundClip from "inline-style-prefixer/lib/plugins/backgroundClip";
+import crossFade from "inline-style-prefixer/lib/plugins/crossFade";
+import cursor from "inline-style-prefixer/lib/plugins/cursor";
+import filter from "inline-style-prefixer/lib/plugins/filter";
+import flex from "inline-style-prefixer/lib/plugins/flex";
+import flexboxIE from "inline-style-prefixer/lib/plugins/flexboxIE";
+import flexboxOld from "inline-style-prefixer/lib/plugins/flexboxOld";
+import gradient from "inline-style-prefixer/lib/plugins/gradient";
+import grid from "inline-style-prefixer/lib/plugins/grid";
+import imageSet from "inline-style-prefixer/lib/plugins/imageSet";
+import logical from "inline-style-prefixer/lib/plugins/logical";
+import position from "inline-style-prefixer/lib/plugins/position";
+import sizing from "inline-style-prefixer/lib/plugins/sizing";
+import transition from "inline-style-prefixer/lib/plugins/transition";
+const prefixInlineStyles = /* @__PURE__ */ __name((style) => {
+  const prefixedStyles = prefixStyles(style);
+  Object.keys(prefixedStyles).forEach((prop) => {
+    const value = prefixedStyles[prop];
+    if (Array.isArray(value)) {
+      prefixedStyles[prop] = value[value.length - 1];
+    }
+  });
+  return prefixedStyles;
+}, "prefixInlineStyles");
+const w = ["Webkit"];
+const m = ["Moz"];
+const ms = ["ms"];
+const wm = ["Webkit", "Moz"];
+const wms = ["Webkit", "ms"];
+const wmms = ["Webkit", "Moz", "ms"];
+const staticData = {
+  plugins: [
+    backgroundClip,
+    crossFade,
+    cursor,
+    filter,
+    flex,
+    flexboxIE,
+    flexboxOld,
+    gradient,
+    grid,
+    imageSet,
+    logical,
+    position,
+    sizing,
+    transition
+  ],
+  prefixMap: {
+    animation: w,
+    animationDelay: w,
+    animationDirection: w,
+    animationFillMode: w,
+    animationDuration: w,
+    animationIterationCount: w,
+    animationName: w,
+    animationPlayState: w,
+    animationTimingFunction: w,
+    appearance: wm,
+    userSelect: wmms,
+    textEmphasisPosition: w,
+    textEmphasis: w,
+    textEmphasisStyle: w,
+    textEmphasisColor: w,
+    boxDecorationBreak: w,
+    clipPath: w,
+    maskImage: w,
+    maskMode: w,
+    maskRepeat: w,
+    maskPosition: w,
+    maskClip: w,
+    maskOrigin: w,
+    maskSize: w,
+    maskComposite: w,
+    mask: w,
+    maskBorderSource: w,
+    maskBorderMode: w,
+    maskBorderSlice: w,
+    maskBorderWidth: w,
+    maskBorderOutset: w,
+    maskBorderRepeat: w,
+    maskBorder: w,
+    maskType: w,
+    textDecorationStyle: w,
+    textDecorationSkip: w,
+    textDecorationLine: w,
+    textDecorationColor: w,
+    filter: w,
+    fontFeatureSettings: w,
+    breakAfter: wmms,
+    breakBefore: wmms,
+    breakInside: wmms,
+    columnCount: wm,
+    columnFill: wm,
+    columnGap: wm,
+    columnRule: wm,
+    columnRuleColor: wm,
+    columnRuleStyle: wm,
+    columnRuleWidth: wm,
+    columns: wm,
+    columnSpan: wm,
+    columnWidth: wm,
+    writingMode: wms,
+    flex: wms,
+    flexBasis: w,
+    flexDirection: wms,
+    flexGrow: w,
+    flexFlow: wms,
+    flexShrink: w,
+    flexWrap: wms,
+    alignContent: w,
+    alignItems: w,
+    alignSelf: w,
+    justifyContent: w,
+    order: w,
+    transform: w,
+    transformOrigin: w,
+    transformOriginX: w,
+    transformOriginY: w,
+    backfaceVisibility: w,
+    perspective: w,
+    perspectiveOrigin: w,
+    transformStyle: w,
+    transformOriginZ: w,
+    backdropFilter: w,
+    fontKerning: w,
+    scrollSnapType: wms,
+    scrollSnapPointsX: wms,
+    scrollSnapPointsY: wms,
+    scrollSnapDestination: wms,
+    scrollSnapCoordinate: wms,
+    shapeImageThreshold: w,
+    shapeImageMargin: w,
+    shapeImageOutside: w,
+    hyphens: wmms,
+    flowInto: wms,
+    flowFrom: wms,
+    regionFragment: wms,
+    textOrientation: w,
+    textAlignLast: m,
+    tabSize: m,
+    wrapFlow: ms,
+    wrapThrough: ms,
+    wrapMargin: ms,
+    touchAction: ms,
+    textSizeAdjust: ["ms", "Webkit"],
+    borderImage: w,
+    borderImageOutset: w,
+    borderImageRepeat: w,
+    borderImageSlice: w,
+    borderImageSource: w,
+    borderImageWidth: w,
+    transitionDelay: w,
+    transitionDuration: w,
+    transitionProperty: w,
+    transitionTimingFunction: w
+  }
+};
+const prefixStyles = createPrefixer(staticData);
+export {
+  prefixInlineStyles,
+  prefixStyles
+};
+//# sourceMappingURL=prefixStyles.js.map

package/dist/esm/helpers/prefixStyles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/prefixStyles.ts"],
+  "sourcesContent": ["import createPrefixer from 'inline-style-prefixer/lib/createPrefixer'\nimport backgroundClip from 'inline-style-prefixer/lib/plugins/backgroundClip'\nimport crossFade from 'inline-style-prefixer/lib/plugins/crossFade'\nimport cursor from 'inline-style-prefixer/lib/plugins/cursor'\nimport filter from 'inline-style-prefixer/lib/plugins/filter'\nimport flex from 'inline-style-prefixer/lib/plugins/flex'\nimport flexboxIE from 'inline-style-prefixer/lib/plugins/flexboxIE'\nimport flexboxOld from 'inline-style-prefixer/lib/plugins/flexboxOld'\nimport gradient from 'inline-style-prefixer/lib/plugins/gradient'\nimport grid from 'inline-style-prefixer/lib/plugins/grid'\nimport imageSet from 'inline-style-prefixer/lib/plugins/imageSet'\nimport logical from 'inline-style-prefixer/lib/plugins/logical'\nimport position from 'inline-style-prefixer/lib/plugins/position'\nimport sizing from 'inline-style-prefixer/lib/plugins/sizing'\nimport transition from 'inline-style-prefixer/lib/plugins/transition'\n\ntype StyleModifier = (style: Object) => Object\n\nexport const prefixInlineStyles: StyleModifier = (style) => {\n  const prefixedStyles = prefixStyles(style)\n\n  // React@15 removed undocumented support for fallback values in\n  // inline-styles. Revert array values to the standard CSS value\n  Object.keys(prefixedStyles).forEach((prop) => {\n    const value = prefixedStyles[prop]\n    if (Array.isArray(value)) {\n      prefixedStyles[prop] = value[value.length - 1]\n    }\n  })\n\n  return prefixedStyles\n}\n\nconst w = ['Webkit']\nconst m = ['Moz']\nconst ms = ['ms']\nconst wm = ['Webkit', 'Moz']\nconst wms = ['Webkit', 'ms']\nconst wmms = ['Webkit', 'Moz', 'ms']\nconst staticData = {\n  plugins: [\n    backgroundClip,\n    crossFade,\n    cursor,\n    filter,\n    flex,\n    flexboxIE,\n    flexboxOld,\n    gradient,\n    grid,\n    imageSet,\n    logical,\n    position,\n    sizing,\n    transition,\n  ],\n  prefixMap: {\n    animation: w,\n    animationDelay: w,\n    animationDirection: w,\n    animationFillMode: w,\n    animationDuration: w,\n    animationIterationCount: w,\n    animationName: w,\n    animationPlayState: w,\n    animationTimingFunction: w,\n    appearance: wm,\n    userSelect: wmms,\n    textEmphasisPosition: w,\n    textEmphasis: w,\n    textEmphasisStyle: w,\n    textEmphasisColor: w,\n    boxDecorationBreak: w,\n    clipPath: w,\n    maskImage: w,\n    maskMode: w,\n    maskRepeat: w,\n    maskPosition: w,\n    maskClip: w,\n    maskOrigin: w,\n    maskSize: w,\n    maskComposite: w,\n    mask: w,\n    maskBorderSource: w,\n    maskBorderMode: w,\n    maskBorderSlice: w,\n    maskBorderWidth: w,\n    maskBorderOutset: w,\n    maskBorderRepeat: w,\n    maskBorder: w,\n    maskType: w,\n    textDecorationStyle: w,\n    textDecorationSkip: w,\n    textDecorationLine: w,\n    textDecorationColor: w,\n    filter: w,\n    fontFeatureSettings: w,\n    breakAfter: wmms,\n    breakBefore: wmms,\n    breakInside: wmms,\n    columnCount: wm,\n    columnFill: wm,\n    columnGap: wm,\n    columnRule: wm,\n    columnRuleColor: wm,\n    columnRuleStyle: wm,\n    columnRuleWidth: wm,\n    columns: wm,\n    columnSpan: wm,\n    columnWidth: wm,\n    writingMode: wms,\n    flex: wms,\n    flexBasis: w,\n    flexDirection: wms,\n    flexGrow: w,\n    flexFlow: wms,\n    flexShrink: w,\n    flexWrap: wms,\n    alignContent: w,\n    alignItems: w,\n    alignSelf: w,\n    justifyContent: w,\n    order: w,\n    transform: w,\n    transformOrigin: w,\n    transformOriginX: w,\n    transformOriginY: w,\n    backfaceVisibility: w,\n    perspective: w,\n    perspectiveOrigin: w,\n    transformStyle: w,\n    transformOriginZ: w,\n    backdropFilter: w,\n    fontKerning: w,\n    scrollSnapType: wms,\n    scrollSnapPointsX: wms,\n    scrollSnapPointsY: wms,\n    scrollSnapDestination: wms,\n    scrollSnapCoordinate: wms,\n    shapeImageThreshold: w,\n    shapeImageMargin: w,\n    shapeImageOutside: w,\n    hyphens: wmms,\n    flowInto: wms,\n    flowFrom: wms,\n    regionFragment: wms,\n    textOrientation: w,\n    textAlignLast: m,\n    tabSize: m,\n    wrapFlow: ms,\n    wrapThrough: ms,\n    wrapMargin: ms,\n    touchAction: ms,\n    textSizeAdjust: ['ms', 'Webkit'],\n    borderImage: w,\n    borderImageOutset: w,\n    borderImageRepeat: w,\n    borderImageSlice: w,\n    borderImageSource: w,\n    borderImageWidth: w,\n    transitionDelay: w,\n    transitionDuration: w,\n    transitionProperty: w,\n    transitionTimingFunction: w,\n  },\n}\n\nexport const prefixStyles: StyleModifier = createPrefixer(staticData)\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/hooks/useIsTouchDevice.js

@@ -1,11 +1,11 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { useState } from "react";
-import { isTouchDevice, useIsomorphicLayoutEffect } from "../constants/platform";
+import { isTouchable, useIsomorphicLayoutEffect } from "../constants/platform";
 const useIsTouchDevice = /* @__PURE__ */ __name(() => {
   const [touchOnly, setTouchOnly] = useState(false);
   useIsomorphicLayoutEffect(() => {
-    if (isTouchDevice) {
+    if (isTouchable) {
       setTouchOnly(true);
     }
   }, []);

package/dist/esm/hooks/useIsTouchDevice.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useIsTouchDevice.tsx"],
-  "sourcesContent": ["import { useState } from 'react'\n\nimport { isTouchDevice, useIsomorphicLayoutEffect } from '../constants/platform'\n\n// ssr friendly\n\nexport const useIsTouchDevice = () => {\n  const [touchOnly, setTouchOnly] = useState(false)\n\n  useIsomorphicLayoutEffect(() => {\n    if (isTouchDevice) {\n      setTouchOnly(true)\n    }\n  }, [])\n\n  return touchOnly\n}\n"],
-  "mappings": ";;AAAA;AAEA;AAIO,MAAM,mBAAmB,6BAAM;AACpC,QAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;AAEhD,4BAA0B,MAAM;AAC9B,QAAI,eAAe;AACjB,mBAAa,IAAI;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AACT,GAVgC;",
+  "sourcesContent": ["import { useState } from 'react'\n\nimport { isTouchable, useIsomorphicLayoutEffect } from '../constants/platform'\n\n// ssr friendly\n\nexport const useIsTouchDevice = () => {\n  const [touchOnly, setTouchOnly] = useState(false)\n\n  useIsomorphicLayoutEffect(() => {\n    if (isTouchable) {\n      setTouchOnly(true)\n    }\n  }, [])\n\n  return touchOnly\n}\n"],
+  "mappings": ";;AAAA;AAEA;AAIO,MAAM,mBAAmB,6BAAM;AACpC,QAAM,CAAC,WAAW,gBAAgB,SAAS,KAAK;AAEhD,4BAA0B,MAAM;AAC9B,QAAI,aAAa;AACf,mBAAa,IAAI;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AACT,GAVgC;",
   "names": []
 }

package/dist/esm/hooks/useTheme.js

@@ -11,7 +11,7 @@ import { useConstant } from "./useConstant";
 const useTheme = /* @__PURE__ */ __name((themeName, componentName, props, forceUpdate) => {
   const { name, theme, themes, themeManager, className, didChangeTheme } = useChangeThemeEffect(themeName, componentName, props, forceUpdate);
   if (process.env.NODE_ENV === "development") {
-    if ((props == null ? void 0 : props["debug"]) === "verbose") {
+    if ((props == null ? void 0 : props.debug) === "verbose") {
       console.log("  \xBB useTheme", { themeName, componentName, name, className });
     }
   }
@@ -52,7 +52,7 @@ const useTheme = /* @__PURE__ */ __name((themeName, componentName, props, forceU
         if (!name || key === "__proto__" || typeof key === "symbol") {
           if (key === GetThemeManager) {
             if (process.env.NODE_ENV === "development") {
-              if (props["debug"]) {
+              if (props == null ? void 0 : props.debug) {
                 console.log("did change", { themeName, didChangeTheme, name, componentName }, themeManager == null ? void 0 : themeManager.parentName);
               }
             }
@@ -131,13 +131,14 @@ const useChangeThemeEffect = /* @__PURE__ */ __name((name, componentName, props,
   const debug = props && props["debug"];
   const parentManager = useContext(ThemeManagerContext) || emptyManager;
   const { themes } = useContext(ThemeContext);
-  const next = parentManager.getNextTheme({ name, componentName, themes }, props);
+  const reset = (props == null ? void 0 : props.reset) || false;
+  const getThemeProps = { name, componentName, themes, reset };
+  const next = parentManager.getNextTheme(getThemeProps, debug);
   const forceUpdate = forceUpdateProp || useForceUpdate();
   const themeManager = useConstant(() => {
-    if (!next) {
+    if (!next)
       return null;
-    }
-    return new ThemeManager(next.name, next.theme, parentManager);
+    return new ThemeManager(next.name, next.theme, parentManager, reset);
   });
   if (typeof document !== "undefined") {
     useLayoutEffect(() => {
@@ -147,7 +148,7 @@ const useChangeThemeEffect = /* @__PURE__ */ __name((name, componentName, props,
         themeManager.update(next);
       }
       return parentManager.onChangeTheme(() => {
-        const next2 = parentManager.getNextTheme({ name, componentName, themes }, debug);
+        const next2 = parentManager.getNextTheme(getThemeProps, debug);
         if (!next2)
           return;
         if (themeManager.update(next2)) {

package/dist/esm/hooks/useTheme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useTheme.tsx"],
-  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../conf'\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport { ThemeContext } from '../ThemeContext'\nimport { ThemeManager, ThemeManagerContext, emptyManager } from '../ThemeManager'\nimport { ThemeObject } from '../types'\nimport { useConstant } from './useConstant'\n\ntype UseThemeState = {\n  uuid: Object\n  keys: Set<string>\n  isRendering: boolean\n}\n\nexport const useTheme = (\n  themeName?: string | null,\n  componentName?: string,\n  props?: any,\n  forceUpdate?: any\n): ThemeObject => {\n  const { name, theme, themes, themeManager, className, didChangeTheme } = useChangeThemeEffect(\n    themeName,\n    componentName,\n    props,\n    forceUpdate\n  )\n\n  if (process.env.NODE_ENV === 'development') {\n    if (props?.['debug'] === 'verbose') {\n      console.log('  \u00BB useTheme', { themeName, componentName, name, className })\n    }\n  }\n\n  const state = useRef() as React.MutableRefObject<UseThemeState>\n  if (!state.current) {\n    state.current = {\n      uuid: {},\n      keys: new Set(),\n      isRendering: true,\n    }\n  }\n  state.current.isRendering = true\n\n  // track usage\n  useIsomorphicLayoutEffect(() => {\n    const st = state.current\n    st.isRendering = false\n    const cur = themeManager?.keys.get(st.uuid)\n    if (!cur || !areEqualSets(st.keys, cur)) {\n      themeManager?.track(st.uuid, st.keys)\n    }\n  })\n\n  return useMemo(() => {\n    if (!theme) {\n      if (process.env.NODE_ENV === 'development') {\n        console.warn('No theme', { themeName, theme, componentName, className })\n      }\n      return themes[getConfig().defaultTheme || 'light' || Object.keys(themes)[0]]\n    }\n    return new Proxy(theme, {\n      has(_, key) {\n        if (typeof key === 'string') {\n          if (key[0] === '$') {\n            key = key.slice(1)\n          }\n        }\n        return Reflect.has(theme, key)\n      },\n      get(_, key) {\n        if (!name || key === '__proto__' || typeof key === 'symbol') {\n          // TODO make this pattern better\n          if (key === GetThemeManager) {\n            if (process.env.NODE_ENV === 'development') {\n              if (props['debug']) {\n                // prettier-ignore\n                console.log('did change', { themeName, didChangeTheme, name, componentName }, themeManager?.parentName)\n              }\n            }\n            if (!didChangeTheme) {\n              return null\n            }\n            return themeManager\n          }\n          return Reflect.get(_, key)\n        }\n        if (typeof key !== 'string' || key === '$typeof') {\n          return Reflect.get(_, key)\n        }\n        if (process.env.NODE_ENV === 'development') {\n          if (key === '__state') {\n            return state.current\n          }\n        }\n        if (key === 'name') {\n          return name\n        }\n        if (key === 'className') {\n          return className\n        }\n        if (!themeManager) {\n          console.error('No themeManager')\n          return\n        }\n        // auto convert variables to plain\n        if (key[0] === '$') {\n          key = key.slice(1)\n        }\n        const val = themeManager.getValue(key)\n        if (val) {\n          if (state.current.isRendering) {\n            state.current.keys.add(key)\n            if (process.env.NODE_ENV === 'development') {\n              if (props?.['debug'] === 'verbose') {\n                console.log('  \u00BB tracking theme key', key)\n              }\n            }\n          }\n          return val\n        }\n        // react native debuger uses toJSON\n        if (process.env.NODE_ENV === 'development') {\n          console.log(`No theme value \"${String(key)}\" in ${name}`)\n        }\n        return Reflect.get(_, key)\n      },\n    })\n  }, [name, theme, className, didChangeTheme])\n}\n\nconst GetThemeManager = Symbol('GetThemeManager')\n\nexport const getThemeManagerIfChanged = (theme: any) => {\n  return theme?.[GetThemeManager]\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n  const parent = useContext(ThemeManagerContext)\n  const [name, setName] = useState(parent?.name || '')\n\n  useIsomorphicLayoutEffect(() => {\n    if (!parent) return\n    return parent.onChangeTheme((next, manager) => {\n      const name = opts?.parent ? manager.parentName || next : next\n      if (!name) return\n      setName(name)\n    })\n  }, [parent])\n\n  return name\n}\n\nexport const useDefaultThemeName = () => {\n  return useContext(ThemeContext)?.defaultTheme\n}\n\nexport const useChangeThemeEffect = (\n  name?: string | null,\n  componentName?: string,\n  props?: any,\n  forceUpdateProp?: any\n) => {\n  const debug = props && props['debug']\n  const parentManager = useContext(ThemeManagerContext) || emptyManager\n  const { themes } = useContext(ThemeContext)!\n  const next = parentManager.getNextTheme({ name, componentName, themes }, props)\n  const forceUpdate = forceUpdateProp || useForceUpdate()\n  const themeManager = useConstant<ThemeManager | null>(() => {\n    if (!next) {\n      return null\n    }\n    return new ThemeManager(next.name, next.theme, parentManager)\n  })\n\n  if (typeof document !== 'undefined') {\n    useLayoutEffect(() => {\n      if (!themeManager) return\n      if (next?.name) {\n        themeManager.update(next)\n      }\n      return parentManager.onChangeTheme(() => {\n        const next = parentManager.getNextTheme({ name, componentName, themes }, debug)\n        if (!next) return\n        if (themeManager.update(next)) {\n          forceUpdate()\n        }\n      })\n    }, [themes, name, componentName, debug, next?.name])\n  }\n\n  const didChangeTheme = next && parentManager && next.name !== parentManager.fullName\n\n  return {\n    ...(parentManager && {\n      name: parentManager.name,\n      theme: parentManager.theme,\n    }),\n    ...next,\n    didChangeTheme,\n    themes,\n    themeManager,\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../conf'\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport { ThemeContext } from '../ThemeContext'\nimport { GetNextThemeProps, ThemeManager, ThemeManagerContext, emptyManager } from '../ThemeManager'\nimport { ThemeName, ThemeObject } from '../types'\nimport { useConstant } from './useConstant'\n\nexport type ThemeProps = {\n  className?: string\n  disableThemeClass?: boolean\n  name: Exclude<ThemeName, number> | null\n  componentName?: string\n  children?: any\n  reset?: boolean\n  debug?: boolean | 'verbose'\n}\n\ntype UseThemeState = {\n  uuid: Object\n  keys: Set<string>\n  isRendering: boolean\n}\n\nexport const useTheme = (\n  themeName?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdate?: any\n): ThemeObject => {\n  const { name, theme, themes, themeManager, className, didChangeTheme } = useChangeThemeEffect(\n    themeName,\n    componentName,\n    props,\n    forceUpdate\n  )\n\n  if (process.env.NODE_ENV === 'development') {\n    if (props?.debug === 'verbose') {\n      console.log('  \u00BB useTheme', { themeName, componentName, name, className })\n    }\n  }\n\n  const state = useRef() as React.MutableRefObject<UseThemeState>\n  if (!state.current) {\n    state.current = {\n      uuid: {},\n      keys: new Set(),\n      isRendering: true,\n    }\n  }\n  state.current.isRendering = true\n\n  // track usage\n  useIsomorphicLayoutEffect(() => {\n    const st = state.current\n    st.isRendering = false\n    const cur = themeManager?.keys.get(st.uuid)\n    if (!cur || !areEqualSets(st.keys, cur)) {\n      themeManager?.track(st.uuid, st.keys)\n    }\n  })\n\n  return useMemo(() => {\n    if (!theme) {\n      if (process.env.NODE_ENV === 'development') {\n        console.warn('No theme', { themeName, theme, componentName, className })\n      }\n      return themes[getConfig().defaultTheme || 'light' || Object.keys(themes)[0]]\n    }\n    return new Proxy(theme, {\n      has(_, key) {\n        if (typeof key === 'string') {\n          if (key[0] === '$') {\n            key = key.slice(1)\n          }\n        }\n        return Reflect.has(theme, key)\n      },\n      get(_, key) {\n        if (!name || key === '__proto__' || typeof key === 'symbol') {\n          // TODO make this pattern better\n          if (key === GetThemeManager) {\n            if (process.env.NODE_ENV === 'development') {\n              if (props?.debug) {\n                // prettier-ignore\n                console.log('did change', { themeName, didChangeTheme, name, componentName }, themeManager?.parentName)\n              }\n            }\n            if (!didChangeTheme) {\n              return null\n            }\n            return themeManager\n          }\n          return Reflect.get(_, key)\n        }\n        if (typeof key !== 'string' || key === '$typeof') {\n          return Reflect.get(_, key)\n        }\n        if (process.env.NODE_ENV === 'development') {\n          if (key === '__state') {\n            return state.current\n          }\n        }\n        if (key === 'name') {\n          return name\n        }\n        if (key === 'className') {\n          return className\n        }\n        if (!themeManager) {\n          console.error('No themeManager')\n          return\n        }\n        // auto convert variables to plain\n        if (key[0] === '$') {\n          key = key.slice(1)\n        }\n        const val = themeManager.getValue(key)\n        if (val) {\n          if (state.current.isRendering) {\n            state.current.keys.add(key)\n            if (process.env.NODE_ENV === 'development') {\n              if (props?.['debug'] === 'verbose') {\n                console.log('  \u00BB tracking theme key', key)\n              }\n            }\n          }\n          return val\n        }\n        // react native debuger uses toJSON\n        if (process.env.NODE_ENV === 'development') {\n          console.log(`No theme value \"${String(key)}\" in ${name}`)\n        }\n        return Reflect.get(_, key)\n      },\n    })\n  }, [name, theme, className, didChangeTheme])\n}\n\nconst GetThemeManager = Symbol('GetThemeManager')\n\nexport const getThemeManagerIfChanged = (theme: any) => {\n  return theme?.[GetThemeManager]\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n  const parent = useContext(ThemeManagerContext)\n  const [name, setName] = useState(parent?.name || '')\n\n  useIsomorphicLayoutEffect(() => {\n    if (!parent) return\n    return parent.onChangeTheme((next, manager) => {\n      const name = opts?.parent ? manager.parentName || next : next\n      if (!name) return\n      setName(name)\n    })\n  }, [parent])\n\n  return name\n}\n\nexport const useDefaultThemeName = () => {\n  return useContext(ThemeContext)?.defaultTheme\n}\n\nexport const useChangeThemeEffect = (\n  name?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdateProp?: any\n) => {\n  const debug = props && props['debug']\n  const parentManager = useContext(ThemeManagerContext) || emptyManager\n  const { themes } = useContext(ThemeContext)!\n  const reset = props?.reset || false\n  const getThemeProps: GetNextThemeProps = { name, componentName, themes, reset }\n  const next = parentManager.getNextTheme(getThemeProps, debug)\n  const forceUpdate = forceUpdateProp || useForceUpdate()\n  const themeManager = useConstant<ThemeManager | null>(() => {\n    if (!next) return null\n    return new ThemeManager(next.name, next.theme, parentManager, reset)\n  })\n\n  if (typeof document !== 'undefined') {\n    useLayoutEffect(() => {\n      if (!themeManager) return\n      if (next?.name) {\n        themeManager.update(next)\n      }\n      return parentManager.onChangeTheme(() => {\n        const next = parentManager.getNextTheme(getThemeProps, debug)\n        if (!next) return\n        if (themeManager.update(next)) {\n          forceUpdate()\n        }\n      })\n    }, [themes, name, componentName, debug, next?.name])\n  }\n\n  const didChangeTheme = next && parentManager && next.name !== parentManager.fullName\n\n  return {\n    ...(parentManager && {\n      name: parentManager.name,\n      theme: parentManager.theme,\n    }),\n    ...next,\n    didChangeTheme,\n    themes,\n    themeManager,\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/views/Theme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Theme.tsx"],
-  "sourcesContent": ["import React, { memo, useMemo } from 'react'\n\nimport { isWeb } from '../constants/platform'\nimport { wrapThemeManagerContext } from '../helpers/wrapThemeManagerContext'\nimport { useChangeThemeEffect } from '../hooks/useTheme'\nimport { ThemeName } from '../types'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\nexport type ThemeProps = {\n  className?: string\n  disableThemeClass?: boolean\n  name: Exclude<ThemeName, number> | null\n  componentName?: string\n  children?: any\n  debug?: boolean\n}\n\nexport const Theme = memo(function Theme(props: ThemeProps) {\n  const { name, theme, themeManager, themes, className } = useChangeThemeEffect(\n    props.name,\n    props.componentName,\n    props\n  )\n\n  if (!themes || !name || !theme) {\n    if (name && !theme && process.env.NODE_ENV === 'development') {\n      console.warn(`No theme found by name ${name}`)\n    }\n    return props.children\n  }\n\n  // memo here, changing theme without re-rendering all children is a critical optimization\n  // may require some effort of end user to memoize but without this memo they'd have no option\n  const contents = useMemo(\n    () => wrapThemeManagerContext(props.children, themeManager),\n    [props.children, themeManager]\n  )\n\n  if (isWeb) {\n    return (\n      <span\n        className={[\n          `tui_Theme`,\n          ...(!props.disableThemeClass ? [props.className, className].filter(Boolean) : []),\n        ].join(' ')}\n        style={{\n          display: 'contents',\n          // in order to provide currentColor, set color by default\n          color: themes[name]?.color?.toString(),\n        }}\n      >\n        {contents}\n      </span>\n    )\n  }\n\n  return contents\n})\n"],
-  "mappings": ";;AAAA;AAEA;AACA;AACA;AAIA,MAAM;AAWC,MAAM,QAAQ,KAAK,uCAAe,OAAmB;AAnB5D;AAoBE,QAAM,EAAE,MAAM,OAAO,cAAc,QAAQ,cAAc,qBACvD,MAAM,MACN,MAAM,eACN,KACF;AAEA,MAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO;AAC9B,QAAI,QAAQ,CAAC,SAAS,QAAQ,IAAI,aAAa,eAAe;AAC5D,cAAQ,KAAK,0BAA0B,MAAM;AAAA,IAC/C;AACA,WAAO,MAAM;AAAA,EACf;AAIA,QAAM,WAAW,QACf,MAAM,wBAAwB,MAAM,UAAU,YAAY,GAC1D,CAAC,MAAM,UAAU,YAAY,CAC/B;AAEA,MAAI,OAAO;AACT,WACE,oCAAC;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,GAAI,CAAC,MAAM,oBAAoB,CAAC,MAAM,WAAW,SAAS,EAAE,OAAO,OAAO,IAAI,CAAC;AAAA,MACjF,EAAE,KAAK,GAAG;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,QAET,OAAO,mBAAO,UAAP,mBAAc,UAAd,mBAAqB;AAAA,MAC9B;AAAA,OAEC,QACH;AAAA,EAEJ;AAEA,SAAO;AACT,GAxC0B,QAwCzB;",
+  "sourcesContent": ["import React, { memo, useMemo } from 'react'\n\nimport { isWeb } from '../constants/platform'\nimport { wrapThemeManagerContext } from '../helpers/wrapThemeManagerContext'\nimport { useChangeThemeEffect } from '../hooks/useTheme'\nimport { ThemeProps } from '../hooks/useTheme'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\nexport const Theme = memo(function Theme(props: ThemeProps) {\n  const { name, theme, themeManager, themes, className } = useChangeThemeEffect(\n    props.name,\n    props.componentName,\n    props\n  )\n\n  if (!themes || !name || !theme) {\n    if (name && !theme && process.env.NODE_ENV === 'development') {\n      console.warn(`No theme found by name ${name}`)\n    }\n    return props.children\n  }\n\n  // memo here, changing theme without re-rendering all children is a critical optimization\n  // may require some effort of end user to memoize but without this memo they'd have no option\n  const contents = useMemo(\n    () => wrapThemeManagerContext(props.children, themeManager),\n    [props.children, themeManager]\n  )\n\n  if (isWeb) {\n    return (\n      <span\n        className={[\n          `tui_Theme`,\n          ...(!props.disableThemeClass ? [props.className, className].filter(Boolean) : []),\n        ].join(' ')}\n        style={{\n          display: 'contents',\n          // in order to provide currentColor, set color by default\n          color: themes[name]?.color?.toString(),\n        }}\n      >\n        {contents}\n      </span>\n    )\n  }\n\n  return contents\n})\n"],
+  "mappings": ";;AAAA;AAEA;AACA;AACA;AAIA,MAAM;AAEC,MAAM,QAAQ,KAAK,uCAAe,OAAmB;AAV5D;AAWE,QAAM,EAAE,MAAM,OAAO,cAAc,QAAQ,cAAc,qBACvD,MAAM,MACN,MAAM,eACN,KACF;AAEA,MAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO;AAC9B,QAAI,QAAQ,CAAC,SAAS,QAAQ,IAAI,aAAa,eAAe;AAC5D,cAAQ,KAAK,0BAA0B,MAAM;AAAA,IAC/C;AACA,WAAO,MAAM;AAAA,EACf;AAIA,QAAM,WAAW,QACf,MAAM,wBAAwB,MAAM,UAAU,YAAY,GAC1D,CAAC,MAAM,UAAU,YAAY,CAC/B;AAEA,MAAI,OAAO;AACT,WACE,oCAAC;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,GAAI,CAAC,MAAM,oBAAoB,CAAC,MAAM,WAAW,SAAS,EAAE,OAAO,OAAO,IAAI,CAAC;AAAA,MACjF,EAAE,KAAK,GAAG;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,QAET,OAAO,mBAAO,UAAP,mBAAc,UAAd,mBAAqB;AAAA,MAC9B;AAAA,OAEC,QACH;AAAA,EAEJ;AAEA,SAAO;AACT,GAxC0B,QAwCzB;",
   "names": []
 }

package/dist/esm/views/ThemeProvider.js

@@ -20,7 +20,7 @@ const ThemeProvider = /* @__PURE__ */ __name((props) => {
       return () => {
         document.body.classList.remove(cn);
       };
-    }, [props.disableRootThemeClass]);
+    }, [props.defaultTheme, props.disableRootThemeClass]);
   }
   const themeContext = useMemo(() => {
     return {

package/dist/esm/views/ThemeProvider.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/ThemeProvider.tsx"],
-  "sourcesContent": ["import React, { useLayoutEffect, useMemo } from 'react'\n\nimport { getHasConfigured } from '../conf'\nimport { THEME_CLASSNAME_PREFIX } from '../constants/constants'\nimport { ThemeContext } from '../ThemeContext'\nimport { Theme } from './Theme'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\nexport type ThemeProviderProps = {\n  className?: string\n  themes: any\n  defaultTheme: string\n  disableRootThemeClass?: boolean\n  children?: any\n}\n\nexport const ThemeProvider = (props: ThemeProviderProps) => {\n  if (!getHasConfigured()) {\n    throw new Error(`Missing configureThemes() call, add to your root file`)\n  }\n\n  // ensure theme is attached to root body node as well to work with modals by default\n  if (typeof document !== 'undefined') {\n    useLayoutEffect(() => {\n      if (props.disableRootThemeClass) {\n        return\n      }\n      const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`\n      document.body.classList.add(cn)\n      return () => {\n        document.body.classList.remove(cn)\n      }\n    }, [props.disableRootThemeClass])\n  }\n\n  const themeContext = useMemo(() => {\n    return {\n      themes: props.themes,\n      defaultTheme: props.defaultTheme,\n    }\n  }, [props.themes])\n\n  return (\n    <ThemeContext.Provider value={themeContext}>\n      <Theme\n        className={props.className}\n        name={props.defaultTheme}\n        disableThemeClass={props.disableRootThemeClass}\n      >\n        {props.children}\n      </Theme>\n    </ThemeContext.Provider>\n  )\n}\n"],
-  "mappings": ";;AAAA;AAEA;AACA;AACA;AACA;AAGA,MAAM;AAUC,MAAM,gBAAgB,wBAAC,UAA8B;AAC1D,MAAI,CAAC,iBAAiB,GAAG;AACvB,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAGA,MAAI,OAAO,aAAa,aAAa;AACnC,oBAAgB,MAAM;AACpB,UAAI,MAAM,uBAAuB;AAC/B;AAAA,MACF;AACA,YAAM,KAAK,GAAG,yBAAyB,MAAM;AAC7C,eAAS,KAAK,UAAU,IAAI,EAAE;AAC9B,aAAO,MAAM;AACX,iBAAS,KAAK,UAAU,OAAO,EAAE;AAAA,MACnC;AAAA,IACF,GAAG,CAAC,MAAM,qBAAqB,CAAC;AAAA,EAClC;AAEA,QAAM,eAAe,QAAQ,MAAM;AACjC,WAAO;AAAA,MACL,QAAQ,MAAM;AAAA,MACd,cAAc,MAAM;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,MAAM,MAAM,CAAC;AAEjB,SACE,oCAAC,aAAa,UAAb;AAAA,IAAsB,OAAO;AAAA,KAC5B,oCAAC;AAAA,IACC,WAAW,MAAM;AAAA,IACjB,MAAM,MAAM;AAAA,IACZ,mBAAmB,MAAM;AAAA,KAExB,MAAM,QACT,CACF;AAEJ,GArC6B;",
+  "sourcesContent": ["import React, { useLayoutEffect, useMemo } from 'react'\n\nimport { getHasConfigured } from '../conf'\nimport { THEME_CLASSNAME_PREFIX } from '../constants/constants'\nimport { ThemeContext } from '../ThemeContext'\nimport { Theme } from './Theme'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\nexport type ThemeProviderProps = {\n  className?: string\n  themes: any\n  defaultTheme: string\n  disableRootThemeClass?: boolean\n  children?: any\n  reset?: boolean\n}\n\nexport const ThemeProvider = (props: ThemeProviderProps) => {\n  if (!getHasConfigured()) {\n    throw new Error(`Missing configureThemes() call, add to your root file`)\n  }\n\n  // ensure theme is attached to root body node as well to work with modals by default\n  if (typeof document !== 'undefined') {\n    useLayoutEffect(() => {\n      if (props.disableRootThemeClass) {\n        return\n      }\n      const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`\n      document.body.classList.add(cn)\n      return () => {\n        document.body.classList.remove(cn)\n      }\n    }, [props.defaultTheme, props.disableRootThemeClass])\n  }\n\n  const themeContext = useMemo(() => {\n    return {\n      themes: props.themes,\n      defaultTheme: props.defaultTheme,\n    }\n  }, [props.themes])\n\n  return (\n    <ThemeContext.Provider value={themeContext}>\n      <Theme\n        className={props.className}\n        name={props.defaultTheme}\n        disableThemeClass={props.disableRootThemeClass}\n      >\n        {props.children}\n      </Theme>\n    </ThemeContext.Provider>\n  )\n}\n"],
+  "mappings": ";;AAAA;AAEA;AACA;AACA;AACA;AAGA,MAAM;AAWC,MAAM,gBAAgB,wBAAC,UAA8B;AAC1D,MAAI,CAAC,iBAAiB,GAAG;AACvB,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AAGA,MAAI,OAAO,aAAa,aAAa;AACnC,oBAAgB,MAAM;AACpB,UAAI,MAAM,uBAAuB;AAC/B;AAAA,MACF;AACA,YAAM,KAAK,GAAG,yBAAyB,MAAM;AAC7C,eAAS,KAAK,UAAU,IAAI,EAAE;AAC9B,aAAO,MAAM;AACX,iBAAS,KAAK,UAAU,OAAO,EAAE;AAAA,MACnC;AAAA,IACF,GAAG,CAAC,MAAM,cAAc,MAAM,qBAAqB,CAAC;AAAA,EACtD;AAEA,QAAM,eAAe,QAAQ,MAAM;AACjC,WAAO;AAAA,MACL,QAAQ,MAAM;AAAA,MACd,cAAc,MAAM;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,MAAM,MAAM,CAAC;AAEjB,SACE,oCAAC,aAAa,UAAb;AAAA,IAAsB,OAAO;AAAA,KAC5B,oCAAC;AAAA,IACC,WAAW,MAAM;AAAA,IACjB,MAAM,MAAM;AAAA,IACZ,mBAAmB,MAAM;AAAA,KAExB,MAAM,QACT,CACF;AAEJ,GArC6B;",
   "names": []
 }

package/dist/esm/views/ThemeReset.js

@@ -29,6 +29,7 @@ const ThemeReset = /* @__PURE__ */ __name((props) => {
   }
   return /* @__PURE__ */ React.createElement(Theme, {
     className: "tui-theme-reset",
+    reset: true,
     name
   }, props.children);
 }, "ThemeReset");

package/dist/esm/views/ThemeReset.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/ThemeReset.tsx"],
-  "sourcesContent": ["import React, { useContext, useLayoutEffect, useState } from 'react'\n\nimport { isWeb } from '../constants/platform'\nimport { ThemeManagerContext } from '../ThemeManager'\nimport { Theme } from './Theme'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\n// resets the theme to the parent theme\nexport const ThemeReset = (props: { children?: any }) => {\n  const themeManager = useContext(ThemeManagerContext)\n  const [name, setName] = useState<string | null>(null)\n\n  // this component doesn't work with SSR, so must run only client side\n  // we could at least prevent more flickering by having the ssr head script\n  // that changes to dark initially also go through and change all of these\n  if (!isWeb || typeof document !== 'undefined') {\n    useLayoutEffect(() => {\n      if (!themeManager) return\n      if (name !== themeManager.parentName) {\n        setName(themeManager.parentName)\n      }\n    }, [themeManager?.parentName])\n\n    useLayoutEffect(() => {\n      if (!themeManager) return\n      return themeManager.onChangeTheme(() => {\n        setName(themeManager.parentName)\n      })\n    }, [])\n  }\n\n  if (!themeManager || !props.children) {\n    return props.children || null\n  }\n\n  return (\n    <Theme className=\"tui-theme-reset\" name={name}>\n      {props.children}\n    </Theme>\n  )\n}\n"],
-  "mappings": ";;AAAA;AAEA;AACA;AACA;AAGA,MAAM;AAGC,MAAM,aAAa,wBAAC,UAA8B;AACvD,QAAM,eAAe,WAAW,mBAAmB;AACnD,QAAM,CAAC,MAAM,WAAW,SAAwB,IAAI;AAKpD,MAAI,CAAC,SAAS,OAAO,aAAa,aAAa;AAC7C,oBAAgB,MAAM;AACpB,UAAI,CAAC;AAAc;AACnB,UAAI,SAAS,aAAa,YAAY;AACpC,gBAAQ,aAAa,UAAU;AAAA,MACjC;AAAA,IACF,GAAG,CAAC,6CAAc,UAAU,CAAC;AAE7B,oBAAgB,MAAM;AACpB,UAAI,CAAC;AAAc;AACnB,aAAO,aAAa,cAAc,MAAM;AACtC,gBAAQ,aAAa,UAAU;AAAA,MACjC,CAAC;AAAA,IACH,GAAG,CAAC,CAAC;AAAA,EACP;AAEA,MAAI,CAAC,gBAAgB,CAAC,MAAM,UAAU;AACpC,WAAO,MAAM,YAAY;AAAA,EAC3B;AAEA,SACE,oCAAC;AAAA,IAAM,WAAU;AAAA,IAAkB;AAAA,KAChC,MAAM,QACT;AAEJ,GAhC0B;",
+  "sourcesContent": ["import React, { useContext, useLayoutEffect, useState } from 'react'\n\nimport { isWeb } from '../constants/platform'\nimport { ThemeManagerContext } from '../ThemeManager'\nimport { Theme } from './Theme'\n\n// bugfix esbuild strips react jsx: 'preserve'\nReact['createElement']\n\n// resets the theme to the parent theme\nexport const ThemeReset = (props: { children?: any }) => {\n  const themeManager = useContext(ThemeManagerContext)\n  const [name, setName] = useState<string | null>(null)\n\n  // this component doesn't work with SSR, so must run only client side\n  // we could at least prevent more flickering by having the ssr head script\n  // that changes to dark initially also go through and change all of these\n  if (!isWeb || typeof document !== 'undefined') {\n    useLayoutEffect(() => {\n      if (!themeManager) return\n      if (name !== themeManager.parentName) {\n        setName(themeManager.parentName)\n      }\n    }, [themeManager?.parentName])\n\n    useLayoutEffect(() => {\n      if (!themeManager) return\n      return themeManager.onChangeTheme(() => {\n        setName(themeManager.parentName)\n      })\n    }, [])\n  }\n\n  if (!themeManager || !props.children) {\n    return props.children || null\n  }\n\n  return (\n    <Theme className=\"tui-theme-reset\" reset name={name}>\n      {props.children}\n    </Theme>\n  )\n}\n"],
+  "mappings": ";;AAAA;AAEA;AACA;AACA;AAGA,MAAM;AAGC,MAAM,aAAa,wBAAC,UAA8B;AACvD,QAAM,eAAe,WAAW,mBAAmB;AACnD,QAAM,CAAC,MAAM,WAAW,SAAwB,IAAI;AAKpD,MAAI,CAAC,SAAS,OAAO,aAAa,aAAa;AAC7C,oBAAgB,MAAM;AACpB,UAAI,CAAC;AAAc;AACnB,UAAI,SAAS,aAAa,YAAY;AACpC,gBAAQ,aAAa,UAAU;AAAA,MACjC;AAAA,IACF,GAAG,CAAC,6CAAc,UAAU,CAAC;AAE7B,oBAAgB,MAAM;AACpB,UAAI,CAAC;AAAc;AACnB,aAAO,aAAa,cAAc,MAAM;AACtC,gBAAQ,aAAa,UAAU;AAAA,MACjC,CAAC;AAAA,IACH,GAAG,CAAC,CAAC;AAAA,EACP;AAEA,MAAI,CAAC,gBAAgB,CAAC,MAAM,UAAU;AACpC,WAAO,MAAM,YAAY;AAAA,EAC3B;AAEA,SACE,oCAAC;AAAA,IAAM,WAAU;AAAA,IAAkB,OAAK;AAAA,IAAC;AAAA,KACtC,MAAM,QACT;AAEJ,GAhC0B;",
   "names": []
 }

package/dist/jsx/ThemeManager.js

@@ -18,10 +18,11 @@ import { createContext } from "react";
 import { getThemes } from "./conf";
 import { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from "./constants/constants";
 class ThemeManager {
-  constructor(name = "", theme = null, parentManager = null) {
+  constructor(name = "", theme = null, parentManager = null, reset = false) {
     this.name = name;
     this.theme = theme;
     this.parentManager = parentManager;
+    this.reset = reset;
     __privateAdd(this, _getClassName);
     this.keys = /* @__PURE__ */ new Map();
     this.listeners = /* @__PURE__ */ new Map();
@@ -71,8 +72,8 @@ class ThemeManager {
     }
   }
   update({ name, theme, className } = {}) {
-    const sameNameOrClassName = this.className ? className == this.className : name === this.name;
-    if (sameNameOrClassName) {
+    const nameChanged = name !== this.name;
+    if (!nameChanged) {
       return false;
     }
     this.className = className || null;
@@ -81,8 +82,17 @@ class ThemeManager {
     this.notifyListeners();
     return true;
   }
-  getNextTheme(opts = {}, props) {
-    const { themes = getThemes(), name, componentName } = opts;
+  getNextTheme(props = {}, debug) {
+    var _a;
+    const { themes = getThemes(), name, componentName } = props;
+    if (props.reset && name) {
+      return {
+        name,
+        theme: themes[name],
+        className: __privateMethod(this, _getClassName, getClassName_fn).call(this, name)
+      };
+    }
+    const parentIsReset = (_a = this.parentManager) == null ? void 0 : _a.reset;
     if (!name) {
       if (componentName) {
         const names = [
@@ -102,7 +112,7 @@ class ThemeManager {
       };
     }
     let nextName = name || this.name || "";
-    let parentName = this.fullName;
+    let parentName = parentIsReset ? this.parentName || this.fullName : this.fullName;
     while (true) {
       if (nextName in themes) {
         break;
@@ -132,8 +142,8 @@ class ThemeManager {
     if (!theme) {
       theme = themes[`light_${nextName}`];
     }
-    if (process.env.NODE_ENV === "development" && props && props["debug"]) {
-      console.log("getNextTheme", { name: opts.name, nextName, parentName });
+    if (process.env.NODE_ENV === "development" && debug) {
+      console.log("getNextTheme", { props, nextName, parentName }, this);
     }
     return {
       name: nextName,

package/dist/jsx/constants/platform.js

@@ -8,8 +8,8 @@ const isSSR = isWeb && typeof window === "undefined";
 const isClient = isWeb && typeof window !== "undefined";
 const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect;
 const isChrome = typeof navigator !== "undefined" && /Chrome/.test(navigator.userAgent || "");
-const supportsTouchWeb = typeof window !== "undefined" && "ontouchstart" in window;
-const isTouchDevice = !isWeb || supportsTouchWeb;
+const isWebTouchable = typeof window !== "undefined" && "ontouchstart" in window;
+const isTouchable = !isWeb || isWebTouchable;
 const isWebIOS = isWeb && typeof navigator !== "undefined" && (/iPad|iPhone|iPod/.test(navigator.platform) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1) && !window["MSStream"];
 export {
   isAndroid,
@@ -17,9 +17,9 @@ export {
   isClient,
   isIOS,
   isSSR,
-  isTouchDevice,
+  isTouchable,
   isWeb,
   isWebIOS,
-  supportsTouchWeb,
+  isWebTouchable,
   useIsomorphicLayoutEffect
 };

package/dist/jsx/createComponent.js

@@ -71,7 +71,7 @@ function createComponent(configIn, ParentComponent) {
       return parseStaticConfig(config);
     }
   })();
-  const componentClassName = `is_${staticConfig.componentName}`;
+  const defaultComponentClassName = `is_${staticConfig.componentName}`;
   let tamaguiConfig;
   let AnimatedText;
   let AnimatedView;
@@ -95,21 +95,27 @@ function createComponent(configIn, ParentComponent) {
   const component = forwardRef((props, forwardedRef) => {
     var _a, _b, _c;
     props = tamaguiDefaultProps && !props.asChild ? { ...tamaguiDefaultProps, ...props } : props;
-    const { Component, componentName, isText, isZStack } = staticConfig;
+    const { Component, isText, isZStack } = staticConfig;
+    const componentName = props.componentName || staticConfig.componentName;
+    const componentClassName = props.componentName ? `is_${props.componentName}` : defaultComponentClassName;
     if (process.env.NODE_ENV === "development") {
       if (props["debug"]) {
-        console.log("\u26A0\uFE0F", staticConfig.componentName || (Component == null ? void 0 : Component.displayName) || (Component == null ? void 0 : Component.name) || "[Unnamed Component]", "debug on");
+        console.log("\u26A0\uFE0F", 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, staticConfig.componentName, props, forceUpdate);
+    const theme = useTheme(props.theme, componentName, props, forceUpdate);
     const [state, set_] = useState(defaultComponentState);
     const setStateShallow = createShallowUpdate(set_);
     const shouldAvoidClasses = !!(props.animation && avoidClasses);
-    const splitStyles = useSplitStyles(props, staticConfig, theme, shouldAvoidClasses ? { ...state, noClassNames: true, resolveVariablesAs: "value" } : state, shouldAvoidClasses || props.asChild ? null : initialSplitStyles.classNames);
+    const splitStyles = useSplitStyles(props, staticConfig, theme, !shouldAvoidClasses ? state : {
+      ...state,
+      noClassNames: true,
+      resolveVariablesAs: "value"
+    }, 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);
@@ -246,13 +252,13 @@ function createComponent(configIn, ParentComponent) {
     if (isStringElement && shouldAvoidClasses) {
       styles = {
         ...defaultNativeStyle,
-        ...animationStyles,
+        ...animationStyles != null ? animationStyles : style,
         ...medias
       };
     } else {
       styles = [
         isWeb ? null : defaultNativeStyleSheet ? defaultNativeStyleSheet.base : null,
-        animationStyles ? animationStyles : style,
+        animationStyles != null ? animationStyles : style,
         medias
       ];
       if (!animationStyles) {
@@ -263,26 +269,26 @@ function createComponent(configIn, ParentComponent) {
       }
     }
     if (isWeb) {
+      const fontFamilyName = isText ? props.fontFamily || staticConfig.defaultProps.fontFamily : null;
+      const fontFamily = fontFamilyName && fontFamilyName[0] === "$" ? fontFamilyName.slice(1) : null;
+      const classList = [
+        componentName ? componentClassName : "",
+        fontFamily ? `font_${fontFamily}` : "",
+        theme.className,
+        classNames ? Object.values(classNames).join(" ") : ""
+      ];
       if (!shouldAvoidClasses) {
-        const fontFamilyName = isText ? props.fontFamily || staticConfig.defaultProps.fontFamily : null;
-        const fontFamily = fontFamilyName && fontFamilyName[0] === "$" ? fontFamilyName.slice(1) : null;
-        const classList = [
-          componentName ? componentClassName : "",
-          fontFamily ? `font_${fontFamily}` : "",
-          theme.className,
-          classNames ? Object.values(classNames).join(" ") : ""
-        ];
-        const className = classList.join(" ");
-        if (process.env.NODE_ENV === "development") {
-          if (props["debug"]) {
-            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]])) });
-          }
+        if (classNames) {
+          classList.push(Object.values(classNames).join(" "));
         }
-        viewProps.className = className;
-        viewProps.style = animationStyles;
-      } else {
-        viewProps.style = styles;
       }
+      const className = classList.join(" ");
+      const style2 = animationStyles != null ? animationStyles : splitStyles.style;
+      if (process.env.NODE_ENV === "development" && props["debug"]) {
+        console.log("  \xBB className", { splitStyles, style: style2, isStringElement, pseudos, state, classNames, propsClassName: props.className, classList, className: className.trim().split(" "), themeClassName: theme.className, values: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) });
+      }
+      viewProps.className = className;
+      viewProps.style = style2;
     } else {
       viewProps.style = styles;
     }

package/dist/jsx/createTamagui.js

@@ -143,6 +143,11 @@ function createTamagui(config) {
     return `${themeConfig.css}
 ${getInsertedRules().join("\n")}`;
   }, "getCSS");
+  if (config.shorthands) {
+    for (const key in config.shorthands) {
+      reversedShorthands[config.shorthands[key]] = key;
+    }
+  }
   const next = {
     fonts: {},
     animations: {},
@@ -169,6 +174,7 @@ ${getInsertedRules().join("\n")}`;
   return next;
 }
 __name(createTamagui, "createTamagui");
+const reversedShorthands = {};
 const parseTokens = /* @__PURE__ */ __name((tokens) => {
   const res = {};
   for (const key in tokens) {
@@ -197,5 +203,6 @@ function ensureThemeVariable(theme, key) {
 }
 __name(ensureThemeVariable, "ensureThemeVariable");
 export {
-  createTamagui
+  createTamagui,
+  reversedShorthands
 };

package/dist/jsx/helpers/createMediaStyle.js

@@ -19,6 +19,7 @@ const createMediaStyle = /* @__PURE__ */ __name(({ identifier, rules }, mediaKey
   } else {
     styleRule = `@media ${mediaQuery} { ${precendencePrefix} ${styleInner} }`;
   }
+  styleRule = styleRule.replace(";}", " !important;}");
   return {
     styleRule,
     identifier: nextIdentifier