nuance-ui 0.2.5 → 0.2.7

package/dist/runtime/components/progress/progress-section.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useStyleResolver } from "@nui/composals";
+import { useStyleResolver } from "@nui/composables";
 import { getThemeColor } from "@nui/utils";
 import { computed } from "vue";
 import Box from "../box.vue";
@@ -33,12 +33,12 @@ const style = computed(() => useStyleResolver((theme) => ({
 </script>
 
 <template>
-	<Box
-		:style
-		v-bind='ariaAttributes'
-		:class='css.section'
-		:mod='[{ striped: striped || animated, animated }, mod]'
-	>
-		<slot />
-	</Box>
+	<Box
+		:style
+		v-bind='ariaAttributes'
+		:class='css.section'
+		:mod='[{ striped: striped || animated, animated }, mod]'
+	>
+		<slot />
+	</Box>
 </template>

package/dist/runtime/components/progress/progress.vue

@@ -27,13 +27,13 @@ const value = defineModel({ type: Number, ...{ required: true } });
 </script>
 
 <template>
-	<ProgressRoot :size :radius :orientation :transition-duration :mod>
-		<ProgressSection
-			v-model='value'
-			:striped
-			:animated
-			:color
-			:with-aria
-		/>
-	</ProgressRoot>
+	<ProgressRoot :size :radius :orientation :transition-duration :mod>
+		<ProgressSection
+			v-model='value'
+			:striped
+			:animated
+			:color
+			:with-aria
+		/>
+	</ProgressRoot>
 </template>

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

@@ -6,7 +6,7 @@ defineOptions({
 </script>
 
 <template>
-	<Slot v-bind='$attrs'>
-		<slot />
-	</Slot>
+	<Slot v-bind='$attrs'>
+		<slot />
+	</Slot>
 </template>

package/dist/runtime/components/roving-focus/index.d.ts

@@ -1 +1 @@
-export { useRovingFocus } from './_lib/context.js';
+export { useRovingFocus } from './lib/context.js';

package/dist/runtime/components/roving-focus/index.js

@@ -1 +1 @@
-export { useRovingFocus } from "./_lib/context.js";
+export { useRovingFocus } from "./lib/context.js";

package/dist/runtime/components/roving-focus/roving-focus-item.vue

@@ -2,7 +2,7 @@
 import { unrefElement } from "@vueuse/core";
 import { computed, onBeforeUnmount, useTemplateRef } from "vue";
 import Renderless from "../renderless/renderless.vue";
-import { useRovingFocus } from "./_lib/context";
+import { useRovingFocus } from "./lib/context";
 const { focus, focusElement, orientation, attr, onItemUnmount } = useRovingFocus() ?? {};
 const isVertical = computed(() => orientation === "vertical" || orientation === "both");
 const isHorizontal = computed(() => orientation === "horizontal" || orientation === "both");
@@ -15,18 +15,18 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-	<Renderless
-		v-bind='attrs'
-		ref='item'
-		:tabindex='-1'
-		@keydown.up.prevent='isVertical && focus?.("prev", $event.currentTarget)'
-		@keydown.down.prevent='isVertical && focus?.("next", $event.currentTarget)'
-		@keydown.left.prevent='isHorizontal && focus?.("prev", $event.currentTarget)'
-		@keydown.right.prevent='isHorizontal && focus?.("next", $event.currentTarget)'
-		@keydown.home.prevent='focus?.("first")'
-		@keydown.end.prevent='focus?.("last")'
-		@click.prevent='focusElement?.($event.currentTarget)'
-	>
-		<slot />
-	</Renderless>
+	<Renderless
+		v-bind='attrs'
+		ref='item'
+		:tabindex='-1'
+		@keydown.up.prevent='isVertical && focus?.("prev", $event.currentTarget)'
+		@keydown.down.prevent='isVertical && focus?.("next", $event.currentTarget)'
+		@keydown.left.prevent='isHorizontal && focus?.("prev", $event.currentTarget)'
+		@keydown.right.prevent='isHorizontal && focus?.("next", $event.currentTarget)'
+		@keydown.home.prevent='focus?.("first")'
+		@keydown.end.prevent='focus?.("last")'
+		@click.prevent='focusElement?.($event.currentTarget)'
+	>
+		<slot />
+	</Renderless>
 </template>

package/dist/runtime/components/roving-focus/roving-focus.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { nextTick, onMounted, useTemplateRef } from "vue";
 import Renderless from "../renderless/renderless.vue";
-import { useProvideRovingFocus } from "./_lib/context";
+import { useProvideRovingFocus } from "./lib/context";
 const { loop = false, orientation = "vertical" } = defineProps({
   loop: { type: Boolean, required: false },
   orientation: { type: String, required: false },

package/dist/runtime/components/{select/select.d.vue.ts → select.d.vue.ts}

@@ -1,9 +1,11 @@
-import type { ComboboxData, ComboboxItem, ComboboxItemExt } from '../combobox/index.js';
-import type { TextInputProps } from '../input/index.js';
+import type { ComboboxData, ComboboxItemExt } from './combobox/index.js';
+import type { TextInputProps } from './input/index.js';
 export interface SelectProps<Value extends string = string, Ext extends ComboboxItemExt = object> extends Omit<TextInputProps, 'modelValue' | 'multiline' | 'resize' | 'is' | 'id'> {
-    data: ComboboxData<Value, Ext>;
+    options: ComboboxData<Value, Ext>;
     /** Determines whether the select should be searchable @default `false` */
     searchable?: boolean;
+    /** If set, multiple options can be selected @default `false` */
+    multiple?: 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'` */
@@ -12,24 +14,30 @@ export interface SelectProps<Value extends string = string, Ext extends Combobox
     nothingFoundMessage?: string;
     /** If set, it becomes possible to deselect value by clicking on the selected option @default `true` */
     allowDeselect?: boolean;
+    /** If set, the dropdown will close after an option is selected @default `!multiple` */
+    closeOnSelect?: boolean;
     /** If set, the clear button is displayed in the right section when the component has value @default `false` */
+    /** Icon displayed in the left section by default */
+    icon?: string;
     limit?: number;
-    /** Props passed down to the underlying `ScrollArea` component in the dropdown */
     /** Input autocomplete attribute */
     autoComplete?: 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_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(SelectProps<Value, Ext> & {
+        /** Dropdown opened state */
         open?: boolean;
-        modelValue?: ComboboxItem<Value, Ext> | null;
+        /** Value handler */
+        modelValue?: string | string[] | null;
+        /** Search handler */
         search?: string;
     }) & {
         onSelect?: ((args_0: number) => any) | undefined;
         onClear?: (() => any) | undefined;
-        onClose?: ((args_0: import("..").ComboboxDropdownEventSource) => any) | undefined;
-        onSubmit?: ((args_0: string, args_1: ComboboxItem) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: ComboboxItem<Value, Ext> | null) => any) | undefined;
-        onOpen?: ((args_0: import("..").ComboboxDropdownEventSource) => any) | undefined;
+        onClose?: ((args_0: import("./combobox/index.js").ComboboxDropdownEventSource) => any) | undefined;
+        onSubmit?: ((args_0: string, args_1: import("./combobox/index.js").ComboboxItem<string, object>) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string | string[] | null) => any) | undefined;
+        onOpen?: ((args_0: import("./combobox/index.js").ComboboxDropdownEventSource) => any) | undefined;
         "onUpdate:search"?: ((value: string) => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;
     }> & (typeof globalThis extends {
@@ -38,6 +46,11 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {
+        selection?: (props: {
+            value: string | string[] | null;
+            display: string;
+        }) => any;
+    } & {
         label?: (props: {}) => any;
     } & {
         description?: (props: {}) => any;
@@ -48,7 +61,7 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
     } & {
         rightSection?: (props: {}) => any;
     };
-    emit: (((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("..").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("..").ComboboxDropdownEventSource) => void)) & (((event: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((event: "update:search", value: string) => void) & ((event: "update:open", value: boolean) => void));
+    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: import("./combobox/index.js").ComboboxItem<string, object>) => void) & ((evt: "open", args_0: import("./combobox/index.js").ComboboxDropdownEventSource) => void)) & (((event: "update:modelValue", value: string | string[] | null) => void) & ((event: "update:search", value: string) => void) & ((event: "update:open", value: boolean) => void));
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/{select/select.vue → select.vue}

@@ -1,31 +1,37 @@
 <script setup>
-import { nextTick, watch } from "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 TextInput from "../input/text-input.vue";
-import ButtonInput from "../input/ui/button-input.vue";
+import { computed, nextTick, ref, watch } from "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 TextInput from "./input/text-input.vue";
+import ButtonInput from "./input/ui/button-input.vue";
 const {
-  data,
+  options: data,
   disabled,
   searchable = false,
+  multiple = false,
   rightSectionPE = "none",
   readonly = false,
   allowDeselect = false,
+  closeOnSelect,
   autoComplete = "off",
+  icon,
   limit,
   iconPosition,
   nothingFoundMessage,
-  withCheckIcon,
+  withCheckIcon = true,
   ...rest
 } = defineProps({
-  data: { type: Array, required: true },
+  options: { type: Array, required: true },
   searchable: { type: Boolean, required: false },
+  multiple: { type: Boolean, required: false },
   withCheckIcon: { type: Boolean, required: false },
   iconPosition: { type: String, required: false },
   nothingFoundMessage: { type: String, required: false },
   allowDeselect: { type: Boolean, required: false },
+  closeOnSelect: { type: Boolean, required: false },
+  icon: { type: String, required: false },
   limit: { type: Number, required: false },
   autoComplete: { type: String, required: false },
   withAria: { type: Boolean, required: false },
@@ -44,7 +50,8 @@ const {
 });
 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 value = defineModel({ type: [String, Array, null], ...{ default: null } });
+const search = defineModel("search", { type: String, ...{ default: "" } });
 const { parsed, options } = useComboboxData(data);
 const store = useCombobox({
   opened,
@@ -54,6 +61,8 @@ const store = useCombobox({
   onClear: () => emit("clear"),
   onOpenDropdown: (source) => {
     emit("open", source);
+    if (searchable)
+      search.value = "";
     store.updateSelectedOptionIx("active", { scrollIntoView: true });
   },
   onCloseDropdown: (source) => {
@@ -61,8 +70,36 @@ const store = useCombobox({
     nextTick(() => store.resetSelectedOption());
   }
 });
-const search = defineModel("search", { type: String, ...{ default: "" } });
 watch(search, () => nextTick(() => store.resetSelectedOption()));
+const display = computed(() => {
+  const v = value.value;
+  if (multiple && Array.isArray(v))
+    return v.map((val) => options.value[val]?.label ?? val).join(", ");
+  if (v && typeof v === "string")
+    return options.value[v]?.label ?? v;
+  return "";
+});
+const focused = ref(false);
+const inputValue = computed({
+  get: () => searchable && focused.value ? search.value : display.value,
+  set: (val) => {
+    search.value = val;
+  }
+});
+function onSubmit(val) {
+  const shouldClose = closeOnSelect ?? !multiple;
+  if (multiple) {
+    const current = Array.isArray(value.value) ? value.value : [];
+    value.value = current.includes(val) ? current.filter((v) => v !== val) : [...current, val];
+    search.value = "";
+  } else {
+    const nextValue = allowDeselect && value.value === val ? null : val;
+    value.value = options.value[val] ? nextValue : null;
+    search.value = "";
+  }
+  if (shouldClose)
+    store.closeDropdown();
+}
 </script>
 
 <template>
@@ -72,11 +109,7 @@ watch(search, () => nextTick(() => store.resetSelectedOption()));
 		: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();
+  onSubmit(val);
 }'
 	>
 		<ComboboxTarget :target-type='searchable ? "input" : "button"' :auto-complete>
@@ -84,18 +117,18 @@ watch(search, () => nextTick(() => store.resetSelectedOption()));
 				:is='searchable ? TextInput : ButtonInput'
 				:id='store.listId'
 				v-bind='{ ...rest, ...$attrs }'
-				v-model='search'
+				v-model='inputValue'
 				:disabled
 				:right-section-p-e
 				:readonly='readonly || !searchable'
 				:class='$style.input'
-				@blur='() => {
-  searchable && store.closeDropdown();
-  search = value?.label ?? "";
-}'
+				@focus='focused = true'
+				@blur='focused = false'
 				@click.prevent.stop='() => searchable ? store.openDropdown() : store.toggleDropdown()'
 			>
-				{{ value?.label ?? value?.value ?? null }}
+				<slot v-if='display' name='selection' :value='value' :display='display'>
+					{{ display }}
+				</slot>
 
 				<template v-if='$slots?.label' #label>
 					<slot name='label' />
@@ -107,9 +140,9 @@ watch(search, () => nextTick(() => store.resetSelectedOption()));
 					<slot name='error' />
 				</template>
 
-				<template v-if='$slots.leftSection || value?.icon' #leftSection>
+				<template v-if='$slots.leftSection || icon' #leftSection>
 					<slot name='leftSection'>
-						<Icon v-if='value?.icon' :name='value?.icon' />
+						<Icon v-if='icon' :name='icon' />
 					</slot>
 				</template>
 				<template #rightSection>
@@ -121,6 +154,7 @@ watch(search, () => nextTick(() => store.resetSelectedOption()));
 		</ComboboxTarget>
 		<ComboboxOptionsDropdown
 			v-model='value'
+			v-model:search='search'
 			:data='parsed'
 			:limit
 			:with-check-icon

package/dist/runtime/components/{select/select.vue.d.ts → select.vue.d.ts}

@@ -1,9 +1,11 @@
-import type { ComboboxData, ComboboxItem, ComboboxItemExt } from '../combobox/index.js';
-import type { TextInputProps } from '../input/index.js';
+import type { ComboboxData, ComboboxItemExt } from './combobox/index.js';
+import type { TextInputProps } from './input/index.js';
 export interface SelectProps<Value extends string = string, Ext extends ComboboxItemExt = object> extends Omit<TextInputProps, 'modelValue' | 'multiline' | 'resize' | 'is' | 'id'> {
-    data: ComboboxData<Value, Ext>;
+    options: ComboboxData<Value, Ext>;
     /** Determines whether the select should be searchable @default `false` */
     searchable?: boolean;
+    /** If set, multiple options can be selected @default `false` */
+    multiple?: 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'` */
@@ -12,24 +14,30 @@ export interface SelectProps<Value extends string = string, Ext extends Combobox
     nothingFoundMessage?: string;
     /** If set, it becomes possible to deselect value by clicking on the selected option @default `true` */
     allowDeselect?: boolean;
+    /** If set, the dropdown will close after an option is selected @default `!multiple` */
+    closeOnSelect?: boolean;
     /** If set, the clear button is displayed in the right section when the component has value @default `false` */
+    /** Icon displayed in the left section by default */
+    icon?: string;
     limit?: number;
-    /** Props passed down to the underlying `ScrollArea` component in the dropdown */
     /** Input autocomplete attribute */
     autoComplete?: 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_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(SelectProps<Value, Ext> & {
+        /** Dropdown opened state */
         open?: boolean;
-        modelValue?: ComboboxItem<Value, Ext> | null;
+        /** Value handler */
+        modelValue?: string | string[] | null;
+        /** Search handler */
         search?: string;
     }) & {
         onSelect?: ((args_0: number) => any) | undefined;
         onClear?: (() => any) | undefined;
-        onClose?: ((args_0: import("..").ComboboxDropdownEventSource) => any) | undefined;
-        onSubmit?: ((args_0: string, args_1: ComboboxItem) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: ComboboxItem<Value, Ext> | null) => any) | undefined;
-        onOpen?: ((args_0: import("..").ComboboxDropdownEventSource) => any) | undefined;
+        onClose?: ((args_0: import("./combobox/index.js").ComboboxDropdownEventSource) => any) | undefined;
+        onSubmit?: ((args_0: string, args_1: import("./combobox/index.js").ComboboxItem<string, object>) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string | string[] | null) => any) | undefined;
+        onOpen?: ((args_0: import("./combobox/index.js").ComboboxDropdownEventSource) => any) | undefined;
         "onUpdate:search"?: ((value: string) => any) | undefined;
         "onUpdate:open"?: ((value: boolean) => any) | undefined;
     }> & (typeof globalThis extends {
@@ -38,6 +46,11 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
     expose: (exposed: {}) => void;
     attrs: any;
     slots: {
+        selection?: (props: {
+            value: string | string[] | null;
+            display: string;
+        }) => any;
+    } & {
         label?: (props: {}) => any;
     } & {
         description?: (props: {}) => any;
@@ -48,7 +61,7 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
     } & {
         rightSection?: (props: {}) => any;
     };
-    emit: (((evt: "select", args_0: number) => void) & ((evt: "clear") => void) & ((evt: "close", args_0: import("..").ComboboxDropdownEventSource) => void) & ((evt: "submit", args_0: string, args_1: ComboboxItem) => void) & ((evt: "open", args_0: import("..").ComboboxDropdownEventSource) => void)) & (((event: "update:modelValue", value: ComboboxItem<Value, Ext> | null) => void) & ((event: "update:search", value: string) => void) & ((event: "update:open", value: boolean) => void));
+    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: import("./combobox/index.js").ComboboxItem<string, object>) => void) & ((evt: "open", args_0: import("./combobox/index.js").ComboboxDropdownEventSource) => void)) & (((event: "update:modelValue", value: string | string[] | null) => void) & ((event: "update:search", value: string) => void) & ((event: "update:open", value: boolean) => void));
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -0,0 +1,3 @@
+export { useSwitchGroupState } from './lib/group.context.js';
+export type * from './switch-group.vue';
+export type * from './switch.vue';

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

@@ -0,0 +1 @@
+export { useSwitchGroupState } from "./lib/group.context.js";

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

@@ -0,0 +1,34 @@
+import type { NuanceSize } from '@nui/types';
+import type { ModelRef } from 'vue';
+export interface SwitchGroupState {
+    /** 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 useProvideSwitchGroup: (state: SwitchGroupState) => {
+    value: ModelRef<string[]>;
+    size: NuanceSize | undefined;
+    disabled: boolean | undefined;
+    readOnly: boolean | undefined;
+    maxSelectedValues: number | undefined;
+    update: (value: string) => void;
+    isSelected: (value: string) => boolean;
+    isDisabled: (value: string) => boolean;
+};
+export declare const useSwitchGroupState: () => {
+    value: ModelRef<string[]>;
+    size: NuanceSize | undefined;
+    disabled: boolean | undefined;
+    readOnly: boolean | undefined;
+    maxSelectedValues: number | undefined;
+    update: (value: string) => void;
+    isSelected: (value: string) => boolean;
+    isDisabled: (value: string) => boolean;
+} | undefined;

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

@@ -0,0 +1,25 @@
+import { useSelectableGroup } from "@nui/composables";
+import { createInjectionState } from "@vueuse/core";
+const injectionKey = Symbol("SwitchGroup");
+const [useProvide, useState] = createInjectionState((state) => {
+  const { value, size, disabled, readOnly, maxSelectedValues } = state;
+  const { update, isSelected, isDisabled } = useSelectableGroup(value, {
+    disabled,
+    readOnly,
+    maxSelectedValues
+  });
+  return {
+    value,
+    size,
+    disabled,
+    readOnly,
+    maxSelectedValues,
+    update,
+    isSelected,
+    isDisabled
+  };
+}, {
+  injectionKey
+});
+export const useProvideSwitchGroup = useProvide;
+export const useSwitchGroupState = useState;

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

@@ -0,0 +1,42 @@
+import type { NuanceSize } from '@nui/types';
+import type { InputWrapperProps } from '../input/index.js';
+export interface SwitchGroupProps extends Omit<InputWrapperProps, 'resize' | 'multiline' | 'id' | 'size'> {
+    /** Input name */
+    name?: string;
+    /** Component size */
+    size?: NuanceSize;
+    /** Prevents value changes */
+    readOnly?: boolean;
+    /** Disables the component */
+    disabled?: boolean;
+    /** Maximum number of switches that can be selected; unselected switches are disabled once the limit is reached */
+    maxSelectedValues?: number;
+}
+type __VLS_Props = SwitchGroupProps;
+type __VLS_ModelProps = {
+    modelValue?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_9: {}, __VLS_11: {}, __VLS_14: {}, __VLS_17: {};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_9) => any;
+} & {
+    default?: (props: typeof __VLS_11) => any;
+} & {
+    description?: (props: typeof __VLS_14) => any;
+} & {
+    error?: (props: typeof __VLS_17) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,50 @@
+<script setup>
+import { useId } from "vue";
+import InputWrapper from "../input/ui/input-wrapper.vue";
+import VisuallyHiddenInput from "../visually-hidden/visually-hidden-input.vue";
+import { useProvideSwitchGroup } from "./lib/group.context";
+const {
+  size,
+  name,
+  disabled,
+  readOnly,
+  maxSelectedValues,
+  ...rest
+} = defineProps({
+  name: { type: String, required: false },
+  size: { type: String, required: false },
+  readOnly: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false },
+  maxSelectedValues: { type: Number, required: false },
+  error: { type: String, required: false },
+  description: { type: String, required: false },
+  label: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  radius: { type: String, required: false },
+  variant: { type: String, required: false },
+  leftSectionPE: { type: null, required: false },
+  rightSectionPE: { type: null, required: false }
+});
+const value = defineModel({ type: Array, ...{ default: [] } });
+const id = useId();
+useProvideSwitchGroup({ value, size, disabled, readOnly, maxSelectedValues });
+</script>
+
+<template>
+	<InputWrapper :id v-bind='rest'>
+		<template v-if='!!$slots.label' #label>
+			<slot name='label' />
+		</template>
+
+		<slot />
+
+		<template v-if='!!$slots.description' #description>
+			<slot name='description' />
+		</template>
+		<template v-if='!!$slots.error' #error>
+			<slot name='error' />
+		</template>
+
+		<VisuallyHiddenInput :id v-model='value' :name />
+	</InputWrapper>
+</template>

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

@@ -0,0 +1,42 @@
+import type { NuanceSize } from '@nui/types';
+import type { InputWrapperProps } from '../input/index.js';
+export interface SwitchGroupProps extends Omit<InputWrapperProps, 'resize' | 'multiline' | 'id' | 'size'> {
+    /** Input name */
+    name?: string;
+    /** Component size */
+    size?: NuanceSize;
+    /** Prevents value changes */
+    readOnly?: boolean;
+    /** Disables the component */
+    disabled?: boolean;
+    /** Maximum number of switches that can be selected; unselected switches are disabled once the limit is reached */
+    maxSelectedValues?: number;
+}
+type __VLS_Props = SwitchGroupProps;
+type __VLS_ModelProps = {
+    modelValue?: string[];
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_9: {}, __VLS_11: {}, __VLS_14: {}, __VLS_17: {};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_9) => any;
+} & {
+    default?: (props: typeof __VLS_11) => any;
+} & {
+    description?: (props: typeof __VLS_14) => any;
+} & {
+    error?: (props: typeof __VLS_17) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[]) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};