koval-ui/dist/src/lib/Card/Card.cjs.map

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

{"version":3,"file":"Card.cjs","sources":["../../../../src/lib/Card/Card.tsx"],"sourcesContent":["import type {ComponentProps, ReactNode} from 'react';\nimport {forwardRef, useMemo} from 'react';\nimport classNames from 'classnames';\nimport {useLocalTheme} from 'css-vars-hook';\n\nimport type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';\nimport {useInternalId} from '@/internal/hooks/useInternalId.ts';\nimport {useLinkRefs} from '@/internal/hooks/useLinkRefs.ts';\nimport {Picture} from '@/lib';\nimport type {ActionButton} from '@/internal/Actions';\nimport {ActionsTree} from '@/internal/Actions';\n\nimport classes from './Card.module.css';\n\nenum Layouts {\n    horizontal = 'horizontal',\n    vertical = 'vertical',\n}\n\nexport type Props = DataAttributes &\n    LibraryProps & {\n        children?: ReactNode;\n        /** Provide an url for header image */\n        headerImageUrl?: string;\n        /** Provide an array of actions with callbacks */\n        actions?: (\n            | ComponentProps<typeof ActionButton>\n            | [ComponentProps<typeof ActionButton>, ComponentProps<typeof ActionButton>]\n        )[];\n        /** Set a vertical or horizontal layout for the card */\n        layout?: keyof typeof Layouts;\n        /** Provide width of the card. Applied in vertical mode */\n        width?: number;\n        /** Provide height of the card. Applied in horizontal mode */\n        height?: number;\n    };\n\nexport const Card = forwardRef<HTMLDivElement, Props>(\n    (\n        {\n            children,\n            className,\n            headerImageUrl,\n            actions = [],\n            id: idProp,\n            layout = Layouts.vertical,\n            width,\n            height,\n            ...nativeProps\n        },\n        ref\n    ) => {\n        const id = useInternalId(idProp);\n        const {LocalRoot, ref: internalRef} = useLocalTheme<HTMLDivElement>();\n        useLinkRefs(ref, internalRef);\n        const theme = useMemo(\n            () => ({width: width ? `${width}px` : 'auto', height: height ? `${height}px` : 'auto'}),\n            [height, width]\n        );\n        return (\n            <LocalRoot\n                {...nativeProps}\n                theme={theme}\n                id={id}\n                className={classNames(\n                    classes.card,\n                    {\n                        [classes.vertical]: layout === Layouts.vertical,\n                        [classes.horizontal]: layout === Layouts.horizontal,\n                    },\n                    className\n                )}>\n                {headerImageUrl && <Picture className={classes.headerImage} src={headerImageUrl} />}\n                <div className={classes.body}>{children}</div>\n                <footer className={classes.actions}>\n                    <ActionsTree\n                        actions={actions}\n                        classNameAction={classes.actionButton}\n                        classNameRow={classes.row}\n                    />\n                </footer>\n            </LocalRoot>\n        );\n    }\n);\n\nCard.displayName = 'Card';\n"],"names":["Card","forwardRef","children","className","headerImageUrl","actions","idProp","layout","width","height","nativeProps","ref","id","useInternalId","LocalRoot","internalRef","useLocalTheme","useLinkRefs","theme","useMemo","jsxs","classNames","classes","Picture","jsx","ActionsTree"],"mappings":"gdAqCaA,EAAOC,EAAAA,WAChB,CACI,CACI,SAAAC,EACA,UAAAC,EACA,eAAAC,EACA,QAAAC,EAAU,CAAA,EACV,GAAIC,EACJ,OAAAC,EAAS,WACT,MAAAC,EACA,OAAAC,EACA,GAAGC,CAAA,EAEPC,IACC,CACD,MAAMC,EAAKC,EAAAA,cAAcP,CAAM,EACzB,CAAC,UAAAQ,EAAW,IAAKC,CAAA,EAAeC,EAAAA,cAAA,EACtCC,EAAAA,YAAYN,EAAKI,CAAW,EAC5B,MAAMG,EAAQC,EAAAA,QACV,KAAO,CAAC,MAAOX,EAAQ,GAAGA,CAAK,KAAO,OAAQ,OAAQC,EAAS,GAAGA,CAAM,KAAO,MAAA,GAC/E,CAACA,EAAQD,CAAK,CAAA,EAElB,OACIY,EAAAA,KAACN,EAAA,CACI,GAAGJ,EACJ,MAAAQ,EACA,GAAAN,EACA,UAAWS,EACPC,EAAAA,QAAQ,KACR,CACI,CAACA,EAAAA,QAAQ,QAAQ,EAAGf,IAAW,WAC/B,CAACe,EAAAA,QAAQ,UAAU,EAAGf,IAAW,YAAA,EAErCJ,CAAA,EAEH,SAAA,CAAAC,SAAmBmB,EAAAA,QAAA,CAAQ,UAAWD,EAAAA,QAAQ,YAAa,IAAKlB,EAAgB,EACjFoB,EAAAA,IAAC,MAAA,CAAI,UAAWF,EAAAA,QAAQ,KAAO,SAAApB,EAAS,EACxCsB,EAAAA,IAAC,SAAA,CAAO,UAAWF,EAAAA,QAAQ,QACvB,SAAAE,EAAAA,IAACC,EAAAA,YAAA,CACG,QAAApB,EACA,gBAAiBiB,EAAAA,QAAQ,aACzB,aAAcA,EAAAA,QAAQ,GAAA,CAAA,CAC1B,CACJ,CAAA,CAAA,CAAA,CAGZ,CACJ,EAEAtB,EAAK,YAAc"}