UNPKG

@deepsquare/turbine

Version:

Zero-dependencies efficient wrapper to build Tailwind-based React components easily.

1 lines 2.42 kB
{"mappings":";;;;;;;;;;;;;;;kDAmBES,EADa,EAEbF,SAFa,EAGbI,YAHa,EAIa,CAJ5B;IAKE,KAAA,CAAME,KAAK,IAA8B,CAAzC,CAA2CN,SAAS,EAAEO,aAAb,MAA+BC,KAAH,CAA5B,CAAD,GAA4C,CAA3C;QACvC,EAAA,AAAA,iCAAA;QACA,EAAA,AAAA,2FAAA;QACA,KAAA,CAAMC,gBAAgB,GAAGf,oBAAO,KAAO,CAAvC;YACE,MAAA,IAAUM,SAAU,CAAA,CAAA,EAAGO,aAAhB,KAAA,IAAA,IAAgBA,aAAhB,KAAA,IAAA,CAAA,CAAA,GAAgBA,aAAhB,GAAiC,CAAG,IAAEG,IAAtC,GAA6CC,OAA7C,OAA2D,CAA3D;QACR,CAF+B,EAE7B,CAACJ;YAAAA,aAAD;QAAA,CAF6B,EAIhC,CAFC,AAED,EAFC,AAED,gEAFC;QAGD,MAAA,0CAAQ,EAAD;eAAQH,YAAJ;eAAsBI,KAAJ;YAAW,SAAA,EAAWC,gBAAD;;IACnD,CATD;IAWAH,KAAK,CAACM,WAAN,IAAqB,KAAA,EAAOV,EAAG;IAE/B,MAAA,CAAOI,KAAP;AACD,CAAA","sources":["src/turbine.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport { useMemo } from 'react';\n\ntype ElementsWithClass = {\n [K in keyof JSX.IntrinsicElements]: Extract<JSX.IntrinsicElements[K], { className?: string | undefined }>;\n};\n\n/**\n * Build a turbine component based a the `T` HTML tag.\n * @param {T} As The HTML tag.\n * @param {string} className The class to apply.\n * @param {Omit<JSX.IntrinsicElements[T], \"className\">} defaultProps The default props to pass to the component.\n * @returns {React.FC<JSX.IntrinsicElements[T]>} The \"turbine\" component.\n *\n * @example Bootstrap-like cards:\n * const Card = turbine('div', 'px-6 py-4 rounded bg-grey-200');\n * export default Card\n */\nexport default function turbine<T extends keyof ElementsWithClass>(\n As: T,\n className: string,\n defaultProps?: Omit<ElementsWithClass[T], 'className'>,\n): FC<ElementsWithClass[T]> {\n const inner: FC<ElementsWithClass[T]> = ({ className: classNameProp, ...props }) => {\n // Merge the two class definitions.\n // We chose to not use the famous `classnames` package here since the merge is fairly simple.\n const mergedClassNames = useMemo(() => {\n return `${className} ${classNameProp ?? ''}`.trim().replace(/ +/, ' ');\n }, [classNameProp]);\n\n // @ts-ignore Too complex for TypeScript, but it's good, trust us!\n return <As {...defaultProps} {...props} className={mergedClassNames} />;\n };\n\n inner.displayName = `pure_${As}`;\n\n return inner;\n}\n"],"names":["FC","useMemo","ElementsWithClass","JSX","IntrinsicElements","Extract","K","className","turbine","As","T","defaultProps","Omit","inner","classNameProp","props","mergedClassNames","trim","replace","displayName"],"version":3,"file":"turbine.cjs.map"}