@skiddph/prui 0.7.0 → 0.8.0

package/dist/theme.js

@@ -1,3 +1,4 @@
+import * as l from "react";
 const u = ["control", "workshop", "ember", "daylight"], d = "prui-theme-", c = /* @__PURE__ */ new Map(), m = [
   "background",
   "surface",
@@ -11,80 +12,80 @@ const u = ["control", "workshop", "ember", "daylight"], d = "prui-theme-", c = /
   "warn",
   "danger"
 ];
-function s(e) {
+function a(e) {
   return `--prui-${e}`;
 }
 function f(e) {
   const t = [];
-  for (const [r, n] of Object.entries(e))
-    n !== void 0 && t.push(`  ${s(r)}: ${n};`);
+  for (const [o, r] of Object.entries(e))
+    r !== void 0 && t.push(`  ${a(o)}: ${r};`);
   return t.join(`
 `);
 }
-function E(e, t) {
-  const r = e.trim().toLowerCase().replace(/[^a-z0-9-]+/g, "-").replace(/^-+|-+$/g, "") || "custom";
-  if (c.set(r, { ...t }), typeof document < "u") {
-    let n = document.getElementById(`prui-custom-theme-${r}`);
-    n || (n = document.createElement("style"), n.id = `prui-custom-theme-${r}`, document.head.appendChild(n)), n.textContent = `.${d}${r} {
+function v(e, t) {
+  const o = e.trim().toLowerCase().replace(/[^a-z0-9-]+/g, "-").replace(/^-+|-+$/g, "") || "custom";
+  if (c.set(o, { ...t }), typeof document < "u") {
+    let r = document.getElementById(`prui-custom-theme-${o}`);
+    r || (r = document.createElement("style"), r.id = `prui-custom-theme-${o}`, document.head.appendChild(r)), r.textContent = `.${d}${o} {
 ${f(t)}
 }`;
   }
-  return r;
+  return o;
 }
-function v() {
+function x() {
   return [...u, ...c.keys()];
 }
-function p(e, t = {}) {
-  const r = t.target ?? (typeof document < "u" ? document.documentElement : null), n = [];
-  if (r) {
-    for (const [o, l] of Object.entries(e))
-      l !== void 0 && (r.style.setProperty(s(o), String(l)), n.push(s(o)));
-    e.radius !== void 0 && (r.style.setProperty("--prui-radius", String(e.radius)), n.push("--prui-radius")), e["dim-op"] !== void 0 && (r.style.setProperty("--prui-dim-op", String(e["dim-op"])), n.push("--prui-dim-op"));
+function h(e, t = {}) {
+  const o = t.target ?? (typeof document < "u" ? document.documentElement : null), r = [];
+  if (o) {
+    for (const [i, s] of Object.entries(e))
+      s !== void 0 && (o.style.setProperty(a(i), String(s)), r.push(a(i)));
+    e.radius !== void 0 && (o.style.setProperty("--prui-radius", String(e.radius)), r.push("--prui-radius")), e["dim-op"] !== void 0 && (o.style.setProperty("--prui-dim-op", String(e["dim-op"])), r.push("--prui-dim-op"));
   }
-  const i = t.storageKey === void 0 ? "prui:tokens" : t.storageKey;
-  return i && typeof localStorage < "u" && localStorage.setItem(i, JSON.stringify(e)), n;
+  const n = t.storageKey === void 0 ? "prui:tokens" : t.storageKey;
+  return n && typeof localStorage < "u" && localStorage.setItem(n, JSON.stringify(e)), r;
 }
-function $(e = {}) {
+function I(e = {}) {
   const t = e.target ?? (typeof document < "u" ? document.documentElement : null);
   if (t) {
-    for (const n of [...m, "radius", "dim-op"])
-      t.style.removeProperty(s(n));
+    for (const r of [...m, "radius", "dim-op"])
+      t.style.removeProperty(a(r));
     t.style.removeProperty("--prui-radius"), t.style.removeProperty("--prui-dim-op");
   }
-  const r = e.storageKey === void 0 ? "prui:tokens" : e.storageKey;
-  r && typeof localStorage < "u" && localStorage.removeItem(r);
+  const o = e.storageKey === void 0 ? "prui:tokens" : e.storageKey;
+  o && typeof localStorage < "u" && localStorage.removeItem(o);
 }
-function w(e = {}) {
+function P(e = {}) {
   if (typeof localStorage > "u") return null;
-  const t = e.storageKey ?? "prui:tokens", r = localStorage.getItem(t);
-  if (!r) return null;
+  const t = e.storageKey ?? "prui:tokens", o = localStorage.getItem(t);
+  if (!o) return null;
   try {
-    const n = JSON.parse(r);
-    return p(n, { target: e.target, storageKey: null }), n;
+    const r = JSON.parse(o);
+    return h(r, { target: e.target, storageKey: null }), r;
   } catch {
     return null;
   }
 }
-function I(e) {
+function b(e) {
   return e === "dark" ? "control" : e === "light" ? "daylight" : e;
 }
-const h = ["control", "workshop", "ember"], g = ["daylight"];
-function y(e) {
-  return h.includes(e);
+const g = ["control", "workshop", "ember"], y = ["daylight"];
+function w(e) {
+  return g.includes(e);
 }
 function K(e) {
-  return g.includes(e);
+  return y.includes(e);
 }
-function a(e) {
+function p(e) {
   const t = c.get(e);
-  return t != null && t.mode ? t.mode : y(e) ? "dark" : "light";
+  return t != null && t.mode ? t.mode : w(e) ? "dark" : "light";
 }
-function k(e, t) {
+function S(e, t) {
   return [`${d}${e}`, "prui-root", `prui-mode-${t}`];
 }
-function S(e) {
+function k(e) {
   const t = [...e.classList].filter(
-    (r) => r.startsWith(d) || r === "prui-root" || r.startsWith("prui-mode-")
+    (o) => o.startsWith(d) || o === "prui-root" || o.startsWith("prui-mode-")
   );
   t.length && e.classList.remove(...t);
 }
@@ -92,20 +93,20 @@ function T(e = {}) {
   const t = e.theme ?? "control";
   if (!(t === "dark" || t === "light" || u.includes(t) || c.has(t)))
     return T({ ...e, theme: "control" });
-  const n = t === "dark" ? "control" : t === "light" ? "daylight" : t, i = e.mode ?? a(n), o = e.target ?? (typeof document < "u" ? document.documentElement : null);
-  o && (S(o), o.classList.add(...k(n, i)), o.dataset.pruiTheme = n, o.dataset.pruiMode = i, o.style.colorScheme = i);
-  const l = e.storageKey === void 0 ? "prui:theme" : e.storageKey;
-  return l && typeof localStorage < "u" && localStorage.setItem(l, JSON.stringify({ theme: n, mode: i })), { theme: n, mode: i };
+  const r = t === "dark" ? "control" : t === "light" ? "daylight" : t, n = e.mode ?? p(r), i = e.target ?? (typeof document < "u" ? document.documentElement : null);
+  i && (k(i), i.classList.add(...S(r, n)), i.dataset.pruiTheme = r, i.dataset.pruiMode = n, i.style.colorScheme = n);
+  const s = e.storageKey === void 0 ? "prui:theme" : e.storageKey;
+  return s && typeof localStorage < "u" && localStorage.setItem(s, JSON.stringify({ theme: r, mode: n })), { theme: r, mode: n };
 }
-function P(e = "prui:theme") {
+function $(e = "prui:theme") {
   if (typeof localStorage > "u") return null;
   const t = localStorage.getItem(e);
   if (!t) return null;
   try {
-    const r = JSON.parse(t), n = u.find((o) => o === r.theme);
-    if (!n) return null;
-    const i = r.mode === "light" || r.mode === "dark" ? r.mode : a(n);
-    return { theme: n, mode: i };
+    const o = JSON.parse(t), r = u.find((i) => i === o.theme);
+    if (!r) return null;
+    const n = o.mode === "light" || o.mode === "dark" ? o.mode : p(r);
+    return { theme: r, mode: n };
   } catch {
     return null;
   }
@@ -114,7 +115,7 @@ function M(e) {
   const t = u.indexOf(e);
   return u[(t + 1) % u.length] ?? "control";
 }
-const b = {
+const z = {
   name: "applyTheme",
   description: "Apply a named PRUI theme and persist the choice.",
   props: [
@@ -123,21 +124,48 @@ const b = {
     { name: "target", type: "HTMLElement", default: "document.documentElement", control: "none" },
     { name: "storageKey", type: "string | null", default: "'prui:theme'", control: "text" }
   ]
+}, E = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536
+};
+function L(e) {
+  const [t, o] = l.useState(!1);
+  return l.useEffect(() => {
+    if (typeof window > "u" || !window.matchMedia) return;
+    const r = window.matchMedia(`(min-width: ${E[e]}px)`), n = () => o(r.matches);
+    return n(), r.addEventListener("change", n), () => r.removeEventListener("change", n);
+  }, [e]), t;
+}
+const O = {
+  radius: ["--prui-radius-1", "--prui-radius-2", "--prui-radius-3", "--prui-radius-full"],
+  zIndex: ["--prui-z-header", "--prui-z-drawer", "--prui-z-overlay", "--prui-z-flyout", "--prui-z-tooltip", "--prui-z-modal", "--prui-z-confirm", "--prui-z-toast", "--prui-z-content"],
+  motion: ["--prui-duration-fast", "--prui-duration-base", "--prui-duration-slow", "--prui-ease-out", "--prui-ease-in-out", "--prui-ease-spring"],
+  spacing: ["--prui-space-1", "--prui-space-2", "--prui-space-3", "--prui-space-4", "--prui-space-5", "--prui-space-6", "--prui-space-8", "--prui-space-10", "--prui-space-12"],
+  typography: ["--prui-text-xs", "--prui-text-sm", "--prui-text-base", "--prui-text-lg", "--prui-text-xl", "--prui-text-2xl", "--prui-text-3xl"],
+  weight: ["--prui-weight-normal", "--prui-weight-medium", "--prui-weight-semibold", "--prui-weight-bold"],
+  elevation: ["--prui-shadow-sm", "--prui-shadow-md", "--prui-shadow-lg", "--prui-shadow-modal"],
+  opacity: ["--prui-opacity-disabled", "--prui-opacity-muted", "--prui-opacity-overlay"]
 };
 export {
+  E as PRUI_BREAKPOINTS,
+  O as PRUI_DESIGN_TOKENS,
   u as PRUI_THEMES,
   m as PRUI_TOKENS,
   T as applyTheme,
-  p as applyThemeTokens,
-  $ as clearAppliedTokens,
-  E as defineTheme,
-  y as isDarkTheme,
+  h as applyThemeTokens,
+  I as clearAppliedTokens,
+  v as defineTheme,
+  w as isDarkTheme,
   K as isLightTheme,
-  v as listThemes,
+  x as listThemes,
   M as nextTheme,
-  P as readPersistedTheme,
-  I as resolveThemeName,
-  w as restoreAppliedTokens,
-  b as themeMeta,
-  a as themeMode
+  $ as readPersistedTheme,
+  b as resolveThemeName,
+  P as restoreAppliedTokens,
+  z as themeMeta,
+  p as themeMode,
+  L as useBreakpointAtLeast
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skiddph/prui",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "PRUI component system: primitives, app-layer super-components, pages, and themes",
   "type": "module",
   "license": "Apache-2.0",
@@ -31,6 +31,10 @@
       "types": "./dist/forms/index.d.ts",
       "import": "./dist/forms.js"
     },
+    "./i18n": {
+      "types": "./dist/i18n/index.d.ts",
+      "import": "./dist/i18n.js"
+    },
     "./pages": {
       "types": "./dist/pages/index.d.ts",
       "import": "./dist/pages.js"
@@ -52,6 +56,7 @@
     "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
+    "@playwright/test": "^1.63.0",
     "@tailwindcss/cli": "^4.3.3",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
@@ -60,6 +65,7 @@
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",
     "@vitejs/plugin-react": "^4.5.0",
+    "axe-core": "^4.13.0",
     "jsdom": "^26.1.0",
     "lucide-react": "^0.525.0",
     "react": "^19.1.0",
@@ -68,7 +74,8 @@
     "typescript": "^5.9.3",
     "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^3.2.4"
+    "vitest": "^3.2.4",
+    "vitest-axe": "^0.1.0"
   },
   "repository": {
     "type": "git",