@aristobyte-ui/presets 2.14.6 → 2.15.0

package/lib/components/ValueBlock/ValueBlock.scss

@@ -0,0 +1,158 @@
+@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--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-appearance--outline {
+    background-color: transparent;
+    border-color: $color;
+  }
+
+  &.value-block-appearance--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;
+  }
+}
+
+.value-block {
+  align-items: center;
+  border: 2px solid transparent;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 140px;
+  padding: 16px 18px;
+  text-align: center;
+
+  &-variant {
+    &--default {
+      @include value-block-surface($color-default, $color-default-hover);
+    }
+
+    &--primary {
+      @include value-block-surface($color-primary, $color-primary-hover);
+    }
+
+    &--secondary {
+      @include value-block-surface($color-secondary, $color-secondary-hover);
+    }
+
+    &--success {
+      @include value-block-surface($color-success, $color-success-hover);
+    }
+
+    &--error {
+      @include value-block-surface($color-error, $color-error-hover);
+    }
+
+    &--warning {
+      @include value-block-surface($color-warning, $color-warning-hover);
+    }
+  }
+
+  &-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;
+    }
+
+    &--sm {
+      border-radius: 8px;
+    }
+
+    &--md {
+      border-radius: 24px;
+    }
+
+    &--lg {
+      border-radius: 32px;
+    }
+
+    &--full {
+      border-radius: 40px;
+    }
+  }
+
+  &__icon {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  }
+
+  &__value,
+  &__title,
+  &__subtitle {
+    display: inline-flex;
+    font-style: normal;
+    margin: 0;
+    text-align: center;
+  }
+
+  &__value {
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 28px;
+  }
+
+  &__title {
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 17.5px;
+  }
+
+  &__subtitle {
+    font-size: 10.5px;
+    font-weight: 400;
+    line-height: 14px;
+  }
+}

package/lib/components/ValueBlock/index.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { type IconPropsType } from '@aristobyte-ui/utils';
+import './ValueBlock.scss';
+export interface IValueBlock {
+    value: number | string;
+    title?: string;
+    subtitle?: string;
+    radius?: 'none' | 'md' | 'sm' | 'lg' | 'full';
+    variant?: 'default' | 'primary' | 'secondary' | 'warning' | 'success' | 'error';
+    appearance?: 'solid' | 'glowing' | 'outline' | 'outline-dashed' | 'no-outline';
+    icon?: (props: IconPropsType) => React.JSX.Element;
+    color?: string;
+    className?: string;
+}
+export declare const ValueBlock: React.FC<IValueBlock>;

package/lib/components/{AIAssistant → ValueBlock}/index.js

@@ -1,16 +1,5 @@
 "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);
@@ -44,24 +33,25 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AIAssistant = void 0;
+exports.ValueBlock = void 0;
 var React = __importStar(require("react"));
-require("./AIAssistant.scss");
-var AIAssistant = function (_a) {
-    var props = __rest(_a, []);
+require("./ValueBlock.scss");
+var ValueBlock = function (_a) {
+    var value = _a.value, _b = _a.title, title = _b === void 0 ? '' : _b, _c = _a.subtitle, subtitle = _c === void 0 ? '' : _c, _d = _a.color, color = _d === void 0 ? '' : _d, icon = _a.icon, _e = _a.radius, radius = _e === void 0 ? 'md' : _e, _f = _a.variant, variant = _f === void 0 ? 'default' : _f, _g = _a.appearance, appearance = _g === void 0 ? 'solid' : _g, _h = _a.className, className = _h === void 0 ? '' : _h;
     var uniqId = React.useId();
-    return React.createElement("div", __assign({}, props, { key: uniqId, className: "ai-assistant" }));
+    return (React.createElement("div", { key: uniqId, className: [
+            'value-block',
+            "value-block-radius--".concat(radius),
+            "value-block-variant--".concat(variant),
+            "value-block-appearance--".concat(appearance),
+            className,
+        ]
+            .filter(Boolean)
+            .join(' ') },
+        icon && React.createElement("span", { className: "value-block__icon" }, icon({ color: color, size: 28 })),
+        title && React.createElement("h4", { className: "value-block__title" }, title),
+        React.createElement("span", { className: "value-block__value", style: { color: color } }, value),
+        subtitle && React.createElement("p", { className: "value-block__subtitle" }, subtitle)));
 };
-exports.AIAssistant = AIAssistant;
+exports.ValueBlock = ValueBlock;

package/lib/components/index.d.ts

@@ -1,69 +1,2 @@
-export * from "./ActionButtons";
-export * from "./ActivityFeed";
-export * from "./AIAssistant";
-export * from "./AnalyticsDashboard";
-export * from "./BudgetTracker";
-export * from "./CalendarWidget";
-export * from "./ChatMessages";
-export * from "./CloudStorage";
-export * from "./CodeEditor";
-export * from "./CodeStats";
-export * from "./ColorPaletteWidget";
-export * from "./ContactCard";
-export * from "./CryptocurrencyWidget";
-export * from "./DatabaseWidget";
-export * from "./DesignSystem";
-export * from "./DeviceStatus";
-export * from "./DocumentScanner";
-export * from "./EmailDashboard";
-export * from "./EnergyMeter";
-export * from "./FileManager";
-export * from "./FileUploadArea";
-export * from "./FitnessTracker";
-export * from "./GamingControllerWidget";
-export * from "./HabitTracker";
-export * from "./HealthMonitor";
-export * from "./IdeaBulbWidget";
-export * from "./InspirationWidget";
-export * from "./LanguageLearning";
-export * from "./LayerStackWidget";
-export * from "./MediaControls";
-export * from "./MiniMenu";
-export * from "./MouseTracker";
-export * from "./MusicPlayer";
-export * from "./MusicProduction";
-export * from "./NatureWidget";
-export * from "./NavigationPills";
-export * from "./NetworkStatus";
-export * from "./NotificationBadges";
-export * from "./NotificationCards";
-export * from "./OfficeBuildingWidget";
-export * from "./PasswordManager";
-export * from "./PhotoEditor";
-export * from "./PomodoroTimer";
-export * from "./PricingCard";
-export * from "./ProfileBadge";
-export * from "./ProgressTracker";
-export * from "./QuickActions";
-export * from "./QuickStats";
-export * from "./ReadingProgress";
-export * from "./RecipeFinder";
-export * from "./RocketLaunchWidget";
-export * from "./SettingsPanel";
-export * from "./ShoppingCart";
-export * from "./ShoppingList";
-export * from "./SocialEngagement";
-export * from "./SocialMediaCard";
-export * from "./StatisticsCards";
-export * from "./StatusIndicators";
-export * from "./StockMarket";
-export * from "./StreakCounter";
-export * from "./SystemStatus";
-export * from "./TaskManager";
-export * from "./TeamCollaborationWidget";
-export * from "./TimeLocationWidget";
-export * from "./TodoList";
-export * from "./ToolWidget";
-export * from "./TravelPlanner";
-export * from "./VideoCallWidget";
-export * from "./WeatherWidget";
+export * from './SocialMediaCard';
+export * from './ValueBlock';

package/lib/components/index.js

@@ -14,72 +14,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./ActionButtons"), exports);
-__exportStar(require("./ActivityFeed"), exports);
-__exportStar(require("./AIAssistant"), exports);
-__exportStar(require("./AnalyticsDashboard"), exports);
-__exportStar(require("./BudgetTracker"), exports);
-__exportStar(require("./CalendarWidget"), exports);
-__exportStar(require("./ChatMessages"), exports);
-__exportStar(require("./CloudStorage"), exports);
-__exportStar(require("./CodeEditor"), exports);
-__exportStar(require("./CodeStats"), exports);
-__exportStar(require("./ColorPaletteWidget"), exports);
-__exportStar(require("./ContactCard"), exports);
-__exportStar(require("./CryptocurrencyWidget"), exports);
-__exportStar(require("./DatabaseWidget"), exports);
-__exportStar(require("./DesignSystem"), exports);
-__exportStar(require("./DeviceStatus"), exports);
-__exportStar(require("./DocumentScanner"), exports);
-__exportStar(require("./EmailDashboard"), exports);
-__exportStar(require("./EnergyMeter"), exports);
-__exportStar(require("./FileManager"), exports);
-__exportStar(require("./FileUploadArea"), exports);
-__exportStar(require("./FitnessTracker"), exports);
-__exportStar(require("./GamingControllerWidget"), exports);
-__exportStar(require("./HabitTracker"), exports);
-__exportStar(require("./HealthMonitor"), exports);
-__exportStar(require("./IdeaBulbWidget"), exports);
-__exportStar(require("./InspirationWidget"), exports);
-__exportStar(require("./LanguageLearning"), exports);
-__exportStar(require("./LayerStackWidget"), exports);
-__exportStar(require("./MediaControls"), exports);
-__exportStar(require("./MiniMenu"), exports);
-__exportStar(require("./MouseTracker"), exports);
-__exportStar(require("./MusicPlayer"), exports);
-__exportStar(require("./MusicProduction"), exports);
-__exportStar(require("./NatureWidget"), exports);
-__exportStar(require("./NavigationPills"), exports);
-__exportStar(require("./NetworkStatus"), exports);
-__exportStar(require("./NotificationBadges"), exports);
-__exportStar(require("./NotificationCards"), exports);
-__exportStar(require("./OfficeBuildingWidget"), exports);
-__exportStar(require("./PasswordManager"), exports);
-__exportStar(require("./PhotoEditor"), exports);
-__exportStar(require("./PomodoroTimer"), exports);
-__exportStar(require("./PricingCard"), exports);
-__exportStar(require("./ProfileBadge"), exports);
-__exportStar(require("./ProgressTracker"), exports);
-__exportStar(require("./QuickActions"), exports);
-__exportStar(require("./QuickStats"), exports);
-__exportStar(require("./ReadingProgress"), exports);
-__exportStar(require("./RecipeFinder"), exports);
-__exportStar(require("./RocketLaunchWidget"), exports);
-__exportStar(require("./SettingsPanel"), exports);
-__exportStar(require("./ShoppingCart"), exports);
-__exportStar(require("./ShoppingList"), exports);
-__exportStar(require("./SocialEngagement"), exports);
 __exportStar(require("./SocialMediaCard"), exports);
-__exportStar(require("./StatisticsCards"), exports);
-__exportStar(require("./StatusIndicators"), exports);
-__exportStar(require("./StockMarket"), exports);
-__exportStar(require("./StreakCounter"), exports);
-__exportStar(require("./SystemStatus"), exports);
-__exportStar(require("./TaskManager"), exports);
-__exportStar(require("./TeamCollaborationWidget"), exports);
-__exportStar(require("./TimeLocationWidget"), exports);
-__exportStar(require("./TodoList"), exports);
-__exportStar(require("./ToolWidget"), exports);
-__exportStar(require("./TravelPlanner"), exports);
-__exportStar(require("./VideoCallWidget"), exports);
-__exportStar(require("./WeatherWidget"), exports);
+__exportStar(require("./ValueBlock"), exports);

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.14.6",
+  "version": "2.15.0",
   "license": "MIT",
   "private": false,
   "author": "AristoByte <info@aristobyte.com>",
@@ -119,9 +119,9 @@
     "sass": "^1.97.3"
   },
   "dependencies": {
-    "@aristobyte-ui/anchor": "^2.14.6",
-    "@aristobyte-ui/button": "^2.14.6",
-    "@aristobyte-ui/utils": "^2.14.6"
+    "@aristobyte-ui/anchor": "^2.15.0",
+    "@aristobyte-ui/button": "^2.15.0",
+    "@aristobyte-ui/utils": "^2.15.0"
   },
   "exports": {
     ".": {

package/es/components/AIAssistant/AIAssistant.scss

@@ -1,4 +0,0 @@
-@use '@aristobyte-ui/utils/styles' as *;
-
-.ai-assistant {
-}

package/es/components/AIAssistant/index.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-import './AIAssistant.scss';
-export interface IAIAssistant {
-    disabled?: boolean;
-}
-export declare const AIAssistant: React.FC<IAIAssistant>;

package/es/components/AIAssistant/index.js

@@ -1,30 +0,0 @@
-'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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from 'react';
-import './AIAssistant.scss';
-export var AIAssistant = function (_a) {
-    var props = __rest(_a, []);
-    var uniqId = React.useId();
-    return React.createElement("div", __assign({}, props, { key: uniqId, className: "ai-assistant" }));
-};

package/es/components/ActionButtons/ActionButtons.scss

@@ -1,4 +0,0 @@
-@use '@aristobyte-ui/utils/styles' as *;
-
-.action-buttons {
-}

package/es/components/ActionButtons/index.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-import './ActionButtons.scss';
-export interface IActionButtons {
-    disabled?: boolean;
-}
-export declare const ActionButtons: React.FC<IActionButtons>;

package/es/components/ActionButtons/index.js

@@ -1,30 +0,0 @@
-'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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from 'react';
-import './ActionButtons.scss';
-export var ActionButtons = function (_a) {
-    var props = __rest(_a, []);
-    var uniqId = React.useId();
-    return React.createElement("div", __assign({}, props, { key: uniqId, className: "action-buttons" }));
-};

package/es/components/ActivityFeed/ActivityFeed.scss

@@ -1,4 +0,0 @@
-@use '@aristobyte-ui/utils/styles' as *;
-
-.activity-feed {
-}

package/es/components/ActivityFeed/index.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-import './ActivityFeed.scss';
-export interface IActivityFeed {
-    disabled?: boolean;
-}
-export declare const ActivityFeed: React.FC<IActivityFeed>;

package/es/components/ActivityFeed/index.js

@@ -1,30 +0,0 @@
-'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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from 'react';
-import './ActivityFeed.scss';
-export var ActivityFeed = function (_a) {
-    var props = __rest(_a, []);
-    var uniqId = React.useId();
-    return React.createElement("div", __assign({}, props, { key: uniqId, className: "activity-feed" }));
-};

package/es/components/AnalyticsDashboard/AnalyticsDashboard.scss

@@ -1,4 +0,0 @@
-@use '@aristobyte-ui/utils/styles' as *;
-
-.analytics-dashboard {
-}

package/es/components/AnalyticsDashboard/index.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-import './AnalyticsDashboard.scss';
-export interface IAnalyticsDashboard {
-    disabled?: boolean;
-}
-export declare const AnalyticsDashboard: React.FC<IAnalyticsDashboard>;

package/es/components/AnalyticsDashboard/index.js

@@ -1,30 +0,0 @@
-'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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from 'react';
-import './AnalyticsDashboard.scss';
-export var AnalyticsDashboard = function (_a) {
-    var props = __rest(_a, []);
-    var uniqId = React.useId();
-    return React.createElement("div", __assign({}, props, { key: uniqId, className: "analytics-dashboard" }));
-};

package/es/components/BudgetTracker/BudgetTracker.scss

@@ -1,4 +0,0 @@
-@use '@aristobyte-ui/utils/styles' as *;
-
-.budget-tracker {
-}

package/es/components/BudgetTracker/index.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-import './BudgetTracker.scss';
-export interface IBudgetTracker {
-    disabled?: boolean;
-}
-export declare const BudgetTracker: React.FC<IBudgetTracker>;

package/es/components/BudgetTracker/index.js

@@ -1,30 +0,0 @@
-'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 __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from 'react';
-import './BudgetTracker.scss';
-export var BudgetTracker = function (_a) {
-    var props = __rest(_a, []);
-    var uniqId = React.useId();
-    return React.createElement("div", __assign({}, props, { key: uniqId, className: "budget-tracker" }));
-};

package/es/components/CalendarWidget/CalendarWidget.scss

@@ -1,4 +0,0 @@
-@use '@aristobyte-ui/utils/styles' as *;
-
-.calendar-widget {
-}

package/es/components/CalendarWidget/index.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-import './CalendarWidget.scss';
-export interface ICalendarWidget {
-    disabled?: boolean;
-}
-export declare const CalendarWidget: React.FC<ICalendarWidget>;