vlite3 0.0.1

package/components/ColorPicker/ColorPicker.vue.js

@@ -0,0 +1,55 @@
+import { defineComponent as n, openBlock as d, createBlock as r, unref as c, withCtx as l, createElementVNode as m, createVNode as a, mergeProps as u } from "vue";
+import f from "../Dropdown/Dropdown.vue.js";
+import "@iconify/vue";
+import p from "../Button.vue.js";
+import h from "./ColorIro.vue.js";
+/* empty css              */
+const g = { class: "p-1.5" }, w = /* @__PURE__ */ n({
+  __name: "ColorPicker",
+  props: {
+    modelValue: { default: "#000000" },
+    disabled: { type: Boolean, default: !1 },
+    size: { default: "md" },
+    position: { default: "right-start" },
+    btnProps: {}
+  },
+  emits: ["update:modelValue", "change"],
+  setup(e, { emit: i }) {
+    const t = i, s = (o) => {
+      t("update:modelValue", o), t("change", o);
+    };
+    return (o, b) => (d(), r(c(f), {
+      disabled: e.disabled,
+      class: "w-auto",
+      position: e.position,
+      offset: [0, 8],
+      "close-on-select": !1
+    }, {
+      trigger: l(({ isOpen: V }) => [
+        a(p, u({
+          style: { backgroundColor: e.modelValue }
+        }, {
+          rounded: "full",
+          size: "xs",
+          icon: " ",
+          variant: "outline",
+          ...e.btnProps || {}
+        }), null, 16, ["style"])
+      ]),
+      default: l(() => [
+        m("div", g, [
+          a(h, {
+            color: e.modelValue,
+            "show-header": !1,
+            size: e.size,
+            "onUpdate:color": s
+          }, null, 8, ["color", "size"])
+        ])
+      ]),
+      _: 1
+    }, 8, ["disabled", "position"]));
+  }
+});
+export {
+  w as default
+};

package/components/ColorPicker/ColorPicker.vue2.js

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

package/components/ConfirmationModal.vue.d.ts

@@ -0,0 +1,23 @@
+interface Props {
+    show: boolean;
+    title: string;
+    description: string;
+    loading?: boolean;
+    confirmText?: string;
+    cancelText?: string;
+    variant?: 'danger' | 'primary' | 'warning' | 'success' | 'info';
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    cancel: () => any;
+    confirm: () => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onCancel?: () => any;
+    onConfirm?: () => any;
+}>, {
+    variant: "danger" | "primary" | "warning" | "success" | "info";
+    loading: boolean;
+    show: boolean;
+    confirmText: string;
+    cancelText: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/components/ConfirmationModal.vue.js

@@ -0,0 +1,50 @@
+import { defineComponent as d, openBlock as s, createBlock as f, withCtx as r, createElementVNode as m, createVNode as l } from "vue";
+import x from "./Modal.vue.js";
+import o from "./Button.vue.js";
+const u = { class: "flex w-full items-center justify-end space-x-2 pt-4" }, h = /* @__PURE__ */ d({
+  __name: "ConfirmationModal",
+  props: {
+    show: { type: Boolean, default: !1 },
+    title: {},
+    description: {},
+    loading: { type: Boolean, default: !1 },
+    confirmText: { default: "Delete" },
+    cancelText: { default: "Cancel" },
+    variant: { default: "danger" }
+  },
+  emits: ["cancel", "confirm"],
+  setup(e, { emit: c }) {
+    const i = c, n = () => {
+      i("cancel");
+    };
+    return (w, t) => (s(), f(x, {
+      show: e.show,
+      title: e.title,
+      description: e.description,
+      "max-width": "max-w-[400px]",
+      onClose: n,
+      "onUpdate:show": t[1] || (t[1] = (a) => !a && n())
+    }, {
+      default: r(() => [
+        m("div", u, [
+          l(o, {
+            variant: "outline",
+            text: e.cancelText,
+            disabled: e.loading,
+            onClick: n
+          }, null, 8, ["text", "disabled"]),
+          l(o, {
+            variant: e.variant,
+            text: e.confirmText,
+            loading: e.loading,
+            onClick: t[0] || (t[0] = (a) => i("confirm"))
+          }, null, 8, ["variant", "text", "loading"])
+        ])
+      ]),
+      _: 1
+    }, 8, ["show", "title", "description"]));
+  }
+});
+export {
+  h as default
+};

package/components/ConfirmationModal.vue2.js

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

package/components/DatePicker.vue.d.ts

@@ -0,0 +1,44 @@
+import { DatePickerMode } from 'v-datepicker-lite/types';
+import { ButtonSize, ButtonVariant } from '../types';
+type __VLS_Props = {
+    placeholder?: string;
+    modelValue?: any;
+    value?: any;
+    mode: DatePickerMode;
+    minDate?: string;
+    icon?: string;
+    size?: ButtonSize;
+    variant?: ButtonVariant;
+    btnProps?: any;
+    teleport?: boolean;
+    minuteInterval?: number;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            value: any;
+            displayValue: string;
+        }): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    onChange: (...args: any[]) => void;
+    "update:modelValue": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onOnChange?: (...args: any[]) => any;
+    "onUpdate:modelValue"?: (...args: any[]) => any;
+}>, {
+    teleport: boolean;
+    minuteInterval: number;
+}, {}, {}, {}, 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/DatePicker.vue.js

@@ -0,0 +1,88 @@
+import { defineComponent as v, computed as i, openBlock as g, createBlock as h, unref as u, withCtx as m, createElementVNode as p, createVNode as s, renderSlot as V, mergeProps as w } from "vue";
+import x from "./Button.vue.js";
+import y from "./Dropdown/Dropdown.vue.js";
+import "@iconify/vue";
+import D from "v-datepicker-lite";
+import "v-datepicker-lite/style.css";
+const C = { class: "min-w-[300px] overflow-hidden" }, I = /* @__PURE__ */ v({
+  __name: "DatePicker",
+  props: {
+    placeholder: {},
+    modelValue: {},
+    value: {},
+    mode: {},
+    minDate: {},
+    icon: {},
+    size: {},
+    variant: {},
+    btnProps: {},
+    teleport: { type: Boolean, default: !0 },
+    minuteInterval: { default: 5 }
+  },
+  emits: ["update:modelValue", "onChange"],
+  setup(t, { emit: c }) {
+    const n = t, l = c, a = i({
+      get: () => n.modelValue ?? n.value,
+      set: (e) => {
+        l("update:modelValue", e), l("onChange", e);
+      }
+    }), d = (e) => e instanceof Date ? e.getHours() !== 0 || e.getMinutes() !== 0 : typeof e == "string" ? e.includes("T") || /\d{2}:\d{2}/.test(e) : !1, o = i(() => {
+      if (!a.value) return "";
+      try {
+        console.log("actualValue.value :>> ", a.value);
+        const e = new Date(a.value);
+        if (isNaN(e.getTime())) return String(a.value);
+        console.log("d :>> ", e);
+        const r = n.mode === "dateTime" && d(a.value);
+        return e.toLocaleDateString("en-US", {
+          month: "short",
+          day: "numeric",
+          year: "numeric",
+          ...r ? { hour: "2-digit", minute: "2-digit" } : {}
+        });
+      } catch {
+        return String(a.value);
+      }
+    }), f = (e) => {
+      a.value = e;
+    };
+    return (e, r) => (g(), h(u(y), {
+      position: "bottom-start",
+      class: "w-full",
+      teleport: t.teleport
+    }, {
+      trigger: m(() => [
+        V(e.$slots, "default", {
+          value: a.value,
+          displayValue: o.value
+        }, () => [
+          s(x, w({
+            text: o.value || t.placeholder || "Select date",
+            variant: t.variant || "transparent",
+            size: t.size || "sm",
+            icon: t.icon || "lucide:calendar"
+          }, t.btnProps, {
+            class: ["w-full justify-start! text-sm font-normal hover:border-input text-foreground", { "text-muted-foreground": !o.value }]
+          }), null, 16, ["text", "variant", "size", "icon", "class"])
+        ])
+      ]),
+      default: m(() => [
+        p("div", C, [
+          s(u(D), {
+            value: a.value,
+            mode: t.mode,
+            "min-date": t.minDate,
+            class: "w-full",
+            minuteInterval: t.minuteInterval,
+            timeFormat: "12h",
+            onChange: f
+          }, null, 8, ["value", "mode", "min-date", "minuteInterval"])
+        ])
+      ]),
+      _: 3
+    }, 8, ["teleport"]));
+  }
+});
+export {
+  I as default
+};

package/components/DatePicker.vue2.js

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

package/components/Dropdown/Dropdown.vue.d.ts

@@ -0,0 +1,104 @@
+import { IDropdownOptions, IDropdownOption } from '../../types/styles';
+import { TooltTipPlacement } from 'v-tooltip-lite/types';
+type __VLS_Props = {
+    selected?: any;
+    modelValue?: any;
+    className?: string;
+    emptyMessage?: string;
+    position?: TooltTipPlacement;
+    closeOnSelect?: boolean;
+    toggleSelection?: boolean;
+    options?: IDropdownOptions;
+    canCloseOutside?: boolean;
+    caret?: boolean;
+    offset?: [number, number];
+    isOpen?: boolean;
+    teleport?: boolean;
+    selectedIndex?: number | null;
+    maxHeight?: string;
+    width?: string;
+    ignoreClickOutside?: string[];
+    menuId?: string;
+    nestedPosition?: TooltTipPlacement;
+    nestedOffset?: [number, number];
+    showSelectedLabel?: boolean;
+    selectable?: boolean;
+    doubleConfirmation?: boolean;
+    layout?: 'default' | 'grouped';
+    columns?: number | string;
+    loading?: boolean;
+    hasMore?: boolean;
+    searchable?: boolean;
+    remote?: boolean;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        trigger?(_: {
+            selectedLabel: string;
+            isOpen: boolean;
+        }): any;
+        default?(_: {}): any;
+        menu?(_: {}): any;
+        item?(_: {
+            option: IDropdownOption;
+            index: number;
+            selected: boolean;
+        }): any;
+        header?(_: {}): any;
+        footer?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    search: (query: string) => any;
+    onSelect: (payload: {
+        value: any;
+        data?: any;
+    }) => any;
+    "update:modelValue": (value: any) => any;
+    onClose: () => any;
+    onOpen: () => any;
+    "update:isOpen": (value: boolean) => any;
+    "load-more": () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSearch?: (query: string) => any;
+    onOnSelect?: (payload: {
+        value: any;
+        data?: any;
+    }) => any;
+    "onUpdate:modelValue"?: (value: any) => any;
+    onOnClose?: () => any;
+    onOnOpen?: () => any;
+    "onUpdate:isOpen"?: (value: boolean) => any;
+    "onLoad-more"?: () => any;
+}>, {
+    isOpen: boolean;
+    loading: boolean;
+    selectable: boolean;
+    columns: number | string;
+    canCloseOutside: boolean;
+    closeOnSelect: boolean;
+    toggleSelection: boolean;
+    position: TooltTipPlacement;
+    emptyMessage: string;
+    offset: [number, number];
+    teleport: boolean;
+    selectedIndex: number | null;
+    maxHeight: string;
+    showSelectedLabel: boolean;
+    doubleConfirmation: boolean;
+    layout: "default" | "grouped";
+    hasMore: boolean;
+    searchable: boolean;
+    remote: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, 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/Dropdown/Dropdown.vue.js

@@ -0,0 +1,200 @@
+import { defineComponent as L, ref as d, watch as b, reactive as A, toRefs as V, computed as D, openBlock as $, createElementBlock as R, createVNode as C, unref as v, withCtx as r, renderSlot as c, createBlock as j, normalizeClass as z, createSlots as E, normalizeProps as k, guardReactiveProps as w, createCommentVNode as U } from "vue";
+import q from "v-tooltip-lite";
+import "v-tooltip-lite/style.css";
+import F from "./DropdownMenu.vue.js";
+import G from "./DropdownTrigger.vue.js";
+import J from "../ConfirmationModal.vue.js";
+import { useDropdownIds as K } from "./composables/useDropdownIds.js";
+import { useDropdownSelection as Q } from "./composables/useDropdownSelection.js";
+const W = { class: "relative inline-block text-left" }, ae = /* @__PURE__ */ L({
+  __name: "Dropdown",
+  props: {
+    selected: {},
+    modelValue: {},
+    className: {},
+    emptyMessage: { default: "No options found" },
+    position: { default: "bottom-end" },
+    closeOnSelect: { type: Boolean, default: !0 },
+    toggleSelection: { type: Boolean, default: !0 },
+    options: {},
+    canCloseOutside: { type: Boolean, default: !0 },
+    caret: { type: Boolean },
+    offset: { default: () => [0, 8] },
+    isOpen: { type: Boolean, default: void 0 },
+    teleport: { type: Boolean, default: !0 },
+    selectedIndex: { default: null },
+    maxHeight: { default: "300px" },
+    width: {},
+    ignoreClickOutside: {},
+    menuId: {},
+    nestedPosition: {},
+    nestedOffset: {},
+    showSelectedLabel: { type: Boolean, default: !0 },
+    selectable: { type: Boolean, default: !0 },
+    doubleConfirmation: { type: Boolean, default: !1 },
+    layout: { default: "default" },
+    columns: { default: 3 },
+    loading: { type: Boolean, default: !1 },
+    hasMore: { type: Boolean, default: !1 },
+    searchable: { type: Boolean, default: !0 },
+    remote: { type: Boolean, default: !1 }
+  },
+  emits: ["onSelect", "update:modelValue", "onOpen", "onClose", "update:isOpen", "load-more", "search"],
+  setup(t, { emit: S }) {
+    const n = t, f = S, m = d(!1), u = d(null), s = d({
+      title: "Confirm Selection",
+      description: "Are you sure you want to select this option?",
+      confirmText: "Confirm",
+      cancelText: "Cancel",
+      variant: "primary"
+    }), p = d(n.isOpen || !1);
+    b(
+      () => n.isOpen,
+      (e) => {
+        e !== void 0 && (p.value = e);
+      }
+    );
+    const h = (e) => {
+      p.value = e, f("update:isOpen", e), f(e ? "onOpen" : "onClose");
+    }, i = d([]);
+    b(
+      () => n.options,
+      (e) => {
+        if (e)
+          if (n.remote) {
+            const l = [...i.value];
+            e.forEach((o) => {
+              l.some((a) => a.value !== void 0 && o.value !== void 0 ? typeof a.value == "object" && a.key && o.key ? a.key === o.key && a.value[a.key] === o.value[o.key] : a.value === o.value : a.label === o.label) || l.push(o);
+            }), i.value = l;
+          } else
+            i.value = e;
+      },
+      { immediate: !0, deep: !0 }
+    );
+    const { getAllRecursiveIds: B } = K(), I = A({
+      ...V(n),
+      options: i
+    }), { currentValue: T, selectedLabel: O, selectOption: x } = Q(
+      I,
+      // Cast to any to satisfy strict prop types if needed, or define interface
+      f
+    ), N = D(() => {
+      const e = n.ignoreClickOutside || [], l = B(i.value);
+      return [.../* @__PURE__ */ new Set([...e, ...l])];
+    }), P = (e) => {
+      n.doubleConfirmation || !!e.confirmation ? (u.value = e, typeof e.confirmation == "object" ? s.value = {
+        title: e.confirmation.title || "Confirm Selection",
+        description: e.confirmation.description || "Are you sure you want to select this option?",
+        confirmText: e.confirmation.confirmText || "Confirm",
+        cancelText: e.confirmation.cancelText || "Cancel",
+        variant: e.confirmation.variant || "primary"
+      } : s.value = {
+        title: "Confirm Selection",
+        description: `Are you sure you want to select "${e.label}"?`,
+        confirmText: "Confirm",
+        cancelText: "Cancel",
+        variant: "primary"
+      }, m.value = !0, y()) : (g(e), n.closeOnSelect && y());
+    }, g = (e) => {
+      x(e);
+    }, M = () => {
+      u.value && (g(u.value), u.value = null, m.value = !1);
+    }, H = () => {
+      u.value = null, m.value = !1;
+    }, y = () => {
+      h(!1);
+    };
+    return (e, l) => ($(), R("div", W, [
+      C(v(q), {
+        content: "",
+        trigger: "click",
+        arrow: !1,
+        teleport: t.teleport,
+        offset: t.offset,
+        placement: t.position,
+        isOpen: p.value,
+        menuId: t.menuId,
+        ignoreClickOutside: N.value,
+        class: "w-full",
+        className: "dropdown " + (t.className || ""),
+        onOnShow: l[2] || (l[2] = (o) => e.$emit("onOpen")),
+        onOnHide: l[3] || (l[3] = (o) => e.$emit("onClose")),
+        "onUpdate:isOpen": h,
+        triggerClass: "w-full",
+        styles: { padding: "0" }
+      }, {
+        trigger: r(({ isOpen: o }) => [
+          c(e.$slots, "trigger", k(w({ selectedLabel: v(O), isOpen: o })), () => [
+            C(G, {
+              "selected-label": v(O),
+              "is-open": o,
+              class: "w-full"
+            }, null, 8, ["selected-label", "is-open"])
+          ])
+        ]),
+        default: r(() => [
+          c(e.$slots, "default"),
+          t.options?.length || i.value.length || e.$slots.menu || e.$slots.item || t.remote || t.searchable ? ($(), j(F, {
+            key: 0,
+            options: t.options,
+            cachedOptions: i.value,
+            class: z(t.className),
+            selected: v(T),
+            selectedIndex: t.selectedIndex,
+            maxHeight: t.maxHeight,
+            nestedPosition: t.nestedPosition,
+            nestedOffset: t.nestedOffset,
+            selectable: t.selectable,
+            layout: t.layout,
+            columns: t.columns,
+            loading: t.loading,
+            hasMore: t.hasMore,
+            searchable: t.searchable,
+            remote: t.remote,
+            onSelect: P,
+            onClose: y,
+            onLoadMore: l[0] || (l[0] = (o) => e.$emit("load-more")),
+            onSearch: l[1] || (l[1] = (o) => e.$emit("search", o))
+          }, E({
+            menu: r(() => [
+              c(e.$slots, "menu")
+            ]),
+            item: r((o) => [
+              c(e.$slots, "item", k(w(o)))
+            ]),
+            _: 2
+          }, [
+            e.$slots.header ? {
+              name: "header",
+              fn: r(() => [
+                c(e.$slots, "header")
+              ]),
+              key: "0"
+            } : void 0,
+            e.$slots.footer ? {
+              name: "footer",
+              fn: r(() => [
+                c(e.$slots, "footer")
+              ]),
+              key: "1"
+            } : void 0
+          ]), 1032, ["options", "cachedOptions", "class", "selected", "selectedIndex", "maxHeight", "nestedPosition", "nestedOffset", "selectable", "layout", "columns", "loading", "hasMore", "searchable", "remote"])) : U("", !0)
+        ]),
+        _: 3
+      }, 8, ["teleport", "offset", "placement", "isOpen", "menuId", "ignoreClickOutside", "className"]),
+      C(J, {
+        show: m.value,
+        title: s.value.title,
+        description: s.value.description,
+        "confirm-text": s.value.confirmText,
+        "cancel-text": s.value.cancelText,
+        variant: s.value.variant,
+        onConfirm: M,
+        onCancel: H
+      }, null, 8, ["show", "title", "description", "confirm-text", "cancel-text", "variant"])
+    ]));
+  }
+});
+export {
+  ae as default
+};

package/components/Dropdown/Dropdown.vue2.js

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

package/components/Dropdown/DropdownGroupedLayout.vue.d.ts

@@ -0,0 +1,21 @@
+import { IDropdownOptions, IDropdownOption } from '../../types';
+interface Props {
+    options: IDropdownOptions;
+    selected?: any;
+    selectable?: boolean;
+    columns?: number | string;
+    itemsClass?: string;
+    headerClass?: string;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    select: (option: IDropdownOption) => any;
+    mouseenter: (payload: any) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onSelect?: (option: IDropdownOption) => any;
+    onMouseenter?: (payload: any) => any;
+}>, {
+    options: IDropdownOptions;
+    selectable: boolean;
+    columns: number | string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/components/Dropdown/DropdownGroupedLayout.vue.js

@@ -0,0 +1,73 @@
+import { defineComponent as v, computed as _, openBlock as t, createElementBlock as n, normalizeStyle as C, Fragment as a, renderList as i, createElementVNode as m, normalizeClass as $, toDisplayString as h, createBlock as d, createCommentVNode as f, createVNode as w } from "vue";
+import B from "../Icon.vue.js";
+import y from "./DropdownItem.vue.js";
+const N = { class: "font-semibold text-sm text-foreground" }, S = { class: "flex flex-col space-y-1" }, V = {
+  key: 0,
+  class: "flex flex-col space-y-1 ml-3 pl-3 border-l border-border mt-0.5 mb-1.5"
+}, g = {
+  key: 1,
+  class: "px-2 text-xs text-muted-foreground italic"
+}, j = /* @__PURE__ */ v({
+  __name: "DropdownGroupedLayout",
+  props: {
+    options: { default: () => [] },
+    selected: {},
+    selectable: { type: Boolean, default: !0 },
+    columns: { default: 3 },
+    itemsClass: {},
+    headerClass: {}
+  },
+  emits: ["select", "mouseenter"],
+  setup(o, { emit: z }) {
+    const l = o, k = _(() => {
+      const e = l.columns;
+      return typeof e == "number" ? { gridTemplateColumns: `repeat(${e}, minmax(0, 1fr))` } : { gridTemplateColumns: e };
+    }), u = (e) => l.selected ? Array.isArray(l.selected) ? l.selected.includes(e.value) : typeof l.selected == "object" && l.selected !== null && e.key && e.key in l.selected ? l.selected[e.key] === e.value : l.selected === e.value : !1;
+    return (e, A) => (t(), n("div", {
+      class: "grid gap-6 p-4",
+      style: C(k.value)
+    }, [
+      (t(!0), n(a, null, i(o.options, (s, p) => (t(), n("div", {
+        key: s.key || s.value || p,
+        class: "flex flex-col space-y-2 min-w-[150px]"
+      }, [
+        m("div", {
+          class: $(["flex items-center gap-2 px-2 py-1 mb-1", o.headerClass])
+        }, [
+          m("span", N, h(s.label), 1),
+          s.icon ? (t(), d(B, {
+            key: 0,
+            icon: s.icon,
+            class: "w-4 h-4 text-muted-foreground"
+          }, null, 8, ["icon"])) : f("", !0)
+        ], 2),
+        m("div", S, [
+          s.children && s.children.length ? (t(!0), n(a, { key: 0 }, i(s.children, (c, x) => (t(), n(a, {
+            key: c.key || c.value || x
+          }, [
+            w(y, {
+              option: c,
+              selected: u(c),
+              selectable: o.selectable,
+              class: "w-full",
+              onClick: (r) => e.$emit("select", c)
+            }, null, 8, ["option", "selected", "selectable", "onClick"]),
+            c.children && c.children.length ? (t(), n("div", V, [
+              (t(!0), n(a, null, i(c.children, (r, b) => (t(), d(y, {
+                key: r.key || r.value || b,
+                option: r,
+                selected: u(r),
+                selectable: o.selectable,
+                class: "w-full text-xs",
+                onClick: (D) => e.$emit("select", r)
+              }, null, 8, ["option", "selected", "selectable", "onClick"]))), 128))
+            ])) : f("", !0)
+          ], 64))), 128)) : (t(), n("div", g, " No items "))
+        ])
+      ]))), 128))
+    ], 4));
+  }
+});
+export {
+  j as default
+};