{"version":3,"file":"LoaderSpinner.cjs","sources":["../../../src/components/Loader/LoaderSpinner.tsx"],"sourcesContent":["'use client'\n\nimport { type ReactNode, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../intl'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\ntype Props = {\n  /** ローダーの大きさ */\n  size?: 'S' | 'M'\n  /** 代替テキスト */\n  alt?: ReactNode\n  /** コンポーネントの色調 */\n  type?: 'primary' | 'light'\n}\n\nconst classNameGenerator = tv({\n  slots: {\n    spinner: [\n      'smarthr-ui-Loader-spinner', // Button コンポーネントで使用\n      'shr-relative',\n      'shr-block',\n      'shr-mx-auto',\n      'shr-animate-[spin_1.6s_linear_infinite]',\n    ],\n    line: [\n      'smarthr-ui-Loader-line', // Button コンポーネントで使用\n      'shr-absolute',\n      'shr-block',\n      'shr-w-full',\n      'shr-h-full',\n      'shr-opacity-0',\n    ],\n    cog: [\n      'shr-inline-block',\n      'shr-relative',\n      'shr-w-1/2',\n      'shr-h-full',\n      'shr-overflow-hidden',\n      'shr-border-inherit',\n    ],\n    cogInner: [\n      'shr-absolute',\n      'shr-top-0',\n      'shr-block',\n      'shr-w-[200%]',\n      'shr-h-full',\n      'shr-box-border',\n      'shr-border-solid',\n      'shr-border-inherit',\n      'shr-border-b-transparent',\n      'shr-rounded-[50%]',\n      'shr-forced-color-adjust-none',\n    ],\n  },\n  variants: {\n    size: {\n      S: {\n        spinner: ['shr-w-1.5', 'shr-h-1.5'],\n        cogInner: ['shr-border-2'],\n      },\n      M: {\n        spinner: ['shr-w-3', 'shr-h-3'],\n        cogInner: ['shr-border-4'],\n      },\n    },\n    type: {\n      primary: {\n        line: ['shr-border-main', 'forced-colors:shr-border-[ButtonBorder]'],\n      },\n      light: {\n        line: ['shr-border-white', 'forced-colors:shr-border-[ButtonBorder]'],\n      },\n    },\n    lineNum: {\n      1: {\n        line: [\n          'shr-animate-[loader-line-full-unfill-rotate_4.8s_ease-in-out_infinite_both,_loader-line1-fade-in-out_4.8s_ease-in-out_infinite_both]',\n        ],\n      },\n      2: {\n        line: [\n          'shr-animate-[loader-line-full-unfill-rotate_4.8s_ease-in-out_infinite_both,_loader-line2-fade-in-out_4.8s_ease-in-out_infinite_both]',\n        ],\n      },\n      3: {\n        line: [\n          'shr-animate-[loader-line-full-unfill-rotate_4.8s_ease-in-out_infinite_both,_loader-line3-fade-in-out_4.8s_ease-in-out_infinite_both]',\n        ],\n      },\n      4: {\n        line: [\n          'shr-animate-[loader-line-full-unfill-rotate_4.8s_ease-in-out_infinite_both,_loader-line4-fade-in-out_4.8s_ease-in-out_infinite_both]',\n        ],\n      },\n    },\n    position: {\n      left: {\n        cogInner: [\n          'shr-border-r-transparent',\n          'shr-rotate-[129deg]',\n          'shr-animate-[loader-left-spin_1.2s_ease-in-out_infinite_both]',\n          'shr-left-0',\n        ],\n      },\n      right: {\n        cogInner: [\n          'shr-border-l-transparent',\n          'shr-rotate-[-129deg]',\n          'shr-animate-[loader-right-spin_1.2s_ease-in-out_infinite_both]',\n          '-shr-left-full',\n        ],\n      },\n    },\n  },\n})\n\nexport const LoaderSpinner = memo<Props>(({ size = 'M', alt, type = 'primary' }) => {\n  const { localize } = useIntl()\n\n  const classNames = useMemo(() => {\n    const { spinner, line, cog, cogInner } = classNameGenerator({\n      type,\n      size,\n    })\n\n    return {\n      spinner: spinner(),\n      cog: cog(),\n      cogInnerLeft: cogInner({ position: 'left' }),\n      cogInnerRight: cogInner({ position: 'right' }),\n      line1: line({ lineNum: 1 }),\n      line2: line({ lineNum: 2 }),\n      line3: line({ lineNum: 3 }),\n      line4: line({ lineNum: 4 }),\n    }\n  }, [type, size])\n\n  const actualAlt = useMemo(\n    () => alt ?? localize({ id: 'smarthr-ui/Loader/alt', defaultText: '処理中' }),\n    [alt, localize],\n  )\n\n  const lineBody = (\n    <>\n      <span className={classNames.cog}>\n        <span className={classNames.cogInnerLeft} />\n      </span>\n      <span className={classNames.cog}>\n        <span className={classNames.cogInnerRight} />\n      </span>\n    </>\n  )\n\n  return (\n    <span className={classNames.spinner}>\n      <span className={classNames.line1}>{lineBody}</span>\n      <span className={classNames.line2}>{lineBody}</span>\n      <span className={classNames.line3}>{lineBody}</span>\n      <span className={classNames.line4}>{lineBody}</span>\n      <VisuallyHiddenText>{actualAlt}</VisuallyHiddenText>\n    </span>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;AAiBA;AACE;AACE;AACE;;;;;AAKD;AACD;AACE;;;;;;AAMD;AACD;;;;;;;AAOC;AACD;;;;;;;;;;;;AAYC;AACF;AACD;AACE;AACE;AACE;;AAED;AACD;AACE;;AAED;AACF;AACD;AACE;AACE;AACD;AACD;AACE;AACD;AACF;AACD;AACE;AACE;;AAEC;AACF;AACD;AACE;;AAEC;AACF;AACD;AACE;;AAEC;AACF;AACD;AACE;;AAEC;AACF;AACF;AACD;AACE;AACE;;;;;AAKC;AACF;AACD;AACE;;;;;AAKC;AACF;AACF;AACF;AACF;AAEM;AACL;AAEA;;;;AAIG;;;;;;;;;;;AAYH;AAEA;AAKA;;AAoBF;;"}