Fieldset

import { defineConfig, type VariantProps } from 'cva';import { twMerge } from 'tailwind-merge';export const {  compose,  cva,  cx: cn,} = defineConfig({  hooks: {    onComplete: (className: string) => twMerge(className),  },});export type { VariantProps };

import { Fieldset as FieldsetPrimitive } from '@base-ui/react/fieldset';import type * as React from 'react';import { cn } from '@/lib/utils';/** * Groups the fieldset legend and the associated fields. * Renders a `<fieldset>` element. * * Documentation: [Caprice UI Fieldset](https://caprice-ui.com/docs/components/fieldset) * * API Reference: [Base UI Fieldset](https://base-ui.com/react/components/fieldset#root) */export namespace Root {  export type Props = React.ComponentProps<typeof FieldsetPrimitive.Root>;  export type State = FieldsetPrimitive.Root.State;}export function Root({ className, ...props }: Root.Props) {  return (    <FieldsetPrimitive.Root      className={cn(        'flex flex-col gap-6',        'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',        className      )}      data-slot="fieldset"      {...props}    />  );}/** * An accessible label that is automatically associated with the fieldset. * Renders a `<div>` element. * * Documentation: [Caprice UI Fieldset](https://caprice-ui.com/docs/components/fieldset) * * API Reference: [Base UI Fieldset](https://base-ui.com/react/components/fieldset#legend) */export namespace Legend {  export type State = FieldsetPrimitive.Legend.State;  export type Props = React.ComponentProps<typeof FieldsetPrimitive.Legend>;}export function Legend({ className, ...props }: Legend.Props) {  return (    <FieldsetPrimitive.Legend      className={cn('font-medium text-base', className)}      data-slot="fieldset-legend"      {...props}    />  );}