@colorye/react-native-css 0.3.0

package/README.md

@@ -0,0 +1,198 @@
+# @colorye/react-native-css ⚡️
+
+> High-performance, Rust SWC–powered Tailwind CSS v4 and standard CSS compiler for React Native and Expo.
+
+[![npm version](https://img.shields.io/npm/v/@colorye/react-native-css.svg?style=flat-square)](https://www.npmjs.com/package/@colorye/react-native-css)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square)](LICENSE)
+
+---
+
+## 🌟 Why @colorye/react-native-css?
+
+Modern React Native apps need the ergonomics of Tailwind CSS v4 and standard CSS without sacrificing runtime performance. `@colorye/react-native-css` compiles utility classes directly into **hoisted `StyleSheet.create` objects (`_rnStyles`)** using a native Rust SWC transform layer.
+
+- 🦀 **Rust SWC Compiler**: Transforms JSX at native speeds, hoisting static styles to `StyleSheet.create` with **zero runtime overhead**.
+- 🗺️ **SourceMap v3 Fidelity**: Full source mapping support for accurate line-and-column stack traces in Metro / React Native debugger.
+- 🎨 **Tailwind CSS v4 Native**: Full support for CSS-first config, `@theme`, `oklch()`, `lab()`, CSS custom properties (`var()`), and nested `calc()`.
+- ⚡ **Optimized Dynamic States**: Pseudo-classes like `active:`, `pressed:`, and `disabled:` compile to optimized React Native Pressable render callbacks.
+- 🎬 **Transition & Animation**: Support for `duration-`, `ease-`, and `delay-` utility mappings.
+- 🌳 **Group States & Text Inheritance**: Native coordination for `group` / `group-active:` and CSS text style inheritance (`color`, `fontSize`, `fontWeight`, etc.).
+- 🔄 **Component Interoperability**: First-class `cssInterop` and `remapProps` for third-party libraries (`FlashList`, `TrueSheet`, etc.).
+- 🌍 **Multi-platform N-API Prebuilds**: Zero-setup binaries across macOS (Apple Silicon & Intel), Linux (GNU & musl, x64 & arm64), and Windows (x64 & arm64).
+
+---
+
+## ⚖️ SOTA Comparison
+
+| Feature / Metric | `@colorye/react-native-css` | NativeWind v4 | Unistyles 3.0 | Tamagui | Vanilla `StyleSheet` |
+| :--- | :---: | :---: | :---: | :---: | :---: |
+| **Styling Paradigm** | **Tailwind v4 / Modern CSS** | Tailwind v3/v4 | Custom StyleSheet DSL | Custom UI / Styled DSL | Plain JS Objects |
+| **Compiler Engine** | **Rust (SWC + LightningCSS)** | Babel / LightningCSS | None (Pure C++ JSI) | Babel / Node AST | None |
+| **Static Style Inlining** | **Hoisted `StyleSheet.create`** | Runtime Mapping | Runtime C++ Stylesheet | Compile-time flattening | Manual |
+| **Tailwind v4 (@theme, oklch)** | **✅ First-Class Native** | 🟡 Requires plugins | ❌ Custom tokens | ❌ Custom config | ❌ Manual |
+| **Static Class Runtime Cost** | **0 ms** | Low-to-medium | Low (C++ JSI cache) | Low-to-zero | 0 ms |
+| **Dynamic Pseudo-states** (`active:`, `disabled:`) | **Auto Pressable / JSX Transform** | Dynamic hooks / proxy | Runtime state bindings | Compiler variants | Manual state logic |
+| **CSS Text Style Inheritance** | **Automatic (`InheritContext`)** | Web-only / explicit | Manual | Theme-based | Manual |
+| **Third-Party Component Interop** | **`cssInterop` / `remapProps`** | `cssInterop` | Custom C++ wrappers | Custom styled wrappers | Manual `style` passing |
+
+---
+
+## 📦 Installation
+
+```bash
+npm install @colorye/react-native-css
+# or
+yarn add @colorye/react-native-css
+# or
+pnpm add @colorye/react-native-css
+```
+
+---
+
+## ⚙️ Setup & Configuration
+
+### 1. Metro Configuration (`metro.config.js`)
+
+Wrap your Metro config or assign the custom CSS transformer:
+
+```javascript
+const { getDefaultConfig } = require("expo/metro-config");
+
+const config = getDefaultConfig(__dirname);
+
+config.transformer = {
+  ...config.transformer,
+  babelTransformerPath: require.resolve("@colorye/react-native-css/transformer"),
+};
+
+module.exports = config;
+```
+
+### 2. Babel Configuration (`babel.config.js`)
+
+Add the Babel plugin pointing to your global stylesheet:
+
+```javascript
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ["babel-preset-expo"],
+    plugins: [
+      [
+        "@colorye/react-native-css/babel",
+        {
+          css: "./src/assets/styles/index.css",
+          paths: ["src/"],
+        },
+      ],
+    ],
+  };
+};
+```
+
+### 3. Tailwind CSS Setup (`src/assets/styles/index.css`)
+
+Import Tailwind CSS v4 in your main CSS file:
+
+```css
+@import "tailwindcss";
+
+@theme {
+  --color-primary: #0065d6;
+  --color-secondary: #0ea5e9;
+  --font-display: "Inter-Bold";
+}
+```
+
+---
+
+## 🚀 TypeScript Support
+
+Add the type definitions to your `env.d.ts` or `global.d.ts` for JSX `className` auto-completion on all React Native primitives:
+
+```typescript
+/// <reference types="@colorye/react-native-css/types" />
+```
+
+---
+
+## 💡 Usage Examples
+
+### Basic Styling & Pseudo-classes
+
+```tsx
+import { View, Text, Pressable } from "react-native";
+
+export function UserCard() {
+  return (
+    <View className="p-4 bg-white rounded-2xl shadow-sm">
+      <Text className="text-xl font-bold text-slate-900">
+        React Native CSS
+      </Text>
+      <Pressable className="mt-4 px-4 py-2 bg-primary rounded-xl active:scale-95 active:opacity-80">
+        <Text className="text-white text-center font-medium">Get Started</Text>
+      </Pressable>
+    </View>
+  );
+}
+```
+
+### Group Hover / Active States
+
+```tsx
+import { Pressable, View, Text } from "react-native";
+
+export function GroupItem() {
+  return (
+    <Pressable className="group flex-row items-center p-3 rounded-lg bg-slate-100">
+      <View className="w-3 h-3 rounded-full bg-slate-400 group-active:bg-primary" />
+      <Text className="ml-3 text-slate-700 group-active:text-primary font-medium">
+        Click to Highlight
+      </Text>
+    </Pressable>
+  );
+}
+```
+
+### Third-Party Component Interop (`cssInterop`)
+
+```tsx
+import { FlashList } from "@shopify/flash-list";
+import { cssInterop } from "@colorye/react-native-css";
+
+export const StyledFlashList = cssInterop(FlashList, {
+  className: "style",
+  contentContainerClassName: "contentContainerStyle",
+});
+
+// Usage
+<StyledFlashList
+  className="flex-1 bg-slate-50"
+  contentContainerClassName="p-4"
+  data={data}
+  renderItem={renderItem}
+/>
+```
+
+---
+
+## 🤝 Contributing
+
+Contributions, issues, and feature requests are welcome!
+
+```bash
+# Build Rust native bindings
+yarn build:native
+
+# Build JS distribution
+yarn build:js
+
+# Run full build
+yarn build
+```
+
+---
+
+## 📄 License
+
+MIT © [Rye Nguyen](https://github.com/ryenguyen7411)

package/crates/transformer/index.js

@@ -0,0 +1,105 @@
+const { existsSync, readFileSync } = require("fs");
+const { join } = require("path");
+
+const { platform, arch } = process;
+
+let nativeBinding = null;
+let loadError = null;
+
+function isMusl() {
+  if (!process.report || typeof process.report.getReport !== "function") {
+    try {
+      const lddPath = require("child_process").execSync("which ldd").toString().trim();
+      return readFileSync(lddPath, "utf8").includes("musl");
+    } catch {
+      return true;
+    }
+  } else {
+    const { glibcVersionRuntime } = process.report.getReport().header;
+    return !glibcVersionRuntime;
+  }
+}
+
+// 1. Resolve candidate binary filename for current OS & architecture
+function getCandidateFilenames() {
+  const candidates = [];
+
+  switch (platform) {
+    case "darwin":
+      if (arch === "arm64") {
+        candidates.push("transformer.darwin-arm64.node");
+      } else if (arch === "x64") {
+        candidates.push("transformer.darwin-x64.node");
+      }
+      candidates.push("transformer.darwin-universal.node");
+      break;
+
+    case "linux":
+      if (arch === "x64") {
+        if (isMusl()) {
+          candidates.push("transformer.linux-x64-musl.node");
+        } else {
+          candidates.push("transformer.linux-x64-gnu.node");
+        }
+      } else if (arch === "arm64") {
+        if (isMusl()) {
+          candidates.push("transformer.linux-arm64-musl.node");
+        } else {
+          candidates.push("transformer.linux-arm64-gnu.node");
+        }
+      }
+      break;
+
+    case "win32":
+      if (arch === "x64") {
+        candidates.push("transformer.win32-x64-msvc.node");
+      } else if (arch === "arm64") {
+        candidates.push("transformer.win32-arm64-msvc.node");
+      }
+      break;
+
+    case "android":
+      if (arch === "arm64") {
+        candidates.push("transformer.android-arm64.node");
+      } else if (arch === "arm") {
+        candidates.push("transformer.android-arm-eabi.node");
+      }
+      break;
+  }
+
+  // Generic local fallback (built by `cargo build --release`)
+  candidates.push("transformer.node");
+
+  return candidates;
+}
+
+// 2. Load the first matching candidate file from inside this package
+for (const file of getCandidateFilenames()) {
+  const fullPath = join(__dirname, file);
+  if (existsSync(fullPath)) {
+    try {
+      nativeBinding = require(`./${file}`);
+      break;
+    } catch (e) {
+      loadError = e;
+    }
+  }
+}
+
+if (!nativeBinding) {
+  // If no candidate succeeded, try direct require of fallback
+  try {
+    nativeBinding = require("./transformer.node");
+  } catch (e) {
+    const errorMsg =
+      `Failed to load native binding for @colorye/react-native-css on ${platform}-${arch}.\n` +
+      `Ensure that transformer.node or transformer.${platform}-${arch}.node exists in ${__dirname}.\n` +
+      (loadError ? `Original error: ${loadError.message}` : "");
+    throw new Error(errorMsg);
+  }
+}
+
+module.exports = {
+  transformJsx: nativeBinding.transformJsx,
+  resolveRuntimeStyles: nativeBinding.resolveRuntimeStyles,
+};

package/dist/babel.js

@@ -0,0 +1,208 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = _default;
+var _fs = _interopRequireDefault(require("fs"));
+var _path = _interopRequireDefault(require("path"));
+var _babel = require("./utils/babel.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var libRoot = _path["default"].dirname(__filename);
+
+// Cache for loaded stylesheets
+var stylesheetCache = new Map();
+
+/**
+ * Load pre-computed stylesheet JSON (generated by Metro transformer)
+ */
+function loadStylesheet(cssPath, fileDir) {
+  if (stylesheetCache.has(cssPath)) {
+    return stylesheetCache.get(cssPath);
+  }
+  try {
+    var cwd = process.cwd();
+    var cleanPath = cssPath.replace(/^@\//, "");
+
+    // 1. Try project root relative paths
+    var projectRootJson = _path["default"].resolve(cwd, cleanPath.endsWith(".json") ? cleanPath : "".concat(cleanPath, ".json"));
+    if (_fs["default"].existsSync(projectRootJson)) {
+      var content = _fs["default"].readFileSync(projectRootJson, "utf-8");
+      var stylesheet = JSON.parse(content);
+      stylesheetCache.set(cssPath, stylesheet);
+      return stylesheet;
+    }
+    var defaultIndexJson = _path["default"].resolve(cwd, "index.css.json");
+    if (_fs["default"].existsSync(defaultIndexJson)) {
+      var _content = _fs["default"].readFileSync(defaultIndexJson, "utf-8");
+      var _stylesheet = JSON.parse(_content);
+      stylesheetCache.set(cssPath, _stylesheet);
+      return _stylesheet;
+    }
+
+    // 2. Try fileDir if provided
+    if (fileDir) {
+      var localJson = _path["default"].resolve(fileDir, cssPath);
+      if (_fs["default"].existsSync(localJson)) {
+        var _content2 = _fs["default"].readFileSync(localJson, "utf-8");
+        var _stylesheet2 = JSON.parse(_content2);
+        stylesheetCache.set(cssPath, _stylesheet2);
+        return _stylesheet2;
+      }
+    }
+
+    // 3. Try resolving the module if it's a module specifier like @colorye/react-native-css/exported-stylesheet.json
+    try {
+      var resolvedModule = require.resolve(cssPath, {
+        paths: [cwd, libRoot]
+      });
+      if (_fs["default"].existsSync(resolvedModule)) {
+        var _content3 = _fs["default"].readFileSync(resolvedModule, "utf-8");
+        var _stylesheet3 = JSON.parse(_content3);
+        stylesheetCache.set(cssPath, _stylesheet3);
+        return _stylesheet3;
+      }
+    } catch (_unused) {}
+
+    // 4. Try the exported-stylesheet.json from lib directory
+    var exportedPath = _path["default"].join(libRoot, "exported-stylesheet.json");
+    if (_fs["default"].existsSync(exportedPath)) {
+      var _content4 = _fs["default"].readFileSync(exportedPath, "utf-8");
+      var _stylesheet4 = JSON.parse(_content4);
+      stylesheetCache.set(cssPath, _stylesheet4);
+      return _stylesheet4;
+    }
+
+    // 5. Try .json next to the CSS file
+    var cssJsonPath = "".concat(cssPath, ".json");
+    if (_fs["default"].existsSync(cssJsonPath)) {
+      var _content5 = _fs["default"].readFileSync(cssJsonPath, "utf-8");
+      var _stylesheet5 = JSON.parse(_content5);
+      stylesheetCache.set(cssPath, _stylesheet5);
+      return _stylesheet5;
+    }
+    return null;
+  } catch (_unused2) {
+    return null;
+  }
+}
+function _default(_ref) {
+  var t = _ref.types;
+  return {
+    name: "@colorye/react-native-css",
+    visitor: {
+      Program: {
+        enter: function enter(path, state) {
+          if (!this.opts.css) {
+            console.warn("No css file provided");
+            return;
+          }
+          var filename = state.file.opts.filename;
+          var options = {
+            paths: this.opts.paths || [],
+            excludes: this.opts.excludes || [],
+            css: this.opts.css
+          };
+
+          // Normalize filename for cross-platform regex matching
+          var normalizedFilename = filename.replace(/\\/g, "/");
+          var regex = options.paths.map(function (p) {
+            return new RegExp(p);
+          });
+          var excludesRegex = options.excludes.map(function (p) {
+            return new RegExp(p);
+          });
+          if (!regex.some(function (re) {
+            return normalizedFilename.match(re) || filename.match(re);
+          }) || excludesRegex.some(function (re) {
+            return normalizedFilename.match(re) || filename.match(re);
+          })) {
+            return;
+          }
+          state.enabled = true;
+
+          // Load pre-computed stylesheet for static inlining
+          state.stylesheetData = loadStylesheet(options.css, filename ? _path["default"].dirname(filename) : null);
+
+          // Track which runtime helpers we need
+          state.needsGetStyle = false;
+          state.needsGetInheritStyle = false;
+          state.needsMergeStyles = false;
+
+          // Prepare runtime helper declarations
+          state.stylesheetId = path.scope.generateUidIdentifier();
+          state.stylesheet = t.variableDeclaration("var", [t.variableDeclarator(state.stylesheetId, t.callExpression(t.identifier("require"), [t.stringLiteral(options.css)]))]);
+          state.getStyleId = path.scope.generateUidIdentifier();
+          state.getStyle = t.variableDeclaration("var", [t.variableDeclarator(state.getStyleId, t.memberExpression(t.memberExpression(t.callExpression(t.identifier("require"), [t.stringLiteral("@colorye/react-native-css/dist/transformer-runtime")]), t.identifier("default")), t.identifier("getStyle")))]);
+          state.getInheritStyleId = path.scope.generateUidIdentifier();
+          state.getInheritStyle = t.variableDeclaration("var", [t.variableDeclarator(state.getInheritStyleId, t.memberExpression(t.memberExpression(t.callExpression(t.identifier("require"), [t.stringLiteral("@colorye/react-native-css/dist/transformer-runtime")]), t.identifier("default")), t.identifier("getInheritStyle")))]);
+          state.mergeStylesId = path.scope.generateUidIdentifier();
+          state.mergeStyles = t.variableDeclaration("var", [t.variableDeclarator(state.mergeStylesId, t.memberExpression(t.memberExpression(t.callExpression(t.identifier("require"), [t.stringLiteral("@colorye/react-native-css/dist/transformer-runtime")]), t.identifier("default")), t.identifier("mergeStyles")))]);
+        },
+        exit: function exit(path, state) {
+          if (!state.enabled) return;
+          var helpers = [];
+
+          // Only inject helpers that are actually used
+          if (state.needsGetStyle) {
+            helpers.push(state.stylesheet);
+            helpers.push(state.getStyle);
+          }
+          if (state.needsGetInheritStyle) {
+            helpers.push(state.getInheritStyle);
+          }
+          if (state.needsMergeStyles) {
+            helpers.push(state.mergeStyles);
+          }
+          if (helpers.length === 0) return;
+          var lastImport = path.get("body").filter(function (p) {
+            return (0, _babel.isImportOrRequire)(p);
+          }).pop();
+          helpers.reverse().forEach(function (node) {
+            return lastImport ? lastImport.insertAfter(node) : path.unshiftContainer("body", node);
+          });
+        }
+      },
+      JSXElement: function JSXElement(path, state) {
+        if (!state.enabled) return;
+        if ((0, _babel.isFragmentElement)(t, path.node.openingElement.name)) return;
+
+        // Perform zero-runtime static style inlining for static classes
+        (0, _babel.inlineStaticAttributes)(path, state, t);
+        var openingElement = path.node.openingElement;
+        var isRootLevel = (0, _babel.isRootLevelJSXElement)(path);
+        var shouldCombineStyles = openingElement.attributes.some(function (attr) {
+          var _attr$name;
+          return ((_attr$name = attr.name) === null || _attr$name === void 0 ? void 0 : _attr$name.name) === "__combinedStyles";
+        });
+        if (shouldCombineStyles) {
+          var styleExpressions;
+
+          // Try static inlining first (if stylesheet loaded and class is static)
+          if (state.stylesheetData) {
+            var staticInfo = (0, _babel.tryGetStaticStyleInfo)(path, state, t);
+            if (staticInfo) {
+              // Static class! Use lightweight mergeStyles
+              styleExpressions = (0, _babel.getStaticMergeExpression)(path, state, t, staticInfo);
+              state.needsMergeStyles = true;
+            }
+          }
+          if (!styleExpressions) {
+            // Fall back to full runtime getStyle
+            state.needsGetStyle = true;
+            styleExpressions = (0, _babel.getStyleExpression)(path, state, t);
+          }
+          var style = openingElement.attributes.find(function (attr) {
+            var _attr$name2;
+            return ((_attr$name2 = attr.name) === null || _attr$name2 === void 0 ? void 0 : _attr$name2.name) === "style";
+          });
+          if (style) {
+            style.value = t.jsxExpressionContainer(styleExpressions);
+          } else {
+            openingElement.attributes.push(t.jsxAttribute(t.jsxIdentifier("style"), t.jsxExpressionContainer(styleExpressions)));
+          }
+        }
+      }
+    }
+  };
+}

package/dist/exported-stylesheet.json

@@ -0,0 +1 @@
+{":root":{"--font-sans":"-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\",\n      \"Noto Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\",\n      \"Segoe UI Symbol\", \"Noto Color Emoji\"","--font-mono":"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace","--spacing":".25rem","--font-weight-semibold":"600","--font-weight-bold":"700","--tracking-wider":".05em","--default-transition-duration":".15s","--default-transition-timing-function":"cubic-bezier(.4, 0, .2, 1)","--default-font-family":"var(--font-sans)","--default-mono-font-family":"var(--font-mono)","--color-yellow-500":"lab(77.1036% 13.6926 83.561)","--color-green-200":"lab(95.239% -10.8266 9.24107)","--color-green-500":"lab(57.4893% -40.5347 37.516)","--color-orange-500":"lab(66.2947% 49.6344 117.647)","--color-red-500":"lab(45.0394% 75.4726 71.4577)","--color-blue-200":"lab(88.4823% -12.6735 -16.6484)","--color-blue-500":"lab(43.2001% 15.8505 -66.7688)","--color-magenta-500":"lab(34.1384% 59.3948 -45.5364)","--color-black":"lab(0% 0 0)","--color-white":"lab(100% 0 0)","--color-navy-100":"lab(95.2175% -1.96895 -3.05733)","--color-navy-200":"lab(88.3954% -1.94326 -3.07581)","--color-navy-300":"lab(76.7078% -5.64724 -9.13405)","--color-navy-400":"lab(58.179% -8.91814 -15.0204)","--color-navy-500":"lab(39.6076% -11.2321 -20.6616)","--color-navy-600":"lab(20.9196% -10.7469 -25.9701)","--color-navy-700":"lab(3.17211% 1.80869 -28.6588)","--color-primary":"var(--color-blue-500)","--color-success":"var(--color-green-500)","--text-2xs":"10px","--text-2xs--line-height":"12px","--text-xs":"12px","--text-xs--line-height":"16px","--text-sm":"14px","--text-sm--line-height":"20px","--text-md":"18px","--text-md--line-height":"24px","--text-2xl":"32px","--text-2xl--line-height":"36px","--radius-lg":"16px","--radius-xl":"20px","--radius-full":"50%"},"static":{"position":"static"},"container":{"_static":{"width":"100%"},"_dynamic":{"@media (min-width: 580px)":{"_static":{"maxWidth":580},"_dynamic":{}},"@media (min-width: 768px)":{"_static":{"maxWidth":768},"_dynamic":{}},"@media (min-width: 980px)":{"_static":{"maxWidth":980},"_dynamic":{}},"@media (min-width: 1200px)":{"_static":{"maxWidth":1200},"_dynamic":{}}}},"mt-0.5":{"_static":{},"_dynamic":{"marginTop":"calc(var(--spacing) * .5)"}},"mt-1":{"_static":{},"_dynamic":{"marginTop":"var(--spacing)"}},"mt-4":{"_static":{},"_dynamic":{"marginTop":"calc(var(--spacing) * 4)"}},"mb-1":{"_static":{},"_dynamic":{"marginBottom":"var(--spacing)"}},"mb-2":{"_static":{},"_dynamic":{"marginBottom":"calc(var(--spacing) * 2)"}},"mb-3":{"_static":{},"_dynamic":{"marginBottom":"calc(var(--spacing) * 3)"}},"mb-4":{"_static":{},"_dynamic":{"marginBottom":"calc(var(--spacing) * 4)"}},"mb-5":{"_static":{},"_dynamic":{"marginBottom":"calc(var(--spacing) * 5)"}},"h-20":{"_static":{},"_dynamic":{"height":"calc(var(--spacing) * 20)"}},"w-20":{"_static":{},"_dynamic":{"width":"calc(var(--spacing) * 20)"}},"w-[48%]":{"width":"48%"},"flex-1":{"flex":1},"transform":{"_static":{},"_dynamic":{"transform":"var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, )"}},"flex-row":{"flexDirection":"row"},"flex-wrap":{"flexWrap":"wrap"},"items-center":{"alignItems":"center"},"justify-between":{"justifyContent":"space-between"},"justify-center":{"justifyContent":"center"},"gap-1":{"_static":{},"_dynamic":{"gap":"var(--spacing)"}},"gap-2":{"_static":{},"_dynamic":{"gap":"calc(var(--spacing) * 2)"}},"gap-y-2.5":{"_static":{},"_dynamic":{"rowGap":"calc(var(--spacing) * 2.5)"}},"rounded-full":{"_static":{},"_dynamic":{"borderRadius":"var(--radius-full)"}},"rounded-lg":{"_static":{},"_dynamic":{"borderRadius":"var(--radius-lg)"}},"rounded-xl":{"_static":{},"_dynamic":{"borderRadius":"var(--radius-xl)"}},"border":{"_static":{"borderWidth":1},"_dynamic":{"borderStyle":"var(--tw-border-style)"}},"border-s-4":{"_static":{"borderInlineStartWidth":4},"_dynamic":{"borderInlineStartStyle":"var(--tw-border-style)"}},"border-blue-500":{"_static":{},"_dynamic":{"borderColor":"var(--color-blue-500)"}},"border-blue-500/30":{"_static":{},"_dynamic":{"borderColor":"color-mix(in oklab, var(--color-blue-500) 30%, transparent)"}},"border-green-500":{"_static":{},"_dynamic":{"borderColor":"var(--color-green-500)"}},"border-green-500/30":{"_static":{},"_dynamic":{"borderColor":"color-mix(in oklab, var(--color-green-500) 30%, transparent)"}},"border-navy-300":{"_static":{},"_dynamic":{"borderColor":"var(--color-navy-300)"}},"border-navy-500":{"_static":{},"_dynamic":{"borderColor":"var(--color-navy-500)"}},"border-orange-500":{"_static":{},"_dynamic":{"borderColor":"var(--color-orange-500)"}},"border-primary":{"_static":{},"_dynamic":{"borderColor":"var(--color-primary)"}},"bg-blue-500":{"_static":{},"_dynamic":{"backgroundColor":"var(--color-blue-500)"}},"bg-blue-500/10":{"_static":{},"_dynamic":{"backgroundColor":"color-mix(in oklab, var(--color-blue-500) 10%, transparent)"}},"bg-blue-500/20":{"_static":{},"_dynamic":{"backgroundColor":"color-mix(in oklab, var(--color-blue-500) 20%, transparent)"}},"bg-green-500":{"_static":{},"_dynamic":{"backgroundColor":"var(--color-green-500)"}},"bg-green-500/10":{"_static":{},"_dynamic":{"backgroundColor":"color-mix(in oklab, var(--color-green-500) 10%, transparent)"}},"bg-green-500/20":{"_static":{},"_dynamic":{"backgroundColor":"color-mix(in oklab, var(--color-green-500) 20%, transparent)"}},"bg-magenta-500":{"_static":{},"_dynamic":{"backgroundColor":"var(--color-magenta-500)"}},"bg-navy-100":{"_static":{},"_dynamic":{"backgroundColor":"var(--color-navy-100)"}},"bg-navy-600":{"_static":{},"_dynamic":{"backgroundColor":"var(--color-navy-600)"}},"bg-navy-700":{"_static":{},"_dynamic":{"backgroundColor":"var(--color-navy-700)"}},"bg-orange-500":{"_static":{},"_dynamic":{"backgroundColor":"var(--color-orange-500)"}},"bg-orange-500/10":{"_static":{},"_dynamic":{"backgroundColor":"color-mix(in oklab, var(--color-orange-500) 10%, transparent)"}},"bg-primary":{"_static":{},"_dynamic":{"backgroundColor":"var(--color-primary)"}},"bg-primary/20":{"_static":{},"_dynamic":{"backgroundColor":"color-mix(in oklab, var(--color-primary) 20%, transparent)"}},"bg-primary/40":{"_static":{},"_dynamic":{"backgroundColor":"color-mix(in oklab, var(--color-primary) 40%, transparent)"}},"bg-primary/60":{"_static":{},"_dynamic":{"backgroundColor":"color-mix(in oklab, var(--color-primary) 60%, transparent)"}},"bg-primary/80":{"_static":{},"_dynamic":{"backgroundColor":"color-mix(in oklab, var(--color-primary) 80%, transparent)"}},"bg-red-500":{"_static":{},"_dynamic":{"backgroundColor":"var(--color-red-500)"}},"bg-success":{"_static":{},"_dynamic":{"backgroundColor":"var(--color-success)"}},"bg-transparent":{"backgroundColor":"#0000"},"bg-yellow-500":{"_static":{},"_dynamic":{"backgroundColor":"var(--color-yellow-500)"}},"bg-gradient-to-tr":{"_static":{"--tw-gradient-position":"to top right in oklab"},"_dynamic":{"backgroundImage":"linear-gradient(var(--tw-gradient-stops))"}},"p-1":{"_static":{},"_dynamic":{"paddingTop":"var(--spacing)","paddingRight":"var(--spacing)","paddingBottom":"var(--spacing)","paddingLeft":"var(--spacing)"}},"p-3":{"_static":{},"_dynamic":{"paddingTop":"calc(var(--spacing) * 3)","paddingRight":"calc(var(--spacing) * 3)","paddingBottom":"calc(var(--spacing) * 3)","paddingLeft":"calc(var(--spacing) * 3)"}},"p-3.5":{"_static":{},"_dynamic":{"paddingTop":"calc(var(--spacing) * 3.5)","paddingRight":"calc(var(--spacing) * 3.5)","paddingBottom":"calc(var(--spacing) * 3.5)","paddingLeft":"calc(var(--spacing) * 3.5)"}},"p-4":{"_static":{},"_dynamic":{"paddingTop":"calc(var(--spacing) * 4)","paddingRight":"calc(var(--spacing) * 4)","paddingBottom":"calc(var(--spacing) * 4)","paddingLeft":"calc(var(--spacing) * 4)"}},"p-5":{"_static":{},"_dynamic":{"paddingTop":"calc(var(--spacing) * 5)","paddingRight":"calc(var(--spacing) * 5)","paddingBottom":"calc(var(--spacing) * 5)","paddingLeft":"calc(var(--spacing) * 5)"}},"p-6":{"_static":{},"_dynamic":{"paddingTop":"calc(var(--spacing) * 6)","paddingRight":"calc(var(--spacing) * 6)","paddingBottom":"calc(var(--spacing) * 6)","paddingLeft":"calc(var(--spacing) * 6)"}},"px-3":{"_static":{},"_dynamic":{"paddingHorizontal":"calc(var(--spacing) * 3)"}},"px-3.5":{"_static":{},"_dynamic":{"paddingHorizontal":"calc(var(--spacing) * 3.5)"}},"px-4":{"_static":{},"_dynamic":{"paddingHorizontal":"calc(var(--spacing) * 4)"}},"px-5":{"_static":{},"_dynamic":{"paddingHorizontal":"calc(var(--spacing) * 5)"}},"py-1":{"_static":{},"_dynamic":{"paddingVertical":"var(--spacing)"}},"py-2":{"_static":{},"_dynamic":{"paddingVertical":"calc(var(--spacing) * 2)"}},"py-2.5":{"_static":{},"_dynamic":{"paddingVertical":"calc(var(--spacing) * 2.5)"}},"py-3.5":{"_static":{},"_dynamic":{"paddingVertical":"calc(var(--spacing) * 3.5)"}},"py-4":{"_static":{},"_dynamic":{"paddingVertical":"calc(var(--spacing) * 4)"}},"pr-3":{"_static":{},"_dynamic":{"paddingRight":"calc(var(--spacing) * 3)"}},"pb-20":{"_static":{},"_dynamic":{"paddingBottom":"calc(var(--spacing) * 20)"}},"text-2xl":{"_static":{},"_dynamic":{"fontSize":"var(--text-2xl)","lineHeight":"var(--tw-leading, var(--text-2xl--line-height))"}},"text-2xs":{"_static":{},"_dynamic":{"fontSize":"var(--text-2xs)","lineHeight":"var(--tw-leading, var(--text-2xs--line-height))"}},"text-md":{"_static":{},"_dynamic":{"fontSize":"var(--text-md)","lineHeight":"var(--tw-leading, var(--text-md--line-height))"}},"text-sm":{"_static":{},"_dynamic":{"fontSize":"var(--text-sm)","lineHeight":"var(--tw-leading, var(--text-sm--line-height))"}},"text-xs":{"_static":{},"_dynamic":{"fontSize":"var(--text-xs)","lineHeight":"var(--tw-leading, var(--text-xs--line-height))"}},"font-bold":{"_static":{"--tw-font-weight":"var(--font-weight-bold)"},"_dynamic":{"fontWeight":"var(--font-weight-bold)"}},"font-semibold":{"_static":{"--tw-font-weight":"var(--font-weight-semibold)"},"_dynamic":{"fontWeight":"var(--font-weight-semibold)"}},"tracking-wider":{"_static":{"--tw-tracking":"var(--tracking-wider)"},"_dynamic":{"letterSpacing":"var(--tracking-wider)"}},"text-blue-200":{"_static":{},"_dynamic":{"color":"var(--color-blue-200)"}},"text-green-200":{"_static":{},"_dynamic":{"color":"var(--color-green-200)"}},"text-green-500":{"_static":{},"_dynamic":{"color":"var(--color-green-500)"}},"text-navy-200":{"_static":{},"_dynamic":{"color":"var(--color-navy-200)"}},"text-navy-300":{"_static":{},"_dynamic":{"color":"var(--color-navy-300)"}},"text-navy-600":{"_static":{},"_dynamic":{"color":"var(--color-navy-600)"}},"text-navy-700":{"_static":{},"_dynamic":{"color":"var(--color-navy-700)"}},"text-white":{"_static":{},"_dynamic":{"color":"var(--color-white)"}},"text-yellow-500":{"_static":{},"_dynamic":{"color":"var(--color-yellow-500)"}},"capitalize":{"textTransform":"capitalize"},"uppercase":{"textTransform":"uppercase"},"shadow-base":{"_static":{"--tw-shadow":"0px 0px 4px var(--tw-shadow-color, lab(0% 0 0 / .1))"},"_dynamic":{"boxShadow":"var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)"}},"transition":{"_static":{"transitionProperty":"color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events"},"_dynamic":{"transitionTimingFunction":"var(--tw-ease, var(--default-transition-timing-function))","transitionDuration":"var(--tw-duration, var(--default-transition-duration))"}},"transition-all":{"_static":{"transitionProperty":"all"},"_dynamic":{"transitionTimingFunction":"var(--tw-ease, var(--default-transition-timing-function))","transitionDuration":"var(--tw-duration, var(--default-transition-duration))"}},"group-active:scale-105":{"_static":{"--tw-scale-x":"105%","--tw-scale-y":"105%","--tw-scale-z":"105%"},"_dynamic":{"scale":"var(--tw-scale-x) var(--tw-scale-y)"}},"group-active:bg-yellow-500":{"_static":{},"_dynamic":{"backgroundColor":"var(--color-yellow-500)"}},"group-active:text-black":{"_static":{},"_dynamic":{"color":"var(--color-black)"}},"group-active:text-yellow-500":{"_static":{},"_dynamic":{"color":"var(--color-yellow-500)"}},"active:scale-95":{"_static":{"--tw-scale-x":"95%","--tw-scale-y":"95%","--tw-scale-z":"95%"},"_dynamic":{"scale":"var(--tw-scale-x) var(--tw-scale-y)"}},"scale-95":{"_static":{"--tw-scale-x":"95%","--tw-scale-y":"95%","--tw-scale-z":"95%"},"_dynamic":{"scale":"var(--tw-scale-x) var(--tw-scale-y)"}},"active:border-primary":{"_static":{},"_dynamic":{"borderColor":"var(--color-primary)"}},"active:bg-navy-600":{"_static":{},"_dynamic":{"backgroundColor":"var(--color-navy-600)"}},"active:opacity-75":{"opacity":0.75},"opacity-75":{"opacity":0.75},"active:opacity-80":{"opacity":0.8},"opacity-80":{"opacity":0.8},"disabled:bg-navy-400":{"_static":{},"_dynamic":{"backgroundColor":"var(--color-navy-400)"}},"bg-navy-400":{"_static":{},"_dynamic":{"backgroundColor":"var(--color-navy-400)"}},"disabled:opacity-40":{"opacity":0.4},"opacity-40":{"opacity":0.4}}