@entropy-softworks/ui 2026.7.31

package/styles/globals.css

@@ -0,0 +1,262 @@
+/* CSS linter directives - ignore Tailwind at-rules */
+/* stylelint-disable at-rule-no-unknown */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+/* stylelint-enable at-rule-no-unknown */
+/* aspect-ratio utilities are disabled in tailwind-preset.js
+   (corePlugins.aspectRatio: false) because react-native-css-interop
+   crashes on "aspect-ratio: auto" during Metro bundling. */
+
+/* Geist fonts loaded via expo-font in the consumer's root _layout.tsx */
+
+@layer base {
+  :root {
+    --background: 255 255 255;
+    --foreground: 0 0 0;
+
+    --card: 255 255 255;
+    --card-foreground: 0 0 0;
+
+    --popover: 255 255 255;
+    --popover-foreground: 0 0 0;
+
+    --primary: 0 0 0;
+    --primary-foreground: 255 255 255;
+
+    --secondary: 245 245 245;
+    --secondary-foreground: 0 0 0;
+
+    --muted: 245 245 245;
+    --muted-foreground: 115 115 115;
+
+    --accent: 245 245 245;
+    --accent-foreground: 0 0 0;
+
+    --destructive: 239 68 68;
+    --destructive-foreground: 255 255 255;
+
+    --border: 229 229 229;
+    --input: 229 229 229;
+    --ring: 0 0 0;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 0 0 0;
+    --foreground: 255 255 255;
+
+    --card: 0 0 0;
+    --card-foreground: 255 255 255;
+
+    --popover: 0 0 0;
+    --popover-foreground: 255 255 255;
+
+    --primary: 255 255 255;
+    --primary-foreground: 0 0 0;
+
+    --secondary: 38 38 38;
+    --secondary-foreground: 255 255 255;
+
+    --muted: 38 38 38;
+    --muted-foreground: 163 163 163;
+
+    --accent: 38 38 38;
+    --accent-foreground: 255 255 255;
+
+    --destructive: 127 29 29;
+    --destructive-foreground: 255 255 255;
+
+    --border: 38 38 38;
+    --input: 38 38 38;
+    --ring: 255 255 255;
+  }
+
+  body {
+    background-color: rgb(var(--background));
+    color: rgb(var(--foreground));
+  }
+}
+
+@layer base {
+  * {
+    font-family:
+      "Geist-Regular",
+      system-ui,
+      -apple-system,
+      sans-serif;
+  }
+
+  .font-mono {
+    font-family:
+      "GeistMono-Regular", "SF Mono", "Monaco", "Inconsolata", "Fira Code", "Fira Mono",
+      "Droid Sans Mono", "Courier New", monospace;
+  }
+
+  body {
+    margin: 0;
+    padding: 0;
+  }
+
+  html {
+    scroll-behavior: smooth;
+  }
+
+  /* Remove default browser focus outline — apps style focus themselves. */
+  input:focus,
+  textarea:focus,
+  button:focus,
+  [role="button"]:focus,
+  [tabindex]:focus {
+    outline: none;
+  }
+}
+
+@layer utilities {
+  .animate-fade-in {
+    animation: fade-in 0.3s ease-in-out;
+  }
+
+  .animate-slide-up {
+    animation: slide-up 0.3s ease-out;
+  }
+
+  .animate-pulse-slow {
+    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  .animate-countdown {
+    animation: countdown 1s linear infinite;
+  }
+
+  .active\:scale-98:active {
+    transform: scale(0.98);
+  }
+
+  .pt-safe {
+    padding-top: env(safe-area-inset-top);
+  }
+
+  .pb-safe {
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  .px-safe {
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+  }
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-up {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes countdown {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@layer components {
+  .terminal-cursor::after {
+    content: "_";
+    animation: blink 1s infinite;
+    font-weight: 700;
+  }
+
+  @keyframes blink {
+    0%,
+    50% {
+      opacity: 1;
+    }
+    51%,
+    100% {
+      opacity: 0;
+    }
+  }
+}
+
+@layer components {
+  .progress-ring {
+    stroke-dasharray: 283;
+    stroke-dashoffset: 0;
+    transform-origin: center;
+    transform: rotate(-90deg);
+    transition: stroke-dashoffset 1s linear;
+  }
+}
+
+@layer components {
+  .skeleton {
+    background: linear-gradient(90deg, #f5f5f5 0%, rgba(115, 115, 115, 0.1) 50%, #f5f5f5 100%);
+    background-size: 200% 100%;
+    animation: skeleton-loading 1.5s ease-in-out infinite;
+  }
+
+  .dark .skeleton {
+    background: linear-gradient(90deg, #262626 0%, rgba(163, 163, 163, 0.1) 50%, #262626 100%);
+  }
+
+  @keyframes skeleton-loading {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+}
+
+@layer utilities {
+  @media (hover: hover) {
+    .custom-scrollbar::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+
+    .custom-scrollbar::-webkit-scrollbar-track {
+      background: #ffffff;
+    }
+
+    .custom-scrollbar::-webkit-scrollbar-thumb {
+      background: rgba(115, 115, 115, 0.3);
+      border-radius: 4px;
+    }
+
+    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+      background: rgba(115, 115, 115, 0.5);
+    }
+
+    .dark .custom-scrollbar::-webkit-scrollbar-track {
+      background: #000000;
+    }
+
+    .dark .custom-scrollbar::-webkit-scrollbar-thumb {
+      background: rgba(163, 163, 163, 0.3);
+    }
+
+    .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+      background: rgba(163, 163, 163, 0.5);
+    }
+  }
+}

package/tailwind-preset.js

@@ -0,0 +1,163 @@
+/**
+ * Shared NativeWind / Tailwind preset for Entropy Softworks Expo apps.
+ *
+ * Consumers extend with their own `content` globs:
+ *
+ *   module.exports = {
+ *     presets: [require("@entropy-softworks/ui/tailwind-preset")],
+ *     content: ["./app/**\/*.{js,jsx,ts,tsx}", "./node_modules/@entropy-softworks/ui/**\/*.{js,jsx,ts,tsx}"],
+ *   };
+ *
+ * CSS custom properties (`--background`, `--primary`, …) are declared in
+ * `styles/globals.css`. Light + dark themes share the same Tailwind utility
+ * names; the consumer toggles the `.dark` class on the document root.
+ */
+
+// `nativewind` is a peerDependency, so it lives in the consumer's
+// `node_modules`, not in this package's. A bare
+// `require("nativewind/preset")` walks up from THIS file's directory
+// — which in a hoisted monorepo never reaches the consumer's
+// `node_modules` — and fails. Resolve from `process.cwd()` (the
+// consumer's app root when its tailwind.config.js loads this preset)
+// with `__dirname` as a fallback for direct-tree consumers.
+const nativewindPreset = require(
+  require.resolve("nativewind/preset", { paths: [process.cwd(), __dirname] })
+);
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [],
+  darkMode: "class",
+  presets: [nativewindPreset],
+  theme: {
+    extend: {
+      colors: {
+        border: "rgb(var(--border))",
+        input: "rgb(var(--input))",
+        ring: "rgb(var(--ring))",
+        background: "rgb(var(--background))",
+        foreground: "rgb(var(--foreground))",
+        primary: {
+          DEFAULT: "rgb(var(--primary))",
+          foreground: "rgb(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "rgb(var(--secondary))",
+          foreground: "rgb(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "rgb(var(--destructive))",
+          foreground: "rgb(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "rgb(var(--muted))",
+          foreground: "rgb(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "rgb(var(--accent))",
+          foreground: "rgb(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "rgb(var(--popover))",
+          foreground: "rgb(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "rgb(var(--card))",
+          foreground: "rgb(var(--card-foreground))",
+        },
+        success: {
+          DEFAULT: "#22c55e",
+          foreground: "#ffffff",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      fontFamily: {
+        sans: [
+          "Geist-Regular",
+          "system-ui",
+          "-apple-system",
+          "BlinkMacSystemFont",
+          "Segoe UI",
+          "Roboto",
+          "sans-serif",
+        ],
+        "sans-medium": ["Geist-Medium"],
+        "sans-bold": ["Geist-Bold"],
+        mono: [
+          "GeistMono-Regular",
+          "SF Mono",
+          "Monaco",
+          "Inconsolata",
+          "Fira Code",
+          "Fira Mono",
+          "Droid Sans Mono",
+          "Courier New",
+          "monospace",
+        ],
+        "mono-medium": ["GeistMono-Medium"],
+        "mono-bold": ["GeistMono-Bold"],
+      },
+      fontSize: {
+        xs: ["12px", { lineHeight: "16px" }],
+        sm: ["14px", { lineHeight: "20px" }],
+        base: ["16px", { lineHeight: "24px" }],
+        lg: ["18px", { lineHeight: "28px" }],
+        xl: ["20px", { lineHeight: "28px" }],
+        "2xl": ["24px", { lineHeight: "32px" }],
+        "3xl": ["30px", { lineHeight: "36px" }],
+        "4xl": ["36px", { lineHeight: "40px" }],
+      },
+      spacing: {
+        "safe-top": "env(safe-area-inset-top)",
+        "safe-bottom": "env(safe-area-inset-bottom)",
+        "safe-left": "env(safe-area-inset-left)",
+        "safe-right": "env(safe-area-inset-right)",
+      },
+      animation: {
+        "fade-in": "fade-in 0.3s ease-in-out",
+        "slide-up": "slide-up 0.3s ease-out",
+        "pulse-slow": "pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+        countdown: "countdown 1s linear infinite",
+        blink: "blink 1s infinite",
+        skeleton: "skeleton-loading 1.5s ease-in-out infinite",
+      },
+      keyframes: {
+        "fade-in": {
+          "0%": { opacity: "0", transform: "translateY(10px)" },
+          "100%": { opacity: "1", transform: "translateY(0)" },
+        },
+        "slide-up": {
+          "0%": { transform: "translateY(100%)" },
+          "100%": { transform: "translateY(0)" },
+        },
+        countdown: {
+          "0%": { transform: "rotate(0deg)" },
+          "100%": { transform: "rotate(360deg)" },
+        },
+        blink: {
+          "0%, 50%": { opacity: "1" },
+          "51%, 100%": { opacity: "0" },
+        },
+        "skeleton-loading": {
+          "0%": { backgroundPosition: "200% 0" },
+          "100%": { backgroundPosition: "-200% 0" },
+        },
+      },
+      scale: {
+        98: "0.98",
+        102: "1.02",
+      },
+    },
+  },
+  // `aspect-ratio: auto` crashes the Metro bundler on native targets via
+  // react-native-css-interop. RN supports `aspectRatio` natively as a
+  // numeric style prop, so the Tailwind utility is unnecessary anyway.
+  corePlugins: {
+    aspectRatio: false,
+  },
+  plugins: [],
+};