@cssxio/react-native 0.3.4 → 0.5.1

package/dist/{chunk-7REDTOKV.js → chunk-5ETB3X4A.js}

@@ -1,5 +1,111 @@
-// src/index.ts
-import { compileStyleRecords, describeUtilityRecipe, parseTheme } from "@cssxio/compiler";
+// src/create.ts
+import { compileStyleRecords, parseTheme } from "@cssxio/compiler";
+
+// src/compile-candidates.ts
+import { describeUtilityRecipe } from "@cssxio/compiler";
+
+// src/oklch-to-srgb-hex.ts
+function oklchToSrgbHex(value) {
+  const match = /^oklch\(([\d.]+)%(?:\s|_)+([\d.]+)(?:\s|_)+([\d.]+)\)$/.exec(value);
+  if (!match) {
+    return null;
+  }
+  const lightness = Number(match[1]) / 100;
+  const chroma = Number(match[2]);
+  const hue = Number(match[3]) * Math.PI / 180;
+  const a = chroma * Math.cos(hue);
+  const b = chroma * Math.sin(hue);
+  const l = (lightness + 0.3963377774 * a + 0.2158037574 * b) ** 3;
+  const m = (lightness - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s = (lightness - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  const channels = [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
+  ];
+  return `#${channels.map((channel) => {
+    const bounded = Math.max(0, Math.min(1, channel));
+    const srgb = bounded <= 31308e-7 ? 12.92 * bounded : 1.055 * bounded ** (1 / 2.4) - 0.055;
+    return Math.round(srgb * 255).toString(16).padStart(2, "0");
+  }).join("")}`;
+}
+
+// src/native-values.ts
+function nativeValue(value, candidate) {
+  const important = value.endsWith(" !important") ? value.slice(0, -11) : value;
+  const calculation = /^calc\((-?[\d.]+)rem \* (-?[\d.]+)\)$/.exec(important);
+  if (calculation) {
+    return Number(calculation[1]) * 16 * Number(calculation[2]);
+  }
+  const rem = /^(-?[\d.]+)rem$/.exec(important);
+  if (rem) {
+    return Number(rem[1]) * 16;
+  }
+  const pixels = /^(-?[\d.]+)px$/.exec(important);
+  if (pixels) {
+    return Number(pixels[1]);
+  }
+  if (/^-?[\d.]+$/.test(important)) {
+    return Number(important);
+  }
+  if (/^(?:#|rgb|rgba|hsl|hsla|hwb|transparent|black|white)/.test(important) || important.endsWith("%")) {
+    return important;
+  }
+  const oklch = oklchToSrgbHex(important);
+  if (oklch) {
+    return oklch;
+  }
+  if (important.startsWith("var(") || important.startsWith("color-mix(") || important.startsWith("oklch(")) {
+    throw new Error(`CSSX React Native requires "${candidate}" to resolve to a native color or value at build time.`);
+  }
+  return important;
+}
+
+// src/append-custom-transform.ts
+function appendCustomTransform(style, property, value, candidate) {
+  const transformProperty = {
+    "--cssx-rotate": "rotate",
+    "--cssx-scale-x": "scaleX",
+    "--cssx-scale-y": "scaleY",
+    "--cssx-translate-x": "translateX",
+    "--cssx-translate-y": "translateY"
+  };
+  const nativeProperty = transformProperty[property];
+  if (!nativeProperty) {
+    return false;
+  }
+  style.transform = [
+    ...style.transform ?? [],
+    { [nativeProperty]: nativeValue(value, candidate) }
+  ];
+  return true;
+}
+
+// src/append-transform.ts
+function appendTransform(style, property, value) {
+  if ((property === "translate" || property === "rotate" || property === "scale") && value.includes("var(")) {
+    return true;
+  }
+  let transforms;
+  if (property === "translate") {
+    const x = value.split(" ", 1).join("");
+    const [y = "0"] = value.split(" ").slice(1);
+    transforms = [{ translateX: nativeValue(x, "translate") }, { translateY: nativeValue(y, "translate") }];
+  } else if (property === "rotate") {
+    transforms = [{ rotate: value }];
+  } else if (property === "scale") {
+    const x = value.split(" ", 1).join("");
+    const [y = x] = value.split(" ").slice(1);
+    transforms = [{ scaleX: Number(x) }, { scaleY: Number(y) }];
+  }
+  if (!transforms) {
+    return false;
+  }
+  style.transform = [...style.transform ?? [], ...transforms];
+  return true;
+}
+
+// src/native-properties.ts
 var propertyNames = {
   "align-content": "alignContent",
   "align-items": "alignItems",
@@ -72,89 +178,8 @@ var logicalProperties = {
   "padding-block": ["paddingTop", "paddingBottom"],
   "padding-inline": ["paddingLeft", "paddingRight"]
 };
-function create(styles, options = {}) {
-  const records = compileStyleRecords(styles, { theme: options.theme });
-  const theme = parseTheme(options.theme);
-  return Object.fromEntries(
-    Object.entries(records.candidates).map(([name, candidates]) => [
-      name,
-      { $$cssx: 3, style: compileCandidates(candidates, theme, options.platform) }
-    ])
-  );
-}
-function props(...inputs) {
-  const styles = [];
-  visitStyles(inputs, styles);
-  return { style: mergeStyles(styles) };
-}
-function sx(...inputs) {
-  const styles = [];
-  for (const input of inputs) {
-    if (typeof input === "string") {
-      styles.push(create({ value: input }).value.style);
-    } else {
-      visitStyles([input], styles);
-    }
-  }
-  return mergeStyles(styles);
-}
-function visitStyles(inputs, output) {
-  for (const input of inputs) {
-    if (!input) {
-      continue;
-    }
-    if (isNativeStyleArray(input)) {
-      visitStyles(input, output);
-      continue;
-    }
-    if (typeof input !== "object" || input.$$cssx !== 3) {
-      throw new Error("cssx.props() received an object that was not compiled by CSSX for React Native.");
-    }
-    output.push(input.style);
-  }
-}
-function isNativeStyleArray(input) {
-  return Array.isArray(input);
-}
-function mergeStyles(styles) {
-  const output = {};
-  for (const style of styles) {
-    for (const [property, value] of Object.entries(style)) {
-      if (property === "transform" && Array.isArray(output.transform) && Array.isArray(value)) {
-        output.transform = [...output.transform, ...value];
-      } else {
-        output[property] = value;
-      }
-    }
-  }
-  return output;
-}
-function compileCandidates(candidates, theme, platform) {
-  const style = {};
-  for (const source of candidates) {
-    const candidate = platformCandidate(source, platform);
-    if (candidate === null) {
-      continue;
-    }
-    const recipe = describeUtilityRecipe(candidate, theme);
-    for (const atom of recipe.atoms) {
-      for (const declaration of atom) {
-        appendDeclaration(style, candidate, declaration);
-      }
-    }
-  }
-  return style;
-}
-function platformCandidate(source, platform) {
-  const match = /^(ios|android):(.*)$/.exec(source);
-  if (match) {
-    return match[1] === platform ? match[2] : null;
-  }
-  if (!source.startsWith("[") && source.includes(":")) {
-    throw new Error(`CSSX React Native cannot represent the variant in "${source}".`);
-  }
-  return source;
-}
+
+// src/append-declaration.ts
 function appendDeclaration(style, candidate, declaration) {
   if (declaration.selectorSuffix || declaration.atRule) {
     throw new Error(`CSSX React Native cannot represent browser-only utility "${candidate}".`);
@@ -186,104 +211,105 @@ function appendDeclaration(style, candidate, declaration) {
   if (property === "overflow" && value !== "visible" && value !== "hidden") {
     throw new Error(`CSSX React Native cannot represent overflow value "${String(value)}" from "${candidate}".`);
   }
-  if (property === "flex" && typeof value === "string") {
-    style[property] = Number.parseFloat(value);
-    return;
-  }
-  style[property] = value;
+  style[property] = property === "flex" && typeof value === "string" ? Number.parseFloat(value) : value;
 }
-function appendTransform(style, property, value) {
-  if ((property === "translate" || property === "rotate" || property === "scale") && value.includes("var(")) {
-    return true;
-  }
-  let transforms;
-  if (property === "translate") {
-    const [x = "0", y = "0"] = value.split(" ");
-    transforms = [{ translateX: nativeValue(x, "translate") }, { translateY: nativeValue(y, "translate") }];
-  } else if (property === "rotate") {
-    transforms = [{ rotate: value }];
-  } else if (property === "scale") {
-    const [x = "1", y = x] = value.split(" ");
-    transforms = [{ scaleX: Number(x) }, { scaleY: Number(y) }];
+
+// src/platform-candidate.ts
+function platformCandidate(source, platform) {
+  const match = /^(ios|android):(.*)$/.exec(source);
+  if (match) {
+    return match[1] === platform ? match[2] : null;
   }
-  if (!transforms) {
-    return false;
+  if (!source.startsWith("[") && source.includes(":")) {
+    throw new Error(`CSSX React Native cannot represent the variant in "${source}".`);
   }
-  style.transform = [...style.transform ?? [], ...transforms];
-  return true;
+  return source;
 }
-function appendCustomTransform(style, property, value, candidate) {
-  const transformProperty = {
-    "--cssx-rotate": "rotate",
-    "--cssx-scale-x": "scaleX",
-    "--cssx-scale-y": "scaleY",
-    "--cssx-translate-x": "translateX",
-    "--cssx-translate-y": "translateY"
-  };
-  const nativeProperty = transformProperty[property];
-  if (!nativeProperty) {
-    return false;
+
+// src/compile-candidates.ts
+function compileCandidates(candidates, theme, platform) {
+  const style = {};
+  for (const source of candidates) {
+    const candidate = platformCandidate(source, platform);
+    if (candidate === null) {
+      continue;
+    }
+    for (const atom of describeUtilityRecipe(candidate, theme).atoms) {
+      for (const declaration of atom) {
+        appendDeclaration(style, candidate, declaration);
+      }
+    }
   }
-  const native = nativeValue(value, candidate);
-  style.transform = [
-    ...style.transform ?? [],
-    { [nativeProperty]: native }
-  ];
-  return true;
+  return style;
 }
-function nativeValue(value, candidate) {
-  const important = value.endsWith(" !important") ? value.slice(0, -11) : value;
-  const calculation = /^calc\((-?[\d.]+)rem \* (-?[\d.]+)\)$/.exec(important);
-  if (calculation) {
-    return Number(calculation[1]) * 16 * Number(calculation[2]);
-  }
-  const rem = /^(-?[\d.]+)rem$/.exec(important);
-  if (rem) {
-    return Number(rem[1]) * 16;
-  }
-  const pixels = /^(-?[\d.]+)px$/.exec(important);
-  if (pixels) {
-    return Number(pixels[1]);
-  }
-  if (/^-?[\d.]+$/.test(important)) {
-    return Number(important);
-  }
-  if (/^(?:#|rgb|rgba|hsl|hsla|hwb|transparent|black|white)/.test(important) || important.endsWith("%")) {
-    return important;
-  }
-  const oklch = oklchToSrgbHex(important);
-  if (oklch) {
-    return oklch;
+
+// src/create.ts
+function create(styles, options = {}) {
+  const records = compileStyleRecords(styles, { theme: options.theme });
+  const theme = parseTheme(options.theme);
+  return Object.fromEntries(
+    Object.entries(records.candidates).map(([name, candidates]) => [
+      name,
+      { $$cssx: 3, style: compileCandidates(candidates, theme, options.platform) }
+    ])
+  );
+}
+
+// src/merge-styles.ts
+function mergeStyles(styles) {
+  const output = {};
+  for (const style of styles) {
+    for (const [property, value] of Object.entries(style)) {
+      if (property === "transform" && Array.isArray(output.transform) && Array.isArray(value)) {
+        output.transform = [...output.transform, ...value];
+      } else {
+        output[property] = value;
+      }
+    }
   }
-  if (important.startsWith("var(") || important.startsWith("color-mix(") || important.startsWith("oklch(")) {
-    throw new Error(`CSSX React Native requires "${candidate}" to resolve to a native color or value at build time.`);
+  return output;
+}
+
+// src/is-native-style-array.ts
+function isNativeStyleArray(input) {
+  return Array.isArray(input);
+}
+
+// src/visit-styles.ts
+function visitStyles(inputs, output) {
+  for (const input of inputs) {
+    if (!input) {
+      continue;
+    }
+    if (isNativeStyleArray(input)) {
+      visitStyles(input, output);
+      continue;
+    }
+    if (typeof input !== "object" || input.$$cssx !== 3) {
+      throw new Error("cssx.props() received an object that was not compiled by CSSX for React Native.");
+    }
+    output.push(input.style);
   }
-  return important;
 }
-function oklchToSrgbHex(value) {
-  const match = /^oklch\(([\d.]+)%(?:\s|_)+([\d.]+)(?:\s|_)+([\d.]+)\)$/.exec(value);
-  if (!match) {
-    return null;
+
+// src/props.ts
+function props(...inputs) {
+  const styles = [];
+  visitStyles(inputs, styles);
+  return { style: mergeStyles(styles) };
+}
+
+// src/sx.ts
+function sx(...inputs) {
+  const styles = [];
+  for (const input of inputs) {
+    if (typeof input === "string") {
+      styles.push(create({ value: input }).value.style);
+    } else {
+      visitStyles([input], styles);
+    }
   }
-  const lightness = Number(match[1]) / 100;
-  const chroma = Number(match[2]);
-  const hue = Number(match[3]) * Math.PI / 180;
-  const a = chroma * Math.cos(hue);
-  const b = chroma * Math.sin(hue);
-  const l = (lightness + 0.3963377774 * a + 0.2158037573 * b) ** 3;
-  const m = (lightness - 0.1055613458 * a - 0.0638541728 * b) ** 3;
-  const s = (lightness - 0.0894841775 * a - 1.291485548 * b) ** 3;
-  const channels = [
-    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
-    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
-    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s
-  ];
-  const hex = channels.map((channel) => {
-    const bounded = Math.max(0, Math.min(1, channel));
-    const srgb = bounded <= 31308e-7 ? 12.92 * bounded : 1.055 * bounded ** (1 / 2.4) - 0.055;
-    return Math.round(srgb * 255).toString(16).padStart(2, "0");
-  }).join("");
-  return `#${hex}`;
+  return mergeStyles(styles);
 }
 
 export {