blue-react 9.1.8 → 9.3.0

package/dist/style.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue React v9.1.8-alpha2 (https://bruegmann.github.io/blue-react)
+ * Blue React v9.3.0-alpha2 (https://bruegmann.github.io/blue-react)
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-react/blob/master/LICENSE).
 */
 
@@ -24,3 +24,4 @@
 @import "./styles/_caret";
 @import "./styles/_tooltips";
 @import "./styles/_hover";
+@import "./styles/buttons";

package/dist/styles/_buttons.scss

@@ -0,0 +1,110 @@
+// Inspired by Bootstrap's button system but extended with more variants
+
+// Soft buttons
+
+// scss-docs-start btn-variant-loops
+@each $color, $value in $theme-colors {
+    $bg: tint-color($value, 80%);
+    $text-color: shade-color($value, 60%);
+
+    .blue-btn-soft-#{$color} {
+        @if $color == "light" {
+            $text-color: color-contrast($value);
+        }
+
+        @include button-variant(
+            $bg,
+            $bg,
+            $text-color,
+            $hover-background: shade-color($bg, $btn-hover-bg-shade-amount),
+            $hover-border: shade-color($bg, $btn-hover-border-shade-amount),
+            $active-background: shade-color($bg, $btn-active-bg-shade-amount),
+            $active-border: shade-color($bg, $btn-active-border-shade-amount)
+        );
+    }
+}
+
+@include color-mode(dark) {
+    @each $color, $value in $theme-colors {
+        $bg: shade-color($value, 80%);
+        $text-color: tint-color($value, 60%);
+
+        .blue-btn-soft-#{$color} {
+            @if $color == "dark" {
+                $text-color: color-contrast($value);
+            }
+
+            @include button-variant(
+                $bg,
+                $bg,
+                $text-color,
+                $hover-background: tint-color($bg, $btn-hover-bg-tint-amount),
+                $hover-border: tint-color($bg, $btn-hover-border-tint-amount),
+                $active-background: tint-color($bg, $btn-active-bg-tint-amount),
+                $active-border: tint-color($bg, $btn-active-border-tint-amount)
+            );
+        }
+    }
+}
+
+// Plain buttons
+
+// scss-docs-start btn-variant-loops
+@each $color, $value in $theme-colors {
+    $bg: tint-color($value, 80%);
+    $text-color: $value;
+
+    $active-background: if(
+        $color == $color-contrast-light,
+        shade-color($value, $btn-active-bg-shade-amount),
+        tint-color($value, $btn-active-bg-tint-amount)
+    );
+
+    .blue-btn-plain-#{$color} {
+        @if $color == "light" {
+            $text-color: color-contrast($value);
+        }
+
+        @include button-variant(
+            transparent,
+            transparent,
+            $text-color,
+            $hover-background: shade-color($bg, $btn-hover-bg-shade-amount),
+            $hover-border: shade-color($bg, $btn-hover-border-shade-amount),
+            $active-background: $active-background,
+            $active-border:
+                if(
+                    $color == $color-contrast-light,
+                    shade-color($value, $btn-active-border-shade-amount),
+                    tint-color($value, $btn-active-border-tint-amount)
+                ),
+            $active-color: color-contrast($active-background),
+            $disabled-background: $value,
+            $disabled-border: $value,
+            $disabled-color: color-contrast($value)
+        );
+    }
+}
+
+@include color-mode(dark) {
+    @each $color, $value in $theme-colors {
+        $bg: shade-color($value, 80%);
+        $text-color: $value;
+
+        .blue-btn-plain-#{$color} {
+            @if $color == "dark" {
+                $text-color: color-contrast($value);
+            }
+
+            @include button-variant(
+                transparent,
+                transparent,
+                $text-color,
+                $hover-background: tint-color($bg, $btn-hover-bg-tint-amount),
+                $hover-border: tint-color($bg, $btn-hover-border-tint-amount),
+                $active-background: tint-color($bg, $btn-active-bg-tint-amount),
+                $active-border: tint-color($bg, $btn-active-border-tint-amount)
+            );
+        }
+    }
+}

package/dist/types/components/ToastProvider.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+interface ToastProviderProps {
+    children?: ReactNode;
+    successIcon?: ReactNode;
+    infoIcon?: ReactNode;
+    warningIcon?: ReactNode;
+    dangerIcon?: ReactNode;
+}
+export declare type ToastItemType = "success" | "danger" | "info" | "warning";
+export interface ToastItem {
+    type: ToastItemType;
+    title?: string;
+    message?: string;
+}
+/**
+ * Push notifications to your visitors using Bootstrap's toast component.
+ */
+export declare function ToastProvider({ children, successIcon, infoIcon, warningIcon, dangerIcon }: ToastProviderProps): JSX.Element;
+export declare const useToast: () => {
+    addToast: (toastItem: ToastItem) => void;
+    clearToasts: () => void;
+};
+export {};

package/index.d.ts

@@ -67,4 +67,6 @@ export { StatusProvider, useStatus } from "./dist/types/components/StatusProvide
 export { default as Switch } from "./dist/types/components/Switch"
 export { SwitchProps } from "./dist/types/components/Switch"
 
+export { ToastProvider, useToast } from "./dist/types/components/ToastProvider"
+
 export { default as Utilities } from "./dist/types/components/Utilities"

package/index.js

@@ -21,4 +21,6 @@ exports.Status = require("./dist/components/Status.js")["default"]
 exports.StatusProvider = require("./dist/components/StatusProvider.js")["StatusProvider"]
 exports.useStatus = require("./dist/components/StatusProvider.js")["useStatus"]
 exports.Switch = require("./dist/components/Switch.js")["default"]
+exports.ToastProvider = require("./dist/components/ToastProvider.js")["ToastProvider"]
+exports.useToast = require("./dist/components/ToastProvider.js")["useToast"]
 exports.Utilities = require("./dist/components/Utilities.js")["default"]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "blue-react",
-    "version": "9.1.8",
+    "version": "9.3.0",
     "description": "Blue React Components",
     "license": "LGPL-3.0-or-later",
     "main": "index.js",