koval-ui/dist/src/lib/Skeleton/SkeletonText.cjs.map

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

{"version":3,"file":"SkeletonText.cjs","sources":["../../../../src/lib/Skeleton/SkeletonText.tsx"],"sourcesContent":["import {useMemo, forwardRef} from 'react';\nimport classNames from 'classnames';\nimport {useLocalTheme} from 'css-vars-hook';\n\nimport type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';\nimport {createArray} from '@/internal/utils/createArray.ts';\nimport {useLinkRefs} from '@/internal/hooks/useLinkRefs.ts';\nimport {normalizeUnit} from '@/lib/Skeleton/normalizeUnit.ts';\n\nimport classes from './Skeleton.module.css';\nimport {SkeletonShape} from './SkeletonShape.tsx';\nimport type {SkeletonProps} from './SkeletonTypes.ts';\n\nexport type Props = DataAttributes & LibraryProps & SkeletonProps & {lines?: number};\n\nexport const SkeletonText = forwardRef<HTMLDivElement, Props>(\n    (\n        {\n            className,\n            width = 'fluid',\n            height,\n            lines: linesProp = 3,\n            marginY = 36,\n            marginX = 0,\n            ...nativeProps\n        },\n        ref\n    ) => {\n        const {LocalRoot, ref: innerRef} = useLocalTheme<HTMLDivElement>();\n        useLinkRefs(ref, innerRef);\n        const theme = useMemo(\n            () => ({\n                width: normalizeUnit(width),\n                height: normalizeUnit(height),\n                'margin-y': marginY,\n                'margin-x': marginX,\n            }),\n            [height, marginX, marginY, width]\n        );\n        const isSingle = linesProp === 1;\n        const lines = createArray(linesProp - 1);\n        return (\n            <LocalRoot\n                {...nativeProps}\n                className={classNames(classes.skeletonText, className)}\n                theme={theme}>\n                {isSingle && <SkeletonShape marginY={9} height={24} />}\n                {!isSingle &&\n                    lines.map((_, i) => {\n                        return <SkeletonShape marginY={9} key={i} height={24} />;\n                    })}\n                {!isSingle && (\n                    <SkeletonShape marginY={9} className={classes.shortLine} height={24} />\n                )}\n            </LocalRoot>\n        );\n    }\n);\n\nSkeletonText.displayName = 'SkeletonText';\n"],"names":["SkeletonText","forwardRef","className","width","height","linesProp","marginY","marginX","nativeProps","ref","LocalRoot","innerRef","useLocalTheme","useLinkRefs","theme","useMemo","normalizeUnit","isSingle","lines","createArray","jsxs","classNames","classes","jsx","SkeletonShape","_","i"],"mappings":"qZAeaA,EAAeC,EAAA,WACxB,CACI,CACI,UAAAC,EACA,MAAAC,EAAQ,QACR,OAAAC,EACA,MAAOC,EAAY,EACnB,QAAAC,EAAU,GACV,QAAAC,EAAU,EACV,GAAGC,GAEPC,IACC,CACD,KAAM,CAAC,UAAAC,EAAW,IAAKC,CAAA,EAAYC,EAAAA,cAA8B,EACjEC,EAAA,YAAYJ,EAAKE,CAAQ,EACzB,MAAMG,EAAQC,EAAA,QACV,KAAO,CACH,MAAOC,gBAAcb,CAAK,EAC1B,OAAQa,gBAAcZ,CAAM,EAC5B,WAAYE,EACZ,WAAYC,CAAA,GAEhB,CAACH,EAAQG,EAASD,EAASH,CAAK,CACpC,EACMc,EAAWZ,IAAc,EACzBa,EAAQC,EAAAA,YAAYd,EAAY,CAAC,EAEnC,OAAAe,EAAA,KAACV,EAAA,CACI,GAAGF,EACJ,UAAWa,EAAWC,UAAQ,aAAcpB,CAAS,EACrD,MAAAY,EACC,SAAA,CAAAG,GAAaM,EAAA,IAAAC,gBAAA,CAAc,QAAS,EAAG,OAAQ,GAAI,EACnD,CAACP,GACEC,EAAM,IAAI,CAACO,EAAGC,UACFF,EAAc,cAAA,CAAA,QAAS,EAAW,OAAQ,IAAXE,CAAe,CACzD,EACJ,CAACT,GACEM,EAAAA,IAACC,EAAc,cAAA,CAAA,QAAS,EAAG,UAAWF,EAAA,QAAQ,UAAW,OAAQ,EAAI,CAAA,CAAA,CAAA,CAE7E,CAAA,CAGZ,EAEAtB,EAAa,YAAc"}