nuance-ui 0.1.1

package/dist/runtime/components/combobox/combobox-option.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { computed } from "vue";
+import Box from "../box.vue";
+import css from "./combobox.module.css";
+import { COMBOBOX_ATTRS } from "./lib/const";
+import { useComboboxState } from "./lib/context";
+const {
+  data,
+  iconPosition = "left",
+  checkIcon = "gravity-ui:check",
+  withCheckIcon,
+  mod: _mod,
+  checked,
+  selected
+} = defineProps({
+  data: { type: Object, required: true },
+  checked: { type: Boolean, required: true },
+  selected: { type: Boolean, required: false },
+  withCheckIcon: { type: Boolean, required: false },
+  checkIcon: { type: String, required: false },
+  iconPosition: { type: String, required: false }
+});
+defineSlots();
+const { onOptionSubmit } = useComboboxState();
+const mod = computed(() => [
+  {
+    [COMBOBOX_ATTRS.option]: true,
+    [COMBOBOX_ATTRS.active]: checked,
+    [COMBOBOX_ATTRS.selected]: selected,
+    [COMBOBOX_ATTRS.disabled]: data?.disabled,
+    reverse: iconPosition === "right",
+    checked
+  },
+  _mod
+]);
+</script>
+
+<template>
+	<Box
+		:class='css.option'
+		:mod
+		role='option'
+		:aria-selected='checked'
+		@click='() => !data?.disabled && onOptionSubmit?.(data.value, data)'
+	>
+		<slot
+			:with-check-icon
+			:icon-position
+			:data
+			:checked
+		>
+			<Icon
+				v-if='withCheckIcon && iconPosition === "left"'
+				:class='css.optionCheck'
+				:name='data?.icon ?? checkIcon'
+			/>
+			<span>{{ data.label }}</span>
+			<Icon
+				v-if='withCheckIcon && iconPosition === "right"'
+				:class='css.optionCheck'
+				:name='data?.icon ?? checkIcon'
+			/>
+		</slot>
+	</Box>
+</template>

package/dist/runtime/components/combobox/combobox-option.vue.d.ts

@@ -0,0 +1,23 @@
+import type { BoxProps } from '../box.vue.js';
+import type { ComboboxItem, ComboboxItemExt, ComboboxItemProps } from './types/index.js';
+export interface ComboboxOptionProps<Value extends string = string, Ext extends ComboboxItemExt = object> extends /* @vue-ignore */ Omit<BoxProps, 'is'>, ComboboxItemProps {
+    data: ComboboxItem<Value, Ext>;
+    checked: boolean;
+    selected?: boolean;
+}
+declare const __VLS_export: <Value extends string = string, Ext extends ComboboxItemExt = object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<ComboboxOptionProps<Value, Ext>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: Required<Pick<ComboboxOptionProps<Value, Ext>, "withCheckIcon" | "iconPosition" | "data" | "checked">>) => any;
+    };
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/combobox/combobox-options-dropdown.d.vue.ts

@@ -0,0 +1,34 @@
+import type { FilterOptionsInput } from './lib/utils/index.js';
+import type { ComboboxItem, ComboboxItemExt, ComboboxParsedItem } from './types/index.js';
+export interface ComboboxOptionsDropdownProps<Value extends string = string, Ext extends ComboboxItemExt = object> {
+    data: ComboboxParsedItem<Value, Ext>[];
+    filter?: (input: FilterOptionsInput<Value, Ext>) => ComboboxParsedItem<Value, Ext>[];
+    limit?: number;
+    withScrollArea?: boolean;
+    maxDropdownHeight?: number | string;
+    hiddenWhenEmpty?: boolean;
+    filterOptions?: boolean;
+    nothingFoundMessage?: string;
+    labelId: string | undefined;
+    ariaLabel: string | undefined;
+    withCheckIcon?: boolean;
+    iconPosition?: 'left' | 'right';
+    checkIcon?: string;
+}
+declare const __VLS_export: <Value extends string = string, Ext extends ComboboxItemExt = object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<(ComboboxOptionsDropdownProps<Value, Ext> & {
+        search?: string | undefined;
+        modelValue?: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | null;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "update:modelValue", value: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | null | undefined) => void) & ((evt: "update:search", value: string | undefined) => void)>>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: ((evt: "update:modelValue", value: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | null | undefined) => void) & ((evt: "update:search", value: string | undefined) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/combobox/combobox-options-dropdown.vue

@@ -0,0 +1,74 @@
+<script setup>
+import { computed } from "vue";
+import ComboboxDropdown from "./combobox-dropdown.vue";
+import ComboboxEmpty from "./combobox-empty.vue";
+import ComboboxGroup from "./combobox-group.vue";
+import ComboboxOptionList from "./combobox-option-list.vue";
+import ComboboxOption from "./combobox-option.vue";
+import { defaultOptionsFilter, isEmptyComboboxData, isOptionsGroup, isValueChecked } from "./lib/utils";
+const {
+  data,
+  labelId,
+  ariaLabel,
+  nothingFoundMessage = "\u041D\u0435\u0442 \u0432\u0430\u0440\u0438\u0430\u043D\u0442\u043E\u0432",
+  withCheckIcon = true,
+  filterOptions = true,
+  iconPosition,
+  checkIcon,
+  filter,
+  limit
+} = defineProps({
+  data: { type: Array, required: true },
+  filter: { type: Function, required: false },
+  limit: { type: Number, required: false },
+  withScrollArea: { type: Boolean, required: false },
+  maxDropdownHeight: { type: [Number, String], required: false },
+  hiddenWhenEmpty: { type: Boolean, required: false },
+  filterOptions: { type: Boolean, required: false },
+  nothingFoundMessage: { type: String, required: false },
+  labelId: { type: null, required: true },
+  ariaLabel: { type: null, required: true },
+  withCheckIcon: { type: Boolean, required: false },
+  iconPosition: { type: String, required: false },
+  checkIcon: { type: String, required: false }
+});
+const search = defineModel("search", { type: null });
+const value = defineModel({ type: [Object, Array, null] });
+const isEmpty = computed(() => isEmptyComboboxData(data));
+const filteredData = computed(() => typeof search.value === "string" ? (filter || defaultOptionsFilter)({
+  options: data,
+  search: filterOptions ? search.value : "",
+  limit: limit ?? Infinity
+}) : data);
+</script>
+
+<template>
+	<ComboboxDropdown data-composed>
+		<ComboboxOptionList :labelled-by='labelId' :aria-label='ariaLabel'>
+			<template
+				v-for='item in filteredData'
+				:key='isOptionsGroup(item) ? item.group : item?.value'
+			>
+				<ComboboxGroup
+					v-if='isOptionsGroup(item)'
+					v-model:value='value'
+					:data='item'
+					:with-check-icon
+					:icon-position
+					:check-icon
+				/>
+				<ComboboxOption
+					v-else
+					:data='item'
+					:with-check-icon
+					:icon-position
+					:check-icon
+					:checked='isValueChecked(value, item)'
+				/>
+			</template>
+			<ComboboxEmpty v-if='isEmpty'>
+				{{ nothingFoundMessage }}
+			</ComboboxEmpty>
+		</ComboboxOptionList>
+	</ComboboxDropdown>
+</template>

package/dist/runtime/components/combobox/combobox-options-dropdown.vue.d.ts

@@ -0,0 +1,34 @@
+import type { FilterOptionsInput } from './lib/utils/index.js';
+import type { ComboboxItem, ComboboxItemExt, ComboboxParsedItem } from './types/index.js';
+export interface ComboboxOptionsDropdownProps<Value extends string = string, Ext extends ComboboxItemExt = object> {
+    data: ComboboxParsedItem<Value, Ext>[];
+    filter?: (input: FilterOptionsInput<Value, Ext>) => ComboboxParsedItem<Value, Ext>[];
+    limit?: number;
+    withScrollArea?: boolean;
+    maxDropdownHeight?: number | string;
+    hiddenWhenEmpty?: boolean;
+    filterOptions?: boolean;
+    nothingFoundMessage?: string;
+    labelId: string | undefined;
+    ariaLabel: string | undefined;
+    withCheckIcon?: boolean;
+    iconPosition?: 'left' | 'right';
+    checkIcon?: string;
+}
+declare const __VLS_export: <Value extends string = string, Ext extends ComboboxItemExt = object>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<(ComboboxOptionsDropdownProps<Value, Ext> & {
+        search?: string | undefined;
+        modelValue?: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | null;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "update:modelValue", value: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | null | undefined) => void) & ((evt: "update:search", value: string | undefined) => void)>>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: ((evt: "update:modelValue", value: ComboboxItem<Value, Ext> | ComboboxItem<Value, Ext>[] | null | undefined) => void) & ((evt: "update:search", value: string | undefined) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

package/dist/runtime/components/combobox/combobox-root.d.vue.ts

@@ -0,0 +1,49 @@
+import type { UiKitSize } from '@nui/types';
+import type { CSSProperties } from 'vue';
+import type { PopoverProps } from '../popover/index.js';
+import type { ComboboxStore } from './lib/use-combobox/index.js';
+export interface ComboboxProps extends /* @vue-ignore */ PopoverProps {
+    store?: ComboboxStore;
+    /** Determines whether arrow key presses should loop though items (first to last and last to first), `true` by default */
+    loop?: boolean;
+    /** `behavior` passed down to `element.scrollIntoView`, `'instant'` by default */
+    scrollBehavior?: ScrollBehavior;
+    /** Controls items `font-size` and `padding` @default `'sm'` */
+    size?: UiKitSize;
+    /** Controls `padding` of the dropdown @default `4` */
+    dropdownPadding?: UiKitSize | CSSProperties['padding'];
+    /** Determines whether the `Combobox` value can be changed */
+    readOnly?: boolean;
+}
+type __VLS_Props = ComboboxProps;
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (args_0: number) => any;
+    clear: () => any;
+    close: (args_0: import("./types/index.js").ComboboxDropdownEventSource) => any;
+    submit: (args_0: string, args_1: import("./types/index.js").ComboboxItem) => any;
+    open: (args_0: import("./types/index.js").ComboboxDropdownEventSource) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((args_0: number) => any) | undefined;
+    onClear?: (() => any) | undefined;
+    onClose?: ((args_0: import("./types/index.js").ComboboxDropdownEventSource) => any) | undefined;
+    onSubmit?: ((args_0: string, args_1: import("./types/index.js").ComboboxItem) => any) | undefined;
+    onOpen?: ((args_0: import("./types/index.js").ComboboxDropdownEventSource) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => 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/combobox/combobox-root.vue

@@ -0,0 +1,46 @@
+<script setup>
+import Popover from "../popover/popover.vue";
+import { useProvideComboboxState } from "./lib/context";
+import { useCombobox } from "./lib/use-combobox";
+const {
+  scrollBehavior = "instant",
+  loop = true,
+  readOnly = false,
+  size = "sm",
+  store: _store,
+  dropdownPadding,
+  ...rest
+} = defineProps({
+  store: { type: Object, required: false },
+  loop: { type: Boolean, required: false },
+  scrollBehavior: { type: null, required: false },
+  size: { type: String, required: false },
+  dropdownPadding: { type: null, required: false },
+  readOnly: { type: Boolean, required: false }
+});
+const emit = defineEmits(["clear", "select", "open", "close", "submit"]);
+const opened = defineModel("open", { type: Boolean, ...{ default: false } });
+const store = _store ?? useCombobox({
+  loop,
+  scrollBehavior,
+  onSelect: (ix) => emit("select", ix),
+  onClear: () => emit("clear"),
+  onOpenDropdown: (source) => emit("open", source),
+  onCloseDropdown: (source) => emit("close", source),
+  opened
+});
+useProvideComboboxState({
+  store,
+  opened,
+  readOnly,
+  size,
+  onOptionSubmit: (value, option) => emit("submit", value, option),
+  dropdownPadding
+});
+</script>
+
+<template>
+	<Popover v-bind='rest' v-model:open='opened'>
+		<slot />
+	</Popover>
+</template>

package/dist/runtime/components/combobox/combobox-root.vue.d.ts

@@ -0,0 +1,49 @@
+import type { UiKitSize } from '@nui/types';
+import type { CSSProperties } from 'vue';
+import type { PopoverProps } from '../popover/index.js';
+import type { ComboboxStore } from './lib/use-combobox/index.js';
+export interface ComboboxProps extends /* @vue-ignore */ PopoverProps {
+    store?: ComboboxStore;
+    /** Determines whether arrow key presses should loop though items (first to last and last to first), `true` by default */
+    loop?: boolean;
+    /** `behavior` passed down to `element.scrollIntoView`, `'instant'` by default */
+    scrollBehavior?: ScrollBehavior;
+    /** Controls items `font-size` and `padding` @default `'sm'` */
+    size?: UiKitSize;
+    /** Controls `padding` of the dropdown @default `4` */
+    dropdownPadding?: UiKitSize | CSSProperties['padding'];
+    /** Determines whether the `Combobox` value can be changed */
+    readOnly?: boolean;
+}
+type __VLS_Props = ComboboxProps;
+type __VLS_ModelProps = {
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (args_0: number) => any;
+    clear: () => any;
+    close: (args_0: import("./types/index.js").ComboboxDropdownEventSource) => any;
+    submit: (args_0: string, args_1: import("./types/index.js").ComboboxItem) => any;
+    open: (args_0: import("./types/index.js").ComboboxDropdownEventSource) => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((args_0: number) => any) | undefined;
+    onClear?: (() => any) | undefined;
+    onClose?: ((args_0: import("./types/index.js").ComboboxDropdownEventSource) => any) | undefined;
+    onSubmit?: ((args_0: string, args_1: import("./types/index.js").ComboboxItem) => any) | undefined;
+    onOpen?: ((args_0: import("./types/index.js").ComboboxDropdownEventSource) => any) | undefined;
+    "onUpdate:open"?: ((value: boolean) => 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/combobox/combobox-target.d.vue.ts

@@ -0,0 +1,29 @@
+export interface ComboboxTargetProps {
+    /** If set, the component responds to keyboard events @default `true` */
+    withKeyboardNavigation?: boolean;
+    /** If set, the target has `aria-` attributes @default `true` */
+    withAriaAttributes?: boolean;
+    /** If set, the target has `aria-expanded` attribute @default `false` */
+    withExpandedAttribute?: boolean;
+    /**
+     * Determines which events is handled by the target element.
+     * `button` target type handles `Space` and `Enter` keys to toggle dropdown opened state.
+     * @default `input`
+     */
+    targetType?: 'button' | 'input';
+    /** Input autocomplete attribute */
+    autoComplete?: string;
+}
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ComboboxTargetProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ComboboxTargetProps> & 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/combobox/combobox-target.vue

@@ -0,0 +1,32 @@
+<script setup>
+import PopoverTarget from "../popover/popover-target.vue";
+import { useComboboxState } from "./lib/context";
+import { useComboboxTarget } from "./lib/use-combobox-target";
+const {
+  withAriaAttributes = true,
+  withExpandedAttribute = true,
+  withKeyboardNavigation = true,
+  targetType = "input",
+  autoComplete = "off"
+} = defineProps({
+  withKeyboardNavigation: { type: Boolean, required: false },
+  withAriaAttributes: { type: Boolean, required: false },
+  withExpandedAttribute: { type: Boolean, required: false },
+  targetType: { type: String, required: false },
+  autoComplete: { type: String, required: false }
+});
+const aria = useComboboxTarget({
+  targetType,
+  withKeyboardNavigation,
+  withExpandedAttribute,
+  autoComplete,
+  withAriaAttributes
+});
+const { store: { targetRef } } = useComboboxState();
+</script>
+
+<template>
+	<PopoverTarget ref='targetRef' v-bind='aria'>
+		<slot />
+	</PopoverTarget>
+</template>

package/dist/runtime/components/combobox/combobox-target.vue.d.ts

@@ -0,0 +1,29 @@
+export interface ComboboxTargetProps {
+    /** If set, the component responds to keyboard events @default `true` */
+    withKeyboardNavigation?: boolean;
+    /** If set, the target has `aria-` attributes @default `true` */
+    withAriaAttributes?: boolean;
+    /** If set, the target has `aria-expanded` attribute @default `false` */
+    withExpandedAttribute?: boolean;
+    /**
+     * Determines which events is handled by the target element.
+     * `button` target type handles `Space` and `Enter` keys to toggle dropdown opened state.
+     * @default `input`
+     */
+    targetType?: 'button' | 'input';
+    /** Input autocomplete attribute */
+    autoComplete?: string;
+}
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ComboboxTargetProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ComboboxTargetProps> & 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/combobox/combobox.module.css

@@ -0,0 +1 @@
+.dropdown{--combobox-padding:.25rem;padding:var(--combobox-padding)}.dropdown:has([data-scrollbar]) .search{max-width:calc(100% + var(--combobox-padding))}.dropdown[data-composed]{padding-inline-end:0}.dropdown[data-hidden]{display:none}.dropdown,.options{--combobox-option-padding-xs:rem(4px) rem(8px);--combobox-option-padding-sm:rem(6px) rem(10px);--combobox-option-padding-md:rem(8px) rem(12px);--combobox-option-padding-lg:rem(10px) rem(16px);--combobox-option-padding-xl:rem(14px) rem(20px);--combobox-option-padding:var(--combobox-option-padding-sm)}.option{align-items:center;background-color:transparent;border-radius:var(--radius-default);color:inherit;cursor:pointer;display:flex;font-size:var(--combobox-option-fz,var(--font-size-sm));gap:8px;overflow-wrap:break-word;padding:var(--combobox-option-padding)}.option:where([data-combobox-selected]){background-color:var(--color-primary-filled);color:var(--color-white)}.option:where([data-combobox-disabled]){cursor:not-allowed;opacity:.35}.option:where([data-reverse]){justify-content:space-between}.option{@mixin hover{&:where(:not([data-combobox-selected],[data-combobox-disabled])){@mixin where-light{background-color:var(--color-gray-0)}@mixin where-dark{background-color:var(--color-dark-7)}}}}.optionCheck{height:.8em;min-width:.8em;opacity:.4;width:.8em}:where([data-combobox-selected]) .optionCheck{opacity:1}.search{border-end-end-radius:0;border-end-start-radius:0;border-inline-width:0;border-top-width:0;margin-inline:calc(var(--combobox-padding)*-1);margin-bottom:var(--combobox-padding);margin-top:calc(var(--combobox-padding)*-1);position:relative;width:calc(100% + var(--combobox-padding)*2)}.search,.search:focus{@mixin where-light{border-color:var(--color-gray-2)}@mixin where-dark{border-color:var(--color-dark-4)}}.search{@mixin where-light{background-color:var(--color-white)}}.search{@mixin where-dark{background-color:var(--color-dark-7)}}.empty{color:var(--color-dimmed);font-size:var(--combobox-option-fz,var(--font-size-sm));padding:var(--combobox-option-padding);text-align:center}.footer,.header{border:0 solid transparent;font-size:var(--combobox-option-fz,var(--font-size-sm));margin-inline:calc(var(--combobox-padding)*-1);padding:var(--combobox-option-padding);@mixin where-light{border-color:var(--color-gray-2)}@mixin where-dark{border-color:var(--color-dark-4)}}.footer{border-top-width:1px;margin-bottom:calc(var(--combobox-padding)*-1);margin-top:var(--combobox-padding)}.header{border-bottom-width:1px;margin-bottom:var(--combobox-padding);margin-top:calc(var(--combobox-padding)*-1)}.group:has(.groupLabel:only-child){display:none}.groupLabel{align-items:center;color:var(--color-dimmed);display:flex;font-size:calc(var(--combobox-option-fz, var(--font-size-sm))*.85);font-weight:500;padding:var(--combobox-option-padding);position:relative}.groupLabel:after{content:"";flex:1;height:1px;inset-inline:0;margin-inline-start:var(--spacing-xs);@mixin where-light{background-color:var(--color-gray-2)}@mixin where-dark{background-color:var(--color-dark-4)}}.groupLabel:only-child{display:none}.chevron{--combobox-chevron-size-xs:rem(14px);--combobox-chevron-size-sm:rem(18px);--combobox-chevron-size-md:rem(20px);--combobox-chevron-size-lg:rem(24px);--combobox-chevron-size-xl:rem(28px);--combobox-chevron-size:var(--combobox-chevron-size-sm);@mixin where-light{--_combobox-chevron-color:var(--combobox-chevron-color,var(--color-gray-6))}@mixin where-dark{--_combobox-chevron-color:var(--combobox-chevron-color,var(--color-dark-3))}color:var(--_combobox-chevron-color);height:var(--combobox-chevron-size);width:var(--combobox-chevron-size)}.chevron:where([data-error]){color:var(--combobox-chevron-color,var(--color-error))}

package/dist/runtime/components/combobox/index.d.ts

@@ -0,0 +1,11 @@
+export type * from './combobox-dropdown.vue';
+export type * from './combobox-empty.vue';
+export type * from './combobox-group.vue';
+export type * from './combobox-option-list.vue';
+export type * from './combobox-option.vue';
+export type * from './combobox-options-dropdown.vue';
+export type * from './combobox-root.vue';
+export type * from './combobox-target.vue';
+export { type ComboboxStore, useCombobox } from './lib/use-combobox/index.js';
+export { useComboboxData } from './lib/use-combobox-data/index.js';
+export type * from './types';

package/dist/runtime/components/combobox/index.js

@@ -0,0 +1,2 @@
+export { useCombobox } from "./lib/use-combobox/index.js";
+export { useComboboxData } from "./lib/use-combobox-data/index.js";

package/dist/runtime/components/combobox/lib/const.d.ts

@@ -0,0 +1,7 @@
+export interface ComboboxAttrs {
+    selected: string;
+    option: string;
+    disabled: string;
+    active: string;
+}
+export declare const COMBOBOX_ATTRS: ComboboxAttrs;

package/dist/runtime/components/combobox/lib/const.js

@@ -0,0 +1,6 @@
+export const COMBOBOX_ATTRS = {
+  selected: "data-combobox-selected",
+  option: "data-combobox-option",
+  disabled: "data-combobox-disabled",
+  active: "data-combobox-active"
+};

package/dist/runtime/components/combobox/lib/context.d.ts

@@ -0,0 +1,16 @@
+import type { UiKitSize } from '@nui/types';
+import type { CSSProperties, ModelRef } from 'vue';
+import type { ComboboxItem } from '../types/index.js';
+import type { ComboboxStore } from './use-combobox/use-combobox.js';
+interface ComboboxState {
+    opened: ModelRef<boolean>;
+    onOptionSubmit?: (value: string, option: ComboboxItem) => void;
+    size: UiKitSize;
+    readOnly: boolean;
+    store: ComboboxStore;
+    dropdownPadding?: UiKitSize | CSSProperties['padding'];
+}
+export declare const useProvide: (args_0: ComboboxState) => ComboboxState, useState: () => ComboboxState;
+export declare const useProvideComboboxState: (args_0: ComboboxState) => ComboboxState;
+export declare const useComboboxState: () => ComboboxState;
+export {};

package/dist/runtime/components/combobox/lib/context.js

@@ -0,0 +1,8 @@
+import { createStrictInjection } from "@nui/helpers";
+const injectionKey = Symbol("combobox-store");
+export const [useProvide, useState] = createStrictInjection((state) => state, {
+  injectionKey,
+  name: "ComboboxState"
+});
+export const useProvideComboboxState = useProvide;
+export const useComboboxState = useState;

package/dist/runtime/components/combobox/lib/use-combobox/get-index.d.ts

@@ -0,0 +1,3 @@
+export declare function getPreviousIndex(currentIndex: number, elements: NodeListOf<HTMLDivElement> | HTMLDivElement[], loop: boolean, disabledAttr: string): number;
+export declare function getNextIndex(currentIndex: number, elements: NodeListOf<HTMLDivElement> | HTMLDivElement[], loop: boolean, disabledAttr: string): number;
+export declare function getFirstIndex(elements: NodeListOf<HTMLDivElement> | HTMLDivElement[], disabledAttr: string): number;

package/dist/runtime/components/combobox/lib/use-combobox/get-index.js

@@ -0,0 +1,33 @@
+export function getPreviousIndex(currentIndex, elements, loop, disabledAttr) {
+  for (let i = currentIndex - 1; i >= 0; i -= 1) {
+    if (!elements[i]?.hasAttribute(disabledAttr))
+      return i;
+  }
+  if (loop) {
+    for (let i = elements.length - 1; i > -1; i -= 1) {
+      if (!elements[i]?.hasAttribute(disabledAttr))
+        return i;
+    }
+  }
+  return currentIndex;
+}
+export function getNextIndex(currentIndex, elements, loop, disabledAttr) {
+  for (let i = currentIndex + 1; i < elements.length; i += 1) {
+    if (!elements[i]?.hasAttribute(disabledAttr))
+      return i;
+  }
+  if (loop) {
+    for (let i = 0; i < elements.length; i += 1) {
+      if (!elements[i]?.hasAttribute(disabledAttr))
+        return i;
+    }
+  }
+  return currentIndex;
+}
+export function getFirstIndex(elements, disabledAttr) {
+  for (let i = 0; i < elements.length; i += 1) {
+    if (!elements[i]?.hasAttribute(disabledAttr))
+      return i;
+  }
+  return -1;
+}

package/dist/runtime/components/combobox/lib/use-combobox/handlers.d.ts

@@ -0,0 +1,36 @@
+import type { ComboboxAttrs } from '../const.js';
+type ComboboxHandlerOptions<T extends Record<string, unknown> = Record<string, unknown>> = {
+    listId: string;
+    attrs: ComboboxAttrs;
+} & T;
+export type SelectHandlerReturn = {
+    ix: number;
+    value: string | null;
+} | void;
+type ExtFn = (ix: number) => unknown;
+type DefaultFn = (ix: number) => unknown;
+export declare function clearSelected({ listId, attrs }: ComboboxHandlerOptions): void;
+export declare function selectOption(ix: number, { listId, attrs, scrollBehavior, clearFn, }: ComboboxHandlerOptions<{
+    scrollBehavior: ScrollBehavior;
+    clearFn: (listId: string) => void;
+}>): SelectHandlerReturn;
+export declare function selectActiveOption<T extends ExtFn = DefaultFn>({ listId, attrs, selectFn, }: ComboboxHandlerOptions<{
+    selectFn: T;
+}>): ReturnType<T>;
+export declare function selectNextOption<T extends ExtFn = DefaultFn>(ix: number, { listId, loop, attrs, selectFn, }: ComboboxHandlerOptions<{
+    loop: boolean;
+    selectFn: T;
+}>): ReturnType<T>;
+export declare function selectPrevOption<T extends ExtFn = DefaultFn>(ix: number, { listId, loop, attrs, selectFn, }: ComboboxHandlerOptions<{
+    loop: boolean;
+    selectFn: T;
+}>): ReturnType<T>;
+export declare function selectFirstOption<T extends ExtFn = DefaultFn>({ listId, attrs, selectFn }: ComboboxHandlerOptions<{
+    loop: boolean;
+    selectFn: T;
+}>): ReturnType<T>;
+export declare function updateSelectedOptionIx(target: "active" | "selected" | undefined, { listId, attrs, scrollIntoView, scrollBehavior }: ComboboxHandlerOptions<{
+    scrollIntoView?: boolean;
+    scrollBehavior: ScrollBehavior;
+}>): number;
+export {};