@niibase/uniwind 1.0.0

package/dist/common/core/web/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _cssListener = require("./cssListener");
+Object.keys(_cssListener).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _cssListener[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _cssListener[key];
+    }
+  });
+});
+var _formatColor = require("./formatColor");
+Object.keys(_formatColor).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _formatColor[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _formatColor[key];
+    }
+  });
+});
+var _getWebStyles = require("./getWebStyles");
+Object.keys(_getWebStyles).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _getWebStyles[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _getWebStyles[key];
+    }
+  });
+});
+var _parseCSSValue = require("./parseCSSValue");
+Object.keys(_parseCSSValue).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _parseCSSValue[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _parseCSSValue[key];
+    }
+  });
+});

package/dist/common/core/web/parseCSSValue.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parseCSSValue = void 0;
+var _culori = require("culori");
+var _formatColor = require("./formatColor");
+const parseCSSValue = value => {
+  if (isNaN(Number(value)) && (0, _culori.parse)(value) !== void 0) {
+    return (0, _formatColor.formatColor)(value);
+  }
+  return value;
+};
+exports.parseCSSValue = parseCSSValue;

package/dist/common/css/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildCSS = void 0;
+var _fs = _interopRequireDefault(require("fs"));
+var _path = _interopRequireDefault(require("path"));
+var _insets = require("./insets");
+var _themes = require("./themes");
+var _variants = require("./variants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const dirname = typeof __dirname !== "undefined" ? __dirname : import.meta.dirname;
+const buildCSS = async (themes, input) => {
+  const variants = (0, _variants.generateCSSForVariants)();
+  const insets = (0, _insets.generateCSSForInsets)();
+  const themesCSS = await (0, _themes.generateCSSForThemes)(themes, input);
+  const cssFilePath = _path.default.join(dirname, "../../uniwind.css");
+  const oldCSSFile = _fs.default.existsSync(cssFilePath) ? _fs.default.readFileSync(cssFilePath, "utf-8") : "";
+  const newCssFile = [variants, insets, themesCSS].join("\n");
+  if (oldCSSFile === newCssFile) {
+    return;
+  }
+  _fs.default.writeFileSync(cssFilePath, newCssFile);
+};
+exports.buildCSS = buildCSS;

package/dist/common/css/insets.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateCSSForInsets = void 0;
+const types = ["m", "p"];
+const sides = ["", "x", "y", "t", "b", "l", "r"];
+const spacing = "--spacing(--value(integer))";
+const length = "--value([length])";
+const generateCSSForInsets = () => {
+  let css = `@utility h-screen-safe {
+    height: calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)));
+}
+`;
+  const getInsetsForSide = side => {
+    switch (side) {
+      case "t":
+        return ["top"];
+      case "b":
+        return ["bottom"];
+      case "l":
+        return ["left"];
+      case "r":
+        return ["right"];
+      case "x":
+        return ["left", "right"];
+      case "y":
+        return ["top", "bottom"];
+      default:
+        return ["top", "bottom", "left", "right"];
+    }
+  };
+  types.forEach(type => {
+    sides.forEach(side => {
+      const styleName = type === "m" ? "margin" : "padding";
+      const insets = getInsetsForSide(side);
+      const styles = insets.map(inset => `${styleName}-${inset}: env(safe-area-inset-${inset});`);
+      const safeStyles = styles.flatMap(style => {
+        const styleWithoutSemicolon = style.replace(";", "");
+        return [styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${spacing});`), styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: max(${env}, ${length});`)];
+      });
+      const safeOffsetStyles = styles.flatMap(style => {
+        const styleWithoutSemicolon = style.replace(";", "");
+        return [styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${spacing});`), styleWithoutSemicolon.replace(/: (env.*)/, (_, env) => `: calc(${env} + ${length});`)];
+      });
+      css += `
+                @utility ${type}${side}-safe {
+                    ${styles.join("\n    ")}
+                }
+                
+                @utility ${type}${side}-safe-or-* {
+                    ${safeStyles.join("\n    ")}
+                }
+                
+                @utility ${type}${side}-safe-offset-* {
+                    ${safeOffsetStyles.join("\n    ")}
+                }
+            `;
+    });
+  });
+  return css.replaceAll("        ", "").trim() + "\n";
+};
+exports.generateCSSForInsets = generateCSSForInsets;

package/dist/common/css/processFunctions.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.processFunctions = void 0;
+const ONE_PX = {
+  type: "token",
+  value: {
+    type: "dimension",
+    unit: "px",
+    value: 1
+  }
+};
+const processFunctions = exports.processFunctions = {
+  pixelRatio: fn => {
+    return {
+      type: "function",
+      value: {
+        name: "calc",
+        arguments: [fn.arguments.at(0) ?? ONE_PX, {
+          type: "token",
+          value: {
+            type: "delim",
+            value: "*"
+          }
+        }, ONE_PX]
+      }
+    };
+  },
+  fontScale: fn => {
+    return {
+      type: "function",
+      value: {
+        name: "calc",
+        arguments: [fn.arguments.at(0) ?? ONE_PX, {
+          type: "token",
+          value: {
+            type: "delim",
+            value: "*"
+          }
+        }, {
+          type: "token",
+          value: {
+            type: "dimension",
+            value: 1,
+            unit: "rem"
+          }
+        }]
+      }
+    };
+  },
+  hairlineWidth: () => ONE_PX
+};

package/dist/common/css/themes.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateCSSForThemes = void 0;
+var _node = require("@tailwindcss/node");
+var _fs = _interopRequireDefault(require("fs"));
+var _lightningcss = require("lightningcss");
+var _path = _interopRequireDefault(require("path"));
+var _logger = require("../metro/logger");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const readFileSafe = filePath => {
+  try {
+    return _fs.default.readFileSync(filePath, "utf-8");
+  } catch {
+    return null;
+  }
+};
+const isExcludedDependency = url => [url.includes("node_modules/tailwindcss"), url.includes("node_modules/@tailwindcss"), url.includes("node_modules/uniwind")].some(Boolean);
+const generateCSSForThemes = async (themes, input) => {
+  const themesVariables = Object.fromEntries(themes.map(theme => [theme, /* @__PURE__ */new Set()]));
+  const findVariantsRec = async cssPath => {
+    const css = readFileSafe(cssPath);
+    if (css === null) {
+      return;
+    }
+    const {
+      dependencies
+    } = (0, _lightningcss.transform)({
+      code: Buffer.from(css),
+      filename: "uniwind.css",
+      analyzeDependencies: true,
+      visitor: {
+        Rule: rule => {
+          if (rule.type === "unknown" && rule.value.name === "variant") {
+            const [firstPrelude] = rule.value.prelude;
+            if (firstPrelude?.type !== "token" || firstPrelude.value.type !== "ident" || !themes.includes(firstPrelude.value.value)) {
+              return;
+            }
+            const theme = firstPrelude.value.value;
+            rule.value.block?.forEach(block => {
+              if (block.type === "dashed-ident") {
+                themesVariables[theme]?.add(block.value);
+              }
+            });
+          }
+        }
+      }
+    });
+    if (!Array.isArray(dependencies)) {
+      return;
+    }
+    const importUrls = /* @__PURE__ */new Set();
+    const importsCSS = dependencies.filter(dependency => {
+      if (dependency.url.startsWith(".")) {
+        importUrls.add(_path.default.resolve(_path.default.dirname(cssPath), dependency.url));
+        return false;
+      }
+      return !isExcludedDependency(dependency.url);
+    }).map(dependency => `@import "${dependency.url}";`).join("\n");
+    await (0, _node.compile)(importsCSS, {
+      base: _path.default.resolve(_path.default.dirname(cssPath)),
+      onDependency: dependency => {
+        if (isExcludedDependency(dependency)) {
+          return;
+        }
+        importUrls.add(dependency);
+      }
+    });
+    for (const filePath of importUrls) {
+      await findVariantsRec(filePath);
+    }
+  };
+  await findVariantsRec(input);
+  let hasErrors = false;
+  const hasVariables = Object.values(themesVariables).some(variables => variables.size > 0);
+  Object.values(themesVariables).forEach(variables => {
+    Object.entries(themesVariables).forEach(([checkedTheme, checkedVariables]) => {
+      variables.forEach(variable => {
+        if (!checkedVariables.has(variable)) {
+          _logger.Logger.error(`Theme ${checkedTheme} is missing variable ${variable}`);
+          hasErrors = true;
+        }
+      });
+    });
+  });
+  if (hasErrors) {
+    _logger.Logger.error("All themes must have the same variables");
+  }
+  const variablesCSS = hasVariables ? ["", "@theme {", ...Array.from(Object.values(themesVariables).at(0) ?? []).map(variable => `    ${variable}: unset;`), "}"] : [];
+  const uniwindCSS = [...themes.map(theme => `@custom-variant ${theme} (&:where(.${theme}, .${theme} *));`), ...variablesCSS].join("\n");
+  return uniwindCSS;
+};
+exports.generateCSSForThemes = generateCSSForThemes;

package/dist/common/css/variants.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateCSSForVariants = void 0;
+const variants = ["ios", "android", "web", "native"];
+const generateCSSForVariants = () => {
+  let css = "";
+  variants.forEach(variant => {
+    css += `@custom-variant ${variant} (${variant === "web" ? "html &" : `@media ${variant}`});
+`;
+  });
+  return css;
+};
+exports.generateCSSForVariants = generateCSSForVariants;

package/dist/common/hoc/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _withUniwind = require("./withUniwind");
+Object.keys(_withUniwind).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _withUniwind[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _withUniwind[key];
+    }
+  });
+});

package/dist/common/hoc/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/common/hoc/withUniwind.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withUniwind = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _web = require("../core/web");
+var _withUniwindUtils = require("./withUniwindUtils");
+const withUniwind = (Component2, options) => options ? withManualUniwind(Component2, options) : withAutoUniwind(Component2);
+exports.withUniwind = withUniwind;
+const withAutoUniwind = Component2 => props => {
+  const {
+    classNames,
+    generatedProps
+  } = Object.entries(props).reduce((acc, [propName, propValue]) => {
+    if ((0, _withUniwindUtils.isColorClassProperty)(propName)) {
+      const colorProp = (0, _withUniwindUtils.classToColor)(propName);
+      if (props[colorProp] !== void 0) {
+        return acc;
+      }
+      const className = propValue;
+      const color = (0, _web.getWebStyles)(className).accentColor;
+      acc.generatedProps[colorProp] = color !== void 0 ? (0, _web.formatColor)(color) : void 0;
+      acc.classNames += `${className} `;
+      return acc;
+    }
+    if ((0, _withUniwindUtils.isClassProperty)(propName)) {
+      const styleProp = (0, _withUniwindUtils.classToStyle)(propName);
+      acc.generatedProps[styleProp] ??= [];
+      acc.generatedProps[styleProp][0] = {
+        $$css: true,
+        tailwind: propValue
+      };
+      return acc;
+    }
+    if ((0, _withUniwindUtils.isStyleProperty)(propName)) {
+      acc.generatedProps[propName] ??= [];
+      acc.generatedProps[propName][1] = propValue;
+      return acc;
+    }
+    return acc;
+  }, {
+    generatedProps: {},
+    classNames: ""
+  });
+  const [, rerender] = (0, _react.useReducer)(() => ({}), {});
+  (0, _react.useEffect)(() => {
+    const dispose = _web.CSSListener.subscribeToClassName(classNames, rerender);
+    return dispose;
+  }, [classNames]);
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component2, {
+    ...props,
+    ...generatedProps
+  });
+};
+const withManualUniwind = (Component2, options) => props => {
+  const {
+    generatedProps,
+    classNames
+  } = Object.entries(options).reduce((acc, [propName, option]) => {
+    const className = props[option.fromClassName];
+    if (className === void 0) {
+      return acc;
+    }
+    if (option.styleProperty !== void 0) {
+      if (props[propName] !== void 0) {
+        return acc;
+      }
+      const value = (0, _web.getWebStyles)(className)[option.styleProperty];
+      const transformedValue = value !== void 0 && option.styleProperty.toLowerCase().includes("color") ? (0, _web.formatColor)(value) : value;
+      acc.classNames += `${className} `;
+      acc.generatedProps[propName] = transformedValue;
+      return acc;
+    }
+    acc.generatedProps[propName] = [{
+      $$css: true,
+      tailwind: className
+    }, props[propName]];
+    return acc;
+  }, {
+    generatedProps: {},
+    classNames: ""
+  });
+  const [, rerender] = (0, _react.useReducer)(() => ({}), {});
+  (0, _react.useEffect)(() => {
+    const dispose = _web.CSSListener.subscribeToClassName(classNames, rerender);
+    return dispose;
+  }, [classNames]);
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component2, {
+    ...props,
+    ...generatedProps
+  });
+};

package/dist/common/hoc/withUniwind.native.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withUniwind = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _listener = require("../core/listener");
+var _native = require("../core/native");
+var _withUniwindUtils = require("./withUniwindUtils");
+const withUniwind = (Component2, options) => options ? withManualUniwind(Component2, options) : withAutoUniwind(Component2);
+exports.withUniwind = withUniwind;
+const withAutoUniwind = Component2 => props => {
+  const {
+    dependencies,
+    generatedProps
+  } = Object.entries(props).reduce((acc, [propName, propValue]) => {
+    if ((0, _withUniwindUtils.isColorClassProperty)(propName)) {
+      const colorProp = (0, _withUniwindUtils.classToColor)(propName);
+      if (props[colorProp] !== void 0) {
+        return acc;
+      }
+      const {
+        styles,
+        dependencies: dependencies2
+      } = _native.UniwindStore.getStyles(propValue);
+      acc.dependencies.push(...dependencies2);
+      acc.generatedProps[colorProp] = styles.accentColor;
+      return acc;
+    }
+    if ((0, _withUniwindUtils.isClassProperty)(propName)) {
+      const styleProp = (0, _withUniwindUtils.classToStyle)(propName);
+      const {
+        styles,
+        dependencies: dependencies2
+      } = _native.UniwindStore.getStyles(propValue);
+      acc.dependencies.push(...dependencies2);
+      acc.generatedProps[styleProp] ??= [];
+      acc.generatedProps[styleProp][0] = styles;
+      return acc;
+    }
+    if ((0, _withUniwindUtils.isStyleProperty)(propName)) {
+      acc.generatedProps[propName] ??= [];
+      acc.generatedProps[propName][1] = propValue;
+      return acc;
+    }
+    return acc;
+  }, {
+    generatedProps: {},
+    dependencies: []
+  });
+  const deps = Array.from(new Set(dependencies));
+  const [, rerender] = (0, _react.useReducer)(() => ({}), {});
+  (0, _react.useEffect)(() => {
+    const dispose = _listener.UniwindListener.subscribe(rerender, deps);
+    return dispose;
+  }, [deps]);
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component2, {
+    ...props,
+    ...generatedProps
+  });
+};
+const withManualUniwind = (Component2, options) => props => {
+  const {
+    generatedProps,
+    dependencies
+  } = Object.entries(options).reduce((acc, [propName, option]) => {
+    const className = props[option.fromClassName];
+    if (className === void 0) {
+      return acc;
+    }
+    if (option.styleProperty !== void 0) {
+      if (props[propName] !== void 0) {
+        return acc;
+      }
+      const {
+        styles: styles2,
+        dependencies: dependencies3
+      } = _native.UniwindStore.getStyles(className);
+      acc.generatedProps[propName] = styles2[option.styleProperty];
+      acc.dependencies.push(...dependencies3);
+      return acc;
+    }
+    const {
+      styles,
+      dependencies: dependencies2
+    } = _native.UniwindStore.getStyles(className);
+    acc.generatedProps[propName] = styles;
+    acc.dependencies.push(...dependencies2);
+    return acc;
+  }, {
+    generatedProps: {},
+    dependencies: []
+  });
+  const deps = Array.from(new Set(dependencies));
+  const [, rerender] = (0, _react.useReducer)(() => ({}), {});
+  (0, _react.useEffect)(() => {
+    const dispose = _listener.UniwindListener.subscribe(rerender, deps);
+    return dispose;
+  }, [deps]);
+  return /* @__PURE__ */(0, _jsxRuntime.jsx)(Component2, {
+    ...props,
+    ...generatedProps
+  });
+};

package/dist/common/hoc/withUniwindUtils.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isStyleProperty = exports.isColorClassProperty = exports.isClassProperty = exports.classToStyle = exports.classToColor = void 0;
+const classToStyle = className => className === "className" ? "style" : className.replace("ClassName", "Style");
+exports.classToStyle = classToStyle;
+const classToColor = className => className.replace("ClassName", "");
+exports.classToColor = classToColor;
+const isColorClassProperty = prop => prop.toLowerCase().includes("color") && prop.endsWith("ClassName");
+exports.isColorClassProperty = isColorClassProperty;
+const isClassProperty = prop => prop === "className" || prop.endsWith("ClassName");
+exports.isClassProperty = isClassProperty;
+const isStyleProperty = prop => prop === "style" || prop.endsWith("Style");
+exports.isStyleProperty = isStyleProperty;

package/dist/common/hooks/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useCSSVariable = require("./useCSSVariable");
+Object.keys(_useCSSVariable).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useCSSVariable[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useCSSVariable[key];
+    }
+  });
+});
+var _useResolveClassNames = require("./useResolveClassNames");
+Object.keys(_useResolveClassNames).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useResolveClassNames[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useResolveClassNames[key];
+    }
+  });
+});
+var _useUniwind = require("./useUniwind");
+Object.keys(_useUniwind).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useUniwind[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useUniwind[key];
+    }
+  });
+});
+var _useUniwindAccent = require("./useUniwindAccent");
+Object.keys(_useUniwindAccent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useUniwindAccent[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useUniwindAccent[key];
+    }
+  });
+});

package/dist/common/hooks/useCSSVariable/getVariableValue.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getVariableValue = void 0;
+var _web = require("../../core/web");
+const documentStyles = typeof document !== "undefined" ? window.getComputedStyle(document.documentElement) : null;
+const getVariableValue = name => {
+  if (!documentStyles) {
+    return void 0;
+  }
+  const value = documentStyles.getPropertyValue(name).trim();
+  if (value === "") {
+    return void 0;
+  }
+  return (0, _web.parseCSSValue)(value);
+};
+exports.getVariableValue = getVariableValue;

package/dist/common/hooks/useCSSVariable/getVariableValue.native.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getVariableValue = void 0;
+var _native = require("../../core/native");
+const getVariableValue = name => _native.UniwindStore.vars[name];
+exports.getVariableValue = getVariableValue;

package/dist/common/hooks/useCSSVariable/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useCSSVariable = require("./useCSSVariable");
+Object.keys(_useCSSVariable).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useCSSVariable[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useCSSVariable[key];
+    }
+  });
+});