feat(Textarea): add resize-none class with autoresize prop

src/runtime/components/Textarea.vue

@@ -92,6 +92,7 @@ const ui = computed(() => textarea({
   size: size?.value,
   loading: props.loading,
   highlight: highlight.value,
+  autoresize: props.autoresize,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing
 }))

src/theme/textarea.ts

@@ -9,6 +9,11 @@ export default (options: Required<ModuleOptions>) => {
       trailing: 'absolute end-0 flex items-start'
     },
     variants: {
+      autoresize: {
+        true: {
+          base: 'resize-none'
+        }
+      },
       size: {
         xs: {
           leading: 'ps-2 inset-y-1',

test/components/Textarea.spec.ts

@@ -18,6 +18,7 @@ describe('Textarea', () => {
     ['with required', { props: { required: true } }],
     ['with disabled', { props: { disabled: true } }],
     ['with rows', { props: { rows: 5 } }],
+    ['with autoresize', { props: { autoresize: true } }],
     ['with icon', { props: { icon: 'i-lucide-search' } }],
     ['with leading and icon', { props: { leading: true, icon: 'i-lucide-arrow-left' } }],
     ['with leadingIcon', { props: { leadingIcon: 'i-lucide-arrow-left' } }],

test/components/__snapshots__/Textarea-vue.spec.ts.snap

@@ -14,6 +14,13 @@ exports[`Textarea > renders with as correctly 1`] = `
 </section>"
 `;
 
+exports[`Textarea > renders with autoresize correctly 1`] = `
+"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) resize-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)"></textarea>
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
 exports[`Textarea > renders with avatar and leadingIcon correctly 1`] = `
 "<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9"></textarea><span class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-(--ui-text-dimmed) size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span>
   <!--v-if-->

test/components/__snapshots__/Textarea.spec.ts.snap

@@ -14,6 +14,13 @@ exports[`Textarea > renders with as correctly 1`] = `
 </section>"
 `;
 
+exports[`Textarea > renders with autoresize correctly 1`] = `
+"<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) resize-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary)"></textarea>
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
 exports[`Textarea > renders with avatar and leadingIcon correctly 1`] = `
 "<div class="relative inline-flex items-center"><textarea rows="3" class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9"></textarea><span class="absolute start-0 flex items-start ps-2.5 inset-y-1.5"><span class="iconify i-lucide:arrow-left shrink-0 text-(--ui-text-dimmed) size-5" aria-hidden="true"></span></span>
   <!--v-if-->