UNPKG

koval-ui

Version:

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

1 lines 2.11 kB
{"version":3,"file":"Figure.cjs","sources":["../../../../src/lib/Figure/Figure.tsx"],"sourcesContent":["import type {ReactElement} 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';\n\nimport classes from './Figure.module.css';\n\nenum Positions {\n center = 'center',\n left = 'left',\n right = 'right',\n}\n\nexport type Props = DataAttributes &\n LibraryProps & {\n children: ReactElement;\n caption?: string;\n position?: keyof typeof Positions;\n };\n\nexport const Figure = forwardRef<HTMLDivElement, Props>(\n ({children, className, caption, position = Positions.center, ...nativeProps}, ref) => {\n const theme = useMemo(\n () => ({\n position,\n }),\n [position]\n );\n const {LocalRoot} = useLocalTheme();\n return (\n <LocalRoot theme={theme} className={classes.wrapper}>\n <figure\n {...nativeProps}\n className={classNames(classes.figure, className)}\n ref={ref}>\n {children}\n {caption && <figcaption>{caption}</figcaption>}\n </figure>\n </LocalRoot>\n );\n }\n);\n\nFigure.displayName = 'Figure';\n"],"names":["Figure","forwardRef","children","className","caption","position","nativeProps","ref","theme","useMemo","LocalRoot","useLocalTheme","jsx","classes","jsxs","classNames"],"mappings":"6OAsBaA,EAASC,EAAA,WAClB,CAAC,CAAC,SAAAC,EAAU,UAAAC,EAAW,QAAAC,EAAS,SAAAC,EAAW,SAAkB,GAAGC,CAAW,EAAGC,IAAQ,CAClF,MAAMC,EAAQC,EAAA,QACV,KAAO,CACH,SAAAJ,CAAA,GAEJ,CAACA,CAAQ,CACb,EACM,CAAC,UAAAK,CAAS,EAAIC,gBAAc,EAClC,OACKC,EAAA,IAAAF,EAAA,CAAU,MAAAF,EAAc,UAAWK,UAAQ,QACxC,SAAAC,EAAA,KAAC,SAAA,CACI,GAAGR,EACJ,UAAWS,EAAWF,UAAQ,OAAQV,CAAS,EAC/C,IAAAI,EACC,SAAA,CAAAL,EACAE,GAAYQ,EAAAA,IAAA,aAAA,CAAY,SAAQR,CAAA,CAAA,CAAA,CAAA,CAAA,EAEzC,CAAA,CAGZ,EAEAJ,EAAO,YAAc"}