@groupteknology/vuno 1.0.1 → 2.0.0

package/dist/runtime/app/components/FieldSwitch/FieldSwitch.theme.d.ts

@@ -0,0 +1,5 @@
+export declare const fieldSwitchTheme: Record<"fieldSwitch", {
+    readonly slots: {
+        readonly root: "";
+    };
+}>;

package/dist/runtime/app/components/FieldSwitch/FieldSwitch.theme.js

@@ -0,0 +1,2 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const fieldSwitchTheme = defineTheme("fieldSwitch", { slots: { root: "" } });

package/dist/runtime/app/components/FieldSwitch/FieldSwitch.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { useField } from "#vuno/composables/useField";
+import { useTheme } from "#vuno/composables/useTheme";
+import Switch from "#vuno/components/FieldSwitch/internal/Switch/Switch.vue";
+import FieldShell from "#vuno/components/internal/FieldShell/FieldShell.vue";
+defineOptions({ name: "VunoFieldSwitch" });
+const model = defineModel({ type: Boolean });
+const props = defineProps({
+  name: { type: String, required: false },
+  class: { type: String, required: false },
+  description: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  error: { type: String, required: false },
+  help: { type: String, required: false },
+  hint: { type: String, required: false },
+  label: { type: String, required: false },
+  orientation: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false }
+});
+const { value } = useField(() => props.name, model);
+const ui = useTheme("fieldSwitch", () => props.ui);
+</script>
+
+<template>
+    <FieldShell v-bind="props">
+        <template #default="control">
+            <Switch
+                v-bind="control"
+                v-model="value"
+                :disabled="props.disabled"
+                :ui="ui"
+            />
+        </template>
+    </FieldShell>
+</template>

package/dist/runtime/app/components/FieldSwitch/FieldSwitch.vue.d.ts

@@ -0,0 +1,13 @@
+import type { VunoFieldSwitch } from '#vuno/types/field';
+type __VLS_Props = Omit<VunoFieldSwitch, 'columns'>;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/{forms → FieldSwitch/internal/Switch}/Switch.d.vue.ts

@@ -1,8 +1,12 @@
-import type { VunoColor, VunoSize, VunoSlots } from '#vuno/types/base';
-type __VLS_Props = {
+import type { VunoColor, VunoRadius, VunoSize } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
+type __VLS_Props = Props;
+type Props = {
     color?: VunoColor;
+    /** La curvatura. Sin valor, la que traiga el tema. */
+    radius?: VunoRadius;
     size?: VunoSize;
-    ui?: VunoSlots;
+    ui?: VunoUi<'fieldSwitch' | 'switch'>;
 };
 type __VLS_ModelProps = {
     modelValue?: boolean | undefined;
@@ -14,8 +18,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
 }>, {
     color: VunoColor;
+    radius: VunoRadius;
     size: VunoSize;
-    ui: VunoSlots;
+    ui: VunoUi<"fieldSwitch" | "switch">;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/components/FieldSwitch/internal/Switch/Switch.theme.d.ts

@@ -0,0 +1,39 @@
+/**
+ * El interruptor. La pista es el propio `<input>` y el círculo un hermano
+ * que se desplaza con `peer-checked`, así que el recorrido de cada tamaño
+ * es el ancho menos el círculo menos sus dos márgenes: con otro número el
+ * círculo se sale o se queda corto, y no hay forma de deducirlo leyendo.
+ */
+export declare const switchTheme: Record<"switch", {
+    readonly slots: {
+        readonly base: "peer absolute inset-0 m-0 size-full cursor-pointer appearance-none rounded-full border border-vuno-border-strong bg-vuno-surface-2 transition-[background-color,border-color] checked:border-(--vuno-accent) checked:bg-(--vuno-accent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--vuno-accent) enabled:hover:border-(--vuno-accent) disabled:cursor-not-allowed motion-reduce:transition-none";
+        readonly root: "relative inline-flex shrink-0 items-center transition-opacity has-disabled:opacity-50 motion-reduce:transition-none";
+        readonly thumb: "pointer-events-none absolute top-1/2 left-0.5 -translate-y-1/2 rounded-full bg-vuno-surface transition-transform peer-active:scale-90 peer-disabled:scale-100 motion-reduce:transition-none";
+    };
+    readonly variants: {
+        readonly color: Record<import("../../../../types/base.js").VunoColor, Record<"base", string>>;
+        readonly radius: Record<import("../../../../types/base.js").VunoRadius, Record<"base" | "thumb", string>>;
+        readonly size: {
+            readonly xs: {
+                readonly root: "h-3.5 w-6";
+                readonly thumb: "size-2.5 peer-checked:translate-x-2.5";
+            };
+            readonly sm: {
+                readonly root: "h-4 w-7";
+                readonly thumb: "size-3 peer-checked:translate-x-3";
+            };
+            readonly md: {
+                readonly root: "h-5 w-9";
+                readonly thumb: "size-4 peer-checked:translate-x-4";
+            };
+            readonly lg: {
+                readonly root: "h-6 w-11";
+                readonly thumb: "size-5 peer-checked:translate-x-5";
+            };
+            readonly xl: {
+                readonly root: "h-7 w-12";
+                readonly thumb: "size-6 peer-checked:translate-x-5";
+            };
+        };
+    };
+}>;

package/dist/runtime/app/components/FieldSwitch/internal/Switch/Switch.theme.js

@@ -0,0 +1,20 @@
+import { accentByColor, radiusByStep } from "#vuno/theme/shared";
+import { defineTheme } from "#vuno/utils/theme";
+export const switchTheme = defineTheme("switch", {
+  slots: {
+    base: "peer absolute inset-0 m-0 size-full cursor-pointer appearance-none rounded-full border border-vuno-border-strong bg-vuno-surface-2 transition-[background-color,border-color] checked:border-(--vuno-accent) checked:bg-(--vuno-accent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--vuno-accent) enabled:hover:border-(--vuno-accent) disabled:cursor-not-allowed motion-reduce:transition-none",
+    root: "relative inline-flex shrink-0 items-center transition-opacity has-disabled:opacity-50 motion-reduce:transition-none",
+    thumb: "pointer-events-none absolute top-1/2 left-0.5 -translate-y-1/2 rounded-full bg-vuno-surface transition-transform peer-active:scale-90 peer-disabled:scale-100 motion-reduce:transition-none"
+  },
+  variants: {
+    color: accentByColor("base"),
+    radius: radiusByStep("base", "thumb"),
+    size: {
+      xs: { root: "h-3.5 w-6", thumb: "size-2.5 peer-checked:translate-x-2.5" },
+      sm: { root: "h-4 w-7", thumb: "size-3 peer-checked:translate-x-3" },
+      md: { root: "h-5 w-9", thumb: "size-4 peer-checked:translate-x-4" },
+      lg: { root: "h-6 w-11", thumb: "size-5 peer-checked:translate-x-5" },
+      xl: { root: "h-7 w-12", thumb: "size-6 peer-checked:translate-x-5" }
+    }
+  }
+});

package/dist/runtime/app/components/{forms → FieldSwitch/internal/Switch}/Switch.vue

@@ -1,17 +1,19 @@
 <script setup>
 import { useTheme } from "#vuno/composables/useTheme";
-defineOptions({ inheritAttrs: false });
+defineOptions({ name: "VunoSwitch", inheritAttrs: false });
+const model = defineModel({ type: Boolean, skipCheck: true, ...{ default: void 0 } });
 const props = defineProps({
   color: { type: String, required: false, default: "primary" },
+  radius: { type: String, required: false, default: void 0 },
   size: { type: String, required: false, default: "md" },
   ui: { type: Object, required: false, default: void 0 }
 });
-const model = defineModel({ type: Boolean, skipCheck: true, ...{ default: void 0 } });
 const ui = useTheme(
   "switch",
   () => props.ui,
   () => ({
     color: props.color,
+    radius: props.radius,
     size: props.size
   })
 );

package/dist/runtime/app/components/{forms → FieldSwitch/internal/Switch}/Switch.vue.d.ts

@@ -1,8 +1,12 @@
-import type { VunoColor, VunoSize, VunoSlots } from '#vuno/types/base';
-type __VLS_Props = {
+import type { VunoColor, VunoRadius, VunoSize } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
+type __VLS_Props = Props;
+type Props = {
     color?: VunoColor;
+    /** La curvatura. Sin valor, la que traiga el tema. */
+    radius?: VunoRadius;
     size?: VunoSize;
-    ui?: VunoSlots;
+    ui?: VunoUi<'fieldSwitch' | 'switch'>;
 };
 type __VLS_ModelProps = {
     modelValue?: boolean | undefined;
@@ -14,8 +18,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
 }>, {
     color: VunoColor;
+    radius: VunoRadius;
     size: VunoSize;
-    ui: VunoSlots;
+    ui: VunoUi<"fieldSwitch" | "switch">;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/components/FieldTags/FieldTags.d.vue.ts

@@ -0,0 +1,13 @@
+import type { VunoFieldTags } from '#vuno/types/field';
+type __VLS_Props = Omit<VunoFieldTags, 'columns'>;
+type __VLS_ModelProps = {
+    modelValue?: string[] | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[] | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FieldTags/FieldTags.theme.d.ts

@@ -0,0 +1,5 @@
+export declare const fieldTagsTheme: Record<"fieldTags", {
+    readonly slots: {
+        readonly root: "w-full";
+    };
+}>;

package/dist/runtime/app/components/FieldTags/FieldTags.theme.js

@@ -0,0 +1,2 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const fieldTagsTheme = defineTheme("fieldTags", { slots: { root: "w-full" } });

package/dist/runtime/app/components/FieldTags/FieldTags.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { useField } from "#vuno/composables/useField";
+import { useTheme } from "#vuno/composables/useTheme";
+import TagsInput from "#vuno/components/FieldTags/internal/TagsInput/TagsInput.vue";
+import FieldShell from "#vuno/components/internal/FieldShell/FieldShell.vue";
+defineOptions({ name: "VunoFieldTags" });
+const model = defineModel({ type: null, ...{ default: void 0 } });
+const props = defineProps({
+  name: { type: String, required: false },
+  class: { type: String, required: false },
+  description: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  error: { type: String, required: false },
+  help: { type: String, required: false },
+  hint: { type: String, required: false },
+  label: { type: String, required: false },
+  orientation: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false },
+  max: { type: Number, required: false },
+  placeholder: { type: String, required: false }
+});
+const { value } = useField(() => props.name, model);
+const ui = useTheme("fieldTags", () => props.ui);
+</script>
+
+<template>
+    <FieldShell v-bind="props">
+        <template #default="control">
+            <TagsInput
+                v-bind="control"
+                v-model="value"
+                :disabled="props.disabled"
+                :max="props.max"
+                :placeholder="props.placeholder"
+                :ui="ui"
+            />
+        </template>
+    </FieldShell>
+</template>

package/dist/runtime/app/components/FieldTags/FieldTags.vue.d.ts

@@ -0,0 +1,13 @@
+import type { VunoFieldTags } from '#vuno/types/field';
+type __VLS_Props = Omit<VunoFieldTags, 'columns'>;
+type __VLS_ModelProps = {
+    modelValue?: string[] | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[] | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FieldTags/internal/TagsInput/TagsInput.d.vue.ts

@@ -0,0 +1,26 @@
+import type { VunoSize } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
+type __VLS_Props = Props;
+type Props = {
+    disabled?: boolean;
+    max?: number;
+    placeholder?: string;
+    size?: VunoSize;
+    ui?: VunoUi<'control' | 'tagsInput'>;
+};
+type __VLS_ModelProps = {
+    modelValue?: string[] | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[] | undefined) => any) | undefined;
+}>, {
+    size: VunoSize;
+    ui: VunoUi<"control" | "tagsInput">;
+    placeholder: string;
+    max: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FieldTags/internal/TagsInput/TagsInput.theme.d.ts

@@ -0,0 +1,34 @@
+export declare const tagsInputTheme: Record<"tagsInput", {
+    readonly slots: {
+        readonly content: "flex min-w-0 flex-1 flex-wrap items-center gap-1 py-1";
+        readonly input: "min-w-24 flex-1 bg-transparent outline-none placeholder:text-vuno-subtle disabled:cursor-not-allowed";
+        readonly remove: "inline-flex shrink-0 items-center justify-center rounded-sm text-vuno-muted transition-colors hover:text-vuno-body focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--vuno-accent) disabled:cursor-not-allowed";
+        readonly removeIcon: "size-3.5";
+        readonly tag: "inline-flex max-w-full items-center gap-0.5 rounded-sm bg-vuno-surface-2 px-1.5 text-vuno-body";
+        readonly tagLabel: "truncate";
+    };
+    readonly variants: {
+        readonly size: {
+            readonly xs: {
+                readonly input: "text-xs";
+                readonly tag: "text-xs";
+            };
+            readonly sm: {
+                readonly input: "text-sm";
+                readonly tag: "text-xs";
+            };
+            readonly md: {
+                readonly input: "text-sm";
+                readonly tag: "text-sm";
+            };
+            readonly lg: {
+                readonly input: "text-base";
+                readonly tag: "text-sm";
+            };
+            readonly xl: {
+                readonly input: "text-base";
+                readonly tag: "text-base";
+            };
+        };
+    };
+}>;

package/dist/runtime/app/components/FieldTags/internal/TagsInput/TagsInput.theme.js

@@ -0,0 +1,20 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const tagsInputTheme = defineTheme("tagsInput", {
+  slots: {
+    content: "flex min-w-0 flex-1 flex-wrap items-center gap-1 py-1",
+    input: "min-w-24 flex-1 bg-transparent outline-none placeholder:text-vuno-subtle disabled:cursor-not-allowed",
+    remove: "inline-flex shrink-0 items-center justify-center rounded-sm text-vuno-muted transition-colors hover:text-vuno-body focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--vuno-accent) disabled:cursor-not-allowed",
+    removeIcon: "size-3.5",
+    tag: "inline-flex max-w-full items-center gap-0.5 rounded-sm bg-vuno-surface-2 px-1.5 text-vuno-body",
+    tagLabel: "truncate"
+  },
+  variants: {
+    size: {
+      xs: { input: "text-xs", tag: "text-xs" },
+      sm: { input: "text-sm", tag: "text-xs" },
+      md: { input: "text-sm", tag: "text-sm" },
+      lg: { input: "text-base", tag: "text-sm" },
+      xl: { input: "text-base", tag: "text-base" }
+    }
+  }
+});

package/dist/runtime/app/components/FieldTags/internal/TagsInput/TagsInput.vue

@@ -0,0 +1,97 @@
+<script setup>
+import { computed, ref, useTemplateRef } from "vue";
+import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
+import Icon from "#vuno/components/Icon/Icon.vue";
+import ControlShell from "#vuno/components/internal/ControlShell/ControlShell.vue";
+defineOptions({ name: "VunoTagsInput", inheritAttrs: false });
+const model = defineModel({ type: null, ...{ default: void 0 } });
+const props = defineProps({
+  disabled: { type: Boolean, required: false },
+  max: { type: Number, required: false, default: void 0 },
+  placeholder: { type: String, required: false, default: void 0 },
+  size: { type: String, required: false, default: "md" },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const icons = useIcons();
+const messages = useMessages();
+const ui = useTheme(
+  "tagsInput",
+  () => props.ui,
+  () => ({ size: props.size })
+);
+const draft = ref("");
+const inputRef = useTemplateRef("input");
+const tags = computed(() => model.value ?? []);
+const canAdd = computed(() => props.max === void 0 || tags.value.length < props.max);
+function add() {
+  const tag = draft.value.trim();
+  draft.value = "";
+  if (!tag || !canAdd.value || tags.value.includes(tag)) return;
+  model.value = [...tags.value, tag];
+}
+function remove(index) {
+  if (props.disabled) return;
+  model.value = tags.value.filter((_, position) => position !== index);
+  inputRef.value?.focus();
+}
+function onInput(event) {
+  draft.value = event.target.value;
+}
+function onKeydown(event) {
+  if (event.isComposing) return;
+  if ((event.key === "Enter" || event.key === ",") && draft.value.trim()) {
+    event.preventDefault();
+    add();
+    return;
+  }
+  if (event.key === "Backspace" && !draft.value && tags.value.length > 0) {
+    event.preventDefault();
+    remove(tags.value.length - 1);
+  }
+}
+</script>
+
+<template>
+    <ControlShell
+        :size="props.size"
+        :ui="props.ui"
+    >
+        <div
+            :class="ui.content"
+            @click="inputRef?.focus()"
+        >
+            <span
+                v-for="(tag, index) in tags"
+                :key="tag"
+                :class="ui.tag"
+            >
+                <span :class="ui.tagLabel">{{ tag }}</span>
+
+                <button
+                    :aria-label="`${messages.removeItem}: ${tag}`"
+                    :class="ui.remove"
+                    :disabled="props.disabled"
+                    type="button"
+                    @click.stop="remove(index)"
+                >
+                    <Icon
+                        :class="ui.removeIcon"
+                        :name="icons.removeItem"
+                    />
+                </button>
+            </span>
+
+            <input
+                ref="input"
+                v-bind="$attrs"
+                :class="ui.input"
+                :disabled="props.disabled"
+                :placeholder="tags.length === 0 ? props.placeholder : void 0"
+                type="text"
+                :value="draft"
+                @input="onInput"
+                @keydown="onKeydown"
+            />
+        </div>
+    </ControlShell>
+</template>

package/dist/runtime/app/components/FieldTags/internal/TagsInput/TagsInput.vue.d.ts

@@ -0,0 +1,26 @@
+import type { VunoSize } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
+type __VLS_Props = Props;
+type Props = {
+    disabled?: boolean;
+    max?: number;
+    placeholder?: string;
+    size?: VunoSize;
+    ui?: VunoUi<'control' | 'tagsInput'>;
+};
+type __VLS_ModelProps = {
+    modelValue?: string[] | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string[] | undefined) => any) | undefined;
+}>, {
+    size: VunoSize;
+    ui: VunoUi<"control" | "tagsInput">;
+    placeholder: string;
+    max: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/{forms/fields → FieldTextarea}/FieldTextarea.d.vue.ts

@@ -10,8 +10,16 @@ import type { VunoFieldTextarea } from '#vuno/types/field';
  * `multiple` y `dropzone` en el campo de archivo, y por eso se arregla
  * igual.
  */
-type __VLS_Props = Omit<VunoFieldTextarea, 'class' | 'columns'>;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+type __VLS_Props = Omit<VunoFieldTextarea, 'columns'>;
+type __VLS_ModelProps = {
+    modelValue?: string | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {
     autoresize: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/app/components/FieldTextarea/FieldTextarea.theme.d.ts

@@ -0,0 +1,5 @@
+export declare const fieldTextareaTheme: Record<"fieldTextarea", {
+    readonly slots: {
+        readonly root: "w-full";
+    };
+}>;

package/dist/runtime/app/components/FieldTextarea/FieldTextarea.theme.js

@@ -0,0 +1,2 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const fieldTextareaTheme = defineTheme("fieldTextarea", { slots: { root: "w-full" } });

package/dist/runtime/app/components/FieldTextarea/FieldTextarea.vue

@@ -0,0 +1,45 @@
+<script setup>
+import { useField } from "#vuno/composables/useField";
+import { useTheme } from "#vuno/composables/useTheme";
+import Textarea from "#vuno/components/FieldTextarea/internal/Textarea/Textarea.vue";
+import FieldShell from "#vuno/components/internal/FieldShell/FieldShell.vue";
+defineOptions({ name: "VunoFieldTextarea" });
+const model = defineModel({ type: null, ...{ default: void 0 } });
+const props = defineProps({
+  name: { type: String, required: false },
+  class: { type: String, required: false },
+  description: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  error: { type: String, required: false },
+  help: { type: String, required: false },
+  hint: { type: String, required: false },
+  label: { type: String, required: false },
+  orientation: { type: String, required: false },
+  required: { type: Boolean, required: false },
+  size: { type: String, required: false },
+  ui: { type: Object, required: false },
+  autoresize: { type: Boolean, required: false, default: true },
+  maxrows: { type: Number, required: false },
+  placeholder: { type: String, required: false },
+  rows: { type: Number, required: false }
+});
+const { value } = useField(() => props.name, model);
+const ui = useTheme("fieldTextarea", () => props.ui);
+</script>
+
+<template>
+    <FieldShell v-bind="props">
+        <template #default="control">
+            <Textarea
+                v-bind="control"
+                v-model="value"
+                :autoresize="props.autoresize"
+                :disabled="props.disabled"
+                :maxrows="props.maxrows"
+                :placeholder="props.placeholder"
+                :rows="props.rows"
+                :ui="ui"
+            />
+        </template>
+    </FieldShell>
+</template>

package/dist/runtime/app/components/{forms/fields → FieldTextarea}/FieldTextarea.vue.d.ts

@@ -10,8 +10,16 @@ import type { VunoFieldTextarea } from '#vuno/types/field';
  * `multiple` y `dropzone` en el campo de archivo, y por eso se arregla
  * igual.
  */
-type __VLS_Props = Omit<VunoFieldTextarea, 'class' | 'columns'>;
-declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+type __VLS_Props = Omit<VunoFieldTextarea, 'columns'>;
+type __VLS_ModelProps = {
+    modelValue?: string | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {
     autoresize: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/app/components/{forms → FieldTextarea/internal/Textarea}/Textarea.d.vue.ts

@@ -1,12 +1,16 @@
-import type { VunoSize, VunoSlots } from '#vuno/types/base';
-type __VLS_Props = {
+import type { VunoRadius, VunoSize } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
+type __VLS_Props = Props;
+type Props = {
     /** Crece con el contenido en vez de enseñar su propia barra. */
     autoresize?: boolean;
     /** Tope al crecer, en filas. Sin él crece sin límite. */
     maxrows?: number;
+    /** La curvatura de la caja. Sin valor, la que traiga el tema. */
+    radius?: VunoRadius;
     rows?: number;
     size?: VunoSize;
-    ui?: VunoSlots;
+    ui?: VunoUi<'control' | 'textarea'>;
 };
 type __VLS_ModelProps = {
     modelValue?: string | undefined;
@@ -19,9 +23,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
 }>, {
+    radius: VunoRadius;
     size: VunoSize;
     autoresize: boolean;
-    ui: VunoSlots;
+    ui: VunoUi<"control" | "textarea">;
     maxrows: number;
     rows: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;