vunor 0.0.27 → 0.0.30

package/dist/theme.d.ts

@@ -34,19 +34,19 @@ declare const themeFactory: (opts: Required<TVunorUnoPresetOpts> & {
     }>;
     theme: {
         colors: {
-            [x: string]: string;
+            [x: string]: string | undefined;
         };
         surfaces: Record<string, TVunorSurfaceConfig>;
-        reverseLightLayers: boolean;
-        reverseDarkLayers: boolean;
+        reverseLightLayers: boolean | undefined;
+        reverseDarkLayers: boolean | undefined;
         lineHeight: {
             fingertip: string;
             'fingertip-half': string;
-            'fingertip-xs': string;
-            'fingertip-s': string;
-            'fingertip-m': string;
-            'fingertip-l': string;
-            'fingertip-xl': string;
+            'fingertip-xs': string | undefined;
+            'fingertip-s': string | undefined;
+            'fingertip-m': string | undefined;
+            'fingertip-l': string | undefined;
+            'fingertip-xl': string | undefined;
         };
         spacing: Record<string, string>;
         fontWeight: Record<string, string>;

package/dist/theme.mjs

@@ -1,7 +1,7 @@
-import N, { defu as F } from "defu";
-import { presetWind as R } from "unocss";
-import { palitra as w, color as z } from "@prostojs/palitra";
-const u = (r) => r, A = u({
+import V, { defu as w } from "defu";
+import { presetWind as L } from "unocss";
+import { palitra as v, color as x } from "@prostojs/palitra";
+const u = (r) => r, N = u({
   "toasts-viewport": "[--viewport-padding:_25px] fixed bottom-0 left-0 flex flex-col p-[var(--viewport-padding)] gap-[10px] w-[390px] max-h-50vh max-w-[100vw] m-0 list-none z-[2147483647] outline-none",
   "toast-root": {
     "": [
@@ -23,7 +23,7 @@ const u = (r) => r, A = u({
     "data-[swipe=left]:": "[--toast-out-x:calc(-100%-var(--viewport-padding))]",
     "data-[swipe=right]:": "[--toast-out-x:calc(100%+var(--viewport-padding))]"
   }
-}), D = u({
+}), R = u({
   btn: {
     "": "h-fingertip flex items-center justify-center px-$m gap-$xs select-none fw-bold tracking-wide relative",
     "[&.btn-round]:": "px-fingertip-half rounded-fingertip-half",
@@ -48,7 +48,7 @@ const u = (r) => r, A = u({
     "group-[.btn-square]/btn:": "font-size-1.5em m-0!",
     "group-[.btn-round.btn-square]/btn:": "m-0!"
   }
-}), H = u({
+}), A = u({
   "calendar-root": "inline-block",
   "calendar-header": "flex items-center justify-between mb-$s fw-$bold",
   "calendar-grid-row": "grid grid-cols-7 text-body-s",
@@ -79,7 +79,7 @@ const u = (r) => r, A = u({
       "focus:": "text-current/100 animate-blinking animate-count-infinite"
     }
   }
-}), C = [
+}), D = [
   "h1",
   "h2",
   "h3",
@@ -91,9 +91,9 @@ const u = (r) => r, A = u({
   "body",
   "body-s",
   "callout"
-], T = u({
-  card: `data-[rounded=true]:rounded-$card-spacing data-[dense=true]:card-dense! ${C.map((r) => `data-[level=${r}]:card-${r}`).join(" ")}`
-}), X = u({
+], H = u({
+  card: `data-[rounded=true]:rounded-$card-spacing data-[dense=true]:card-dense! ${D.map((r) => `data-[level=${r}]:card-${r}`).join(" ")}`
+}), C = u({
   "checkbox-root": {
     "": "text-body select-none flex gap-$m cursor-default current-bg-scope-color-500 current-border-scope-color-500",
     "data-[error=true]:": "current-border-error-500",
@@ -116,7 +116,7 @@ const u = (r) => r, A = u({
   "checkbox-label": {
     "": "select-none text-body lh-1.5em"
   }
-}), q = u({
+}), T = u({
   "combobox-multi-input": "i8-input relative flex items-center",
   "combobox-multi-items": "text-ellipsis overflow-hidden whitespace-nowrap absolute max-w-full pr-$m lh-1em",
   "combobox-embedded-input": "text-left outline-0 outline-offset-0",
@@ -124,7 +124,7 @@ const u = (r) => r, A = u({
     "": "hover:current-icon-scope-color-500 hover:icon-current cursor-pointer",
     "group-[[aria-expanded=true]]/i8:": "-scale-100"
   }
-}), M = u({
+}), X = u({
   "dialog-overlay": {
     "": "bg-black/55 fixed inset-0 z-30 animate-dialog-overlay-in",
     "data-[closing]": "animate-dialog-overlay-out opacity-0"
@@ -137,17 +137,17 @@ const u = (r) => r, A = u({
   "dialog-title": "text-mb-0",
   "dialog-close": "absolute right-$card-spacing top-$card-spacing hover:bg-grey-500/10 rounded p-$xxs",
   "dialog-footer": "flex-shrink-0 flex gap-$s justify-end border-t px-$card-spacing py-$m"
-}), I = u({
+}), q = u({
   "loading-indicator": "cursor-wait",
   "loading-indicator-ring": {
     "": "animate-spin animate-duration-1500",
     "[&>circle]:": "animate-loading-dashoffset animate-count-infinite animate-duration-2500"
   },
   "inner-loading": "bg-white/50 dark:bg-black/50 flex items-center justify-center absolute left-0 top-0 right-0 bottom-0 z-5 cursor-wait"
-}), B = u({
+}), M = u({
   "menu-root": "flex flex-col overflow-hidden",
   "menu-item": "justify-start c8-flat gap-$m w-full fw-400"
-}), E = u({
+}), I = u({
   "progress-track": {
     "": "relative overflow-hidden bg-grey-500/20 rounded",
     "data-[loading]:after:": [
@@ -169,7 +169,7 @@ const u = (r) => r, A = u({
     "": "bg-scope-color-400 rounded w-full h-full transition-transform duration-[660ms]",
     "dark:": "bg-scope-color-600"
   }
-}), Y = u({
+}), B = u({
   "rb-container": {
     "": "flex flex-col gap-$s text-body"
   },
@@ -199,7 +199,7 @@ const u = (r) => r, A = u({
     "": "select-none px-$s text-body leading-none lh-1.25em",
     "aria-[disabled=true]:": "scope-grey opacity-50 cursor-not-allowed"
   }
-}), U = u({
+}), E = u({
   "select-content": {
     "": "min-w-[60px] rounded-base surface-0 bg-current overflow-hidden shadow-popup z-[100] current-border-grey-400 border-current/20 ",
     "data-[design=round]:": "rounded-fingertip-half",
@@ -225,7 +225,7 @@ const u = (r) => r, A = u({
     "[&>span]:data-[state=checked]:": "text-scope-color-500 fw-700!"
   },
   "select-separator": "h-[1px] bg-grey-500/10 mx-$s"
-}), J = u({
+}), Y = u({
   slider: {
     "": "relative flex items-center select-none touch-none min-w-2em min-h-2em"
   },
@@ -245,28 +245,28 @@ const u = (r) => r, A = u({
       "focus:": "outline-[0.5em]"
     }
   }
-}), G = u({
+}), U = u({
   "tabs-indicator": "absolute left-0 h-[2px] bottom-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] rounded-full transition-all duration-200 bg-scope-color-500",
   tab: "h-fingertip rounded flex items-center justify-center px-$m gap-$m select-none"
-}), K = [
-  T,
+}), J = [
+  H,
+  M,
+  R,
+  C,
   B,
-  D,
-  X,
+  E,
+  T,
   Y,
-  U,
   q,
-  J,
-  I,
-  G,
-  M,
-  H,
-  E,
+  U,
+  X,
   A,
+  I,
+  N,
   {
     "shadow-popup": "shadow-[0_0_10px_rgba(0,0,0,0.1),0_4px_20px_rgba(0,0,0,0.15)]"
   }
-], Q = u({
+], G = u({
   // FILLED
   "c8-filled": {
     "": "current-bg-scope-color-500 rounded-base current-text-white current-icon-white icon-current/100 bg-current  text-current",
@@ -338,7 +338,7 @@ const u = (r) => r, A = u({
   "c8-light-active": {
     "not-([disabled]):": "bg-current/20"
   }
-}), Z = u({
+}), K = u({
   i8: {
     "": "h-fingertip min-w-3em flex items-center select-none relative icon-current content-box",
     "data-[type=textarea]:": "min-h-fingertip h-auto items-start",
@@ -478,22 +478,22 @@ const u = (r) => r, A = u({
 function h(r) {
   let t = "";
   for (const [e, o] of Object.entries(r)) {
-    const i = V(o);
-    t += `${i.map((a) => `${e}${a}`).join(" ")} `;
+    const i = W(o);
+    t += `${i.map((c) => `${e}${c}`).join(" ")} `;
   }
   return t.trim();
 }
-function V(r) {
+function W(r) {
   if (typeof r == "string")
     return r.split(" ");
   if (Array.isArray(r))
     return r;
   const t = [];
   for (const [e, o] of Object.entries(r))
-    t.push(...V(o).map((i) => `${e}${i}`));
+    t.push(...W(o).map((i) => `${e}${i}`));
   return t;
 }
-const ee = (r, t) => {
+const Q = (r, t) => {
   const e = {}, o = /* @__PURE__ */ new Set([...Object.keys(t), ...Object.keys(r)]);
   for (const i of Array.from(o))
     if (!Object.prototype.hasOwnProperty.call(t, i))
@@ -501,11 +501,11 @@ const ee = (r, t) => {
     else if (!Object.prototype.hasOwnProperty.call(r, i))
       e[i] = t[i];
     else {
-      let a = t[i], c = r[i];
-      Array.isArray(a) && (a = a.join(" ")), Array.isArray(c) && (c = c.join(" ")), typeof a == "string" && typeof c == "string" ? e[i] = `${c} ${a}` : typeof a == "object" && typeof c == "string" ? e[i] = `${c} ${h(a)}` : typeof a == "string" && typeof c == "object" ? e[i] = `${h(c)} ${a}` : typeof a == "object" && typeof c == "object" && (e[i] = `${h(c)} ${h(a)}`);
+      let c = t[i], a = r[i];
+      Array.isArray(c) && (c = c.join(" ")), Array.isArray(a) && (a = a.join(" ")), typeof c == "string" && typeof a == "string" ? e[i] = `${a} ${c}` : typeof c == "object" && typeof a == "string" ? e[i] = `${a} ${h(c)}` : typeof c == "string" && typeof a == "object" ? e[i] = `${h(a)} ${c}` : typeof c == "object" && typeof a == "object" && (e[i] = `${h(a)} ${h(c)}`);
     }
   return e;
-}, L = (r) => r.reduce((t, e) => ee(t, e), {}), re = {
+}, _ = (r) => r.reduce((t, e) => Q(t, e), {}), Z = {
   colors: {
     primary: { color: "#004eaf", preserveInputColor: !0, saturate: { dark: -0.2, light: -0.2 } },
     grey: { color: "#858892", saturate: { dark: 0, light: 0 } },
@@ -656,35 +656,34 @@ const ee = (r, t) => {
     ]
   }
 };
-function te(r) {
-  var d, f, v, $, k, x, y;
-  const t = (r == null ? void 0 : r.colors) || {};
-  for (const S of Object.keys(t)) {
-    const j = (d = r == null ? void 0 : r.colors) == null ? void 0 : d[S];
-    typeof j == "string" && (t[S] = { color: j });
+function ee(r) {
+  const t = r?.colors || {};
+  for (const d of Object.keys(t)) {
+    const f = r?.colors?.[d];
+    typeof f == "string" && (t[d] = { color: f });
   }
-  const e = N({ ...r, colors: t }, re), o = {
+  const e = V({ ...r, colors: t }, Z), o = {
     count: 5,
     preserveInputColor: !1,
     luminance: {
-      dark: ((f = e.layerPalette.luminance) == null ? void 0 : f.dark) ?? e.darkest,
-      light: ((v = e.layerPalette.luminance) == null ? void 0 : v.light) ?? e.darkest + e.layersDepth,
+      dark: e.layerPalette.luminance?.dark ?? e.darkest,
+      light: e.layerPalette.luminance?.light ?? e.darkest + e.layersDepth,
       useMiddle: !1
     },
     saturate: e.layerPalette.saturate,
     vivid: e.layerPalette.vivid,
     suffixes: ["dark-0", "dark-1", "dark-2", "dark-3", "dark-4"]
-  }, i = w(
-    W(e.colors, e.layerPalette.desaturate),
+  }, i = v(
+    z(e.colors, e.layerPalette.desaturate),
     o
   ).toStrings();
   o.suffixes = ["light-0", "light-1", "light-2", "light-3", "light-4"].reverse();
-  const a = o.luminance.light - o.luminance.dark;
-  o.luminance = { dark: 1 - a, light: 1, useMiddle: !1 };
-  const c = w(
-    W(e.colors, e.layerPalette.desaturate),
+  const c = o.luminance.light - o.luminance.dark;
+  o.luminance = { dark: 1 - c, light: 1, useMiddle: !1 };
+  const a = v(
+    z(e.colors, e.layerPalette.desaturate),
     o
-  ).toStrings(), l = w(
+  ).toStrings(), l = v(
     {
       primary: e.colors.primary,
       grey: e.colors.grey,
@@ -698,10 +697,10 @@ function te(r) {
       count: 10,
       preserveInputColor: e.mainPalette.preserveInputColor,
       luminance: {
-        dark: (($ = e.mainPalette.luminance) == null ? void 0 : $.dark) ?? e.darkest + e.layersDepth + 0.02,
-        light: ((k = e.mainPalette.luminance) == null ? void 0 : k.light) ?? e.lightest,
-        useMiddle: (x = e.mainPalette.luminance) == null ? void 0 : x.useMiddle,
-        middle: (y = e.mainPalette.luminance) == null ? void 0 : y.middle
+        dark: e.mainPalette.luminance?.dark ?? e.darkest + e.layersDepth + 0.02,
+        light: e.mainPalette.luminance?.light ?? e.lightest,
+        useMiddle: e.mainPalette.luminance?.useMiddle,
+        middle: e.mainPalette.luminance?.middle
       },
       saturate: e.mainPalette.saturate,
       vivid: e.mainPalette.vivid
@@ -711,24 +710,24 @@ function te(r) {
     opts: e,
     colors: {
       ...i,
-      ...c,
+      ...a,
       ...l
     },
     surfaces: e.surfaces
   };
 }
-function W(r, t = 0.5) {
+function z(r, t = 0.5) {
   const e = {};
   for (const [o, i] of Object.entries(r)) {
-    const a = typeof i == "string" ? i : i.color;
-    if (a) {
-      const [c, l, d] = z(a).hsl();
-      e[o] = z(c, l * t, d, "hsl").hex();
+    const c = typeof i == "string" ? i : i.color;
+    if (c) {
+      const [a, l, d] = x(c).hsl();
+      e[o] = x(a, l * t, d, "hsl").hex();
     }
   }
   return e;
 }
-function oe() {
+function re() {
   const r = (t, e) => e ? 4 - t : t;
   return [
     [
@@ -745,9 +744,9 @@ function oe() {
     [
       /^(bg|text|current-text|current-bg|current-icon|current-border|current-outline|current-caret|current-hl|i8-bg|i8-border|i8-outline)-layer-([0-4])$/,
       ([, t, e], { theme: o }) => {
-        const i = r(Number(e), o.reverseDarkLayers), a = r(Number(e), o.reverseLightLayers);
+        const i = r(Number(e), o.reverseDarkLayers), c = r(Number(e), o.reverseLightLayers);
         return h({
-          "": `${t}-scope-light-${a}`,
+          "": `${t}-scope-light-${c}`,
           "dark:": `${t}-scope-dark-${i}`,
           "[&.dark]:": `${t}-scope-dark-${i}`
         });
@@ -771,11 +770,10 @@ function g(r, t = 0) {
   return Math.round(r * e) / e;
 }
 function m(r, t, e = 3) {
-  var a;
-  const o = Number.parseFloat(r), i = ((a = /(px|em|rem|%)$/.exec(r)) == null ? void 0 : a[1]) || "";
+  const o = Number.parseFloat(r), i = /(px|em|rem|%)$/.exec(r)?.[1] || "";
   return `${g(o * t, e)}${i}`;
 }
-const ie = {
+const te = {
   getCSS: ({ theme: r }) => `${b("body", r.fontSize.body) + // renderFontCss('label', theme.fontSize.label) +
   b("figcaption", r.fontSize.caption) + b("h1", r.fontSize.h1) + b("h2", r.fontSize.h2) + b("h3", r.fontSize.h3) + b("h4", r.fontSize.h4) + b("h5", r.fontSize.h5) + b("h6", r.fontSize.h6)}
 :root {
@@ -829,10 +827,10 @@ function b(r, t) {
 `;
 }
 function s(r) {
-  const [t, e, o, i] = z(r).rgba();
+  const [t, e, o, i] = x(r).rgba();
   return `${t} ${e} ${o}`;
 }
-function O(r) {
+function S(r) {
   return {
     bg: "--un-bg-opacity",
     text: "--un-text-opacity",
@@ -846,7 +844,7 @@ function O(r) {
     ring: "--un-ring-opacity"
   }[r];
 }
-function P(r) {
+function j(r) {
   return {
     bg: "background-color",
     text: "color",
@@ -860,7 +858,7 @@ function P(r) {
     ring: "--un-ring-color"
   }[r];
 }
-const ae = [
+const oe = [
   [
     /^current-(text|bg|icon|border|outline|caret|hl)-(.+)$/,
     (r, { theme: t }) => {
@@ -885,7 +883,7 @@ const ae = [
   [
     /^(text|bg|icon|border|outline|caret|fill|shadow|ring)-current(-text|-bg|-icon|-border|-outline|-caret|-hl)?(\/\d{1,3})?$/,
     (r, { theme: t }) => {
-      const e = r[1], o = r[2] || `-${e}`, i = O(e), a = P(e), c = r[3], l = c ? Number(c.slice(1)) / 100 : 1, d = l === 1 ? `var(${i})` : l;
+      const e = r[1], o = r[2] || `-${e}`, i = S(e), c = j(e), a = r[3], l = a ? Number(a.slice(1)) / 100 : 1, d = l === 1 ? `var(${i})` : l;
       return e === "icon" ? {
         [i]: l,
         "--current-icon": o === "-hl" ? `var(--current${o})` : void 0
@@ -894,7 +892,7 @@ const ae = [
         [`--un-${e}-color`]: `rgb(var(--current-border) / ${d})`
       } : {
         [i]: l,
-        [a]: `rgb(var(--current${o}) / ${d})`
+        [c]: `rgb(var(--current${o}) / ${d})`
       };
     }
   ],
@@ -932,9 +930,9 @@ const ae = [
   [
     /^(bg|text|fill|stroke|border|outline|icon|caret)-scope-((?:color|dark|light|text|bg|white|black|icon)(?:-\d+)?)(\/\d{1,3})?$/,
     (r, { theme: t }) => {
-      const e = P(r[1]), o = O(r[1]), i = r[2], a = r[3], c = a ? Number(a.slice(1)) / 100 : 1, l = i.startsWith("color") ? `grey-${i.slice(6)}` : `grey-${i}`, d = c === 1 ? `var(${o})` : c;
+      const e = j(r[1]), o = S(r[1]), i = r[2], c = r[3], a = c ? Number(c.slice(1)) / 100 : 1, l = i.startsWith("color") ? `grey-${i.slice(6)}` : `grey-${i}`, d = a === 1 ? `var(${o})` : a;
       return {
-        [o]: c,
+        [o]: a,
         [e]: `rgb(var(--scope-${i}, ${t.colors[l] || ""}) / ${d})`
       };
     }
@@ -975,7 +973,7 @@ const ae = [
       height: "var(--icon-size, 1em)"
     })
   ]
-], ce = [
+], ie = [
   [
     /^i8-(border|outline|bg)-(.+)$/,
     (r, { theme: t }) => {
@@ -997,21 +995,21 @@ const ae = [
         return {
           [`--i8-${e}-color`]: s(String(i.DEFAULT || i))
         };
-      const a = t.spacing[o];
-      if (a)
+      const c = t.spacing[o];
+      if (c)
         return {
-          [`--i8-${e}-width`]: a
+          [`--i8-${e}-width`]: c
         };
       if (o.endsWith("px") || o.endsWith("em") || o.endsWith("rem"))
         return {
           [`--i8-${e}-width`]: o
         };
       if (o.startsWith("[") && o.endsWith("]")) {
-        const c = o.slice(1, -1);
-        return c.endsWith("px") || c.endsWith("em") || c.endsWith("rem") ? {
-          [`--i8-${e}-width`]: c
+        const a = o.slice(1, -1);
+        return a.endsWith("px") || a.endsWith("em") || a.endsWith("rem") ? {
+          [`--i8-${e}-width`]: a
         } : {
-          [`--i8-${e}-color`]: c
+          [`--i8-${e}-color`]: a
         };
       }
     }
@@ -1036,36 +1034,36 @@ const ae = [
         border: "--i8-border-color, var(--current-border)",
         outline: "--i8-outline-color, var(--current-outline)",
         bg: "--i8-bg-color, var(--current-bg)"
-      }[e], a = {
+      }[e], c = {
         border: "--i8-border-opacity, 0.2",
         outline: "--i8-outline-opacity, 0.5",
         bg: "--i8-bg-opacity, 1"
       }[e];
       return e === "bg" ? {
-        [o]: `rgb(var(${i}) / var(${a}))`
+        [o]: `rgb(var(${i}) / var(${c}))`
       } : {
-        [o]: `rgb(var(${i}) / var(${a}))`,
+        [o]: `rgb(var(${i}) / var(${c}))`,
         [`${e}-width`]: `var(--i8-${e}-width, ${e === "border" ? 1 : 2}px)`
       };
     }
   ]
-], ne = [
+], ae = [
   [
     // special text margin (vertical) that compensates
     // the line height
     /^text-m([bty])?-(.*)$/,
     (r, { theme: t }) => {
-      const e = r[1], o = r[2], i = e ? { y: ["top", "bottom"], t: ["top"], b: ["bottom"] }[e] : ["top", "bottom", "left", "right"], a = {};
+      const e = r[1], o = r[2], i = e ? { y: ["top", "bottom"], t: ["top"], b: ["bottom"] }[e] : ["top", "bottom", "left", "right"], c = {};
       if (t.spacing[o]) {
-        for (const c of i)
-          a[`margin-${c}`] = ["left", "right"].includes(c) ? t.spacing[o] : `calc(${t.spacing[o]} + var(--font-${c === "top" ? "tc" : "bc"}))`;
-        return a;
+        for (const a of i)
+          c[`margin-${a}`] = ["left", "right"].includes(a) ? t.spacing[o] : `calc(${t.spacing[o]} + var(--font-${a === "top" ? "tc" : "bc"}))`;
+        return c;
       } else if (/^\d+(em|rem|px)?$/.test(o)) {
-        let c = o;
-        /^[\d.]+$/.test(o) && (c = `${Number(o) * 0.25}rem`);
+        let a = o;
+        /^[\d.]+$/.test(o) && (a = `${Number(o) * 0.25}rem`);
         for (const l of i)
-          a[`margin-${l}`] = ["left", "right"].includes(l) ? c : `calc(${c} + var(--font-${l === "top" ? "tc" : "bc"}))`;
-        return a;
+          c[`margin-${l}`] = ["left", "right"].includes(l) ? a : `calc(${a} + var(--font-${l === "top" ? "tc" : "bc"}))`;
+        return c;
       }
     },
     { layer: "utilities" }
@@ -1123,10 +1121,10 @@ const ae = [
         };
     }
   ]
-], le = [
-  ...ne,
+], ce = [
   ...ae,
-  ...ce
+  ...oe,
+  ...ie
 ];
 function n(r, t = 1) {
   return t * 1.618 ** r;
@@ -1140,7 +1138,7 @@ function p(r, t, e, o, i) {
     spacing: i
   };
 }
-const se = {
+const ne = {
   h1: (
     /*          */
     p(
@@ -1296,11 +1294,11 @@ const se = {
     )
   )
 };
-function de(r, t, e, o, i, a = 1, c = 0.5) {
-  const l = r * a, f = (o * r - l) / r, v = l / 2, $ = l * c - v + f / 2, k = l * (1 - c) - v + f / 2, x = g($, 4), y = g(k, 4);
+function le(r, t, e, o, i, c = 1, a = 0.5) {
+  const l = r * c, f = (o * r - l) / r, y = l / 2, O = l * a - y + f / 2, P = l * (1 - a) - y + f / 2, $ = g(O, 4), k = g(P, 4);
   return {
-    mt: x,
-    mb: y,
+    mt: $,
+    mb: k,
     size: r,
     correctedSize: l,
     theme: [
@@ -1309,8 +1307,8 @@ function de(r, t, e, o, i, a = 1, c = 0.5) {
         "--font-bold": e,
         "--font-size": `${r}em`,
         "--font-corrected": `${l}em`,
-        "--font-bc": `${-y}em`,
-        "--font-tc": `${-x}em`,
+        "--font-bc": `${-k}em`,
+        "--font-tc": `${-$}em`,
         "font-weight": t,
         "line-height": `${o}em`,
         "letter-spacing": `${i}em`
@@ -1322,7 +1320,7 @@ function de(r, t, e, o, i, a = 1, c = 0.5) {
     ]
   };
 }
-const ue = (r) => {
+const se = (r) => {
   const t = {
     // canonical
     $xxs: `${g(1 / r.spacingFactor ** 3, 3)}em`,
@@ -1364,7 +1362,7 @@ const ue = (r) => {
     base: r.baseRadius
   }, i = {
     $bold: "var(--font-bold)"
-  }, a = {
+  }, c = {
     "card-header": [
       "var(--card-heading-size)",
       {
@@ -1380,8 +1378,8 @@ const ue = (r) => {
     ]
   };
   for (const [l, d] of Object.entries(r.typography))
-    if (d != null && d.size) {
-      const f = de(
+    if (d?.size) {
+      const f = le(
         d.size || 1,
         d.weight || 400,
         d.boldWeight || 700,
@@ -1390,14 +1388,14 @@ const ue = (r) => {
         d.actualHeightFactor || r.actualFontHeightFactor,
         d.actualHeightTopBottomRatio || r.actualFontHeightTopBottomRatio
       );
-      a[l] = f.theme, t[l] = `${f.size}em`;
+      c[l] = f.theme, t[l] = `${f.size}em`;
     }
-  const c = te(r.palette);
+  const a = ee(r.palette);
   return {
-    paletteOpts: c.opts,
+    paletteOpts: a.opts,
     theme: {
-      colors: c.colors,
-      surfaces: c.surfaces,
+      colors: a.colors,
+      surfaces: a.surfaces,
       // borderColor: ,
       reverseLightLayers: r.layers.reverseLight,
       reverseDarkLayers: r.layers.reverseDark,
@@ -1406,7 +1404,7 @@ const ue = (r) => {
       fontWeight: i,
       actualFontHeightFactor: r.actualFontHeightFactor,
       cardSpacingFactor: r.cardSpacingFactor,
-      fontSize: a,
+      fontSize: c,
       width: t,
       height: t,
       maxWidth: t,
@@ -1418,10 +1416,10 @@ const ue = (r) => {
     }
   };
 };
-function _(r, t = 1) {
+function F(r, t = 1) {
   return t * Math.sqrt(1.618) ** r;
 }
-const pe = {
+const de = {
   spacingFactor: 1.618,
   actualFontHeightFactor: 1,
   actualFontHeightTopBottomRatio: 0.52,
@@ -1429,14 +1427,14 @@ const pe = {
     regular: 1,
     dense: 0.6
   },
-  typography: se,
+  typography: ne,
   layers: {
     reverseDark: !1,
     reverseLight: !1
   },
   fingertip: {
-    xs: `${g(_(-2, 3), 3)}em`,
-    s: `${g(_(-1, 3), 3)}em`,
+    xs: `${g(F(-2, 3), 3)}em`,
+    s: `${g(F(-1, 3), 3)}em`,
     m: "3em",
     l: "3.5em",
     xl: "4em"
@@ -1508,10 +1506,10 @@ const pe = {
       }`
     }
   }
-}, xe = (r) => {
-  const t = F(r, pe), e = ge();
-  e.preflights || (e.preflights = []), e.preflights.push(ie), e.rules || (e.rules = []), e.rules.push(...le);
-  const o = oe(), i = ue(t);
+}, me = (r) => {
+  const t = w(r, de), e = ue();
+  e.preflights || (e.preflights = []), e.preflights.push(te), e.rules || (e.rules = []), e.rules.push(...ce);
+  const o = re(), i = se(t);
   return e.preflights.push({
     getCSS: () => `__vunor_palette_options {background-image: url("data:image/gif;base64,${Buffer.from(
       JSON.stringify({ ...i.paletteOpts, surfaces: void 0 })
@@ -1519,7 +1517,7 @@ const pe = {
   }), {
     ...e,
     name: "vunor",
-    theme: F(i.theme, e.theme),
+    theme: w(i.theme, e.theme),
     shortcuts: o,
     layers: {
       preflights: 0,
@@ -1529,26 +1527,25 @@ const pe = {
     }
   };
 };
-function ge() {
-  var t;
-  const r = R();
-  return (t = r.rules) == null || t.forEach((e) => {
-    e[0] instanceof RegExp && (e[0].source.startsWith("^m-") || e[0].source.startsWith("^ma?") || e[0].source.startsWith("^p-?") || e[0].source.startsWith("^pa?")) && (e[2] = e[2] || {}, e[2].layer = "utilities");
+function ue() {
+  const r = L();
+  return r.rules?.forEach((t) => {
+    t[0] instanceof RegExp && (t[0].source.startsWith("^m-") || t[0].source.startsWith("^ma?") || t[0].source.startsWith("^p-?") || t[0].source.startsWith("^pa?")) && (t[2] = t[2] || {}, t[2].layer = "utilities");
   }), r;
 }
-const fe = [Z, Q, ...K], be = L(fe);
-function ye(r, t = be) {
-  const e = r ? L([t, r]) : t;
+const pe = [K, G, ...J], ge = _(pe);
+function ve(r, t = ge) {
+  const e = r ? _([t, r]) : t;
   for (const [o, i] of Object.entries(e))
     e[o] = typeof i == "string" ? i : h(i);
   return e;
 }
 export {
   u as defineShortcuts,
-  L as mergeVunorShortcuts,
-  be as mergedVunorShortcuts,
-  xe as presetVunor,
-  fe as rawVunorShortcuts,
+  _ as mergeVunorShortcuts,
+  ge as mergedVunorShortcuts,
+  me as presetVunor,
+  pe as rawVunorShortcuts,
   h as toUnoShortcut,
-  ye as vunorShortcuts
+  ve as vunorShortcuts
 };

package/dist/utils.d.ts

@@ -19,7 +19,7 @@ export declare type TVueCssClass = string | string[] | Record<string, boolean |
 
 export declare const useProvideInject: <PA extends any[], IA extends any[], PR, INJ>(key: string, init: () => TProvideInjectBody<PA, IA, PR, INJ>) => {
     provide: (...args: PA) => PR;
-    inject: (...args: IA) => INJ;
+    inject: (...args: IA) => INJ | undefined;
 };
 
 export { }

package/dist/utils.mjs

@@ -1,4 +1,4 @@
-import { provide as s, inject as c } from "vue";
+import { inject as s, provide as c } from "vue";
 function u(...r) {
   const t = {};
   for (const e of r)
@@ -8,10 +8,10 @@ function u(...r) {
 const j = (r, t) => ({
   provide: (...e) => {
     const { _provide: n, _inject: o } = t(), i = n(...e);
-    return s(r, o), i;
+    return c(r, o), i;
   },
   inject: (...e) => {
-    const n = c(r);
+    const n = s(r);
     if (n)
       return n(...e);
   }

package/dist/vunor.d.ts

@@ -76,25 +76,25 @@ export declare function useAppToasts(): {
     toasts: Ref_2<    {
     title: string;
     message: string;
-    duration?: number;
-    icon?: string;
-    class?: string;
+    duration?: number | undefined;
+    icon?: string | undefined;
+    class?: string | undefined;
     actions?: {
     text: string;
     action: () => void;
-    }[];
+    }[] | undefined;
     open: boolean;
     id: number;
     }[], TToastInternal[] | {
     title: string;
     message: string;
-    duration?: number;
-    icon?: string;
-    class?: string;
+    duration?: number | undefined;
+    icon?: string | undefined;
+    class?: string | undefined;
     actions?: {
     text: string;
     action: () => void;
-    }[];
+    }[] | undefined;
     open: boolean;
     id: number;
     }[]>;
@@ -108,10 +108,10 @@ export declare function useHtmlInputAttrs(): ComputedRef_2<TInputAttrs> | undefi
 export declare function useInputBaseProps(): ComputedRef_2<TInputBaseProps> | undefined;
 
 export declare function useInputDataAttrs(): ComputedRef_2<{
-    'data-has-label': string;
-    'data-has-placeholder': string;
+    'data-has-label': string | undefined;
+    'data-has-placeholder': string | undefined;
     'data-type': string;
-    'aria-disabled': boolean;
+    'aria-disabled': boolean | undefined;
 }>;
 
 export declare const useInputPi: () => any;

package/dist/vunor.mjs

@@ -1,41 +1,40 @@
-import { ref as d, getCurrentInstance as a, onMounted as v, watch as f, computed as l, onUnmounted as h } from "vue";
-import { useProvideInject as u } from "vunor/utils";
-const t = d([]);
-function b() {
+import { ref as i, getCurrentInstance as p, onMounted as u, watch as v, computed as l, onUnmounted as f } from "vue";
+import { useProvideInject as c } from "vunor/utils";
+const r = i([]);
+function g() {
   function o(n) {
-    const r = Math.random();
-    return t.value.push({ ...n, open: !0, id: r }), () => {
-      e(r);
+    const t = Math.random();
+    return r.value.push({ ...n, open: !0, id: t }), () => {
+      e(t);
     };
   }
   function e(n) {
-    const r = t.value.findIndex((p) => p.id === n);
-    r >= 0 && (t.value[r].open = !1), setTimeout(() => {
-      t.value = t.value.filter((p) => p.id !== n);
+    const t = r.value.findIndex((a) => a.id === n);
+    t >= 0 && (r.value[t].open = !1), setTimeout(() => {
+      r.value = r.value.filter((a) => a.id !== n);
     }, 200);
   }
   return {
     create: o,
-    toasts: t,
+    toasts: r,
     close: e
   };
 }
-const s = (o) => o && /^h[1-6]$/.test(o) ? o : "", C = () => u("__vunor_card_PI", () => {
-  const o = d("");
+const s = (o) => o && /^h[1-6]$/.test(o) ? o : "", b = () => c("__vunor_card_PI", () => {
+  const o = i("");
   function e(n) {
     n && (o.value = n);
   }
   return {
     _provide: () => ({ headerLevel: o }),
     _inject: () => {
-      const n = a();
+      const n = p();
       if (n) {
-        const r = n.props.level || s(n.props.as);
-        r ? e(r) : v(() => {
-          var c;
-          const p = n.props.level || s(n.props.as), i = (c = n.vnode.el) == null ? void 0 : c.tagName.toLowerCase();
-          e(p || s(i) ? i : "");
-        }), f(
+        const t = n.props.level || s(n.props.as);
+        t ? e(t) : u(() => {
+          const a = n.props.level || s(n.props.as), d = n.vnode.el?.tagName.toLowerCase();
+          e(a || s(d) ? d : "");
+        }), v(
           () => [n.props.level, n.props.as],
           () => {
             e(n.props.level || n.props.as);
@@ -44,19 +43,19 @@ const s = (o) => o && /^h[1-6]$/.test(o) ? o : "", C = () => u("__vunor_card_PI"
       }
     }
   };
-}), k = () => u("__vunor_input_PI", () => {
-  const o = l(() => !!e.value.some((n) => n.value)), e = d([]);
+}), C = () => c("__vunor_input_PI", () => {
+  const o = l(() => !!e.value.some((n) => n.value)), e = i([]);
   return {
     _provide: () => ({ focused: o }),
     _inject: (n) => {
-      e.value.push(n), h(() => {
-        e.value = e.value.filter((r) => r !== n);
+      e.value.push(n), f(() => {
+        e.value = e.value.filter((t) => t !== n);
       });
     }
   };
 });
-function y() {
-  const o = a();
+function k() {
+  const o = p();
   if (o) {
     const e = o.props;
     return l(() => ({
@@ -74,8 +73,8 @@ function y() {
     }));
   }
 }
-function A() {
-  const o = a();
+function y() {
+  const o = p();
   if (o) {
     const e = o.props;
     return l(() => ({
@@ -110,8 +109,8 @@ function A() {
     }));
   }
 }
-function P() {
-  const o = a();
+function A() {
+  const o = p();
   if (o) {
     const e = o.props;
     return l(() => ({
@@ -139,21 +138,21 @@ function P() {
     }));
   }
 }
-function I() {
-  const o = a();
+function P() {
+  const o = p();
   return l(() => ({
-    "data-has-label": o != null && o.props.label ? "" : void 0,
-    "data-has-placeholder": o != null && o.props.placeholder ? "" : void 0,
-    "data-type": (o == null ? void 0 : o.props.type) ?? "text",
-    "aria-disabled": o != null && o.props.disabled ? !0 : void 0
+    "data-has-label": o?.props.label ? "" : void 0,
+    "data-has-placeholder": o?.props.placeholder ? "" : void 0,
+    "data-type": o?.props.type ?? "text",
+    "aria-disabled": o?.props.disabled ? !0 : void 0
   }));
 }
 export {
-  b as useAppToasts,
-  C as useCardPI,
-  y as useHtmlInputAttrs,
-  P as useInputBaseProps,
-  I as useInputDataAttrs,
-  k as useInputPi,
-  A as useInputProps
+  g as useAppToasts,
+  b as useCardPI,
+  k as useHtmlInputAttrs,
+  A as useInputBaseProps,
+  P as useInputDataAttrs,
+  C as useInputPi,
+  y as useInputProps
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vunor",
-  "version": "0.0.27",
+  "version": "0.0.30",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -12,14 +12,13 @@
     "type-check": "vue-tsc --build --force"
   },
   "dependencies": {
-    "@internationalized/date": "^3.5.5",
+    "@internationalized/date": "^3.11.0",
     "@prostojs/palitra": "^0.0.3",
-    "@unocss/preset-mini": "^0.60.4",
+    "@unocss/preset-mini": "^66.6.0",
     "defu": "^6.1.4",
-    "radix-vue": "^1.9.5",
-    "unocss": "^0.60.4",
-    "vue": "^3.4.27",
-    "vue-router": "^4.3.2"
+    "radix-vue": "^1.9.17",
+    "unocss": "^66.6.0",
+    "vue": "^3.5.28"
   },
   "files": [
     "dist",
@@ -82,27 +81,28 @@
     "./Tabs.vue": "./src/components/Tabs/Tabs.vue"
   },
   "devDependencies": {
-    "@iconify/utils": "^2.1.23",
-    "@nuxt/kit": "^3.12.4",
-    "@nuxt/schema": "^3.12.4",
+    "@iconify/utils": "^3.1.0",
+    "@nuxt/kit": "^3.21.1",
+    "@nuxt/schema": "^3.21.1",
     "@prostojs/palitra": "^0.0.3",
-    "@tsconfig/node20": "^20.1.4",
-    "@types/node": "^20.12.5",
-    "@unocss/preset-icons": "^0.59.4",
-    "@unocss/preset-mini": "^0.59.4",
-    "@unocss/preset-wind": "^0.59.4",
-    "@unocss/reset": "^0.59.4",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "@vue/tsconfig": "^0.5.1",
-    "@vueuse/core": "^10.10.0",
-    "typescript": "~5.4.5",
-    "unocss": "^0.60.4",
-    "unocss-preset-scrollbar": "^0.3.1",
-    "unplugin-auto-import": "^0.17.6",
-    "unplugin-vue-components": "^0.27.0",
-    "vite": "^5.3.5",
-    "vite-plugin-dts": "3.8.3",
-    "vitest": "^1.6.0",
-    "vue-tsc": "^2.0.11"
+    "@tsconfig/node22": "^22.0.5",
+    "@types/node": "^22.19.11",
+    "@unocss/preset-icons": "^66.6.0",
+    "@unocss/preset-mini": "^66.6.0",
+    "@unocss/preset-wind": "^66.6.0",
+    "@unocss/reset": "^66.6.0",
+    "@vitejs/plugin-vue": "^6.0.4",
+    "@vue/tsconfig": "^0.7.0",
+    "@vueuse/core": "^13.9.0",
+    "typescript": "^5.9.3",
+    "unocss": "^66.6.0",
+    "unocss-preset-scrollbar": "^3.2.0",
+    "unplugin-auto-import": "^19.3.0",
+    "unplugin-vue-components": "^28.8.0",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "4.5.4",
+    "vitest": "^3.2.4",
+    "vue-router": "^4.6.4",
+    "vue-tsc": "^2.2.12"
   }
 }

package/src/components/DatePicker/DatePicker.vue

@@ -4,7 +4,7 @@ import VuInput from '../Input/Input.vue'
 import { type TInputProps, useInputProps } from '../Input/utils'
 import type { DateValue } from '@internationalized/date'
 import VuDatePickerBase from './DatePickerBase.vue'
-import type { TVueCssClass } from '../utils/merge-class'
+import type { TVueCssClass } from 'vunor/utils'
 
 const props = defineProps<
   DatePickerRootProps & {

package/src/components/DatePicker/DatePickerBase.vue

@@ -8,7 +8,7 @@ import { type ComponentPublicInstance, computed } from 'vue'
 import { type TInputProps, useInputProps } from '../Input/utils'
 import type { DateValue } from '@internationalized/date'
 import { ref, watch, nextTick } from 'vue'
-import type { TVueCssClass } from '../utils/merge-class'
+import type { TVueCssClass } from 'vunor/utils'
 
 const props = defineProps<
   DatePickerRootProps & {

package/src/components/DatePicker/DatePickerPopup.vue

@@ -17,7 +17,7 @@ import {
 } from 'radix-vue'
 import VuCard from '../Card/Card.vue'
 import VuButton from '../Button/Button.vue'
-import type { TVueCssClass } from '../utils/merge-class'
+import type { TVueCssClass } from 'vunor/utils'
 
 const props = defineProps<{
   popupRounded?: boolean