142 lines
6.4 KiB
TypeScript
142 lines
6.4 KiB
TypeScript
"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="flex h-5 items-center">
|
|
<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;
|