@groupteknology/vuno 1.0.0 → 2.0.0

package/dist/runtime/app/components/FieldCheckbox/internal/Checkbox/Checkbox.vue.d.ts

@@ -0,0 +1,40 @@
+import type { VunoColor, VunoRadius, VunoSize } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
+/**
+ * La casilla, nativa.
+ *
+ * Su raíz **es** el `<input>`, así que no apaga la herencia de atributos
+ * como hacen el input de texto o el área: lo que le llegue —el `id` y los
+ * `aria-*` del envoltorio de campo, el `name`, el `disabled`— cae en el
+ * elemento correcto sin reenviarlo a mano.
+ */
+type Props = {
+    color?: VunoColor;
+    /**
+     * Ni marcada ni sin marcar: la selección de una tabla donde solo
+     * hay algunas filas elegidas.
+     */
+    indeterminate?: boolean;
+    /** La curvatura. Sin valor, la que traiga el tema. */
+    radius?: VunoRadius;
+    size?: VunoSize;
+    ui?: VunoUi<'checkbox' | 'fieldCheckbox'>;
+};
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    modelValue?: boolean | 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: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
+}>, {
+    color: VunoColor;
+    radius: VunoRadius;
+    size: VunoSize;
+    ui: VunoUi<"checkbox" | "fieldCheckbox">;
+    indeterminate: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

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

@@ -0,0 +1,27 @@
+export declare const fieldColorTheme: Record<"fieldColor", {
+    readonly slots: {
+        readonly root: "flex w-full items-center gap-2";
+        readonly swatch: "relative flex shrink-0 cursor-pointer items-center justify-center rounded-sm border border-vuno-border-strong bg-vuno-surface p-1 transition-colors [--vuno-accent:var(--color-vuno-primary)] focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-(--vuno-accent) has-disabled:cursor-not-allowed has-disabled:opacity-50";
+        readonly swatchColor: "size-full rounded-sm";
+        readonly swatchInput: "absolute inset-0 cursor-pointer opacity-0";
+    };
+    readonly variants: {
+        readonly size: {
+            readonly xs: {
+                readonly swatch: "size-6";
+            };
+            readonly sm: {
+                readonly swatch: "size-7";
+            };
+            readonly md: {
+                readonly swatch: "size-8";
+            };
+            readonly lg: {
+                readonly swatch: "size-9";
+            };
+            readonly xl: {
+                readonly swatch: "size-10";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,18 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const fieldColorTheme = defineTheme("fieldColor", {
+  slots: {
+    root: "flex w-full items-center gap-2",
+    swatch: "relative flex shrink-0 cursor-pointer items-center justify-center rounded-sm border border-vuno-border-strong bg-vuno-surface p-1 transition-colors [--vuno-accent:var(--color-vuno-primary)] focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-(--vuno-accent) has-disabled:cursor-not-allowed has-disabled:opacity-50",
+    swatchColor: "size-full rounded-sm",
+    swatchInput: "absolute inset-0 cursor-pointer opacity-0"
+  },
+  variants: {
+    size: {
+      xs: { swatch: "size-6" },
+      sm: { swatch: "size-7" },
+      md: { swatch: "size-8" },
+      lg: { swatch: "size-9" },
+      xl: { swatch: "size-10" }
+    }
+  }
+});

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

@@ -0,0 +1,88 @@
+<script setup>
+import { computed } from "vue";
+import { useField } from "#vuno/composables/useField";
+import { useMessages, useTheme } from "#vuno/composables/useTheme";
+import { toHexColor } from "#vuno/utils/format";
+import FieldShell from "#vuno/components/internal/FieldShell/FieldShell.vue";
+import Input from "#vuno/components/internal/Input/Input.vue";
+defineOptions({ name: "VunoFieldColor", inheritAttrs: false });
+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 },
+  placeholder: { type: String, required: false }
+});
+const { value } = useField(() => props.name, model);
+const messages = useMessages();
+const ui = useTheme(
+  "fieldColor",
+  () => props.ui,
+  () => ({ size: props.size ?? "md" })
+);
+const picked = computed(() => toHexColor(value.value) ?? "#000000");
+function onPick(event) {
+  value.value = event.target.value;
+}
+</script>
+
+<template>
+    <FieldShell v-bind="props">
+        <template #default="control">
+            <div :class="ui.root">
+                <!--
+            El selector es el del sistema: trae su lupa para tomar un color de
+            la pantalla, su historial y su teclado, y en el móvil el de siempre.
+            Nada de eso lo íbamos a escribir mejor.
+
+            Lo que no trae es aspecto —un `<input type="color">` no se puede
+            estilar—, así que se pinta la muestra debajo y el control va encima,
+            transparente y ocupándola entera. La etiqueta envuelve a los dos
+            para que pulsar en cualquier punto abra el selector, y el anillo de
+            foco se pinta sobre la caja con `focus-within`, no sobre algo que no
+            se ve.
+        -->
+                <label :class="ui.swatch">
+                    <span
+                        :class="ui.swatchColor"
+                        :style="{ backgroundColor: value || 'transparent' }"
+                    />
+
+                    <!--
+                El nombre lleva de qué control se trata porque el campo son
+                **dos** paradas con el mismo rótulo: la muestra abre el selector
+                del sistema y el hexadecimal de al lado escribe el valor. Sin
+                distinguirlos, quien no ve la pantalla oye dos veces «Color de
+                marca» y no sabe en cuál está.
+            -->
+                    <input
+                        :aria-label="props.label ? `${props.label}: ${messages.colorPicker}` : messages.colorPicker"
+                        :class="ui.swatchInput"
+                        :disabled="props.disabled"
+                        type="color"
+                        :value="picked"
+                        @input="onPick"
+                    />
+                </label>
+
+                <Input
+                    v-bind="control"
+                    v-model="value"
+                    class="font-mono"
+                    :disabled="props.disabled"
+                    :placeholder="props.placeholder ?? '#000000'"
+                    :ui="{ root: 'w-full' }"
+                />
+            </div>
+        </template>
+    </FieldShell>
+</template>

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

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

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

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

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

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

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

@@ -0,0 +1,51 @@
+<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: "VunoFieldCurrency" });
+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 },
+  currency: { type: String, required: true },
+  decimals: { type: Number, 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("fieldCurrency", () => props.ui);
+</script>
+
+<template>
+    <FieldShell v-bind="props">
+        <template #default="control">
+            <NumberInput
+                v-bind="control"
+                v-model="value"
+                :currency="props.currency"
+                :decimals="props.decimals"
+                :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/FieldCurrency/FieldCurrency.vue.d.ts

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

@@ -0,0 +1,26 @@
+import type { VunoFieldFile } from '#vuno/types/field';
+/**
+ * Los tres booleanos llevan `withDefaults` y no un `?? true` en el uso.
+ *
+ * Vue convierte un prop declarado `boolean` que no viene en `false`, nunca
+ * en `undefined`, así que `props.multiple ?? true` no se ejecuta jamás: da
+ * `false` y el campo queda de un solo archivo salvo que la definición
+ * escriba `multiple: true`. Lo mismo hacía que `dropzone` llegara en
+ * `false` al control, pisando el `true` que este sí traía por defecto.
+ */
+type __VLS_Props = Omit<VunoFieldFile, 'columns'>;
+type __VLS_ModelProps = {
+    modelValue?: File[] | null | 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: File[] | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: File[] | null | undefined) => any) | undefined;
+}>, {
+    dropzone: boolean;
+    multiple: boolean;
+    reorderable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

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

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

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

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

@@ -0,0 +1,99 @@
+<script setup>
+import { computed } 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 FileUpload from "#vuno/components/FieldFile/internal/FileUpload/FileUpload.vue";
+import FieldShell from "#vuno/components/internal/FieldShell/FieldShell.vue";
+import Tooltip from "#vuno/components/Tooltip/Tooltip.vue";
+defineOptions({ name: "VunoFieldFile" });
+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 },
+  accept: { type: String, required: false },
+  dropzone: { type: Boolean, required: false, default: true },
+  layout: { type: String, required: false },
+  multiple: { type: Boolean, required: false, default: true },
+  reorderable: { type: Boolean, required: false, default: true }
+});
+const { value } = useField(() => props.name, model);
+const icons = useIcons();
+const messages = useMessages();
+const ui = useTheme("fieldFile", () => props.ui);
+const isReorderable = computed(() => props.reorderable && props.multiple);
+const files = computed(() => value.value ?? []);
+function move(index, offset) {
+  const next = [...files.value];
+  const target = index + offset;
+  if (target < 0 || target >= next.length) return;
+  const [moved] = next.splice(index, 1);
+  if (!moved) return;
+  next.splice(target, 0, moved);
+  value.value = next;
+}
+</script>
+
+<template>
+    <FieldShell v-bind="props">
+        <template #default="control">
+            <FileUpload
+                v-bind="control"
+                v-model="value"
+                :accept="props.accept"
+                :disabled="props.disabled"
+                :dropzone="props.dropzone"
+                :layout="props.layout ?? 'list'"
+                :multiple="props.multiple"
+                :ui="ui"
+            >
+                <!--
+            Solo las flechas: el botón de quitar lo pone el control, que es
+            quien sabe cómo se borra de su lista. Aquí se añade lo que es propio
+            del campo, que es poder reordenar.
+        -->
+                <template #fileTrailing="{ actionClass, file, index }">
+                    <Tooltip
+                        v-if="isReorderable && index > 0"
+                        :text="messages.fileMoveUp"
+                    >
+                        <Button
+                            :aria-label="`${messages.fileMoveUp} ${file.name}`"
+                            color="neutral"
+                            :icon="icons.fileMoveUp"
+                            size="xs"
+                            :ui="{ base: actionClass }"
+                            variant="soft"
+                            @click="move(index, -1)"
+                        />
+                    </Tooltip>
+
+                    <Tooltip
+                        v-if="isReorderable && index < files.length - 1"
+                        :text="messages.fileMoveDown"
+                    >
+                        <Button
+                            :aria-label="`${messages.fileMoveDown} ${file.name}`"
+                            color="neutral"
+                            :icon="icons.fileMoveDown"
+                            size="xs"
+                            :ui="{ base: actionClass }"
+                            variant="soft"
+                            @click="move(index, 1)"
+                        />
+                    </Tooltip>
+                </template>
+            </FileUpload>
+        </template>
+    </FieldShell>
+</template>

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

@@ -0,0 +1,26 @@
+import type { VunoFieldFile } from '#vuno/types/field';
+/**
+ * Los tres booleanos llevan `withDefaults` y no un `?? true` en el uso.
+ *
+ * Vue convierte un prop declarado `boolean` que no viene en `false`, nunca
+ * en `undefined`, así que `props.multiple ?? true` no se ejecuta jamás: da
+ * `false` y el campo queda de un solo archivo salvo que la definición
+ * escriba `multiple: true`. Lo mismo hacía que `dropzone` llegara en
+ * `false` al control, pisando el `true` que este sí traía por defecto.
+ */
+type __VLS_Props = Omit<VunoFieldFile, 'columns'>;
+type __VLS_ModelProps = {
+    modelValue?: File[] | null | 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: File[] | null | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: File[] | null | undefined) => any) | undefined;
+}>, {
+    dropzone: boolean;
+    multiple: boolean;
+    reorderable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/FieldFile/internal/FileUpload/FileUpload.d.vue.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/FieldFile/internal/FileUpload/FileUpload.theme.d.ts

@@ -0,0 +1,88 @@
+/**
+ * La subida de archivos. La zona de caída es una `<label>`, así que el clic
+ * en cualquier punto abre el selector sin manejadores; lo que se pinta aquí
+ * es solo su aspecto y el de la lista de lo elegido.
+ *
+ * La miniatura y el icono de respaldo comparten hueco a propósito: si un
+ * archivo sin vista previa ocupara menos, la lista bailaría al mezclar
+ * imágenes con documentos.
+ */
+export declare const fileUploadTheme: Record<"fileUpload", {
+    readonly slots: {
+        readonly name: "truncate text-vuno-body";
+        readonly actions: "ms-auto flex shrink-0 items-center gap-1.5";
+        readonly 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";
+        readonly dropzoneActive: "border-vuno-primary bg-vuno-surface-2 text-vuno-body";
+        readonly dropzoneDisabled: "cursor-not-allowed opacity-50";
+        readonly fileIcon: "shrink-0 text-vuno-muted";
+        readonly hint: "leading-snug";
+        readonly item: "flex items-center gap-2 rounded-sm border border-vuno-border bg-vuno-surface p-1.5";
+        readonly itemAction: "rounded-sm";
+        readonly list: "flex w-full flex-col gap-1.5";
+        readonly preview: "shrink-0 rounded-sm object-cover";
+        readonly root: "flex w-full flex-col gap-2";
+        readonly size: "text-vuno-muted";
+        readonly texts: "flex min-w-0 flex-col";
+    };
+    readonly variants: {
+        readonly dropzone: {
+            readonly false: {
+                readonly dropzone: "w-full justify-start gap-2 border-solid bg-vuno-surface px-3 py-2";
+                readonly hint: "text-start";
+            };
+            readonly true: {
+                readonly dropzone: "min-h-24 w-full flex-col justify-center gap-2 border-dashed px-4 py-6";
+                readonly hint: "text-center font-medium text-vuno-body";
+            };
+        };
+        readonly layout: {
+            /** En rejilla manda la imagen: la lista pasa a columnas y el texto se va debajo. */
+            readonly grid: {
+                readonly item: "flex-col items-start";
+                readonly list: "grid grid-cols-[repeat(auto-fill,minmax(8rem,1fr))] gap-2";
+                readonly preview: "h-24 w-full";
+            };
+            readonly list: {
+                readonly preview: "size-9";
+            };
+        };
+        readonly radius: Record<import("../../../../types/base.js").VunoRadius, Record<"dropzone", string>>;
+        readonly size: {
+            readonly xs: {
+                readonly name: "text-xs";
+                readonly fileIcon: "size-6";
+                readonly hint: "text-xs";
+                readonly icon: "size-6";
+                readonly size: "text-xs";
+            };
+            readonly sm: {
+                readonly name: "text-sm";
+                readonly fileIcon: "size-7";
+                readonly hint: "text-xs";
+                readonly icon: "size-7";
+                readonly size: "text-xs";
+            };
+            readonly md: {
+                readonly name: "text-sm";
+                readonly fileIcon: "size-8";
+                readonly hint: "text-sm";
+                readonly icon: "size-8";
+                readonly size: "text-xs";
+            };
+            readonly lg: {
+                readonly name: "text-base";
+                readonly fileIcon: "size-9";
+                readonly hint: "text-sm";
+                readonly icon: "size-9";
+                readonly size: "text-sm";
+            };
+            readonly xl: {
+                readonly name: "text-base";
+                readonly fileIcon: "size-10";
+                readonly hint: "text-base";
+                readonly icon: "size-10";
+                readonly size: "text-sm";
+            };
+        };
+    };
+}>;