feat: integrate sonner as brain entry

apps/app/src/app/pages/(components)/components/(input-otp)/input-otp--form.example.ts

@@ -1,10 +1,10 @@
 import { afterNextRender, Component, computed, inject, type OnDestroy, signal } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { BrnInputOtp } from '@spartan-ng/brain/input-otp';
+import { toast } from '@spartan-ng/brain/sonner';
 import { HlmButton } from '@spartan-ng/helm/button';
 import { HlmInputOtp, HlmInputOtpGroup, HlmInputOtpSlot } from '@spartan-ng/helm/input-otp';
 import { HlmToaster } from '@spartan-ng/helm/sonner';
-import { toast } from 'ngx-sonner';
 
 @Component({
 	selector: 'spartan-input-otp-form',

apps/app/src/app/pages/(components)/components/(sidebar)/sidebar.preview.ts

@@ -541,7 +541,7 @@ import {
   lucideMap,
   lucidePlus,
 } from '@ng-icons/lucide';
-import { toast } from 'ngx-sonner';
+import { toast } from '@spartan-ng/brain/sonner';
 import { HlmToasterImports } from '@spartan-ng/helm/sonner';
 
 @Component({

apps/app/src/app/pages/(components)/components/(sonner)/sonner--description.example.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { toast } from '@spartan-ng/brain/sonner';
 import { HlmButtonImports } from '@spartan-ng/helm/button';
-import { toast } from 'ngx-sonner';
 
 @Component({
 	selector: 'spartan-sonner-description-example',

apps/app/src/app/pages/(components)/components/(sonner)/sonner--position.example.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { toast } from '@spartan-ng/brain/sonner';
 import { HlmButtonImports } from '@spartan-ng/helm/button';
-import { toast } from 'ngx-sonner';
 
 @Component({
 	selector: 'spartan-sonner-position-example',

apps/app/src/app/pages/(components)/components/(sonner)/sonner--types.example.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { toast } from '@spartan-ng/brain/sonner';
 import { HlmButtonImports } from '@spartan-ng/helm/button';
-import { toast } from 'ngx-sonner';
 
 @Component({
 	selector: 'spartan-sonner-types-example',

apps/app/src/app/pages/(components)/components/(sonner)/sonner.page.ts

@@ -107,6 +107,9 @@ export const routeMeta: RouteMeta = {
 				<spartan-code secondTab [code]="_positionCode()" />
 			</spartan-tabs>
 
+			<spartan-section-sub-heading id="brn-api">Brain API</spartan-section-sub-heading>
+			<spartan-ui-api-docs docType="brain" />
+
 			<spartan-section-sub-heading id="hlm-api">Helm API</spartan-section-sub-heading>
 			<spartan-ui-api-docs docType="helm" />
 

apps/app/src/app/pages/(components)/components/(sonner)/sonner.preview.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
+import { toast } from '@spartan-ng/brain/sonner';
 import { HlmButtonImports } from '@spartan-ng/helm/button';
 import { HlmToasterImports } from '@spartan-ng/helm/sonner';
-import { toast } from 'ngx-sonner';
 
 @Component({
 	selector: 'spartan-sonner-preview',
@@ -24,7 +24,7 @@ export class SonnerPreview {
 }
 
 export const defaultImports = `
-import { toast } from 'ngx-sonner';
+import { toast } from '@spartan-ng/brain/sonner';
 `;
 export const defaultSkeleton = `
 toast('Event has been created.');

apps/app/src/app/pages/(sidebar-preview)/sidebar-preview/sidebar-group-action.page.ts

@@ -1,10 +1,10 @@
 import { Component, ViewEncapsulation } from '@angular/core';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { lucideChartPie, lucideFrame, lucideMap, lucidePlus } from '@ng-icons/lucide';
+import { toast } from '@spartan-ng/brain/sonner';
 import { HlmIcon } from '@spartan-ng/helm/icon';
 import { HlmSidebarImports } from '@spartan-ng/helm/sidebar';
 import { HlmToasterImports } from '@spartan-ng/helm/sonner';
-import { toast } from 'ngx-sonner';
 
 @Component({
 	selector: 'spartan-sidebar-group-action',

apps/app/vite.config.ts

@@ -25,7 +25,6 @@ export default defineConfig(({ mode }) => {
 				'marked-gfm-heading-id',
 				'marked-highlight',
 				'prismjs/**/*',
-				'ngx-sonner',
 				'@ng-icons/remixicon',
 				'luxon',
 				'@angular/cdk/portal',

apps/ui-storybook/stories/sonner.stories.ts

@@ -1,9 +1,9 @@
 import { Component } from '@angular/core';
+import { toast } from '@spartan-ng/brain/sonner';
 import { HlmButton } from '@spartan-ng/helm/button';
 import { HlmToaster } from '@spartan-ng/helm/sonner';
 import type { Meta, StoryObj } from '@storybook/angular';
 import { moduleMetadata } from '@storybook/angular';
-import { toast } from 'ngx-sonner';
 
 const meta: Meta<HlmToaster> = {
 	title: 'Sonner',

libs/brain/sonner/README.md

@@ -0,0 +1,3 @@
+# @spartan-ng/brain/sonner
+
+Secondary entry point of `@spartan-ng/brain`. It can be used by importing from `@spartan-ng/brain/sonner`.

libs/brain/sonner/ng-package.json

@@ -0,0 +1,5 @@
+{
+	"lib": {
+		"entryFile": "src/index.ts"
+	}
+}

libs/brain/sonner/src/index.ts

@@ -0,0 +1,8 @@
+import { BrnSonnerToaster } from './lib/brn-toaster';
+
+export * from './lib/brn-toaster';
+export * from './lib/brn-toaster.token';
+export * from './lib/state';
+export * from './lib/types';
+
+export const BrnSonnerImports = [BrnSonnerToaster] as const;

libs/brain/sonner/src/lib/brn-icon.ts

@@ -0,0 +1,51 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import type { ToastTypes } from './types';
+
+@Component({
+	selector: 'brn-sonner-icon',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `
+		@switch (type()) {
+			@case ('success') {
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20">
+					<path
+						fill-rule="evenodd"
+						d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+			}
+			@case ('error') {
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20">
+					<path
+						fill-rule="evenodd"
+						d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+			}
+			@case ('info') {
+				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" height="20" width="20">
+					<path
+						fill-rule="evenodd"
+						d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+			}
+			@case ('warning') {
+				<svg viewBox="0 0 64 64" fill="currentColor" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
+					<path
+						d="M32.427,7.987c2.183,0.124 4,1.165 5.096,3.281l17.936,36.208c1.739,3.66 -0.954,8.585 -5.373,8.656l-36.119,0c-4.022,-0.064 -7.322,-4.631 -5.352,-8.696l18.271,-36.207c0.342,-0.65 0.498,-0.838 0.793,-1.179c1.186,-1.375 2.483,-2.111 4.748,-2.063Zm-0.295,3.997c-0.687,0.034 -1.316,0.419 -1.659,1.017c-6.312,11.979 -12.397,24.081 -18.301,36.267c-0.546,1.225 0.391,2.797 1.762,2.863c12.06,0.195 24.125,0.195 36.185,0c1.325,-0.064 2.321,-1.584 1.769,-2.85c-5.793,-12.184 -11.765,-24.286 -17.966,-36.267c-0.366,-0.651 -0.903,-1.042 -1.79,-1.03Z"
+					/>
+					<path
+						d="M33.631,40.581l-3.348,0l-0.368,-16.449l4.1,0l-0.384,16.449Zm-3.828,5.03c0,-0.609 0.197,-1.113 0.592,-1.514c0.396,-0.4 0.935,-0.601 1.618,-0.601c0.684,0 1.223,0.201 1.618,0.601c0.395,0.401 0.593,0.905 0.593,1.514c0,0.587 -0.193,1.078 -0.577,1.473c-0.385,0.395 -0.929,0.593 -1.634,0.593c-0.705,0 -1.249,-0.198 -1.634,-0.593c-0.384,-0.395 -0.576,-0.886 -0.576,-1.473Z"
+					/>
+				</svg>
+			}
+		}
+	`,
+})
+export class BrnSonnerIcon {
+	public readonly type = input<ToastTypes>('default');
+}

libs/brain/sonner/src/lib/brn-loader.ts

@@ -0,0 +1,20 @@
+import type { BooleanInput } from '@angular/cdk/coercion';
+import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+@Component({
+	selector: 'brn-sonner-loader',
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	template: `
+		<div class="sonner-loading-wrapper" [attr.data-visible]="isVisible()">
+			<div class="sonner-spinner">
+				@for (_ of _bars; track $index) {
+					<div class="sonner-loading-bar"></div>
+				}
+			</div>
+		</div>
+	`,
+})
+export class BrnSonnerLoader {
+	public readonly isVisible = input.required<boolean, BooleanInput>({ transform: booleanAttribute });
+	protected readonly _bars = Array(12).fill(0);
+}