minm-ui 1.0.0 → 1.0.1

package/dist/types.d.ts

@@ -0,0 +1,9 @@
+/** Shared UI types. */
+export interface Column {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    align?: 'left' | 'right' | 'center';
+    width?: string;
+    class?: string;
+}

package/package.json

@@ -1,15 +1,41 @@
 {
   "name": "minm-ui",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": false,
   "type": "module",
   "description": "Minm UI shared design system — tokens + Vue 3 components.",
+  "style": "./dist/minm-ui.css",
+  "main": "./dist/minm-ui.js",
+  "module": "./dist/minm-ui.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "tailwind-preset.cjs",
+    "README.md"
+  ],
   "exports": {
-    ".": "./src/index.ts",
-    "./styles.css": "./src/styles/tokens.css",
+    ".": {
+      "import": "./dist/minm-ui.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles.css": "./dist/minm-ui.css",
     "./tailwind-preset": "./tailwind-preset.cjs"
   },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "prepack": "npm run build"
+  },
   "peerDependencies": {
     "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.0",
+    "@vue/tsconfig": "^0.9.1",
+    "typescript": "^5.9.0",
+    "vite": "^8.1.4",
+    "vite-plugin-dts": "^5.0.3",
+    "vue": "^3.5.0",
+    "vue-tsc": "^3.3.7"
   }
 }

package/src/components/UiAreaChart.vue

@@ -1,117 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-
-interface Point { label: string; value: number }
-
-const props = withDefaults(defineProps<{
-  data: Point[];
-  height?: number;
-  format?: (v: number) => string;
-}>(), { height: 220 });
-
-const W = 1000;
-const H = computed(() => props.height);
-const padTop = 12;
-const padBottom = 26;
-const padX = 8;
-
-const max = computed(() => Math.max(1, ...props.data.map((d) => d.value)));
-
-const coords = computed(() => {
-  const n = props.data.length;
-  const innerW = W - padX * 2;
-  const innerH = H.value - padTop - padBottom;
-  return props.data.map((d, i) => {
-    const x = n <= 1 ? W / 2 : padX + (i / (n - 1)) * innerW;
-    const y = padTop + innerH - (d.value / max.value) * innerH;
-    return { x, y, ...d };
-  });
-});
-
-const linePath = computed(() =>
-  coords.value.map((c, i) => `${i === 0 ? 'M' : 'L'} ${c.x.toFixed(1)} ${c.y.toFixed(1)}`).join(' '),
-);
-
-const areaPath = computed(() => {
-  if (!coords.value.length) return '';
-  const baseline = H.value - padBottom;
-  const first = coords.value[0];
-  const last = coords.value[coords.value.length - 1];
-  return `M ${first.x} ${baseline} ${coords.value.map((c) => `L ${c.x.toFixed(1)} ${c.y.toFixed(1)}`).join(' ')} L ${last.x} ${baseline} Z`;
-});
-
-const gridLines = computed(() => {
-  const innerH = H.value - padTop - padBottom;
-  return [0, 0.25, 0.5, 0.75, 1].map((t) => padTop + innerH * t);
-});
-
-const uid = Math.random().toString(36).slice(2, 8);
-const hover = ref<number | null>(null);
-const fmt = (v: number) => (props.format ? props.format(v) : String(v));
-// Show a subset of x labels to avoid crowding.
-const labelEvery = computed(() => Math.ceil(props.data.length / 6));
-</script>
-
-<template>
-  <div class="relative w-full">
-    <svg :viewBox="`0 0 ${W} ${H}`" :height="H" width="100%" preserveAspectRatio="none" class="overflow-visible">
-      <defs>
-        <linearGradient :id="`area-${uid}`" x1="0" y1="0" x2="0" y2="1">
-          <stop offset="0%" stop-color="var(--accent)" stop-opacity="0.22" />
-          <stop offset="100%" stop-color="var(--accent)" stop-opacity="0" />
-        </linearGradient>
-      </defs>
-
-      <!-- faint grid -->
-      <line
-        v-for="(y, i) in gridLines"
-        :key="i"
-        :x1="padX" :x2="W - padX" :y1="y" :y2="y"
-        stroke="var(--border)" stroke-width="1" vector-effect="non-scaling-stroke"
-        :stroke-dasharray="i === gridLines.length - 1 ? '0' : '3 4'"
-      />
-
-      <path :d="areaPath" :fill="`url(#area-${uid})`" />
-      <path :d="linePath" fill="none" stroke="var(--accent)" stroke-width="2.5"
-        vector-effect="non-scaling-stroke" stroke-linejoin="round" stroke-linecap="round" />
-
-      <!-- emphasized endpoint -->
-      <circle
-        v-if="coords.length"
-        :cx="coords[coords.length - 1].x" :cy="coords[coords.length - 1].y" r="4"
-        fill="var(--accent)" stroke="var(--surface)" stroke-width="2" vector-effect="non-scaling-stroke"
-      />
-
-      <!-- hover hit-areas + markers -->
-      <g v-for="(c, i) in coords" :key="`h-${i}`">
-        <circle
-          v-if="hover === i" :cx="c.x" :cy="c.y" r="4"
-          fill="var(--surface)" stroke="var(--accent)" stroke-width="2" vector-effect="non-scaling-stroke"
-        />
-        <rect
-          :x="c.x - (W / coords.length) / 2" :y="0" :width="W / coords.length" :height="H"
-          fill="transparent" @mouseenter="hover = i" @mouseleave="hover = null"
-        />
-      </g>
-    </svg>
-
-    <!-- x labels -->
-    <div class="mt-1 flex justify-between px-1">
-      <span
-        v-for="(d, i) in data" :key="i"
-        class="text-[11px] text-subtle"
-        :style="{ visibility: i % labelEvery === 0 || i === data.length - 1 ? 'visible' : 'hidden' }"
-      >{{ d.label }}</span>
-    </div>
-
-    <!-- tooltip -->
-    <div
-      v-if="hover !== null"
-      class="pointer-events-none absolute -translate-x-1/2 -translate-y-full rounded-md border border-border bg-surface px-2.5 py-1.5 text-xs shadow-md"
-      :style="{ left: `${(coords[hover].x / W) * 100}%`, top: `${(coords[hover].y / H) * 100}%` }"
-    >
-      <p class="font-semibold text-content tabular">{{ fmt(coords[hover].value) }}</p>
-      <p class="text-subtle">{{ coords[hover].label }}</p>
-    </div>
-  </div>
-</template>

package/src/components/UiBadge.vue

@@ -1,34 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-
-const props = withDefaults(defineProps<{
-  variant?: 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'accent';
-  dot?: boolean;
-}>(), { variant: 'neutral' });
-
-const styles: Record<string, string> = {
-  neutral: 'bg-surface-2 text-muted border-border',
-  success: 'bg-success-bg text-success border-transparent',
-  warning: 'bg-warning-bg text-warning border-transparent',
-  danger: 'bg-danger-bg text-danger border-transparent',
-  info: 'bg-info-bg text-info border-transparent',
-  accent: 'bg-accent-soft text-accent-soft-fg border-transparent',
-};
-
-const dotColor = computed(() => ({
-  neutral: 'bg-subtle', success: 'bg-success', warning: 'bg-warning',
-  danger: 'bg-danger', info: 'bg-info', accent: 'bg-accent',
-}[props.variant]));
-</script>
-
-<template>
-  <span
-    :class="[
-      'inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium whitespace-nowrap',
-      styles[variant],
-    ]"
-  >
-    <span v-if="dot" :class="['h-1.5 w-1.5 rounded-full', dotColor]" />
-    <slot />
-  </span>
-</template>

package/src/components/UiBarChart.vue

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-
-interface Point { label: string; value: number }
-
-const props = withDefaults(defineProps<{
-  data: Point[];
-  height?: number;
-  format?: (v: number) => string;
-}>(), { height: 220 });
-
-const max = computed(() => Math.max(1, ...props.data.map((d) => d.value)));
-const hover = ref<number | null>(null);
-const fmt = (v: number) => (props.format ? props.format(v) : String(v));
-const labelEvery = computed(() => Math.ceil(props.data.length / 8));
-</script>
-
-<template>
-  <div class="w-full">
-    <div class="flex items-end gap-1.5" :style="{ height: `${height}px` }">
-      <div
-        v-for="(d, i) in data"
-        :key="i"
-        class="group relative flex flex-1 flex-col justify-end"
-        @mouseenter="hover = i"
-        @mouseleave="hover = null"
-      >
-        <div
-          class="w-full rounded-t transition-all duration-200"
-          :class="hover === i ? 'bg-accent' : 'bg-accent/55'"
-          :style="{ height: `${Math.max(2, (d.value / max) * 100)}%` }"
-        />
-        <div
-          v-if="hover === i"
-          class="pointer-events-none absolute bottom-full left-1/2 mb-1.5 -translate-x-1/2 whitespace-nowrap rounded-md border border-border bg-surface px-2 py-1 text-xs shadow-md"
-        >
-          <span class="font-semibold text-content tabular">{{ fmt(d.value) }}</span>
-          <span class="ml-1 text-subtle">{{ d.label }}</span>
-        </div>
-      </div>
-    </div>
-    <div class="mt-1.5 flex gap-1.5">
-      <span
-        v-for="(d, i) in data" :key="i"
-        class="flex-1 truncate text-center text-[11px] text-subtle"
-        :style="{ visibility: i % labelEvery === 0 || i === data.length - 1 ? 'visible' : 'hidden' }"
-      >{{ d.label }}</span>
-    </div>
-  </div>
-</template>

package/src/components/UiButton.vue

@@ -1,54 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import UiIcon from './UiIcon.vue';
-
-const props = withDefaults(defineProps<{
-  variant?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'subtle';
-  size?: 'sm' | 'md' | 'lg';
-  icon?: string;
-  iconRight?: string;
-  loading?: boolean;
-  disabled?: boolean;
-  block?: boolean;
-  type?: 'button' | 'submit';
-}>(), {
-  variant: 'primary',
-  size: 'md',
-  type: 'button',
-});
-
-const variants: Record<string, string> = {
-  primary: 'bg-accent text-accent-fg hover:bg-accent-hover shadow-sm',
-  secondary: 'bg-surface text-content border border-border hover:bg-surface-hover',
-  ghost: 'text-muted hover:text-content hover:bg-surface-hover',
-  subtle: 'bg-accent-soft text-accent-soft-fg hover:brightness-95',
-  danger: 'bg-danger text-white hover:brightness-110 shadow-sm',
-};
-
-const sizes: Record<string, string> = {
-  sm: 'h-8 px-3 text-[13px] gap-1.5 rounded-md',
-  md: 'h-10 px-4 text-sm gap-2 rounded-md',
-  lg: 'h-11 px-5 text-[15px] gap-2 rounded-lg',
-};
-
-const iconSize = computed(() => (props.size === 'sm' ? 15 : props.size === 'lg' ? 19 : 17));
-</script>
-
-<template>
-  <button
-    :type="type"
-    :disabled="disabled || loading"
-    :class="[
-      'inline-flex items-center justify-center font-medium transition-all duration-150 select-none',
-      'disabled:opacity-55 disabled:pointer-events-none whitespace-nowrap',
-      variants[variant],
-      sizes[size],
-      block ? 'w-full' : '',
-    ]"
-  >
-    <UiIcon v-if="loading" name="refresh" :size="iconSize" class="animate-spin" />
-    <UiIcon v-else-if="icon" :name="icon" :size="iconSize" />
-    <slot />
-    <UiIcon v-if="iconRight && !loading" :name="iconRight" :size="iconSize" />
-  </button>
-</template>

package/src/components/UiCard.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-withDefaults(defineProps<{
-  title?: string;
-  subtitle?: string;
-  padded?: boolean;
-}>(), { padded: true });
-</script>
-
-<template>
-  <section class="rounded-lg border border-border bg-surface shadow-sm">
-    <header
-      v-if="title || $slots.header || $slots.actions"
-      class="flex items-center justify-between gap-4 border-b border-border px-5 py-4"
-    >
-      <div v-if="title || subtitle" class="min-w-0">
-        <h3 class="truncate text-[15px] font-semibold text-content">{{ title }}</h3>
-        <p v-if="subtitle" class="mt-0.5 truncate text-[13px] text-muted">{{ subtitle }}</p>
-      </div>
-      <slot name="header" />
-      <div v-if="$slots.actions" class="flex shrink-0 items-center gap-2">
-        <slot name="actions" />
-      </div>
-    </header>
-    <div :class="padded ? 'p-5' : ''">
-      <slot />
-    </div>
-  </section>
-</template>

package/src/components/UiDonutChart.vue

@@ -1,73 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-
-interface Segment { label: string; value: number; color?: string }
-
-const props = withDefaults(defineProps<{
-  data: Segment[];
-  size?: number;
-  thickness?: number;
-  centerLabel?: string;
-  centerValue?: string | number;
-}>(), { size: 180, thickness: 20 });
-
-// Token-driven palette so slices read as one system.
-const palette = [
-  'var(--brand-500)', 'var(--info)', 'var(--warning)',
-  'var(--brand-300)', 'var(--danger)', 'var(--success)',
-];
-
-const total = computed(() => props.data.reduce((s, d) => s + d.value, 0) || 1);
-const radius = computed(() => (props.size - props.thickness) / 2);
-const circ = computed(() => 2 * Math.PI * radius.value);
-
-const segments = computed(() => {
-  let offset = 0;
-  return props.data.map((d, i) => {
-    const frac = d.value / total.value;
-    const seg = {
-      ...d,
-      color: d.color || palette[i % palette.length],
-      dash: frac * circ.value,
-      gap: circ.value - frac * circ.value,
-      offset: -offset * circ.value,
-      pct: Math.round(frac * 100),
-    };
-    offset += frac;
-    return seg;
-  });
-});
-</script>
-
-<template>
-  <div class="flex flex-wrap items-center gap-6">
-    <div class="relative shrink-0" :style="{ width: `${size}px`, height: `${size}px` }">
-      <svg :width="size" :height="size" :viewBox="`0 0 ${size} ${size}`" class="-rotate-90">
-        <circle
-          :cx="size / 2" :cy="size / 2" :r="radius"
-          fill="none" stroke="var(--surface-2)" :stroke-width="thickness"
-        />
-        <circle
-          v-for="(s, i) in segments" :key="i"
-          :cx="size / 2" :cy="size / 2" :r="radius"
-          fill="none" :stroke="s.color" :stroke-width="thickness"
-          :stroke-dasharray="`${s.dash} ${s.gap}`" :stroke-dashoffset="s.offset"
-          stroke-linecap="butt"
-        />
-      </svg>
-      <div class="absolute inset-0 flex flex-col items-center justify-center">
-        <span class="tabular text-2xl font-semibold text-content">{{ centerValue ?? total }}</span>
-        <span v-if="centerLabel" class="text-[11px] uppercase tracking-wide text-subtle">{{ centerLabel }}</span>
-      </div>
-    </div>
-
-    <ul class="flex min-w-0 flex-1 flex-col gap-2">
-      <li v-for="(s, i) in segments" :key="i" class="flex items-center gap-2.5 text-sm">
-        <span class="h-2.5 w-2.5 shrink-0 rounded-full" :style="{ background: s.color }" />
-        <span class="truncate capitalize text-muted">{{ s.label }}</span>
-        <span class="tabular ml-auto font-medium text-content">{{ s.value }}</span>
-        <span class="tabular w-9 text-right text-xs text-subtle">{{ s.pct }}%</span>
-      </li>
-    </ul>
-  </div>
-</template>

package/src/components/UiDrawer.vue

@@ -1,65 +0,0 @@
-<script setup lang="ts">
-import { watch, onUnmounted } from 'vue';
-import UiIcon from './UiIcon.vue';
-
-const props = defineProps<{ modelValue: boolean; title?: string; subtitle?: string; width?: string }>();
-const emit = defineEmits<{ (e: 'update:modelValue', v: boolean): void }>();
-
-function close() { emit('update:modelValue', false); }
-
-function onKey(e: KeyboardEvent) {
-  if (e.key === 'Escape') close();
-}
-
-watch(() => props.modelValue, (open) => {
-  document.body.style.overflow = open ? 'hidden' : '';
-  if (open) document.addEventListener('keydown', onKey);
-  else document.removeEventListener('keydown', onKey);
-});
-
-onUnmounted(() => {
-  document.removeEventListener('keydown', onKey);
-  document.body.style.overflow = '';
-});
-</script>
-
-<template>
-  <Teleport to="body">
-    <Transition name="overlay">
-      <div
-        v-if="modelValue"
-        class="fixed inset-0 z-50 bg-black/40 backdrop-blur-sm"
-        @click.self="close"
-        @keydown.esc="close"
-      >
-        <aside
-          class="absolute right-0 top-0 flex h-full w-full flex-col border-l border-border bg-surface shadow-lg animate-slide-in-right"
-          :style="{ maxWidth: width || '30rem' }"
-          role="dialog"
-          aria-modal="true"
-        >
-          <header class="flex items-start justify-between gap-4 border-b border-border px-6 py-4">
-            <div class="min-w-0">
-              <h3 class="truncate text-base font-semibold text-content">{{ title }}</h3>
-              <p v-if="subtitle" class="mt-0.5 truncate text-[13px] text-muted">{{ subtitle }}</p>
-            </div>
-            <button class="rounded-md p-1 text-subtle transition-colors hover:bg-surface-hover hover:text-content" @click="close">
-              <UiIcon name="x" :size="18" />
-            </button>
-          </header>
-          <div class="flex-1 overflow-y-auto px-6 py-5">
-            <slot />
-          </div>
-          <footer v-if="$slots.footer" class="flex items-center justify-end gap-2 border-t border-border px-6 py-4">
-            <slot name="footer" />
-          </footer>
-        </aside>
-      </div>
-    </Transition>
-  </Teleport>
-</template>
-
-<style scoped>
-.overlay-enter-active, .overlay-leave-active { transition: opacity 0.2s ease; }
-.overlay-enter-from, .overlay-leave-to { opacity: 0; }
-</style>

package/src/components/UiEmptyState.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import UiIcon from './UiIcon.vue';
-defineProps<{ icon?: string; title: string; description?: string }>();
-</script>
-
-<template>
-  <div class="flex flex-col items-center justify-center px-6 py-14 text-center">
-    <span class="mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-surface-2 text-subtle">
-      <UiIcon :name="icon || 'search'" :size="26" />
-    </span>
-    <h4 class="text-[15px] font-semibold text-content">{{ title }}</h4>
-    <p v-if="description" class="mt-1 max-w-sm text-sm text-muted">{{ description }}</p>
-    <div v-if="$slots.default" class="mt-5">
-      <slot />
-    </div>
-  </div>
-</template>

package/src/components/UiIcon.vue

@@ -1,76 +0,0 @@
-<script setup lang="ts">
-/**
- * Lightweight inline icon set (stroke, 24×24, currentColor). No external deps,
- * works fully offline. Add new glyphs to the `paths` map by name.
- */
-import { computed } from 'vue';
-
-const props = withDefaults(defineProps<{ name: string; size?: number | string }>(), {
-  size: 20,
-});
-
-// Each entry is the inner markup of a 0 0 24 24 stroke icon.
-const paths: Record<string, string> = {
-  menu: '<path d="M3 6h18M3 12h18M3 18h18"/>',
-  dashboard: '<rect x="3" y="3" width="7" height="9" rx="1"/><rect x="14" y="3" width="7" height="5" rx="1"/><rect x="14" y="12" width="7" height="9" rx="1"/><rect x="3" y="16" width="7" height="5" rx="1"/>',
-  pin: '<path d="M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/>',
-  cabin: '<path d="M3 11.5 12 4l9 7.5"/><path d="M5 10v10h14V10"/><path d="M9 20v-5h6v5"/>',
-  package: '<path d="M21 8 12 3 3 8v8l9 5 9-5V8z"/><path d="m3 8 9 5 9-5"/><path d="M12 13v8"/>',
-  calendar: '<rect x="3" y="4.5" width="18" height="17" rx="2"/><path d="M3 9h18M8 2.5v4M16 2.5v4"/>',
-  users: '<path d="M17 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9.5" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13A4 4 0 0 1 16 11"/>',
-  user: '<circle cx="12" cy="8" r="4"/><path d="M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1"/>',
-  shield: '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>',
-  card: '<rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/>',
-  bell: '<path d="M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/>',
-  settings: '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>',
-  search: '<circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/>',
-  plus: '<path d="M12 5v14M5 12h14"/>',
-  edit: '<path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z"/>',
-  trash: '<path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m2 0v14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V6"/><path d="M10 11v6M14 11v6"/>',
-  x: '<path d="M18 6 6 18M6 6l12 12"/>',
-  check: '<path d="M20 6 9 17l-5-5"/>',
-  'chevron-down': '<path d="m6 9 6 6 6-6"/>',
-  'chevron-up': '<path d="m18 15-6-6-6 6"/>',
-  'chevron-left': '<path d="m15 18-6-6 6-6"/>',
-  'chevron-right': '<path d="m9 18 6-6-6-6"/>',
-  sun: '<circle cx="12" cy="12" r="4.5"/><path d="M12 1.5v2M12 20.5v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1.5 12h2M20.5 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/>',
-  moon: '<path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/>',
-  logout: '<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="m16 17 5-5-5-5"/><path d="M21 12H9"/>',
-  filter: '<path d="M3 4h18l-7 8v6l-4 2v-8z"/>',
-  download: '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/><path d="M12 15V3"/>',
-  database: '<ellipse cx="12" cy="6" rx="8" ry="3"/><path d="M4 6v6c0 1.7 3.6 3 8 3s8-1.3 8-3V6"/><path d="M4 12v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6"/>',
-  broom: '<path d="M3 21h18"/><path d="M7 21c0-3 1-5 3-7l7-7"/><path d="M13 5l6 6"/><path d="M16 2l6 6"/>',
-  alert: '<path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"/><path d="M12 9v4M12 17h.01"/>',
-  'arrow-up': '<path d="M12 19V5M5 12l7-7 7 7"/>',
-  'arrow-down': '<path d="M12 5v14M19 12l-7 7-7-7"/>',
-  'trend-up': '<path d="M23 6l-9.5 9.5-5-5L1 18"/><path d="M17 6h6v6"/>',
-  'trend-down': '<path d="M23 18l-9.5-9.5-5 5L1 6"/><path d="M17 18h6v-6"/>',
-  eye: '<path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/>',
-  refresh: '<path d="M23 4v6h-6M1 20v-6h6"/><path d="M3.5 9a9 9 0 0 1 14.9-3.4L23 10M1 14l4.6 4.4A9 9 0 0 0 20.5 15"/>',
-  globe: '<circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18z"/>',
-  tag: '<path d="M20.6 13.4 12 22l-9-9V4h9l8.6 8.6a2 2 0 0 1 0 2.8z"/><circle cx="7.5" cy="7.5" r="1.2"/>',
-  check_circle: '<circle cx="12" cy="12" r="9"/><path d="m9 12 2 2 4-4"/>',
-  clock: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
-  logo: '<path d="M3 11.5 12 4l9 7.5"/><path d="M5 10v10h14V10"/><path d="M10 20v-4h4v4"/>',
-  dollar: '<path d="M12 1v22M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>',
-  activity: '<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>',
-};
-
-const inner = computed(() => paths[props.name] ?? paths.x);
-const dim = computed(() => (typeof props.size === 'number' ? `${props.size}px` : props.size));
-</script>
-
-<template>
-  <svg
-    :width="dim"
-    :height="dim"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    stroke-width="1.75"
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    aria-hidden="true"
-    v-html="inner"
-  />
-</template>

package/src/components/UiInput.vue

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import UiIcon from './UiIcon.vue';
-
-defineProps<{
-  modelValue?: string | number;
-  label?: string;
-  type?: string;
-  placeholder?: string;
-  icon?: string;
-  error?: string;
-  hint?: string;
-  disabled?: boolean;
-  required?: boolean;
-}>();
-
-defineEmits<{ (e: 'update:modelValue', value: string): void }>();
-</script>
-
-<template>
-  <label class="block">
-    <span v-if="label" class="mb-1.5 block text-[13px] font-medium text-content">
-      {{ label }}
-      <span v-if="required" class="text-danger">*</span>
-    </span>
-    <div class="relative">
-      <UiIcon
-        v-if="icon"
-        :name="icon"
-        :size="17"
-        class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-subtle"
-      />
-      <input
-        :value="modelValue"
-        :type="type || 'text'"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        :class="[
-          'h-10 w-full rounded-md border bg-surface text-sm text-content transition-colors',
-          'placeholder:text-subtle focus:outline-none focus:ring-2 focus:ring-[var(--ring)]',
-          'disabled:opacity-60',
-          icon ? 'pl-9 pr-3' : 'px-3',
-          error ? 'border-danger' : 'border-border focus:border-accent',
-        ]"
-        @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
-      />
-    </div>
-    <p v-if="error" class="mt-1 text-xs text-danger">{{ error }}</p>
-    <p v-else-if="hint" class="mt-1 text-xs text-muted">{{ hint }}</p>
-  </label>
-</template>