orio-ui 1.0.5 → 1.1.0

package/README.md

@@ -41,7 +41,7 @@ That's it! All components and composables are now auto-imported.
 ```vue
 <template>
   <div>
-    <orio-button type="primary" @click="handleClick"> Click Me </orio-button>
+    <orio-button variant="primary" @click="handleClick"> Click Me </orio-button>
 
     <orio-input v-model="email" label="Email" placeholder="you@example.com" />
 

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0 || ^4.0.0"
   },
-  "version": "1.0.5",
+  "version": "1.1.0",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/runtime/components/Button.vue

@@ -2,14 +2,14 @@
 import { computed, toRefs, useAttrs, useSlots } from 'vue';
 
 interface Props {
-  type?: 'primary' | 'secondary' | 'subdued';
+  variant?: 'primary' | 'secondary' | 'subdued';
   icon?: string;
   loading?: boolean;
   disabled?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  type: 'primary',
+  variant: 'primary',
 });
 
 const { loading, disabled } = toRefs(props);
@@ -37,7 +37,7 @@ function click(event: PointerEvent) {
   <orio-control-element>
     <button
       v-bind="attrs"
-      :class="[type, 'gradient-hover', { 'icon-only': isIconOnly }]"
+      :class="[variant, 'gradient-hover', { 'icon-only': isIconOnly }]"
       @click="click"
     >
       <orio-loading-spinner v-if="loading" />
@@ -56,6 +56,8 @@ button {
   border: 1px solid transparent;
   border-radius: var(--border-radius-md);
   padding: 8px 16px;
+  font-size: 1rem;
+  line-height: 1.5;
   cursor: pointer;
   display: inline-flex;
   align-items: center;

package/dist/runtime/components/Input.vue

@@ -19,6 +19,7 @@ const text = defineModel<string>({ default: '' });
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius-md);
   font-size: 1rem;
+  line-height: 1.5;
   color: var(--color-text);
   background-color: var(--color-bg);
   box-sizing: border-box;

package/dist/runtime/components/Selector.vue

@@ -165,6 +165,7 @@ const selectorAttrs = computed(() => ({ getOptionKey, getOptionLabel }));
   border-radius: var(--border-radius-md);
   padding: 0.5rem 0.75rem;
   font-size: 0.95rem;
+  line-height: 1.5;
   color: var(--color-text);
   transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
 }

package/dist/runtime/components/SwitchButton.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+interface Props {
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  disabled: false,
+});
+
+const modelValue = defineModel<boolean>({ required: false });
+
+function toggle() {
+  if (props.disabled) return;
+  modelValue.value = !modelValue.value;
+}
+</script>
+
+<template>
+  <orio-control-element>
+    <button
+      class="switch-button"
+      :class="{ active: modelValue, disabled: disabled }"
+      :disabled="disabled"
+      @click="toggle"
+      @keydown.enter.prevent="toggle"
+      @keydown.space.prevent="toggle"
+    >
+      <slot />
+    </button>
+  </orio-control-element>
+</template>
+
+<style scoped>
+.switch-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  border-radius: var(--border-radius-md);
+  background-color: var(--color-surface);
+  color: var(--color-muted);
+  border: 1px solid var(--color-border);
+  padding: 8px 16px;
+  font-size: 1rem;
+  line-height: 1.5;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+}
+.switch-button:hover:not(.disabled) {
+  border-color: var(--color-accent);
+}
+.switch-button:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+.switch-button.active {
+  background-color: var(--color-accent-soft);
+  color: var(--color-accent);
+  border-color: var(--color-accent);
+}
+.switch-button.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+</style>

package/dist/runtime/components/Textarea.vue

@@ -22,6 +22,7 @@ const modelValue = defineModel<string>({ default: '' });
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius-md);
   font-size: 1rem;
+  line-height: 1.5;
   color: var(--color-text);
   background-color: var(--color-bg);
   box-sizing: border-box;

package/dist/runtime/index.d.ts

@@ -2,6 +2,7 @@ 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 SwitchButton } from './components/SwitchButton.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';

package/dist/runtime/index.js

@@ -2,6 +2,7 @@ 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 SwitchButton } from "./components/SwitchButton.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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orio-ui",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "description": "Modern Nuxt component library with theme support",
   "type": "module",
   "main": "./dist/module.mjs",