@groupteknology/vuno 1.0.1 → 2.0.0

package/dist/runtime/app/components/{structure → Container}/Container.d.vue.ts

@@ -1,5 +1,5 @@
-import type { VunoSlots } from '#vuno/types/base';
 import type { VunoContainerSize } from '#vuno/types/page';
+import type { VunoUi } from '#vuno/types/slots';
 /**
  * Centra el contenido y le pone un ancho máximo.
  *
@@ -14,22 +14,22 @@ import type { VunoContainerSize } from '#vuno/types/page';
  * 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 __VLS_Props = {
+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?: VunoSlots;
+    ui?: VunoUi<'container'>;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     size: VunoContainerSize;
-    ui: VunoSlots;
+    ui: VunoUi<"container">;
     flush: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -0,0 +1,53 @@
+export declare const containerTheme: Record<"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.
+     */
+    readonly slots: {
+        readonly root: "mx-auto w-full";
+    };
+    readonly variants: {
+        readonly padding: {
+            readonly false: {};
+            readonly true: {
+                readonly root: "px-4 sm:px-6 lg:px-8";
+            };
+        };
+        readonly size: {
+            readonly sm: {
+                readonly root: "max-w-sm";
+            };
+            readonly md: {
+                readonly root: "max-w-md";
+            };
+            readonly lg: {
+                readonly root: "max-w-lg";
+            };
+            readonly xl: {
+                readonly root: "max-w-xl";
+            };
+            readonly '2xl': {
+                readonly root: "max-w-2xl";
+            };
+            readonly '3xl': {
+                readonly root: "max-w-3xl";
+            };
+            readonly '4xl': {
+                readonly root: "max-w-4xl";
+            };
+            readonly '5xl': {
+                readonly root: "max-w-5xl";
+            };
+            readonly '6xl': {
+                readonly root: "max-w-6xl";
+            };
+            readonly '7xl': {
+                readonly root: "max-w-7xl";
+            };
+            readonly '8xl': {
+                readonly root: "max-w-8xl";
+            };
+            readonly full: {};
+        };
+    };
+}>;

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/{structure → Container}/Container.vue

@@ -1,8 +1,9 @@
 <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: "7xl" },
+  size: { type: String, required: false, default: "8xl" },
   ui: { type: Object, required: false, default: void 0 }
 });
 const ui = useTheme(

package/dist/runtime/app/components/{structure → Container}/Container.vue.d.ts

@@ -1,5 +1,5 @@
-import type { VunoSlots } from '#vuno/types/base';
 import type { VunoContainerSize } from '#vuno/types/page';
+import type { VunoUi } from '#vuno/types/slots';
 /**
  * Centra el contenido y le pone un ancho máximo.
  *
@@ -14,22 +14,22 @@ import type { VunoContainerSize } from '#vuno/types/page';
  * 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 __VLS_Props = {
+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?: VunoSlots;
+    ui?: VunoUi<'container'>;
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     size: VunoContainerSize;
-    ui: VunoSlots;
+    ui: VunoUi<"container">;
     flush: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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/{forms → FieldCheckbox/internal/Checkbox}/Checkbox.d.vue.ts

@@ -1,4 +1,5 @@
-import type { VunoColor, VunoSize, VunoSlots } from '#vuno/types/base';
+import type { VunoColor, VunoRadius, VunoSize } from '#vuno/types/base';
+import type { VunoUi } from '#vuno/types/slots';
 /**
  * La casilla, nativa.
  *
@@ -7,16 +8,19 @@ import type { VunoColor, VunoSize, VunoSlots } from '#vuno/types/base';
  * `aria-*` del envoltorio de campo, el `name`, el `disabled`— cae en el
  * elemento correcto sin reenviarlo a mano.
  */
-type __VLS_Props = {
+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?: VunoSlots;
+    ui?: VunoUi<'checkbox' | 'fieldCheckbox'>;
 };
+type __VLS_Props = Props;
 type __VLS_ModelProps = {
     modelValue?: boolean | undefined;
 };
@@ -27,8 +31,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<"checkbox" | "fieldCheckbox">;
     indeterminate: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;