{"version":3,"file":"SideNavItemButton.cjs","sources":["../../../src/components/SideNav/SideNavItemButton.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  type FC,\n  type ReactNode,\n  memo,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { UnstyledButton } from '../Button'\nimport { Cluster } from '../Layout'\n\nexport type SideNavSizeType = 'M' | 'S'\n\ntype AbstractProps = {\n  /** アイテムの識別子 */\n  id: string\n  /** アイテムのタイトル\n   * @deprecated SideNav で items を使う時の props です。children を使ってください。\n   */\n  title?: ReactNode\n  /** タイトルのプレフィックスの内容。通常、StatusLabelやIconの配置に用います。 */\n  prefix?: ReactNode\n  /** タイトルのサフィックスの内容。通常、Prefixを使用済みの場合にStatusLabelやChipの配置に用います。 */\n  suffix?: ReactNode\n  /** 選択されているアイテムかどうか */\n  current?: boolean\n  /** アイテムの大きさ */\n  size?: SideNavSizeType\n  /** アイテムを押下したときに発火するコールバック関数 */\n  onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => void\n}\ntype Props = AbstractProps & Omit<ComponentPropsWithoutRef<'li'>, keyof AbstractProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-SideNav-item',\n      'data-[current=true]:shr-relative data-[current=true]:shr-bg-main data-[current=true]:shr-text-white',\n      'data-[current=true]:after:shr-absolute data-[current=true]:after:-shr-right-0.25 data-[current=true]:after:shr-top-1/2 data-[current=true]:after:-shr-translate-y-1/2 data-[current=true]:after:shr-translate-x-0 data-[current=true]:after:shr-border-b-4 data-[current=true]:after:shr-border-l-4 data-[current=true]:after:shr-border-r-0 data-[current=true]:after:shr-border-t-4 data-[current=true]:after:shr-border-solid data-[current=true]:after:shr-border-b-transparent data-[current=true]:after:shr-border-l-main data-[current=true]:after:shr-border-r-transparent data-[current=true]:after:shr-border-t-transparent data-[current=true]:after:shr-content-[\"\"]',\n      'data-[current=false]:hover:shr-bg-column-darken',\n    ],\n    button: [\n      'shr-w-full shr-leading-none [&]:shr-box-border',\n      'focus-visible:shr-focus-indicator',\n      '[[data-current=true]_&:focus-visible]:shr-focus-indicator',\n      'shr-inline-flex shr-items-center',\n      'shr-no-underline',\n    ],\n    body: 'shr-w-full',\n    bodyText: 'smarthr-ui-SideNav-itemBodyText shr-grow',\n  },\n  variants: {\n    size: {\n      M: {\n        button: 'shr-p-1 shr-text-base',\n      },\n      S: {\n        button: 'shr-px-1 shr-py-0.5 shr-text-sm',\n      },\n    },\n  },\n})\n\nexport const SideNavItemButton: FC<\n  Omit<Props, 'onClick'> & {\n    onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\n  }\n> = ({ id, title, prefix, suffix, current, size, onClick, children, className, ...rest }) => {\n  const classNames = useMemo(() => {\n    const { wrapper, button, body, bodyText } = classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      button: button({ size: size ?? 'M' }),\n      body: body(),\n      bodyText: bodyText(),\n    }\n  }, [className, size])\n\n  return (\n    <li {...rest} data-current={!!current} className={classNames.wrapper}>\n      <UnstyledButton className={classNames.button} onClick={onClick} value={id}>\n        <BodyCluster\n          prefix={prefix}\n          suffix={suffix}\n          title={children ?? title}\n          classNames={classNames}\n        />\n      </UnstyledButton>\n    </li>\n  )\n}\n\nexport const SideNavItemAnchor = <T extends ElementType = 'a'>({\n  id,\n  title,\n  prefix,\n  suffix,\n  current,\n  size,\n  onClick,\n  children,\n  className,\n  href,\n  elementAs,\n  ...rest\n}: Omit<Props, 'onClick'> & {\n  onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void\n  href: string | undefined\n  /** next/link などのカスタムコンポーネントを指定します。指定がない場合はデフォルトで `a` タグが使用されます。 */\n  elementAs?: T\n}) => {\n  const classNames = useMemo(() => {\n    const { wrapper, button, body, bodyText } = classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      button: button({ size: size ?? 'M' }),\n      body: body(),\n      bodyText: bodyText(),\n    }\n  }, [className, size])\n\n  const Anchor = elementAs || 'a'\n\n  return (\n    <li {...rest} data-current={!!current} className={classNames.wrapper}>\n      <Anchor className={classNames.button} href={href} onClick={onClick} data-value={id}>\n        <BodyCluster\n          prefix={prefix}\n          suffix={suffix}\n          title={children ?? title}\n          classNames={classNames}\n        />\n      </Anchor>\n    </li>\n  )\n}\n\nconst BodyCluster = memo<\n  Pick<Props, 'prefix' | 'suffix' | 'title'> & {\n    classNames: { body: string; bodyText: string }\n  }\n>(({ prefix, suffix, title, classNames }) => (\n  <Cluster inline align=\"center\" className={classNames.body} as=\"span\">\n    {prefix}\n    <span className={classNames.bodyText}>{title}</span>\n    {suffix}\n  </Cluster>\n))\n"],"names":["tv","useMemo","_jsx","UnstyledButton","memo","_jsxs","Cluster"],"mappings":"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"}