[data-slot=field-group]]:gap-4',
- className,
- )}
- {...props}
- />
- )
-}
-
-const fieldVariants = cva(
- 'group/field flex w-full gap-3 data-[invalid=true]:text-destructive',
- {
- variants: {
- orientation: {
- vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],
- horizontal: [
- 'flex-row items-center',
- '[&>[data-slot=field-label]]:flex-auto',
- 'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
- ],
- responsive: [
- 'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',
- '@md/field-group:[&>[data-slot=field-label]]:flex-auto',
- '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
- ],
- },
- },
- defaultVariants: {
- orientation: 'vertical',
- },
- },
-)
-
-function Field({
- className,
- orientation = 'vertical',
- ...props
-}: React.ComponentProps<'div'> & VariantProps
) {
- return (
-
- )
-}
-
-function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
- return (
-
- )
-}
-
-function FieldLabel({
- className,
- ...props
-}: React.ComponentProps) {
- return (
-