{"version":3,"file":"Reel.cjs","sources":["../../../../src/components/Layout/Reel/Reel.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type ComponentType,\n  type PropsWithChildren,\n  forwardRef,\n  useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { Scroller } from '../../Scroller'\nimport { useSectionWrapper } from '../../SectioningContent'\n\nimport type { Gap } from '../../../types'\n\ntype Props = VariantProps<typeof classNameGenerator> &\n  PropsWithChildren<{\n    as?: string | ComponentType<any>\n  }> &\n  ComponentPropsWithRef<'div'>\n\nconst classNameGenerator = tv({\n  base: [\n    'shr-flex',\n    '[&_>_*]:shr-flex- [&_>_*]:shr-flex-shrink-0 [&_>_*]:shr-basis-auto',\n    /*\n      Chromeで空の要素にflex-gapがあると印刷時にレイアウトが崩れるので gap の値を0にする\n      See https://bugs.chromium.org/p/chromium/issues/detail?id=1161709\n    */\n    'empty:shr-gap-0',\n  ],\n  variants: {\n    gap: {\n      0: 'shr-gap-0',\n      0.25: 'shr-gap-0.25',\n      0.5: 'shr-gap-0.5',\n      0.75: 'shr-gap-0.75',\n      1: 'shr-gap-1',\n      1.25: 'shr-gap-1.25',\n      1.5: 'shr-gap-1.5',\n      2: 'shr-gap-2',\n      2.5: 'shr-gap-2.5',\n      3: 'shr-gap-3',\n      3.5: 'shr-gap-3.5',\n      4: 'shr-gap-4',\n      8: 'shr-gap-8',\n      X3S: 'shr-gap-0.25',\n      XXS: 'shr-gap-0.5',\n      XS: 'shr-gap-1',\n      S: 'shr-gap-1.5',\n      M: 'shr-gap-2',\n      L: 'shr-gap-2.5',\n      XL: 'shr-gap-3',\n      XXL: 'shr-gap-3.5',\n      X3L: 'shr-gap-4',\n    } as { [key in Gap]: string },\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  },\n})\n\nexport const Reel = forwardRef<HTMLDivElement, Props>(\n  ({ as: Component = 'div', gap = 0.5, padding = 0, className, children, ...rest }, ref) => {\n    const actualClassName = useMemo(\n      () => classNameGenerator({ gap, padding, className }),\n      [className, gap, padding],\n    )\n\n    const Wrapper = useSectionWrapper(Component)\n    const body = (\n      <Scroller\n        {...rest}\n        as={Component}\n        ref={ref}\n        direction=\"horizontal\"\n        className={actualClassName}\n      >\n        {children}\n      </Scroller>\n    )\n\n    if (Wrapper) {\n      return <Wrapper>{body}</Wrapper>\n    }\n\n    return body\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;;AAsBA;AACE;;;AAGE;;;AAGE;;AAEH;AACD;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAC2B;AAC9B;AACF;AAEM;;AAOH;;;AAcE;;AAGF;AACF;;"}