@sewadah/selaras 0.1.1

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

@@ -0,0 +1,122 @@
+import type { VariantProps } from 'tailwind-variants';
+import type { SelectItems, SelectOption } from '../composables/use-combobox-select.js';
+import type { SelectThemeSlots } from '../theme/select.js';
+import type { UiProp } from '../utils/ui.js';
+import { selectTheme } from '../theme/select.js';
+type SelectVariants = VariantProps<typeof selectTheme>;
+export interface ComboboxSelectBaseProps {
+    id?: string;
+    name?: string;
+    items: SelectItems;
+    valueKey?: string;
+    labelKey?: string;
+    modelValue?: string | string[];
+    multiple?: boolean;
+    searchable?: boolean;
+    virtualize?: boolean | {
+        estimateSize?: number;
+        overscan?: number;
+    };
+    displayMode?: 'comma' | 'chip';
+    maxChips?: number;
+    loading?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    size?: SelectVariants['size'];
+    invalid?: boolean;
+    /** The focus-ring color - the resting (unfocused) ring stays neutral regardless. */
+    color?: SelectVariants['color'];
+    clearable?: boolean;
+    dropdown?: boolean;
+    creatable?: boolean;
+    forceSelection?: boolean;
+    searchTerm?: string;
+    resetSearchTermOnBlur?: boolean;
+    resetSearchTermOnSelect?: boolean;
+    /** Shows a small pointer triangle connecting the panel to its trigger. */
+    arrow?: boolean;
+    /** Below 768px viewport width, presents the popover 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<SelectThemeSlots>;
+}
+export interface ComboboxSelectBaseEmits {
+    'update:modelValue': [value: string | string[] | undefined];
+    'update:searchTerm': [value: string];
+}
+declare var __VLS_43: {
+    item: SelectOption;
+}, __VLS_94: {}, __VLS_101: {}, __VLS_116: {}, __VLS_138: {
+    item: SelectOption;
+}, __VLS_158: {
+    selected: import("../composables/use-combobox-select.js").ResolvedOption | undefined;
+}, __VLS_169: {}, __VLS_176: {}, __VLS_183: {}, __VLS_211: {}, __VLS_214: {}, __VLS_217: {}, __VLS_220: {}, __VLS_223: {
+    item: SelectOption;
+}, __VLS_226: {
+    group: import("../composables/use-combobox-select.js").SelectOptionGroup;
+}, __VLS_229: {}, __VLS_260: {}, __VLS_263: {}, __VLS_266: {}, __VLS_269: {}, __VLS_272: {
+    item: SelectOption;
+}, __VLS_275: {
+    group: import("../composables/use-combobox-select.js").SelectOptionGroup;
+}, __VLS_278: {};
+type __VLS_Slots = {} & {
+    item?: (props: typeof __VLS_43) => any;
+} & {
+    'clear-icon'?: (props: typeof __VLS_94) => any;
+} & {
+    'loading-icon'?: (props: typeof __VLS_101) => any;
+} & {
+    'dropdown-icon'?: (props: typeof __VLS_116) => any;
+} & {
+    item?: (props: typeof __VLS_138) => any;
+} & {
+    value?: (props: typeof __VLS_158) => any;
+} & {
+    'clear-icon'?: (props: typeof __VLS_169) => any;
+} & {
+    'loading-icon'?: (props: typeof __VLS_176) => any;
+} & {
+    'dropdown-icon'?: (props: typeof __VLS_183) => any;
+} & {
+    header?: (props: typeof __VLS_211) => any;
+} & {
+    'filter-icon'?: (props: typeof __VLS_214) => any;
+} & {
+    empty?: (props: typeof __VLS_217) => any;
+} & {
+    'empty-filter'?: (props: typeof __VLS_220) => any;
+} & {
+    item?: (props: typeof __VLS_223) => any;
+} & {
+    group?: (props: typeof __VLS_226) => any;
+} & {
+    footer?: (props: typeof __VLS_229) => any;
+} & {
+    header?: (props: typeof __VLS_260) => any;
+} & {
+    'filter-icon'?: (props: typeof __VLS_263) => any;
+} & {
+    empty?: (props: typeof __VLS_266) => any;
+} & {
+    'empty-filter'?: (props: typeof __VLS_269) => any;
+} & {
+    item?: (props: typeof __VLS_272) => any;
+} & {
+    group?: (props: typeof __VLS_275) => any;
+} & {
+    footer?: (props: typeof __VLS_278) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ComboboxSelectBaseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | string[] | undefined) => any;
+    "update:searchTerm": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<ComboboxSelectBaseProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
+    "onUpdate:searchTerm"?: ((value: string) => 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/internal/ComboboxSelectBody.d.vue.ts

@@ -0,0 +1,71 @@
+import type { ResolvedOption, SelectItems, SelectOption } from '../composables/use-combobox-select.js';
+export interface ComboboxSelectBodyProps {
+    searchable?: boolean;
+    creatable?: boolean;
+    searchText: string;
+    displayValue: (value: unknown) => string;
+    items: SelectItems;
+    flatOptions: ResolvedOption[];
+    virtualizeConfig: {
+        estimateSize: number;
+        overscan: number;
+    } | null;
+    virtualizedOptions: ResolvedOption[];
+    toOption: (entry: SelectOption) => ResolvedOption;
+    groupOptions: (group: {
+        items: SelectOption[];
+    }) => ResolvedOption[];
+    onSearchKeydown: (event: KeyboardEvent) => void;
+    onSearchBlur: () => void;
+    searchWrapperProps?: Record<string, unknown>;
+    searchInputProps?: Record<string, unknown>;
+    viewportProps?: Record<string, unknown>;
+    emptyProps?: Record<string, unknown>;
+    groupProps?: Record<string, unknown>;
+    itemProps?: Record<string, unknown>;
+    itemIndicatorProps?: Record<string, unknown>;
+}
+export interface ComboboxSelectBodyEmits {
+    'update:searchText': [value: string];
+}
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_19: {}, __VLS_33: {}, __VLS_53: {
+    item: SelectOption;
+}, __VLS_78: {
+    group: import("../composables/use-combobox-select.js").SelectOptionGroup;
+}, __VLS_86: {
+    item: SelectOption;
+}, __VLS_105: {
+    item: SelectOption;
+}, __VLS_118: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    'filter-icon'?: (props: typeof __VLS_3) => any;
+} & {
+    empty?: (props: typeof __VLS_19) => any;
+} & {
+    'empty-filter'?: (props: typeof __VLS_33) => any;
+} & {
+    item?: (props: typeof __VLS_53) => any;
+} & {
+    group?: (props: typeof __VLS_78) => any;
+} & {
+    item?: (props: typeof __VLS_86) => any;
+} & {
+    item?: (props: typeof __VLS_105) => any;
+} & {
+    footer?: (props: typeof __VLS_118) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ComboboxSelectBodyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:searchText": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<ComboboxSelectBodyProps> & Readonly<{
+    "onUpdate:searchText"?: ((value: string) => 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/internal/ComboboxSelectBody.vue

@@ -0,0 +1,146 @@
+<script setup>
+import {
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxItemIndicator,
+  ComboboxLabel,
+  ComboboxViewport,
+  ComboboxVirtualizer
+} from "reka-ui";
+import Icon from "../components/Icon.vue";
+import { isOptionGroup } from "../composables/use-combobox-select";
+import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
+defineOptions({ inheritAttrs: false });
+defineProps({
+  searchable: { type: Boolean, required: false },
+  creatable: { type: Boolean, required: false },
+  searchText: { type: String, required: true },
+  displayValue: { type: Function, required: true },
+  items: { type: Array, required: true },
+  flatOptions: { type: Array, required: true },
+  virtualizeConfig: { type: [Object, null], required: true },
+  virtualizedOptions: { type: Array, required: true },
+  toOption: { type: Function, required: true },
+  groupOptions: { type: Function, required: true },
+  onSearchKeydown: { type: Function, required: true },
+  onSearchBlur: { type: Function, required: true },
+  searchWrapperProps: { type: Object, required: false },
+  searchInputProps: { type: Object, required: false },
+  viewportProps: { type: Object, required: false },
+  emptyProps: { type: Object, required: false },
+  groupProps: { type: Object, required: false },
+  itemProps: { type: Object, required: false },
+  itemIndicatorProps: { type: Object, required: false }
+});
+const emit = defineEmits(["update:searchText"]);
+const icons = useIcons();
+const messages = useMessages();
+</script>
+
+<template>
+  <slot name="header" />
+
+  <div v-if="searchable && !creatable" v-bind="searchWrapperProps">
+    <slot name="filter-icon">
+      <Icon :name="icons.search" class="size-4 text-[var(--ui-text-muted)]" />
+    </slot>
+    <ComboboxInput
+      :model-value="searchText"
+      :display-value="displayValue"
+      :placeholder="messages.search"
+      v-bind="searchInputProps"
+      @update:model-value="(value) => emit('update:searchText', String(value ?? ''))"
+      @keydown="onSearchKeydown"
+      @blur="onSearchBlur"
+    />
+  </div>
+
+  <div v-if="flatOptions.length === 0" v-bind="emptyProps">
+    <slot name="empty">
+      {{ messages.noOptions }}
+    </slot>
+  </div>
+  <ComboboxViewport v-else v-bind="viewportProps">
+    <ComboboxEmpty v-bind="emptyProps">
+      <slot name="empty-filter">
+        {{ messages.noResultsFound }}
+      </slot>
+    </ComboboxEmpty>
+
+    <!--
+      @tanstack/vue-virtual measures real DOM/scroll state, so it can't
+      render identically during SSR - forcing it through anyway causes a
+      hydration mismatch that (confirmed empirically) breaks click
+      interactivity page-wide, not just on this component. Client-only
+      sidesteps it; the popover is closed at SSR time anyway, so there's
+      nothing meaningful to show real users in the fallback.
+    -->
+    <ClientOnly v-if="virtualizeConfig">
+      <ComboboxVirtualizer
+        v-slot="{ option, virtualItem }"
+        :options="virtualizedOptions"
+        :estimate-size="virtualizeConfig.estimateSize"
+        :overscan="virtualizeConfig.overscan"
+      >
+        <ComboboxItem
+          :key="String(virtualItem.key)"
+          :value="option.value"
+          :disabled="option.disabled"
+          :style="{ position: 'absolute', top: 0, left: 0, right: 0, transform: `translateY(${virtualItem.start}px)`, height: `${virtualItem.size}px` }"
+          v-bind="itemProps"
+        >
+          <slot name="item" :item="option.raw">
+            {{ option.label }}
+          </slot>
+          <ComboboxItemIndicator v-bind="itemIndicatorProps">
+            <Icon :name="icons.check" class="size-4" />
+          </ComboboxItemIndicator>
+        </ComboboxItem>
+      </ComboboxVirtualizer>
+    </ClientOnly>
+
+    <template v-else>
+      <template v-for="(entry, index) in items" :key="index">
+        <ComboboxGroup v-if="isOptionGroup(entry)">
+          <ComboboxLabel v-bind="groupProps">
+            <slot name="group" :group="entry">
+              {{ entry.label }}
+            </slot>
+          </ComboboxLabel>
+          <ComboboxItem
+            v-for="option in groupOptions(entry)"
+            :key="option.value"
+            :value="option.value"
+            :disabled="option.disabled"
+            v-bind="itemProps"
+          >
+            <slot name="item" :item="option.raw">
+              {{ option.label }}
+            </slot>
+            <ComboboxItemIndicator v-bind="itemIndicatorProps">
+              <Icon :name="icons.check" class="size-4" />
+            </ComboboxItemIndicator>
+          </ComboboxItem>
+        </ComboboxGroup>
+        <ComboboxItem
+          v-else
+          :value="toOption(entry).value"
+          :disabled="toOption(entry).disabled"
+          v-bind="itemProps"
+        >
+          <slot name="item" :item="entry">
+            {{ toOption(entry).label }}
+          </slot>
+          <ComboboxItemIndicator v-bind="itemIndicatorProps">
+            <Icon :name="icons.check" class="size-4" />
+          </ComboboxItemIndicator>
+        </ComboboxItem>
+      </template>
+    </template>
+  </ComboboxViewport>
+
+  <slot name="footer" />
+</template>

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

@@ -0,0 +1,71 @@
+import type { ResolvedOption, SelectItems, SelectOption } from '../composables/use-combobox-select.js';
+export interface ComboboxSelectBodyProps {
+    searchable?: boolean;
+    creatable?: boolean;
+    searchText: string;
+    displayValue: (value: unknown) => string;
+    items: SelectItems;
+    flatOptions: ResolvedOption[];
+    virtualizeConfig: {
+        estimateSize: number;
+        overscan: number;
+    } | null;
+    virtualizedOptions: ResolvedOption[];
+    toOption: (entry: SelectOption) => ResolvedOption;
+    groupOptions: (group: {
+        items: SelectOption[];
+    }) => ResolvedOption[];
+    onSearchKeydown: (event: KeyboardEvent) => void;
+    onSearchBlur: () => void;
+    searchWrapperProps?: Record<string, unknown>;
+    searchInputProps?: Record<string, unknown>;
+    viewportProps?: Record<string, unknown>;
+    emptyProps?: Record<string, unknown>;
+    groupProps?: Record<string, unknown>;
+    itemProps?: Record<string, unknown>;
+    itemIndicatorProps?: Record<string, unknown>;
+}
+export interface ComboboxSelectBodyEmits {
+    'update:searchText': [value: string];
+}
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_19: {}, __VLS_33: {}, __VLS_53: {
+    item: SelectOption;
+}, __VLS_78: {
+    group: import("../composables/use-combobox-select.js").SelectOptionGroup;
+}, __VLS_86: {
+    item: SelectOption;
+}, __VLS_105: {
+    item: SelectOption;
+}, __VLS_118: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_1) => any;
+} & {
+    'filter-icon'?: (props: typeof __VLS_3) => any;
+} & {
+    empty?: (props: typeof __VLS_19) => any;
+} & {
+    'empty-filter'?: (props: typeof __VLS_33) => any;
+} & {
+    item?: (props: typeof __VLS_53) => any;
+} & {
+    group?: (props: typeof __VLS_78) => any;
+} & {
+    item?: (props: typeof __VLS_86) => any;
+} & {
+    item?: (props: typeof __VLS_105) => any;
+} & {
+    footer?: (props: typeof __VLS_118) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ComboboxSelectBodyProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:searchText": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<ComboboxSelectBodyProps> & Readonly<{
+    "onUpdate:searchText"?: ((value: string) => 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/internal/DatePickerCalendarBody.d.vue.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;
+    };
+};