orio-ui 1.10.2 → 1.10.4

package/README.md

@@ -1,18 +1,18 @@
 # Orio UI
 
-A delightful, lightweight component library for Nuxt 3 applications. Built with TypeScript, fully tested, and designed for modern web development.
+A delightful, lightweight component library for Nuxt 3+ applications. Built with TypeScript, fully tested, and designed for modern web development.
 
 [![npm version](https://img.shields.io/npm/v/orio-ui.svg)](https://www.npmjs.com/package/orio-ui)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
 ## Features
 
-✨ **18 Components** - Beautiful, accessible components ready to use
+✨ **26 Components** - Beautiful, accessible components ready to use
 🎨 **Themeable** - 5 built-in accent themes with light/dark mode support
 🚀 **Auto-imported** - Works seamlessly with Nuxt's auto-import system
 📦 **Tree-shakeable** - Only bundle what you use
 🎯 **TypeScript** - Fully typed for great developer experience
-🧪 **Tested** - 71+ unit tests for reliability
+🧪 **Tested** - 240+ unit tests for reliability
 📱 **Responsive** - Mobile-first design approach
 ♿ **Accessible** - ARIA-compliant components
 
@@ -65,31 +65,37 @@ function handleClick() {
 
 ## What's Included
 
-### Components (18)
+### Components (26)
 
 #### Form Controls
 
 - **Input** - Text input with label support
 - **Textarea** - Multi-line text input
+- **NumberInput** - Numeric input with increment/decrement (horizontal & vertical variants)
 - **CheckBox** - Custom checkbox with icon states
+- **SwitchButton** - Toggle switch component
 - **DatePicker** - Date selection with month/year options
 - **DateRangePicker** - Start and end date selection
 - **Selector** - Generic dropdown selector (single/multi-select)
 - **Tag** - Styled tag/badge component
+- **Badge** - Status badge with variants
 
 #### Interactive
 
 - **Button** - Primary, secondary, subdued variants with loading/icon support
+- **NavButton** - Navigation button component
 - **Modal** - Animated modal with origin morphing
 - **Popover** - Positioned popover with smart placement
+- **Tooltip** - Hover tooltip component
 
 #### Display
 
-- **Icon** - SVG icon system with 12 bundled icons
+- **Icon** - SVG icon system with 97 bundled icons
 - **LoadingSpinner** - Animated loading indicator
 - **EmptyState** - Empty state placeholder
 - **DashedContainer** - Dashed border container with icon
 - **ControlElement** - Form control wrapper
+- **AnimatedContainer** - Flex container with fade-in animation and optional sound
 
 #### View
 
@@ -97,12 +103,23 @@ function handleClick() {
 - **Dates** - Date range display formatter
 - **Separator** - Visual divider
 
-### Composables (4)
+#### Gallery
+
+- **Carousel** - Image carousel component
+
+#### Upload
+
+- **Upload** - File upload component
+
+### Composables (7)
 
 - **useTheme** - Theme and color mode management
 - **useModal** - Modal state with animation origin tracking
 - **useFuzzySearch** - Fuzzy search powered by Fuse.js
 - **useApi** - Type-safe API request wrapper
+- **useDecimalFormatter** - Number formatting utilities
+- **usePressAndHold** - Press and hold interaction handler
+- **useSound** - Audio playback with CDN-hosted sounds
 
 ### Theming
 
@@ -166,8 +183,8 @@ npm run docs:dev
 orio-ui/
 ├── src/
 │   ├── runtime/
-│   │   ├── components/   # 18 Vue components
-│   │   ├── composables/  # 4 composables
+│   │   ├── components/   # 26 Vue components
+│   │   ├── composables/  # 7 composables
 │   │   ├── assets/css/   # Theme CSS files
 │   │   └── utils/        # Icon registry
 │   └── module.ts         # Nuxt Module definition

package/dist/module.json

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

package/dist/runtime/components/AnimatedContainer.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useSound } from "../composables/useSound";
+
 interface Props {
   direction?: "column" | "row";
 }
@@ -6,11 +8,13 @@ interface Props {
 withDefaults(defineProps<Props>(), {
   direction: "row",
 });
+
+const { play } = useSound();
 </script>
 
 <template>
   <div class="animated-container" :class="[direction]">
-    <slot />
+    <slot :play />
   </div>
 </template>
 

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

@@ -4,3 +4,4 @@ export { useModal, type ModalProps, type OriginRect } from "./useModal.js";
 export { useTheme } from "./useTheme.js";
 export { useDecimalFormatter } from "./useDecimalFormatter.js";
 export { usePressAndHold } from "./usePressAndHold.js";
+export { useSound, type SoundOptions } from "./useSound.js";

package/dist/runtime/composables/index.js

@@ -6,3 +6,4 @@ export { useModal } from "./useModal.js";
 export { useTheme } from "./useTheme.js";
 export { useDecimalFormatter } from "./useDecimalFormatter.js";
 export { usePressAndHold } from "./usePressAndHold.js";
+export { useSound } from "./useSound.js";

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

@@ -0,0 +1,7 @@
+export interface SoundOptions {
+    src?: string;
+    volume?: number;
+}
+export declare function useSound(options?: SoundOptions): {
+    play: () => void;
+};

package/dist/runtime/composables/useSound.js

@@ -0,0 +1,13 @@
+const DEFAULT_SOUND = "https://cdn.jsdelivr.net/gh/oriondor/orio-ui@main/docs/public/sounds/mechanical-switch.wav";
+export function useSound(options = {}) {
+  const { src = DEFAULT_SOUND, volume = 0.3 } = options;
+  const audio = typeof window !== "undefined" ? new Audio(src) : null;
+  const play = () => {
+    if (!audio) return;
+    audio.currentTime = 0;
+    audio.volume = volume;
+    audio.play().catch(() => {
+    });
+  };
+  return { play };
+}

package/dist/runtime/index.d.ts

@@ -1,3 +1,4 @@
+export { default as AnimatedContainer } from "./components/AnimatedContainer.vue.js";
 export { default as Button } from "./components/Button.vue.js";
 export { default as NavButton } from "./components/NavButton.vue.js";
 export { default as Input } from "./components/Input.vue.js";

package/dist/runtime/index.js

@@ -1,3 +1,4 @@
+export { default as AnimatedContainer } from "./components/AnimatedContainer.vue";
 export { default as Button } from "./components/Button.vue";
 export { default as NavButton } from "./components/NavButton.vue";
 export { default as Input } from "./components/Input.vue";

package/package.json

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