vlite3 0.9.12 → 1.0.2

package/README.md

@@ -224,84 +224,73 @@ Override these variables in `:root` or within a `.dark` class (when using class-
 
 ### 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.
+For more complex components, **vlite3** provides extended variants for main semantic colors (`primary`, `danger`, `warning`, `info`, `success`). These help create nuanced UIs with subtle backgrounds, hover states, and accessible text.
 
-| Base Color  | Variant Variables           | Usage Description |
-| ----------- | --------------------------- | ----------------- |
-| **Primary** | `--color-primary-light`<br> |
-
-<br>`--color-primary-dark`<br>
-
-<br>`--color-primary-fg`<br>
-
-<br>`--color-primary-fg-light` | **Light**: Subtle background (e.g., 10% opacity).<br>
-
-<br>**Dark**: Hover state for the main color.<br>
-
-<br>**Fg**: Text color on top of the _main_ color.<br>
-
-<br>**Fg-Light**: Text color on top of the _light_ variant. |
-| **Danger** | `--color-danger-light`<br>
-
-<br>`--color-danger-dark`<br>
-
-<br>`--color-danger-fg`<br>
-
-<br>`--color-danger-fg-light` | **Light**: Error backgrounds (alerts).<br>
-
-<br>**Dark**: Hover state for destructive buttons.<br>
-
-<br>**Fg**: Text on destructive buttons.<br>
-
-<br>**Fg-Light**: Text on error alerts. |
-| **Warning** | `--color-warning-light`<br>
-
-<br>`--color-warning-dark`<br>
-
-<br>`--color-warning-fg`<br>
-
-<br>`--color-warning-fg-light` | **Light**: Warning backgrounds.<br>
+---
 
-<br>**Dark**: Active/Determined warning states.<br>
+#### Primary
 
-<br>**Fg**: Text on warning badges.<br>
+| Variable                   | Description                            |
+| -------------------------- | -------------------------------------- |
+| `--color-primary-light`    | Subtle background (e.g., 10% opacity)  |
+| `--color-primary-dark`     | Hover state for the main color         |
+| `--color-primary-fg`       | Text color on top of the main color    |
+| `--color-primary-fg-light` | Text color on top of the light variant |
 
-<br>**Fg-Light**: Text on warning backgrounds. |
-| **Success** | `--color-success-light`<br>
+---
 
-<br>`--color-success-dark`<br>
+#### Danger
 
-<br>`--color-success-fg`<br>
+| Variable                  | Description                         |
+| ------------------------- | ----------------------------------- |
+| `--color-danger-light`    | Error backgrounds (alerts)          |
+| `--color-danger-dark`     | Hover state for destructive buttons |
+| `--color-danger-fg`       | Text on destructive buttons         |
+| `--color-danger-fg-light` | Text on error alerts                |
 
-<br>`--color-success-fg-light` | **Light**: Success backgrounds (toasts).<br>
+---
 
-<br>**Dark**: Hover/Active success actions.<br>
+#### Warning
 
-<br>**Fg**: Text on success buttons.<br>
+| Variable                   | Description                         |
+| -------------------------- | ----------------------------------- |
+| `--color-warning-light`    | Warning backgrounds                 |
+| `--color-warning-dark`     | Active or emphasized warning states |
+| `--color-warning-fg`       | Text on warning badges              |
+| `--color-warning-fg-light` | Text on warning backgrounds         |
 
-<br>**Fg-Light**: Text on success backgrounds. |
-| **Info** | `--color-info-light`<br>
+---
 
-<br>`--color-info-dark`<br>
+#### Success
 
-<br>`--color-info-fg`<br>
+| Variable                   | Description                     |
+| -------------------------- | ------------------------------- |
+| `--color-success-light`    | Success backgrounds (toasts)    |
+| `--color-success-dark`     | Hover or active success actions |
+| `--color-success-fg`       | Text on success buttons         |
+| `--color-success-fg-light` | Text on success backgrounds     |
 
-<br>`--color-info-fg-light` | **Light**: Info backgrounds.<br>
+---
 
-<br>**Dark**: Hover/Active info actions.<br>
+#### Info
 
-<br>**Fg**: Text on info buttons.<br>
+| Variable                | Description                  |
+| ----------------------- | ---------------------------- |
+| `--color-info-light`    | Info backgrounds             |
+| `--color-info-dark`     | Hover or active info actions |
+| `--color-info-fg`       | Text on info buttons         |
+| `--color-info-fg-light` | Text on info backgrounds     |
 
-<br>**Fg-Light**: Text on info backgrounds. |
+---
 
-**Example Usage:**
+### Example Usage
 
 ```html
 <div class="bg-success-light text-success-fg-light border border-success/20">
   Operation Completed
 </div>
 
-<button class="bg-danger text-danger-fg hover:bg-danger-dark">Delete</button>
+<button class="bg-danger text-danger-fg hover:bg-dang
 ```
 
 ### Additional Colors
@@ -404,16 +393,19 @@ Follow these rules strictly to ensure visual consistency and predictable styling
 - [x] **Label**
 - [x] **Badge**
 - [x] **Chip**
+- [x] **StatusChip**
 - [x] **Logo**
 - [x] **Navbar**
 - [x] **SidebarMenu**
 - [x] **SidePanel**
 - [x] **Breadcrumb**
 - [x] **List**
+- [x] **AttachmentsList**
 - [x] **Masonry Grid**
 - [x] **Stats**
 - [x] **ThemeToggle**
 - [x] **Screen**
+- [x] **ChatInterface**
 
 ### Inputs & Forms
 
@@ -454,11 +446,14 @@ Follow these rules strictly to ensure visual consistency and predictable styling
 - [x] **Tabes**
 - [x] **Masonry**
 - [x] **Stats**
+- [x] **Price**
+- [x] **Date**
 
 ### Feedback & Overlays
 
 - [x] **Alert**
 - [x] **Modal**
+- [x] **Empty**
 - [x] **ConfirmationModal**
 - [x] **ToastNotification**
 - [x] **Tooltip**

package/components/Badge.vue.js

@@ -10,7 +10,7 @@ const p = /* @__PURE__ */ b({
   setup(o) {
     const e = o, s = a(() => {
       const r = {
-        xs: "px-1.5 h-5 text-[10.5px] leading-none",
+        xs: "px-1.5 h-4 text-[9px] leading-none",
         sm: "px-2 h-6 text-xs font-medium",
         md: "px-2.5 h-7 text-xs font-semibold",
         lg: "px-3 h-8 text-sm font-semibold"

package/components/Clock/Clock.vue.d.ts

@@ -0,0 +1,33 @@
+type __VLS_Props = {
+    /** dayjs-compatible format string for the time portion. Default: 'hh:mm:ss A' */
+    timeFormat?: string;
+    /** dayjs-compatible format string for the date portion. Default: 'dddd, MMMM D, YYYY' */
+    dateFormat?: string;
+    /** Whether to render the time heading. Default: true */
+    showTime?: boolean;
+    /** Whether to render the date paragraph. Default: true */
+    showDate?: boolean;
+    /**
+     * Milliseconds between each clock tick.
+     * Reactive — changing this prop will immediately restart the interval.
+     * Default: 1000
+     */
+    tickInterval?: number;
+    /** Additional Tailwind/CSS classes applied to the time <h2> element */
+    timeClass?: string;
+    /** Additional Tailwind/CSS classes applied to the date <p> element */
+    dateClass?: string;
+    /** Additional Tailwind/CSS classes applied to the root wrapper <div> */
+    wrapperClass?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    wrapperClass: string;
+    timeFormat: string;
+    dateFormat: string;
+    showTime: boolean;
+    showDate: boolean;
+    tickInterval: number;
+    timeClass: string;
+    dateClass: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/components/Clock/Clock.vue.js

@@ -0,0 +1,51 @@
+import { defineComponent as h, ref as w, watch as x, onMounted as k, onUnmounted as C, computed as i, openBlock as r, createElementBlock as n, normalizeClass as s, toDisplayString as d, createCommentVNode as u } from "vue";
+import c from "dayjs";
+const D = /* @__PURE__ */ h({
+  __name: "Clock",
+  props: {
+    timeFormat: { default: "hh:mm:ss A" },
+    dateFormat: { default: "dddd, MMMM D, YYYY" },
+    showTime: { type: Boolean, default: !0 },
+    showDate: { type: Boolean, default: !0 },
+    tickInterval: { default: 1e3 },
+    timeClass: { default: "" },
+    dateClass: { default: "" },
+    wrapperClass: { default: "" }
+  },
+  setup(t) {
+    const a = t, o = w(/* @__PURE__ */ new Date());
+    let e;
+    function m(l) {
+      e !== void 0 && clearInterval(e), e = setInterval(() => {
+        o.value = /* @__PURE__ */ new Date();
+      }, l);
+    }
+    x(
+      () => a.tickInterval,
+      (l) => {
+        m(l);
+      }
+    ), k(() => {
+      m(a.tickInterval);
+    }), C(() => {
+      e !== void 0 && clearInterval(e);
+    });
+    const f = i(() => c(o.value).format(a.timeFormat)), v = i(() => c(o.value).format(a.dateFormat));
+    return (l, p) => (r(), n("div", {
+      class: s(["flex flex-col items-center z-10 w-full", t.wrapperClass]),
+      style: { "will-change": "transform", contain: "layout style" }
+    }, [
+      t.showTime ? (r(), n("h2", {
+        key: 0,
+        class: s(["text-5xl md:text-6xl font-extralight text-foreground tracking-tight tabular-nums", t.timeClass])
+      }, d(f.value), 3)) : u("", !0),
+      t.showDate ? (r(), n("p", {
+        key: 1,
+        class: s(["text-fs-1 font-normal text-muted-foreground mt-3.5 tracking-wide", t.dateClass])
+      }, d(v.value), 3)) : u("", !0)
+    ], 2));
+  }
+});
+export {
+  D as default
+};

package/components/Clock/Clock.vue2.js

@@ -0,0 +1,4 @@
+import f from "./Clock.vue.js";
+export {
+  f as default
+};

package/components/Clock/index.d.ts

@@ -0,0 +1 @@
+export { default as Clock } from './Clock.vue';

package/components/CommandPalette/CommandPaletteContent.vue2.js

@@ -4,7 +4,7 @@ import k from "../Icon.vue.js";
 import { $t as E } from "../../utils/i18n.js";
 import { useCommandPaletteItems as Y } from "./useCommandPaletteItems.js";
 import { useCommandPaletteNav as Z } from "./useCommandPaletteNav.js";
-import ee from "./CommandPaletteItem.vue2.js";
+import ee from "./CommandPaletteItem.vue.js";
 const te = { class: "command-palette-content flex flex-col w-full h-full max-h-[70vh]" }, oe = { class: "flex items-center gap-3 px-4 py-3 border-b border-border/60 shrink-0" }, se = ["placeholder"], ne = ["aria-label"], re = {
   key: 0,
   class: "flex flex-col items-center justify-center py-14 px-6 text-center select-none",

package/components/CommandPalette/{CommandPaletteItem.vue2.js → CommandPaletteItem.vue.js}

@@ -1,5 +1,5 @@
 import t from "./CommandPaletteItem.vue3.js";
-/* empty css                       */
+/* empty css                        */
 import o from "../../_virtual/_plugin-vue_export-helper.js";
 const r = /* @__PURE__ */ o(t, [["__scopeId", "data-v-66b1ae06"]]);
 export {

package/components/DatePicker.vue.js

@@ -1,13 +1,13 @@
-import { defineComponent as T, computed as d, openBlock as x, createBlock as w, unref as o, withCtx as u, createElementVNode as z, createVNode as m, renderSlot as $, mergeProps as k } from "vue";
-import P from "./Button.vue.js";
-import B from "./Dropdown/Dropdown.vue.js";
+import { defineComponent as z, computed as m, openBlock as x, createBlock as k, unref as D, withCtx as h, createElementVNode as L, createVNode as g, renderSlot as B, mergeProps as P } from "vue";
+import V from "./Button.vue.js";
+import U from "./Dropdown/Dropdown.vue.js";
 import "@iconify/vue";
-import { $t as S } from "../utils/i18n.js";
+import { $t as I } from "../utils/i18n.js";
 /* empty css           */
 /* empty css                           */
 import j, { TimePicker as C } from "v-datepicker-lite";
 import "v-datepicker-lite/style.css";
-const U = { class: "overflow-hidden min-w-[300px]" }, G = /* @__PURE__ */ T({
+const F = { class: "overflow-hidden min-w-[300px]" }, G = /* @__PURE__ */ z({
   __name: "DatePicker",
   props: {
     placeholder: {},
@@ -29,34 +29,53 @@ const U = { class: "overflow-hidden min-w-[300px]" }, G = /* @__PURE__ */ T({
     readonly: { type: Boolean }
   },
   emits: ["update:modelValue", "change"],
-  setup(t, { emit: V }) {
-    const l = t, s = V, a = d({
-      get: () => l.modelValue ?? l.value,
+  setup(t, { emit: N }) {
+    const r = t, y = N, a = m({
+      get: () => r.modelValue ?? r.value,
       set: (e) => {
-        s("update:modelValue", e), s("change", e);
+        y("update:modelValue", e), y("change", e);
       }
-    }), I = (e) => e instanceof Date ? e.getHours() !== 0 || e.getMinutes() !== 0 : typeof e == "string" ? e.includes("T") || /\d{2}:\d{2}/.test(e) : !1, c = (e) => {
+    }), T = (e) => e instanceof Date ? e.getHours() !== 0 || e.getMinutes() !== 0 : typeof e == "string" ? e.includes("T") || /\d{2}:\d{2}/.test(e) : !1, u = (e) => {
+      if (!e) return null;
+      if (e instanceof Date)
+        return isNaN(e.getTime()) ? null : new Date(e.getFullYear(), e.getMonth(), e.getDate());
+      if (typeof e == "string") {
+        if (/^\d{4}-\d{2}-\d{2}$/.test(e)) {
+          const [l, d, o] = e.split("-").map(Number);
+          return new Date(l, d - 1, o);
+        }
+        if (e.includes("T")) {
+          const l = e.split("T")[0], [d, o, s] = l.split("-").map(Number);
+          return new Date(d, o - 1, s);
+        }
+        const i = new Date(e);
+        return isNaN(i.getTime()) ? null : i;
+      }
+      return null;
+    }, c = (e) => {
+      const n = e.getFullYear(), i = String(e.getMonth() + 1).padStart(2, "0"), l = String(e.getDate()).padStart(2, "0");
+      return `${n}-${i}-${l}`;
+    }, b = (e) => {
       try {
         if (e && typeof e == "object") {
-          const h = e.startDate || e.start, b = e.endDate || e.end;
-          if (h && b) {
-            const y = new Date(h), g = new Date(b);
-            if (!isNaN(y.getTime()) && !isNaN(g.getTime()))
-              return { startDate: y, endDate: g };
+          const d = e.startDate || e.start, o = e.endDate || e.end;
+          if (d && o) {
+            const s = u(d), w = u(o);
+            if (s && w) return { startDate: s, endDate: w };
           }
         }
-        const n = new Date(e);
-        if (isNaN(n.getTime())) return null;
-        const i = new Date(n), D = new Date(n);
-        return D.setDate(i.getDate() + 6), { startDate: i, endDate: D };
+        const n = u(e);
+        if (!n) return null;
+        const i = new Date(n), l = new Date(n);
+        return l.setDate(i.getDate() + 6), { startDate: i, endDate: l };
       } catch {
         return null;
       }
-    }, r = d(() => {
+    }, f = m(() => {
       if (!a.value) return "";
-      if (l.mode === "time") return a.value;
-      if (l.mode === "week") {
-        const e = c(a.value);
+      if (r.mode === "time") return a.value;
+      if (r.mode === "week") {
+        const e = b(a.value);
         if (!e) return "";
         const n = e.startDate.toLocaleDateString("en-US", {
           month: "short",
@@ -70,34 +89,52 @@ const U = { class: "overflow-hidden min-w-[300px]" }, G = /* @__PURE__ */ T({
         return `${n} - ${i}`;
       }
       try {
+        if (r.mode === "date" || r.mode === "month") {
+          const i = u(a.value);
+          return i ? i.toLocaleDateString("en-US", {
+            month: "short",
+            day: "numeric",
+            year: "numeric"
+          }) : String(a.value);
+        }
         const e = new Date(a.value);
         if (isNaN(e.getTime())) return String(a.value);
-        const n = l.mode === "dateTime" && I(a.value);
+        const n = r.mode === "dateTime" && T(a.value);
         return e.toLocaleDateString("en-US", {
           month: "short",
           day: "numeric",
           year: "numeric",
-          ...n ? { hour: "2-digit", minute: "2-digit", hour12: l.timeFormat === "12h" } : {}
+          ...n ? { hour: "2-digit", minute: "2-digit", hour12: r.timeFormat === "12h" } : {}
         });
       } catch {
         return String(a.value);
       }
-    }), f = d(() => {
-      if (l.placeholderI18n) return S(l.placeholderI18n);
-      if (l.placeholder !== void 0) return l.placeholder;
-      const e = S("vlite.datePicker.placeholder");
+    }), v = m(() => {
+      if (r.placeholderI18n) return I(r.placeholderI18n);
+      if (r.placeholder !== void 0) return r.placeholder;
+      const e = I("vlite.datePicker.placeholder");
       return e !== "vlite.datePicker.placeholder" ? e : "Select date";
-    }), v = (e) => {
-      if (l.mode === "week") {
-        const n = c(e);
+    }), S = (e) => {
+      if (r.mode === "week") {
+        const n = b(e);
+        if (n) {
+          a.value = {
+            startDate: c(n.startDate),
+            endDate: c(n.endDate)
+          };
+          return;
+        }
+      }
+      if (r.mode === "date" || r.mode === "month") {
+        const n = u(e);
         if (n) {
-          a.value = { startDate: n.startDate, endDate: n.endDate };
+          a.value = c(n);
           return;
         }
       }
       a.value = e;
-    }, N = d(() => l.mode === "week" && a.value && typeof a.value == "object" && (a.value.startDate || a.value.start) || a.value);
-    return (e, n) => t.mode !== "time" ? (x(), w(o(B), {
+    }, $ = m(() => r.mode === "week" && a.value && typeof a.value == "object" && (a.value.startDate || a.value.start) || a.value);
+    return (e, n) => t.mode !== "time" ? (x(), k(D(U), {
       key: 0,
       position: "bottom-start",
       class: "w-full",
@@ -105,13 +142,13 @@ const U = { class: "overflow-hidden min-w-[300px]" }, G = /* @__PURE__ */ T({
       teleport: t.teleport,
       disabled: t.disabled || t.readonly
     }, {
-      trigger: u(() => [
-        $(e.$slots, "default", {
+      trigger: h(() => [
+        B(e.$slots, "default", {
           value: a.value,
-          displayValue: r.value
+          displayValue: f.value
         }, () => [
-          m(P, k({
-            text: r.value?.replace("-", "—") || f.value,
+          g(V, P({
+            text: f.value?.replace("-", "—") || v.value,
             variant: t.variant || "outline",
             size: t.size || "md",
             icon: t.icon || "lucide:calendar",
@@ -119,10 +156,10 @@ const U = { class: "overflow-hidden min-w-[300px]" }, G = /* @__PURE__ */ T({
           }, t.btnProps, { class: "w-full justify-start text-left font-normal" }), null, 16, ["text", "variant", "size", "icon", "disabled"])
         ])
       ]),
-      default: u(() => [
-        z("div", U, [
-          m(o(j), {
-            value: N.value,
+      default: h(() => [
+        L("div", F, [
+          g(D(j), {
+            value: $.value,
             mode: t.mode,
             "min-date": t.minDate,
             "max-date": t.maxDate,
@@ -132,17 +169,17 @@ const U = { class: "overflow-hidden min-w-[300px]" }, G = /* @__PURE__ */ T({
             "time-format": "12h",
             disabled: t.disabled,
             readonly: t.readonly,
-            onChange: v
+            onChange: S
           }, null, 8, ["value", "mode", "min-date", "max-date", "disabled-dates", "minuteInterval", "disabled", "readonly"])
         ])
       ]),
       _: 3
-    }, 8, ["teleport", "disabled"])) : (x(), w(o(C), {
+    }, 8, ["teleport", "disabled"])) : (x(), k(D(C), {
       key: 1,
       "model-value": a.value,
       "onUpdate:modelValue": [
         n[0] || (n[0] = (i) => a.value = i),
-        v
+        S
       ],
       mode: t.mode,
       "min-date": t.minDate,
@@ -154,9 +191,9 @@ const U = { class: "overflow-hidden min-w-[300px]" }, G = /* @__PURE__ */ T({
       disabled: t.disabled,
       readonly: t.readonly
     }, {
-      default: u(() => [
-        m(P, k({
-          text: r.value || f.value,
+      default: h(() => [
+        g(V, P({
+          text: f.value || v.value,
           variant: t.variant || "outline",
           size: t.size || "md",
           icon: t.icon || (t.mode === "time" ? "lucide:clock" : "lucide:calendar"),

package/components/NavbarCommandPalette.vue.js

@@ -3,7 +3,7 @@ import L from "./Icon.vue.js";
 import v from "./Modal.vue.js";
 import N from "./CommandPalette/CommandPaletteContent.vue.js";
 import { $t as R } from "../utils/i18n.js";
-/* empty css                                      */
+/* empty css                                       */
 const U = { class: "block truncate -text-fs-1.5" }, V = { class: "ml-auto inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[10px] font-mono font-medium border border-border/80 bg-background text-muted-foreground ml-1" }, q = /* @__PURE__ */ x({
   __name: "NavbarCommandPalette",
   props: {

package/components/OTPInput/OTPInput.vue.d.ts

@@ -9,6 +9,8 @@ interface Props {
     variant?: 'solid' | 'outline' | 'ghost';
     attached?: boolean;
     size?: 'sm' | 'md' | 'lg';
+    mask?: boolean;
+    fluid?: boolean;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     change: (value: string) => any;
@@ -21,6 +23,7 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
 }>, {
     length: number;
     type: "text" | "number";
+    mask: boolean;
     variant: "solid" | "outline" | "ghost";
     size: "sm" | "md" | "lg";
     error: boolean;
@@ -29,5 +32,6 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     modelValue: string;
     autofocus: boolean;
     attached: boolean;
+    fluid: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 export default _default;

package/components/OTPInput/OTPInput.vue.js

@@ -1,5 +1,5 @@
-import { defineComponent as j, ref as h, watch as z, onMounted as C, nextTick as V, computed as A, openBlock as g, createElementBlock as m, normalizeClass as v, Fragment as E, renderList as M } from "vue";
-const F = ["value", "type", "disabled", "placeholder", "onInput", "onKeydown"], P = /* @__PURE__ */ j({
+import { defineComponent as C, ref as v, watch as M, onMounted as V, nextTick as A, computed as m, openBlock as g, createElementBlock as h, normalizeClass as y, Fragment as E, renderList as F } from "vue";
+const K = ["value", "type", "inputmode", "disabled", "placeholder", "onInput", "onKeydown"], T = /* @__PURE__ */ C({
   __name: "OTPInput",
   props: {
     length: { default: 6 },
@@ -11,29 +11,31 @@ const F = ["value", "type", "disabled", "placeholder", "onInput", "onKeydown"],
     placeholder: { default: "" },
     variant: { default: "outline" },
     attached: { type: Boolean, default: !1 },
-    size: { default: "md" }
+    size: { default: "md" },
+    mask: { type: Boolean, default: !1 },
+    fluid: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "complete", "change"],
-  setup(f, { emit: b }) {
-    const a = f, p = b, s = h([]), r = h(new Array(a.length).fill(""));
-    z(
-      () => a.modelValue,
-      (t) => {
-        const e = t || "", l = e.split("").slice(0, a.length);
+  setup(d, { emit: b }) {
+    const t = d, p = b, s = v([]), r = v(new Array(t.length).fill(""));
+    M(
+      () => t.modelValue,
+      (l) => {
+        const e = l || "", a = e.split("").slice(0, t.length);
         if (r.value.join("") !== e) {
-          const o = new Array(a.length).fill("");
-          l.forEach((u, i) => o[i] = u), r.value = o;
+          const o = new Array(t.length).fill("");
+          a.forEach((u, i) => o[i] = u), r.value = o;
         }
       },
       { immediate: !0 }
     );
     const c = () => {
-      const t = r.value.join("");
-      p("update:modelValue", t), p("change", t), t.length === a.length && p("complete", t);
-    }, y = (t, e) => {
-      let n = t.target.value;
-      if (a.type === "number" && (n = n.replace(/\D/g, "")), n.length === 1) {
-        r.value[e] = n, c(), e < a.length - 1 && s.value[e + 1]?.focus();
+      const l = r.value.join("");
+      p("update:modelValue", l), p("change", l), l.length === t.length && p("complete", l);
+    }, w = (l, e) => {
+      let n = l.target.value;
+      if (t.type === "number" && (n = n.replace(/\D/g, "")), n.length === 1) {
+        r.value[e] = n, c(), e < t.length - 1 && s.value[e + 1]?.focus();
         return;
       }
       if (!n) {
@@ -41,75 +43,85 @@ const F = ["value", "type", "disabled", "placeholder", "onInput", "onKeydown"],
         return;
       }
       if (n.length > 1) {
-        const o = n.split("").slice(0, a.length - e);
-        o.forEach((i, d) => {
-          e + d < a.length && (r.value[e + d] = i);
+        const o = n.split("").slice(0, t.length - e);
+        o.forEach((i, f) => {
+          e + f < t.length && (r.value[e + f] = i);
         }), c();
-        const u = Math.min(e + o.length, a.length - 1);
+        const u = Math.min(e + o.length, t.length - 1);
         s.value[u]?.focus();
       }
-    }, w = (t, e) => {
-      const l = t.key;
-      if (l === "Backspace") {
-        r.value[e] || (t.preventDefault(), e > 0 && (r.value[e - 1] = "", s.value[e - 1]?.focus(), c()));
+    }, D = (l, e) => {
+      const a = l.key;
+      if (a === "Backspace") {
+        r.value[e] || (l.preventDefault(), e > 0 && (r.value[e - 1] = "", s.value[e - 1]?.focus(), c()));
         return;
       }
-      l === "ArrowLeft" && (t.preventDefault(), e > 0 && s.value[e - 1]?.focus()), l === "ArrowRight" && (t.preventDefault(), e < a.length - 1 && s.value[e + 1]?.focus());
-    }, D = (t) => {
-      t.preventDefault();
-      const e = t.clipboardData?.getData("text/plain");
+      a === "ArrowLeft" && (l.preventDefault(), e > 0 && s.value[e - 1]?.focus()), a === "ArrowRight" && (l.preventDefault(), e < t.length - 1 && s.value[e + 1]?.focus());
+    }, k = (l) => {
+      l.preventDefault();
+      const e = l.clipboardData?.getData("text/plain");
       if (!e) return;
-      let l = e.trim();
-      a.type === "number" && (l = l.replace(/\D/g, ""));
-      const n = l.split("").slice(0, a.length), o = [...r.value];
-      n.forEach((i, d) => {
-        o[d] = i;
+      let a = e.trim();
+      t.type === "number" && (a = a.replace(/\D/g, ""));
+      const n = a.split("").slice(0, t.length), o = [...r.value];
+      n.forEach((i, f) => {
+        o[f] = i;
       }), r.value = o, c();
-      const u = Math.min(n.length, a.length - 1);
+      const u = Math.min(n.length, t.length - 1);
       s.value[u]?.focus();
-    }, k = (t, e) => {
-      t && (s.value[e] = t);
+    }, B = (l, e) => {
+      l && (s.value[e] = l);
     };
-    C(() => {
-      a.autofocus && V(() => {
+    V(() => {
+      t.autofocus && A(() => {
         s.value[0]?.focus();
       });
     });
-    const B = A(() => ["flex items-center", a.attached ? "-space-x-px" : "gap-2"].join(" ")), I = (t) => {
-      const e = "text-center font-medium transition-all focus:outline-none focus:z-10 disabled:opacity-50 disabled:cursor-not-allowed placeholder:text-muted-foreground", l = {
+    const I = m(() => t.mask ? "password" : t.type === "number" ? "tel" : "text"), j = m(() => {
+      if (!t.mask)
+        return t.type === "number" ? "numeric" : void 0;
+    }), x = m(() => {
+      const l = t.attached ? "-space-x-px" : "gap-2", e = t.fluid ? "w-full" : "";
+      return ["flex items-center", l, e].filter(Boolean).join(" ");
+    }), z = (l) => {
+      const e = "text-center font-medium transition-all focus:outline-none focus:z-10 disabled:opacity-50 disabled:cursor-not-allowed placeholder:text-muted-foreground", a = t.fluid ? {
+        sm: "flex-1 min-w-0 h-8 text-sm",
+        md: "flex-1 min-w-0 h-10 text-lg",
+        lg: "flex-1 min-w-0 h-12 text-xl"
+      } : {
         sm: "w-8 h-8 text-sm",
         md: "w-10 h-10 text-lg",
         lg: "w-12 h-12 text-xl"
       }, n = {
         solid: "bg-muted border border-transparent focus:border-primary focus:ring-2 focus:ring-primary",
         outline: "border border-input focus:border-primary focus:ring-2 focus:ring-primary",
-        ghost: "bg-transparent border border-transparent hover:bg-accent focus:focus:border-primary focus:ring-2 focus:ring-primary"
-      }, o = a.error ? "border-destructive focus:ring-destructive text-destructive" : "";
+        ghost: "bg-transparent border border-transparent hover:bg-accent focus:border-primary focus:ring-2 focus:ring-primary"
+      }, o = t.error ? "border-destructive focus:ring-destructive text-destructive" : "";
       let u = "rounded-md";
-      return a.attached && (t === 0 ? u = "rounded-l-md rounded-r-none" : t === a.length - 1 ? u = "rounded-r-md rounded-l-none" : u = "rounded-none"), [e, l[a.size], n[a.variant], o, u].join(" ");
+      return t.attached && (l === 0 ? u = "rounded-l-md rounded-r-none" : l === t.length - 1 ? u = "rounded-r-md rounded-l-none" : u = "rounded-none"), [e, a[t.size], n[t.variant], o, u].join(" ");
     };
-    return (t, e) => (g(), m("div", {
-      class: v(B.value)
+    return (l, e) => (g(), h("div", {
+      class: y(x.value)
     }, [
-      (g(!0), m(E, null, M(a.length, (l, n) => (g(), m("input", {
+      (g(!0), h(E, null, F(t.length, (a, n) => (g(), h("input", {
         key: n,
         ref_for: !0,
-        ref: (o) => k(o, n),
+        ref: (o) => B(o, n),
         value: r.value[n],
-        type: f.type === "number" ? "tel" : "text",
-        inputmode: "numeric",
+        type: I.value,
+        inputmode: j.value,
         maxlength: 1,
-        disabled: f.disabled,
-        placeholder: f.placeholder,
-        class: v(I(n)),
-        onInput: (o) => y(o, n),
-        onKeydown: (o) => w(o, n),
-        onPaste: D,
-        onFocus: e[0] || (e[0] = (o) => t.$emit("update:modelValue", r.value.join("")))
-      }, null, 42, F))), 128))
+        disabled: d.disabled,
+        placeholder: d.placeholder,
+        class: y(z(n)),
+        onInput: (o) => w(o, n),
+        onKeydown: (o) => D(o, n),
+        onPaste: k,
+        onFocus: e[0] || (e[0] = (o) => l.$emit("update:modelValue", r.value.join("")))
+      }, null, 42, K))), 128))
     ], 2));
   }
 });
 export {
-  P as default
+  T as default
 };

package/index.d.ts

@@ -76,4 +76,5 @@ export { GoogleSignInPlugin };
 export * from './components/StatusChip';
 export * from './components/Price';
 export * from './components/DateTime';
+export * from './components/Clock';
 export * from './core/config.ts';

package/index.js

@@ -118,7 +118,8 @@ import { default as Qt } from "./components/StatusChip/StatusChip.vue.js";
 import { STATUS_MAP as qt, normalizeStatus as Wt, resolveStatus as Xt } from "./components/StatusChip/status-map.js";
 import { default as Jt } from "./components/Price/Price.vue.js";
 import { default as ea } from "./components/DateTime/DateTime.vue.js";
-import { VLITE_CONFIG_KEY as ra, configState as ta, updateConfig as aa, useVLiteConfig as fa } from "./core/config.js";
+import { default as ra } from "./components/Clock/Clock.vue.js";
+import { VLITE_CONFIG_KEY as aa, configState as fa, updateConfig as ma, useVLiteConfig as la } from "./core/config.js";
 export {
   E as $t,
   Fo as Accordion,
@@ -140,6 +141,7 @@ export {
   nt as CheckBox,
   L as Chip,
   yo as ChoiceBox,
+  ra as Clock,
   yt as ColorPicker,
   Ot as CommandPaletteContent,
   Mt as ConfirmationModal,
@@ -218,12 +220,12 @@ export {
   Mr as TimelineItem,
   Rt as ToastNotification,
   xt as Tooltip,
-  ra as VLITE_CONFIG_KEY,
+  aa as VLITE_CONFIG_KEY,
   fo as Workbook,
   we as barcodesConstants,
   p as camelCase,
   d as capitalize,
-  ta as configState,
+  fa as configState,
   Fr as configure,
   u as copyToClipboard,
   Ht as createVLite,
@@ -259,7 +261,7 @@ export {
   F as throttle,
   Br as toast,
   v as truncate,
-  aa as updateConfig,
+  ma as updateConfig,
   Sr as useAdvancedKeyStroke,
   Ye as useDropdownIds,
   Ve as useDropdownSelection,
@@ -271,6 +273,6 @@ export {
   kr as useNotifications,
   Vo as useTheme,
   oo as useTreeSelection,
-  fa as useVLiteConfig,
+  la as useVLiteConfig,
   Cr as vScrollReveal
 };

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "description": "A Vue 3 UI component library built with Tailwind CSS.",
   "license": "MIT",
-  "version": "0.9.12",
+  "version": "1.0.2",
   "type": "module",
   "main": "index.js",
   "module": "index.js",