@sewadah/selaras 0.1.1

package/dist/runtime/internal/DatePickerCalendarBody.vue

@@ -0,0 +1,215 @@
+<script setup>
+import {
+  DatePickerCalendar,
+  DatePickerCell,
+  DatePickerCellTrigger,
+  DatePickerGrid,
+  DatePickerGridBody,
+  DatePickerGridHead,
+  DatePickerGridRow,
+  DatePickerHeadCell,
+  DatePickerHeader,
+  DatePickerHeading,
+  DatePickerNext,
+  DatePickerPrev
+} from "reka-ui";
+import Button from "../components/Button.vue";
+import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
+import TimeStepper from "./TimeStepper.vue";
+defineProps({
+  internalView: { type: String, required: true },
+  color: { type: null, required: false },
+  activeColor: { type: null, required: false },
+  placeholder: { type: Object, required: true },
+  monthGridItems: { type: Array, required: true },
+  yearGridItems: { type: Array, required: true },
+  decadeHeadingText: { type: String, required: true },
+  isMonthDisabled: { type: Function, required: true },
+  isYearDisabled: { type: Function, required: true },
+  selectMonth: { type: Function, required: true },
+  selectYear: { type: Function, required: true },
+  drillUp: { type: Function, required: true },
+  goToPreviousYear: { type: Function, required: true },
+  goToNextYear: { type: Function, required: true },
+  goToPreviousDecade: { type: Function, required: true },
+  goToNextDecade: { type: Function, required: true },
+  isTimeGranularity: { type: Boolean, required: true },
+  granularity: { type: String, required: false },
+  placeholderHour: { type: Number, required: true },
+  placeholderMinute: { type: Number, required: true },
+  hourCycle: { type: Number, required: false },
+  minuteStep: { type: Number, required: false },
+  locale: { type: String, required: false },
+  hourInputId: { type: String, required: true },
+  minuteInputId: { type: String, required: true },
+  setHour: { type: Function, required: true },
+  setMinute: { type: Function, required: true },
+  closeOnSelect: { type: Boolean, required: false },
+  close: { type: Function, required: true },
+  headerProps: { type: Object, required: false },
+  headingProps: { type: Object, required: false },
+  gridsProps: { type: Object, required: false },
+  gridProps: { type: Object, required: false },
+  gridHeadProps: { type: Object, required: false },
+  headCellProps: { type: Object, required: false },
+  cellProps: { type: Object, required: false },
+  viewGridProps: { type: Object, required: false },
+  timeSectionProps: { type: Object, required: false }
+});
+const icons = useIcons();
+const messages = useMessages();
+const navButtonUi = { leadingIcon: "rtl:-scale-x-100" };
+const headingButtonUi = "rounded-[var(--ui-radius-sm)] px-1.5 py-0.5 transition-colors hover:bg-[var(--ui-bg-elevated)] disabled:hover:bg-transparent disabled:cursor-default";
+const cellTriggerUi = {
+  base: "relative data-[today]:font-semibold data-[today]:after:absolute data-[today]:after:bottom-1 data-[today]:after:left-1/2 data-[today]:after:size-1 data-[today]:after:-translate-x-1/2 data-[today]:after:rounded-full data-[today]:after:bg-[var(--ui-primary)] data-[outside-view]:opacity-40 data-[unavailable]:opacity-40 data-[unavailable]:line-through"
+};
+</script>
+
+<template>
+  <DatePickerCalendar v-slot="{ grid, weekDays }">
+    <DatePickerHeader v-bind="headerProps">
+      <DatePickerPrev v-if="internalView === 'date'" as-child>
+        <Button variant="ghost" :color="color" size="sm" :icon="icons.chevronLeft" :aria-label="messages.previousMonth" :ui="navButtonUi" />
+      </DatePickerPrev>
+      <Button
+        v-else
+        variant="ghost"
+        :color="color"
+        size="sm"
+        :icon="icons.chevronLeft"
+        :aria-label="internalView === 'month' ? messages.previousYear : messages.previousDecade"
+        :ui="navButtonUi"
+        @click="internalView === 'month' ? goToPreviousYear() : goToPreviousDecade()"
+      />
+
+      <DatePickerHeading v-if="internalView === 'date'" v-slot="{ headingValue }">
+        <button type="button" :class="headingButtonUi" v-bind="headingProps" :aria-label="messages.chooseMonth" @click="drillUp">
+          {{ headingValue }}
+        </button>
+      </DatePickerHeading>
+      <button
+        v-else
+        type="button"
+        dir="ltr"
+        :class="headingButtonUi"
+        v-bind="headingProps"
+        :disabled="internalView === 'year'"
+        :aria-label="internalView === 'month' ? messages.chooseYear : void 0"
+        @click="drillUp"
+      >
+        {{ internalView === "month" ? placeholder.year : decadeHeadingText }}
+      </button>
+
+      <DatePickerNext v-if="internalView === 'date'" as-child>
+        <Button variant="ghost" :color="color" size="sm" :icon="icons.chevronRight" :aria-label="messages.nextMonth" :ui="navButtonUi" />
+      </DatePickerNext>
+      <Button
+        v-else
+        variant="ghost"
+        :color="color"
+        size="sm"
+        :icon="icons.chevronRight"
+        :aria-label="internalView === 'month' ? messages.nextYear : messages.nextDecade"
+        :ui="navButtonUi"
+        @click="internalView === 'month' ? goToNextYear() : goToNextDecade()"
+      />
+    </DatePickerHeader>
+
+    <div v-if="internalView === 'date'" v-bind="gridsProps">
+      <DatePickerGrid v-for="month in grid" :key="month.value.toString()" v-bind="gridProps">
+        <DatePickerGridHead v-bind="gridHeadProps">
+          <DatePickerGridRow>
+            <DatePickerHeadCell v-for="day in weekDays" :key="day" v-bind="headCellProps">
+              {{ day }}
+            </DatePickerHeadCell>
+          </DatePickerGridRow>
+        </DatePickerGridHead>
+        <DatePickerGridBody>
+          <DatePickerGridRow v-for="(week, weekIndex) in month.rows" :key="weekIndex">
+            <DatePickerCell v-for="date in week" :key="date.toString()" :date="date" v-bind="cellProps">
+              <DatePickerCellTrigger
+                v-slot="{ dayValue, selected, disabled: dayDisabled }"
+                :day="date"
+                :month="month.value"
+                as-child
+              >
+                <Button
+                  :variant="selected ? 'solid' : 'ghost'"
+                  :color="selected ? activeColor : color"
+                  size="sm"
+                  square
+                  :disabled="dayDisabled"
+                  :ui="cellTriggerUi"
+                >
+                  <slot name="day" :date="date" :day-value="dayValue" :selected="selected" :disabled="dayDisabled">
+                    {{ dayValue }}
+                  </slot>
+                </Button>
+              </DatePickerCellTrigger>
+            </DatePickerCell>
+          </DatePickerGridRow>
+        </DatePickerGridBody>
+      </DatePickerGrid>
+    </div>
+
+    <div v-else-if="internalView === 'month'" v-bind="viewGridProps">
+      <Button
+        v-for="monthItem in monthGridItems"
+        :key="monthItem.value.month"
+        :variant="monthItem.value.month === placeholder.month ? 'solid' : 'ghost'"
+        :color="monthItem.value.month === placeholder.month ? activeColor : color"
+        size="sm"
+        :disabled="isMonthDisabled(monthItem.value)"
+        @click="selectMonth(monthItem.value)"
+      >
+        {{ monthItem.label }}
+      </Button>
+    </div>
+
+    <div v-else v-bind="viewGridProps">
+      <Button
+        v-for="yearItem in yearGridItems"
+        :key="yearItem.value"
+        :variant="yearItem.value === placeholder.year ? 'solid' : 'ghost'"
+        :color="yearItem.value === placeholder.year ? activeColor : color"
+        size="sm"
+        :disabled="isYearDisabled(yearItem.value)"
+        @click="selectYear(yearItem.value)"
+      >
+        {{ yearItem.label }}
+      </Button>
+    </div>
+
+    <template v-if="internalView === 'date' && isTimeGranularity">
+      <div v-bind="timeSectionProps">
+        <label :for="hourInputId" class="sr-only">{{ messages.hour }}</label>
+        <label v-if="granularity === 'minute'" :for="minuteInputId" class="sr-only">{{ messages.minute }}</label>
+        <TimeStepper
+          :hour="placeholderHour"
+          :minute="placeholderMinute"
+          :granularity="granularity === 'minute' ? 'minute' : 'hour'"
+          :hour-cycle="hourCycle"
+          :minute-step="minuteStep"
+          :locale="locale"
+          :hour-id="hourInputId"
+          :minute-id="minuteInputId"
+          @update:hour="setHour"
+          @update:minute="setMinute"
+        />
+      </div>
+      <Button
+        v-if="closeOnSelect"
+        variant="solid"
+        :color="activeColor"
+        size="sm"
+        block
+        class="mt-2"
+        @click="close"
+      >
+        {{ messages.done }}
+      </Button>
+    </template>
+    <slot name="footer" />
+  </DatePickerCalendar>
+</template>

package/dist/runtime/internal/DatePickerCalendarBody.vue.d.ts

@@ -0,0 +1,71 @@
+import type { DateValue } from '@internationalized/date';
+import type { VariantProps } from 'tailwind-variants';
+import type { buttonTheme } from '../theme/button.js';
+type ButtonVariants = VariantProps<typeof buttonTheme>;
+export interface DatePickerCalendarBodyProps {
+    internalView: 'date' | 'month' | 'year';
+    color?: ButtonVariants['color'];
+    activeColor?: ButtonVariants['color'];
+    placeholder: DateValue;
+    monthGridItems: {
+        value: DateValue;
+        label: string;
+    }[];
+    yearGridItems: {
+        value: number;
+        label: string;
+    }[];
+    decadeHeadingText: string;
+    isMonthDisabled: (date: DateValue) => boolean;
+    isYearDisabled: (year: number) => boolean;
+    selectMonth: (date: DateValue) => void;
+    selectYear: (year: number) => void;
+    drillUp: () => void;
+    goToPreviousYear: () => void;
+    goToNextYear: () => void;
+    goToPreviousDecade: () => void;
+    goToNextDecade: () => void;
+    isTimeGranularity: boolean;
+    granularity?: 'year' | 'month' | 'day' | 'hour' | 'minute';
+    placeholderHour: number;
+    placeholderMinute: number;
+    hourCycle?: 12 | 24;
+    minuteStep?: number;
+    locale?: string;
+    hourInputId: string;
+    minuteInputId: string;
+    setHour: (hour24: number) => void;
+    setMinute: (minute: number) => void;
+    closeOnSelect?: boolean;
+    /** Closes the popover/modal - the Done button's own action. A plain callback, not a v-model, matching every other action prop here (selectMonth/drillUp/etc). */
+    close: () => void;
+    headerProps?: Record<string, unknown>;
+    headingProps?: Record<string, unknown>;
+    gridsProps?: Record<string, unknown>;
+    gridProps?: Record<string, unknown>;
+    gridHeadProps?: Record<string, unknown>;
+    headCellProps?: Record<string, unknown>;
+    cellProps?: Record<string, unknown>;
+    viewGridProps?: Record<string, unknown>;
+    timeSectionProps?: Record<string, unknown>;
+}
+declare var __VLS_110: {
+    date: DateValue;
+    dayValue: string;
+    selected: boolean;
+    disabled: boolean;
+}, __VLS_144: {};
+type __VLS_Slots = {} & {
+    day?: (props: typeof __VLS_110) => any;
+} & {
+    footer?: (props: typeof __VLS_144) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DatePickerCalendarBodyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DatePickerCalendarBodyProps> & 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/internal/DatePickerRangeCalendarBody.d.vue.ts

@@ -0,0 +1,37 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { buttonTheme } from '../theme/button.js';
+type ButtonVariants = VariantProps<typeof buttonTheme>;
+export interface DatePickerRangeCalendarBodyProps {
+    color?: ButtonVariants['color'];
+    activeColor?: ButtonVariants['color'];
+    headerProps?: Record<string, unknown>;
+    headingProps?: Record<string, unknown>;
+    gridsProps?: Record<string, unknown>;
+    gridProps?: Record<string, unknown>;
+    gridHeadProps?: Record<string, unknown>;
+    headCellProps?: Record<string, unknown>;
+    cellProps?: Record<string, unknown>;
+}
+declare var __VLS_95: {
+    date: import("reka-ui").DateValue;
+    dayValue: string;
+    selected: boolean;
+    disabled: boolean;
+    selectionStart: boolean;
+    selectionEnd: boolean;
+    highlighted: boolean;
+}, __VLS_97: {};
+type __VLS_Slots = {} & {
+    day?: (props: typeof __VLS_95) => any;
+} & {
+    footer?: (props: typeof __VLS_97) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DatePickerRangeCalendarBodyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DatePickerRangeCalendarBodyProps> & 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/internal/DatePickerRangeCalendarBody.vue

@@ -0,0 +1,96 @@
+<script setup>
+import {
+  DateRangePickerCalendar,
+  DateRangePickerCell,
+  DateRangePickerCellTrigger,
+  DateRangePickerGrid,
+  DateRangePickerGridBody,
+  DateRangePickerGridHead,
+  DateRangePickerGridRow,
+  DateRangePickerHeadCell,
+  DateRangePickerHeader,
+  DateRangePickerHeading,
+  DateRangePickerNext,
+  DateRangePickerPrev
+} from "reka-ui";
+import Button from "../components/Button.vue";
+import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
+defineProps({
+  color: { type: null, required: false },
+  activeColor: { type: null, required: false },
+  headerProps: { type: Object, required: false },
+  headingProps: { type: Object, required: false },
+  gridsProps: { type: Object, required: false },
+  gridProps: { type: Object, required: false },
+  gridHeadProps: { type: Object, required: false },
+  headCellProps: { type: Object, required: false },
+  cellProps: { type: Object, required: false }
+});
+const icons = useIcons();
+const messages = useMessages();
+const navButtonUi = { leadingIcon: "rtl:-scale-x-100" };
+const rangeCellTriggerUi = {
+  base: "relative w-full rounded-none data-[selection-start]:rounded-s-full data-[selection-end]:rounded-e-full data-[today]:font-semibold data-[today]:after:absolute data-[today]:after:bottom-1 data-[today]:after:left-1/2 data-[today]:after:size-1 data-[today]:after:-translate-x-1/2 data-[today]:after:rounded-full data-[today]:after:bg-[var(--ui-primary)] data-[outside-view]:opacity-40 data-[unavailable]:opacity-40 data-[unavailable]:line-through"
+};
+</script>
+
+<template>
+  <DateRangePickerCalendar v-slot="{ grid, weekDays }">
+    <DateRangePickerHeader v-bind="headerProps">
+      <DateRangePickerPrev as-child>
+        <Button variant="ghost" :color="color" size="sm" :icon="icons.chevronLeft" :aria-label="messages.previousMonth" :ui="navButtonUi" />
+      </DateRangePickerPrev>
+      <DateRangePickerHeading v-bind="headingProps" />
+      <DateRangePickerNext as-child>
+        <Button variant="ghost" :color="color" size="sm" :icon="icons.chevronRight" :aria-label="messages.nextMonth" :ui="navButtonUi" />
+      </DateRangePickerNext>
+    </DateRangePickerHeader>
+
+    <div v-bind="gridsProps">
+      <DateRangePickerGrid v-for="month in grid" :key="month.value.toString()" v-bind="gridProps">
+        <DateRangePickerGridHead v-bind="gridHeadProps">
+          <DateRangePickerGridRow>
+            <DateRangePickerHeadCell v-for="day in weekDays" :key="day" v-bind="headCellProps">
+              {{ day }}
+            </DateRangePickerHeadCell>
+          </DateRangePickerGridRow>
+        </DateRangePickerGridHead>
+        <DateRangePickerGridBody>
+          <DateRangePickerGridRow v-for="(week, weekIndex) in month.rows" :key="weekIndex">
+            <DateRangePickerCell v-for="date in week" :key="date.toString()" :date="date" v-bind="cellProps">
+              <DateRangePickerCellTrigger
+                v-slot="{ dayValue, selectionStart, selectionEnd, highlighted, selected, disabled: dayDisabled }"
+                :day="date"
+                :month="month.value"
+                as-child
+              >
+                <Button
+                  :variant="selectionStart || selectionEnd ? 'solid' : highlighted || selected ? 'soft' : 'ghost'"
+                  :color="selectionStart || selectionEnd || highlighted || selected ? activeColor : color"
+                  size="sm"
+                  :disabled="dayDisabled"
+                  :ui="rangeCellTriggerUi"
+                >
+                  <slot
+                    name="day"
+                    :date="date"
+                    :day-value="dayValue"
+                    :selected="selected"
+                    :disabled="dayDisabled"
+                    :selection-start="selectionStart"
+                    :selection-end="selectionEnd"
+                    :highlighted="highlighted"
+                  >
+                    {{ dayValue }}
+                  </slot>
+                </Button>
+              </DateRangePickerCellTrigger>
+            </DateRangePickerCell>
+          </DateRangePickerGridRow>
+        </DateRangePickerGridBody>
+      </DateRangePickerGrid>
+    </div>
+    <slot name="footer" />
+  </DateRangePickerCalendar>
+</template>

package/dist/runtime/internal/DatePickerRangeCalendarBody.vue.d.ts

@@ -0,0 +1,37 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { buttonTheme } from '../theme/button.js';
+type ButtonVariants = VariantProps<typeof buttonTheme>;
+export interface DatePickerRangeCalendarBodyProps {
+    color?: ButtonVariants['color'];
+    activeColor?: ButtonVariants['color'];
+    headerProps?: Record<string, unknown>;
+    headingProps?: Record<string, unknown>;
+    gridsProps?: Record<string, unknown>;
+    gridProps?: Record<string, unknown>;
+    gridHeadProps?: Record<string, unknown>;
+    headCellProps?: Record<string, unknown>;
+    cellProps?: Record<string, unknown>;
+}
+declare var __VLS_95: {
+    date: import("reka-ui").DateValue;
+    dayValue: string;
+    selected: boolean;
+    disabled: boolean;
+    selectionStart: boolean;
+    selectionEnd: boolean;
+    highlighted: boolean;
+}, __VLS_97: {};
+type __VLS_Slots = {} & {
+    day?: (props: typeof __VLS_95) => any;
+} & {
+    footer?: (props: typeof __VLS_97) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DatePickerRangeCalendarBodyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DatePickerRangeCalendarBodyProps> & 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/internal/DatePickerTimeBody.d.vue.ts

@@ -0,0 +1,33 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { buttonTheme } from '../theme/button.js';
+type ButtonVariants = VariantProps<typeof buttonTheme>;
+export interface DatePickerTimeBodyProps {
+    hour: number;
+    minute: number;
+    granularity: 'hour' | 'minute';
+    hourCycle?: 12 | 24;
+    minuteStep?: number;
+    locale?: string;
+    hourInputId: string;
+    minuteInputId: string;
+    setHour: (hour24: number) => void;
+    setMinute: (minute: number) => void;
+    closeOnSelect?: boolean;
+    activeColor?: ButtonVariants['color'];
+    /** Closes the popover/modal - the Done button's own action. */
+    close: () => void;
+    timeSectionProps?: Record<string, unknown>;
+}
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    footer?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DatePickerTimeBodyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DatePickerTimeBodyProps> & 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/internal/DatePickerTimeBody.vue

@@ -0,0 +1,53 @@
+<script setup>
+import Button from "../components/Button.vue";
+import { useMessages } from "../composables/use-messages";
+import TimeStepper from "./TimeStepper.vue";
+defineProps({
+  hour: { type: Number, required: true },
+  minute: { type: Number, required: true },
+  granularity: { type: String, required: true },
+  hourCycle: { type: Number, required: false },
+  minuteStep: { type: Number, required: false },
+  locale: { type: String, required: false },
+  hourInputId: { type: String, required: true },
+  minuteInputId: { type: String, required: true },
+  setHour: { type: Function, required: true },
+  setMinute: { type: Function, required: true },
+  closeOnSelect: { type: Boolean, required: false },
+  activeColor: { type: null, required: false },
+  close: { type: Function, required: true },
+  timeSectionProps: { type: Object, required: false }
+});
+const messages = useMessages();
+</script>
+
+<template>
+  <div v-bind="timeSectionProps">
+    <label :for="hourInputId" class="sr-only">{{ messages.hour }}</label>
+    <label v-if="granularity === 'minute'" :for="minuteInputId" class="sr-only">{{ messages.minute }}</label>
+    <TimeStepper
+      :hour="hour"
+      :minute="minute"
+      :granularity="granularity"
+      :hour-cycle="hourCycle"
+      :minute-step="minuteStep"
+      :locale="locale"
+      :hour-id="hourInputId"
+      :minute-id="minuteInputId"
+      @update:hour="setHour"
+      @update:minute="setMinute"
+    />
+  </div>
+  <slot name="footer" />
+  <Button
+    v-if="closeOnSelect"
+    variant="solid"
+    :color="activeColor"
+    size="sm"
+    block
+    class="mt-2"
+    @click="close"
+  >
+    {{ messages.done }}
+  </Button>
+</template>

package/dist/runtime/internal/DatePickerTimeBody.vue.d.ts

@@ -0,0 +1,33 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { buttonTheme } from '../theme/button.js';
+type ButtonVariants = VariantProps<typeof buttonTheme>;
+export interface DatePickerTimeBodyProps {
+    hour: number;
+    minute: number;
+    granularity: 'hour' | 'minute';
+    hourCycle?: 12 | 24;
+    minuteStep?: number;
+    locale?: string;
+    hourInputId: string;
+    minuteInputId: string;
+    setHour: (hour24: number) => void;
+    setMinute: (minute: number) => void;
+    closeOnSelect?: boolean;
+    activeColor?: ButtonVariants['color'];
+    /** Closes the popover/modal - the Done button's own action. */
+    close: () => void;
+    timeSectionProps?: Record<string, unknown>;
+}
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    footer?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<DatePickerTimeBodyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DatePickerTimeBodyProps> & 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/internal/TimeStepper.d.vue.ts

@@ -0,0 +1,28 @@
+export interface TimeStepperProps {
+    /** Always 24-hour (0-23), regardless of what's displayed. */
+    hour: number;
+    /** Only read/rendered when granularity is 'minute'. */
+    minute?: number;
+    granularity: 'hour' | 'minute';
+    /** Forces 12-hour or 24-hour display; defaults to whatever `locale` itself resolves to. */
+    hourCycle?: 12 | 24;
+    minuteStep?: number;
+    locale?: string;
+    size?: 'sm' | 'md' | 'lg';
+    /** Ids for the caller's own paired <label for> elements - neither SInputNumber nor SInput forward a bare aria-label to their inner <input>, so callers pair a real sr-only label instead. */
+    hourId?: string;
+    minuteId?: string;
+}
+export interface TimeStepperEmits {
+    'update:hour': [value: number];
+    'update:minute': [value: number];
+}
+declare const __VLS_export: import("vue").DefineComponent<TimeStepperProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:hour": (value: number) => any;
+    "update:minute": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<TimeStepperProps> & Readonly<{
+    "onUpdate:hour"?: ((value: number) => any) | undefined;
+    "onUpdate:minute"?: ((value: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;