@sewadah/selaras 0.1.1

package/dist/runtime/components/DashboardPanel.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { computed, inject } from "vue";
+import { dashboardPanelTheme } from "../theme/dashboard-panel";
+import { DASHBOARD_INJECTION_KEY } from "../utils/injection-keys";
+import { useComponentTheme, useRootProps } from "../utils/ui";
+import SplitterPanel from "./SplitterPanel.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  minSize: { type: Number, required: false, default: 30 },
+  ui: { type: Object, required: false }
+});
+const dashboard = inject(DASHBOARD_INJECTION_KEY, null);
+const isMobile = computed(() => dashboard?.isMobile.value ?? false);
+const theme = useComponentTheme("dashboardPanel", dashboardPanelTheme);
+const ui = computed(() => theme.value());
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+</script>
+
+<template>
+  <SplitterPanel v-if="!isMobile" :min-size="minSize" v-bind="rootProps">
+    <slot />
+  </SplitterPanel>
+  <div v-else v-bind="rootProps">
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,22 @@
+import type { DashboardPanelThemeSlots } from '../theme/dashboard-panel.js';
+import type { UiProp } from '../utils/ui.js';
+export interface DashboardPanelProps {
+    /** Minimum width as a percentage of the group - non-collapsible, just guards against the sidebar squeezing this panel down to nothing. @default 30 */
+    minSize?: number;
+    ui?: UiProp<DashboardPanelThemeSlots>;
+}
+declare var __VLS_8: {}, __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DashboardPanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardPanelProps> & Readonly<{}>, {}, {}, {}, {}, 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/DashboardResizeHandle.d.vue.ts

@@ -0,0 +1,8 @@
+import type { SplitterResizeHandleThemeSlots } from '../theme/splitter-resize-handle.js';
+import type { UiProp } from '../utils/ui.js';
+export interface DashboardResizeHandleProps {
+    ui?: UiProp<SplitterResizeHandleThemeSlots>;
+}
+declare const __VLS_export: import("vue").DefineComponent<DashboardResizeHandleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardResizeHandleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/DashboardResizeHandle.vue

@@ -0,0 +1,19 @@
+<script setup>
+import { computed, inject } from "vue";
+import { dashboardResizeHandleTheme } from "../theme/dashboard-resize-handle";
+import { DASHBOARD_INJECTION_KEY } from "../utils/injection-keys";
+import { resolveSlot, useComponentTheme } from "../utils/ui";
+import SplitterResizeHandle from "./SplitterResizeHandle.vue";
+const props = defineProps({
+  ui: { type: Object, required: false }
+});
+const dashboard = inject(DASHBOARD_INJECTION_KEY, null);
+const isMobile = computed(() => dashboard?.isMobile.value ?? false);
+const theme = useComponentTheme("dashboardResizeHandle", dashboardResizeHandleTheme);
+const ui = computed(() => theme.value());
+const rootUi = computed(() => resolveSlot(ui.value.root, props.ui?.root));
+</script>
+
+<template>
+  <SplitterResizeHandle v-if="!isMobile" direction="horizontal" :ui="{ root: rootUi, line: props.ui?.line }" />
+</template>

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

@@ -0,0 +1,8 @@
+import type { SplitterResizeHandleThemeSlots } from '../theme/splitter-resize-handle.js';
+import type { UiProp } from '../utils/ui.js';
+export interface DashboardResizeHandleProps {
+    ui?: UiProp<SplitterResizeHandleThemeSlots>;
+}
+declare const __VLS_export: import("vue").DefineComponent<DashboardResizeHandleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardResizeHandleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,40 @@
+import type { DashboardSidebarThemeSlots } from '../theme/dashboard-sidebar.js';
+import type { UiProp } from '../utils/ui.js';
+type __VLS_Slots = DashboardSidebarSlots;
+export interface DashboardSidebarProps {
+    /** @default 260 */
+    defaultSize?: number;
+    /** @default 200 */
+    minSize?: number;
+    /** @default 400 */
+    maxSize?: number;
+    /** How wide the panel stays once collapsed - an icon-rail width by default, `0` to hide it entirely instead. @default 64 */
+    collapsedSize?: number;
+    /** @default true */
+    collapsible?: boolean;
+    /** @default 'px' */
+    sizeUnit?: 'px' | '%';
+    ui?: UiProp<DashboardSidebarThemeSlots>;
+}
+export interface DashboardSidebarSlots {
+    /** `isCollapsed` lets a header (a logo mark, say) swap to a narrower version once the sidebar collapses to its icon rail - always `false` on mobile, where there's no in-between state, just the drawer open or closed. */
+    header?: (props: {
+        isCollapsed: boolean;
+    }) => any;
+    /** Same `isCollapsed` scoping - hide a nav item's own label text once collapsed, keeping just its icon. */
+    default?: (props: {
+        isCollapsed: boolean;
+    }) => any;
+    footer?: (props: {
+        isCollapsed: boolean;
+    }) => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<DashboardSidebarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarProps> & Readonly<{}>, {}, {}, {}, {}, 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/DashboardSidebar.vue

@@ -0,0 +1,117 @@
+<script setup>
+import { computed, inject, onMounted, onUnmounted, ref, watch } from "vue";
+import { dashboardSidebarTheme } from "../theme/dashboard-sidebar";
+import { DASHBOARD_INJECTION_KEY } from "../utils/injection-keys";
+import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Drawer from "./Drawer.vue";
+import ScrollArea from "./ScrollArea.vue";
+import SplitterPanel from "./SplitterPanel.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  defaultSize: { type: Number, required: false, default: 260 },
+  minSize: { type: Number, required: false, default: 200 },
+  maxSize: { type: Number, required: false, default: 400 },
+  collapsedSize: { type: Number, required: false, default: 64 },
+  collapsible: { type: Boolean, required: false, default: true },
+  sizeUnit: { type: String, required: false, default: "px" },
+  ui: { type: Object, required: false }
+});
+defineSlots();
+const dashboard = inject(DASHBOARD_INJECTION_KEY, null);
+const isMobile = computed(() => dashboard?.isMobile.value ?? false);
+const panelRef = ref();
+const mobileOpen = ref(false);
+function toggle() {
+  if (isMobile.value) {
+    mobileOpen.value = !mobileOpen.value;
+    return;
+  }
+  if (panelRef.value?.isCollapsed)
+    panelRef.value.expand();
+  else
+    panelRef.value?.collapse();
+}
+function handleResize(size) {
+  if (dashboard)
+    dashboard.lastDesktopWidthPx.value = size;
+}
+onMounted(() => {
+  const targetWidthPx = dashboard?.lastDesktopWidthPx.value;
+  if (isMobile.value || targetWidthPx === void 0)
+    return;
+  setTimeout(() => {
+    panelRef.value?.resize(targetWidthPx);
+  }, 50);
+});
+if (dashboard)
+  dashboard.toggleSidebar.value = toggle;
+const isSidebarCollapsed = computed(() => isMobile.value ? !mobileOpen.value : panelRef.value?.isCollapsed ?? false);
+if (dashboard) {
+  watch(isSidebarCollapsed, (value) => {
+    dashboard.isSidebarCollapsed.value = value;
+  }, { immediate: true });
+}
+onUnmounted(() => {
+  if (dashboard && dashboard.toggleSidebar.value === toggle)
+    dashboard.toggleSidebar.value = void 0;
+});
+const theme = useComponentTheme("dashboardSidebar", dashboardSidebarTheme);
+const ui = computed(() => theme.value());
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const headerProps = computed(() => resolveSlot(ui.value.header, props.ui?.header));
+const scrollAreaProps = computed(() => resolveSlot(ui.value.scrollArea, props.ui?.scrollArea));
+const bodyProps = computed(() => resolveSlot(ui.value.body, props.ui?.body));
+const footerProps = computed(() => resolveSlot(ui.value.footer, props.ui?.footer));
+</script>
+
+<template>
+  <SplitterPanel
+    v-if="!isMobile"
+    ref="panelRef"
+    :default-size="defaultSize"
+    :min-size="minSize"
+    :max-size="maxSize"
+    :collapsed-size="collapsedSize"
+    :collapsible="collapsible"
+    :size-unit="sizeUnit"
+    v-bind="rootProps"
+    @resize="handleResize"
+  >
+    <template #default="{ isCollapsed }">
+      <div v-if="$slots.header" v-bind="headerProps">
+        <slot name="header" :is-collapsed="isCollapsed" />
+      </div>
+      <ScrollArea v-bind="scrollAreaProps">
+        <div v-bind="bodyProps">
+          <slot :is-collapsed="isCollapsed" />
+        </div>
+      </ScrollArea>
+      <div v-if="$slots.footer" v-bind="footerProps">
+        <slot name="footer" :is-collapsed="isCollapsed" />
+      </div>
+    </template>
+  </SplitterPanel>
+  <!--
+    Drawer's own default slot is its *trigger* (see its own source) -
+    not used here, since open/close is driven entirely by mobileOpen
+    instead of a rendered trigger element. header/body/footer forward
+    straight through to Drawer's own matching slots (and its own
+    theming) rather than DashboardSidebar's own header/body/footer
+    classes above - Drawer already handles its own chrome (including
+    the accessible-name warning its dev-mode console check does when
+    neither a `title` prop nor a `header` slot is present), and an
+    overlay reads differently from an inline panel anyway, so there's
+    no real reason to force the split-pane's exact classes onto it.
+  -->
+  <Drawer v-else v-model:open="mobileOpen" side="left" :handle="false" :ui="{ content: 'bg-[var(--ui-bg-elevated)]' }">
+    <template v-if="$slots.header" #header>
+      <slot name="header" :is-collapsed="false" />
+    </template>
+    <template #body>
+      <slot :is-collapsed="false" />
+    </template>
+    <template v-if="$slots.footer" #footer>
+      <slot name="footer" :is-collapsed="false" />
+    </template>
+  </Drawer>
+</template>

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

@@ -0,0 +1,40 @@
+import type { DashboardSidebarThemeSlots } from '../theme/dashboard-sidebar.js';
+import type { UiProp } from '../utils/ui.js';
+type __VLS_Slots = DashboardSidebarSlots;
+export interface DashboardSidebarProps {
+    /** @default 260 */
+    defaultSize?: number;
+    /** @default 200 */
+    minSize?: number;
+    /** @default 400 */
+    maxSize?: number;
+    /** How wide the panel stays once collapsed - an icon-rail width by default, `0` to hide it entirely instead. @default 64 */
+    collapsedSize?: number;
+    /** @default true */
+    collapsible?: boolean;
+    /** @default 'px' */
+    sizeUnit?: 'px' | '%';
+    ui?: UiProp<DashboardSidebarThemeSlots>;
+}
+export interface DashboardSidebarSlots {
+    /** `isCollapsed` lets a header (a logo mark, say) swap to a narrower version once the sidebar collapses to its icon rail - always `false` on mobile, where there's no in-between state, just the drawer open or closed. */
+    header?: (props: {
+        isCollapsed: boolean;
+    }) => any;
+    /** Same `isCollapsed` scoping - hide a nav item's own label text once collapsed, keeping just its icon. */
+    default?: (props: {
+        isCollapsed: boolean;
+    }) => any;
+    footer?: (props: {
+        isCollapsed: boolean;
+    }) => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<DashboardSidebarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarProps> & Readonly<{}>, {}, {}, {}, {}, 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/DashboardSidebarToggle.d.vue.ts

@@ -0,0 +1,21 @@
+type __VLS_Slots = DashboardSidebarToggleSlots;
+export interface DashboardSidebarToggleProps {
+    /** @default icons.sidebarCollapse */
+    icon?: string;
+}
+export interface DashboardSidebarToggleSlots {
+    /** Replaces the themed Button entirely with a fully custom trigger - `toggle`/`isCollapsed` are the exact values the default Button already wires up internally, so a replacement still behaves correctly (call `toggle` on click, style off `isCollapsed`). Not rendered at all outside a DashboardGroup/DashboardSidebar, same as the default. */
+    default?: (props: {
+        toggle: () => void;
+        isCollapsed: boolean;
+    }) => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<DashboardSidebarToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarToggleProps> & Readonly<{}>, {}, {}, {}, {}, 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/DashboardSidebarToggle.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { inject } from "vue";
+import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
+import { DASHBOARD_INJECTION_KEY } from "../utils/injection-keys";
+import { applyClassPrefix } from "../utils/ui";
+import Button from "./Button.vue";
+import Icon from "./Icon.vue";
+const props = defineProps({
+  icon: { type: String, required: false }
+});
+defineSlots();
+const dashboard = inject(DASHBOARD_INJECTION_KEY, null);
+const icons = useIcons();
+const messages = useMessages();
+</script>
+
+<template>
+  <slot
+    v-if="dashboard?.toggleSidebar.value"
+    :toggle="dashboard.toggleSidebar.value"
+    :is-collapsed="dashboard.isSidebarCollapsed.value"
+  >
+    <Button variant="ghost" color="neutral" :aria-label="messages.toggleSidebar" @click="dashboard.toggleSidebar.value?.()">
+      <!--
+        A slot override (not Button's own `icon` prop + `:ui.leadingIcon`) -
+        that `:ui` object would collide with a consumer's own fallthrough
+        `:ui` override on this component (plain props overwrite rather than
+        merge), silently dropping this flip. The slot still gets Button's
+        own size-driven class via the scoped `klass`, same as Button's own
+        icon prop path.
+      -->
+      <template #icon="{ class: klass }">
+        <Icon
+          :name="props.icon ?? icons.sidebarCollapse"
+          :data-collapsed="dashboard.isSidebarCollapsed.value ? '' : void 0"
+          :class="[applyClassPrefix('transition-transform duration-200 rtl:scale-x-[-1] data-[collapsed]:scale-x-[-1] rtl:data-[collapsed]:scale-x-100'), klass]"
+        />
+      </template>
+    </Button>
+  </slot>
+</template>

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

@@ -0,0 +1,21 @@
+type __VLS_Slots = DashboardSidebarToggleSlots;
+export interface DashboardSidebarToggleProps {
+    /** @default icons.sidebarCollapse */
+    icon?: string;
+}
+export interface DashboardSidebarToggleSlots {
+    /** Replaces the themed Button entirely with a fully custom trigger - `toggle`/`isCollapsed` are the exact values the default Button already wires up internally, so a replacement still behaves correctly (call `toggle` on click, style off `isCollapsed`). Not rendered at all outside a DashboardGroup/DashboardSidebar, same as the default. */
+    default?: (props: {
+        toggle: () => void;
+        isCollapsed: boolean;
+    }) => any;
+}
+declare const __VLS_base: import("vue").DefineComponent<DashboardSidebarToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSidebarToggleProps> & Readonly<{}>, {}, {}, {}, {}, 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/DatePicker.d.vue.ts

@@ -0,0 +1,165 @@
+import type { DateValue } from '@internationalized/date';
+import type { DateRange } from 'reka-ui';
+import type { VariantProps } from 'tailwind-variants';
+import type { buttonTheme } from '../theme/button.js';
+import type { DatePickerThemeSlots } from '../theme/date-picker.js';
+import type { UiProp } from '../utils/ui.js';
+import { Time } from '@internationalized/date';
+import { datePickerTheme } from '../theme/date-picker.js';
+type DatePickerVariants = VariantProps<typeof datePickerTheme>;
+type ButtonVariants = VariantProps<typeof buttonTheme>;
+export interface DatePickerProps {
+    id?: string;
+    name?: string;
+    /** A single DateValue, Reka's own `{ start?, end? }` DateRange shape when `range` is set, or a bare date-less Time when `timeOnly` is set - Vue props can't express a type that depends on a sibling prop's value, so this stays a plain union documented here rather than enforced by the type checker. */
+    modelValue?: DateValue | DateRange | Time;
+    /** Switches to picking a start+end pair instead of one date - a real fork in which Reka primitive family renders (RangeCalendar/DateRangePicker vs Calendar/DatePicker), not just a different modelValue shape. */
+    range?: boolean;
+    /** Drops the date entirely - just a time-of-day picker. modelValue becomes a bare `Time` (no date component at all, not a DateValue). A third top-level mode alongside `range`; every date-grid-specific prop below (minValue/maxValue/isDateUnavailable/isDateDisabled/numberOfMonths/pagedNavigation/weekStartsOn/weekdayFormat/fixedWeeks/view) is simply inert here. `granularity` still applies ('hour'/'minute' only - defaults to 'minute' for a dedicated time picker). */
+    timeOnly?: boolean;
+    minValue?: DateValue;
+    maxValue?: DateValue;
+    isDateUnavailable?: (date: DateValue) => boolean;
+    isDateDisabled?: (date: DateValue) => boolean;
+    /** Range mode only - highlights a date without marking it unavailable or disabled. */
+    isDateHighlightable?: (date: DateValue) => boolean;
+    locale?: string;
+    /** Default 1 normally, 2 when `range` is set (overridable either way) - see effectiveNumberOfMonths. */
+    numberOfMonths?: number;
+    pagedNavigation?: boolean;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    weekdayFormat?: 'narrow' | 'short' | 'long';
+    fixedWeeks?: boolean;
+    /** Closes the popover once a selection is complete - unlike Reka's own Root components, this defaults true. In range mode "complete" means both start and end are set (Reka's own internal watcher already gates on that), so picking just a start date correctly leaves the popover open. */
+    closeOnSelect?: boolean;
+    /** 'field' (default) is the typeable day/month/year segmented input; 'button' is a single button showing the formatted date, matching a plainer "click to open" trigger. */
+    triggerMode?: 'field' | 'button';
+    /** Which grid the popover shows - 'date' (default), or drill up to 'month'/'year' by clicking the heading. Single-date mode only; range mode's heading stays static. */
+    view?: 'date' | 'month' | 'year';
+    /** The value's own precision - 'day' (default) keeps picking a full date. 'month'/'year' make picking a month/year the terminal action (day fixed to 1, and month too for 'year') instead of a waypoint to the day grid - the day grid never renders in that case. 'hour'/'minute' add a time-of-day section below the day grid instead (value becomes a time-capable CalendarDateTime, still just a plain DateValue). Single-date mode only. */
+    granularity?: 'year' | 'month' | 'day' | 'hour' | 'minute';
+    /** hour/minute granularity only - the minute stepper's ±click/arrow-key increment (default 1); typing still commits any exact minute. Pass 5/15/etc for a coarser "pick an appointment time" step. */
+    minuteStep?: number;
+    /** hour/minute granularity only - forces the hour stepper (and the typed field's own hour/dayPeriod segments) to 12-hour or 24-hour. Defaults to whatever `locale` itself resolves to (e.g. 12-hour for en-US, 24-hour for de-DE) - passed straight through to the underlying primitive, which already drives the typed field's own hour cycle. */
+    hourCycle?: 12 | 24;
+    /** Only meaningful in triggerMode "button" - the segmented field's own per-segment display is already locale-shaped by Reka's own DateFieldInput. Default: `{ dateStyle: 'medium' }`. */
+    format?: Intl.DateTimeFormatOptions;
+    /** Range mode only - lets the two ends of a range land in different, non-adjacent selections. */
+    allowNonContiguousRanges?: boolean;
+    /** Range mode only - locks one end of the range in place while re-picking the other. */
+    fixedDate?: 'start' | 'end';
+    /** Range mode only - caps how many days can separate start and end. */
+    maximumDays?: number;
+    disabled?: boolean;
+    /** Shows the value and blocks edits without disabling the control - unlike `disabled`, it stays focusable/readable, just not changeable. Not applicable to `timeOnly` (Reka's own TimeField has no readonly concept). */
+    readonly?: boolean;
+    /** Stops a click on the only selected day from deselecting it - not applicable to `timeOnly` (there's no calendar day to click). */
+    preventDeselect?: boolean;
+    /** `view="month"` only - disables a specific month in addition to whatever minValue/maxValue already disable (doesn't replace that check). */
+    isMonthDisabled?: (date: DateValue) => boolean;
+    /** `view="year"` only - disables a specific year in addition to whatever minValue/maxValue already disable (doesn't replace that check). */
+    isYearDisabled?: (year: number) => boolean;
+    invalid?: boolean;
+    clearable?: boolean;
+    /** Chrome color - the clear/trigger buttons and prev/next month nav. Only the color changes; each button keeps its own deliberately-different variant (icon-only buttons use `text`, nav arrows use `ghost`). */
+    color?: ButtonVariants['color'];
+    /** The color of whatever's currently "active" - the selected day/month/year cell and the Done button. */
+    activeColor?: ButtonVariants['color'];
+    size?: DatePickerVariants['size'];
+    /** Shows a small pointer triangle connecting the panel to its trigger. */
+    arrow?: boolean;
+    /** Below 768px viewport width, presents the calendar as a centered Modal instead of a small anchored panel - easier to tap with a finger. Opt-in (defaults `false`) rather than automatic, so an existing usage's look never changes without asking for it. */
+    mobileModal?: boolean;
+    ui?: UiProp<DatePickerThemeSlots>;
+}
+export interface DatePickerEmits {
+    'update:modelValue': [value: DateValue | DateRange | Time | undefined];
+    'update:view': [view: 'date' | 'month' | 'year'];
+}
+declare var __VLS_43: {}, __VLS_63: {}, __VLS_83: {}, __VLS_99: {}, __VLS_119: {
+    date: DateValue;
+    dayValue: string;
+    selected: boolean;
+    disabled: boolean;
+    selectionStart: boolean;
+    selectionEnd: boolean;
+    highlighted: boolean;
+}, __VLS_122: {}, __VLS_145: {
+    date: DateValue;
+    dayValue: string;
+    selected: boolean;
+    disabled: boolean;
+    selectionStart: boolean;
+    selectionEnd: boolean;
+    highlighted: boolean;
+}, __VLS_148: {}, __VLS_186: {}, __VLS_206: {}, __VLS_226: {}, __VLS_242: {}, __VLS_268: {}, __VLS_291: {}, __VLS_329: {}, __VLS_349: {}, __VLS_369: {}, __VLS_385: {}, __VLS_405: {
+    date: DateValue;
+    dayValue: string;
+    selected: boolean;
+    disabled: boolean;
+}, __VLS_408: {}, __VLS_431: {
+    date: DateValue;
+    dayValue: string;
+    selected: boolean;
+    disabled: boolean;
+}, __VLS_434: {};
+type __VLS_Slots = {} & {
+    'clear-icon'?: (props: typeof __VLS_43) => any;
+} & {
+    'trigger-icon'?: (props: typeof __VLS_63) => any;
+} & {
+    'trigger-icon'?: (props: typeof __VLS_83) => any;
+} & {
+    'clear-icon'?: (props: typeof __VLS_99) => any;
+} & {
+    day?: (props: typeof __VLS_119) => any;
+} & {
+    footer?: (props: typeof __VLS_122) => any;
+} & {
+    day?: (props: typeof __VLS_145) => any;
+} & {
+    footer?: (props: typeof __VLS_148) => any;
+} & {
+    'clear-icon'?: (props: typeof __VLS_186) => any;
+} & {
+    'trigger-icon'?: (props: typeof __VLS_206) => any;
+} & {
+    'trigger-icon'?: (props: typeof __VLS_226) => any;
+} & {
+    'clear-icon'?: (props: typeof __VLS_242) => any;
+} & {
+    footer?: (props: typeof __VLS_268) => any;
+} & {
+    footer?: (props: typeof __VLS_291) => any;
+} & {
+    'clear-icon'?: (props: typeof __VLS_329) => any;
+} & {
+    'trigger-icon'?: (props: typeof __VLS_349) => any;
+} & {
+    'trigger-icon'?: (props: typeof __VLS_369) => any;
+} & {
+    'clear-icon'?: (props: typeof __VLS_385) => any;
+} & {
+    day?: (props: typeof __VLS_405) => any;
+} & {
+    footer?: (props: typeof __VLS_408) => any;
+} & {
+    day?: (props: typeof __VLS_431) => any;
+} & {
+    footer?: (props: typeof __VLS_434) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DatePickerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: DateValue | DateRange | Time | undefined) => any;
+    "update:view": (view: "month" | "year" | "date") => any;
+}, string, import("vue").PublicProps, Readonly<DatePickerProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: DateValue | DateRange | Time | undefined) => any) | undefined;
+    "onUpdate:view"?: ((view: "month" | "year" | "date") => any) | undefined;
+}>, {}, {}, {}, {}, 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;
+    };
+};