Fieldset

import { defineConfig, getSchema, type VariantProps } from 'cva';
import { twMerge } from 'tailwind-merge';

export const { cva, cx: cn } = defineConfig({
  hooks: {
    onComplete: (className: string) => twMerge(className),
  },
});

export type { VariantProps };
export { getSchema };

import { Fieldset as FieldsetPrimitive } from '@base-ui/react/fieldset';
import type * as React from 'react';
import { cn } from '@/lib/utils';

/**
 * Groups a shared legend with related controls.
 * 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}
    />
  );
}