@sewadah/selaras 0.3.0 → 0.3.2

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

@@ -1,8 +1,12 @@
+import type { SelectModelValue } from '../utils/select-contracts.js';
 import type { ResolvedItemOption, SelectItems, SelectOption } from './combobox-select.js';
 export interface ComboboxSelectBodyProps {
     listbox?: boolean;
     searchable?: boolean;
     creatable?: boolean;
+    multiple?: boolean;
+    forceSelection?: boolean;
+    selectedValues?: SelectModelValue[];
     searchText: string;
     displayValue: (value: unknown) => string;
     items: SelectItems;
@@ -12,9 +16,9 @@ export interface ComboboxSelectBodyProps {
         overscan: number;
     } | null;
     virtualizedOptions: ResolvedItemOption[];
-    toOption: (entry: SelectOption) => ResolvedItemOption;
+    toOption: (entry: SelectOption | SelectModelValue) => ResolvedItemOption;
     groupOptions: (group: {
-        items: readonly SelectOption[];
+        items: readonly (SelectOption | SelectModelValue)[];
     }) => ResolvedItemOption[];
     onSearchKeydown: (event: KeyboardEvent) => void;
     onSearchBlur: () => void;
@@ -30,15 +34,15 @@ export interface ComboboxSelectBodyEmits {
     'update:searchText': [value: string];
 }
 declare function focusSearch(): boolean;
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_21: {}, __VLS_29: {}, __VLS_37: {}, __VLS_57: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_82: {
-    group: import("./combobox-select.js").SelectOptionGroup<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_90: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_109: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_122: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_21: {}, __VLS_29: {}, __VLS_31: {}, __VLS_39: {}, __VLS_61: {
+    item: SelectModelValue | SelectOption<SelectModelValue>;
+}, __VLS_92: {
+    group: import("./combobox-select.js").SelectOptionGroup<SelectModelValue>;
+}, __VLS_102: {
+    item: SelectModelValue | SelectOption<SelectModelValue>;
+}, __VLS_123: {
+    item: SelectModelValue | SelectOption<SelectModelValue>;
+}, __VLS_136: {};
 type __VLS_Slots = {} & {
     header?: (props: typeof __VLS_1) => any;
 } & {
@@ -48,17 +52,19 @@ type __VLS_Slots = {} & {
 } & {
     'empty-filter'?: (props: typeof __VLS_29) => any;
 } & {
-    'empty-filter'?: (props: typeof __VLS_37) => any;
+    'empty-filter'?: (props: typeof __VLS_31) => any;
 } & {
-    item?: (props: typeof __VLS_57) => any;
+    'empty-filter'?: (props: typeof __VLS_39) => any;
 } & {
-    group?: (props: typeof __VLS_82) => any;
+    item?: (props: typeof __VLS_61) => any;
 } & {
-    item?: (props: typeof __VLS_90) => any;
+    group?: (props: typeof __VLS_92) => any;
 } & {
-    item?: (props: typeof __VLS_109) => any;
+    item?: (props: typeof __VLS_102) => any;
 } & {
-    footer?: (props: typeof __VLS_122) => any;
+    item?: (props: typeof __VLS_123) => any;
+} & {
+    footer?: (props: typeof __VLS_136) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ComboboxSelectBodyProps, {
     focusSearch: typeof focusSearch;

package/dist/runtime/internal/ComboboxSelectBody.vue

@@ -27,6 +27,9 @@ const props = defineProps({
   listbox: { type: Boolean, required: false },
   searchable: { type: Boolean, required: false },
   creatable: { type: Boolean, required: false },
+  multiple: { type: Boolean, required: false },
+  forceSelection: { type: Boolean, required: false },
+  selectedValues: { type: Array, required: false },
   searchText: { type: String, required: true },
   displayValue: { type: Function, required: true },
   items: { type: null, required: true },
@@ -53,10 +56,29 @@ const searchInput = ref();
 const { contains } = useFilter({ sensitivity: "base" });
 const primitives = computed(() => props.listbox ? { input: ListboxFilter, viewport: ListboxContent, group: ListboxGroup, label: ListboxGroupLabel, item: ListboxItem, indicator: ListboxItemIndicator, virtualizer: ListboxVirtualizer } : { input: ComboboxInput, viewport: ComboboxViewport, group: ComboboxGroup, label: ComboboxLabel, item: ComboboxItem, indicator: ComboboxItemIndicator, virtualizer: ComboboxVirtualizer });
 function matches(option) {
-  return !props.listbox || !props.searchable || contains(option.label, props.searchText);
+  return !(props.listbox || props.creatable && props.multiple) || !props.searchable || contains(option.label, props.searchText);
 }
 const visibleOptions = computed(() => props.flatOptions.filter(matches));
-const virtualOptions = computed(() => props.listbox ? visibleOptions.value : props.virtualizedOptions);
+const createText = computed(() => {
+  if (!props.creatable || !props.multiple || props.forceSelection)
+    return "";
+  const text = props.searchText.trim();
+  const lower = text.toLowerCase();
+  if (!text || props.flatOptions.some((option) => String(option.value).toLowerCase() === lower || option.label.toLowerCase() === lower) || props.selectedValues?.some((value) => typeof value === "string" && value.toLowerCase() === lower)) {
+    return "";
+  }
+  return text;
+});
+const virtualOptions = computed(() => {
+  const options = props.listbox ? visibleOptions.value : props.virtualizedOptions;
+  return createText.value ? [{ value: createText.value, key: `create:${createText.value}`, label: messages.value.createOption(createText.value), disabled: false, raw: void 0 }, ...options] : options;
+});
+function onItemSelect(event, value) {
+  if (!props.creatable || !props.multiple || !props.selectedValues?.includes(value))
+    return;
+  event.preventDefault();
+  emit("update:searchText", "");
+}
 const filterInputProps = computed(() => mergeProps(
   props.listbox ? { "role": "combobox", "aria-autocomplete": "list", "aria-expanded": true, "aria-controls": listboxId, "aria-label": messages.value.search } : { displayValue: props.displayValue },
   props.searchInputProps ?? {}
@@ -90,18 +112,23 @@ defineExpose({ focusSearch });
     />
   </div>
 
-  <div v-if="flatOptions.length === 0" v-bind="emptyProps">
+  <div v-if="flatOptions.length === 0 && !createText" v-bind="emptyProps">
     <slot name="empty">
       {{ messages.noOptions }}
     </slot>
   </div>
   <component :is="primitives.viewport" v-else :id="listbox ? listboxId : void 0" v-bind="viewportProps">
-    <div v-if="listbox && visibleOptions.length === 0" v-bind="emptyProps">
+    <div v-if="listbox && visibleOptions.length === 0 && !createText" v-bind="emptyProps">
       <slot name="empty-filter">
         {{ messages.noResultsFound }}
       </slot>
     </div>
-    <ComboboxEmpty v-else-if="!listbox" v-bind="emptyProps">
+    <div v-else-if="creatable && multiple && visibleOptions.length === 0 && !createText" v-bind="emptyProps">
+      <slot name="empty-filter">
+        {{ messages.noResultsFound }}
+      </slot>
+    </div>
+    <ComboboxEmpty v-else-if="!listbox && !(creatable && multiple)" v-bind="emptyProps">
       <slot name="empty-filter">
         {{ messages.noResultsFound }}
       </slot>
@@ -121,20 +148,30 @@ defineExpose({ focusSearch });
           :key="String(virtualItem.key)"
           :value="option.value"
           :disabled="option.disabled"
+          :data-selaras-create-option="option.raw === void 0 || void 0"
           :style="{ position: 'absolute', top: 0, left: 0, right: 0, transform: `translateY(${virtualItem.start}px)`, height: `${virtualItem.size}px` }"
           v-bind="itemProps"
+          @select="onItemSelect($event, option.value)"
         >
-          <slot name="item" :item="option.raw">
+          <template v-if="option.raw === void 0">
             {{ option.label }}
-          </slot>
-          <component :is="primitives.indicator" v-bind="itemIndicatorProps">
-            <Icon :name="icons.check" class="size-4" />
-          </component>
+          </template>
+          <template v-else>
+            <slot name="item" :item="option.raw">
+              {{ option.label }}
+            </slot>
+            <component :is="primitives.indicator" v-bind="itemIndicatorProps">
+              <Icon :name="icons.check" class="size-4" />
+            </component>
+          </template>
         </component>
       </component>
     </ClientOnly>
 
     <template v-else>
+      <component :is="primitives.item" v-if="createText" :value="createText" data-selaras-create-option v-bind="itemProps">
+        {{ messages.createOption(createText) }}
+      </component>
       <template v-for="(entry, index) in items" :key="index">
         <component :is="primitives.group" v-if="isOptionGroup(entry) && groupOptions(entry).some(matches)">
           <component :is="primitives.label" v-bind="groupProps">
@@ -145,10 +182,11 @@ defineExpose({ focusSearch });
           <component
             :is="primitives.item"
             v-for="option in groupOptions(entry).filter(matches)"
-            :key="option.value"
+            :key="option.key"
             :value="option.value"
             :disabled="option.disabled"
             v-bind="itemProps"
+            @select="onItemSelect($event, option.value)"
           >
             <slot name="item" :item="option.raw">
               {{ option.label }}
@@ -164,6 +202,7 @@ defineExpose({ focusSearch });
           :value="toOption(entry).value"
           :disabled="toOption(entry).disabled"
           v-bind="itemProps"
+          @select="onItemSelect($event, toOption(entry).value)"
         >
           <slot name="item" :item="entry">
             {{ toOption(entry).label }}

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

@@ -1,8 +1,12 @@
+import type { SelectModelValue } from '../utils/select-contracts.js';
 import type { ResolvedItemOption, SelectItems, SelectOption } from './combobox-select.js';
 export interface ComboboxSelectBodyProps {
     listbox?: boolean;
     searchable?: boolean;
     creatable?: boolean;
+    multiple?: boolean;
+    forceSelection?: boolean;
+    selectedValues?: SelectModelValue[];
     searchText: string;
     displayValue: (value: unknown) => string;
     items: SelectItems;
@@ -12,9 +16,9 @@ export interface ComboboxSelectBodyProps {
         overscan: number;
     } | null;
     virtualizedOptions: ResolvedItemOption[];
-    toOption: (entry: SelectOption) => ResolvedItemOption;
+    toOption: (entry: SelectOption | SelectModelValue) => ResolvedItemOption;
     groupOptions: (group: {
-        items: readonly SelectOption[];
+        items: readonly (SelectOption | SelectModelValue)[];
     }) => ResolvedItemOption[];
     onSearchKeydown: (event: KeyboardEvent) => void;
     onSearchBlur: () => void;
@@ -30,15 +34,15 @@ export interface ComboboxSelectBodyEmits {
     'update:searchText': [value: string];
 }
 declare function focusSearch(): boolean;
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_21: {}, __VLS_29: {}, __VLS_37: {}, __VLS_57: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_82: {
-    group: import("./combobox-select.js").SelectOptionGroup<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_90: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_109: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_122: {};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_21: {}, __VLS_29: {}, __VLS_31: {}, __VLS_39: {}, __VLS_61: {
+    item: SelectModelValue | SelectOption<SelectModelValue>;
+}, __VLS_92: {
+    group: import("./combobox-select.js").SelectOptionGroup<SelectModelValue>;
+}, __VLS_102: {
+    item: SelectModelValue | SelectOption<SelectModelValue>;
+}, __VLS_123: {
+    item: SelectModelValue | SelectOption<SelectModelValue>;
+}, __VLS_136: {};
 type __VLS_Slots = {} & {
     header?: (props: typeof __VLS_1) => any;
 } & {
@@ -48,17 +52,19 @@ type __VLS_Slots = {} & {
 } & {
     'empty-filter'?: (props: typeof __VLS_29) => any;
 } & {
-    'empty-filter'?: (props: typeof __VLS_37) => any;
+    'empty-filter'?: (props: typeof __VLS_31) => any;
 } & {
-    item?: (props: typeof __VLS_57) => any;
+    'empty-filter'?: (props: typeof __VLS_39) => any;
 } & {
-    group?: (props: typeof __VLS_82) => any;
+    item?: (props: typeof __VLS_61) => any;
 } & {
-    item?: (props: typeof __VLS_90) => any;
+    group?: (props: typeof __VLS_92) => any;
 } & {
-    item?: (props: typeof __VLS_109) => any;
+    item?: (props: typeof __VLS_102) => any;
 } & {
-    footer?: (props: typeof __VLS_122) => any;
+    item?: (props: typeof __VLS_123) => any;
+} & {
+    footer?: (props: typeof __VLS_136) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ComboboxSelectBodyProps, {
     focusSearch: typeof focusSearch;

package/dist/runtime/internal/DatePickerCalendarBody.vue

@@ -120,7 +120,7 @@ const cellTriggerUi = {
       <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">
+            <DatePickerHeadCell v-for="(day, index) in weekDays" :key="index" v-bind="headCellProps">
               {{ day }}
             </DatePickerHeadCell>
           </DatePickerGridRow>

package/dist/runtime/internal/DatePickerRangeCalendarBody.vue

@@ -51,7 +51,7 @@ const rangeCellTriggerUi = {
       <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">
+            <DateRangePickerHeadCell v-for="(day, index) in weekDays" :key="index" v-bind="headCellProps">
               {{ day }}
             </DateRangePickerHeadCell>
           </DateRangePickerGridRow>

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    shortcut?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/internal/ShortcutHint.vue

@@ -0,0 +1,13 @@
+<script setup>
+import Kbd from "../components/Kbd.vue";
+import { applyClassPrefix } from "../utils/ui";
+defineProps({
+  shortcut: { type: String, required: false }
+});
+</script>
+
+<template>
+  <span v-if="shortcut" :class="applyClassPrefix('ms-auto inline-flex items-center gap-1')" aria-hidden="true">
+    <Kbd v-for="key in shortcut.split('+')" :key="key" :value="key.trim()" size="sm" />
+  </span>
+</template>

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    shortcut?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,14 +1,22 @@
-import type { ToastThemeSlots } from '../theme/toast.js';
+import type { ToastPosition, ToastThemeSlots } from '../theme/toast.js';
 import type { UiProp } from '../utils/ui.js';
 import type { ToastItem } from './programmatic-services.js';
+import type { ToastStackItem } from './toast-stack.js';
 type __VLS_Props = {
     toast: ToastItem;
     ui?: UiProp<ToastThemeSlots>;
+    duration: number;
+    expand: boolean;
+    position: ToastPosition;
+    placement: ToastStackItem | undefined;
+    leaving: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     remove: (id: number) => any;
+    resize: (height: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onRemove?: ((id: number) => any) | undefined;
+    onResize?: ((height: number) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/internal/ToastItemRenderer.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ToastClose, ToastDescription, ToastRoot, ToastTitle } from "reka-ui";
-import { computed } from "vue";
+import { computed, ref, watch } from "vue";
 import Button from "../components/Button.vue";
 import Icon from "../components/Icon.vue";
 import { useIcons } from "../composables/use-icons";
@@ -11,16 +11,62 @@ import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
 const props = defineProps({
   toast: { type: Object, required: true },
-  ui: { type: Object, required: false }
+  ui: { type: Object, required: false },
+  duration: { type: Number, required: true },
+  expand: { type: Boolean, required: true },
+  position: { type: null, required: true },
+  placement: { type: null, required: true },
+  leaving: { type: Boolean, required: true }
 });
-const emit = defineEmits(["remove"]);
+const emit = defineEmits(["remove", "resize"]);
+const rootElement = ref(null);
+function setRootElement(instance) {
+  if (typeof HTMLElement === "undefined")
+    return;
+  const element = instance instanceof HTMLElement ? instance : instance?.$el;
+  if (element instanceof HTMLElement)
+    rootElement.value = element;
+}
+const placement = ref(props.placement);
+watch(() => [props.placement, props.leaving], ([next, leaving]) => {
+  if (!leaving && next)
+    placement.value = next;
+});
+const clamped = computed(() => placement.value?.height !== void 0);
+watch(rootElement, (element, _previous, onCleanup) => {
+  if (!element)
+    return;
+  const updateHeight = () => {
+    if (!clamped.value && !props.leaving)
+      emit("resize", element.offsetHeight);
+  };
+  updateHeight();
+  if (typeof ResizeObserver === "undefined")
+    return;
+  const observer = new ResizeObserver(updateHeight);
+  observer.observe(element);
+  onCleanup(() => observer.disconnect());
+}, { flush: "post" });
 const icons = useIcons();
 const messages = useMessages();
 const theme = useComponentTheme("toast", toastTheme);
 const themeBindings = useThemeBindings();
 const effectiveColor = computed(() => props.toast.color ? resolveRegisteredColorRole(props.toast.color, "info") : void 0);
-const itemUi = computed(() => theme.value({ color: effectiveColor.value }));
+const itemUi = computed(() => theme.value({
+  color: effectiveColor.value,
+  expand: props.expand,
+  position: props.position
+}));
 const rootProps = computed(() => resolveSlot(itemUi.value.root, props.ui?.root));
+const rootBindings = computed(() => ({
+  ...rootProps.value,
+  "data-stack": placement.value?.state,
+  "style": [
+    themeBindings.value.style,
+    placement.value && { transform: placement.value.transform, height: placement.value.height, zIndex: placement.value.zIndex },
+    rootProps.value.style
+  ]
+}));
 const iconProps = computed(() => resolveSlot(itemUi.value.icon, props.ui?.icon));
 const titleProps = computed(() => resolveSlot(itemUi.value.title, props.ui?.title));
 const descriptionProps = computed(() => resolveSlot(itemUi.value.description, props.ui?.description));
@@ -30,12 +76,13 @@ const iconName = computed(() => props.toast.icon ?? (effectiveColor.value && isF
 
 <template>
   <ToastRoot
-    :duration="toast.duration ?? 5e3"
+    :ref="setRootElement"
+    :duration="toast.duration ?? duration"
     :data-selaras-theme="themeBindings['data-selaras-theme']"
     :data-selaras-mode="themeBindings['data-selaras-mode']"
     :data-selaras-color="effectiveColor"
-    :style="themeBindings.style"
-    v-bind="rootProps"
+    :open="!leaving"
+    v-bind="rootBindings"
     @update:open="(open) => !open && emit('remove', toast.id)"
   >
     <Icon v-if="iconName" :name="iconName" v-bind="iconProps" />
@@ -48,7 +95,7 @@ const iconName = computed(() => props.toast.icon ?? (effectiveColor.value && isF
       </ToastDescription>
     </div>
     <ToastClose as-child>
-      <Button size="sm" variant="ghost" color="neutral" :icon="icons.close" :aria-label="messages.close" v-bind="closeProps" />
+      <Button size="sm" variant="ghost" :color="effectiveColor ?? 'neutral'" :icon="icons.close" :aria-label="messages.close" v-bind="closeProps" />
     </ToastClose>
   </ToastRoot>
 </template>

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

@@ -1,14 +1,22 @@
-import type { ToastThemeSlots } from '../theme/toast.js';
+import type { ToastPosition, ToastThemeSlots } from '../theme/toast.js';
 import type { UiProp } from '../utils/ui.js';
 import type { ToastItem } from './programmatic-services.js';
+import type { ToastStackItem } from './toast-stack.js';
 type __VLS_Props = {
     toast: ToastItem;
     ui?: UiProp<ToastThemeSlots>;
+    duration: number;
+    expand: boolean;
+    position: ToastPosition;
+    placement: ToastStackItem | undefined;
+    leaving: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     remove: (id: number) => any;
+    resize: (height: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onRemove?: ((id: number) => any) | undefined;
+    onResize?: ((height: number) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/internal/combobox-select.d.ts

@@ -1,51 +1,52 @@
 import type { ComputedRef } from 'vue';
-import type { SelectValue } from '../utils/select-contracts.js';
+import type { SelectModelValue } from '../utils/select-contracts.js';
 /** Erased runtime records for the shared implementation, not authoring types. */
-export interface SelectOption<Value extends SelectValue = SelectValue> {
+export interface SelectOption<Value extends SelectModelValue = SelectModelValue> {
     [key: string]: unknown;
-    /** The default option key. Custom `valueKey` fields use the same primitive contract. */
+    /** The default option key. Custom `valueKey` fields use the same identity contract. */
     value?: Value;
     disabled?: boolean;
 }
-export interface SelectOptionGroup<Value extends SelectValue = SelectValue> {
+export interface SelectOptionGroup<Value extends SelectModelValue = SelectModelValue> {
     label: string;
-    items: readonly SelectOption<Value>[];
+    items: readonly (Value | SelectOption<Value>)[];
 }
-export type SelectItems<Value extends SelectValue = SelectValue> = readonly (SelectOption<Value> | SelectOptionGroup<Value>)[];
-export declare function isOptionGroup<Value extends SelectValue = SelectValue>(entry: SelectOption<Value> | SelectOptionGroup<Value>): entry is SelectOptionGroup<Value>;
+export type SelectItems<Value extends SelectModelValue = SelectModelValue> = readonly (Value | SelectOption<Value> | SelectOptionGroup<Value>)[];
+export declare function isOptionGroup(entry: unknown): entry is SelectOptionGroup;
 /** Flattens groups into a plain option list - groups lose their header when virtualized. */
-export declare function flattenItems<Value extends SelectValue = SelectValue>(items: SelectItems<Value>): SelectOption<Value>[];
+export declare function flattenItems(items: SelectItems): (SelectModelValue | SelectOption)[];
 interface SelectLikeProps {
     items: SelectItems;
     valueKey?: string;
     labelKey?: string;
-    modelValue?: SelectValue | SelectValue[];
+    modelValue?: SelectModelValue | SelectModelValue[];
     multiple?: boolean;
     displayMode?: 'comma' | 'chip';
     maxChips?: number;
 }
 export interface ResolvedOption {
-    value: SelectValue;
+    value: SelectModelValue;
+    key: string | number;
     label: string;
     disabled: boolean;
-    raw: SelectOption | undefined;
+    raw: SelectOption | SelectModelValue | undefined;
 }
 export interface ResolvedItemOption extends ResolvedOption {
-    raw: SelectOption;
+    raw: SelectOption | SelectModelValue;
 }
-export declare function useComboboxSelect(props: SelectLikeProps, emit: (event: 'update:modelValue', value: SelectValue | SelectValue[] | undefined) => void, { creatable }?: {
+export declare function useComboboxSelect(props: SelectLikeProps, emit: (event: 'update:modelValue', value: SelectModelValue | SelectModelValue[] | undefined) => void, { creatable }?: {
     creatable?: boolean;
 }): {
     flatOptions: ComputedRef<ResolvedItemOption[]>;
-    selectedValues: ComputedRef<SelectValue[]>;
+    selectedValues: ComputedRef<SelectModelValue[]>;
     selectedOptions: ComputedRef<ResolvedOption[]>;
     visibleOptions: ComputedRef<ResolvedOption[]>;
     overflowOptions: ComputedRef<ResolvedOption[]>;
     commaText: ComputedRef<string>;
-    resolveOption: (value: SelectValue) => ResolvedOption;
-    toOption: (raw: SelectOption) => ResolvedItemOption;
-    setValue: (value: SelectValue | SelectValue[] | undefined) => void;
-    removeValue: (value: SelectValue) => void;
+    resolveOption: (value: SelectModelValue) => ResolvedOption;
+    toOption: (raw: SelectOption | SelectModelValue) => ResolvedItemOption;
+    setValue: (value: SelectModelValue | SelectModelValue[] | undefined) => void;
+    removeValue: (value: SelectModelValue) => void;
     hasMatchingOption: (text: string) => boolean;
     commitCreatableText: (rawText: string) => boolean;
 };

package/dist/runtime/internal/combobox-select.js

@@ -2,30 +2,42 @@ import { computed } from "vue";
 function optionValue(value) {
   if (typeof value === "string" || typeof value === "number" && Number.isFinite(value))
     return value;
-  throw new TypeError("[selaras] Select option values must be strings or finite numbers.");
+  if (typeof value === "object" && value !== null && !Array.isArray(value))
+    return value;
+  throw new TypeError("[selaras] Select option values must be strings, finite numbers, or objects.");
 }
 export function isOptionGroup(entry) {
-  return typeof entry.label === "string" && "items" in entry && Array.isArray(entry.items);
+  return typeof entry === "object" && entry !== null && !Array.isArray(entry) && "label" in entry && typeof entry.label === "string" && "items" in entry && Array.isArray(entry.items);
 }
 export function flattenItems(items) {
   return items.flatMap((entry) => isOptionGroup(entry) ? entry.items : [entry]);
 }
 export function useComboboxSelect(props, emit, { creatable = false } = {}) {
-  const valueKey = computed(() => props.valueKey ?? "value");
+  const valueKey = computed(() => props.valueKey);
   const labelKey = computed(() => props.labelKey ?? "label");
   const flatOptions = computed(() => {
     const identities = /* @__PURE__ */ new Set();
-    return flattenItems(props.items).map((raw) => {
-      const value = optionValue(raw[valueKey.value]);
+    return flattenItems(props.items).map((raw, index) => {
+      if (typeof raw === "string" || typeof raw === "number") {
+        const value2 = optionValue(raw);
+        if (identities.has(value2))
+          throw new TypeError(`[selaras] Select option identities must be unique across all groups. Duplicate value: ${typeof value2} ${JSON.stringify(value2)}.`);
+        identities.add(value2);
+        return { value: value2, key: `${typeof value2}:${String(value2)}`, label: String(value2), disabled: false, raw };
+      }
+      const option = raw;
+      const key = valueKey.value ?? (option.value !== void 0 ? "value" : void 0);
+      const value = optionValue(key === void 0 ? option : option[key]);
       if (identities.has(value)) {
-        throw new TypeError(`[selaras] Select option identities must be unique across all groups. Duplicate ${valueKey.value}: ${typeof value} ${JSON.stringify(value)}.`);
+        throw new TypeError(`[selaras] Select option identities must be unique across all groups. Duplicate ${key ?? "object identity"}: ${typeof value} ${JSON.stringify(value)}.`);
       }
       identities.add(value);
       return {
         value,
-        label: String(raw[labelKey.value] ?? value),
-        disabled: !!raw.disabled,
-        raw
+        key: typeof value === "object" ? `object:${index}` : `${typeof value}:${String(value)}`,
+        label: String(option[labelKey.value] ?? (typeof value === "object" ? "" : value)),
+        disabled: !!option.disabled,
+        raw: option
       };
     });
   });
@@ -36,14 +48,24 @@ export function useComboboxSelect(props, emit, { creatable = false } = {}) {
     return Array.isArray(v) ? v : [v];
   });
   function resolveOption(value) {
-    return flatOptions.value.find((o) => o.value === value) ?? { value, label: String(value), disabled: false, raw: void 0 };
+    const option = flatOptions.value.find((o) => o.value === value);
+    if (option)
+      return option;
+    const label = typeof value === "object" ? value[labelKey.value] : value;
+    return { value, key: typeof value === "object" ? "missing-object" : `${typeof value}:${String(value)}`, label: String(label ?? ""), disabled: false, raw: void 0 };
   }
   function toOption(raw) {
+    if (typeof raw === "string" || typeof raw === "number")
+      return { value: optionValue(raw), key: `${typeof raw}:${String(raw)}`, label: String(raw), disabled: false, raw };
+    const option = raw;
+    const key = valueKey.value ?? (option.value !== void 0 ? "value" : void 0);
+    const value = optionValue(key === void 0 ? option : option[key]);
     return {
-      value: optionValue(raw[valueKey.value]),
-      label: String(raw[labelKey.value] ?? raw[valueKey.value] ?? ""),
-      disabled: !!raw.disabled,
-      raw
+      value,
+      key: typeof value === "object" ? "object:unknown" : `${typeof value}:${String(value)}`,
+      label: String(option[labelKey.value] ?? (typeof value === "object" ? "" : value)),
+      disabled: !!option.disabled,
+      raw: option
     };
   }
   const selectedOptions = computed(() => selectedValues.value.map(resolveOption));
@@ -67,7 +89,8 @@ export function useComboboxSelect(props, emit, { creatable = false } = {}) {
   }
   function commitCreatableText(rawText) {
     const text = rawText.trim();
-    if (!creatable || !text || hasMatchingOption(text))
+    const lower = text.toLowerCase();
+    if (!creatable || !text || flatOptions.value.some((o) => String(o.value).toLowerCase() === lower || o.label.toLowerCase() === lower))
       return false;
     if (props.multiple) {
       if (selectedValues.value.some((v) => typeof v === "string" && v.toLowerCase() === text.toLowerCase()))