{"version":3,"file":"Button.cjs","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["'use client'\n\nimport { type ButtonHTMLAttributes, forwardRef, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { usePortal } from '../../hooks/usePortal'\nimport { Localizer } from '../../intl'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\nimport { ButtonWrapper } from './ButtonWrapper'\nimport { DisabledReason } from './DisabledReason'\n\nimport type { AbstractProps } from './types'\n\ntype Props = AbstractProps & Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof AbstractProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Button',\n  },\n})\n\nexport const Button = forwardRef<HTMLButtonElement, Props>(\n  (\n    {\n      type = 'button',\n      size = 'M',\n      prefix,\n      suffix,\n      wide = false,\n      variant = 'secondary',\n      disabled,\n      disabledReason,\n      className,\n      children,\n      loading = false,\n      ...rest\n    },\n    ref,\n  ) => {\n    const classNames = useMemo(() => {\n      const { wrapper } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n      }\n    }, [className])\n\n    const button = (\n      <ButtonWrapper\n        {...rest}\n        buttonRef={ref}\n        type={type}\n        size={size}\n        wide={wide}\n        variant={variant}\n        className={classNames.wrapper}\n        $loading={loading}\n        prefix={prefix}\n        suffix={suffix}\n        disabled={disabled}\n      >\n        <LoadingStatus loading={loading} />\n        {children}\n      </ButtonWrapper>\n    )\n\n    if (disabled && disabledReason) {\n      return <DisabledReason button={button} disabledReason={disabledReason} />\n    }\n\n    return button\n  },\n)\n// BottomFixedArea での判定に用いるために displayName を明示的に設定する\nButton.displayName = 'Button'\n\nconst LoadingStatus = memo<{ loading: boolean }>(({ loading }) => {\n  const { createPortal } = usePortal()\n\n  // `button` 要素内で live region を使うことはできないので、`role=\"status\"` を持つ要素を外側に配置している。 https://github.com/kufu/smarthr-ui/pull/4558\n  return createPortal(\n    <VisuallyHiddenText role=\"status\">\n      {loading && <Localizer id=\"smarthr-ui/Button/loading\" defaultText=\"処理中\" />}\n    </VisuallyHiddenText>,\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAgBA;AACE;AACE;AACD;AACF;;AAoBG;AACE;;AAGE;;AAEJ;;AAqBA;;;AAIA;AACF;AAEF;AACA;AAEA;AACE;;;AAQF;;"}