@yamada-ui/checkbox/dist/chunk-D3OZWWL7.mjs

Yamada UI checkbox component

"use client"
import {
  useCheckbox
} from "./chunk-AA57K3IT.mjs";
import {
  useCheckboxGroupContext
} from "./chunk-2VDJDPFI.mjs";

// src/checkbox.tsx
import { omitThemeProps, ui, useComponentMultiStyle } from "@yamada-ui/core";
import { useFormControl } from "@yamada-ui/form-control";
import { AnimatePresence, motion } from "@yamada-ui/motion";
import { cx, funcAll } from "@yamada-ui/utils";
import { cloneElement, forwardRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var Checkbox = forwardRef(
  (props, ref) => {
    var _a, _b, _c, _d, _e;
    const group = useCheckboxGroupContext();
    const { value: groupValue, ...groupProps } = { ...group };
    const control = useFormControl(props);
    const [styles, mergedProps] = useComponentMultiStyle("Checkbox", {
      ...groupProps,
      ...props
    });
    const {
      className,
      children,
      disabled = (_a = groupProps.disabled) != null ? _a : control.disabled,
      gap = "0.5rem",
      invalid = (_b = groupProps.invalid) != null ? _b : control.invalid,
      label,
      readOnly = (_c = groupProps.readOnly) != null ? _c : control.readOnly,
      required = (_d = groupProps.required) != null ? _d : control.required,
      iconProps,
      inputProps,
      labelProps,
      ...computedProps
    } = omitThemeProps(mergedProps);
    (_e = computedProps.checked) != null ? _e : computedProps.checked = computedProps.isChecked;
    const checkedProp = groupValue && computedProps.value ? groupValue.includes(computedProps.value) : computedProps.checked;
    const onChange = groupProps.onChange && computedProps.value ? funcAll(groupProps.onChange, computedProps.onChange) : computedProps.onChange;
    const {
      checked,
      indeterminate,
      props: rest,
      getContainerProps,
      getIconProps,
      getInputProps,
      getLabelProps
    } = useCheckbox({
      ...computedProps,
      checked: checkedProp,
      disabled,
      invalid,
      readOnly,
      required,
      onChange
    });
    const { children: customIcon, ...resolvedIconProps } = { ...iconProps };
    const icon = cloneElement(customIcon != null ? customIcon : /* @__PURE__ */ jsx(CheckboxIcon, {}), {
      checked,
      disabled,
      indeterminate,
      invalid,
      isDisabled: disabled,
      isIndeterminate: indeterminate,
      isInvalid: invalid,
      isReadOnly: readOnly,
      isRequired: required,
      readOnly,
      required,
      __css: {
        opacity: checked || indeterminate ? 1 : 0,
        transform: checked || indeterminate ? "scale(1)" : "scale(0.95)",
        transitionDuration: "normal",
        transitionProperty: "transform"
      }
    });
    return /* @__PURE__ */ jsxs(
      ui.label,
      {
        className: cx("ui-checkbox", className),
        ...getContainerProps(),
        __css: {
          alignItems: "center",
          cursor: "pointer",
          display: "inline-flex",
          gap,
          position: "relative",
          verticalAlign: "top",
          ...styles.container
        },
        ...rest,
        children: [
          /* @__PURE__ */ jsx(
            ui.input,
            {
              className: "ui-checkbox__input",
              ...getInputProps(inputProps, ref)
            }
          ),
          /* @__PURE__ */ jsx(
            ui.div,
            {
              className: "ui-checkbox__icon",
              __css: {
                display: "inline-block",
                position: "relative",
                userSelect: "none",
                ...styles.icon
              },
              ...getIconProps(resolvedIconProps),
              children: icon
            }
          ),
          /* @__PURE__ */ jsx(
            ui.span,
            {
              className: "ui-checkbox__label",
              __css: { ...styles.label },
              ...getLabelProps(labelProps),
              children: children != null ? children : label
            }
          )
        ]
      }
    );
  }
);
Checkbox.displayName = "Checkbox";
Checkbox.__ui__ = "Checkbox";
var CheckboxIcon = ({
  isChecked,
  checked = isChecked,
  disabled: _disabled,
  isIndeterminate,
  indeterminate = isIndeterminate,
  invalid: _invalid,
  isDisabled: _isDisabled,
  isInvalid: _isInvalid,
  isReadOnly: _isReadOnly,
  isRequired: _isRequired,
  readOnly: _readOnly,
  required: _required,
  ...rest
}) => {
  return /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: indeterminate || checked ? /* @__PURE__ */ jsx(
    ui.div,
    {
      __css: {
        left: "50%",
        position: "absolute",
        top: "50%",
        transform: "translate(-50%, -50%)"
      },
      children: /* @__PURE__ */ jsx(
        motion.div,
        {
          style: {
            alignItems: "center",
            display: "flex",
            justifyContent: "center"
          },
          animate: "checked",
          exit: "unchecked",
          initial: "unchecked",
          variants: {
            checked: { scale: 1 },
            unchecked: { scale: 0.5 }
          },
          children: indeterminate ? /* @__PURE__ */ jsx(CheckboxIndeterminateIcon, { ...rest }) : /* @__PURE__ */ jsx(CheckboxCheckIcon, { ...rest })
        }
      )
    }
  ) : null });
};
CheckboxIcon.displayName = "CheckboxIcon";
CheckboxIcon.__ui__ = "CheckboxIcon";
var CheckboxCheckIcon = (props) => {
  return /* @__PURE__ */ jsx(
    motion.svg,
    {
      style: {
        fill: "none",
        stroke: "currentColor",
        strokeDasharray: 16,
        strokeWidth: 2
      },
      variants: {
        checked: {
          opacity: 1,
          strokeDashoffset: 0,
          transition: { duration: 0.2 }
        },
        unchecked: {
          opacity: 0,
          strokeDashoffset: 16
        }
      },
      viewBox: "0 0 12 10",
      width: "1.2em",
      ...props,
      children: /* @__PURE__ */ jsx("polyline", { points: "1.5 6 4.5 9 10.5 1" })
    }
  );
};
CheckboxCheckIcon.displayName = "CheckboxCheckIcon";
CheckboxCheckIcon.__ui__ = "CheckboxCheckIcon";
var CheckboxIndeterminateIcon = (props) => {
  return /* @__PURE__ */ jsx(
    motion.svg,
    {
      style: { stroke: "currentColor", strokeWidth: 4 },
      variants: {
        checked: {
          opacity: 1,
          scaleX: 1,
          transition: {
            opacity: { duration: 0.02 },
            scaleX: { duration: 0 }
          }
        },
        unchecked: {
          opacity: 0,
          scaleX: 0.65
        }
      },
      viewBox: "0 0 24 24",
      width: "1.2em",
      ...props,
      children: /* @__PURE__ */ jsx("line", { x1: "21", x2: "3", y1: "12", y2: "12" })
    }
  );
};
CheckboxIndeterminateIcon.displayName = "CheckboxIndeterminateIcon";
CheckboxIndeterminateIcon.__ui__ = "CheckboxIndeterminateIcon";

export {
  Checkbox,
  CheckboxIcon
};
//# sourceMappingURL=chunk-D3OZWWL7.mjs.map