orio-ui 0.1.0 → 0.1.1

package/package.json

@@ -1,35 +1,30 @@
 {
   "name": "orio-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Modern Nuxt component library with theme support",
   "type": "module",
-  "main": "./dist/runtime/index.js",
-  "types": "./dist/runtime/index.d.ts",
+  "main": "./src/runtime/index.ts",
+  "types": "./src/runtime/index.ts",
   "exports": {
     ".": {
-      "types": "./dist/runtime/index.d.ts",
-      "import": "./dist/runtime/index.js"
-    },
-    "./nuxt": {
-      "types": "./dist/module.d.ts",
-      "import": "./dist/module.mjs"
+      "types": "./src/runtime/index.ts",
+      "import": "./src/runtime/index.ts"
     },
     "./composables": {
-      "types": "./dist/runtime/composables/index.d.ts",
-      "import": "./dist/runtime/composables/index.js"
+      "types": "./src/runtime/composables/index.ts",
+      "import": "./src/runtime/composables/index.ts"
     },
-    "./styles": "./dist/runtime/assets/css/main.css",
-    "./theme": "./dist/runtime/assets/css/colors.css"
+    "./styles": "./src/runtime/assets/css/main.css",
+    "./theme": "./src/runtime/assets/css/colors.css"
   },
   "files": [
-    "dist",
     "nuxt.config.ts",
     "src"
   ],
   "scripts": {
     "dev": "vitepress dev docs",
-    "build": "nuxt-module-build build",
-    "prepack": "npm run build",
+    "build": "echo 'Build not needed for Nuxt layer'",
+    "prepack": "echo 'Using source files directly'",
     "test": "vitest",
     "test:unit": "vitest run",
     "test:watch": "vitest watch",

package/dist/module.cjs

@@ -1,5 +0,0 @@
-module.exports = function(...args) {
-  return import('./module.mjs').then(m => m.default.call(this, ...args))
-}
-const _meta = module.exports.meta = require('./module.json')
-module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.mts

@@ -1,3 +0,0 @@
-declare const _default: any;
-
-export { _default as default };

package/dist/module.d.ts

@@ -1,3 +0,0 @@
-declare const _default: any;
-
-export { _default as default };

package/dist/module.json

@@ -1,12 +0,0 @@
-{
-  "name": "orio-ui",
-  "configKey": "orioUi",
-  "compatibility": {
-    "nuxt": "^3.0.0 || ^4.0.0"
-  },
-  "version": "0.1.0",
-  "builder": {
-    "@nuxt/module-builder": "0.8.4",
-    "unbuild": "2.0.0"
-  }
-}

package/dist/module.mjs

@@ -1,16 +0,0 @@
-import { defineNuxtModule } from '@nuxt/kit';
-
-const module = defineNuxtModule({
-  meta: {
-    name: "orio-ui",
-    configKey: "orioUi",
-    compatibility: {
-      nuxt: "^3.0.0 || ^4.0.0"
-    }
-  },
-  defaults: {},
-  setup() {
-  }
-});
-
-export { module as default };

package/dist/runtime/assets/css/animation.css

@@ -1 +0,0 @@
-:root{--motion-duration-short:0.05s;--motion-duration-medium:0.15s;--motion-distance-small:0.15rem;--motion-distance-medium:2rem;--motion-distance-large:1rem;--motion-ease-default:ease-in;--motion-ease-smooth:cubic-bezier(0.22,1,0.36,1)}.animate-fade-enter-active,.animate-fade-leave-active{transition:opacity var(--motion-duration-short) var(--motion-ease-default),transform var(--motion-duration-short) var(--motion-ease-default)}.animate-fade-enter-from,.animate-fade-leave-to{opacity:0;transform:translateY(calc(var(--motion-distance-small)*-1))}.animate-fade-slide-appear-active,.animate-fade-slide-enter-active,.animate-fade-slide-leave-active{transition:opacity var(--motion-duration-medium) var(--motion-ease-smooth),transform var(--motion-duration-medium) var(--motion-ease-smooth);transition-delay:calc(var(--index, 0)*.08s)}.animate-fade-slide-appear-from,.animate-fade-slide-enter-from{opacity:0;transform:translateY(var(--motion-distance-medium))}.animate-fade-slide-leave-to{opacity:0;transform:translateY(calc(var(--motion-distance-large)*-1))}.animate-fade-slide-move{transition:transform var(--motion-duration-medium) ease}.animate-fade-reverse-enter-active,.animate-fade-reverse-leave-active{transition:opacity var(--motion-duration-short) var(--motion-ease-default),transform var(--motion-duration-short) var(--motion-ease-default)}.animate-fade-reverse-enter-from,.animate-fade-reverse-leave-to{opacity:0;transform:translateY(var(--motion-distance-small))}.animate-fade-slide-reverse-appear-active,.animate-fade-slide-reverse-enter-active,.animate-fade-slide-reverse-leave-active{transition:opacity var(--motion-duration-medium) var(--motion-ease-smooth),transform var(--motion-duration-medium) var(--motion-ease-smooth);transition-delay:calc(var(--index, 0)*.08s)}.animate-fade-slide-reverse-appear-from,.animate-fade-slide-reverse-enter-from{opacity:0;transform:translateY(calc(var(--motion-distance-medium)*-1))}.animate-fade-slide-reverse-leave-to{opacity:0;transform:translateY(var(--motion-distance-large))}.animate-fade-slide-reverse-move{transition:transform var(--motion-duration-medium) ease}

package/dist/runtime/assets/css/colors.css

@@ -1 +0,0 @@
-:root{--color-bg:#fff;--color-surface:#f7f8fa;--color-text:#0e1116;--color-muted:#626a78;--color-border:#bfbfc2;--color-accent:#1f3a8a;--color-accent-ink:#fff;--color-accent-soft:#eef2ff;--color-accent-border:#c7d2fe;--color-accent-hover:color-mix(in srgb,var(--color-accent) 85%,#000 15%);--color-accent-active:color-mix(in srgb,var(--color-accent) 75%,#000 25%)}:root[data-mode=light]{--color-bg:#fff;--color-surface:#f7f8fa;--color-text:#0e1116;--color-muted:#626a78;--color-border:#bfbfc2}:root[data-mode=dark]{--color-bg:#0e1116;--color-surface:#1a1d23;--color-text:#fff;--color-muted:#a0a7b5;--color-border:#2e333d;--color-accent-ink:#fff;--color-accent-soft:color-mix(in srgb,var(--color-accent) 12%,#0e1116);--color-accent-border:color-mix(in srgb,var(--color-accent) 40%,#0e1116);--color-accent-hover:color-mix(in srgb,var(--color-accent) 30%,#fff 70%);--color-accent-active:color-mix(in srgb,var(--color-accent) 80%,#fff 25%)}:root[data-theme=navy]{--color-accent:#333c4d;--color-accent-soft:#f0f5ff;--color-accent-border:#bdcdef}:root[data-theme=teal]{--color-accent:#147b71;--color-accent-soft:#e7f8f6;--color-accent-border:#a6d9d4}:root[data-theme=forest]{--color-accent:#235c42;--color-accent-soft:#e9f7f0;--color-accent-border:#a2cdb9}:root[data-theme=wine]{--color-accent:#862737;--color-accent-soft:#fbeff1;--color-accent-border:#dbb3ba}:root[data-theme=royal]{--color-accent:#293da3;--color-accent-soft:#eef0fb;--color-accent-border:#b3badb}:root{--color-red:#dc2626;--color-red-ink:#fff;--color-red-soft:#fef2f2;--color-red-border:#fecaca;--color-red-hover:color-mix(in srgb,var(--color-red) 85%,#000 15%);--color-red-active:color-mix(in srgb,var(--color-red) 75%,#000 25%);--color-orange:#ea580c;--color-orange-ink:#fff;--color-orange-soft:#fff7ed;--color-orange-border:#fed7aa;--color-orange-hover:color-mix(in srgb,var(--color-orange) 85%,#000 15%);--color-orange-active:color-mix(in srgb,var(--color-orange) 75%,#000 25%);--color-yellow:#ca8a04;--color-yellow-ink:#fff;--color-yellow-soft:#fefce8;--color-yellow-border:#fef08a;--color-yellow-hover:color-mix(in srgb,var(--color-yellow) 85%,#000 15%);--color-yellow-active:color-mix(in srgb,var(--color-yellow) 75%,#000 25%);--color-green:#15803d;--color-green-ink:#fff;--color-green-soft:#f0fdf4;--color-green-border:#bbf7d0;--color-green-hover:color-mix(in srgb,var(--color-green) 85%,#000 15%);--color-green-active:color-mix(in srgb,var(--color-green) 75%,#000 25%);--color-teal:#0d9488;--color-teal-ink:#fff;--color-teal-soft:#f0fdfa;--color-teal-border:#99f6e4;--color-teal-hover:color-mix(in srgb,var(--color-teal) 85%,#000 15%);--color-teal-active:color-mix(in srgb,var(--color-teal) 75%,#000 25%);--color-blue:#2563eb;--color-blue-ink:#fff;--color-blue-soft:#eff6ff;--color-blue-border:#bfdbfe;--color-blue-hover:color-mix(in srgb,var(--color-blue) 85%,#000 15%);--color-blue-active:color-mix(in srgb,var(--color-blue) 75%,#000 25%);--color-purple:#7e22ce;--color-purple-ink:#fff;--color-purple-soft:#faf5ff;--color-purple-border:#e9d5ff;--color-purple-hover:color-mix(in srgb,var(--color-purple) 85%,#000 15%);--color-purple-active:color-mix(in srgb,var(--color-purple) 75%,#000 25%);--color-pink:#db2777;--color-pink-ink:#fff;--color-pink-soft:#fdf2f8;--color-pink-border:#fbcfe8;--color-pink-hover:color-mix(in srgb,var(--color-pink) 85%,#000 15%);--color-pink-active:color-mix(in srgb,var(--color-pink) 75%,#000 25%)}

package/dist/runtime/assets/css/cool-gradient-hover.css

@@ -1,23 +0,0 @@
-.gradient-hover {
-  --gh-color: #fff;
-  --gh-angle: 120deg;
-  --gh-peek-x: 95%;
-  --gh-mix-base: black;
-  background-image: linear-gradient(var(--gh-angle), color-mix(in srgb, var(--gh-color) 90%, var(--gh-mix-base)) 0%, var(--gh-color) 40%, color-mix(in srgb, var(--gh-color) 90%, var(--gh-mix-base)) 80%);
-  background-repeat: no-repeat;
-  background-size: 0% 0%;
-  background-position: 0% 0%;
-  transition: background-position 0.8s ease, border-color 0.2s ease;
-  will-change: background-size, background-position;
-}
-
-.gradient-hover:hover {
-  background-size: 200% 100%;
-  background-position: var(--gh-peek-x) 0;
-}
-
-/* Dark mode: now theme-aware */
-:root[data-mode=dark] .gradient-hover {
-  --gh-color: var(--color-accent); /* switch from static white to theme accent */
-  --gh-mix-base: var(--color-bg); /* blend into dark background */
-}

package/dist/runtime/assets/css/main.css

@@ -1 +0,0 @@
-@import "./colors.css";@import "./animation.css";@import "./scroll.css";*,:after,:before{box-sizing:border-box}

package/dist/runtime/assets/css/scroll.css

@@ -1 +0,0 @@
-::-webkit-scrollbar{height:12px;width:12px}::-webkit-scrollbar-track{background:var(--color-surface);border-left:1px solid var(--color-border)}::-webkit-scrollbar-thumb{background-color:var(--color-accent-border);border:3px solid var(--color-surface);border-radius:8px;-webkit-transition:background-color .2s ease;transition:background-color .2s ease}::-webkit-scrollbar-thumb:hover{background-color:var(--color-accent)}::-webkit-scrollbar-corner{background:var(--color-surface)}*{scrollbar-color:var(--color-accent-border) var(--color-surface);scrollbar-width:thin}:root[data-mode=dark] ::-webkit-scrollbar-track{background:var(--color-bg);border-left:1px solid var(--color-border)}:root[data-mode=dark] ::-webkit-scrollbar-thumb{background-color:var(--color-accent-border);border:3px solid var(--color-bg)}:root[data-mode=dark] *{scrollbar-color:var(--color-accent-border) var(--color-bg)}

package/dist/runtime/components/Button.vue

@@ -1,102 +0,0 @@
-<script setup lang="ts">
-import { computed, toRefs, useAttrs, useSlots } from 'vue';
-
-interface Props {
-  type?: 'primary' | 'secondary' | 'subdued';
-  icon?: string;
-  loading?: boolean;
-  disabled?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  type: 'primary',
-});
-
-const { loading, disabled } = toRefs(props);
-
-const attrs = useAttrs();
-const slots = useSlots();
-
-const isIconOnly = computed(() => {
-  const hasIcon = !!props.icon || !!slots.icon;
-  const hasDefault = !!slots.default;
-  return hasIcon && !hasDefault;
-});
-
-const emit = defineEmits<{
-  (e: 'click', event: PointerEvent): void;
-}>();
-
-function click(event: PointerEvent) {
-  if (loading.value || disabled.value) return;
-  emit('click', event);
-}
-</script>
-
-<template>
-  <orio-control-element>
-    <button
-      v-bind="attrs"
-      :class="[type, 'gradient-hover', { 'icon-only': isIconOnly }]"
-      @click="click"
-    >
-      <orio-loading-spinner v-if="loading" />
-      <slot v-else name="icon">
-        <orio-icon v-if="icon" :name="icon" />
-      </slot>
-      <slot />
-    </button>
-  </orio-control-element>
-</template>
-
-<style scoped>
-button {
-  background-color: var(--color-accent);
-  color: var(--color-accent-ink);
-  border: 1px solid transparent;
-  border-radius: 4px;
-  padding: 8px 16px;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  user-select: none;
-}
-button.icon-only {
-  padding: 0;
-  border-radius: 50%;
-}
-button:disabled {
-  background-color: var(--color-accent-soft);
-  color: var(--color-muted);
-  border-color: var(--color-accent-border);
-  cursor: not-allowed;
-}
-button:active {
-  border: 1px solid var(--color-accent-border);
-}
-button.primary {
-  --gh-color: var(--color-accent);
-}
-button.secondary {
-  background-color: transparent;
-  border: 1px solid var(--color-accent);
-  color: var(--color-accent);
-}
-button.secondary:hover {
-  color: var(--color-accent-hover);
-}
-button.subdued {
-  background-color: transparent;
-  color: var(--color-accent);
-}
-button.subdued:hover {
-  color: var(--color-accent-hover);
-}
-button:active {
-  border-color: var(--color-accent-border) !important;
-}
-button:hover {
-  color: var(--color-accent-ink);
-}
-</style>

package/dist/runtime/components/CheckBox.vue

@@ -1,93 +0,0 @@
-<script setup lang="ts">
-const modelValue = defineModel<boolean>({ required: false });
-
-defineProps<{
-  checkedIcon?: string; // optional: pass icon name for checked state
-  uncheckedIcon?: string; // optional: pass icon name for unchecked state
-}>();
-</script>
-
-<template>
-  <orio-control-element class="checkbox">
-    <label class="checkbox-label">
-      <input
-        v-model="modelValue"
-        type="checkbox"
-        class="checkbox-input"
-        tabindex="-1"
-      />
-      <span
-        class="checkbox-box"
-        :class="{
-          defaultChecked: !checkedIcon,
-          defaultUnchecked: !uncheckedIcon,
-        }"
-      >
-        <slot name="icon" :checked="modelValue">
-          <orio-icon v-if="modelValue && checkedIcon" :name="checkedIcon" />
-          <orio-icon
-            v-else-if="!modelValue && uncheckedIcon"
-            :name="uncheckedIcon"
-          />
-        </slot>
-      </span>
-      <slot />
-    </label>
-  </orio-control-element>
-</template>
-
-<style scoped>
-.checkbox {
-  --box-size: 1rem;
-}
-.checkbox-label {
-  position: relative;
-  user-select: none;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4rem;
-  cursor: pointer;
-  font-size: 0.9rem;
-  color: var(--color-text);
-}
-.checkbox-input {
-  position: absolute;
-  inset: 0;
-  width: var(--box-size);
-  height: 1rem;
-  margin: 0;
-  opacity: 0;
-}
-.checkbox-box {
-  width: var(--box-size);
-  height: var(--box-size);
-  border: 2px solid var(--color-border);
-  border-radius: 4px;
-  background-color: var(--color-bg);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  transition: background-color 0.2s ease, border-color 0.2s ease;
-}
-.checkbox .checkbox-input:checked + .checkbox-box {
-  background-color: var(--color-accent);
-  border-color: var(--color-accent);
-}
-.checkbox .checkbox-input:checked + .checkbox-box.defaultChecked::after {
-  content: "";
-  width: 0.3rem;
-  height: 0.6rem;
-  position: relative;
-  bottom: 0.1rem;
-  border: solid var(--color-accent-ink);
-  border-width: 0 2px 2px 0;
-  transform: rotate(45deg);
-}
-.checkbox-label:hover .checkbox-box {
-  border-color: var(--color-accent);
-}
-.checkbox .checkbox-input:focus-visible + .checkbox-box {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
-}
-</style>

package/dist/runtime/components/ControlElement.vue

@@ -1,39 +0,0 @@
-<script setup lang="ts">
-export interface ControlProps {
-  /**
-   * Minimal will reset margin and remove border and box shadow from every element inside the slot
-   */
-  appearance?: "normal" | "minimal";
-}
-
-withDefaults(defineProps<ControlProps>(), {
-  appearance: "normal",
-});
-</script>
-
-<template>
-  <div class="control" :class="[appearance]">
-    <label v-if="$attrs.label" class="control-label">{{ $attrs.label }}</label>
-    <div class="slot-wrapper" v-bind="$attrs">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.control {
-  margin: 0.5rem;
-}
-.control .control-label {
-  user-select: none;
-}
-.control.minimal {
-  margin: 0;
-}
-.control.minimal .slot-wrapper :first-child {
-  border: 0;
-}
-.control.minimal .slot-wrapper :first-child:focus {
-  box-shadow: none;
-}
-</style>

package/dist/runtime/components/DashedContainer.vue

@@ -1,59 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-
-interface Props {
-  icon?: string;
-  text?: string;
-  size?: 'small' | 'medium' | 'large';
-}
-const props = withDefaults(defineProps<Props>(), {
-  size: 'medium',
-});
-defineEmits(['click']);
-
-const iconSize = computed(() => {
-  switch (props.size) {
-    case 'small':
-      return '2rem';
-    case 'large':
-      return '5rem';
-    default:
-      return '3rem';
-  }
-});
-</script>
-<template>
-  <div class="dashed-container gradient-hover" @click="$emit('click')">
-    <orio-icon
-      v-if="icon"
-      :name="icon"
-      class="icon-class"
-      :size="iconSize"
-    />
-    <span v-if="text" class="text-class" :size>{{ text }}</span>
-  </div>
-</template>
-
-<style scoped>
-.dashed-container {
-  cursor: pointer;
-  border: 3px dashed var(--color-border);
-  border-radius: 4px;
-  padding: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-.dashed-container:hover .text-class {
-  color: var(--color-accent-hover);
-}
-
-.icon-class {
-  color: var(--color-muted);
-}
-
-.text-class {
-  color: var(--color-accent);
-}
-</style>

package/dist/runtime/components/DatePicker.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import { nanoid } from 'nanoid';
-
-interface Props {
-  month?: boolean;
-}
-defineProps<Props>();
-
-const date = defineModel<string | null | undefined>('date', {
-  required: true,
-});
-
-const randomName = computed(() => `date-${nanoid(8)}`);
-</script>
-
-<template>
-  <orio-control-element class="date-picker" v-bind="$attrs">
-    <input
-      v-model="date"
-      :type="month ? 'month' : 'date'"
-      class="date-input"
-      :name="randomName"
-    />
-  </orio-control-element>
-</template>
-
-<style scoped>
-.date-picker *{cursor:pointer;width:100%}.date-picker-label{color:var(--color-text);display:inline-flex;flex-direction:column;font-size:.9rem;gap:.25rem}.date-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:4px;box-sizing:border-box;color:var(--color-text);font-size:.95rem;padding:.4rem .6rem;transition:border-color .2s ease,box-shadow .2s ease}.date-input:focus,.date-input:hover{border-color:var(--color-accent)}.date-input:focus{box-shadow:0 0 0 2px var(--color-accent-soft);outline:none}.date-input:disabled{background-color:var(--color-surface);color:var(--color-muted);cursor:not-allowed}.date-input::-webkit-calendar-picker-indicator{cursor:pointer;filter:invert(36%) sepia(65%) saturate(325%) hue-rotate(180deg);opacity:.7;-webkit-transition:opacity .2s ease;transition:opacity .2s ease}.date-input::-webkit-calendar-picker-indicator:hover{opacity:1}
-</style>

package/dist/runtime/components/DateRangePicker.vue

@@ -1,73 +0,0 @@
-<script setup lang="ts">
-import { ref, watch, computed } from 'vue';
-import type { ResumeDate } from './view/Dates.vue';
-
-export interface DateRangePickerProps {
-  month?: boolean;
-}
-
-defineProps<DateRangePickerProps>();
-
-const dates = defineModel<ResumeDate>('dates', { required: true });
-
-const present = ref(dates.value.endDate !== '' && !dates.value.endDate);
-
-watch(present, (value) => {
-  if (value) {
-    dates.value.endDate = null; // Set end date to null when present is checked
-  } else {
-    dates.value.endDate = ''; // Reset end date when present is unchecked
-  }
-});
-
-const dateIsCorrect = computed(() => {
-  // Ensure that the start date is before the end date
-  if (dates.value.startDate && dates.value.endDate) {
-    return new Date(dates.value.startDate) <= new Date(dates.value.endDate);
-  }
-  return true; // If one of the dates is empty, consider it correct
-});
-
-defineExpose({ dateIsCorrect });
-</script>
-
-<template>
-  <div>
-    <orio-control-element>
-      <div class="date-range-picker">
-        <orio-date-picker v-model:date="dates.startDate" :month />
-        <orio-date-picker v-model:date="dates.endDate" :month />
-        <orio-check-box v-model="present"> Present </orio-check-box>
-      </div>
-    </orio-control-element>
-    <div v-if="!dateIsCorrect" class="error-message">
-      <p>Start date must be before end date.</p>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.date-range-picker {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-}
-.date-range-picker > * {
-  min-width: 0;
-}
-.date-range-picker .date-picker {
-  margin-inline: 0;
-}
-.date-range-picker .date-picker:first-child {
-  margin-inline-end: 0.5rem;
-}
-.date-range-picker .checkbox {
-  margin-inline-start: 0.25rem;
-}
-
-.error-message {
-  color: red;
-  font-size: 0.875rem;
-  margin-top: 0.5rem;
-}
-</style>

package/dist/runtime/components/EmptyState.vue

@@ -1,81 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  icon?: string;
-  title: string;
-  description?: string;
-  size?: 'small' | 'medium' | 'large';
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  size: 'medium',
-});
-</script>
-
-<template>
-  <div class="empty-state" :class="size">
-    <orio-icon v-if="icon" :name="icon" class="empty-state-icon" />
-    <orio-view-text
-      type="title"
-      :size="size === 'large' ? 'medium' : 'small'"
-      class="empty-state-title"
-    >
-      {{ title }}
-    </orio-view-text>
-    <orio-view-text
-      v-if="description"
-      type="subtitle"
-      class="empty-state-description"
-    >
-      {{ description }}
-    </orio-view-text>
-    <slot />
-  </div>
-</template>
-
-<style scoped>
-.empty-state {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  gap: 0.5rem;
-  padding: 2rem;
-  color: var(--color-text-secondary);
-}
-.empty-state.small {
-  padding: 1rem;
-  gap: 0.25rem;
-}
-.empty-state.small .empty-state-icon {
-  font-size: 2rem;
-}
-.empty-state.medium {
-  padding: 2rem;
-  gap: 0.5rem;
-}
-.empty-state.medium .empty-state-icon {
-  font-size: 3rem;
-}
-.empty-state.large {
-  padding: 3rem;
-  gap: 1rem;
-}
-.empty-state.large .empty-state-icon {
-  font-size: 4rem;
-}
-
-.empty-state-icon {
-  color: var(--color-text-tertiary);
-  opacity: 0.5;
-}
-
-.empty-state-title {
-  color: var(--color-text-secondary);
-}
-
-.empty-state-description {
-  color: var(--color-text-tertiary);
-  max-width: 30ch;
-}
-</style>

package/dist/runtime/components/Icon.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { iconRegistry, type IconName } from '../utils/icon-registry'
-
-export interface IconProps {
-  name: IconName | string
-  size?: string | number
-  color?: string
-}
-
-const props = withDefaults(defineProps<IconProps>(), {
-  size: '1em',
-  color: 'currentColor'
-})
-
-const iconSvg = computed(() => iconRegistry[props.name] || '')
-const sizeValue = computed(() =>
-  typeof props.size === 'number' ? `${props.size}px` : props.size
-)
-</script>
-
-<template>
-  <span
-    class="orio-icon"
-    :style="{
-      width: sizeValue,
-      height: sizeValue,
-      color: color,
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      flexShrink: 0
-    }"
-    v-html="iconSvg"
-  />
-</template>
-
-<style scoped>
-.orio-icon{align-items:center;display:inline-flex;flex-shrink:0;justify-content:center}.orio-icon :deep(svg){fill:currentColor;height:100%;width:100%}
-</style>