{"version":3,"file":"Heading.cjs","sources":["../../../src/components/Heading/Heading.tsx"],"sourcesContent":["'use client'\n\nimport { type ComponentProps, type PropsWithChildren, memo, useContext, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { LevelContext } from '../SectioningContent'\nimport { STYLE_TYPE_MAP, Text, type TextProps } from '../Text'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\nexport type HeadingTagTypes = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\n\ntype StylingProps =\n  | {\n      /** テキストのスタイル */\n      type?: Extract<TextProps['styleType'], 'sectionTitle'>\n\n      /**\n       * テキストのサイズ\n       *\n       * `sectionTitle`の場合、`XXL`か`XL`か`L`を指定してください\n       *\n       * @default 'L'\n       */\n      size?: Extract<TextProps['size'], 'XXL' | 'XL' | 'L'>\n    }\n  | {\n      /** テキストのスタイル\n       *\n       * screenTitleを使用する場合、PageHeadingコンポーネントを使用してください\n       * */\n      type: Exclude<TextProps['styleType'], 'screenTitle' | 'sectionTitle'>\n      size?: never\n    }\n\nexport type AbstractProps = PropsWithChildren<{\n  /**\n   * 可能な限り利用せず、SectioningContent(Article, Aside, Nav, Section)を使ってHeadingと関連する範囲を明確に指定する方法を検討してください\n   */\n  unrecommendedTag?: HeadingTagTypes\n  /** 視覚的に非表示にするフラグ */\n  visuallyHidden?: boolean\n  /** テキスト左に設置するアイコン */\n  icon?: ComponentProps<typeof Text>['icon']\n}> &\n  StylingProps\n\nexport type ElementProps = Omit<\n  ComponentProps<'h1'>,\n  keyof AbstractProps | keyof TextProps | 'role' | 'aria-level'\n>\ntype Props = AbstractProps & ElementProps\n\nconst generateTagProps = (level: number, unrecommendedTag?: HeadingTagTypes) => {\n  let role = undefined\n  let ariaLevel = undefined\n\n  // TODO: h1はPageHeadingで設定するため、自動計算では必ずh2以下になるようにする\n  if (!unrecommendedTag && level > 6) {\n    role = 'heading'\n    ariaLevel = level\n  }\n\n  return {\n    as: unrecommendedTag || ((level <= 6 ? `h${level}` : 'span') as HeadingTagTypes | 'span'),\n    role,\n    'aria-level': ariaLevel,\n  }\n}\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-Heading',\n  variants: {\n    visuallyHidden: {\n      false: 'shr-m-[unset]',\n    },\n  },\n  defaultVariants: {\n    visuallyHidden: false,\n  },\n})\n\nexport const Heading = memo<Props>(\n  ({ unrecommendedTag, type = 'sectionTitle', size, className, visuallyHidden, icon, ...rest }) => {\n    const level = useContext(LevelContext)\n    const tagProps = useMemo(\n      () => generateTagProps(level, unrecommendedTag),\n      [level, unrecommendedTag],\n    )\n    const actualClassName = useMemo(\n      () => classNameGenerator({ visuallyHidden, className }),\n      [className, visuallyHidden],\n    )\n    const actualTypography = useMemo(() => {\n      const defaultTypography = STYLE_TYPE_MAP[type]\n\n      if (type === 'sectionTitle' && size) {\n        return { ...defaultTypography, size }\n      }\n\n      return defaultTypography\n    }, [type, size])\n\n    const commonProps = {\n      ...rest,\n      ...actualTypography,\n      ...tagProps,\n      className: actualClassName,\n    }\n\n    if (visuallyHidden) {\n      return <VisuallyHiddenText {...commonProps} />\n    }\n\n    return <Text {...commonProps} icon={icon} />\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;;;AAoDA;;;;AAKE;;;;;AAME;;AAEA;;AAEJ;AAEA;AACE;AACA;AACE;AACE;AACD;AACF;AACD;AACE;AACD;AACF;AAEM;AAEH;;;AASA;AACE;AAEA;AACE;;AAGF;AACF;AAEA;AACE;AACA;AACA;AACA;;;AAIA;;;AAIJ;;"}