nuxt-ui-tools 1.17.1 → 1.19.0

package/dist/runtime/form/fields/choice-card/choice-card-label.d.vue.ts

@@ -7,12 +7,19 @@ import type { ChoiceCardMark } from './types.js';
  * semantics. Styled through `ui.tile`, `ui.tileIcon`, `ui.optionIcon`, `ui.check`,
  * `ui.checkIcon`, `ui.switch`, and `ui.switchThumb`; the tile and the switch carry the option
  * value as `data-value` for per-option styling.
+ *
+ * A `compact` card lays itself out as one row inside the grid its label becomes: the icon (or a
+ * smaller tile) beside the title, over a one-line description. Both lines truncate and keep the
+ * full text in their tooltip, and the marks center on the row. The card passes the description
+ * here because the Nuxt UI group would draw it below the icon instead.
  */
 type __VLS_Props = {
     label?: string;
+    description?: string;
     icon?: string;
     value?: string | number | boolean;
     tile: boolean;
+    compact?: boolean;
     mark: ChoiceCardMark;
     selected: boolean;
     ui?: FormControlUi;

package/dist/runtime/form/fields/choice-card/choice-card-label.vue

@@ -3,13 +3,17 @@ import UIcon from "@nuxt/ui/components/Icon.vue";
 import { mergeFormUiClass } from "../../utils/ui";
 defineProps({
   label: { type: String, required: false },
+  description: { type: String, required: false },
   icon: { type: String, required: false },
   value: { type: [String, Number, Boolean], required: false },
   tile: { type: Boolean, required: true },
+  compact: { type: Boolean, required: false },
   mark: { type: String, required: true },
   selected: { type: Boolean, required: true },
   ui: { type: Object, required: false }
 });
+const COMPACT_MARK = "end-2.5 top-1/2 -translate-y-1/2";
+const COMPACT_TILE = "col-start-1 row-span-2 me-2.5 size-7 rounded-md";
 </script>
 
 <template>
@@ -20,6 +24,7 @@ defineProps({
     :class="
   mergeFormUiClass(
     'grid size-8 place-items-center rounded-lg bg-elevated text-muted transition-colors data-[selected]:bg-primary/10 data-[selected]:text-primary',
+    compact ? COMPACT_TILE : void 0,
     ui?.tile
   )
 "
@@ -27,7 +32,26 @@ defineProps({
   >
     <UIcon :name="icon" :class="mergeFormUiClass('size-4', ui?.tileIcon)" aria-hidden="true" />
   </span>
-  <span v-if="!tile && icon" class="inline-flex items-center gap-2">
+  <template v-if="compact">
+    <UIcon
+      v-if="icon && !tile"
+      :name="icon"
+      :class="
+  mergeFormUiClass('col-start-1 row-span-2 me-2.5 size-4 shrink-0 text-muted', ui?.optionIcon)
+"
+      aria-hidden="true"
+    />
+    <span :title="label" class="col-start-2 block truncate" data-choice-title>{{ label }}</span>
+    <span
+      v-if="description"
+      :title="description"
+      class="col-start-2 block truncate text-xs font-normal text-muted"
+      data-choice-description
+    >
+      {{ description }}
+    </span>
+  </template>
+  <span v-else-if="!tile && icon" class="inline-flex items-center gap-2">
     <UIcon
       :name="icon"
       :class="mergeFormUiClass('size-4 shrink-0', ui?.optionIcon)"
@@ -42,6 +66,7 @@ defineProps({
     :class="
   mergeFormUiClass(
     'absolute end-3 top-3 grid size-4 place-items-center rounded-[4px] bg-primary text-inverted',
+    compact ? COMPACT_MARK : void 0,
     ui?.check
   )
 "
@@ -57,6 +82,7 @@ defineProps({
     :class="
   mergeFormUiClass(
     'group/switch absolute end-3 top-3.5 inline-flex h-[18px] w-8 shrink-0 items-center rounded-full bg-accented p-0.5 transition-colors duration-150 data-[state=checked]:bg-primary',
+    compact ? COMPACT_MARK : void 0,
     ui?.switch
   )
 "

package/dist/runtime/form/fields/choice-card/choice-card-label.vue.d.ts

@@ -7,12 +7,19 @@ import type { ChoiceCardMark } from './types.js';
  * semantics. Styled through `ui.tile`, `ui.tileIcon`, `ui.optionIcon`, `ui.check`,
  * `ui.checkIcon`, `ui.switch`, and `ui.switchThumb`; the tile and the switch carry the option
  * value as `data-value` for per-option styling.
+ *
+ * A `compact` card lays itself out as one row inside the grid its label becomes: the icon (or a
+ * smaller tile) beside the title, over a one-line description. Both lines truncate and keep the
+ * full text in their tooltip, and the marks center on the row. The card passes the description
+ * here because the Nuxt UI group would draw it below the icon instead.
  */
 type __VLS_Props = {
     label?: string;
+    description?: string;
     icon?: string;
     value?: string | number | boolean;
     tile: boolean;
+    compact?: boolean;
     mark: ChoiceCardMark;
     selected: boolean;
     ui?: FormControlUi;

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

@@ -1,3 +1,7 @@
+import type { FormOption, FormOptionValue } from '../../types/options.js';
+import type { FormText } from '../../types/utils.js';
+/** Size of the cards: `compact` packs long option lists into smaller, single-row cards. */
+export type FormChoiceCardDensity = 'default' | 'compact';
 /**
  * Presentation of the radio and checkbox cards.
  *
@@ -6,6 +10,9 @@
  * // A fixed grid of cards, each with its icon in a tile above the label and a check in the
  * // corner once selected.
  * props: { columns: '1 md:2 lg:3', icon: 'tile', indicator: 'corner' }
+ *
+ * // Eight options in four groups, as smaller cards with the icon beside a one-line label.
+ * props: { columns: '1 md:2', density: 'compact', icon: 'tile', indicator: 'corner' }
  * ```
  */
 export interface FormChoiceCardProps {
@@ -25,12 +32,39 @@ export interface FormChoiceCardProps {
     indicator?: 'start' | 'end' | 'hidden' | 'corner' | 'switch';
     /**
      * Where an option's `icon` shows: before its label (`inline`, the default), or in a tile above
-     * it (`tile`) that takes the selection color. Style the parts the engine renders with the
+     * it (`tile`) that takes the selection color, beside the label in the `compact` density. Style the parts the engine renders with the
      * `ui` slots `tile`, `tileIcon`, `optionIcon`, `check`, `checkIcon`, `switch`, and
      * `switchThumb`, next to the Nuxt UI slots of the group. The tile and the switch carry the
      * option value as `data-value`, so one option can take its own colors.
      */
     icon?: 'inline' | 'tile';
+    /**
+     * Size of the cards. `compact` shrinks the padding and tile, puts the icon beside the label
+     * instead of above it, and keeps the title and the description on one line each, truncated with
+     * an ellipsis (the full description stays in the card's tooltip). Defaults to `default`.
+     */
+    density?: FormChoiceCardDensity;
+}
+/**
+ * Option of a radio or checkbox card: the shared option shape plus the heading the cards can show.
+ * A card draws its `icon` only, so the avatar, chip and suffix of other option fields are left out.
+ */
+export interface FormChoiceCardOption<TValue extends FormOptionValue = FormOptionValue> extends Omit<FormOption<TValue>, 'avatar' | 'chip' | 'suffix'> {
+    /** Icon shown with the label, inline or in a tile (see `props.icon`). */
+    icon?: string;
+    /**
+     * Heading this option is listed under. Options sharing a heading are listed together, and the
+     * headings follow the order in which they first appear in the options. Options without one
+     * stay together, without a heading. Read from this property for options written inline in the
+     * schema; options a function, a promise or a query returns need `groupKey`.
+     */
+    group?: FormText;
 }
+/** Authored option item accepted by radio and checkbox cards. */
+export type FormChoiceCardOptionItem<TValue extends FormOptionValue = FormOptionValue> = TValue | FormChoiceCardOption<TValue>;
+/** The card layouts: icon before the label, icon tile above it, or one compact row. */
+export type ChoiceCardLayout = 'inline' | 'stacked' | 'compact';
 /** The mark a card draws itself, in place of the Nuxt UI indicator. */
 export type ChoiceCardMark = 'corner' | 'switch' | 'none';
+/** The Nuxt UI group a card field wraps. */
+export type ChoiceCardKind = 'checkbox' | 'radio';

package/dist/runtime/form/fields/choice-card/use-choice-card.d.ts

@@ -1,16 +1,20 @@
 import type { FormControlUi } from '../../types/index.js';
-import type { ChoiceCardMark, FormChoiceCardProps } from './types.js';
+import type { ChoiceCardKind, ChoiceCardMark, FormChoiceCardProps } from './types.js';
 /** Props the card fields render themselves, kept away from the Nuxt UI group. */
 export declare const CHOICE_CARD_PROPS: string[];
 /**
  * Presentation of a radio or checkbox card group: the flowing row or fixed grid of cards, the
- * selection mark, and where option icons go. Returns the props and `ui` slots for the Nuxt UI
- * group, and what the card content renders (`tile`, `mark`).
+ * selection mark, where option icons go, the density, and the headings of grouped options.
+ * Returns the props and `ui` slots for the Nuxt UI group, and what the card content renders
+ * (`compact`, `tile`, `mark`).
  */
 export declare function useChoiceCard(params: {
+    kind: ChoiceCardKind;
     props: () => FormChoiceCardProps;
     ui: () => FormControlUi | undefined;
 }): {
+    compact: import("vue").ComputedRef<boolean>;
+    groupsClass: import("vue").ComputedRef<string>;
     indicator: import("vue").ComputedRef<"end" | "start" | "hidden" | undefined>;
     mark: import("vue").ComputedRef<ChoiceCardMark>;
     orientation: import("vue").ComputedRef<"horizontal" | "vertical" | undefined>;

package/dist/runtime/form/fields/choice-card/use-choice-card.js

@@ -2,7 +2,25 @@ import { computed } from "vue";
 import { useResponsiveValue } from "../../../shared/composables/use-responsive-value.js";
 import { mergeFormUiClass } from "../../utils/ui.js";
 import { CARD_SELECTED_RING } from "../card-selection.js";
-export const CHOICE_CARD_PROPS = ["columns", "icon", "indicator", "orientation"];
+export const CHOICE_CARD_PROPS = ["columns", "density", "icon", "indicator", "orientation"];
+const LAYOUT_UI = {
+  compact: {
+    gap: "gap-2",
+    item: "items-center p-2.5",
+    label: "grid min-w-0 grid-cols-[auto_minmax(0,1fr)] items-center",
+    wrapper: "min-w-0 items-stretch"
+  },
+  inline: { gap: "gap-2.5" },
+  stacked: {
+    gap: "gap-2.5",
+    label: "flex flex-col items-start gap-2.5 font-semibold",
+    wrapper: "flex flex-col items-start gap-1.5"
+  }
+};
+const ICON_UI = {
+  checkbox: void 0,
+  radio: "hidden"
+};
 export function useChoiceCard(params) {
   const columnsValue = useResponsiveValue(() => String(params.props().columns ?? ""));
   const columns = computed(() => {
@@ -13,7 +31,12 @@ export function useChoiceCard(params) {
     const value = params.props().indicator;
     return value === "corner" || value === "switch" ? value : "none";
   });
+  const compact = computed(() => params.props().density === "compact");
   const tile = computed(() => params.props().icon === "tile");
+  const layout = computed(() => {
+    if (compact.value) return "compact";
+    return tile.value ? "stacked" : "inline";
+  });
   const indicator = computed(() => {
     const value = params.props().indicator;
     return value === "corner" || value === "switch" ? "hidden" : value;
@@ -24,36 +47,35 @@ export function useChoiceCard(params) {
   );
   const ui = computed(() => {
     const current = params.ui();
+    const layoutUi = LAYOUT_UI[layout.value];
+    const stacked = layout.value === "stacked";
     return {
       ...current,
       fieldset: mergeFormUiClass(
-        columns.value ? "grid grid-cols-[repeat(var(--nut-choice-columns),minmax(0,1fr))] gap-2.5" : `gap-2.5${orientation.value === "horizontal" ? " flex-wrap" : ""}`,
+        columns.value ? `grid grid-cols-[repeat(var(--nut-choice-columns),minmax(0,1fr))] ${layoutUi.gap}` : `${layoutUi.gap}${orientation.value === "horizontal" ? " flex-wrap" : ""}`,
         current?.fieldset
       ),
       item: mergeFormUiClass(
-        `border-default ${CARD_SELECTED_RING}`,
+        `border-default ${CARD_SELECTED_RING} ${layoutUi.item ?? ""}`,
         mark.value === "none" ? void 0 : "relative",
         current?.item
       ),
-      // The card label renders the option icon itself (inline or as a tile): Nuxt UI's own copy
-      // would show it twice.
-      icon: mergeFormUiClass("hidden", current?.icon),
-      // A tile stacks above the title, and the description below it, with gaps.
-      label: mergeFormUiClass(
-        tile.value ? "flex flex-col items-start gap-2.5 font-semibold" : void 0,
-        current?.label
-      ),
+      icon: mergeFormUiClass(ICON_UI[params.kind], current?.icon),
+      // The heading of a group of options, set above its cards.
+      legend: mergeFormUiClass("mb-2 text-sm font-medium text-muted", current?.legend),
+      label: mergeFormUiClass(layoutUi.label, current?.label),
       // A hidden indicator centers the text: keep it aligned, and clear of an inline corner check.
       wrapper: mergeFormUiClass(
-        tile.value ? "flex flex-col items-start gap-1.5" : void 0,
+        layoutUi.wrapper,
         [
           indicator.value === "hidden" ? "ms-0 text-start" : "",
-          mark.value === "corner" && !tile.value ? "pe-7" : "",
-          mark.value === "switch" && !tile.value ? "pe-12" : ""
+          mark.value === "corner" && !stacked ? "pe-7" : "",
+          mark.value === "switch" && !stacked ? "pe-12" : ""
         ].join(" "),
         current?.wrapper
       )
     };
   });
-  return { indicator, mark, orientation, style, tile, ui };
+  const groupsClass = computed(() => mergeFormUiClass("flex flex-col gap-5", params.ui()?.groups));
+  return { compact, groupsClass, indicator, mark, orientation, style, tile, ui };
 }

package/dist/runtime/form/fields/choice-card/utils.d.ts

@@ -0,0 +1,10 @@
+import type { FormObject } from '../../types/index.js';
+/**
+ * Attributes for the Nuxt UI group at `index` among the groups of one field. Every group carries
+ * the control attributes of the field, but an `id` names a single element: the first group keeps
+ * it, as the control the label points to, and each later group takes `<id>-group-<index>`. The other
+ * attributes (`data-form-field`, `aria-label`) stay on every group, so focus moving from one
+ * group to the next does not leave the field. Attributes without an `id` are returned as they
+ * are: each Nuxt UI group then generates its own.
+ */
+export declare function choiceCardGroupAttrs<TAttrs extends FormObject>(attrs: TAttrs, index: number): TAttrs;

package/dist/runtime/form/fields/choice-card/utils.js

@@ -0,0 +1,6 @@
+import { isString } from "../../utils/predicate.js";
+export function choiceCardGroupAttrs(attrs, index) {
+  const id = attrs.id;
+  if (index === 0 || !isString(id)) return attrs;
+  return { ...attrs, id: `${id}-group-${index}` };
+}

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

@@ -133,15 +133,16 @@ const selectedTreeItems = computed(() => {
   return Array.isArray(selected) ? selected : [selected];
 });
 const treeSelectLabel = computed(() => {
+  const empty = placeholder.value ?? "";
   if (!selectedTreeItems.value.length) {
-    return placeholder.value;
+    return empty;
   }
   if (treeMultiple.value) {
     return selectedTreeItems.value.map((item) => item.pathLabel).join(", ");
   }
   const [selected] = selectedTreeItems.value;
   if (!selected) {
-    return placeholder.value;
+    return empty;
   }
   return props.field.type === "tree-select" && fieldProps.value.showPath ? selected.pathLabel : String(selected.label);
 });

package/dist/runtime/form/fields/index.d.ts

@@ -86,6 +86,7 @@ export declare const formFieldKinds: readonly [{
     };
     readonly options: {
         readonly enabled: true;
+        readonly groups: true;
     };
     readonly state: "stateful";
     readonly transform: true;
@@ -529,6 +530,7 @@ export declare const formFieldKinds: readonly [{
     };
     readonly options: {
         readonly enabled: true;
+        readonly groups: true;
     };
     readonly state: "stateful";
     readonly transform: true;
@@ -545,6 +547,7 @@ export declare const formFieldKinds: readonly [{
     };
     readonly options: {
         readonly enabled: true;
+        readonly groups: true;
     };
     readonly state: "stateful";
     readonly transform: true;
@@ -561,6 +564,7 @@ export declare const formFieldKinds: readonly [{
     };
     readonly options: {
         readonly enabled: true;
+        readonly groups: true;
     };
     readonly state: "stateful";
     readonly transform: true;

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

@@ -2,7 +2,10 @@
 import URadioGroup from "@nuxt/ui/components/RadioGroup.vue";
 import { computed } from "vue";
 import FormFieldShell from "../../components/renderer/form-field-shell.vue";
+import FormOptionChoiceLabel from "../../components/utils/form-option-choice-label.vue";
+import { useChoiceGroupItems } from "../../composables/use-choice-group-items";
 import { useFieldControl } from "../../composables/use-field-control";
+import { formOptionKey } from "../../utils/options";
 import { isBoolean, isNumber, isString } from "../../utils/predicate";
 import { mergeFormUiClass } from "../../utils/ui";
 import { CARD_SELECTED_RING } from "../card-selection";
@@ -24,7 +27,13 @@ const model = computed({
   },
   set: (value) => form.setValue(props.path, value)
 });
-const items = computed(() => [...options.items.value]);
+const renderOption = computed(() => props.field.renderOption);
+const { items, optionOf } = useChoiceGroupItems({
+  custom: () => renderOption.value !== void 0,
+  options,
+  ui: () => controlProps.value.ui,
+  valueOf: (option) => option.value
+});
 const groupUi = computed(() => ({
   ...controlProps.value.ui,
   item: mergeFormUiClass(
@@ -49,6 +58,14 @@ const groupUi = computed(() => ({
       :indicator="fieldProps.indicator"
       :disabled="disabled"
       @blur="handleBlur"
-    />
+    >
+      <template #label="{ item }">
+        <FormOptionChoiceLabel
+          :option="optionOf(formOptionKey(item.value))"
+          :selected="model === item.value"
+          :render="renderOption"
+        />
+      </template>
+    </URadioGroup>
   </FormFieldShell>
 </template>

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

@@ -1,6 +1,6 @@
 import type { FormStatefulFieldBase } from '../../types/field-base.js';
 import type { FieldOptionValue, NullableValue } from '../../types/field-output-utils.js';
-import type { FormOptionItem, FormOptionValue, FormOptionsSource } from '../../types/options.js';
+import type { FormOptionItem, FormOptionRenderers, FormOptionValue, FormOptionsSource } from '../../types/options.js';
 export interface FormRadioProps {
     /**
      * `list` (the default) lines up bare radios, `card` frames each option on its own, and `table`
@@ -11,7 +11,7 @@ export interface FormRadioProps {
     orientation?: 'horizontal' | 'vertical';
     indicator?: 'start' | 'end' | 'hidden';
 }
-export interface FormRadioField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>, TValue extends FormOptionValue = FormOptionValue, TOption extends FormOptionItem<TValue> = FormOptionItem<TValue>> extends FormStatefulFieldBase<'radio', TValue | null, TContext, TDeps, FormRadioProps> {
+export interface FormRadioField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>, TValue extends FormOptionValue = FormOptionValue, TOption extends FormOptionItem<TValue> = FormOptionItem<TValue>> extends FormStatefulFieldBase<'radio', TValue | null, TContext, TDeps, FormRadioProps>, FormOptionRenderers<TOption> {
     options: FormOptionsSource<TOption, TContext, TDeps, TValue | null>;
 }
 export type RadioFieldOutput<TField> = FieldOptionValue<TField> | NullableValue;

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

@@ -3,9 +3,11 @@ import URadioGroup from "@nuxt/ui/components/RadioGroup.vue";
 import { computed } from "vue";
 import FormFieldShell from "../../components/renderer/form-field-shell.vue";
 import { useFieldControl } from "../../composables/use-field-control";
+import { formOptionKey, groupOptions } from "../../utils/options";
 import { isBoolean, isNumber, isString } from "../../utils/predicate";
 import ChoiceCardLabel from "../choice-card/choice-card-label.vue";
 import { CHOICE_CARD_PROPS, useChoiceCard } from "../choice-card/use-choice-card";
+import { choiceCardGroupAttrs } from "../choice-card/utils";
 const props = defineProps({
   field: { type: Object, required: true },
   path: { type: Array, required: true }
@@ -15,7 +17,11 @@ const { fieldProps, form, controlProps, disabled, handleBlur, options } = useFie
   () => props.path,
   { omit: CHOICE_CARD_PROPS }
 );
-const cards = useChoiceCard({ props: () => fieldProps.value, ui: () => controlProps.value.ui });
+const cards = useChoiceCard({
+  kind: "radio",
+  props: () => fieldProps.value,
+  ui: () => controlProps.value.ui
+});
 const model = computed({
   get: () => {
     const value = form.getValue(props.path);
@@ -26,36 +32,60 @@ const model = computed({
   },
   set: (value) => form.setValue(props.path, value)
 });
-const items = computed(() => [...options.items.value]);
+const descriptionByKey = computed(
+  () => new Map(options.items.value.map((item) => [formOptionKey(item.value), item.description]))
+);
+const items = computed(
+  () => options.items.value.map(
+    (item) => cards.compact.value ? { ...item, description: void 0 } : item
+  )
+);
+const groups = computed(() => groupOptions(items.value));
+function selectionOf(group) {
+  return group.items.some((item) => item.value === model.value) ? model.value : void 0;
+}
+function select(value) {
+  if (isString(value) || isNumber(value) || isBoolean(value)) model.value = value;
+}
 </script>
 
 <template>
   <FormFieldShell :field="field" :path="path">
-    <URadioGroup
-      v-model="model"
-      v-bind="controlProps"
-      value-key="value"
-      label-key="label"
-      variant="card"
-      :items="items"
-      :orientation="cards.orientation.value"
-      :indicator="cards.indicator.value"
-      :ui="cards.ui.value"
-      :style="cards.style.value"
-      :disabled="disabled"
-      @blur="handleBlur"
-    >
-      <template #label="{ item }">
-        <ChoiceCardLabel
-          :label="item.label"
-          :icon="item.icon"
-          :value="item.value"
-          :tile="cards.tile.value"
-          :mark="cards.mark.value"
-          :selected="model === item.value"
-          :ui="cards.ui.value"
-        />
-      </template>
-    </URadioGroup>
+    <div :class="cards.groupsClass.value">
+      <URadioGroup
+        v-for="(group, index) in groups"
+        :key="group.key"
+        :model-value="selectionOf(group)"
+        v-bind="choiceCardGroupAttrs(controlProps, index)"
+        value-key="value"
+        label-key="label"
+        variant="card"
+        :legend="group.heading"
+        :items="group.items"
+        :orientation="cards.orientation.value"
+        :indicator="cards.indicator.value"
+        :ui="cards.ui.value"
+        :style="cards.style.value"
+        :disabled="disabled"
+        @update:model-value="select"
+        @blur="handleBlur"
+      >
+        <template #label="{ item }">
+          <ChoiceCardLabel
+            :label="item.label"
+            :description="
+  cards.compact.value ? descriptionByKey.get(formOptionKey(item.value)) : void 0
+"
+            :icon="item.icon"
+            :value="item.value"
+            :tile="cards.tile.value"
+            :compact="cards.compact.value"
+            :mark="cards.mark.value"
+            :selected="model === item.value"
+            :ui="cards.ui.value"
+          />
+        </template>
+      </URadioGroup>
+    </div>
   </FormFieldShell>
 </template>

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

@@ -4,6 +4,7 @@ export declare const radioCardFieldKind: {
     };
     readonly options: {
         readonly enabled: true;
+        readonly groups: true;
     };
     readonly state: "stateful";
     readonly transform: true;

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

@@ -1,7 +1,7 @@
 import { defineFormFieldKind } from "../../utils/field-kind.js";
 export const radioCardFieldKind = defineFormFieldKind({
   layout: { item: true },
-  options: { enabled: true },
+  options: { enabled: true, groups: true },
   state: "stateful",
   transform: true,
   type: "radio-card",

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

@@ -1,8 +1,8 @@
 import type { FormStatefulFieldBase } from '../../types/field-base.js';
 import type { FieldOptionValue, NullableValue } from '../../types/field-output-utils.js';
-import type { FormOptionItem, FormOptionValue, FormOptionsSource } from '../../types/options.js';
-import type { FormChoiceCardProps } from '../choice-card/types.js';
-export interface FormRadioCardField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>, TValue extends FormOptionValue = FormOptionValue, TOption extends FormOptionItem<TValue> = FormOptionItem<TValue>> extends FormStatefulFieldBase<'radio-card', TValue | null, TContext, TDeps, FormChoiceCardProps> {
+import type { FormOptionGrouping, FormOptionValue, FormOptionsSource } from '../../types/options.js';
+import type { FormChoiceCardOptionItem, FormChoiceCardProps } from '../choice-card/types.js';
+export interface FormRadioCardField<TContext = NonNullable<unknown>, TDeps = NonNullable<unknown>, TValue extends FormOptionValue = FormOptionValue, TOption extends FormChoiceCardOptionItem<TValue> = FormChoiceCardOptionItem<TValue>> extends FormStatefulFieldBase<'radio-card', TValue | null, TContext, TDeps, FormChoiceCardProps>, FormOptionGrouping {
     options: FormOptionsSource<TOption, TContext, TDeps, TValue | null>;
 }
 export type RadioCardFieldOutput<TField> = FieldOptionValue<TField> | NullableValue;