77 lines
2.0 KiB
TypeScript
77 lines
2.0 KiB
TypeScript
"use client";
|
|
import * as BUI from "@base-ui/react";
|
|
import { cn } from "tailwind-variants";
|
|
import type { ReactNode } from "react";
|
|
import { itemSizeRecipe } from "../../styles/recipe/ItemSize.recipe";
|
|
import { variantRecipe } from "../../styles/recipe/variant.recipe";
|
|
import { CommonProps } from "../../common/CommonProps";
|
|
import { inlineSizeRecipe } from "../../styles/recipe/IinlineSize.recipe";
|
|
import { CheckIndicatorSvg } from "../../assets/svg/CheckIndicatorSvg";
|
|
import { Slot } from "../../common/Slot";
|
|
|
|
type CheckboxProps = CommonProps & {
|
|
size?: "xs" | "sm" | "md";
|
|
shape?: "square" | "rounded";
|
|
icon?: ReactNode;
|
|
hideIcon?: boolean;
|
|
iconPlaceholder?: boolean;
|
|
};
|
|
|
|
export const Checkbox = (props: CheckboxProps) => {
|
|
const {
|
|
className,
|
|
children,
|
|
size = "sm",
|
|
shape = "square",
|
|
icon,
|
|
hideIcon = false,
|
|
iconPlaceholder = false,
|
|
disabled,
|
|
} = props;
|
|
|
|
const checkboxCls = cn(
|
|
itemSizeRecipe({ size, shape }),
|
|
variantRecipe({ variant: "ghost", disabled }),
|
|
"brand-default",
|
|
className,
|
|
);
|
|
const checkboxRootCls = cn(
|
|
inlineSizeRecipe({
|
|
size,
|
|
shape: "rounded",
|
|
iconOnly: true,
|
|
}),
|
|
"checkbox-root",
|
|
"brand-info",
|
|
);
|
|
const checkIndicatorCls = cn(
|
|
inlineSizeRecipe({
|
|
size,
|
|
shape: "rounded",
|
|
iconOnly: true,
|
|
}),
|
|
"checkbox-indicator",
|
|
);
|
|
const checkIndicatorSvgCls = inlineSizeRecipe({
|
|
size,
|
|
iconOnly: true,
|
|
});
|
|
|
|
const iconCls = cn(inlineSizeRecipe({ size, iconOnly: true }));
|
|
|
|
return (
|
|
<BUI.Field.Root>
|
|
<BUI.Field.Label className={checkboxCls}>
|
|
<BUI.Checkbox.Root className={checkboxRootCls}>
|
|
<BUI.Checkbox.Indicator className={checkIndicatorCls}>
|
|
<CheckIndicatorSvg className={checkIndicatorSvgCls} />
|
|
</BUI.Checkbox.Indicator>
|
|
</BUI.Checkbox.Root>
|
|
{icon && !hideIcon && <Slot className={iconCls}>{icon}</Slot>}
|
|
{hideIcon && iconPlaceholder && <span className={iconCls}></span>}
|
|
{children}
|
|
</BUI.Field.Label>
|
|
</BUI.Field.Root>
|
|
);
|
|
};
|