@lobehub/ui/es/Grid/Grid.mjs.map

Lobe UI is an open-source UI component library for building AIGC web apps

{"version":3,"file":"Grid.mjs","names":["Grid: FC<GridProps>","Flexbox"],"sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { isString } from 'es-toolkit/compat';\nimport { type FC } from 'react';\nimport { useMemo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport { styles } from './style';\nimport type { GridProps } from './type';\n\nconst Grid: FC<GridProps> = ({\n  className,\n  gap = '1em',\n  rows = 3,\n  children,\n  maxItemWidth = 240,\n  ref,\n  style,\n  ...rest\n}) => {\n  // Convert props to CSS variables\n  const cssVariables = useMemo<Record<string, string>>(() => {\n    const vars: Record<string, string> = {\n      '--grid-gap': isString(gap) ? gap : `${gap}px`,\n      '--grid-max-item-width': isString(maxItemWidth) ? maxItemWidth : `${maxItemWidth}px`,\n      '--grid-rows': `${rows}`,\n    };\n    return vars;\n  }, [gap, maxItemWidth, rows]);\n\n  return (\n    <Flexbox\n      className={cx(styles, className)}\n      gap={gap as any}\n      ref={ref}\n      style={{\n        ...cssVariables,\n        ...style,\n      }}\n      {...rest}\n    >\n      {children}\n    </Flexbox>\n  );\n};\n\nGrid.displayName = 'Grid';\n\nexport default Grid;\n"],"mappings":";;;;;;;;;;AAYA,MAAMA,QAAuB,EAC3B,WACA,MAAM,OACN,OAAO,GACP,UACA,eAAe,KACf,KACA,OACA,GAAG,WACC;CAEJ,MAAM,eAAe,cAAsC;AAMzD,SALqC;GACnC,cAAc,SAAS,IAAI,GAAG,MAAM,GAAG,IAAI;GAC3C,yBAAyB,SAAS,aAAa,GAAG,eAAe,GAAG,aAAa;GACjF,eAAe,GAAG;GACnB;IAEA;EAAC;EAAK;EAAc;EAAK,CAAC;AAE7B,QACE,oBAACC;EACC,WAAW,GAAG,QAAQ,UAAU;EAC3B;EACA;EACL,OAAO;GACL,GAAG;GACH,GAAG;GACJ;EACD,GAAI;EAEH;GACO;;AAId,KAAK,cAAc;AAEnB,mBAAe"}