@niibase/uniwind 1.0.0

package/dist/common/core/native/native-utils.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.colorMix = exports.cloneWithAccessors = void 0;
+exports.lightDark = lightDark;
+var _culori = require("culori");
+const colorMix = (color, weight, mixColor) => {
+  const parsedWeight = typeof weight === "string" ? parseFloat(weight) / 100 : weight;
+  if (mixColor === "#00000000") {
+    const parsedColor = (0, _culori.parse)(color);
+    if (parsedColor === void 0) {
+      return color;
+    }
+    return (0, _culori.formatHex8)({
+      ...parsedColor,
+      alpha: parsedWeight * (parsedColor.alpha ?? 1)
+    });
+  }
+  return (0, _culori.formatHex)((0, _culori.interpolate)([mixColor, color])(parsedWeight));
+};
+exports.colorMix = colorMix;
+function lightDark(light, dark) {
+  if (this.currentThemeName === "dark") {
+    return dark;
+  }
+  return light;
+}
+const cloneWithAccessors = obj => {
+  const proto = Object.getPrototypeOf(obj);
+  const clone = Object.create(proto);
+  Object.defineProperties(clone, Object.getOwnPropertyDescriptors(obj));
+  return clone;
+};
+exports.cloneWithAccessors = cloneWithAccessors;

package/dist/common/core/native/parsers/boxShadow.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parseBoxShadow = void 0;
+const boxShadowRegex = /(?<![#\w.-])[+-]?(?:\d*\.\d+|\d+)(?![\w-])/g;
+const undefinedRegex = /undefined/g;
+const parseBoxShadow = boxShadow => boxShadow.replace(boxShadowRegex, match => `${match}px`).replace(undefinedRegex, "");
+exports.parseBoxShadow = parseBoxShadow;

package/dist/common/core/native/parsers/fontVariant.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parseFontVariant = void 0;
+const parseFontVariant = fontVariant => fontVariant.split(" ").filter(token => token !== "undefined");
+exports.parseFontVariant = parseFontVariant;

package/dist/common/core/native/parsers/gradient.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resolveGradient = void 0;
+const gradientDirectionTokens = /* @__PURE__ */new Set(["to", "top", "right", "bottom", "left"]);
+const resolveGradient = value => {
+  const tokens = value.split(", ");
+  const directionToken = tokens.find(token => token.includes("to") || token.includes("deg"));
+  const filtered = tokens.filter(token => token !== directionToken);
+  const colorStops = filtered.map(token => {
+    const [color, position] = token.split(" ");
+    return {
+      color,
+      positions: position !== void 0 ? [position] : void 0
+    };
+  });
+  const direction = directionToken?.split(" ").reduce((acc, token) => {
+    if (gradientDirectionTokens.has(token) || token.includes("deg")) {
+      return `${acc} ${token.replace(",", "")}`;
+    }
+    return acc;
+  }, "").trim();
+  return [{
+    colorStops,
+    type: "linear-gradient",
+    direction
+  }];
+};
+exports.resolveGradient = resolveGradient;

package/dist/common/core/native/parsers/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _boxShadow = require("./boxShadow");
+Object.keys(_boxShadow).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _boxShadow[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _boxShadow[key];
+    }
+  });
+});
+var _fontVariant = require("./fontVariant");
+Object.keys(_fontVariant).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _fontVariant[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _fontVariant[key];
+    }
+  });
+});
+var _gradient = require("./gradient");
+Object.keys(_gradient).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gradient[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gradient[key];
+    }
+  });
+});
+var _textShadow = require("./textShadow");
+Object.keys(_textShadow).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _textShadow[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _textShadow[key];
+    }
+  });
+});
+var _transforms = require("./transforms");
+Object.keys(_transforms).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _transforms[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _transforms[key];
+    }
+  });
+});

package/dist/common/core/native/parsers/textShadow.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parseTextShadowMutation = void 0;
+const parseTextShadowMutation = styles => {
+  const tokens = styles.textShadow.replace(/,/g, "").split(" ");
+  if (tokens.length === 0) {
+    return;
+  }
+  const color = tokens.find(token => token.startsWith("#")) ?? "#000000";
+  const offsets = tokens.filter(token => token !== color);
+  const [offsetX, offsetY, radius] = offsets;
+  if (offsetX !== void 0 && offsetY !== void 0) {
+    Object.defineProperty(styles, "textShadowOffset", {
+      configurable: true,
+      enumerable: true,
+      value: {
+        width: Number(offsetX),
+        height: Number(offsetY)
+      }
+    });
+    delete styles.textShadow;
+  }
+  if (radius !== void 0) {
+    Object.defineProperty(styles, "textShadowRadius", {
+      configurable: true,
+      enumerable: true,
+      value: Number(radius)
+    });
+  }
+  Object.defineProperty(styles, "textShadowColor", {
+    configurable: true,
+    enumerable: true,
+    value: color
+  });
+};
+exports.parseTextShadowMutation = parseTextShadowMutation;

package/dist/common/core/native/parsers/transforms.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parseTransformsMutation = void 0;
+const transforms = ["translateX", "translateY", "translateZ", "rotate", "rotateX", "rotateY", "rotateZ", "scale", "scaleX", "scaleY", "scaleZ", "skewX", "skewY", "perspective"];
+const processTransform = (transform, value) => {
+  if (transform.startsWith("scale") && typeof value === "string") {
+    return parseFloat(value.replace("%", "")) / 100;
+  }
+  return value;
+};
+const parseTransformsMutation = styles => {
+  const transformTokens = typeof styles.transform === "string" ? styles.transform.split(" ").filter(token => token !== "undefined") : [];
+  const transformsResult = [];
+  for (const transform of transforms) {
+    if (transformTokens.length > 0) {
+      for (const token of transformTokens) {
+        if (!token.startsWith(transform)) {
+          continue;
+        }
+        const transformValue = token.slice(transform.length + 1, -1);
+        transformsResult.push({
+          [transform]: processTransform(transform, transformValue)
+        });
+      }
+    }
+    if (styles[transform] !== void 0) {
+      transformsResult.push({
+        [transform]: processTransform(transform, styles[transform])
+      });
+      delete styles[transform];
+    }
+  }
+  if (transformsResult.length > 0) {
+    Object.defineProperty(styles, "transform", {
+      configurable: true,
+      enumerable: true,
+      value: transformsResult
+    });
+  }
+};
+exports.parseTransformsMutation = parseTransformsMutation;

package/dist/common/core/native/runtime.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UniwindRuntime = void 0;
+var _reactNative = require("react-native");
+var _types = require("../../types");
+var _nativeUtils = require("./native-utils");
+const window = _reactNative.Dimensions.get("window");
+const initialColorScheme = _reactNative.Appearance.getColorScheme() ?? _types.ColorScheme.Light;
+const UniwindRuntime = exports.UniwindRuntime = {
+  screen: {
+    width: window.width,
+    height: window.height
+  },
+  colorScheme: initialColorScheme,
+  currentThemeName: initialColorScheme,
+  orientation: window.width > window.height ? _types.Orientation.Landscape : _types.Orientation.Portrait,
+  fontScale: value => value * _reactNative.PixelRatio.getFontScale(),
+  hairlineWidth: _reactNative.StyleSheet.hairlineWidth,
+  rtl: _reactNative.I18nManager.isRTL,
+  insets: {
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0
+  },
+  colorMix: _nativeUtils.colorMix,
+  pixelRatio: value => value * _reactNative.PixelRatio.get(),
+  cubicBezier: () => "",
+  lightDark: () => ""
+};
+UniwindRuntime.lightDark = _nativeUtils.lightDark.bind(UniwindRuntime);

package/dist/common/core/native/store.js

@@ -0,0 +1,181 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UniwindStore = void 0;
+var _reactNative = require("react-native");
+var _types = require("../../types");
+var _listener = require("../listener");
+var _nativeUtils = require("./native-utils");
+var _parsers = require("./parsers");
+var _runtime = require("./runtime");
+class UniwindStoreBuilder {
+  runtime = _runtime.UniwindRuntime;
+  vars = {};
+  runtimeThemeVariables = /* @__PURE__ */new Map();
+  stylesheet = {};
+  cache = /* @__PURE__ */new Map();
+  generateStyleSheetCallbackResult = null;
+  getStyles(className, state) {
+    if (className === void 0 || className === "") {
+      return {
+        styles: {},
+        dependencies: []
+      };
+    }
+    const cacheKey = `${className}${state?.isDisabled ?? false}${state?.isFocused ?? false}${state?.isPressed ?? false}`;
+    if (this.cache.has(cacheKey)) {
+      return this.cache.get(cacheKey);
+    }
+    const result = this.resolveStyles(className, state);
+    this.cache.set(cacheKey, result);
+    _listener.UniwindListener.subscribe(() => this.cache.delete(cacheKey), result.dependencies, {
+      once: true
+    });
+    return result;
+  }
+  reinit = generateStyleSheetCallback => {
+    const config = generateStyleSheetCallback?.(this.runtime) ?? this.generateStyleSheetCallbackResult;
+    if (!config) {
+      return;
+    }
+    const {
+      scopedVars,
+      stylesheet,
+      vars
+    } = config;
+    this.generateStyleSheetCallbackResult = config;
+    this.stylesheet = stylesheet;
+    this.vars = vars;
+    const themeVars = scopedVars[`__uniwind-theme-${this.runtime.currentThemeName}`];
+    const platformVars = scopedVars[`__uniwind-platform-${_reactNative.Platform.OS}`];
+    const runtimeThemeVars = this.runtimeThemeVariables.get(this.runtime.currentThemeName);
+    if (themeVars) {
+      Object.defineProperties(this.vars, Object.getOwnPropertyDescriptors(themeVars));
+    }
+    if (platformVars) {
+      Object.defineProperties(this.vars, Object.getOwnPropertyDescriptors(platformVars));
+    }
+    if (runtimeThemeVars) {
+      Object.defineProperties(this.vars, Object.getOwnPropertyDescriptors(runtimeThemeVars));
+    }
+    if (__DEV__ && generateStyleSheetCallback) {
+      _listener.UniwindListener.notifyAll();
+    }
+  };
+  resolveStyles(classNames, state) {
+    const result = {};
+    let vars = this.vars;
+    const dependencies = /* @__PURE__ */new Set();
+    const bestBreakpoints = /* @__PURE__ */new Map();
+    for (const className of classNames.split(" ")) {
+      if (!(className in this.stylesheet)) {
+        continue;
+      }
+      for (const style of this.stylesheet[className]) {
+        if (style.dependencies) {
+          style.dependencies.forEach(dep => dependencies.add(dep));
+        }
+        if (style.minWidth > this.runtime.screen.width || style.maxWidth < this.runtime.screen.width || style.theme !== null && this.runtime.currentThemeName !== style.theme || style.orientation !== null && this.runtime.orientation !== style.orientation || style.rtl !== null && this.runtime.rtl !== style.rtl || style.active !== null && state?.isPressed !== style.active || style.focus !== null && state?.isFocused !== style.focus || style.disabled !== null && state?.isDisabled !== style.disabled) {
+          continue;
+        }
+        for (const [property, valueGetter] of style.entries) {
+          const previousBest = bestBreakpoints.get(property);
+          if (previousBest && (previousBest.minWidth > style.minWidth || previousBest.complexity > style.complexity || previousBest.importantProperties.includes(property))) {
+            continue;
+          }
+          if (property[0] === "-") {
+            if (vars === this.vars) {
+              vars = (0, _nativeUtils.cloneWithAccessors)(this.vars);
+            }
+            Object.defineProperty(vars, property, {
+              configurable: true,
+              enumerable: true,
+              get: valueGetter
+            });
+          } else {
+            Object.defineProperty(result, property, {
+              configurable: true,
+              enumerable: true,
+              get: () => valueGetter.call(vars)
+            });
+          }
+          bestBreakpoints.set(property, style);
+        }
+      }
+    }
+    if (result.lineHeight !== void 0 && result.lineHeight < 6) {
+      Object.defineProperty(result, "lineHeight", {
+        value: result.fontSize * result.lineHeight,
+        configurable: true,
+        enumerable: true
+      });
+    }
+    if (result.boxShadow !== void 0) {
+      Object.defineProperty(result, "boxShadow", {
+        value: (0, _parsers.parseBoxShadow)(result.boxShadow),
+        configurable: true,
+        enumerable: true
+      });
+    }
+    if (result.visibility === "hidden") {
+      Object.defineProperty(result, "display", {
+        value: "none",
+        configurable: true,
+        enumerable: true
+      });
+    }
+    if (result.borderStyle !== void 0 && result.borderColor === void 0) {
+      Object.defineProperty(result, "borderColor", {
+        value: "#000000",
+        configurable: true,
+        enumerable: true
+      });
+    }
+    if (result.outlineStyle !== void 0 && result.outlineColor === void 0) {
+      Object.defineProperty(result, "outlineColor", {
+        value: "#000000",
+        configurable: true,
+        enumerable: true
+      });
+    }
+    if (result.fontVariant !== void 0) {
+      Object.defineProperty(result, "fontVariant", {
+        value: (0, _parsers.parseFontVariant)(result.fontVariant),
+        configurable: true,
+        enumerable: true
+      });
+    }
+    (0, _parsers.parseTransformsMutation)(result);
+    if (result.experimental_backgroundImage !== void 0) {
+      Object.defineProperty(result, "experimental_backgroundImage", {
+        value: (0, _parsers.resolveGradient)(result.experimental_backgroundImage),
+        configurable: true,
+        enumerable: true
+      });
+    }
+    if (result.textShadow !== void 0) {
+      (0, _parsers.parseTextShadowMutation)(result);
+    }
+    return {
+      styles: {
+        ...result
+      },
+      dependencies: Array.from(dependencies)
+    };
+  }
+}
+const UniwindStore = exports.UniwindStore = new UniwindStoreBuilder();
+_reactNative.Dimensions.addEventListener("change", ({
+  window
+}) => {
+  const newOrientation = window.width > window.height ? _types.Orientation.Landscape : _types.Orientation.Portrait;
+  const orientationChanged = UniwindStore.runtime.orientation !== newOrientation;
+  UniwindStore.runtime.screen = {
+    width: window.width,
+    height: window.height
+  };
+  UniwindStore.runtime.orientation = newOrientation;
+  _listener.UniwindListener.notify([...(orientationChanged ? [_types.StyleDependency.Orientation] : []), _types.StyleDependency.Dimensions]);
+});

package/dist/common/core/types.js

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

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

@@ -0,0 +1,146 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CSSListener = void 0;
+var _types = require("../../types");
+var _listener = require("../listener");
+class CSSListenerBuilder {
+  classNameMediaQueryListeners = /* @__PURE__ */new Map();
+  listeners = /* @__PURE__ */new Map();
+  registeredRules = /* @__PURE__ */new Map();
+  processedStyleSheets = /* @__PURE__ */new WeakSet();
+  pendingInitialization = void 0;
+  constructor() {
+    if (typeof document === "undefined") {
+      return;
+    }
+    const observer = new MutationObserver(mutations => {
+      for (const mutation of mutations) {
+        if (mutation.type === "childList") {
+          this.scheduleInitialization();
+        }
+      }
+    });
+    this.initialize();
+    observer.observe(document.head, {
+      childList: true,
+      subtree: false,
+      attributes: true,
+      attributeFilter: ["disabled", "media", "title", "href", "rel"]
+    });
+  }
+  subscribeToClassName(classNames, listener) {
+    const disposables = [];
+    classNames.split(" ").forEach(className => {
+      const mediaQuery = this.classNameMediaQueryListeners.get(className);
+      if (!mediaQuery) {
+        return () => {};
+      }
+      const listeners = this.listeners.get(mediaQuery);
+      listeners?.add(listener);
+      disposables.push(() => listeners?.delete(listener));
+    });
+    const disposeThemeListener = _listener.UniwindListener.subscribe(listener, [_types.StyleDependency.Theme]);
+    return () => {
+      disposables.forEach(disposable => disposable());
+      disposeThemeListener();
+    };
+  }
+  scheduleInitialization() {
+    this.cancelPendingInitialization();
+    if (typeof requestIdleCallback !== "undefined") {
+      this.pendingInitialization = requestIdleCallback(() => {
+        this.initialize();
+      }, {
+        timeout: 50
+      });
+      return;
+    }
+    this.pendingInitialization = setTimeout(() => {
+      this.initialize();
+    }, 50);
+  }
+  cancelPendingInitialization() {
+    if (this.pendingInitialization !== void 0) {
+      if (typeof cancelIdleCallback !== "undefined") {
+        cancelIdleCallback(this.pendingInitialization);
+      } else {
+        clearTimeout(this.pendingInitialization);
+      }
+      this.pendingInitialization = void 0;
+    }
+  }
+  initialize() {
+    this.pendingInitialization = void 0;
+    for (const sheet of Array.from(document.styleSheets)) {
+      if (this.processedStyleSheets.has(sheet)) {
+        continue;
+      }
+      let rules;
+      try {
+        rules = sheet.cssRules;
+      } catch {
+        continue;
+      }
+      if (!rules) {
+        continue;
+      }
+      this.processedStyleSheets.add(sheet);
+      this.addMediaQueriesDeep(rules);
+    }
+  }
+  isStyleRule(rule) {
+    return rule.constructor.name === "CSSStyleRule";
+  }
+  isMediaRule(rule) {
+    return rule.constructor.name === "CSSMediaRule";
+  }
+  collectParentMediaQueries(rule, acc = []) {
+    const {
+      parentRule
+    } = rule;
+    if (!parentRule) {
+      return [];
+    }
+    if (this.isMediaRule(parentRule)) {
+      acc.push(parentRule);
+    }
+    const result = this.collectParentMediaQueries(parentRule, acc);
+    acc.push(...result);
+    return Array.from(new Set(acc));
+  }
+  addMediaQueriesDeep(rules) {
+    for (const rule of Array.from(rules)) {
+      if (this.isStyleRule(rule)) {
+        const mediaQueries = this.collectParentMediaQueries(rule);
+        if (mediaQueries.length > 0) {
+          this.addMediaQuery(mediaQueries, rule.selectorText);
+        }
+        continue;
+      }
+      if ("cssRules" in rule && rule.cssRules instanceof CSSRuleList) {
+        this.addMediaQueriesDeep(rule.cssRules);
+        continue;
+      }
+    }
+  }
+  addMediaQuery(mediaQueries, className) {
+    const rules = mediaQueries.map(mediaQuery => mediaQuery.conditionText).sort().join(" and ");
+    const parsedClassName = className.replace(".", "").replace("\\", "");
+    const cachedMediaQueryList = this.registeredRules.get(rules);
+    if (cachedMediaQueryList) {
+      this.classNameMediaQueryListeners.set(parsedClassName, cachedMediaQueryList);
+      return;
+    }
+    const mediaQueryList = window.matchMedia(rules);
+    this.registeredRules.set(rules, mediaQueryList);
+    this.listeners.set(mediaQueryList, /* @__PURE__ */new Set());
+    this.classNameMediaQueryListeners.set(parsedClassName, mediaQueryList);
+    mediaQueryList.addEventListener("change", () => {
+      this.listeners.get(mediaQueryList).forEach(listener => listener());
+    });
+  }
+}
+const CSSListener = exports.CSSListener = new CSSListenerBuilder();

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatColor = void 0;
+var _culori = require("culori");
+const formatColor = color => {
+  const parsedColor = (0, _culori.parse)(color);
+  if (!parsedColor) {
+    return color;
+  }
+  return parsedColor.alpha !== void 0 && parsedColor.alpha !== 1 ? (0, _culori.formatHex8)(parsedColor) : (0, _culori.formatHex)(parsedColor);
+};
+exports.formatColor = formatColor;

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

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getWebStyles = void 0;
+var _parseCSSValue = require("./parseCSSValue");
+const dummy = typeof document !== "undefined" ? Object.assign(document.createElement("div"), {
+  style: "display: none"
+}) : null;
+if (dummy) {
+  document.body.appendChild(dummy);
+}
+const getComputedStyles = () => {
+  if (!dummy) {
+    return {};
+  }
+  const computedStyles = window.getComputedStyle(dummy);
+  const styles = {};
+  for (let i = 0; i < computedStyles.length; i++) {
+    const prop = computedStyles[i];
+    styles[prop] = computedStyles.getPropertyValue(prop);
+  }
+  return styles;
+};
+const initialStyles = typeof document !== "undefined" ? getComputedStyles() : {};
+const getObjectDifference = (obj1, obj2) => {
+  const diff = {};
+  const keys = Object.keys(obj2);
+  keys.forEach(key => {
+    if (obj2[key] !== obj1[key]) {
+      diff[key] = obj2[key];
+    }
+  });
+  return diff;
+};
+const getWebStyles = className => {
+  if (className === void 0) {
+    return {};
+  }
+  if (!dummy) {
+    return {};
+  }
+  dummy.className = className;
+  const computedStyles = getObjectDifference(initialStyles, getComputedStyles());
+  return Object.fromEntries(Object.entries(computedStyles).map(([key, value]) => {
+    const parsedKey = key[0] === "-" ? key : key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+    return [parsedKey, (0, _parseCSSValue.parseCSSValue)(value)];
+  }));
+};
+exports.getWebStyles = getWebStyles;