@sonny-ui/core 0.1.0-alpha.16 → 0.1.0-alpha.18

package/README.md

@@ -2,11 +2,12 @@
 
 Beautiful, accessible Angular components built with **Tailwind CSS v4** and **Signals**. Inspired by [shadcn/ui](https://ui.shadcn.com/).
 
-- **Directive-based** — no wrapper components, applies directly to your elements
-- **Signal inputs** — reactive state with Angular's signal system
-- **Zoneless** — built for zoneless change detection
-- **Themeable** — CSS custom properties with light/dark mode support
-- **Accessible** — WAI-ARIA compliant interactive components
+- **Directive & Component-based** — lightweight directives for simple elements, full components for complex interactions
+- **Signal inputs** — `input()`, `model()`, `output()`, `computed()`, `linkedSignal()` — pure Angular 21 signals API
+- **Zoneless** — built for `provideZonelessChangeDetection()`
+- **Themeable** — CSS custom properties with light, dark, and corporate themes
+- **Accessible** — WAI-ARIA compliant, keyboard navigation, screen reader support
+- **Reactive Forms** — ControlValueAccessor on all form components
 
 ## Installation
 
@@ -18,10 +19,6 @@ ng add @sonny-ui/core
 
 This installs the package, adds Tailwind CSS v4 if needed, imports `sonny-theme.css`, and provides `SonnyUI` in your app config.
 
-Options:
-- `--project` — target project name
-- `--theme` — theme to install (default: `light`)
-
 ### Manual
 
 ```bash
@@ -31,11 +28,13 @@ npm install @sonny-ui/core
 Then in your `app.config.ts`:
 
 ```typescript
+import { provideZonelessChangeDetection } from '@angular/core';
 import { provideSonnyUI } from '@sonny-ui/core';
 
 export const appConfig = {
   providers: [
-    provideSonnyUI({ theme: 'light' }),
+    provideZonelessChangeDetection(),
+    provideSonnyUI({ defaultTheme: 'light' }),
   ],
 };
 ```
@@ -43,7 +42,8 @@ export const appConfig = {
 And import the theme in your global styles:
 
 ```css
-@import '@sonny-ui/core/styles/sonny-theme.css';
+@import "tailwindcss";
+@import "@sonny-ui/core/styles/sonny-theme.css";
 ```
 
 ### Requirements
@@ -52,60 +52,109 @@ And import the theme in your global styles:
 - Angular CDK >= 21.0.0
 - Tailwind CSS v4
 
-## Usage
-
-```typescript
-import { SnyButton } from '@sonny-ui/core';
-
-@Component({
-  imports: [SnyButton],
-  template: `<button snyButton variant="primary" size="md">Click me</button>`,
-})
-export class MyComponent {}
-```
-
-## Components
+## Components (60+)
 
+### Layout & Navigation
 | Component | Description |
 |-----------|-------------|
 | **Accordion** | Expandable sections, single/multi mode |
-| **Avatar** | User images with fallback initials |
-| **Badge** | Status labels — 6 variants, 3 sizes |
 | **Breadcrumb** | Navigation trail with dynamic segments |
-| **Button** | 6 variants, 4 sizes, loading state, link mode |
-| **Button Group** | Grouped actions, horizontal/vertical |
+| **Navbar** | Responsive navigation bar with variants |
+| **Tabs** | Tabbed content with triggers and panels |
+| **Steps** | Step-by-step progress indicator |
+| **Pagination** | Page navigation with sibling/boundary counts |
+| **Divider** | Horizontal/vertical content separator |
+
+### Data Display
+| Component | Description |
+|-----------|-------------|
+| **Table** | Default/striped/bordered, 3 densities, sticky header |
+| **Data Table** | Full-featured: sorting, filtering, pagination, row selection, expansion, column visibility, custom cell templates, bulk actions, loading skeleton, JSON export |
 | **Card** | Content containers — 4 variants, selectable |
-| **Checkbox** | Signal-based with two-way binding |
-| **Combobox** | Searchable dropdown with keyboard navigation |
+| **Badge** | Status labels — 6 variants, 3 sizes |
+| **Avatar** | User images with fallback initials |
+| **Avatar Group** | Stacked avatars with overflow counter, fallback initials |
+| **Stat** | Statistic display with label/value/change |
+| **Timeline** | Chronological event display |
+| **List** | Styled list items |
+| **Kbd** | Keyboard shortcut display |
+| **Status** | Status indicator dots |
+| **Indicator** | Positioned badge indicators |
+| **Diff** | Side-by-side content comparison |
+
+### Form Controls
+| Component | Description |
+|-----------|-------------|
 | **Input** | Text input — default/error/success variants |
-| **Loader** | Spinner, dots, and bars variants |
-| **Modal** | Dialog overlays using Angular CDK |
+| **Textarea** | Multi-line text input |
+| **Select** | Dropdown selection with search |
+| **Combobox** | Searchable dropdown with keyboard navigation |
+| **Checkbox** | Signal-based with two-way binding |
 | **Radio** | Signal-based radio groups |
-| **Select** | Dropdown selection with options array |
-| **Sheet** | Slide-out panels from any side |
-| **Skeleton** | Loading placeholders — line/circular/rounded |
-| **Slider** | Range input with min/max/step |
 | **Switch** | Toggle switches with two-way binding |
-| **Table** | Default/striped/bordered, 3 densities, sticky header |
-| **Tabs** | Tabbed content with triggers and panels |
-| **Toast** | Notifications — 4 variants, positioned, with actions |
+| **Slider** | Range input with min/max/step, drag support |
 | **Toggle** | Pressed state buttons for toolbars |
+| **Rating** | Star rating with half-star support |
+| **File Input** | File upload with drag & drop |
+| **Fieldset** | Grouped form fields with legend |
+| **Calendar** | Date grid with single/range selection, hover preview |
+| **Date Picker** | Single date with calendar dropdown, clearable, min/max |
+| **Date Range Picker** | Date range with dual calendar, preset ranges, responsive |
+| **Color Picker** | Visual color selector with saturation panel, hue slider, HEX/RGB/HSL, presets, favorites, EyeDropper API |
+| **Number Input** | Numeric stepper with +/- buttons, min/max/step, ArrowUp/Down |
+| **OTP Input** | One-time password input with auto-focus, paste, mask, separator, status feedback |
+| **Tag Input** | Tag/chip creator with Enter/comma, validation, maxTags, Backspace remove |
+| **Validator** | Form validation message display |
+
+### Feedback & Overlays
+| Component | Description |
+|-----------|-------------|
+| **Alert** | Callout messages — 5 variants, dismissible |
+| **Toast** | Notifications — 4 variants, positioned, with actions |
+| **Modal / Dialog** | Dialog overlays using Angular CDK |
+| **Sheet** | Slide-out panels from any side |
+| **Drawer** | Bottom/side drawer panels |
+| **Tooltip** | Hover/focus tooltips |
+| **Dropdown Menu** | Context menus with items, separators, labels |
+| **Command Palette** | Searchable command menu with groups, keyboard nav, service-based |
+| **Popover** | Floating panel with trigger, positioning, click-outside, escape |
 
-## Theming
+### Visual
+| Component | Description |
+|-----------|-------------|
+| **Button** | 6 variants, 4 sizes, loading state, link mode |
+| **Button Group** | Grouped actions, horizontal/vertical |
+| **Loader** | Spinner, dots, and bars variants |
+| **Skeleton** | Loading placeholders — line/circular/rounded |
+| **Progress** | Linear progress bar |
+| **Radial Progress** | Circular progress indicator |
+| **Carousel** | Image/content slider |
+| **Chat Bubble** | Message bubbles for chat UI |
+| **Dock** | macOS-style dock with hover scaling |
+| **FAB** | Floating action button |
+| **Link** | Styled anchor with variants |
 
-SonnyUI uses CSS custom properties for theming. Available tokens:
+## Usage
 
-```css
---sny-background, --sny-foreground,
---sny-primary, --sny-primary-foreground,
---sny-secondary, --sny-secondary-foreground,
---sny-accent, --sny-accent-foreground,
---sny-muted, --sny-muted-foreground,
---sny-destructive, --sny-destructive-foreground,
---sny-border, --sny-ring, --sny-radius
+```typescript
+import { SnyButtonDirective, SnyCardDirective } from '@sonny-ui/core';
+
+@Component({
+  imports: [SnyButtonDirective, SnyCardDirective],
+  template: `
+    <div snyCard padding="md">
+      <h3>My Card</h3>
+      <button snyBtn variant="default">Click me</button>
+      <button snyBtn variant="outline">Cancel</button>
+    </div>
+  `,
+})
+export class MyComponent {}
 ```
 
-Toggle themes at runtime with `ThemeService`:
+## Theming
+
+Three built-in themes: **light**, **dark**, **corporate**. Toggle at runtime:
 
 ```typescript
 import { ThemeService } from '@sonny-ui/core';
@@ -114,18 +163,23 @@ themeService = inject(ThemeService);
 themeService.setTheme('dark');
 ```
 
-## Schematics
+CSS custom properties:
 
-Generate components into your project:
-
-```bash
-ng generate @sonny-ui/core:component button
+```css
+--sny-background, --sny-foreground,
+--sny-primary, --sny-primary-foreground,
+--sny-secondary, --sny-secondary-foreground,
+--sny-accent, --sny-accent-foreground,
+--sny-muted, --sny-muted-foreground,
+--sny-destructive, --sny-destructive-foreground,
+--sny-border, --sny-ring, --sny-radius
 ```
 
 ## Links
 
 - [Documentation](https://coci-dev.github.io/sonny-ui/)
 - [GitHub](https://github.com/coci-dev/sonny-ui)
+- [npm](https://www.npmjs.com/package/@sonny-ui/core)
 - [Issues](https://github.com/coci-dev/sonny-ui/issues)
 
 ## License