nuance-ui 0.2.6 → 0.2.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.d.vue.ts

@@ -3,7 +3,7 @@ import type { NuanceColor } from '@nui/types';
 export interface ProgressSectionProps extends BoxProps {
     /** Determines whether `aria-*` props should be added to the root element @default `true` */
     withAria?: boolean;
-    /** Key of `theme.colors` or any valid CSS value @default `theme.primaryColor` */
+    /** Color from theme */
     color?: NuanceColor;
     /** If set, the section has stripes @default `false` */
     striped?: boolean;

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/progress/progress-section.vue.d.ts

@@ -3,7 +3,7 @@ import type { NuanceColor } from '@nui/types';
 export interface ProgressSectionProps extends BoxProps {
     /** Determines whether `aria-*` props should be added to the root element @default `true` */
     withAria?: boolean;
-    /** Key of `theme.colors` or any valid CSS value @default `theme.primaryColor` */
+    /** Color from theme */
     color?: NuanceColor;
     /** If set, the section has stripes @default `false` */
     striped?: boolean;

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,6 +1,7 @@
-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'> {
+    /** List of options */
     options: ComboboxData<Value, Ext>;
     /** Determines whether the select should be searchable @default `false` */
     searchable?: boolean;
@@ -19,6 +20,7 @@ export interface SelectProps<Value extends string = string, Ext extends Combobox
     /** 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;
+    /** Maximum number of options rendered at a time */
     limit?: number;
     /** Input autocomplete attribute */
     autoComplete?: string;
@@ -34,10 +36,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 +63,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,
@@ -103,73 +103,73 @@ function onSubmit(val) {
 </script>
 
 <template>
-	<ComboboxRoot
-		v-model:open='opened'
-		width='target'
-		:store
+	<ComboboxRoot
+		v-model:open='opened'
+		width='target'
+		:store
 		@submit='(val, option) => {
   $emit("submit", val, option);
   onSubmit(val);
-}'
-	>
-		<ComboboxTarget :target-type='searchable ? "input" : "button"' :auto-complete>
-			<component
-				:is='searchable ? TextInput : ButtonInput'
-				:id='store.listId'
-				v-bind='{ ...rest, ...$attrs }'
-				v-model='inputValue'
-				:disabled
-				:right-section-p-e
-				:readonly='readonly || !searchable'
-				:class='$style.input'
-				@focus='focused = true'
-				@blur='focused = false'
-				@click.prevent.stop='() => searchable ? store.openDropdown() : store.toggleDropdown()'
-			>
-				<slot v-if='display' name='selection' :value='value' :display='display'>
-					{{ display }}
-				</slot>
-
-				<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 || icon' #leftSection>
-					<slot name='leftSection'>
-						<Icon v-if='icon' :name='icon' />
-					</slot>
-				</template>
-				<template #rightSection>
-					<slot name='rightSection'>
-						<Icon name='gravity-ui:chevrons-expand-vertical' />
-					</slot>
-				</template>
-			</component>
-		</ComboboxTarget>
-		<ComboboxOptionsDropdown
-			v-model='value'
-			v-model:search='search'
-			:data='parsed'
-			:limit
-			:with-check-icon
-			:icon-position
-			:nothing-found-message
-			:aria-label='store.listId'
-			:label-id='store.listId'
-		/>
-	</ComboboxRoot>
+}'
+	>
+		<ComboboxTarget :target-type='searchable ? "input" : "button"' :auto-complete>
+			<component
+				:is='searchable ? TextInput : ButtonInput'
+				:id='store.listId'
+				v-bind='{ ...rest, ...$attrs }'
+				v-model='inputValue'
+				:disabled
+				:right-section-p-e
+				:readonly='readonly || !searchable'
+				:class='$style.input'
+				@focus='focused = true'
+				@blur='focused = false'
+				@click.prevent.stop='() => searchable ? store.openDropdown() : store.toggleDropdown()'
+			>
+				<slot v-if='display' name='selection' :value='value' :display='display'>
+					{{ display }}
+				</slot>
+
+				<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 || icon' #leftSection>
+					<slot name='leftSection'>
+						<Icon v-if='icon' :name='icon' />
+					</slot>
+				</template>
+				<template #rightSection>
+					<slot name='rightSection'>
+						<Icon name='gravity-ui:chevrons-expand-vertical' />
+					</slot>
+				</template>
+			</component>
+		</ComboboxTarget>
+		<ComboboxOptionsDropdown
+			v-model='value'
+			v-model:search='search'
+			:data='parsed'
+			:limit
+			:with-check-icon
+			:icon-position
+			:nothing-found-message
+			:aria-label='store.listId'
+			:label-id='store.listId'
+		/>
+	</ComboboxRoot>
 </template>
 
 <style module lang="postcss">
-.input {
-	:where([readonly]) {
-		cursor: pointer;
-	}
-}
+.input {
+	:where([readonly]) {
+		cursor: pointer;
+	}
+}
 </style>

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

@@ -1,6 +1,7 @@
-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'> {
+    /** List of options */
     options: ComboboxData<Value, Ext>;
     /** Determines whether the select should be searchable @default `false` */
     searchable?: boolean;
@@ -19,6 +20,7 @@ export interface SelectProps<Value extends string = string, Ext extends Combobox
     /** 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;
+    /** Maximum number of options rendered at a time */
     limit?: number;
     /** Input autocomplete attribute */
     autoComplete?: string;
@@ -34,10 +36,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 +63,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>

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;
+    };
+};

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

@@ -0,0 +1,50 @@
+import type { NuanceColor, NuanceRadius, NuanceSize } from '@nui/types';
+import type { InlineInputProps } from '../input/ui/input-inline.vue.js';
+export interface SwitchProps extends Omit<InlineInputProps, 'id'> {
+    /** Id used to bind input and label, auto-generated if not provided */
+    id?: string;
+    /** Input name */
+    name?: string;
+    /** Value used when inside `SwitchGroup` */
+    value?: string;
+    /** Inner label shown in unchecked state */
+    offLabel?: string;
+    /** Inner label shown in checked state */
+    onLabel?: string;
+    /** Color from theme */
+    color?: NuanceColor;
+    /** Component size */
+    size?: NuanceSize;
+    /** Border radius */
+    radius?: NuanceRadius;
+    /** Icon inside the thumb */
+    icon?: string;
+    /** Displays a colored dot inside the thumb matching the track background */
+    withIndicator?: boolean;
+}
+type __VLS_Props = SwitchProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_26: {}, __VLS_29: {}, __VLS_32: {};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_26) => any;
+} & {
+    error?: (props: typeof __VLS_29) => any;
+} & {
+    description?: (props: typeof __VLS_32) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((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;
+    };
+};