Fieldset

1"use client";
2 
3import "./fieldset.css";
4import { Fieldset as BaseFieldset } from "@base-ui/react/fieldset";
5import type React from "react";
6import { cn } from "tailwind-variants";
7 
8import { FieldsetContext, useFieldsetContext } from "./fieldset.context";
9import { fieldsetVariants, type FieldsetVariants } from "./fieldset.variants";
10 
11export type FieldsetProps = FieldsetVariants & React.ComponentProps<typeof BaseFieldset.Root>;
12 
13export const FieldsetRoot = ({ children, className, variant, ...props }: FieldsetProps) => {
14  const slots = fieldsetVariants({ variant });
15 
16  return (
17    <FieldsetContext.Provider value={{ slots }}>
18      <BaseFieldset.Root className={cn(slots.root(), className)} {...props}>
19        {children}
20      </BaseFieldset.Root>
21    </FieldsetContext.Provider>
22  );
23};
24 
25export type FieldsetLegendProps = React.ComponentProps<typeof BaseFieldset.Legend>;
26 
27export const FieldsetLegend = ({ className, ...props }: FieldsetLegendProps) => {
28  const { slots } = useFieldsetContext();
29  return <BaseFieldset.Legend className={cn(slots.legend(), className)} {...props} />;
30};