{"version":3,"file":"Base.cjs","sources":["../../../src/components/Base/Base.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 { paddingBlock, paddingInline } from '../../tailwind'\nimport { useSectionWrapper } from '../SectioningContent'\n\nimport type { Gap } from '../../types'\n\nexport const baseClassNameGenerator = tv({\n  base: 'smarthr-ui-Base shr-bg-white forced-colors:shr-border-shorthand contrast-more:shr-border-high-contrast',\n  variants: {\n    paddingBlock,\n    paddingInline,\n    radius: {\n      s: 'shr-rounded-m',\n      m: 'shr-rounded-l',\n    },\n    overflowBlock: {\n      visible: 'shr-overflow-y-visible',\n      hidden: 'shr-overflow-y-hidden',\n      clip: 'shr-overflow-y-clip',\n      scroll: 'shr-overflow-y-scroll',\n      auto: 'shr-overflow-y-auto',\n    },\n    overflowInline: {\n      visible: 'shr-overflow-x-visible',\n      hidden: 'shr-overflow-x-hidden',\n      clip: 'shr-overflow-x-clip',\n      scroll: 'shr-overflow-x-scroll',\n      auto: 'shr-overflow-x-auto',\n    },\n    layer: {\n      0: 'shr-shadow-layer-0',\n      1: 'shr-shadow-layer-1',\n      2: 'shr-shadow-layer-2',\n      3: 'shr-shadow-layer-3',\n      4: 'shr-shadow-layer-4',\n    },\n  },\n})\n\ntype Overflow = 'visible' | 'hidden' | 'clip' | 'scroll' | 'auto'\n\ntype AbstractProps = PropsWithChildren<\n  Omit<\n    VariantProps<typeof baseClassNameGenerator>,\n    'paddingBlock' | 'paddingInline' | 'overflowBlock' | 'overflowInline'\n  > & {\n    /** 境界とコンテンツの間の余白 */\n    padding?: Gap | SeparatePadding\n    /** コンテンツが要素内に収まらない場合の処理方法 */\n    overflow?: Overflow | { x: Overflow; y: Overflow }\n    as?: string | ComponentType<any>\n  }\n>\nexport type ElementProps = Omit<ComponentPropsWithRef<'div'>, keyof AbstractProps>\ntype Props = AbstractProps & ElementProps\n\ntype SeparatePadding = {\n  block?: Gap\n  inline?: Gap\n}\n\nexport const Base = forwardRef<HTMLDivElement, Props>(\n  ({ padding, radius, overflow, layer, as: Component = 'div', className, ...rest }, ref) => {\n    const actualClassName = useMemo(() => {\n      const actualPadding =\n        padding instanceof Object ? padding : { block: padding, inline: padding }\n      const actualOverflow = overflow instanceof Object ? overflow : { x: overflow, y: overflow }\n\n      return baseClassNameGenerator({\n        paddingBlock: actualPadding.block,\n        paddingInline: actualPadding.inline,\n        radius: radius ?? 'm',\n        overflowBlock: actualOverflow.y,\n        overflowInline: actualOverflow.x,\n        layer: layer ?? 1,\n        className,\n      })\n    }, [layer, overflow, padding, radius, className])\n\n    const Wrapper = useSectionWrapper(Component)\n    const body = <Component {...rest} ref={ref} className={actualClassName} />\n\n    if (Wrapper) {\n      return <Wrapper>{body}</Wrapper>\n    }\n\n    return body\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;;AAgBO;AACL;AACA;;;AAGE;AACE;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;AACA;AACD;AACF;AACF;AAwBM;AAEH;;;AAKE;;;;;;;;AAQC;AACH;AAEA;AACA;;AAGE;;AAGF;AACF;;;"}