@groupteknology/vuno 1.0.0 → 2.0.0

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

@@ -0,0 +1,31 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const containerTheme = defineTheme("container", {
+  /**
+   * El contenedor. El ancho sale de la variante y no de una clase suelta: dos
+   * `max-w-*` sobre el mismo elemento no se resuelven, conviven.
+   */
+  slots: {
+    root: "mx-auto w-full"
+  },
+  variants: {
+    /* Se quita en un contenedor dentro de otro, donde se sumaría dos veces. */
+    padding: {
+      false: {},
+      true: { root: "px-4 sm:px-6 lg:px-8" }
+    },
+    size: {
+      sm: { root: "max-w-sm" },
+      md: { root: "max-w-md" },
+      lg: { root: "max-w-lg" },
+      xl: { root: "max-w-xl" },
+      "2xl": { root: "max-w-2xl" },
+      "3xl": { root: "max-w-3xl" },
+      "4xl": { root: "max-w-4xl" },
+      "5xl": { root: "max-w-5xl" },
+      "6xl": { root: "max-w-6xl" },
+      "7xl": { root: "max-w-7xl" },
+      "8xl": { root: "max-w-8xl" },
+      full: {}
+    }
+  }
+});

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

@@ -0,0 +1,20 @@
+<script setup>
+import { useTheme } from "#vuno/composables/useTheme";
+defineOptions({ name: "VunoContainer" });
+const props = defineProps({
+  flush: { type: Boolean, required: false, default: false },
+  size: { type: String, required: false, default: "8xl" },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const ui = useTheme(
+  "container",
+  () => props.ui,
+  () => ({ padding: String(!props.flush), size: props.size })
+);
+</script>
+
+<template>
+    <div :class="ui.root">
+        <slot />
+    </div>
+</template>

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

@@ -0,0 +1,42 @@
+import type { VunoContainerSize } from '#vuno/types/page';
+import type { VunoUi } from '#vuno/types/slots';
+/**
+ * Centra el contenido y le pone un ancho máximo.
+ *
+ * **El ancho es una variante del tema y no una clase que se pasa.** Escribirlo
+ * como `class="max-w-lg"` sobre el componente sería el defecto de siempre: una
+ * clase puesta sobre un componente no pasa por tailwind-merge, así que
+ * convive con la del tema y gana el orden de la hoja — dos anchos declarados
+ * y el que se aplica depende de en qué orden salieran compilados. Por la
+ * variante hay uno solo, y un proyecto puede cambiar la escala entera desde
+ * su `app.config`.
+ *
+ * Los tamaños son los de Tailwind, de `sm` a `7xl`, más `full` para cuando lo
+ * que se quiere es solo el relleno lateral y no el tope.
+ */
+type Props = {
+    /**
+     * Quita el relleno lateral. Para un contenedor dentro de otro que ya
+     * lo tiene, donde el relleno se sumaría dos veces.
+     */
+    flush?: boolean;
+    size?: VunoContainerSize;
+    ui?: VunoUi<'container'>;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    size: VunoContainerSize;
+    ui: VunoUi<"container">;
+    flush: 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/ControlGroup/ControlGroup.d.vue.ts

@@ -0,0 +1,26 @@
+import type { VunoSize } from '#vuno/types/base';
+import type { VunoControlOrientation } from '#vuno/types/field';
+import type { VunoUi } from '#vuno/types/slots';
+type Props = {
+    /** Dirección en la que se unen los controles. */
+    orientation?: VunoControlOrientation;
+    /** Tamaño que heredan los hijos que no declaran uno propio. */
+    size?: VunoSize;
+    ui?: VunoUi<'controlGroup'>;
+};
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    size: VunoSize;
+    orientation: VunoControlOrientation;
+    ui: VunoUi<"controlGroup">;
+}, {}, {}, {}, 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/ControlGroup/ControlGroup.theme.d.ts

@@ -0,0 +1,16 @@
+export declare const controlGroupTheme: Record<"controlGroup", {
+    /** Une bordes y radios; cada hijo compatible decide cómo responde al contexto. */
+    readonly slots: {
+        readonly root: "relative inline-flex";
+    };
+    readonly variants: {
+        readonly orientation: {
+            readonly horizontal: {
+                readonly root: "-space-x-px";
+            };
+            readonly vertical: {
+                readonly root: "flex-col -space-y-px";
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,13 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const controlGroupTheme = defineTheme("controlGroup", {
+  /** Une bordes y radios; cada hijo compatible decide cómo responde al contexto. */
+  slots: {
+    root: "relative inline-flex"
+  },
+  variants: {
+    orientation: {
+      horizontal: { root: "-space-x-px" },
+      vertical: { root: "flex-col -space-y-px" }
+    }
+  }
+});

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

@@ -0,0 +1,26 @@
+<script setup>
+import { provideVunoControlGroup } from "#vuno/composables/internal/useVunoControlGroup";
+import { useTheme } from "#vuno/composables/useTheme";
+defineOptions({ name: "VunoControlGroup" });
+const props = defineProps({
+  orientation: { type: String, required: false, default: "horizontal" },
+  size: { type: String, required: false, default: void 0 },
+  ui: { type: Object, required: false, default: void 0 }
+});
+defineSlots();
+provideVunoControlGroup(() => ({ orientation: props.orientation, size: props.size }));
+const ui = useTheme(
+  "controlGroup",
+  () => props.ui,
+  () => ({ orientation: props.orientation })
+);
+</script>
+
+<template>
+    <div
+        :class="ui.root"
+        :data-orientation="props.orientation"
+    >
+        <slot />
+    </div>
+</template>

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

@@ -0,0 +1,26 @@
+import type { VunoSize } from '#vuno/types/base';
+import type { VunoControlOrientation } from '#vuno/types/field';
+import type { VunoUi } from '#vuno/types/slots';
+type Props = {
+    /** Dirección en la que se unen los controles. */
+    orientation?: VunoControlOrientation;
+    /** Tamaño que heredan los hijos que no declaran uno propio. */
+    size?: VunoSize;
+    ui?: VunoUi<'controlGroup'>;
+};
+type __VLS_Slots = {
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    size: VunoSize;
+    orientation: VunoControlOrientation;
+    ui: VunoUi<"controlGroup">;
+}, {}, {}, {}, 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/FieldArray/FieldArray.d.vue.ts

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

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

@@ -0,0 +1,12 @@
+export declare const fieldArrayTheme: Record<"fieldArray", {
+    readonly slots: {
+        readonly empty: "rounded-sm border border-dashed border-vuno-border px-4 py-6 text-center text-sm text-vuno-muted";
+        readonly item: "flex flex-col gap-3 rounded-sm border border-vuno-border p-4";
+        readonly itemAction: "pointer-coarse:size-11";
+        readonly itemActions: "flex items-center gap-1";
+        readonly itemFields: "grid w-full grid-cols-12 gap-x-4 gap-y-5";
+        readonly itemHeader: "flex items-center justify-between gap-2";
+        readonly itemLabel: "text-xs font-medium text-vuno-muted";
+        readonly root: "flex w-full flex-col gap-3";
+    };
+}>;

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

@@ -0,0 +1,13 @@
+import { defineTheme } from "#vuno/utils/theme";
+export const fieldArrayTheme = defineTheme("fieldArray", {
+  slots: {
+    empty: "rounded-sm border border-dashed border-vuno-border px-4 py-6 text-center text-sm text-vuno-muted",
+    item: "flex flex-col gap-3 rounded-sm border border-vuno-border p-4",
+    itemAction: "pointer-coarse:size-11",
+    itemActions: "flex items-center gap-1",
+    itemFields: "grid w-full grid-cols-12 gap-x-4 gap-y-5",
+    itemHeader: "flex items-center justify-between gap-2",
+    itemLabel: "text-xs font-medium text-vuno-muted",
+    root: "flex w-full flex-col gap-3"
+  }
+});

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

@@ -0,0 +1,173 @@
+<script setup>
+import { computed, provide, reactive } from "vue";
+import { useField } from "#vuno/composables/useField";
+import { useForm } from "#vuno/composables/useForm";
+import { useIcons, useMessages, useTheme } from "#vuno/composables/useTheme";
+import { vunoFormInjectionKey } from "#vuno/internal/keys";
+import { cloneValue, getPath, isEqual, setPath } from "#vuno/utils/path";
+import Button from "#vuno/components/Button/Button.vue";
+import FormFieldRenderer from "#vuno/components/Form/internal/FormFieldRenderer/FormFieldRenderer.vue";
+import { getColumnSpanClass } from "#vuno/components/Form/internal/grid";
+import FieldShell from "#vuno/components/internal/FieldShell/FieldShell.vue";
+defineOptions({ name: "VunoFieldArray" });
+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 },
+  addLabel: { type: String, required: false },
+  fields: { type: Array, required: true },
+  max: { type: Number, required: false },
+  min: { type: Number, required: false },
+  sortable: { type: Boolean, required: false }
+});
+const parentForm = useForm({ optional: true });
+const { value } = useField(() => props.name, model);
+const icons = useIcons();
+const messages = useMessages();
+const ui = useTheme("fieldArray", () => props.ui);
+const items = computed(() => value.value ?? []);
+const initialItems = cloneValue(items.value);
+const touched = reactive({});
+const standaloneForm = {
+  dirty: computed(() => !isEqual(items.value, initialItems)),
+  initialState: { items: initialItems },
+  size: computed(() => props.size),
+  touched,
+  errorFor: () => void 0,
+  getValue: (name) => getPath({ items: items.value }, name),
+  isDirty: () => false,
+  isTouched: (name) => touched[name] ?? false,
+  reset: () => value.value = cloneValue(initialItems),
+  resetField: () => {
+  },
+  setTouched: (name, next = true) => {
+    if (next) touched[name] = true;
+    else delete touched[name];
+  },
+  setValue: (name, next) => {
+    const state = { items: cloneValue(items.value) };
+    setPath(state, name, next);
+    value.value = state.items;
+  }
+};
+provide(vunoFormInjectionKey, parentForm ?? standaloneForm);
+const canAdd = computed(() => props.max === void 0 || items.value.length < props.max);
+const canRemove = computed(() => items.value.length > (props.min ?? 0));
+function emptyItem() {
+  const item = {};
+  for (const field of props.fields) {
+    if (field.type === "checkbox") item[field.name] = false;
+    else if (field.type === "currency" || field.type === "number") item[field.name] = void 0;
+    else if (field.type === "array" || field.type === "file" || field.type === "tags") item[field.name] = [];
+    else item[field.name] = "";
+  }
+  return item;
+}
+function fieldAt(field, index) {
+  const prefix = parentForm ? props.name : "items";
+  return { ...field, name: `${prefix}.${index}.${field.name}` };
+}
+function add() {
+  if (!canAdd.value) return;
+  value.value = [...items.value, emptyItem()];
+}
+function remove(index) {
+  if (!canRemove.value) return;
+  value.value = items.value.filter((_, position) => position !== index);
+}
+function move(index, offset) {
+  const next = [...items.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">
+        <div :class="ui.root">
+            <div
+                v-for="(item, index) in items"
+                :key="index"
+                :class="ui.item"
+            >
+                <div :class="ui.itemHeader">
+                    <span :class="ui.itemLabel">{{ index + 1 }}</span>
+
+                    <div :class="ui.itemActions">
+                        <Button
+                            v-if="props.sortable && index > 0"
+                            :aria-label="`${messages.fileMoveUp} ${index + 1}`"
+                            color="neutral"
+                            :icon="icons.fileMoveUp"
+                            size="xs"
+                            :ui="{ base: ui.itemAction }"
+                            variant="ghost"
+                            @click="move(index, -1)"
+                        />
+                        <Button
+                            v-if="props.sortable && index < items.length - 1"
+                            :aria-label="`${messages.fileMoveDown} ${index + 1}`"
+                            color="neutral"
+                            :icon="icons.fileMoveDown"
+                            size="xs"
+                            :ui="{ base: ui.itemAction }"
+                            variant="ghost"
+                            @click="move(index, 1)"
+                        />
+                        <Button
+                            :aria-label="`${messages.removeItem} ${index + 1}`"
+                            color="error"
+                            :disabled="!canRemove"
+                            :icon="icons.removeItem"
+                            size="xs"
+                            :ui="{ base: ui.itemAction }"
+                            variant="ghost"
+                            @click="remove(index)"
+                        />
+                    </div>
+                </div>
+
+                <div :class="ui.itemFields">
+                    <div
+                        v-for="field in props.fields"
+                        :key="`${index}-${field.name}`"
+                        :class="getColumnSpanClass(field.columns)"
+                    >
+                        <FormFieldRenderer :field="fieldAt(field, index)" />
+                    </div>
+                </div>
+            </div>
+
+            <div
+                v-if="items.length === 0"
+                :class="ui.empty"
+            >
+                {{ messages.emptyArray }}
+            </div>
+
+            <Button
+                class="self-start"
+                color="neutral"
+                :disabled="!canAdd"
+                :icon="icons.addItem"
+                :label="props.addLabel ?? messages.addItem"
+                variant="outline"
+                @click="add"
+            />
+        </div>
+    </FieldShell>
+</template>

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

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

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

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

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

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

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

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

@@ -0,0 +1,39 @@
+<script setup>
+import { useField } from "#vuno/composables/useField";
+import { useTheme } from "#vuno/composables/useTheme";
+import Checkbox from "#vuno/components/FieldCheckbox/internal/Checkbox/Checkbox.vue";
+import FieldShell from "#vuno/components/internal/FieldShell/FieldShell.vue";
+defineOptions({ name: "VunoFieldCheckbox" });
+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 },
+  indeterminate: { type: Boolean, required: false }
+});
+const { value } = useField(() => props.name, model);
+const ui = useTheme("fieldCheckbox", () => props.ui);
+</script>
+
+<template>
+    <FieldShell v-bind="props">
+        <template #default="control">
+            <Checkbox
+                v-bind="control"
+                v-model="value"
+                :disabled="props.disabled"
+                :indeterminate="props.indeterminate"
+                :ui="ui"
+            />
+        </template>
+    </FieldShell>
+</template>

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

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

@@ -0,0 +1,30 @@
+/**
+ * Casilla nativa. El marcado se pinta con `accent-color`, así que toma el
+ * color del tema sin dibujar ningún SVG encima.
+ */
+export declare const checkboxTheme: Record<"checkbox", {
+    readonly slots: {
+        readonly base: "shrink-0 cursor-pointer rounded-sm border border-vuno-border-strong bg-vuno-surface accent-(--vuno-accent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--vuno-accent) disabled:cursor-not-allowed disabled:opacity-50";
+    };
+    readonly variants: {
+        readonly color: Record<import("../../../../types/base.js").VunoColor, Record<"base", string>>;
+        readonly radius: Record<import("../../../../types/base.js").VunoRadius, Record<"base", string>>;
+        readonly size: {
+            readonly xs: {
+                readonly base: "size-3.5";
+            };
+            readonly sm: {
+                readonly base: "size-4";
+            };
+            readonly md: {
+                readonly base: "size-4";
+            };
+            readonly lg: {
+                readonly base: "size-5";
+            };
+            readonly xl: {
+                readonly base: "size-5";
+            };
+        };
+    };
+}>;

package/dist/runtime/app/components/FieldCheckbox/internal/Checkbox/Checkbox.theme.js

@@ -0,0 +1,10 @@
+import { accentByColor, radiusByStep } from "#vuno/theme/shared";
+import { defineTheme } from "#vuno/utils/theme";
+export const checkboxTheme = defineTheme("checkbox", {
+  slots: { base: "shrink-0 cursor-pointer rounded-sm border border-vuno-border-strong bg-vuno-surface accent-(--vuno-accent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--vuno-accent) disabled:cursor-not-allowed disabled:opacity-50" },
+  variants: {
+    color: accentByColor("base"),
+    radius: radiusByStep("base"),
+    size: { xs: { base: "size-3.5" }, sm: { base: "size-4" }, md: { base: "size-4" }, lg: { base: "size-5" }, xl: { base: "size-5" } }
+  }
+});

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

@@ -0,0 +1,40 @@
+<script setup>
+import { useTemplateRef, watchEffect } from "vue";
+import { useTheme } from "#vuno/composables/useTheme";
+defineOptions({ name: "VunoCheckbox" });
+const model = defineModel({ type: Boolean, skipCheck: true, ...{ default: void 0 } });
+const props = defineProps({
+  color: { type: String, required: false, default: "primary" },
+  indeterminate: { type: Boolean, required: false, default: false },
+  radius: { type: String, required: false, default: void 0 },
+  size: { type: String, required: false, default: "md" },
+  ui: { type: Object, required: false, default: void 0 }
+});
+const ui = useTheme(
+  "checkbox",
+  () => props.ui,
+  () => ({
+    color: props.color,
+    radius: props.radius,
+    size: props.size
+  })
+);
+const control = useTemplateRef("control");
+function onChange(event) {
+  model.value = event.target.checked;
+}
+watchEffect(() => {
+  const el = control.value;
+  if (el) el.indeterminate = props.indeterminate;
+});
+</script>
+
+<template>
+    <input
+        ref="control"
+        :checked="model === true"
+        :class="ui.base"
+        type="checkbox"
+        @change="onChange"
+    />
+</template>