@eslamdevui/ui 3.2.0-beta.1

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

@@ -0,0 +1,185 @@
+import type { Ref, WatchOptions } from 'vue';
+import type { AppConfig } from '@nuxt/schema';
+import type { Cell, Header, RowData, TableMeta } from '@tanstack/table-core';
+import type { CellContext, ColumnDef, ColumnFiltersOptions, ColumnFiltersState, ColumnOrderState, ColumnPinningOptions, ColumnPinningState, ColumnSizingInfoState, ColumnSizingOptions, ColumnSizingState, CoreOptions, ExpandedOptions, ExpandedState, FacetedOptions, GlobalFilterOptions, GroupingOptions, GroupingState, HeaderContext, PaginationOptions, PaginationState, Row, RowPinningOptions, RowPinningState, RowSelectionOptions, RowSelectionState, SortingOptions, SortingState, VisibilityOptions, VisibilityState } from '@tanstack/vue-table';
+import theme from '#build/ui/table';
+import type { ComponentConfig } from '../types/utils';
+declare module '@tanstack/table-core' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        class?: {
+            th?: string | ((cell: Header<TData, TValue>) => string);
+            td?: string | ((cell: Cell<TData, TValue>) => string);
+        };
+    }
+    interface TableMeta<TData> {
+        class?: {
+            tr?: string | ((row: Row<TData>) => string);
+        };
+    }
+}
+type Table = ComponentConfig<typeof theme, AppConfig, 'table'>;
+export type TableRow<T> = Row<T>;
+export type TableData = RowData;
+export type TableColumn<T extends TableData, D = unknown> = ColumnDef<T, D>;
+export interface TableOptions<T extends TableData = TableData> extends Omit<CoreOptions<T>, 'data' | 'columns' | 'getCoreRowModel' | 'state' | 'onStateChange' | 'renderFallbackValue'> {
+    state?: CoreOptions<T>['state'];
+    onStateChange?: CoreOptions<T>['onStateChange'];
+    renderFallbackValue?: CoreOptions<T>['renderFallbackValue'];
+}
+export interface TableProps<T extends TableData = TableData> extends TableOptions<T> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    data?: T[];
+    columns?: TableColumn<T>[];
+    caption?: string;
+    meta?: TableMeta<T>;
+    /**
+     * The text to display when the table is empty.
+     * @defaultValue t('table.noData')
+     */
+    empty?: string;
+    /**
+     * Whether the table should have a sticky header.
+     * @defaultValue false
+     */
+    sticky?: boolean;
+    /** Whether the table should be in loading state. */
+    loading?: boolean;
+    /**
+     * @defaultValue 'primary'
+     */
+    loadingColor?: Table['variants']['loadingColor'];
+    /**
+     * @defaultValue 'carousel'
+     */
+    loadingAnimation?: Table['variants']['loadingAnimation'];
+    /**
+     * Use the `watchOptions` prop to customize reactivity (for ex: disable deep watching for changes in your data or limiting the max traversal depth). This can improve performance by reducing unnecessary re-renders, but it should be used with caution as it may lead to unexpected behavior if not managed properly.
+     * @link [API Docs](https://vuejs.org/api/options-state.html#watch)
+     * @link [Guide](https://vuejs.org/guide/essentials/watchers.html)
+     * @defaultValue { deep: true }
+     */
+    watchOptions?: WatchOptions;
+    /**
+     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/global-filtering#table-options)
+     * @link [Guide](https://tanstack.com/table/v8/docs/guide/global-filtering)
+     */
+    globalFilterOptions?: Omit<GlobalFilterOptions<T>, 'onGlobalFilterChange'>;
+    /**
+     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-filtering#table-options)
+     * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-filtering)
+     */
+    columnFiltersOptions?: Omit<ColumnFiltersOptions<T>, 'getFilteredRowModel' | 'onColumnFiltersChange'>;
+    /**
+     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-pinning#table-options)
+     * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-pinning)
+     */
+    columnPinningOptions?: Omit<ColumnPinningOptions, 'onColumnPinningChange'>;
+    /**
+     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-sizing#table-options)
+     * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-sizing)
+     */
+    columnSizingOptions?: Omit<ColumnSizingOptions, 'onColumnSizingChange' | 'onColumnSizingInfoChange'>;
+    /**
+     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-visibility#table-options)
+     * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-visibility)
+     */
+    visibilityOptions?: Omit<VisibilityOptions, 'onColumnVisibilityChange'>;
+    /**
+     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/sorting#table-options)
+     * @link [Guide](https://tanstack.com/table/v8/docs/guide/sorting)
+     */
+    sortingOptions?: Omit<SortingOptions<T>, 'getSortedRowModel' | 'onSortingChange'>;
+    /**
+     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/grouping#table-options)
+     * @link [Guide](https://tanstack.com/table/v8/docs/guide/grouping)
+     */
+    groupingOptions?: Omit<GroupingOptions, 'onGroupingChange'>;
+    /**
+     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/expanding#table-options)
+     * @link [Guide](https://tanstack.com/table/v8/docs/guide/expanding)
+     */
+    expandedOptions?: Omit<ExpandedOptions<T>, 'getExpandedRowModel' | 'onExpandedChange'>;
+    /**
+     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-selection#table-options)
+     * @link [Guide](https://tanstack.com/table/v8/docs/guide/row-selection)
+     */
+    rowSelectionOptions?: Omit<RowSelectionOptions<T>, 'onRowSelectionChange'>;
+    /**
+     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/row-pinning#table-options)
+     * @link [Guide](https://tanstack.com/table/v8/docs/guide/row-pinning)
+     */
+    rowPinningOptions?: Omit<RowPinningOptions<T>, 'onRowPinningChange'>;
+    /**
+     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/pagination#table-options)
+     * @link [Guide](https://tanstack.com/table/v8/docs/guide/pagination)
+     */
+    paginationOptions?: Omit<PaginationOptions, 'onPaginationChange'>;
+    /**
+     * @link [API Docs](https://tanstack.com/table/v8/docs/api/features/column-faceting#table-options)
+     * @link [Guide](https://tanstack.com/table/v8/docs/guide/column-faceting)
+     */
+    facetedOptions?: FacetedOptions<T>;
+    onSelect?: (row: TableRow<T>, e?: Event) => void;
+    class?: any;
+    ui?: Table['slots'];
+}
+type DynamicHeaderSlots<T, K = keyof T> = Record<string, (props: HeaderContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-header`, (props: HeaderContext<T, unknown>) => any>;
+type DynamicCellSlots<T, K = keyof T> = Record<string, (props: CellContext<T, unknown>) => any> & Record<`${K extends string ? K : never}-cell`, (props: CellContext<T, unknown>) => any>;
+export type TableSlots<T extends TableData = TableData> = {
+    'expanded': (props: {
+        row: Row<T>;
+    }) => any;
+    'empty': (props?: {}) => any;
+    'loading': (props?: {}) => any;
+    'caption': (props?: {}) => any;
+    'body-top': (props?: {}) => any;
+    'body-bottom': (props?: {}) => any;
+} & DynamicHeaderSlots<T> & DynamicCellSlots<T>;
+declare const _default: <T extends TableData>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:globalFilter"?: ((value: string) => any) | undefined;
+        readonly "onUpdate:columnFilters"?: ((value: ColumnFiltersState) => any) | undefined;
+        readonly "onUpdate:columnOrder"?: ((value: ColumnOrderState) => any) | undefined;
+        readonly "onUpdate:columnVisibility"?: ((value: VisibilityState) => any) | undefined;
+        readonly "onUpdate:columnPinning"?: ((value: ColumnPinningState) => any) | undefined;
+        readonly "onUpdate:columnSizing"?: ((value: ColumnSizingState) => any) | undefined;
+        readonly "onUpdate:columnSizingInfo"?: ((value: ColumnSizingInfoState) => any) | undefined;
+        readonly "onUpdate:rowSelection"?: ((value: RowSelectionState) => any) | undefined;
+        readonly "onUpdate:rowPinning"?: ((value: RowPinningState) => any) | undefined;
+        readonly "onUpdate:sorting"?: ((value: SortingState) => any) | undefined;
+        readonly "onUpdate:grouping"?: ((value: GroupingState) => any) | undefined;
+        readonly "onUpdate:expanded"?: ((value: ExpandedState) => any) | undefined;
+        readonly "onUpdate:pagination"?: ((value: PaginationState) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:globalFilter" | "onUpdate:columnFilters" | "onUpdate:columnOrder" | "onUpdate:columnVisibility" | "onUpdate:columnPinning" | "onUpdate:columnSizing" | "onUpdate:columnSizingInfo" | "onUpdate:rowSelection" | "onUpdate:rowPinning" | "onUpdate:sorting" | "onUpdate:grouping" | "onUpdate:expanded" | "onUpdate:pagination"> & (TableProps<T> & {
+        globalFilter?: string;
+        columnFilters?: ColumnFiltersState;
+        columnOrder?: ColumnOrderState;
+        columnVisibility?: VisibilityState;
+        columnPinning?: ColumnPinningState;
+        columnSizing?: ColumnSizingState;
+        columnSizingInfo?: ColumnSizingInfoState;
+        rowSelection?: RowSelectionState;
+        rowPinning?: RowPinningState;
+        sorting?: SortingState;
+        grouping?: GroupingState;
+        expanded?: ExpandedState;
+        pagination?: PaginationState;
+    }) & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{
+        tableRef: Ref<HTMLTableElement | null, HTMLTableElement | null>;
+        tableApi: import("@tanstack/table-core").Table<T>;
+    }>): void;
+    attrs: any;
+    slots: TableSlots<T>;
+    emit: ((evt: "update:globalFilter", value: string) => void) & ((evt: "update:columnFilters", value: ColumnFiltersState) => void) & ((evt: "update:columnOrder", value: ColumnOrderState) => void) & ((evt: "update:columnVisibility", value: VisibilityState) => void) & ((evt: "update:columnPinning", value: ColumnPinningState) => void) & ((evt: "update:columnSizing", value: ColumnSizingState) => void) & ((evt: "update:columnSizingInfo", value: ColumnSizingInfoState) => void) & ((evt: "update:rowSelection", value: RowSelectionState) => void) & ((evt: "update:rowPinning", value: RowPinningState) => void) & ((evt: "update:sorting", value: SortingState) => void) & ((evt: "update:grouping", value: GroupingState) => void) & ((evt: "update:expanded", value: ExpandedState) => void) & ((evt: "update:pagination", value: PaginationState) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/Tabs.vue

@@ -0,0 +1,84 @@
+<script>
+import theme from "#build/ui/tabs";
+</script>
+
+<script setup>
+import { ref, computed } from "vue";
+import { TabsRoot, TabsList, TabsIndicator, TabsTrigger, TabsContent, useForwardPropsEmits } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { get } from "../utils";
+import { tv } from "../utils/tv";
+import UIcon from "./Icon.vue";
+import UAvatar from "./Avatar.vue";
+const props = defineProps({
+  as: { type: null, required: false },
+  items: { type: Array, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  orientation: { type: null, required: false, default: "horizontal" },
+  content: { type: Boolean, required: false, default: true },
+  labelKey: { type: String, required: false, default: "label" },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  defaultValue: { type: null, required: false, default: "0" },
+  modelValue: { type: null, required: false },
+  activationMode: { type: String, required: false },
+  unmountOnHide: { type: Boolean, required: false, default: true }
+});
+const emits = defineEmits(["update:modelValue"]);
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "orientation", "activationMode", "unmountOnHide"), emits);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.tabs || {} })({
+  color: props.color,
+  variant: props.variant,
+  size: props.size,
+  orientation: props.orientation
+}));
+const triggersRef = ref([]);
+defineExpose({
+  triggersRef
+});
+</script>
+
+<template>
+  <TabsRoot v-bind="rootProps" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <TabsList :class="ui.list({ class: props.ui?.list })">
+      <TabsIndicator :class="ui.indicator({ class: props.ui?.indicator })" />
+
+      <slot name="list-leading" />
+
+      <TabsTrigger
+        v-for="(item, index) of items"
+        :key="index"
+        :ref="(el) => triggersRef[index] = el"
+        :value="item.value || String(index)"
+        :disabled="item.disabled"
+        :class="ui.trigger({ class: [props.ui?.trigger, item.ui?.trigger] })"
+      >
+        <slot name="leading" :item="item" :index="index">
+          <UIcon v-if="item.icon" :name="item.icon" :class="ui.leadingIcon({ class: [props.ui?.leadingIcon, item.ui?.leadingIcon] })" />
+          <UAvatar v-else-if="item.avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="item.avatar" :class="ui.leadingAvatar({ class: [props.ui?.leadingAvatar, item.ui?.leadingAvatar] })" />
+        </slot>
+
+        <span v-if="get(item, props.labelKey) || !!slots.default" :class="ui.label({ class: [props.ui?.label, item.ui?.label] })">
+          <slot :item="item" :index="index">{{ get(item, props.labelKey) }}</slot>
+        </span>
+
+        <slot name="trailing" :item="item" :index="index" />
+      </TabsTrigger>
+
+      <slot name="list-trailing" />
+    </TabsList>
+
+    <template v-if="!!content">
+      <TabsContent v-for="(item, index) of items" :key="index" :value="item.value || String(index)" :class="ui.content({ class: [props.ui?.content, item.ui?.content, item.class] })">
+        <slot :name="item.slot || 'content'" :item="item" :index="index">
+          {{ item.content }}
+        </slot>
+      </TabsContent>
+    </template>
+  </TabsRoot>
+</template>

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

@@ -0,0 +1,93 @@
+import type { ComponentPublicInstance } from 'vue';
+import type { TabsRootProps, TabsRootEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/tabs';
+import type { AvatarProps } from '../types';
+import type { DynamicSlots, ComponentConfig } from '../types/utils';
+type Tabs = ComponentConfig<typeof theme, AppConfig, 'tabs'>;
+export interface TabsItem {
+    label?: string;
+    /**
+     * @IconifyIcon
+     */
+    icon?: string;
+    avatar?: AvatarProps;
+    slot?: string;
+    content?: string;
+    /** A unique value for the tab item. Defaults to the index. */
+    value?: string | number;
+    disabled?: boolean;
+    class?: any;
+    ui?: Pick<Tabs['slots'], 'trigger' | 'leadingIcon' | 'leadingAvatar' | 'label' | 'content'>;
+    [key: string]: any;
+}
+export interface TabsProps<T extends TabsItem = TabsItem> extends Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode' | 'unmountOnHide'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    items?: T[];
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: Tabs['variants']['color'];
+    /**
+     * @defaultValue 'pill'
+     */
+    variant?: Tabs['variants']['variant'];
+    /**
+     * @defaultValue 'md'
+     */
+    size?: Tabs['variants']['size'];
+    /**
+     * The orientation of the tabs.
+     * @defaultValue 'horizontal'
+     */
+    orientation?: TabsRootProps['orientation'];
+    /**
+     * The content of the tabs, can be disabled to prevent rendering the content.
+     * @defaultValue true
+     */
+    content?: boolean;
+    /**
+     * The key used to get the label from the item.
+     * @defaultValue 'label'
+     */
+    labelKey?: string;
+    class?: any;
+    ui?: Tabs['slots'];
+}
+export interface TabsEmits extends TabsRootEmits<string | number> {
+}
+type SlotProps<T extends TabsItem> = (props: {
+    item: T;
+    index: number;
+}) => any;
+export type TabsSlots<T extends TabsItem = TabsItem> = {
+    'leading': SlotProps<T>;
+    'default': SlotProps<T>;
+    'trailing': SlotProps<T>;
+    'content': SlotProps<T>;
+    'list-leading': (props?: {}) => any;
+    'list-trailing': (props?: {}) => any;
+} & DynamicSlots<T, undefined, {
+    index: number;
+}>;
+declare const _default: <T extends TabsItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:modelValue"?: ((payload: string | number) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & TabsProps<T> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{
+        triggersRef: import("vue").Ref<ComponentPublicInstance[], ComponentPublicInstance[]>;
+    }>): void;
+    attrs: any;
+    slots: TabsSlots<T>;
+    emit: (evt: "update:modelValue", payload: string | number) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/Textarea.vue

@@ -0,0 +1,169 @@
+<script>
+import theme from "#build/ui/textarea";
+</script>
+
+<script setup>
+import { ref, computed, onMounted, nextTick, watch } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { useComponentIcons } from "../composables/useComponentIcons";
+import { useFormField } from "../composables/useFormField";
+import { looseToNumber } from "../utils";
+import { tv } from "../utils/tv";
+import UIcon from "./Icon.vue";
+import UAvatar from "./Avatar.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  id: { type: String, required: false },
+  name: { type: String, required: false },
+  placeholder: { type: String, required: false },
+  color: { type: null, required: false },
+  variant: { type: null, required: false },
+  size: { type: null, required: false },
+  required: { type: Boolean, required: false },
+  autofocus: { type: Boolean, required: false },
+  autofocusDelay: { type: Number, required: false, default: 0 },
+  autoresize: { type: Boolean, required: false },
+  autoresizeDelay: { type: Number, required: false, default: 0 },
+  disabled: { type: Boolean, required: false },
+  rows: { type: Number, required: false, default: 3 },
+  maxrows: { type: Number, required: false, default: 0 },
+  highlight: { type: Boolean, required: false },
+  modelModifiers: { type: Object, required: false },
+  class: { type: null, required: false },
+  ui: { type: null, required: false },
+  icon: { type: String, required: false },
+  avatar: { type: Object, required: false },
+  leading: { type: Boolean, required: false },
+  leadingIcon: { type: String, required: false },
+  trailing: { type: Boolean, required: false },
+  trailingIcon: { type: String, required: false },
+  loading: { type: Boolean, required: false },
+  loadingIcon: { type: String, required: false }
+});
+const emits = defineEmits(["update:modelValue", "blur", "change"]);
+const slots = defineSlots();
+const [modelValue, modelModifiers] = defineModel({ type: null });
+const appConfig = useAppConfig();
+const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField(props, { deferInputValidation: true });
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props);
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.ui?.textarea || {} })({
+  color: color.value,
+  variant: props.variant,
+  size: size?.value,
+  loading: props.loading,
+  highlight: highlight.value,
+  autoresize: props.autoresize,
+  leading: isLeading.value || !!props.avatar || !!slots.leading,
+  trailing: isTrailing.value || !!slots.trailing
+}));
+const textareaRef = ref(null);
+function updateInput(value) {
+  if (modelModifiers.trim) {
+    value = value?.trim() ?? null;
+  }
+  if (modelModifiers.number) {
+    value = looseToNumber(value);
+  }
+  if (modelModifiers.nullify) {
+    value ||= null;
+  }
+  modelValue.value = value;
+  emitFormInput();
+}
+function onInput(event) {
+  autoResize();
+  if (!modelModifiers.lazy) {
+    updateInput(event.target.value);
+  }
+}
+function onChange(event) {
+  const value = event.target.value;
+  if (modelModifiers.lazy) {
+    updateInput(value);
+  }
+  if (modelModifiers.trim) {
+    event.target.value = value.trim();
+  }
+  emitFormChange();
+  emits("change", event);
+}
+function onBlur(event) {
+  emitFormBlur();
+  emits("blur", event);
+}
+function autoFocus() {
+  if (props.autofocus) {
+    textareaRef.value?.focus();
+  }
+}
+function autoResize() {
+  if (props.autoresize && textareaRef.value) {
+    textareaRef.value.rows = props.rows;
+    const overflow = textareaRef.value.style.overflow;
+    textareaRef.value.style.overflow = "hidden";
+    const styles = window.getComputedStyle(textareaRef.value);
+    const paddingTop = Number.parseInt(styles.paddingTop);
+    const paddingBottom = Number.parseInt(styles.paddingBottom);
+    const padding = paddingTop + paddingBottom;
+    const lineHeight = Number.parseInt(styles.lineHeight);
+    const { scrollHeight } = textareaRef.value;
+    const newRows = (scrollHeight - padding) / lineHeight;
+    if (newRows > props.rows) {
+      textareaRef.value.rows = props.maxrows ? Math.min(newRows, props.maxrows) : newRows;
+    }
+    textareaRef.value.style.overflow = overflow;
+  }
+}
+watch(modelValue, () => {
+  nextTick(autoResize);
+});
+onMounted(() => {
+  setTimeout(() => {
+    autoFocus();
+  }, props.autofocusDelay);
+  setTimeout(() => {
+    autoResize();
+  }, props.autoresizeDelay);
+});
+defineExpose({
+  textareaRef
+});
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <textarea
+      :id="id"
+      ref="textareaRef"
+      :value="modelValue"
+      :name="name"
+      :rows="rows"
+      :placeholder="placeholder"
+      :class="ui.base({ class: props.ui?.base })"
+      :disabled="disabled"
+      :required="required"
+      v-bind="{ ...$attrs, ...ariaAttrs }"
+      @input="onInput"
+      @blur="onBlur"
+      @change="onChange"
+      @focus="emitFormFocus"
+    />
+
+    <slot />
+
+    <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+      <slot name="leading">
+        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+        <UAvatar v-else-if="!!avatar" :size="props.ui?.leadingAvatarSize || ui.leadingAvatarSize()" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
+      </slot>
+    </span>
+
+    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+      <slot name="trailing">
+        <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+      </slot>
+    </span>
+  </Primitive>
+</template>

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

@@ -0,0 +1,78 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/ui/textarea';
+import type { UseComponentIconsProps } from '../composables/useComponentIcons';
+import type { ComponentConfig } from '../types/utils';
+type Textarea = ComponentConfig<typeof theme, AppConfig, 'textarea'>;
+type TextareaValue = string | number | null;
+export interface TextareaProps extends UseComponentIconsProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    id?: string;
+    name?: string;
+    /** The placeholder text when the textarea is empty. */
+    placeholder?: string;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: Textarea['variants']['color'];
+    /**
+     * @defaultValue 'outline'
+     */
+    variant?: Textarea['variants']['variant'];
+    /**
+     * @defaultValue 'md'
+     */
+    size?: Textarea['variants']['size'];
+    required?: boolean;
+    autofocus?: boolean;
+    autofocusDelay?: number;
+    autoresize?: boolean;
+    autoresizeDelay?: number;
+    disabled?: boolean;
+    rows?: number;
+    maxrows?: number;
+    /** Highlight the ring color like a focus state. */
+    highlight?: boolean;
+    modelModifiers?: {
+        string?: boolean;
+        trim?: boolean;
+        lazy?: boolean;
+        nullify?: boolean;
+    };
+    class?: any;
+    ui?: Textarea['slots'];
+}
+export interface TextareaEmits<T extends TextareaValue = TextareaValue> {
+    (e: 'update:modelValue', payload: T): void;
+    (e: 'blur', event: FocusEvent): void;
+    (e: 'change', event: Event): void;
+}
+export interface TextareaSlots {
+    leading(props?: {}): any;
+    default(props?: {}): any;
+    trailing(props?: {}): any;
+}
+declare const _default: <T extends TextareaValue>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onBlur?: ((event: FocusEvent) => any) | undefined;
+        readonly onChange?: ((event: Event) => any) | undefined;
+        readonly "onUpdate:modelValue"?: ((payload: T) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onBlur" | "onChange" | "onUpdate:modelValue"> & (TextareaProps & {
+        modelValue?: T;
+    }) & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{
+        textareaRef: import("vue").Ref<HTMLTextAreaElement | null, HTMLTextAreaElement | null>;
+    }>): void;
+    attrs: any;
+    slots: TextareaSlots;
+    emit: TextareaEmits<T> & ((evt: "update:modelValue", value: T | undefined) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};