{"version":3,"file":"Sidebar.cjs","sources":["../../../../src/components/Layout/Sidebar/Sidebar.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type CSSProperties,\n  Children,\n  type ComponentPropsWithRef,\n  type ComponentType,\n  type PropsWithChildren,\n  type ReactElement,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { useSectionWrapper } from '../../SectioningContent'\n\nimport type { Gap, SeparateGap } from '../../../types'\n\nconst classNameGenerator = tv({\n  base: ['shr-flex shr-flex-wrap', 'empty:shr-gap-0'],\n  variants: {\n    align: {\n      start: 'shr-items-start',\n      'flex-start': 'shr-items-start',\n      end: 'shr-items-end',\n      'flex-end': 'shr-items-end',\n      center: 'shr-items-center',\n      baseline: 'shr-items-baseline',\n      stretch: 'shr-items-stretch',\n    },\n    rowGap: {\n      0: 'shr-gap-y-0',\n      0.25: 'shr-gap-y-0.25',\n      0.5: 'shr-gap-y-0.5',\n      0.75: 'shr-gap-y-0.75',\n      1: 'shr-gap-y-1',\n      1.25: 'shr-gap-y-1.25',\n      1.5: 'shr-gap-y-1.5',\n      2: 'shr-gap-y-2',\n      2.5: 'shr-gap-y-2.5',\n      3: 'shr-gap-y-3',\n      3.5: 'shr-gap-y-3.5',\n      4: 'shr-gap-y-4',\n      8: 'shr-gap-y-8',\n      X3S: 'shr-gap-y-0.25',\n      XXS: 'shr-gap-y-0.5',\n      XS: 'shr-gap-y-1',\n      S: 'shr-gap-y-1.5',\n      M: 'shr-gap-y-2',\n      L: 'shr-gap-y-2.5',\n      XL: 'shr-gap-y-3',\n      XXL: 'shr-gap-y-3.5',\n      X3L: 'shr-gap-y-4',\n    } as { [key in Gap]: string },\n    columnGap: {\n      0: 'shr-gap-x-0',\n      0.25: 'shr-gap-x-0.25',\n      0.5: 'shr-gap-x-0.5',\n      0.75: 'shr-gap-x-0.75',\n      1: 'shr-gap-x-1',\n      1.25: 'shr-gap-x-1.25',\n      1.5: 'shr-gap-x-1.5',\n      2: 'shr-gap-x-2',\n      2.5: 'shr-gap-x-2.5',\n      3: 'shr-gap-x-3',\n      3.5: 'shr-gap-x-3.5',\n      4: 'shr-gap-x-4',\n      8: 'shr-gap-x-8',\n      X3S: 'shr-gap-x-0.25',\n      XXS: 'shr-gap-x-0.5',\n      XS: 'shr-gap-x-1',\n      S: 'shr-gap-x-1.5',\n      M: 'shr-gap-x-2',\n      L: 'shr-gap-x-2.5',\n      XL: 'shr-gap-x-3',\n      XXL: 'shr-gap-x-3.5',\n      X3L: 'shr-gap-x-4',\n    } as { [key in Gap]: string },\n  },\n})\nconst itemClassNameGenerator = tv({\n  slots: {\n    firstItem: '',\n    lastItem: '',\n  },\n  variants: {\n    right: {\n      true: {\n        firstItem: 'shr-grow-[999] shr-basis-0',\n        lastItem: 'shr-grow',\n      },\n      false: {\n        firstItem: 'shr-grow',\n        lastItem: 'shr-grow-[999] shr-basis-0',\n      },\n    },\n  },\n})\n\ntype Props = Omit<VariantProps<typeof classNameGenerator>, 'rowGap' | 'columnGap'> &\n  VariantProps<typeof itemClassNameGenerator> &\n  PropsWithChildren<{\n    as?: string | ComponentType<any>\n    /** コンポーネントの `min-width` 値 */\n    contentsMinWidth?: CSSProperties['minWidth']\n    /** 各領域の間隔の指定（gap） */\n    gap?: Gap | SeparateGap\n  }> &\n  ComponentPropsWithRef<'div'>\n\nexport const Sidebar = forwardRef<HTMLDivElement, Props>(\n  (\n    {\n      as: Component = 'div',\n      align = 'stretch',\n      contentsMinWidth = '50%',\n      gap = 1,\n      right = false,\n      className,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const gaps = useMemo(() => {\n      if (gap instanceof Object) {\n        return gap\n      }\n\n      return {\n        row: gap,\n        column: gap,\n      }\n    }, [gap])\n\n    const actualClassName = useMemo(\n      () => classNameGenerator({ align, rowGap: gaps.row, columnGap: gaps.column, className }),\n      [align, gaps.row, gaps.column, className],\n    )\n    const classNames = useMemo(() => {\n      const { firstItem, lastItem } = itemClassNameGenerator({ right })\n\n      return {\n        firstItem: firstItem(),\n        lastItem: lastItem(),\n      }\n    }, [right])\n    const styles = useMemo(() => {\n      const styleProps = {\n        minWidth: contentsMinWidth,\n      }\n\n      if (right) {\n        return {\n          firstItem: styleProps,\n          lastItem: undefined,\n        }\n      }\n\n      return {\n        firstItem: undefined,\n        lastItem: styleProps,\n      }\n    }, [contentsMinWidth, right])\n\n    // tailwindcss で :first-child / :last-child に対して動的な min-height を当てられないため、React で疑似的に処理している\n    const maxChildrenIndex = Children.count(children) - 1\n    const styledChildren = Children.map(children, (child, i) => {\n      if (isValidElement(child)) {\n        const childClassName = child.props.className ?? ''\n\n        if (i === 0) {\n          return cloneElement(child as ReactElement, {\n            className: `${classNames.firstItem} ${childClassName}`,\n            style: { ...styles.firstItem, ...child.props.style },\n          })\n        } else if (i === maxChildrenIndex) {\n          return cloneElement(child as ReactElement, {\n            className: `${classNames.lastItem} ${childClassName}`,\n            style: { ...styles.lastItem, ...child.props.style },\n          })\n        }\n      }\n\n      return child\n    })\n\n    const Wrapper = useSectionWrapper(Component)\n    const body = (\n      <Component {...rest} ref={ref} className={actualClassName}>\n        {styledChildren}\n      </Component>\n    )\n\n    if (Wrapper) {\n      return <Wrapper>{body}</Wrapper>\n    }\n\n    return body\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;AAoBA;AACE;AACA;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;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;AACD;AACE;AACE;AACA;AACD;AACD;AACE;AACE;AACE;AACA;AACD;AACD;AACE;AACA;AACD;AACF;AACF;AACF;AAaM;AAcH;AACE;AACE;;;AAIA;AACA;;AAEJ;AAEA;AAIA;AACE;;;;;AAMF;AACA;AACE;AACE;;;;AAKE;AACA;;;;AAKF;AACA;;AAEJ;;;AAIA;AACE;;AAGE;;AAEI;AACA;AACD;;AACI;;AAEH;AACA;AACD;;;AAIL;AACF;AAEA;AACA;;AAOE;;AAGF;AACF;;"}