@sewadah/selaras 0.1.1

package/dist/runtime/components/DatePicker.vue.d.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;
+    };
+};

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

@@ -0,0 +1,74 @@
+import type { DrawerThemeSlots } from '../theme/drawer.js';
+import type { UiProp } from '../utils/ui.js';
+export interface DrawerProps {
+    open?: boolean;
+    title?: string;
+    description?: string;
+    /** Which edge the panel slides in from - also the direction it's swiped toward to dismiss it. */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** Shows a small grip bar at the top of the panel, signaling it's draggable. */
+    handle?: boolean;
+    /** Resting heights/widths the panel snaps to while dragging, before fully open - fractions (0-1), pixels (>1), or CSS length strings ('30rem'). */
+    snapPoints?: (number | string)[];
+    /** v-model:snapPoint - the currently active snap point. */
+    snapPoint?: number | string | null;
+    /** Snap to the next sequential point one step at a time, instead of whichever is nearest by drag distance. */
+    snapToSequentialPoints?: boolean;
+    /** When `false`, Escape, an outside click, and a drag-to-dismiss swipe no longer close the drawer - the `escapeKeyDown`/`pointerDownOutside`/`focusOutside` events still fire (a swipe gesture has no separate event of its own to intercept ahead of the close), so a consumer can still react, but none of them close it on their own anymore. */
+    dismissible?: boolean;
+    /** Set `false` to render no close button at all - usually paired with `dismissible={false}` for a drawer that only closes via an explicit footer action. */
+    close?: boolean;
+    /** Forwarded to Reka UI's own DrawerRoot `modal` prop - `'trap-focus'` traps focus but allows outside pointer events (non-modal side panels). `overlay` below is independent of this. */
+    modal?: boolean | 'trap-focus';
+    /** Set `false` to render no backdrop behind the drawer at all. */
+    overlay?: boolean;
+    /** Set `false` to skip the open/close animation entirely - this library's animation is CSS-only, so this just omits those classes rather than toggling a JS transition system. */
+    transition?: boolean;
+    ui?: UiProp<DrawerThemeSlots>;
+}
+export interface DrawerEmits {
+    'update:open': [value: boolean];
+    'update:snapPoint': [value: number | string | null];
+    'escapeKeyDown': [event: KeyboardEvent];
+    'pointerDownOutside': [event: Event];
+    'focusOutside': [event: Event];
+    /** Fires once the close transition has actually finished (or immediately, if `transition` is off) - the signal a programmatic caller needs before it's safe to unmount this instance without cutting its exit animation short. */
+    'afterLeave': [];
+}
+declare var __VLS_17: {}, __VLS_65: {}, __VLS_72: {}, __VLS_99: {}, __VLS_106: {}, __VLS_108: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_17) => any;
+} & {
+    content?: (props: typeof __VLS_65) => any;
+} & {
+    header?: (props: typeof __VLS_72) => any;
+} & {
+    'close-icon'?: (props: typeof __VLS_99) => any;
+} & {
+    body?: (props: typeof __VLS_106) => any;
+} & {
+    footer?: (props: typeof __VLS_108) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    escapeKeyDown: (event: KeyboardEvent) => any;
+    pointerDownOutside: (event: Event) => any;
+    afterLeave: () => any;
+    focusOutside: (event: Event) => any;
+    "update:snapPoint": (value: string | number | null) => any;
+}, string, import("vue").PublicProps, Readonly<DrawerProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+    onPointerDownOutside?: ((event: Event) => any) | undefined;
+    onAfterLeave?: (() => any) | undefined;
+    onFocusOutside?: ((event: Event) => any) | undefined;
+    "onUpdate:snapPoint"?: ((value: string | number | null) => 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;
+    };
+};

package/dist/runtime/components/Drawer.vue

@@ -0,0 +1,157 @@
+<script setup>
+import { DrawerClose, DrawerContent, DrawerDescription, DrawerHandle, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTitle, DrawerTrigger, VisuallyHidden } from "reka-ui";
+import { computed, ref, useSlots, watch, watchEffect } from "vue";
+import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
+import { drawerTheme } from "../theme/drawer";
+import { resolveSlot, useComponentTheme } from "../utils/ui";
+import Button from "./Button.vue";
+import Icon from "./Icon.vue";
+const props = defineProps({
+  open: { type: Boolean, required: false },
+  title: { type: String, required: false },
+  description: { type: String, required: false },
+  side: { type: String, required: false, default: "bottom" },
+  handle: { type: Boolean, required: false, default: true },
+  snapPoints: { type: Array, required: false },
+  snapPoint: { type: [Number, String, null], required: false },
+  snapToSequentialPoints: { type: Boolean, required: false },
+  dismissible: { type: Boolean, required: false, default: true },
+  close: { type: Boolean, required: false, default: true },
+  modal: { type: [Boolean, String], required: false, default: true },
+  overlay: { type: Boolean, required: false, default: true },
+  transition: { type: Boolean, required: false, default: true },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["update:open", "update:snapPoint", "escapeKeyDown", "pointerDownOutside", "focusOutside", "afterLeave"]);
+const swipeDirection = computed(() => ({ top: "up", bottom: "down", left: "left", right: "right" })[props.side]);
+function onEscapeKeyDown(event) {
+  if (!props.dismissible)
+    event.preventDefault();
+  emit("escapeKeyDown", event);
+}
+function onPointerDownOutside(event) {
+  if (!props.dismissible)
+    event.preventDefault();
+  emit("pointerDownOutside", event);
+}
+function onFocusOutside(event) {
+  if (!props.dismissible)
+    event.preventDefault();
+  emit("focusOutside", event);
+}
+function onContentAnimationEnd(event) {
+  if (event.target !== event.currentTarget)
+    return;
+  if (event.target.getAttribute("data-state") === "closed")
+    emit("afterLeave");
+}
+const internalOpen = ref(props.open ?? false);
+watch(() => props.open, (value) => {
+  if (value !== void 0)
+    internalOpen.value = value;
+});
+function onUpdateOpen(value, details) {
+  if (!props.dismissible && details?.reason === "swipe")
+    return;
+  internalOpen.value = value;
+  emit("update:open", value);
+}
+watch(internalOpen, (value) => {
+  if (!value && !props.transition)
+    emit("afterLeave");
+});
+const slots = useSlots();
+if (import.meta.dev) {
+  watchEffect(() => {
+    if (!props.title && !slots.header && !slots.content)
+      console.warn("[SDrawer] no accessible name - pass a `title` prop, or a `header`/`content` slot containing a heading, so screen readers can announce this drawer.");
+  });
+}
+const icons = useIcons();
+const messages = useMessages();
+const theme = useComponentTheme("drawer", drawerTheme);
+const ui = computed(() => theme.value({ side: props.side, transition: props.transition }));
+const overlayProps = computed(() => resolveSlot(ui.value.overlay, props.ui?.overlay));
+const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
+const handleProps = computed(() => resolveSlot(ui.value.handle, props.ui?.handle));
+const headerProps = computed(() => resolveSlot(ui.value.header, props.ui?.header));
+const titleProps = computed(() => resolveSlot(ui.value.title, props.ui?.title));
+const descriptionProps = computed(() => resolveSlot(ui.value.description, props.ui?.description));
+const closeProps = computed(() => resolveSlot(ui.value.close, props.ui?.close));
+const bodyProps = computed(() => resolveSlot(ui.value.body, props.ui?.body));
+const footerProps = computed(() => resolveSlot(ui.value.footer, props.ui?.footer));
+</script>
+
+<template>
+  <DrawerRoot
+    :open="internalOpen"
+    :modal="modal"
+    :swipe-direction="swipeDirection"
+    :snap-points="snapPoints"
+    :snap-point="snapPoint"
+    :snap-to-sequential-points="snapToSequentialPoints"
+    @update:open="onUpdateOpen"
+    @update:snap-point="(value) => $emit('update:snapPoint', value)"
+  >
+    <DrawerTrigger v-if="$slots.default" as-child>
+      <slot />
+    </DrawerTrigger>
+    <DrawerPortal>
+      <DrawerOverlay v-if="overlay" v-bind="overlayProps" />
+      <DrawerContent
+        v-bind="contentProps"
+        @escape-key-down="onEscapeKeyDown"
+        @pointer-down-outside="onPointerDownOutside"
+        @focus-outside="onFocusOutside"
+        @animationend="onContentAnimationEnd"
+      >
+        <template v-if="$slots.content">
+          <!-- See Modal.vue for why this stays registered with Reka even
+          though the content slot replaces our own header entirely. -->
+          <VisuallyHidden v-if="title" as-child>
+            <DrawerTitle v-bind="titleProps">
+              {{ title }}
+            </DrawerTitle>
+          </VisuallyHidden>
+          <VisuallyHidden v-if="description" as-child>
+            <DrawerDescription v-bind="descriptionProps">
+              {{ description }}
+            </DrawerDescription>
+          </VisuallyHidden>
+          <slot name="content" />
+        </template>
+        <template v-else>
+          <DrawerHandle v-if="handle" v-bind="handleProps" />
+          <div v-if="title || description || $slots.header || close" v-bind="headerProps">
+            <div>
+              <slot name="header">
+                <DrawerTitle v-if="title" v-bind="titleProps">
+                  {{ title }}
+                </DrawerTitle>
+                <DrawerDescription v-if="description" v-bind="descriptionProps">
+                  {{ description }}
+                </DrawerDescription>
+              </slot>
+            </div>
+            <DrawerClose v-if="close" as-child>
+              <Button size="sm" variant="ghost" color="neutral" :aria-label="messages.close" v-bind="closeProps">
+                <template #icon="{ class: iconClass }">
+                  <slot name="close-icon">
+                    <Icon :name="icons.close" :class="iconClass" />
+                  </slot>
+                </template>
+              </Button>
+            </DrawerClose>
+          </div>
+          <div v-bind="bodyProps">
+            <slot name="body" />
+          </div>
+          <div v-if="$slots.footer" v-bind="footerProps">
+            <slot name="footer" />
+          </div>
+        </template>
+      </DrawerContent>
+    </DrawerPortal>
+  </DrawerRoot>
+</template>

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

@@ -0,0 +1,74 @@
+import type { DrawerThemeSlots } from '../theme/drawer.js';
+import type { UiProp } from '../utils/ui.js';
+export interface DrawerProps {
+    open?: boolean;
+    title?: string;
+    description?: string;
+    /** Which edge the panel slides in from - also the direction it's swiped toward to dismiss it. */
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    /** Shows a small grip bar at the top of the panel, signaling it's draggable. */
+    handle?: boolean;
+    /** Resting heights/widths the panel snaps to while dragging, before fully open - fractions (0-1), pixels (>1), or CSS length strings ('30rem'). */
+    snapPoints?: (number | string)[];
+    /** v-model:snapPoint - the currently active snap point. */
+    snapPoint?: number | string | null;
+    /** Snap to the next sequential point one step at a time, instead of whichever is nearest by drag distance. */
+    snapToSequentialPoints?: boolean;
+    /** When `false`, Escape, an outside click, and a drag-to-dismiss swipe no longer close the drawer - the `escapeKeyDown`/`pointerDownOutside`/`focusOutside` events still fire (a swipe gesture has no separate event of its own to intercept ahead of the close), so a consumer can still react, but none of them close it on their own anymore. */
+    dismissible?: boolean;
+    /** Set `false` to render no close button at all - usually paired with `dismissible={false}` for a drawer that only closes via an explicit footer action. */
+    close?: boolean;
+    /** Forwarded to Reka UI's own DrawerRoot `modal` prop - `'trap-focus'` traps focus but allows outside pointer events (non-modal side panels). `overlay` below is independent of this. */
+    modal?: boolean | 'trap-focus';
+    /** Set `false` to render no backdrop behind the drawer at all. */
+    overlay?: boolean;
+    /** Set `false` to skip the open/close animation entirely - this library's animation is CSS-only, so this just omits those classes rather than toggling a JS transition system. */
+    transition?: boolean;
+    ui?: UiProp<DrawerThemeSlots>;
+}
+export interface DrawerEmits {
+    'update:open': [value: boolean];
+    'update:snapPoint': [value: number | string | null];
+    'escapeKeyDown': [event: KeyboardEvent];
+    'pointerDownOutside': [event: Event];
+    'focusOutside': [event: Event];
+    /** Fires once the close transition has actually finished (or immediately, if `transition` is off) - the signal a programmatic caller needs before it's safe to unmount this instance without cutting its exit animation short. */
+    'afterLeave': [];
+}
+declare var __VLS_17: {}, __VLS_65: {}, __VLS_72: {}, __VLS_99: {}, __VLS_106: {}, __VLS_108: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_17) => any;
+} & {
+    content?: (props: typeof __VLS_65) => any;
+} & {
+    header?: (props: typeof __VLS_72) => any;
+} & {
+    'close-icon'?: (props: typeof __VLS_99) => any;
+} & {
+    body?: (props: typeof __VLS_106) => any;
+} & {
+    footer?: (props: typeof __VLS_108) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DrawerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    escapeKeyDown: (event: KeyboardEvent) => any;
+    pointerDownOutside: (event: Event) => any;
+    afterLeave: () => any;
+    focusOutside: (event: Event) => any;
+    "update:snapPoint": (value: string | number | null) => any;
+}, string, import("vue").PublicProps, Readonly<DrawerProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
+    onPointerDownOutside?: ((event: Event) => any) | undefined;
+    onAfterLeave?: (() => any) | undefined;
+    onFocusOutside?: ((event: Event) => any) | undefined;
+    "onUpdate:snapPoint"?: ((value: string | number | null) => 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;
+    };
+};

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/DrawerRenderer.vue

@@ -0,0 +1,30 @@
+<script setup>
+import { useDrawer } from "../composables/use-drawer";
+import Drawer from "./Drawer.vue";
+const { drawers, close, remove } = useDrawer();
+</script>
+
+<template>
+  <Drawer
+    v-for="instance in drawers"
+    :key="instance.id"
+    :open="instance.isOpen"
+    :title="instance.title"
+    :description="instance.description"
+    :side="instance.side"
+    :handle="instance.handle"
+    :snap-points="instance.snapPoints"
+    :snap-point="instance.snapPoint"
+    :snap-to-sequential-points="instance.snapToSequentialPoints"
+    :dismissible="instance.dismissible"
+    :modal="instance.modal"
+    :overlay="instance.overlay"
+    :transition="instance.transition"
+    @update:open="(open) => !open && close(instance.id)"
+    @after-leave="remove(instance.id)"
+  >
+    <template #content>
+      <component :is="instance.component" v-bind="instance.props" @close="(value) => close(instance.id, value)" />
+    </template>
+  </Drawer>
+</template>

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

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,35 @@
+import type { DropdownThemeSlots } from '../theme/dropdown.js';
+import type { UiProp } from '../utils/ui.js';
+export interface DropdownItem {
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+    /** Styles this item for a delete/remove-style action (danger text, danger-tinted hover) - just this one flag rather than the full color palette, since a menu item realistically only ever needs this one special case. */
+    destructive?: boolean;
+    onSelect?: () => void;
+    /** Not read by Dropdown's own default item rendering - carried purely so a custom #item slot override can display one. */
+    shortcut?: string;
+}
+export interface DropdownProps {
+    items: DropdownItem[][];
+    /** Shows a small pointer triangle connecting the menu to its trigger. */
+    arrow?: boolean;
+    ui?: UiProp<DropdownThemeSlots>;
+}
+declare var __VLS_14: {}, __VLS_46: {
+    item: DropdownItem;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+} & {
+    item?: (props: typeof __VLS_46) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DropdownProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DropdownProps> & 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/Dropdown.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { DropdownMenuArrow, DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuRoot, DropdownMenuSeparator, DropdownMenuTrigger } from "reka-ui";
+import { computed } from "vue";
+import { dropdownTheme } from "../theme/dropdown";
+import { resolveSlot, useComponentTheme } from "../utils/ui";
+import Icon from "./Icon.vue";
+const props = defineProps({
+  items: { type: Array, required: true },
+  arrow: { type: Boolean, required: false, default: false },
+  ui: { type: Object, required: false }
+});
+const theme = useComponentTheme("dropdown", dropdownTheme);
+const ui = computed(() => theme.value());
+const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
+const arrowProps = computed(() => resolveSlot(ui.value.arrow, props.ui?.arrow));
+function itemPropsFor(item) {
+  return resolveSlot(theme.value({ destructive: item.destructive }).item, props.ui?.item);
+}
+function iconPropsFor(item) {
+  return resolveSlot(theme.value({ destructive: item.destructive }).icon, props.ui?.icon);
+}
+const separatorProps = computed(() => resolveSlot(ui.value.separator, props.ui?.separator));
+</script>
+
+<template>
+  <DropdownMenuRoot>
+    <DropdownMenuTrigger as-child>
+      <slot />
+    </DropdownMenuTrigger>
+    <DropdownMenuPortal>
+      <DropdownMenuContent :side-offset="6" align="start" v-bind="contentProps">
+        <template v-for="(group, groupIndex) in items" :key="groupIndex">
+          <DropdownMenuSeparator v-if="groupIndex > 0" v-bind="separatorProps" />
+          <DropdownMenuItem
+            v-for="(item, itemIndex) in group"
+            :key="itemIndex"
+            :disabled="item.disabled"
+            v-bind="itemPropsFor(item)"
+            @select="item.onSelect?.()"
+          >
+            <Icon v-if="item.icon" :name="item.icon" v-bind="iconPropsFor(item)" />
+            <slot name="item" :item="item">
+              {{ item.label }}
+            </slot>
+          </DropdownMenuItem>
+        </template>
+        <DropdownMenuArrow v-if="arrow" v-bind="arrowProps" />
+      </DropdownMenuContent>
+    </DropdownMenuPortal>
+  </DropdownMenuRoot>
+</template>

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

@@ -0,0 +1,35 @@
+import type { DropdownThemeSlots } from '../theme/dropdown.js';
+import type { UiProp } from '../utils/ui.js';
+export interface DropdownItem {
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+    /** Styles this item for a delete/remove-style action (danger text, danger-tinted hover) - just this one flag rather than the full color palette, since a menu item realistically only ever needs this one special case. */
+    destructive?: boolean;
+    onSelect?: () => void;
+    /** Not read by Dropdown's own default item rendering - carried purely so a custom #item slot override can display one. */
+    shortcut?: string;
+}
+export interface DropdownProps {
+    items: DropdownItem[][];
+    /** Shows a small pointer triangle connecting the menu to its trigger. */
+    arrow?: boolean;
+    ui?: UiProp<DropdownThemeSlots>;
+}
+declare var __VLS_14: {}, __VLS_46: {
+    item: DropdownItem;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
+} & {
+    item?: (props: typeof __VLS_46) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DropdownProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DropdownProps> & 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;
+    };
+};