flowbite-react
Version:
Official React components built for Flowbite and Tailwind CSS
1 lines • 1.93 kB
Source Map (JSON)
{"version":3,"file":"HelperText.mjs","sources":["../../../../src/components/HelperText/HelperText.tsx"],"sourcesContent":["import type { ComponentProps, FC } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\nimport { mergeDeep } from \"../../helpers/merge-deep\";\nimport { getTheme } from \"../../theme-store\";\nimport type { DeepPartial } from \"../../types\";\nimport type { FlowbiteColors } from \"../Flowbite\";\n\nexport interface FlowbiteHelperTextTheme {\n root: FlowbiteHelperTextRootTheme;\n}\n\nexport interface FlowbiteHelperTextRootTheme {\n base: string;\n colors: HelperColors;\n}\n\nexport interface HelperColors extends Pick<FlowbiteColors, \"gray\" | \"info\" | \"failure\" | \"warning\" | \"success\"> {\n [key: string]: string;\n}\n\nexport interface HelperTextProps extends Omit<ComponentProps<\"p\">, \"color\"> {\n color?: keyof HelperColors;\n theme?: DeepPartial<FlowbiteHelperTextTheme>;\n value?: string;\n}\n\nexport const HelperText: FC<HelperTextProps> = ({\n children,\n className,\n color = \"default\",\n theme: customTheme = {},\n value,\n ...props\n}) => {\n const theme = mergeDeep(getTheme().helperText, customTheme);\n\n return (\n <p className={twMerge(theme.root.base, theme.root.colors[color], className)} {...props}>\n {value ?? children ?? \"\"}\n </p>\n );\n};\n\nHelperText.displayName = \"HelperText\";\n"],"names":[],"mappings":";;;;;AAKY,MAAC,UAAU,GAAG,CAAC;AAC3B,EAAE,QAAQ;AACV,EAAE,SAAS;AACX,EAAE,KAAK,GAAG,SAAS;AACnB,EAAE,KAAK,EAAE,WAAW,GAAG,EAAE;AACzB,EAAE,KAAK;AACP,EAAE,GAAG,KAAK;AACV,CAAC,KAAK;AACN,EAAE,MAAM,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE,CAAC,UAAU,EAAE,WAAW,CAAC,CAAC;AAC9D,EAAE,uBAAuB,GAAG,CAAC,GAAG,EAAE,EAAE,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,EAAE,GAAG,KAAK,EAAE,QAAQ,EAAE,KAAK,IAAI,QAAQ,IAAI,EAAE,EAAE,CAAC,CAAC;AAC7J,EAAE;AACF,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}