vunor 0.0.11 → 0.0.13

package/dist/nuxt.mjs

@@ -8,6 +8,7 @@ var u = [
   "CardInner",
   "Checkbox",
   "Combobox",
+  "DevTools",
   "Icon",
   "Input",
   "InputShell",
@@ -21,9 +22,10 @@ var u = [
   "RadioGroup",
   "Select",
   "SelectBase",
-  "Slider"
+  "Slider",
+  "Tabs"
 ];
-const o = u, d = a({
+const n = u, d = a({
   meta: {
     name: "vunor/nuxt",
     configKey: "vunor",
@@ -35,9 +37,9 @@ const o = u, d = a({
     // prefix: '',
     components: !0
   },
-  setup(n) {
-    if (n.components) {
-      const t = Array.isArray(n.components) ? o.filter((e) => n.components.includes(e)) : o;
+  setup(o) {
+    if (o.components) {
+      const t = Array.isArray(o.components) ? n.filter((e) => o.components.includes(e)) : n;
       for (const e of t)
         r({
           name: `Vu${e}`,

package/dist/theme.d.ts

@@ -29,55 +29,60 @@ export declare const rawVunorShortcuts: TVunorShortcut[];
 declare const themeFactory: (opts: Required<TVunorUnoPresetOpts> & {
     palette?: TVunorPaletteOptions;
 }) => {
-    colors: {
-        [x: string]: string;
-    };
-    surfaces: Record<string, TVunorSurfaceConfig>;
-    borderColor: string;
-    reverseLightLayers: boolean;
-    reverseDarkLayers: boolean;
-    lineHeight: {
-        fingertip: string;
-        'fingertip-half': string;
-        'fingertip-xs': string;
-        'fingertip-s': string;
-        'fingertip-m': string;
-        'fingertip-l': string;
-        'fingertip-xl': string;
-    };
-    spacing: Record<string, string>;
-    fontWeight: Record<string, string>;
-    actualFontHeightFactor: number;
-    cardSpacingFactor: {
-        regular: number;
-        dense: number;
-    };
-    fontSize: Record<string, [TTypographyNames, Record<string, string>]>;
-    width: Record<string, string>;
-    height: Record<string, string>;
-    maxWidth: Record<string, string>;
-    maxHeight: Record<string, string>;
-    minWidth: Record<string, string>;
-    minHeight: Record<string, string>;
-    borderRadius: {
-        base: string;
-    };
-    animation: {
-        durations: {
-            'slide-down-and-fade': string;
-            'slide-left-and-fade': string;
-            'slide-up-and-fade': string;
-            'slide-right-and-fade': string;
-            'zoom-fade-in': string;
+    paletteOpts: Required<TVunorPaletteOptions & {
+        colors: TVunorPaletteColor;
+    }>;
+    theme: {
+        colors: {
+            [x: string]: string;
+        };
+        surfaces: Record<string, TVunorSurfaceConfig>;
+        borderColor: string;
+        reverseLightLayers: boolean;
+        reverseDarkLayers: boolean;
+        lineHeight: {
+            fingertip: string;
+            'fingertip-half': string;
+            'fingertip-xs': string;
+            'fingertip-s': string;
+            'fingertip-m': string;
+            'fingertip-l': string;
+            'fingertip-xl': string;
+        };
+        spacing: Record<string, string>;
+        fontWeight: Record<string, string>;
+        actualFontHeightFactor: number;
+        cardSpacingFactor: {
+            regular: number;
+            dense: number;
+        };
+        fontSize: Record<string, [TTypographyNames, Record<string, string>]>;
+        width: Record<string, string>;
+        height: Record<string, string>;
+        maxWidth: Record<string, string>;
+        maxHeight: Record<string, string>;
+        minWidth: Record<string, string>;
+        minHeight: Record<string, string>;
+        borderRadius: {
+            base: string;
         };
-        keyframes: {
-            'slide-down-and-fade': string;
-            'slide-left-and-fade': string;
-            'slide-up-and-fade': string;
-            'slide-right-and-fade': string;
-            'zoom-fade-in': string;
-            'loading-dashoffset': string;
-            'cb-appear': string;
+        animation: {
+            durations: {
+                'slide-down-and-fade': string;
+                'slide-left-and-fade': string;
+                'slide-up-and-fade': string;
+                'slide-right-and-fade': string;
+                'zoom-fade-in': string;
+            };
+            keyframes: {
+                'slide-down-and-fade': string;
+                'slide-left-and-fade': string;
+                'slide-up-and-fade': string;
+                'slide-right-and-fade': string;
+                'zoom-fade-in': string;
+                'loading-dashoffset': string;
+                'cb-appear': string;
+            };
         };
     };
 };
@@ -301,7 +306,7 @@ export declare interface TVunorShortcut {
  */
 export declare type TVunorSurfaceConfig = [string, string, string, string, string, string];
 
-export declare type TVunorTheme = ReturnType<typeof themeFactory> & Theme;
+export declare type TVunorTheme = ReturnType<typeof themeFactory>['theme'] & Theme;
 
 declare interface TVunorUnoPresetOpts {
     spacingFactor?: number;

package/dist/theme.mjs

@@ -1,7 +1,7 @@
-import A, { defu as F } from "defu";
-import { presetWind as C } from "unocss";
+import N, { defu as F } from "defu";
+import { presetWind as R } from "unocss";
 import { palitra as w, color as S } from "@prostojs/palitra";
-const f = (e) => e, L = f({
+const f = (e) => e, A = f({
   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",
@@ -26,7 +26,7 @@ const f = (e) => e, L = f({
     "group-[.btn-square]/btn:": "font-size-1.5em m-0!",
     "group-[.btn-round.btn-square]/btn:": "m-0!"
   }
-}), N = [
+}), L = [
   "h1",
   "h2",
   "h3",
@@ -39,7 +39,7 @@ const f = (e) => e, L = f({
   "body-s",
   "callout"
 ], D = f({
-  card: `data-[rounded=true]:rounded-$card-spacing data-[dense=true]:card-dense! ${N.map((e) => `data-[level=${e}]:card-${e}`).join(" ")}`
+  card: `data-[rounded=true]:rounded-$card-spacing data-[dense=true]:card-dense! ${L.map((e) => `data-[level=${e}]:card-${e}`).join(" ")}`
 }), T = f({
   "checkbox-root": {
     "": "text-body select-none flex gap-$m cursor-default current-bg-scope-color-500 current-border-scope-color-500",
@@ -80,7 +80,7 @@ const f = (e) => e, L = f({
 }), I = f({
   "menu-root": "flex flex-col overflow-hidden",
   "menu-item": "justify-start c8-flat gap-$m w-full fw-400"
-}), X = f({
+}), B = f({
   "rb-container": {
     "": "flex flex-col gap-$s text-body"
   },
@@ -110,7 +110,7 @@ const f = (e) => e, L = f({
     "": "select-none px-$s text-body leading-none lh-1.25em",
     "aria-[disabled=true]:": "scope-grey opacity-50 cursor-not-allowed"
   }
-}), Y = f({
+}), X = f({
   "select-content": {
     "": "min-w-[60px] rounded-base surface-0 bg-current overflow-hidden shadow-xl z-[100] current-border-grey-400 border-current/20 ",
     "data-[design=round]:": "rounded-fingertip-half",
@@ -136,7 +136,7 @@ const f = (e) => e, L = f({
     "[&>span]:data-[state=checked]:": "text-scope-color-500 fw-700!"
   },
   "select-separator": "h-[1px] bg-grey-500/10 mx-$s"
-}), B = f({
+}), Y = f({
   slider: {
     "": "relative flex items-center select-none touch-none min-w-2em min-h-2em"
   },
@@ -156,17 +156,21 @@ const f = (e) => e, L = f({
       "focus:": "outline-[0.5em]"
     }
   }
-}), E = [
+}), E = f({
+  "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"
+}), U = [
   D,
   I,
-  L,
+  A,
   T,
+  B,
   X,
-  Y,
   q,
-  B,
-  M
-], U = f({
+  Y,
+  M,
+  E
+], J = f({
   // FILLED
   "c8-filled": {
     "": "current-bg-scope-color-500 rounded-base current-text-white current-icon-white icon-current/100 bg-current  text-current",
@@ -191,8 +195,8 @@ const f = (e) => e, L = f({
     "hover:": "c8-flat-hover",
     "focus-visible:": "c8-flat-hover",
     "data-[highlighted]:": "c8-flat-hover",
-    "active:": "c8-flat-active",
-    "data-[active]:": "c8-flat-active",
+    // 'active:': 'c8-flat-active',
+    // 'data-[active]:': 'c8-flat-active', // messes up with tabs
     "data-[selected=true]:": "c8-flat-selected",
     "aria-[selected=true]:": "c8-flat-selected",
     "aria-[pressed=true]:": "c8-flat-selected"
@@ -200,9 +204,9 @@ const f = (e) => e, L = f({
   "c8-flat-hover": {
     "not-([disabled]):": "bg-current/05"
   },
-  "c8-flat-active": {
-    "not-([disabled]):": "bg-current/10"
-  },
+  // 'c8-flat-active': {
+  //   'not-([disabled]):': 'bg-current/10', // messes up with tabs
+  // },
   "c8-flat-selected": {
     "": "c8-flat-hover current-text-scope-color-500 text-current current-icon-scope-color-500 icon-current/100",
     "dark:": "current-text-scope-color-400 current-icon-scope-color-400"
@@ -380,22 +384,22 @@ const f = (e) => e, L = f({
 function h(e) {
   let t = "";
   for (const [r, o] of Object.entries(e)) {
-    const c = H(o);
-    t += `${c.map((n) => `${r}${n}`).join(" ")} `;
+    const c = C(o);
+    t += `${c.map((i) => `${r}${i}`).join(" ")} `;
   }
   return t.trim();
 }
-function H(e) {
+function C(e) {
   if (typeof e == "string")
     return e.split(" ");
   if (Array.isArray(e))
     return e;
   const t = [];
   for (const [r, o] of Object.entries(e))
-    t.push(...H(o).map((c) => `${r}${c}`));
+    t.push(...C(o).map((c) => `${r}${c}`));
   return t;
 }
-const J = (e, t) => {
+const K = (e, t) => {
   const r = {}, o = /* @__PURE__ */ new Set([...Object.keys(t), ...Object.keys(e)]);
   for (const c of Array.from(o))
     if (!Object.prototype.hasOwnProperty.call(t, c))
@@ -403,11 +407,11 @@ const J = (e, t) => {
     else if (!Object.prototype.hasOwnProperty.call(e, c))
       r[c] = t[c];
     else {
-      let n = t[c], i = e[c];
-      Array.isArray(n) && (n = n.join(" ")), Array.isArray(i) && (i = i.join(" ")), typeof n == "string" && typeof i == "string" ? r[c] = `${i} ${n}` : typeof n == "object" && typeof i == "string" ? r[c] = `${i} ${h(n)}` : typeof n == "string" && typeof i == "object" ? r[c] = `${h(i)} ${n}` : typeof n == "object" && typeof i == "object" && (r[c] = `${h(i)} ${h(n)}`);
+      let i = t[c], n = e[c];
+      Array.isArray(i) && (i = i.join(" ")), Array.isArray(n) && (n = n.join(" ")), typeof i == "string" && typeof n == "string" ? r[c] = `${n} ${i}` : typeof i == "object" && typeof n == "string" ? r[c] = `${n} ${h(i)}` : typeof i == "string" && typeof n == "object" ? r[c] = `${h(n)} ${i}` : typeof i == "object" && typeof n == "object" && (r[c] = `${h(n)} ${h(i)}`);
     }
   return r;
-}, R = (e) => e.reduce((t, r) => J(t, r), {}), K = {
+}, H = (e) => e.reduce((t, r) => K(t, r), {}), Q = {
   colors: {
     primary: { color: "#004eaf", preserveInputColor: !0, saturate: { dark: -0.2, light: -0.2 } },
     grey: { color: "#858892", saturate: { dark: 0, light: 0 } },
@@ -558,14 +562,14 @@ const J = (e, t) => {
     ]
   }
 };
-function Q(e) {
+function Z(e) {
   var d, g, v, y, k, $, x;
   const t = (e == null ? void 0 : e.colors) || {};
   for (const z of Object.keys(t)) {
     const j = (d = e == null ? void 0 : e.colors) == null ? void 0 : d[z];
     typeof j == "string" && (t[z] = { color: j });
   }
-  const r = A({ ...e, colors: t }, K), o = {
+  const r = N({ ...e, colors: t }, Q), o = {
     count: 5,
     preserveInputColor: !1,
     luminance: {
@@ -577,14 +581,14 @@ function Q(e) {
     vivid: r.layerPalette.vivid,
     suffixes: ["dark-0", "dark-1", "dark-2", "dark-3", "dark-4"]
   }, c = w(
-    P(r.colors, r.layerPalette.desaturate),
+    O(r.colors, r.layerPalette.desaturate),
     o
   ).toStrings();
   o.suffixes = ["light-0", "light-1", "light-2", "light-3", "light-4"].reverse();
-  const n = o.luminance.light - o.luminance.dark;
-  o.luminance = { dark: 1 - n, light: 1, useMiddle: !1 };
-  const i = w(
-    P(r.colors, r.layerPalette.desaturate),
+  const i = o.luminance.light - o.luminance.dark;
+  o.luminance = { dark: 1 - i, light: 1, useMiddle: !1 };
+  const n = w(
+    O(r.colors, r.layerPalette.desaturate),
     o
   ).toStrings(), l = w(
     {
@@ -610,26 +614,27 @@ function Q(e) {
     }
   ).toStrings();
   return {
+    opts: r,
     colors: {
       ...c,
-      ...i,
+      ...n,
       ...l
     },
     surfaces: r.surfaces
   };
 }
-function P(e, t = 0.5) {
+function O(e, t = 0.5) {
   const r = {};
   for (const [o, c] of Object.entries(e)) {
-    const n = typeof c == "string" ? c : c.color;
-    if (n) {
-      const [i, l, d] = S(n).hsl();
-      r[o] = S(i, l * t, d, "hsl").hex();
+    const i = typeof c == "string" ? c : c.color;
+    if (i) {
+      const [n, l, d] = S(i).hsl();
+      r[o] = S(n, l * t, d, "hsl").hex();
     }
   }
   return r;
 }
-function Z() {
+function _() {
   return [
     [
       /^layer-([0-4])$/,
@@ -660,11 +665,11 @@ function p(e, t = 0) {
   return Math.round(e * r) / r;
 }
 function m(e, t, r = 3) {
-  var n;
-  const o = Number.parseFloat(e), c = ((n = /(px|em|rem|%)$/.exec(e)) == null ? void 0 : n[1]) || "";
+  var i;
+  const o = Number.parseFloat(e), c = ((i = /(px|em|rem|%)$/.exec(e)) == null ? void 0 : i[1]) || "";
   return `${p(o * t, r)}${c}`;
 }
-const _ = {
+const ee = {
   getCSS: ({ theme: e }) => `${b("body", e.fontSize.body) + // renderFontCss('label', theme.fontSize.label) +
   b("figcaption", e.fontSize.caption) + b("h1", e.fontSize.h1) + b("h2", e.fontSize.h2) + b("h3", e.fontSize.h3) + b("h4", e.fontSize.h4) + b("h5", e.fontSize.h5) + b("h6", e.fontSize.h6)}
 :root {
@@ -723,7 +728,7 @@ function s(e) {
   const [t, r, o, c] = S(e).rgba();
   return `${t} ${r} ${o}`;
 }
-function O(e) {
+function P(e) {
   return {
     bg: "--un-bg-opacity",
     text: "--un-text-opacity",
@@ -747,7 +752,7 @@ function W(e) {
     caret: "caret-color"
   }[e];
 }
-const ee = [
+const re = [
   [
     /^current-(text|bg|icon|border|outline|caret|hl)-(.+)$/,
     (e, { theme: t }) => {
@@ -772,13 +777,13 @@ const ee = [
   [
     /^(text|bg|icon|border|outline|caret|fill)-current(-text|-bg|-icon|-border|-outline|-caret|-hl)?(\/\d{1,3})?$/,
     (e, { theme: t }) => {
-      const r = e[1], o = e[2] || `-${r}`, c = O(r), n = W(r), i = e[3], l = i ? Number(i.slice(1)) / 100 : 1, d = l === 1 ? `var(${c})` : l;
+      const r = e[1], o = e[2] || `-${r}`, c = P(r), i = W(r), n = e[3], l = n ? Number(n.slice(1)) / 100 : 1, d = l === 1 ? `var(${c})` : l;
       return r === "icon" ? {
         [c]: l,
         "--current-icon": o === "-hl" ? `var(--current${o})` : void 0
       } : {
         [c]: l,
-        [n]: `rgb(var(--current${o}) / ${d})`
+        [i]: `rgb(var(--current${o}) / ${d})`
       };
     }
   ],
@@ -816,9 +821,9 @@ const ee = [
   [
     /^(bg|text|fill|stroke|border|outline|icon|caret)-scope-((?:color|dark|light|text|bg|white|black|icon)(?:-\d+)?)(\/\d{1,3})?$/,
     (e, { theme: t }) => {
-      const r = W(e[1]), o = O(e[1]), c = e[2], n = e[3], i = n ? Number(n.slice(1)) / 100 : 1, l = c.startsWith("color") ? `grey-${c.slice(6)}` : `grey-${c}`, d = i === 1 ? `var(${o})` : i;
+      const r = W(e[1]), o = P(e[1]), c = e[2], i = e[3], n = i ? Number(i.slice(1)) / 100 : 1, l = c.startsWith("color") ? `grey-${c.slice(6)}` : `grey-${c}`, d = n === 1 ? `var(${o})` : n;
       return {
-        [o]: i,
+        [o]: n,
         [r]: `rgb(var(--scope-${c}, ${t.colors[l] || ""}) / ${d})`
       };
     }
@@ -838,23 +843,23 @@ const ee = [
       color: "rgb(var(--current-icon) / var(--un-icon-opacity, 1))"
     })
   ]
-], re = [
+], te = [
   [
     // special text margin (vertical) that compensates
     // the line height
     /^text-m([bty])?-(.*)$/,
     (e, { theme: t }) => {
-      const r = e[1], o = e[2], c = r ? { y: ["top", "bottom"], t: ["top"], b: ["bottom"] }[r] : ["top", "bottom", "left", "right"], n = {};
+      const r = e[1], o = e[2], c = r ? { y: ["top", "bottom"], t: ["top"], b: ["bottom"] }[r] : ["top", "bottom", "left", "right"], i = {};
       if (t.spacing[o]) {
-        for (const i of c)
-          n[`margin-${i}`] = ["left", "right"].includes(i) ? t.spacing[o] : `calc(${t.spacing[o]} + var(--font-${i === "top" ? "tc" : "bc"}))`;
-        return n;
+        for (const n of c)
+          i[`margin-${n}`] = ["left", "right"].includes(n) ? t.spacing[o] : `calc(${t.spacing[o]} + var(--font-${n === "top" ? "tc" : "bc"}))`;
+        return i;
       } else if (/^\d+(em|rem|px)?$/.test(o)) {
-        let i = o;
-        /^[\d.]+$/.test(o) && (i = `${Number(o) * 0.25}rem`);
+        let n = o;
+        /^[\d.]+$/.test(o) && (n = `${Number(o) * 0.25}rem`);
         for (const l of c)
-          n[`margin-${l}`] = ["left", "right"].includes(l) ? i : `calc(${i} + var(--font-${l === "top" ? "tc" : "bc"}))`;
-        return n;
+          i[`margin-${l}`] = ["left", "right"].includes(l) ? n : `calc(${n} + var(--font-${l === "top" ? "tc" : "bc"}))`;
+        return i;
       }
     },
     { layer: "utilities" }
@@ -912,7 +917,7 @@ const ee = [
         };
     }
   ]
-], te = [...re, ...ee];
+], oe = [...te, ...re];
 function a(e, t = 1) {
   return t * 1.618 ** e;
 }
@@ -925,7 +930,7 @@ function u(e, t, r, o, c) {
     spacing: c
   };
 }
-const oe = {
+const ce = {
   h1: (
     /*          */
     u(
@@ -1081,8 +1086,8 @@ const oe = {
     )
   )
 };
-function ce(e, t, r, o, c, n = 1, i = 0.5) {
-  const l = e * n, g = (o * e - l) / e, v = l / 2, y = l * i - v + g / 2, k = l * (1 - i) - v + g / 2, $ = p(y, 4), x = p(k, 4);
+function ne(e, t, r, o, c, i = 1, n = 0.5) {
+  const l = e * i, g = (o * e - l) / e, v = l / 2, y = l * n - v + g / 2, k = l * (1 - n) - v + g / 2, $ = p(y, 4), x = p(k, 4);
   return {
     mt: $,
     mb: x,
@@ -1107,7 +1112,7 @@ function ce(e, t, r, o, c, n = 1, i = 0.5) {
     ]
   };
 }
-const ne = (e) => {
+const ie = (e) => {
   const t = {
     // canonical
     $xxs: `${p(1 / e.spacingFactor ** 3, 3)}em`,
@@ -1149,7 +1154,7 @@ const ne = (e) => {
     base: e.baseRadius
   }, c = {
     $bold: "var(--font-bold)"
-  }, n = {
+  }, i = {
     "card-header": [
       "var(--card-heading-size)",
       {
@@ -1166,7 +1171,7 @@ const ne = (e) => {
   };
   for (const [l, d] of Object.entries(e.typography))
     if (d != null && d.size) {
-      const g = ce(
+      const g = ne(
         d.size || 1,
         d.weight || 400,
         d.boldWeight || 700,
@@ -1175,58 +1180,60 @@ const ne = (e) => {
         d.actualHeightFactor || e.actualFontHeightFactor,
         d.actualHeightTopBottomRatio || e.actualFontHeightTopBottomRatio
       );
-      n[l] = g.theme, t[l] = `${g.size}em`;
+      i[l] = g.theme, t[l] = `${g.size}em`;
     }
-  const i = Q(e.palette);
+  const n = Z(e.palette);
   return {
-    colors: i.colors,
-    surfaces: i.surfaces,
-    borderColor: "red",
-    reverseLightLayers: e.layers.reverseLight,
-    reverseDarkLayers: e.layers.reverseDark,
-    lineHeight: r,
-    spacing: t,
-    fontWeight: c,
-    actualFontHeightFactor: e.actualFontHeightFactor,
-    cardSpacingFactor: e.cardSpacingFactor,
-    fontSize: n,
-    width: t,
-    height: t,
-    maxWidth: t,
-    maxHeight: t,
-    minWidth: t,
-    minHeight: t,
-    borderRadius: o,
-    animation: {
-      durations: {
-        "slide-down-and-fade": "100ms",
-        "slide-left-and-fade": "100ms",
-        "slide-up-and-fade": "100ms",
-        "slide-right-and-fade": "100ms",
-        "zoom-fade-in": "100ms"
-      },
-      keyframes: {
-        "slide-down-and-fade": `{
+    paletteOpts: n.opts,
+    theme: {
+      colors: n.colors,
+      surfaces: n.surfaces,
+      borderColor: "red",
+      reverseLightLayers: e.layers.reverseLight,
+      reverseDarkLayers: e.layers.reverseDark,
+      lineHeight: r,
+      spacing: t,
+      fontWeight: c,
+      actualFontHeightFactor: e.actualFontHeightFactor,
+      cardSpacingFactor: e.cardSpacingFactor,
+      fontSize: i,
+      width: t,
+      height: t,
+      maxWidth: t,
+      maxHeight: t,
+      minWidth: t,
+      minHeight: t,
+      borderRadius: o,
+      animation: {
+        durations: {
+          "slide-down-and-fade": "100ms",
+          "slide-left-and-fade": "100ms",
+          "slide-up-and-fade": "100ms",
+          "slide-right-and-fade": "100ms",
+          "zoom-fade-in": "100ms"
+        },
+        keyframes: {
+          "slide-down-and-fade": `{
           from { opacity: 0; transform: translateY(-6px) }
           to { opacity: 1; transform: translateY(0) }
         }`,
-        "slide-left-and-fade": `{
+          "slide-left-and-fade": `{
           from { opacity: 0; transform: translateX(6px) }
           to { opacity: 1; transform: translateX(0) }
         }`,
-        "slide-up-and-fade": `{
+          "slide-up-and-fade": `{
           from { opacity: 0; transform: translateY(6px) }
           to { opacity: 1; transform: translateY(0) }
         }`,
-        "slide-right-and-fade": `{
+          "slide-right-and-fade": `{
           from { opacity: 0; transform: translateX(-6px) }
           to { opacity: 1; transform: translateX(0) }
         }`,
-        "zoom-fade-in": `{
+          "zoom-fade-in": `{
           from { opacity: 0; transform: scale(1.02) }
           to { opacity: 1; transform: scale(1) }
         }`,
-        "loading-dashoffset": `{
+          "loading-dashoffset": `{
           from {
             stroke-dashoffset: 0;
           }
@@ -1234,7 +1241,7 @@ const ne = (e) => {
             stroke-dashoffset: -76;
           }
         }`,
-        "cb-appear": `{
+          "cb-appear": `{
           from {
             clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
           }
@@ -1242,20 +1249,21 @@ const ne = (e) => {
             clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
           }
         }`
+        }
       }
+      // animation: {
+      //   slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+      //   slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+      //   slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+      //   slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+      // },
     }
-    // animation: {
-    //   slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-    //   slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-    //   slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-    //   slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
-    // },
   };
 };
 function V(e, t = 1) {
   return t * Math.sqrt(1.618) ** e;
 }
-const ie = {
+const ae = {
   spacingFactor: 1.618,
   actualFontHeightFactor: 1,
   actualFontHeightTopBottomRatio: 0.52,
@@ -1263,7 +1271,7 @@ const ie = {
     regular: 1,
     dense: 0.6
   },
-  typography: oe,
+  typography: ce,
   layers: {
     reverseDark: !1,
     reverseLight: !1
@@ -1276,14 +1284,18 @@ const ie = {
     xl: "4em"
   },
   baseRadius: `${p(1 / 1.618, 3)}em`
-}, fe = (e) => {
-  const t = F(e, ie), r = ae();
-  r.preflights || (r.preflights = []), r.preflights.push(_), r.rules || (r.rules = []), r.rules.push(...te);
-  const o = Z();
-  return {
+}, ge = (e) => {
+  const t = F(e, ae), r = le();
+  r.preflights || (r.preflights = []), r.preflights.push(ee), r.rules || (r.rules = []), r.rules.push(...oe);
+  const o = _(), c = ie(t);
+  return r.preflights.push({
+    getCSS: () => `__vunor_palette_options {background-image: url("data:image/gif;base64,${Buffer.from(
+      JSON.stringify({ ...c.paletteOpts, surfaces: void 0 })
+    ).toString("base64")}")}`
+  }), {
     ...r,
     name: "vunor",
-    theme: F(ne(t), r.theme),
+    theme: F(c.theme, r.theme),
     shortcuts: o,
     layers: {
       preflights: 0,
@@ -1293,26 +1305,26 @@ const ie = {
     }
   };
 };
-function ae() {
+function le() {
   var t;
-  const e = C();
+  const e = R();
   return (t = e.rules) == null || t.forEach((r) => {
     r[0] instanceof RegExp && (r[0].source.startsWith("^m-") || r[0].source.startsWith("^ma?") || r[0].source.startsWith("^p-?") || r[0].source.startsWith("^pa?")) && (r[2] = r[2] || {}, r[2].layer = "utilities");
   }), e;
 }
-const le = [G, U, ...E], se = R(le);
-function ge(e, t = se) {
-  const r = e ? R([t, e]) : t;
+const se = [G, J, ...U], de = H(se);
+function be(e, t = de) {
+  const r = e ? H([t, e]) : t;
   for (const [o, c] of Object.entries(r))
     r[o] = typeof c == "string" ? c : h(c);
   return r;
 }
 export {
   f as defineShortcuts,
-  R as mergeVunorShortcuts,
-  se as mergedVunorShortcuts,
-  fe as presetVunor,
-  le as rawVunorShortcuts,
+  H as mergeVunorShortcuts,
+  de as mergedVunorShortcuts,
+  ge as presetVunor,
+  se as rawVunorShortcuts,
   h as toUnoShortcut,
-  ge as vunorShortcuts
+  be as vunorShortcuts
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vunor",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -63,7 +63,8 @@
     "./RadioGroup.vue": "./src/components/RadioGroup/RadioGroup.vue",
     "./Select.vue": "./src/components/Select/Select.vue",
     "./SelectBase.vue": "./src/components/Select/SelectBase.vue",
-    "./Slider.vue": "./src/components/Slider/Slider.vue"
+    "./Slider.vue": "./src/components/Slider/Slider.vue",
+    "./Tabs.vue": "./src/components/Tabs/Tabs.vue"
   },
   "devDependencies": {
     "@iconify/utils": "^2.1.23",

package/src/components/DevTools/DevTools.vue

@@ -0,0 +1,374 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { VuButton } from '../Button'
+import { VuCard, VuCardHeader, VuCardInner } from '../Card'
+import { TVunorPaletteColor, TVunorPaletteOptions } from '../../theme'
+import { VuInput } from '../Input'
+import VuSlider from '../Slider/Slider.vue'
+import VuTabs from '../Tabs/Tabs.vue'
+import { generatePalette } from '../../theme/palitra'
+import { color } from '@prostojs/palitra'
+
+function colorToRgbWithOpacity(c: string) {
+  const [r, g, b, a] = color(c).rgba()
+  return `${r} ${g} ${b}`
+}
+
+function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => void {
+  let timeoutId: number | undefined
+
+  return (...args: Parameters<T>): void => {
+    if (timeoutId !== undefined) {
+      clearTimeout(timeoutId)
+    }
+
+    timeoutId = window.setTimeout(() => {
+      func(...args)
+    }, wait)
+  }
+}
+
+const props = defineProps<{
+  defaultOpen?: boolean
+}>()
+
+const modelValue = defineModel('open')
+modelValue.value = !!props.defaultOpen
+
+type TColor = TVunorPaletteColor & { name: string }
+type TPalette = Required<
+  Omit<TVunorPaletteOptions, 'colors'> & { colors: Record<string, TVunorPaletteColor> }
+>
+
+const colors = ref<TColor[]>([])
+const mainPalette = ref<TPalette['mainPalette']>({})
+const layerPalette = ref<TPalette['layerPalette']>({})
+const misc = ref<Pick<TPalette, 'darkest' | 'lightest' | 'layersDepth'>>({
+  darkest: 0.24,
+  lightest: 0.97,
+  layersDepth: 0.08,
+})
+
+const mainSlider = ref<[number, number, number]>([0, 0, 0])
+
+function cleanup() {
+  const s = document.head.querySelector('style#vunor-palette-sandbox')
+  if (s) {
+    document.head.removeChild(s)
+  }
+}
+
+const apply = debounce(() => {
+  cleanup()
+  const opts = {
+    darkest: mainSlider.value[0],
+    lightest: mainSlider.value[2],
+    mainPalette: {
+      luminance: {
+        middle: mainSlider.value[1],
+      },
+    },
+    colors: {} as Record<string, TVunorPaletteColor>,
+  } as Exclude<Required<Parameters<typeof generatePalette>[0]>, undefined>
+
+  for (const c of colors.value) {
+    opts.colors[c.name as 'primary'] = c as TVunorPaletteColor
+  }
+
+  const { colors: result } = generatePalette(opts)
+
+  const newS = document.createElement('style')
+  newS.id = 'vunor-palette-sandbox'
+
+  const suffixes = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900']
+  const ld = [
+    'light-0',
+    'light-1',
+    'light-2',
+    'light-3',
+    'light-4',
+    'dark-0',
+    'dark-1',
+    'dark-2',
+    'dark-3',
+    'dark-4',
+  ]
+
+  for (const c of ['primary', 'secondary', 'grey', 'neutral', 'good', 'warn', 'error']) {
+    newS.innerText += `.scope-${c} {\n`
+    const col = result[c]!
+    for (const s of suffixes) {
+      newS.innerText += `--scope-color-${s}: ${
+        colorToRgbWithOpacity(result[`${c}-${s}`]!) || ''
+      };\n`
+    }
+    newS.innerText += `--scope-color: ${colorToRgbWithOpacity(col)};\n`
+    newS.innerText += `--current-hl: ${colorToRgbWithOpacity(result[`${c}-500`]!) || ''};\n`
+
+    for (const s of ld) {
+      newS.innerText += `--scope-${s}: ${colorToRgbWithOpacity(result[`${c}-${s}`]!) || ''};\n`
+    }
+    newS.innerText += '}\n'
+
+    for (const s of suffixes) {
+      newS.innerText += `.text-${c}-${s}{color:rgb(${colorToRgbWithOpacity(
+        result[`${c}-${s}`]!
+      )} / var(--un-text-opacity))}\n`
+      newS.innerText += `.bg-${c}-${s}{background-color:rgb(${colorToRgbWithOpacity(
+        result[`${c}-${s}`]!
+      )} / var(--un-bg-opacity))}\n`
+      newS.innerText += `.current-outline-${c}-${s}{--current-outline:${colorToRgbWithOpacity(
+        result[`${c}-${s}`]!
+      )};}\n`
+      newS.innerText += `.current-text-${c}-${s}{--current-text:${colorToRgbWithOpacity(
+        result[`${c}-${s}`]!
+      )};}\n`
+      newS.innerText += `.current-bg-${c}-${s}{--current-bg:${colorToRgbWithOpacity(
+        result[`${c}-${s}`]!
+      )};}\n`
+      newS.innerText += `.current-border-${c}-${s}{--current-border:${colorToRgbWithOpacity(
+        result[`${c}-${s}`]!
+      )};}\n`
+      newS.innerText += `.current-icon-${c}-${s}{--current-icon:${colorToRgbWithOpacity(
+        result[`${c}-${s}`]!
+      )};}\n`
+    }
+  }
+
+  document.head.appendChild(newS)
+}, 100)
+
+function reset() {
+  if (document?.head) {
+    cleanup()
+    // @ts-expect-error
+    const s = document.head.querySelector('style[data-vite-dev-id="\\/__uno.css"]').textContent
+    if (s) {
+      const base64 =
+        /__vunor_palette_options\s\{background-image:\surl\(\"data:image\/gif;base64,([^"]+)/.exec(
+          s
+        )?.[1]
+      if (base64) {
+        const paletteOpts = JSON.parse(atob(base64)) as TPalette
+        colors.value = []
+        mainPalette.value = { ...paletteOpts.mainPalette }
+        layerPalette.value = { ...paletteOpts.layerPalette }
+        misc.value = {
+          darkest: paletteOpts.darkest,
+          lightest: paletteOpts.lightest,
+          layersDepth: paletteOpts.layersDepth,
+        }
+        mainSlider.value = [
+          misc.value.darkest,
+          mainPalette.value.luminance!.middle!,
+          misc.value.lightest,
+        ]
+        for (const [name, val] of Object.entries(paletteOpts.colors)) {
+          colors.value.push({
+            color: val.color,
+            preserveInputColor:
+              val.preserveInputColor === paletteOpts.mainPalette.preserveInputColor
+                ? val.preserveInputColor
+                : undefined,
+            saturate: {
+              dark:
+                val.saturate?.dark === paletteOpts.mainPalette.saturate?.dark
+                  ? val.saturate?.dark
+                  : undefined,
+              light:
+                val.saturate?.light === paletteOpts.mainPalette.saturate?.light
+                  ? val.saturate?.light
+                  : undefined,
+            },
+            vivid: {
+              dark:
+                val.vivid?.dark === paletteOpts.mainPalette.vivid?.dark
+                  ? val.vivid?.dark
+                  : undefined,
+              light:
+                val.vivid?.light === paletteOpts.mainPalette.vivid?.light
+                  ? val.vivid?.light
+                  : undefined,
+            },
+            name,
+          })
+        }
+      }
+    }
+  }
+}
+
+onMounted(reset)
+
+const tab = ref('colors')
+
+// dragging the popup:
+const down = ref(false)
+const offset = reactive({
+  x: 12,
+  y: 12,
+})
+
+const grabbedAt = {
+  x: 0,
+  y: 0,
+}
+const prevPos = {
+  x: 0,
+  y: 0,
+}
+
+function onMouseDown(event: MouseEvent) {
+  down.value = true
+  grabbedAt.x = event.screenX
+  grabbedAt.y = event.screenY
+  window.addEventListener('mouseup', onMouseUp)
+  window.addEventListener('mousemove', onMouseMove)
+  prevPos.x = offset.x
+  prevPos.y = offset.y
+}
+
+function onMouseUp(event: MouseEvent) {
+  down.value = false
+  if (grabbedAt.x !== event.screenX || grabbedAt.y !== event.screenY) {
+    event.stopPropagation()
+    event.preventDefault()
+  } else {
+    modelValue.value = !modelValue.value
+  }
+  window.removeEventListener('mouseup', onMouseUp)
+  window.removeEventListener('mousemove', onMouseMove)
+}
+
+function onMouseMove(event: MouseEvent) {
+  offset.x = prevPos.x + event.screenX - grabbedAt.x
+  offset.y = prevPos.y + event.screenY - grabbedAt.y
+}
+</script>
+
+<template>
+  <div
+    v-if="colors?.length > 0"
+    :style="{
+      transform: `translate(${offset.x}px, ${offset.y}px)`,
+    }"
+    class="fingertip-[2em] fixed left-0 top-0 max-w-screen max-h-screen text-11px"
+    :class="{
+      'w-[30em] h-[40em]': modelValue,
+      'w-[3em] h-[3em]': !modelValue,
+    }"
+  >
+    <VuCard
+      no-padding
+      rounded
+      level="h6"
+      class="layer-0 transition-all-200 w-[30em] h-[40em] border border-grey-500/50 overflow-clip flex flex-col transform-origin-tl"
+      :class="{
+        'scale-100 shadow-md opacity-50 hover:opacity-100': modelValue,
+        'scale-20 opacity-0 pointer-events-none': !modelValue,
+      }"
+    >
+      <VuCardInner
+        @mousedown="onMouseDown"
+        :class="{
+          'cursor-grab': !down,
+          'cursor-grabbing': down,
+        }"
+        class="layer-2 flex justify-between items-center fingertip-[1em] select-none"
+      >
+        <VuCardHeader class="text-mb-0 text-mt-0">Vunor Palette Sandbox</VuCardHeader>
+        <VuButton
+          icon="i--clear"
+          class="c8-flat btn-square rounded"
+          @mousedown.stop=""
+          @click.stop="modelValue = !modelValue"
+        />
+      </VuCardInner>
+
+      <VuCardInner class="layer-0 border-b">
+        <VuTabs
+          default-value="colors"
+          v-model="tab"
+          :tabs="[
+            { value: 'colors', label: 'Colors ' },
+            { value: 'main', label: 'Main Palette' },
+            { value: 'layers', label: 'Layers Palette' },
+          ]"
+        />
+      </VuCardInner>
+
+      <VuCardInner class="layer-0 flex-grow overflow-auto pt-$l">
+        <div class="text-primary-700">Test</div>
+        <!-- colors -->
+        <div v-if="tab === 'colors'">
+          <VuSlider
+            label="Darkest | Middle | Brightest"
+            :min="0"
+            :max="1"
+            :step="0.01"
+            :thumbs="3"
+            v-model="mainSlider"
+            class="mb-$l"
+            @update:model-value="apply"
+          />
+          <div v-for="c of colors" :key="c.name" class="flex items-center gap-$xs">
+            <VuInput
+              v-model="c.color"
+              stack-label
+              design="filled"
+              class="w-12em"
+              @update:model-value="apply"
+            >
+              <template v-slot:before>
+                <input
+                  type="color"
+                  :id="`vunor-color-${c.name}`"
+                  v-model="c.color"
+                  class="p-0 size-[2em] bg-transparent"
+                  @input="apply"
+                />
+              </template>
+            </VuInput>
+          </div>
+        </div>
+      </VuCardInner>
+
+      <VuCardInner class="layer-2 flex justify-center">
+        <VuButton label="Reset All" @click="reset" class="c8-flat" />
+      </VuCardInner>
+    </VuCard>
+    <!-- prettier-ignore-attribute class -->
+    <div
+      class="absolute
+        shadow-[0_0_5px_2px_rgb(var(--scope-color-500))]
+        left-0
+        top-0
+        size-[3em]
+        rounded-full
+        transition-opacity-200
+        surface-500
+        flex
+        justify-center
+        items-center
+        current-outline-primary-700
+        outline-current
+        outline-[2px]
+        outline-solid
+        hover:opacity-100
+        cursor-pointer
+        select-none"
+      title="Vunor Palette Sandbox"
+      :class="{
+        'opacity-0 pointer-events-none': modelValue,
+        'opacity-50': !modelValue,
+        'cursor-grabbing': down,
+      }"
+      @mousedown="onMouseDown"
+    >
+      <strong class="text-16px text-mb-0">V</strong>
+    </div>
+  </div>
+</template>

package/src/components/Tabs/Tabs.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts" generic="T extends { icon?: string; label?: string; value: string }">
+import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent } from 'radix-vue'
+
+withDefaults(
+  defineProps<{
+    tabs: T[]
+    defaultValue?: string
+    activationMode?: 'automatic' | 'manual'
+    dir?: 'ltr' | 'rtl'
+    indicator?: boolean
+    noContent?: boolean
+    orientation?: 'vertical' | 'horizontal'
+    tabsListClass?: string | Record<string, boolean> | string[]
+    tabGrow?: boolean
+    tabClass?: string
+  }>(),
+  {
+    tabsListClass: 'flex relative',
+    tabClass: 'c8-flat',
+  }
+)
+
+const modelValue = defineModel<string>()
+</script>
+
+<template>
+  <TabsRoot v-model="modelValue" :default-value :activation-mode :dir :orientation>
+    <TabsList :class="tabsListClass">
+      <TabsIndicator v-if="indicator" class="tabs-indicator"> </TabsIndicator>
+      <TabsTrigger v-for="tab of tabs" as-child :value="tab.value">
+        <slot v-bind="tab">
+          <div class="tab" :class="{ grow: tabGrow, [tabClass]: true }">
+            {{ tab.label ?? tab.value }}
+          </div>
+        </slot>
+      </TabsTrigger>
+    </TabsList>
+    <TabsContent v-if="!noContent" v-for="tab of tabs" as-child :value="tab.value">
+      <slot :name="tab.value"></slot>
+    </TabsContent>
+  </TabsRoot>
+</template>

package/src/components/Tabs/shortcuts.ts

@@ -0,0 +1,7 @@
+import { defineShortcuts } from '../../theme/utils/define-sc'
+
+export const tabShortcuts = defineShortcuts({
+  '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',
+})

package/src/components/shortcuts.ts

@@ -7,6 +7,7 @@ import { menuShortcuts } from './Menu/shortcuts'
 import { radioShortcuts } from './RadioGroup/shortcuts'
 import { selectShortcuts } from './Select/shortcuts'
 import { sliderShortcuts } from './Slider/shortcuts'
+import { tabShortcuts } from './Tabs/shortcuts'
 
 export const shortcuts = [
   cardShortcuts,
@@ -18,4 +19,5 @@ export const shortcuts = [
   comboboxShortcuts,
   sliderShortcuts,
   loadingShortcuts,
+  tabShortcuts,
 ]