nuxt-ui-tools 0.1.3 → 1.0.1

package/dist/runtime/form/fields/array-variant/types.d.ts

@@ -1,15 +1,19 @@
 import type { FormFieldCallback } from '../../types/callbacks.js';
 import type { FormField } from '../../types/field.js';
+import type { FormFieldProps } from '../../types/field-base.js';
 import type { FormContainerLayout } from '../../types/layout.js';
-import type { FormDynamic, FormObject, FormText } from '../../types/utils.js';
-import type { FormArrayFieldActions, FormArrayVirtualFields } from '../array-list/types.js';
-export interface FormArrayVariant<TContext = {}, TDeps = {}> {
+import type { FormObject, FormText } from '../../types/utils.js';
+import type { FormArrayFieldActions, FormArrayListProps, FormArrayVirtualFields } from '../array-list/types.js';
+export interface FormArrayVariant<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> {
     key: string | number;
     label: FormText;
     fields: readonly FormField<TContext, TDeps>[];
     virtualFields?: FormArrayVirtualFields;
 }
-export interface FormArrayVariantField<TContext = {}, TDeps = {}> {
+export interface FormArrayVariantProps extends FormArrayListProps {
+    displayMode?: 'list' | 'tabs';
+}
+export interface FormArrayVariantField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> {
     key: string;
     type: 'array-variant';
     label?: FormText;
@@ -17,18 +21,12 @@ export interface FormArrayVariantField<TContext = {}, TDeps = {}> {
     layout?: FormContainerLayout;
     condition?: FormFieldCallback<boolean, TContext, TDeps>;
     ignore?: boolean;
-    props?: FormDynamic<FormObject, {
-        ctx: TContext;
-        deps: TDeps;
-    }>;
+    props?: FormFieldProps<FormArrayVariantProps, TContext, TDeps>;
     variantKey: string;
     variants: readonly FormArrayVariant<TContext, TDeps>[];
-    displayMode?: 'list' | 'tabs';
     addItemLabel?: FormText;
     emptyLabel?: FormText;
     itemLabel?: FormText;
-    compact?: boolean;
-    draggable?: boolean;
     confirmDelete?: boolean | FormText;
     headerTemplate?: (item: FormObject, index: number, deps: TDeps) => FormText;
     transformOnCreate?: (item: FormObject, index: number, deps: TDeps) => FormObject;

package/dist/runtime/form/fields/auto-complete/component.vue

@@ -1,43 +1,78 @@
 <script setup>
-import UButton from "@nuxt/ui/components/Button.vue";
 import UInputMenu from "@nuxt/ui/components/InputMenu.vue";
-import { computed, ref } from "vue";
+import { computed, ref, watch } from "vue";
 import { useUiToolsLocale } from "../../../i18n/use-locale";
-import FormFieldShell from "../../components/renderer/FormFieldShell.vue";
+import FormFieldShell from "../../components/renderer/form-field-shell.vue";
+import FormOptionItemLabel from "../../components/utils/form-option-item-label.vue";
+import FormOptionMenuFooter from "../../components/utils/form-option-menu-footer.vue";
 import { useFieldControl } from "../../composables/use-field-control";
+import { appendLoadMoreOption } from "../../utils/options";
+import { isBoolean, isNumber, isString } from "../../utils/predicate";
+import { mergeFormUiClass } from "../../utils/ui";
 const props = defineProps({
   field: { type: Object, required: true },
   path: { type: Array, required: true }
 });
 const { t } = useUiToolsLocale();
-const { form, controlProps, disabled, handleBlur, options, placeholder } = useFieldControl(
+const {
+  fieldProps,
+  form,
+  controlProps,
+  disabled,
+  handleBlur,
+  interactionOwnerClass,
+  options,
+  placeholder,
+  validationPending
+} = useFieldControl(
   () => props.field,
-  () => props.path
+  () => props.path,
+  { omit: ["createItem", "clearable"] }
 );
 const searchTerm = ref("");
 const model = computed({
   get: () => {
     const value = form.getValue(props.path);
-    if (Array.isArray(value)) return value.filter(isOptionValue);
-    if (isOptionValue(value)) return value;
+    if (Array.isArray(value)) {
+      return value.filter(isOptionValue);
+    }
+    if (isOptionValue(value)) {
+      return value;
+    }
     return null;
   },
   set: (value) => form.setValue(props.path, value)
 });
-const items = computed(() => [...options.items.value]);
+const items = computed(() => [
+  ...appendLoadMoreOption(
+    options.items.value,
+    options.remote.value && (options.hasMore.value || options.loadingMore.value),
+    t("form.fields.options.loadingMore")
+  )
+]);
+const controlUi = computed(() => ({
+  ...controlProps.value.ui,
+  content: mergeFormUiClass(controlProps.value.ui?.content, interactionOwnerClass.value)
+}));
 const createItem = computed(
-  () => options.creatable.value && props.field.createItem ? props.field.createItem : false
+  () => options.creatable.value && fieldProps.value.createItem ? fieldProps.value.createItem : false
 );
 const showExplicitCreate = computed(
-  () => options.creatable.value && !props.field.createItem
-);
-const showFooterActions = computed(() => options.refreshable.value || showExplicitCreate.value);
-const footerActionsClass = computed(
-  () => options.refreshable.value && showExplicitCreate.value ? "sm:grid-cols-2" : "grid-cols-1"
+  () => options.creatable.value && !fieldProps.value.createItem
 );
 const createActionLabel = computed(
   () => options.createLabel.value ?? t("form.fields.options.create")
 );
+watch(searchTerm, (term) => {
+  if (options.remote.value) {
+    options.setSearch(term);
+  }
+});
+function handleOpen(open) {
+  if (open) {
+    options.activate();
+  }
+}
 async function handleCreate(label) {
   await options.create(label);
 }
@@ -46,11 +81,13 @@ async function handleCreateAction() {
 }
 async function handleNativeCreate(label) {
   const normalizedLabel = label.trim();
-  if (!normalizedLabel) return;
+  if (!normalizedLabel) {
+    return;
+  }
   await handleCreate(normalizedLabel);
 }
 function isOptionValue(value) {
-  return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+  return isString(value) || isNumber(value) || isBoolean(value);
 }
 </script>
 
@@ -64,12 +101,17 @@ function isOptionValue(value) {
       value-key="value"
       label-key="label"
       :items="items"
-      :multiple="field.multiple"
+      :multiple="fieldProps.multiple"
       :placeholder="placeholder"
       :disabled="disabled"
-      :loading="options.loading.value || options.creating.value"
-      :clear="field.clearable === true"
+      :loading="
+  validationPending || options.loading.value || options.fetching.value || options.creating.value
+"
+      :clear="fieldProps.clearable === true"
+      :ignore-filter="options.remote.value"
       :create-item="createItem"
+      :ui="controlUi"
+      @update:open="handleOpen"
       @create="handleNativeCreate"
       @blur="handleBlur"
     >
@@ -79,38 +121,18 @@ function isOptionValue(value) {
         }}
       </template>
 
+      <template #item-label="{ item }">
+        <FormOptionItemLabel :item="item" />
+      </template>
+
       <template #content-bottom>
-        <div
-          v-if="showFooterActions"
-          class="grid gap-1 border-t border-default p-1"
-          :class="footerActionsClass"
-        >
-          <UButton
-            v-if="options.refreshable.value"
-            block
-            size="xs"
-            variant="ghost"
-            color="neutral"
-            icon="i-lucide-refresh-cw"
-            :loading="options.pending.value || options.fetching.value"
-            @click.stop="options.refresh"
-          >
-            {{ t("form.fields.options.refresh") }}
-          </UButton>
-          <UButton
-            v-if="showExplicitCreate"
-            block
-            size="xs"
-            variant="ghost"
-            color="primary"
-            icon="i-lucide-plus"
-            :loading="options.creating.value"
-            :disabled="disabled || options.creating.value"
-            @click.stop="handleCreateAction"
-          >
-            {{ createActionLabel }}
-          </UButton>
-        </div>
+        <FormOptionMenuFooter
+          :options="options"
+          :disabled="disabled"
+          :show-create="showExplicitCreate"
+          :create-label="createActionLabel"
+          @create="handleCreateAction"
+        />
       </template>
     </UInputMenu>
   </FormFieldShell>

package/dist/runtime/form/fields/auto-complete/config.d.ts

@@ -1,17 +1,17 @@
 export declare const autoCompleteFieldKind: {
-    readonly type: "auto-complete";
-    readonly state: "stateful";
-    readonly ui: {
-        readonly label: true;
-        readonly description: true;
-        readonly hint: true;
-    };
     readonly layout: {
         readonly item: true;
     };
     readonly options: {
         readonly enabled: true;
     };
-    readonly validation: true;
+    readonly state: "stateful";
     readonly transform: true;
+    readonly type: "auto-complete";
+    readonly ui: {
+        readonly description: true;
+        readonly hint: true;
+        readonly label: true;
+    };
+    readonly validation: true;
 };

package/dist/runtime/form/fields/auto-complete/config.js

@@ -1,10 +1,10 @@
 import { defineFormFieldKind } from "../../utils/field-kind.js";
 export const autoCompleteFieldKind = defineFormFieldKind({
-  type: "auto-complete",
-  state: "stateful",
-  ui: { label: true, description: true, hint: true },
   layout: { item: true },
   options: { enabled: true },
-  validation: true,
-  transform: true
+  state: "stateful",
+  transform: true,
+  type: "auto-complete",
+  ui: { description: true, hint: true, label: true },
+  validation: true
 });

package/dist/runtime/form/fields/auto-complete/types.d.ts

@@ -1,17 +1,19 @@
 import type { FormStatefulFieldBase } from '../../types/field-base.js';
-import type { FieldOptionValue, FallbackNever, NullableValue } from '../../types/field-output-utils.js';
-import type { FormOptionConfig, FormOptionItem, FormOptionValue, FormOptionsSource } from '../../types/options.js';
+import type { FieldOptionValue, FieldProps, FallbackNever, NullableValue } from '../../types/field-output-utils.js';
+import type { FormAnyOptionConfig, FormOptionItem, FormOptionValue } from '../../types/options.js';
 import type { FormSelectCreateItem } from '../select/types.js';
-export interface FormAutoCompleteField<TContext = {}, TDeps = {}, TValue extends FormOptionValue = FormOptionValue, TOption extends FormOptionItem<TValue> = FormOptionItem<TValue>> extends FormStatefulFieldBase<'auto-complete', TValue | readonly TValue[] | null, TContext, TDeps> {
-    options: FormOptionConfig<TOption, TContext, TDeps, TValue | readonly TValue[] | null> | FormOptionsSource<TOption, TContext, TDeps, TValue | readonly TValue[] | null>;
+export interface FormAutoCompleteProps {
     multiple?: boolean;
     clearable?: boolean;
     createItem?: FormSelectCreateItem;
 }
-type AutoCompleteFieldValue<TField> = TField extends {
+export interface FormAutoCompleteField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>, TValue extends FormOptionValue = FormOptionValue, TOption extends FormOptionItem<TValue> = FormOptionItem<TValue>> extends FormStatefulFieldBase<'auto-complete', TValue | readonly TValue[] | null, TContext, TDeps, FormAutoCompleteProps> {
+    options: FormAnyOptionConfig<TOption, TContext, TDeps, TValue | readonly TValue[] | null>;
+}
+type AutoCompleteFieldValue<TField> = FieldProps<TField> extends {
     multiple: true;
 } ? readonly FieldOptionValue<TField>[] | NullableValue : FieldOptionValue<TField> | NullableValue;
-export type AutoCompleteFieldOutput<TField> = FallbackNever<AutoCompleteFieldValue<TField>, TField extends {
+export type AutoCompleteFieldOutput<TField> = FallbackNever<AutoCompleteFieldValue<TField>, FieldProps<TField> extends {
     multiple: true;
 } ? readonly FormOptionValue[] | NullableValue : FormOptionValue | NullableValue>;
 export {};

package/dist/runtime/form/fields/button/component.vue

@@ -7,7 +7,7 @@ const props = defineProps({
   field: { type: Object, required: true },
   path: { type: Array, required: true }
 });
-const { controlProps, disabled, params } = useFieldControl(
+const { fieldProps, controlProps, disabled, params } = useFieldControl(
   () => props.field,
   () => props.path
 );
@@ -21,9 +21,9 @@ async function handleClick() {
   <UButton
     v-bind="controlProps"
     :label="label"
-    :icon="field.icon"
-    :color="field.color ?? 'primary'"
-    :variant="field.variant ?? 'solid'"
+    :icon="fieldProps.icon"
+    :color="fieldProps.color ?? 'primary'"
+    :variant="fieldProps.variant ?? 'solid'"
     :disabled="disabled"
     @click="handleClick"
   />

package/dist/runtime/form/fields/button/config.d.ts

@@ -1,7 +1,7 @@
 export declare const buttonFieldKind: {
-    readonly type: "button";
-    readonly state: "stateless";
     readonly layout: {
         readonly item: true;
     };
+    readonly state: "stateless";
+    readonly type: "button";
 };

package/dist/runtime/form/fields/button/config.js

@@ -1,6 +1,6 @@
 import { defineFormFieldKind } from "../../utils/field-kind.js";
 export const buttonFieldKind = defineFormFieldKind({
-  type: "button",
+  layout: { item: true },
   state: "stateless",
-  layout: { item: true }
+  type: "button"
 });

package/dist/runtime/form/fields/button/types.d.ts

@@ -1,11 +1,13 @@
 import type { FormFieldCallback } from '../../types/callbacks.js';
 import type { FormStatelessFieldBase } from '../../types/field-base.js';
 import type { FormText } from '../../types/utils.js';
-export interface FormButtonField<TContext = {}, TDeps = {}> extends FormStatelessFieldBase<'button', TContext, TDeps> {
-    label?: FormText;
+export interface FormButtonProps {
     icon?: string;
     color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral';
     variant?: 'solid' | 'outline' | 'soft' | 'subtle' | 'ghost' | 'link';
+}
+export interface FormButtonField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> extends FormStatelessFieldBase<'button', TContext, TDeps, FormButtonProps> {
+    label?: FormText;
     disabled?: FormFieldCallback<boolean, TContext, TDeps>;
     onClick: FormFieldCallback<void | Promise<void>, TContext, TDeps>;
 }

package/dist/runtime/form/fields/card/component.vue

@@ -1,9 +1,10 @@
 <script setup>
 import UCard from "@nuxt/ui/components/Card.vue";
 import { computed } from "vue";
-import FormFieldRenderer from "../../components/renderer/FormFieldRenderer.vue";
+import FormFieldRenderer from "../../components/renderer/form-field-renderer.vue";
 import { useFieldControl } from "../../composables/use-field-control";
 import { useFormContainerLayout } from "../../composables/use-form-layout";
+import { invokeFormFunction, isNumber, isString } from "../../utils/predicate";
 import { resolveFormText } from "../../utils/text";
 const props = defineProps({
   field: { type: Object, required: true },
@@ -15,8 +16,8 @@ const { form, params } = useFieldControl(
   () => props.path
 );
 const grid = useFormContainerLayout({
-  layout: () => props.field.layout,
-  formLayout: form.currentLayout
+  formLayout: form.currentLayout,
+  layout: () => props.field.layout
 });
 const title = computed(
   () => resolveRenderable(props.field.header) ?? resolveFormText(props.field.label)
@@ -26,8 +27,8 @@ const headerExtra = computed(() => resolveRenderable(props.field.headerExtra));
 const footer = computed(() => resolveRenderable(props.field.footer));
 const action = computed(() => resolveRenderable(props.field.action));
 function resolveRenderable(value) {
-  const resolved = typeof value === "function" ? value(params.value) : value;
-  return typeof resolved === "string" || typeof resolved === "number" ? String(resolved) : void 0;
+  const resolved = invokeFormFunction(value, [params.value]) ?? value;
+  return isString(resolved) || isNumber(resolved) ? String(resolved) : void 0;
 }
 </script>
 

package/dist/runtime/form/fields/card/config.d.ts

@@ -1,12 +1,12 @@
 export declare const cardFieldKind: {
-    readonly type: "card";
+    readonly layout: {
+        readonly container: true;
+        readonly item: true;
+    };
     readonly state: "passthrough";
+    readonly type: "card";
     readonly ui: {
-        readonly label: true;
         readonly description: true;
-    };
-    readonly layout: {
-        readonly item: true;
-        readonly container: true;
+        readonly label: true;
     };
 };

package/dist/runtime/form/fields/card/config.js

@@ -1,7 +1,7 @@
 import { defineFormFieldKind } from "../../utils/field-kind.js";
 export const cardFieldKind = defineFormFieldKind({
-  type: "card",
+  layout: { container: true, item: true },
   state: "passthrough",
-  ui: { label: true, description: true },
-  layout: { item: true, container: true }
+  type: "card",
+  ui: { description: true, label: true }
 });

package/dist/runtime/form/fields/card/types.d.ts

@@ -1,7 +1,7 @@
 import type { FormFieldCallback } from '../../types/callbacks.js';
 import type { FormContainerFieldBase } from '../../types/field-base.js';
 import type { FormRenderable } from '../../types/utils.js';
-export interface FormCardField<TContext = {}, TDeps = {}> extends FormContainerFieldBase<'card', TContext, TDeps> {
+export interface FormCardField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> extends FormContainerFieldBase<'card', TContext, TDeps> {
     header?: FormRenderable | FormFieldCallback<FormRenderable, TContext, TDeps>;
     headerExtra?: FormRenderable | FormFieldCallback<FormRenderable, TContext, TDeps>;
     footer?: FormRenderable | FormFieldCallback<FormRenderable, TContext, TDeps>;

package/dist/runtime/form/fields/cascader/config.d.ts

@@ -1,17 +1,17 @@
 export declare const cascaderFieldKind: {
-    readonly type: "cascader";
-    readonly state: "stateful";
-    readonly ui: {
-        readonly label: true;
-        readonly description: true;
-        readonly hint: true;
-    };
     readonly layout: {
         readonly item: true;
     };
     readonly options: {
         readonly enabled: true;
     };
-    readonly validation: true;
+    readonly state: "stateful";
     readonly transform: true;
+    readonly type: "cascader";
+    readonly ui: {
+        readonly description: true;
+        readonly hint: true;
+        readonly label: true;
+    };
+    readonly validation: true;
 };

package/dist/runtime/form/fields/cascader/config.js

@@ -1,10 +1,10 @@
 import { defineFormFieldKind } from "../../utils/field-kind.js";
 export const cascaderFieldKind = defineFormFieldKind({
-  type: "cascader",
-  state: "stateful",
-  ui: { label: true, description: true, hint: true },
   layout: { item: true },
   options: { enabled: true },
-  validation: true,
-  transform: true
+  state: "stateful",
+  transform: true,
+  type: "cascader",
+  ui: { description: true, hint: true, label: true },
+  validation: true
 });

package/dist/runtime/form/fields/checkbox/component.vue

@@ -1,7 +1,7 @@
 <script setup>
 import UCheckbox from "@nuxt/ui/components/Checkbox.vue";
 import { computed } from "vue";
-import FormFieldShell from "../../components/renderer/FormFieldShell.vue";
+import FormFieldShell from "../../components/renderer/form-field-shell.vue";
 import { useFieldControl } from "../../composables/use-field-control";
 import { useFormFieldBare } from "../../composables/use-form-field-chrome";
 const props = defineProps({

package/dist/runtime/form/fields/checkbox/config.d.ts

@@ -1,14 +1,14 @@
 export declare const checkboxFieldKind: {
-    readonly type: "checkbox";
+    readonly layout: {
+        readonly item: true;
+    };
     readonly state: "stateful";
+    readonly transform: true;
+    readonly type: "checkbox";
     readonly ui: {
-        readonly label: true;
         readonly description: true;
         readonly hint: true;
-    };
-    readonly layout: {
-        readonly item: true;
+        readonly label: true;
     };
     readonly validation: true;
-    readonly transform: true;
 };

package/dist/runtime/form/fields/checkbox/config.js

@@ -1,9 +1,9 @@
 import { defineFormFieldKind } from "../../utils/field-kind.js";
 export const checkboxFieldKind = defineFormFieldKind({
-  type: "checkbox",
-  state: "stateful",
-  ui: { label: true, description: true, hint: true },
   layout: { item: true },
-  validation: true,
-  transform: true
+  state: "stateful",
+  transform: true,
+  type: "checkbox",
+  ui: { description: true, hint: true, label: true },
+  validation: true
 });

package/dist/runtime/form/fields/checkbox/types.d.ts

@@ -1,4 +1,4 @@
 import type { FormStatefulFieldBase } from '../../types/field-base.js';
-export interface FormCheckboxField<TContext = {}, TDeps = {}> extends FormStatefulFieldBase<'checkbox', boolean, TContext, TDeps> {
+export interface FormCheckboxField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>> extends FormStatefulFieldBase<'checkbox', boolean, TContext, TDeps> {
 }
 export type CheckboxFieldOutput = boolean;

package/dist/runtime/form/fields/checkbox-card/component.vue

@@ -1,14 +1,16 @@
 <script setup>
 import UCheckboxGroup from "@nuxt/ui/components/CheckboxGroup.vue";
 import { computed } from "vue";
-import FormFieldShell from "../../components/renderer/FormFieldShell.vue";
+import FormFieldShell from "../../components/renderer/form-field-shell.vue";
 import { useFieldControl } from "../../composables/use-field-control";
 import { formOptionKey } from "../../utils/options";
+import { isBoolean, isNumber, isString, isUndefined } from "../../utils/predicate";
+import { mergeFormUiClass } from "../../utils/ui";
 const props = defineProps({
   field: { type: Object, required: true },
   path: { type: Array, required: true }
 });
-const { form, controlProps, disabled, handleBlur, options } = useFieldControl(
+const { fieldProps, form, controlProps, disabled, handleBlur, options } = useFieldControl(
   () => props.field,
   () => props.path
 );
@@ -24,15 +26,22 @@ const model = computed({
     props.path,
     value.flatMap((key) => {
       const optionValue = valueByKey.value.get(key);
-      return typeof optionValue === "undefined" ? [] : [optionValue];
+      return isUndefined(optionValue) ? [] : [optionValue];
     })
   )
 });
 const items = computed(
   () => options.items.value.map((item) => ({ ...item, value: formOptionKey(item.value) }))
 );
+const groupUi = computed(() => ({
+  ...controlProps.value.ui,
+  fieldset: mergeFormUiClass(
+    controlProps.value.ui?.fieldset,
+    fieldProps.value.orientation === "horizontal" ? "flex-wrap" : void 0
+  )
+}));
 function isOptionValue(value) {
-  return typeof value === "string" || typeof value === "number" || typeof value === "boolean";
+  return isString(value) || isNumber(value) || isBoolean(value);
 }
 </script>
 
@@ -45,9 +54,10 @@ function isOptionValue(value) {
       value-key="value"
       label-key="label"
       description-key="description"
-      :orientation="field.orientation"
+      :orientation="fieldProps.orientation"
+      :ui="groupUi"
       variant="card"
-      :indicator="field.indicator"
+      :indicator="fieldProps.indicator"
       :disabled="disabled"
       @blur="handleBlur"
     />

package/dist/runtime/form/fields/checkbox-card/config.d.ts

@@ -1,17 +1,17 @@
 export declare const checkboxCardFieldKind: {
-    readonly type: "checkbox-card";
-    readonly state: "stateful";
-    readonly ui: {
-        readonly label: true;
-        readonly description: true;
-        readonly hint: true;
-    };
     readonly layout: {
         readonly item: true;
     };
     readonly options: {
         readonly enabled: true;
     };
-    readonly validation: true;
+    readonly state: "stateful";
     readonly transform: true;
+    readonly type: "checkbox-card";
+    readonly ui: {
+        readonly description: true;
+        readonly hint: true;
+        readonly label: true;
+    };
+    readonly validation: true;
 };

package/dist/runtime/form/fields/checkbox-card/config.js

@@ -1,10 +1,10 @@
 import { defineFormFieldKind } from "../../utils/field-kind.js";
 export const checkboxCardFieldKind = defineFormFieldKind({
-  type: "checkbox-card",
-  state: "stateful",
-  ui: { label: true, description: true, hint: true },
   layout: { item: true },
   options: { enabled: true },
-  validation: true,
-  transform: true
+  state: "stateful",
+  transform: true,
+  type: "checkbox-card",
+  ui: { description: true, hint: true, label: true },
+  validation: true
 });

package/dist/runtime/form/fields/checkbox-card/types.d.ts

@@ -1,6 +1,11 @@
-import type { FormCheckboxGroupField, CheckboxGroupFieldOutput } from '../checkbox-group/types.js';
-export interface FormCheckboxCardField<TContext = {}, TDeps = {}> extends Omit<FormCheckboxGroupField<TContext, TDeps>, 'type' | 'variant'> {
-    type: 'checkbox-card';
+import type { FormStatefulFieldBase } from '../../types/field-base.js';
+import type { FieldOptionValue, NullableValue } from '../../types/field-output-utils.js';
+import type { FormOptionConfig, FormOptionItem, FormOptionValue, FormOptionsSource } from '../../types/options.js';
+export interface FormCheckboxCardProps {
+    orientation?: 'horizontal' | 'vertical';
     indicator?: 'start' | 'end' | 'hidden';
 }
-export type CheckboxCardFieldOutput<TField> = CheckboxGroupFieldOutput<TField>;
+export interface FormCheckboxCardField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>, TValue extends FormOptionValue = FormOptionValue, TOption extends FormOptionItem<TValue> = FormOptionItem<TValue>> extends FormStatefulFieldBase<'checkbox-card', readonly TValue[] | null, TContext, TDeps, FormCheckboxCardProps> {
+    options: FormOptionConfig<TOption, TContext, TDeps, readonly TValue[] | null> | FormOptionsSource<TOption, TContext, TDeps, readonly TValue[] | null>;
+}
+export type CheckboxCardFieldOutput<TField> = readonly FieldOptionValue<TField>[] | NullableValue;