@yamada-ui/radio 0.1.0

package/dist/radio.js

@@ -0,0 +1,386 @@
+"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/radio.tsx
+var radio_exports = {};
+__export(radio_exports, {
+  Radio: () => Radio,
+  useRadio: () => useRadio
+});
+module.exports = __toCommonJS(radio_exports);
+var import_core = require("@yamada-ui/core");
+var import_form_control2 = require("@yamada-ui/form-control");
+var import_use_focus_visible = require("@yamada-ui/use-focus-visible");
+var import_utils2 = require("@yamada-ui/utils");
+var import_react2 = require("react");
+
+// src/radio-group.tsx
+var import_form_control = require("@yamada-ui/form-control");
+var import_layouts = require("@yamada-ui/layouts");
+var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var isEvent = (value) => value && (0, import_utils.isObject)(value) && (0, import_utils.isObject)(value.target);
+var useRadioGroup = ({
+  id,
+  name,
+  isNative,
+  ...props
+}) => {
+  id = id != null ? id : (0, import_react.useId)();
+  name = name != null ? name : `radio-${id}`;
+  props.onChange = (0, import_utils.useCallbackRef)(props.onChange);
+  const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
+    value: props.value,
+    defaultValue: props.defaultValue,
+    onChange: props.onChange
+  });
+  const containerRef = (0, import_react.useRef)(null);
+  const onFocus = (0, import_react.useCallback)(() => {
+    const container = containerRef.current;
+    if (!container)
+      return;
+    let query = `input:not(:disabled):checked`;
+    let firstInput = container.querySelector(query);
+    if (firstInput) {
+      firstInput.focus();
+    } else {
+      query = `input:not(:disabled)`;
+      firstInput = container.querySelector(query);
+      firstInput == null ? void 0 : firstInput.focus();
+    }
+  }, []);
+  const onChange = (0, import_react.useCallback)(
+    (evOrValue) => {
+      const nextValue = isEvent(evOrValue) ? evOrValue.target.value : evOrValue;
+      setValue(nextValue);
+    },
+    [setValue]
+  );
+  const getContainerProps = (0, import_react.useCallback)(
+    (props2 = {}, ref = null) => ({
+      ...props2,
+      ref: (0, import_utils.mergeRefs)(ref, containerRef),
+      role: "group"
+    }),
+    []
+  );
+  const getRadioProps = (0, import_react.useCallback)(
+    (props2 = {}, ref = null) => ({
+      ...props2,
+      ref,
+      name,
+      [isNative ? "checked" : "isChecked"]: value != null ? props2.value === value : void 0,
+      onChange
+    }),
+    [name, value, onChange, isNative]
+  );
+  return {
+    name,
+    value,
+    setValue,
+    onChange,
+    onFocus,
+    getContainerProps,
+    getRadioProps
+  };
+};
+var [RadioGroupProvider, useRadioGroupContenxt] = (0, import_utils.createContext)({
+  strict: false,
+  name: "RadioGroupContext"
+});
+var RadioGroup = (0, import_react.forwardRef)(
+  ({
+    className,
+    size,
+    variant,
+    colorScheme,
+    children,
+    direction = "column",
+    gap,
+    ...props
+  }, ref) => {
+    const { name, value, onChange, getContainerProps } = useRadioGroup(props);
+    const { isRequired, isReadOnly, isDisabled, isInvalid } = (0, import_form_control.useFormControl)(props);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      RadioGroupProvider,
+      {
+        value: {
+          size,
+          variant,
+          colorScheme,
+          isRequired,
+          isReadOnly,
+          isDisabled,
+          isInvalid,
+          name,
+          value,
+          onChange
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_layouts.Flex,
+          {
+            ref,
+            className: (0, import_utils.cx)("ui-radio-group", className),
+            direction,
+            gap: gap != null ? gap : direction === "row" ? "1rem" : void 0,
+            ...getContainerProps((0, import_utils.omitObject)(props, ["onChange"])),
+            children
+          }
+        )
+      }
+    );
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+
+// src/radio.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var useRadio = (props) => {
+  const { id, name, value, required, disabled, readOnly, ...rest } = (0, import_form_control2.useFormControlProps)(props);
+  const [isFocusVisible, setIsFocusVisible] = (0, import_react2.useState)(false);
+  const [isFocused, setFocused] = (0, import_react2.useState)(false);
+  const [isHovered, setHovered] = (0, import_react2.useState)(false);
+  const [isActive, setActive] = (0, import_react2.useState)(false);
+  const [isChecked, setIsChecked] = (0, import_react2.useState)(!!props.defaultChecked);
+  const isControlled = props.isChecked !== void 0;
+  const checked = isControlled ? props.isChecked : isChecked;
+  (0, import_react2.useEffect)(() => {
+    return (0, import_use_focus_visible.trackFocusVisible)(setIsFocusVisible);
+  }, []);
+  const onChange = (0, import_utils2.useCallbackRef)(
+    (ev) => {
+      var _a;
+      if (readOnly || disabled) {
+        ev.preventDefault();
+        return;
+      }
+      if (!isControlled)
+        setIsChecked(ev.target.checked);
+      (_a = rest.onChange) == null ? void 0 : _a.call(rest, ev);
+    },
+    [readOnly, disabled, isControlled]
+  );
+  const onBlur = (0, import_utils2.useCallbackRef)(rest.onBlur);
+  const onFocus = (0, import_utils2.useCallbackRef)(rest.onFocus);
+  const onKeyDown = (0, import_react2.useCallback)(
+    ({ key }) => {
+      if (key === " ")
+        setActive(true);
+    },
+    [setActive]
+  );
+  const onKeyUp = (0, import_react2.useCallback)(
+    ({ key }) => {
+      if (key === " ")
+        setActive(false);
+    },
+    [setActive]
+  );
+  const getContainerProps = (0, import_react2.useCallback)(
+    (props2 = {}, ref = null) => ({
+      ...(0, import_utils2.pickObject)(rest, import_form_control2.formControlProperties),
+      ...props2,
+      ref,
+      "data-checked": (0, import_utils2.dataAttr)(checked)
+    }),
+    [checked, rest]
+  );
+  const getIconProps = (0, import_react2.useCallback)(
+    (props2 = {}, ref = null) => ({
+      ...(0, import_utils2.pickObject)(rest, import_form_control2.formControlProperties),
+      ...props2,
+      ref,
+      "data-active": (0, import_utils2.dataAttr)(isActive),
+      "data-hover": (0, import_utils2.dataAttr)(isHovered),
+      "data-checked": (0, import_utils2.dataAttr)(checked),
+      "data-focus": (0, import_utils2.dataAttr)(isFocused),
+      "data-focus-visible": (0, import_utils2.dataAttr)(isFocused && isFocusVisible),
+      "aria-hidden": true,
+      onMouseDown: (0, import_utils2.handlerAll)(props2.onMouseDown, () => setActive(true)),
+      onMouseUp: (0, import_utils2.handlerAll)(props2.onMouseUp, () => setActive(false)),
+      onMouseEnter: (0, import_utils2.handlerAll)(props2.onMouseEnter, () => setHovered(true)),
+      onMouseLeave: (0, import_utils2.handlerAll)(props2.onMouseLeave, () => setHovered(false))
+    }),
+    [checked, isActive, isFocused, isFocusVisible, isHovered, rest]
+  );
+  const getInputProps = (0, import_react2.useCallback)(
+    (props2 = {}, ref = null) => ({
+      ...(0, import_utils2.pickObject)(rest, import_form_control2.formControlProperties),
+      ...props2,
+      ref,
+      id,
+      type: "radio",
+      name,
+      value,
+      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: (0, import_utils2.handlerAll)(props2.onChange, onChange),
+      onBlur: (0, import_utils2.handlerAll)(props2.onBlur, onBlur, () => setFocused(false)),
+      onFocus: (0, import_utils2.handlerAll)(props2.onFocus, onFocus, () => setFocused(true)),
+      onKeyDown: (0, import_utils2.handlerAll)(props2.onKeyDown, onKeyDown),
+      onKeyUp: (0, import_utils2.handlerAll)(props2.onKeyUp, onKeyUp)
+    }),
+    [
+      rest,
+      id,
+      name,
+      value,
+      required,
+      disabled,
+      readOnly,
+      checked,
+      onChange,
+      onBlur,
+      onFocus,
+      onKeyDown,
+      onKeyUp
+    ]
+  );
+  const getLabelProps = (0, import_react2.useCallback)(
+    (props2 = {}, ref = null) => ({
+      ...(0, import_utils2.pickObject)(rest, import_form_control2.formControlProperties),
+      props: props2,
+      ref,
+      onMouseDown: (0, import_utils2.handlerAll)(props2.onMouseDown, (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+      }),
+      onTouchStart: (0, import_utils2.handlerAll)(props2.onTouchStart, (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+      }),
+      "data-checked": (0, import_utils2.dataAttr)(checked)
+    }),
+    [checked, rest]
+  );
+  return {
+    isFocusVisible,
+    isFocused,
+    isHovered,
+    isActive,
+    isChecked: checked,
+    getContainerProps,
+    getInputProps,
+    getIconProps,
+    getLabelProps
+  };
+};
+var Radio = (0, import_react2.forwardRef)(
+  (props, ref) => {
+    var _a, _b, _c, _d;
+    const group = useRadioGroupContenxt();
+    const control = (0, import_form_control2.useFormControl)(props);
+    const [styles, mergedProps] = (0, import_core.useMultiComponentStyle)("Radio", { ...group, ...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
+    } = (0, import_core.omitThemeProps)(mergedProps);
+    const { getContainerProps, getInputProps, getIconProps, getLabelProps } = useRadio({
+      ...rest,
+      isRequired,
+      isReadOnly,
+      isDisabled,
+      isInvalid,
+      isChecked: (group == null ? void 0 : group.value) && rest.value ? group.value === rest.value : rest.isChecked,
+      onChange: (group == null ? void 0 : group.onChange) && rest.value ? (0, import_utils2.funcAll)(group.onChange, rest.onChange) : rest.onChange
+    });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      import_core.ui.label,
+      {
+        className: (0, import_utils2.cx)("ui-radio", className),
+        ...getContainerProps(),
+        ...(0, import_utils2.omitObject)(rest, [
+          "id",
+          "name",
+          "value",
+          "defaultValue",
+          "defaultChecked",
+          "isChecked",
+          "onChange",
+          "onBlur",
+          "onFocus"
+        ]),
+        __css: {
+          cursor: "pointer",
+          position: "relative",
+          display: "inline-flex",
+          alignItems: "center",
+          verticalAlign: "top",
+          gap,
+          ...styles.container
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core.ui.input, { className: "ui-radio-input", ...getInputProps(inputProps, ref) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            import_core.ui.span,
+            {
+              className: "ui-radio-icon",
+              ...getIconProps(iconProps),
+              __css: {
+                position: "relative",
+                display: "inline-block",
+                userSelect: "none",
+                ...styles.icon
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            import_core.ui.span,
+            {
+              className: "ui-radio-label",
+              ...getLabelProps(labelProps),
+              __css: { ...styles.label },
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Radio.displayName = "Radio";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Radio,
+  useRadio
+});

package/dist/radio.mjs

@@ -0,0 +1,9 @@
+import {
+  Radio,
+  useRadio
+} from "./chunk-HR6MSMLG.mjs";
+import "./chunk-3SKWSFIA.mjs";
+export {
+  Radio,
+  useRadio
+};

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@yamada-ui/radio",
+  "version": "0.1.0",
+  "description": "Yamada UI radio component",
+  "keywords": [
+    "yamada",
+    "yamada ui",
+    "react",
+    "emotion",
+    "component",
+    "radio",
+    "ui",
+    "uikit",
+    "styled",
+    "style-props",
+    "styled-component",
+    "css-in-js"
+  ],
+  "author": "Hirotomo Yamada <hirotomo.yamada@avap.co.jp>",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hirotomoyamada/yamada-ui",
+    "directory": "packages/components/radio"
+  },
+  "bugs": {
+    "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
+  },
+  "dependencies": {
+    "@yamada-ui/core": "0.1.0",
+    "@yamada-ui/form-control": "0.1.0",
+    "@yamada-ui/utils": "0.1.0",
+    "@yamada-ui/use-controllable-state": "0.1.0",
+    "@yamada-ui/layouts": "0.1.0",
+    "@yamada-ui/use-focus-visible": "0.1.0"
+  },
+  "devDependencies": {
+    "react": "^18.0.0",
+    "clean-package": "2.2.0"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "tsup": {
+    "clean": true,
+    "target": "es2019",
+    "format": [
+      "cjs",
+      "esm"
+    ]
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "pnpm build:fast -- --watch",
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "gen:docs": "tsx ../../../scripts/generate-docs"
+  }
+}