Field

1'use client';
2 
3import { Fieldset as FieldsetPrimitive } from '@base-ui/react/fieldset';
4import { type VariantProps, cva } from 'class-variance-authority';
5import * as React from 'react';
6 
7import { Label } from '@/components/ui/label';
8import { Separator } from '@/components/ui/separator';
9import { cn } from '@/lib/utils';
10 
11function FieldSet({ className, ...props }: FieldsetPrimitive.Root.Props) {
12  return (
13    <FieldsetPrimitive.Root
14      data-slot="field-set"
15      className={cn('flex flex-col', className)}
16      {...props}
17    />
18  );
19}
20 
21function FieldLegend({
22  className,
23  variant = 'legend',
24  ...props
25}: FieldsetPrimitive.Legend.Props & { variant?: 'legend' | 'label' }) {
26  return (
27    <FieldsetPrimitive.Legend
28      data-slot="field-legend"
29      data-variant={variant}
30      className={cn('text-fg-secondary', className)}
31      {...props}
32    />
33  );
34}
35 
36function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
37  return (
38    <div
39      data-slot="field-group"
40      className={cn(
41        'group/field-group @container/field-group flex w-full flex-col gap-7 [&>[data-slot=field-group]]:gap-4',
42        className,
43      )}
44      {...props}
45    />
46  );
47}
48 
49const fieldVariants = cva(
50  'group/field flex w-full gap-3 data-[invalid=true]:text-status-error',
51  {
52    variants: {
53      orientation: {
54        vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],
55        horizontal: [
56          'flex-row items-center',
57          '[&>[data-slot=field-label]]:flex-auto',
58          'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
59          'has-[>[data-slot=radio-group-item]]:gap-1 has-[>[data-size=lg][data-slot=radio-group-item]]:gap-2',
60        ],
61        responsive: [
62          'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',
63          '@md/field-group:[&>[data-slot=field-label]]:flex-auto',
64          '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
65          '@md/field-group:has-[>[data-slot=radio-group-item]]:gap-1 @md/field-group:has-[>[data-size=lg][data-slot=radio-group-item]]:gap-2',
66        ],
67      },
68    },
69    defaultVariants: {
70      orientation: 'vertical',
71    },
72  },
73);
74 
75function Field({
76  className,
77  orientation = 'vertical',
78  ...props
79// … truncated