vlite3 0.0.7 → 0.0.9

package/README.md

@@ -16,23 +16,19 @@ npm install vlite3
 yarn add vlite3
 ```
 
-## Configuration
+## 2. Tailwind CSS Setup (Tailwind v4)
 
-### 1. Import Styles
-
-Import the library's base styles (for custom component styles) in your main entry file (e.g., `main.ts` or `App.vue`):
+`vite.config.ts`
 
 ```ts
-import 'vlite3/style.css'
-```
-
-### 2. Tailwind CSS Setup
-
-This library relies on Tailwind CSS for utility classes. You must configure your project to scan the library's files so that the necessary classes are generated.
+import tailwindcss from '@tailwindcss/vite'
 
-#### Tailwind CSS v4
+export default defineConfig({
+  plugins: [vue(), tailwindcss()],
+})
+```
 
-If you are using the new CSS-first configuration, add the source path:
+`style.css`
 
 ```css
 @import 'tailwindcss';
@@ -42,7 +38,7 @@ If you are using the new CSS-first configuration, add the source path:
 @source "../node_modules/vlite3";
 ```
 
-## Usage
+## 3. Usage
 
 Import components directly in your Vue files:
 
@@ -52,9 +48,152 @@ import { Button, Input } from 'vlite3'
 </script>
 
 <template>
-	<div class="p-4 space-y-4">
-		<Button>Click Me</Button>
-		<Input placeholder="Type here..." />
-	</div>
+  <div class="p-4 space-y-4">
+    <Button>Click Me</Button>
+    <Input placeholder="Type here..." />
+  </div>
 </template>
 ```
+
+## 🎨 Theming & Customization
+
+vlite3 uses a semantic theming system inspired by **shadcn/ui** and compatible with **Tailwind CSS v4**. All colors are defined as CSS variables, making it easy to customize the look and feel of your application including Dark Mode support.
+
+### Semantic Colors
+
+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.                       |
+
+### Extended Color Variants
+
+For more complex components, vlite3 provides extended variants for main semantic colors (`primary`, `danger`, `warning`, `info`, `success`). These are useful for building nuanced UIs with subtle backgrounds, hover states, and accessible text.
+
+| Base Color  | Variant Variables                                                                                       | Usage Description                                                                                                                                                                                           |
+| :---------- | :------------------------------------------------------------------------------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Primary** | `--color-primary-light`<br>`--color-primary-dark`<br>`--color-primary-fg`<br>`--color-primary-fg-light` | **Light**: Subtle background (e.g., 10% opacity).<br>**Dark**: Hover state for the main color.<br>**Fg**: Text color on top of the _main_ color.<br>**Fg-Light**: Text color on top of the _light_ variant. |
+| **Danger**  | `--color-danger-light`<br>`--color-danger-dark`<br>`--color-danger-fg`<br>`--color-danger-fg-light`     | **Light**: Error backgrounds (alerts).<br>**Dark**: Hover state for destructive buttons.<br>**Fg**: Text on destructive buttons.<br>**Fg-Light**: Text on error alerts.                                     |
+| **Warning** | `--color-warning-light`<br>`--color-warning-dark`<br>`--color-warning-fg`<br>`--color-warning-fg-light` | **Light**: Warning backgrounds.<br>**Dark**: Active/Determined warning states.<br>**Fg**: Text on warning badges.<br>**Fg-Light**: Text on warning backgrounds.                                             |
+| **Success** | `--color-success-light`<br>`--color-success-dark`<br>`--color-success-fg`<br>`--color-success-fg-light` | **Light**: Success backgrounds (toasts).<br>**Dark**: Hover/Active success actions.<br>**Fg**: Text on success buttons.<br>**Fg-Light**: Text on success backgrounds.                                       |
+| **Info**    | `--color-info-light`<br>`--color-info-dark`<br>`--color-info-fg`<br>`--color-info-fg-light`             | **Light**: Info backgrounds.<br>**Dark**: Hover/Active info actions.<br>**Fg**: Text on info buttons.<br>**Fg-Light**: Text on info backgrounds.                                                            |
+
+**Example Usage:**
+
+```html
+<!-- A success badge with subtle background and matching text -->
+<div class="bg-success-light text-success-fg-light border border-success/20">
+  Operation Completed
+</div>
+
+<!-- A danger button with hover effect -->
+<button class="bg-danger text-danger-fg hover:bg-danger-dark">Delete</button>
+```
+
+### Additional Colors
+
+vlite3 also provides additional utility colors for specific feedback states:
+
+| Variable          | Class Name                   | Description                             |
+| :---------------- | :--------------------------- | :-------------------------------------- |
+| `--color-success` | `text-success`, `bg-success` | For success messages/badges.            |
+| `--color-warning` | `text-warning`, `bg-warning` | For warning messages/badges.            |
+| `--color-info`    | `text-info`, `bg-info`       | For informational messages/badges.      |
+| `--color-danger`  | `text-danger`, `bg-danger`   | Alias for destructive in some contexts. |
+
+### Example Customization
+
+To customize the theme, simply override the CSS variables in your main CSS file:
+
+```css
+@layer base {
+  :root {
+    --primary: #3b82f6; /* Blue-500 */
+    --primary-foreground: #ffffff;
+    --radius: 0.75rem;
+  }
+
+  .dark {
+    --primary: #60a5fa; /* Blue-400 */
+    --primary-foreground: #000000;
+  }
+}
+```
+
+## ✅ Components
+
+- **Button**
+- **ButtonGroup**
+- **Icon**
+- **Label**
+- **Badge**
+- **Chip**
+- **Logo**
+- **Navbar**
+- **SidebarMenu**
+- **SidePanel**
+- **Masonry Grid**
+- **ThemeToggle**
+
+### Inputs & Forms
+
+- **Input**
+- **Textarea**
+- **CheckBox**
+- **Switch**
+- **ChoiceBox**
+- **Slider**
+- **OTPInput**
+- **DatePicker**
+- **ColorPicker**
+- **FilePicker**
+- **AvatarUploader**
+- **IconPicker**
+- **MultiSelect**
+- **Form**
+- **CustomFields**
+
+### Data Display
+
+- **Avatar**
+- **Accordion**
+- **Carousel**
+- **DataTable**
+- **Pagination**
+- **Timeline**
+- **Heatmap**
+- **PricingPlan**
+- **FileTree**
+- **Workbook**
+- **Tabes**
+
+### Feedback & Overlays
+
+- **Alert**
+- **Modal**
+- **ConfirmationModal**
+- **ToastNotification**
+- **Tooltip**
+- **Dropdown**

package/components/Accordion/AccordionContent.vue.js

@@ -1,7 +1,7 @@
 import o from "./AccordionContent.vue2.js";
 /* empty css                      */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const f = /* @__PURE__ */ t(o, [["__scopeId", "data-v-d71e56f7"]]);
+const c = /* @__PURE__ */ t(o, [["__scopeId", "data-v-66f45fa0"]]);
 export {
-  f as default
+  c as default
 };

package/components/Accordion/AccordionItem.vue.js

@@ -40,7 +40,7 @@ const T = {
       return t === "solid" ? `${a} px-4 bg-muted transition-colors` : !i && (t === "ghost" || t === "default") ? `${a} px-0 hover:no-underline` : `${a} px-4 hover:bg-accent`;
     }), $ = s(() => {
       const { variant: t, attached: i } = n, o = n.contentClass || "";
-      return t === "solid" ? `${o} px-4 pt-2` : !i && (t === "ghost" || t === "default") ? `${o} px-0` : `${o} px-4`;
+      return t === "solid" ? `${o} px-4 pt-4` : !i && (t === "ghost" || t === "default") ? `${o} px-0` : `${o} px-4`;
     });
     return (t, i) => (l(), d("div", {
       class: c([x.value, n.class, n.itemClass])

package/components/Accordion/AccordionTrigger.vue.js

@@ -34,10 +34,7 @@ const V = ["data-state", "disabled"], $ = { class: "flex items-center gap-3" },
     });
     return (n, u) => (r(), s("button", {
       type: "button",
-      class: a(["group flex flex-1 w-full items-center justify-between py-3 text-left font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2", [
-        e.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
-        e.class
-      ]]),
+      class: a(["group flex flex-1 w-full items-center justify-between py-3 text-left font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2", [e.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer", e.class]]),
       "data-state": e.open ? "open" : "closed",
       disabled: e.disabled,
       onClick: h

package/components/Alert.vue.js

@@ -35,10 +35,7 @@ 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", 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/AvatarUploader/AvatarUploader.vue.d.ts

@@ -1,7 +1,7 @@
 import { FilePickerValue } from '../FilePicker';
 import { AvatarSize, AvatarRounded } from '../../types';
 export interface Props {
-    modelValue?: string | null;
+    modelValue?: any;
     size?: AvatarSize;
     rounded?: AvatarRounded;
     editable?: boolean;
@@ -23,7 +23,7 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
 }>, {
     disabled: boolean;
     alt: string;
-    modelValue: string | null;
+    modelValue: any;
     size: AvatarSize;
     loading: boolean;
     rounded: AvatarRounded;

package/components/AvatarUploader/AvatarUploader.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as w, ref as z, computed as f, openBlock as r, createElementBlock as n, 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 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 u from "../Icon.vue.js";
 import j from "../FilePicker/FilePicker.vue.js";
 import E from "../Avatar.vue.js";
@@ -18,22 +18,22 @@ const $ = ["onClick"], I = /* @__PURE__ */ w({
   },
   emits: ["update:modelValue", "change", "error"],
   setup(e, { emit: v }) {
-    const s = e, t = v, d = z(null), c = f(() => d.value || s.modelValue), h = (a) => {
+    const s = e, t = v, i = z(null), c = f(() => i.value || s.modelValue), h = (a) => {
       if (!a || Array.isArray(a)) {
         Array.isArray(a) && a.length === 0 && m();
         return;
       }
-      a.base64 && (d.value = a.base64, t("update:modelValue", a.base64)), t("change", a);
+      a.base64 && (i.value = a.base64, t("update:modelValue", a.base64)), t("change", a);
     }, y = (a) => {
       t("error", a);
     }, m = () => {
-      d.value = null, t("update:modelValue", null), t("change", null);
+      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) => (r(), n("div", {
+    return (a, b) => (n(), r("div", {
       class: l(k.value)
     }, [
       o(C(j), {
@@ -42,13 +42,13 @@ const $ = ["onClick"], I = /* @__PURE__ */ w({
         "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] = (i) => h(i)),
+        onChange: b[0] || (b[0] = (d) => h(d)),
         onError: y
       }, {
-        trigger: A(({ trigger: i, isLoading: x }) => [
+        trigger: A(({ trigger: d, isLoading: x }) => [
           B("div", {
-            class: l(["relative cursor-pointer transition-transform active:scale-95", { "cursor-default": !e.editable || e.disabled }]),
-            onClick: (R) => e.editable && !e.disabled ? i() : null
+            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,
@@ -58,23 +58,17 @@ const $ = ["onClick"], I = /* @__PURE__ */ w({
               rounded: e.rounded,
               class: l(e.className)
             }, null, 8, ["src", "fallback", "alt", "size", "rounded", "class"]),
-            e.loading || x ? (r(), n("div", {
+            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"
-              ])
+              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 ? (r(), n("div", {
+            ], 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"
-              ])
+              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",
@@ -85,7 +79,7 @@ const $ = ["onClick"], I = /* @__PURE__ */ w({
         ]),
         _: 1
       }, 8, ["disabled", "max-size"]),
-      c.value && e.editable && !e.disabled && !e.loading ? (r(), n("button", {
+      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",

package/components/Badge.vue.js

@@ -6,19 +6,15 @@ const g = /* @__PURE__ */ o({
     class: { default: "" }
   },
   setup(n) {
-    const e = n, t = a(() => [
-      "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-      {
-        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        danger: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        warning: "border-transparent bg-warning text-warning-fg hover:bg-warning/80",
-        info: "border-transparent bg-info text-info-fg hover:bg-info/80",
-        success: "border-transparent bg-success text-success-fg hover:bg-success/80",
-        outline: "text-foreground border-border"
-      }[e.variant],
-      e.class
-    ].join(" "));
+    const e = n, t = a(() => ["inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", {
+      default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+      secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+      danger: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+      warning: "border-transparent bg-warning text-warning-fg hover:bg-warning/80",
+      info: "border-transparent bg-info text-info-fg hover:bg-info/80",
+      success: "border-transparent bg-success text-success-fg hover:bg-success/80",
+      outline: "text-foreground border-border"
+    }[e.variant], e.class].join(" "));
     return (r, s) => (c(), i("div", {
       class: d(t.value)
     }, [

package/components/Button.vue.js

@@ -1,7 +1,7 @@
-import { defineComponent as m, computed as a, withDirectives as v, openBlock as n, createElementBlock as x, normalizeClass as o, createBlock as l, createCommentVNode as u, renderSlot as y, createTextVNode as p, toDisplayString as w, unref as k } from "vue";
+import { defineComponent as v, useSlots as x, computed as a, withDirectives as y, openBlock as r, createElementBlock as w, normalizeClass as i, createBlock as l, createCommentVNode as u, renderSlot as p, createTextVNode as k, toDisplayString as z, unref as B } from "vue";
 import c from "./Icon.vue.js";
-import { vRipple as z } from "../directives/vRipple.js";
-const B = ["type", "disabled"], V = /* @__PURE__ */ m({
+import { vRipple as C } from "../directives/vRipple.js";
+const R = ["type", "disabled"], j = /* @__PURE__ */ v({
   __name: "Button",
   props: {
     variant: { default: "primary" },
@@ -16,8 +16,8 @@ const B = ["type", "disabled"], V = /* @__PURE__ */ m({
     rounded: { default: "md" }
   },
   setup(e) {
-    const t = e, i = a(() => t.icon && !t.text), g = a(() => {
-      const r = "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-95 cursor-pointer", d = {
+    const t = e, g = x(), o = a(() => t.icon && !t.text && !g.default), h = a(() => {
+      const n = "inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-95 cursor-pointer", d = {
         primary: "bg-primary text-primary-foreground hover:bg-primary/90",
         "primary-light": "bg-primary-light text-primary-fg-light hover:bg-primary/20",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
@@ -38,17 +38,17 @@ const B = ["type", "disabled"], V = /* @__PURE__ */ m({
         ghost: "hover:bg-accent hover:text-accent-foreground text-foreground",
         link: "text-primary underline-offset-4 hover:underline"
       }, f = {
-        xs: "h-6 px-2",
-        md: "h-10 px-4 py-2",
-        sm: "h-9 px-3",
-        lg: "h-11 px-8",
+        xs: "h-6.5 px-2",
+        sm: "h-8 px-3",
+        md: "h-9 px-4 py-2",
+        lg: "h-10 px-8",
         xl: "h-12 px-10"
-      }, h = {
-        xs: "h-7 w-7",
-        md: "h-10 w-10",
-        sm: "h-9 w-9",
-        lg: "h-11 w-11",
-        xl: "h-12 w-12"
+      }, m = {
+        xs: "h-6.5 w-6.5 min-h-6.5 min-w-6.5",
+        sm: "h-8 w-8 min-h-9 min-w-9",
+        md: "h-9 w-9 min-h-9 min-w-9",
+        lg: "h-10 w-10 min-h-11 min-w-11",
+        xl: "h-12 w-12 min-h-12 min-w-12"
       }, b = {
         none: "rounded-none",
         sm: "rounded-sm",
@@ -59,10 +59,10 @@ const B = ["type", "disabled"], V = /* @__PURE__ */ m({
         full: "rounded-full"
       };
       return [
-        r,
+        n,
         d[t.variant],
         b[t.rounded],
-        i.value ? h[t.size] : f[t.size],
+        o.value ? m[t.size] : f[t.size],
         t.class
       ].join(" ");
     }), s = a(() => ({
@@ -72,37 +72,37 @@ const B = ["type", "disabled"], V = /* @__PURE__ */ m({
       lg: "w-4 h-4",
       xl: "w-4 h-4"
     })[t.size]);
-    return (r, d) => v((n(), x("button", {
+    return (n, d) => y((r(), w("button", {
       type: e.type,
-      class: o(g.value),
+      class: i(h.value),
       disabled: e.disabled || e.loading
     }, [
-      e.loading ? (n(), l(c, {
+      e.loading ? (r(), l(c, {
         key: 0,
         icon: "lucide:loader-2",
-        class: o(["mr-2 animate-spin", { "mr-0": i.value, [s.value]: !0 }])
-      }, null, 8, ["class"])) : e.icon ? (n(), l(c, {
+        class: i(["mr-2 animate-spin", { "mr-0": o.value, [s.value]: !0 }])
+      }, null, 8, ["class"])) : e.icon ? (r(), l(c, {
         key: 1,
         icon: e.icon,
-        class: o({
-          "mr-2": r.$slots.default || e.text,
-          "mx-auto": i.value,
+        class: i({
+          "mr-2": n.$slots.default || e.text,
+          "mx-auto": o.value,
           [s.value]: !0
         })
       }, null, 8, ["icon", "class"])) : u("", !0),
-      y(r.$slots, "default", {}, () => [
-        p(w(e.text), 1)
+      p(n.$slots, "default", {}, () => [
+        k(z(e.text), 1)
       ]),
-      e.iconRight && !e.loading ? (n(), l(c, {
+      e.iconRight && !e.loading ? (r(), l(c, {
         key: 2,
         icon: e.iconRight,
-        class: o([s.value, "ml-2 h-4 w-4"])
+        class: i([s.value, "ml-2 h-4 w-4"])
       }, null, 8, ["icon", "class"])) : u("", !0)
-    ], 10, B)), [
-      [k(z)]
+    ], 10, R)), [
+      [B(C)]
     ]);
   }
 });
 export {
-  V as default
+  j as default
 };

package/components/ButtonGroup.vue.js

@@ -1,7 +1,7 @@
 import o from "./ButtonGroup.vue2.js";
 /* empty css                 */
 import t from "../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-1a20a82d"]]);
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-8c9add3e"]]);
 export {
   m as default
 };

package/components/ButtonGroup.vue2.js

@@ -16,9 +16,6 @@ const p = /* @__PURE__ */ l({
         "inline-flex",
         a.value ? "flex-col" : "flex-row",
         t.class,
-        // Attached Mode logic for Deep Selectors
-        // We target direct children buttons. Assuming standard <button> or .btn class structure if possible, 
-        // but since we wrap `Button`, targeting `button` tag is safe.
         e.attached ? "attached-group" : "gap-2",
         // Vertical Attached
         e.attached && a.value ? "vertical-group" : ""