@nhealth/nutils 0.0.2

package/dist/runtime/app/components/ComponentRouter.vue

@@ -0,0 +1,26 @@
+<template>
+  <slot
+    :component="component"
+    :route="route"
+    :push="push"
+  />
+</template>
+
+<script setup>
+import { useComponentRouter } from "#imports";
+const props = defineProps({
+  routes: { type: [Array, Object], required: true },
+  base: { type: String, required: false, default: "fp" },
+  mode: { type: String, required: false, default: "query" },
+  initial: { type: String, required: false },
+  debug: { type: Boolean, required: false, default: false }
+});
+const { component, route, push, replace } = useComponentRouter({
+  routes: props.routes,
+  base: props.base,
+  mode: props.mode,
+  initial: props.initial,
+  debug: props.debug
+});
+defineExpose({ push, replace, route });
+</script>

package/dist/runtime/app/components/ComponentRouter.vue.d.ts

@@ -0,0 +1,50 @@
+import { type Component } from '#imports';
+type AsyncComponentLoader = () => Promise<Component | {
+    default: Component;
+}>;
+type ComponentRouteRecord = {
+    path: string;
+    component: Component | AsyncComponentLoader;
+    name?: string;
+};
+type ComponentRouterMode = 'query' | 'hash' | 'memory';
+type __VLS_Props = {
+    routes: ComponentRouteRecord[] | Record<string, Component | AsyncComponentLoader>;
+    base?: string;
+    mode?: ComponentRouterMode;
+    initial?: string;
+    debug?: boolean;
+};
+declare var __VLS_1: {
+    component: Component;
+    route: {
+        path: string;
+        params: Record<string, string>;
+        query: Record<string, string | string[]>;
+    };
+    push: (path: string) => Promise<void>;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    push: (path: string) => Promise<void>;
+    replace: (path: string) => Promise<void>;
+    route: import("vue").ShallowRef<{
+        path: string;
+        params: Record<string, string>;
+        query: Record<string, string | string[]>;
+    }>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    base: string;
+    mode: ComponentRouterMode;
+    debug: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/ComponentShell.d.vue.ts

@@ -0,0 +1,28 @@
+import type { NavigationMenuItem } from '@nuxt/ui';
+type __VLS_Props = {
+    orientation?: 'horizontal' | 'vertical';
+    items?: NavigationMenuItem[][];
+    activeMatch?: 'exact' | 'prefix';
+    pageOffset?: string | number;
+};
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {};
+type __VLS_Slots = {} & {
+    leading?: (props: typeof __VLS_1) => any;
+} & {
+    trailing?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    orientation: "horizontal" | "vertical";
+    activeMatch: "exact" | "prefix";
+    pageOffset: string | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/ComponentShell.vue

@@ -0,0 +1,95 @@
+<template>
+  <section class="h-full">
+    <!-- Layout container switches between column (horizontal nav top) and row (vertical nav left) -->
+    <div
+      :class="
+  orientation === 'vertical' ? 'flex h-full' : 'flex flex-col w-full'
+"
+      :style="containerStyle"
+    >
+      <!-- Navigation using UNavigationMenu -->
+      <div
+        :class="[
+  'border-gray-200',
+  orientation === 'vertical' ? 'flex flex-col min-w-[256px] border-r' : 'flex border-b'
+]"
+      >
+        <slot name="leading" />
+        <UNavigationMenu
+          :items="navigationItems"
+          :orientation="orientation"
+          content-orientation="vertical"
+          :class="orientation === 'horizontal' ? 'flex-1 px-4' : 'flex-1 py-4 px-2'"
+        />
+        <slot name="trailing" />
+      </div>
+
+      <!-- Main Content -->
+      <div
+        class="flex-1 min-h-0 overflow-y-auto overflow-x-hidden"
+      >
+        <slot />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useComponentRouter } from "#imports";
+const props = defineProps({
+  orientation: { type: String, required: false, default: "horizontal" },
+  items: { type: Array, required: false },
+  activeMatch: { type: String, required: false, default: "prefix" },
+  pageOffset: { type: [String, Number], required: false, default: 0 }
+});
+const router = useComponentRouter();
+const containerStyle = computed(() => {
+  const offset = props.pageOffset;
+  const offsetValue = typeof offset === "string" ? offset : `${offset}px`;
+  return `height: calc(100vh - ${offsetValue})`;
+});
+const navigationItems = computed(() => {
+  if (!props.items) return [];
+  const transformItem = (item) => {
+    const path = item.path;
+    const transformed = {
+      ...item,
+      onSelect: (e) => {
+        e.preventDefault();
+        if (path) {
+          router.push(path);
+        }
+        if (item.onSelect) {
+          item.onSelect(e);
+        }
+      },
+      active: path ? isActive(path) : item.active
+    };
+    if (item.children) {
+      if (Array.isArray(item.children[0]) && Array.isArray(item.children[0][0])) {
+        transformed.children = item.children.map(
+          (childGroup) => childGroup.map(transformItem)
+        );
+      } else {
+        transformed.children = item.children.map(transformItem);
+      }
+    }
+    return transformed;
+  };
+  return props.items.map(
+    (group) => group.map(transformItem)
+  );
+});
+function isActive(path) {
+  if (!path) return false;
+  const current = router.route?.value?.path || "";
+  if (props.activeMatch === "prefix") return isPrefixActive(current, path);
+  return current === path;
+}
+function isPrefixActive(current, base) {
+  if (base === "/") return current === "/";
+  if (current === base) return true;
+  return current.startsWith(base.endsWith("/") ? base : base + "/");
+}
+</script>

package/dist/runtime/app/components/ComponentShell.vue.d.ts

@@ -0,0 +1,28 @@
+import type { NavigationMenuItem } from '@nuxt/ui';
+type __VLS_Props = {
+    orientation?: 'horizontal' | 'vertical';
+    items?: NavigationMenuItem[][];
+    activeMatch?: 'exact' | 'prefix';
+    pageOffset?: string | number;
+};
+declare var __VLS_1: {}, __VLS_8: {}, __VLS_10: {};
+type __VLS_Slots = {} & {
+    leading?: (props: typeof __VLS_1) => any;
+} & {
+    trailing?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    orientation: "horizontal" | "vertical";
+    activeMatch: "exact" | "prefix";
+    pageOffset: string | number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/ConfirmModal.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/ConfirmModal.vue

@@ -0,0 +1,163 @@
+<template>
+  <UModal
+    v-model:open="state.open"
+    :ui="{ content: 'max-w-md' }"
+    @update:open="onOpenUpdate"
+  >
+    <!-- Header with Icon -->
+    <template #header>
+      <div class="flex items-start gap-3">
+        <div
+          v-if="opts.icon"
+          class="shrink-0 rounded-full p-2 w-10 h-10 flex items-center justify-center"
+          :class="iconColorClasses"
+        >
+          <UIcon
+            :name="opts.icon"
+            class="size-5"
+          />
+        </div>
+        <div class="flex-1 min-w-0 self-center">
+          <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100">
+            {{ opts.title || "Confirm" }}
+          </h3>
+        </div>
+      </div>
+    </template>
+
+    <!-- Body -->
+    <template #body>
+      <div class="space-y-4">
+        <!-- Description or text -->
+        <div
+          v-if="opts.description || opts.text"
+          class="space-y-2"
+        >
+          <p class="text-sm text-gray-600 dark:text-gray-400">
+            {{ opts.description || opts.text }}
+          </p>
+        </div>
+
+        <!-- Bullet list items -->
+        <ul
+          v-if="opts.items && opts.items.length > 0"
+          class="space-y-2 text-sm text-gray-600 dark:text-gray-400"
+        >
+          <li
+            v-for="(item, index) in opts.items"
+            :key="index"
+            class="flex items-start gap-2"
+          >
+            <UIcon
+              name="i-lucide-circle"
+              class="size-1.5 mt-1.5 shrink-0"
+            />
+            <span>{{ item }}</span>
+          </li>
+        </ul>
+
+        <!-- Warning message -->
+        <p
+          v-if="opts.warning"
+          class="text-sm font-medium text-amber-600 dark:text-amber-400"
+        >
+          {{ opts.warning }}
+        </p>
+
+        <!-- Input validation gate -->
+        <div v-if="opts.requireInputEquals">
+          <UFormField
+            :label="opts.inputLabel || 'Type to confirm'"
+            :help="inputHelp"
+          >
+            <UInput
+              v-model="state.confirmInput"
+              :placeholder="opts.inputPlaceholder || ''"
+            />
+          </UFormField>
+        </div>
+
+        <!-- Checkbox validation gate -->
+        <div v-if="opts.requireCheckbox">
+          <UCheckbox
+            v-model="state.confirmChecked"
+            :label="opts.checkboxLabel || 'I understand and want to continue'"
+          />
+        </div>
+      </div>
+    </template>
+
+    <!-- Footer with actions -->
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <UButton
+          :label="opts.cancelLabel || 'Cancel'"
+          :color="opts.cancelColor || 'neutral'"
+          :variant="opts.cancelVariant || 'subtle'"
+          :autofocus="opts.autofocus === 'cancel'"
+          :disabled="state.loading"
+          @click="actions.onCancel()"
+        />
+
+        <UButton
+          :label="opts.confirmLabel || 'Confirm'"
+          :color="(opts.dangerous ? 'error' : opts.confirmColor) || 'primary'"
+          :variant="opts.confirmVariant || 'solid'"
+          :disabled="confirmDisabled"
+          :autofocus="opts.autofocus === 'confirm'"
+          :loading="state.loading"
+          @click="actions.onConfirm()"
+        />
+      </div>
+    </template>
+  </UModal>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const state = useConfirmModalState();
+const actions = useConfirmModalActions();
+const opts = computed(() => {
+  const source = state.value.current?.options || state.value.renderOptions;
+  return source || {};
+});
+const iconColorClasses = computed(() => {
+  switch (opts.value.iconColor) {
+    case "error":
+      return "bg-red-50 dark:bg-red-950/50 text-red-600 dark:text-red-400";
+    case "warning":
+      return "bg-amber-50 dark:bg-amber-950/50 text-amber-600 dark:text-amber-400";
+    case "success":
+      return "bg-emerald-50 dark:bg-emerald-950/50 text-emerald-600 dark:text-emerald-400";
+    case "info":
+      return "bg-blue-50 dark:bg-blue-950/50 text-blue-600 dark:text-blue-400";
+    default:
+      return "bg-primary-50 dark:bg-primary-950/50 text-primary-600 dark:text-primary-400";
+  }
+});
+const inputHelp = computed(() => {
+  if (opts.value?.inputHint)
+    return opts.value.inputHint;
+  if (opts.value?.requireInputEquals) {
+    return `Type "${opts.value.requireInputEquals}" to enable confirm`;
+  }
+  return void 0;
+});
+const confirmDisabled = computed(() => {
+  const o = opts.value;
+  if (!o)
+    return true;
+  if (o.requireInputEquals && state.value.confirmInput !== o.requireInputEquals)
+    return true;
+  if (o.requireCheckbox && !state.value.confirmChecked)
+    return true;
+  if (state.value.loading)
+    return true;
+  return false;
+});
+function onOpenUpdate(v) {
+  if (!v && state.value.current) {
+    actions.onClosedExternally();
+  }
+}
+</script>

package/dist/runtime/app/components/ConfirmModal.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/LiveIndicator.d.vue.ts

@@ -0,0 +1,9 @@
+type Status = 'connected' | 'reconnecting' | 'offline';
+interface Props {
+    status?: Status;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    status: Status;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/LiveIndicator.vue

@@ -0,0 +1,43 @@
+<template>
+  <div
+    class="inline-flex items-center gap-2 px-2.5 py-1.5 rounded-full text-xs font-medium transition-colors"
+    :class="statusClasses"
+  >
+    <div
+      class="w-2 h-2 rounded-full"
+      :class="dotClasses"
+    />
+    <span>{{ statusText }}</span>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  status: { type: String, required: false, default: "offline" }
+});
+const statusClasses = computed(() => {
+  const classes = {
+    connected: "bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300",
+    reconnecting: "bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300",
+    offline: "bg-gray-100 dark:bg-gray-900 text-gray-600 dark:text-gray-400"
+  };
+  return classes[props.status];
+});
+const dotClasses = computed(() => {
+  const classes = {
+    connected: "bg-emerald-500 animate-pulse",
+    reconnecting: "bg-amber-500 animate-pulse",
+    offline: "bg-gray-400"
+  };
+  return classes[props.status];
+});
+const statusText = computed(() => {
+  const texts = {
+    connected: "Live",
+    reconnecting: "Reconnecting",
+    offline: "Offline"
+  };
+  return texts[props.status];
+});
+</script>

package/dist/runtime/app/components/LiveIndicator.vue.d.ts

@@ -0,0 +1,9 @@
+type Status = 'connected' | 'reconnecting' | 'offline';
+interface Props {
+    status?: Status;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    status: Status;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/StatCard.d.vue.ts

@@ -0,0 +1,15 @@
+type Variant = 'gray' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+interface Props {
+    label: string;
+    value: number | string;
+    icon?: string;
+    description?: string;
+    variant?: Variant;
+    trend?: 'up' | 'down' | 'neutral';
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    variant: Variant;
+    trend: "up" | "down" | "neutral";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/StatCard.vue

@@ -0,0 +1,99 @@
+<template>
+  <div
+    class="rounded-lg border p-4 transition-all hover:shadow-md"
+    :class="[variantClasses, 'border-gray-200 dark:border-gray-800']"
+  >
+    <div class="flex items-start justify-between gap-3">
+      <div class="flex-1">
+        <p
+          class="text-xs font-semibold uppercase tracking-widest"
+          :class="labelColor"
+        >
+          {{ label }}
+        </p>
+        <p class="text-3xl font-bold mt-2 tracking-tight">
+          {{ formatValue(value) }}
+        </p>
+        <p
+          v-if="description"
+          class="text-xs mt-2"
+          :class="descriptionColor"
+        >
+          {{ description }}
+        </p>
+      </div>
+      <div
+        v-if="icon"
+        class="flex-shrink-0"
+      >
+        <UIcon
+          :name="icon"
+          class="w-6 h-6"
+          :class="iconColor"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  label: { type: String, required: true },
+  value: { type: [Number, String], required: true },
+  icon: { type: String, required: false },
+  description: { type: String, required: false },
+  variant: { type: String, required: false, default: "gray" },
+  trend: { type: String, required: false, default: "neutral" }
+});
+const variantClasses = computed(() => {
+  const variants = {
+    gray: "bg-gray-50 dark:bg-gray-900/50",
+    primary: "bg-primary-50 dark:bg-primary-900/20",
+    success: "bg-emerald-50 dark:bg-emerald-900/20",
+    warning: "bg-amber-50 dark:bg-amber-900/20",
+    error: "bg-red-50 dark:bg-red-900/20",
+    info: "bg-blue-50 dark:bg-blue-900/20"
+  };
+  return variants[props.variant];
+});
+const labelColor = computed(() => {
+  const colors = {
+    gray: "text-gray-600 dark:text-gray-400",
+    primary: "text-primary-600 dark:text-primary-400",
+    success: "text-emerald-600 dark:text-emerald-400",
+    warning: "text-amber-600 dark:text-amber-400",
+    error: "text-red-600 dark:text-red-400",
+    info: "text-blue-600 dark:text-blue-400"
+  };
+  return colors[props.variant];
+});
+const descriptionColor = computed(() => {
+  const colors = {
+    gray: "text-gray-500 dark:text-gray-500",
+    primary: "text-primary-600 dark:text-primary-400",
+    success: "text-emerald-600 dark:text-emerald-400",
+    warning: "text-amber-600 dark:text-amber-400",
+    error: "text-red-600 dark:text-red-400",
+    info: "text-blue-600 dark:text-blue-400"
+  };
+  return colors[props.variant];
+});
+const iconColor = computed(() => {
+  const colors = {
+    gray: "text-gray-400 dark:text-gray-600",
+    primary: "text-primary-500",
+    success: "text-emerald-500",
+    warning: "text-amber-500",
+    error: "text-red-500",
+    info: "text-blue-500"
+  };
+  return colors[props.variant];
+});
+function formatValue(value) {
+  if (typeof value === "string") return value;
+  if (value >= 1e6) return `${(value / 1e6).toFixed(1)}M`;
+  if (value >= 1e3) return `${(value / 1e3).toFixed(1)}K`;
+  return value.toString();
+}
+</script>

package/dist/runtime/app/components/StatCard.vue.d.ts

@@ -0,0 +1,15 @@
+type Variant = 'gray' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+interface Props {
+    label: string;
+    value: number | string;
+    icon?: string;
+    description?: string;
+    variant?: Variant;
+    trend?: 'up' | 'down' | 'neutral';
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    variant: Variant;
+    trend: "up" | "down" | "neutral";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/StatCounter.d.vue.ts

@@ -0,0 +1,11 @@
+type ColorVariant = 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+interface Props {
+    label: string;
+    count?: number;
+    color?: ColorVariant;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    color: ColorVariant;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/StatCounter.vue

@@ -0,0 +1,29 @@
+<template>
+  <div
+    class="rounded-lg border px-3 py-2 inline-flex flex-col gap-1 text-center transition-colors hover:bg-opacity-75"
+    :class="[variantClasses, 'border-current']"
+  >
+    <span class="text-xs font-semibold uppercase tracking-wider opacity-75">{{ label }}</span>
+    <span class="text-lg font-bold tabular-nums">{{ count ?? 0 }}</span>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  label: { type: String, required: true },
+  count: { type: Number, required: false },
+  color: { type: String, required: false, default: "neutral" }
+});
+const variantClasses = computed(() => {
+  const variants = {
+    neutral: "border-gray-400 dark:border-gray-600 bg-gray-50 dark:bg-gray-900/50 text-gray-700 dark:text-gray-300",
+    primary: "border-primary-400 dark:border-primary-600 bg-primary-50 dark:bg-primary-900/20 text-primary-700 dark:text-primary-300",
+    success: "border-emerald-400 dark:border-emerald-600 bg-emerald-50 dark:bg-emerald-900/20 text-emerald-700 dark:text-emerald-300",
+    warning: "border-amber-400 dark:border-amber-600 bg-amber-50 dark:bg-amber-900/20 text-amber-700 dark:text-amber-300",
+    error: "border-red-400 dark:border-red-600 bg-red-50 dark:bg-red-900/20 text-red-700 dark:text-red-300",
+    info: "border-blue-400 dark:border-blue-600 bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300"
+  };
+  return variants[props.color];
+});
+</script>

package/dist/runtime/app/components/StatCounter.vue.d.ts

@@ -0,0 +1,11 @@
+type ColorVariant = 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+interface Props {
+    label: string;
+    count?: number;
+    color?: ColorVariant;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    color: ColorVariant;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;