73 lines
3.2 KiB
TypeScript
73 lines
3.2 KiB
TypeScript
// // "use client";
|
|
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "~/components/ui/card";
|
|
import { RadioGroupIndicator, RadioGroupItem, type RadioGroupItemProps } from "@radix-ui/react-radio-group";
|
|
import { CircleIcon } from "~/components/ui/icons/vendor";
|
|
import type { ComponentProps, HTMLAttributes } from "react";
|
|
import { RadioGroup } from "~/components/ui/radio-group";
|
|
import { cn } from "~/lib/utils";
|
|
|
|
export type ChoiceboxProps = ComponentProps<typeof RadioGroup>;
|
|
|
|
export const Choicebox = ({ className, ...props }: ChoiceboxProps) => <RadioGroup className={cn("w-full", className)} {...props} />;
|
|
|
|
export type ChoiceboxItemProps = RadioGroupItemProps;
|
|
|
|
export const ChoiceboxItem = ({ className, children, ...props }: ChoiceboxItemProps) => (
|
|
<RadioGroupItem
|
|
className={cn(
|
|
"text-left",
|
|
'[&[data-state="checked"]]:border-foreground/30'
|
|
// '[&[data-state="checked"]]:bg-primary-foreground'
|
|
)}
|
|
asChild
|
|
{...props}
|
|
>
|
|
<Card className={cn("flex cursor-pointer flex-row items-center justify-between rounded-md p-4 shadow-none transition-all", className)}>{children}</Card>
|
|
</RadioGroupItem>
|
|
);
|
|
|
|
export type ChoiceboxItemHeaderProps = ComponentProps<typeof CardHeader>;
|
|
|
|
export const ChoiceboxItemHeader = ({ className, ...props }: ComponentProps<typeof CardHeader>) => (
|
|
<CardHeader className={cn("flex-1 gap-0 p-0", className)} {...props} />
|
|
);
|
|
|
|
export type ChoiceboxItemTitleProps = ComponentProps<typeof CardTitle>;
|
|
|
|
export const ChoiceboxItemTitle = ({ className, ...props }: ChoiceboxItemTitleProps) => (
|
|
<CardTitle className={cn("flex items-center gap-2 text-sm font-medium [&[data-state='checked']]:font-bold", className)} {...props} />
|
|
);
|
|
|
|
export type ChoiceboxItemSubtitleProps = HTMLAttributes<HTMLSpanElement>;
|
|
|
|
export const ChoiceboxItemSubtitle = ({ className, ...props }: ChoiceboxItemSubtitleProps) => (
|
|
<span className={cn("text-text-neutral-tertiary text-xs font-normal", className)} {...props} />
|
|
);
|
|
|
|
export type ChoiceboxItemDescriptionProps = ComponentProps<typeof CardDescription>;
|
|
|
|
export const ChoiceboxItemDescription = ({ className, ...props }: ChoiceboxItemDescriptionProps) => (
|
|
<CardDescription className={cn("text-sm", className)} {...props} />
|
|
);
|
|
|
|
export type ChoiceboxItemContentProps = ComponentProps<typeof CardContent>;
|
|
|
|
export const ChoiceboxItemContent = ({ className, ...props }: ChoiceboxItemContentProps) => (
|
|
<CardContent
|
|
className={cn(
|
|
"border-border-strong text-primary focus-visible:border-brand-brand-border-solid-default focus-visible:shadow-focus aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 flex aspect-square size-4 shrink-0 items-center justify-center rounded-full border p-0 shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
);
|
|
|
|
export type ChoiceboxItemIndicatorProps = ComponentProps<typeof RadioGroupIndicator>;
|
|
|
|
export const ChoiceboxItemIndicator = ({ className, ...props }: ChoiceboxItemIndicatorProps) => (
|
|
<RadioGroupIndicator asChild {...props}>
|
|
<CircleIcon className={cn("fill-primary size-2", className)} />
|
|
</RadioGroupIndicator>
|
|
);
|