Checkbox card

"use client";

import * as React from "react";
import { Checkbox } from "@/components/ui/checkbox";
import { cn } from "@/lib/utils";

type CheckboxCardProps = Omit<React.ComponentProps<"label">, "title" | "onChange"> & {
  /** The card's title. Also the checkbox's accessible name. */
  title: React.ReactNode;
  /** One line under the title. Also the checkbox's description. */
  description?: React.ReactNode;
  /** Mono meta line at the bottom, for example a price or a count. */
  meta?: React.ReactNode;
  /** Controlled checked state. */
  checked?: boolean;
  /** Starting state for the uncontrolled form. */
  defaultChecked?: boolean;
  /** Fires with the next boolean on every toggle. */
  onCheckedChange?: (checked: boolean) => void;
  /** Disables the checkbox and fades the whole card. */
  disabled?: boolean;
  /** Form field name, forwarded to the checkbox. */
  name?: string;
  /** Form field value, forwarded to the checkbox. */
  value?: string;
};

/**
 * A selectable card. The whole card is the label, so clicking anywhere toggles it.
 * Checked shows as a foreground border and a soft fill; keyboard focus rings the card.
 */
export function CheckboxCard({
  title,
  description,
  meta,
  checked,
  defaultChecked,
  onCheckedChange,
  disabled,
  name,
  value,
  className,
  ...props
}: CheckboxCardProps) {
  const id = React.useId();
  const titleId = `${id}-title`;
  const descriptionId = description ? `${id}-description` : undefined;

  return (
    <label
      data-slot="checkbox-card"
      className={cn(
        "group/field-label relative flex cursor-pointer gap-3 rounded-lg border bg-card p-3 text-left transition-colors duration-100 ease-out",
        "hover:bg-accent/40 has-[:focus-visible]:border-ring has-[:focus-visible]:ring-3 has-[:focus-visible]:ring-ring/50",
        "has-data-[state=checked]:border-foreground/40 has-data-[state=checked]:bg-muted/40",
        "has-data-disabled:cursor-not-allowed has-data-disabled:bg-card/60",
        className,
      )}
      {...props}
    >
      <Checkbox
        className="mt-0.5 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
        checked={checked}
        defaultChecked={defaultChecked}
        onCheckedChange={(next) => onCheckedChange?.(next === true)}
        disabled={disabled}
        name={name}
        value={value}
        aria-labelledby={titleId}
        aria-describedby={descriptionId}
      />
      <span className="flex min-w-0 flex-1 flex-col gap-0.5">
        <span
          id={titleId}
          className="text-sm leading-5 font-medium text-foreground group-has-data-disabled/field-label:text-muted-foreground"
        >
          {title}
        </span>
        {description ? (
          <span
            id={descriptionId}
            className="text-sm text-foreground/70 group-has-data-disabled/field-label:text-muted-foreground"
          >
            {description}
          </span>
        ) : null}
        {meta ? (
          <span className="mt-1 font-mono text-xs text-foreground/70 group-has-data-disabled/field-label:text-muted-foreground">
            {meta}
          </span>
        ) : null}
      </span>
    </label>
  );
}

type CheckboxCardGroupProps = React.ComponentProps<"div"> & {
  /** Columns from the md container width (448px) for 2, the lg width (512px) for 3. One below. */
  columns?: 1 | 2 | 3;
};

/** A grid of cards with gap-2. Give it an aria-label so the group has a name. */
export function CheckboxCardGroup({ columns = 1, className, ...props }: CheckboxCardGroupProps) {
  return (
    <div
      role="group"
      data-slot="checkbox-card-group"
      className={cn(
        "@container grid w-full gap-2",
        columns === 2 && "@md:grid-cols-2",
        columns === 3 && "@lg:grid-cols-3",
        className,
      )}
      {...props}
    />
  );
}