flowbite-react

Version:

Official React components built for Flowbite and Tailwind CSS

1 lines • 8.3 kB

Source Map (JSON)

{"version":3,"file":"Button.mjs","sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { ElementType } from \"react\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\nimport type { PolymorphicComponentPropWithRef, PolymorphicRef } from \"../../helpers/generic-as-prop\";\nimport { mergeDeep } from \"../../helpers/merge-deep\";\nimport { getTheme } from \"../../theme-store\";\nimport type { DeepPartial } from \"../../types\";\nimport type {\n FlowbiteBoolean,\n FlowbiteColors,\n FlowbiteGradientColors,\n FlowbiteGradientDuoToneColors,\n FlowbiteSizes,\n} from \"../Flowbite\";\nimport { Spinner } from \"../Spinner\";\nimport { ButtonBase, type ButtonBaseProps } from \"./ButtonBase\";\nimport type { PositionInButtonGroup } from \"./ButtonGroup\";\nimport { ButtonGroup } from \"./ButtonGroup\";\n\nexport interface FlowbiteButtonTheme {\n base: string;\n fullSized: string;\n color: FlowbiteColors;\n disabled: string;\n isProcessing: string;\n spinnerSlot: string;\n spinnerLeftPosition: ButtonSizes;\n gradient: ButtonGradientColors;\n gradientDuoTone: ButtonGradientDuoToneColors;\n inner: FlowbiteButtonInnerTheme;\n label: string;\n outline: FlowbiteButtonOutlineTheme;\n pill: FlowbiteBoolean;\n size: ButtonSizes;\n}\n\nexport interface FlowbiteButtonInnerTheme {\n base: string;\n position: PositionInButtonGroup;\n outline: string;\n isProcessingPadding: ButtonSizes;\n}\n\nexport interface FlowbiteButtonOutlineTheme extends FlowbiteBoolean {\n color: ButtonOutlineColors;\n pill: FlowbiteBoolean;\n}\n\nexport interface ButtonColors\n extends Pick<FlowbiteColors, \"dark\" | \"failure\" | \"gray\" | \"info\" | \"light\" | \"purple\" | \"success\" | \"warning\"> {\n [key: string]: string;\n}\n\nexport interface ButtonGradientColors extends FlowbiteGradientColors {\n [key: string]: string;\n}\n\nexport interface ButtonGradientDuoToneColors extends FlowbiteGradientDuoToneColors {\n [key: string]: string;\n}\n\nexport interface ButtonOutlineColors extends Pick<FlowbiteColors, \"gray\"> {\n [key: string]: string;\n}\n\nexport interface ButtonSizes extends Pick<FlowbiteSizes, \"xs\" | \"sm\" | \"lg\" | \"xl\"> {\n [key: string]: string;\n}\n\nexport type ButtonProps<T extends ElementType = \"button\"> = PolymorphicComponentPropWithRef<\n T,\n {\n href?: string;\n color?: keyof FlowbiteColors;\n fullSized?: boolean;\n gradientDuoTone?: keyof ButtonGradientDuoToneColors;\n gradientMonochrome?: keyof ButtonGradientColors;\n target?: string;\n isProcessing?: boolean;\n processingLabel?: string;\n processingSpinner?: ReactNode;\n label?: ReactNode;\n outline?: boolean;\n pill?: boolean;\n positionInGroup?: keyof PositionInButtonGroup;\n size?: keyof ButtonSizes;\n theme?: DeepPartial<FlowbiteButtonTheme>;\n }\n>;\n\ntype ButtonComponentType = (<C extends ElementType = \"button\">(props: ButtonProps<C>) => JSX.Element) & {\n displayName?: string;\n};\n\nconst ButtonComponent = forwardRef(\n <T extends ElementType = \"button\">(\n {\n children,\n className,\n color = \"info\",\n disabled,\n fullSized,\n isProcessing = false,\n processingLabel = \"Loading...\",\n processingSpinner,\n gradientDuoTone,\n gradientMonochrome,\n label,\n outline = false,\n pill = false,\n positionInGroup = \"none\",\n size = \"md\",\n theme: customTheme = {},\n ...props\n }: ButtonProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const { buttonGroup: groupTheme, button: buttonTheme } = getTheme();\n const theme = mergeDeep(buttonTheme, customTheme);\n\n const theirProps = props as ButtonBaseProps<T>;\n\n return (\n <ButtonBase\n ref={ref}\n disabled={disabled}\n className={twMerge(\n theme.base,\n disabled && theme.disabled,\n !gradientDuoTone && !gradientMonochrome && theme.color[color],\n gradientDuoTone && !gradientMonochrome && theme.gradientDuoTone[gradientDuoTone],\n !gradientDuoTone && gradientMonochrome && theme.gradient[gradientMonochrome],\n outline && (theme.outline.color[color] ?? theme.outline.color.default),\n theme.pill[pill ? \"on\" : \"off\"],\n fullSized && theme.fullSized,\n groupTheme.position[positionInGroup],\n className,\n )}\n {...theirProps}\n >\n <span\n className={twMerge(\n theme.inner.base,\n theme.outline[outline ? \"on\" : \"off\"],\n theme.outline.pill[outline && pill ? \"on\" : \"off\"],\n theme.size[size],\n outline && !theme.outline.color[color] && theme.inner.outline,\n isProcessing && theme.isProcessing,\n isProcessing && theme.inner.isProcessingPadding[size],\n theme.inner.position[positionInGroup],\n )}\n >\n <>\n {isProcessing && (\n \n {processingSpinner || <Spinner size={size} />}\n \n )}\n {typeof children !== \"undefined\" ? (\n children\n ) : (\n \n {isProcessing ? processingLabel : label}\n \n )}\n </>\n \n </ButtonBase>\n );\n },\n) as ButtonComponentType;\n\nButtonComponent.displayName = \"Button\";\n\nexport const Button = Object.assign(ButtonComponent, {\n Group: ButtonGroup,\n});\n"],"names":[],"mappings":"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"}