vlite3 0.0.9 → 0.1.1

package/README.md

@@ -63,30 +63,25 @@ vlite3 uses a semantic theming system inspired by **shadcn/ui** and compatible w
 
 You can customize these colors in your CSS by overriding the variables in `:root` or `.dark` classes (if you are using a class-based dark mode switcher).
 
-| Variable                   | Class Name                    | Description              | Recommended Usage                                          |
-| :------------------------- | :---------------------------- | :----------------------- | :--------------------------------------------------------- |
-| `--background`             | `bg-background`               | Default page background  | The main background color of your app.                     |
-| `--foreground`             | `text-foreground`             | Default text color       | The primary text color for content.                        |
-| `--card`                   | `bg-card`                     | Card background          | Background for cards, panels, and dialogs.                 |
-| `--card-foreground`        | `text-card-foreground`        | Card text color          | Text color inside cards.                                   |
-| `--card-muted`             | `bg-card-muted`               | Muted card background    | Secondary background area within cards.                    |
-| `--popover`                | `bg-popover`                  | Popover background       | Background for popovers, tooltips, and dropdowns.          |
-| `--popover-foreground`     | `text-popover-foreground`     | Popover text color       | Text color inside popovers.                                |
-| `--popover-muted`          | `bg-popover-muted`            | Muted popover background | Secondary area within popovers (e.g., headers).            |
-| `--primary`                | `bg-primary`                  | Primary brand color      | Used for main actions (buttons, active states).            |
-| `--primary-foreground`     | `text-primary-foreground`     | Primary text color       | Text color for content on top of primary background.       |
-| `--secondary`              | `bg-secondary`                | Secondary background     | Used for secondary actions or muted sections.              |
-| `--secondary-foreground`   | `text-secondary-foreground`   | Secondary text color     | Text color for content on top of secondary background.     |
-| `--muted`                  | `bg-muted`                    | Muted background         | Subtle backgrounds (e.g., table headers, disabled states). |
-| `--muted-foreground`       | `text-muted-foreground`       | Muted text color         | Secondary text, hints, placeholders.                       |
-| `--accent`                 | `bg-accent`                   | Accent background        | Used for hover states, selection highlights.               |
-| `--accent-foreground`      | `text-accent-foreground`      | Accent text color        | Text color on accent backgrounds.                          |
-| `--destructive`            | `bg-destructive`              | Destructive color        | Used for error states and destructive actions.             |
-| `--destructive-foreground` | `text-destructive-foreground` | Destructive text color   | Text color on destructive backgrounds.                     |
-| `--border`                 | `border`                      | Default border color     | Borders for inputs, cards, and dividers.                   |
-| `--input`                  | `border-input`                | Input border color       | Borders specifically for form inputs.                      |
-| `--ring`                   | `ring-ring`                   | Focus ring color         | Outline color for focused elements.                        |
-| `--radius`                 | `rounded-radius`              | Border radius            | Global border radius for components.                       |
+| Variable                   | Class Name                    | Description             | Recommended Usage                                                           |
+| :------------------------- | :---------------------------- | :---------------------- | :-------------------------------------------------------------------------- |
+| `--background`             | `bg-background`               | Default page background | The main background color of your app.                                      |
+| `--foreground`             | `text-foreground`             | Default text color      | The primary text color for content.                                         |
+| `--card`                   | `bg-card`                     | Card background         | Little Gray Background for cards, containers, surfece, panels, and dialogs. |
+| `--primary`                | `bg-primary`                  | Primary brand color     | Used for main actions (buttons, active states).                             |
+| `--primary-foreground`     | `text-primary-foreground`     | Primary text color      | Text color for content on top of primary background.                        |
+| `--secondary`              | `bg-secondary`                | Secondary background    | Used for secondary actions or muted sections.                               |
+| `--secondary-foreground`   | `text-secondary-foreground`   | Secondary text color    | Text color for content on top of secondary background.                      |
+| `--muted`                  | `bg-muted`                    | Muted background        | Subtle backgrounds (e.g., table headers, disabled states).                  |
+| `--muted-foreground`       | `text-muted-foreground`       | Muted text color        | Secondary text, hints, placeholders.                                        |
+| `--accent`                 | `bg-accent`                   | Accent background       | Used for hover states, selection highlights.                                |
+| `--accent-foreground`      | `text-accent-foreground`      | Accent text color       | Text color on accent backgrounds.                                           |
+| `--destructive`            | `bg-destructive`              | Destructive color       | Used for error states and destructive actions.                              |
+| `--destructive-foreground` | `text-destructive-foreground` | Destructive text color  | Text color on destructive backgrounds.                                      |
+| `--border`                 | `border`                      | Default border color    | Borders for inputs, cards, and dividers.                                    |
+| `--input`                  | `border-input`                | Input border color      | Borders specifically for form inputs.                                       |
+| `--ring`                   | `ring-ring`                   | Focus ring color        | Outline color for focused elements.                                         |
+| `--radius`                 | `rounded`                     | Border radius           | Global border radius for components.                                        |
 
 ### Extended Color Variants
 
@@ -197,3 +192,110 @@ To customize the theme, simply override the CSS variables in your main CSS file:
 - **ToastNotification**
 - **Tooltip**
 - **Dropdown**
+
+## Global Configuration (Registry System)
+
+vlite3 features a plugin-based architecture that allows you to register global services. This is particularly useful for dependency injection, such as defining how file uploads should be handled across all `Form` components in your app.
+
+### Setting up the Plugin
+
+In your `main.ts` or `main.js`, import `createVLite` and register your services:
+
+```typescript
+import { createApp } from 'vue'
+import App from './App.vue'
+import { createVLite } from 'vlite3'
+
+const app = createApp(App)
+
+// Initialize VLite with custom configuration
+const vlite = createVLite({
+  services: {
+    /**
+     * Global File Upload Handler
+     *
+     * This function will be called automatically by:
+     * - useFileUpload() composable
+     * - Form components (when using 'file', 'fileUploader', or 'avatarUpload' types)
+     *
+     * @param file - The File object to upload
+     * @param folderId - (Optional) Folder ID passed from component props
+     * @returns Promise<string> - The public URL of the uploaded file
+     */
+    upload: async (file, folderId) => {
+      // Example: Upload to your own backend
+      const formData = new FormData()
+      formData.append('file', file)
+      if (folderId) formData.append('folder_id', folderId)
+
+      // Replace with your actual API call (e.g., Axios, Fetch)
+      const response = await fetch(
+        '[https://api.yourdomain.com/v1/upload](https://api.yourdomain.com/v1/upload)',
+        {
+          method: 'POST',
+          body: formData,
+          headers: {
+            Authorization: 'Bearer ...',
+          },
+        }
+      )
+
+      if (!response.ok) throw new Error('Upload failed')
+
+      const data = await response.json()
+      return data.url // MUST return the file URL string
+    },
+  },
+})
+
+app.use(vlite)
+app.mount('#app')
+```
+
+### How it works
+
+Once registered, you don't need to pass upload handlers to individual components.
+
+1. **Automatic Injection**: The `Form` component detects input types like `file`, `avatarUpload`, or `fileUploader`.
+2. **Parallel Processing**: When the form is submitted, it automatically uploads all files in **parallel** using your registered `upload` service.
+3. **URL Replacement**: The File objects in your form data are replaced with the returned URLs before the final `onSubmit` event is triggered.
+
+## 4. Usage
+
+Import components directly in your Vue files:
+
+```vue
+<script setup>
+import { Button, Input, Form } from 'vlite3'
+
+// The form will automatically use the global upload service defined in main.ts
+const schema = [
+  {
+    name: 'avatar',
+    label: 'Profile Picture',
+    type: 'avatarUpload',
+  },
+  {
+    name: 'documents',
+    label: 'Attachments',
+    type: 'fileUploader',
+    props: { multiple: true },
+  },
+]
+
+const handleSubmit = (payload) => {
+  // payload.values.avatar will be a URL string (e.g., "https://api...")
+  // payload.values.documents will be an array of URL strings
+  console.log(payload.values)
+}
+</script>
+
+<template>
+  <div class="p-4 space-y-4">
+    <Button>Click Me</Button>
+    <Input placeholder="Type here..." />
+
+    <Form :schema="schema" @onSubmit="handleSubmit" />
+  </div>
+</template>
+```

package/components/Alert.vue.js

@@ -19,15 +19,15 @@ const j = ["role"], E = {
     const t = e, p = f, c = V(!0), y = () => {
       c.value = !1, p("close");
     }, b = a(() => ({
-      primary: "bg-primary-light text-primary border-primary/20",
-      success: "bg-success-light text-success-dark border-success/20",
+      primary: "bg-primary-light text-primary border-primary/15",
+      success: "bg-success-light text-success-dark border-success/25",
       warning: "bg-warning-light text-warning-dark border-warning/20",
-      danger: "bg-danger-light text-danger-dark border-danger/20"
+      danger: "bg-danger-light text-danger-dark border-danger/15"
     })[t.variant]), k = a(() => ({
-      primary: "text-primary",
-      success: "text-success-dark",
-      warning: "text-warning-dark",
-      danger: "text-danger-dark"
+      primary: "text-primary!",
+      success: "text-success-dark!",
+      warning: "text-warning-dark!",
+      danger: "text-danger-dark!"
     })[t.variant]), l = a(() => !t.description && !$().default), x = a(() => [
       "relative w-full rounded-lg border px-4 [&>svg]:absolute [&>svg]:left-4 [&>svg]:text-foreground",
       l.value ? "py-3" : "pt-4 pb-2",
@@ -35,7 +35,10 @@ const j = ["role"], E = {
       l.value ? "[&>svg]:top-1/2 [&>svg]:-translate-y-1/2" : "[&>svg]:top-4 top-4 [&>svg+div]:translate-y-[-3px]",
       b.value,
       t.class
-    ].join(" ")), h = a(() => ["font-medium leading-none tracking-tight", l.value ? "" : "mb-1"].join(" ")), w = a(() => t.role ? t.role : ["danger", "warning"].includes(t.variant) ? "alert" : "status");
+    ].join(" ")), h = a(() => [
+      "font-medium leading-none tracking-tight text-inherit!",
+      l.value ? "" : "mb-1"
+    ].join(" ")), w = a(() => t.role ? t.role : ["danger", "warning"].includes(t.variant) ? "alert" : "status");
     return (s, u) => c.value ? (n(), i("div", {
       key: 0,
       class: r(x.value),

package/components/Avatar.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as k, ref as c, watch as w, computed as a, openBlock as t, createElementBlock as r, normalizeClass as d, renderSlot as g, toDisplayString as b, createBlock as C } from "vue";
+import { defineComponent as k, ref as c, watch as w, computed as a, openBlock as t, createElementBlock as r, normalizeClass as d, renderSlot as b, toDisplayString as g, createBlock as C } from "vue";
 import _ from "./Icon.vue.js";
 const y = ["src", "alt"], z = { key: 0 }, A = /* @__PURE__ */ k({
   __name: "Avatar",
@@ -10,18 +10,18 @@ const y = ["src", "alt"], z = { key: 0 }, A = /* @__PURE__ */ k({
     rounded: { default: "full" },
     class: { default: "" }
   },
-  setup(n) {
-    const e = n, s = c(!1), o = c(!1);
+  setup(o) {
+    const e = o, s = c(!1), n = c(!1);
     w(
       () => e.src,
       () => {
-        s.value = !1, o.value = !1;
+        s.value = !1, n.value = !1;
       }
     );
     const f = () => {
-      s.value = !0, o.value = !1;
+      s.value = !0, n.value = !1;
     }, i = () => {
-      o.value = !0, s.value = !1;
+      n.value = !0, s.value = !1;
     }, m = a(() => e.src && !s.value), u = a(() => {
       if (e.fallback) return e.fallback;
       if (!e.alt) return "";
@@ -43,7 +43,7 @@ const y = ["src", "alt"], z = { key: 0 }, A = /* @__PURE__ */ k({
       "2xl": "rounded-2xl",
       full: "rounded-full"
     }, v = a(() => [
-      "relative flex shrink-0 overflow-hidden bg-muted",
+      "relative flex shrink-0 overflow-hidden bg-muted border border-border/50",
       x[e.size],
       h[e.rounded],
       e.class
@@ -53,8 +53,8 @@ const y = ["src", "alt"], z = { key: 0 }, A = /* @__PURE__ */ k({
     }, [
       m.value ? (t(), r("img", {
         key: 0,
-        src: n.src,
-        alt: n.alt,
+        src: o.src,
+        alt: o.alt,
         class: "aspect-square h-full w-full object-cover",
         onError: f,
         onLoad: i
@@ -62,8 +62,8 @@ const y = ["src", "alt"], z = { key: 0 }, A = /* @__PURE__ */ k({
         key: 1,
         class: d(p.value)
       }, [
-        g(l.$slots, "fallback", {}, () => [
-          u.value ? (t(), r("span", z, b(u.value), 1)) : (t(), C(_, {
+        b(l.$slots, "fallback", {}, () => [
+          u.value ? (t(), r("span", z, g(u.value), 1)) : (t(), C(_, {
             key: 1,
             icon: "lucide:user",
             class: "h-1/2 w-1/2"

package/components/AvatarUploader/AvatarUploader.vue.d.ts

@@ -1,4 +1,4 @@
-import { FilePickerValue } from '../FilePicker';
+import { FilePickerValue } from '../FilePicker/FilePicker.vue';
 import { AvatarSize, AvatarRounded } from '../../types';
 export interface Props {
     modelValue?: any;

package/components/AvatarUploader/AvatarUploader.vue.js

@@ -1,8 +1,9 @@
-import { defineComponent as w, ref as z, computed as f, openBlock as n, createElementBlock as r, normalizeClass as l, createVNode as o, unref as C, withCtx as A, createElementVNode as B, createCommentVNode as g, withModifiers as N } from "vue";
+import { defineComponent as x, ref as w, computed as z, openBlock as n, createElementBlock as o, createElementVNode as b, normalizeClass as l, createVNode as d, withCtx as C, createCommentVNode as f, withModifiers as A } from "vue";
 import u from "../Icon.vue.js";
-import j from "../FilePicker/FilePicker.vue.js";
-import E from "../Avatar.vue.js";
-const $ = ["onClick"], I = /* @__PURE__ */ w({
+import B from "../FilePicker/FilePicker.vue.js";
+import N from "../Avatar.vue.js";
+const E = { class: "inline-block" }, $ = ["onClick"], I = /* @__PURE__ */ x({
+  name: "AvatarUploader",
   __name: "AvatarUploader",
   props: {
     modelValue: { default: null },
@@ -17,81 +18,80 @@ const $ = ["onClick"], I = /* @__PURE__ */ w({
     className: {}
   },
   emits: ["update:modelValue", "change", "error"],
-  setup(e, { emit: v }) {
-    const s = e, t = v, i = z(null), c = f(() => i.value || s.modelValue), h = (a) => {
+  setup(e, { emit: g }) {
+    const v = e, t = g, i = w(null), s = z(() => i.value || v.modelValue), h = (a) => {
       if (!a || Array.isArray(a)) {
-        Array.isArray(a) && a.length === 0 && m();
+        Array.isArray(a) && a.length === 0 && c();
         return;
       }
       a.base64 && (i.value = a.base64, t("update:modelValue", a.base64)), t("change", a);
     }, y = (a) => {
       t("error", a);
-    }, m = () => {
+    }, c = () => {
       i.value = null, t("update:modelValue", null), t("change", null);
-    }, k = f(() => [
-      "group relative inline-block",
-      // If rounded is full, we need overflow hidden on the container to clip the overlay
-      s.rounded === "full" ? "rounded-full" : ""
-    ].join(" "));
-    return (a, b) => (n(), r("div", {
-      class: l(k.value)
-    }, [
-      o(C(j), {
-        disabled: !e.editable || e.disabled || e.loading,
-        "return-format": "base64",
-        "file-types": ["image/jpeg", "image/png", "image/webp", "image/gif"],
-        "max-size": e.maxSize,
-        class: "w-auto h-auto block",
-        onChange: b[0] || (b[0] = (d) => h(d)),
-        onError: y
-      }, {
-        trigger: A(({ trigger: d, isLoading: x }) => [
-          B("div", {
-            class: l(["relative cursor-pointer transition-transform active:scale-95 inline-block", { "cursor-default": !e.editable || e.disabled }]),
-            onClick: (R) => e.editable && !e.disabled ? d() : null
-          }, [
-            o(E, {
-              src: c.value || void 0,
-              fallback: e.fallback,
-              alt: e.alt,
-              size: e.size,
-              rounded: e.rounded,
-              class: l(e.className)
-            }, null, 8, ["src", "fallback", "alt", "size", "rounded", "class"]),
-            e.loading || x ? (n(), r("div", {
-              key: 0,
-              class: l(["absolute inset-0 flex items-center justify-center bg-black/40 backdrop-blur-[1px] text-white transition-opacity", e.rounded === "full" ? "rounded-full" : "rounded-md"])
-            }, [
-              o(u, {
-                icon: "lucide:loader-2",
-                class: "animate-spin w-1/3 h-1/3"
-              })
-            ], 2)) : e.editable && !e.disabled ? (n(), r("div", {
-              key: 1,
-              class: l(["absolute inset-0 flex items-center justify-center bg-black/40 text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100", e.rounded === "full" ? "rounded-full" : "rounded-md"])
-            }, [
-              o(u, {
-                icon: "lucide:camera",
-                class: "w-1/3 h-1/3"
-              })
-            ], 2)) : g("", !0)
-          ], 10, $)
-        ]),
-        _: 1
-      }, 8, ["disabled", "max-size"]),
-      c.value && e.editable && !e.disabled && !e.loading ? (n(), r("button", {
-        key: 0,
-        type: "button",
-        class: "absolute -top-1 -right-1 z-10 p-1 bg-background border border-border rounded-full text-muted-foreground shadow-sm hover:text-destructive hover:border-destructive transition-colors opacity-0 group-hover:opacity-100 scale-75 group-hover:scale-100 duration-200 transform",
-        onClick: N(m, ["stop"]),
-        title: "Remove image"
+    };
+    return (a, m) => (n(), o("div", E, [
+      b("div", {
+        class: l(["relative inline-block group", e.rounded === "full" ? "rounded-full" : "rounded-md"])
       }, [
-        o(u, {
-          icon: "lucide:x",
-          class: "w-3 h-3"
-        })
-      ])) : g("", !0)
-    ], 2));
+        d(N, {
+          src: s.value || void 0,
+          fallback: e.fallback,
+          alt: e.alt,
+          size: e.size,
+          rounded: e.rounded,
+          class: l(e.className)
+        }, null, 8, ["src", "fallback", "alt", "size", "rounded", "class"]),
+        d(B, {
+          disabled: !e.editable || e.disabled || e.loading,
+          "return-format": "base64",
+          "file-types": ["image/jpeg", "image/png", "image/webp", "image/gif"],
+          "max-size": e.maxSize,
+          class: "absolute inset-0",
+          onChange: m[0] || (m[0] = (r) => h(r)),
+          onError: y
+        }, {
+          trigger: C(({ trigger: r, isLoading: k }) => [
+            b("button", {
+              type: "button",
+              class: l(["absolute inset-0 cursor-pointer", { "cursor-default": !e.editable || e.disabled }]),
+              onClick: (j) => e.editable && !e.disabled ? r() : null
+            }, [
+              e.loading || k ? (n(), o("div", {
+                key: 0,
+                class: l(["absolute inset-0 flex items-center justify-center bg-black/40 text-white", e.rounded === "full" ? "rounded-full" : "rounded-md"])
+              }, [
+                d(u, {
+                  icon: "lucide:loader-2",
+                  class: "animate-spin w-1/3 h-1/3"
+                })
+              ], 2)) : e.editable && !e.disabled ? (n(), o("div", {
+                key: 1,
+                class: l(["absolute inset-0 flex items-center justify-center bg-black/40 text-white opacity-0 group-hover:opacity-100 transition-opacity", e.rounded === "full" ? "rounded-full" : "rounded-md"])
+              }, [
+                d(u, {
+                  icon: "lucide:camera",
+                  class: "w-1/3 h-1/3"
+                })
+              ], 2)) : f("", !0)
+            ], 10, $)
+          ]),
+          _: 1
+        }, 8, ["disabled", "max-size"]),
+        s.value && e.editable && !e.disabled && !e.loading ? (n(), o("button", {
+          key: 0,
+          type: "button",
+          class: "absolute -top-1 -right-1 z-10 p-1 bg-background border border-border rounded-full text-muted-foreground shadow-sm hover:text-destructive hover:border-destructive transition-all opacity-0 group-hover:opacity-100 scale-75 group-hover:scale-100",
+          onClick: A(c, ["stop"]),
+          title: "Remove image"
+        }, [
+          d(u, {
+            icon: "lucide:x",
+            class: "w-3 h-3"
+          })
+        ])) : f("", !0)
+      ], 2)
+    ]));
   }
 });
 export {

package/components/CheckBox.vue.js

@@ -26,9 +26,9 @@ const B = { class: "flex items-center space-x-2" }, N = ["aria-checked", "data-s
     }, b = {
       xs: "h-3.5 w-3.5",
       sm: "h-4 w-4",
-      md: "h-5 w-5",
-      lg: "h-6 w-6",
-      xl: "h-7 w-7"
+      md: "h-4.5 w-4.5",
+      lg: "h-5 w-5",
+      xl: "h-5.5 w-5.5"
     }, s = {
       xs: "h-2.5 w-2.5",
       sm: "h-3 w-3",

package/components/ChoiceBox/ChoiceBox.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as w, computed as y, openBlock as t, createElementBlock as i, toDisplayString as n, createCommentVNode as a, createElementVNode as c, normalizeClass as u, Fragment as V, renderList as _, withKeys as C, withModifiers as B, createVNode as A, createBlock as h } from "vue";
+import { defineComponent as w, computed as y, openBlock as t, createElementBlock as i, toDisplayString as o, createCommentVNode as a, createElementVNode as c, normalizeClass as u, Fragment as V, renderList as _, withKeys as C, withModifiers as B, createVNode as A, createBlock as x } from "vue";
 import m from "../Icon.vue.js";
 const K = { class: "w-full" }, N = {
   key: 0,
@@ -31,8 +31,8 @@ const K = { class: "w-full" }, N = {
     gap: { default: 4 }
   },
   emits: ["update:modelValue", "change"],
-  setup(r, { emit: x }) {
-    const s = r, g = x, o = (l) => Array.isArray(s.modelValue) ? s.modelValue.includes(l) : s.modelValue === l, f = (l) => {
+  setup(r, { emit: h }) {
+    const s = r, g = h, n = (l) => Array.isArray(s.modelValue) ? s.modelValue.includes(l) : s.modelValue === l, f = (l) => {
       if (s.disabled || s.options.find((d) => d.id === l)?.disabled) return;
       let e;
       if (s.multiple) {
@@ -72,16 +72,16 @@ const K = { class: "w-full" }, N = {
     });
     return (l, k) => (t(), i("div", K, [
       r.title || r.description ? (t(), i("div", N, [
-        r.title ? (t(), i("h3", $, n(r.title), 1)) : a("", !0),
-        r.description ? (t(), i("p", E, n(r.description), 1)) : a("", !0)
+        r.title ? (t(), i("h3", $, o(r.title), 1)) : a("", !0),
+        r.description ? (t(), i("p", E, o(r.description), 1)) : a("", !0)
       ])) : a("", !0),
       c("div", {
         class: u(["grid", [b.value, v.value]])
       }, [
         (t(!0), i(V, null, _(r.options, (e) => (t(), i("div", {
           key: e.id,
-          class: u(["relative flex cursor-pointer rounded-xl border border-border p-4 shadow-sm transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2", [
-            o(e.id) ? "border-primary bg-accent" : "bg-card hover:border-primary/50 hover:bg-accent",
+          class: u(["relative flex cursor-pointer rounded-xl border border-border p-4 transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2", [
+            n(e.id) ? "border-primary bg-accent" : "bg-card hover:border-primary/50 hover:bg-accent",
             r.disabled || e.disabled ? "opacity-50 cursor-not-allowed grayscale" : ""
           ]]),
           onClick: (d) => f(e.id),
@@ -93,7 +93,7 @@ const K = { class: "w-full" }, N = {
               c("div", {
                 class: u([
                   "flex h-10 w-10 items-center justify-center rounded-full transition-colors",
-                  o(e.id) ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"
+                  n(e.id) ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"
                 ])
               }, [
                 A(m, {
@@ -106,26 +106,26 @@ const K = { class: "w-full" }, N = {
               c("div", z, [
                 c("span", {
                   class: u(["font-semibold text-foreground", {
-                    "text-primary": o(e.id)
+                    "text-primary": n(e.id)
                   }])
-                }, n(e.title), 3),
+                }, o(e.title), 3),
                 e.badge ? (t(), i("span", {
                   key: 0,
                   class: u([
                     "inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium",
-                    o(e.id) ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
+                    n(e.id) ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
                   ])
-                }, n(e.badge), 3)) : a("", !0)
+                }, o(e.badge), 3)) : a("", !0)
               ]),
-              e.description ? (t(), i("span", D, n(e.description), 1)) : a("", !0)
+              e.description ? (t(), i("span", D, o(e.description), 1)) : a("", !0)
             ])
           ]),
-          o(e.id) ? (t(), i("div", F, [
-            r.multiple ? (t(), h(m, {
+          n(e.id) ? (t(), i("div", F, [
+            r.multiple ? (t(), x(m, {
               key: 0,
               icon: "lucide:check-square",
               class: "h-5 w-5"
-            })) : (t(), h(m, {
+            })) : (t(), x(m, {
               key: 1,
               icon: "lucide:check-circle-2",
               class: "h-5 w-5"

package/components/DataTable/DataTableRow.vue.js

@@ -61,9 +61,9 @@ const F = ["data-state"], L = { class: "flex items-center justify-center" }, U =
     };
     return (e, n) => (c(), a("tr", {
       class: u(["border-b border-border/70 transition-colors data-[state=selected]:bg-muted h-full", [
-        t.hoverable ? "hover:bg-muted/20" : "",
+        t.hoverable ? "hover:bg-muted/80" : "",
         t.striped && t.index % 2 === 1 ? "bg-muted/20" : "bg-background",
-        t.isSelected ? "bg-muted/10! hover:bg-muted/30" : "",
+        t.isSelected ? "bg-muted! hover:bg-muted/30" : "",
         "group"
       ]]),
       "data-state": t.isSelected ? "selected" : void 0,