{"version":3,"file":"Center.cjs","sources":["../../../../src/components/Layout/Center/Center.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type ComponentType,\n  type PropsWithChildren,\n  forwardRef,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useSectionWrapper } from '../../SectioningContent'\n\nimport type { Gap } from '../../../types'\n\ntype AbstractProps = PropsWithChildren<{\n  /** コンテンツの最小高さ */\n  minHeight?: number | string\n  /** コンテンツの最大幅 */\n  maxWidth?: number | string\n  /** 境界とコンテンツの間の余白 */\n  padding?: Gap\n  /** 天地中央揃えも有効化するかどうか */\n  verticalCentering?: boolean\n  as?: string | ComponentType<any>\n}>\ntype Props = AbstractProps & Omit<ComponentPropsWithRef<'div'>, keyof AbstractProps>\n\nexport const centerClassNameGenerator = tv({\n  base: 'shr-mx-auto shr-box-content shr-flex shr-flex-col shr-items-center',\n  variants: {\n    padding: {\n      0: 'shr-p-0',\n      0.25: 'shr-p-0.25',\n      0.5: 'shr-p-0.5',\n      0.75: 'shr-p-0.75',\n      1: 'shr-p-1',\n      1.25: 'shr-p-1.25',\n      1.5: 'shr-p-1.5',\n      2: 'shr-p-2',\n      2.5: 'shr-p-2.5',\n      3: 'shr-p-3',\n      3.5: 'shr-p-3.5',\n      4: 'shr-p-4',\n      8: 'shr-p-8',\n      X3S: 'shr-p-0.25',\n      XXS: 'shr-p-0.5',\n      XS: 'shr-p-1',\n      S: 'shr-p-1.5',\n      M: 'shr-p-2',\n      L: 'shr-p-2.5',\n      XL: 'shr-p-3',\n      XXL: 'shr-p-3.5',\n      X3L: 'shr-p-4',\n    } as { [key in Gap]: string },\n    verticalCentering: {\n      true: 'shr-justify-center',\n    },\n  },\n})\n\nexport const Center = forwardRef<HTMLDivElement, Props>(\n  (\n    { minHeight, maxWidth, padding, verticalCentering, as: Component = 'div', className, ...rest },\n    ref,\n  ) => {\n    const style = useMemo(\n      () => ({\n        minHeight: minHeight ?? undefined,\n        maxWidth: maxWidth ?? undefined,\n      }),\n      [minHeight, maxWidth],\n    )\n    const actualClassName = useMemo(\n      () => centerClassNameGenerator({ padding, verticalCentering, className }),\n      [padding, verticalCentering, className],\n    )\n\n    const Wrapper = useSectionWrapper(Component)\n    const body = <Component {...rest} ref={ref} className={actualClassName} style={style} />\n\n    if (Wrapper) {\n      return <Wrapper>{body}</Wrapper>\n    }\n\n    return body\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;AA4BO;AACL;AACA;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAC2B;AAC7B;AACE;AACD;AACF;AACF;AAEM;AAKH;;;AAIG;;AAQH;AACA;;AAGE;;AAGF;AACF;;;"}