flowbite-react
Version:
Official React components built for Flowbite and Tailwind CSS
1 lines • 3.87 kB
Source Map (JSON)
{"version":3,"file":"Alert.mjs","sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import type { ComponentProps, FC, ReactNode } from \"react\";\nimport { HiX } from \"react-icons/hi\";\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 FlowbiteAlertTheme {\n base: string;\n borderAccent: string;\n closeButton: FlowbiteAlertCloseButtonTheme;\n color: FlowbiteColors;\n icon: string;\n rounded: string;\n wrapper: string;\n}\n\nexport interface FlowbiteAlertCloseButtonTheme {\n base: string;\n color: FlowbiteColors;\n icon: string;\n}\n\nexport interface AlertProps extends Omit<ComponentProps<\"div\">, \"color\"> {\n additionalContent?: ReactNode;\n color?: keyof FlowbiteColors;\n icon?: FC<ComponentProps<\"svg\">>;\n onDismiss?: boolean | (() => void);\n rounded?: boolean;\n theme?: DeepPartial<FlowbiteAlertTheme>;\n withBorderAccent?: boolean;\n}\n\nexport const Alert: FC<AlertProps> = ({\n additionalContent,\n children,\n className,\n color = \"info\",\n icon: Icon,\n onDismiss,\n rounded = true,\n theme: customTheme = {},\n withBorderAccent,\n ...props\n}) => {\n const theme = mergeDeep(getTheme().alert, customTheme);\n\n return (\n <div\n className={twMerge(\n theme.base,\n theme.color[color],\n rounded && theme.rounded,\n withBorderAccent && theme.borderAccent,\n className,\n )}\n role=\"alert\"\n {...props}\n >\n <div className={theme.wrapper} data-testid=\"flowbite-alert-wrapper\">\n {Icon && <Icon className={theme.icon} data-testid=\"flowbite-alert-icon\" />}\n <div>{children}</div>\n {typeof onDismiss === \"function\" && (\n <button\n aria-label=\"Dismiss\"\n className={twMerge(theme.closeButton.base, theme.closeButton.color[color])}\n onClick={onDismiss}\n type=\"button\"\n >\n <HiX aria-hidden className={theme.closeButton.icon} />\n </button>\n )}\n </div>\n {additionalContent && <div>{additionalContent}</div>}\n </div>\n );\n};\n\nAlert.displayName = \"Alert\";\n"],"names":[],"mappings":";;;;;;AAMY,MAAC,KAAK,GAAG,CAAC;AACtB,EAAE,iBAAiB;AACnB,EAAE,QAAQ;AACV,EAAE,SAAS;AACX,EAAE,KAAK,GAAG,MAAM;AAChB,EAAE,IAAI,EAAE,IAAI;AACZ,EAAE,SAAS;AACX,EAAE,OAAO,GAAG,IAAI;AAChB,EAAE,KAAK,EAAE,WAAW,GAAG,EAAE;AACzB,EAAE,gBAAgB;AAClB,EAAE,GAAG,KAAK;AACV,CAAC,KAAK;AACN,EAAE,MAAM,KAAK,GAAG,SAAS,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;AACzD,EAAE,uBAAuB,IAAI;AAC7B,IAAI,KAAK;AACT,IAAI;AACJ,MAAM,SAAS,EAAE,OAAO;AACxB,QAAQ,KAAK,CAAC,IAAI;AAClB,QAAQ,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;AAC1B,QAAQ,OAAO,IAAI,KAAK,CAAC,OAAO;AAChC,QAAQ,gBAAgB,IAAI,KAAK,CAAC,YAAY;AAC9C,QAAQ,SAAS;AACjB,OAAO;AACP,MAAM,IAAI,EAAE,OAAO;AACnB,MAAM,GAAG,KAAK;AACd,MAAM,QAAQ,EAAE;AAChB,wBAAwB,IAAI,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC,OAAO,EAAE,aAAa,EAAE,wBAAwB,EAAE,QAAQ,EAAE;AACnH,UAAU,IAAI,oBAAoB,GAAG,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC,IAAI,EAAE,aAAa,EAAE,qBAAqB,EAAE,CAAC;AAC5G,0BAA0B,GAAG,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC;AAClD,UAAU,OAAO,SAAS,KAAK,UAAU,oBAAoB,GAAG;AAChE,YAAY,QAAQ;AACpB,YAAY;AACZ,cAAc,YAAY,EAAE,SAAS;AACrC,cAAc,SAAS,EAAE,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;AACxF,cAAc,OAAO,EAAE,SAAS;AAChC,cAAc,IAAI,EAAE,QAAQ;AAC5B,cAAc,QAAQ,kBAAkB,GAAG,CAAC,GAAG,EAAE,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;AAC5G,aAAa;AACb,WAAW;AACX,SAAS,EAAE,CAAC;AACZ,QAAQ,iBAAiB,oBAAoB,GAAG,CAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAC;AACxF,OAAO;AACP,KAAK;AACL,GAAG,CAAC;AACJ,EAAE;AACF,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}