@tamagui/core 1.0.0-beta.8 → 1.0.1-beta.100

package/dist/cjs/helpers/expandStyle.js

@@ -0,0 +1,111 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var expandStyle_exports = {};
+__export(expandStyle_exports, {
+  expandStyle: () => expandStyle
+});
+module.exports = __toCommonJS(expandStyle_exports);
+var import_platform = require("../constants/platform");
+function expandStyle(key, value) {
+  if (process.env.TAMAGUI_TARGET === "web") {
+    if (key === "flex") {
+      if (value <= -1) {
+        return [
+          ["flexGrow", 0],
+          ["flexShrink", 1],
+          ["flexBasis", "auto"]
+        ];
+      }
+      if (value >= 0) {
+        return [
+          ["flexGrow", value],
+          ["flexShrink", 1]
+        ];
+      }
+      return;
+    }
+    switch (key) {
+      case "aspectRatio": {
+        return [[key, value.toString()]];
+      }
+      case "backgroundClip": {
+        if (value === "text") {
+          return [
+            ["backgroundClip", value],
+            ["WebkitBackgroundClip", value]
+          ];
+        }
+        break;
+      }
+      case "textAlignVertical": {
+        return [["verticalAlign", value === "center" ? "middle" : value]];
+      }
+      case "textDecorationLine": {
+        return [["textDecorationLine", value]];
+      }
+      case "writingDirection": {
+        return [["direction", value]];
+      }
+    }
+  }
+  const longKey = STYLE_SHORT_FORM_EXPANSIONS[key];
+  if (longKey) {
+    return longKey.map((key2) => {
+      return [key2, value];
+    });
+  }
+}
+const STYLE_SHORT_FORM_EXPANSIONS = __spreadValues({
+  borderColor: ["borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor"],
+  borderRadius: [
+    "borderTopLeftRadius",
+    "borderTopRightRadius",
+    "borderBottomRightRadius",
+    "borderBottomLeftRadius"
+  ],
+  borderStyle: ["borderTopStyle", "borderRightStyle", "borderBottomStyle", "borderLeftStyle"],
+  borderWidth: ["borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth"],
+  margin: ["marginTop", "marginRight", "marginBottom", "marginLeft"],
+  marginHorizontal: ["marginRight", "marginLeft"],
+  marginVertical: ["marginTop", "marginBottom"],
+  overscrollBehavior: ["overscrollBehaviorX", "overscrollBehaviorY"],
+  padding: ["paddingTop", "paddingRight", "paddingBottom", "paddingLeft"],
+  paddingHorizontal: ["paddingRight", "paddingLeft"],
+  paddingVertical: ["paddingTop", "paddingBottom"]
+}, import_platform.isWeb && {
+  overflow: ["overflowX", "overflowY"]
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  expandStyle
+});
+//# sourceMappingURL=expandStyle.js.map

package/dist/cjs/helpers/expandStyle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/expandStyle.ts"],
+  "sourcesContent": ["/**\n * Some parts adapted from react-native-web\n * Copyright (c) Nicolas Gallagher licensed under the MIT license.\n */\n\nimport { isWeb } from '../constants/platform'\n\nexport function expandStyle(key: string, value: any) {\n  if (process.env.TAMAGUI_TARGET === 'web') {\n    if (key === 'flex') {\n      // The 'flex' property value in React Native must be a positive integer,\n      // 0, or -1.\n      if (value <= -1) {\n        return [\n          ['flexGrow', 0],\n          ['flexShrink', 1],\n          ['flexBasis', 'auto'],\n        ]\n      }\n      // normalizing to better align with native\n      // see spec for flex shorthand https://developer.mozilla.org/en-US/docs/Web/CSS/flex\n      if (value >= 0) {\n        return [\n          ['flexGrow', value],\n          ['flexShrink', 1],\n        ]\n      }\n      return\n    }\n\n    // web only\n    switch (key) {\n      case 'aspectRatio': {\n        return [[key, value.toString()]]\n      }\n\n      // TODO: remove once this issue is fixed\n      // https://github.com/rofrischmann/inline-style-prefixer/issues/159\n      case 'backgroundClip': {\n        if (value === 'text') {\n          return [\n            ['backgroundClip', value],\n            ['WebkitBackgroundClip', value],\n          ]\n        }\n        break\n      }\n\n      case 'textAlignVertical': {\n        return [['verticalAlign', value === 'center' ? 'middle' : value]]\n      }\n\n      case 'textDecorationLine': {\n        return [['textDecorationLine', value]]\n      }\n\n      case 'writingDirection': {\n        return [['direction', value]]\n      }\n    }\n  }\n\n  const longKey = STYLE_SHORT_FORM_EXPANSIONS[key]\n  if (longKey) {\n    return longKey.map((key) => {\n      return [key, value]\n    })\n  }\n}\n\nconst STYLE_SHORT_FORM_EXPANSIONS: Record<string, string[]> = {\n  borderColor: ['borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor'],\n  borderRadius: [\n    'borderTopLeftRadius',\n    'borderTopRightRadius',\n    'borderBottomRightRadius',\n    'borderBottomLeftRadius',\n  ],\n  borderStyle: ['borderTopStyle', 'borderRightStyle', 'borderBottomStyle', 'borderLeftStyle'],\n  borderWidth: ['borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth'],\n  margin: ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'],\n  marginHorizontal: ['marginRight', 'marginLeft'],\n  marginVertical: ['marginTop', 'marginBottom'],\n  overscrollBehavior: ['overscrollBehaviorX', 'overscrollBehaviorY'],\n  padding: ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'],\n  paddingHorizontal: ['paddingRight', 'paddingLeft'],\n  paddingVertical: ['paddingTop', 'paddingBottom'],\n  ...(isWeb && {\n    // react-native doesn't support X / Y\n    overflow: ['overflowX', 'overflowY'],\n  }),\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAKA,sBAAsB;AAEf,qBAAqB,KAAa,OAAY;AACnD,MAAI,QAAQ,IAAI,mBAAmB,OAAO;AACxC,QAAI,QAAQ,QAAQ;AAGlB,UAAI,SAAS,IAAI;AACf,eAAO;AAAA,UACL,CAAC,YAAY,CAAC;AAAA,UACd,CAAC,cAAc,CAAC;AAAA,UAChB,CAAC,aAAa,MAAM;AAAA,QACtB;AAAA,MACF;AAGA,UAAI,SAAS,GAAG;AACd,eAAO;AAAA,UACL,CAAC,YAAY,KAAK;AAAA,UAClB,CAAC,cAAc,CAAC;AAAA,QAClB;AAAA,MACF;AACA;AAAA,IACF;AAGA,YAAQ;AAAA,WACD,eAAe;AAClB,eAAO,CAAC,CAAC,KAAK,MAAM,SAAS,CAAC,CAAC;AAAA,MACjC;AAAA,WAIK,kBAAkB;AACrB,YAAI,UAAU,QAAQ;AACpB,iBAAO;AAAA,YACL,CAAC,kBAAkB,KAAK;AAAA,YACxB,CAAC,wBAAwB,KAAK;AAAA,UAChC;AAAA,QACF;AACA;AAAA,MACF;AAAA,WAEK,qBAAqB;AACxB,eAAO,CAAC,CAAC,iBAAiB,UAAU,WAAW,WAAW,KAAK,CAAC;AAAA,MAClE;AAAA,WAEK,sBAAsB;AACzB,eAAO,CAAC,CAAC,sBAAsB,KAAK,CAAC;AAAA,MACvC;AAAA,WAEK,oBAAoB;AACvB,eAAO,CAAC,CAAC,aAAa,KAAK,CAAC;AAAA,MAC9B;AAAA;AAAA,EAEJ;AAEA,QAAM,UAAU,4BAA4B;AAC5C,MAAI,SAAS;AACX,WAAO,QAAQ,IAAI,CAAC,SAAQ;AAC1B,aAAO,CAAC,MAAK,KAAK;AAAA,IACpB,CAAC;AAAA,EACH;AACF;AAEA,MAAM,8BAAwD;AAAA,EAC5D,aAAa,CAAC,kBAAkB,oBAAoB,qBAAqB,iBAAiB;AAAA,EAC1F,cAAc;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,aAAa,CAAC,kBAAkB,oBAAoB,qBAAqB,iBAAiB;AAAA,EAC1F,aAAa,CAAC,kBAAkB,oBAAoB,qBAAqB,iBAAiB;AAAA,EAC1F,QAAQ,CAAC,aAAa,eAAe,gBAAgB,YAAY;AAAA,EACjE,kBAAkB,CAAC,eAAe,YAAY;AAAA,EAC9C,gBAAgB,CAAC,aAAa,cAAc;AAAA,EAC5C,oBAAoB,CAAC,uBAAuB,qBAAqB;AAAA,EACjE,SAAS,CAAC,cAAc,gBAAgB,iBAAiB,aAAa;AAAA,EACtE,mBAAmB,CAAC,gBAAgB,aAAa;AAAA,EACjD,iBAAiB,CAAC,cAAc,eAAe;AAAA,GAC3C,yBAAS;AAAA,EAEX,UAAU,CAAC,aAAa,WAAW;AACrC;",
+  "names": []
+}

package/dist/cjs/helpers/expandStyles.js

@@ -0,0 +1,126 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var expandStyles_exports = {};
+__export(expandStyles_exports, {
+  defaultOffset: () => defaultOffset,
+  expandStyles: () => expandStyles,
+  fixStyles: () => fixStyles
+});
+module.exports = __toCommonJS(expandStyles_exports);
+var import_conf = require("../conf");
+var import_platform = require("../constants/platform");
+var import_expandStyle = require("./expandStyle");
+var import_normalizeColor = require("./normalizeColor");
+var import_normalizeValueWithProperty = require("./normalizeValueWithProperty");
+var import_pseudoDescriptors = require("./pseudoDescriptors");
+let shorthands = null;
+const defaultOffset = { height: 0, width: 0 };
+function expandStyles(style) {
+  const res = {};
+  for (let key in style) {
+    shorthands = shorthands || (0, import_conf.getConfig)().shorthands;
+    if (shorthands) {
+      key = shorthands[key] || key;
+    }
+    if (key in import_pseudoDescriptors.pseudoDescriptors) {
+      res[key] = expandStyles(style[key]);
+      continue;
+    }
+    const val = (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(style[key], key);
+    const out = (0, import_expandStyle.expandStyle)(key, val);
+    if (out) {
+      Object.assign(res, Object.fromEntries(out));
+    } else {
+      res[key] = val;
+    }
+  }
+  fixStyles(res);
+  return res;
+}
+function fixStyles(style) {
+  if (style.shadowRadius) {
+    Object.assign(style, normalizeShadow(style));
+  }
+  for (const key in borderDefaults) {
+    if (style[key] && !style[borderDefaults[key]]) {
+      style[borderDefaults[key]] = "solid";
+    }
+  }
+}
+const borderDefaults = {
+  borderWidth: "borderStyle",
+  borderBottomWidth: "borderBottomStyle",
+  borderTopWidth: "borderTopStyle",
+  borderLeftWidth: "borderLeftStyle",
+  borderRightWidth: "borderRightStyle"
+};
+function normalizeShadow({
+  shadowColor,
+  shadowOffset,
+  shadowOpacity,
+  shadowRadius
+}) {
+  const { height, width } = shadowOffset || defaultOffset;
+  const colorStr = String(shadowColor || "black");
+  return __spreadValues(__spreadValues({
+    shadowOffset: {
+      width: (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(width || 0),
+      height: (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(height || 0)
+    },
+    shadowRadius: (0, import_normalizeValueWithProperty.normalizeValueWithProperty)(shadowRadius || 0)
+  }, import_platform.isWeb && {
+    shadowColor: (0, import_normalizeColor.normalizeColor)(colorStr, shadowOpacity)
+  }), !import_platform.isWeb && (() => {
+    const rgba = (0, import_normalizeColor.colorToRGBA)(colorStr);
+    if (!rgba) {
+      if (process.env.NODE_ENV === "development") {
+        console.warn("No rgba form", colorStr);
+      }
+      return {
+        shadowColor,
+        shadowOpacity
+      };
+    }
+    const [r, g, b, a] = rgba;
+    return {
+      shadowColor: `rgb(${r},${g},${b})`,
+      shadowOpacity: shadowOpacity ?? a
+    };
+  })());
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  defaultOffset,
+  expandStyles,
+  fixStyles
+});
+//# sourceMappingURL=expandStyles.js.map

package/dist/cjs/helpers/expandStyles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/expandStyles.ts"],
+  "sourcesContent": ["import { getConfig } from '../conf'\nimport { isWeb } from '../constants/platform'\nimport { expandStyle } from './expandStyle'\nimport { colorToRGBA, normalizeColor } from './normalizeColor'\nimport { normalizeValueWithProperty } from './normalizeValueWithProperty'\nimport { pseudoDescriptors } from './pseudoDescriptors'\n\nlet shorthands: Record<string, string> | null = null\nexport const defaultOffset = { height: 0, width: 0 }\n\n/**\n * This is what you want to run before Object.assign() a style onto another.\n * It does the following:\n *   1. Turns user shorthands into longhands, ie px = paddingHorizontal\n *   2. Normalizes various inconsistent styles to be more consistent\n *   3. Expands react-native shorthands, ie paddingHorizontal => paddingLeft, paddingRight\n */\n\nexport function expandStyles(style: Record<string, any>) {\n  const res: Record<string, any> = {}\n\n  for (let key in style) {\n    shorthands = shorthands || getConfig().shorthands\n    if (shorthands) {\n      key = shorthands[key] || key\n    }\n    if (key in pseudoDescriptors) {\n      res[key] = expandStyles(style[key])\n      continue\n    }\n    const val = normalizeValueWithProperty(style[key], key)\n    // expand react-native shorthands\n    const out = expandStyle(key, val)\n    if (out) {\n      Object.assign(res, Object.fromEntries(out))\n    } else {\n      res[key] = val\n    }\n  }\n\n  fixStyles(res)\n\n  return res\n}\n\nexport function fixStyles(style: Record<string, any>) {\n  if (style.shadowRadius) {\n    Object.assign(style, normalizeShadow(style))\n  }\n\n  // ensure border style set by default to solid\n  for (const key in borderDefaults) {\n    if (style[key] && !style[borderDefaults[key]]) {\n      style[borderDefaults[key]] = 'solid'\n    }\n  }\n}\n\nconst borderDefaults = {\n  borderWidth: 'borderStyle',\n  borderBottomWidth: 'borderBottomStyle',\n  borderTopWidth: 'borderTopStyle',\n  borderLeftWidth: 'borderLeftStyle',\n  borderRightWidth: 'borderRightStyle',\n}\n\nfunction normalizeShadow({\n  shadowColor,\n  shadowOffset,\n  shadowOpacity,\n  shadowRadius,\n}: Record<string, any>) {\n  const { height, width } = shadowOffset || defaultOffset\n  const colorStr = String(shadowColor || 'black')\n  return {\n    shadowOffset: {\n      width: normalizeValueWithProperty(width || 0),\n      height: normalizeValueWithProperty(height || 0),\n    },\n    shadowRadius: normalizeValueWithProperty(shadowRadius || 0),\n    ...(isWeb && {\n      shadowColor: normalizeColor(colorStr, shadowOpacity),\n    }),\n    ...(!isWeb &&\n      (() => {\n        // on native fix bug - shadows behave better if turned into non-alpha rgb() + shadowOpacity\n        const rgba = colorToRGBA(colorStr)\n        if (!rgba) {\n          if (process.env.NODE_ENV === 'development') {\n            console.warn('No rgba form', colorStr)\n          }\n          return {\n            shadowColor,\n            shadowOpacity,\n          }\n        }\n        const [r, g, b, a] = rgba\n        return {\n          shadowColor: `rgb(${r},${g},${b})`,\n          shadowOpacity: shadowOpacity ?? a,\n        }\n      })()),\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA0B;AAC1B,sBAAsB;AACtB,yBAA4B;AAC5B,4BAA4C;AAC5C,wCAA2C;AAC3C,+BAAkC;AAElC,IAAI,aAA4C;AACzC,MAAM,gBAAgB,EAAE,QAAQ,GAAG,OAAO,EAAE;AAU5C,sBAAsB,OAA4B;AACvD,QAAM,MAA2B,CAAC;AAElC,WAAS,OAAO,OAAO;AACrB,iBAAa,cAAc,2BAAU,EAAE;AACvC,QAAI,YAAY;AACd,YAAM,WAAW,QAAQ;AAAA,IAC3B;AACA,QAAI,OAAO,4CAAmB;AAC5B,UAAI,OAAO,aAAa,MAAM,IAAI;AAClC;AAAA,IACF;AACA,UAAM,MAAM,kEAA2B,MAAM,MAAM,GAAG;AAEtD,UAAM,MAAM,oCAAY,KAAK,GAAG;AAChC,QAAI,KAAK;AACP,aAAO,OAAO,KAAK,OAAO,YAAY,GAAG,CAAC;AAAA,IAC5C,OAAO;AACL,UAAI,OAAO;AAAA,IACb;AAAA,EACF;AAEA,YAAU,GAAG;AAEb,SAAO;AACT;AAEO,mBAAmB,OAA4B;AACpD,MAAI,MAAM,cAAc;AACtB,WAAO,OAAO,OAAO,gBAAgB,KAAK,CAAC;AAAA,EAC7C;AAGA,aAAW,OAAO,gBAAgB;AAChC,QAAI,MAAM,QAAQ,CAAC,MAAM,eAAe,OAAO;AAC7C,YAAM,eAAe,QAAQ;AAAA,IAC/B;AAAA,EACF;AACF;AAEA,MAAM,iBAAiB;AAAA,EACrB,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,kBAAkB;AACpB;AAEA,yBAAyB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,GACsB;AACtB,QAAM,EAAE,QAAQ,UAAU,gBAAgB;AAC1C,QAAM,WAAW,OAAO,eAAe,OAAO;AAC9C,SAAO;AAAA,IACL,cAAc;AAAA,MACZ,OAAO,kEAA2B,SAAS,CAAC;AAAA,MAC5C,QAAQ,kEAA2B,UAAU,CAAC;AAAA,IAChD;AAAA,IACA,cAAc,kEAA2B,gBAAgB,CAAC;AAAA,KACtD,yBAAS;AAAA,IACX,aAAa,0CAAe,UAAU,aAAa;AAAA,EACrD,IACI,CAAC,yBACF,OAAM;AAEL,UAAM,OAAO,uCAAY,QAAQ;AACjC,QAAI,CAAC,MAAM;AACT,UAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,gBAAQ,KAAK,gBAAgB,QAAQ;AAAA,MACvC;AACA,aAAO;AAAA,QACL;AAAA,QACA;AAAA,MACF;AAAA,IACF;AACA,UAAM,CAAC,GAAG,GAAG,GAAG,KAAK;AACrB,WAAO;AAAA,MACL,aAAa,OAAO,KAAK,KAAK;AAAA,MAC9B,eAAe,iBAAiB;AAAA,IAClC;AAAA,EACF,GAAG;AAET;",
+  "names": []
+}

package/dist/cjs/helpers/extendStaticConfig.js

@@ -19,7 +19,6 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -41,11 +40,13 @@ __export(extendStaticConfig_exports, {
 module.exports = __toCommonJS(extendStaticConfig_exports);
 var import_helpers = require("@tamagui/helpers");
 var import_createPropMapper = require("./createPropMapper");
+var import_mergeProps = require("./mergeProps");
 function extendStaticConfig(config, parent) {
   if (!parent || !("staticConfig" in parent)) {
     return parseStaticConfig(config);
   }
-  const variants = __spreadValues({}, parent.staticConfig.variants);
+  const parentStaticConf = parent.staticConfig;
+  const variants = __spreadValues({}, parentStaticConf.variants);
   if (config.variants) {
     for (const key in config.variants) {
       if (variants[key]) {
@@ -55,25 +56,32 @@ function extendStaticConfig(config, parent) {
       }
     }
   }
-  return parseStaticConfig(__spreadProps(__spreadValues(__spreadValues({}, parent.staticConfig), config), {
+  const parentNames = [...parentStaticConf.parentNames || []];
+  if (parentStaticConf.componentName) {
+    parentNames.push(parentStaticConf.componentName);
+  }
+  return parseStaticConfig(__spreadProps(__spreadValues(__spreadValues({}, parentStaticConf), config), {
     variants,
-    isZStack: config.isZStack || parent.staticConfig.isZStack,
-    isText: config.isText || parent.staticConfig.isText || false,
-    isInput: config.isInput || parent.staticConfig.isInput || false,
-    neverFlatten: config.neverFlatten || parent.staticConfig.neverFlatten,
-    ensureOverriddenProp: config.ensureOverriddenProp ?? parent.staticConfig.ensureOverriddenProp,
-    validStyles: config.validStyles ? __spreadValues(__spreadValues({}, parent.staticConfig.validStyles), config.validStyles) : parent.staticConfig.validStyles || import_helpers.stylePropsView,
-    defaultVariants: __spreadValues(__spreadValues({}, parent.staticConfig.defaultVariants), config.defaultVariants),
-    defaultProps: __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, parent.staticConfig.defaultProps), parent.staticConfig.defaultVariants), config.defaultProps), config.defaultVariants)
+    parentNames,
+    isZStack: config.isZStack || parentStaticConf.isZStack,
+    isText: config.isText || parentStaticConf.isText || false,
+    isInput: config.isInput || parentStaticConf.isInput || false,
+    neverFlatten: config.neverFlatten || parentStaticConf.neverFlatten,
+    ensureOverriddenProp: config.ensureOverriddenProp ?? parentStaticConf.ensureOverriddenProp,
+    validStyles: config.validStyles ? __spreadValues(__spreadValues({}, parentStaticConf.validStyles), config.validStyles) : parentStaticConf.validStyles || import_helpers.stylePropsView,
+    defaultProps: (0, import_mergeProps.mergeProps)(__spreadValues(__spreadValues({}, parentStaticConf.defaultProps), parentStaticConf.defaultVariants), __spreadValues(__spreadValues({}, config.defaultProps), config.defaultVariants))[0]
   }));
 }
-__name(extendStaticConfig, "extendStaticConfig");
-const parseStaticConfig = /* @__PURE__ */ __name((config) => {
-  return __spreadProps(__spreadValues({}, config), {
-    parsed: true,
-    propMapper: (0, import_createPropMapper.createPropMapper)(config)
+const parseStaticConfig = (config) => {
+  const parsed = __spreadProps(__spreadValues({
+    defaultProps: {}
+  }, config), {
+    parsed: true
+  });
+  return __spreadProps(__spreadValues({}, parsed), {
+    propMapper: (0, import_createPropMapper.createPropMapper)(parsed)
   });
-}, "parseStaticConfig");
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   extendStaticConfig,

package/dist/cjs/helpers/extendStaticConfig.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/extendStaticConfig.ts"],
-  "sourcesContent": ["import { stylePropsView } from '@tamagui/helpers'\n\nimport { StaticConfig, StaticConfigParsed, StylableComponent } from '../types'\nimport { createPropMapper } from './createPropMapper'\n\nexport function extendStaticConfig(config: Partial<StaticConfig>, parent?: StylableComponent) {\n  if (!parent || !('staticConfig' in parent)) {\n    return parseStaticConfig(config)\n  }\n\n  const variants = {\n    ...parent.staticConfig.variants,\n  }\n\n  // merge variants... can we type this?\n  if (config.variants) {\n    for (const key in config.variants) {\n      if (variants[key]) {\n        variants[key] = {\n          ...variants[key],\n          ...config.variants[key],\n        }\n      } else {\n        variants[key] = config.variants[key]\n      }\n    }\n  }\n\n  return parseStaticConfig({\n    ...parent.staticConfig,\n    ...config,\n    variants,\n    isZStack: config.isZStack || parent.staticConfig.isZStack,\n    isText: config.isText || parent.staticConfig.isText || false,\n    isInput: config.isInput || parent.staticConfig.isInput || false,\n    neverFlatten: config.neverFlatten || parent.staticConfig.neverFlatten,\n    ensureOverriddenProp: config.ensureOverriddenProp ?? parent.staticConfig.ensureOverriddenProp,\n    validStyles: config.validStyles\n      ? {\n          ...parent.staticConfig.validStyles,\n          ...config.validStyles,\n        }\n      : parent.staticConfig.validStyles || stylePropsView,\n    defaultVariants: {\n      ...parent.staticConfig.defaultVariants,\n      ...config.defaultVariants,\n    },\n    defaultProps: {\n      ...parent.staticConfig.defaultProps,\n      ...parent.staticConfig.defaultVariants,\n      ...config.defaultProps,\n      ...config.defaultVariants,\n    },\n  })\n}\n\nexport const parseStaticConfig = (config: Partial<StaticConfig>): StaticConfigParsed => {\n  return {\n    ...config,\n    parsed: true,\n    propMapper: createPropMapper(config),\n  }\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA+B;AAG/B,8BAAiC;AAE1B,4BAA4B,QAA+B,QAA4B;AAC5F,MAAI,CAAC,UAAU,CAAE,mBAAkB,SAAS;AAC1C,WAAO,kBAAkB,MAAM;AAAA,EACjC;AAEA,QAAM,WAAW,mBACZ,OAAO,aAAa;AAIzB,MAAI,OAAO,UAAU;AACnB,eAAW,OAAO,OAAO,UAAU;AACjC,UAAI,SAAS,MAAM;AACjB,iBAAS,OAAO,kCACX,SAAS,OACT,OAAO,SAAS;AAAA,MAEvB,OAAO;AACL,iBAAS,OAAO,OAAO,SAAS;AAAA,MAClC;AAAA,IACF;AAAA,EACF;AAEA,SAAO,kBAAkB,gDACpB,OAAO,eACP,SAFoB;AAAA,IAGvB;AAAA,IACA,UAAU,OAAO,YAAY,OAAO,aAAa;AAAA,IACjD,QAAQ,OAAO,UAAU,OAAO,aAAa,UAAU;AAAA,IACvD,SAAS,OAAO,WAAW,OAAO,aAAa,WAAW;AAAA,IAC1D,cAAc,OAAO,gBAAgB,OAAO,aAAa;AAAA,IACzD,sBAAsB,OAAO,wBAAwB,OAAO,aAAa;AAAA,IACzE,aAAa,OAAO,cAChB,kCACK,OAAO,aAAa,cACpB,OAAO,eAEZ,OAAO,aAAa,eAAe;AAAA,IACvC,iBAAiB,kCACZ,OAAO,aAAa,kBACpB,OAAO;AAAA,IAEZ,cAAc,gEACT,OAAO,aAAa,eACpB,OAAO,aAAa,kBACpB,OAAO,eACP,OAAO;AAAA,EAEd,EAAC;AACH;AAjDgB;AAmDT,MAAM,oBAAoB,wBAAC,WAAsD;AACtF,SAAO,iCACF,SADE;AAAA,IAEL,QAAQ;AAAA,IACR,YAAY,8CAAiB,MAAM;AAAA,EACrC;AACF,GANiC;",
+  "sourcesContent": ["import { stylePropsView } from '@tamagui/helpers'\n\nimport { StaticConfig, StaticConfigParsed, StylableComponent } from '../types'\nimport { createPropMapper } from './createPropMapper'\nimport { mergeProps } from './mergeProps'\n\nexport function extendStaticConfig(config: Partial<StaticConfig>, parent?: StylableComponent) {\n  if (!parent || !('staticConfig' in parent)) {\n    return parseStaticConfig(config)\n  }\n\n  const parentStaticConf = parent.staticConfig as StaticConfig\n  const variants = {\n    ...parentStaticConf.variants,\n  }\n\n  // merge variants... can we type this?\n  if (config.variants) {\n    for (const key in config.variants) {\n      if (variants[key]) {\n        variants[key] = {\n          ...variants[key],\n          ...config.variants[key],\n        }\n      } else {\n        variants[key] = config.variants[key]\n      }\n    }\n  }\n\n  // include our own\n  const parentNames = [...(parentStaticConf.parentNames || [])]\n  if (parentStaticConf.componentName) {\n    parentNames.push(parentStaticConf.componentName)\n  }\n\n  return parseStaticConfig({\n    ...parentStaticConf,\n    ...config,\n    variants,\n    parentNames,\n    isZStack: config.isZStack || parentStaticConf.isZStack,\n    isText: config.isText || parentStaticConf.isText || false,\n    isInput: config.isInput || parentStaticConf.isInput || false,\n    neverFlatten: config.neverFlatten || parentStaticConf.neverFlatten,\n    ensureOverriddenProp: config.ensureOverriddenProp ?? parentStaticConf.ensureOverriddenProp,\n    validStyles: config.validStyles\n      ? {\n          ...parentStaticConf.validStyles,\n          ...config.validStyles,\n        }\n      : parentStaticConf.validStyles || stylePropsView,\n    defaultProps: mergeProps(\n      {\n        ...parentStaticConf.defaultProps,\n        ...parentStaticConf.defaultVariants,\n      },\n      {\n        ...config.defaultProps,\n        ...config.defaultVariants,\n      }\n    )[0],\n  })\n}\n\nexport const parseStaticConfig = (config: Partial<StaticConfig>): StaticConfigParsed => {\n  const parsed = {\n    defaultProps: {},\n    ...config,\n    parsed: true,\n  } as const\n  return {\n    ...parsed,\n    propMapper: createPropMapper(parsed as StaticConfigParsed),\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA+B;AAG/B,8BAAiC;AACjC,wBAA2B;AAEpB,4BAA4B,QAA+B,QAA4B;AAC5F,MAAI,CAAC,UAAU,CAAE,mBAAkB,SAAS;AAC1C,WAAO,kBAAkB,MAAM;AAAA,EACjC;AAEA,QAAM,mBAAmB,OAAO;AAChC,QAAM,WAAW,mBACZ,iBAAiB;AAItB,MAAI,OAAO,UAAU;AACnB,eAAW,OAAO,OAAO,UAAU;AACjC,UAAI,SAAS,MAAM;AACjB,iBAAS,OAAO,kCACX,SAAS,OACT,OAAO,SAAS;AAAA,MAEvB,OAAO;AACL,iBAAS,OAAO,OAAO,SAAS;AAAA,MAClC;AAAA,IACF;AAAA,EACF;AAGA,QAAM,cAAc,CAAC,GAAI,iBAAiB,eAAe,CAAC,CAAE;AAC5D,MAAI,iBAAiB,eAAe;AAClC,gBAAY,KAAK,iBAAiB,aAAa;AAAA,EACjD;AAEA,SAAO,kBAAkB,gDACpB,mBACA,SAFoB;AAAA,IAGvB;AAAA,IACA;AAAA,IACA,UAAU,OAAO,YAAY,iBAAiB;AAAA,IAC9C,QAAQ,OAAO,UAAU,iBAAiB,UAAU;AAAA,IACpD,SAAS,OAAO,WAAW,iBAAiB,WAAW;AAAA,IACvD,cAAc,OAAO,gBAAgB,iBAAiB;AAAA,IACtD,sBAAsB,OAAO,wBAAwB,iBAAiB;AAAA,IACtE,aAAa,OAAO,cAChB,kCACK,iBAAiB,cACjB,OAAO,eAEZ,iBAAiB,eAAe;AAAA,IACpC,cAAc,kCACZ,kCACK,iBAAiB,eACjB,iBAAiB,kBAEtB,kCACK,OAAO,eACP,OAAO,gBAEd,EAAE;AAAA,EACJ,EAAC;AACH;AAEO,MAAM,oBAAoB,CAAC,WAAsD;AACtF,QAAM,SAAS;AAAA,IACb,cAAc,CAAC;AAAA,KACZ,SAFU;AAAA,IAGb,QAAQ;AAAA,EACV;AACA,SAAO,iCACF,SADE;AAAA,IAEL,YAAY,8CAAiB,MAA4B;AAAA,EAC3D;AACF;",
   "names": []
 }

package/dist/cjs/helpers/fixNativeShadow.js

@@ -2,7 +2,6 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -21,8 +20,8 @@ __export(fixNativeShadow_exports, {
   fixNativeShadow: () => fixNativeShadow
 });
 module.exports = __toCommonJS(fixNativeShadow_exports);
-const fixNativeShadow = /* @__PURE__ */ __name((a) => {
-}, "fixNativeShadow");
+const fixNativeShadow = (a) => {
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   fixNativeShadow

package/dist/cjs/helpers/fixNativeShadow.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/helpers/fixNativeShadow.tsx"],
   "sourcesContent": ["// only native of course\nexport const fixNativeShadow = (a: any) => {}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACO,MAAM,kBAAkB,wBAAC,MAAW;AAAC,GAAb;",
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACO,MAAM,kBAAkB,CAAC,MAAW;AAAC;",
   "names": []
 }

package/dist/cjs/helpers/getExpandedShorthands.js

@@ -2,7 +2,6 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -33,7 +32,6 @@ function getExpandedShorthands(props) {
   }
   return res;
 }
-__name(getExpandedShorthands, "getExpandedShorthands");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   getExpandedShorthands

package/dist/cjs/helpers/getExpandedShorthands.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/helpers/getExpandedShorthands.ts"],
   "sourcesContent": ["import { getConfig } from '../conf'\nimport { Shorthands } from '../types'\n\nexport function getExpandedShorthands<A extends Object>(props: A): Omit<A, keyof Shorthands> {\n  const shorthands = getConfig().shorthands\n  if (!shorthands) {\n    return props\n  }\n  let res: A = {} as any\n  for (const key in props) {\n    // @ts-ignore\n    res[shorthands[key] || key] = props[key]\n  }\n  return res\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA0B;AAGnB,+BAAiD,OAAqC;AAC3F,QAAM,aAAa,2BAAU,EAAE;AAC/B,MAAI,CAAC,YAAY;AACf,WAAO;AAAA,EACT;AACA,MAAI,MAAS,CAAC;AACd,aAAW,OAAO,OAAO;AAEvB,QAAI,WAAW,QAAQ,OAAO,MAAM;AAAA,EACtC;AACA,SAAO;AACT;AAXgB;",
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA0B;AAGnB,+BAAiD,OAAqC;AAC3F,QAAM,aAAa,2BAAU,EAAE;AAC/B,MAAI,CAAC,YAAY;AACf,WAAO;AAAA,EACT;AACA,MAAI,MAAS,CAAC;AACd,aAAW,OAAO,OAAO;AAEvB,QAAI,WAAW,QAAQ,OAAO,MAAM;AAAA,EACtC;AACA,SAAO;AACT;",
   "names": []
 }

package/dist/cjs/helpers/getFont.js

@@ -0,0 +1,61 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var getFont_exports = {};
+__export(getFont_exports, {
+  getFont: () => getFont
+});
+module.exports = __toCommonJS(getFont_exports);
+var import_createVariable = require("../createVariable");
+const getFont = (val = "$4", { fonts, theme, props }) => {
+  var _a, _b, _c;
+  const family = (0, import_createVariable.getVariableValue)(props.fontFamily) || "$body";
+  const font = fonts[family] || fonts["$body"];
+  if (!font) {
+    console.warn("\u26A0\uFE0F no font found", { family, fontTokens: Object.keys(fonts), val });
+    return {};
+  }
+  const fontFamily = font.family;
+  const fontSize = props.fontSize || font.size[val];
+  const lineHeight = props.lineHeight || font.lineHeight[val];
+  const fontWeight = props.fontWeight || font.weight[val];
+  const letterSpacing = props.letterSpacing || font.letterSpacing[val];
+  const fontStyle = props.fontStyle || ((_a = font.style) == null ? void 0 : _a[val]);
+  const textTransform = props.textTransform || ((_b = font.transform) == null ? void 0 : _b[val]);
+  const color = props.color || ((_c = font.color) == null ? void 0 : _c[val]) || theme.color;
+  const style = {
+    color,
+    fontStyle,
+    textTransform,
+    fontFamily,
+    fontWeight,
+    letterSpacing,
+    fontSize,
+    lineHeight
+  };
+  if (process.env.NODE_ENV === "development") {
+    if (props["debug"]) {
+      console.log("getFont", val, style, "from props", props);
+    }
+  }
+  return style;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getFont
+});
+//# sourceMappingURL=getFont.js.map

package/dist/cjs/helpers/getFont.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/getFont.tsx"],
+  "sourcesContent": ["import { getVariableValue } from '../createVariable'\nimport { FontSizeTokens, TextProps, VariantSpreadFunction } from '../types'\n\nexport const getFont: VariantSpreadFunction<TextProps, FontSizeTokens> = (\n  val = '$4',\n  { fonts, theme, props }\n) => {\n  const family = getVariableValue(props.fontFamily) || '$body'\n  const font = fonts[family] || fonts['$body']\n  if (!font) {\n    console.warn('\u26A0\uFE0F no font found', { family, fontTokens: Object.keys(fonts), val })\n    return {} as any\n  }\n  const fontFamily = font.family\n  const fontSize = props.fontSize || font.size[val]\n  const lineHeight = props.lineHeight || font.lineHeight[val]\n  const fontWeight = props.fontWeight || font.weight[val]\n  const letterSpacing = props.letterSpacing || font.letterSpacing[val]\n  const fontStyle = props.fontStyle || font.style?.[val]\n  const textTransform = props.textTransform || font.transform?.[val]\n  const color = props.color || font.color?.[val] || theme.color\n  const style = {\n    color,\n    fontStyle,\n    textTransform,\n    fontFamily,\n    fontWeight,\n    letterSpacing,\n    fontSize,\n    lineHeight,\n  }\n  if (process.env.NODE_ENV === 'development') {\n    if (props['debug']) {\n      console.log('getFont', val, style, 'from props', props)\n    }\n  }\n  return style\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAAiC;AAG1B,MAAM,UAA4D,CACvE,MAAM,MACN,EAAE,OAAO,OAAO,YACb;AANL;AAOE,QAAM,SAAS,4CAAiB,MAAM,UAAU,KAAK;AACrD,QAAM,OAAO,MAAM,WAAW,MAAM;AACpC,MAAI,CAAC,MAAM;AACT,YAAQ,KAAK,8BAAoB,EAAE,QAAQ,YAAY,OAAO,KAAK,KAAK,GAAG,IAAI,CAAC;AAChF,WAAO,CAAC;AAAA,EACV;AACA,QAAM,aAAa,KAAK;AACxB,QAAM,WAAW,MAAM,YAAY,KAAK,KAAK;AAC7C,QAAM,aAAa,MAAM,cAAc,KAAK,WAAW;AACvD,QAAM,aAAa,MAAM,cAAc,KAAK,OAAO;AACnD,QAAM,gBAAgB,MAAM,iBAAiB,KAAK,cAAc;AAChE,QAAM,YAAY,MAAM,aAAa,YAAK,UAAL,mBAAa;AAClD,QAAM,gBAAgB,MAAM,iBAAiB,YAAK,cAAL,mBAAiB;AAC9D,QAAM,QAAQ,MAAM,SAAS,YAAK,UAAL,mBAAa,SAAQ,MAAM;AACxD,QAAM,QAAQ;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACA,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,MAAM,UAAU;AAClB,cAAQ,IAAI,WAAW,KAAK,OAAO,cAAc,KAAK;AAAA,IACxD;AAAA,EACF;AACA,SAAO;AACT;",
+  "names": []
+}

package/dist/cjs/helpers/getSize.js

@@ -2,7 +2,6 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -18,18 +17,27 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var getSize_exports = {};
 __export(getSize_exports, {
-  getSize: () => getSize
+  getSize: () => getSize,
+  stepTokenUpOrDown: () => stepTokenUpOrDown
 });
 module.exports = __toCommonJS(getSize_exports);
 var import_conf = require("../conf");
-const getSize = /* @__PURE__ */ __name((size, sizeUpOrDownBy = 0) => {
-  const sizes = (0, import_conf.getTokens)().size;
-  const sizeNames = Object.keys(sizes);
-  const key = sizeNames[Math.max(0, sizeNames.indexOf(String(size || "$4")) + sizeUpOrDownBy)];
-  return sizes[key] || sizes["$4"];
-}, "getSize");
+const getSize = (size, shift = 0, bounds = [0]) => {
+  return stepTokenUpOrDown((0, import_conf.getTokens)().size, size, shift, bounds);
+};
+const stepTokenUpOrDown = (tokens, current, shift = 0, bounds = [0]) => {
+  const sizeNames = Object.keys(tokens);
+  const currentKeyNum = (typeof current === "string" ? current.replace("$", "") : current) || "4";
+  const nextKeyName = `$${+currentKeyNum + shift}`;
+  const min = bounds[0] ?? 0;
+  const max = bounds[1] ?? sizeNames.length - 1;
+  const index = Math.min(max, Math.max(min, sizeNames.indexOf(nextKeyName)));
+  const key = sizeNames[index];
+  return tokens[key] || tokens["$4"];
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  getSize
+  getSize,
+  stepTokenUpOrDown
 });
 //# sourceMappingURL=getSize.js.map

package/dist/cjs/helpers/getSize.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/helpers/getSize.ts"],
-  "sourcesContent": ["import { getTokens } from '../conf'\nimport { SizeTokens } from '../types'\n\nexport const getSize = (size?: SizeTokens | undefined, sizeUpOrDownBy = 0) => {\n  const sizes = getTokens().size as any as SizeTokens\n  const sizeNames = Object.keys(sizes)\n  const key = sizeNames[Math.max(0, sizeNames.indexOf(String(size || '$4')) + sizeUpOrDownBy)]\n  return (sizes[key] || sizes['$4']) as SizeTokens\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA0B;AAGnB,MAAM,UAAU,wBAAC,MAA+B,iBAAiB,MAAM;AAC5E,QAAM,QAAQ,2BAAU,EAAE;AAC1B,QAAM,YAAY,OAAO,KAAK,KAAK;AACnC,QAAM,MAAM,UAAU,KAAK,IAAI,GAAG,UAAU,QAAQ,OAAO,QAAQ,IAAI,CAAC,IAAI,cAAc;AAC1F,SAAQ,MAAM,QAAQ,MAAM;AAC9B,GALuB;",
+  "sourcesContent": ["import { getTokens } from '../conf'\nimport { SizeTokens, SpaceTokens } from '../types'\n\nexport const getSize = (size?: SizeTokens | undefined, shift = 0, bounds = [0]) => {\n  return stepTokenUpOrDown(getTokens().size, size, shift, bounds)\n}\n\nexport const stepTokenUpOrDown = (\n  tokens: Object,\n  current?: SizeTokens | SpaceTokens | string,\n  shift = 0,\n  bounds = [0]\n) => {\n  const sizeNames = Object.keys(tokens)\n  const currentKeyNum = (typeof current === 'string' ? current.replace('$', '') : current) || '4'\n  const nextKeyName = `$${+currentKeyNum + shift}`\n  const min = bounds[0] ?? 0\n  const max = bounds[1] ?? sizeNames.length - 1\n  const index = Math.min(max, Math.max(min, sizeNames.indexOf(nextKeyName)))\n  const key = sizeNames[index]\n  return tokens[key] || tokens['$4']\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAA0B;AAGnB,MAAM,UAAU,CAAC,MAA+B,QAAQ,GAAG,SAAS,CAAC,CAAC,MAAM;AACjF,SAAO,kBAAkB,2BAAU,EAAE,MAAM,MAAM,OAAO,MAAM;AAChE;AAEO,MAAM,oBAAoB,CAC/B,QACA,SACA,QAAQ,GACR,SAAS,CAAC,CAAC,MACR;AACH,QAAM,YAAY,OAAO,KAAK,MAAM;AACpC,QAAM,gBAAiB,QAAO,YAAY,WAAW,QAAQ,QAAQ,KAAK,EAAE,IAAI,YAAY;AAC5F,QAAM,cAAc,IAAI,CAAC,gBAAgB;AACzC,QAAM,MAAM,OAAO,MAAM;AACzB,QAAM,MAAM,OAAO,MAAM,UAAU,SAAS;AAC5C,QAAM,QAAQ,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,UAAU,QAAQ,WAAW,CAAC,CAAC;AACzE,QAAM,MAAM,UAAU;AACtB,SAAO,OAAO,QAAQ,OAAO;AAC/B;",
   "names": []
 }