@brumaombra/ui-vintage 0.7.8 → 0.7.10

package/src/components/ui/slider/index.ts

@@ -1 +1 @@
-export { default as Slider } from "./Slider.vue"
+export { default as Slider } from './Slider.vue';

package/src/components/ui/switch/Switch.vue

@@ -1,30 +1,33 @@
 <script setup lang="ts">
-import type { SwitchRootEmits, SwitchRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  SwitchRoot,
-  SwitchThumb,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "../../../lib/utils"
+import type { SwitchRootEmits, SwitchRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { SwitchRoot, SwitchThumb, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<SwitchRootProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<SwitchRootProps & {
+    class?: HTMLAttributes['class'];
+}>();
 
-const emits = defineEmits<SwitchRootEmits>()
+// Emits
+const emits = defineEmits<SwitchRootEmits>();
 
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+const delegatedProps = reactiveOmit(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <SwitchRoot v-slot="slotProps" data-slot="switch" v-bind="forwarded" :class="cn(
-    'peer relative inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded border border-(--border-light) bg-(--button-secondary-light) transition-all duration-200 outline-none focus-visible:border-(--border-hover-light) focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-60 data-[state=checked]:border-(--button-primary-light) data-[state=checked]:bg-(--bg-selected-light) dark:border-(--border-dark) dark:bg-(--button-secondary-dark) dark:focus-visible:border-(--border-hover-dark) dark:data-[state=checked]:border-(--button-primary-dark) dark:data-[state=checked]:bg-(--bg-selected-dark)',
-    props.class,
-  )">
-    <SwitchThumb data-slot="switch-thumb" :class="cn('pointer-events-none absolute left-[4px] top-1/2 block h-4 w-4 -translate-y-1/2 rounded-[0.2rem] bg-(--text-secondary-light) ring-0 transition-all duration-200 data-[state=checked]:translate-x-6 data-[state=checked]:bg-(--button-primary-light) dark:bg-(--text-secondary-dark) dark:data-[state=checked]:bg-(--button-primary-dark)')">
-      <slot name="thumb" v-bind="slotProps" />
-    </SwitchThumb>
-  </SwitchRoot>
-</template>
+    <SwitchRoot v-slot="slotProps" data-slot="switch" v-bind="forwarded" :class="cn(
+        'peer relative inline-flex h-7 w-12 shrink-0 cursor-pointer items-center rounded border border-(--border-light) bg-(--button-secondary-light) transition-all duration-200 outline-none focus-visible:border-(--border-hover-light) focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-60 data-[state=checked]:border-(--button-primary-light) data-[state=checked]:bg-(--bg-selected-light) dark:border-(--border-dark) dark:bg-(--button-secondary-dark) dark:focus-visible:border-(--border-hover-dark) dark:data-[state=checked]:border-(--button-primary-dark) dark:data-[state=checked]:bg-(--bg-selected-dark)',
+        props.class
+    )
+        ">
+        <SwitchThumb data-slot="switch-thumb" :class="cn(
+            'pointer-events-none absolute left-1 top-1/2 block h-4 w-4 -translate-y-1/2 rounded-[0.2rem] bg-(--text-secondary-light) ring-0 transition-all duration-200 data-[state=checked]:translate-x-6 data-[state=checked]:bg-(--button-primary-light) dark:bg-(--text-secondary-dark) dark:data-[state=checked]:bg-(--button-primary-dark)'
+        )
+            ">
+            <slot name="thumb" v-bind="slotProps" />
+        </SwitchThumb>
+    </SwitchRoot>
+</template>

package/src/components/ui/switch/index.ts

@@ -1 +1 @@
-export { default as Switch } from "./Switch.vue"
+export { default as Switch } from './Switch.vue';

package/src/components/ui/table/Table.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <div data-slot="table-container" class="relative w-full overflow-auto">
-    <table data-slot="table" :class="cn('w-full caption-bottom text-sm', props.class)">
-      <slot />
-    </table>
-  </div>
-</template>
+    <div data-slot="table-container" class="relative w-full overflow-auto">
+        <table data-slot="table" :class="cn('w-full caption-bottom text-sm', props.class)">
+            <slot />
+        </table>
+    </div>
+</template>

package/src/components/ui/table/TableBody.vue

@@ -1,17 +1,15 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <tbody
-    data-slot="table-body"
-    :class="cn('[&_tr:last-child]:border-0', props.class)"
-  >
-    <slot />
-  </tbody>
-</template>
+    <tbody data-slot="table-body" :class="cn('[&_tr:last-child]:border-0', props.class)">
+        <slot />
+    </tbody>
+</template>

package/src/components/ui/table/TableCaption.vue

@@ -1,17 +1,15 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <caption
-    data-slot="table-caption"
-    :class="cn('text-muted-foreground mt-4 text-sm', props.class)"
-  >
-    <slot />
-  </caption>
-</template>
+    <caption data-slot="table-caption" :class="cn('text-muted-foreground mt-4 text-sm', props.class)">
+        <slot />
+    </caption>
+</template>

package/src/components/ui/table/TableCell.vue

@@ -1,22 +1,19 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <td
-    data-slot="table-cell"
-    :class="
-      cn(
-        'px-2 py-3 max-w-[300px] text-xs md:text-sm align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </td>
-</template>
+    <td data-slot="table-cell" :class="cn(
+        'px-2 py-3 max-w-75 text-xs md:text-sm align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5',
+        props.class
+    )
+        ">
+        <slot />
+    </td>
+</template>

package/src/components/ui/table/TableEmpty.vue

@@ -1,34 +1,31 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { cn } from "../../../lib/utils"
-import TableCell from "./TableCell.vue"
-import TableRow from "./TableRow.vue"
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { cn } from '../../../lib/utils';
+import TableCell from './TableCell.vue';
+import TableRow from './TableRow.vue';
 
+// Props
 const props = withDefaults(defineProps<{
-  class?: HTMLAttributes["class"]
-  colspan?: number
+    class?: HTMLAttributes['class'];
+    colspan?: number;
 }>(), {
-  colspan: 1,
-})
+    colspan: 1
+});
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-  <TableRow>
-    <TableCell
-      :class="
-        cn(
-          'p-4 whitespace-nowrap align-middle text-sm text-foreground',
-          props.class,
+    <TableRow>
+        <TableCell :class="cn(
+            'p-4 whitespace-nowrap align-middle text-sm text-foreground',
+            props.class
         )
-      "
-      v-bind="delegatedProps"
-    >
-      <div class="flex items-center justify-center py-10">
-        <slot />
-      </div>
-    </TableCell>
-  </TableRow>
-</template>
+            " v-bind="delegatedProps">
+            <div class="flex items-center justify-center py-10">
+                <slot />
+            </div>
+        </TableCell>
+    </TableRow>
+</template>

package/src/components/ui/table/TableFooter.vue

@@ -1,17 +1,19 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <tfoot
-    data-slot="table-footer"
-    :class="cn('bg-muted/50 border-t border-border font-semibold [&>tr]:last:border-b-0', props.class)"
-  >
-    <slot />
-  </tfoot>
-</template>
+    <tfoot data-slot="table-footer" :class="cn(
+        'bg-muted/50 border-t border-border font-semibold [&>tr]:last:border-b-0',
+        props.class
+    )
+        ">
+        <slot />
+    </tfoot>
+</template>

package/src/components/ui/table/TableHead.vue

@@ -1,17 +1,19 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <th
-    data-slot="table-head"
-    :class="cn('text-foreground h-10 px-2 max-w-[300px] text-left align-middle font-semibold whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class)"
-  >
-    <slot />
-  </th>
-</template>
+    <th data-slot="table-head" :class="cn(
+        'text-foreground h-10 px-2 max-w-75 text-left align-middle font-semibold whitespace-nowrap [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-0.5',
+        props.class
+    )
+        ">
+        <slot />
+    </th>
+</template>

package/src/components/ui/table/TableHeader.vue

@@ -1,17 +1,15 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <thead
-    data-slot="table-header"
-    :class="cn('[&_tr]:border-b [&_tr]:border-border', props.class)"
-  >
-    <slot />
-  </thead>
-</template>
+    <thead data-slot="table-header" :class="cn('[&_tr]:border-b [&_tr]:border-border', props.class)">
+        <slot />
+    </thead>
+</template>

package/src/components/ui/table/TableRow.vue

@@ -1,17 +1,19 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <tr
-    data-slot="table-row"
-    :class="cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b border-border transition-colors', props.class)"
-  >
-    <slot />
-  </tr>
-</template>
+    <tr data-slot="table-row" :class="cn(
+        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b border-border transition-colors',
+        props.class
+    )
+        ">
+        <slot />
+    </tr>
+</template>

package/src/components/ui/table/index.ts

@@ -1,9 +1,9 @@
-export { default as Table } from "./Table.vue"
-export { default as TableBody } from "./TableBody.vue"
-export { default as TableCaption } from "./TableCaption.vue"
-export { default as TableCell } from "./TableCell.vue"
-export { default as TableEmpty } from "./TableEmpty.vue"
-export { default as TableFooter } from "./TableFooter.vue"
-export { default as TableHead } from "./TableHead.vue"
-export { default as TableHeader } from "./TableHeader.vue"
-export { default as TableRow } from "./TableRow.vue"
+export { default as Table } from './Table.vue';
+export { default as TableBody } from './TableBody.vue';
+export { default as TableCaption } from './TableCaption.vue';
+export { default as TableCell } from './TableCell.vue';
+export { default as TableEmpty } from './TableEmpty.vue';
+export { default as TableFooter } from './TableFooter.vue';
+export { default as TableHead } from './TableHead.vue';
+export { default as TableHeader } from './TableHeader.vue';
+export { default as TableRow } from './TableRow.vue';

package/src/components/ui/tabs/Tabs.vue

@@ -1,24 +1,24 @@
 <script setup lang="ts">
-import type { TabsRootEmits, TabsRootProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { TabsRoot, useForwardPropsEmits } from "reka-ui"
-import { cn } from "../../../lib/utils"
+import type { TabsRootEmits, TabsRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { TabsRoot, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<TabsRootProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<TabsRootEmits>()
+// Props
+const props = defineProps<TabsRootProps & {
+    class?: HTMLAttributes['class'];
+}>();
 
-const delegatedProps = reactiveOmit(props, "class")
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+// Emits
+const emits = defineEmits<TabsRootEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <TabsRoot
-    v-slot="slotProps"
-    data-slot="tabs"
-    v-bind="forwarded"
-    :class="cn('flex flex-col gap-2', props.class)"
-  >
-    <slot v-bind="slotProps" />
-  </TabsRoot>
-</template>
+    <TabsRoot v-slot="slotProps" data-slot="tabs" v-bind="forwarded" :class="cn('flex flex-col gap-2', props.class)">
+        <slot v-bind="slotProps" />
+    </TabsRoot>
+</template>

package/src/components/ui/tabs/TabsContent.vue

@@ -1,21 +1,20 @@
 <script setup lang="ts">
-import type { TabsContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { TabsContent } from "reka-ui"
-import { cn } from "../../../lib/utils"
+import type { TabsContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { TabsContent } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<TabsContentProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<TabsContentProps & {
+    class?: HTMLAttributes['class'];
+}>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-  <TabsContent
-    data-slot="tabs-content"
-    :class="cn('flex-1 outline-none', props.class)"
-    v-bind="delegatedProps"
-  >
-    <slot />
-  </TabsContent>
-</template>
+    <TabsContent data-slot="tabs-content" :class="cn('flex-1 outline-none', props.class)" v-bind="delegatedProps">
+        <slot />
+    </TabsContent>
+</template>

package/src/components/ui/tabs/TabsList.vue

@@ -1,24 +1,24 @@
 <script setup lang="ts">
-import type { TabsListProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { TabsList } from "reka-ui"
-import { cn } from "../../../lib/utils"
+import type { TabsListProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { TabsList } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<TabsListProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<TabsListProps & {
+    class?: HTMLAttributes['class'];
+}>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-  <TabsList
-    data-slot="tabs-list"
-    v-bind="delegatedProps"
-    :class="cn(
-      'inline-flex h-auto w-fit items-center justify-center gap-1 rounded border border-border bg-card p-1 text-card-foreground transition-colors duration-300 ease-in-out',
-      props.class,
-    )"
-  >
-    <slot />
-  </TabsList>
-</template>
+    <TabsList data-slot="tabs-list" v-bind="delegatedProps" :class="cn(
+        'inline-flex h-auto w-fit items-center justify-center gap-1 rounded border border-border bg-card p-1 text-card-foreground transition-colors duration-300 ease-in-out',
+        props.class
+    )
+        ">
+        <slot />
+    </TabsList>
+</template>

package/src/components/ui/tabs/TabsTrigger.vue

@@ -1,26 +1,25 @@
 <script setup lang="ts">
-import type { TabsTriggerProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { TabsTrigger, useForwardProps } from "reka-ui"
-import { cn } from "../../../lib/utils"
+import type { TabsTriggerProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { TabsTrigger, useForwardProps } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<TabsTriggerProps & {
+    class?: HTMLAttributes['class'];
+}>();
 
-const delegatedProps = reactiveOmit(props, "class")
-
-const forwardedProps = useForwardProps(delegatedProps)
+const delegatedProps = reactiveOmit(props, 'class');
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <TabsTrigger
-    data-slot="tabs-trigger"
-    :class="cn(
-      'text-muted-foreground hover:text-foreground focus-visible:outline-none inline-flex min-h-9 flex-1 cursor-pointer items-center justify-center gap-1.5 rounded border border-transparent bg-transparent px-4 py-2 text-sm font-semibold whitespace-nowrap transition-colors duration-300 ease-in-out disabled:pointer-events-none disabled:opacity-50 data-[state=active]:cursor-pointer data-[state=active]:border-(--button-primary-light) data-[state=active]:bg-gray-50 data-[state=active]:text-(--button-primary-light) data-[state=active]:font-semibold data-[state=active]:outline-1 data-[state=active]:outline-border data-[state=active]:outline-offset-0 data-[state=active]:shadow-none dark:data-[state=active]:border-(--button-primary-dark) dark:data-[state=active]:bg-(--bg-card-dark) dark:data-[state=active]:text-(--button-primary-dark) [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
-      props.class,
-    )"
-    v-bind="forwardedProps"
-  >
-    <slot />
-  </TabsTrigger>
-</template>
+    <TabsTrigger data-slot="tabs-trigger" :class="cn(
+        'text-muted-foreground hover:text-foreground focus-visible:outline-none inline-flex min-h-9 flex-1 cursor-pointer items-center justify-center gap-1.5 rounded border border-transparent bg-transparent px-4 py-2 text-sm font-semibold whitespace-nowrap transition-colors duration-300 ease-in-out disabled:pointer-events-none disabled:opacity-50 data-[state=active]:cursor-pointer data-[state=active]:border-(--button-primary-light) data-[state=active]:bg-gray-50 data-[state=active]:text-(--button-primary-light) data-[state=active]:font-semibold data-[state=active]:outline-1 data-[state=active]:outline-border data-[state=active]:outline-offset-0 data-[state=active]:shadow-none dark:data-[state=active]:border-(--button-primary-dark) dark:data-[state=active]:bg-(--bg-card-dark) dark:data-[state=active]:text-(--button-primary-dark) [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        props.class
+    )
+        " v-bind="forwardedProps">
+        <slot />
+    </TabsTrigger>
+</template>

package/src/components/ui/tabs/index.ts

@@ -1,4 +1,4 @@
-export { default as Tabs } from "./Tabs.vue"
-export { default as TabsContent } from "./TabsContent.vue"
-export { default as TabsList } from "./TabsList.vue"
-export { default as TabsTrigger } from "./TabsTrigger.vue"
+export { default as Tabs } from './Tabs.vue';
+export { default as TabsContent } from './TabsContent.vue';
+export { default as TabsList } from './TabsList.vue';
+export { default as TabsTrigger } from './TabsTrigger.vue';

package/src/components/ui/textarea/Textarea.vue

@@ -1,29 +1,32 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { useVModel } from "@vueuse/core"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { useVModel } from '@vueuse/core';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-  defaultValue?: string | number
-  modelValue?: string | number
-}>()
+    class?: HTMLAttributes['class'];
+    defaultValue?: string | number;
+    modelValue?: string | number;
+}>();
 
+// Emits
 const emits = defineEmits<{
-  (e: "update:modelValue", payload: string | number): void
-}>()
+    (e: 'update:modelValue', payload: string | number): void;
+}>();
 
-const modelValue = useVModel(props, "modelValue", emits, {
-  passive: true,
-  defaultValue: props.defaultValue,
-})
+const modelValue = useVModel(props, 'modelValue', emits, {
+    passive: true,
+    defaultValue: props.defaultValue
+});
 </script>
 
 <template>
-  <textarea v-model="modelValue" data-slot="textarea" :class="cn(
-    'selection:bg-primary selection:text-primary-foreground flex field-sizing-content min-h-[120px] w-full min-w-0 rounded border border-(--border-light) bg-(--button-secondary-light) px-4 py-3 text-xs font-semibold text-(--text-primary-light) outline-none transition-all duration-300 ease-in-out placeholder:text-(--text-secondary-light) placeholder:opacity-60 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60 dark:border-(--border-dark) dark:bg-(--button-secondary-dark) dark:text-(--text-primary-dark) dark:placeholder:text-(--text-secondary-dark) sm:text-sm',
-    'focus-visible:border-(--border-hover-light) focus-visible:ring-0 dark:focus-visible:border-(--border-hover-dark)',
-    'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-    props.class,
-  )" />
-</template>
+    <textarea v-model="modelValue" data-slot="textarea" :class="cn(
+        'selection:bg-primary selection:text-primary-foreground flex field-sizing-content min-h-30 w-full min-w-0 rounded border border-(--border-light) bg-(--button-secondary-light) px-4 py-3 text-xs font-semibold text-(--text-primary-light) outline-none transition-all duration-300 ease-in-out placeholder:text-(--text-secondary-light) placeholder:opacity-60 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60 dark:border-(--border-dark) dark:bg-(--button-secondary-dark) dark:text-(--text-primary-dark) dark:placeholder:text-(--text-secondary-dark) sm:text-sm',
+        'focus-visible:border-(--border-hover-light) focus-visible:ring-0 dark:focus-visible:border-(--border-hover-dark)',
+        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+        props.class
+    )
+        " />
+</template>