@brumaombra/ui-vintage 0.3.0 → 0.5.0

package/dist/button.js

@@ -1,4 +1,5 @@
 import { c as cva } from "./index-FpH8cK6B.js";
+import { a as getButtonVariantClasses } from "./color-tokens-D9BviGPK.js";
 import { defineComponent, openBlock, createBlock, unref, normalizeClass, withCtx, renderSlot } from "vue";
 import { P as Primitive } from "./Primitive-D3IcFg81.js";
 import { c as cn } from "./utils-Bz4m9VPB.js";
@@ -35,12 +36,15 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-(--button-primary-light) text-(--button-primary-foreground-light) hover:bg-(--button-primary-hover-light) dark:bg-(--button-primary-dark) dark:text-(--button-primary-foreground-dark) dark:hover:bg-(--button-primary-hover-dark)",
-        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "border border-(--border-light) bg-(--button-secondary-light) text-(--text-primary-light) hover:border-(--border-hover-light) hover:bg-(--bg-selected-light) dark:border-(--border-dark) dark:bg-(--button-secondary-dark) dark:text-(--text-primary-dark) dark:hover:border-(--border-hover-dark) dark:hover:bg-(--bg-selected-dark)",
-        secondary: "border border-(--border-light) bg-(--button-secondary-light) text-(--text-primary-light) hover:border-(--border-hover-light) hover:bg-(--bg-selected-light) dark:border-(--border-dark) dark:bg-(--button-secondary-dark) dark:text-(--text-primary-dark) dark:hover:border-(--border-hover-dark) dark:hover:bg-(--bg-selected-dark)",
-        ghost: "text-(--text-secondary-light) hover:bg-(--bg-selected-light) hover:text-(--text-primary-light) dark:text-(--text-secondary-dark) dark:hover:bg-(--bg-selected-dark) dark:hover:text-(--text-primary-dark)",
-        link: "text-primary underline-offset-4 hover:underline"
+        primary: getButtonVariantClasses("primary"),
+        secondary: getButtonVariantClasses("secondary"),
+        ghost: getButtonVariantClasses("ghost"),
+        link: getButtonVariantClasses("link"),
+        gray: getButtonVariantClasses("gray"),
+        green: getButtonVariantClasses("green"),
+        red: getButtonVariantClasses("red"),
+        blue: getButtonVariantClasses("blue"),
+        yellow: getButtonVariantClasses("yellow")
       },
       size: {
         "default": "min-h-12 px-4 py-3 has-[>svg]:px-3",
@@ -52,7 +56,7 @@ const buttonVariants = cva(
       }
     },
     defaultVariants: {
-      variant: "default",
+      variant: "primary",
       size: "default"
     }
   }

package/dist/calendar.js

@@ -1,4 +1,4 @@
-import { _, a, b, c, d, e, f, g, h, i, j, k } from "./CalendarPrevButton.vue_vue_type_script_setup_true_lang-BklOxtD-.js";
+import { _, a, b, c, d, e, f, g, h, i, j, k } from "./CalendarPrevButton.vue_vue_type_script_setup_true_lang-DdzS6YGM.js";
 export {
   _ as Calendar,
   a as CalendarCell,

package/dist/card-grid.js

@@ -0,0 +1,58 @@
+import { defineComponent, openBlock, createElementBlock, createBlock, unref, Fragment, renderList, renderSlot, createVNode, createCommentVNode } from "vue";
+import { u as u7 } from "./index.min-CZ9FIOXr.js";
+import { _ as _sfc_main$2 } from "./EmptyStateCard.vue_vue_type_script_setup_true_lang-BYKX6WRQ.js";
+import { _ as _sfc_main$3 } from "./LoadMoreButton.vue_vue_type_script_setup_true_lang-CGhFcsF-.js";
+import { _ as _sfc_main$1 } from "./LoadingStateCard.vue_vue_type_script_setup_true_lang-DwyQjtZ3.js";
+const _hoisted_1 = {
+  key: 2,
+  class: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6 xl:gap-4"
+};
+const _hoisted_2 = {
+  key: 3,
+  class: "flex justify-center mt-6"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "CardGrid",
+  props: {
+    items: { type: Array, default: () => [] },
+    busy: { type: Boolean, default: false },
+    loadMoreBusy: { type: Boolean, default: false },
+    hasMore: { type: Boolean, default: false },
+    emptyMessage: { type: String, required: true },
+    emptyIcon: { type: Object, default: () => u7 }
+  },
+  emits: ["load-more"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const handleLoadMore = () => {
+      emits("load-more");
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        props.busy ? (openBlock(), createBlock(unref(_sfc_main$1), { key: 0 })) : !props.items || props.items.length === 0 ? (openBlock(), createBlock(unref(_sfc_main$2), {
+          key: 1,
+          description: props.emptyMessage,
+          icon: props.emptyIcon
+        }, null, 8, ["description", "icon"])) : (openBlock(), createElementBlock("div", _hoisted_1, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(props.items, (item) => {
+            return renderSlot(_ctx.$slots, "card", {
+              item,
+              key: item.id
+            });
+          }), 128))
+        ])),
+        props.hasMore || props.loadMoreBusy && props.items.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          createVNode(unref(_sfc_main$3), {
+            busy: props.loadMoreBusy,
+            onLoadMore: handleLoadMore
+          }, null, 8, ["busy"])
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as CardGrid,
+  _sfc_main as default
+};

package/dist/card.js

@@ -1,7 +1,9 @@
-import { _ } from "./Card.vue_vue_type_script_setup_true_lang-6ol3rxy1.js";
+import { _ } from "./Card.vue_vue_type_script_setup_true_lang-D0pFVflK.js";
 import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, renderSlot } from "vue";
 import { c as cn } from "./utils-Bz4m9VPB.js";
-import { _ as _2, a } from "./CardFooter.vue_vue_type_script_setup_true_lang-B1eS9wge.js";
+import { _ as _2 } from "./CardContent.vue_vue_type_script_setup_true_lang-dBzO0q1t.js";
+import { _ as _3 } from "./CardText.vue_vue_type_script_setup_true_lang-DbDhSd3h.js";
+import { _ as _4 } from "./CardFooter.vue_vue_type_script_setup_true_lang-B5EqgrgN.js";
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "CardAction",
   props: {
@@ -29,7 +31,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("p", {
         "data-slot": "card-description",
-        class: normalizeClass(unref(cn)("text-muted-foreground text-sm", props.class))
+        class: normalizeClass(unref(cn)("text-muted-foreground text-xs sm:text-sm", props.class))
       }, [
         renderSlot(_ctx.$slots, "default")
       ], 2);
@@ -46,7 +48,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         "data-slot": "card-header",
-        class: normalizeClass(unref(cn)("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", props.class))
+        class: normalizeClass(unref(cn)("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-3 sm:gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", props.class))
       }, [
         renderSlot(_ctx.$slots, "default")
       ], 2);
@@ -63,7 +65,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("h3", {
         "data-slot": "card-title",
-        class: normalizeClass(unref(cn)("leading-none font-semibold", props.class))
+        class: normalizeClass(unref(cn)("leading-none font-semibold text-sm sm:text-base", props.class))
       }, [
         renderSlot(_ctx.$slots, "default")
       ], 2);
@@ -75,7 +77,8 @@ export {
   _sfc_main$3 as CardAction,
   _2 as CardContent,
   _sfc_main$2 as CardDescription,
-  a as CardFooter,
+  _4 as CardFooter,
   _sfc_main$1 as CardHeader,
+  _3 as CardText,
   _sfc_main as CardTitle
 };

package/dist/chip.js

@@ -0,0 +1,47 @@
+import { defineComponent, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, toDisplayString, createVNode } from "vue";
+import { d as dp } from "./index.min-CZ9FIOXr.js";
+import { H as HugeiconsIcon } from "./HugeiconsIcon.vue-By2RXWWz.js";
+import { g as getSurfaceToneClasses } from "./color-tokens-D9BviGPK.js";
+import { c as cn } from "./utils-Bz4m9VPB.js";
+const _hoisted_1 = { class: "leading-none" };
+const _hoisted_2 = ["aria-label"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Chip",
+  props: {
+    text: {},
+    color: { default: "gray" },
+    removeLabel: { default: "Remove" },
+    class: {}
+  },
+  emits: ["remove"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const handleRemove = () => {
+      emits("remove");
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        "data-slot": "chip",
+        class: normalizeClass(unref(cn)("inline-flex items-center gap-2 rounded border px-3 py-2 text-sm font-semibold transition-colors duration-300 ease-in-out", unref(getSurfaceToneClasses)(props.color), props.class))
+      }, [
+        createElementVNode("span", _hoisted_1, toDisplayString(props.text), 1),
+        createElementVNode("button", {
+          type: "button",
+          "aria-label": props.removeLabel,
+          class: "inline-flex size-4 items-center justify-center rounded-sm opacity-70 transition-all duration-200 ease-in-out hover:bg-black/5 hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/20 dark:hover:bg-white/10",
+          onClick: handleRemove
+        }, [
+          createVNode(unref(HugeiconsIcon), {
+            icon: unref(dp),
+            class: "size-3"
+          }, null, 8, ["icon"])
+        ], 8, _hoisted_2)
+      ], 2);
+    };
+  }
+});
+export {
+  _sfc_main as Chip,
+  _sfc_main as default
+};

package/dist/color-tokens-D9BviGPK.js

@@ -0,0 +1,40 @@
+const surfaceToneClasses = {
+  gray: "border border-[var(--border-light)] bg-gray-50 text-[var(--text-primary-light)] dark:!border-[var(--border-dark)] dark:!bg-[var(--bg-card-dark)] dark:!text-[var(--text-primary-dark)]",
+  green: "border border-green-200 bg-green-50 text-green-700 dark:!border-green-800/50 dark:!bg-green-900/10 dark:!text-green-400",
+  red: "border border-red-200 bg-red-50 text-red-700 dark:!border-red-800/50 dark:!bg-red-900/10 dark:!text-red-400",
+  blue: "border border-blue-200 bg-blue-50 text-blue-700 dark:!border-blue-800/50 dark:!bg-blue-900/10 dark:!text-blue-400",
+  yellow: "border border-yellow-200 bg-yellow-50 text-yellow-700 dark:!border-yellow-800/50 dark:!bg-yellow-900/10 dark:!text-yellow-400"
+};
+const getSurfaceToneClasses = (color) => {
+  return surfaceToneClasses[color];
+};
+const interactiveSurfaceToneClasses = {
+  gray: `${surfaceToneClasses.gray} hover:bg-gray-100 dark:hover:!bg-[var(--bg-selected-dark)]`,
+  green: `${surfaceToneClasses.green} hover:bg-green-100 dark:hover:!bg-green-900/20`,
+  red: `${surfaceToneClasses.red} hover:bg-red-100 dark:hover:!bg-red-900/20`,
+  blue: `${surfaceToneClasses.blue} hover:bg-blue-100 dark:hover:!bg-blue-900/20`,
+  yellow: `${surfaceToneClasses.yellow} hover:bg-yellow-100 dark:hover:!bg-yellow-900/20`
+};
+const getInteractiveSurfaceToneClasses = (color) => {
+  return interactiveSurfaceToneClasses[color];
+};
+const buttonVariantClasses = {
+  // Custom button variants
+  primary: "bg-(--button-primary-light) text-(--button-primary-foreground-light) hover:bg-(--button-primary-hover-light) dark:!bg-(--button-primary-dark) dark:!text-(--button-primary-foreground-dark) dark:hover:!bg-(--button-primary-hover-dark)",
+  secondary: "border border-(--border-light) bg-(--button-secondary-light) text-(--text-primary-light) hover:border-(--border-hover-light) hover:bg-(--bg-selected-light) dark:!border-(--border-dark) dark:!bg-(--button-secondary-dark) dark:!text-(--text-primary-dark) dark:hover:!border-(--border-hover-dark) dark:hover:!bg-(--bg-selected-dark)",
+  ghost: "text-(--text-secondary-light) hover:bg-(--bg-selected-light) hover:text-(--text-primary-light) dark:!text-(--text-secondary-dark) dark:hover:!bg-(--bg-selected-dark) dark:hover:!text-(--text-primary-dark)",
+  link: "text-primary underline-offset-4 hover:underline",
+  // Tone-based button variants
+  gray: getInteractiveSurfaceToneClasses("gray"),
+  green: getInteractiveSurfaceToneClasses("green"),
+  red: getInteractiveSurfaceToneClasses("red"),
+  blue: getInteractiveSurfaceToneClasses("blue"),
+  yellow: getInteractiveSurfaceToneClasses("yellow")
+};
+const getButtonVariantClasses = (variant) => {
+  return buttonVariantClasses[variant];
+};
+export {
+  getButtonVariantClasses as a,
+  getSurfaceToneClasses as g
+};

package/dist/command.js

@@ -1,20 +1,24 @@
-import { c as createContext, u as useForwardPropsEmits, a as useForwardProps } from "./useForwardPropsEmits-DmumnZO5.js";
+import { c as createContext } from "./createContext-BabAT1K8.js";
 import { computed, unref, defineComponent, toRefs, ref, watch, nextTick, openBlock, createBlock, withCtx, renderSlot, createCommentVNode, createVNode, withKeys, withModifiers, watchSyncEffect, onMounted, onUnmounted, mergeProps, withMemo, reactive, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, createElementVNode, createElementBlock, normalizeClass } from "vue";
-import { i as isEqual, u as useTypeahead } from "./useTypeahead-KTl4-oeq.js";
-import { u as useDirection } from "./useDirection-SIyEYNxv.js";
-import { u as useFormControl } from "./useFormControl-CyoJwp9r.js";
+import { u as useForwardPropsEmits, a as useForwardProps } from "./useForwardPropsEmits-GlUGKcIz.js";
+import { i as isEqual, u as useTypeahead } from "./useTypeahead-4RK0Emcv.js";
+import { u as useDirection } from "./useDirection-B2bMgzzV.js";
+import { u as useFormControl } from "./useFormControl-DZ4LnB9F.js";
 import { u as useKbd } from "./useKbd-JjFOu4f7.js";
 import { P as Primitive } from "./Primitive-D3IcFg81.js";
-import { u as usePrimitiveElement } from "./usePrimitiveElement-Bk3ZOslv.js";
-import { u as useCollection } from "./Collection-Coi6nyvb.js";
-import { V as VisuallyHiddenInput_default } from "./VisuallyHiddenInput-1G1IEkBL.js";
-import { u as useVModel, e as useCurrentElement } from "./index-Cq9Ekgtb.js";
-import { o as createEventHook, g as refAutoReset, r as reactiveOmit } from "./index-qGMU40e1.js";
+import { u as usePrimitiveElement } from "./usePrimitiveElement-BCpwlakH.js";
+import { u as useCollection } from "./Collection-4P3HQ4uU.js";
+import { V as VisuallyHiddenInput_default } from "./VisuallyHiddenInput-D5eipDQU.js";
+import { g as getFocusIntent } from "./utils-hdwtyAF3.js";
+import { a as useVModel, f as useCurrentElement } from "./index-Dw56kNV0.js";
+import { o as createEventHook, g as refAutoReset, r as reactiveOmit } from "./index-DDJjWaIl.js";
 import { c as cn } from "./utils-Bz4m9VPB.js";
-import { _ as _sfc_main$9, a as _sfc_main$a, c as _sfc_main$b, e as _sfc_main$c, b as _sfc_main$d } from "./DialogTitle.vue_vue_type_script_setup_true_lang-BMXrxvBF.js";
-import { u as useId, h as handleAndDispatchCustomEvent } from "./Teleport-CV0tKbq5.js";
-import { H as HugeiconsIcon, p as pkr } from "./HugeiconsIcon.vue-BJ-_Wtmk.js";
-import { u as useForwardExpose } from "./useForwardExpose-BiRQH8eO.js";
+import { _ as _sfc_main$9, a as _sfc_main$a, c as _sfc_main$b, e as _sfc_main$c, b as _sfc_main$d } from "./DialogTitle.vue_vue_type_script_setup_true_lang-CycrzAMT.js";
+import { u as useId } from "./useId-CF6wz41D.js";
+import { p as pkr } from "./index.min-CZ9FIOXr.js";
+import { H as HugeiconsIcon } from "./HugeiconsIcon.vue-By2RXWWz.js";
+import { h as handleAndDispatchCustomEvent } from "./Teleport-DTOwRCqx.js";
+import { u as useForwardExpose } from "./useForwardExpose-BcX3VRdS.js";
 import { S as Separator_default } from "./Separator-CFm_M4pb.js";
 function findValuesBetween(array, start, end) {
   const startIndex = array.findIndex((i) => isEqual(i, start));
@@ -71,26 +75,6 @@ function compare(value, currentValue, comparator) {
   if (typeof comparator === "string") return (value == null ? void 0 : value[comparator]) === (currentValue == null ? void 0 : currentValue[comparator]);
   return isEqual(value, currentValue);
 }
-const MAP_KEY_TO_FOCUS_INTENT = {
-  ArrowLeft: "prev",
-  ArrowUp: "prev",
-  ArrowRight: "next",
-  ArrowDown: "next",
-  PageUp: "first",
-  Home: "first",
-  PageDown: "last",
-  End: "last"
-};
-function getDirectionAwareKey(key, dir) {
-  if (dir !== "rtl") return key;
-  return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
-}
-function getFocusIntent(event, orientation, dir) {
-  const key = getDirectionAwareKey(event.key, dir);
-  if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) return void 0;
-  if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)) return void 0;
-  return MAP_KEY_TO_FOCUS_INTENT[key];
-}
 const [injectListboxRootContext, provideListboxRootContext] = createContext("ListboxRoot");
 var ListboxRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
   __name: "ListboxRoot",

package/dist/components/card-grid/CardGrid.vue.d.ts

@@ -0,0 +1,88 @@
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        card?(_: {
+            item: unknown;
+            key: any;
+        }): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    items: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    busy: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loadMoreBusy: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasMore: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    emptyMessage: {
+        type: StringConstructor;
+        required: true;
+    };
+    emptyIcon: {
+        type: ObjectConstructor;
+        default: () => [string, {
+            [key: string]: string | number;
+        }][] | readonly (readonly [string, {
+            readonly [key: string]: string | number;
+        }])[];
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "load-more": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    items: {
+        type: ArrayConstructor;
+        default: () => never[];
+    };
+    busy: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loadMoreBusy: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hasMore: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    emptyMessage: {
+        type: StringConstructor;
+        required: true;
+    };
+    emptyIcon: {
+        type: ObjectConstructor;
+        default: () => [string, {
+            [key: string]: string | number;
+        }][] | readonly (readonly [string, {
+            readonly [key: string]: string | number;
+        }])[];
+    };
+}>> & Readonly<{
+    "onLoad-more"?: ((...args: any[]) => any) | undefined;
+}>, {
+    busy: boolean;
+    items: unknown[];
+    loadMoreBusy: boolean;
+    hasMore: boolean;
+    emptyIcon: Record<string, any>;
+}, {}, {}, {}, 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/dist/components/card-grid/index.d.ts

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

package/dist/components/chip/Chip.vue.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from 'vue';
+import { ToneColor } from '../../lib/color-tokens';
+type __VLS_Props = {
+    text: string;
+    color?: ToneColor;
+    removeLabel?: string;
+    class?: HTMLAttributes["class"];
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    remove: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRemove?: (() => any) | undefined;
+}>, {
+    color: ToneColor;
+    removeLabel: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/chip/index.d.ts

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

package/dist/components/confirm-dialog/confirm-dialog-state.d.ts

@@ -1,5 +1,8 @@
-import { Component } from 'vue';
-export type DialogButtonVariant = "default" | "outline" | "ghost";
+import { ButtonVariants } from '../ui/button';
+export type DialogButtonVariant = NonNullable<ButtonVariants["variant"]>;
+export type HugeiconsIconDefinition = readonly (readonly [string, {
+    readonly [key: string]: string | number;
+}])[];
 export interface ShowConfirmDialogOptions {
     title?: string;
     message: string;
@@ -7,18 +10,18 @@ export interface ShowConfirmDialogOptions {
     cancelText?: string;
     confirmButtonType?: DialogButtonVariant;
     cancelButtonType?: DialogButtonVariant;
-    icon?: Component | null;
-    confirmButtonIcon?: Component | null;
-    cancelButtonIcon?: Component | null;
+    icon?: HugeiconsIconDefinition | null;
+    confirmButtonIcon?: HugeiconsIconDefinition | null;
+    cancelButtonIcon?: HugeiconsIconDefinition | null;
     onConfirm?: (() => void | Promise<void>) | null;
     onCancel?: (() => void | Promise<void>) | null;
 }
 interface ConfirmDialogRequest {
     id: number;
     options: Required<Omit<ShowConfirmDialogOptions, "icon" | "confirmButtonIcon" | "cancelButtonIcon" | "onConfirm" | "onCancel">> & {
-        icon: Component | null;
-        confirmButtonIcon: Component | null;
-        cancelButtonIcon: Component | null;
+        icon: HugeiconsIconDefinition | null;
+        confirmButtonIcon: HugeiconsIconDefinition | null;
+        cancelButtonIcon: HugeiconsIconDefinition | null;
         onConfirm: (() => void | Promise<void>) | null;
         onCancel: (() => void | Promise<void>) | null;
     };

package/dist/components/dashboard-shell/DashboardShell.vue.d.ts

@@ -1,9 +1,12 @@
 import { Component, HTMLAttributes } from 'vue';
+type HugeiconsIconDefinition = readonly (readonly [string, {
+    readonly [key: string]: string | number;
+}])[];
 interface DashboardSidebarItem {
     id: string;
     label: string;
     description?: string;
-    icon?: Component | string;
+    icon?: HugeiconsIconDefinition | null;
     href?: string;
     to?: unknown;
     active?: boolean;
@@ -15,6 +18,9 @@ interface DashboardSidebarSection {
     items: DashboardSidebarItem[];
 }
 interface DashboardShellProps {
+    appName?: string;
+    appLogo?: string;
+    appLinkTo?: string;
     title?: string;
     description?: string;
     collapsible?: "offcanvas" | "icon" | "none";
@@ -33,6 +39,7 @@ declare function __VLS_template(): {
         'topbar-leading'?(_: {}): any;
         'topbar-trailing'?(_: {}): any;
         default?(_: {}): any;
+        footer?(_: {}): any;
     };
     refs: {};
     rootEl: any;
@@ -40,8 +47,11 @@ declare function __VLS_template(): {
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<DashboardShellProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<DashboardShellProps> & Readonly<{}>, {
     title: string;
-    collapsible: "offcanvas" | "icon" | "none";
     description: string;
+    collapsible: "offcanvas" | "icon" | "none";
+    appName: string;
+    appLogo: string;
+    appLinkTo: string;
     sidebarSections: DashboardSidebarSection[];
     sidebarLinkComponent: Component | string;
     showBackground: boolean;

package/dist/components/data-list/DataList.vue.d.ts

@@ -0,0 +1,21 @@
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes["class"];
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLTableElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLTableElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/data-list/DataListItem.vue.d.ts

@@ -0,0 +1,21 @@
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes["class"];
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLTableRowElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLTableRowElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/data-list/DataListLabel.vue.d.ts

@@ -0,0 +1,21 @@
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes["class"];
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLTableCellElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLTableCellElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/data-list/DataListText.vue.d.ts

@@ -0,0 +1,21 @@
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes["class"];
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): 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, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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/dist/components/data-list/DataListValue.vue.d.ts

@@ -0,0 +1,21 @@
+import { HTMLAttributes } from 'vue';
+type __VLS_Props = {
+    class?: HTMLAttributes["class"];
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLTableCellElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLTableCellElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/data-list/index.d.ts

@@ -0,0 +1,5 @@
+export { default as DataList } from './DataList.vue';
+export { default as DataListItem } from './DataListItem.vue';
+export { default as DataListLabel } from './DataListLabel.vue';
+export { default as DataListText } from './DataListText.vue';
+export { default as DataListValue } from './DataListValue.vue';