orio-ui 0.1.1 → 1.0.2

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>`,
-
+  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>`,
-
+  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>`,
-
+  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>`,
-
+  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>`,
-
+  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>`,
-
+  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>`,
-
+  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>`,
-
+  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>`,
-}
-
-export type IconName = keyof typeof iconRegistry
+  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>`
+};

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": "0.1.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",
@@ -32,7 +28,7 @@
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress preview docs",
     "lint": "eslint .",
-    "typecheck": "nuxt typecheck"
+    "typecheck": "vue-tsc --noEmit"
   },
   "dependencies": {
     "@nuxt/kit": "^3.15.3",

package/nuxt.config.ts

@@ -1,38 +0,0 @@
-// https://nuxt.com/docs/api/configuration/nuxt-config
-export default defineNuxtConfig({
-  // Makes this a Nuxt Layer
-  extends: [],
-
-  css: ['./src/runtime/assets/css/main.css'],
-
-  // Auto-import components with Orio prefix
-  components: {
-    dirs: [
-      {
-        path: './src/runtime/components',
-        prefix: 'Orio',
-        pathPrefix: false
-      }
-    ]
-  },
-
-  // Auto-import composables
-  imports: {
-    dirs: ['./src/runtime/composables']
-  },
-
-  typescript: {
-    strict: true,
-    typeCheck: true
-  },
-
-  vite: {
-    css: {
-      preprocessorOptions: {
-        scss: {}
-      }
-    }
-  },
-
-  compatibilityDate: '2025-01-15'
-})

package/src/module.ts

@@ -1,16 +0,0 @@
-import { defineNuxtModule } from '@nuxt/kit'
-
-export default defineNuxtModule({
-  meta: {
-    name: 'orio-ui',
-    configKey: 'orioUi',
-    compatibility: {
-      nuxt: '^3.0.0 || ^4.0.0'
-    }
-  },
-  defaults: {},
-  setup() {
-    // Module setup is handled by the layer (nuxt.config.ts)
-    // This module entry is required for the build process
-  }
-})

package/src/runtime/assets/css/animation.css

@@ -1,88 +0,0 @@
-:root {
-  /* --- motion tokens --- */
-  --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);
-}
-
-/* fade */
-.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(-1 * var(--motion-distance-small)));
-}
-
-/* fade-slide */
-.animate-fade-slide-enter-active,
-.animate-fade-slide-leave-active,
-.animate-fade-slide-appear-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) * 0.08s);
-}
-
-.animate-fade-slide-enter-from,
-.animate-fade-slide-appear-from {
-  opacity: 0;
-  transform: translateY(var(--motion-distance-medium));
-}
-
-.animate-fade-slide-leave-to {
-  opacity: 0;
-  transform: translateY(calc(-1 * var(--motion-distance-large)));
-}
-
-.animate-fade-slide-move {
-  transition: transform var(--motion-duration-medium) ease;
-}
-
-/* fade-reverse */
-.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));
-}
-
-/* fade-slide-reverse */
-.animate-fade-slide-reverse-enter-active,
-.animate-fade-slide-reverse-leave-active,
-.animate-fade-slide-reverse-appear-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) * 0.08s);
-}
-
-.animate-fade-slide-reverse-enter-from,
-.animate-fade-slide-reverse-appear-from {
-  opacity: 0;
-  transform: translateY(calc(-1 * var(--motion-distance-medium)));
-}
-
-.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/src/runtime/assets/css/colors.css

@@ -1,142 +0,0 @@
-/* 1) Role-based tokens (don’t change these names in CSS) */
-:root {
-  --color-bg: #ffffff;
-  --color-surface: #f7f8fa;
-  --color-text: #0e1116;
-  --color-muted: #626a78;
-  --color-border: #bfbfc2;
-
-  /* Accent family */
-  --color-accent: #1f3a8a;
-  --color-accent-ink: #ffffff;
-  --color-accent-soft: #eef2ff;
-  --color-accent-border: #c7d2fe;
-  --color-accent-hover: color-mix(in srgb, var(--color-accent) 85%, black 15%);
-  --color-accent-active: color-mix(in srgb, var(--color-accent) 75%, black 25%);
-}
-
-/* 2) Category themes (light vs dark) */
-
-/* Light (default, already matches your root) */
-:root[data-mode="light"] {
-  --color-bg: #ffffff;
-  --color-surface: #f7f8fa;
-  --color-text: #0e1116;
-  --color-muted: #626a78;
-  --color-border: #bfbfc2;
-}
-
-/* Dark */
-:root[data-mode="dark"] {
-  --color-bg: #0e1116;
-  --color-surface: #1a1d23;
-  --color-text: #ffffff;
-  --color-muted: #a0a7b5;
-  --color-border: #2e333d;
-
-  --color-accent-ink: #ffffff;
-  --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%, white 70%);
-  --color-accent-active: color-mix(in srgb, var(--color-accent) 80%, white 25%);
-}
-
-/* 3) Accent themes (just accents, independent of light/dark) */
-
-:root[data-theme="navy"] {
-  --color-accent: hsl(219 20% 25%);
-  --color-accent-soft: hsl(221 100% 97%);
-  --color-accent-border: hsl(221 61% 84%);
-}
-
-:root[data-theme="teal"] {
-  --color-accent: hsl(174 72% 28%);
-  --color-accent-soft: hsl(174 55% 94%);
-  --color-accent-border: hsl(174 40% 75%);
-}
-
-:root[data-theme="forest"] {
-  --color-accent: hsl(152 45% 25%);
-  --color-accent-soft: hsl(152 45% 94%);
-  --color-accent-border: hsl(152 30% 72%);
-}
-
-:root[data-theme="wine"] {
-  --color-accent: hsl(350 55% 34%);
-  --color-accent-soft: hsl(350 60% 96%);
-  --color-accent-border: hsl(350 35% 78%);
-}
-
-:root[data-theme="royal"] {
-  --color-accent: hsl(230 60% 40%);
-  --color-accent-soft: hsl(230 65% 96%);
-  --color-accent-border: hsl(230 35% 78%);
-}
-
-/* Extra colors */
-:root {
-  /* 🔴 Red */
-  --color-red: #dc2626;
-  --color-red-ink: #ffffff;
-  --color-red-soft: #fef2f2;
-  --color-red-border: #fecaca;
-  --color-red-hover: color-mix(in srgb, var(--color-red) 85%, black 15%);
-  --color-red-active: color-mix(in srgb, var(--color-red) 75%, black 25%);
-
-  /* 🟠 Orange */
-  --color-orange: #ea580c;
-  --color-orange-ink: #ffffff;
-  --color-orange-soft: #fff7ed;
-  --color-orange-border: #fed7aa;
-  --color-orange-hover: color-mix(in srgb, var(--color-orange) 85%, black 15%);
-  --color-orange-active: color-mix(in srgb, var(--color-orange) 75%, black 25%);
-
-  /* 🟡 Yellow */
-  --color-yellow: #ca8a04;
-  --color-yellow-ink: #ffffff;
-  --color-yellow-soft: #fefce8;
-  --color-yellow-border: #fef08a;
-  --color-yellow-hover: color-mix(in srgb, var(--color-yellow) 85%, black 15%);
-  --color-yellow-active: color-mix(in srgb, var(--color-yellow) 75%, black 25%);
-
-  /* 🟢 Green */
-  --color-green: #15803d;
-  --color-green-ink: #ffffff;
-  --color-green-soft: #f0fdf4;
-  --color-green-border: #bbf7d0;
-  --color-green-hover: color-mix(in srgb, var(--color-green) 85%, black 15%);
-  --color-green-active: color-mix(in srgb, var(--color-green) 75%, black 25%);
-
-  /* 🩵 Teal / Cyan */
-  --color-teal: #0d9488;
-  --color-teal-ink: #ffffff;
-  --color-teal-soft: #f0fdfa;
-  --color-teal-border: #99f6e4;
-  --color-teal-hover: color-mix(in srgb, var(--color-teal) 85%, black 15%);
-  --color-teal-active: color-mix(in srgb, var(--color-teal) 75%, black 25%);
-
-  /* 🔵 Blue */
-  --color-blue: #2563eb;
-  --color-blue-ink: #ffffff;
-  --color-blue-soft: #eff6ff;
-  --color-blue-border: #bfdbfe;
-  --color-blue-hover: color-mix(in srgb, var(--color-blue) 85%, black 15%);
-  --color-blue-active: color-mix(in srgb, var(--color-blue) 75%, black 25%);
-
-  /* 🟣 Purple */
-  --color-purple: #7e22ce;
-  --color-purple-ink: #ffffff;
-  --color-purple-soft: #faf5ff;
-  --color-purple-border: #e9d5ff;
-  --color-purple-hover: color-mix(in srgb, var(--color-purple) 85%, black 15%);
-  --color-purple-active: color-mix(in srgb, var(--color-purple) 75%, black 25%);
-
-  /* 💗 Pink */
-  --color-pink: #db2777;
-  --color-pink-ink: #ffffff;
-  --color-pink-soft: #fdf2f8;
-  --color-pink-border: #fbcfe8;
-  --color-pink-hover: color-mix(in srgb, var(--color-pink) 85%, black 15%);
-  --color-pink-active: color-mix(in srgb, var(--color-pink) 75%, black 25%);
-}

package/src/runtime/assets/css/main.css

@@ -1,11 +0,0 @@
-/* Main entry point for i UI styles */
-@import "./colors.css";
-@import "./animation.css";
-@import "./scroll.css";
-
-/* Base reset for Orio components */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}

package/src/runtime/assets/css/scroll.css

@@ -1,46 +0,0 @@
-/* ===== Scrollbar (WebKit) ===== */
-::-webkit-scrollbar {
-  width: 12px;
-  height: 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-radius: 8px;
-  border: 3px solid var(--color-surface);
-  transition: background-color 0.2s ease;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: var(--color-accent);
-}
-
-::-webkit-scrollbar-corner {
-  background: var(--color-surface);
-}
-
-/* ===== Scrollbar (Firefox) ===== */
-* {
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-accent-border) var(--color-surface);
-}
-
-/* ===== Dark mode adjustments ===== */
-: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/src/runtime/components/CheckBox.vue

@@ -1,103 +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 lang="scss" scoped>
-.checkbox {
-  --box-size: 1rem;
-
-  &-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);
-  }
-
-  &-input {
-    position: absolute;
-    inset: 0;
-    width: var(--box-size);
-    height: 1rem;
-    margin: 0;
-    opacity: 0;
-  }
-
-  &-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-input:checked + .checkbox-box {
-    background-color: var(--color-accent);
-    border-color: var(--color-accent);
-  }
-
-  .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);
-    }
-  }
-
-  &-label:hover .checkbox-box {
-    border-color: var(--color-accent);
-  }
-  .checkbox-input:focus-visible + .checkbox-box {
-    outline: 2px solid var(--color-accent);
-    outline-offset: 2px;
-  }
-}
-</style>

package/src/runtime/components/DatePicker.vue

@@ -1,84 +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 * {
-  width: 100%;
-  cursor: pointer;
-}
-
-.date-picker-label {
-  display: inline-flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  font-size: 0.9rem;
-  color: var(--color-text);
-}
-
-.date-input {
-  /* border-box allows correct sizing for input */
-  box-sizing: border-box;
-  appearance: none;
-  background-color: var(--color-bg);
-  border: 1px solid var(--color-border);
-  border-radius: 4px;
-  padding: 0.4rem 0.6rem;
-  color: var(--color-text);
-  font-size: 0.95rem;
-  transition:
-    border-color 0.2s ease,
-    box-shadow 0.2s ease;
-}
-
-/* Hover + focus */
-.date-input:hover {
-  border-color: var(--color-accent);
-}
-.date-input:focus {
-  border-color: var(--color-accent);
-  box-shadow: 0 0 0 2px var(--color-accent-soft);
-  outline: none;
-}
-
-/* Disabled */
-.date-input:disabled {
-  background-color: var(--color-surface);
-  color: var(--color-muted);
-  cursor: not-allowed;
-}
-
-/* Calendar icon (WebKit browsers like Chrome/Safari) */
-.date-input::-webkit-calendar-picker-indicator {
-  cursor: pointer;
-  filter: invert(36%) sepia(65%) saturate(325%) hue-rotate(180deg);
-  opacity: 0.7;
-  transition: opacity 0.2s ease;
-}
-.date-input::-webkit-calendar-picker-indicator:hover {
-  opacity: 1;
-}
-</style>