frutjam 2.3.0-beta.0 → 2.3.0

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 v2.3.0 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */.para-2xl{font-size:var(--text-base);font-size:var(--text-2xl)}.para,.para-2xl,.para-3xl,.para-4xl,.para-5xl,.para-6xl,.para-7xl,.para-8xl,.para-9xl,.para-lg,.para-md,.para-sm,.para-xl,.para-xs{text-wrap-style:pretty;line-height:1.6}.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-5xl{font-size:var(--text-base);font-size:var(--text-5xl)}.para-6xl{font-size:var(--text-base);font-size:var(--text-6xl)}.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-9xl{font-size:var(--text-base);font-size:var(--text-9xl)}.para-lg{font-size:var(--text-base);font-size:var(--text-lg)}.para-md,.para-sm{font-size:var(--text-base)}.para-sm{font-size:var(--text-sm)}.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{font-size:var(--text-base)}

package/dist/utilities/para.css.d.ts

@@ -0,0 +1 @@
+export {};

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-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-on-base)","--tw-prose-pre-bg":"var(--color-base-soft)","--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 v2.3.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-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-on-base);--tw-prose-pre-bg:var(--color-base-soft);--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.d.ts

@@ -0,0 +1 @@
+export {};

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 v2.3.0 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
+/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */.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.d.ts

@@ -0,0 +1 @@
+export {};

package/index.js

@@ -0,0 +1,332 @@
+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 ────────────────────────────────────────────────────────────────────
+
+// Scope one selector part (already split from a comma list) to rootSelector.
+// Returns an array of replacement selectors.
+// [data-theme] selectors become compound with rootSelector so theme variables
+// only apply when data-theme is set directly on the root element — no ancestor
+// inheritance, which would break the isolation guarantee of the root option.
+function scopeThemeSelector(sel, rootSelector) {
+  const t = sel.trimStart()
+  const lead = sel.slice(0, sel.length - t.length)
+
+  // Already remapped from :root (e.g. rootSelector:not([data-theme])) — keep as-is
+  if (t.startsWith(rootSelector)) return [sel]
+
+  // :is([data-theme="x"], [data-theme="y"]) — flatten into individual compound selectors
+  if (t.startsWith(":is([data-theme")) {
+    const values = []
+    const re = /\[data-theme=["']([^"']+)["']\]/g
+    let m
+    while ((m = re.exec(t)) !== null) values.push(m[1])
+    return values.map(v => `${lead}${rootSelector}[data-theme="${v}"]`)
+  }
+
+  // [data-theme="x"] — compound with rootSelector
+  if (/^\[data-theme=/.test(t)) {
+    const m = t.match(/^\[data-theme=["']([^"']+)["']\]/)
+    if (m) return [`${lead}${rootSelector}[data-theme="${m[1]}"]`]
+  }
+
+  // [data-theme] without value (base tokens) — compound with rootSelector
+  if (t.startsWith("[data-theme]")) {
+    return [`${lead}${rootSelector}[data-theme]`]
+  }
+
+  return [sel]
+}
+
+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)
+
+  // Base CSS (theme variables, token definitions, text-color overrides) must NOT be prefixed —
+  // the @utility text-* declarations target the same class names as Tailwind's theme-generated
+  // utilities and must stay unprefixed (e.g. text-primary, not fj-text-primary).
+  let resolvedBase = resolveCopy(baseCss, utilMap)
+  let resolvedModules = resolveCopy(modulesCss, utilMap)
+
+  if (rootSelector !== ":root") {
+    resolvedBase = resolvedBase.replace(/:root\b/g, rootSelector)
+    resolvedModules = resolvedModules.replace(/:root\b/g, rootSelector)
+  }
+
+  let css = resolvedBase + "\n" + applyPrefix(resolvedModules, prefix)
+
+  const customThemes = buildCustomThemes(themes)
+  if (customThemes) css += "\n\n" + customThemes
+
+  if (rootSelector !== ":root") {
+    const ast = postcss.parse(css)
+    ast.walkRules(rule => {
+      rule.selectors = rule.selectors.flatMap(sel => scopeThemeSelector(sel, rootSelector))
+    })
+    css = ast.toString()
+  }
+
+  // Extract @utility text-* rules from base CSS and convert to plain CSS for late injection.
+  // In the PostCSS path, Tailwind's theme-generated text-{color} utilities take precedence over
+  // same-named @utility definitions. Injecting them as plain CSS at the end of @layer utilities
+  // via OnceExit ensures they appear after the theme-generated rules and therefore win.
+  const baseUtilMap = buildUtilityMap(resolvedBase)
+  const textColorOverrides = [...baseUtilMap.entries()]
+    .filter(([name]) => name.startsWith('text-'))
+    .map(([name, body]) => `.${name} {${body}}`)
+    .join('\n')
+
+  return { css, utilMap, textColorOverrides }
+}
+
+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, textColorOverrides } = buildCSS(prefix, themes, reset, rootSelector, include, exclude)
+      root.append(postcss.parse(css).nodes)
+      _lateCss = buildLateCSS(prefix, include, exclude, utilMap)
+      if (textColorOverrides) _lateCss += '\n' + textColorOverrides
+      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,41 +1,80 @@
 {
   "name": "frutjam",
-  "version": "2.3.0-beta.0",
-  "description": "A utility-first CSS framework UI Library",
-  "funding": "https://ko-fi.com/nezanuha",
-  "main": "./dist/frutjam.dev.css",
-  "browser": "dist/frutjam.dev.css",
-  "style": "./dist/frutjam.dev.css",
+  "version": "2.3.0",
+  "description": "CSS-only Tailwind CSS v4 component library, also usable with UnoCSS or no build step at all. 65+ accessible UI components, zero JavaScript, WCAG AA guaranteed. Free MCP server for AI editors included.",
+  "type": "module",
+  "exports": {
+    ".": "./dist/plugin.js",
+    "./unocss": "./packages/unocss/index.js",
+    "./css": {
+      "types": "./dist/frutjam.components.css.d.ts",
+      "default": "./dist/frutjam.components.css"
+    },
+    "./css/full": {
+      "types": "./dist/frutjam.min.css.d.ts",
+      "default": "./dist/frutjam.min.css"
+    },
+    "./css/base": {
+      "types": "./dist/base.css.d.ts",
+      "default": "./dist/base.css"
+    },
+    "./css/components/*": {
+      "types": "./dist/components/*.css.d.ts",
+      "default": "./dist/components/*.css"
+    },
+    "./css/utilities/*": {
+      "types": "./dist/utilities/*.css.d.ts",
+      "default": "./dist/utilities/*.css"
+    },
+    "./css/themes/*": {
+      "types": "./dist/themes/*.css.d.ts",
+      "default": "./dist/themes/*.css"
+    },
+    "./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",
+  "unpkg": "./dist/frutjam.min.css",
+  "jsdelivr": "./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 && node scripts/build-unocss.mjs",
+    "prepublishOnly": "rimraf ./dist && node scripts/build-cdn.mjs && node scripts/build-plugin.mjs && node scripts/build-unocss.mjs && node -e \"const fs=require('fs');fs.copyFileSync('README.md','README.github.md');fs.copyFileSync('README.npm.md','README.md');\"",
+    "postpublish": "node -e \"const fs=require('fs');fs.copyFileSync('README.github.md','README.md');fs.unlinkSync('README.github.md');\"",
+    "postversion": "git push origin main --tags",
+    "build:unocss": "node scripts/build-unocss.mjs"
+  },
+  "funding": "https://ko-fi.com/nezanuha",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nezanuha/frutjam.git"
   },
-  "exports": {
-    ".": "./dist/frutjam.dev.css"
-  },
-  "scripts": {
-    "clean": "rimraf  ./dist",
-    "dev": "webpack serve --mode=development",
-    "build:browser": "node scripts/build/browser.mjs",
-    "build:local": "webpack --config scripts/build/local.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",
@@ -48,18 +87,20 @@
     "tailwind django",
     "tailwind rails",
     "tailwind laravel",
-    "tailwind css plugin",
     "component library",
     "tailwind themes",
     "css library",
     "theme",
-    "front-end",
-    "framework",
-    "W3C standards",
+    "design system",
     "accessibility web development",
     "seo friendly ui",
     "rtl ui",
-    "responsive ui library"
+    "responsive ui library",
+    "unocss",
+    "unocss preset",
+    "unocss component library",
+    "css components",
+    "vanilla css"
   ],
   "author": "Nezanuha",
   "license": "MIT",
@@ -67,23 +108,29 @@
   "bugs": {
     "url": "https://github.com/nezanuha/frutjam/issues"
   },
-  "dependencies": {
-    "@tailwindcss/postcss": "^4.1.11",
-    "tailwindcss": "^4.1.11"
+  "engines": {
+    "node": ">=18"
+  },
+  "peerDependencies": {
+    "tailwindcss": "^4.0.0",
+    "react": ">=18",
+    "@unocss/core": ">=66"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "@unocss/core": {
+      "optional": true
+    }
   },
   "devDependencies": {
-    "chalk": "^5.4.1",
-    "css-loader": "^7.1.2",
-    "mini-css-extract-plugin": "^2.9.2",
-    "postcss": "^8.5.6",
-    "postcss-import": "^16.1.1",
-    "postcss-loader": "^8.1.1",
-    "prettier-plugin-tailwindcss": "^0.6.14",
-    "rimraf": "^6.0.1",
-    "style-loader": "^4.0.0",
-    "webpack": "^5.101.0",
-    "webpack-cli": "^6.0.1",
-    "webpack-dev-server": "^5.2.2",
-    "webpack-remove-empty-scripts": "^1.1.1"
+    "@tailwindcss/postcss": "^4.3.3",
+    "autoprefixer": "^10.6.1",
+    "cssnano": "^9.3.2",
+    "postcss": "^8.5.29",
+    "postcss-js": "^5.1.0",
+    "rimraf": "^6.1.3",
+    "tailwindcss": "^4.3.3"
   }
 }

package/packages/js/carousel.js

@@ -0,0 +1,20 @@
+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))
+    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+    items[current].scrollIntoView({ behavior: reduced ? 'auto' : '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,14 @@
+export function createCollapsible(el) {
+  function syncAria() {
+    const isOpen = el.classList.contains('collapsible-open')
+    const trigger = el.querySelector('[aria-expanded]')
+    if (trigger) trigger.setAttribute('aria-expanded', String(isOpen))
+  }
+
+  return {
+    open: () => { el.classList.add('collapsible-open'); syncAria() },
+    close: () => { el.classList.remove('collapsible-open'); syncAria() },
+    toggle: () => { el.classList.toggle('collapsible-open'); syncAria() },
+    isOpen: () => el.classList.contains('collapsible-open'),
+  }
+}