@aristobyte-ui/presets 2.14.6 → 2.15.0

package/es/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/es/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/es/components/ValueBlock/index.js

@@ -0,0 +1,20 @@
+'use client';
+import * as React from 'react';
+import './ValueBlock.scss';
+export 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", { 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)));
+};

package/es/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/es/components/index.js

@@ -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';