@aristobyte-ui/presets 2.15.3 → 2.16.3

package/lib/components/ValueBlock/ValueBlock.scss

@@ -1,34 +1,59 @@
 @use '@aristobyte-ui/utils/styles' as *;
 
 @mixin value-block-surface($color, $hover) {
-  &.value-block-appearance--solid {
-    background-color: $color;
-    border-color: $hover;
-    box-shadow: $shadow-md;
-  }
+  &.value-block-appearance {
+    &--solid {
+      background-color: $color;
+      border-color: $hover;
+      box-shadow: $shadow-md;
 
-  &.value-block-appearance--glowing {
-    background-color: $color;
-    border-color: $hover;
-    box-shadow:
-      0 0 10px rgba($color, 0.35),
-      0 0 24px rgba($color, 0.25);
-  }
+      .value-block__icon,
+      .value-block__value {
+        color: $color-default;
+      }
 
-  &.value-block-appearance--outline {
-    background-color: transparent;
-    border-color: $color;
-  }
+      .value-block__subtitle {
+        color: $white-transparent-700;
+      }
+    }
 
-  &.value-block-appearance--outline-dashed {
-    background-color: transparent;
-    border-color: $color;
-    border-style: dashed;
-  }
+    &--glowing {
+      background-color: $color-default;
+      border-color: $hover;
+      box-shadow:
+        0 0 10px rgba($color, 0.35),
+        0 0 24px rgba($color, 0.25);
+    }
+
+    &--outline {
+      background-color: transparent;
+      border-color: $color;
+    }
+
+    &--outline-dashed {
+      background-color: transparent;
+      border-color: $color;
+      border-style: dashed;
+    }
 
-  &.value-block-appearance--no-outline {
-    background-color: rgba($color, 0.12);
-    border-color: transparent;
+    &--no-outline {
+      background-color: rgba($color, 0.12);
+      border-color: transparent;
+    }
+
+    &--glowing,
+    &--outline,
+    &--outline-dashed,
+    &--no-outline {
+      .value-block__icon,
+      .value-block__value {
+        color: $color;
+      }
+
+      .value-block__subtitle {
+        color: $grey-500;
+      }
+    }
   }
 }
 
@@ -38,13 +63,13 @@
   display: flex;
   flex-direction: column;
   gap: 4px;
-  min-width: 140px;
+  min-width: 110px;
   padding: 16px 18px;
   text-align: center;
 
   &-variant {
     &--default {
-      @include value-block-surface($color-default, $color-default-hover);
+      @include value-block-surface($white, $color-default-hover);
     }
 
     &--primary {
@@ -68,39 +93,6 @@
     }
   }
 
-  &-appearance {
-    &--solid,
-    &--glowing {
-      .value-block__value {
-        color: $white;
-      }
-
-      .value-block__title {
-        color: $white-transparent-800;
-      }
-
-      .value-block__subtitle {
-        color: $white-transparent-700;
-      }
-    }
-
-    &--outline,
-    &--outline-dashed,
-    &--no-outline {
-      .value-block__value {
-        color: $grey-900;
-      }
-
-      .value-block__title {
-        color: $grey-700;
-      }
-
-      .value-block__subtitle {
-        color: $grey-600;
-      }
-    }
-  }
-
   &-radius {
     &--none {
       border-radius: 0;
@@ -139,19 +131,20 @@
   }
 
   &__value {
-    font-size: 20px;
+    font-size: 24px;
     font-weight: 700;
     line-height: 28px;
   }
 
   &__title {
-    font-size: 13px;
+    color: $white;
+    font-size: 14px;
     font-weight: 500;
     line-height: 17.5px;
   }
 
   &__subtitle {
-    font-size: 10.5px;
+    font-size: 12px;
     font-weight: 400;
     line-height: 14px;
   }

package/lib/components/ValueBlock/index.js

@@ -1,5 +1,16 @@
 "use strict";
 'use client';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -49,9 +60,9 @@ var ValueBlock = function (_a) {
         ]
             .filter(Boolean)
             .join(' ') },
-        icon && React.createElement("span", { className: "value-block__icon" }, icon({ color: color, size: 28 })),
+        icon && React.createElement("span", { className: "value-block__icon" }, icon(__assign(__assign({}, (color ? { color: color } : {})), { size: 40 }))),
         title && React.createElement("h4", { className: "value-block__title" }, title),
-        React.createElement("span", { className: "value-block__value", style: { color: color } }, value),
+        React.createElement("span", { className: "value-block__value", style: __assign({}, (color ? { color: color } : {})) }, value),
         subtitle && React.createElement("p", { className: "value-block__subtitle" }, subtitle)));
 };
 exports.ValueBlock = ValueBlock;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aristobyte-ui/presets",
   "description": "A collection of prebuilt UI presets for AristoByteUI — including cards, widgets, dashboards, and interactive layouts — fully typed and styled with SCSS modules for seamless integration.",
-  "version": "2.15.3",
+  "version": "2.16.3",
   "license": "MIT",
   "private": false,
   "author": "AristoByte <info@aristobyte.com>",
@@ -119,9 +119,9 @@
     "sass": "^1.97.3"
   },
   "dependencies": {
-    "@aristobyte-ui/anchor": "^2.15.3",
-    "@aristobyte-ui/button": "^2.15.3",
-    "@aristobyte-ui/utils": "^2.15.3"
+    "@aristobyte-ui/anchor": "^2.16.3",
+    "@aristobyte-ui/button": "^2.16.3",
+    "@aristobyte-ui/utils": "^2.16.3"
   },
   "exports": {
     ".": {