Dashboard/ui/components/Checkbox/Checkbox.tsx

"use client";
/*
 * Documentation:
 * Checkbox — https://app.subframe.com/f023064a5ca0/library?component=Checkbox_3816e3b5-c48c-499b-b45e-0777c6972523
 */

import React from "react";
import { FeatherCheck } from "@subframe/core";
import { FeatherMinus } from "@subframe/core";
import * as SubframeCore from "@subframe/core";
import * as SubframeUtils from "../../utils";

export interface CheckboxRootProps
  extends React.ComponentProps<typeof SubframeCore.Checkbox.Root> {
  label?: React.ReactNode;
  disabled?: boolean;
  checked?: boolean;
  error?: boolean;
  description?: React.ReactNode;
  helpText?: React.ReactNode;
  indeterminate?: boolean;
  hideLabel?: boolean;
  onCheckedChange?: (checked: boolean) => void;
  className?: string;
}

const CheckboxRoot = React.forwardRef<HTMLButtonElement, CheckboxRootProps>(
  function CheckboxRoot(
    {
      label,
      disabled = false,
      checked = false,
      error = false,
      description,
      helpText,
      indeterminate = false,
      hideLabel = false,
      className,
      ...otherProps
    }: CheckboxRootProps,
    ref
  ) {
    return (
      <SubframeCore.Checkbox.Root
        checked={checked}
        disabled={disabled}
        asChild={true}
        {...otherProps}
      >
        <button
          className={SubframeUtils.twClassNames(
            "group/3816e3b5 flex cursor-pointer items-start justify-between text-left",
            className
          )}
          ref={ref}
        >
          <div
            className={SubframeUtils.twClassNames("flex items-center pt-0.5", {
              "px-0 py-0": hideLabel,
            })}
          >
            <div
              className={SubframeUtils.twClassNames(
                "flex h-4 w-4 flex-none flex-col items-center justify-center gap-2 rounded-sm border-2 border-solid border-border-strong bg-surface-neutral-secondary group-hover/3816e3b5:border-2 group-hover/3816e3b5:border-solid group-hover/3816e3b5:border-brand-brand-border-solid-hover group-focus-within/3816e3b5:shadow-focus group-aria-[checked=true]/3816e3b5:border-2 group-aria-[checked=true]/3816e3b5:border-solid group-aria-[checked=true]/3816e3b5:border-brand-brand-border-solid-default group-aria-[checked=true]/3816e3b5:bg-brand-brand-surface-solid-default group-hover/3816e3b5:group-aria-[checked=true]/3816e3b5:bg-brand-brand-surface-solid-hover group-disabled/3816e3b5:border group-disabled/3816e3b5:border-solid group-disabled/3816e3b5:border-border-disabled group-disabled/3816e3b5:bg-surface-neutral-disabled",
                {
                  "border-2 border-solid border-border-negative-solid group-hover/3816e3b5:border-2 group-hover/3816e3b5:border-solid group-hover/3816e3b5:border-border-negative-solid":
                    error,
                }
              )}
            >
              {indeterminate ? (
                <FeatherMinus
                  className={SubframeUtils.twClassNames(
                    "hidden text-body-extra-small-semibold-150 font-body-extra-small-semibold-150 text-icon-neutral-on-solid group-aria-[checked=true]/3816e3b5:inline-flex group-disabled/3816e3b5:text-icon-neutral-disabled",
                    { "inline-flex": indeterminate }
                  )}
                />
              ) : (
                <FeatherCheck
                  className={SubframeUtils.twClassNames(
                    "hidden text-body-extra-small-semibold-150 font-body-extra-small-semibold-150 text-icon-neutral-on-solid group-aria-[checked=true]/3816e3b5:inline-flex group-disabled/3816e3b5:text-icon-neutral-disabled",
                    { "inline-flex": indeterminate }
                  )}
                />
              )}
            </div>
            <div
              className={SubframeUtils.twClassNames(
                "hidden h-4 w-4 flex-none flex-col items-center justify-center gap-2 rounded-round border-2 border-solid border-border-strong bg-surface-neutral-secondary group-hover/3816e3b5:border-brand-brand-border-solid-hover group-focus-within/3816e3b5:shadow-focus group-aria-[checked=true]/3816e3b5:border-2 group-aria-[checked=true]/3816e3b5:border-solid group-aria-[checked=true]/3816e3b5:border-brand-brand-border-solid-default group-disabled/3816e3b5:border-2 group-disabled/3816e3b5:border-solid group-disabled/3816e3b5:border-border-disabled group-disabled/3816e3b5:bg-surface-neutral-disabled",
                {
                  "border-2 border-solid border-border-negative-solid group-hover/3816e3b5:border-border-negative-solid":
                    error,
                }
              )}
            >
              <div
                className={SubframeUtils.twClassNames(
                  "hidden h-2 w-2 flex-none items-start rounded-round bg-brand-brand-surface-solid-default group-hover/3816e3b5:bg-brand-brand-surface-solid-hover group-aria-[checked=true]/3816e3b5:flex group-disabled/3816e3b5:bg-icon-neutral-disabled",
                  {
                    "bg-surface-feedback-solid-negative-default group-hover/3816e3b5:bg-surface-feedback-solid-negative-hover":
                      error,
                  }
                )}
              />
            </div>
          </div>
          <div
            className={SubframeUtils.twClassNames(
              "flex flex-col items-start pl-2 group-hover/3816e3b5:grow group-hover/3816e3b5:shrink-0 group-hover/3816e3b5:basis-0",
              { hidden: hideLabel }
            )}
          >
            {label ? (
              <span
                className={SubframeUtils.twClassNames(
                  "text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-primary group-disabled/3816e3b5:text-text-neutral-disabled",
                  { "text-text-feedback-negative": error }
                )}
              >
                {label}
              </span>
            ) : null}
            {description ? (
              <span className="text-body-extra-small-regular-150 font-body-extra-small-regular-150 text-text-neutral-tertiary group-disabled/3816e3b5:text-text-neutral-disabled">
                {description}
              </span>
            ) : null}
            {helpText ? (
              <span
                className={SubframeUtils.twClassNames(
                  "text-body-extra-small-regular-150 font-body-extra-small-regular-150 text-text-neutral-tertiary",
                  { "text-text-feedback-negative": error }
                )}
              >
                {helpText}
              </span>
            ) : null}
          </div>
        </button>
      </SubframeCore.Checkbox.Root>
    );
  }
);

export const Checkbox = CheckboxRoot;