Checkbox Card

"use client";

import { cn } from "cn";
import * as React from "react";

import { Checkbox } from "@/components/ui/checkbox";

type CheckboxCardProps = Omit<
  React.ComponentProps<typeof Checkbox>,
  "children" | "className" | "title"
> & {
  title: React.ReactNode;
  description?: React.ReactNode;
  className?: string;
};

function CheckboxCard({
  className,
  title,
  description,
  disabled,
  ...props
}: CheckboxCardProps) {
  return (
    <label
      data-slot="checkbox-card"
      data-disabled={disabled ? "" : undefined}
      className={cn(
        "group/checkbox-card relative isolate flex w-full before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:ring-inset has-data-checked:before:ring-2 cursor-pointer items-center justify-between gap-3 rounded-[10px] border border-[var(--border-subtle,var(--border))] bg-card py-3 pe-5 ps-4 shadow-[0_1px_1px_0_rgb(0_0_0/0.05)] ring-2 ring-transparent ring-inset transition-[box-shadow] duration-150 ease-[ease] select-none dark:shadow-[0_1px_1px_0_rgb(0_0_0/0.14)] has-data-checked:before:ring-primary has-data-checked:transition-none motion-reduce:transition-none hover:not-data-disabled:not-has-data-checked:ring-[var(--border-hover,var(--border))] data-disabled:cursor-not-allowed data-disabled:opacity-50",
        className
      )}
    >
      <span className="flex min-w-0 flex-col gap-0.5">
        <span className="truncate text-sm leading-5 font-medium text-foreground">
          {title}
        </span>
        {description != null && (
          <span className="truncate text-sm leading-5 font-normal text-muted-foreground">
            {description}
          </span>
        )}
      </span>
      <span className="flex shrink-0 items-center py-1">
        <Checkbox
          disabled={disabled}
          className="data-disabled:opacity-100 group-hover/checkbox-card:not-data-disabled:border-[var(--checkbox-border-hover,var(--ring))] group-hover/checkbox-card:not-data-disabled:data-checked:before:opacity-100 group-hover/checkbox-card:not-data-disabled:data-indeterminate:before:opacity-100"
          {...props}
        />
      </span>
    </label>
  );
}

export { CheckboxCard };
export type { CheckboxCardProps };