first commit

2026-05-18 15:53:59 +03:30
commit 2c100028a1
534 changed files with 94240 additions and 0 deletions
@@ -0,0 +1,172 @@
+# SbButton
+
+Primary action element with multiple variants, sizes, and states. Can render as a button or anchor element.
+
+## Parameters
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| Variant | SbButtonVariant | Solid | Button style variant (Solid, Outline, Ghost, Link) |
+| Size | SbSize | Md | Button size (Xs, Sm, Md, Lg, Xl) |
+| Color | SbColor | Primary | Color intent (Default, Primary, Secondary, Success, Warning, Danger, Info, Muted) |
+| Disabled | bool | false | Whether the button is disabled |
+| Loading | bool | false | Whether the button shows a loading spinner |
+| FullWidth | bool | false | Whether the button takes full container width |
+| Type | string | "button" | HTML button type (button, submit, reset) |
+| Href | string? | null | If set, renders as anchor element instead of button |
+| Target | string? | null | Target for anchor links (_blank, _self, etc.) |
+| Class | string? | null | Additional CSS classes |
+| Style | string? | null | Inline styles |
+| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes (e.g. aria-*, data-*) |
+
+## Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| OnClick | EventCallback<MouseEventArgs> | Fired when the button is clicked |
+
+## Templates / Slots (RenderFragments)
+
+| Slot | Type | Description |
+|------|------|-------------|
+| ChildContent | RenderFragment | The button's text or content |
+| StartIcon | RenderFragment | Icon rendered before the content |
+| EndIcon | RenderFragment | Icon rendered after the content |
+
+### Template Usage Examples
+
+#### Basic Content
+
+```razor
+<SbButton>Click Me</SbButton>
+```
+
+#### With Start Icon
+
+```razor
+<SbButton>
+    <StartIcon><SbIcon Name="plus" Size="SbSize.Sm" /></StartIcon>
+    <ChildContent>Add Item</ChildContent>
+</SbButton>
+```
+
+#### With End Icon
+
+```razor
+<SbButton Variant="SbButtonVariant.Outline">
+    <ChildContent>Download</ChildContent>
+    <EndIcon><SbIcon Name="download" Size="SbSize.Sm" /></EndIcon>
+</SbButton>
+```
+
+#### With Both Icons
+
+```razor
+<SbButton>
+    <StartIcon><SbIcon Name="save" Size="SbSize.Sm" /></StartIcon>
+    <ChildContent>Save Changes</ChildContent>
+    <EndIcon><SbIcon Name="check" Size="SbSize.Sm" /></EndIcon>
+</SbButton>
+```
+
+## CSS Classes
+
+- `sb-button` - Base class
+- `sb-button--solid` - Solid variant
+- `sb-button--outline` - Outline variant
+- `sb-button--ghost` - Ghost variant
+- `sb-button--link` - Link variant
+- `sb-button--xs` - Extra small size
+- `sb-button--sm` - Small size
+- `sb-button--md` - Medium size
+- `sb-button--lg` - Large size
+- `sb-button--xl` - Extra large size
+- `sb-button--primary` - Primary color
+- `sb-button--secondary` - Secondary color
+- `sb-button--success` - Success color
+- `sb-button--warning` - Warning color
+- `sb-button--danger` - Danger color
+- `sb-button--info` - Info color
+- `sb-button--muted` - Muted color
+- `sb-button--disabled` - Disabled state
+- `sb-button--loading` - Loading state
+- `sb-button--full-width` - Full width
+
+## Accessibility
+
+- Uses native `<button>` or `<a>` elements
+- Keyboard navigation: Tab to focus, Enter/Space to activate
+- `aria-disabled` set when disabled (for anchor variant)
+- `aria-busy` set when loading
+- `rel="noopener noreferrer"` automatically added for external links
+
+## Examples
+
+### Variants
+
+```razor
+<SbStack Direction="SbStackDirection.Row" Gap="3">
+    <SbButton Variant="SbButtonVariant.Solid">Solid</SbButton>
+    <SbButton Variant="SbButtonVariant.Outline">Outline</SbButton>
+    <SbButton Variant="SbButtonVariant.Ghost">Ghost</SbButton>
+    <SbButton Variant="SbButtonVariant.Link">Link</SbButton>
+</SbStack>
+```
+
+### Colors
+
+```razor
+<SbStack Direction="SbStackDirection.Row" Gap="3">
+    <SbButton Color="SbColor.Primary">Primary</SbButton>
+    <SbButton Color="SbColor.Secondary">Secondary</SbButton>
+    <SbButton Color="SbColor.Success">Success</SbButton>
+    <SbButton Color="SbColor.Warning">Warning</SbButton>
+    <SbButton Color="SbColor.Danger">Danger</SbButton>
+</SbStack>
+```
+
+### Sizes
+
+```razor
+<SbStack Direction="SbStackDirection.Row" Gap="3" Align="SbAlign.Center">
+    <SbButton Size="SbSize.Sm">Small</SbButton>
+    <SbButton Size="SbSize.Md">Medium</SbButton>
+    <SbButton Size="SbSize.Lg">Large</SbButton>
+</SbStack>
+```
+
+### States
+
+```razor
+<SbStack Direction="SbStackDirection.Row" Gap="3">
+    <SbButton>Normal</SbButton>
+    <SbButton Disabled="true">Disabled</SbButton>
+    <SbButton Loading="true">Loading</SbButton>
+</SbStack>
+```
+
+### As Link
+
+```razor
+<SbButton Href="https://github.com" Target="_blank">
+    Go to GitHub
+</SbButton>
+```
+
+### Form Submit
+
+```razor
+<SbButton Type="submit" Color="SbColor.Success">
+    Submit Form
+</SbButton>
+```
+
+### Click Handler (OnClick)
+
+```razor
+<SbButton OnClick="HandleClick">Click me</SbButton>
+
+@code {
+    private void HandleClick(MouseEventArgs e) { ... }
+}
+```