frutjam 2.7.1-beta.1 → 3.0.0

package/dist/themes/darkberry/index.js

@@ -0,0 +1,5 @@
+import theme from './object.js';
+
+export default ({ addBase }) => {
+  addBase({ ...theme });
+};

package/dist/themes/darkberry/object.js

@@ -0,0 +1 @@
+export default {"@layer theme":{":is([data-theme=\"darkberry\"], [data-theme=\"dark\"])":{"--scheme-color":"dark","--border-radius":"0.25rem","--color-base":"oklch(10.889% 0.00301 17.398)","--color-on-base":"oklch(98% 0.01 270)","--color-neutral":"oklch(85% 0 0)","--color-on-neutral":"oklch(20% 0 0)","--color-primary":"oklch(66.385% 0.18368 285.592)","--color-on-primary":"oklch(10% 0.01 270)","--color-secondary":"oklch(65% 0.18 220)","--color-on-secondary":"oklch(10% 0.01 220)","--color-accent":"oklch(75% 0.18 50)","--color-on-accent":"oklch(10% 0.01 50)","--color-info":"oklch(91.67% .077 205.04)","--color-on-info":"oklch(10% 0.01 250)","--color-success":"oklch(65% 0.18 140)","--color-on-success":"oklch(10% 0.01 140)","--color-warning":"oklch(75% 0.20 85)","--color-on-warning":"oklch(10% 0.01 85)","--color-error":"oklch(60% 0.22 30)","--color-on-error":"oklch(10% 0.01 30)"}}};

package/dist/themes/darkberry.css

@@ -0,0 +1,2 @@
+/*! frutjam v3.0.0 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
+@layer theme{:is([data-theme=darkberry],[data-theme=dark]){--scheme-color:dark;--border-radius:0.25rem;--color-base:oklch(10.889% 0.00301 17.398);--color-on-base:oklch(98% 0.01 270);--color-neutral:oklch(85% 0 0);--color-on-neutral:oklch(20% 0 0);--color-primary:oklch(66.385% 0.18368 285.592);--color-on-primary:oklch(10% 0.01 270);--color-secondary:oklch(65% 0.18 220);--color-on-secondary:oklch(10% 0.01 220);--color-accent:oklch(75% 0.18 50);--color-on-accent:oklch(10% 0.01 50);--color-info:oklch(91.67% .077 205.04);--color-on-info:oklch(10% 0.01 250);--color-success:oklch(65% 0.18 140);--color-on-success:oklch(10% 0.01 140);--color-warning:oklch(75% 0.20 85);--color-on-warning:oklch(10% 0.01 85);--color-error:oklch(60% 0.22 30);--color-on-error:oklch(10% 0.01 30)}}

package/dist/themes/snowberry/index.js

@@ -0,0 +1,5 @@
+import theme from './object.js';
+
+export default ({ addBase }) => {
+  addBase({ ...theme });
+};

package/dist/themes/snowberry/object.js

@@ -0,0 +1 @@
+export default {"@layer theme":{":root:not([data-theme]), :is([data-theme=\"snowberry\"], [data-theme=\"light\"])":{"--scheme-color":"light","--border-radius":"0.25rem","--color-base":"oklch(1 0 0)","--color-on-base":"oklch(0.22 0 0)","--color-neutral":"oklch(0.15 0 0)","--color-on-neutral":"oklch(1 0 0)","--color-primary":"oklch(51.1% 0.262 276.966)","--color-on-primary":"oklch(96.2% 0.018 272.314)","--color-secondary":"oklch(0.591 0.293 322.896)","--color-on-secondary":"oklch(1 0 0)","--color-accent":"oklch(0.541 0.281 293.009)","--color-on-accent":"oklch(1 0 0)","--color-info":"oklch(0.685 0.169 237.323)","--color-on-info":"oklch(0.15 0 0)","--color-success":"oklch(0.792 0.209 151.711)","--color-on-success":"oklch(0.15 0 0)","--color-warning":"oklch(0.852 0.199 91.936)","--color-on-warning":"oklch(0.15 0 0)","--color-error":"oklch(0.577 0.245 27.325)","--color-on-error":"oklch(1 0 0)"}}};

package/dist/themes/snowberry.css

@@ -0,0 +1,2 @@
+/*! frutjam v3.0.0 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
+@layer theme{:is([data-theme=snowberry],[data-theme=light]),:root:not([data-theme]){--scheme-color:light;--border-radius:0.25rem;--color-base:oklch(1 0 0);--color-on-base:oklch(0.22 0 0);--color-neutral:oklch(0.15 0 0);--color-on-neutral:oklch(1 0 0);--color-primary:oklch(51.1% 0.262 276.966);--color-on-primary:oklch(96.2% 0.018 272.314);--color-secondary:oklch(0.591 0.293 322.896);--color-on-secondary:oklch(1 0 0);--color-accent:oklch(0.541 0.281 293.009);--color-on-accent:oklch(1 0 0);--color-info:oklch(0.685 0.169 237.323);--color-on-info:oklch(0.15 0 0);--color-success:oklch(0.792 0.209 151.711);--color-on-success:oklch(0.15 0 0);--color-warning:oklch(0.852 0.199 91.936);--color-on-warning:oklch(0.15 0 0);--color-error:oklch(0.577 0.245 27.325);--color-on-error:oklch(1 0 0)}}

package/dist/utilities/headings/index.js

@@ -0,0 +1,7 @@
+import headings from './object.js';
+import { addPrefix } from '../../functions/addPrefix.js';
+
+export default ({ addUtilities, prefix = '' }) => {
+  const prefixed = addPrefix(headings, prefix);
+  addUtilities({ ...prefixed });
+};

package/dist/utilities/headings/object.js

@@ -0,0 +1 @@
+export default {".heading-2xl":{"color":"var(--color-on-base)","font-weight":"bold","text-wrap-style":"balance","font-size":"var(--text-2xl)","line-height":1.15},".heading-3xl":{"color":"var(--color-on-base)","font-weight":"bold","text-wrap-style":"balance","font-size":"var(--text-3xl)","line-height":1.15},".heading-4xl":{"color":"var(--color-on-base)","font-weight":"bold","text-wrap-style":"balance","font-size":"var(--text-4xl)","line-height":1.15},".heading-5xl":{"color":"var(--color-on-base)","font-weight":"bold","text-wrap-style":"balance","font-size":"var(--text-5xl)","line-height":1.15},".heading-6xl":{"color":"var(--color-on-base)","font-weight":"bold","text-wrap-style":"balance","font-size":"var(--text-6xl)","line-height":1.15},".heading-7xl":{"color":"var(--color-on-base)","font-weight":"bold","text-wrap-style":"balance","font-size":"var(--text-7xl)","line-height":1.15},".heading-8xl":{"color":"var(--color-on-base)","font-weight":"bold","text-wrap-style":"balance","font-size":"var(--text-8xl)","line-height":1.15},".heading-9xl":{"color":"var(--color-on-base)","font-weight":"bold","text-wrap-style":"balance","font-size":"var(--text-9xl)","line-height":1.15},".heading-lg":{"color":"var(--color-on-base)","font-weight":"bold","text-wrap-style":"balance","font-size":"var(--text-lg)","line-height":1.15},".heading-md":{"color":"var(--color-on-base)","font-weight":"bold","text-wrap-style":"balance","line-height":1.15,"font-size":"var(--text-base)"},".heading-sm":{"color":"var(--color-on-base)","font-weight":"bold","text-wrap-style":"balance","font-size":"var(--text-sm)","line-height":1.15},".heading-xl":{"color":"var(--color-on-base)","font-weight":"bold","text-wrap-style":"balance","font-size":"var(--text-xl)","line-height":1.15},".heading-xs":{"color":"var(--color-on-base)","font-weight":"bold","text-wrap-style":"balance","font-size":"var(--text-xs)","line-height":1.15},".heading":{"color":"var(--color-on-base)","font-weight":"bold","text-wrap-style":"balance","font-size":"var(--text-base)","line-height":1.15}};

package/dist/utilities/headings.css

@@ -0,0 +1,2 @@
+/*! frutjam v3.0.0 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
+/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */.heading-2xl{font-size:var(--text-base);font-size:var(--text-2xl)}.heading-2xl,.heading-3xl{color:var(--color-on-base);font-weight:700;line-height:1.15;text-wrap-style:balance}.heading-3xl{font-size:var(--text-base);font-size:var(--text-3xl)}.heading-4xl{font-size:var(--text-base);font-size:var(--text-4xl)}.heading-4xl,.heading-5xl{color:var(--color-on-base);font-weight:700;line-height:1.15;text-wrap-style:balance}.heading-5xl{font-size:var(--text-base);font-size:var(--text-5xl)}.heading-6xl{font-size:var(--text-base);font-size:var(--text-6xl)}.heading-6xl,.heading-7xl{color:var(--color-on-base);font-weight:700;line-height:1.15;text-wrap-style:balance}.heading-7xl{font-size:var(--text-base);font-size:var(--text-7xl)}.heading-8xl{font-size:var(--text-base);font-size:var(--text-8xl)}.heading-8xl,.heading-9xl{color:var(--color-on-base);font-weight:700;line-height:1.15;text-wrap-style:balance}.heading-9xl{font-size:var(--text-base);font-size:var(--text-9xl)}.heading-lg{font-size:var(--text-base);font-size:var(--text-lg)}.heading-lg,.heading-md{color:var(--color-on-base);font-weight:700;line-height:1.15;text-wrap-style:balance}.heading-md{font-size:var(--text-base)}.heading-sm{font-size:var(--text-base);font-size:var(--text-sm)}.heading-sm,.heading-xl{color:var(--color-on-base);font-weight:700;line-height:1.15;text-wrap-style:balance}.heading-xl{font-size:var(--text-base);font-size:var(--text-xl)}.heading-xs{font-size:var(--text-base);font-size:var(--text-xs)}.heading,.heading-xs{color:var(--color-on-base);font-weight:700;line-height:1.15;text-wrap-style:balance}.heading{font-size:var(--text-base)}

package/dist/utilities/para/index.js

@@ -0,0 +1,7 @@
+import para from './object.js';
+import { addPrefix } from '../../functions/addPrefix.js';
+
+export default ({ addUtilities, prefix = '' }) => {
+  const prefixed = addPrefix(para, prefix);
+  addUtilities({ ...prefixed });
+};

package/dist/utilities/para/object.js

@@ -0,0 +1 @@
+export default {".para-2xl":{"text-wrap-style":"pretty","font-size":"var(--text-2xl)","line-height":1.6},".para-3xl":{"text-wrap-style":"pretty","font-size":"var(--text-3xl)","line-height":1.6},".para-4xl":{"text-wrap-style":"pretty","font-size":"var(--text-4xl)","line-height":1.6},".para-5xl":{"text-wrap-style":"pretty","font-size":"var(--text-5xl)","line-height":1.6},".para-6xl":{"text-wrap-style":"pretty","font-size":"var(--text-6xl)","line-height":1.6},".para-7xl":{"text-wrap-style":"pretty","font-size":"var(--text-7xl)","line-height":1.6},".para-8xl":{"text-wrap-style":"pretty","font-size":"var(--text-8xl)","line-height":1.6},".para-9xl":{"text-wrap-style":"pretty","font-size":"var(--text-9xl)","line-height":1.6},".para-lg":{"text-wrap-style":"pretty","font-size":"var(--text-lg)","line-height":1.6},".para-md":{"text-wrap-style":"pretty","line-height":1.6,"font-size":"var(--text-base)"},".para-sm":{"text-wrap-style":"pretty","font-size":"var(--text-sm)","line-height":1.6},".para-xl":{"text-wrap-style":"pretty","font-size":"var(--text-xl)","line-height":1.6},".para-xs":{"text-wrap-style":"pretty","font-size":"var(--text-xs)","line-height":1.6},".para":{"text-wrap-style":"pretty","font-size":"var(--text-base)","line-height":1.6}};

package/dist/utilities/para.css

@@ -0,0 +1,2 @@
+/*! frutjam v3.0.0 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
+/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */.para-2xl{font-size:var(--text-base);font-size:var(--text-2xl)}.para-2xl,.para-3xl{line-height:1.6;text-wrap-style:pretty}.para-3xl{font-size:var(--text-base);font-size:var(--text-3xl)}.para-4xl{font-size:var(--text-base);font-size:var(--text-4xl)}.para-4xl,.para-5xl{line-height:1.6;text-wrap-style:pretty}.para-5xl{font-size:var(--text-base);font-size:var(--text-5xl)}.para-6xl{font-size:var(--text-base);font-size:var(--text-6xl)}.para-6xl,.para-7xl{line-height:1.6;text-wrap-style:pretty}.para-7xl{font-size:var(--text-base);font-size:var(--text-7xl)}.para-8xl{font-size:var(--text-base);font-size:var(--text-8xl)}.para-8xl,.para-9xl{line-height:1.6;text-wrap-style:pretty}.para-9xl{font-size:var(--text-base);font-size:var(--text-9xl)}.para-lg{font-size:var(--text-base);font-size:var(--text-lg)}.para-lg,.para-md{line-height:1.6;text-wrap-style:pretty}.para-md{font-size:var(--text-base)}.para-sm{font-size:var(--text-base);font-size:var(--text-sm)}.para-sm,.para-xl{line-height:1.6;text-wrap-style:pretty}.para-xl{font-size:var(--text-base);font-size:var(--text-xl)}.para-xs{font-size:var(--text-base);font-size:var(--text-xs)}.para,.para-xs{line-height:1.6;text-wrap-style:pretty}.para{font-size:var(--text-base)}

package/dist/utilities/typography/index.js

@@ -0,0 +1,7 @@
+import typography from './object.js';
+import { addPrefix } from '../../functions/addPrefix.js';
+
+export default ({ addUtilities, prefix = '' }) => {
+  const prefixed = addPrefix(typography, prefix);
+  addUtilities({ ...prefixed });
+};

package/dist/utilities/typography/object.js

@@ -0,0 +1 @@
+export default {".prose-frutjam":{"--tw-prose-body":"var(--color-body)","--tw-prose-headings":"var(--color-on-base)","--tw-prose-lead":"var(--color-on-neutral)","--tw-prose-bold":"var(--color-on-base)","--tw-prose-links":"var(--color-primary)","--tw-prose-counters":"var(--color-on-neutral)","--tw-prose-bullets":"var(--color-neutral)","--tw-prose-hr":"var(--color-base-soft)","--tw-prose-quotes":"var(--color-on-base)","--tw-prose-quote-borders":"var(--color-primary)","--tw-prose-code":"var(--color-on-base)","--tw-prose-pre-code":"var(--color-base)","--tw-prose-pre-bg":"var(--color-on-base)","--tw-prose-th-borders":"var(--color-base-soft)","--tw-prose-td-borders":"var(--color-base-soft)","--tw-prose-captions":"var(--color-on-neutral)","--tw-prose-kbd":"var(--color-body)","--tw-prose-invert-body":"var(--color-on-neutral)","--tw-prose-invert-headings":"var(--color-on-base)","--tw-prose-invert-links":"var(--color-primary)"}};

package/dist/utilities/typography.css

@@ -0,0 +1,2 @@
+/*! frutjam v3.0.0 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
+.prose-frutjam{--tw-prose-body:var(--color-body);--tw-prose-headings:var(--color-on-base);--tw-prose-lead:var(--color-on-neutral);--tw-prose-bold:var(--color-on-base);--tw-prose-links:var(--color-primary);--tw-prose-counters:var(--color-on-neutral);--tw-prose-bullets:var(--color-neutral);--tw-prose-hr:var(--color-base-soft);--tw-prose-quotes:var(--color-on-base);--tw-prose-quote-borders:var(--color-primary);--tw-prose-code:var(--color-on-base);--tw-prose-pre-code:var(--color-base);--tw-prose-pre-bg:var(--color-on-base);--tw-prose-th-borders:var(--color-base-soft);--tw-prose-td-borders:var(--color-base-soft);--tw-prose-captions:var(--color-on-neutral);--tw-prose-kbd:var(--color-body);--tw-prose-invert-body:var(--color-on-neutral);--tw-prose-invert-headings:var(--color-on-base);--tw-prose-invert-links:var(--color-primary)}

package/dist/utilities/wrapper/index.js

@@ -0,0 +1,7 @@
+import wrapper from './object.js';
+import { addPrefix } from '../../functions/addPrefix.js';
+
+export default ({ addUtilities, prefix = '' }) => {
+  const prefixed = addPrefix(wrapper, prefix);
+  addUtilities({ ...prefixed });
+};

package/dist/utilities/wrapper/object.js

@@ -0,0 +1 @@
+export default {".wrapper-full":{"width":"100%","max-width":"100%","box-sizing":"border-box","margin-inline":"auto","padding-inline":"1rem","@media (width >= 40rem)":{"padding-inline":"2rem"},"@media (width >= 64rem)":{"padding-inline":"4rem"}},".wrapper-2xl":{"box-sizing":"border-box","max-width":"1536px","margin-inline":"auto","padding-inline":"1rem","@media (width >= 40rem)":{"padding-inline":"2rem"},"@media (width >= 64rem)":{"padding-inline":"4rem"}},".wrapper-lg":{"box-sizing":"border-box","max-width":"1024px","margin-inline":"auto","padding-inline":"1rem","@media (width >= 40rem)":{"padding-inline":"2rem"},"@media (width >= 64rem)":{"padding-inline":"4rem"}},".wrapper-md":{"box-sizing":"border-box","max-width":"768px","margin-inline":"auto","padding-inline":"1rem","@media (width >= 40rem)":{"padding-inline":"2rem"},"@media (width >= 64rem)":{"padding-inline":"4rem"}},".wrapper-sm":{"box-sizing":"border-box","max-width":"640px","margin-inline":"auto","padding-inline":"1rem","@media (width >= 40rem)":{"padding-inline":"2rem"},"@media (width >= 64rem)":{"padding-inline":"4rem"}},".wrapper-xl":{"box-sizing":"border-box","max-width":"1280px","margin-inline":"auto","padding-inline":"1rem","@media (width >= 40rem)":{"padding-inline":"2rem"},"@media (width >= 64rem)":{"padding-inline":"4rem"}},".wrapper-xs":{"box-sizing":"border-box","max-width":"320px","margin-inline":"auto","padding-inline":"1rem","@media (width >= 40rem)":{"padding-inline":"2rem"},"@media (width >= 64rem)":{"padding-inline":"4rem"}},".wrapper":{"box-sizing":"border-box","margin-inline":"auto","padding-inline":"1rem","@media (width >= 40rem)":{"padding-inline":"2rem"},"@media (width >= 64rem)":{"padding-inline":"4rem"}}};

package/dist/utilities/wrapper.css

@@ -0,0 +1,2 @@
+/*! frutjam v3.0.0 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
+/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */.wrapper-full{box-sizing:border-box;margin-inline:auto;max-width:100%;padding-inline:1rem;width:100%;@media (width >= 40rem){padding-inline:2rem}@media (width >= 64rem){padding-inline:4rem}}.wrapper-2xl{box-sizing:border-box;margin-inline:auto;max-width:1536px;padding-inline:1rem;@media (width >= 40rem){padding-inline:2rem}@media (width >= 64rem){padding-inline:4rem}}.wrapper-lg{box-sizing:border-box;margin-inline:auto;max-width:1024px;padding-inline:1rem;@media (width >= 40rem){padding-inline:2rem}@media (width >= 64rem){padding-inline:4rem}}.wrapper-md{box-sizing:border-box;margin-inline:auto;max-width:768px;padding-inline:1rem;@media (width >= 40rem){padding-inline:2rem}@media (width >= 64rem){padding-inline:4rem}}.wrapper-sm{box-sizing:border-box;margin-inline:auto;max-width:640px;padding-inline:1rem;@media (width >= 40rem){padding-inline:2rem}@media (width >= 64rem){padding-inline:4rem}}.wrapper-xl{box-sizing:border-box;margin-inline:auto;max-width:1280px;padding-inline:1rem;@media (width >= 40rem){padding-inline:2rem}@media (width >= 64rem){padding-inline:4rem}}.wrapper-xs{box-sizing:border-box;margin-inline:auto;max-width:320px;padding-inline:1rem;@media (width >= 40rem){padding-inline:2rem}@media (width >= 64rem){padding-inline:4rem}}.wrapper{box-sizing:border-box;margin-inline:auto;padding-inline:1rem;@media (width >= 40rem){padding-inline:2rem}@media (width >= 64rem){padding-inline:4rem}}

package/index.js

@@ -0,0 +1,272 @@
+import { readFileSync, readdirSync, statSync, existsSync } from "fs"
+import { join, dirname, basename, extname } from "path"
+import { fileURLToPath } from "url"
+import postcss from "postcss"
+
+const __filename = fileURLToPath(import.meta.url)
+const __dir = dirname(__filename)
+const srcDir = join(__dir, "src")
+const VERSION = JSON.parse(readFileSync(join(__dir, "package.json"), "utf8")).version
+
+// ── Keys that must be injected after Tailwind processes layers ───────────────
+// These files conflict with @layer utilities from Tailwind plugins (e.g. typography),
+// so they are injected via OnceExit into @layer utilities (or root if not found).
+const LATE_INJECT = new Set(['typography'])
+
+// ── Registry (built once at startup, not per build) ──────────────────────────
+
+function buildRegistry() {
+  const registry = {}
+
+  // Components: src/components/*/base.css — keyed by folder name
+  const componentsDir = join(srcDir, "components")
+  for (const name of readdirSync(componentsDir)) {
+    const entry = join(componentsDir, name, "base.css")
+    if (statSync(join(componentsDir, name)).isDirectory() && existsSync(entry)) {
+      registry[name] = entry
+    }
+  }
+
+  // Utilities: src/utilities/*.css — keyed by filename without extension
+  const utilitiesDir = join(srcDir, "utilities")
+  for (const file of readdirSync(utilitiesDir)) {
+    if (extname(file) === ".css") {
+      registry[basename(file, ".css")] = join(utilitiesDir, file)
+    }
+  }
+
+  return registry
+}
+
+const REGISTRY = buildRegistry()
+
+// ── Helpers ─────────────────────────────────────────────────────────────────
+
+function readFile(p) { return readFileSync(p, "utf8") }
+
+function parseList(val) {
+  if (!val) return []
+  if (Array.isArray(val)) return val.map(s => s.trim()).filter(Boolean)
+  return String(val).split(",").map(s => s.trim()).filter(Boolean)
+}
+
+function applyPrefix(css, prefix) {
+  if (!prefix) return css
+
+  css = css.replace(
+    /@utility\s+([\w-]+\*?)\s*\{/g,
+    (_, name) => `@utility ${prefix}-${name} {`
+  )
+  css = css.replace(
+    /@apply\s+([^;{}\n]+)/g,
+    (_, classes) => `@apply ${classes.trim().split(/\s+/).map(c => `${prefix}-${c}`).join(' ')}`
+  )
+  css = css.replace(
+    /\/\*[\s\S]*?\*\/|"[^"]*"|'[^']*'|\.(([a-z][a-z0-9]*-?)+)/g,
+    (match, name) => name ? `.${prefix}-${name}` : match
+  )
+  return css
+}
+
+function buildUtilityMap(css) {
+  const map = new Map()
+  const pattern = /@utility\s+([\w-]+(?:\s*\*)?)\s*\{/g
+  let match
+  while ((match = pattern.exec(css)) !== null) {
+    const name = match[1].trim()
+    if (map.has(name)) continue
+    let depth = 0, bodyStart = -1
+    for (let i = match.index + match[0].length - 1; i < css.length; i++) {
+      if (css[i] === '{') {
+        if (depth === 0) bodyStart = i + 1
+        depth++
+      } else if (css[i] === '}') {
+        if (--depth === 0) { map.set(name, css.slice(bodyStart, i)); break }
+      }
+    }
+  }
+  return map
+}
+
+function resolveCopy(css, source = css) {
+  const map = source instanceof Map ? source : buildUtilityMap(source)
+  return css.replace(/@copy\s+([\w-]+)\s*;/g, (original, name) => map.get(name) ?? original)
+}
+
+function resolveImports(css, baseDir) {
+  return css.replace(
+    /@import\s+["']([^"']+)["'];?\s*/g,
+    (_, importPath) => {
+      const fullPath = join(baseDir, importPath)
+      const importedDir = dirname(fullPath)
+      const importedCSS = readFile(fullPath)
+      return resolveImports(importedCSS, importedDir)
+    }
+  )
+}
+
+function buildCustomThemes(themes) {
+  if (!themes || Object.keys(themes).length === 0) return ""
+
+  return Object.entries(themes)
+    .map(([name, vars]) => {
+      const varString = Object.entries(vars)
+        .map(([k, v]) => `  ${k}: ${v};`)
+        .join("\n")
+      return `[data-theme="${name}"] {\n${varString}\n}`
+    })
+    .join("\n\n")
+}
+
+// ── Base layers (inlined — no entry CSS files needed) ───────────────────────
+
+const BASE_FULL = [
+  "base/reboot.css",
+  "theme/base.css",
+]
+
+const BASE_CORE = [
+  "base/variants.css",
+  "base/tokens.css",
+  "theme/base.css",
+]
+
+// ── Build ────────────────────────────────────────────────────────────────────
+
+function buildCSS(prefix, themes, reset, rootSelector, include, exclude) {
+  // Resolve which components+utilities to include
+  let keys = Object.keys(REGISTRY)
+  if (include.length > 0) {
+    keys = include.filter(k => REGISTRY[k])
+  } else if (exclude.length > 0) {
+    const excludeSet = new Set(exclude)
+    keys = keys.filter(k => !excludeSet.has(k))
+  }
+  // LATE_INJECT keys are handled separately via OnceExit — skip them here
+  keys = keys.filter(k => !LATE_INJECT.has(k))
+
+  // Base layer (full with reboot, or core without)
+  const baseFiles = reset ? BASE_FULL : BASE_CORE
+  const baseCss = baseFiles
+    .map(f => resolveImports(readFile(join(srcDir, f)), join(srcDir, dirname(f))))
+    .join("\n")
+
+  // Components + utilities
+  const modulesCss = keys
+    .map(k => resolveImports(readFile(REGISTRY[k]), dirname(REGISTRY[k])))
+    .join("\n")
+
+  const combined = baseCss + "\n" + modulesCss
+  const utilMap = buildUtilityMap(combined)
+  let css = resolveCopy(combined, utilMap)
+
+  if (rootSelector !== ":root") {
+    css = css.replace(/:root\b/g, rootSelector)
+  }
+
+  css = applyPrefix(css, prefix)
+
+  const customThemes = buildCustomThemes(themes)
+  if (customThemes) css += "\n\n" + customThemes
+
+  return { css, utilMap }
+}
+
+function buildLateCSS(prefix, include, exclude, utilMap = new Map()) {
+  let keys = [...LATE_INJECT].filter(k => REGISTRY[k])
+  if (include.length > 0) {
+    keys = keys.filter(k => include.includes(k))
+  } else if (exclude.length > 0) {
+    const excludeSet = new Set(exclude)
+    keys = keys.filter(k => !excludeSet.has(k))
+  }
+  if (keys.length === 0) return ""
+  const raw = keys
+    .map(k => resolveImports(readFile(REGISTRY[k]), dirname(REGISTRY[k])))
+    .join("\n")
+  const css = resolveCopy(raw, utilMap)
+  return applyPrefix(css, prefix)
+}
+
+// ── Plugin ───────────────────────────────────────────────────────────────────
+
+function parseAtPluginOptions(atRule) {
+  const opts = {}
+  atRule.each(node => {
+    if (node.type !== "decl") return
+    let val = node.value.trim()
+    if (val === "true") val = true
+    else if (val === "false") val = false
+    else if (
+      (val.startsWith('"') && val.endsWith('"')) ||
+      (val.startsWith("'") && val.endsWith("'"))
+    ) val = val.slice(1, -1)
+    opts[node.prop.trim()] = val
+  })
+  return opts
+}
+
+export { buildUtilityMap, resolveCopy }
+
+export default function frutjam(options = {}) {
+  let _lateCss = ""
+
+  return {
+    postcssPlugin: "frutjam",
+    Once(root) {
+      // Collect @plugin "frutjam" { ... } blocks from the CSS
+      const atPluginNodes = []
+      root.each(node => {
+        if (
+          node.type === "atrule" &&
+          node.name === "plugin" &&
+          /^["']frutjam["']/.test(node.params.trim()) &&
+          node.nodes
+        ) atPluginNodes.push(node)
+      })
+
+      // CSS-level options override factory options
+      let cssOptions = {}
+      for (const node of atPluginNodes) {
+        Object.assign(cssOptions, parseAtPluginOptions(node))
+        node.remove()
+      }
+      const merged = { ...options, ...cssOptions }
+
+      const prefix       = typeof merged.prefix === "string" ? merged.prefix.trim() : ""
+      const themes       = typeof merged.themes === "object" ? merged.themes : {}
+      const reset        = merged.reset !== false
+      const rootSelector = typeof merged.root === "string" ? merged.root : ":root"
+      const logs         = merged.logs !== false
+      const include      = parseList(merged.include)
+      const exclude      = parseList(merged.exclude)
+
+      const { css, utilMap } = buildCSS(prefix, themes, reset, rootSelector, include, exclude)
+      root.append(postcss.parse(css).nodes)
+      _lateCss = buildLateCSS(prefix, include, exclude, utilMap)
+      if (logs) {
+        const d = "\x1b[2m", r = "\x1b[0m"
+        const badge = "\x1b[46m\x1b[30m frutjam \x1b[0m"
+        console.log("\n" + badge + "  " + d + "v" + VERSION + r + "\n")
+      }
+    },
+    OnceExit(root) {
+      if (!_lateCss) return
+      // Inject into @layer utilities if it exists (correct cascade layer),
+      // otherwise append to root (unlayered CSS beats all @layer rules).
+      let utilLayer = null
+      root.each(node => {
+        if (node.type === "atrule" && node.name === "layer" && node.params === "utilities" && node.nodes) {
+          utilLayer = node
+        }
+      })
+      const nodes = postcss.parse(_lateCss).nodes
+      if (utilLayer) {
+        utilLayer.append(nodes)
+      } else {
+        root.append(nodes)
+      }
+    }
+  }
+}
+frutjam.postcss = true

package/package.json

@@ -1,42 +1,51 @@
 {
   "name": "frutjam",
-  "version": "2.7.1-beta.1",
-  "description": "A utility-first CSS framework UI Library",
-  "funding": "https://ko-fi.com/nezanuha",
-  "main": "./dist/frutjam.local.css",
-  "browser": "dist/frutjam.local.css",
-  "style": "./dist/frutjam.local.css",
+  "version": "3.0.0",
+  "description": "A utility-first CSS UI Library for Tailwind CSS",
+  "type": "module",
+  "exports": {
+    ".": "./dist/plugin.js",
+    "./postcss": "./index.js",
+    "./js": "./packages/js/index.js",
+    "./js/*": "./packages/js/*.js",
+    "./react": "./packages/react/index.js",
+    "./react/*": "./packages/react/*.js",
+    "./components/*": "./dist/components/*/index.js",
+    "./utilities/*": "./dist/utilities/*/index.js",
+    "./themes/*": "./dist/themes/*/index.js",
+    "./base/tokens": "./dist/base/tokens/index.js",
+    "./base/reboot": "./dist/base/reboot/index.js",
+    "./functions/addPrefix": "./dist/functions/addPrefix.js"
+  },
   "files": [
+    "index.js",
     "dist/",
-    "README.md",
-    "LICENSE"
+    "packages/"
   ],
+  "style": "./dist/frutjam.min.css",
+  "scripts": {
+    "clean": "rimraf ./dist",
+    "build:cdn": "node scripts/build-cdn.mjs",
+    "build:plugin": "node scripts/build-plugin.mjs",
+    "build": "rimraf ./dist && node scripts/build-cdn.mjs && node scripts/build-plugin.mjs",
+    "prepublishOnly": "rimraf ./dist && node scripts/build-cdn.mjs && node scripts/build-plugin.mjs",
+    "postversion": "git push origin main --tags"
+  },
+  "funding": "https://ko-fi.com/nezanuha",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nezanuha/frutjam.git"
   },
-  "exports": {
-    ".": "./dist/frutjam.local.css",
-    "./safelist": "./dist/frutjam.safelist.local.css"
-  },
-  "scripts": {
-    "clean": "rimraf  ./dist",
-    "dev": "webpack serve --config scripts/webpack.config.dev.js --mode=development",
-    "build:local": "node scripts/build-local.mjs && node scripts/build-safelist-local.mjs",
-    "build:browser": "webpack --config scripts/webpack.config.prod.js --mode=production",
-    "build": "npm run clean && npm run build:browser && npm run build:local",
-    "prepublishOnly": "npm run build"
-  },
   "publishConfig": {
-    "provenance": true,
-    "access": "public"
+    "access": "public",
+    "provenance": true
   },
   "keywords": [
     "frutjam",
     "tailwindcss",
+    "tailwind css plugin",
     "UI Library",
     "tailwind",
-    "taiwind css",
     "components",
     "tailwind components",
     "tailwind component library",
@@ -49,11 +58,11 @@
     "tailwind django",
     "tailwind rails",
     "tailwind laravel",
-    "tailwind css plugin",
     "component library",
     "tailwind themes",
     "css library",
     "theme",
+    "design system",
     "front-end",
     "framework",
     "W3C standards",
@@ -68,23 +77,25 @@
   "bugs": {
     "url": "https://github.com/nezanuha/frutjam/issues"
   },
-  "dependencies": {
-    "@tailwindcss/postcss": "^4.1.14",
-    "tailwindcss": "^4.1.14"
+  "engines": {
+    "node": ">=18"
+  },
+  "peerDependencies": {
+    "tailwindcss": "^4.0.0",
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
   },
   "devDependencies": {
-    "chalk": "^5.6.2",
-    "css-loader": "^7.1.2",
-    "mini-css-extract-plugin": "^2.9.4",
-    "postcss": "^8.5.6",
-    "postcss-import": "^16.1.1",
-    "postcss-loader": "^8.2.0",
-    "prettier-plugin-tailwindcss": "^0.7.0",
-    "rimraf": "^6.0.1",
-    "style-loader": "^4.0.0",
-    "webpack": "^5.102.1",
-    "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.2",
-    "webpack-remove-empty-scripts": "^1.1.1"
+    "@tailwindcss/postcss": "^4.2.4",
+    "autoprefixer": "^10.5.0",
+    "cssnano": "^7.1.7",
+    "postcss": "^8.5.13",
+    "postcss-js": "^5.1.0",
+    "rimraf": "^6.1.3",
+    "tailwindcss": "^4.2.4"
   }
 }

package/packages/js/carousel.js

@@ -0,0 +1,19 @@
+export function createCarousel(el) {
+  const getItems = () => Array.from(el.querySelectorAll('.carousel-item'))
+  let current = 0
+
+  function goTo(index) {
+    const items = getItems()
+    if (!items.length) return
+    current = Math.max(0, Math.min(index, items.length - 1))
+    items[current].scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })
+  }
+
+  return {
+    goTo,
+    next: () => goTo(current + 1),
+    prev: () => goTo(current - 1),
+    current: () => current,
+    count: () => getItems().length,
+  }
+}

package/packages/js/collapsible.js

@@ -0,0 +1,8 @@
+export function createCollapsible(el) {
+  return {
+    open: () => el.classList.add('collapsible-open'),
+    close: () => el.classList.remove('collapsible-open'),
+    toggle: () => el.classList.toggle('collapsible-open'),
+    isOpen: () => el.classList.contains('collapsible-open'),
+  }
+}

package/packages/js/combobox.js

@@ -0,0 +1,79 @@
+export function createCombobox(el) {
+  const input = el.querySelector('input')
+  let activeIndex = -1
+
+  const allOptions = () => Array.from(el.querySelectorAll('[role="option"], .combobox-option'))
+  const visibleOptions = () => allOptions().filter((o) => !o.hidden)
+
+  function open() {
+    el.classList.add('combobox-open')
+    input?.setAttribute('aria-expanded', 'true')
+  }
+
+  function close() {
+    el.classList.remove('combobox-open')
+    input?.setAttribute('aria-expanded', 'false')
+    highlight(-1)
+  }
+
+  function toggle() {
+    el.classList.contains('combobox-open') ? close() : open()
+  }
+
+  function filter(query) {
+    allOptions().forEach((opt) => {
+      opt.hidden = !opt.textContent.toLowerCase().includes(query.toLowerCase())
+    })
+    highlight(-1)
+  }
+
+  function highlight(index) {
+    const opts = visibleOptions()
+    opts.forEach((o) => o.classList.remove('combobox-option-active'))
+    if (index >= 0 && opts[index]) {
+      opts[index].classList.add('combobox-option-active')
+      opts[index].scrollIntoView({ block: 'nearest' })
+    }
+    activeIndex = index
+  }
+
+  function select(opt) {
+    if (input) input.value = opt.textContent.trim()
+    el.dispatchEvent(new CustomEvent('fj:select', { detail: { value: opt.dataset.value ?? opt.textContent.trim() } }))
+    close()
+  }
+
+  input?.addEventListener('input', (e) => {
+    open()
+    filter(e.target.value)
+  })
+
+  input?.addEventListener('keydown', (e) => {
+    const opts = visibleOptions()
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      if (!el.classList.contains('combobox-open')) { open(); return }
+      highlight(Math.min(activeIndex + 1, opts.length - 1))
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      highlight(Math.max(activeIndex - 1, 0))
+    } else if (e.key === 'Enter' && activeIndex >= 0) {
+      e.preventDefault()
+      select(opts[activeIndex])
+    } else if (e.key === 'Escape') {
+      close()
+    }
+  })
+
+  el.addEventListener('click', (e) => {
+    const opt = e.target.closest('[role="option"], .combobox-option')
+    if (opt) { select(opt); return }
+    if (e.target === input) open()
+  })
+
+  document.addEventListener('click', (e) => {
+    if (!el.contains(e.target)) close()
+  }, { capture: true })
+
+  return { open, close, toggle, filter }
+}

package/packages/js/drawer.js

@@ -0,0 +1 @@
+export { createModal as createDrawer } from './modal.js'

package/packages/js/index.js

@@ -0,0 +1,8 @@
+export { createModal } from './modal.js'
+export { createDrawer } from './drawer.js'
+export { createCollapsible } from './collapsible.js'
+export { createTooltip } from './tooltip.js'
+export { createTabs } from './tabs.js'
+export { createToastManager } from './toast.js'
+export { createCarousel } from './carousel.js'
+export { createCombobox } from './combobox.js'