@yamada-ui/checkbox 0.1.0

package/dist/chunk-WVMK5AIG.mjs

@@ -0,0 +1,448 @@
+import {
+  useCheckboxGroupContext
+} from "./chunk-3MZZPRTR.mjs";
+
+// src/checkbox.tsx
+import {
+  ui,
+  useMultiComponentStyle,
+  omitThemeProps
+} from "@yamada-ui/core";
+import {
+  useFormControl,
+  useFormControlProps,
+  formControlProperties
+} from "@yamada-ui/form-control";
+import { AnimatePresence, motion } from "@yamada-ui/motion";
+import { trackFocusVisible } from "@yamada-ui/use-focus-visible";
+import {
+  cx,
+  omitObject,
+  pickObject,
+  useCallbackRef,
+  useSafeLayoutEffect,
+  useUpdateEffect,
+  handlerAll,
+  dataAttr,
+  mergeRefs,
+  funcAll
+} from "@yamada-ui/utils";
+import {
+  cloneElement,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  forwardRef
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var useCheckbox = (props) => {
+  const {
+    id,
+    name,
+    value,
+    defaultChecked,
+    tabIndex,
+    required,
+    disabled,
+    readOnly,
+    isIndeterminate,
+    ...rest
+  } = useFormControlProps(props);
+  const [isFocusVisible, setIsFocusVisible] = useState(false);
+  const [isFocused, setFocused] = useState(false);
+  const [isHovered, setHovered] = useState(false);
+  const [isActive, setActive] = useState(false);
+  const inputRef = useRef(null);
+  const [isLabel, setIsLabel] = useState(true);
+  const [isChecked, setIsChecked] = useState(!!defaultChecked);
+  const isControlled = props.isChecked !== void 0;
+  const checked = isControlled ? props.isChecked : isChecked;
+  const onChange = useCallbackRef(
+    (ev) => {
+      var _a;
+      if (readOnly || disabled) {
+        ev.preventDefault();
+        return;
+      }
+      if (!isControlled)
+        setIsChecked(!checked || isIndeterminate ? true : ev.target.checked);
+      (_a = rest.onChange) == null ? void 0 : _a.call(rest, ev);
+    },
+    [readOnly, disabled, isControlled, checked, isIndeterminate]
+  );
+  const onBlur = useCallbackRef(rest.onBlur);
+  const onFocus = useCallbackRef(rest.onFocus);
+  const onKeyDown = useCallback(
+    ({ key }) => {
+      if (key === " ")
+        setActive(true);
+    },
+    [setActive]
+  );
+  const onKeyUp = useCallback(
+    ({ key }) => {
+      if (key === " ")
+        setActive(false);
+    },
+    [setActive]
+  );
+  useEffect(() => {
+    return trackFocusVisible(setIsFocusVisible);
+  }, []);
+  useSafeLayoutEffect(() => {
+    if (inputRef.current)
+      inputRef.current.indeterminate = Boolean(isIndeterminate);
+  }, [isIndeterminate]);
+  useUpdateEffect(() => {
+    if (disabled)
+      setFocused(false);
+  }, [disabled, setFocused]);
+  useSafeLayoutEffect(() => {
+    var _a;
+    if (!((_a = inputRef.current) == null ? void 0 : _a.form))
+      return;
+    inputRef.current.form.onreset = () => setIsChecked(!!defaultChecked);
+  }, []);
+  useSafeLayoutEffect(() => {
+    if (!inputRef.current)
+      return;
+    if (inputRef.current.checked !== checked)
+      setIsChecked(inputRef.current.checked);
+  }, [inputRef.current]);
+  const getContainerProps = useCallback(
+    (props2 = {}, ref = null) => ({
+      ...pickObject(rest, formControlProperties),
+      ...props2,
+      ref: mergeRefs(ref, (el) => {
+        if (el)
+          setIsLabel(el.tagName === "LABEL");
+      }),
+      "data-checked": dataAttr(checked),
+      onClick: handlerAll(props2.onClick, () => {
+        var _a;
+        if (isLabel)
+          return;
+        (_a = inputRef.current) == null ? void 0 : _a.click();
+        requestAnimationFrame(() => {
+          var _a2;
+          return (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+        });
+      })
+    }),
+    [checked, isLabel, rest]
+  );
+  const getIconProps = useCallback(
+    (props2 = {}, ref = null) => ({
+      ...pickObject(rest, formControlProperties),
+      ...props2,
+      ref,
+      "data-active": dataAttr(isActive),
+      "data-hover": dataAttr(isHovered),
+      "data-checked": dataAttr(checked),
+      "data-focus": dataAttr(isFocused),
+      "data-focus-visible": dataAttr(isFocused && isFocusVisible),
+      "data-indeterminate": dataAttr(isIndeterminate),
+      "aria-hidden": true,
+      onMouseDown: handlerAll(props2.onMouseDown, (ev) => {
+        if (isFocused)
+          ev.preventDefault();
+        setActive(true);
+      }),
+      onMouseUp: handlerAll(props2.onMouseUp, () => setActive(false)),
+      onMouseEnter: handlerAll(props2.onMouseEnter, () => setHovered(true)),
+      onMouseLeave: handlerAll(props2.onMouseLeave, () => setHovered(false))
+    }),
+    [isActive, checked, isFocused, isHovered, isFocusVisible, isIndeterminate, rest]
+  );
+  const getInputProps = useCallback(
+    (props2 = {}, ref = null) => ({
+      ...pickObject(rest, formControlProperties),
+      ...props2,
+      ref: mergeRefs(inputRef, ref),
+      id,
+      type: "checkbox",
+      name,
+      value,
+      tabIndex,
+      required,
+      disabled,
+      readOnly,
+      checked,
+      style: {
+        border: "0px",
+        clip: "rect(0px, 0px, 0px, 0px)",
+        height: "1px",
+        width: "1px",
+        margin: "-1px",
+        padding: "0px",
+        overflow: "hidden",
+        whiteSpace: "nowrap",
+        position: "absolute"
+      },
+      onChange: handlerAll(props2.onChange, onChange),
+      onBlur: handlerAll(props2.onBlur, onBlur, () => setFocused(false)),
+      onFocus: handlerAll(props2.onFocus, onFocus, () => setFocused(true)),
+      onKeyDown: handlerAll(props2.onKeyDown, onKeyDown),
+      onKeyUp: handlerAll(props2.onKeyUp, onKeyUp)
+    }),
+    [
+      rest,
+      id,
+      name,
+      value,
+      tabIndex,
+      required,
+      disabled,
+      readOnly,
+      checked,
+      onChange,
+      onBlur,
+      onFocus,
+      onKeyDown,
+      onKeyUp
+    ]
+  );
+  const getLabelProps = useCallback(
+    (props2 = {}, ref = null) => ({
+      ...pickObject(rest, formControlProperties),
+      ...props2,
+      ref,
+      "data-checked": dataAttr(checked),
+      onMouseDown: handlerAll(props2.onMouseDown, (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+      }),
+      onTouchStart: handlerAll(props2.onTouchStart, (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+      })
+    }),
+    [checked, rest]
+  );
+  return {
+    isFocusVisible,
+    isFocused,
+    isHovered,
+    isActive,
+    isChecked: checked,
+    isIndeterminate,
+    getContainerProps,
+    getIconProps,
+    getInputProps,
+    getLabelProps
+  };
+};
+var Checkbox = forwardRef(
+  (props, ref) => {
+    var _a, _b, _c, _d, _e;
+    const group = useCheckboxGroupContext();
+    const control = useFormControl(props);
+    const [styles, mergedProps] = useMultiComponentStyle("Checkbox", {
+      ...group ? omitObject(group, ["value"]) : {},
+      ...props
+    });
+    const {
+      className,
+      gap = "0.5rem",
+      isRequired = (_a = group == null ? void 0 : group.isRequired) != null ? _a : control.isRequired,
+      isReadOnly = (_b = group == null ? void 0 : group.isReadOnly) != null ? _b : control.isReadOnly,
+      isDisabled = (_c = group == null ? void 0 : group.isDisabled) != null ? _c : control.isDisabled,
+      isInvalid = (_d = group == null ? void 0 : group.isInvalid) != null ? _d : control.isInvalid,
+      iconProps,
+      inputProps,
+      labelProps,
+      children,
+      ...rest
+    } = omitThemeProps(mergedProps);
+    const {
+      isChecked,
+      isIndeterminate,
+      getContainerProps,
+      getInputProps,
+      getIconProps,
+      getLabelProps
+    } = useCheckbox({
+      ...rest,
+      isRequired,
+      isReadOnly,
+      isDisabled,
+      isInvalid,
+      isChecked: (group == null ? void 0 : group.value) && rest.value ? group.value.includes(rest.value) : rest.isChecked,
+      onChange: (group == null ? void 0 : group.onChange) && rest.value ? funcAll(group.onChange, rest.onChange) : rest.onChange
+    });
+    const cloneIcon = cloneElement((_e = iconProps == null ? void 0 : iconProps.children) != null ? _e : /* @__PURE__ */ jsx(CheckboxIcon, {}), {
+      __css: {
+        opacity: isChecked || isIndeterminate ? 1 : 0,
+        transform: isChecked || isIndeterminate ? "scale(1)" : "scale(0.95)",
+        transitionProperty: "transform",
+        transitionDuration: "normal"
+      },
+      isIndeterminate,
+      isChecked,
+      isRequired,
+      isReadOnly,
+      isDisabled,
+      isInvalid
+    });
+    return /* @__PURE__ */ jsxs(
+      ui.label,
+      {
+        className: cx("ui-checkbox", className),
+        ...getContainerProps(),
+        __css: {
+          cursor: "pointer",
+          position: "relative",
+          display: "inline-flex",
+          alignItems: "center",
+          verticalAlign: "top",
+          gap,
+          ...styles.container
+        },
+        ...omitObject(rest, [
+          "id",
+          "name",
+          "value",
+          "defaultValue",
+          "defaultChecked",
+          "isChecked",
+          "isIndeterminate",
+          "onChange",
+          "onBlur",
+          "onFocus",
+          "tabIndex"
+        ]),
+        children: [
+          /* @__PURE__ */ jsx(ui.input, { className: "ui-checkbox-input", ...getInputProps(inputProps, ref) }),
+          /* @__PURE__ */ jsx(
+            ui.span,
+            {
+              className: "ui-checkbox-icon",
+              __css: {
+                pointerEvents: isReadOnly ? "none" : void 0,
+                position: "relative",
+                display: "inline-block",
+                userSelect: "none",
+                ...styles.icon
+              },
+              ...getIconProps(omitObject(iconProps != null ? iconProps : { children: void 0 }, ["children"])),
+              children: cloneIcon
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ui.span,
+            {
+              className: "ui-checkbox-label",
+              __css: { ...styles.label },
+              ...getLabelProps(labelProps),
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+var CheckboxIcon = ({
+  isIndeterminate,
+  isChecked,
+  isRequired,
+  isReadOnly,
+  isDisabled,
+  isInvalid,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: isIndeterminate || isChecked ? /* @__PURE__ */ jsx(
+    ui.div,
+    {
+      __css: {
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)"
+      },
+      children: /* @__PURE__ */ jsx(
+        ui.div,
+        {
+          as: motion.div,
+          variants: {
+            unchecked: { scale: 0.5 },
+            checked: { scale: 1 }
+          },
+          initial: "unchecked",
+          animate: "checked",
+          exit: "unchecked",
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: isIndeterminate ? /* @__PURE__ */ jsx(IndeterminateIcon, { ...rest }) : /* @__PURE__ */ jsx(CheckIcon, { ...rest })
+        }
+      )
+    }
+  ) : null });
+};
+var CheckIcon = (props) => {
+  return /* @__PURE__ */ jsx(
+    ui.svg,
+    {
+      as: motion.svg,
+      width: "1.2em",
+      viewBox: "0 0 12 10",
+      variants: {
+        unchecked: {
+          opacity: 0,
+          strokeDashoffset: 16
+        },
+        checked: {
+          opacity: 1,
+          strokeDashoffset: 0,
+          transition: { duration: 0.2 }
+        }
+      },
+      style: {
+        fill: "none",
+        strokeWidth: 2,
+        stroke: "currentColor",
+        strokeDasharray: 16
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx("polyline", { points: "1.5 6 4.5 9 10.5 1" })
+    }
+  );
+};
+var IndeterminateIcon = (props) => {
+  return /* @__PURE__ */ jsx(
+    ui.svg,
+    {
+      as: motion.svg,
+      width: "1.2em",
+      viewBox: "0 0 24 24",
+      variants: {
+        unchecked: {
+          scaleX: 0.65,
+          opacity: 0
+        },
+        checked: {
+          scaleX: 1,
+          opacity: 1,
+          transition: {
+            scaleX: { duration: 0 },
+            opacity: { duration: 0.02 }
+          }
+        }
+      },
+      style: { stroke: "currentColor", strokeWidth: 4 },
+      ...props,
+      children: /* @__PURE__ */ jsx("line", { x1: "21", x2: "3", y1: "12", y2: "12" })
+    }
+  );
+};
+
+export {
+  useCheckbox,
+  Checkbox,
+  CheckboxIcon
+};

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export { Checkbox, CheckboxIcon, CheckboxIconProps, CheckboxProps, UseCheckboxProps, useCheckbox } from './checkbox.js';
+export { CheckboxGroup, CheckboxGroupProps, UseCheckboxGroupProps, useCheckboxGroup, useCheckboxGroupContext } from './checkbox-group.js';
+import '@yamada-ui/utils';
+import '@yamada-ui/core';
+import '@yamada-ui/form-control';
+import '@yamada-ui/motion';
+import 'react';
+import '@yamada-ui/layouts';