nuance-ui 0.2.6 → 0.2.8

package/dist/runtime/components/checkbox/checkbox-group.vue.d.ts

@@ -1,8 +1,19 @@
 import type { NuanceSize } from '@nui/types';
 import type { InputWrapperProps } from '../input/index.js';
 export interface CheckboxGroupProps extends Omit<InputWrapperProps, 'resize' | 'multiline' | 'id' | 'size'> {
-    name: string;
+    /** Input name */
+    name?: string;
+    /** Component size */
     size?: NuanceSize;
+    /** Prevents value changes */
+    readOnly?: boolean;
+    /** Disables the component */
+    disabled?: boolean;
+    /**
+     * Maximum number of checkboxes that can be selected.
+     * Unselected switches are disabled once the limit is reached
+     */
+    maxSelectedValues?: number;
 }
 type __VLS_Props = CheckboxGroupProps;
 type __VLS_ModelProps = {

package/dist/runtime/components/checkbox/checkbox-indicator.d.vue.ts

@@ -1,10 +1,16 @@
 import type { NuanceColor, NuanceSize } from '@nui/types';
 export interface CheckboxIndicatorProps {
+    /** Color from theme */
     color?: NuanceColor;
+    /** Icon color */
     iconColor?: NuanceColor;
+    /** Visual variant */
     variant?: 'filled' | 'outline';
+    /** Border radius */
     radius?: NuanceSize;
+    /** Component size */
     size?: NuanceSize;
+    /** Displays indeterminate icon */
     indeterminate?: boolean;
 }
 type __VLS_Props = CheckboxIndicatorProps;

package/dist/runtime/components/checkbox/checkbox-indicator.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useStyleResolver } from "@nui/composals";
+import { useStyleResolver } from "@nui/composables";
 import { getRadius, getSize, getThemeColor, parseThemeColor } from "@nui/utils";
 import { computed } from "vue";
 import Box from "../box.vue";
@@ -76,7 +76,7 @@ const style = computed(() => useStyleResolver((theme) => {
 	border-radius: var(--checkbox-radius);
 
 	transition: border-color 100ms ease,
-	background-color 100ms ease;
+		background-color 100ms ease;
 	-webkit-tap-highlight-color: transparent;
 
 	&[data-indeterminate],
@@ -85,7 +85,7 @@ const style = computed(() => useStyleResolver((theme) => {
 
 		background-color: var(--checkbox-color);
 
-		& > .icon {
+		&>.icon {
 			transform: none;
 
 			color: var(--checkbox-icon-color);
@@ -101,7 +101,7 @@ const style = computed(() => useStyleResolver((theme) => {
 
 		background-color: var(--color-disabled);
 
-		&[data-checked] > .icon {
+		&[data-checked]>.icon {
 			@mixin light {
 				color: var(--color-gray-5);
 			}
@@ -126,13 +126,14 @@ const style = computed(() => useStyleResolver((theme) => {
 }
 
 .indicator[data-variant='outline'] {
+
 	&[data-indeterminate]:not([data-disabled]),
 	&[data-checked]:not([data-disabled]) {
 		border-color: var(--checkbox-color);
 
 		background-color: transparent;
 
-		& > .icon {
+		&>.icon {
 			transform: none;
 
 			color: var(--checkbox-color);
@@ -156,6 +157,6 @@ const style = computed(() => useStyleResolver((theme) => {
 	opacity: 1;
 
 	transition: transform 100ms ease,
-	opacity 100ms ease;
+		opacity 100ms ease;
 }
 </style>

package/dist/runtime/components/checkbox/checkbox-indicator.vue.d.ts

@@ -1,10 +1,16 @@
 import type { NuanceColor, NuanceSize } from '@nui/types';
 export interface CheckboxIndicatorProps {
+    /** Color from theme */
     color?: NuanceColor;
+    /** Icon color */
     iconColor?: NuanceColor;
+    /** Visual variant */
     variant?: 'filled' | 'outline';
+    /** Border radius */
     radius?: NuanceSize;
+    /** Component size */
     size?: NuanceSize;
+    /** Displays indeterminate icon */
     indeterminate?: boolean;
 }
 type __VLS_Props = CheckboxIndicatorProps;

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

@@ -1,11 +1,25 @@
 import type { NuanceColor, NuanceSize } from '@nui/types';
 import type { InlineInputProps } from '../input/index.js';
 export interface CheckboxProps extends Omit<InlineInputProps, 'id'> {
+    /** Id used to bind input and label, auto-generated if not provided */
+    id?: string;
+    /** Color from theme */
     color?: NuanceColor;
+    /** Icon color */
     iconColor?: NuanceColor;
+    /**
+     * Visual variant
+     * @default `'filled'`
+     */
     variant?: 'filled' | 'outline';
+    /** Border radius */
     radius?: NuanceSize;
+    /**
+     * Component size
+     * @default `'sm'`
+     */
     size?: NuanceSize;
+    /** Value used in checkbox group context */
     value?: string;
 }
 type __VLS_Props = CheckboxProps;
@@ -21,9 +35,9 @@ type __VLS_Slots = {} & {
     icon?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: boolean | "indeterminate" | undefined) => any;
+    "update:modelValue": (value: boolean | "indeterminate") => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean | "indeterminate" | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean | "indeterminate") => 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;

package/dist/runtime/components/checkbox/checkbox.vue

@@ -1,19 +1,22 @@
 <script setup>
-import { useStyleResolver } from "@nui/composals";
+import { useStyleResolver } from "@nui/composables";
 import { getRadius, getSize, getThemeColor, parseThemeColor } from "@nui/utils";
 import { computed, useId } from "vue";
 import Box from "../box.vue";
 import InputInline from "../input/ui/input-inline.vue";
 import { useCheckboxGroupState } from "./lib/group.context";
 const {
+  id,
   size: _size = "sm",
   radius,
   variant = "filled",
   color,
   iconColor,
   value,
+  disabled: _disabled,
   ...rest
 } = defineProps({
+  id: { type: String, required: false },
   color: { type: null, required: false },
   iconColor: { type: null, required: false },
   variant: { type: String, required: false },
@@ -25,19 +28,34 @@ const {
   error: { type: String, required: false },
   disabled: { type: Boolean, required: false, skipCheck: true },
   labelPosition: { type: String, required: false },
+  bodyElement: { type: null, required: false },
+  labelElement: { type: null, required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false }
 });
-const id = useId();
-const modelValue = defineModel({ type: [Boolean, String] });
+const modelValue = defineModel({ type: [Boolean, String], ...{ default: false } });
 const ctx = useCheckboxGroupState();
-const checked = computed(() => {
-  if (ctx?.value && value)
-    return ctx?.value.value.includes(value);
-  return !!modelValue.value;
+const checked = computed({
+  get: () => {
+    if (ctx && value !== void 0)
+      return ctx.isSelected(value);
+    return modelValue.value;
+  },
+  set: (check) => {
+    if (ctx && value !== void 0)
+      return ctx.update(value);
+    modelValue.value = check;
+  }
 });
-const size = ctx?.size ?? _size;
-const toggle = () => modelValue.value = !modelValue.value;
+const disabled = computed(() => {
+  if (_disabled)
+    return true;
+  if (ctx && value !== void 0)
+    return ctx.isDisabled(value);
+  return false;
+});
+const uuid = computed(() => id ?? useId());
+const size = computed(() => _size ?? ctx?.size);
 const style = computed(() => useStyleResolver((theme) => {
   const parsed = parseThemeColor({ color, theme });
   const outlineColor = parsed.isThemeColor && parsed.shade === void 0 ? `var(--color-${parsed.color}-outline)` : parsed.color;
@@ -51,15 +69,14 @@ const style = computed(() => useStyleResolver((theme) => {
 </script>
 
 <template>
-	<InputInline v-bind='rest' :id :class='$style.root' :style :size>
+	<InputInline v-bind='rest' :id='uuid' :class='$style.root' :style :size>
 		<Box :class='$style.inner' :mod='{ "label-position": rest?.labelPosition }'>
 			<input
 				:id
-				:checked
+				v-model='checked'
 				type='checkbox'
 				:class='$style.input'
-				:disabled='rest.disabled'
-				@change='() => value && ctx ? ctx.onUpdate(value) : toggle()'
+				:disabled
 			>
 
 			<slot name='icon' :indeterminate='modelValue === "indeterminate"' :class='$style.icon'>
@@ -111,7 +128,7 @@ const style = computed(() => useStyleResolver((theme) => {
 	appearance: none;
 
 	transition: border-color 100ms ease,
-	background-color 100ms ease;
+		background-color 100ms ease;
 	-webkit-tap-highlight-color: transparent;
 
 	&:where([data-error]) {
@@ -124,7 +141,7 @@ const style = computed(() => useStyleResolver((theme) => {
 
 		background-color: var(--checkbox-color);
 
-		& + .icon {
+		&+.icon {
 			transform: none;
 
 			opacity: 1;
@@ -138,7 +155,7 @@ const style = computed(() => useStyleResolver((theme) => {
 
 		background-color: var(--color-disabled);
 
-		& + .icon {
+		&+.icon {
 			color: var(--color-disabled);
 		}
 	}
@@ -157,7 +174,7 @@ const style = computed(() => useStyleResolver((theme) => {
 }
 
 .input[data-variant='outline'] {
-	& + .icon {
+	&+.icon {
 		color: var(--checkbox-color);
 	}
 
@@ -167,7 +184,7 @@ const style = computed(() => useStyleResolver((theme) => {
 
 		background-color: transparent;
 
-		& + .icon {
+		&+.icon {
 			transform: none;
 
 			color: var(--checkbox-color);
@@ -192,6 +209,6 @@ const style = computed(() => useStyleResolver((theme) => {
 	opacity: 0;
 
 	transition: transform 100ms ease,
-	opacity 100ms ease;
+		opacity 100ms ease;
 }
 </style>

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

@@ -1,11 +1,25 @@
 import type { NuanceColor, NuanceSize } from '@nui/types';
 import type { InlineInputProps } from '../input/index.js';
 export interface CheckboxProps extends Omit<InlineInputProps, 'id'> {
+    /** Id used to bind input and label, auto-generated if not provided */
+    id?: string;
+    /** Color from theme */
     color?: NuanceColor;
+    /** Icon color */
     iconColor?: NuanceColor;
+    /**
+     * Visual variant
+     * @default `'filled'`
+     */
     variant?: 'filled' | 'outline';
+    /** Border radius */
     radius?: NuanceSize;
+    /**
+     * Component size
+     * @default `'sm'`
+     */
     size?: NuanceSize;
+    /** Value used in checkbox group context */
     value?: string;
 }
 type __VLS_Props = CheckboxProps;
@@ -21,9 +35,9 @@ type __VLS_Slots = {} & {
     icon?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: boolean | "indeterminate" | undefined) => any;
+    "update:modelValue": (value: boolean | "indeterminate") => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean | "indeterminate" | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean | "indeterminate") => 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;

package/dist/runtime/components/checkbox/lib/group.context.d.ts

@@ -1,16 +1,28 @@
 import type { NuanceSize } from '@nui/types';
 import type { ModelRef } from 'vue';
 export interface CheckboxGroupState {
+    /** Selected values */
     value: ModelRef<string[]>;
+    /** Component size */
     size?: NuanceSize;
+    /** Disables the component */
+    disabled?: boolean;
+    /** Prevents value changes */
+    readOnly?: boolean;
+    /** Maximum number of switches that can be selected */
+    maxSelectedValues?: number;
 }
-export declare const useProvideCheckboxGroup: (args_0: CheckboxGroupState) => {
+export declare const useProvideCheckboxGroup: (state: CheckboxGroupState) => {
     value: ModelRef<string[]>;
     size: NuanceSize | undefined;
-    onUpdate: (newValue: string) => number | string[];
+    update: (value: string) => void;
+    isDisabled: (value: string) => boolean;
+    isSelected: (value: string) => boolean;
 };
 export declare const useCheckboxGroupState: () => {
     value: ModelRef<string[]>;
     size: NuanceSize | undefined;
-    onUpdate: (newValue: string) => number | string[];
+    update: (value: string) => void;
+    isDisabled: (value: string) => boolean;
+    isSelected: (value: string) => boolean;
 } | undefined;

package/dist/runtime/components/checkbox/lib/group.context.js

@@ -1,12 +1,14 @@
+import { useSelectableGroup } from "@nui/composables";
 import { createInjectionState } from "@vueuse/core";
 const injectionKey = Symbol("CheckboxGroup");
-const [useProvide, useState] = createInjectionState(({ value, size }) => {
-  const onUpdate = (newValue) => {
-    if (value.value.includes(newValue))
-      return value.value = value.value.filter((i) => i !== newValue);
-    return value.value.push(newValue);
-  };
-  return { value, size, onUpdate };
+const [useProvide, useState] = createInjectionState((state) => {
+  const { value, size, disabled, readOnly, maxSelectedValues } = state;
+  const { update, isSelected, isDisabled } = useSelectableGroup(value, {
+    disabled,
+    readOnly,
+    maxSelectedValues
+  });
+  return { value, size, update, isDisabled, isSelected };
 }, {
   injectionKey
 });

package/dist/runtime/components/chip/chip-group.d.vue.ts

@@ -1,7 +1,10 @@
 import type { ChipGroupValue } from './lib.js';
 export interface ChipGroupProps<T extends boolean = false> {
+    /** Form input name */
     name: string;
+    /** Allows selecting multiple chips at once */
     multiple?: T;
+    /** Disables all chips in the group */
     disabled?: boolean;
 }
 declare const __VLS_export: <T extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{

package/dist/runtime/components/chip/chip-group.vue.d.ts

@@ -1,7 +1,10 @@
 import type { ChipGroupValue } from './lib.js';
 export interface ChipGroupProps<T extends boolean = false> {
+    /** Form input name */
     name: string;
+    /** Allows selecting multiple chips at once */
     multiple?: T;
+    /** Disables all chips in the group */
     disabled?: boolean;
 }
 declare const __VLS_export: <T extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{

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

@@ -1,14 +1,24 @@
 import type { NuanceColor, NuanceRadius, NuanceSize } from '@nui/types';
 export interface ChipProps {
+    /** Border radius */
     radius?: NuanceRadius;
+    /** Component size */
     size?: NuanceSize;
+    /** Input type used when rendered without a group */
     type?: 'radio' | 'checkbox';
+    /** Color from theme */
     color?: NuanceColor;
+    /** Id used to bind input and label, auto-generated if not provided */
     id?: string;
+    /** Visual variant */
     variant?: 'filled' | 'outline' | 'light';
+    /** Value used in chip group context */
     value?: string;
+    /** Check icon name */
     icon?: string;
+    /** Shows the check icon when the chip is checked */
     hideIcon?: boolean;
+    /** Disables the component */
     disabled?: boolean;
 }
 type __VLS_Props = ChipProps;

package/dist/runtime/components/chip/chip.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useStyleResolver } from "@nui/composals";
+import { useStyleResolver } from "@nui/composables";
 import { createVariantColorResolver, getFontSize, getRadius, getSize } from "@nui/utils";
 import { computed, useId } from "vue";
 import Box from "../box.vue";
@@ -172,14 +172,14 @@ const style = computed(() => useStyleResolver((theme) => {
 
 	opacity: 0;
 
-	&:focus-visible + .label {
+	&:focus-visible+.label {
 		outline: 2px solid var(--color-primary-filled);
 		outline-offset: 2px;
 	}
 }
 
 .input:disabled {
-	& + .label {
+	&+.label {
 		cursor: not-allowed;
 
 		color: var(--color-disabled-text);
@@ -189,7 +189,7 @@ const style = computed(() => useStyleResolver((theme) => {
 }
 
 .input:not(:disabled) {
-	& + .label[data-variant='outline'] {
+	&+.label[data-variant='outline'] {
 		@mixin where-light {
 			border: 1px solid var(--color-gray-3);
 
@@ -213,8 +213,8 @@ const style = computed(() => useStyleResolver((theme) => {
 		}
 	}
 
-	& + .label[data-variant='filled'],
-	& + .label[data-variant='light'] {
+	&+.label[data-variant='filled'],
+	&+.label[data-variant='light'] {
 		border: 1px solid transparent;
 
 		color: var(--color-text);
@@ -240,11 +240,11 @@ const style = computed(() => useStyleResolver((theme) => {
 }
 
 .input:not(:disabled):checked {
-	& + .label {
+	&+.label {
 		padding: var(--chip-checked-padding);
 	}
 
-	& + .label[data-variant='outline'] {
+	&+.label[data-variant='outline'] {
 		--chip-icon-color: var(--chip-color);
 
 		border: var(--chip-bd);
@@ -254,8 +254,8 @@ const style = computed(() => useStyleResolver((theme) => {
 		}
 	}
 
-	& + .label[data-variant='filled'],
-	& + .label[data-variant='light'] {
+	&+.label[data-variant='filled'],
+	&+.label[data-variant='light'] {
 		--chip-icon-color: var(--chip-color);
 
 		color: var(--chip-color);

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

@@ -1,14 +1,24 @@
 import type { NuanceColor, NuanceRadius, NuanceSize } from '@nui/types';
 export interface ChipProps {
+    /** Border radius */
     radius?: NuanceRadius;
+    /** Component size */
     size?: NuanceSize;
+    /** Input type used when rendered without a group */
     type?: 'radio' | 'checkbox';
+    /** Color from theme */
     color?: NuanceColor;
+    /** Id used to bind input and label, auto-generated if not provided */
     id?: string;
+    /** Visual variant */
     variant?: 'filled' | 'outline' | 'light';
+    /** Value used in chip group context */
     value?: string;
+    /** Check icon name */
     icon?: string;
+    /** Shows the check icon when the chip is checked */
     hideIcon?: boolean;
+    /** Disables the component */
     disabled?: boolean;
 }
 type __VLS_Props = ChipProps;

package/dist/runtime/components/chip/lib.js

@@ -1,4 +1,4 @@
-import { createStrictInjection } from "@nui/helpers";
+import { createStrictInjection } from "@nui/composables";
 import { computed } from "vue";
 const injectionKey = Symbol("chip-group");
 const [useProvide, useState] = createStrictInjection((props) => props, {

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

@@ -13,21 +13,21 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<PopoverDropdown :class='$style.dropdown'>
-		<Box
-			:id='store.listId'
-			role='presentation'
-			:class='css.dropdown'
-			:style
-			v-bind='$attrs'
-		>
-			<slot />
-		</Box>
-	</PopoverDropdown>
+	<PopoverDropdown :class='$style.dropdown'>
+		<Box
+			:id='store.listId'
+			role='presentation'
+			:class='css.dropdown'
+			:style
+			v-bind='$attrs'
+		>
+			<slot />
+		</Box>
+	</PopoverDropdown>
 </template>
 
 <style module lang="postcss">
-.dropdown {
-	padding: 0;
-}
+.dropdown {
+	padding: 0;
+}
 </style>

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

@@ -1,8 +1,9 @@
 import type { BoxProps } from '../box.vue.js';
-import type { ComboboxItemExt, ComboboxItemGroup, ComboboxItemProps } from './types/index.js';
+import type { ComboboxItemExt, ComboboxItemGroup, ComboboxItemProps } from './types.js';
 export interface ComboboxGroupProps<Value extends string = string, Ext extends ComboboxItemExt = object> extends BoxProps, ComboboxItemProps {
     /** Group label */
     label?: string;
+    /** Group data including items */
     data: ComboboxItemGroup<Value, Ext>;
 }
 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_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
@@ -19,7 +20,7 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
         label?: (props: {}) => any;
     } & {
         option?: (props: {
-            data: import("./types/index.js").ComboboxItem<any, Ext>;
+            data: import("./types.js").ComboboxItem<any, Ext>;
             checked: boolean;
             withCheckIcon: boolean;
             iconPosition: "left" | "right";

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

@@ -25,25 +25,25 @@ const value = defineModel("value", { type: [String, Array, null] });
 </script>
 
 <template>
-	<Box :class='css.group' role='group' :aria-labelledby='label ? uid : void 0' :mod>
-		<div v-if='label || $slots?.label' :id='uid' :class='css.groupLabel'>
-			<slot name='label'>
-				{{ label }}
-			</slot>
-		</div>
-
-		<ComboboxOption
-			v-for='item in data.items'
-			:key='item.value'
-			:data='item'
-			:icon-position
-			:with-check-icon
-			:check-icon
-			:checked='isValueChecked(value, item.value)'
-		>
-			<template v-if='$slots.option' #default='props'>
-				<slot name='option' v-bind='props' />
-			</template>
-		</ComboboxOption>
-	</Box>
+	<Box :class='css.group' role='group' :aria-labelledby='label ? uid : void 0' :mod>
+		<div v-if='label || $slots?.label' :id='uid' :class='css.groupLabel'>
+			<slot name='label'>
+				{{ label }}
+			</slot>
+		</div>
+
+		<ComboboxOption
+			v-for='item in data.items'
+			:key='item.value'
+			:data='item'
+			:icon-position
+			:with-check-icon
+			:check-icon
+			:checked='isValueChecked(value, item.value)'
+		>
+			<template v-if='$slots.option' #default='props'>
+				<slot name='option' v-bind='props' />
+			</template>
+		</ComboboxOption>
+	</Box>
 </template>

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

@@ -1,8 +1,9 @@
 import type { BoxProps } from '../box.vue.js';
-import type { ComboboxItemExt, ComboboxItemGroup, ComboboxItemProps } from './types/index.js';
+import type { ComboboxItemExt, ComboboxItemGroup, ComboboxItemProps } from './types.js';
 export interface ComboboxGroupProps<Value extends string = string, Ext extends ComboboxItemExt = object> extends BoxProps, ComboboxItemProps {
     /** Group label */
     label?: string;
+    /** Group data including items */
     data: ComboboxItemGroup<Value, Ext>;
 }
 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_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
@@ -19,7 +20,7 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
         label?: (props: {}) => any;
     } & {
         option?: (props: {
-            data: import("./types/index.js").ComboboxItem<any, Ext>;
+            data: import("./types.js").ComboboxItem<any, Ext>;
             checked: boolean;
             withCheckIcon: boolean;
             iconPosition: "left" | "right";