vlite3 1.2.4 → 1.2.7

package/components/Chart/types.d.ts

@@ -192,6 +192,47 @@ export interface GaugeChartProps {
     /** Play an entry animation on mount and value change */
     animate?: boolean;
 }
+/** Visual rendering mode for SpeedometerChart */
+export type SpeedometerVariant = 'classic' | 'modern' | 'sport' | 'minimal';
+export interface SpeedometerChartProps {
+    /** Current speed / value */
+    value: number;
+    /** Minimum value on the scale */
+    min?: number;
+    /** Maximum value on the scale (default 240) */
+    max?: number;
+    /**
+     * classic — Traditional car speedometer with full tick marks and numbers
+     * modern — Sleek speedometer with glowing accents
+     * sport  — Racing-style with red-zone, aggressive ticks
+     * minimal — Clean minimal speedometer with fewer markings
+     */
+    variant?: SpeedometerVariant;
+    /** SVG bounding diameter in px */
+    size?: number;
+    /** Opening gap at the bottom, in degrees (default 60) */
+    gapAngle?: number;
+    /** Semantic color name ('primary', 'success', etc.) or any CSS color */
+    color?: ChartColor;
+    /** Needle color — defaults to 'danger' for sport, color for others */
+    needleColor?: string;
+    /** Step between major tick labels (e.g. 20 → 0, 20, 40, 60, ...) */
+    majorStep?: number;
+    /** Number of minor ticks between major ticks */
+    minorTicks?: number;
+    /** Unit label (e.g. 'km/h', 'mph', 'RPM') */
+    unit?: string;
+    /** Show the current value in the center */
+    showValue?: boolean;
+    /** Custom value formatter */
+    formatValue?: (v: number) => string;
+    /** Primary label below the chart */
+    label?: string;
+    /** Start of the danger zone (absolute value). Rendered in red. */
+    redZoneStart?: number;
+    /** Animate needle sweep on mount and value change */
+    animate?: boolean;
+}
 /** A single task bar on the timeline */
 export interface TimelineTask {
     /** Person / row label shown on the Y axis */
@@ -292,3 +333,68 @@ export interface WaffleChartProps {
     /** Enable hover tooltip */
     showTooltip?: boolean;
 }
+/** View granularity for the Gantt time axis */
+export type GanttViewMode = 'day' | 'week' | 'month';
+/** A single task (or milestone) on the Gantt chart */
+export interface GanttTask {
+    /** Unique identifier for this task */
+    id: string;
+    /** Display name shown in the row label */
+    name: string;
+    /** Start date (Date object or ISO string) */
+    start: Date | string;
+    /** End date (Date object or ISO string) */
+    end: Date | string;
+    /** Percentage complete (0–100). Renders a filled overlay inside the bar */
+    progress?: number;
+    /** CSS color for this task bar. Falls back to palette rotation */
+    color?: string;
+    /** Group label — tasks sharing the same group are visually grouped */
+    group?: string;
+    /** IDs of tasks this task depends on. Renders dependency arrows */
+    dependencies?: string[];
+    /** If true, renders as a diamond milestone marker instead of a bar */
+    milestone?: boolean;
+}
+export interface GanttChartProps {
+    /** Array of task objects */
+    tasks: GanttTask[];
+    /** Time axis granularity */
+    viewMode?: GanttViewMode;
+    /** Total chart height in px (auto-expands if more rows) */
+    height?: number;
+    /** Height of each task row in px */
+    rowHeight?: number;
+    /** Corner radius per task bar */
+    barRadius?: number;
+    /** Task bar height within the row (should be ≤ rowHeight) */
+    barHeight?: number;
+    /** Width of the left task-name sidebar in px */
+    sidebarWidth?: number;
+    /** Show dashed vertical grid lines */
+    showGrid?: boolean;
+    /** Enable hover tooltip */
+    showTooltip?: boolean;
+    /** Show task name labels inside bars when wide enough */
+    showLabels?: boolean;
+    /** Show progress fill inside task bars */
+    showProgress?: boolean;
+    /** Render dependency arrows between tasks */
+    showDependencies?: boolean;
+    /** Show a vertical "today" marker line */
+    showTodayLine?: boolean;
+    /** Show the top date axis header */
+    showHeader?: boolean;
+    /** Play an entry animation on mount */
+    animate?: boolean;
+    /** Custom color palette (cycles for tasks without explicit color) */
+    colors?: string[];
+    /** Color for the "today" marker line */
+    todayColor?: string;
+    /** Locale string for date formatting (e.g. 'en-US') */
+    locale?: string;
+    /** Allow drag-and-drop to move/resize tasks */
+    draggable?: boolean;
+    /** When moving a task, also shift all dependent tasks recursively */
+    cascadeDependencies?: boolean;
+}

package/components/ChoiceBox/ChoiceBox.vue.d.ts

@@ -8,7 +8,12 @@ export interface ChoiceBoxOption {
     disabled?: boolean;
     badge?: string;
     badgeI18n?: string;
+    [key: string]: any;
 }
+export type ChoiceBoxVariant = '1' | '2' | '3' | '4' | '5';
+export type ChoiceBoxIndicatorType = 'default' | 'checkbox' | 'radio' | 'switch' | 'none';
+export type ChoiceBoxIndicatorPosition = 'left' | 'right' | 'top-right';
+export type ChoiceBoxSize = 'sm' | 'md' | 'lg';
 interface Props {
     modelValue?: string | number | (string | number)[] | null;
     options: ChoiceBoxOption[];
@@ -20,8 +25,37 @@ interface Props {
     disabled?: boolean;
     grid?: number;
     gap?: number;
+    variant?: ChoiceBoxVariant;
+    indicatorType?: ChoiceBoxIndicatorType;
+    indicatorPosition?: ChoiceBoxIndicatorPosition;
+    size?: ChoiceBoxSize;
+    lineThroughOnSelect?: boolean;
 }
-declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        indicator?(_: {
+            option: ChoiceBoxOption;
+            selected: boolean;
+        }): any;
+        indicator?(_: {
+            option: ChoiceBoxOption;
+            selected: boolean;
+        }): any;
+        indicator?(_: {
+            option: ChoiceBoxOption;
+            selected: boolean;
+        }): any;
+        option?(_: {
+            option: ChoiceBoxOption;
+            selected: boolean;
+        }): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     change: (value: string | number | (string | number)[]) => any;
     "update:modelValue": (value: string | number | (string | number)[]) => any;
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
@@ -29,9 +63,20 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     "onUpdate:modelValue"?: (value: string | number | (string | number)[]) => any;
 }>, {
     grid: number;
+    variant: ChoiceBoxVariant;
+    size: ChoiceBoxSize;
     disabled: boolean;
     multiple: boolean;
     modelValue: string | number | (string | number)[] | null;
     gap: number;
+    indicatorType: ChoiceBoxIndicatorType;
+    indicatorPosition: ChoiceBoxIndicatorPosition;
+    lineThroughOnSelect: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/ChoiceBox/ChoiceBox.vue.js

@@ -1,25 +1,42 @@
-import { defineComponent as O, computed as m, openBlock as r, createElementBlock as i, toDisplayString as c, createCommentVNode as n, createElementVNode as a, normalizeClass as o, Fragment as A, renderList as $, withKeys as D, withModifiers as K, createVNode as N, createBlock as v } from "vue";
-import y from "../Icon.vue.js";
-import { $t as u } from "../../utils/i18n.js";
-const E = { class: "w-full" }, S = {
+import { defineComponent as G, computed as c, openBlock as i, createElementBlock as a, toDisplayString as b, createCommentVNode as d, createElementVNode as o, normalizeClass as s, Fragment as H, renderList as J, withKeys as Q, withModifiers as R, renderSlot as T, createVNode as m, createBlock as y } from "vue";
+import g from "../Icon.vue.js";
+import $ from "../CheckBox.vue.js";
+import p from "../Switch.vue.js";
+import { $t as x } from "../../utils/i18n.js";
+const U = { class: "w-full" }, X = {
   key: 0,
   class: "mb-4"
-}, T = {
+}, Y = {
   key: 0,
   class: "text-base font-semibold text-foreground"
-}, j = {
+}, Z = {
   key: 1,
   class: "text-sm text-muted-foreground mt-1"
-}, q = ["onClick", "onKeydown"], z = { class: "flex flex-1 gap-3" }, F = {
+}, _ = ["onClick", "onKeydown"], ee = {
   key: 0,
-  class: "shrink-0 pt-0.5"
-}, L = { class: "flex flex-col" }, M = { class: "flex items-center gap-2" }, G = {
+  class: "shrink-0 mr-3 flex items-center"
+}, te = {
   key: 0,
-  class: "mt-0.5 -text-fs-3 text-muted leading-relaxed"
-}, H = {
+  class: "pointer-events-none flex items-center shrink-0"
+}, re = {
+  key: 2,
+  class: "pointer-events-none flex items-center shrink-0"
+}, ie = {
   key: 0,
-  class: "absolute top-4 right-4 text-primary"
-}, R = /* @__PURE__ */ O({
+  class: "shrink-0 flex items-center justify-center"
+}, ne = { class: "flex items-center gap-2" }, le = {
+  key: 1,
+  class: "shrink-0 ml-3 flex items-center"
+}, ae = {
+  key: 0,
+  class: "pointer-events-none flex items-center shrink-0"
+}, se = {
+  key: 2,
+  class: "pointer-events-none flex items-center shrink-0"
+}, de = {
+  key: 2,
+  class: "pointer-events-none flex items-center shrink-0"
+}, fe = /* @__PURE__ */ G({
   __name: "ChoiceBox",
   props: {
     modelValue: { default: void 0 },
@@ -31,36 +48,46 @@ const E = { class: "w-full" }, S = {
     descriptionI18n: {},
     disabled: { type: Boolean, default: !1 },
     grid: { default: 1 },
-    gap: { default: 4 }
+    gap: { default: 4 },
+    variant: { default: "1" },
+    indicatorType: { default: "default" },
+    indicatorPosition: { default: "top-right" },
+    size: { default: "md" },
+    lineThroughOnSelect: { type: Boolean, default: !1 }
   },
   emits: ["update:modelValue", "change"],
-  setup(g, { emit: _ }) {
-    const s = g, x = _, f = m(() => s.titleI18n ? u(s.titleI18n) : s.title), p = m(
-      () => s.descriptionI18n ? u(s.descriptionI18n) : s.description
-    ), k = (t) => t.titleI18n ? u(t.titleI18n) : t.title, I = (t) => t.descriptionI18n ? u(t.descriptionI18n) : t.description, w = (t) => t.badgeI18n ? u(t.badgeI18n) : t.badge, d = (t) => Array.isArray(s.modelValue) ? s.modelValue.includes(t) : s.modelValue === t, b = (t) => {
-      if (s.disabled || s.options.find((l) => l.id === t)?.disabled) return;
-      let e;
-      if (s.multiple) {
-        const l = Array.isArray(s.modelValue) ? [...s.modelValue] : [], h = l.indexOf(t);
-        h === -1 ? l.push(t) : l.splice(h, 1), e = l;
+  setup(e, { emit: B }) {
+    const r = e, C = B, z = c(() => r.titleI18n ? x(r.titleI18n) : r.title), w = c(
+      () => r.descriptionI18n ? x(r.descriptionI18n) : r.description
+    ), A = (l) => l.titleI18n ? x(l.titleI18n) : l.title, D = (l) => l.descriptionI18n ? x(l.descriptionI18n) : l.description, P = (l) => l.badgeI18n ? x(l.badgeI18n) : l.badge, n = (l) => Array.isArray(r.modelValue) ? r.modelValue.includes(l) : r.modelValue === l, I = (l) => {
+      if (r.disabled || r.options.find((u) => u.id === l)?.disabled) return;
+      let t;
+      if (r.multiple) {
+        const u = Array.isArray(r.modelValue) ? [...r.modelValue] : [], k = u.indexOf(l);
+        k === -1 ? u.push(l) : u.splice(k, 1), t = u;
       } else
-        e = t;
-      x("update:modelValue", e), x("change", e);
-    }, V = m(() => {
-      switch (s.grid) {
+        t = l;
+      C("update:modelValue", t), C("change", t);
+    }, q = c(() => {
+      switch (r.grid) {
+        case 0:
+          return "flex flex-wrap";
         case 1:
-          return "grid-cols-1";
+          return "grid grid-cols-1";
         case 2:
-          return "grid-cols-1 sm:grid-cols-2";
+          return "grid grid-cols-1 sm:grid-cols-2";
         case 3:
-          return "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3";
+          return "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3";
         case 4:
-          return "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4";
+          return "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4";
         default:
-          return "grid-cols-1";
+          return "grid grid-cols-1";
       }
-    }), C = m(() => {
-      switch (s.gap) {
+    }), K = c(() => {
+      if (r.variant === "2") return "gap-0";
+      switch (r.gap) {
+        case 0:
+          return "gap-0";
         case 2:
           return "gap-2";
         case 3:
@@ -74,73 +101,229 @@ const E = { class: "w-full" }, S = {
         default:
           return "gap-4";
       }
-    });
-    return (t, B) => (r(), i("div", E, [
-      f.value || p.value ? (r(), i("div", S, [
-        f.value ? (r(), i("h3", T, c(f.value), 1)) : n("", !0),
-        p.value ? (r(), i("p", j, c(p.value), 1)) : n("", !0)
-      ])) : n("", !0),
-      a("div", {
-        class: o(["grid", [V.value, C.value]])
+    }), N = (l) => {
+      const t = n(l.id) && !r.lineThroughOnSelect, u = "relative flex items-center cursor-pointer transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2", k = r.disabled || l.disabled ? "opacity-50 cursor-not-allowed grayscale" : "", j = {
+        1: { sm: "p-3", md: "p-4", lg: "p-5" },
+        2: { sm: "py-3 px-3", md: "py-4 px-4", lg: "py-5 px-5" },
+        3: { sm: "p-3", md: "p-4", lg: "p-5" },
+        4: { sm: "p-4", md: "p-5", lg: "p-6" },
+        5: { sm: "px-3 py-1.5", md: "px-4 py-2", lg: "px-5 py-2.5" }
+      }, v = j[r.variant]?.[r.size] || j[r.variant].md;
+      let h = "";
+      switch (r.variant) {
+        case "1":
+          h = `rounded-xl border ${v} ${t ? "border-primary bg-primary/5" : "border-border bg-card hover:border-primary/40 hover:bg-accent/30"}`;
+          break;
+        case "2":
+          h = `border-b border-border ${v} last:border-0 ${t ? "bg-black/5 dark:bg-white/10" : "bg-transparent hover:bg-accent/30"}`;
+          break;
+        case "3":
+          h = `rounded-xl ${v} ${t ? "bg-primary/15" : "bg-muted/60 hover:bg-muted"}`;
+          break;
+        case "4":
+          h = `rounded-2xl border-[2.5px] ${v} ${t ? "border-primary bg-transparent" : "border-border/80 bg-transparent hover:border-muted-foreground/40"}`;
+          break;
+        case "5":
+          const W = r.indicatorType !== "none" && r.indicatorType !== "default";
+          h = `rounded-full border ${v} justify-center ${t ? W ? "border-primary bg-primary/10 text-primary" : "border-primary bg-primary text-primary-foreground" : "border-border bg-background hover:bg-accent"}`;
+          break;
+      }
+      return [u, h, k].filter(Boolean).join(" ");
+    }, E = c(() => r.size === "sm" ? "text-sm" : r.size === "lg" ? "text-base" : "text-[15px]"), M = c(() => r.size === "sm" ? "text-[12px]" : r.size === "lg" ? "text-[14px]" : "text-[13px]"), F = c(() => r.variant === "5" ? "h-5 w-5 bg-transparent" : r.size === "sm" ? "h-8 w-8" : r.size === "lg" ? "h-12 w-12" : "h-10 w-10"), L = c(() => r.size === "sm" ? "h-4 w-4" : r.size === "lg" ? "h-6 w-6" : "h-5 w-5"), f = c(() => r.size === "sm" ? "h-4 w-4" : r.size === "lg" ? "h-6 w-6" : "h-5 w-5"), S = c(() => r.size === "sm" ? "h-4 w-4" : r.size === "lg" ? "h-6 w-6" : "h-5 w-5"), O = c(() => r.size === "sm" ? "h-2 w-2" : r.size === "lg" ? "h-3 w-3" : "h-2.5 w-2.5");
+    return (l, V) => (i(), a("div", U, [
+      z.value || w.value ? (i(), a("div", X, [
+        z.value ? (i(), a("h3", Y, b(z.value), 1)) : d("", !0),
+        w.value ? (i(), a("p", Z, b(w.value), 1)) : d("", !0)
+      ])) : d("", !0),
+      o("div", {
+        class: s([q.value, K.value])
       }, [
-        (r(!0), i(A, null, $(g.options, (e) => (r(), i("div", {
-          key: e.id,
-          class: o(["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", [
-            d(e.id) ? "border-primary bg-accent" : "bg-card hover:border-primary/50 hover:bg-accent",
-            g.disabled || e.disabled ? "opacity-50 cursor-not-allowed grayscale" : ""
-          ]]),
-          onClick: (l) => b(e.id),
+        (i(!0), a(H, null, J(e.options, (t) => (i(), a("div", {
+          key: t.id,
+          class: s(N(t)),
+          onClick: (u) => I(t.id),
           tabindex: "0",
-          onKeydown: D(K((l) => b(e.id), ["prevent"]), ["enter", "space"])
+          onKeydown: Q(R((u) => I(t.id), ["prevent"]), ["enter", "space"])
         }, [
-          a("div", z, [
-            e.icon ? (r(), i("div", F, [
-              a("div", {
-                class: o([
-                  "flex h-10 w-10 items-center justify-center rounded-full transition-colors",
-                  d(e.id) ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"
-                ])
+          e.indicatorPosition === "left" && e.indicatorType !== "none" ? (i(), a("div", ee, [
+            T(l.$slots, "indicator", {
+              option: t,
+              selected: n(t.id)
+            }, () => [
+              e.indicatorType === "checkbox" ? (i(), a("div", te, [
+                m($, {
+                  "model-value": n(t.id),
+                  size: e.size
+                }, null, 8, ["model-value", "size"])
+              ])) : e.indicatorType === "radio" ? (i(), a("div", {
+                key: 1,
+                class: s([[S.value, n(t.id) && !e.lineThroughOnSelect ? "border-primary" : "border-muted-foreground/50"], "rounded-full border-[2px] flex items-center justify-center transition-colors shrink-0"])
+              }, [
+                n(t.id) ? (i(), a("div", {
+                  key: 0,
+                  class: s([[O.value, e.lineThroughOnSelect ? "bg-muted-foreground/50" : "bg-primary"], "rounded-full"])
+                }, null, 2)) : d("", !0)
+              ], 2)) : e.indicatorType === "switch" ? (i(), a("div", re, [
+                m(p, {
+                  "model-value": n(t.id)
+                }, null, 8, ["model-value"])
+              ])) : e.indicatorType === "default" ? (i(), a("div", {
+                key: 3,
+                class: s(["flex items-center shrink-0 transition-colors", n(t.id) ? e.lineThroughOnSelect ? "text-muted-foreground opacity-50" : e.variant === "5" ? "text-primary-foreground" : "text-primary" : "text-transparent"])
               }, [
-                N(y, {
-                  icon: e.icon,
-                  class: "h-5 w-5"
-                }, null, 8, ["icon"])
+                e.multiple ? (i(), y(g, {
+                  key: 0,
+                  icon: "lucide:check-square",
+                  class: s(f.value)
+                }, null, 8, ["class"])) : (i(), y(g, {
+                  key: 1,
+                  icon: "lucide:check-circle-2",
+                  class: s(f.value)
+                }, null, 8, ["class"]))
+              ], 2)) : d("", !0)
+            ])
+          ])) : d("", !0),
+          o("div", {
+            class: s(["flex flex-1 gap-3 items-center", { "justify-center": e.variant === "5" }])
+          }, [
+            T(l.$slots, "option", {
+              option: t,
+              selected: n(t.id)
+            }, () => [
+              t.icon ? (i(), a("div", ie, [
+                o("div", {
+                  class: s(["flex items-center justify-center rounded-full transition-colors", [
+                    F.value,
+                    n(t.id) && e.variant !== "5" && !e.lineThroughOnSelect ? e.variant === "2" ? "bg-muted text-foreground" : "bg-primary/10 text-primary" : e.variant !== "5" ? "bg-muted text-muted-foreground" : "text-current",
+                    e.lineThroughOnSelect && n(t.id) ? "opacity-50" : ""
+                  ]])
+                }, [
+                  m(g, {
+                    icon: t.icon,
+                    class: s(L.value)
+                  }, null, 8, ["icon", "class"])
+                ], 2)
+              ])) : d("", !0),
+              o("div", {
+                class: s(["flex flex-col flex-1 justify-center", { "items-center text-center": e.variant === "5" && !t.icon }])
+              }, [
+                o("div", ne, [
+                  o("span", {
+                    class: s(["font-medium transition-colors", [
+                      E.value,
+                      n(t.id) && !e.lineThroughOnSelect ? e.variant === "5" && (e.indicatorType === "none" || e.indicatorType === "default") ? "text-primary-foreground" : e.variant === "2" ? "text-foreground font-semibold" : "text-primary" : "text-foreground"
+                    ]])
+                  }, [
+                    o("span", {
+                      class: s({ "line-through opacity-50": t.disabled || e.lineThroughOnSelect && n(t.id) })
+                    }, b(A(t)), 3)
+                  ], 2),
+                  t.badge || t.badgeI18n ? (i(), a("span", {
+                    key: 0,
+                    class: s([
+                      "inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium",
+                      n(t.id) && !e.lineThroughOnSelect ? e.variant === "5" ? "bg-background/20 text-current" : "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
+                    ])
+                  }, b(P(t)), 3)) : d("", !0)
+                ]),
+                (t.description || t.descriptionI18n) && e.variant !== "5" ? (i(), a("span", {
+                  key: 0,
+                  class: s(["mt-0.5 leading-relaxed transition-colors", [
+                    M.value,
+                    "text-muted-foreground",
+                    e.lineThroughOnSelect && n(t.id) ? "line-through opacity-50" : ""
+                  ]])
+                }, b(D(t)), 3)) : d("", !0)
               ], 2)
-            ])) : n("", !0),
-            a("div", L, [
-              a("div", M, [
-                a("span", {
-                  class: o(["font-semibold text-foreground text-fs-1", {
-                    "text-primary": d(e.id)
-                  }])
-                }, c(k(e)), 3),
-                e.badge || e.badgeI18n ? (r(), i("span", {
+            ])
+          ], 2),
+          e.indicatorPosition === "right" && e.indicatorType !== "none" ? (i(), a("div", le, [
+            T(l.$slots, "indicator", {
+              option: t,
+              selected: n(t.id)
+            }, () => [
+              e.indicatorType === "checkbox" ? (i(), a("div", ae, [
+                m($, {
+                  "model-value": n(t.id),
+                  size: e.size
+                }, null, 8, ["model-value", "size"])
+              ])) : e.indicatorType === "radio" ? (i(), a("div", {
+                key: 1,
+                class: s([[S.value, n(t.id) && !e.lineThroughOnSelect ? "border-primary" : "border-muted-foreground/50"], "rounded-full border-[2px] flex items-center justify-center transition-colors shrink-0"])
+              }, [
+                n(t.id) ? (i(), a("div", {
+                  key: 0,
+                  class: s([[O.value, e.lineThroughOnSelect ? "bg-muted-foreground/50" : "bg-primary"], "rounded-full"])
+                }, null, 2)) : d("", !0)
+              ], 2)) : e.indicatorType === "switch" ? (i(), a("div", se, [
+                m(p, {
+                  "model-value": n(t.id)
+                }, null, 8, ["model-value"])
+              ])) : e.indicatorType === "default" ? (i(), a("div", {
+                key: 3,
+                class: s(["flex items-center shrink-0 transition-colors", n(t.id) ? e.lineThroughOnSelect ? "text-muted-foreground opacity-50" : e.variant === "5" ? "text-primary-foreground" : "text-primary" : "text-transparent"])
+              }, [
+                e.multiple ? (i(), y(g, {
+                  key: 0,
+                  icon: "lucide:check-square",
+                  class: s(f.value)
+                }, null, 8, ["class"])) : (i(), y(g, {
+                  key: 1,
+                  icon: "lucide:check-circle-2",
+                  class: s(f.value)
+                }, null, 8, ["class"]))
+              ], 2)) : d("", !0)
+            ])
+          ])) : d("", !0),
+          e.indicatorPosition === "top-right" && e.indicatorType !== "none" ? (i(), a("div", {
+            key: 2,
+            class: s(["absolute flex items-center", ["1", "3", "4"].includes(e.variant) ? "top-4 right-4" : "top-1/2 -translate-y-1/2 right-4"])
+          }, [
+            T(l.$slots, "indicator", {
+              option: t,
+              selected: n(t.id)
+            }, () => [
+              e.indicatorType === "checkbox" ? (i(), a("div", {
+                key: 0,
+                class: s(["pointer-events-none flex items-center shrink-0", e.lineThroughOnSelect ? "" : "text-primary"])
+              }, [
+                m($, {
+                  "model-value": n(t.id),
+                  size: e.size
+                }, null, 8, ["model-value", "size"])
+              ], 2)) : e.indicatorType === "radio" ? (i(), a("div", {
+                key: 1,
+                class: s([[S.value, n(t.id) && !e.lineThroughOnSelect ? "border-primary" : "border-muted-foreground/50"], "rounded-full border-[2px] flex items-center justify-center transition-colors shrink-0"])
+              }, [
+                n(t.id) ? (i(), a("div", {
+                  key: 0,
+                  class: s([[O.value, e.lineThroughOnSelect ? "bg-muted-foreground/50" : "bg-primary"], "rounded-full"])
+                }, null, 2)) : d("", !0)
+              ], 2)) : e.indicatorType === "switch" ? (i(), a("div", de, [
+                m(p, {
+                  "model-value": n(t.id)
+                }, null, 8, ["model-value"])
+              ])) : e.indicatorType === "default" ? (i(), a("div", {
+                key: 3,
+                class: s(["flex items-center shrink-0 transition-colors", n(t.id) ? e.lineThroughOnSelect ? "text-muted-foreground opacity-50" : "text-primary" : "text-transparent"])
+              }, [
+                n(t.id) && e.multiple ? (i(), y(g, {
                   key: 0,
-                  class: o([
-                    "inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium",
-                    d(e.id) ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
-                  ])
-                }, c(w(e)), 3)) : n("", !0)
-              ]),
-              e.description || e.descriptionI18n ? (r(), i("span", G, c(I(e)), 1)) : n("", !0)
+                  icon: "lucide:check-square",
+                  class: s(f.value)
+                }, null, 8, ["class"])) : n(t.id) && !e.multiple ? (i(), y(g, {
+                  key: 1,
+                  icon: "lucide:check-circle-2",
+                  class: s(f.value)
+                }, null, 8, ["class"])) : d("", !0)
+              ], 2)) : d("", !0)
             ])
-          ]),
-          d(e.id) ? (r(), i("div", H, [
-            g.multiple ? (r(), v(y, {
-              key: 0,
-              icon: "lucide:check-square",
-              class: "h-5 w-5"
-            })) : (r(), v(y, {
-              key: 1,
-              icon: "lucide:check-circle-2",
-              class: "h-5 w-5"
-            }))
-          ])) : n("", !0)
-        ], 42, q))), 128))
+          ], 2)) : d("", !0)
+        ], 42, _))), 128))
       ], 2)
     ]));
   }
 });
 export {
-  R as default
+  fe as default
 };

package/components/ChoiceBox/index.d.ts

@@ -1,2 +1,2 @@
 export { default as ChoiceBox } from './ChoiceBox.vue';
-export type { ChoiceBoxOption } from './ChoiceBox.vue';
+export type { ChoiceBoxOption, ChoiceBoxVariant, ChoiceBoxIndicatorType, ChoiceBoxIndicatorPosition, ChoiceBoxSize } from './ChoiceBox.vue';

package/components/{CopyButton.vue.d.ts → Clipboard.vue.d.ts}

@@ -1,5 +1,5 @@
 import { ButtonVariant, ButtonSize, ButtonRounded } from '../types';
-export interface CopyButtonProps {
+export interface ClipboardProps {
     /** The content to be copied to the clipboard */
     textToCopy: string;
     variant?: ButtonVariant;
@@ -26,15 +26,16 @@ declare function __VLS_template(): {
     rootEl: HTMLButtonElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<CopyButtonProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+declare const __VLS_component: import('vue').DefineComponent<ClipboardProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     copy: (text: string) => any;
     error: (err: Error) => any;
-}, string, import('vue').PublicProps, Readonly<CopyButtonProps> & Readonly<{
+}, string, import('vue').PublicProps, Readonly<ClipboardProps> & Readonly<{
     onCopy?: (text: string) => any;
     onError?: (err: Error) => any;
 }>, {
     variant: ButtonVariant;
     size: ButtonSize;
+    rounded: ButtonRounded;
     asIcon: boolean;
     defaultIcon: string;
     copiedIcon: string;