FieldSet Variants (cva config)

Purpose

fieldSetVariants and fieldLegendVariants are the cva (class-variance-authority) configurations powering <FieldSet> and <FieldLegend>. They are split from field-set.tsx into their own module so an ejected source copy keeps the cva configurations in a dedicated file. Theme overrides flow through useThemedVariants("FieldSet" | "FieldLegend").

These cvas are part of the suaveplan-only <FieldSet> addition (no shadcn upstream) — see field-set.md for the rationale.

Features

<FieldSet> carries flex flex-col gap-3 rounded-md border p-4 so the grouping is visually obvious.
data-[disabled=true]:opacity-70 decay when disabled.
<FieldLegend> is small bold text (text-sm font-semibold) with data-[invalid=true]:text-destructive for the error state.
NEVER uses space-y-* per the shadcn skill rule.

Usage: Basic Example

import { fieldSetVariants, fieldLegendVariants } from "@suaveplan/react-ui";

const fsClass = fieldSetVariants();
const lgClass = fieldLegendVariants();

Usage: Advanced Example

import { fieldSetVariants, cn } from "@suaveplan/react-ui";

export function CustomFieldSet({
    children,
}: {
    children: React.ReactNode;
}) {
    return (
        <fieldset
            className={cn(fieldSetVariants(), "shadow-md ring-1 ring-accent")}
        >
            {children}
        </fieldset>
    );
}

API Reference

`fieldSetVariants(): string`

Returns the fieldset classes.

`fieldLegendVariants(): string`

Returns the legend classes including the data-[invalid=true]:text-destructive selector.

Implementation Notes

The <fieldset> border + padding are intentionally part of the cva default — most <FieldSet> use cases want the visual grouping. Consumers wanting an unstyled fieldset pass className="border-0 p-0" (Tailwind class merging via tailwind-merge resolves the conflict).
The legend's destructive colour is keyed off data-[invalid=true] directly rather than via a group selector so the legend can be used outside a <FieldSet> without losing the error styling.
Per the shadcn skill rule, the cva NEVER uses space-y-* — gap-3 flows the same in RTL.

2.2 KiB Raw Blame History