koval-ui/dist/src/lib/Layout/Grid.cjs.map

React components collection with minimalistic design. Supports theming, layout, and input validation.

{"version":3,"file":"Grid.cjs","sources":["../../../../src/lib/Layout/Grid.tsx"],"sourcesContent":["import type {ReactNode} from 'react';\nimport {useLocalTheme} from 'css-vars-hook';\nimport {useMemo, forwardRef} from 'react';\nimport classNames from 'classnames';\n\nimport type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';\nimport {useLinkRefs} from '@/internal/hooks/useLinkRefs.ts';\n\nimport type {SizeUnit, FluidUnit} from './SizeTypes';\nimport classes from './Layout.module.css';\n\nexport type Props = DataAttributes &\n    LibraryProps & {\n        /** Set Container width in pixels as a number or set to `fluid` to make it 100% */\n        width?: SizeUnit | FluidUnit;\n        /** Set amount of columns to place in container */\n        base?: number;\n        /** Set a gap between columns in pixels */\n        gap?: number;\n        /** Select HTML element to render as a container */\n        as?: string;\n        children: ReactNode;\n    };\n\nconst normalizeWidth = (widthProp: Props['width']) => {\n    if (widthProp === 'fluid') {\n        return '100%';\n    }\n    return `${widthProp}px`;\n};\n\nexport const Grid = forwardRef<HTMLElement, Props>(\n    ({width = 1280, className, as = 'div', children, gap = 16, base = 12, ...nativeProps}, ref) => {\n        const {LocalRoot, ref: internalRef} = useLocalTheme();\n        useLinkRefs(ref, internalRef);\n        const theme = useMemo(\n            () => ({'container-width': normalizeWidth(width), base, gap: `${gap}px`}),\n            [width, gap, base]\n        );\n        return (\n            <LocalRoot\n                {...nativeProps}\n                theme={theme}\n                as={as}\n                className={classNames(classes.grid, className)}>\n                {children}\n            </LocalRoot>\n        );\n    }\n);\n\nGrid.displayName = 'Grid';\n"],"names":["normalizeWidth","widthProp","Grid","forwardRef","width","className","as","children","gap","base","nativeProps","ref","LocalRoot","internalRef","useLocalTheme","useLinkRefs","theme","useMemo","jsx","classNames","classes"],"mappings":"+RAwBMA,EAAkBC,GAChBA,IAAc,QACP,OAEJ,GAAGA,CAAS,KAGVC,EAAOC,EAAA,WAChB,CAAC,CAAC,MAAAC,EAAQ,KAAM,UAAAC,EAAW,GAAAC,EAAK,MAAO,SAAAC,EAAU,IAAAC,EAAM,GAAI,KAAAC,EAAO,GAAI,GAAGC,CAAA,EAAcC,IAAQ,CAC3F,KAAM,CAAC,UAAAC,EAAW,IAAKC,CAAA,EAAeC,EAAAA,cAAc,EACpDC,EAAA,YAAYJ,EAAKE,CAAW,EAC5B,MAAMG,EAAQC,EAAA,QACV,KAAO,CAAC,kBAAmBjB,EAAeI,CAAK,EAAG,KAAAK,EAAM,IAAK,GAAGD,CAAG,OACnE,CAACJ,EAAOI,EAAKC,CAAI,CACrB,EAEI,OAAAS,EAAA,IAACN,EAAA,CACI,GAAGF,EACJ,MAAAM,EACA,GAAAV,EACA,UAAWa,EAAWC,UAAQ,KAAMf,CAAS,EAC5C,SAAAE,CAAA,CACL,CAAA,CAGZ,EAEAL,EAAK,YAAc"}