@soft-stech/bootsman-ui-shadcn 1.1.18 → 1.1.22

package/dist/{utils-DMgok1im.js → utils-X1PecXjd.js}

@@ -1,5 +1,5 @@
-import { defineComponent as pe, openBlock as fe, createBlock as be, unref as O, normalizeClass as ge, withCtx as me, renderSlot as he, h as V } from "vue";
-import { bm as ye } from "./index-BWXL7qjH.js";
+import { defineComponent as pe, openBlock as fe, createBlock as be, unref as W, normalizeClass as ge, withCtx as me, renderSlot as he, h as R } from "vue";
+import { bm as ye } from "./index-BmssdAmo.js";
 function se(e) {
   var r, t, o = "";
   if (typeof e == "string" || typeof e == "number")
@@ -68,10 +68,10 @@ function ke(e) {
     validators: []
   };
   return ze(Object.entries(e.classGroups), t).forEach(([n, s]) => {
-    W(s, o, n, r);
+    O(s, o, n, r);
   }), o;
 }
-function W(e, r, t, o) {
+function O(e, r, t, o) {
   e.forEach((i) => {
     if (typeof i == "string") {
       const n = i === "" ? r : te(r, i);
@@ -80,7 +80,7 @@ function W(e, r, t, o) {
     }
     if (typeof i == "function") {
       if (Ce(i)) {
-        W(i(o), r, t, o);
+        O(i(o), r, t, o);
         return;
       }
       r.validators.push({
@@ -90,7 +90,7 @@ function W(e, r, t, o) {
       return;
     }
     Object.entries(i).forEach(([n, s]) => {
-      W(s, te(r, n), t, o);
+      O(s, te(r, n), t, o);
     });
   });
 }
@@ -274,7 +274,7 @@ function C(e) {
 function A(e) {
   return !!e && !Number.isNaN(Number(e));
 }
-function E(e) {
+function N(e) {
   return S(e, "number", A);
 }
 function j(e) {
@@ -290,10 +290,10 @@ function z(e) {
   return Ne.test(e);
 }
 const _e = /* @__PURE__ */ new Set(["length", "size", "percentage"]);
-function Oe(e) {
+function We(e) {
   return S(e, _e, de);
 }
-function We(e) {
+function Oe(e) {
   return S(e, "position", de);
 }
 const qe = /* @__PURE__ */ new Set(["image", "url"]);
@@ -323,7 +323,7 @@ function Xe(e) {
   return Be.test(e);
 }
 function He() {
-  const e = p("colors"), r = p("spacing"), t = p("blur"), o = p("brightness"), i = p("borderColor"), n = p("borderRadius"), s = p("borderSpacing"), l = p("borderWidth"), u = p("contrast"), c = p("grayscale"), d = p("hueRotate"), b = p("invert"), h = p("gap"), y = p("gradientColorStops"), w = p("gradientColorStopPositions"), g = p("inset"), m = p("margin"), k = p("opacity"), v = p("padding"), K = p("saturate"), L = p("scale"), Z = p("sepia"), J = p("skew"), X = p("space"), H = p("translate"), $ = () => ["auto", "contain", "none"], B = () => ["auto", "hidden", "clip", "visible", "scroll"], U = () => ["auto", a, r], f = () => [a, r], Q = () => ["", x, C], R = () => ["auto", A, a], Y = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"], G = () => ["solid", "dashed", "dotted", "double", "none"], D = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity", "plus-lighter"], _ = () => ["start", "end", "center", "between", "around", "evenly", "stretch"], M = () => ["", "0", a], ee = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], I = () => [A, E], T = () => [A, a];
+  const e = p("colors"), r = p("spacing"), t = p("blur"), o = p("brightness"), i = p("borderColor"), n = p("borderRadius"), s = p("borderSpacing"), l = p("borderWidth"), u = p("contrast"), c = p("grayscale"), d = p("hueRotate"), b = p("invert"), h = p("gap"), y = p("gradientColorStops"), w = p("gradientColorStopPositions"), g = p("inset"), m = p("margin"), k = p("opacity"), v = p("padding"), K = p("saturate"), L = p("scale"), Z = p("sepia"), J = p("skew"), X = p("space"), H = p("translate"), $ = () => ["auto", "contain", "none"], B = () => ["auto", "hidden", "clip", "visible", "scroll"], U = () => ["auto", a, r], f = () => [a, r], Q = () => ["", x, C], G = () => ["auto", A, a], Y = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"], T = () => ["solid", "dashed", "dotted", "double", "none"], D = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"], _ = () => ["start", "end", "center", "between", "around", "evenly", "stretch"], M = () => ["", "0", a], ee = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"], I = () => [A, N], E = () => [A, a];
   return {
     cacheSize: 500,
     separator: ":",
@@ -338,7 +338,7 @@ function He() {
       borderWidth: Q(),
       contrast: I(),
       grayscale: M(),
-      hueRotate: T(),
+      hueRotate: E(),
       invert: M(),
       gap: f(),
       gradientColorStops: [e],
@@ -350,7 +350,7 @@ function He() {
       saturate: I(),
       scale: I(),
       sepia: M(),
-      skew: T(),
+      skew: E(),
       space: f(),
       translate: f()
     },
@@ -641,14 +641,14 @@ function He() {
        * @see https://tailwindcss.com/docs/grid-column
        */
       "col-start": [{
-        "col-start": R()
+        "col-start": G()
       }],
       /**
        * Grid Column End
        * @see https://tailwindcss.com/docs/grid-column
        */
       "col-end": [{
-        "col-end": R()
+        "col-end": G()
       }],
       /**
        * Grid Template Rows
@@ -671,14 +671,14 @@ function He() {
        * @see https://tailwindcss.com/docs/grid-row
        */
       "row-start": [{
-        "row-start": R()
+        "row-start": G()
       }],
       /**
        * Grid Row End
        * @see https://tailwindcss.com/docs/grid-row
        */
       "row-end": [{
-        "row-end": R()
+        "row-end": G()
       }],
       /**
        * Grid Auto Flow
@@ -1011,7 +1011,7 @@ function He() {
        * @see https://tailwindcss.com/docs/font-weight
        */
       "font-weight": [{
-        font: ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black", E]
+        font: ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black", N]
       }],
       /**
        * Font Family
@@ -1062,7 +1062,7 @@ function He() {
        * @see https://tailwindcss.com/docs/line-clamp
        */
       "line-clamp": [{
-        "line-clamp": ["none", A, E]
+        "line-clamp": ["none", A, N]
       }],
       /**
        * Line Height
@@ -1138,7 +1138,7 @@ function He() {
        * @see https://tailwindcss.com/docs/text-decoration-style
        */
       "text-decoration-style": [{
-        decoration: [...G(), "wavy"]
+        decoration: [...T(), "wavy"]
       }],
       /**
        * Text Decoration Thickness
@@ -1255,7 +1255,7 @@ function He() {
        * @see https://tailwindcss.com/docs/background-position
        */
       "bg-position": [{
-        bg: [...Y(), We]
+        bg: [...Y(), Oe]
       }],
       /**
        * Background Repeat
@@ -1271,7 +1271,7 @@ function He() {
        * @see https://tailwindcss.com/docs/background-size
        */
       "bg-size": [{
-        bg: ["auto", "cover", "contain", Oe]
+        bg: ["auto", "cover", "contain", We]
       }],
       /**
        * Background Image
@@ -1512,7 +1512,7 @@ function He() {
        * @see https://tailwindcss.com/docs/border-style
        */
       "border-style": [{
-        border: [...G(), "hidden"]
+        border: [...T(), "hidden"]
       }],
       /**
        * Divide Width X
@@ -1550,7 +1550,7 @@ function He() {
        * @see https://tailwindcss.com/docs/divide-style
        */
       "divide-style": [{
-        divide: G()
+        divide: T()
       }],
       /**
        * Border Color
@@ -1613,7 +1613,7 @@ function He() {
        * @see https://tailwindcss.com/docs/outline-style
        */
       "outline-style": [{
-        outline: ["", ...G()]
+        outline: ["", ...T()]
       }],
       /**
        * Outline Offset
@@ -1703,7 +1703,7 @@ function He() {
        * @see https://tailwindcss.com/docs/mix-blend-mode
        */
       "mix-blend": [{
-        "mix-blend": D()
+        "mix-blend": [...D(), "plus-lighter", "plus-darker"]
       }],
       /**
        * Background Blend Mode
@@ -1911,7 +1911,7 @@ function He() {
        * @see https://tailwindcss.com/docs/transition-duration
        */
       duration: [{
-        duration: T()
+        duration: E()
       }],
       /**
        * Transition Timing Function
@@ -1925,7 +1925,7 @@ function He() {
        * @see https://tailwindcss.com/docs/transition-delay
        */
       delay: [{
-        delay: T()
+        delay: E()
       }],
       /**
        * Animation
@@ -2262,7 +2262,7 @@ function He() {
        * @see https://tailwindcss.com/docs/stroke-width
        */
       "stroke-w": [{
-        stroke: [x, C, E]
+        stroke: [x, C, N]
       }],
       /**
        * Stroke
@@ -2397,10 +2397,10 @@ const oe = (e) => typeof e == "boolean" ? "".concat(e) : e === 0 ? "0" : e, ne =
     asChild: { type: Boolean }
   },
   setup(e) {
-    return (r, t) => (fe(), be(O(ye), {
+    return (r, t) => (fe(), be(W(ye), {
       as: r.as,
       "as-child": r.asChild,
-      class: ge(O(ir)(O(rr)({ variant: r.variant, size: r.size }), r.$attrs.class ?? ""))
+      class: ge(W(ar)(W(rr)({ variant: r.variant, size: r.size }), r.$attrs.class ?? ""))
     }, {
       default: me(() => [
         he(r.$slots, "default")
@@ -2454,12 +2454,19 @@ const oe = (e) => typeof e == "boolean" ? "".concat(e) : e === 0 ? "0" : e, ne =
   }
 );
 /**
- * @license lucide-vue-next v0.365.0 - ISC
+ * @license lucide-vue-next v0.377.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const tr = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+/**
+ * @license lucide-vue-next v0.377.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-var N = {
+var V = {
   xmlns: "http://www.w3.org/2000/svg",
   width: 24,
   height: 24,
@@ -2471,88 +2478,95 @@ var N = {
   "stroke-linejoin": "round"
 };
 /**
- * @license lucide-vue-next v0.365.0 - ISC
+ * @license lucide-vue-next v0.377.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const tr = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+const or = ({ size: e, strokeWidth: r = 2, absoluteStrokeWidth: t, color: o, iconNode: i, name: n, class: s, ...l }, { slots: u }) => R(
+  "svg",
+  {
+    ...V,
+    width: e || V.width,
+    height: e || V.height,
+    stroke: o || V.stroke,
+    "stroke-width": t ? Number(r) * 24 / Number(e) : r,
+    class: ["lucide", `lucide-${tr(n ?? "icon")}`],
+    ...l
+  },
+  [...i.map((c) => R(...c)), ...u.default ? [u.default()] : []]
+);
 /**
- * @license lucide-vue-next v0.365.0 - ISC
+ * @license lucide-vue-next v0.377.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const F = (e, r) => ({ size: t, strokeWidth: o = 2, absoluteStrokeWidth: i, color: n, class: s, ...l }, { attrs: u, slots: c }) => V(
-  "svg",
+const F = (e, r) => (t, { slots: o }) => R(
+  or,
   {
-    ...N,
-    width: t || N.width,
-    height: t || N.height,
-    stroke: n || N.stroke,
-    "stroke-width": i ? Number(o) * 24 / Number(t) : o,
-    ...u,
-    class: ["lucide", `lucide-${tr(e)}`],
-    ...l
+    ...t,
+    iconNode: r,
+    name: e
   },
-  [...r.map((d) => V(...d)), ...c.default ? [c.default()] : []]
+  o
 );
 /**
- * @license lucide-vue-next v0.365.0 - ISC
+ * @license lucide-vue-next v0.377.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const or = F("ArrowDownUpIcon", [
+const nr = F("ArrowDownUpIcon", [
   ["path", { d: "m3 16 4 4 4-4", key: "1co6wj" }],
   ["path", { d: "M7 20V4", key: "1yoxec" }],
   ["path", { d: "m21 8-4-4-4 4", key: "1c9v7m" }],
   ["path", { d: "M17 4v16", key: "7dpous" }]
 ]);
 /**
- * @license lucide-vue-next v0.365.0 - ISC
+ * @license lucide-vue-next v0.377.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const nr = F("ArrowDownIcon", [
+const sr = F("ArrowDownIcon", [
   ["path", { d: "M12 5v14", key: "s699le" }],
   ["path", { d: "m19 12-7 7-7-7", key: "1idqje" }]
 ]);
 /**
- * @license lucide-vue-next v0.365.0 - ISC
+ * @license lucide-vue-next v0.377.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const sr = F("ArrowUpIcon", [
+const ir = F("ArrowUpIcon", [
   ["path", { d: "m5 12 7-7 7 7", key: "hav0vg" }],
   ["path", { d: "M12 19V5", key: "x0mq9r" }]
 ]);
-function cr(e, r) {
+function dr(e, r) {
   r.value = typeof e == "function" ? e(r.value) : e;
 }
-function ir(...e) {
+function ar(...e) {
   return Qe(ve(e));
 }
-const dr = (e, r) => {
+const ur = (e, r) => {
   let t;
-  return e.getIsSorted() === "asc" ? t = nr : e.getIsSorted() === "desc" ? t = sr : t = or, V(
+  return e.getIsSorted() === "asc" ? t = sr : e.getIsSorted() === "desc" ? t = ir : t = nr, R(
     er,
     {
       variant: "none",
       class: "text-foreground px-0 text-base",
       onClick: () => e.toggleSorting(e.getIsSorted() === "asc")
     },
-    () => [r, V(t, { class: "ml-2 h-4 w-4 text-muted-foreground" })]
+    () => [r, R(t, { class: "ml-2 h-4 w-4 text-muted-foreground" })]
   );
 };
 export {
   er as _,
   De as a,
   rr as b,
-  ir as c,
+  ar as c,
   F as d,
-  dr as t,
-  cr as v
+  ur as t,
+  dr as v
 };

package/dist/variables.css

@@ -1 +1 @@
-:root{--background: 0 0% 100%;--foreground: 242 24% 21%;--muted: 210 40% 96.1%;--muted-foreground: 225 5% 47%;--popover: 0 0% 100%;--popover-foreground: 222.2 84% 4.9%;--card: 0 0% 100%;--card-foreground: 222.2 84% 4.9%;--card-shadow: 241.538, 100%, 92%, .83;--border: 241 92% 71%;--input: 225 11% 84%;--primary: 241 92% 71%;--primary-hover: 241 76% 62%;--primary-active: 241 54% 54%;--primary-foreground: 0 0% 100%;--secondary: 210 40% 96.1%;--secondary-foreground: 241 76% 62%;--accent: 241 92% 71%;--accent-foreground: 241 76% 62%;--destructive: 328, 68%, 63%, .16;--destructive-foreground: 328, 68%, 63%;--success: 181, 34%, 39%, .16;--success-foreground: 181, 34%, 39%;--ring: 241 92% 71%;--radius: .5rem}.dark{--background: 242 24% 21%;--foreground: 0 0% 100%;--muted: 217.2 32.6% 17.5%;--muted-foreground: 0, 0%, 100%, .32;--popover: 222.2 84% 4.9%;--popover-foreground: 210 40% 98%;--card: 222.2 84% 4.9%;--card-foreground: 210 40% 98%;--card-shadow: 242.027, 94%, 69%, .4;--border: 241 92% 71%;--input: 0, 0%, 100%, .32;--primary: 241 92% 71%;--primary-hover: 241 76% 62%;--primary-active: 241 54% 54%;--primary-foreground: 0 0% 100%;--secondary: 217.2 32.6% 17.5%;--secondary-foreground: 210 40% 98%;--accent: 241 92% 71%;--accent-foreground: 240 100% 77%;--destructive: 328, 68%, 63%, .16;--destructive-foreground: 328, 68%, 63%;--success: 181, 34%, 39%, .16;--success-foreground: 152 80% 38%;--ring: 241 92% 71%}*{border-color:hsl(var(--border))}body{background-color:hsl(var(--background));color:hsl(var(--foreground))}
+:root{--background: 0 0% 100%;--foreground: 242 24% 21%;--muted: 210 40% 96.1%;--muted-foreground: 225 5% 47%;--popover: 0 0% 100%;--popover-foreground: 222.2 84% 4.9%;--card: 0 0% 100%;--card-foreground: 222.2 84% 4.9%;--card-shadow: 241.538, 100%, 92%, .83;--tab-shadow: 228, 51%, 11%, .08;--border: 241 92% 71%;--input: 225 11% 84%;--primary: 241 92% 71%;--primary-hover: 241 76% 62%;--primary-active: 241 54% 54%;--primary-foreground: 0 0% 100%;--secondary: 210 40% 96.1%;--secondary-foreground: 241 76% 62%;--accent: 241 92% 71%;--accent-foreground: 241 76% 62%;--destructive: 328, 68%, 63%, .16;--destructive-foreground: 328, 68%, 63%;--success: 181, 34%, 39%, .16;--success-foreground: 181, 34%, 39%;--ring: 241 92% 71%;--radius: .5rem}.dark{--background: 242 24% 21%;--foreground: 0 0% 100%;--muted: 217.2 32.6% 17.5%;--muted-foreground: 0, 0%, 100%, .32;--popover: 222.2 84% 4.9%;--popover-foreground: 210 40% 98%;--card: 242 24% 21%;--card-foreground: 210 40% 98%;--card-shadow: 242.027, 94%, 69%, .4;--tab-shadow: 228, 51%, 11%, .08;--border: 241 92% 71%;--input: 0, 0%, 100%, .32;--primary: 241 92% 71%;--primary-hover: 241 76% 62%;--primary-active: 241 54% 54%;--primary-foreground: 0 0% 100%;--secondary: 217.2 32.6% 17.5%;--secondary-foreground: 210 40% 98%;--accent: 241 92% 71%;--accent-foreground: 240 100% 77%;--destructive: 328, 68%, 63%, .16;--destructive-foreground: 328, 68%, 63%;--success: 181, 34%, 39%, .16;--success-foreground: 152 80% 38%;--ring: 241 92% 71%}*{border-color:hsl(var(--border))}body{background-color:hsl(var(--background));color:hsl(var(--foreground))}

package/dist/{x-BK5-DOwl.js → x-CsgWZRM2.js}

@@ -1,6 +1,6 @@
-import { d as e } from "./utils-DMgok1im.js";
+import { d as e } from "./utils-X1PecXjd.js";
 /**
- * @license lucide-vue-next v0.365.0 - ISC
+ * @license lucide-vue-next v0.377.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soft-stech/bootsman-ui-shadcn",
-  "version": "1.1.18",
+  "version": "1.1.22",
   "type": "module",
   "files": [
     "dist",
@@ -29,50 +29,51 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@tanstack/vue-table": "8.15.3",
+    "@tanstack/vue-table": "8.16.0",
     "@vee-validate/zod": "4.12.6",
     "@vueuse/core": "10.9.0",
     "class-variance-authority": "0.7.0",
-    "clsx": "2.1.0",
-    "lucide-vue-next": "0.365.0",
-    "radix-vue": "1.6.2",
-    "tailwind-merge": "2.2.2",
+    "clsx": "2.1.1",
+    "lucide-vue-next": "0.377.0",
+    "radix-vue": "1.7.3",
+    "tailwind-merge": "2.3.0",
     "tailwindcss-animate": "1.0.7",
     "v-calendar": "3.1.2",
     "vee-validate": "4.12.6",
-    "vue": "3.4.21",
-    "zod": "3.22.4"
+    "vue": "3.4.26",
+    "zod": "3.23.5"
   },
   "devDependencies": {
-    "@histoire/plugin-vue": "0.17.15",
-    "@playwright/test": "1.43.0",
-    "@rushstack/eslint-patch": "1.10.1",
+    "@histoire/plugin-vue": "0.17.17",
+    "@playwright/test": "1.43.1",
+    "@rushstack/eslint-patch": "1.10.2",
     "@tsconfig/node18": "18.2.4",
     "@types/jsdom": "21.1.6",
-    "@types/node": "20.12.5",
+    "@types/node": "20.12.8",
     "@vitejs/plugin-vue": "5.0.4",
-    "@vitest/coverage-v8": "1.4.0",
+    "@vitest/coverage-v8": "1.5.3",
     "@vue/eslint-config-prettier": "8.0.0",
     "@vue/eslint-config-typescript": "12.0.0",
-    "@vue/test-utils": "2.4.3",
+    "@vue/test-utils": "2.4.5",
     "@vue/tsconfig": "0.5.1",
-    "autoprefixer": "10.4.16",
-    "bumpp": "9.4.0",
+    "autoprefixer": "10.4.19",
+    "bumpp": "9.4.1",
     "eslint": "8.57.0",
-    "eslint-plugin-vue": "9.24.0",
-    "fast-sort": "^3.4.0",
-    "glob": "10.3.10",
-    "histoire": "0.17.15",
+    "eslint-plugin-vue": "9.25.0",
+    "fast-sort": "3.4.0",
+    "glob": "10.3.12",
+    "histoire": "0.17.17",
     "jsdom": "23.2.0",
-    "npm-run-all2": "6.1.1",
-    "postcss": "8.4.33",
+    "npm-run-all2": "6.1.2",
+    "postcss": "8.4.38",
     "prettier": "3.2.5",
-    "prettier-plugin-tailwindcss": "0.5.13",
+    "prettier-plugin-tailwindcss": "0.5.14",
     "tailwindcss": "3.4.3",
-    "typescript": "~5.3.3",
-    "vite": "5.2.8",
-    "vite-plugin-dts": "3.7.2",
-    "vitest": "1.4.0",
-    "vue-tsc": "1.8.27"
+    "typescript": "~5.4.5",
+    "vite": "5.2.11",
+    "vite-plugin-dts": "3.9.0",
+    "vitest": "1.5.3",
+    "vue-tsc": "2.0.16",
+    "mlly": "1.4.2"
   }
 }

package/src/assets/variables.css

@@ -11,6 +11,7 @@
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
     --card-shadow: 241.538, 100%, 92%, 0.83;
+    --tab-shadow: 228, 51%, 11%, 0.08;
 
     --border: 241 92% 71%;
     --input: 225 11% 84%;
@@ -47,9 +48,10 @@
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
 
-    --card: 222.2 84% 4.9%;
+    --card: 242 24% 21%;
     --card-foreground: 210 40% 98%;
     --card-shadow: 242.027, 94%, 69%, 0.4;
+    --tab-shadow: 228, 51%, 11%, 0.08;
 
     --border: 241 92% 71%;
     --input: 0, 0%, 100%, 0.32;

package/src/components/stories/BuiDataTable.story.vue

@@ -13,7 +13,7 @@ import tasks from './data/tasks.json'
 const taskSchema = z.object({
   id: z.string(),
   title: z.string(),
-  status: z.string(),
+  status: z.string().nullable().optional(),
   label: z.string(),
   priority: z.string(),
   errorMessage: z.string().optional()
@@ -74,7 +74,7 @@ function updateSelection(val: RowSelectionState) {
 type GroupBy = 'none' | 'status'
 const groupBy = ref<GroupBy>('none')
 const groupLabels = {
-  status: 'Status'
+  status: ['Status', 'Not in any status']
 }
 
 const sortedData = computed(() => {
@@ -84,10 +84,24 @@ const sortedData = computed(() => {
 
   const sortBy: ISortByObjectSorter<Task> | ISortByObjectSorter<Task>[] = [
     {
-      [sortDirection]: groupByStr === 'none' ? sortColumn : [(row) => row[groupByStr], sortColumn]
+      [sortDirection]: sortColumn
     }
   ]
 
+  // sort by grouping column first, but not when manually sorting by it
+  if (groupByStr !== 'none' && sortColumn !== groupByStr) {
+    sortBy.unshift({
+      asc: groupByStr
+    })
+  }
+
+  // sort by ID when possible
+  if (sortColumn !== 'id') {
+    sortBy.push({
+      asc: 'id'
+    })
+  }
+
   return sort(data.value).by([...sortBy])
 })
 

package/src/components/stories/data/tasks.json

@@ -142,7 +142,6 @@
   {
     "id": "TASK-9285",
     "title": "The IP monitor is down, copy the haptic alarm so we can generate the HTTP transmitter!",
-    "status": "todo",
     "label": "bug",
     "priority": "high"
   },
@@ -219,7 +218,6 @@
   {
     "id": "TASK-9892",
     "title": "If we back up the application, we can get to the UDP application through the multi-byte THX capacitor!",
-    "status": "done",
     "label": "documentation",
     "priority": "high"
   },
@@ -408,7 +406,7 @@
   {
     "id": "TASK-9549",
     "title": "You can't bypass the bus without connecting the neural JBOD bus!",
-    "status": "todo",
+    "status": null,
     "label": "feature",
     "priority": "high"
   },

package/src/components/ui/calendar/BuiCalendar.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import { useVModel } from '@vueuse/core'
-import type { Calendar } from 'v-calendar'
-import { DatePicker } from 'v-calendar'
+import { DatePicker, type Calendar } from 'v-calendar'
 import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
 import { computed, nextTick, onMounted, ref, useSlots } from 'vue'
-import { isVCalendarSlot } from '.'
+import { isVCalendarSlot } from './index'
 import { buttonVariants } from '@/components/ui/button'
 import { cn } from '@/lib/utils'
 

package/src/components/ui/table/BuiDataTable.vue

@@ -34,6 +34,8 @@ import {
   BuiTableRow
 } from './'
 
+const NO_GROUP_KEY = '#UNDEFINED#'
+
 const props = withDefaults(
   defineProps<{
     columns: ColumnDef<TData, TValue>[]
@@ -44,7 +46,7 @@ const props = withDefaults(
     manualPagination?: boolean
     manualSorting?: boolean
     groupBy?: keyof TData
-    groupLabels?: { [key in keyof TData]?: string }
+    groupLabels?: { [key in keyof TData]?: string[] }
     getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string
     renderSubComponent?: (row: Row<TData>) => (() => any) | undefined
   }>(),
@@ -115,16 +117,22 @@ const pageIndex = computed({
   }
 })
 
-const groupedRows = computed(() => {
+const groupedRows = computed<{ [key: string]: Row<TData>[] }>(() => {
   if (!props.groupBy) return null
 
   return table.getRowModel().rows.reduce((acc, row) => {
-    const col = row.getValue(props.groupBy! as string) as string
+    const value = row.getValue(props.groupBy! as string)
+    const col = (value ?? NO_GROUP_KEY) as string
     acc[col] = acc[col] || []
     acc[col].push(row)
     return acc
   }, Object.create(null))
 })
+
+function getGroupLabel(index: number) {
+  const labels = props.groupBy && props.groupLabels ? props.groupLabels[props.groupBy] || [] : []
+  return labels[index]
+}
 </script>
 
 <template>
@@ -149,7 +157,10 @@ const groupedRows = computed(() => {
               <BuiTableRow class="bg-foreground/[0.04]">
                 <BuiTableCell :colspan="columns.length" class="!pb-0">
                   <div class="inline-block rounded-t bg-background px-4 py-3">
-                    {{ props.groupLabels && props.groupLabels[props.groupBy] }}: {{ key }}
+                    <template v-if="key === NO_GROUP_KEY">
+                      {{ getGroupLabel(1) }}
+                    </template>
+                    <template v-else> {{ getGroupLabel(0) }}: {{ key }} </template>
                   </div>
                 </BuiTableCell>
               </BuiTableRow>