orio-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 oriondor
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,237 @@
+# Orio UI
+
+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
+🎨 **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
+📱 **Responsive** - Mobile-first design approach
+♿ **Accessible** - ARIA-compliant components
+
+## Quick Start
+
+### Installation
+
+```bash
+npm install orio-ui
+```
+
+### Setup
+
+Add Orio UI to your `nuxt.config.ts`:
+
+```typescript
+export default defineNuxtConfig({
+  extends: ["orio-ui"],
+});
+```
+
+That's it! All components and composables are now auto-imported.
+
+### Usage
+
+```vue
+<template>
+  <div>
+    <orio-button type="primary" @click="handleClick"> Click Me </orio-button>
+
+    <orio-input v-model="email" label="Email" placeholder="you@example.com" />
+
+    <orio-view-text type="title" size="large">
+      Welcome to Orio UI
+    </orio-view-text>
+  </div>
+</template>
+
+<script setup>
+const email = ref("");
+
+// Composables are auto-imported too!
+const { theme, setTheme } = useTheme();
+
+function handleClick() {
+  setTheme("ocean");
+}
+</script>
+```
+
+## What's Included
+
+### Components (18)
+
+#### Form Controls
+
+- **Input** - Text input with label support
+- **Textarea** - Multi-line text input
+- **CheckBox** - Custom checkbox with icon states
+- **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
+
+#### Interactive
+
+- **Button** - Primary, secondary, subdued variants with loading/icon support
+- **Modal** - Animated modal with origin morphing
+- **Popover** - Positioned popover with smart placement
+
+#### Display
+
+- **Icon** - SVG icon system with 12 bundled icons
+- **LoadingSpinner** - Animated loading indicator
+- **EmptyState** - Empty state placeholder
+- **DashedContainer** - Dashed border container with icon
+- **ControlElement** - Form control wrapper
+
+#### View
+
+- **Text** - Typography component with variants
+- **Dates** - Date range display formatter
+- **Separator** - Visual divider
+
+### Composables (4)
+
+- **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
+
+### Theming
+
+Built-in themes:
+
+- **Navy** (default) - Professional blue
+- **Ocean** - Fresh cyan
+- **Sunset** - Warm orange
+- **Forest** - Natural green
+- **Purple** - Creative purple
+
+All themes support light and dark modes. Fully customizable via CSS variables.
+
+```vue
+<script setup>
+const { setTheme, setMode } = useTheme();
+
+setTheme("ocean");
+setMode("dark");
+</script>
+```
+
+## Documentation
+
+Full documentation:
+
+- [Getting Started Guide](./docs/getting-started.md)
+- [Theming Guide](./docs/theming.md)
+- [Component Documentation](./docs/components/)
+- [Composable Documentation](./docs/composables/)
+- [Utils Documentation](./docs/utils/)
+
+## Development
+
+### Setup Development Environment
+
+```bash
+# Clone the repository
+git clone https://github.com/oriondor/orio-ui.git
+cd orio-ui
+
+# Install dependencies
+npm install
+
+# Run documentation site
+npm run dev
+
+# Run tests
+npm test
+
+# Build library
+npm run build
+
+# Run documentation
+npm run docs:dev
+```
+
+### Project Structure
+
+```
+orio-ui/
+├── src/runtime/
+│   ├── components/       # 18 Vue components
+│   ├── composables/      # 4 composables
+│   ├── assets/css/       # Theme CSS files
+│   └── utils/            # Icon registry
+├── tests/                # Vitest unit tests
+├── docs/                 # VitePress documentation
+└── nuxt.config.ts        # Nuxt Layer configuration
+```
+
+### Running Tests
+
+```bash
+# Run all tests
+npm test
+
+# Run tests once
+npm run test:unit
+
+# Watch mode
+npm run test:watch
+```
+
+## TypeScript Support
+
+Orio UI is written in TypeScript and provides full type definitions:
+
+```typescript
+import type { TextTypes, TagStyle } from "orio-ui/composables";
+import type { OriginRect, ModalProps } from "orio-ui/composables";
+import type { IconName } from "orio-ui/composables";
+```
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## Contributing
+
+Contributions are welcome! Please read our contributing guidelines before submitting PRs.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## License
+
+MIT © [oriondor](https://github.com/oriondor)
+
+## Changelog
+
+See [CHANGELOG.md](./CHANGELOG.md) for version history.
+
+## Credits
+
+Built with:
+
+- [Nuxt 3](https://nuxt.com/) - Vue framework
+- [VueUse](https://vueuse.org/) - Vue composables collection
+- [Fuse.js](https://fusejs.io/) - Fuzzy search library
+- [VitePress](https://vitepress.dev/) - Documentation
+- [Vitest](https://vitest.dev/) - Testing framework
+
+---
+
+**Made with ❤️ for the Nuxt community**

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.mts

@@ -0,0 +1,3 @@
+declare const _default: any;
+
+export { _default as default };

package/dist/module.d.ts

@@ -0,0 +1,3 @@
+declare const _default: any;
+
+export { _default as default };

package/dist/module.json

@@ -0,0 +1,12 @@
+{
+  "name": "orio-ui",
+  "configKey": "orioUi",
+  "compatibility": {
+    "nuxt": "^3.0.0 || ^4.0.0"
+  },
+  "version": "0.1.0",
+  "builder": {
+    "@nuxt/module-builder": "0.8.4",
+    "unbuild": "2.0.0"
+  }
+}

package/dist/module.mjs

@@ -0,0 +1,16 @@
+import { defineNuxtModule } from '@nuxt/kit';
+
+const module = defineNuxtModule({
+  meta: {
+    name: "orio-ui",
+    configKey: "orioUi",
+    compatibility: {
+      nuxt: "^3.0.0 || ^4.0.0"
+    }
+  },
+  defaults: {},
+  setup() {
+  }
+});
+
+export { module as default };

package/dist/runtime/assets/css/animation.css

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

@@ -0,0 +1 @@
+:root{--color-bg:#fff;--color-surface:#f7f8fa;--color-text:#0e1116;--color-muted:#626a78;--color-border:#bfbfc2;--color-accent:#1f3a8a;--color-accent-ink:#fff;--color-accent-soft:#eef2ff;--color-accent-border:#c7d2fe;--color-accent-hover:color-mix(in srgb,var(--color-accent) 85%,#000 15%);--color-accent-active:color-mix(in srgb,var(--color-accent) 75%,#000 25%)}:root[data-mode=light]{--color-bg:#fff;--color-surface:#f7f8fa;--color-text:#0e1116;--color-muted:#626a78;--color-border:#bfbfc2}:root[data-mode=dark]{--color-bg:#0e1116;--color-surface:#1a1d23;--color-text:#fff;--color-muted:#a0a7b5;--color-border:#2e333d;--color-accent-ink:#fff;--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%,#fff 70%);--color-accent-active:color-mix(in srgb,var(--color-accent) 80%,#fff 25%)}:root[data-theme=navy]{--color-accent:#333c4d;--color-accent-soft:#f0f5ff;--color-accent-border:#bdcdef}:root[data-theme=teal]{--color-accent:#147b71;--color-accent-soft:#e7f8f6;--color-accent-border:#a6d9d4}:root[data-theme=forest]{--color-accent:#235c42;--color-accent-soft:#e9f7f0;--color-accent-border:#a2cdb9}:root[data-theme=wine]{--color-accent:#862737;--color-accent-soft:#fbeff1;--color-accent-border:#dbb3ba}:root[data-theme=royal]{--color-accent:#293da3;--color-accent-soft:#eef0fb;--color-accent-border:#b3badb}:root{--color-red:#dc2626;--color-red-ink:#fff;--color-red-soft:#fef2f2;--color-red-border:#fecaca;--color-red-hover:color-mix(in srgb,var(--color-red) 85%,#000 15%);--color-red-active:color-mix(in srgb,var(--color-red) 75%,#000 25%);--color-orange:#ea580c;--color-orange-ink:#fff;--color-orange-soft:#fff7ed;--color-orange-border:#fed7aa;--color-orange-hover:color-mix(in srgb,var(--color-orange) 85%,#000 15%);--color-orange-active:color-mix(in srgb,var(--color-orange) 75%,#000 25%);--color-yellow:#ca8a04;--color-yellow-ink:#fff;--color-yellow-soft:#fefce8;--color-yellow-border:#fef08a;--color-yellow-hover:color-mix(in srgb,var(--color-yellow) 85%,#000 15%);--color-yellow-active:color-mix(in srgb,var(--color-yellow) 75%,#000 25%);--color-green:#15803d;--color-green-ink:#fff;--color-green-soft:#f0fdf4;--color-green-border:#bbf7d0;--color-green-hover:color-mix(in srgb,var(--color-green) 85%,#000 15%);--color-green-active:color-mix(in srgb,var(--color-green) 75%,#000 25%);--color-teal:#0d9488;--color-teal-ink:#fff;--color-teal-soft:#f0fdfa;--color-teal-border:#99f6e4;--color-teal-hover:color-mix(in srgb,var(--color-teal) 85%,#000 15%);--color-teal-active:color-mix(in srgb,var(--color-teal) 75%,#000 25%);--color-blue:#2563eb;--color-blue-ink:#fff;--color-blue-soft:#eff6ff;--color-blue-border:#bfdbfe;--color-blue-hover:color-mix(in srgb,var(--color-blue) 85%,#000 15%);--color-blue-active:color-mix(in srgb,var(--color-blue) 75%,#000 25%);--color-purple:#7e22ce;--color-purple-ink:#fff;--color-purple-soft:#faf5ff;--color-purple-border:#e9d5ff;--color-purple-hover:color-mix(in srgb,var(--color-purple) 85%,#000 15%);--color-purple-active:color-mix(in srgb,var(--color-purple) 75%,#000 25%);--color-pink:#db2777;--color-pink-ink:#fff;--color-pink-soft:#fdf2f8;--color-pink-border:#fbcfe8;--color-pink-hover:color-mix(in srgb,var(--color-pink) 85%,#000 15%);--color-pink-active:color-mix(in srgb,var(--color-pink) 75%,#000 25%)}

package/dist/runtime/assets/css/cool-gradient-hover.css

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

@@ -0,0 +1 @@
+@import "./colors.css";@import "./animation.css";@import "./scroll.css";*,:after,:before{box-sizing:border-box}

package/dist/runtime/assets/css/scroll.css

@@ -0,0 +1 @@
+::-webkit-scrollbar{height:12px;width: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:3px solid var(--color-surface);border-radius:8px;-webkit-transition:background-color .2s ease;transition:background-color .2s ease}::-webkit-scrollbar-thumb:hover{background-color:var(--color-accent)}::-webkit-scrollbar-corner{background:var(--color-surface)}*{scrollbar-color:var(--color-accent-border) var(--color-surface);scrollbar-width:thin}: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/dist/runtime/components/Button.vue

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

package/dist/runtime/components/CheckBox.vue

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

package/dist/runtime/components/ControlElement.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+export interface ControlProps {
+  /**
+   * Minimal will reset margin and remove border and box shadow from every element inside the slot
+   */
+  appearance?: "normal" | "minimal";
+}
+
+withDefaults(defineProps<ControlProps>(), {
+  appearance: "normal",
+});
+</script>
+
+<template>
+  <div class="control" :class="[appearance]">
+    <label v-if="$attrs.label" class="control-label">{{ $attrs.label }}</label>
+    <div class="slot-wrapper" v-bind="$attrs">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.control {
+  margin: 0.5rem;
+}
+.control .control-label {
+  user-select: none;
+}
+.control.minimal {
+  margin: 0;
+}
+.control.minimal .slot-wrapper :first-child {
+  border: 0;
+}
+.control.minimal .slot-wrapper :first-child:focus {
+  box-shadow: none;
+}
+</style>

package/dist/runtime/components/DashedContainer.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  icon?: string;
+  text?: string;
+  size?: 'small' | 'medium' | 'large';
+}
+const props = withDefaults(defineProps<Props>(), {
+  size: 'medium',
+});
+defineEmits(['click']);
+
+const iconSize = computed(() => {
+  switch (props.size) {
+    case 'small':
+      return '2rem';
+    case 'large':
+      return '5rem';
+    default:
+      return '3rem';
+  }
+});
+</script>
+<template>
+  <div class="dashed-container gradient-hover" @click="$emit('click')">
+    <orio-icon
+      v-if="icon"
+      :name="icon"
+      class="icon-class"
+      :size="iconSize"
+    />
+    <span v-if="text" class="text-class" :size>{{ text }}</span>
+  </div>
+</template>
+
+<style scoped>
+.dashed-container {
+  cursor: pointer;
+  border: 3px dashed var(--color-border);
+  border-radius: 4px;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.dashed-container:hover .text-class {
+  color: var(--color-accent-hover);
+}
+
+.icon-class {
+  color: var(--color-muted);
+}
+
+.text-class {
+  color: var(--color-accent);
+}
+</style>

package/dist/runtime/components/DatePicker.vue

@@ -0,0 +1,30 @@
+<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 *{cursor:pointer;width:100%}.date-picker-label{color:var(--color-text);display:inline-flex;flex-direction:column;font-size:.9rem;gap:.25rem}.date-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:4px;box-sizing:border-box;color:var(--color-text);font-size:.95rem;padding:.4rem .6rem;transition:border-color .2s ease,box-shadow .2s ease}.date-input:focus,.date-input:hover{border-color:var(--color-accent)}.date-input:focus{box-shadow:0 0 0 2px var(--color-accent-soft);outline:none}.date-input:disabled{background-color:var(--color-surface);color:var(--color-muted);cursor:not-allowed}.date-input::-webkit-calendar-picker-indicator{cursor:pointer;filter:invert(36%) sepia(65%) saturate(325%) hue-rotate(180deg);opacity:.7;-webkit-transition:opacity .2s ease;transition:opacity .2s ease}.date-input::-webkit-calendar-picker-indicator:hover{opacity:1}
+</style>