@egose/shadcn-theme-ng-tw 0.0.28 → 0.2.0

package/slider/fesm2022/slider.mjs

@@ -8,25 +8,27 @@ class HlmSlider {
     _slider = injectBrnSlider();
     constructor() {
         classes(() => [
-            'group flex w-full touch-none flex-col select-none data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-row data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+            'tw:group tw:flex tw:w-full tw:touch-none tw:flex-col tw:select-none tw:data-[orientation=vertical]:h-full tw:data-[orientation=vertical]:min-h-40 tw:data-[orientation=vertical]:w-auto tw:data-[orientation=vertical]:flex-row tw:data-[disabled]:pointer-events-none tw:data-[disabled]:opacity-50',
         ]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: HlmSlider, isStandalone: true, selector: "hlm-slider, brn-slider [hlm]", hostDirectives: [{ directive: i1.BrnSlider, inputs: ["id", "id", "value", "value", "disabled", "disabled", "min", "min", "max", "max", "step", "step", "minStepsBetweenThumbs", "minStepsBetweenThumbs", "inverted", "inverted", "orientation", "orientation", "showTicks", "showTicks", "maxTicks", "maxTicks", "tickLabelInterval", "tickLabelInterval", "formatTick", "formatTick", "draggableRange", "draggableRange", "draggableRangeOnly", "draggableRangeOnly", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby"], outputs: ["valueChange", "valueChange"] }], ngImport: i0, template: `
-    <div class="relative flex w-full items-center group-data-vertical:w-auto group-data-vertical:flex-col">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.3", type: HlmSlider, isStandalone: true, selector: "hlm-slider, brn-slider [hlm]", hostDirectives: [{ directive: i1.BrnSlider, inputs: ["id", "id", "value", "value", "disabled", "disabled", "min", "min", "max", "max", "step", "step", "minStepsBetweenThumbs", "minStepsBetweenThumbs", "inverted", "inverted", "orientation", "orientation", "showTicks", "showTicks", "maxTicks", "maxTicks", "tickLabelInterval", "tickLabelInterval", "formatTick", "formatTick", "draggableRange", "draggableRange", "draggableRangeOnly", "draggableRangeOnly", "aria-label", "aria-label", "aria-labelledby", "aria-labelledby"], outputs: ["valueChange", "valueChange"] }], ngImport: i0, template: `
+    <div
+      class="tw:relative tw:flex tw:w-full tw:items-center tw:group-data-[orientation=vertical]:w-auto tw:group-data-[orientation=vertical]:flex-col"
+    >
       <div
         brnSliderTrack
-        class="bg-muted rounded-full data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5 relative grow overflow-hidden"
+        class="tw:bg-muted tw:rounded-full tw:data-[orientation=horizontal]:h-1.5 tw:data-[orientation=horizontal]:w-full tw:data-[orientation=vertical]:h-full tw:data-[orientation=vertical]:w-1.5 tw:relative tw:grow tw:overflow-hidden"
       >
         <div
-          class="bg-primary absolute select-none data-draggable-range:cursor-move data-horizontal:h-full data-vertical:w-full"
+          class="tw:bg-primary tw:absolute tw:select-none tw:data-draggable-range:cursor-move tw:data-[orientation=horizontal]:h-full tw:data-[orientation=vertical]:w-full"
           brnSliderRange
         ></div>
       </div>
 
       @for (i of _slider.thumbIndexes(); track i) {
         <span
-          class="border-primary ring-ring/50 size-4 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden absolute block shrink-0 select-none after:absolute after:-inset-2"
+          class="tw:border-primary tw:ring-ring/50 tw:size-4 tw:rounded-full tw:border tw:bg-white tw:shadow-sm tw:transition-[color,box-shadow] tw:hover:ring-4 tw:focus-visible:ring-4 tw:focus-visible:outline-hidden tw:absolute tw:block tw:shrink-0 tw:select-none tw:after:absolute tw:after:-inset-2"
           brnSliderThumb
         ></span>
       }
@@ -34,22 +36,22 @@ class HlmSlider {
 
     @if (_slider.showTicks()) {
       <div
-        class="px-2 group-data-vertical:px-0 group-data-vertical:py-2 text-muted-foreground mt-3 flex w-full items-start justify-between gap-1 text-xs font-medium group-data-horizontal:group-data-inverted:flex-row-reverse group-data-vertical:ms-3 group-data-vertical:mt-0 group-data-vertical:w-auto group-data-vertical:flex-col-reverse group-data-vertical:group-data-inverted:flex-col"
+        class="tw:px-2 tw:group-data-[orientation=vertical]:px-0 tw:group-data-[orientation=vertical]:py-2 tw:text-muted-foreground tw:mt-3 tw:flex tw:w-full tw:items-start tw:justify-between tw:gap-1 tw:text-xs tw:font-medium tw:group-data-[orientation=horizontal]:group-data-inverted:flex-row-reverse tw:group-data-[orientation=vertical]:ms-3 tw:group-data-[orientation=vertical]:mt-0 tw:group-data-[orientation=vertical]:w-auto tw:group-data-[orientation=vertical]:flex-col-reverse tw:group-data-[orientation=vertical]:group-data-inverted:flex-col"
       >
         <div
           *brnSliderTick="let tick; let formattedTick = formattedTick"
-          class="group flex w-0 flex-col items-center justify-center gap-2 group-data-vertical:h-0 group-data-vertical:w-auto group-data-vertical:flex-row"
+          class="tw:group tw:flex tw:w-0 tw:flex-col tw:items-center tw:justify-center tw:gap-2 tw:group-data-[orientation=vertical]:h-0 tw:group-data-[orientation=vertical]:w-auto tw:group-data-[orientation=vertical]:flex-row"
         >
           <div
-            class="bg-muted-foreground/70 h-1 w-px group-data-vertical:h-px group-data-vertical:w-1 group-data-horizontal:group-data-[skip]:h-0.5 group-data-vertical:group-data-[skip]:w-0.5"
+            class="tw:bg-muted-foreground/70 tw:h-1 tw:w-px tw:group-data-[orientation=vertical]:h-px tw:group-data-[orientation=vertical]:w-1 tw:group-data-[orientation=horizontal]:group-data-[skip]:h-0.5 tw:group-data-[orientation=vertical]:group-data-[skip]:w-0.5"
           ></div>
-          <div class="text-center group-data-[skip]:opacity-0">{{ formattedTick }}</div>
+          <div class="tw:text-center tw:group-data-[skip]:opacity-0">{{ formattedTick }}</div>
         </div>
       </div>
     }
   `, isInline: true, dependencies: [{ kind: "directive", type: i1.BrnSliderTrack, selector: "[brnSliderTrack]" }, { kind: "directive", type: i1.BrnSliderThumb, selector: "[brnSliderThumb]" }, { kind: "directive", type: i1.BrnSliderRange, selector: "[brnSliderRange]" }, { kind: "directive", type: i1.BrnSliderTick, selector: "[brnSliderTick]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSlider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSlider, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-slider, brn-slider [hlm]',
@@ -81,20 +83,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         },
                     ],
                     template: `
-    <div class="relative flex w-full items-center group-data-vertical:w-auto group-data-vertical:flex-col">
+    <div
+      class="tw:relative tw:flex tw:w-full tw:items-center tw:group-data-[orientation=vertical]:w-auto tw:group-data-[orientation=vertical]:flex-col"
+    >
       <div
         brnSliderTrack
-        class="bg-muted rounded-full data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5 relative grow overflow-hidden"
+        class="tw:bg-muted tw:rounded-full tw:data-[orientation=horizontal]:h-1.5 tw:data-[orientation=horizontal]:w-full tw:data-[orientation=vertical]:h-full tw:data-[orientation=vertical]:w-1.5 tw:relative tw:grow tw:overflow-hidden"
       >
         <div
-          class="bg-primary absolute select-none data-draggable-range:cursor-move data-horizontal:h-full data-vertical:w-full"
+          class="tw:bg-primary tw:absolute tw:select-none tw:data-draggable-range:cursor-move tw:data-[orientation=horizontal]:h-full tw:data-[orientation=vertical]:w-full"
           brnSliderRange
         ></div>
       </div>
 
       @for (i of _slider.thumbIndexes(); track i) {
         <span
-          class="border-primary ring-ring/50 size-4 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden absolute block shrink-0 select-none after:absolute after:-inset-2"
+          class="tw:border-primary tw:ring-ring/50 tw:size-4 tw:rounded-full tw:border tw:bg-white tw:shadow-sm tw:transition-[color,box-shadow] tw:hover:ring-4 tw:focus-visible:ring-4 tw:focus-visible:outline-hidden tw:absolute tw:block tw:shrink-0 tw:select-none tw:after:absolute tw:after:-inset-2"
           brnSliderThumb
         ></span>
       }
@@ -102,16 +106,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
 
     @if (_slider.showTicks()) {
       <div
-        class="px-2 group-data-vertical:px-0 group-data-vertical:py-2 text-muted-foreground mt-3 flex w-full items-start justify-between gap-1 text-xs font-medium group-data-horizontal:group-data-inverted:flex-row-reverse group-data-vertical:ms-3 group-data-vertical:mt-0 group-data-vertical:w-auto group-data-vertical:flex-col-reverse group-data-vertical:group-data-inverted:flex-col"
+        class="tw:px-2 tw:group-data-[orientation=vertical]:px-0 tw:group-data-[orientation=vertical]:py-2 tw:text-muted-foreground tw:mt-3 tw:flex tw:w-full tw:items-start tw:justify-between tw:gap-1 tw:text-xs tw:font-medium tw:group-data-[orientation=horizontal]:group-data-inverted:flex-row-reverse tw:group-data-[orientation=vertical]:ms-3 tw:group-data-[orientation=vertical]:mt-0 tw:group-data-[orientation=vertical]:w-auto tw:group-data-[orientation=vertical]:flex-col-reverse tw:group-data-[orientation=vertical]:group-data-inverted:flex-col"
       >
         <div
           *brnSliderTick="let tick; let formattedTick = formattedTick"
-          class="group flex w-0 flex-col items-center justify-center gap-2 group-data-vertical:h-0 group-data-vertical:w-auto group-data-vertical:flex-row"
+          class="tw:group tw:flex tw:w-0 tw:flex-col tw:items-center tw:justify-center tw:gap-2 tw:group-data-[orientation=vertical]:h-0 tw:group-data-[orientation=vertical]:w-auto tw:group-data-[orientation=vertical]:flex-row"
         >
           <div
-            class="bg-muted-foreground/70 h-1 w-px group-data-vertical:h-px group-data-vertical:w-1 group-data-horizontal:group-data-[skip]:h-0.5 group-data-vertical:group-data-[skip]:w-0.5"
+            class="tw:bg-muted-foreground/70 tw:h-1 tw:w-px tw:group-data-[orientation=vertical]:h-px tw:group-data-[orientation=vertical]:w-1 tw:group-data-[orientation=horizontal]:group-data-[skip]:h-0.5 tw:group-data-[orientation=vertical]:group-data-[skip]:w-0.5"
           ></div>
-          <div class="text-center group-data-[skip]:opacity-0">{{ formattedTick }}</div>
+          <div class="tw:text-center tw:group-data-[skip]:opacity-0">{{ formattedTick }}</div>
         </div>
       </div>
     }
@@ -124,11 +128,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 const HlmSliderImports = [HlmSlider];
 class HlmSliderModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: HlmSliderModule, imports: [HlmSlider], exports: [HlmSlider] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSliderModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmSliderModule, imports: [HlmSlider], exports: [HlmSlider] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSliderModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmSliderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmSliderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...HlmSliderImports],
@@ -141,4 +145,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 
 export { HlmSlider, HlmSliderImports, HlmSliderModule };
-//# sourceMappingURL=slider.mjs.map
+

package/sonner/README.md

@@ -1,64 +1,347 @@
-# Sonner
+# Sonner (`@egose/shadcn-theme-ng/sonner`)
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.2.0.
+Toast notifications for Angular, styled like [shadcn/ui Sonner](https://ui.shadcn.com/docs/components/sonner). This subpath ships a single standalone component, `HlmToaster`, which is a thin shadcn-styled wrapper around the `NgxSonnerToaster` component from [`ngx-sonner`](https://github.com/adamwathan/ngx-sonner) (the Angular port of [sonner](https://sonner.emilkowal.ski/)). Place one `<hlm-toaster />` at your app root, then fire toasts imperatively with the `toast()` helpers from `ngx-sonner`.
 
-## Code scaffolding
+> **Ships as:** `@egose/shadcn-theme-ng/sonner` and `@egose/shadcn-theme-ng-tw/sonner` (the `tw:`-prefixed Tailwind variant). See the [package README](../../README.md) for install steps, peer dependencies, Tailwind setup, and testing/release guidance. Do not publish this project directory independently.
 
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+## Installation
 
 ```bash
-ng generate component component-name
+# Plain Tailwind (no prefix)
+npm install @egose/shadcn-theme-ng
+
+# Or the tw:-prefixed variant
+npm install @egose/shadcn-theme-ng-tw
 ```
 
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+This library has no extra runtime install beyond the package itself — `ngx-sonner` is installed transitively. See the [package README](../../README.md) for the full peer-dependency table (`@angular/core`, `@angular/common`, `@spartan-ng/brain`, `rxjs`, etc.) and the Tailwind variant contract.
 
-```bash
-ng generate --help
+> You call `toast()`, `toast.success()`, etc. from the **`ngx-sonner`** package, not from this subpath. This subpath only provides the styled `<hlm-toaster />` outlet component.
+
+## Imports
+
+All public symbols are re-exported from `projects/sonner/src/public-api.ts`:
+
+```ts
+import { HlmToaster, HlmToasterImports, HlmToasterModule } from '@egose/shadcn-theme-ng/sonner';
+// tw variant:
+// import { HlmToaster, HlmToasterImports, HlmToasterModule } from '@egose/shadcn-theme-ng-tw/sonner';
 ```
 
-## Building
+Standalone-component usage (preferred):
 
-To build the library, run:
+```ts
+import { Component } from '@angular/core';
+import { HlmToasterImports } from '@egose/shadcn-theme-ng/sonner';
 
-```bash
-ng build sonner
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [...HlmToasterImports],
+  template: `<hlm-toaster />`,
+})
+export class AppComponent {}
 ```
 
-This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+NgModule usage:
 
-### Publishing the Library
+```ts
+import { NgModule } from '@angular/core';
+import { HlmToasterModule } from '@egose/shadcn-theme-ng/sonner';
 
-Once the project is built, you can publish your library by following these steps:
+@NgModule({ imports: [HlmToasterModule] })
+export class AppModule {}
+```
 
-1. Navigate to the `dist` directory:
+| Symbol              | Kind                 | Description                                      |
+| ------------------- | -------------------- | ------------------------------------------------ |
+| `HlmToaster`        | Standalone component | The `<hlm-toaster>` outlet. Renders toasts.      |
+| `HlmToasterImports` | `const` array        | `[HlmToaster]` — spread into `imports: [...]`.   |
+| `HlmToasterModule`  | NgModule             | Imports + re-exports `HlmToaster` for NgModules. |
 
-   ```bash
-   cd dist/sonner
-   ```
+## Anatomy / Structure
 
-2. Run the `npm publish` command to publish your library to the npm registry:
-   ```bash
-   npm publish
-   ```
+Render exactly one toaster outlet, typically in `AppComponent`:
 
-## Running unit tests
+```html
+<!-- app.component.html -->
+<hlm-toaster />
+<router-outlet />
+```
 
-To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+With common options:
 
-```bash
-ng test
+```html
+<hlm-toaster
+  theme="system"
+  position="top-center"
+  [richColors]="true"
+  [expand]="true"
+  [closeButton]="true"
+  [duration]="5000"
+  [visibleToasts]="5"
+/>
 ```
 
-## Running end-to-end tests
+The component template forwards everything to `<ngx-sonner-toaster>` internally — you never write `<ngx-sonner-toaster>` yourself.
 
-For end-to-end (e2e) testing, run:
+## API reference
 
-```bash
-ng e2e
+### `HlmToaster` — selector `hlm-toaster` (component)
+
+All inputs are Angular signal `input()`s mirroring `ToasterProps` from `ngx-sonner`.
+
+| Input           | Type                                                              | Default                                                                                                                                                                                                               | Description                                                                                                     |
+| --------------- | ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| `invert`        | `boolean` (coerced with `booleanAttribute`)                       | `false`                                                                                                                                                                                                               | Dark mode inversion.                                                                                            |
+| `theme`         | `ToasterProps['theme']` (`'light' \| 'dark' \| 'system'` approx.) | `'light'`                                                                                                                                                                                                             | Color theme of the toasts.                                                                                      |
+| `position`      | `ToasterProps['position']`                                        | `'bottom-right'`                                                                                                                                                                                                      | Screen corner/edge: e.g. `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right`. |
+| `hotKey`        | `ToasterProps['hotkey']` (`string[]`)                             | `['altKey', 'KeyT']`                                                                                                                                                                                                  | Hotkey that focuses/expands toasts.                                                                             |
+| `richColors`    | `boolean` (coerced)                                               | `false`                                                                                                                                                                                                               | Success/error color accents.                                                                                    |
+| `expand`        | `boolean` (coerced)                                               | `false`                                                                                                                                                                                                               | Expand all toasts by default (else stacked).                                                                    |
+| `duration`      | `number` (coerced with `numberAttribute`)                         | `4000`                                                                                                                                                                                                                | Default toast lifetime in ms.                                                                                   |
+| `visibleToasts` | `number` (coerced)                                                | `3`                                                                                                                                                                                                                   | Max simultaneously visible toasts.                                                                              |
+| `closeButton`   | `boolean` (coerced)                                               | `false`                                                                                                                                                                                                               | Show an × close button on every toast.                                                                          |
+| `toastOptions`  | `ToasterProps['toastOptions']`                                    | `{ classes: { toast: 'group toast group-[.toaster]:bg-background …', description: 'group-[.toast]:text-muted-foreground', actionButton: 'group-[.toast]:bg-primary …', cancelButton: 'group-[.toast]:bg-muted …' } }` | Per-toast default options + shadcn class overrides.                                                             |
+| `offset`        | `ToasterProps['offset']`                                          | `null`                                                                                                                                                                                                                | Pixel offset from the viewport edge.                                                                            |
+| `dir`           | `ToasterProps['dir']`                                             | `'auto'`                                                                                                                                                                                                              | Text direction (`auto` / `ltr` / `rtl`).                                                                        |
+| `class`         | `ClassValue` (aliased input `userClass`)                          | `''`                                                                                                                                                                                                                  | Extra classes merged via `hlm('toaster group', …)` onto the outlet.                                             |
+| `style`         | `Record<string, string>` (aliased input `userStyle`)              | `{}`                                                                                                                                                                                                                  | Inline styles forwarded to `ngx-sonner-toaster`.                                                                |
+
+No outputs, no methods. The host element gets computed class `toaster group` (+ your `class`).
+
+> `toast()`, `toast.success()`, `toast.error()`, `toast.promise()`, `toast.dismiss()` etc. are imported from **`ngx-sonner`**, not from this subpath:
+>
+> ```ts
+> import { toast } from 'ngx-sonner';
+> ```
+
+## Examples
+
+### 1. Basic setup + plain toast
+
+Add the outlet once at the app root.
+
+```ts
+// app.component.ts
+import { Component } from '@angular/core';
+import { HlmToasterImports } from '@egose/shadcn-theme-ng/sonner';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [...HlmToasterImports],
+  template: `
+    <hlm-toaster />
+    <router-outlet />
+  `,
+})
+export class AppComponent {}
+```
+
+Fire a toast from anywhere:
+
+```ts
+// demo.component.ts
+import { Component } from '@angular/core';
+import { toast } from 'ngx-sonner';
+import { HlmButton } from '@egose/shadcn-theme-ng/button';
+
+@Component({
+  selector: 'demo-basic',
+  standalone: true,
+  imports: [HlmButton],
+  template: `<button hlmBtn (click)="notify()">Show toast</button>`,
+})
+export class DemoBasic {
+  notify() {
+    toast('Event created', { description: 'Your event is now live.' });
+  }
+}
+```
+
+### 2. Success / error / warning states
+
+```ts
+// demo-states.component.ts
+import { Component } from '@angular/core';
+import { toast } from 'ngx-sonner';
+import { HlmButtonImports } from '@egose/shadcn-theme-ng/button';
+
+@Component({
+  selector: 'demo-states',
+  standalone: true,
+  imports: [...HlmButtonImports],
+  template: `
+    <div class="flex gap-2">
+      <button hlmBtn variant="default" (click)="ok()">Success</button>
+      <button hlmBtn variant="destructive" (click)="fail()">Error</button>
+      <button hlmBtn variant="secondary" (click)="warn()">Warning</button>
+      <button hlmBtn variant="outline" (click)="info()">Info</button>
+    </div>
+  `,
+})
+export class DemoStates {
+  ok() {
+    toast.success('Profile saved', { description: 'Your changes are live.' });
+  }
+  fail() {
+    toast.error('Upload failed', { description: 'File exceeds 10 MB.' });
+  }
+  warn() {
+    toast.warning('Session expiring', { description: 'You will be logged out in 2 minutes.' });
+  }
+  info() {
+    toast.info('New version', { description: 'Refresh to get the latest UI.' });
+  }
+}
 ```
 
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+### 3. Positions, themes, rich colors
+
+```html
+<!-- Top-center, system theme, colored toasts with close buttons -->
+<hlm-toaster position="top-center" theme="system" [richColors]="true" [closeButton]="true" [expand]="true" />
+```
+
+```ts
+import { Component, signal } from '@angular/core';
+import { HlmToasterImports } from '@egose/shadcn-theme-ng/sonner';
+
+@Component({
+  selector: 'demo-position',
+  standalone: true,
+  imports: [...HlmToasterImports],
+  template: ` <hlm-toaster [position]="position()" theme="dark" [visibleToasts]="5" /> `,
+})
+export class DemoPosition {
+  // 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
+  readonly position = signal<'top-center'>('top-center');
+}
+```
+
+### 4. Actions, cancellation, and durations
+
+```ts
+// demo-actions.component.ts
+import { Component } from '@angular/core';
+import { toast } from 'ngx-sonner';
+import { HlmButtonImports } from '@egose/shadcn-theme-ng/button';
+
+@Component({
+  selector: 'demo-actions',
+  standalone: true,
+  imports: [...HlmButtonImports],
+  template: `
+    <div class="flex gap-2">
+      <button hlmBtn (click)="withAction()">Undoable delete</button>
+      <button hlmBtn variant="outline" (click)="sticky()">Sticky toast</button>
+      <button hlmBtn variant="ghost" (click)="dismissAll()">Dismiss all</button>
+    </div>
+  `,
+})
+export class DemoActions {
+  withAction() {
+    toast('Conversation archived', {
+      description: 'You can undo this within 10 seconds.',
+      duration: 10000,
+      action: { label: 'Undo', onClick: () => toast.success('Restored') },
+      cancel: { label: 'Dismiss', onClick: () => {} },
+    });
+  }
+  sticky() {
+    toast('Sync paused — offline', { duration: Infinity, closeButton: true });
+  }
+  dismissAll() {
+    toast.dismiss();
+  }
+}
+```
+
+### 5. Async / promise toasts (loading → success → error)
+
+```ts
+// demo-promise.component.ts
+import { Component, inject } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { toast } from 'ngx-sonner';
+import { HlmButtonImports } from '@egose/shadcn-theme-ng/button';
+import { HlmSpinnerImports } from '@egose/shadcn-theme-ng/spinner';
+
+@Component({
+  selector: 'demo-promise',
+  standalone: true,
+  imports: [...HlmButtonImports, ...HlmSpinnerImports],
+  template: `<button hlmBtn (click)="save()">Save report</button>`,
+})
+export class DemoPromise {
+  private readonly http = inject(HttpClient);
+
+  save() {
+    const request = this.http.post('/api/reports', { title: 'Q3' }).toPromise();
+    toast.promise(request, {
+      loading: 'Saving report…',
+      success: 'Report saved',
+      error: 'Could not save report',
+    });
+  }
+}
+```
+
+Combine with a spinner while the promise is pending by driving `show` from a signal — see `@egose/shadcn-theme-ng/spinner`.
+
+### 6. Custom styling via `toastOptions`, `class`, and `style`
+
+```ts
+// app.component.ts
+import { Component } from '@angular/core';
+import { HlmToasterImports } from '@egose/shadcn-theme-ng/sonner';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [...HlmToasterImports],
+  template: ` <hlm-toaster class="my-toaster" [toastOptions]="toastOptions" [offset]="24" dir="ltr" /> `,
+})
+export class AppComponent {
+  readonly toastOptions = {
+    classes: {
+      toast: 'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground',
+      description: 'group-[.toast]:text-muted-foreground',
+      actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+      cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
+    },
+    // per-toast defaults can also set duration/style here
+    duration: 6000,
+  };
+}
+```
+
+Per-toast override (description + action button classes come from `toastOptions.classes` above unless overridden):
+
+```ts
+toast('Custom toast', {
+  description: 'This toast uses the global toastOptions classes.',
+  className: 'border-primary',
+  style: { borderWidth: '2px' },
+});
+```
+
+## Accessibility notes
+
+- `ngx-sonner` renders toasts in an `aria-live` region so screen readers announce them; keep messages short and put detail in `description`.
+- Always pair an icon-only trigger with visible text or an `aria-label` on the button that fires the toast.
+- Do not use toasts as the only feedback for errors on form submit — also surface the error inline near the field (the `description` alone is not focusable).
+- `duration: Infinity` toasts trap no focus but persist; always provide a `closeButton` or explicit dismiss action for sticky toasts.
+- Hotkey defaults to `Alt+T` (`hotKey` input); document it if your app relies on keyboard flows, or override it to avoid conflicts.
+
+## Theming / CSS variables
+
+The outlet merges `hlm('toaster group', userClass)` and ships `toastOptions.classes` mapped onto shadcn theme tokens (`bg-background`, `text-foreground`, `border-border`, `bg-primary`, `bg-muted`, …). It follows your shadcn CSS-variable theme automatically. Override via the `class` input (outlet position/layout) or `toastOptions.classes` (toast/description/action/cancel styling).
 
-## Additional Resources
+## Related subpaths
 
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+- `@egose/shadcn-theme-ng/button` — trigger buttons for toast demos.
+- `@egose/shadcn-theme-ng/spinner` — loading indicator to pair with `toast.promise()`.
+- `@egose/shadcn-theme-ng/alert` / `@egose/shadcn-theme-ng/basic-alert` — persistent inline feedback (vs. transient toasts).
+- `@egose/shadcn-theme-ng/utils` — `hlm()` merger used internally for outlet classes.

package/sonner/fesm2022/sonner.mjs

@@ -31,10 +31,10 @@ class HlmToaster {
     ...(ngDevMode ? [{ debugName: "dir" }] : /* istanbul ignore next */ []));
     userClass = input('', { ...(ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {}), alias: 'class' });
     userStyle = input({}, { ...(ngDevMode ? { debugName: "userStyle" } : /* istanbul ignore next */ {}), alias: 'style' });
-    _computedClass = computed(() => hlm('toaster group', this.userClass()), /* @ts-ignore */
+    _computedClass = computed(() => hlm('toaster tw:group', this.userClass()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_computedClass" }] : /* istanbul ignore next */ []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmToaster, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: HlmToaster, isStandalone: true, selector: "hlm-toaster", inputs: { invert: { classPropertyName: "invert", publicName: "invert", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, hotKey: { classPropertyName: "hotKey", publicName: "hotKey", isSignal: true, isRequired: false, transformFunction: null }, richColors: { classPropertyName: "richColors", publicName: "richColors", isSignal: true, isRequired: false, transformFunction: null }, expand: { classPropertyName: "expand", publicName: "expand", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, visibleToasts: { classPropertyName: "visibleToasts", publicName: "visibleToasts", isSignal: true, isRequired: false, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null }, toastOptions: { classPropertyName: "toastOptions", publicName: "toastOptions", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, userStyle: { classPropertyName: "userStyle", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmToaster, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.3", type: HlmToaster, isStandalone: true, selector: "hlm-toaster", inputs: { invert: { classPropertyName: "invert", publicName: "invert", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, hotKey: { classPropertyName: "hotKey", publicName: "hotKey", isSignal: true, isRequired: false, transformFunction: null }, richColors: { classPropertyName: "richColors", publicName: "richColors", isSignal: true, isRequired: false, transformFunction: null }, expand: { classPropertyName: "expand", publicName: "expand", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, visibleToasts: { classPropertyName: "visibleToasts", publicName: "visibleToasts", isSignal: true, isRequired: false, transformFunction: null }, closeButton: { classPropertyName: "closeButton", publicName: "closeButton", isSignal: true, isRequired: false, transformFunction: null }, toastOptions: { classPropertyName: "toastOptions", publicName: "toastOptions", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, userClass: { classPropertyName: "userClass", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, userStyle: { classPropertyName: "userStyle", publicName: "style", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <ngx-sonner-toaster
       [class]="_computedClass()"
       [invert]="invert()"
@@ -53,7 +53,7 @@ class HlmToaster {
     />
   `, isInline: true, dependencies: [{ kind: "component", type: NgxSonnerToaster, selector: "ngx-sonner-toaster", inputs: ["invert", "theme", "position", "hotKey", "richColors", "expand", "duration", "visibleToasts", "closeButton", "toastOptions", "offset", "dir", "class", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmToaster, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmToaster, decorators: [{
             type: Component,
             args: [{
                     selector: 'hlm-toaster',
@@ -85,11 +85,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 const HlmToasterImports = [HlmToaster];
 class HlmToasterModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmToasterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: HlmToasterModule, imports: [HlmToaster], exports: [HlmToaster] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmToasterModule, imports: [HlmToasterImports] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmToasterModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.3", ngImport: i0, type: HlmToasterModule, imports: [HlmToaster], exports: [HlmToaster] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmToasterModule, imports: [HlmToasterImports] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: HlmToasterModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.3", ngImport: i0, type: HlmToasterModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...HlmToasterImports],
@@ -102,4 +102,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
  */
 
 export { HlmToaster, HlmToasterImports, HlmToasterModule };
-//# sourceMappingURL=sonner.mjs.map
+