first commit

2026-05-18 15:53:59 +03:30
commit 2c100028a1
534 changed files with 94240 additions and 0 deletions
@@ -0,0 +1,146 @@
+# SbSwitch
+
+A toggle switch component for boolean on/off states. More visually distinct than a checkbox for settings and preferences.
+
+## Parameters
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| Value | bool | false | Switch on/off state (two-way bindable) |
+| ValueChanged | EventCallback\<bool\> | - | Callback when value changes |
+| Label | string? | null | Switch label text |
+| Disabled | bool | false | Whether the switch is disabled |
+| Color | SbColor | SbColor.Primary | Switch accent color when on |
+| Size | SbSize | SbSize.Md | Switch size (Sm, Md, Lg) |
+| HelperText | string? | null | Helper text shown below the label |
+| Id | string? | null | Element ID for the input |
+| Class | string? | null | Additional CSS classes |
+| Style | string? | null | Inline styles |
+| AdditionalAttributes | Dictionary\<string, object\>? | null | Additional HTML attributes (CaptureUnmatchedValues) |
+
+## Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| ValueChanged | EventCallback\<bool\> | Fired when the switch value changes |
+
+## Templates / Slots (RenderFragments)
+
+| Slot | Type | Description |
+|------|------|-------------|
+| ChildContent | RenderFragment | Custom label content (takes precedence over Label parameter) |
+
+### Template Usage Examples
+
+#### Custom Label
+
+```razor
+<SbSwitch @bind-Value="darkMode">
+    <SbStack Direction="SbStackDirection.Row" Gap="2" Align="SbAlign.Center">
+        <SbIcon Name="moon" Size="SbSize.Sm" />
+        <span>Dark Mode</span>
+    </SbStack>
+</SbSwitch>
+```
+
+## CSS Classes
+
+- `sb-switch` - Base class
+- `sb-switch--{color}` - Color variant (primary, success, warning, danger, etc.)
+- `sb-switch--{size}` - Size variant (sm, md, lg)
+- `sb-switch--checked` - On state
+- `sb-switch--disabled` - Disabled state
+- `sb-switch__input-wrapper` - Wrapper around input
+- `sb-switch__input` - Native input
+- `sb-switch__track` - Background track
+- `sb-switch__thumb` - Sliding thumb
+- `sb-switch__text` - Wrapper for label and helper
+- `sb-switch__label` - Label text
+- `sb-switch__helper` - Helper text
+
+## Accessibility
+
+- Uses native `<input type="checkbox">` with `role="switch"`
+- `aria-checked` indicates current state
+- Keyboard accessible (Space to toggle)
+- Label wraps input for expanded click area
+
+## Examples
+
+### Basic Usage
+
+```razor
+<SbSwitch @bind-Value="isEnabled" Label="Enable feature" />
+```
+
+### Color Variants
+
+```razor
+<SbSwitch @bind-Value="setting1" Label="Primary" Color="SbColor.Primary" />
+<SbSwitch @bind-Value="setting2" Label="Success" Color="SbColor.Success" />
+<SbSwitch @bind-Value="setting3" Label="Warning" Color="SbColor.Warning" />
+```
+
+### Settings Panel
+
+```razor
+<SbCard>
+    <Header>
+        <SbHeading Level="3">Notifications</SbHeading>
+    </Header>
+    <SbStack Gap="4">
+        <SbSwitch @bind-Value="emailNotifications" Label="Email notifications" />
+        <SbSwitch @bind-Value="pushNotifications" Label="Push notifications" />
+        <SbSwitch @bind-Value="smsNotifications" Label="SMS notifications" />
+    </SbStack>
+</SbCard>
+```
+
+### Disabled States
+
+```razor
+<SbSwitch Value="true" Disabled="true" Label="Always on (locked)" />
+<SbSwitch Value="false" Disabled="true" Label="Always off (locked)" />
+```
+
+### With Rich Label
+
+```razor
+<SbSwitch @bind-Value="autoSave">
+    <div>
+        <strong>Auto-save</strong>
+        <SbText Size="SbTextSize.Sm" Color="SbColor.Muted">
+            Automatically save changes every 5 minutes
+        </SbText>
+    </div>
+</SbSwitch>
+```
+
+### Controlled Switch
+
+```razor
+<SbSwitch Value="@isPublic" 
+          ValueChanged="OnPublicChanged"
+          Label="Make profile public" />
+
+@code {
+    private bool isPublic;
+    
+    private async Task OnPublicChanged(bool value)
+    {
+        if (value)
+        {
+            var confirmed = await DialogService.Confirm(
+                "Making your profile public will allow anyone to view it.");
+            if (confirmed)
+            {
+                isPublic = true;
+            }
+        }
+        else
+        {
+            isPublic = false;
+        }
+    }
+}
+```