flowbite-angular 1.3.0 → 20.0.2

package/fesm2022/flowbite-angular-button.mjs

@@ -1,321 +1,240 @@
-import { mergeTheme, createTheme } from 'flowbite-angular/utils';
+import { createStateToken, createStateProvider, createStateInjector, createState } from 'ng-primitives/state';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, makeEnvironmentProviders, model, Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
+import { InjectionToken, inject, input, booleanAttribute, Directive, computed } from '@angular/core';
+import { createTheme, mergeDeep, colorToTheme } from 'flowbite-angular';
+import * as i1 from 'ng-primitives/button';
+import { NgpButton } from 'ng-primitives/button';
+import * as i2 from 'ng-primitives/interactions';
+import { NgpFocus } from 'ng-primitives/interactions';
 import { twMerge } from 'tailwind-merge';
-import { BaseComponent, booleanToFlowbiteBoolean } from 'flowbite-angular';
-import { NgTemplateOutlet } from '@angular/common';
 
+const FlowbiteBaseButtonStateToken = createStateToken('Flowbite BaseButton');
+const provideFlowbiteBaseButtonState = createStateProvider(FlowbiteBaseButtonStateToken);
+const injectFlowbiteBaseButtonState = createStateInjector(FlowbiteBaseButtonStateToken);
+const flowbiteBaseButtonState = createState(FlowbiteBaseButtonStateToken);
+
+const defaultFlowbiteBaseButtonConfig = {
+    color: 'default',
+    size: 'md',
+    pill: false,
+    outline: false,
+};
+const FlowbiteBaseButtonConfigToken = new InjectionToken('FlowbiteBaseButtonConfigToken');
 /**
- * `InjectionToken` used to import `ButtonTheme` value
- *
- * @example
- * ```
- * var theme = inject(FLOWBITE_BUTTON_THEME_TOKEN)
- * ```
+ * Provide the default BaseButton configuration
+ * @param config The BaseButton configuration
+ * @returns The provider
  */
-const FLOWBITE_BUTTON_THEME_TOKEN = new InjectionToken('FLOWBITE_BUTTON_THEME_TOKEN');
-class ButtonThemeService {
-    constructor() {
-        this.baseTheme = inject(FLOWBITE_BUTTON_THEME_TOKEN);
-    }
-    getClasses(properties) {
-        const theme = mergeTheme(this.baseTheme, properties.customStyle);
-        const output = {
-            rootClass: twMerge(properties.gradientDuoTone && properties.fill == 'outline'
-                ? theme.root.base['span']
-                : `${theme.root.base['default']} ${theme.root.size[properties.size]}`, properties.gradientDuoTone
-                ? theme.root.gradientDuoTone[properties.gradientDuoTone][properties.fill]
-                : properties.gradientMonochrome
-                    ? theme.root.gradientMonochrome[properties.gradientMonochrome]
-                    : theme.root.color[properties.color][properties.fill], theme.root.isPill[properties.isPill], theme.root.isDisabled[properties.isDisabled]),
-            spanClass: twMerge(theme.span.base, theme.span.isPill[properties.isPill], theme.span.size[properties.size]),
-        };
-        return output;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ButtonThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ButtonThemeService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ButtonThemeService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-const FLOWBITE_BUTTON_COLOR_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BUTTON_COLOR_DEFAULT_VALUE');
-const FLOWBITE_BUTTON_SIZE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BUTTON_SIZE_DEFAULT_VALUE');
-const FLOWBITE_BUTTON_IS_PILL_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BUTTON_IS_PILL_DEFAULT_VALUE');
-const FLOWBITE_BUTTON_FILL_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BUTTON_FILL_DEFAULT_VALUE');
-const FLOWBITE_BUTTON_IS_DISABLED_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BUTTON_IS_DISABLED_DEFAULT_VALUE');
-const FLOWBITE_BUTTON_GRADIENT_MONOCHROME_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BUTTON_GRADIENT_MONOCHROME_DEFAULT_VALUE');
-const FLOWBITE_BUTTON_GRADIENT_DUOTONE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BUTTON_GRADIENT_DUOTONE_DEFAULT_VALUE');
-const FLOWBITE_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken('FLOWBITE_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE');
-const buttonDefaultValueProvider = makeEnvironmentProviders([
-    {
-        provide: FLOWBITE_BUTTON_COLOR_DEFAULT_VALUE,
-        useValue: 'primary',
-    },
-    {
-        provide: FLOWBITE_BUTTON_SIZE_DEFAULT_VALUE,
-        useValue: 'md',
-    },
-    {
-        provide: FLOWBITE_BUTTON_IS_PILL_DEFAULT_VALUE,
-        useValue: false,
-    },
-    {
-        provide: FLOWBITE_BUTTON_FILL_DEFAULT_VALUE,
-        useValue: 'solid',
-    },
-    {
-        provide: FLOWBITE_BUTTON_IS_DISABLED_DEFAULT_VALUE,
-        useValue: false,
-    },
-    {
-        provide: FLOWBITE_BUTTON_GRADIENT_MONOCHROME_DEFAULT_VALUE,
-        useValue: undefined,
-    },
+const provideFlowbiteBaseButtonConfig = (config) => [
     {
-        provide: FLOWBITE_BUTTON_GRADIENT_DUOTONE_DEFAULT_VALUE,
-        useValue: undefined,
+        provide: FlowbiteBaseButtonConfigToken,
+        useValue: { ...defaultFlowbiteBaseButtonConfig, ...config },
     },
-    {
-        provide: FLOWBITE_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE,
-        useValue: {},
-    },
-]);
+];
 /**
- * @see https://flowbite.com/docs/components/buttons/
+ * Inject the BaseButton configuration
+ * @see {@link defaultFlowbiteBaseButtonConfig}
+ * @returns The configuration
  */
-class ButtonComponent extends BaseComponent {
+const injectFlowbiteBaseButtonConfig = () => inject(FlowbiteBaseButtonConfigToken, { optional: true }) ?? defaultFlowbiteBaseButtonConfig;
+
+class BaseButton {
     constructor() {
-        super(...arguments);
-        /**
-         * Service injected used to generate class
-         */
-        this.themeService = inject(ButtonThemeService);
-        //#region properties
-        /**
-         * Set the button color
-         *
-         * @default primary
-         */
-        this.color = model(inject(FLOWBITE_BUTTON_COLOR_DEFAULT_VALUE));
-        /**
-         * Set the button size
-         *
-         * @default md
-         */
-        this.size = model(inject(FLOWBITE_BUTTON_SIZE_DEFAULT_VALUE));
-        /**
-         * Set if the button is pill
-         *
-         * @default false
-         */
-        this.isPill = model(inject(FLOWBITE_BUTTON_IS_PILL_DEFAULT_VALUE));
+        this.config = injectFlowbiteBaseButtonConfig();
         /**
-         * Set the button fill
-         *
-         * @default solid
+         * @see {@link injectFlowbiteBaseButtonConfig}
          */
-        this.fill = model(inject(FLOWBITE_BUTTON_FILL_DEFAULT_VALUE));
+        this.color = input(this.config.color);
         /**
-         * Set if the button is disabled
-         *
-         * @default false
+         * @see {@link injectFlowbiteBaseButtonConfig}
          */
-        this.isDisabled = model(inject(FLOWBITE_BUTTON_IS_DISABLED_DEFAULT_VALUE));
+        this.size = input(this.config.size);
         /**
-         * Set the button gradient monochrome
-         *
-         * @default undefined
+         * @see {@link injectFlowbiteBaseButtonConfig}
          */
-        this.gradientMonochrome = model(inject(FLOWBITE_BUTTON_GRADIENT_MONOCHROME_DEFAULT_VALUE));
+        this.pill = input(this.config.pill, { transform: booleanAttribute });
         /**
-         * Set the button gradient duotone
-         *
-         * @default undefined
+         * @see {@link injectFlowbiteBaseButtonConfig}
          */
-        this.gradientDuoTone = model(inject(FLOWBITE_BUTTON_GRADIENT_DUOTONE_DEFAULT_VALUE));
+        this.outline = input(this.config.outline, { transform: booleanAttribute });
         /**
-         * Set the custom style for this button
+         * @internal
          */
-        this.customStyle = model(inject(FLOWBITE_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE));
-    }
-    //#endregion
-    //#region BaseComponent implementation
-    fetchClass() {
-        return this.themeService.getClasses({
-            color: this.color(),
-            isDisabled: booleanToFlowbiteBoolean(this.isDisabled()),
-            fill: this.fill(),
-            isPill: booleanToFlowbiteBoolean(this.isPill()),
-            size: this.size(),
-            gradientMonochrome: this.gradientMonochrome(),
-            gradientDuoTone: this.gradientDuoTone(),
-            customStyle: this.customStyle(),
-        });
+        this.state = flowbiteBaseButtonState(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: ButtonComponent, isStandalone: true, selector: "flowbite-button", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, isPill: { classPropertyName: "isPill", publicName: "isPill", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, gradientMonochrome: { classPropertyName: "gradientMonochrome", publicName: "gradientMonochrome", isSignal: true, isRequired: false, transformFunction: null }, gradientDuoTone: { classPropertyName: "gradientDuoTone", publicName: "gradientDuoTone", isSignal: true, isRequired: false, transformFunction: null }, customStyle: { classPropertyName: "customStyle", publicName: "customStyle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { color: "colorChange", size: "sizeChange", isPill: "isPillChange", fill: "fillChange", isDisabled: "isDisabledChange", gradientMonochrome: "gradientMonochromeChange", gradientDuoTone: "gradientDuoToneChange", customStyle: "customStyleChange" }, host: { properties: { "attr.type": "button" } }, usesInheritance: true, ngImport: i0, template: `
-    @if (gradientDuoTone() && fill() === 'outline') {
-      <span [class]="contentClasses().spanClass">
-        <ng-content *ngTemplateOutlet="content" />
-      </span>
-    } @else {
-      <ng-content *ngTemplateOutlet="content" />
-    }
-
-    <ng-template #content>
-      <ng-content />
-    </ng-template>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BaseButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: BaseButton, isStandalone: true, inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, pill: { classPropertyName: "pill", publicName: "pill", isSignal: true, isRequired: false, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null } }, providers: [provideFlowbiteBaseButtonState()], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: ButtonComponent, decorators: [{
-            type: Component,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: BaseButton, decorators: [{
+            type: Directive,
             args: [{
                     standalone: true,
-                    imports: [NgTemplateOutlet],
-                    selector: 'flowbite-button',
-                    template: `
-    @if (gradientDuoTone() && fill() === 'outline') {
-      <span [class]="contentClasses().spanClass">
-        <ng-content *ngTemplateOutlet="content" />
-      </span>
-    } @else {
-      <ng-content *ngTemplateOutlet="content" />
-    }
-
-    <ng-template #content>
-      <ng-content />
-    </ng-template>
-  `,
-                    host: {
-                        '[attr.type]': 'button',
-                    },
-                    encapsulation: ViewEncapsulation.None,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [provideFlowbiteBaseButtonState()],
                 }]
         }] });
 
-/**
- * Default theme for `ButtonComponent`
- */
-const buttonTheme = createTheme({
-    root: {
-        base: {
-            default: 'cursor-pointer group flex h-min w-fit items-center justify-center p-0.5 text-center font-medium focus:z-10',
-            span: 'cursor-pointer group inline-flex relative items-center justify-center p-0.5 font-medium overflow-hidden',
+const flowbiteButtonTheme = createTheme({
+    host: {
+        base: 'flex cursor-pointer items-center justify-center border text-center font-medium',
+        transition: '',
+        focus: 'data-focus:ring-2',
+        disabled: 'data-disabled:cursor-not-allowed data-disabled:opacity-75',
+        size: {
+            xs: 'px-3 py-2 text-xs',
+            sm: 'px-3 py-2 text-sm',
+            md: 'px-5 py-2.5 text-sm',
+            lg: 'px-5 py-3 text-base',
+            xl: 'px-6 py-3.5 text-base',
+        },
+        pill: {
+            on: 'rounded-full',
+            off: 'rounded-lg',
         },
         color: {
-            dark: {
-                solid: 'text-white bg-gray-800 dark:bg-gray-800 border border-transparent dark:border-gray-700 hover:bg-gray-900 dark:hover:bg-gray-700 focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-800 disabled:hover:bg-gray-800 dark:disabled:hover:bg-gray-800',
-                outline: 'text-gray-900 hover:text-white border border-gray-800 hover:bg-gray-900 dark:border-gray-600 dark:text-gray-400 dark:hover:text-white focus:ring-4 focus:outline-none focus:ring-gray-300 dark:hover:bg-gray-600 dark:focus:ring-gray-800',
-            },
-            primary: {
-                solid: 'text-white bg-primary-700 border border-transparent hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-700 dark:hover:bg-primary-800 dark:focus:ring-primary-900',
-                outline: 'text-primary-700 hover:text-white border border-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:border-primary-500 dark:text-primary-500 dark:hover:text-white dark:hover:bg-primary-600 dark:focus:ring-primary-900',
-            },
-            red: {
-                solid: 'text-white bg-red-700 border border-transparent hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900',
-                outline: 'text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900',
+            default: {
+                light: 'border-gray-200 bg-gray-100 text-gray-700 data-hover:bg-gray-200',
+                dark: 'dark:border-gray-900 dark:bg-gray-800 dark:text-gray-100 dark:data-hover:bg-gray-700',
             },
-            blue: {
-                solid: 'text-white bg-blue-700 border border-transparent hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800',
-                outline: 'text-blue-700 hover:text-white border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:border-blue-500 dark:text-blue-500 dark:hover:text-white dark:hover:bg-blue-600 dark:focus:ring-blue-800',
+            info: {
+                light: 'border-blue-700 bg-blue-600 text-gray-100 data-hover:bg-blue-700',
+                dark: 'dark:border-blue-900 dark:bg-blue-800 dark:text-blue-100 dark:data-hover:bg-blue-900',
             },
-            light: {
-                solid: 'text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-4 focus:ring-blue-300 dark:bg-gray-600 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:focus:ring-gray-700',
-                outline: 'text-gray-900 bg-transparent border border-gray-200 hover:bg-white focus:ring-4 focus:ring-blue-300 dark:bg-transparent dark:text-white dark:border-white dark:hover:text-gray-900 dark:hover:bg-white dark:hover:border-gray-700 dark:focus:ring-gray-700',
+            failure: {
+                light: 'border-red-700 bg-red-600 text-gray-100 data-hover:bg-red-700',
+                dark: 'dark:border-red-900 dark:bg-red-800 dark:text-red-100 dark:data-hover:bg-red-900',
             },
-            purple: {
-                solid: 'text-white bg-purple-700 border border-transparent hover:bg-purple-800 focus:ring-4 focus:ring-purple-300 dark:bg-purple-600 dark:hover:bg-purple-700 dark:focus:ring-purple-900',
-                outline: 'text-purple-700 hover:text-white border border-purple-700 hover:bg-purple-800 focus:ring-4 focus:outline-none focus:ring-purple-300 dark:border-purple-400 dark:text-purple-400 dark:hover:text-white dark:hover:bg-purple-500 dark:focus:ring-purple-900',
+            success: {
+                light: 'border-green-700 bg-green-600 text-gray-100 data-hover:bg-green-700',
+                dark: 'dark:border-green-900 dark:bg-green-800 dark:text-green-100 dark:data-hover:bg-green-900',
             },
-            green: {
-                solid: 'text-white bg-green-700 border border-transparent hover:bg-green-800 focus:ring-4 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800',
-                outline: 'text-green-700 hover:text-white border border-green-700 hover:bg-green-800 focus:ring-4 focus:outline-none focus:ring-green-300 dark:border-green-500 dark:text-green-500 dark:hover:text-white dark:hover:bg-green-600 dark:focus:ring-green-800',
+            warning: {
+                light: 'border-yellow-700 bg-yellow-600 text-gray-100 data-hover:bg-yellow-700',
+                dark: 'dark:border-yellow-900 dark:bg-yellow-800 dark:text-yellow-100 dark:data-hover:bg-yellow-900',
             },
-            yellow: {
-                solid: 'text-white bg-yellow-400 border border-transparent hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 dark:focus:ring-yellow-900',
-                outline: 'text-yellow-400 hover:text-white border border-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:outline-none focus:ring-yellow-300 dark:border-yellow-300 dark:text-yellow-300 dark:hover:text-white dark:hover:bg-yellow-400 dark:focus:ring-yellow-900',
+            primary: {
+                light: 'border-primary-800 bg-primary-700 data-hover:bg-primary-800 text-gray-100',
+                dark: 'dark:border-primary-900 dark:bg-primary-800 dark:text-primary-100 dark:data-hover:bg-primary-900',
             },
         },
-        isDisabled: {
-            enabled: 'cursor-not-allowed opacity-50',
-            disabled: '',
-        },
-        gradientMonochrome: {
-            cyan: 'text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800',
-            red: 'text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-red-300 dark:focus:ring-red-800',
-            blue: 'text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800',
-            lime: 'text-gray-900 bg-gradient-to-r from-lime-200 via-lime-400 to-lime-500 hover:bg-gradient-to-br focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-800',
-            pink: 'text-white bg-gradient-to-r from-pink-400 via-pink-500 to-pink-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800',
-            purple: 'text-white bg-gradient-to-r from-purple-500 via-purple-600 to-purple-700 hover:bg-gradient-to-br focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-800',
-            green: 'text-white bg-gradient-to-r from-green-400 via-green-500 to-green-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-green-300 dark:focus:ring-green-800',
-            teal: 'text-white bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-teal-300 dark:focus:ring-teal-800',
-        },
-        gradientDuoTone: {
-            purpleToBlue: {
-                solid: 'text-white bg-gradient-to-br from-purple-600 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800',
-                outline: 'text-gray-900 bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800',
+        colorOutline: {
+            default: {
+                light: 'border-gray-700 text-gray-700 data-hover:bg-gray-700 data-hover:text-gray-100',
+                dark: 'dark:border-gray-300 dark:text-gray-300 dark:data-hover:bg-gray-300 dark:data-hover:text-gray-700',
             },
-            cyanToBlue: {
-                solid: 'text-white bg-gradient-to-r from-cyan-500 to-blue-500 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-cyan-300 dark:focus:ring-cyan-800',
-                outline: 'text-gray-900 bg-gradient-to-br from-cyan-500 to-blue-500 group-hover:from-cyan-500 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-cyan-200 dark:focus:ring-cyan-800',
+            info: {
+                light: 'border-blue-700 text-blue-700 data-hover:bg-blue-700 data-hover:text-gray-100',
+                dark: 'dark:border-blue-700 dark:text-blue-600 dark:data-hover:bg-blue-700 dark:data-hover:text-gray-100',
             },
-            greenToBlue: {
-                solid: 'text-white bg-gradient-to-br from-green-400 to-blue-600 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800',
-                outline: 'text-gray-900 bg-gradient-to-br from-green-400 to-blue-600 group-hover:from-green-400 group-hover:to-blue-600 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-green-200 dark:focus:ring-green-800',
+            failure: {
+                light: 'border-red-700 text-red-700 data-hover:bg-red-700 data-hover:text-red-100',
+                dark: 'dark:border-red-700 dark:text-red-600 dark:data-hover:bg-red-700 dark:data-hover:text-gray-100',
             },
-            purpleToPink: {
-                solid: 'text-white bg-gradient-to-r from-purple-500 to-pink-500 hover:bg-gradient-to-l focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800',
-                outline: 'text-gray-900 bg-gradient-to-br from-purple-500 to-pink-500 group-hover:from-purple-500 group-hover:to-pink-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-purple-200 dark:focus:ring-purple-800',
+            success: {
+                light: 'border-green-700 text-green-700 data-hover:bg-green-700 data-hover:text-green-100',
+                dark: 'dark:border-green-700 dark:text-green-600 dark:data-hover:bg-green-700 dark:data-hover:text-gray-100',
             },
-            pinkToOrange: {
-                solid: 'text-white bg-gradient-to-br from-pink-500 to-orange-400 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800',
-                outline: 'text-gray-900 bg-gradient-to-br from-pink-500 to-orange-400 group-hover:from-pink-500 group-hover:to-orange-400 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800',
+            warning: {
+                light: 'border-yellow-700 text-yellow-700 data-hover:bg-yellow-700 data-hover:text-yellow-100',
+                dark: 'dark:border-yellow-700 dark:text-yellow-600 dark:data-hover:bg-yellow-700 dark:data-hover:text-gray-100',
             },
-            tealToLime: {
-                solid: 'text-gray-900 bg-gradient-to-r from-teal-200 to-lime-200 hover:bg-gradient-to-l hover:from-teal-200 hover:to-lime-200 focus:ring-4 focus:outline-none focus:ring-lime-200 dark:focus:ring-teal-700',
-                outline: 'text-gray-900 bg-gradient-to-br from-teal-300 to-lime-300 group-hover:from-teal-300 group-hover:to-lime-300 dark:text-white dark:hover:text-gray-900 focus:ring-4 focus:outline-none focus:ring-lime-200 dark:focus:ring-lime-800',
-            },
-            redToYellow: {
-                solid: 'text-gray-900 bg-gradient-to-r from-red-200 via-red-300 to-yellow-200 hover:bg-gradient-to-bl focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400',
-                outline: 'text-gray-900 bg-gradient-to-br from-red-200 via-red-300 to-yellow-200 group-hover:from-red-200 group-hover:via-red-300 group-hover:to-yellow-200 dark:text-white dark:hover:text-gray-900 focus:ring-4 focus:outline-none focus:ring-red-100 dark:focus:ring-red-400',
+            primary: {
+                light: 'border-primary-700 text-primary-700 data-hover:bg-primary-700 data-hover:text-primary-100',
+                dark: 'dark:border-primary-700 dark:text-primary-600 dark:data-hover:bg-primary-700 dark:data-hover:text-gray-100',
             },
         },
-        size: {
-            xs: 'text-xs py-2 px-3',
-            sm: 'text-sm py-2 px-3',
-            md: 'text-sm px-5 py-2.5',
-            lg: 'text-base py-3 px-5',
-            xl: 'text-base px-6 py-3.5',
-        },
-        isPill: {
-            enabled: 'rounded-full',
-            disabled: 'rounded-lg',
-        },
-    },
-    span: {
-        base: 'cursor-pointer relative inline-flex items-center bg-white transition-all duration-75 ease-in group-hover:bg-opacity-0 dark:bg-gray-900',
-        isPill: {
-            enabled: 'rounded-full',
-            disabled: 'rounded-md',
-        },
-        size: {
-            xs: 'text-xs py-2 px-3',
-            sm: 'text-sm py-2 px-3',
-            md: 'text-sm px-5 py-2.5',
-            lg: 'text-base py-3 px-5',
-            xl: 'text-base px-6 py-3.5',
-        },
     },
 });
 
+const defaultFlowbiteButtonConfig = {
+    baseTheme: flowbiteButtonTheme,
+    customTheme: {},
+};
+const FlowbiteButtonConfigToken = new InjectionToken('FlowbiteButtonConfigToken');
+/**
+ * Provide the default Button configuration
+ * @param config The Button configuration
+ * @returns The provider
+ */
+const provideFlowbiteButtonConfig = (config) => [
+    {
+        provide: FlowbiteButtonConfigToken,
+        useValue: { ...defaultFlowbiteButtonConfig, ...config },
+    },
+];
+/**
+ * Inject the Button configuration
+ * @see {@link defaultFlowbiteButtonConfig}
+ * @returns The configuration
+ */
+const injectFlowbiteButtonConfig = () => inject(FlowbiteButtonConfigToken, { optional: true }) ?? defaultFlowbiteButtonConfig;
+
+const FlowbiteButtonStateToken = createStateToken('Flowbite Button');
+const provideFlowbiteButtonState = createStateProvider(FlowbiteButtonStateToken);
+const injectFlowbiteButtonState = createStateInjector(FlowbiteButtonStateToken);
+const flowbiteButtonState = createState(FlowbiteButtonStateToken);
+
+class Button {
+    constructor() {
+        this.config = injectFlowbiteButtonConfig();
+        this.baseButtonState = injectFlowbiteBaseButtonState();
+        /**
+         * @see {@link injectFlowbiteButtonConfig}
+         */
+        this.customTheme = input(this.config.customTheme);
+        /**
+         * @internal
+         */
+        this.state = flowbiteButtonState(this);
+        this.theme = computed(() => {
+            const mergedTheme = mergeDeep(this.config.baseTheme, this.state.customTheme());
+            return {
+                host: {
+                    root: twMerge(mergedTheme.host.base, mergedTheme.host.transition, mergedTheme.host.focus, mergedTheme.host.disabled, mergedTheme.host.size[this.baseButtonState().size()], mergedTheme.host.pill[this.baseButtonState().pill() ? 'on' : 'off'], this.baseButtonState().outline()
+                        ? colorToTheme(mergedTheme.host.colorOutline, this.baseButtonState().color())
+                        : colorToTheme(mergedTheme.host.color, this.baseButtonState().color())),
+                },
+            };
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Button, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.6", type: Button, isStandalone: true, selector: "\n    button[flowbiteButton],\n    a[flowbiteButton]\n  ", inputs: { customTheme: { classPropertyName: "customTheme", publicName: "customTheme", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "theme().host.root" } }, providers: [provideFlowbiteButtonState()], exportAs: ["flowbiteButton"], hostDirectives: [{ directive: i1.NgpButton, inputs: ["disabled", "disabled"] }, { directive: i2.NgpFocus, inputs: ["ngpFocusDisabled", "focusDisabled"], outputs: ["ngpFocus", "ngpFocus"] }, { directive: BaseButton, inputs: ["color", "color", "size", "size", "pill", "pill", "outline", "outline"] }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Button, decorators: [{
+            type: Directive,
+            args: [{
+                    standalone: true,
+                    selector: `
+    button[flowbiteButton],
+    a[flowbiteButton]
+  `,
+                    exportAs: 'flowbiteButton',
+                    hostDirectives: [
+                        {
+                            directive: NgpButton,
+                            inputs: ['disabled:disabled'],
+                            outputs: [],
+                        },
+                        {
+                            directive: NgpFocus,
+                            inputs: ['ngpFocusDisabled:focusDisabled'],
+                            outputs: ['ngpFocus'],
+                        },
+                        {
+                            directive: BaseButton,
+                            inputs: ['color', 'size', 'pill', 'outline'],
+                            outputs: [],
+                        },
+                    ],
+                    providers: [provideFlowbiteButtonState()],
+                    host: { '[class]': `theme().host.root` },
+                }]
+        }] });
+
+/* Button */
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent, ButtonThemeService, FLOWBITE_BUTTON_COLOR_DEFAULT_VALUE, FLOWBITE_BUTTON_CUSTOM_STYLE_DEFAULT_VALUE, FLOWBITE_BUTTON_FILL_DEFAULT_VALUE, FLOWBITE_BUTTON_GRADIENT_DUOTONE_DEFAULT_VALUE, FLOWBITE_BUTTON_GRADIENT_MONOCHROME_DEFAULT_VALUE, FLOWBITE_BUTTON_IS_DISABLED_DEFAULT_VALUE, FLOWBITE_BUTTON_IS_PILL_DEFAULT_VALUE, FLOWBITE_BUTTON_SIZE_DEFAULT_VALUE, FLOWBITE_BUTTON_THEME_TOKEN, buttonDefaultValueProvider, buttonTheme };
+export { BaseButton, Button, FlowbiteBaseButtonConfigToken, FlowbiteBaseButtonStateToken, FlowbiteButtonConfigToken, FlowbiteButtonStateToken, defaultFlowbiteBaseButtonConfig, defaultFlowbiteButtonConfig, flowbiteBaseButtonState, flowbiteButtonState, flowbiteButtonTheme, injectFlowbiteBaseButtonConfig, injectFlowbiteBaseButtonState, injectFlowbiteButtonConfig, injectFlowbiteButtonState, provideFlowbiteBaseButtonConfig, provideFlowbiteBaseButtonState, provideFlowbiteButtonConfig, provideFlowbiteButtonState };
 //# sourceMappingURL=flowbite-angular-button.mjs.map