mm

packages/ui-web/src/component/checkbox/Checkbox.tsx

@@ -0,0 +1,76 @@
+"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>
+  );
+};