@groupteknology/vuno 1.0.0 → 2.0.0

package/dist/runtime/app/components/FieldFile/internal/FileUpload/FileUpload.theme.js

@@ -0,0 +1,55 @@
+import { radiusByStep } from "#vuno/theme/shared";
+import { defineTheme } from "#vuno/utils/theme";
+export const fileUploadTheme = defineTheme("fileUpload", {
+  slots: {
+    name: "truncate text-vuno-body",
+    actions: "ms-auto flex shrink-0 items-center gap-1.5",
+    dropzone: "flex cursor-pointer items-center rounded-sm border border-vuno-border-strong bg-vuno-surface-1 text-vuno-muted transition-[background-color,border-color,color] focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-vuno-primary hover:border-vuno-primary hover:bg-vuno-surface-2 hover:text-vuno-body",
+    dropzoneActive: "border-vuno-primary bg-vuno-surface-2 text-vuno-body",
+    dropzoneDisabled: "cursor-not-allowed opacity-50",
+    fileIcon: "shrink-0 text-vuno-muted",
+    hint: "leading-snug",
+    item: "flex items-center gap-2 rounded-sm border border-vuno-border bg-vuno-surface p-1.5",
+    /*
+     * Los botones de cada archivo: quitar, y los de reordenar que
+     * `FieldFile` añade por el hueco. El radio estaba escrito a mano en
+     * los tres sitios, y por `ui` de instancia, así que no había forma
+     * de cambiarlo desde el proyecto. Ahora sale de aquí y el hueco lo
+     * reparte, de modo que los tres siguen pareciéndose entre sí.
+     */
+    itemAction: "rounded-sm",
+    list: "flex w-full flex-col gap-1.5",
+    preview: "shrink-0 rounded-sm object-cover",
+    root: "flex w-full flex-col gap-2",
+    size: "text-vuno-muted",
+    texts: "flex min-w-0 flex-col"
+  },
+  variants: {
+    /*
+     * **Sin zona de caída el control cambia de forma, no solo de
+     * comportamiento.** Antes `dropzone: false` apagaba los manejadores
+     * y dejaba el mismo recuadro de rayas: medido, idéntico píxel a
+     * píxel al de al lado. O sea un área que invita a soltar y no acepta
+     * nada, que es la peor manera de apagar algo. Ahora se encoge a una
+     * fila, que es lo que su propia documentación prometía para un
+     * formulario apretado.
+     */
+    dropzone: {
+      false: { dropzone: "w-full justify-start gap-2 border-solid bg-vuno-surface px-3 py-2", hint: "text-start" },
+      true: { dropzone: "min-h-24 w-full flex-col justify-center gap-2 border-dashed px-4 py-6", hint: "text-center font-medium text-vuno-body" }
+    },
+    layout: {
+      /** En rejilla manda la imagen: la lista pasa a columnas y el texto se va debajo. */
+      grid: { item: "flex-col items-start", list: "grid grid-cols-[repeat(auto-fill,minmax(8rem,1fr))] gap-2", preview: "h-24 w-full" },
+      list: { preview: "size-9" }
+    },
+    radius: radiusByStep("dropzone"),
+    size: {
+      xs: { name: "text-xs", fileIcon: "size-6", hint: "text-xs", icon: "size-6", size: "text-xs" },
+      sm: { name: "text-sm", fileIcon: "size-7", hint: "text-xs", icon: "size-7", size: "text-xs" },
+      md: { name: "text-sm", fileIcon: "size-8", hint: "text-sm", icon: "size-8", size: "text-xs" },
+      lg: { name: "text-base", fileIcon: "size-9", hint: "text-sm", icon: "size-9", size: "text-sm" },
+      xl: { name: "text-base", fileIcon: "size-10", hint: "text-base", icon: "size-10", size: "text-sm" }
+    }
+  }
+});

package/dist/runtime/app/components/FieldFile/internal/FileUpload/FileUpload.vue

@@ -0,0 +1,187 @@
+<script setup>
+import { computed, onBeforeUnmount, ref, watch } from "vue";
+import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
+import Button from "#vuno/components/Button/Button.vue";
+import Icon from "#vuno/components/Icon/Icon.vue";
+defineOptions({ name: "VunoFileUpload", inheritAttrs: false });
+const model = defineModel({ type: null, ...{ default: void 0 } });
+const props = defineProps({
+  name: { type: String, required: false, default: void 0 },
+  accept: { type: String, required: false, default: void 0 },
+  disabled: { type: Boolean, required: false },
+  dropzone: { type: Boolean, required: false, default: true },
+  hint: { type: String, required: false, default: void 0 },
+  layout: { type: String, required: false, default: "list" },
+  multiple: { type: Boolean, required: false, default: true },
+  radius: { type: String, required: false, default: void 0 },
+  required: { type: Boolean, required: false },
+  size: { type: String, required: false, default: "md" },
+  ui: { type: Object, required: false, default: void 0 }
+});
+defineSlots();
+const icons = useIcons();
+const messages = useMessages();
+const ui = useTheme(
+  "fileUpload",
+  () => props.ui,
+  () => ({ dropzone: String(props.dropzone), layout: props.layout, radius: props.radius, size: props.size })
+);
+const inputRef = ref(null);
+const isDragging = ref(false);
+const previews = ref(/* @__PURE__ */ new Map());
+const files = computed(() => model.value ?? []);
+function releasePreviews(keep = []) {
+  for (const [file, url] of previews.value) {
+    if (keep.includes(file)) continue;
+    URL.revokeObjectURL(url);
+    previews.value.delete(file);
+  }
+}
+function formatSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  const units = ["KB", "MB", "GB"];
+  let value = bytes / 1024;
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit += 1;
+  }
+  return `${value.toFixed(value >= 10 || unit === 0 ? 0 : 1)} ${units[unit]}`;
+}
+function accepted(list) {
+  const next = [...list];
+  return props.multiple ? [...files.value, ...next] : next.slice(0, 1);
+}
+function onChange(event) {
+  const input = event.target;
+  if (!input.files || input.files.length === 0) return;
+  model.value = accepted(input.files);
+  input.value = "";
+}
+function removeFile(index) {
+  const next = [...files.value];
+  next.splice(index, 1);
+  model.value = next.length > 0 ? next : void 0;
+}
+function onDrop(event) {
+  isDragging.value = false;
+  if (props.disabled || !props.dropzone) return;
+  const dropped = event.dataTransfer?.files;
+  if (!dropped || dropped.length === 0) return;
+  model.value = accepted(dropped);
+}
+function onDragOver() {
+  if (props.disabled || !props.dropzone) return;
+  isDragging.value = true;
+}
+watch(
+  files,
+  (next) => {
+    releasePreviews(next);
+    for (const file of next) {
+      if (!file.type.startsWith("image/") || previews.value.has(file)) continue;
+      previews.value.set(file, URL.createObjectURL(file));
+    }
+  },
+  { immediate: true }
+);
+onBeforeUnmount(() => releasePreviews());
+defineExpose({ inputRef });
+</script>
+
+<template>
+    <div :class="ui.root">
+        <!--
+            La etiqueta envuelve al input, así que el clic en cualquier punto de
+            la zona abre el selector sin necesitar un manejador. `dragover` se
+            cancela siempre —también deshabilitado— porque lo que hace por
+            defecto el navegador es abrir el archivo y perder el formulario.
+        -->
+        <!--
+            La etiqueta **envuelve** al control en vez de apuntarlo con `for`:
+            el envoltorio de campo le pone su propio `id` al input, así que un
+            `for` escrito aquí señalaría a un elemento que ya no existe y el
+            clic dejaría de abrir el selector sin que nada fallara.
+        -->
+        <label
+            :class="[ui.dropzone, isDragging && ui.dropzoneActive, props.disabled && ui.dropzoneDisabled]"
+            @dragleave="isDragging = false"
+            @dragover.prevent="onDragOver"
+            @drop.prevent="onDrop"
+        >
+            <Icon
+                :class="ui.icon"
+                :name="icons.fileUpload"
+            />
+
+            <span
+                v-if="props.hint"
+                :class="ui.hint"
+                >{{ props.hint }}</span
+            >
+
+            <input
+                ref="inputRef"
+                v-bind="$attrs"
+                :accept="props.accept"
+                class="sr-only"
+                :disabled="props.disabled"
+                :multiple="props.multiple"
+                :name="props.name"
+                :required="props.required && files.length === 0"
+                type="file"
+                @change="onChange"
+            />
+        </label>
+
+        <ul
+            v-if="files.length > 0"
+            :class="ui.list"
+        >
+            <li
+                v-for="(file, index) in files"
+                :key="`${file.name}-${index}`"
+                :class="ui.item"
+            >
+                <img
+                    v-if="previews.get(file)"
+                    :alt="file.name"
+                    :class="ui.preview"
+                    :src="previews.get(file)"
+                />
+
+                <Icon
+                    v-else
+                    :class="ui.fileIcon"
+                    :name="icons.fileUpload"
+                />
+
+                <div :class="ui.texts">
+                    <span :class="ui.name">{{ file.name }}</span>
+                    <span :class="ui.size">{{ formatSize(file.size) }}</span>
+                </div>
+
+                <div :class="ui.actions">
+                    <slot
+                        :actionClass="ui.itemAction"
+                        :file="file"
+                        :index="index"
+                        name="fileTrailing"
+                        :removeFile="removeFile"
+                    />
+
+                    <Button
+                        :aria-label="`${messages.fileRemove} ${file.name}`"
+                        color="neutral"
+                        :disabled="props.disabled"
+                        :icon="icons.fileRemove"
+                        size="xs"
+                        :ui="{ base: ui.itemAction }"
+                        variant="soft"
+                        @click="removeFile(index)"
+                    />
+                </div>
+            </li>
+        </ul>
+    </div>
+</template>

package/dist/runtime/app/components/FieldFile/internal/FileUpload/FileUpload.vue.d.ts

@@ -0,0 +1,66 @@
+import type { VunoRadius, VunoSize } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /**
+     * Acciones extra por archivo: reordenar, previsualizar.
+     *
+     * Entrega `actionClass` porque lo que se añada aquí va al lado del
+     * botón de quitar y tiene que parecerse a él. Sin eso, quien use el
+     * hueco copia las clases, y una copia deja de seguir al tema en cuanto
+     * alguien cambia el original.
+     */
+    fileTrailing?: (props: {
+        actionClass: string | undefined;
+        file: File;
+        index: number;
+        removeFile: (index: number) => void;
+    }) => unknown;
+};
+type Props = {
+    name?: string;
+    /** Filtro del selector nativo: `image/*`, `.pdf`, ... */
+    accept?: string;
+    disabled?: boolean;
+    /** Admite soltar archivos encima, además del clic. */
+    dropzone?: boolean;
+    /** Texto de la zona de caída. Sin él solo se ve el icono. */
+    hint?: string;
+    /** En rejilla se ve la miniatura; en lista, el nombre y el tamaño. */
+    layout?: 'grid' | 'list';
+    multiple?: boolean;
+    /** La curvatura. Sin valor, la que traiga el tema. */
+    radius?: VunoRadius;
+    required?: boolean;
+    size?: VunoSize;
+    ui?: VunoUi<'fieldFile' | 'fileUpload'>;
+};
+type __VLS_ModelProps = {
+    modelValue?: File[] | null | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    inputRef: import("vue").Ref<HTMLInputElement | null, HTMLInputElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: File[] | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: File[] | null | undefined) => any) | undefined;
+}>, {
+    radius: VunoRadius;
+    size: VunoSize;
+    name: string;
+    dropzone: boolean;
+    hint: string;
+    layout: "grid" | "list";
+    ui: VunoUi<"fieldFile" | "fileUpload">;
+    accept: string;
+    multiple: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,24 @@
+import type { VunoFieldInput } from '#vuno/types/field';
+import type { VunoFieldInputType } from '#vuno/types/field-type';
+type __VLS_Props = Omit<VunoFieldInput, '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;
+}>, {
+    icon: string;
+    type: VunoFieldInputType;
+    ui: Partial<Record<"root" | ("icon" | "base"), string | string[] | undefined>>;
+    placeholder: string;
+    max: string;
+    min: string;
+    autocomplete: string;
+    autofocus: boolean;
+    maxlength: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

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

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

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

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

@@ -0,0 +1,61 @@
+<script setup>
+import { computed } from "vue";
+import { useField } from "#vuno/composables/useField";
+import { useTheme } from "#vuno/composables/useTheme";
+import FieldShell from "#vuno/components/internal/FieldShell/FieldShell.vue";
+import Input from "#vuno/components/internal/Input/Input.vue";
+defineOptions({ name: "VunoFieldInput" });
+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, default: void 0 },
+  autocomplete: { type: String, required: false, default: void 0 },
+  autofocus: { type: Boolean, required: false, default: false },
+  icon: { type: String, required: false, default: void 0 },
+  max: { type: String, required: false, default: void 0 },
+  maxlength: { type: Number, required: false, default: void 0 },
+  min: { type: String, required: false, default: void 0 },
+  placeholder: { type: String, required: false, default: void 0 },
+  type: { type: String, required: false, default: "text" }
+});
+const { value } = useField(() => props.name, model);
+const ui = useTheme("fieldInput", () => props.ui);
+const nativeType = computed(() => props.type === "phone" ? "tel" : props.type);
+const autocompleteDefaults = {
+  email: "email",
+  phone: "tel",
+  url: "url"
+};
+const autocomplete = computed(() => props.autocomplete ?? autocompleteDefaults[props.type]);
+</script>
+
+<template>
+    <FieldShell v-bind="props">
+        <template #default="control">
+            <Input
+                v-bind="control"
+                v-model="value"
+                :autocomplete="autocomplete"
+                :autofocus="props.autofocus"
+                :disabled="props.disabled"
+                :icon="props.icon"
+                :max="props.max"
+                :maxlength="props.maxlength"
+                :min="props.min"
+                :placeholder="props.placeholder"
+                :type="nativeType"
+                :ui="ui"
+            />
+        </template>
+    </FieldShell>
+</template>

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

@@ -0,0 +1,24 @@
+import type { VunoFieldInput } from '#vuno/types/field';
+import type { VunoFieldInputType } from '#vuno/types/field-type';
+type __VLS_Props = Omit<VunoFieldInput, '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;
+}>, {
+    icon: string;
+    type: VunoFieldInputType;
+    ui: Partial<Record<"root" | ("icon" | "base"), string | string[] | undefined>>;
+    placeholder: string;
+    max: string;
+    min: string;
+    autocomplete: string;
+    autofocus: boolean;
+    maxlength: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

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

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

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

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

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

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

@@ -0,0 +1,47 @@
+<script setup>
+import { useField } from "#vuno/composables/useField";
+import { useTheme } from "#vuno/composables/useTheme";
+import FieldShell from "#vuno/components/internal/FieldShell/FieldShell.vue";
+import NumberInput from "#vuno/components/internal/NumberInput/NumberInput.vue";
+defineOptions({ name: "VunoFieldNumber" });
+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 },
+  controlsOrientation: { type: String, required: false },
+  max: { type: Number, required: false },
+  min: { type: Number, required: false },
+  placeholder: { type: String, required: false },
+  step: { type: Number, required: false }
+});
+const { value } = useField(() => props.name, model);
+const ui = useTheme("fieldNumber", () => props.ui);
+</script>
+
+<template>
+    <FieldShell v-bind="props">
+        <template #default="control">
+            <NumberInput
+                v-bind="control"
+                v-model="value"
+                :disabled="props.disabled"
+                :max="props.max"
+                :min="props.min"
+                :orientation="props.controlsOrientation ?? 'horizontal'"
+                :placeholder="props.placeholder"
+                :step="props.step"
+                :ui="ui"
+            />
+        </template>
+    </FieldShell>
+</template>

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

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

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

@@ -0,0 +1,13 @@
+import type { VunoFieldPassword } from '#vuno/types/field';
+type __VLS_Props = Omit<VunoFieldPassword, '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/FieldPassword/FieldPassword.theme.d.ts

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

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

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

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

@@ -0,0 +1,62 @@
+<script setup>
+import { ref } from "vue";
+import { useField } from "#vuno/composables/useField";
+import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
+import Button from "#vuno/components/Button/Button.vue";
+import FieldShell from "#vuno/components/internal/FieldShell/FieldShell.vue";
+import Input from "#vuno/components/internal/Input/Input.vue";
+defineOptions({ name: "VunoFieldPassword" });
+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 },
+  autocomplete: { type: String, required: false },
+  autofocus: { type: Boolean, required: false },
+  placeholder: { type: String, required: false }
+});
+const { value } = useField(() => props.name, model);
+const icons = useIcons();
+const messages = useMessages();
+const ui = useTheme("fieldPassword", () => props.ui);
+const isVisible = ref(false);
+</script>
+
+<template>
+    <FieldShell v-bind="props">
+        <template #default="control">
+            <Input
+                v-bind="control"
+                v-model="value"
+                :autocomplete="props.autocomplete ?? 'current-password'"
+                :autofocus="props.autofocus"
+                :disabled="props.disabled"
+                :placeholder="props.placeholder"
+                :type="isVisible ? 'text' : 'password'"
+                :ui="ui"
+            >
+                <template #trailing>
+                    <Button
+                        :aria-label="isVisible ? messages.passwordHide : messages.passwordShow"
+                        :aria-pressed="isVisible"
+                        color="neutral"
+                        :disabled="props.disabled"
+                        :icon="isVisible ? icons.passwordHide : icons.passwordShow"
+                        size="sm"
+                        variant="link"
+                        @click="isVisible = !isVisible"
+                    />
+                </template>
+            </Input>
+        </template>
+    </FieldShell>
+</template>

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

@@ -0,0 +1,13 @@
+import type { VunoFieldPassword } from '#vuno/types/field';
+type __VLS_Props = Omit<VunoFieldPassword, '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/FieldRadio/FieldRadio.d.vue.ts

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

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

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

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

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