@yamada-ui/radio 1.2.16-next-20241126134247 → 1.3.0-dev-20241127021420

package/dist/use-radio-group.js

@@ -0,0 +1,111 @@
+"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-group.ts
+var use_radio_group_exports = {};
+__export(use_radio_group_exports, {
+  useRadioGroup: () => useRadioGroup
+});
+module.exports = __toCommonJS(use_radio_group_exports);
+var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
+var import_utils = require("@yamada-ui/utils");
+var import_react = require("react");
+var isEvent = (value) => value && (0, import_utils.isObject)(value) && (0, import_utils.isObject)(value.target);
+var useRadioGroup = ({
+  id,
+  name,
+  defaultValue,
+  isNative,
+  value: valueProp,
+  onChange: onChangeProp,
+  ...props
+}) => {
+  const uuid = (0, import_react.useId)();
+  id != null ? id : id = uuid;
+  name != null ? name : name = `radio-${id}`;
+  const onChangeRef = (0, import_utils.useCallbackRef)(onChangeProp);
+  const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
+    defaultValue,
+    value: valueProp,
+    onChange: onChangeRef
+  });
+  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) => ({
+      role: "radiogroup",
+      ...props2,
+      ref: (0, import_utils.mergeRefs)(ref, containerRef)
+    }),
+    []
+  );
+  const getRadioProps = (0, import_react.useCallback)(
+    (props2 = {}, ref = null) => {
+      const checked = props2.value === value;
+      return {
+        ...props2,
+        ref,
+        name,
+        "aria-checked": checked,
+        [isNative ? "checked" : "isChecked"]: (
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+          value != null ? checked : void 0
+        ),
+        onChange
+      };
+    },
+    [name, value, onChange, isNative]
+  );
+  return {
+    id,
+    name,
+    props,
+    setValue,
+    value,
+    getContainerProps,
+    getRadioProps,
+    onChange,
+    onFocus
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useRadioGroup
+});
+//# sourceMappingURL=use-radio-group.js.map

package/dist/use-radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-radio-group.ts"],"sourcesContent":["import type { PropGetter } from \"@yamada-ui/core\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type { ChangeEvent } from \"react\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { isObject, mergeRefs, useCallbackRef } from \"@yamada-ui/utils\"\nimport { useCallback, useId, useRef } from \"react\"\n\nconst isEvent = (value: any): value is { target: HTMLInputElement } =>\n  value && isObject(value) && isObject(value.target)\n\nexport interface UseRadioGroupProps<Y extends number | string = string> {\n  /**\n   * The top-level id string that will be applied to the radios.\n   * The index of the radio will be appended to this top-level id.\n   */\n  id?: string\n  /**\n   * The HTML `name` attribute used for forms.\n   */\n  name?: string\n  /**\n   * The initial value of the radio group.\n   */\n  defaultValue?: Y\n  /**\n   * If `true`, input elements will receive `checked` attribute instead of `isChecked`.\n   *\n   * This assumes, you're using native radio inputs.\n   *\n   * @default false\n   */\n  isNative?: boolean\n  /**\n   * The value of the radio group.\n   */\n  value?: Y\n  /**\n   * The callback fired when any children radio is checked or unchecked.\n   */\n  onChange?: (value: Y) => void\n}\n\nexport const useRadioGroup = <\n  Y extends number | string,\n  M extends Dict = Dict,\n>({\n  id,\n  name,\n  defaultValue,\n  isNative,\n  value: valueProp,\n  onChange: onChangeProp,\n  ...props\n}: M & UseRadioGroupProps<Y>) => {\n  const uuid = useId()\n\n  id ??= uuid\n  name ??= `radio-${id}`\n\n  const onChangeRef = useCallbackRef(onChangeProp)\n\n  const [value, setValue] = useControllableState({\n    defaultValue,\n    value: valueProp,\n    onChange: onChangeRef,\n  })\n\n  const containerRef = useRef<any>(null)\n\n  const onFocus = useCallback(() => {\n    const container = containerRef.current\n\n    if (!container) return\n\n    let query = `input:not(:disabled):checked`\n\n    let firstInput = container.querySelector(query) as HTMLElement | undefined\n\n    if (firstInput) {\n      firstInput.focus()\n    } else {\n      query = `input:not(:disabled)`\n      firstInput = container.querySelector(query) as HTMLElement | undefined\n\n      firstInput?.focus()\n    }\n  }, [])\n\n  const onChange = useCallback(\n    (evOrValue: ChangeEvent<HTMLInputElement> | Y) => {\n      const nextValue = (\n        isEvent(evOrValue) ? evOrValue.target.value : evOrValue\n      ) as Y\n\n      setValue(nextValue)\n    },\n    [setValue],\n  )\n\n  const getContainerProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      role: \"radiogroup\",\n      ...props,\n      ref: mergeRefs(ref, containerRef),\n    }),\n    [],\n  )\n\n  const getRadioProps: PropGetter<\n    { value?: Y },\n    {\n      checked?: boolean\n      isChecked?: boolean\n      value?: Y\n    }\n  > = useCallback(\n    (props = {}, ref = null) => {\n      const checked = props.value === value\n\n      return {\n        ...props,\n        ref,\n        name,\n        \"aria-checked\": checked,\n        [isNative ? \"checked\" : \"isChecked\"]:\n          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n          value != null ? checked : undefined,\n        onChange,\n      }\n    },\n    [name, value, onChange, isNative],\n  )\n\n  return {\n    id,\n    name,\n    props,\n    setValue,\n    value,\n    getContainerProps,\n    getRadioProps,\n    onChange,\n    onFocus,\n  }\n}\n\nexport type UseRadioGroupReturn<Y extends number | string = string> =\n  ReturnType<typeof useRadioGroup<Y>>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oCAAqC;AACrC,mBAAoD;AACpD,mBAA2C;AAE3C,IAAM,UAAU,CAAC,UACf,aAAS,uBAAS,KAAK,SAAK,uBAAS,MAAM,MAAM;AAkC5C,IAAM,gBAAgB,CAG3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,GAAG;AACL,MAAiC;AAC/B,QAAM,WAAO,oBAAM;AAEnB,yBAAO;AACP,+BAAS,SAAS,EAAE;AAEpB,QAAM,kBAAc,6BAAe,YAAY;AAE/C,QAAM,CAAC,OAAO,QAAQ,QAAI,oDAAqB;AAAA,IAC7C;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,mBAAe,qBAAY,IAAI;AAErC,QAAM,cAAU,0BAAY,MAAM;AAChC,UAAM,YAAY,aAAa;AAE/B,QAAI,CAAC,UAAW;AAEhB,QAAI,QAAQ;AAEZ,QAAI,aAAa,UAAU,cAAc,KAAK;AAE9C,QAAI,YAAY;AACd,iBAAW,MAAM;AAAA,IACnB,OAAO;AACL,cAAQ;AACR,mBAAa,UAAU,cAAc,KAAK;AAE1C,+CAAY;AAAA,IACd;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,eAAW;AAAA,IACf,CAAC,cAAiD;AAChD,YAAM,YACJ,QAAQ,SAAS,IAAI,UAAU,OAAO,QAAQ;AAGhD,eAAS,SAAS;AAAA,IACpB;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,QAAM,wBAAgC;AAAA,IACpC,CAACA,SAAQ,CAAC,GAAG,MAAM,UAAU;AAAA,MAC3B,MAAM;AAAA,MACN,GAAGA;AAAA,MACH,SAAK,wBAAU,KAAK,YAAY;AAAA,IAClC;AAAA,IACA,CAAC;AAAA,EACH;AAEA,QAAM,oBAOF;AAAA,IACF,CAACA,SAAQ,CAAC,GAAG,MAAM,SAAS;AAC1B,YAAM,UAAUA,OAAM,UAAU;AAEhC,aAAO;AAAA,QACL,GAAGA;AAAA,QACH;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAChB,CAAC,WAAW,YAAY,WAAW;AAAA;AAAA,UAEjC,SAAS,OAAO,UAAU;AAAA;AAAA,QAC5B;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,MAAM,OAAO,UAAU,QAAQ;AAAA,EAClC;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":["props"]}

package/dist/use-radio-group.mjs

@@ -0,0 +1,8 @@
+"use client"
+import {
+  useRadioGroup
+} from "./chunk-AOVCDCCW.mjs";
+export {
+  useRadioGroup
+};
+//# sourceMappingURL=use-radio-group.mjs.map

package/dist/use-radio-group.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/use-radio.d.mts

@@ -0,0 +1,87 @@
+import * as _yamada_ui_form_control from '@yamada-ui/form-control';
+import { FormControlOptions } from '@yamada-ui/form-control';
+import * as react from 'react';
+import { ChangeEventHandler } from 'react';
+import { PropGetter } from '@yamada-ui/core';
+import { Dict } from '@yamada-ui/utils';
+
+interface UseRadioProps<Y extends number | string = string> extends FormControlOptions {
+    /**
+     * id assigned to input.
+     */
+    id?: string;
+    /**
+     * The name of the input field in a radio.
+     */
+    name?: string;
+    /**
+     * If `true`, the radio will be checked.
+     *
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * If `true`, the radio will be initially checked.
+     *
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * If `true`, the radio will be initially checked.
+     *
+     * @default false
+     *
+     * @deprecated Use `defaultChecked` instead.
+     */
+    defaultIsChecked?: boolean;
+    /**
+     * If `true`, the radio will be checked.
+     *
+     * @default false
+     *
+     * @deprecated Use `checked` instead.
+     */
+    isChecked?: boolean;
+    /**
+     * The value to be used in the radio button.
+     */
+    value?: Y;
+    /**
+     * The callback invoked when the checked state changes.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+}
+declare const useRadio: <Y extends number | string = string, M extends Dict = Dict<any>>({ id, ...props }: M & UseRadioProps<Y>) => {
+    active: boolean;
+    checked: boolean;
+    focused: boolean;
+    focusVisible: boolean;
+    hovered: boolean;
+    props: Omit<Omit<{
+        _active?: {} | undefined;
+        _focus?: {} | undefined;
+        _focusVisible?: {} | undefined;
+        _hover?: {} | undefined;
+        _invalid?: {} | undefined;
+        id: string | undefined;
+        "aria-disabled": boolean | undefined;
+        "aria-invalid": boolean | undefined;
+        "aria-readonly": boolean | undefined;
+        "aria-required": boolean | undefined;
+        "data-readonly": boolean | "false" | "true";
+        disabled: boolean | undefined;
+        readOnly: boolean | undefined;
+        required: boolean | undefined;
+        onBlur: (event: react.FocusEvent<HTMLElement, Element>) => void;
+        onFocus: (event: react.FocusEvent<HTMLElement, Element>) => void;
+    } & Omit<{
+        id: string;
+    } & Omit<M & UseRadioProps<Y>, "id"> & _yamada_ui_form_control.UseFormControlProps<HTMLElement>, "disabled" | "isDisabled" | "id" | "onFocus" | "onBlur" | "readOnly" | "required" | "isInvalid" | "isReadOnly" | "isRequired">, "value" | "name" | "defaultChecked" | "id" | "onChange" | "checked" | "defaultIsChecked" | "isChecked">, "disabled" | "aria-disabled" | "_active" | "_focus" | "_focusVisible" | "_hover" | "_invalid" | "aria-invalid" | "aria-readonly" | "aria-required" | "onFocus" | "onBlur" | "readOnly" | "required" | "data-readonly">;
+    getContainerProps: PropGetter<"label", undefined>;
+    getIconProps: PropGetter<"div", undefined>;
+    getInputProps: PropGetter<"input", undefined>;
+    getLabelProps: PropGetter<"span", undefined>;
+};
+type UseRadioReturn = ReturnType<typeof useRadio>;
+
+export { type UseRadioProps, type UseRadioReturn, useRadio };

package/dist/use-radio.d.ts

@@ -0,0 +1,87 @@
+import * as _yamada_ui_form_control from '@yamada-ui/form-control';
+import { FormControlOptions } from '@yamada-ui/form-control';
+import * as react from 'react';
+import { ChangeEventHandler } from 'react';
+import { PropGetter } from '@yamada-ui/core';
+import { Dict } from '@yamada-ui/utils';
+
+interface UseRadioProps<Y extends number | string = string> extends FormControlOptions {
+    /**
+     * id assigned to input.
+     */
+    id?: string;
+    /**
+     * The name of the input field in a radio.
+     */
+    name?: string;
+    /**
+     * If `true`, the radio will be checked.
+     *
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * If `true`, the radio will be initially checked.
+     *
+     * @default false
+     */
+    defaultChecked?: boolean;
+    /**
+     * If `true`, the radio will be initially checked.
+     *
+     * @default false
+     *
+     * @deprecated Use `defaultChecked` instead.
+     */
+    defaultIsChecked?: boolean;
+    /**
+     * If `true`, the radio will be checked.
+     *
+     * @default false
+     *
+     * @deprecated Use `checked` instead.
+     */
+    isChecked?: boolean;
+    /**
+     * The value to be used in the radio button.
+     */
+    value?: Y;
+    /**
+     * The callback invoked when the checked state changes.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+}
+declare const useRadio: <Y extends number | string = string, M extends Dict = Dict<any>>({ id, ...props }: M & UseRadioProps<Y>) => {
+    active: boolean;
+    checked: boolean;
+    focused: boolean;
+    focusVisible: boolean;
+    hovered: boolean;
+    props: Omit<Omit<{
+        _active?: {} | undefined;
+        _focus?: {} | undefined;
+        _focusVisible?: {} | undefined;
+        _hover?: {} | undefined;
+        _invalid?: {} | undefined;
+        id: string | undefined;
+        "aria-disabled": boolean | undefined;
+        "aria-invalid": boolean | undefined;
+        "aria-readonly": boolean | undefined;
+        "aria-required": boolean | undefined;
+        "data-readonly": boolean | "false" | "true";
+        disabled: boolean | undefined;
+        readOnly: boolean | undefined;
+        required: boolean | undefined;
+        onBlur: (event: react.FocusEvent<HTMLElement, Element>) => void;
+        onFocus: (event: react.FocusEvent<HTMLElement, Element>) => void;
+    } & Omit<{
+        id: string;
+    } & Omit<M & UseRadioProps<Y>, "id"> & _yamada_ui_form_control.UseFormControlProps<HTMLElement>, "disabled" | "isDisabled" | "id" | "onFocus" | "onBlur" | "readOnly" | "required" | "isInvalid" | "isReadOnly" | "isRequired">, "value" | "name" | "defaultChecked" | "id" | "onChange" | "checked" | "defaultIsChecked" | "isChecked">, "disabled" | "aria-disabled" | "_active" | "_focus" | "_focusVisible" | "_hover" | "_invalid" | "aria-invalid" | "aria-readonly" | "aria-required" | "onFocus" | "onBlur" | "readOnly" | "required" | "data-readonly">;
+    getContainerProps: PropGetter<"label", undefined>;
+    getIconProps: PropGetter<"div", undefined>;
+    getInputProps: PropGetter<"input", undefined>;
+    getLabelProps: PropGetter<"span", undefined>;
+};
+type UseRadioReturn = ReturnType<typeof useRadio>;
+
+export { type UseRadioProps, type UseRadioReturn, useRadio };

package/dist/use-radio.js

@@ -0,0 +1,207 @@
+"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;
+  let {
+    id: _id,
+    name,
+    checked: checkedProp,
+    defaultChecked,
+    defaultIsChecked,
+    isChecked: isCheckedProp,
+    value,
+    onChange: onChangeProp,
+    ...computedProps
+  } = (0, import_form_control.useFormControlProps)({ id, ...props });
+  checkedProp != null ? checkedProp : checkedProp = isCheckedProp;
+  defaultChecked != null ? defaultChecked : defaultChecked = defaultIsChecked;
+  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,
+    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

package/dist/use-radio.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/use-radio.ts"],"sourcesContent":["import type { PropGetter } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type {\n  ChangeEvent,\n  ChangeEventHandler,\n  KeyboardEvent,\n  SyntheticEvent,\n} from \"react\"\nimport {\n  formControlProperties,\n  useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport {\n  dataAttr,\n  handlerAll,\n  splitObject,\n  useCallbackRef,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\n\nexport interface UseRadioProps<Y extends number | string = string>\n  extends FormControlOptions {\n  /**\n   * id assigned to input.\n   */\n  id?: string\n  /**\n   * The name of the input field in a radio.\n   */\n  name?: string\n  /**\n   * If `true`, the radio will be checked.\n   *\n   * @default false\n   */\n  checked?: boolean\n  /**\n   * If `true`, the radio will be initially checked.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean\n  /**\n   * If `true`, the radio will be initially checked.\n   *\n   * @default false\n   *\n   * @deprecated Use `defaultChecked` instead.\n   */\n  defaultIsChecked?: boolean\n  /**\n   * If `true`, the radio will be checked.\n   *\n   * @default false\n   *\n   * @deprecated Use `checked` instead.\n   */\n  isChecked?: boolean\n  /**\n   * The value to be used in the radio button.\n   */\n  value?: Y\n  /**\n   * The callback invoked when the checked state changes.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>\n}\n\nexport const useRadio = <\n  Y extends number | string = string,\n  M extends Dict = Dict,\n>({\n  id,\n  ...props\n}: M & UseRadioProps<Y>) => {\n  const uuid = useId()\n\n  id ??= uuid\n\n  let {\n    id: _id,\n    name,\n    checked: checkedProp,\n    defaultChecked,\n    defaultIsChecked,\n    isChecked: isCheckedProp,\n    value,\n    onChange: onChangeProp,\n    ...computedProps\n  } = useFormControlProps({ id, ...props })\n\n  checkedProp ??= isCheckedProp\n  defaultChecked ??= defaultIsChecked\n\n  const [\n    {\n      \"aria-readonly\": _ariaReadonly,\n      disabled,\n      readOnly,\n      required,\n      onBlur: onBlurProp,\n      onFocus: onFocusProp,\n      ...formControlProps\n    },\n    rest,\n  ] = splitObject(computedProps, formControlProperties)\n\n  const [focusVisible, setFocusVisible] = useState<boolean>(false)\n  const [focused, setFocused] = useState<boolean>(false)\n  const [hovered, setHovered] = useState<boolean>(false)\n  const [active, setActive] = useState<boolean>(false)\n\n  const [checked, setChecked] = useState<boolean>(!!defaultChecked)\n\n  const controlled = checkedProp !== undefined\n  const resolvedChecked = controlled ? (checkedProp as boolean) : checked\n\n  useEffect(() => {\n    return trackFocusVisible(setFocusVisible)\n  }, [])\n\n  const onChange = useCallbackRef(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (readOnly || disabled) {\n        ev.preventDefault()\n\n        return\n      }\n\n      if (!controlled) setChecked(ev.target.checked)\n\n      onChangeProp?.(ev)\n    },\n    [readOnly, disabled, controlled],\n  )\n  const onFocus = useCallbackRef(onFocusProp)\n  const onBlur = useCallbackRef(onBlurProp)\n\n  const onKeyDown = useCallback(\n    ({ key }: KeyboardEvent) => {\n      if (key === \" \") setActive(true)\n    },\n    [setActive],\n  )\n\n  const onKeyUp = useCallback(\n    ({ key }: KeyboardEvent) => {\n      if (key === \" \") setActive(false)\n    },\n    [setActive],\n  )\n\n  const getContainerProps: PropGetter<\"label\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...formControlProps,\n      ...props,\n      ref,\n      \"data-checked\": dataAttr(resolvedChecked),\n      \"data-focus\": dataAttr(focused),\n      \"data-focus-visible\": dataAttr(focused && focusVisible),\n    }),\n    [resolvedChecked, formControlProps, focused, focusVisible],\n  )\n\n  const getIconProps: PropGetter = useCallback(\n    (props = {}, ref = null) => ({\n      ...formControlProps,\n      ...props,\n      ref,\n      \"aria-hidden\": true,\n      \"data-active\": dataAttr(active),\n      \"data-checked\": dataAttr(resolvedChecked),\n      \"data-focus\": dataAttr(focused),\n      \"data-focus-visible\": dataAttr(focused && focusVisible),\n      \"data-hover\": dataAttr(hovered),\n      onMouseDown: handlerAll(props.onMouseDown, () => setActive(true)),\n      onMouseEnter: handlerAll(props.onMouseEnter, () => setHovered(true)),\n      onMouseLeave: handlerAll(props.onMouseLeave, () => setHovered(false)),\n      onMouseUp: handlerAll(props.onMouseUp, () => setActive(false)),\n    }),\n    [resolvedChecked, active, focused, focusVisible, hovered, formControlProps],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...formControlProps,\n      ...props,\n      id,\n      ref,\n      type: \"radio\",\n      name,\n      style: {\n        border: \"0px\",\n        clip: \"rect(0px, 0px, 0px, 0px)\",\n        height: \"1px\",\n        margin: \"-1px\",\n        overflow: \"hidden\",\n        padding: \"0px\",\n        position: \"absolute\",\n        whiteSpace: \"nowrap\",\n        width: \"1px\",\n      },\n      \"aria-checked\": resolvedChecked,\n      checked: resolvedChecked,\n      disabled,\n      readOnly,\n      required,\n      value,\n      onBlur: handlerAll(props.onBlur, onBlur, () => setFocused(false)),\n      onChange: handlerAll(props.onChange, onChange),\n      onFocus: handlerAll(props.onFocus, onFocus, () => setFocused(true)),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n      onKeyUp: handlerAll(props.onKeyUp, onKeyUp),\n    }),\n    [\n      formControlProps,\n      id,\n      name,\n      value,\n      required,\n      disabled,\n      readOnly,\n      resolvedChecked,\n      onChange,\n      onBlur,\n      onFocus,\n      onKeyDown,\n      onKeyUp,\n    ],\n  )\n\n  const getLabelProps: PropGetter<\"span\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...formControlProps,\n      ...props,\n      ref,\n      \"data-checked\": dataAttr(resolvedChecked),\n      onMouseDown: handlerAll(props.onMouseDown, (ev: SyntheticEvent) => {\n        ev.preventDefault()\n        ev.stopPropagation()\n      }),\n      onTouchStart: handlerAll(props.onTouchStart, (ev: SyntheticEvent) => {\n        ev.preventDefault()\n        ev.stopPropagation()\n      }),\n    }),\n    [resolvedChecked, formControlProps],\n  )\n\n  return {\n    active,\n    checked: resolvedChecked,\n    focused,\n    focusVisible,\n    hovered,\n    props: rest,\n    getContainerProps,\n    getIconProps,\n    getInputProps,\n    getLabelProps,\n  }\n}\n\nexport type UseRadioReturn = ReturnType<typeof useRadio>\n"],"mappings":"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","names":["props"]}

package/dist/use-radio.mjs

@@ -0,0 +1,8 @@
+"use client"
+import {
+  useRadio
+} from "./chunk-HFS5TQ47.mjs";
+export {
+  useRadio
+};
+//# sourceMappingURL=use-radio.mjs.map

package/dist/use-radio.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/radio",
-  "version": "1.2.16-next-20241126134247",
+  "version": "1.3.0-dev-20241127021420",
   "description": "Yamada UI radio component",
   "keywords": [
     "yamada",
@@ -36,12 +36,12 @@
     "url": "https://github.com/yamada-ui/yamada-ui/issues"
   },
   "dependencies": {
-    "@yamada-ui/core": "1.16.0-next-20241126134247",
-    "@yamada-ui/form-control": "2.1.9-next-20241126134247",
-    "@yamada-ui/layouts": "1.2.3-next-20241126134247",
-    "@yamada-ui/use-controllable-state": "1.0.24-next-20241126134247",
-    "@yamada-ui/use-focus-visible": "1.1.11-next-20241126134247",
-    "@yamada-ui/utils": "1.6.0-next-20241126134247"
+    "@yamada-ui/core": "1.16.0-dev-20241127021420",
+    "@yamada-ui/form-control": "2.1.9-dev-20241127021420",
+    "@yamada-ui/layouts": "1.2.3-dev-20241127021420",
+    "@yamada-ui/use-controllable-state": "1.0.24-dev-20241127021420",
+    "@yamada-ui/use-focus-visible": "1.1.11-dev-20241127021420",
+    "@yamada-ui/utils": "1.6.0-dev-20241127021420"
   },
   "devDependencies": {
     "clean-package": "2.2.0",

package/dist/chunk-6FMV6NX2.mjs

@@ -1,14 +0,0 @@
-"use client"
-
-// src/radio-context.ts
-import { createContext } from "@yamada-ui/utils";
-var [RadioGroupProvider, useRadioGroupContext] = createContext({
-  name: "RadioGroupContext",
-  strict: false
-});
-
-export {
-  RadioGroupProvider,
-  useRadioGroupContext
-};
-//# sourceMappingURL=chunk-6FMV6NX2.mjs.map

package/dist/chunk-6FMV6NX2.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/radio-context.ts"],"sourcesContent":["import type { ThemeProps } from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { ChangeEvent } from \"react\"\nimport { createContext } from \"@yamada-ui/utils\"\n\nexport interface RadioGroupContext\n  extends ThemeProps<\"Radio\">,\n    FormControlOptions {\n  name: string\n  value: number | string\n  onChange: (evOrValue: ChangeEvent<HTMLInputElement> | number | string) => void\n}\n\nexport const [RadioGroupProvider, useRadioGroupContext] = createContext<\n  RadioGroupContext | undefined\n>({\n  name: \"RadioGroupContext\",\n  strict: false,\n})\n"],"mappings":";;;AAGA,SAAS,qBAAqB;AAUvB,IAAM,CAAC,oBAAoB,oBAAoB,IAAI,cAExD;AAAA,EACA,MAAM;AAAA,EACN,QAAQ;AACV,CAAC;","names":[]}

package/dist/chunk-PUPRIHYJ.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/radio.tsx"],"sourcesContent":["import type {\n  ComponentArgs,\n  HTMLUIProps,\n  PropGetter,\n  ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type {\n  ChangeEvent,\n  ChangeEventHandler,\n  ForwardedRef,\n  InputHTMLAttributes,\n  KeyboardEvent,\n  ReactElement,\n  RefAttributes,\n  SyntheticEvent,\n} from \"react\"\nimport { omitThemeProps, ui, useComponentMultiStyle } from \"@yamada-ui/core\"\nimport {\n  formControlProperties,\n  useFormControl,\n  useFormControlProps,\n} from \"@yamada-ui/form-control\"\nimport { trackFocusVisible } from \"@yamada-ui/use-focus-visible\"\nimport {\n  cx,\n  dataAttr,\n  funcAll,\n  handlerAll,\n  splitObject,\n  useCallbackRef,\n} from \"@yamada-ui/utils\"\nimport { forwardRef, useCallback, useEffect, useId, useState } from \"react\"\nimport { useRadioGroupContext } from \"./radio-context\"\n\nexport interface UseRadioProps<Y extends number | string = string>\n  extends FormControlOptions {\n  /**\n   * id assigned to input.\n   */\n  id?: string\n  /**\n   * The name of the input field in a radio.\n   */\n  name?: string\n  /**\n   * If `true`, the radio will be checked.\n   *\n   * @default false\n   */\n  checked?: boolean\n  /**\n   * If `true`, the radio will be initially checked.\n   *\n   * @default false\n   */\n  defaultChecked?: boolean\n  /**\n   * If `true`, the radio will be initially checked.\n   *\n   * @default false\n   *\n   * @deprecated Use `defaultChecked` instead.\n   */\n  defaultIsChecked?: boolean\n  /**\n   * If `true`, the radio will be checked.\n   *\n   * @default false\n   *\n   * @deprecated Use `checked` instead.\n   */\n  isChecked?: boolean\n  /**\n   * The value to be used in the radio button.\n   */\n  value?: Y\n  /**\n   * The callback invoked when the checked state changes.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>\n}\n\nexport const useRadio = <\n  Y extends number | string = string,\n  M extends Dict = Dict,\n>({\n  id,\n  ...props\n}: M & UseRadioProps<Y>) => {\n  const uuid = useId()\n\n  id ??= uuid\n\n  let {\n    id: _id,\n    name,\n    checked: checkedProp,\n    defaultChecked,\n    defaultIsChecked,\n    isChecked: isCheckedProp,\n    value,\n    onChange: onChangeProp,\n    ...computedProps\n  } = useFormControlProps({ id, ...props })\n\n  checkedProp ??= isCheckedProp\n  defaultChecked ??= defaultIsChecked\n\n  const [\n    {\n      \"aria-readonly\": _ariaReadonly,\n      disabled,\n      readOnly,\n      required,\n      onBlur: onBlurProp,\n      onFocus: onFocusProp,\n      ...formControlProps\n    },\n    rest,\n  ] = splitObject(computedProps, formControlProperties)\n\n  const [focusVisible, setFocusVisible] = useState<boolean>(false)\n  const [focused, setFocused] = useState<boolean>(false)\n  const [hovered, setHovered] = useState<boolean>(false)\n  const [active, setActive] = useState<boolean>(false)\n\n  const [checked, setChecked] = useState<boolean>(!!defaultChecked)\n\n  const controlled = checkedProp !== undefined\n  const resolvedChecked = controlled ? (checkedProp as boolean) : checked\n\n  useEffect(() => {\n    return trackFocusVisible(setFocusVisible)\n  }, [])\n\n  const onChange = useCallbackRef(\n    (ev: ChangeEvent<HTMLInputElement>) => {\n      if (readOnly || disabled) {\n        ev.preventDefault()\n\n        return\n      }\n\n      if (!controlled) setChecked(ev.target.checked)\n\n      onChangeProp?.(ev)\n    },\n    [readOnly, disabled, controlled],\n  )\n  const onFocus = useCallbackRef(onFocusProp)\n  const onBlur = useCallbackRef(onBlurProp)\n\n  const onKeyDown = useCallback(\n    ({ key }: KeyboardEvent) => {\n      if (key === \" \") setActive(true)\n    },\n    [setActive],\n  )\n\n  const onKeyUp = useCallback(\n    ({ key }: KeyboardEvent) => {\n      if (key === \" \") setActive(false)\n    },\n    [setActive],\n  )\n\n  const getContainerProps: PropGetter<\"label\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...formControlProps,\n      ...props,\n      ref,\n      \"data-checked\": dataAttr(resolvedChecked),\n    }),\n    [resolvedChecked, formControlProps],\n  )\n\n  const getIconProps: PropGetter<\"span\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...formControlProps,\n      ...props,\n      ref,\n      \"aria-hidden\": true,\n      \"data-active\": dataAttr(active),\n      \"data-checked\": dataAttr(resolvedChecked),\n      \"data-focus\": dataAttr(focused),\n      \"data-focus-visible\": dataAttr(focused && focusVisible),\n      \"data-hover\": dataAttr(hovered),\n      onMouseDown: handlerAll(props.onMouseDown, () => setActive(true)),\n      onMouseEnter: handlerAll(props.onMouseEnter, () => setHovered(true)),\n      onMouseLeave: handlerAll(props.onMouseLeave, () => setHovered(false)),\n      onMouseUp: handlerAll(props.onMouseUp, () => setActive(false)),\n    }),\n    [resolvedChecked, active, focused, focusVisible, hovered, formControlProps],\n  )\n\n  const getInputProps: PropGetter<\"input\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...formControlProps,\n      ...props,\n      id,\n      ref,\n      type: \"radio\",\n      name,\n      style: {\n        border: \"0px\",\n        clip: \"rect(0px, 0px, 0px, 0px)\",\n        height: \"1px\",\n        margin: \"-1px\",\n        overflow: \"hidden\",\n        padding: \"0px\",\n        position: \"absolute\",\n        whiteSpace: \"nowrap\",\n        width: \"1px\",\n      },\n      \"aria-checked\": resolvedChecked,\n      checked: resolvedChecked,\n      disabled,\n      readOnly,\n      required,\n      value,\n      onBlur: handlerAll(props.onBlur, onBlur, () => setFocused(false)),\n      onChange: handlerAll(props.onChange, onChange),\n      onFocus: handlerAll(props.onFocus, onFocus, () => setFocused(true)),\n      onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n      onKeyUp: handlerAll(props.onKeyUp, onKeyUp),\n    }),\n    [\n      formControlProps,\n      id,\n      name,\n      value,\n      required,\n      disabled,\n      readOnly,\n      resolvedChecked,\n      onChange,\n      onBlur,\n      onFocus,\n      onKeyDown,\n      onKeyUp,\n    ],\n  )\n\n  const getLabelProps: PropGetter<\"span\"> = useCallback(\n    (props = {}, ref = null) => ({\n      ...formControlProps,\n      ...props,\n      ref,\n      \"data-checked\": dataAttr(resolvedChecked),\n      onMouseDown: handlerAll(props.onMouseDown, (ev: SyntheticEvent) => {\n        ev.preventDefault()\n        ev.stopPropagation()\n      }),\n      onTouchStart: handlerAll(props.onTouchStart, (ev: SyntheticEvent) => {\n        ev.preventDefault()\n        ev.stopPropagation()\n      }),\n    }),\n    [resolvedChecked, formControlProps],\n  )\n\n  return {\n    active,\n    checked: resolvedChecked,\n    focused,\n    focusVisible,\n    hovered,\n    props: rest,\n    getContainerProps,\n    getIconProps,\n    getInputProps,\n    getLabelProps,\n  }\n}\n\nexport type UseRadioReturn = ReturnType<typeof useRadio>\n\ninterface RadioOptions {\n  iconProps?: HTMLUIProps<\"span\">\n  inputProps?: InputHTMLAttributes<HTMLInputElement>\n  labelProps?: HTMLUIProps<\"span\">\n}\n\nexport interface RadioProps<Y extends number | string = string>\n  extends Omit<HTMLUIProps<\"label\">, keyof UseRadioProps>,\n    ThemeProps<\"Radio\">,\n    UseRadioProps<Y>,\n    RadioOptions {}\n\n/**\n * `Radio` is a component used for allowing users to select one option from multiple choices.\n *\n * @see Docs https://yamada-ui.com/components/forms/radio\n */\nexport const Radio = forwardRef(\n  <Y extends number | string = string>(\n    props: RadioProps<Y>,\n    ref: ForwardedRef<HTMLInputElement>,\n  ) => {\n    const group = useRadioGroupContext()\n    const { value: groupValue, ...groupProps } = { ...group }\n    const control = useFormControl(props)\n    const [styles, mergedProps] = useComponentMultiStyle(\"Radio\", {\n      ...groupProps,\n      ...props,\n    })\n    const {\n      className,\n      children,\n      gap = \"0.5rem\",\n      isDisabled = groupProps.isDisabled ?? control.isDisabled,\n      isInvalid = groupProps.isInvalid ?? control.isInvalid,\n      isReadOnly = groupProps.isReadOnly ?? control.isReadOnly,\n      isRequired = groupProps.isRequired ?? control.isRequired,\n      iconProps,\n      inputProps,\n      labelProps,\n      ...computedProps\n    } = omitThemeProps(mergedProps)\n\n    computedProps.checked ??= computedProps.isChecked\n\n    const checkedProp =\n      groupValue && computedProps.value\n        ? groupValue === computedProps.value\n        : computedProps.checked\n\n    const onChange =\n      groupProps.onChange && computedProps.value\n        ? funcAll(groupProps.onChange, computedProps.onChange)\n        : computedProps.onChange\n\n    const {\n      checked,\n      props: rest,\n      getContainerProps,\n      getIconProps,\n      getInputProps,\n      getLabelProps,\n    } = useRadio({\n      ...computedProps,\n      checked: checkedProp,\n      isDisabled,\n      isInvalid,\n      isReadOnly,\n      isRequired,\n      onChange,\n    })\n\n    const tabIndex = !groupValue ? 0 : checked ? 0 : -1\n\n    return (\n      <ui.label\n        className={cx(\"ui-radio\", className)}\n        {...getContainerProps(rest)}\n        __css={{\n          alignItems: \"center\",\n          cursor: \"pointer\",\n          display: \"inline-flex\",\n          gap,\n          position: \"relative\",\n          verticalAlign: \"top\",\n          ...styles.container,\n        }}\n      >\n        <ui.input\n          className=\"ui-radio__input\"\n          {...getInputProps(\n            {\n              ...inputProps,\n              tabIndex,\n            },\n            ref,\n          )}\n        />\n\n        <ui.div\n          className=\"ui-radio__icon\"\n          {...getIconProps(iconProps)}\n          __css={{\n            display: \"inline-block\",\n            position: \"relative\",\n            userSelect: \"none\",\n            ...styles.icon,\n          }}\n        />\n\n        <ui.span\n          className=\"ui-radio__label\"\n          {...getLabelProps(labelProps)}\n          __css={{ ...styles.label }}\n        >\n          {children}\n        </ui.span>\n      </ui.label>\n    )\n  },\n) as {\n  <Y extends number | string = string>(\n    props: RadioProps<Y> & RefAttributes<HTMLInputElement>,\n  ): ReactElement\n} & ComponentArgs\n\nRadio.displayName = \"Radio\"\nRadio.__ui__ = \"Radio\"\n"],"mappings":"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","names":["props"]}