nuance-ui 0.1.38 → 0.1.39

package/dist/runtime/components/input/email-input.vue

@@ -1,16 +1,22 @@
 <script setup>
-import ActionIcon from "../action-icon/action-icon.vue";
 import TextInput from "./text-input.vue";
 const props = defineProps({
+  multiline: { type: Boolean, required: false },
+  withAria: { type: Boolean, required: false },
+  classes: { type: Object, required: false },
   error: { type: String, required: false },
   description: { type: String, required: false },
   label: { type: String, required: false },
   required: { type: Boolean, required: false },
+  id: { type: [String, null], required: false },
   radius: { type: String, required: false },
   size: { type: String, required: false },
   variant: { type: String, required: false },
+  resize: { type: void 0, required: false },
   leftSectionPE: { type: null, required: false },
-  rightSectionPE: { type: null, required: false }
+  rightSectionPE: { type: null, required: false },
+  readonly: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
 });
 </script>
 
@@ -18,9 +24,7 @@ const props = defineProps({
 	<TextInput type='email' v-bind='props'>
 		<template #leftSection>
 			<slot name='leftSection'>
-				<ActionIcon variant='subtle'>
-					<Icon name='gravity-ui:at' />
-				</ActionIcon>
+				<Icon name='gravity-ui:at' />
 			</slot>
 		</template>
 

package/dist/runtime/components/input/email-input.vue.d.ts

@@ -1,15 +1,15 @@
 import type { TextInputProps } from './index.js';
-declare var __VLS_7: {}, __VLS_19: {}, __VLS_22: {}, __VLS_25: {}, __VLS_28: {};
+declare var __VLS_9: {}, __VLS_17: {}, __VLS_20: {}, __VLS_23: {}, __VLS_26: {};
 type __VLS_Slots = {} & {
-    leftSection?: (props: typeof __VLS_7) => any;
+    leftSection?: (props: typeof __VLS_9) => any;
 } & {
-    rightSection?: (props: typeof __VLS_19) => any;
+    rightSection?: (props: typeof __VLS_17) => any;
 } & {
-    label?: (props: typeof __VLS_22) => any;
+    label?: (props: typeof __VLS_20) => any;
 } & {
-    error?: (props: typeof __VLS_25) => any;
+    error?: (props: typeof __VLS_23) => any;
 } & {
-    description?: (props: typeof __VLS_28) => any;
+    description?: (props: typeof __VLS_26) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<TextInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TextInputProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,10 +1,11 @@
-export type * from './input.vue';
 export { useInputWrapperState, type WrapperContext } from './lib/input-wrapper.context.js';
 export type * from './number-input.vue';
 export type * from './password-input.vue';
 export type * from './text-input.vue';
 export type * from './types';
+export type * from './ui/button-input.vue';
 export type * from './ui/input-base.vue';
 export type * from './ui/input-inline.vue';
 export type * from './ui/input-label.vue';
 export type * from './ui/input-wrapper.vue';
+export type * from './ui/spin-input.vue';

package/dist/runtime/components/input/lib/input-wrapper.context.d.ts

@@ -14,5 +14,5 @@ export interface WrapperContext {
     /** section pointer-events */
     rightSectionPE?: CSSStyleDeclaration['pointerEvents'];
 }
-export declare const useProvideInputWrapper: (init: any) => import("vue").ComputedRef<any>;
-export declare const useInputWrapperState: () => import("vue").ComputedRef<any> | undefined;
+export declare const useProvideInputWrapper: (init: any) => any;
+export declare const useInputWrapperState: () => any;

package/dist/runtime/components/input/lib/input-wrapper.context.js

@@ -1,7 +1,6 @@
 import { createInjectionState } from "@vueuse/core";
-import { computed } from "vue";
 const injectionKey = Symbol("InputWrapper");
-const [useProvide, useState] = createInjectionState((init) => computed(() => init), {
+const [useProvide, useState] = createInjectionState((init) => init, {
   injectionKey
 });
 export const useProvideInputWrapper = useProvide;

package/dist/runtime/components/input/number-input.d.vue.ts

@@ -15,17 +15,17 @@ type __VLS_ModelProps = {
     modelValue?: number;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_16: {}, __VLS_19: {}, __VLS_46: {}, __VLS_49: {}, __VLS_52: {};
+declare var __VLS_15: {}, __VLS_19: {}, __VLS_48: {}, __VLS_51: {}, __VLS_54: {};
 type __VLS_Slots = {} & {
-    leftSection?: (props: typeof __VLS_16) => any;
+    leftSection?: (props: typeof __VLS_15) => any;
 } & {
     rightSection?: (props: typeof __VLS_19) => any;
 } & {
-    label?: (props: typeof __VLS_46) => any;
+    label?: (props: typeof __VLS_48) => any;
 } & {
-    error?: (props: typeof __VLS_49) => any;
+    error?: (props: typeof __VLS_51) => any;
 } & {
-    description?: (props: typeof __VLS_52) => any;
+    description?: (props: typeof __VLS_54) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: number) => any;

package/dist/runtime/components/input/number-input.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { clamp } from "@vueuse/core";
-import { shallowRef, useId } from "vue";
+import { shallowRef } from "vue";
 import UnstyledButton from "../button/unstyled-button.vue";
 import BaseInput from "./ui/input-base.vue";
 import InputWrapper from "./ui/input-wrapper.vue";
@@ -9,8 +9,6 @@ const {
   max = Number.MAX_SAFE_INTEGER,
   step = 1,
   hideControls,
-  disabled,
-  readonly,
   rightSectionPE = "all",
   ...rest
 } = defineProps({
@@ -30,7 +28,6 @@ const {
   leftSectionPE: { type: null, required: false },
   rightSectionPE: { type: null, required: false }
 });
-const id = useId();
 const focused = shallowRef(false);
 const value = defineModel({ type: Number, ...{ default: 0 } });
 function handleWheel(event) {
@@ -50,23 +47,27 @@ function handleBlur() {
 </script>
 
 <template>
-	<InputWrapper v-bind='rest' :id :class='$style.root' :right-section-p-e>
-		<BaseInput
-			:id
-			v-model='value'
-			:min
-			:max
-			:step
-			:readonly
-			:disabled
-			type='number'
-			@focus='focused = true'
-			@blur='handleBlur()'
-			@wheel.prevent='handleWheel'
-		>
+	<InputWrapper v-bind='rest' :class='$style.root' :right-section-p-e>
+		<BaseInput>
 			<template v-if='$slots.leftSection' #leftSection>
 				<slot name='leftSection' />
 			</template>
+
+			<template #default='{ id, css }'>
+				<input
+					:id
+					v-model='value'
+					:class='css'
+					:min
+					:max
+					:step
+					type='number'
+					@focus='focused = true'
+					@blur='handleBlur()'
+					@wheel.prevent='handleWheel'
+				>
+			</template>
+
 			<template v-if='$slots.rightSection || !hideControls' #rightSection>
 				<slot name='rightSection'>
 					<div :class='$style.controls'>

package/dist/runtime/components/input/number-input.vue.d.ts

@@ -15,17 +15,17 @@ type __VLS_ModelProps = {
     modelValue?: number;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_16: {}, __VLS_19: {}, __VLS_46: {}, __VLS_49: {}, __VLS_52: {};
+declare var __VLS_15: {}, __VLS_19: {}, __VLS_48: {}, __VLS_51: {}, __VLS_54: {};
 type __VLS_Slots = {} & {
-    leftSection?: (props: typeof __VLS_16) => any;
+    leftSection?: (props: typeof __VLS_15) => any;
 } & {
     rightSection?: (props: typeof __VLS_19) => any;
 } & {
-    label?: (props: typeof __VLS_46) => any;
+    label?: (props: typeof __VLS_48) => any;
 } & {
-    error?: (props: typeof __VLS_49) => any;
+    error?: (props: typeof __VLS_51) => any;
 } & {
-    description?: (props: typeof __VLS_52) => any;
+    description?: (props: typeof __VLS_54) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: number) => any;

package/dist/runtime/components/input/password-input.d.vue.ts

@@ -1,15 +1,15 @@
 import type { TextInputProps } from './index.js';
-declare var __VLS_7: {}, __VLS_27: {}, __VLS_30: {}, __VLS_33: {}, __VLS_36: {};
+declare var __VLS_9: {}, __VLS_30: {}, __VLS_33: {}, __VLS_36: {}, __VLS_39: {};
 type __VLS_Slots = {} & {
-    rightSection?: (props: typeof __VLS_7) => any;
+    rightSection?: (props: typeof __VLS_9) => any;
 } & {
-    leftSection?: (props: typeof __VLS_27) => any;
+    leftSection?: (props: typeof __VLS_30) => any;
 } & {
-    label?: (props: typeof __VLS_30) => any;
+    label?: (props: typeof __VLS_33) => any;
 } & {
-    error?: (props: typeof __VLS_33) => any;
+    error?: (props: typeof __VLS_36) => any;
 } & {
-    description?: (props: typeof __VLS_36) => any;
+    description?: (props: typeof __VLS_39) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<TextInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TextInputProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/input/password-input.vue

@@ -3,15 +3,22 @@ import { ref } from "vue";
 import ActionIcon from "../action-icon/action-icon.vue";
 import TextInput from "./text-input.vue";
 const props = defineProps({
+  multiline: { type: Boolean, required: false },
+  withAria: { type: Boolean, required: false },
+  classes: { type: Object, required: false },
   error: { type: String, required: false },
   description: { type: String, required: false },
   label: { type: String, required: false },
   required: { type: Boolean, required: false },
+  id: { type: [String, null], required: false },
   radius: { type: String, required: false },
   size: { type: String, required: false },
   variant: { type: String, required: false },
+  resize: { type: void 0, required: false },
   leftSectionPE: { type: null, required: false },
-  rightSectionPE: { type: null, required: false }
+  rightSectionPE: { type: null, required: false },
+  readonly: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
 });
 const password = ref(true);
 </script>

package/dist/runtime/components/input/password-input.vue.d.ts

@@ -1,15 +1,15 @@
 import type { TextInputProps } from './index.js';
-declare var __VLS_7: {}, __VLS_27: {}, __VLS_30: {}, __VLS_33: {}, __VLS_36: {};
+declare var __VLS_9: {}, __VLS_30: {}, __VLS_33: {}, __VLS_36: {}, __VLS_39: {};
 type __VLS_Slots = {} & {
-    rightSection?: (props: typeof __VLS_7) => any;
+    rightSection?: (props: typeof __VLS_9) => any;
 } & {
-    leftSection?: (props: typeof __VLS_27) => any;
+    leftSection?: (props: typeof __VLS_30) => any;
 } & {
-    label?: (props: typeof __VLS_30) => any;
+    label?: (props: typeof __VLS_33) => any;
 } & {
-    error?: (props: typeof __VLS_33) => any;
+    error?: (props: typeof __VLS_36) => any;
 } & {
-    description?: (props: typeof __VLS_36) => any;
+    description?: (props: typeof __VLS_39) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<TextInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<TextInputProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/input/text-input.d.vue.ts

@@ -1,26 +1,36 @@
+import type { Classes } from '@nui/types';
+import type { InputBaseProps } from './types/index.js';
 import type { InputWrapperProps } from './ui/input-wrapper.vue.js';
-export type TextInputProps = Omit<InputWrapperProps, 'id' | 'multiline' | 'resize'>;
+export interface TextInputProps extends InputWrapperProps, InputBaseProps {
+    /** If set, the input can have multiple lines, for example when `component="textarea"` @default `false` */
+    multiline?: boolean;
+    /** If set, `aria-` and other accessibility attributes are added to the input @default `true` */
+    withAria?: boolean;
+    classes?: Classes<'wrapper' | 'input'>;
+}
 type __VLS_Props = TextInputProps;
 type __VLS_ModelProps = {
-    modelValue?: string | undefined;
+    modelValue?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_11: {}, __VLS_14: {}, __VLS_17: {}, __VLS_20: {}, __VLS_23: {};
+declare var __VLS_15: {}, __VLS_19: {}, __VLS_22: {}, __VLS_25: {}, __VLS_28: {};
 type __VLS_Slots = {} & {
-    leftSection?: (props: typeof __VLS_11) => any;
+    leftSection?: (props: typeof __VLS_15) => any;
 } & {
-    rightSection?: (props: typeof __VLS_14) => any;
+    rightSection?: (props: typeof __VLS_19) => any;
 } & {
-    label?: (props: typeof __VLS_17) => any;
+    label?: (props: typeof __VLS_22) => any;
 } & {
-    error?: (props: typeof __VLS_20) => any;
+    error?: (props: typeof __VLS_25) => any;
 } & {
-    description?: (props: typeof __VLS_23) => any;
+    description?: (props: typeof __VLS_28) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | undefined) => any;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    readonly $el: HTMLElement | null | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+    "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;

package/dist/runtime/components/input/text-input.vue

@@ -1,40 +1,59 @@
 <script setup>
-import { useId } from "vue";
+import { unrefElement } from "@vueuse/core";
+import { useTemplateRef } from "vue";
 import BaseInput from "./ui/input-base.vue";
 import InputWrapper from "./ui/input-wrapper.vue";
-defineOptions({
-  inheritAttrs: false
-});
-const { required, ...props } = defineProps({
+const { classes, ...props } = defineProps({
+  multiline: { type: Boolean, required: false },
+  withAria: { type: Boolean, required: false },
+  classes: { type: Object, required: false },
   error: { type: String, required: false },
   description: { type: String, required: false },
   label: { type: String, required: false },
   required: { type: Boolean, required: false },
+  id: { type: [String, null], required: false },
   radius: { type: String, required: false },
   size: { type: String, required: false },
   variant: { type: String, required: false },
+  resize: { type: void 0, required: false },
   leftSectionPE: { type: null, required: false },
-  rightSectionPE: { type: null, required: false }
+  rightSectionPE: { type: null, required: false },
+  readonly: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const value = defineModel({ type: String, ...{ default: "" } });
+const ref = useTemplateRef("input");
+defineExpose({
+  get $el() {
+    return unrefElement(ref.value);
+  }
 });
-const model = defineModel({ type: null });
-const id = useId();
 </script>
 
 <template>
-	<InputWrapper :id v-bind='props' :class='$attrs?.class'>
-		<BaseInput
-			:id
-			v-model='model'
-			v-bind='{ ...$attrs, class: void 0 }'
-			:required
-		>
+	<InputWrapper v-bind='props' :class='[$attrs.class, classes?.wrapper]'>
+		<BaseInput>
 			<template v-if='$slots.leftSection' #leftSection>
 				<slot name='leftSection' />
 			</template>
+
+			<template #default='{ id, css }'>
+				<input
+					v-bind='{ ...$attrs, class: css }'
+					:id
+					ref='input'
+					v-model='value'
+					:required
+					:disabled
+					:readonly
+				>
+			</template>
+
 			<template v-if='$slots.rightSection' #rightSection>
 				<slot name='rightSection' />
 			</template>
 		</BaseInput>
+
 		<template v-if='$slots.label' #label>
 			<slot name='label' />
 		</template>

package/dist/runtime/components/input/text-input.vue.d.ts

@@ -1,26 +1,36 @@
+import type { Classes } from '@nui/types';
+import type { InputBaseProps } from './types/index.js';
 import type { InputWrapperProps } from './ui/input-wrapper.vue.js';
-export type TextInputProps = Omit<InputWrapperProps, 'id' | 'multiline' | 'resize'>;
+export interface TextInputProps extends InputWrapperProps, InputBaseProps {
+    /** If set, the input can have multiple lines, for example when `component="textarea"` @default `false` */
+    multiline?: boolean;
+    /** If set, `aria-` and other accessibility attributes are added to the input @default `true` */
+    withAria?: boolean;
+    classes?: Classes<'wrapper' | 'input'>;
+}
 type __VLS_Props = TextInputProps;
 type __VLS_ModelProps = {
-    modelValue?: string | undefined;
+    modelValue?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_11: {}, __VLS_14: {}, __VLS_17: {}, __VLS_20: {}, __VLS_23: {};
+declare var __VLS_15: {}, __VLS_19: {}, __VLS_22: {}, __VLS_25: {}, __VLS_28: {};
 type __VLS_Slots = {} & {
-    leftSection?: (props: typeof __VLS_11) => any;
+    leftSection?: (props: typeof __VLS_15) => any;
 } & {
-    rightSection?: (props: typeof __VLS_14) => any;
+    rightSection?: (props: typeof __VLS_19) => any;
 } & {
-    label?: (props: typeof __VLS_17) => any;
+    label?: (props: typeof __VLS_22) => any;
 } & {
-    error?: (props: typeof __VLS_20) => any;
+    error?: (props: typeof __VLS_25) => any;
 } & {
-    description?: (props: typeof __VLS_23) => any;
+    description?: (props: typeof __VLS_28) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | undefined) => any;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    readonly $el: HTMLElement | null | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+    "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;

package/dist/runtime/components/input/types/index.d.ts

@@ -1,5 +1,7 @@
 export type InputVariant = 'default' | 'filled' | 'unstyled';
 export interface InputBaseProps {
+    /** If set, the value cannot be updated */
     readonly?: boolean;
+    /** If set, the component becomes disabled */
     disabled?: boolean;
 }

package/dist/runtime/components/input/ui/button-input.d.vue.ts

@@ -0,0 +1,42 @@
+import type { InputBaseProps } from '../types/index.js';
+import type { BaseInputProps } from './input-base.vue.js';
+import type { InputWrapperProps } from './input-wrapper.vue.js';
+export interface ButtonInputProps extends InputWrapperProps, BaseInputProps, InputBaseProps {
+    /** If set, the input can have multiple lines, for example when `component="textarea"` @default `false` */
+    multiline?: boolean;
+    name?: string;
+}
+type __VLS_Props = ButtonInputProps;
+type __VLS_ModelProps = {
+    modelValue?: unknown;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_15: {}, __VLS_26: {}, __VLS_29: {}, __VLS_32: {}, __VLS_35: {}, __VLS_38: {};
+type __VLS_Slots = {} & {
+    leftSection?: (props: typeof __VLS_15) => any;
+} & {
+    default?: (props: typeof __VLS_26) => any;
+} & {
+    rightSection?: (props: typeof __VLS_29) => any;
+} & {
+    label?: (props: typeof __VLS_32) => any;
+} & {
+    error?: (props: typeof __VLS_35) => any;
+} & {
+    description?: (props: typeof __VLS_38) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    readonly $el: HTMLElement | null | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => 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/input/ui/button-input.vue

@@ -0,0 +1,103 @@
+<script setup>
+import { unrefElement } from "@vueuse/core";
+import { useTemplateRef } from "vue";
+import UnstyledButton from "../../button/unstyled-button.vue";
+import InputBase from "./input-base.vue";
+import InputWrapper from "./input-wrapper.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  multiline: { type: Boolean, required: false },
+  name: { type: String, required: false },
+  error: { type: String, required: false },
+  description: { type: String, required: false },
+  label: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  id: { type: [String, null], required: false },
+  radius: { type: String, required: false },
+  size: { type: String, required: false },
+  variant: { type: String, required: false },
+  resize: { type: void 0, required: false },
+  leftSectionPE: { type: null, required: false },
+  rightSectionPE: { type: null, required: false },
+  classes: { type: Object, required: false },
+  readonly: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
+});
+const model = defineModel({ type: null });
+const ref = useTemplateRef("button");
+defineExpose({
+  get $el() {
+    return unrefElement(ref.value);
+  }
+});
+</script>
+
+<template>
+	<InputWrapper v-bind='props'>
+		<InputBase :class='$style.base'>
+			<template v-if='!!$slots.leftSection' #leftSection>
+				<slot name='leftSection' />
+			</template>
+
+			<template #default='{ id, css }'>
+				<UnstyledButton
+					:id
+					ref='button'
+					v-bind='{ ...$attrs, class: null }'
+					:disabled
+					:readonly
+					:class='[css, $style.button]'
+					:mod='{ multiline: props.multiline }'
+				>
+					<slot />
+				</UnstyledButton>
+				<input
+					:id
+					v-model='model'
+					:name
+					type='hidden'
+					:required
+					:disabled
+					:readonly
+				>
+			</template>
+
+			<template v-if='!!$slots.rightSection' #rightSection>
+				<slot name='rightSection' />
+			</template>
+		</InputBase>
+
+		<template v-if='!!$slots.label' #label>
+			<slot name='label' />
+		</template>
+		<template v-if='!!$slots.error' #error>
+			<slot name='error' />
+		</template>
+		<template v-if='!!$slots.description' #description>
+			<slot name='description' />
+		</template>
+	</InputWrapper>
+</template>
+
+<style lang="postcss" module>
+.base {
+	--input-cursor: pointer;
+}
+
+.button {
+	width: 100%;
+	min-width: rem(150px);
+
+	font-weight: 400;
+
+	&:where([data-multiline]) {
+		height: auto;
+		padding-block: calc(var(--input-padding-inline-end) / 2);
+	}
+}
+
+.section {
+	font-size: var(--font-size-lg);
+	color: var(--color-dimmed);
+}
+</style>

package/dist/runtime/components/input/ui/button-input.vue.d.ts

@@ -0,0 +1,42 @@
+import type { InputBaseProps } from '../types/index.js';
+import type { BaseInputProps } from './input-base.vue.js';
+import type { InputWrapperProps } from './input-wrapper.vue.js';
+export interface ButtonInputProps extends InputWrapperProps, BaseInputProps, InputBaseProps {
+    /** If set, the input can have multiple lines, for example when `component="textarea"` @default `false` */
+    multiline?: boolean;
+    name?: string;
+}
+type __VLS_Props = ButtonInputProps;
+type __VLS_ModelProps = {
+    modelValue?: unknown;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_15: {}, __VLS_26: {}, __VLS_29: {}, __VLS_32: {}, __VLS_35: {}, __VLS_38: {};
+type __VLS_Slots = {} & {
+    leftSection?: (props: typeof __VLS_15) => any;
+} & {
+    default?: (props: typeof __VLS_26) => any;
+} & {
+    rightSection?: (props: typeof __VLS_29) => any;
+} & {
+    label?: (props: typeof __VLS_32) => any;
+} & {
+    error?: (props: typeof __VLS_35) => any;
+} & {
+    description?: (props: typeof __VLS_38) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    readonly $el: HTMLElement | null | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: unknown) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: unknown) => 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;
+    };
+};