'use client'; import { Label } from '@/ui/components/shadcn/label'; import { cn } from '@/ui/components/shadcn/lib/utils'; import { Separator } from '@/ui/components/shadcn/separator'; import { cva, type VariantProps } from 'class-variance-authority'; import { useMemo } from 'react'; function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) { return (
[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3', className )} {...props} /> ); } function FieldLegend({ className, variant = 'legend', ...props }: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) { return ( ); } function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) { return (
); } const fieldVariants = cva( 'group/field flex w-full gap-2 data-[invalid=true]:text-destructive', { variants: { orientation: { vertical: 'flex-col *:w-full [&>.sr-only]:w-auto', horizontal: 'flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px', responsive: 'flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @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 (