{"version":3,"file":"RadioButton.cjs","sources":["../../../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type PropsWithChildren,\n  forwardRef,\n  memo,\n  useId,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { isIOS } from '../../libs/ua'\n\ntype Props = PropsWithChildren<ComponentPropsWithRef<'input'>>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-RadioButton shr-inline-flex shr-items-baseline',\n    label: [\n      'smarthr-ui-RadioButton-label shr-ms-0.5 shr-text-base shr-leading-tight',\n      'shr-cursor-pointer',\n      '[[data-disabled=\"true\"]>&]:shr-cursor-[revert] [[data-disabled=\"true\"]>&]:shr-text-disabled',\n    ],\n    innerWrapper:\n      'shr-relative shr-inline-block shr-h-em shr-w-em shr-shrink-0 shr-translate-y-[0.125em] shr-leading-none',\n    box: [\n      'shr-pointer-events-none',\n      'shr-border-shorthand shr-box-border shr-block shr-h-full shr-w-full shr-rounded-full shr-bg-white',\n      /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */\n      'forced-colors:shr-hidden',\n      'contrast-more:shr-border-high-contrast',\n      'peer-checked:shr-border-main peer-checked:shr-bg-main contrast-more:peer-checked:shr-border-high-contrast',\n      'peer-checked:before:shr-pointer-events-none peer-checked:before:shr-absolute peer-checked:before:shr-left-1/2 peer-checked:before:shr-top-1/2 peer-checked:before:shr-h-[0.375em] peer-checked:before:shr-w-[0.375em] peer-checked:before:-shr-translate-x-1/2 peer-checked:before:-shr-translate-y-1/2 peer-checked:before:shr-rounded-full peer-checked:before:shr-bg-white peer-checked:before:shr-content-[\"\"]',\n      'peer-disabled:shr-border-default/50 peer-disabled:shr-bg-white-darken',\n      'peer-disabled:peer-checked:shr-border-default peer-disabled:peer-checked:shr-bg-border peer-disabled:peer-checked:before:shr-bg-white-darken',\n      'peer-focus-visible:shr-focus-indicator--outer',\n      'peer-[:not(:disabled)]:peer-hover:shr-shadow-input-hover',\n    ],\n    input: [\n      'smarthr-ui-RadioButton-radioButton shr-peer',\n      'shr-absolute shr-left-0 shr-top-0 shr-m-0 shr-h-full shr-w-full shr-cursor-pointer shr-opacity-0',\n      'disabled:shr-pointer-events-none',\n      /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */\n      'forced-colors:shr-static forced-colors:shr-opacity-100',\n    ],\n  },\n})\n\nexport const RadioButton = forwardRef<HTMLInputElement, Props>(\n  ({ onChange, children, className, required, id, disabled, ...rest }, ref) => {\n    const classNames = useMemo(() => {\n      const { wrapper, innerWrapper, box, input, label } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        innerWrapper: innerWrapper(),\n        box: box(),\n        input: input(),\n        label: label(),\n      }\n    }, [className])\n\n    const defaultId = useId()\n    const radioButtonId = id || defaultId\n\n    return (\n      <span data-disabled={disabled} className={classNames.wrapper}>\n        <span className={classNames.innerWrapper}>\n          <input\n            {...rest}\n            ref={ref}\n            type=\"radio\"\n            id={radioButtonId}\n            // HINT: required属性を設定すると、iOS端末で以下の問題が発生します\n            //  - フォームのsubmit時にバリデーションは行われるが、ユーザーにフィードバックがない\n            //    - エラーメッセージが表示されない\n            //    - 問題のある入力フィールドまでスクロールしない\n            // 歴史的に一部の端末ではrequired属性が無視されることがあるため、HTMLのバリデーションのみとすることは少ないです\n            // そのため、iOS端末ではrequired属性を設定しない方がユーザーがsubmitできない理由をエラーメッセージなどで正しく理解できるようになります\n            required={isIOS ? undefined : required}\n            disabled={disabled}\n            onChange={onChange}\n            className={classNames.input}\n            data-smarthr-ui-input=\"true\"\n          />\n          <AriaHiddenBox className={classNames.box} />\n        </span>\n        <LabeledChildren htmlFor={radioButtonId} className={classNames.label}>\n          {children}\n        </LabeledChildren>\n      </span>\n    )\n  },\n)\n\nconst AriaHiddenBox = memo<{ className: string }>(({ className }) => (\n  <span className={className} aria-hidden=\"true\" />\n))\n\nconst LabeledChildren = memo<PropsWithChildren<{ htmlFor: string; className: string }>>(\n  ({ htmlFor, className, children }) =>\n    children && (\n      <label htmlFor={htmlFor} className={className}>\n        {children}\n      </label>\n    ),\n)\n"],"names":[],"mappings":";;;;;;;;AAgBA;AACE;AACE;AACA;;;;AAIC;AACD;AAEA;;;;;;;;;;;;AAYC;AACD;;;;;;AAMC;AACF;AACF;AAEM;AAEH;AACE;;AAGE;;;;;;AAMJ;AAEA;AACA;AAEA;;;;;;;;AA2BF;AAGF;AAIA;;"}