nuance-ui 0.1.1

package/dist/runtime/components/popover/lib/use-popover.js

@@ -0,0 +1,47 @@
+import { arrow, autoUpdate, flip, hide, inline, limitShift, offset, shift, size, useFloating } from "@floating-ui/vue";
+import { computed, shallowRef } from "vue";
+import { getArrowPosition } from "./get-arrow-position.js";
+export function usePopover(options) {
+  const { opened, strategy, placement } = options;
+  const arrowRef = shallowRef(null);
+  const targetRef = shallowRef(null);
+  const dropdownRef = shallowRef(null);
+  const middleware = computed(() => [
+    offset(options.offset),
+    hide(),
+    shift({ limiter: limitShift(), padding: 5 }),
+    inline(),
+    flip(),
+    size(({ elements }) => ({
+      padding: 4,
+      apply({ rects, availableWidth, availableHeight }) {
+        const floating = elements.floating;
+        const styles = floating.style ?? {};
+        floating.style.maxWidth = `${Math.max(0, availableWidth)}px`;
+        floating.style.maxHeight = availableHeight >= floating.scrollHeight ? "" : `${Math.max(0, availableHeight)}px`;
+        if (options.width === "target")
+          Object.assign(styles, { width: `${rects.reference.width}px` });
+      }
+    })),
+    arrow({ element: arrowRef.value, padding: options.arrowOffset })
+  ]);
+  const { middlewareData, floatingStyles } = useFloating(targetRef, dropdownRef, {
+    strategy,
+    placement,
+    middleware,
+    whileElementsMounted: autoUpdate,
+    open: opened
+  });
+  const arrowStyles = computed(() => getArrowPosition({
+    ...options,
+    arrowX: middlewareData.value.arrow?.x,
+    arrowY: middlewareData.value.arrow?.y
+  }));
+  return {
+    arrowStyles,
+    floatingStyles,
+    arrowRef,
+    targetRef,
+    dropdownRef
+  };
+}

package/dist/runtime/components/popover/popover-dropdown.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/popover/popover-dropdown.vue

@@ -0,0 +1,90 @@
+<script setup>
+import { getRadius, getShadow } from "@nui/utils";
+import { computed } from "vue";
+import { usePopoverState } from "./lib/context";
+const {
+  id,
+  onToggle,
+  store: { floatingStyles, arrowStyles, arrowRef, dropdownRef },
+  withArrow,
+  radius,
+  shadow
+} = usePopoverState();
+const style = computed(() => ({
+  "--popover-radius": radius ? getRadius(radius) : void 0,
+  "--popover-shadow": getShadow(shadow)
+}));
+</script>
+
+<template>
+	<div
+		:id='id'
+		ref='dropdownRef'
+		popover
+		:style='{ ...floatingStyles, ...style }'
+		:class='$style.dropdown'
+		@toggle='onToggle'
+	>
+		<slot />
+		<span
+			v-if='withArrow'
+			ref='arrowRef'
+			:class='$style.arrow'
+			:style='arrowStyles'
+		/>
+	</div>
+</template>
+
+<style module lang="postcss">
+.dropdown {
+	--popover-radius: var(--radius-default);
+	--popover-shadow: none;
+
+	overflow: visible;
+
+	padding: var(--spacing-xs) var(--spacing-sm);
+	border: 1px solid var(--popover-border-color);
+	border-radius: var(--popover-radius);
+
+	opacity: 0;
+	box-shadow: var(--popover-shadow);
+
+	transition: opacity 0.2s, overlay 0.2s allow-discrete, display 0.2s allow-discrete;
+
+	&:popover-open {
+		opacity: 1;
+
+		@starting-style {
+			opacity: 0;
+		}
+	}
+
+	@mixin where-light {
+		--popover-border-color: var(--color-gray-2);
+
+		background-color: var(--color-white);
+	}
+
+	@mixin where-dark {
+		--popover-border-color: var(--color-dark-4);
+
+		background-color: var(--color-dark-6);
+	}
+}
+
+.arrow {
+	--arrow-size: 7px;
+	--arrow-radius: 0px;
+	--arrow-placement: calc(var(--arrow-size) / 2 * -1);
+
+	position: absolute;
+	transform: rotate(45deg);
+
+	width: var(--arrow-size);
+	height: var(--arrow-size);
+
+	border: 1px solid var(--popover-border-color);
+
+	background-color: inherit;
+}
+</style>

package/dist/runtime/components/popover/popover-dropdown.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/popover/popover-target.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/popover/popover-target.vue

@@ -0,0 +1,11 @@
+<script setup>
+import Renderless from "../renderless/renderless.vue";
+import { usePopoverState } from "./lib/context";
+const { id, store: { targetRef }, disabled } = usePopoverState();
+</script>
+
+<template>
+	<Renderless ref='targetRef' :disabled :popovertarget='id'>
+		<slot />
+	</Renderless>
+</template>

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

@@ -0,0 +1,13 @@
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/popover/popover.d.vue.ts

@@ -0,0 +1,27 @@
+import type { PopoverModel, PopoverProps } from './types/index.js';
+type __VLS_Props = PopoverProps;
+type __VLS_ModelProps = {
+    'open'?: PopoverModel['open'];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    open: () => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onOpen?: (() => 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/popover/popover.vue

@@ -0,0 +1,79 @@
+<script setup>
+import { unrefElement } from "@vueuse/core";
+import { onBeforeMount, onMounted, useId, watch } from "vue";
+import { useProvidePopoverState } from "./lib/context";
+import { usePopover } from "./lib/use-popover";
+defineOptions({ inheritAttrs: false });
+const {
+  placement = "bottom",
+  offset = 8,
+  arrowSize,
+  arrowRadius,
+  arrowOffset = 5,
+  arrowPosition = "center",
+  width = "max-content",
+  disabled,
+  floatingStrategy = "fixed",
+  radius,
+  shadow,
+  withArrow = false
+} = defineProps({
+  placement: { type: null, required: false },
+  offset: { type: [Number, Object, Function], required: false },
+  keepMounted: { type: Boolean, required: false },
+  width: { type: null, required: false },
+  withArrow: { type: Boolean, required: false },
+  arrowSize: { type: Number, required: false },
+  arrowOffset: { type: Number, required: false },
+  arrowRadius: { type: Number, required: false },
+  arrowPosition: { type: String, required: false },
+  radius: { type: [String, Number], required: false },
+  shadow: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  floatingStrategy: { type: String, required: false }
+});
+const emit = defineEmits(["open", "close"]);
+const uid = useId();
+const opened = defineModel("open", { type: Boolean, ...{ default: false } });
+const store = usePopover({
+  placement,
+  strategy: floatingStrategy,
+  opened,
+  arrowOffset,
+  arrowPosition,
+  arrowRadius,
+  arrowSize,
+  offset: typeof offset === "number" ? offset + (withArrow ? (arrowSize ?? 7) / 2 : 0) : offset,
+  width,
+  withArrow
+});
+function sync(value, emitting = true) {
+  if (value) {
+    unrefElement(store.dropdownRef)?.showPopover();
+    emitting && emit("open");
+  } else {
+    unrefElement(store.dropdownRef)?.hidePopover();
+    emitting && emit("close");
+  }
+}
+watch(opened, (isOpen) => sync(isOpen), { flush: "post" });
+onMounted(() => {
+  if (!opened.value)
+    return;
+  sync(opened.value, false);
+});
+onBeforeMount(() => sync(false));
+useProvidePopoverState({
+  id: uid,
+  disabled,
+  onToggle: (e) => opened.value = e.newState === "open",
+  store,
+  withArrow,
+  shadow,
+  radius
+});
+</script>
+
+<template>
+	<slot />
+</template>

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

@@ -0,0 +1,27 @@
+import type { PopoverModel, PopoverProps } from './types/index.js';
+type __VLS_Props = PopoverProps;
+type __VLS_ModelProps = {
+    'open'?: PopoverModel['open'];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    open: () => any;
+    "update:open": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onOpen?: (() => 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/popover/types/index.d.ts

@@ -0,0 +1,42 @@
+import type { AlignedPlacement, OffsetOptions, Side, Strategy } from '@floating-ui/vue';
+import type { CSSProperties } from 'vue';
+import type { UiKitRadius, UiKitShadow } from '~/src/runtime/types/theme';
+export type ArrowPosition = 'center' | 'side';
+export type PopoverWidth = 'target' | CSSProperties['width'] | null;
+export interface PopoverProps {
+    /** Dropdown position relative to the target element @default `'bottom'` */
+    placement?: Side | AlignedPlacement;
+    /** Offset of the dropdown element @default `8` */
+    offset?: OffsetOptions;
+    /** If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead. */
+    keepMounted?: boolean;
+    /** Dropdown width, or `'target'` to make dropdown width the same as target element @default `'max-content'` */
+    width?: PopoverWidth;
+    /** Determines whether component should have an arrow @default `false` */
+    withArrow?: boolean;
+    /** Arrow size in px @default `7` */
+    arrowSize?: number;
+    /** Arrow offset in px @default `5` */
+    arrowOffset?: number;
+    /** Arrow `border-radius` in px @default `0` */
+    arrowRadius?: number;
+    /** Arrow position */
+    arrowPosition?: ArrowPosition;
+    /** Key of `theme.radius` or any valid CSS value to set border-radius @default `theme.defaultRadius` */
+    radius?: UiKitRadius;
+    /** Key of `theme.shadows` or any other valid CSS `box-shadow` value */
+    shadow?: UiKitShadow;
+    /** If set, popover dropdown will not be rendered */
+    disabled?: boolean;
+    /** Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) @default `'absolute'` */
+    floatingStrategy?: Strategy;
+}
+export interface PopoverModel {
+    open: boolean;
+}
+export interface PopoverEmits {
+    /** Event handler called when the popover open */
+    open: [];
+    /** Event handler called when the popover closed */
+    close: [];
+}

package/dist/runtime/components/renderless/renderless-slot.d.ts

@@ -0,0 +1,6 @@
+import type { VNode } from 'vue';
+export declare const Slot: import("vue").DefineComponent<{}, () => VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}> | VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>[] | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/components/renderless/renderless-slot.js

@@ -0,0 +1,32 @@
+import { cloneVNode, Comment, defineComponent, Fragment, mergeProps } from "vue";
+function renderSlotFragments(children) {
+  if (!children)
+    return [];
+  return children.flatMap((child) => {
+    if (child.type === Fragment)
+      return renderSlotFragments(child.children);
+    return [child];
+  });
+}
+export const Slot = defineComponent({
+  name: "PrimitiveSlot",
+  inheritAttrs: false,
+  setup(_, { attrs, slots }) {
+    return () => {
+      if (!slots.default)
+        return null;
+      const children = renderSlotFragments(slots.default());
+      const firstNonCommentChildrenIndex = children.findIndex((child) => child.type !== Comment);
+      if (firstNonCommentChildrenIndex === -1)
+        return children;
+      const firstNonCommentChildren = children[firstNonCommentChildrenIndex];
+      delete firstNonCommentChildren.props?.ref;
+      const mergedProps = firstNonCommentChildren.props ? mergeProps(attrs, firstNonCommentChildren.props) : attrs;
+      const cloned = cloneVNode({ ...firstNonCommentChildren, props: {} }, mergedProps);
+      if (children.length === 1)
+        return cloned;
+      children[firstNonCommentChildrenIndex] = cloned;
+      return children;
+    };
+  }
+});

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

@@ -0,0 +1,13 @@
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/renderless/renderless.vue

@@ -0,0 +1,12 @@
+<script setup>
+import { Slot } from "./renderless-slot";
+defineOptions({
+  inheritAttrs: false
+});
+</script>
+
+<template>
+	<Slot v-bind='$attrs'>
+		<slot />
+	</Slot>
+</template>

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

@@ -0,0 +1,13 @@
+declare var __VLS_7: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, 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/select/index.d.ts

@@ -0,0 +1 @@
+export type * from './select.vue';

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

@@ -0,0 +1,45 @@
+import type { ComboboxData, ComboboxItem, ComboboxItemExt, ComboboxTargetProps } from '../combobox/index.js';
+import type { InputProps } from '../input/index.js';
+export interface SelectProps<Value extends string = string, Ext extends ComboboxItemExt = object> extends /* @vue-ignore */ Omit<InputProps, 'modelValue' | 'multiline' | 'resize' | 'is' | 'id'>, Pick<ComboboxTargetProps, 'autoComplete'> {
+    data: ComboboxData<Value, Ext>;
+    /** Determines whether the select should be searchable @default `false` */
+    searchable?: boolean;
+    /** If set, the check icon is displayed near the selected option label @default `true` */
+    withCheckIcon?: boolean;
+    /** Position of the check icon relative to the option label @default `'left'` */
+    iconPosition?: 'left' | 'right';
+    /** Message displayed when no option matches the current search query when the `searchable` prop is set or there is no data */
+    nothingFoundMessage?: string;
+    /** If set, it becomes possible to deselect value by clicking on the selected option @default `true` */
+    allowDeselect?: boolean;
+    /** If set, the clear button is displayed in the right section when the component has value @default `false` */
+    limit?: number;
+}
+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<(SelectProps<Value, Ext> & {
+        open?: boolean;
+        modelValue?: ComboboxItem<Value, Ext> | null;
+        search?: string;
+    }) & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("../combobox/index.js").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("../combobox/index.js").ComboboxDropdownEventSource) => void) & ((evt: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((evt: "update:search", value: string) => void) & ((evt: "update:open", value: boolean) => void)>>> & import("vue").PublicProps;
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        label?: (props: {}) => any;
+    } & {
+        description?: (props: {}) => any;
+    } & {
+        error?: (props: {}) => any;
+    } & {
+        leftSection?: (props: {}) => any;
+    } & {
+        rightSection?: (props: {}) => any;
+    };
+    emit: (((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("../combobox/index.js").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("../combobox/index.js").ComboboxDropdownEventSource) => void)) & (((evt: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((evt: "update:search", value: string) => void) & ((evt: "update:open", value: boolean) => 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/select/select.vue

@@ -0,0 +1,131 @@
+<script setup>
+import { nextTick, useId, watch } from "vue";
+import Button from "../button/button.vue";
+import { useCombobox, useComboboxData } from "../combobox";
+import ComboboxOptionsDropdown from "../combobox/combobox-options-dropdown.vue";
+import ComboboxRoot from "../combobox/combobox-root.vue";
+import ComboboxTarget from "../combobox/combobox-target.vue";
+import Input from "../input/input.vue";
+const {
+  data,
+  disabled,
+  searchable = false,
+  rightSectionPE = "none",
+  readonly = false,
+  allowDeselect = false,
+  autoComplete = "off",
+  limit,
+  iconPosition,
+  nothingFoundMessage,
+  withCheckIcon,
+  ...rest
+} = defineProps({
+  data: { type: Array, required: true },
+  searchable: { type: Boolean, required: false },
+  withCheckIcon: { type: Boolean, required: false },
+  iconPosition: { type: String, required: false },
+  nothingFoundMessage: { type: String, required: false },
+  allowDeselect: { type: Boolean, required: false },
+  limit: { type: Number, required: false },
+  autoComplete: { type: String, required: false }
+});
+const emit = defineEmits(["clear", "select", "open", "close", "submit"]);
+const opened = defineModel("open", { type: Boolean, ...{ default: false } });
+const value = defineModel({ type: [Object, null], ...{ default: null } });
+const { parsed, options } = useComboboxData(data);
+const id = useId();
+const store = useCombobox({
+  listId: id,
+  opened,
+  loop: true,
+  scrollBehavior: "instant",
+  onSelect: (ix) => emit("select", ix),
+  onClear: () => emit("clear"),
+  onOpenDropdown: (source) => {
+    emit("open", source);
+    store.updateSelectedOptionIx("active", { scrollIntoView: true });
+  },
+  onCloseDropdown: (source) => {
+    emit("close", source);
+    nextTick(() => store.resetSelectedOption());
+  }
+});
+const search = defineModel("search", { type: String, ...{ default: "" } });
+watch(search, () => nextTick(() => store.resetSelectedOption()));
+</script>
+
+<template>
+	<ComboboxRoot
+		v-model:open='opened'
+		width='target'
+		:store
+		@submit='(val, option) => {
+  $emit("submit", val, option);
+  const optionsLockup = allowDeselect ? options[val]?.value === value?.value ? null : options[val] : options[val];
+  const nextValue = optionsLockup ? optionsLockup : null;
+  value = nextValue;
+  search = nextValue?.label ?? "";
+  store.closeDropdown();
+}'
+	>
+		<ComboboxTarget :target-type='searchable ? "input" : "button"' :auto-complete>
+			<component
+				:is='searchable ? Input : Button'
+				:id
+				v-bind='{ ...rest, ...$attrs }'
+				v-model='search'
+				:disabled
+				:right-section-p-e
+				:readonly='readonly || !searchable'
+				:class='$style.input'
+				@focus='() => searchable && store.openDropdown()'
+				@blur='() => {
+  searchable && store.closeDropdown();
+  search = value?.label ?? "";
+}'
+				@click.prevent.stop='() => searchable ? store.openDropdown() : store.toggleDropdown()'
+			>
+				{{ value?.value ?? null }}
+
+				<template v-if='$slots?.label' #label>
+					<slot name='label' />
+				</template>
+				<template v-if='$slots?.description' #description>
+					<slot name='description' />
+				</template>
+				<template v-if='$slots?.error' #error>
+					<slot name='error' />
+				</template>
+
+				<template v-if='$slots.leftSection || value?.icon' #leftSection>
+					<slot name='leftSection'>
+						<Icon v-if='value?.icon' :name='value?.icon' />
+					</slot>
+				</template>
+				<template #rightSection>
+					<slot name='rightSection'>
+						<Icon name='gravity-ui:chevrons-expand-vertical' />
+					</slot>
+				</template>
+			</component>
+		</ComboboxTarget>
+		<ComboboxOptionsDropdown
+			v-model='value'
+			:data='parsed'
+			:limit
+			:with-check-icon
+			:icon-position
+			:nothing-found-message
+			:aria-label='id'
+			:label-id='id'
+		/>
+	</ComboboxRoot>
+</template>
+
+<style module lang="postcss">
+.input {
+	:where([readonly]) {
+		cursor: pointer;
+	}
+}
+</style>