feat: checkbox styled layer

Author: malangcat

docs/registry/ui/checkbox.tsx

@@ -1,93 +1,25 @@
 "use client";
 
-import {
-  type UseCheckboxProps,
-  useCheckbox,
-} from "@seed-design/react-checkbox";
-import {
-  type CheckboxVariantProps,
-  checkbox,
-} from "@seed-design/recipe/checkbox";
-import clsx from "clsx";
+import IconCheckmarkFatFill from "@daangn/react-monochrome-icon/IconCheckmarkFatFill";
+import { Checkbox as SeedCheckbox } from "@seed-design/react";
 import * as React from "react";
-import type { CSSProperties } from "react";
-import {
-  IconCheckmarkFatFill,
-  IconMinusFatFill,
-} from "@daangn/react-monochrome-icon";
 
 import "@seed-design/stylesheet/checkbox.css";
 
-type Assign<T, U> = Omit<T, keyof U> & U;
-
-const visuallyHidden: CSSProperties = {
-  border: 0,
-  clip: "rect(0 0 0 0)",
-  height: "1px",
-  margin: "-1px",
-  overflow: "hidden",
-  padding: 0,
-  position: "absolute",
-  whiteSpace: "nowrap",
-  width: "1px",
-};
-
-export interface CheckboxProps extends CheckboxVariantProps {
-  label: React.ReactNode;
+export interface CheckboxProps extends SeedCheckbox.RootProps {
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+  rootRef?: React.Ref<HTMLLabelElement>;
 }
 
-interface ReactCheckboxProps
-  extends Omit<
-      Assign<React.InputHTMLAttributes<HTMLInputElement>, UseCheckboxProps>,
-      "size"
-    >,
-    CheckboxProps {}
-
-export const Checkbox = React.forwardRef<HTMLInputElement, ReactCheckboxProps>(
-  (
-    {
-      className,
-      size = "medium",
-      label,
-      bold = false,
-      indeterminate = false,
-      variant = "square",
-      ...otherProps
-    },
-    ref,
-  ) => {
-    const { stateProps, restProps, controlProps, hiddenInputProps, rootProps } =
-      useCheckbox(otherProps);
-
-    const classNames = checkbox({ size, bold, indeterminate, variant });
-
+export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ inputProps, rootRef, ...otherProps }, ref) => {
     return (
-      <label className={clsx(classNames.root, className)} {...rootProps}>
-        <div {...controlProps} className={classNames.control}>
-          {!indeterminate ? (
-            <IconCheckmarkFatFill
-              aria-hidden
-              {...stateProps}
-              className={classNames.icon}
-            />
-          ) : (
-            <IconMinusFatFill
-              aria-hidden
-              {...stateProps}
-              className={classNames.icon}
-            />
-          )}
-        </div>
-        <input
-          ref={ref}
-          {...hiddenInputProps}
-          {...restProps}
-          style={visuallyHidden}
-        />
-        <span {...stateProps} className={classNames.label}>
-          {label}
-        </span>
-      </label>
+      <SeedCheckbox.Root ref={rootRef} {...otherProps}>
+        <SeedCheckbox.Control>
+          <SeedCheckbox.CheckedIcon svg={<IconCheckmarkFatFill />} />
+        </SeedCheckbox.Control>
+        <SeedCheckbox.HiddenInput ref={ref} {...inputProps} />
+      </SeedCheckbox.Root>
     );
   },
 );

packages/react-headless/checkbox/package.json

@@ -27,7 +27,8 @@
   },
   "dependencies": {
     "@radix-ui/react-use-controllable-state": "1.0.1",
-    "@seed-design/dom-utils": "0.0.0-alpha-20241030023710"
+    "@seed-design/dom-utils": "0.0.0-alpha-20241030023710",
+    "@seed-design/react-primitive": "0.0.0"
   },
   "devDependencies": {
     "nanobundle": "^1.6.0"

packages/react-headless/checkbox/src/Checkbox.namespace.ts

@@ -0,0 +1,8 @@
+export {
+  CheckboxRoot as Root,
+  CheckboxControl as Control,
+  CheckboxHiddenInput as HiddenInput,
+  type CheckboxRootProps as RootProps,
+  type CheckboxControlProps as ControlProps,
+  type CheckboxHiddenInputProps as HiddenInputProps,
+} from "./Checkbox";

packages/react-headless/checkbox/src/Checkbox.tsx

@@ -0,0 +1,61 @@
+import { mergeProps } from "@seed-design/dom-utils";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import type * as React from "react";
+import { forwardRef, useMemo } from "react";
+import { useCheckbox, type UseCheckboxProps } from "./useCheckbox";
+import { CheckboxProvider, useCheckboxContext } from "./useCheckboxContext";
+
+export interface CheckboxRootProps
+  extends UseCheckboxProps,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLLabelElement> {}
+
+export const CheckboxRoot = forwardRef<HTMLLabelElement, CheckboxRootProps>((props, ref) => {
+  const { checked, defaultChecked, disabled, invalid, onCheckedChange, required, ...otherProps } =
+    props;
+
+  const api = useMemo(
+    () =>
+      useCheckbox({
+        checked,
+        defaultChecked,
+        disabled,
+        invalid,
+        onCheckedChange,
+        required,
+      }),
+    [checked, defaultChecked, disabled, invalid, required],
+  );
+  const mergedProps = mergeProps(api.rootProps, otherProps);
+
+  return (
+    <CheckboxProvider value={api}>
+      <Primitive.label ref={ref} {...mergedProps} />
+    </CheckboxProvider>
+  );
+});
+CheckboxRoot.displayName = "CheckboxRoot";
+
+export interface CheckboxControlProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const CheckboxControl = forwardRef<HTMLDivElement, CheckboxControlProps>((props, ref) => {
+  const { controlProps } = useCheckboxContext();
+  const mergedProps = mergeProps(controlProps, props);
+  return <Primitive.div ref={ref} {...mergedProps} />;
+});
+CheckboxControl.displayName = "CheckboxControl";
+
+export interface CheckboxHiddenInputProps
+  extends PrimitiveProps,
+    React.InputHTMLAttributes<HTMLInputElement> {}
+
+export const CheckboxHiddenInput = forwardRef<HTMLInputElement, CheckboxHiddenInputProps>(
+  (props, ref) => {
+    const { hiddenInputProps } = useCheckboxContext();
+    const mergedProps = mergeProps(hiddenInputProps, props);
+    return <Primitive.input ref={ref} {...mergedProps} />;
+  },
+);
+CheckboxHiddenInput.displayName = "CheckboxHiddenInput";

packages/react-headless/checkbox/src/index.ts

@@ -1,134 +1,12 @@
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import { useState } from "react";
-
-import { dataAttr, elementProps, inputProps, labelProps } from "@seed-design/dom-utils";
-
-export interface UseCheckboxStateProps {
-  checked?: boolean;
-
-  defaultChecked?: boolean;
-
-  onCheckedChange?: (checked: boolean) => void;
-}
-
-export function useCheckboxState(props: UseCheckboxStateProps) {
-  const [isChecked, setIsChecked] = useControllableState({
-    prop: props.checked,
-    defaultProp: props.defaultChecked,
-    onChange: props.onCheckedChange,
-  });
-  const [isHovered, setIsHovered] = useState(false);
-  const [isActive, setIsActive] = useState(false);
-  const [isFocused, setIsFocused] = useState(false);
-  const [isFocusVisible, setIsFocusVisible] = useState(false);
-
-  return {
-    isChecked,
-    setIsChecked,
-    isHovered,
-    setIsHovered,
-    isActive,
-    setIsActive,
-    isFocused,
-    setIsFocused,
-    isFocusVisible,
-    setIsFocusVisible,
-  };
-}
-
-export interface UseCheckboxProps extends UseCheckboxStateProps {
-  disabled?: boolean;
-
-  invalid?: boolean;
-}
-
-export function useCheckbox(props: UseCheckboxProps) {
-  const { checked, defaultChecked, disabled, invalid, onCheckedChange, ...restProps } = props;
-
-  const {
-    setIsChecked,
-    isChecked,
-    setIsHovered,
-    isHovered,
-    setIsActive,
-    isActive,
-    setIsFocused,
-    isFocused,
-    setIsFocusVisible,
-    isFocusVisible,
-  } = useCheckboxState(props);
-
-  const stateProps = {
-    "data-checked": dataAttr(isChecked),
-    "data-hover": dataAttr(isHovered),
-    "data-active": dataAttr(isActive),
-    "data-focus": dataAttr(isFocused),
-    "data-focus-visible": dataAttr(isFocusVisible),
-    "data-disabled": dataAttr(props.disabled),
-    disabled,
-  };
-
-  const isControlled = checked != null;
-
-  return {
-    isChecked,
-    setIsChecked,
-    isFocused,
-    setIsFocused,
-    setIsFocusVisible,
-
-    restProps,
-    stateProps,
-    rootProps: labelProps({
-      ...stateProps,
-      onPointerMove() {
-        setIsHovered(true);
-      },
-      onPointerDown() {
-        setIsActive(true);
-      },
-      onPointerUp() {
-        setIsActive(false);
-      },
-      onPointerLeave() {
-        setIsHovered(false);
-        setIsActive(false);
-      },
-    }),
-
-    controlProps: elementProps({
-      ...stateProps,
-      "aria-hidden": true,
-    }),
-
-    hiddenInputProps: inputProps({
-      type: "checkbox",
-      defaultChecked,
-      checked: isControlled ? isChecked : undefined,
-      "aria-invalid": invalid,
-      ...stateProps,
-      onChange(event) {
-        setIsChecked(event.currentTarget.checked);
-        setIsFocusVisible(event.target.matches(":focus-visible"));
-      },
-      onFocus(event) {
-        setIsFocused(true);
-        setIsFocusVisible(event.target.matches(":focus-visible"));
-      },
-      onBlur() {
-        setIsFocused(false);
-        setIsFocusVisible(false);
-      },
-      onKeyDown(event) {
-        if (event.key === " ") {
-          setIsActive(true);
-        }
-      },
-      onKeyUp(event) {
-        if (event.key === " ") {
-          setIsActive(false);
-        }
-      },
-    }),
-  };
-}
+export {
+  CheckboxRoot,
+  CheckboxControl,
+  CheckboxHiddenInput,
+  type CheckboxRootProps,
+  type CheckboxControlProps,
+  type CheckboxHiddenInputProps,
+} from "./Checkbox";
+
+export { useCheckboxContext, type UseCheckboxContext } from "./useCheckboxContext";
+
+export * as Checkbox from "./Checkbox.namespace";

packages/react-headless/checkbox/src/useCheckbox.test.tsx

@@ -3,10 +3,15 @@ import { cleanup, render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
+import type * as React from "react";
 import type { ReactElement } from "react";
-import * as React from "react";
 
-import { useCheckbox, type UseCheckboxProps } from "./index";
+import {
+  CheckboxControl,
+  CheckboxHiddenInput,
+  CheckboxRoot,
+  type CheckboxRootProps,
+} from "./Checkbox";
 
 afterEach(cleanup);
 
@@ -17,16 +22,12 @@ function setUp(jsx: ReactElement) {
   };
 }
 
-function Checkbox(props: UseCheckboxProps) {
-  const { controlProps, hiddenInputProps, restProps, rootProps, stateProps } = useCheckbox(props);
+function Checkbox(props: CheckboxRootProps) {
   return (
-    <label {...rootProps}>
-      <div {...controlProps}>
-        <svg {...stateProps} />
-      </div>
-      <input {...hiddenInputProps} {...restProps} />
-      <span {...stateProps} />
-    </label>
+    <CheckboxRoot {...props}>
+      <CheckboxControl />
+      <CheckboxHiddenInput />
+    </CheckboxRoot>
   );
 }