orio-ui 1.23.3 → 1.24.0

package/README.md

@@ -8,7 +8,7 @@ A delightful, lightweight component library for Nuxt 3+ applications. Built with
 
 ## Features
 
-✨ **56 Components** - Beautiful, accessible components ready to use
+✨ **58 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
@@ -67,7 +67,7 @@ function handleClick() {
 
 ## What's Included
 
-### Components (56)
+### Components (58)
 
 #### Form Controls
 
@@ -194,7 +194,7 @@ npm run docs:dev
 orio-ui/
 ├── src/
 │   ├── runtime/
-│   │   ├── components/   # 56 Vue components
+│   │   ├── components/   # 58 Vue components
 │   │   ├── composables/  # 13 composables
 │   │   ├── assets/css/   # Theme CSS files
 │   │   └── utils/        # Icon registry

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0 || ^4.0.0"
   },
-  "version": "1.23.3",
+  "version": "1.24.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/Calendar.d.vue.ts

@@ -0,0 +1,33 @@
+export type MarkerVariant = "accent" | "success" | "alert" | "danger" | "muted";
+export interface CalendarMarker {
+    variant: MarkerVariant;
+    start: string;
+    end: string;
+}
+export interface CalendarProps {
+    selected?: string | null;
+    markers?: CalendarMarker[];
+    getMarker?: (iso: string) => CalendarMarker | null;
+    isDisabled?: (iso: string) => boolean;
+    weekStartsOn?: 0 | 1;
+}
+type __VLS_Props = CalendarProps;
+type __VLS_ModelProps = {
+    "anchor"?: string | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (iso: string) => any;
+    dayEnter: (iso: string) => any;
+    "update:anchor": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((iso: string) => any) | undefined;
+    onDayEnter?: ((iso: string) => any) | undefined;
+    "onUpdate:anchor"?: ((value: string | null) => any) | undefined;
+}>, {
+    selected: string | null;
+    markers: CalendarMarker[];
+    weekStartsOn: 0 | 1;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Calendar.vue

@@ -0,0 +1,251 @@
+<script setup>
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import {
+  addMonths,
+  formatISO,
+  isSameDay,
+  parseISO,
+  startOfMonth
+} from "../utils/date";
+const props = defineProps({
+  selected: { type: [String, null], required: false, default: null },
+  markers: { type: Array, required: false, default: () => [] },
+  getMarker: { type: Function, required: false },
+  isDisabled: { type: Function, required: false },
+  weekStartsOn: { type: Number, required: false, default: 1 }
+});
+const anchor = defineModel("anchor", { type: [String, null], ...{ default: null } });
+const emit = defineEmits(["select", "dayEnter"]);
+const { locale, t } = useI18n();
+const today = /* @__PURE__ */ new Date();
+const visibleMonth = computed(
+  () => startOfMonth(parseISO(anchor.value) ?? /* @__PURE__ */ new Date())
+);
+function shift(delta) {
+  anchor.value = formatISO(addMonths(visibleMonth.value, delta));
+}
+const monthLabel = computed(
+  () => new Intl.DateTimeFormat(locale.value, {
+    month: "long",
+    year: "numeric"
+  }).format(visibleMonth.value)
+);
+const weekdayLabels = computed(() => {
+  const sunday = new Date(2024, 0, 7);
+  return Array.from({ length: 7 }, (_, i) => {
+    const d = new Date(sunday);
+    d.setDate(sunday.getDate() + (i + props.weekStartsOn) % 7);
+    return new Intl.DateTimeFormat(locale.value, { weekday: "short" }).format(
+      d
+    );
+  });
+});
+function resolveMarker(iso) {
+  if (props.getMarker) {
+    const m = props.getMarker(iso);
+    if (m) {
+      return {
+        variant: m.variant,
+        isStart: iso === m.start,
+        isEnd: iso === m.end
+      };
+    }
+  }
+  for (let i = props.markers.length - 1; i >= 0; i--) {
+    const m = props.markers[i];
+    if (iso >= m.start && iso <= m.end) {
+      return {
+        variant: m.variant,
+        isStart: iso === m.start,
+        isEnd: iso === m.end
+      };
+    }
+  }
+  return null;
+}
+const days = computed(() => {
+  const first = visibleMonth.value;
+  const startWeekday = first.getDay();
+  const offset = (startWeekday - props.weekStartsOn + 7) % 7;
+  const gridStart = new Date(first);
+  gridStart.setDate(gridStart.getDate() - offset);
+  const sel = parseISO(props.selected);
+  const result = [];
+  for (let i = 0; i < 42; i++) {
+    const d = new Date(gridStart);
+    d.setDate(gridStart.getDate() + i);
+    const iso = formatISO(d);
+    result.push({
+      iso,
+      label: d.getDate(),
+      inMonth: d.getMonth() === first.getMonth(),
+      isToday: isSameDay(d, today),
+      isSelected: !!sel && isSameDay(d, sel),
+      isDisabled: props.isDisabled?.(iso) ?? false,
+      marker: resolveMarker(iso)
+    });
+  }
+  return result;
+});
+function onSelect(day) {
+  if (day.isDisabled) return;
+  emit("select", day.iso);
+}
+function onEnter(day) {
+  emit("dayEnter", day.iso);
+}
+</script>
+
+<template>
+  <div class="calendar">
+    <div class="calendar-nav">
+      <orio-button
+        variant="subdued"
+        icon="chevron-left"
+        :aria-label="t('calendar.previousMonth')"
+        @click="shift(-1)"
+      />
+      <span class="calendar-month-title">{{ monthLabel }}</span>
+      <orio-button
+        variant="subdued"
+        icon="chevron-right"
+        :aria-label="t('calendar.nextMonth')"
+        @click="shift(1)"
+      />
+    </div>
+    <div class="calendar-weekdays">
+      <span v-for="w in weekdayLabels" :key="w" class="calendar-weekday">
+        {{ w }}
+      </span>
+    </div>
+    <div class="calendar-grid">
+      <button
+        v-for="day in days"
+        :key="day.iso"
+        type="button"
+        class="calendar-day"
+        :class="{
+  'out-of-month': !day.inMonth,
+  today: day.isToday,
+  selected: day.isSelected,
+  'has-marker': !!day.marker,
+  [`marker-${day.marker?.variant}`]: !!day.marker,
+  'marker-start': day.marker?.isStart,
+  'marker-end': day.marker?.isEnd
+}"
+        :disabled="day.isDisabled"
+        @click="onSelect(day)"
+        @mouseenter="onEnter(day)"
+      >
+        <orio-badge v-if="day.isSelected" pill variant="primary">
+          {{ day.label }}
+        </orio-badge>
+        <template v-else>{{ day.label }}</template>
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.calendar {
+  display: inline-block;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-md);
+  padding: 0.75rem;
+  user-select: none;
+  font-size: var(--control-font-size, var(--font-md));
+  color: var(--color-text);
+  min-width: 17rem;
+}
+
+.calendar-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.calendar-month-title {
+  font-weight: 600;
+  text-transform: capitalize;
+}
+
+.calendar-weekdays,
+.calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.calendar-weekday {
+  text-align: center;
+  font-size: var(--font-xs);
+  color: var(--color-muted);
+  padding: 0.25rem 0;
+  text-transform: uppercase;
+}
+
+.calendar-day {
+  aspect-ratio: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  border-radius: var(--border-radius-sm);
+  font-size: inherit;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+.calendar-day:hover:not(:disabled):not(.has-marker):not(.selected) {
+  background-color: var(--color-surface);
+}
+.calendar-day.out-of-month {
+  color: var(--color-muted);
+  opacity: 0.45;
+}
+.calendar-day.today {
+  box-shadow: inset 0 0 0 1px var(--color-accent);
+}
+.calendar-day.has-marker {
+  background-color: var(--marker-bg);
+  color: var(--marker-color);
+  border-radius: 0;
+}
+.calendar-day.has-marker.marker-start {
+  border-top-left-radius: var(--border-radius-sm);
+  border-bottom-left-radius: var(--border-radius-sm);
+}
+.calendar-day.has-marker.marker-end {
+  border-top-right-radius: var(--border-radius-sm);
+  border-bottom-right-radius: var(--border-radius-sm);
+}
+.calendar-day.marker-accent {
+  --marker-bg: var(--color-accent-soft);
+  --marker-color: var(--color-accent);
+}
+.calendar-day.marker-success {
+  --marker-bg: var(--color-success-soft);
+  --marker-color: var(--color-success);
+}
+.calendar-day.marker-alert {
+  --marker-bg: var(--color-alert-soft);
+  --marker-color: var(--color-alert);
+}
+.calendar-day.marker-danger {
+  --marker-bg: var(--color-danger-soft);
+  --marker-color: var(--color-danger);
+}
+.calendar-day.marker-muted {
+  --marker-bg: var(--color-surface);
+  --marker-color: var(--color-muted);
+}
+.calendar-day:disabled {
+  color: var(--color-muted);
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+</style>

package/dist/runtime/components/Calendar.vue.d.ts

@@ -0,0 +1,33 @@
+export type MarkerVariant = "accent" | "success" | "alert" | "danger" | "muted";
+export interface CalendarMarker {
+    variant: MarkerVariant;
+    start: string;
+    end: string;
+}
+export interface CalendarProps {
+    selected?: string | null;
+    markers?: CalendarMarker[];
+    getMarker?: (iso: string) => CalendarMarker | null;
+    isDisabled?: (iso: string) => boolean;
+    weekStartsOn?: 0 | 1;
+}
+type __VLS_Props = CalendarProps;
+type __VLS_ModelProps = {
+    "anchor"?: string | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (iso: string) => any;
+    dayEnter: (iso: string) => any;
+    "update:anchor": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((iso: string) => any) | undefined;
+    onDayEnter?: ((iso: string) => any) | undefined;
+    "onUpdate:anchor"?: ((value: string | null) => any) | undefined;
+}>, {
+    selected: string | null;
+    markers: CalendarMarker[];
+    weekStartsOn: 0 | 1;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Form.d.vue.ts

@@ -12,8 +12,8 @@ declare const __VLS_export: <T extends object>(__VLS_props: NonNullable<Awaited<
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(FormProps & {
         modelValue?: T;
     }) & {
-        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
         onSubmit?: (() => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});

package/dist/runtime/components/Form.vue.d.ts

@@ -12,8 +12,8 @@ declare const __VLS_export: <T extends object>(__VLS_props: NonNullable<Awaited<
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(FormProps & {
         modelValue?: T;
     }) & {
-        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
         onSubmit?: (() => any) | undefined;
+        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});

package/dist/runtime/components/date/Picker.d.vue.ts

@@ -0,0 +1,26 @@
+import type { ControlProps } from "../ControlElement.vue.js";
+import type { CalendarMarker } from "../Calendar.vue.js";
+interface Props extends ControlProps {
+    placeholder?: string;
+    min?: string | null;
+    max?: string | null;
+    markers?: CalendarMarker[];
+    getMarker?: (iso: string) => CalendarMarker | null;
+    isDisabled?: (iso: string) => boolean;
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    modelValue?: string | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+}>, {
+    markers: CalendarMarker[];
+    min: string | null;
+    max: string | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/date/Picker.vue

@@ -0,0 +1,54 @@
+<script setup>
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { formatDate } from "../../utils/date";
+const props = defineProps({
+  placeholder: { type: String, required: false },
+  min: { type: [String, null], required: false, default: null },
+  max: { type: [String, null], required: false, default: null },
+  markers: { type: Array, required: false, default: () => [] },
+  getMarker: { type: Function, required: false },
+  isDisabled: { type: Function, required: false },
+  appearance: { type: String, required: false },
+  error: { type: [String, null], required: false },
+  group: { type: Boolean, required: false },
+  id: { type: String, required: false },
+  label: { type: String, required: false },
+  layout: { type: String, required: false },
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
+});
+const value = defineModel({ type: [String, null], ...{ default: null } });
+const { locale, t } = useI18n();
+const display = computed(() => formatDate(value.value, locale.value));
+const placeholderText = computed(
+  () => props.placeholder ?? t("datePicker.placeholder")
+);
+const calendarIsDisabled = computed(() => (iso) => {
+  if (props.min && iso < props.min) return true;
+  if (props.max && iso > props.max) return true;
+  return props.isDisabled?.(iso) ?? false;
+});
+function pick(iso, toggle) {
+  value.value = iso;
+  toggle(false);
+}
+</script>
+
+<template>
+  <orio-date-picker-trigger
+    v-bind="props"
+    :text="display"
+    :placeholder="placeholderText"
+  >
+    <template #default="{ toggle }">
+      <orio-calendar
+        :selected="value"
+        :markers
+        :get-marker="getMarker"
+        :is-disabled="calendarIsDisabled"
+        @select="pick($event, toggle)"
+      />
+    </template>
+  </orio-date-picker-trigger>
+</template>

package/dist/runtime/components/date/Picker.vue.d.ts

@@ -0,0 +1,26 @@
+import type { ControlProps } from "../ControlElement.vue.js";
+import type { CalendarMarker } from "../Calendar.vue.js";
+interface Props extends ControlProps {
+    placeholder?: string;
+    min?: string | null;
+    max?: string | null;
+    markers?: CalendarMarker[];
+    getMarker?: (iso: string) => CalendarMarker | null;
+    isDisabled?: (iso: string) => boolean;
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    modelValue?: string | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+}>, {
+    markers: CalendarMarker[];
+    min: string | null;
+    max: string | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/date/PickerTrigger.d.vue.ts

@@ -0,0 +1,23 @@
+import type { ControlProps } from "../ControlElement.vue.js";
+interface Props extends ControlProps {
+    text?: string;
+    placeholder?: string;
+}
+declare var __VLS_21: {
+    toggle: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    text: string;
+    placeholder: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/date/PickerTrigger.vue

@@ -0,0 +1,80 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  text: { type: String, required: false, default: "" },
+  placeholder: { type: String, required: false, default: "" },
+  appearance: { type: String, required: false },
+  error: { type: [String, null], required: false },
+  group: { type: Boolean, required: false },
+  id: { type: String, required: false },
+  label: { type: String, required: false },
+  layout: { type: String, required: false },
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
+});
+const controlProps = computed(() => {
+  const { text, placeholder, ...rest } = props;
+  return rest;
+});
+</script>
+
+<template>
+  <orio-control-element v-slot="{ id }" v-bind="controlProps">
+    <orio-popover position="bottom-right" :offset="5">
+      <template #default="{ toggle, isOpen }">
+        <button
+          :id
+          type="button"
+          class="date-trigger"
+          :aria-expanded="isOpen"
+          @click="toggle()"
+        >
+          <span :class="{ placeholder: !text }">
+            {{ text || placeholder }}
+          </span>
+          <orio-icon name="calendar" />
+        </button>
+      </template>
+      <template #content="{ toggle }">
+        <slot :toggle />
+      </template>
+    </orio-popover>
+  </orio-control-element>
+</template>
+
+<style scoped>
+.date-trigger {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--control-gap);
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--control-radius);
+  padding: var(--control-py) var(--control-px);
+  color: var(--color-text);
+  cursor: pointer;
+  user-select: none;
+  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
+}
+.date-trigger:hover {
+  border-color: var(--color-accent);
+  background-color: var(--color-surface);
+}
+.date-trigger[aria-expanded=true], .date-trigger:focus-visible {
+  border-color: var(--color-accent);
+  box-shadow: 0 0 0 2px var(--color-surface);
+  outline: none;
+}
+.date-trigger .placeholder {
+  color: var(--color-muted);
+}
+.date-trigger .icon {
+  color: var(--color-muted);
+  transition: color 0.2s ease;
+}
+.date-trigger:hover .icon {
+  color: var(--color-accent);
+}
+</style>

package/dist/runtime/components/date/PickerTrigger.vue.d.ts

@@ -0,0 +1,23 @@
+import type { ControlProps } from "../ControlElement.vue.js";
+interface Props extends ControlProps {
+    text?: string;
+    placeholder?: string;
+}
+declare var __VLS_21: {
+    toggle: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    text: string;
+    placeholder: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/date/RangePicker.d.vue.ts

@@ -0,0 +1,28 @@
+import type { ControlProps } from "../ControlElement.vue.js";
+import type { CalendarMarker } from "../Calendar.vue.js";
+import { type DateRange } from "../../utils/date.js";
+export type { DateRange };
+interface Props extends ControlProps {
+    placeholder?: string;
+    min?: string | null;
+    max?: string | null;
+    markers?: CalendarMarker[];
+    getMarker?: (iso: string) => CalendarMarker | null;
+    isDisabled?: (iso: string) => boolean;
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    modelValue?: DateRange;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: DateRange) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: DateRange) => any) | undefined;
+}>, {
+    markers: CalendarMarker[];
+    min: string | null;
+    max: string | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/date/RangePicker.vue

@@ -0,0 +1,148 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import {
+  addMonths,
+  formatDate,
+  formatISO,
+  parseISO,
+  startOfMonth
+} from "../../utils/date";
+const props = defineProps({
+  placeholder: { type: String, required: false },
+  min: { type: [String, null], required: false, default: null },
+  max: { type: [String, null], required: false, default: null },
+  markers: { type: Array, required: false, default: () => [] },
+  getMarker: { type: Function, required: false },
+  isDisabled: { type: Function, required: false },
+  appearance: { type: String, required: false },
+  error: { type: [String, null], required: false },
+  group: { type: Boolean, required: false },
+  id: { type: String, required: false },
+  label: { type: String, required: false },
+  layout: { type: String, required: false },
+  size: { type: String, required: false },
+  fill: { type: Boolean, required: false }
+});
+const range = defineModel({ type: Object, ...{
+  default: () => ({ start: null, end: null })
+} });
+const { locale, t } = useI18n();
+const display = computed(() => {
+  const start = formatDate(range.value?.start, locale.value);
+  const end = formatDate(range.value?.end, locale.value);
+  if (start && end) return `${start} \u2013 ${end}`;
+  return start || end || "";
+});
+const placeholderText = computed(
+  () => props.placeholder ?? t("dateRangePicker.placeholder")
+);
+const seedMonth = startOfMonth(parseISO(range.value?.start) ?? /* @__PURE__ */ new Date());
+const leftAnchor = ref(formatISO(seedMonth));
+const rightAnchor = ref(formatISO(addMonths(seedMonth, 1)));
+watch(
+  () => range.value?.start,
+  (start) => {
+    const date = parseISO(start);
+    if (!date) return;
+    const monthIso = formatISO(startOfMonth(date));
+    if (leftAnchor.value === monthIso || rightAnchor.value === monthIso) return;
+    leftAnchor.value = monthIso;
+    rightAnchor.value = formatISO(addMonths(startOfMonth(date), 1));
+  }
+);
+const hovering = ref(null);
+const previewEnd = computed(() => {
+  if (range.value?.end) return range.value.end;
+  if (!hovering.value || !range.value?.start) return null;
+  const start = parseISO(range.value.start);
+  const hover = parseISO(hovering.value);
+  if (!start || !hover) return null;
+  return hover > start ? hovering.value : null;
+});
+const previewStart = computed(() => {
+  if (range.value?.start && range.value?.end) return range.value.start;
+  if (!hovering.value || !range.value?.start) return range.value?.start ?? null;
+  const start = parseISO(range.value.start);
+  const hover = parseISO(hovering.value);
+  if (!start || !hover) return range.value.start;
+  return hover < start ? hovering.value : range.value.start;
+});
+const previewMarker = computed(() => {
+  if (!previewStart.value || !previewEnd.value) return null;
+  return {
+    variant: "accent",
+    start: previewStart.value,
+    end: previewEnd.value
+  };
+});
+const calendarGetMarker = computed(() => (iso) => {
+  const preview = previewMarker.value;
+  if (preview && iso >= preview.start && iso <= preview.end) return preview;
+  return props.getMarker?.(iso) ?? null;
+});
+const calendarIsDisabled = computed(() => (iso) => {
+  if (props.min && iso < props.min) return true;
+  if (props.max && iso > props.max) return true;
+  return props.isDisabled?.(iso) ?? false;
+});
+function pick(iso, toggle) {
+  const current = range.value ?? { start: null, end: null };
+  if (!current.start || current.start && current.end) {
+    range.value = { start: iso, end: null };
+    return;
+  }
+  const startDate = parseISO(current.start);
+  const picked = parseISO(iso);
+  if (!startDate || !picked) return;
+  if (picked < startDate) {
+    range.value = { start: iso, end: current.start };
+  } else {
+    range.value = { start: current.start, end: iso };
+  }
+  hovering.value = null;
+  toggle(false);
+}
+function onHover(iso) {
+  hovering.value = iso;
+}
+function clearHover() {
+  hovering.value = null;
+}
+</script>
+
+<template>
+  <orio-date-picker-trigger
+    v-bind="props"
+    :text="display"
+    :placeholder="placeholderText"
+  >
+    <template #default="{ toggle }">
+      <div class="range-content" @mouseleave="clearHover">
+        <orio-calendar
+          v-model:anchor="leftAnchor"
+          :markers
+          :get-marker="calendarGetMarker"
+          :is-disabled="calendarIsDisabled"
+          @select="pick($event, toggle)"
+          @day-enter="onHover"
+        />
+        <orio-calendar
+          v-model:anchor="rightAnchor"
+          :markers
+          :get-marker="calendarGetMarker"
+          :is-disabled="calendarIsDisabled"
+          @select="pick($event, toggle)"
+          @day-enter="onHover"
+        />
+      </div>
+    </template>
+  </orio-date-picker-trigger>
+</template>
+
+<style scoped>
+.range-content {
+  display: flex;
+  gap: 0.75rem;
+}
+</style>

package/dist/runtime/components/date/RangePicker.vue.d.ts

@@ -0,0 +1,28 @@
+import type { ControlProps } from "../ControlElement.vue.js";
+import type { CalendarMarker } from "../Calendar.vue.js";
+import { type DateRange } from "../../utils/date.js";
+export type { DateRange };
+interface Props extends ControlProps {
+    placeholder?: string;
+    min?: string | null;
+    max?: string | null;
+    markers?: CalendarMarker[];
+    getMarker?: (iso: string) => CalendarMarker | null;
+    isDisabled?: (iso: string) => boolean;
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    modelValue?: DateRange;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: DateRange) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: DateRange) => any) | undefined;
+}>, {
+    markers: CalendarMarker[];
+    min: string | null;
+    max: string | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/view/Dates.d.vue.ts

@@ -1,9 +1,6 @@
-export interface ResumeDate {
-    startDate: string;
-    endDate?: string | null;
-}
+import { type DateRange } from "../../utils/date.js";
 interface Props {
-    dates: ResumeDate;
+    dates: DateRange;
     month?: boolean;
     size?: "small" | "medium" | "large";
     type?: "text" | "title" | "subtitle" | "italics";

package/dist/runtime/components/view/Dates.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { computed, toRefs } from "vue";
 import { useI18n } from "vue-i18n";
+import { formatDate } from "../../utils/date";
 const props = defineProps({
   dates: { type: Object, required: true },
   month: { type: Boolean, required: false },
@@ -8,33 +9,26 @@ const props = defineProps({
   type: { type: String, required: false, default: "italics" }
 });
 const { dates } = toRefs(props);
-const { t, locale } = useI18n();
-function formatMonthYear(value) {
-  if (!value) return "";
-  if (!props.month)
-    return new Intl.DateTimeFormat(locale.value, {
-      day: "numeric",
-      month: "short",
-      year: "numeric"
-    }).format(new Date(value));
-  return new Intl.DateTimeFormat(locale.value, {
-    month: "short",
-    year: "numeric"
-  }).format(new Date(value));
-}
-const startDate = computed(() => formatMonthYear(dates.value.startDate));
-const endDate = computed(() => {
-  if (dates.value.endDate === void 0) return null;
-  return dates.value.endDate !== null ? formatMonthYear(dates.value.endDate) : t("dates.present");
-});
+const { locale } = useI18n();
+const formatOptions = computed(() => ({
+  day: props.month ? void 0 : "numeric",
+  month: "short",
+  year: "numeric"
+}));
+const startText = computed(
+  () => formatDate(dates.value?.start, locale.value, formatOptions.value)
+);
+const endText = computed(
+  () => formatDate(dates.value?.end, locale.value, formatOptions.value)
+);
 </script>
 
 <template>
   <div class="view-date">
-    <orio-view-text :model-value="startDate" :type :size />
-    <template v-if="endDate">
-      <span v-if="startDate"> - </span>
-      <orio-view-text :model-value="endDate" :type :size />
+    <orio-view-text :model-value="startText" :type :size />
+    <template v-if="endText">
+      <span v-if="startText"> - </span>
+      <orio-view-text :model-value="endText" :type :size />
     </template>
   </div>
 </template>

package/dist/runtime/components/view/Dates.vue.d.ts

@@ -1,9 +1,6 @@
-export interface ResumeDate {
-    startDate: string;
-    endDate?: string | null;
-}
+import { type DateRange } from "../../utils/date.js";
 interface Props {
-    dates: ResumeDate;
+    dates: DateRange;
     month?: boolean;
     size?: "small" | "medium" | "large";
     type?: "text" | "title" | "subtitle" | "italics";

package/dist/runtime/i18n/en.json

@@ -4,12 +4,15 @@
     "selected": "{count} selected",
     "noOptions": "No options found"
   },
-  "dateRangePicker": {
-    "startBeforeEnd": "Start date must be before end date.",
-    "present": "Present"
+  "calendar": {
+    "previousMonth": "Previous month",
+    "nextMonth": "Next month"
+  },
+  "datePicker": {
+    "placeholder": "Select a date"
   },
-  "dates": {
-    "present": "Present"
+  "dateRangePicker": {
+    "placeholder": "Select a date range"
   },
   "validation": {
     "fieldError": "Error on this field"

package/dist/runtime/i18n/uk.json

@@ -4,12 +4,15 @@
     "selected": "{count} обрано",
     "noOptions": "Опцій не знайдено"
   },
-  "dateRangePicker": {
-    "startBeforeEnd": "Дата початку має бути раніше дати завершення.",
-    "present": "Теперішній час"
+  "calendar": {
+    "previousMonth": "Попередній місяць",
+    "nextMonth": "Наступний місяць"
+  },
+  "datePicker": {
+    "placeholder": "Оберіть дату"
   },
-  "dates": {
-    "present": "Теперішній час"
+  "dateRangePicker": {
+    "placeholder": "Оберіть діапазон дат"
   },
   "validation": {
     "fieldError": "Помилка в цьому полі"

package/dist/runtime/index.d.ts

@@ -11,8 +11,10 @@ export { default as CheckBox } from "./components/CheckBox.vue.js";
 export { default as CheckboxGroup, type CheckboxOption, type CheckboxGroupProps, } from "./components/CheckboxGroup.vue.js";
 export { default as RadioButton, type RadioButtonProps, } from "./components/RadioButton.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 Calendar, type CalendarProps, } from "./components/Calendar.vue.js";
+export { default as DatePicker } from "./components/date/Picker.vue.js";
+export { default as DateRangePicker } from "./components/date/RangePicker.vue.js";
+export { type DateRange, parseISO, formatISO, formatDate } from "./utils/date.js";
 export { default as Selector } from "./components/Selector.vue.js";
 export { default as TaggableSelector } from "./components/TaggableSelector.vue.js";
 export { default as Tag } from "./components/Tag.vue.js";

package/dist/runtime/index.js

@@ -15,8 +15,12 @@ export {
   default as RadioButton
 } from "./components/RadioButton.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 Calendar
+} from "./components/Calendar.vue";
+export { default as DatePicker } from "./components/date/Picker.vue";
+export { default as DateRangePicker } from "./components/date/RangePicker.vue";
+export { parseISO, formatISO, formatDate } from "./utils/date.js";
 export { default as Selector } from "./components/Selector.vue";
 export { default as TaggableSelector } from "./components/TaggableSelector.vue";
 export { default as Tag } from "./components/Tag.vue";

package/dist/runtime/utils/date.d.ts

@@ -0,0 +1,10 @@
+export interface DateRange {
+    start: string | null;
+    end: string | null;
+}
+export declare function parseISO(value: string | null | undefined): Date | null;
+export declare function formatISO(date: Date): string;
+export declare function isSameDay(a: Date, b: Date): boolean;
+export declare function startOfMonth(date: Date): Date;
+export declare function addMonths(date: Date, count: number): Date;
+export declare function formatDate(value: string | null | undefined, locale: string, options?: Intl.DateTimeFormatOptions): string;

package/dist/runtime/utils/date.js

@@ -0,0 +1,38 @@
+const ISO_DATE = /^(\d{4})-(\d{2})-(\d{2})$/;
+export function parseISO(value) {
+  if (!value) return null;
+  const match = ISO_DATE.exec(value);
+  if (!match) return null;
+  const [, y, m, d] = match;
+  const date = new Date(Number(y), Number(m) - 1, Number(d));
+  if (Number.isNaN(date.getTime())) return null;
+  if (date.getFullYear() !== Number(y) || date.getMonth() !== Number(m) - 1 || date.getDate() !== Number(d)) {
+    return null;
+  }
+  return date;
+}
+export function formatISO(date) {
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}
+export function isSameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+export function startOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+export function addMonths(date, count) {
+  return new Date(date.getFullYear(), date.getMonth() + count, 1);
+}
+const DEFAULT_DATE_FORMAT = {
+  day: "numeric",
+  month: "short",
+  year: "numeric"
+};
+export function formatDate(value, locale, options = DEFAULT_DATE_FORMAT) {
+  const date = parseISO(value);
+  if (!date) return "";
+  return new Intl.DateTimeFormat(locale, options).format(date);
+}

package/package.json

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

package/dist/runtime/components/DatePicker.d.vue.ts

@@ -1,15 +0,0 @@
-interface Props {
-    month?: boolean;
-}
-type __VLS_Props = Props;
-type __VLS_ModelProps = {
-    "date": string | null | undefined;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:date": (value: string | null | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:date"?: ((value: string | null | undefined) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/DatePicker.vue

@@ -1,24 +0,0 @@
-<script setup>
-defineProps({
-  month: { type: Boolean, required: false }
-});
-const date = defineModel("date", { type: null, ...{
-  required: true
-} });
-</script>
-
-<template>
-  <orio-control-element v-slot="{ id }" class="date-picker" v-bind="$attrs">
-    <input
-      :id
-      v-model="date"
-      :type="month ? 'month' : 'date'"
-      class="date-input"
-      :name="id"
-    />
-  </orio-control-element>
-</template>
-
-<style scoped>
-.date-picker *{cursor:pointer;width:100%}.date-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--border-radius-md);box-sizing:border-box;color:var(--color-text);padding:.4rem .6rem;transition:border-color .2s ease}.date-input:focus,.date-input:hover{border-color:var(--color-accent)}.date-input:focus{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>

package/dist/runtime/components/DatePicker.vue.d.ts

@@ -1,15 +0,0 @@
-interface Props {
-    month?: boolean;
-}
-type __VLS_Props = Props;
-type __VLS_ModelProps = {
-    "date": string | null | undefined;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:date": (value: string | null | undefined) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:date"?: ((value: string | null | undefined) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/DateRangePicker.d.vue.ts

@@ -1,18 +0,0 @@
-import type { ResumeDate } from "./view/Dates.vue.js";
-export interface DateRangePickerProps {
-    month?: boolean;
-}
-type __VLS_Props = DateRangePickerProps;
-type __VLS_ModelProps = {
-    "dates": ResumeDate;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
-    dateIsCorrect: import("vue").ComputedRef<boolean>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:dates": (value: ResumeDate) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:dates"?: ((value: ResumeDate) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/components/DateRangePicker.vue

@@ -1,67 +0,0 @@
-<script setup>
-import { ref, watch, computed } from "vue";
-import { useI18n } from "vue-i18n";
-defineProps({
-  month: { type: Boolean, required: false }
-});
-const { t } = useI18n();
-const dates = defineModel("dates", { type: Object, ...{ required: true } });
-const present = ref(dates.value.endDate !== "" && !dates.value.endDate);
-watch(present, (value) => {
-  if (value) {
-    dates.value.endDate = null;
-  } else {
-    dates.value.endDate = "";
-  }
-});
-const dateIsCorrect = computed(() => {
-  if (dates.value.startDate && dates.value.endDate) {
-    return new Date(dates.value.startDate) <= new Date(dates.value.endDate);
-  }
-  return true;
-});
-defineExpose({ dateIsCorrect });
-</script>
-
-<template>
-  <orio-control-element
-    v-bind="$attrs"
-    :error="!dateIsCorrect ? t('dateRangePicker.startBeforeEnd') : null"
-  >
-    <div class="date-range-picker">
-      <orio-date-picker
-        v-model:date="dates.startDate"
-        class="error-fields"
-        :month
-      />
-      <orio-date-picker
-        v-model:date="dates.endDate"
-        class="error-fields"
-        :month
-      />
-      <orio-check-box v-model="present">
-        {{ t("dateRangePicker.present") }}
-      </orio-check-box>
-    </div>
-  </orio-control-element>
-</template>
-
-<style scoped>
-.date-range-picker {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-}
-.date-range-picker > * {
-  min-width: 0;
-}
-.date-range-picker .date-picker {
-  margin-inline: 0;
-}
-.date-range-picker .date-picker:first-child {
-  margin-inline-end: 0.5rem;
-}
-.date-range-picker .checkbox {
-  margin-inline-start: 0.25rem;
-}
-</style>

package/dist/runtime/components/DateRangePicker.vue.d.ts

@@ -1,18 +0,0 @@
-import type { ResumeDate } from "./view/Dates.vue.js";
-export interface DateRangePickerProps {
-    month?: boolean;
-}
-type __VLS_Props = DateRangePickerProps;
-type __VLS_ModelProps = {
-    "dates": ResumeDate;
-};
-type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
-    dateIsCorrect: import("vue").ComputedRef<boolean>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:dates": (value: ResumeDate) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:dates"?: ((value: ResumeDate) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: typeof __VLS_export;
-export default _default;