orio-ui 1.0.1 → 1.0.2

package/{src → dist}/runtime/components/Selector.vue

@@ -151,7 +151,7 @@ const selectorAttrs = computed(() => ({ getOptionKey, getOptionLabel }));
   </orio-control-element>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .selector-trigger {
   z-index: 1;
   min-height: 1.5rem;
@@ -160,74 +160,58 @@ const selectorAttrs = computed(() => ({ getOptionKey, getOptionLabel }));
   align-items: center;
   justify-content: space-between;
   cursor: pointer;
-
   background: var(--color-bg);
   border: 1px solid var(--color-border);
   border-radius: 6px;
   padding: 0.5rem 0.75rem;
   font-size: 0.95rem;
   color: var(--color-text);
-  transition:
-    border-color 0.2s ease,
-    box-shadow 0.2s ease,
-    background-color 0.2s ease;
-
-  &:hover {
-    border-color: var(--color-accent);
-    background-color: var(--color-surface); /* subtle lift */
-  }
-
-  &:focus-within {
-    border-color: var(--color-accent);
-    box-shadow: 0 0 0 2px var(--color-surface);
-  }
-
-  .icon {
-    color: var(--color-muted);
-    transition: color 0.2s ease;
-  }
-
-  &:hover .icon {
-    color: var(--color-accent);
-  }
+  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+}
+.selector-trigger:hover {
+  border-color: var(--color-accent);
+  background-color: var(--color-surface); /* subtle lift */
+}
+.selector-trigger:focus-within {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 2px var(--color-surface);
+}
+.selector-trigger .icon {
+  color: var(--color-muted);
+  transition: color 0.2s ease;
+}
+.selector-trigger:hover .icon {
+  color: var(--color-accent);
 }
 
 .selector-content {
   min-width: 15rem;
   max-height: 20rem;
   overflow: auto;
-
   background: var(--color-bg);
   border: 1px solid var(--color-border);
   border-radius: 6px;
   margin-top: 0.25rem;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-
-  ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-
-    li {
-      padding: 0.5rem 0.75rem;
-      cursor: pointer;
-      transition:
-        background-color 0.15s ease,
-        color 0.15s ease;
-
-      color: var(--color-text);
-
-      &:hover {
-        background-color: var(--color-surface); /* neutral lift */
-      }
-
-      &.selected {
-        background-color: var(--color-accent);
-        color: var(--color-accent-soft);
-        font-weight: 500;
-      }
-    }
-  }
+}
+.selector-content ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.selector-content ul li {
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+  color: var(--color-text);
+}
+.selector-content ul li:hover {
+  background-color: var(--color-surface); /* neutral lift */
+}
+.selector-content ul li.selected {
+  background-color: var(--color-accent);
+  color: var(--color-accent-soft);
+  font-weight: 500;
 }
 
 .trigger-content {

package/dist/runtime/components/Tag.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+export type TagStyle = 'neutral' | 'accent';
+
+interface Props {
+  text: string;
+  variant?: TagStyle;
+}
+withDefaults(defineProps<Props>(), {
+  variant: 'neutral',
+});
+</script>
+
+<template>
+  <span class="tag" :class="`tag--${variant}`">
+    {{ text }}
+  </span>
+</template>
+
+<style scoped>
+.tag{border:1px solid transparent;border-radius:1rem;display:inline-block;font-size:.8rem;font-weight:500;line-height:1;max-height:1rem;padding:.25rem .6rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.tag--neutral{background-color:var(--color-surface);border-color:color-mix(in srgb,var(--color-border) 80%,var(--color-accent) 20%);color:var(--color-muted)}.tag--accent{background-color:var(--color-accent-soft);border-color:var(--color-accent-border);color:var(--color-accent)}
+</style>

package/{src → dist}/runtime/components/Textarea.vue

@@ -15,7 +15,7 @@ const modelValue = defineModel<string>({ default: '' });
   </orio-control-element>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 .textarea {
   width: 100%;
   padding: 0.5rem 0.75rem;
@@ -27,28 +27,22 @@ const modelValue = defineModel<string>({ default: '' });
   background-color: var(--color-bg);
   box-sizing: border-box;
   resize: vertical; /* Let user resize vertically only */
-  transition:
-    border-color 0.2s ease,
-    box-shadow 0.2s ease;
-
-  &::placeholder {
-    color: var(--color-muted);
-  }
-
-  &:hover {
-    border-color: var(--color-accent);
-  }
-
-  &:focus {
-    border-color: var(--color-accent);
-    box-shadow: 0 0 0 2px var(--color-accent-soft);
-    outline: none;
-  }
-
-  &:disabled {
-    background-color: var(--color-surface);
-    color: var(--color-muted);
-    cursor: not-allowed;
-  }
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.textarea::placeholder {
+  color: var(--color-muted);
+}
+.textarea:hover {
+  border-color: var(--color-accent);
+}
+.textarea:focus {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 2px var(--color-accent-soft);
+  outline: none;
+}
+.textarea:disabled {
+  background-color: var(--color-surface);
+  color: var(--color-muted);
+  cursor: not-allowed;
 }
 </style>

package/{src → dist}/runtime/components/view/Dates.vue

@@ -55,7 +55,5 @@ const endDate = computed(() => {
 </template>
 
 <style scoped>
-.view-date * {
-  display: inline;
-}
+.view-date *{display:inline}
 </style>

package/{src → dist}/runtime/components/view/Separator.vue

@@ -22,9 +22,5 @@ const margin = computed(() => `${props.margin}rem`);
 </template>
 
 <style scoped>
-div {
-  width: 100%;
-  border-block-end: v-bind(sizePx) v-bind(style) var(--color-border);
-  margin-block: v-bind(margin);
-}
+div{border-block-end:v-bind(sizePx) v-bind(style) var(--color-border);margin-block:v-bind(margin);width:100%}
 </style>

package/{src → dist}/runtime/components/view/Text.vue

@@ -32,52 +32,48 @@ const clampLines = computed(() => Number(props.lineClamp ?? 1));
   </div>
 </template>
 
-<style lang="scss" scoped>
+<style scoped>
 div {
   white-space: pre-wrap;
   display: flex;
   align-items: center;
   gap: 0.25rem;
-
-  &.clamp {
-    display: -webkit-box;
-    overflow: hidden;
-    line-clamp: v-bind(clampLines);
-    -webkit-line-clamp: v-bind(clampLines);
-    -webkit-box-orient: vertical;
-  }
-
-  &.uppercase {
-    text-transform: uppercase;
-  }
-
-  &.text {
-    color: var(--color-text);
-  }
-  &.title {
-    font-weight: bold;
-    color: var(--color-text);
-  }
-  &.subtitle {
-    font-weight: semi-bold;
-    color: var(--color-muted);
-  }
-  &.italics {
-    font-style: italic;
-    color: var(--color-muted);
-  }
-
-  &.small {
-    font-size: 0.75rem;
-  }
-  &.medium {
-    font-size: 0.875rem;
-  }
-  &.large {
-    font-size: 1.25rem;
-  }
-  &.extra-large {
-    font-size: 1.75rem;
-  }
+}
+div.clamp {
+  display: -webkit-box;
+  overflow: hidden;
+  line-clamp: v-bind(clampLines);
+  -webkit-line-clamp: v-bind(clampLines);
+  -webkit-box-orient: vertical;
+}
+div.uppercase {
+  text-transform: uppercase;
+}
+div.text {
+  color: var(--color-text);
+}
+div.title {
+  font-weight: bold;
+  color: var(--color-text);
+}
+div.subtitle {
+  font-weight: semi-bold;
+  color: var(--color-muted);
+}
+div.italics {
+  font-style: italic;
+  color: var(--color-muted);
+}
+div.small {
+  font-size: 0.75rem;
+}
+div.medium {
+  font-size: 0.875rem;
+}
+div.large {
+  font-size: 1.25rem;
+}
+div.extra-large {
+  font-size: 1.75rem;
 }
 </style>

package/dist/runtime/composables/index.d.ts

@@ -0,0 +1,4 @@
+export { useApi, type ApiOptions, type RequestBody, type RequestMethod, } from './useApi.js';
+export { useFuzzySearch } from './useFuzzySearch.js';
+export { useModal, type ModalProps, type OriginRect } from './useModal.js';
+export { useTheme } from './useTheme.js';

package/dist/runtime/composables/index.js

@@ -0,0 +1,6 @@
+export {
+  useApi
+} from "./useApi.js";
+export { useFuzzySearch } from "./useFuzzySearch.js";
+export { useModal } from "./useModal.js";
+export { useTheme } from "./useTheme.js";

package/dist/runtime/composables/useApi.d.ts

@@ -0,0 +1,10 @@
+export type RequestBody = Record<string, unknown>;
+export type RequestMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
+export interface ApiOptions {
+    method?: RequestMethod;
+    body?: RequestBody;
+    signal?: AbortSignal;
+    query?: Record<string, unknown>;
+}
+export declare function useApi<T = unknown>(url: string): Promise<T>;
+export declare function useApi<T = unknown>(url: string, options: ApiOptions): Promise<T>;

package/dist/runtime/composables/useApi.js

@@ -0,0 +1,9 @@
+import { $fetch } from "ofetch";
+export async function useApi(url, options) {
+  return await $fetch(url, {
+    method: options?.method || "GET",
+    body: options?.body,
+    signal: options?.signal,
+    query: options?.query
+  });
+}

package/dist/runtime/composables/useFuzzySearch.d.ts

@@ -0,0 +1,10 @@
+import { type MaybeRef } from 'vue';
+import { useFuse, type FuseOptions } from '@vueuse/integrations/useFuse';
+/**
+ * Search using Fuse.js fuzzy search
+ * @param dataSource - Array of strings or objects to search
+ * @param search - Search query string
+ * @param options - Fuse.js options (e.g., { keys: ['name'] })
+ */
+export declare function useFuzzySearch(dataSource: MaybeRef<string[]>, search: MaybeRef<string>): ReturnType<typeof useFuse>;
+export declare function useFuzzySearch<T extends object>(dataSource: MaybeRef<T[]>, search: MaybeRef<string>, options: FuseOptions<T>): ReturnType<typeof useFuse>;

package/dist/runtime/composables/useFuzzySearch.js

@@ -0,0 +1,22 @@
+import { computed, unref } from "vue";
+import { useFuse } from "@vueuse/integrations/useFuse";
+export function useFuzzySearch(dataSource, search, options) {
+  const isObjectArray = !!options;
+  if (!isObjectArray) {
+    const wrappedData = computed(() => {
+      const data = unref(dataSource);
+      return data.map((str) => ({ value: str }));
+    });
+    const { results } = useFuse(search, wrappedData, {
+      fuseOptions: { keys: ["value"] },
+      matchAllWhenSearchEmpty: true
+    });
+    return computed(() => results.value.map(({ item }) => item.value));
+  } else {
+    const { results } = useFuse(search, dataSource, {
+      fuseOptions: options,
+      matchAllWhenSearchEmpty: true
+    });
+    return computed(() => results.value.map(({ item }) => item));
+  }
+}

package/dist/runtime/composables/useModal.d.ts

@@ -0,0 +1,15 @@
+export interface OriginRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface ModalProps {
+    show: boolean;
+    origin: OriginRect | null;
+    'onUpdate:show': (state: boolean) => void;
+}
+export declare function useModal(): {
+    modalProps: import("vue").Ref<any, any>;
+    openModal: (event?: MouseEvent) => void;
+};

package/dist/runtime/composables/useModal.js

@@ -0,0 +1,28 @@
+import { ref } from "vue";
+export function useModal() {
+  const modalProps = ref({
+    show: false,
+    origin: null,
+    "onUpdate:show": (state) => updateShow(state)
+  });
+  function updateShow(state) {
+    modalProps.value.show = state;
+  }
+  function openModal(event) {
+    modalProps.value.origin = null;
+    if (!event) {
+      modalProps.value.show = true;
+      return;
+    }
+    const target = event.target;
+    const rect = target.getBoundingClientRect();
+    modalProps.value.origin = {
+      x: rect.left,
+      y: rect.top,
+      width: rect.width,
+      height: rect.height
+    };
+    modalProps.value.show = true;
+  }
+  return { modalProps, openModal };
+}

package/dist/runtime/composables/useTheme.d.ts

@@ -0,0 +1,6 @@
+export declare function useTheme(): {
+    theme: import("@vueuse/shared").RemovableRef<string>;
+    setTheme: (name: string) => void;
+    mode: import("@vueuse/shared").RemovableRef<string>;
+    setMode: (name: string) => void;
+};

package/dist/runtime/composables/useTheme.js

@@ -0,0 +1,23 @@
+import { onMounted } from "vue";
+import { useLocalStorage } from "@vueuse/core";
+export function useTheme() {
+  const theme = useLocalStorage("orio-theme", "navy");
+  const mode = useLocalStorage("orio-mode", "dark");
+  function setTheme(name) {
+    theme.value = name;
+    if (typeof document !== "undefined") {
+      document.documentElement.setAttribute("data-theme", name);
+    }
+  }
+  function setMode(name) {
+    mode.value = name;
+    if (typeof document !== "undefined") {
+      document.documentElement.setAttribute("data-mode", name);
+    }
+  }
+  onMounted(() => {
+    setTheme(theme.value);
+    setMode(mode.value);
+  });
+  return { theme, setTheme, mode, setMode };
+}

package/dist/runtime/index.d.ts

@@ -0,0 +1,20 @@
+export { default as Button } from './components/Button.vue.js';
+export { default as Input } from './components/Input.vue.js';
+export { default as Textarea } from './components/Textarea.vue.js';
+export { default as CheckBox } from './components/CheckBox.vue.js';
+export { default as DatePicker } from './components/DatePicker.vue.js';
+export { default as DateRangePicker } from './components/DateRangePicker.vue.js';
+export { default as Selector } from './components/Selector.vue.js';
+export { default as Tag } from './components/Tag.vue.js';
+export { default as Icon } from './components/Icon.vue.js';
+export { default as LoadingSpinner } from './components/LoadingSpinner.vue.js';
+export { default as Modal } from './components/Modal.vue.js';
+export { default as Popover } from './components/Popover.vue.js';
+export { default as EmptyState } from './components/EmptyState.vue.js';
+export { default as DashedContainer } from './components/DashedContainer.vue.js';
+export { default as ControlElement } from './components/ControlElement.vue.js';
+export { default as ViewText } from './components/view/Text.vue.js';
+export { default as ViewDates } from './components/view/Dates.vue.js';
+export { default as ViewSeparator } from './components/view/Separator.vue.js';
+export * from './composables/index.js';
+export { iconRegistry, type IconName } from './utils/icon-registry.js';

package/dist/runtime/index.js

@@ -0,0 +1,20 @@
+export { default as Button } from "./components/Button.vue";
+export { default as Input } from "./components/Input.vue";
+export { default as Textarea } from "./components/Textarea.vue";
+export { default as CheckBox } from "./components/CheckBox.vue";
+export { default as DatePicker } from "./components/DatePicker.vue";
+export { default as DateRangePicker } from "./components/DateRangePicker.vue";
+export { default as Selector } from "./components/Selector.vue";
+export { default as Tag } from "./components/Tag.vue";
+export { default as Icon } from "./components/Icon.vue";
+export { default as LoadingSpinner } from "./components/LoadingSpinner.vue";
+export { default as Modal } from "./components/Modal.vue";
+export { default as Popover } from "./components/Popover.vue";
+export { default as EmptyState } from "./components/EmptyState.vue";
+export { default as DashedContainer } from "./components/DashedContainer.vue";
+export { default as ControlElement } from "./components/ControlElement.vue";
+export { default as ViewText } from "./components/view/Text.vue";
+export { default as ViewDates } from "./components/view/Dates.vue";
+export { default as ViewSeparator } from "./components/view/Separator.vue";
+export * from "./composables/index.js";
+export { iconRegistry } from "./utils/icon-registry.js";

package/dist/runtime/utils/icon-registry.d.ts

@@ -0,0 +1,2 @@
+export declare const iconRegistry: Record<string, string>;
+export type IconName = keyof typeof iconRegistry;

package/{src/runtime/utils/icon-registry.ts → dist/runtime/utils/icon-registry.js}

@@ -1,41 +1,26 @@
-// Icon registry with bundled SVG icons
-
-export const iconRegistry: Record<string, string> = {
+export const iconRegistry = {
   // Loading spinner (line-md:loading-loop)
-  'loading-loop': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="2" r="0"><animate attributeName="r" begin="0" calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="2" r="0" transform="rotate(45 12 12)"><animate attributeName="r" begin="0.125s" calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="2" r="0" transform="rotate(90 12 12)"><animate attributeName="r" begin="0.25s" calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="2" r="0" transform="rotate(135 12 12)"><animate attributeName="r" begin="0.375s" calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="2" r="0" transform="rotate(180 12 12)"><animate attributeName="r" begin="0.5s" calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="2" r="0" transform="rotate(225 12 12)"><animate attributeName="r" begin="0.625s" calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="2" r="0" transform="rotate(270 12 12)"><animate attributeName="r" begin="0.75s" calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="2" r="0" transform="rotate(315 12 12)"><animate attributeName="r" begin="0.875s" calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle></svg>`,
-
+  "loading-loop": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="12" cy="2" r="0"><animate attributeName="r" begin="0" calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="2" r="0" transform="rotate(45 12 12)"><animate attributeName="r" begin="0.125s" calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="2" r="0" transform="rotate(90 12 12)"><animate attributeName="r" begin="0.25s" calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="2" r="0" transform="rotate(135 12 12)"><animate attributeName="r" begin="0.375s" calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="2" r="0" transform="rotate(180 12 12)"><animate attributeName="r" begin="0.5s" calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="2" r="0" transform="rotate(225 12 12)"><animate attributeName="r" begin="0.625s" calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="2" r="0" transform="rotate(270 12 12)"><animate attributeName="r" begin="0.75s" calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle><circle cx="12" cy="2" r="0" transform="rotate(315 12 12)"><animate attributeName="r" begin="0.875s" calcMode="spline" dur="1s" keySplines="0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8" repeatCount="indefinite" values="0;2;0;0"/></circle></svg>`,
   // Chevron down (mdi-light:chevron-down)
-  'chevron-down': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6z"/></svg>`,
-
+  "chevron-down": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6l-6-6z"/></svg>`,
   // Chevron up
-  'chevron-up': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z"/></svg>`,
-
+  "chevron-up": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z"/></svg>`,
   // Edit (material-symbols:edit-sharp)
   edit: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3 21v-4.25L16.2 3.575q.3-.275.663-.425t.762-.15t.775.15t.65.45L20.425 5q.3.275.438.65T21 6.4q0 .4-.137.763t-.438.662L7.25 21zM17.6 7.8L19 6.4L17.6 5l-1.4 1.4z"/></svg>`,
-
   // Check / Checkmark
   check: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M9 16.17L4.83 12l-1.42 1.41L9 19L21 7l-1.41-1.41z"/></svg>`,
-
   // Plus / Add
   plus: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>`,
-
   // Calendar
   calendar: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m0 16H5V10h14zm0-12H5V6h14zM7 12h5v5H7z"/></svg>`,
-
   // Close / X
   close: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"/></svg>`,
-
   // Search / Magnifying glass
   search: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5A6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5S14 7.01 14 9.5S11.99 14 9.5 14"/></svg>`,
-
   // Upload
   upload: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M9 16h6v-6h4l-7-7l-7 7h4zm-4 2h14v2H5z"/></svg>`,
-
   // Download
   download: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19 9h-4V3H9v6H5l7 7zM5 18v2h14v-2z"/></svg>`,
-
   // Delete / Trash
-  delete: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zm2.46-7.12l1.41-1.41L12 12.59l2.12-2.12l1.41 1.41L13.41 14l2.12 2.12l-1.41 1.41L12 15.41l-2.12 2.12l-1.41-1.41L10.59 14zM15.5 4l-1-1h-5l-1 1H5v2h14V4z"/></svg>`,
+  delete: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zm2.46-7.12l1.41-1.41L12 12.59l2.12-2.12l1.41 1.41L13.41 14l2.12 2.12l-1.41 1.41L12 15.41l-2.12 2.12l-1.41-1.41L10.59 14zM15.5 4l-1-1h-5l-1 1H5v2h14V4z"/></svg>`
 };
-
-export type IconName = keyof typeof iconRegistry;

package/dist/types.d.mts

@@ -0,0 +1,7 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module.js'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { default } from './module.js'

package/dist/types.d.ts

@@ -0,0 +1,7 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { default } from './module'

package/package.json

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