orio-ui 0.1.0

package/dist/runtime/utils/icon-registry.js

@@ -0,0 +1,26 @@
+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>`,
+  // 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 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>`,
+  // 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>`
+};

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/nuxt.config.ts

@@ -0,0 +1,38 @@
+// 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/package.json

@@ -0,0 +1,99 @@
+{
+  "name": "orio-ui",
+  "version": "0.1.0",
+  "description": "Modern Nuxt component library with theme support",
+  "type": "module",
+  "main": "./dist/runtime/index.js",
+  "types": "./dist/runtime/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/runtime/index.d.ts",
+      "import": "./dist/runtime/index.js"
+    },
+    "./nuxt": {
+      "types": "./dist/module.d.ts",
+      "import": "./dist/module.mjs"
+    },
+    "./composables": {
+      "types": "./dist/runtime/composables/index.d.ts",
+      "import": "./dist/runtime/composables/index.js"
+    },
+    "./styles": "./dist/runtime/assets/css/main.css",
+    "./theme": "./dist/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",
+    "test": "vitest",
+    "test:unit": "vitest run",
+    "test:watch": "vitest watch",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs",
+    "lint": "eslint .",
+    "typecheck": "nuxt typecheck"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^3.15.3",
+    "@vueuse/core": "^11.0.0",
+    "@vueuse/integrations": "^11.0.0",
+    "fuse.js": "^7.0.0",
+    "nanoid": "^5.0.0",
+    "ofetch": "^1.5.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.2",
+    "@nuxt/eslint": "^1.12.1",
+    "@nuxt/module-builder": "^0.8.0",
+    "@vitejs/plugin-vue": "^6.0.3",
+    "@vitest/ui": "^2.1.8",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.6.0",
+    "@vue/test-utils": "^2.4.6",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-vue": "^10.6.2",
+    "globals": "^17.0.0",
+    "jsdom": "^25.0.1",
+    "nuxt": "^4.2.2",
+    "prettier": "^3.7.4",
+    "sass": "^1.70.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.52.0",
+    "vitepress": "^1.6.4",
+    "vitepress-sidebar": "^1.33.1",
+    "vitest": "^2.1.8",
+    "vue": "^3.5.13",
+    "vue-tsc": "^3.2.1"
+  },
+  "peerDependencies": {
+    "nuxt": "^3.0.0 || ^4.0.0",
+    "vue": "^3.3.0"
+  },
+  "keywords": [
+    "nuxt",
+    "nuxt-layer",
+    "vue",
+    "components",
+    "ui-library",
+    "theme",
+    "orio-ui"
+  ],
+  "author": "oriondor",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/oriondor/orio-ui.git"
+  },
+  "homepage": "https://github.com/oriondor/orio-ui#readme",
+  "bugs": {
+    "url": "https://github.com/oriondor/orio-ui/issues"
+  }
+}

package/src/module.ts

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,88 @@
+: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

@@ -0,0 +1,142 @@
+/* 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/cool-gradient-hover.scss

@@ -0,0 +1,33 @@
+.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/src/runtime/assets/css/main.css

@@ -0,0 +1,11 @@
+/* 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

@@ -0,0 +1,46 @@
+/* ===== 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/Button.vue

@@ -0,0 +1,110 @@
+<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 lang="scss" 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;
+
+  &.icon-only {
+    padding: 0;
+    border-radius: 50%;
+  }
+
+  &:disabled {
+    background-color: var(--color-accent-soft);
+    color: var(--color-muted);
+    border-color: var(--color-accent-border);
+    cursor: not-allowed;
+  }
+
+  &:active {
+    border: 1px solid var(--color-accent-border);
+  }
+
+  &.primary {
+    --gh-color: var(--color-accent);
+  }
+
+  &.secondary {
+    background-color: transparent;
+    border: 1px solid var(--color-accent);
+    color: var(--color-accent);
+    &:hover {
+      color: var(--color-accent-hover);
+    }
+  }
+
+  &.subdued {
+    background-color: transparent;
+    color: var(--color-accent);
+    &:hover {
+      color: var(--color-accent-hover);
+    }
+  }
+
+  &:active {
+    border-color: var(--color-accent-border) !important;
+  }
+
+  &:hover {
+    color: var(--color-accent-ink);
+  }
+}
+</style>