nuance-ui 0.2.6 → 0.2.7

package/dist/runtime/components/nav-link/nav-icon-link.d.vue.ts

@@ -2,14 +2,21 @@ import type { ActionIconProps } from '@nui/components';
 import type { NuanceColor } from '@nui/types';
 import type { NuxtLinkProps } from 'nuxt/app';
 export interface NavIconLinkProps extends ActionIconProps, Omit<NuxtLinkProps, 'href' | 'custom'> {
+    /** Link target */
     to: NuxtLinkProps['to'];
-    /** Key of `theme.colors` of any valid CSS color to control active styles @default `theme.primaryColor` */
+    /** Color from theme */
     color?: NuanceColor;
-    /** Shorthand for passing icon */
+    /** Icon name shorthand */
     icon?: string;
-    /** Variant for active state @default `filled` */
+    /**
+     * Variant applied in active state
+     * @default `'filled'`
+     */
     active?: ActionIconProps['variant'];
-    /** Variant for not active state @default `filled` */
+    /**
+     * Variant applied in inactive state
+     * @default `'default'`
+     */
     notActive?: ActionIconProps['variant'];
 }
 declare var __VLS_16: {};

package/dist/runtime/components/nav-link/nav-icon-link.vue.d.ts

@@ -2,14 +2,21 @@ import type { ActionIconProps } from '@nui/components';
 import type { NuanceColor } from '@nui/types';
 import type { NuxtLinkProps } from 'nuxt/app';
 export interface NavIconLinkProps extends ActionIconProps, Omit<NuxtLinkProps, 'href' | 'custom'> {
+    /** Link target */
     to: NuxtLinkProps['to'];
-    /** Key of `theme.colors` of any valid CSS color to control active styles @default `theme.primaryColor` */
+    /** Color from theme */
     color?: NuanceColor;
-    /** Shorthand for passing icon */
+    /** Icon name shorthand */
     icon?: string;
-    /** Variant for active state @default `filled` */
+    /**
+     * Variant applied in active state
+     * @default `'filled'`
+     */
     active?: ActionIconProps['variant'];
-    /** Variant for not active state @default `filled` */
+    /**
+     * Variant applied in inactive state
+     * @default `'default'`
+     */
     notActive?: ActionIconProps['variant'];
 }
 declare var __VLS_16: {};

package/dist/runtime/components/nav-link/nav-link.d.vue.ts

@@ -2,18 +2,22 @@ import type { NuanceColor, NuanceSpacing } from '@nui/types';
 import type { NuxtLinkProps } from 'nuxt/app';
 import type { BoxProps } from '../box.vue.js';
 export interface NavLinkProps extends BoxProps, Omit<NuxtLinkProps, 'href' | 'custom'> {
-    /** Link description, displayed below the label */
+    /** Link description displayed below the label */
     description?: string;
-    /** Determines whether the link should have active styles @default `false` */
+    /** Active state */
     active?: boolean;
-    /** Key of `theme.colors` of any valid CSS color to control active styles @default `theme.primaryColor` */
+    /** Color from theme */
     color?: NuanceColor;
-    /** Spacing between left/right section and content */
+    /** Spacing token */
     spacing?: NuanceSpacing;
-    /** If set, label and description do not wrap to the next line @default `false` */
+    /** Prevents label and description from wrapping */
     noWrap?: boolean;
-    /** If set, disabled styles will be added to the root element @default `false` */
+    /** Disables the component */
     disabled?: boolean;
+    /**
+     * Visual variant
+     * @default `'filled'`
+     */
     variant?: 'filled' | 'light' | 'subtle';
 }
 declare var __VLS_16: {}, __VLS_24: {}, __VLS_32: {}, __VLS_34: {};

package/dist/runtime/components/nav-link/nav-link.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useStyleResolver } from "@nui/composals";
+import { useStyleResolver } from "@nui/composables";
 import { createVariantColorResolver, getSize } from "@nui/utils";
 import { computed } from "vue";
 import Box from "../box.vue";

package/dist/runtime/components/nav-link/nav-link.vue.d.ts

@@ -2,18 +2,22 @@ import type { NuanceColor, NuanceSpacing } from '@nui/types';
 import type { NuxtLinkProps } from 'nuxt/app';
 import type { BoxProps } from '../box.vue.js';
 export interface NavLinkProps extends BoxProps, Omit<NuxtLinkProps, 'href' | 'custom'> {
-    /** Link description, displayed below the label */
+    /** Link description displayed below the label */
     description?: string;
-    /** Determines whether the link should have active styles @default `false` */
+    /** Active state */
     active?: boolean;
-    /** Key of `theme.colors` of any valid CSS color to control active styles @default `theme.primaryColor` */
+    /** Color from theme */
     color?: NuanceColor;
-    /** Spacing between left/right section and content */
+    /** Spacing token */
     spacing?: NuanceSpacing;
-    /** If set, label and description do not wrap to the next line @default `false` */
+    /** Prevents label and description from wrapping */
     noWrap?: boolean;
-    /** If set, disabled styles will be added to the root element @default `false` */
+    /** Disables the component */
     disabled?: boolean;
+    /**
+     * Visual variant
+     * @default `'filled'`
+     */
     variant?: 'filled' | 'light' | 'subtle';
 }
 declare var __VLS_16: {}, __VLS_24: {}, __VLS_32: {}, __VLS_34: {};

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

@@ -2,6 +2,7 @@ import type { NuanceRadius, NuanceShadow } from '@nui/types';
 import type { BoxProps } from './box.vue.js';
 export interface PaperProps extends BoxProps {
     shadow?: NuanceShadow;
+    /** Border radius @default 'theme.defaultRadius' */
     radius?: NuanceRadius;
     withBorder?: boolean;
 }

package/dist/runtime/components/paper.vue

@@ -16,40 +16,40 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<Box :is :style :class='$style.root' :mod='[mod, { "with-border": withBorder }]'>
-		<slot />
-	</Box>
+	<Box :is :style :class='$style.root' :mod='[mod, { "with-border": withBorder }]'>
+		<slot />
+	</Box>
 </template>
 
 <style module lang="postcss">
-.root {
-	--paper-radius: var(--radius-default);
-	--paper-shadow: none;
-
-	touch-action: manipulation;
-
-	display: block;
-
-	border-radius: var(--paper-radius);
-
-	text-decoration: none;
-
-	background-color: var(--color-body);
-
-	outline: 0;
-	box-shadow: var(--paper-shadow);
-	-webkit-tap-highlight-color: transparent;
-
-	&:where([data-with-border]) {
-		border: rem(1px) solid var(--paper-border-color);
-	}
-
-	@mixin light {
-		--paper-border-color: var(--color-gray-3);
-	}
-
-	@mixin dark {
-		--paper-border-color: var(--color-slate-7);
-	}
-}
+.root {
+	--paper-radius: var(--radius-default);
+	--paper-shadow: none;
+
+	touch-action: manipulation;
+
+	display: block;
+
+	border-radius: var(--paper-radius);
+
+	text-decoration: none;
+
+	background-color: var(--color-body);
+
+	outline: 0;
+	box-shadow: var(--paper-shadow);
+	-webkit-tap-highlight-color: transparent;
+
+	&:where([data-with-border]) {
+		border: rem(1px) solid var(--paper-border-color);
+	}
+
+	@mixin light {
+		--paper-border-color: var(--color-gray-3);
+	}
+
+	@mixin dark {
+		--paper-border-color: var(--color-slate-7);
+	}
+}
 </style>

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

@@ -2,6 +2,7 @@ import type { NuanceRadius, NuanceShadow } from '@nui/types';
 import type { BoxProps } from './box.vue.js';
 export interface PaperProps extends BoxProps {
     shadow?: NuanceShadow;
+    /** Border radius @default 'theme.defaultRadius' */
     radius?: NuanceRadius;
     withBorder?: boolean;
 }

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

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

package/dist/runtime/components/popover/lib/get-arrow-position.d.ts

@@ -1,5 +1,5 @@
 import type { AlignedPlacement, Side } from '@floating-ui/vue';
-import type { ArrowPosition } from '../types/index.js';
+import type { ArrowPosition } from '../types.js';
 export declare function getArrowPosition({ placement: _placement, arrowSize, arrowOffset, arrowRadius, arrowPosition, arrowX, arrowY, dir, }: {
     placement: Side | AlignedPlacement;
     arrowSize?: number;

package/dist/runtime/components/popover/lib/use-popover.d.ts

@@ -1,6 +1,6 @@
 import type { OffsetOptions, Placement, Strategy } from '@floating-ui/vue';
 import type { CSSProperties, ModelRef, Ref, ShallowRef } from 'vue';
-import type { ArrowPosition, PopoverWidth } from '../types/index.js';
+import type { ArrowPosition, PopoverWidth } from '../types.js';
 export interface PopoverOptions {
     offset: OffsetOptions;
     placement: Placement;

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

@@ -1,4 +1,4 @@
-import type { PopoverModel, PopoverProps } from './types/index.js';
+import type { PopoverModel, PopoverProps } from './types.js';
 type __VLS_Props = PopoverProps;
 type __VLS_ModelProps = {
     'open'?: PopoverModel['open'];

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

@@ -1,4 +1,4 @@
-import type { PopoverModel, PopoverProps } from './types/index.js';
+import type { PopoverModel, PopoverProps } from './types.js';
 type __VLS_Props = PopoverProps;
 type __VLS_ModelProps = {
     'open'?: PopoverModel['open'];

package/dist/runtime/components/popover/{types/index.d.ts → types.d.ts}

@@ -1,6 +1,6 @@
 import type { AlignedPlacement, OffsetOptions, Side, Strategy } from '@floating-ui/vue';
+import type { NuanceRadius, NuanceShadow } from '@nui/types';
 import type { CSSProperties } from 'vue';
-import type { NuanceRadius, NuanceShadow } from '~/src/runtime/types/theme';
 export type ArrowPosition = 'center' | 'side';
 export type PopoverWidth = 'target' | CSSProperties['width'] | null;
 export interface PopoverProps {
@@ -22,21 +22,22 @@ export interface PopoverProps {
     arrowRadius?: number;
     /** Arrow position */
     arrowPosition?: ArrowPosition;
-    /** Key of `theme.radius` or any valid CSS value to set border-radius @default `theme.defaultRadius` */
+    /** Border radius @default `theme.defaultRadius` */
     radius?: NuanceRadius;
-    /** Key of `theme.shadows` or any other valid CSS `box-shadow` value */
+    /** Shadow token */
     shadow?: NuanceShadow;
-    /** If set, popover dropdown will not be rendered */
+    /** Disables the component */
     disabled?: boolean;
     /** Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) @default `'absolute'` */
     floatingStrategy?: Strategy;
 }
 export interface PopoverModel {
+    /** Open state */
     open: boolean;
 }
 export interface PopoverEmits {
-    /** Event handler called when the popover open */
+    /** Fired when the popover opens */
     open: [];
-    /** Event handler called when the popover closed */
+    /** Fired when the popover closes */
     close: [];
 }

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

@@ -1,13 +1,13 @@
 import type { BoxProps } from '@nui/components';
 import type { NuanceRadius, NuanceSize } from '@nui/types';
 export interface ProgressRootProps extends BoxProps {
-    /** Controls track height @default `'md'` */
+    /** Component size @default `'md'` */
     size?: NuanceSize | string;
-    /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default `theme.defaultRadius` */
+    /** Border radius @default `theme.defaultRadius` */
     radius?: NuanceRadius;
-    /** Controls sections width transition duration, value is specified in ms @default `100` */
+    /** Sections width transition duration in ms @default `100` */
     transitionDuration?: number;
-    /** Controls orientation @default `'horizontal'` */
+    /** Orientation @default `'horizontal'` */
     orientation?: 'horizontal' | 'vertical';
 }
 declare var __VLS_8: {};

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

@@ -1,13 +1,13 @@
 import type { BoxProps } from '@nui/components';
 import type { NuanceRadius, NuanceSize } from '@nui/types';
 export interface ProgressRootProps extends BoxProps {
-    /** Controls track height @default `'md'` */
+    /** Component size @default `'md'` */
     size?: NuanceSize | string;
-    /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default `theme.defaultRadius` */
+    /** Border radius @default `theme.defaultRadius` */
     radius?: NuanceRadius;
-    /** Controls sections width transition duration, value is specified in ms @default `100` */
+    /** Sections width transition duration in ms @default `100` */
     transitionDuration?: number;
-    /** Controls orientation @default `'horizontal'` */
+    /** Orientation @default `'horizontal'` */
     orientation?: 'horizontal' | 'vertical';
 }
 declare var __VLS_8: {};

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";

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");

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 },
@@ -17,7 +17,7 @@ onMounted(() => nextTick(() => init()));
 </script>
 
 <template>
-	<Renderless ref='list'>
-		<slot />
-	</Renderless>
+	<Renderless ref='list'>
+		<slot />
+	</Renderless>
 </template>

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

@@ -1,5 +1,5 @@
-import type { ComboboxData, 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'> {
     options: ComboboxData<Value, Ext>;
     /** Determines whether the select should be searchable @default `false` */
@@ -34,10 +34,10 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
     }) & {
         onSelect?: ((args_0: number) => any) | undefined;
         onClear?: (() => any) | undefined;
-        onClose?: ((args_0: import("..").ComboboxDropdownEventSource) => any) | undefined;
-        onSubmit?: ((args_0: string, args_1: import("..").ComboboxItem) => 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("..").ComboboxDropdownEventSource) => 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 {
@@ -61,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: import("..").ComboboxItem) => void) & ((evt: "open", args_0: import("..").ComboboxDropdownEventSource) => void)) & (((event: "update:modelValue", value: string | string[] | 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,11 +1,11 @@
 <script setup>
 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";
+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 {
   options: data,
   disabled,

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

@@ -1,5 +1,5 @@
-import type { ComboboxData, 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'> {
     options: ComboboxData<Value, Ext>;
     /** Determines whether the select should be searchable @default `false` */
@@ -34,10 +34,10 @@ declare const __VLS_export: <Value extends string = string, Ext extends Combobox
     }) & {
         onSelect?: ((args_0: number) => any) | undefined;
         onClear?: (() => any) | undefined;
-        onClose?: ((args_0: import("..").ComboboxDropdownEventSource) => any) | undefined;
-        onSubmit?: ((args_0: string, args_1: import("..").ComboboxItem) => 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("..").ComboboxDropdownEventSource) => 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 {
@@ -61,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: import("..").ComboboxItem) => void) & ((evt: "open", args_0: import("..").ComboboxDropdownEventSource) => void)) & (((event: "update:modelValue", value: string | string[] | 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>