Ubuntu
83 lines
1.8 KiB
TypeScript
83 lines
1.8 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
import * as RadioPrimitive from "@radix-ui/react-radio-group";
|
|
import { cva, VariantProps } from "class-variance-authority";
|
|
|
|
const radioVariants = cva("border-border border-2", {
|
|
variants: {
|
|
variant: {
|
|
default: "",
|
|
outline: "",
|
|
solid: "",
|
|
},
|
|
size: {
|
|
sm: "h-4 w-4",
|
|
md: "h-5 w-5",
|
|
lg: "h-6 w-6",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: "default",
|
|
size: "md",
|
|
},
|
|
});
|
|
|
|
const radioIndicatorVariants = cva("flex ", {
|
|
variants: {
|
|
variant: {
|
|
default: "bg-primary border-2 border-border",
|
|
outline: "border-2 border-border",
|
|
solid: "bg-border",
|
|
},
|
|
size: {
|
|
sm: "h-2 w-2",
|
|
md: "h-2.5 w-2.5",
|
|
lg: "h-3.5 w-3.5",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: "default",
|
|
size: "md",
|
|
},
|
|
});
|
|
|
|
interface RadioGroupProps
|
|
extends React.ComponentProps<typeof RadioPrimitive.Root> {}
|
|
|
|
export const RadioGroupRoot = ({ className, ...props }: RadioGroupProps) => (
|
|
<RadioPrimitive.Root className={cn("grid gap-2", className)} {...props} />
|
|
);
|
|
|
|
interface RadioProps
|
|
extends React.ComponentProps<typeof RadioPrimitive.Item>,
|
|
VariantProps<typeof radioVariants> {}
|
|
|
|
export const RadioItem = ({
|
|
children,
|
|
className,
|
|
size,
|
|
variant,
|
|
...props
|
|
}: RadioProps) => (
|
|
<RadioPrimitive.Item
|
|
{...props}
|
|
className={cn(
|
|
radioVariants({
|
|
size,
|
|
variant,
|
|
}),
|
|
className,
|
|
)}
|
|
>
|
|
<RadioPrimitive.Indicator className="flex justify-center items-center">
|
|
<span className={radioIndicatorVariants({ size, variant })}></span>
|
|
</RadioPrimitive.Indicator>
|
|
{children}
|
|
</RadioPrimitive.Item>
|
|
);
|
|
|
|
const RadioComponent = Object.assign(RadioGroupRoot, {
|
|
Item: RadioItem,
|
|
});
|
|
|
|
export { RadioComponent as RadioGroup };
|