@yamada-ui/radio/dist/chunk-RA4K44ZS.mjs.map

Yamada UI radio component

{"version":3,"sources":["../src/radio.tsx"],"sourcesContent":["import type { ComponentArgs, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport type {\n  ForwardedRef,\n  InputHTMLAttributes,\n  ReactElement,\n  ReactNode,\n  RefAttributes,\n} from \"react\"\nimport type { UseRadioProps } from \"./use-radio\"\nimport { omitThemeProps, ui, useComponentMultiStyle } from \"@yamada-ui/core\"\nimport { useFormControl } from \"@yamada-ui/form-control\"\nimport { cx, funcAll } from \"@yamada-ui/utils\"\nimport { forwardRef } from \"react\"\nimport { useRadioGroupContext } from \"./radio-context\"\nimport { useRadio } from \"./use-radio\"\n\ninterface RadioOptions {\n  /**\n   * The label of the radio.\n   */\n  label?: ReactNode\n  /**\n   * Props for icon element.\n   */\n  iconProps?: HTMLUIProps<\"span\">\n  /**\n   * Props for input element.\n   */\n  inputProps?: InputHTMLAttributes<HTMLInputElement>\n  /**\n   * Props for label element.\n   */\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      disabled = groupProps.disabled ?? control.disabled,\n      gap = \"0.5rem\",\n      invalid = groupProps.invalid ?? control.invalid,\n      label,\n      readOnly = groupProps.readOnly ?? control.readOnly,\n      required = groupProps.required ?? control.required,\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      disabled,\n      invalid,\n      readOnly,\n      required,\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 ?? label}\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":";;;;;;;;;AASA,SAAS,gBAAgB,IAAI,8BAA8B;AAC3D,SAAS,sBAAsB;AAC/B,SAAS,IAAI,eAAe;AAC5B,SAAS,kBAAkB;AA6FrB,SAaE,KAbF;AA3DC,IAAM,QAAQ;AAAA,EACnB,CACE,OACA,QACG;AAlDP;AAmDI,UAAM,QAAQ,qBAAqB;AACnC,UAAM,EAAE,OAAO,YAAY,GAAG,WAAW,IAAI,EAAE,GAAG,MAAM;AACxD,UAAM,UAAU,eAAe,KAAK;AACpC,UAAM,CAAC,QAAQ,WAAW,IAAI,uBAAuB,SAAS;AAAA,MAC5D,GAAG;AAAA,MACH,GAAG;AAAA,IACL,CAAC;AACD,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,YAAW,gBAAW,aAAX,YAAuB,QAAQ;AAAA,MAC1C,MAAM;AAAA,MACN,WAAU,gBAAW,YAAX,YAAsB,QAAQ;AAAA,MACxC;AAAA,MACA,YAAW,gBAAW,aAAX,YAAuB,QAAQ;AAAA,MAC1C,YAAW,gBAAW,aAAX,YAAuB,QAAQ;AAAA,MAC1C;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,IAAI,eAAe,WAAW;AAE9B,wBAAc,YAAd,0BAAc,UAAY,cAAc;AAExC,UAAM,cACJ,cAAc,cAAc,QACxB,eAAe,cAAc,QAC7B,cAAc;AAEpB,UAAM,WACJ,WAAW,YAAY,cAAc,QACjC,QAAQ,WAAW,UAAU,cAAc,QAAQ,IACnD,cAAc;AAEpB,UAAM;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,SAAS;AAAA,MACX,GAAG;AAAA,MACH,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,UAAM,WAAW,CAAC,aAAa,IAAI,UAAU,IAAI;AAEjD,WACE;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC,WAAW,GAAG,YAAY,SAAS;AAAA,QAClC,GAAG,kBAAkB,IAAI;AAAA,QAC1B,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,SAAS;AAAA,UACT;AAAA,UACA,UAAU;AAAA,UACV,eAAe;AAAA,UACf,GAAG,OAAO;AAAA,QACZ;AAAA,QAEA;AAAA;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC,WAAU;AAAA,cACT,GAAG;AAAA,gBACF;AAAA,kBACE,GAAG;AAAA,kBACH;AAAA,gBACF;AAAA,gBACA;AAAA,cACF;AAAA;AAAA,UACF;AAAA,UAEA;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC,WAAU;AAAA,cACT,GAAG,aAAa,SAAS;AAAA,cAC1B,OAAO;AAAA,gBACL,SAAS;AAAA,gBACT,UAAU;AAAA,gBACV,YAAY;AAAA,gBACZ,GAAG,OAAO;AAAA,cACZ;AAAA;AAAA,UACF;AAAA,UAEA;AAAA,YAAC,GAAG;AAAA,YAAH;AAAA,cACC,WAAU;AAAA,cACT,GAAG,cAAc,UAAU;AAAA,cAC5B,OAAO,EAAE,GAAG,OAAO,MAAM;AAAA,cAExB,wCAAY;AAAA;AAAA,UACf;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAMA,MAAM,cAAc;AACpB,MAAM,SAAS;","names":[]}