nuance-ui 0.2.6 → 0.2.8

package/dist/runtime/components/date-time-picker.vue.d.ts

@@ -10,8 +10,11 @@ import type { TimePickerProps } from './time-picker/time-picker.vue.js';
 export interface DatePickerProps extends ButtonInputProps, Pick<TimePickerProps, 'withSeconds'> {
     /** Tempo format for date value @default `DD.MM.YYYY HH:mm` */
     format?: Format;
+    /** Props forwarded to the inner `Calendar` */
     calendarProps?: Partial<Omit<CalendarProps, 'numberOfMonths' | 'mode'>>;
+    /** Props forwarded to the inner `TimePicker` */
     timePickerProps?: Omit<Partial<TimePickerProps>, 'withSeconds' | 'name'>;
+    /** Shows a button to clear the value @default `false` */
     clearable?: boolean;
 }
 type __VLS_Props = DatePickerProps;

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

@@ -1,5 +1,5 @@
 export { useDialogState } from './lib.js';
-export type * from './model';
+export type * from './types';
 export type * from './ui/dialog-header.vue';
 export type * from './ui/dialog-root.vue';
 export type * from './ui/dialog-title.vue';

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

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

package/dist/runtime/components/dialog/{model.d.ts → types.d.ts}

@@ -5,5 +5,6 @@ export interface DialogEmits {
     close: [];
 }
 export interface DialogModel {
+    /** Controls open/closed state */
     open: boolean;
 }

package/dist/runtime/components/dialog/ui/dialog-root.d.vue.ts

@@ -1,8 +1,8 @@
 import type { NuanceRadius, NuanceShadow, NuanceSize, NuanceSpacing } from '@nui/types';
 import type { CSSProperties, RendererElement } from 'vue';
 import type { BoxProps } from '../../box.vue.js';
-import type { TransitionName } from '../../transition/index.js';
-import type { DialogModel } from '../model.js';
+import type { TransitionName } from '../../transition.vue.js';
+import type { DialogModel } from '../types.js';
 export interface DialogRootProps extends BoxProps {
     /** If set, the dialog is closed when user clicks on the overlay @default `true` */
     closeOnClickOutside?: boolean;
@@ -24,6 +24,7 @@ export interface DialogRootProps extends BoxProps {
     padding?: NuanceSpacing;
     /** Passes a class to root element */
     rootClass?: string;
+    /** Animation on hide/show */
     transition?: TransitionName;
     /** Portal target to render element @default 'body' */
     portalTarget?: string | RendererElement | null;

package/dist/runtime/components/dialog/ui/dialog-root.vue

@@ -3,7 +3,7 @@ import { getRadius, getShadow, getSize, getSpacing, rem } from "@nui/utils";
 import { onClickOutside, unrefElement } from "@vueuse/core";
 import { computed, shallowRef, watch } from "vue";
 import Box from "../../box.vue";
-import NTransition from "../../transition/transition.vue";
+import NTransition from "../../transition.vue";
 import { useProvideDialogState } from "../lib";
 import css from "./dialog.module.css";
 defineOptions({ inheritAttrs: false });
@@ -74,24 +74,24 @@ const style = computed(() => ({
 </script>
 
 <template>
-	<ClientOnly>
-		<Teleport :disabled='!withinPortal' :to='portalTarget'>
-			<Box
-				is='dialog'
-				ref='dialogRef'
-				:class='[css.root, rootClass]'
-				:mod='[{ "without-overlay": withoutOverlay }, mod]'
-				:style
-				@click='overlayClick'
-				@close='$emit("close")'
-				@cancel.prevent='opened = false'
-			>
-				<NTransition :name='transition'>
-					<Box is='section' v-if='opened' :class='css.content' v-bind='$attrs'>
-						<slot />
-					</Box>
-				</NTransition>
-			</Box>
-		</Teleport>
-	</ClientOnly>
+	<ClientOnly>
+		<Teleport :disabled='!withinPortal' :to='portalTarget'>
+			<Box
+				is='dialog'
+				ref='dialogRef'
+				:class='[css.root, rootClass]'
+				:mod='[{ "without-overlay": withoutOverlay }, mod]'
+				:style
+				@click='overlayClick'
+				@close='$emit("close")'
+				@cancel.prevent='opened = false'
+			>
+				<NTransition :name='transition'>
+					<Box is='section' v-if='opened' :class='css.content' v-bind='$attrs'>
+						<slot />
+					</Box>
+				</NTransition>
+			</Box>
+		</Teleport>
+	</ClientOnly>
 </template>

package/dist/runtime/components/dialog/ui/dialog-root.vue.d.ts

@@ -1,8 +1,8 @@
 import type { NuanceRadius, NuanceShadow, NuanceSize, NuanceSpacing } from '@nui/types';
 import type { CSSProperties, RendererElement } from 'vue';
 import type { BoxProps } from '../../box.vue.js';
-import type { TransitionName } from '../../transition/index.js';
-import type { DialogModel } from '../model.js';
+import type { TransitionName } from '../../transition.vue.js';
+import type { DialogModel } from '../types.js';
 export interface DialogRootProps extends BoxProps {
     /** If set, the dialog is closed when user clicks on the overlay @default `true` */
     closeOnClickOutside?: boolean;
@@ -24,6 +24,7 @@ export interface DialogRootProps extends BoxProps {
     padding?: NuanceSpacing;
     /** Passes a class to root element */
     rootClass?: string;
+    /** Animation on hide/show */
     transition?: TransitionName;
     /** Portal target to render element @default 'body' */
     portalTarget?: string | RendererElement | null;

package/dist/runtime/components/files/file-upload-button.d.vue.ts

@@ -5,20 +5,22 @@ export interface FileUploadButtonProps<M extends boolean> extends ButtonProps, U
     /** Icon passed to leftSection */
     icon?: string;
     /**
+     * Allows selecting multiple files
      * @default false
      */
     multiple?: MaybeRef<M>;
     /**
+     * Accepted file types
      * @default '*'
      */
     accept?: MaybeRef<string>;
     /**
-     * Reset when open file dialog.
+     * Resets selected files when the dialog opens
      * @default false
      */
     reset?: MaybeRef<boolean>;
     /**
-     * Select directories instead of files.
+     * Selects directories instead of files
      * @see [HTMLInputElement webkitdirectory](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)
      * @default false
      */

package/dist/runtime/components/files/file-upload-button.vue.d.ts

@@ -5,20 +5,22 @@ export interface FileUploadButtonProps<M extends boolean> extends ButtonProps, U
     /** Icon passed to leftSection */
     icon?: string;
     /**
+     * Allows selecting multiple files
      * @default false
      */
     multiple?: MaybeRef<M>;
     /**
+     * Accepted file types
      * @default '*'
      */
     accept?: MaybeRef<string>;
     /**
-     * Reset when open file dialog.
+     * Resets selected files when the dialog opens
      * @default false
      */
     reset?: MaybeRef<boolean>;
     /**
-     * Select directories instead of files.
+     * Selects directories instead of files
      * @see [HTMLInputElement webkitdirectory](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)
      * @default false
      */

package/dist/runtime/components/files/file-upload-icon.d.vue.ts

@@ -3,20 +3,22 @@ import type { MaybeRef } from 'vue';
 import type { ActionIconProps } from '../action-icon/action-icon.vue.js';
 export interface FileUploadIconProps<M extends boolean> extends ActionIconProps, UseFileDialogOptions {
     /**
+     * Allows selecting multiple files
      * @default false
      */
     multiple?: MaybeRef<M>;
     /**
+     * Accepted file types
      * @default '*'
      */
     accept?: MaybeRef<string>;
     /**
-     * Reset when open file dialog.
+     * Resets selected files when the dialog opens
      * @default false
      */
     reset?: MaybeRef<boolean>;
     /**
-     * Select directories instead of files.
+     * Selects directories instead of files
      * @see [HTMLInputElement webkitdirectory](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)
      * @default false
      */

package/dist/runtime/components/files/file-upload-icon.vue.d.ts

@@ -3,20 +3,22 @@ import type { MaybeRef } from 'vue';
 import type { ActionIconProps } from '../action-icon/action-icon.vue.js';
 export interface FileUploadIconProps<M extends boolean> extends ActionIconProps, UseFileDialogOptions {
     /**
+     * Allows selecting multiple files
      * @default false
      */
     multiple?: MaybeRef<M>;
     /**
+     * Accepted file types
      * @default '*'
      */
     accept?: MaybeRef<string>;
     /**
-     * Reset when open file dialog.
+     * Resets selected files when the dialog opens
      * @default false
      */
     reset?: MaybeRef<boolean>;
     /**
-     * Select directories instead of files.
+     * Selects directories instead of files
      * @see [HTMLInputElement webkitdirectory](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)
      * @default false
      */

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

@@ -1,17 +1,17 @@
 export * from './action-icon/index.js';
 export * from './app-shell/index.js';
 export * from './avatar/index.js';
-export * from './background-image.vue.js';
-export * from './badge.vue.js';
-export * from './box.vue.js';
-export type { BreadcrumbsItem, BreadcrumbsProps } from './breadcrumbs.vue.js';
+export type * from './background-image.vue';
+export type * from './badge.vue';
+export type * from './box.vue';
+export type * from './breadcrumbs.vue';
 export * from './button/index.js';
 export * from './calendar/index.js';
 export * from './card/index.js';
 export * from './checkbox/index.js';
 export * from './chip/index.js';
 export * from './combobox/index.js';
-export * from './container.vue.js';
+export type * from './container.vue';
 export type * from './date-time-picker.vue';
 export * from './dialog/index.js';
 export * from './drawer/index.js';
@@ -21,17 +21,18 @@ export * from './link/index.js';
 export * from './loader/index.js';
 export * from './modal/index.js';
 export * from './nav-link/index.js';
-export * from './paper.vue.js';
+export type * from './paper.vue';
 export * from './popover/index.js';
 export * from './progress/index.js';
 export * from './roving-focus/index.js';
-export * from './select/index.js';
+export type * from './select.vue';
+export * from './switch/index.js';
 export * from './table/index.js';
 export * from './tabs/index.js';
-export * from './text.vue.js';
-export * from './textarea.vue.js';
+export type * from './text.vue';
+export type * from './textarea.vue';
 export * from './time-picker/index.js';
-export * from './title.vue.js';
-export * from './transition/index.js';
+export type * from './title.vue';
+export type * from './transition.vue';
 export * from './tree/index.js';
 export * from './visually-hidden/index.js';

package/dist/runtime/components/index.js

@@ -1,16 +1,12 @@
 export * from "./action-icon/index.js";
 export * from "./app-shell/index.js";
 export * from "./avatar/index.js";
-export * from "./background-image.vue";
-export * from "./badge.vue";
-export * from "./box.vue";
 export * from "./button/index.js";
 export * from "./calendar/index.js";
 export * from "./card/index.js";
 export * from "./checkbox/index.js";
 export * from "./chip/index.js";
 export * from "./combobox/index.js";
-export * from "./container.vue";
 export * from "./dialog/index.js";
 export * from "./drawer/index.js";
 export * from "./files/index.js";
@@ -19,17 +15,12 @@ export * from "./link/index.js";
 export * from "./loader/index.js";
 export * from "./modal/index.js";
 export * from "./nav-link/index.js";
-export * from "./paper.vue";
 export * from "./popover/index.js";
 export * from "./progress/index.js";
 export * from "./roving-focus/index.js";
-export * from "./select/index.js";
+export * from "./switch/index.js";
 export * from "./table/index.js";
 export * from "./tabs/index.js";
-export * from "./text.vue";
-export * from "./textarea.vue";
 export * from "./time-picker/index.js";
-export * from "./title.vue";
-export * from "./transition/index.js";
 export * from "./tree/index.js";
 export * from "./visually-hidden/index.js";

package/dist/runtime/components/input/date-picker.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { format } from "@formkit/tempo";
-import { useDatesConfig } from "@nui/composals";
+import { useDatesConfig } from "@nui/composables";
 import { computed } from "vue";
 import ActionIcon from "../action-icon/action-icon.vue";
 import Badge from "../badge.vue";

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

@@ -1,15 +1,15 @@
 import type { TextInputProps } from './index.js';
-declare var __VLS_9: {}, __VLS_17: {}, __VLS_20: {}, __VLS_23: {}, __VLS_26: {};
+declare var __VLS_9: {}, __VLS_12: {}, __VLS_15: {}, __VLS_18: {}, __VLS_21: {};
 type __VLS_Slots = {} & {
     leftSection?: (props: typeof __VLS_9) => any;
 } & {
-    rightSection?: (props: typeof __VLS_17) => any;
+    rightSection?: (props: typeof __VLS_12) => any;
 } & {
-    label?: (props: typeof __VLS_20) => any;
+    label?: (props: typeof __VLS_15) => any;
 } & {
-    error?: (props: typeof __VLS_23) => any;
+    error?: (props: typeof __VLS_18) => any;
 } & {
-    description?: (props: typeof __VLS_26) => any;
+    description?: (props: typeof __VLS_21) => 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/email-input.vue

@@ -1,9 +1,10 @@
 <script setup>
 import TextInput from "./text-input.vue";
-const props = defineProps({
+const { icon = "gravity-ui:at", ...rest } = defineProps({
   multiline: { type: Boolean, required: false },
   withAria: { type: Boolean, required: false },
   classes: { type: Object, required: false },
+  icon: { type: String, required: false },
   error: { type: String, required: false },
   description: { type: String, required: false },
   label: { type: String, required: false },
@@ -21,11 +22,9 @@ const props = defineProps({
 </script>
 
 <template>
-	<TextInput type='email' v-bind='props'>
-		<template #leftSection>
-			<slot name='leftSection'>
-				<Icon name='gravity-ui:at' />
-			</slot>
+	<TextInput type='email' :icon v-bind='rest'>
+		<template v-if='!!$slots.leftSection' #leftSection>
+			<slot name='leftSection' />
 		</template>
 
 		<template v-if='!!$slots.rightSection' #rightSection>

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

@@ -1,15 +1,15 @@
 import type { TextInputProps } from './index.js';
-declare var __VLS_9: {}, __VLS_17: {}, __VLS_20: {}, __VLS_23: {}, __VLS_26: {};
+declare var __VLS_9: {}, __VLS_12: {}, __VLS_15: {}, __VLS_18: {}, __VLS_21: {};
 type __VLS_Slots = {} & {
     leftSection?: (props: typeof __VLS_9) => any;
 } & {
-    rightSection?: (props: typeof __VLS_17) => any;
+    rightSection?: (props: typeof __VLS_12) => any;
 } & {
-    label?: (props: typeof __VLS_20) => any;
+    label?: (props: typeof __VLS_15) => any;
 } & {
-    error?: (props: typeof __VLS_23) => any;
+    error?: (props: typeof __VLS_18) => any;
 } & {
-    description?: (props: typeof __VLS_26) => any;
+    description?: (props: typeof __VLS_21) => 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/lib/input-wrapper.context.d.ts

@@ -1,17 +1,24 @@
 import type { NuanceSize } from '@nui/types';
 import type { CSSProperties } from 'vue';
-import type { InputVariant } from '../types/index.js';
+import type { InputVariant } from '../types.js';
 export interface WrapperContext {
+    /** Id used to bind input and label, auto-generated if not provided */
     id?: string | null;
+    /** Marks the field as required */
     required?: boolean;
+    /** Border radius */
     radius?: NuanceSize | string;
+    /** Component size */
     size?: NuanceSize | string;
+    /** Visual variant */
     variant?: InputVariant;
+    /** Enables multiline (textarea) mode */
     multiline?: boolean;
+    /** CSS resize behavior for multiline inputs */
     resize?: CSSProperties['resize'];
-    /** section pointer-events */
+    /** `pointer-events` value for the left section */
     leftSectionPE?: CSSStyleDeclaration['pointerEvents'];
-    /** section pointer-events */
+    /** `pointer-events` value for the right section */
     rightSectionPE?: CSSStyleDeclaration['pointerEvents'];
 }
 export declare const useProvideInputWrapper: (init: any) => any;

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

@@ -1,5 +1,5 @@
 import type { InputWrapperProps } from './index.js';
-import type { InputBaseProps } from './types/index.js';
+import type { InputBaseProps } from './types.js';
 export interface NumberInputProps extends InputBaseProps, Omit<InputWrapperProps, 'multiline' | 'resize' | 'id'> {
     /** Minimum possible value */
     min?: number;
@@ -9,23 +9,25 @@ export interface NumberInputProps extends InputBaseProps, Omit<InputWrapperProps
     step?: number;
     /** Determines whether the up/down controls should be hidden, `false` by default */
     hideControls?: boolean;
+    /** Icon displayed in the left section */
+    icon?: string;
 }
 type __VLS_Props = NumberInputProps;
 type __VLS_ModelProps = {
     modelValue?: number;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_15: {}, __VLS_19: {}, __VLS_48: {}, __VLS_51: {}, __VLS_54: {};
+declare var __VLS_15: {}, __VLS_24: {}, __VLS_53: {}, __VLS_56: {}, __VLS_59: {};
 type __VLS_Slots = {} & {
     leftSection?: (props: typeof __VLS_15) => any;
 } & {
-    rightSection?: (props: typeof __VLS_19) => any;
+    rightSection?: (props: typeof __VLS_24) => any;
 } & {
-    label?: (props: typeof __VLS_48) => any;
+    label?: (props: typeof __VLS_53) => any;
 } & {
-    error?: (props: typeof __VLS_51) => any;
+    error?: (props: typeof __VLS_56) => any;
 } & {
-    description?: (props: typeof __VLS_54) => any;
+    description?: (props: typeof __VLS_59) => 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

@@ -9,6 +9,7 @@ const {
   max = Number.MAX_SAFE_INTEGER,
   step = 1,
   hideControls,
+  icon,
   rightSectionPE = "all",
   ...rest
 } = defineProps({
@@ -16,6 +17,7 @@ const {
   max: { type: Number, required: false },
   step: { type: Number, required: false },
   hideControls: { type: Boolean, required: false },
+  icon: { type: String, required: false },
   readonly: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   error: { type: String, required: false },
@@ -49,8 +51,10 @@ function handleBlur() {
 <template>
 	<InputWrapper v-bind='rest' :class='$style.root' :right-section-p-e>
 		<BaseInput>
-			<template v-if='!!$slots.leftSection' #leftSection>
-				<slot name='leftSection' />
+			<template v-if='!!$slots.leftSection || icon' #leftSection>
+				<slot name='leftSection'>
+					<Icon v-if='icon' :name='icon' />
+				</slot>
 			</template>
 
 			<template #default='{ id, css }'>

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

@@ -1,5 +1,5 @@
 import type { InputWrapperProps } from './index.js';
-import type { InputBaseProps } from './types/index.js';
+import type { InputBaseProps } from './types.js';
 export interface NumberInputProps extends InputBaseProps, Omit<InputWrapperProps, 'multiline' | 'resize' | 'id'> {
     /** Minimum possible value */
     min?: number;
@@ -9,23 +9,25 @@ export interface NumberInputProps extends InputBaseProps, Omit<InputWrapperProps
     step?: number;
     /** Determines whether the up/down controls should be hidden, `false` by default */
     hideControls?: boolean;
+    /** Icon displayed in the left section */
+    icon?: string;
 }
 type __VLS_Props = NumberInputProps;
 type __VLS_ModelProps = {
     modelValue?: number;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_15: {}, __VLS_19: {}, __VLS_48: {}, __VLS_51: {}, __VLS_54: {};
+declare var __VLS_15: {}, __VLS_24: {}, __VLS_53: {}, __VLS_56: {}, __VLS_59: {};
 type __VLS_Slots = {} & {
     leftSection?: (props: typeof __VLS_15) => any;
 } & {
-    rightSection?: (props: typeof __VLS_19) => any;
+    rightSection?: (props: typeof __VLS_24) => any;
 } & {
-    label?: (props: typeof __VLS_48) => any;
+    label?: (props: typeof __VLS_53) => any;
 } & {
-    error?: (props: typeof __VLS_51) => any;
+    error?: (props: typeof __VLS_56) => any;
 } & {
-    description?: (props: typeof __VLS_54) => any;
+    description?: (props: typeof __VLS_59) => 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.vue

@@ -6,6 +6,7 @@ const props = defineProps({
   multiline: { type: Boolean, required: false },
   withAria: { type: Boolean, required: false },
   classes: { type: Object, required: false },
+  icon: { type: String, required: false },
   error: { type: String, required: false },
   description: { type: String, required: false },
   label: { type: String, required: false },

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

@@ -1,29 +1,32 @@
 import type { Classes } from '@nui/types';
-import type { InputBaseProps } from './types/index.js';
+import type { InputBaseProps } from './types.js';
 import type { InputWrapperProps } from './ui/input-wrapper.vue.js';
 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;
+    /** Styles API */
     classes?: Classes<'wrapper' | 'input'>;
+    /** Icon displayed in the left section */
+    icon?: string;
 }
 type __VLS_Props = TextInputProps;
 type __VLS_ModelProps = {
     modelValue?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_15: {}, __VLS_19: {}, __VLS_22: {}, __VLS_25: {}, __VLS_28: {};
+declare var __VLS_15: {}, __VLS_24: {}, __VLS_27: {}, __VLS_30: {}, __VLS_33: {};
 type __VLS_Slots = {} & {
     leftSection?: (props: typeof __VLS_15) => any;
 } & {
-    rightSection?: (props: typeof __VLS_19) => any;
+    rightSection?: (props: typeof __VLS_24) => any;
 } & {
-    label?: (props: typeof __VLS_22) => any;
+    label?: (props: typeof __VLS_27) => any;
 } & {
-    error?: (props: typeof __VLS_25) => any;
+    error?: (props: typeof __VLS_30) => any;
 } & {
-    description?: (props: typeof __VLS_28) => any;
+    description?: (props: typeof __VLS_33) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     readonly $el: HTMLElement | null | undefined;

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

@@ -3,10 +3,11 @@ import { unrefElement } from "@vueuse/core";
 import { useTemplateRef } from "vue";
 import BaseInput from "./ui/input-base.vue";
 import InputWrapper from "./ui/input-wrapper.vue";
-const { classes, ...props } = defineProps({
+const { classes, icon, ...props } = defineProps({
   multiline: { type: Boolean, required: false },
   withAria: { type: Boolean, required: false },
   classes: { type: Object, required: false },
+  icon: { type: String, required: false },
   error: { type: String, required: false },
   description: { type: String, required: false },
   label: { type: String, required: false },
@@ -33,8 +34,10 @@ defineExpose({
 <template>
 	<InputWrapper v-bind='props' :class='[$attrs.class, classes?.wrapper]'>
 		<BaseInput>
-			<template v-if='!!$slots.leftSection' #leftSection>
-				<slot name='leftSection' />
+			<template v-if='!!$slots.leftSection || icon' #leftSection>
+				<slot name='leftSection'>
+					<Icon v-if='icon' :name='icon' />
+				</slot>
 			</template>
 
 			<template #default='{ id, css }'>