@cssxio/react-native 0.3.4 → 0.5.1

package/dist/index.cjs

@@ -25,7 +25,115 @@ __export(index_exports, {
   sx: () => sx
 });
 module.exports = __toCommonJS(index_exports);
+
+// src/create.ts
+var import_compiler2 = require("@cssxio/compiler");
+
+// src/compile-candidates.ts
 var import_compiler = require("@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",
@@ -98,89 +206,8 @@ var logicalProperties = {
   "padding-block": ["paddingTop", "paddingBottom"],
   "padding-inline": ["paddingLeft", "paddingRight"]
 };
-function create(styles, options = {}) {
-  const records = (0, import_compiler.compileStyleRecords)(styles, { theme: options.theme });
-  const theme = (0, import_compiler.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 = (0, import_compiler.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}".`);
@@ -212,104 +239,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 (0, import_compiler.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 = (0, import_compiler2.compileStyleRecords)(styles, { theme: options.theme });
+  const theme = (0, import_compiler2.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);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.d.cts

@@ -1,27 +1,31 @@
-type NativePlatform = 'android' | 'ios';
-type NativeTransform = Readonly<Record<string, number | string>>;
-type NativeStyleValue = number | string | readonly NativeTransform[];
-type NativeStyle = Readonly<Record<string, NativeStyleValue>>;
-interface NativeCompilerOptions {
-    readonly platform?: NativePlatform;
-    readonly theme?: string;
-}
-interface CompiledNativeStyle {
-    readonly $$cssx: 3;
-    readonly style: NativeStyle;
-}
-type NativeStyleInput = CompiledNativeStyle | false | null | undefined | readonly NativeStyleInput[];
-type NativeSxInput = string | NativeStyleInput;
-type NativeStyleMap<T extends Readonly<Record<string, string>>> = {
-    readonly [Key in keyof T]: CompiledNativeStyle;
-};
-/** Compiles static utility maps to React Native-compatible style records. */
+import { N as NativeCompilerOptions, a as NativeStyleMap, b as NativeStyleInput, c as NativeStyle, d as NativeSxInput } from './native-types-Cv9_KYf7.cjs';
+export { C as CompiledNativeStyle, e as NativePlatform, f as NativeStyleValue, g as NativeTransform } from './native-types-Cv9_KYf7.cjs';
+
+/**
+ * Compiles static utility maps to React Native-compatible style records.
+ *
+ * @param styles Named static utility strings.
+ * @param options Target platform and optional theme.
+ * @returns Compiled native style records.
+ */
 declare function create<T extends Readonly<Record<string, string>>>(styles: T, options?: NativeCompilerOptions): NativeStyleMap<T>;
-/** Merges compiled native styles from left to right. */
+
+/**
+ * Merges compiled React Native styles from left to right.
+ *
+ * @param inputs Compiled styles or nested conditional style lists.
+ * @returns The merged React Native style prop.
+ */
 declare function props(...inputs: readonly NativeStyleInput[]): {
     readonly style: NativeStyle;
 };
-/** Compiles inline utility strings and merges compiled native styles. */
+
+/**
+ * Compiles inline utility strings and merges compiled React Native styles.
+ *
+ * @param inputs Utility strings or compiled conditional styles.
+ * @returns A merged native style object.
+ */
 declare function sx(...inputs: readonly NativeSxInput[]): NativeStyle;
 
-export { type CompiledNativeStyle, type NativeCompilerOptions, type NativePlatform, type NativeStyle, type NativeStyleInput, type NativeStyleMap, type NativeStyleValue, type NativeSxInput, type NativeTransform, create, props, sx };
+export { NativeCompilerOptions, NativeStyle, NativeStyleInput, NativeStyleMap, NativeSxInput, create, props, sx };

package/dist/index.d.ts

@@ -1,27 +1,31 @@
-type NativePlatform = 'android' | 'ios';
-type NativeTransform = Readonly<Record<string, number | string>>;
-type NativeStyleValue = number | string | readonly NativeTransform[];
-type NativeStyle = Readonly<Record<string, NativeStyleValue>>;
-interface NativeCompilerOptions {
-    readonly platform?: NativePlatform;
-    readonly theme?: string;
-}
-interface CompiledNativeStyle {
-    readonly $$cssx: 3;
-    readonly style: NativeStyle;
-}
-type NativeStyleInput = CompiledNativeStyle | false | null | undefined | readonly NativeStyleInput[];
-type NativeSxInput = string | NativeStyleInput;
-type NativeStyleMap<T extends Readonly<Record<string, string>>> = {
-    readonly [Key in keyof T]: CompiledNativeStyle;
-};
-/** Compiles static utility maps to React Native-compatible style records. */
+import { N as NativeCompilerOptions, a as NativeStyleMap, b as NativeStyleInput, c as NativeStyle, d as NativeSxInput } from './native-types-Cv9_KYf7.js';
+export { C as CompiledNativeStyle, e as NativePlatform, f as NativeStyleValue, g as NativeTransform } from './native-types-Cv9_KYf7.js';
+
+/**
+ * Compiles static utility maps to React Native-compatible style records.
+ *
+ * @param styles Named static utility strings.
+ * @param options Target platform and optional theme.
+ * @returns Compiled native style records.
+ */
 declare function create<T extends Readonly<Record<string, string>>>(styles: T, options?: NativeCompilerOptions): NativeStyleMap<T>;
-/** Merges compiled native styles from left to right. */
+
+/**
+ * Merges compiled React Native styles from left to right.
+ *
+ * @param inputs Compiled styles or nested conditional style lists.
+ * @returns The merged React Native style prop.
+ */
 declare function props(...inputs: readonly NativeStyleInput[]): {
     readonly style: NativeStyle;
 };
-/** Compiles inline utility strings and merges compiled native styles. */
+
+/**
+ * Compiles inline utility strings and merges compiled React Native styles.
+ *
+ * @param inputs Utility strings or compiled conditional styles.
+ * @returns A merged native style object.
+ */
 declare function sx(...inputs: readonly NativeSxInput[]): NativeStyle;
 
-export { type CompiledNativeStyle, type NativeCompilerOptions, type NativePlatform, type NativeStyle, type NativeStyleInput, type NativeStyleMap, type NativeStyleValue, type NativeSxInput, type NativeTransform, create, props, sx };
+export { NativeCompilerOptions, NativeStyle, NativeStyleInput, NativeStyleMap, NativeSxInput, create, props, sx };

package/dist/index.js

@@ -2,7 +2,7 @@ import {
   create,
   props,
   sx
-} from "./chunk-7REDTOKV.js";
+} from "./chunk-5ETB3X4A.js";
 export {
   create,
   props,

package/dist/native-types-Cv9_KYf7.d.cts

@@ -0,0 +1,28 @@
+/** Platforms represented by React Native-specific utility variants. */
+type NativePlatform = 'android' | 'ios';
+/** One React Native transform record. */
+type NativeTransform = Readonly<Record<string, number | string>>;
+/** A value accepted by React Native's style object. */
+type NativeStyleValue = number | string | readonly NativeTransform[];
+/** A React Native style object emitted by CSSX. */
+type NativeStyle = Readonly<Record<string, NativeStyleValue>>;
+/** Options used when CSSX compiles utilities for React Native. */
+interface NativeCompilerOptions {
+    readonly platform?: NativePlatform;
+    readonly theme?: string;
+}
+/** A compiled React Native style value. */
+interface CompiledNativeStyle {
+    readonly $$cssx: 3;
+    readonly style: NativeStyle;
+}
+/** A value accepted by the React Native `props` helper. */
+type NativeStyleInput = CompiledNativeStyle | false | null | undefined | readonly NativeStyleInput[];
+/** A value accepted by the React Native `sx` helper. */
+type NativeSxInput = string | NativeStyleInput;
+/** A map of CSSX names to compiled React Native styles. */
+type NativeStyleMap<T extends Readonly<Record<string, string>>> = {
+    readonly [Key in keyof T]: CompiledNativeStyle;
+};
+
+export type { CompiledNativeStyle as C, NativeCompilerOptions as N, NativeStyleMap as a, NativeStyleInput as b, NativeStyle as c, NativeSxInput as d, NativePlatform as e, NativeStyleValue as f, NativeTransform as g };

package/dist/native-types-Cv9_KYf7.d.ts

@@ -0,0 +1,28 @@
+/** Platforms represented by React Native-specific utility variants. */
+type NativePlatform = 'android' | 'ios';
+/** One React Native transform record. */
+type NativeTransform = Readonly<Record<string, number | string>>;
+/** A value accepted by React Native's style object. */
+type NativeStyleValue = number | string | readonly NativeTransform[];
+/** A React Native style object emitted by CSSX. */
+type NativeStyle = Readonly<Record<string, NativeStyleValue>>;
+/** Options used when CSSX compiles utilities for React Native. */
+interface NativeCompilerOptions {
+    readonly platform?: NativePlatform;
+    readonly theme?: string;
+}
+/** A compiled React Native style value. */
+interface CompiledNativeStyle {
+    readonly $$cssx: 3;
+    readonly style: NativeStyle;
+}
+/** A value accepted by the React Native `props` helper. */
+type NativeStyleInput = CompiledNativeStyle | false | null | undefined | readonly NativeStyleInput[];
+/** A value accepted by the React Native `sx` helper. */
+type NativeSxInput = string | NativeStyleInput;
+/** A map of CSSX names to compiled React Native styles. */
+type NativeStyleMap<T extends Readonly<Record<string, string>>> = {
+    readonly [Key in keyof T]: CompiledNativeStyle;
+};
+
+export type { CompiledNativeStyle as C, NativeCompilerOptions as N, NativeStyleMap as a, NativeStyleInput as b, NativeStyle as c, NativeSxInput as d, NativePlatform as e, NativeStyleValue as f, NativeTransform as g };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cssxio/react-native",
-  "version": "0.3.4",
+  "version": "0.5.1",
   "description": "CSSX utility styling runtime and compiler transform for React Native and Expo.",
   "license": "MIT",
   "repository": {
@@ -29,7 +29,7 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@cssxio/compiler": "^0.6.0"
+    "@cssxio/compiler": "^0.9.0"
   },
   "peerDependencies": {
     "@babel/core": "^7.28.0"