{"version":3,"file":"BottomFixedArea.cjs","sources":["../../../src/components/BottomFixedArea/BottomFixedArea.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type ComponentPropsWithRef,\n  type ComponentType,\n  type FC,\n  type FunctionComponentElement,\n  type MouseEventHandler,\n  type PropsWithChildren,\n  type ReactNode,\n  memo,\n  useEffect,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Base } from '../Base'\nimport { type AnchorButton, Button } from '../Button'\nimport { Cluster, Stack } from '../Layout'\n\nimport { validateElement } from './helper'\n\nimport type { ComponentProps as IconProps } from '../Icon'\n\nexport type ButtonType =\n  | FunctionComponentElement<ComponentProps<typeof Button>>\n  | FunctionComponentElement<ComponentProps<typeof AnchorButton>>\n\ntype AbstractProps = {\n  /** この領域の説明 */\n  description?: ReactNode\n  /** 表示する `Button` または `AnchorButton` （`variant=\"primary\"` である必要がある） */\n  primaryButton?: ButtonType\n  /** 表示する `Button` または `AnchorButton` （`variant=\"secondary\"` である必要がある）*/\n  secondaryButton?: ButtonType\n  /** 表示する tertialy link のプロパティの配列 */\n  tertiaryLinks?: Array<\n    ComponentPropsWithRef<'button'> & {\n      text: ReactNode\n      icon?: ComponentType<IconProps>\n      type?: 'button' | 'reset'\n      onClick?: MouseEventHandler<HTMLButtonElement>\n    }\n  >\n  /** コンポーネントに適用する z-index 値 */\n  zIndex?: number\n}\ntype Props = AbstractProps & Omit<ComponentPropsWithRef<'div'>, keyof AbstractProps>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-BottomFixedArea',\n      'shr-fixed shr-bottom-0 shr-z-fixed-menu shr-box-border shr-w-full shr-rounded-none shr-p-1.5 shr-text-center',\n      // Layer 3 だが、上方向への指定のためベタ書き： https://smarthr.design/products/design-tokens/shadow/\n      '[box-shadow:_0_-4px_8px_2px_rgba(0,_0,_0,_0.24)]',\n      '[&_ul]:shr-list-none',\n    ],\n    tertiaryButton: [\n      'smarthr-ui-BottomFixedArea-tertiaryLink',\n      '-shr-mb-0.5 shr-font-normal shr-text-main',\n    ],\n  },\n})\n\n/**\n * @deprecated BottomFixedArea は非推奨です。FloatArea を使ってください。 https://smarthr.design/products/components/float-area/\n */\nexport const BottomFixedArea: FC<Props> = ({\n  description,\n  primaryButton,\n  secondaryButton,\n  tertiaryLinks,\n  zIndex,\n  className,\n  ...rest\n}) => {\n  const classNames = useMemo(() => {\n    const { wrapper, tertiaryButton } = classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      tertiaryButton: tertiaryButton(),\n    }\n  }, [className])\n  const style = useMemo(() => ({ zIndex }), [zIndex])\n\n  useEffect(() => {\n    validateElement(primaryButton, secondaryButton)\n  }, [primaryButton, secondaryButton])\n\n  return (\n    <Base {...rest} className={classNames.wrapper} style={style}>\n      <Stack>\n        <Description>{description}</Description>\n        <Stack gap={0.25}>\n          {(secondaryButton || primaryButton) && (\n            <Cluster as=\"ul\" justify=\"center\" gap={{ row: 0.5, column: 1 }}>\n              {secondaryButton && (\n                <li className=\"smarthr-ui-BottomFixedArea-secondaryButton\">{secondaryButton}</li>\n              )}\n              {primaryButton && (\n                <li className=\"smarthr-ui-BottomFixedArea-primaryButton\">{primaryButton}</li>\n              )}\n            </Cluster>\n          )}\n          {tertiaryLinks && tertiaryLinks.length > 0 && (\n            <Cluster as=\"ul\" justify=\"center\" gap={{ row: 0.5, column: 0 }}>\n              {tertiaryLinks.map(\n                (\n                  {\n                    text,\n                    icon: Icon,\n\n                    ...tertiaryRest\n                  },\n                  index,\n                ) => (\n                  <li key={index} className=\"smarthr-ui-BottomFixedArea-tertiaryListItem\">\n                    <Button\n                      {...tertiaryRest}\n                      variant=\"text\"\n                      prefix={Icon && <Icon />}\n                      className={classNames.tertiaryButton}\n                    >\n                      {text}\n                    </Button>\n                  </li>\n                ),\n              )}\n            </Cluster>\n          )}\n        </Stack>\n      </Stack>\n    </Base>\n  )\n}\n\nconst Description = memo<PropsWithChildren>(\n  ({ children }) =>\n    children && <p className=\"smarthr-ui-BottomFixedArea-description\">{children}</p>,\n)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAkDA;AACE;AACE;;;;;;AAMC;AACD;;;AAGC;AACF;AACF;AAED;;AAEG;;AAUD;;;AAII;;;AAGJ;AACA;;AAGE;AACF;AAEA;AA6CF;AAEA;;"}