first commit

2026-05-18 15:53:59 +03:30
commit 2c100028a1
534 changed files with 94240 additions and 0 deletions
@@ -0,0 +1,128 @@
+# SbStatCard
+
+A card component for displaying key metrics and statistics with optional icon, prefix/suffix, trend, description, and actions.
+
+## Parameters
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| Label | string | - | Label describing the statistic |
+| Value | string | - | The statistic value (displayed as-is) |
+| Prefix | string? | null | Text before the value (e.g. "$") |
+| Suffix | string? | null | Text after the value (e.g. "%", "min") |
+| Trend | double? | null | Trend percentage (positive or negative) |
+| TrendLabel | string? | null | Trend description (e.g. "vs last month") |
+| ShowTrend | bool | true | Whether to show trend when Trend is set |
+| Description | string? | null | Additional description text below trend |
+| Class | string? | null | Additional CSS classes |
+
+## Slots (RenderFragments)
+
+| Slot | Type | Description |
+|------|------|-------------|
+| Icon | RenderFragment? | Icon content (e.g. `<Icon><SbIcon Name="users" /></Icon>`) |
+| Actions | RenderFragment? | Action buttons or links (e.g. "View All" button) |
+
+## CSS Classes
+
+- `sb-stat-card` - Base class
+- `sb-stat-card__icon` - Icon container
+- `sb-stat-card__content` - Content area
+- `sb-stat-card__label` - Label text
+- `sb-stat-card__value` - Value display
+- `sb-stat-card__prefix` - Value prefix
+- `sb-stat-card__suffix` - Value suffix
+- `sb-stat-card__trend` - Trend row
+- `sb-stat-card__trend--positive` - Positive trend (e.g. arrow up)
+- `sb-stat-card__trend--negative` - Negative trend (e.g. arrow down)
+- `sb-stat-card__trend-icon` - Trend arrow
+- `sb-stat-card__trend-value` - Trend percentage
+- `sb-stat-card__trend-label` - Trend label text
+- `sb-stat-card__description` - Description text
+- `sb-stat-card__actions` - Actions area
+
+## Examples
+
+### Basic Usage
+
+```razor
+<SbStatCard Label="Total Users" Value="2,543" />
+
+<SbStatCard Label="Revenue" Value="98,234" Prefix="$" />
+
+<SbStatCard Label="Growth Rate" Value="12.5" Suffix="%" />
+```
+
+### With Icons
+
+```razor
+<SbStatCard Label="Total Sales" Value="1,249" Prefix="$">
+    <Icon>
+        <SbIcon Name="dollar-sign" Size="SbSize.Xl" Color="SbColor.Success" />
+    </Icon>
+</SbStatCard>
+
+<SbStatCard Label="Active Users" Value="8,459">
+    <Icon>
+        <SbIcon Name="users" Size="SbSize.Xl" Color="SbColor.Primary" />
+    </Icon>
+</SbStatCard>
+```
+
+### With Trends
+
+```razor
+<SbStatCard Label="Total Orders" Value="3,456"
+            Trend="12.5" TrendLabel="vs last month">
+    <Icon>
+        <SbIcon Name="shopping-cart" Size="SbSize.Xl" Color="SbColor.Primary" />
+    </Icon>
+</SbStatCard>
+
+<SbStatCard Label="Bounce Rate" Value="23.4" Suffix="%"
+            Trend="-5.3" TrendLabel="vs last month">
+    <Icon>
+        <SbIcon Name="trend-down" Size="SbSize.Xl" Color="SbColor.Warning" />
+    </Icon>
+</SbStatCard>
+```
+
+### With Descriptions
+
+```razor
+<SbStatCard Label="Page Views" Value="234,567"
+            Trend="15.3" TrendLabel="from last month"
+            Description="Total page views across all pages">
+    <Icon>
+        <SbIcon Name="eye" Size="SbSize.Xl" Color="SbColor.Info" />
+    </Icon>
+</SbStatCard>
+```
+
+### With Actions
+
+```razor
+<SbStatCard Label="Pending Tasks" Value="12"
+            Description="Tasks awaiting review">
+    <Icon>
+        <SbIcon Name="clipboard-list" Size="SbSize.Xl" Color="SbColor.Warning" />
+    </Icon>
+    <Actions>
+        <SbButton Size="SbSize.Sm" Variant="SbButtonVariant.Outline">
+            View All
+        </SbButton>
+    </Actions>
+</SbStatCard>
+```
+
+### Without Trend Display
+
+```razor
+<SbStatCard Label="Total Products" Value="1,234"
+            ShowTrend="false"
+            Description="Items in inventory">
+    <Icon>
+        <SbIcon Name="package" Size="SbSize.Xl" Color="SbColor.Secondary" />
+    </Icon>
+</SbStatCard>
+```