@yamada-ui/radio/dist/use-radio.js

Yamada UI radio component

"use client"
"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/use-radio.ts
var use_radio_exports = {};
__export(use_radio_exports, {
  useRadio: () => useRadio
});
module.exports = __toCommonJS(use_radio_exports);
var import_form_control = require("@yamada-ui/form-control");
var import_use_focus_visible = require("@yamada-ui/use-focus-visible");
var import_utils = require("@yamada-ui/utils");
var import_react = require("react");
var useRadio = ({
  id,
  ...props
}) => {
  const uuid = (0, import_react.useId)();
  id != null ? id : id = uuid;
  const {
    id: _id,
    name,
    isChecked,
    checked: checkedProp = isChecked,
    defaultIsChecked,
    defaultChecked = defaultIsChecked,
    value,
    onChange: onChangeProp,
    ...computedProps
  } = (0, import_form_control.useFormControlProps)({ id, ...props });
  const [
    {
      "aria-readonly": _ariaReadonly,
      disabled,
      readOnly,
      required,
      onBlur: onBlurProp,
      onFocus: onFocusProp,
      ...formControlProps
    },
    rest
  ] = (0, import_utils.splitObject)(computedProps, import_form_control.formControlProperties);
  const [focusVisible, setFocusVisible] = (0, import_react.useState)(false);
  const [focused, setFocused] = (0, import_react.useState)(false);
  const [hovered, setHovered] = (0, import_react.useState)(false);
  const [active, setActive] = (0, import_react.useState)(false);
  const [checked, setChecked] = (0, import_react.useState)(!!defaultChecked);
  const controlled = checkedProp !== void 0;
  const resolvedChecked = controlled ? checkedProp : checked;
  (0, import_react.useEffect)(() => {
    return (0, import_use_focus_visible.trackFocusVisible)(setFocusVisible);
  }, []);
  const onChange = (0, import_utils.useCallbackRef)(
    (ev) => {
      if (readOnly || disabled) {
        ev.preventDefault();
        return;
      }
      if (!controlled) setChecked(ev.target.checked);
      onChangeProp == null ? void 0 : onChangeProp(ev);
    },
    [readOnly, disabled, controlled]
  );
  const onFocus = (0, import_utils.useCallbackRef)(onFocusProp);
  const onBlur = (0, import_utils.useCallbackRef)(onBlurProp);
  const onKeyDown = (0, import_react.useCallback)(
    ({ key }) => {
      if (key === " ") setActive(true);
    },
    [setActive]
  );
  const onKeyUp = (0, import_react.useCallback)(
    ({ key }) => {
      if (key === " ") setActive(false);
    },
    [setActive]
  );
  const getContainerProps = (0, import_react.useCallback)(
    (props2 = {}, ref = null) => ({
      ...formControlProps,
      ...props2,
      ref,
      "data-checked": (0, import_utils.dataAttr)(resolvedChecked),
      "data-focus": (0, import_utils.dataAttr)(focused),
      "data-focus-visible": (0, import_utils.dataAttr)(focused && focusVisible)
    }),
    [resolvedChecked, formControlProps, focused, focusVisible]
  );
  const getIconProps = (0, import_react.useCallback)(
    (props2 = {}, ref = null) => ({
      ...formControlProps,
      ...props2,
      ref,
      "aria-hidden": true,
      "data-active": (0, import_utils.dataAttr)(active),
      "data-checked": (0, import_utils.dataAttr)(resolvedChecked),
      "data-focus": (0, import_utils.dataAttr)(focused),
      "data-focus-visible": (0, import_utils.dataAttr)(focused && focusVisible),
      "data-hover": (0, import_utils.dataAttr)(hovered),
      onMouseDown: (0, import_utils.handlerAll)(props2.onMouseDown, () => setActive(true)),
      onMouseEnter: (0, import_utils.handlerAll)(props2.onMouseEnter, () => setHovered(true)),
      onMouseLeave: (0, import_utils.handlerAll)(props2.onMouseLeave, () => setHovered(false)),
      onMouseUp: (0, import_utils.handlerAll)(props2.onMouseUp, () => setActive(false))
    }),
    [resolvedChecked, active, focused, focusVisible, hovered, formControlProps]
  );
  const getInputProps = (0, import_react.useCallback)(
    (props2 = {}, ref = null) => ({
      ...formControlProps,
      ...props2,
      id,
      ref,
      type: "radio",
      name,
      style: {
        border: "0px",
        clip: "rect(0px, 0px, 0px, 0px)",
        height: "1px",
        margin: "-1px",
        overflow: "hidden",
        padding: "0px",
        position: "absolute",
        whiteSpace: "nowrap",
        width: "1px"
      },
      "aria-checked": resolvedChecked,
      checked: resolvedChecked,
      disabled,
      readOnly,
      required,
      value,
      onBlur: (0, import_utils.handlerAll)(props2.onBlur, onBlur, () => setFocused(false)),
      onChange: (0, import_utils.handlerAll)(props2.onChange, onChange),
      onFocus: (0, import_utils.handlerAll)(props2.onFocus, onFocus, () => setFocused(true)),
      onKeyDown: (0, import_utils.handlerAll)(props2.onKeyDown, onKeyDown),
      onKeyUp: (0, import_utils.handlerAll)(props2.onKeyUp, onKeyUp)
    }),
    [
      formControlProps,
      id,
      name,
      value,
      required,
      disabled,
      readOnly,
      resolvedChecked,
      onChange,
      onBlur,
      onFocus,
      onKeyDown,
      onKeyUp
    ]
  );
  const getLabelProps = (0, import_react.useCallback)(
    (props2 = {}, ref = null) => ({
      ...formControlProps,
      ...props2,
      ref,
      "data-checked": (0, import_utils.dataAttr)(resolvedChecked),
      onMouseDown: (0, import_utils.handlerAll)(props2.onMouseDown, (ev) => {
        ev.preventDefault();
        ev.stopPropagation();
      }),
      onTouchStart: (0, import_utils.handlerAll)(props2.onTouchStart, (ev) => {
        ev.preventDefault();
        ev.stopPropagation();
      })
    }),
    [resolvedChecked, formControlProps]
  );
  return {
    active,
    checked: resolvedChecked,
    focused,
    focusVisible,
    hovered,
    /**
     * @deprecated Use `active` instead.
     */
    isActive: active,
    /**
     * @deprecated Use `checked` instead.
     */
    isChecked: resolvedChecked,
    /**
     * @deprecated Use `focused` instead.
     */
    isFocused: focused,
    /**
     * @deprecated Use `focusVisible` instead.
     */
    isFocusVisible: focusVisible,
    /**
     * @deprecated Use `hovered` instead.
     */
    isHovered: hovered,
    props: rest,
    getContainerProps,
    getIconProps,
    getInputProps,
    getLabelProps
  };
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  useRadio
});
//# sourceMappingURL=use-radio.js.map