@tolle_/tolle-ui 0.0.30-beta → 0.0.31-beta

package/fesm2022/tolle-ui.mjs

@@ -10,9 +10,12 @@ import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { autoUpdate, computePosition, offset, flip, shift, size } from '@floating-ui/dom';
 import { Subject, Subscription, BehaviorSubject } from 'rxjs';
 import { format, startOfWeek, startOfMonth, endOfWeek, endOfMonth, eachDayOfInterval, subMonths, subYears, addMonths, addYears, setMonth, setYear, isSameDay, isToday, isSameMonth, isBefore, startOfDay, parse, isValid, isWithinInterval } from 'date-fns';
+import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayConfig } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
+import * as i1$2 from '@angular/router';
+import { RouterModule } from '@angular/router';
 
 function cn(...inputs) {
     return twMerge(clsx(inputs));
@@ -4167,21 +4170,42 @@ class AccordionItemComponent {
       <button
         type="button"
         (click)="toggle()"
-        class="flex flex-1 items-center justify-between py-4 font-medium transition-all [&[data-state=open]>i]:rotate-180"
+        [attr.aria-expanded]="isOpen"
         [attr.data-state]="isOpen ? 'open' : 'closed'"
+        class="flex flex-1 items-center justify-between py-4 font-medium transition-all group [&[data-state=open]>i]:rotate-180"
       >
-        <span class="text-left">{{ title }}</span>
-        <i class="ri-arrow-down-s-line text-muted-foreground transition-transform"></i>
+        <span class="text-left group-hover:underline">{{ title }}</span>
+        <i class="ri-arrow-down-s-line text-muted-foreground text-lg transition-transform duration-200 hover:no-underline"></i>
       </button>
 
       <div
-        *ngIf="isOpen"
-        class="pb-4 text-sm text-muted-foreground overflow-hidden"
-      >
-        <ng-content></ng-content>
+        [@expandCollapse]="isOpen ? 'expanded' : 'collapsed'"
+        class="overflow-hidden">
+        <div class="pb-4 pt-0 text-sm text-muted-foreground">
+          <ng-content></ng-content>
+        </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }], animations: [
+            trigger('expandCollapse', [
+                state('collapsed', style({
+                    height: '0px',
+                    opacity: '0',
+                    overflow: 'hidden',
+                    visibility: 'hidden'
+                })),
+                state('expanded', style({
+                    height: '*', // "Star" means actual content height
+                    opacity: '1',
+                    overflow: 'hidden',
+                    visibility: 'visible'
+                })),
+                // Use cubic-bezier to match Tailwind/shadcn-ui default ease
+                transition('collapsed <=> expanded', [
+                    animate('300ms cubic-bezier(0.87, 0, 0.13, 1)')
+                ])
+            ])
+        ] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AccordionItemComponent, decorators: [{
             type: Component,
@@ -4189,23 +4213,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'tolle-accordion-item',
                     standalone: true,
                     imports: [CommonModule],
+                    animations: [
+                        trigger('expandCollapse', [
+                            state('collapsed', style({
+                                height: '0px',
+                                opacity: '0',
+                                overflow: 'hidden',
+                                visibility: 'hidden'
+                            })),
+                            state('expanded', style({
+                                height: '*', // "Star" means actual content height
+                                opacity: '1',
+                                overflow: 'hidden',
+                                visibility: 'visible'
+                            })),
+                            // Use cubic-bezier to match Tailwind/shadcn-ui default ease
+                            transition('collapsed <=> expanded', [
+                                animate('300ms cubic-bezier(0.87, 0, 0.13, 1)')
+                            ])
+                        ])
+                    ],
                     template: `
     <div [class]="cn('flex flex-col border-b border-border', class)">
       <button
         type="button"
         (click)="toggle()"
-        class="flex flex-1 items-center justify-between py-4 font-medium transition-all [&[data-state=open]>i]:rotate-180"
+        [attr.aria-expanded]="isOpen"
         [attr.data-state]="isOpen ? 'open' : 'closed'"
+        class="flex flex-1 items-center justify-between py-4 font-medium transition-all group [&[data-state=open]>i]:rotate-180"
       >
-        <span class="text-left">{{ title }}</span>
-        <i class="ri-arrow-down-s-line text-muted-foreground transition-transform"></i>
+        <span class="text-left group-hover:underline">{{ title }}</span>
+        <i class="ri-arrow-down-s-line text-muted-foreground text-lg transition-transform duration-200 hover:no-underline"></i>
       </button>
 
       <div
-        *ngIf="isOpen"
-        class="pb-4 text-sm text-muted-foreground overflow-hidden"
-      >
-        <ng-content></ng-content>
+        [@expandCollapse]="isOpen ? 'expanded' : 'collapsed'"
+        class="overflow-hidden">
+        <div class="pb-4 pt-0 text-sm text-muted-foreground">
+          <ng-content></ng-content>
+        </div>
       </div>
     </div>
   `
@@ -4223,31 +4269,36 @@ class AccordionComponent {
     class = '';
     items;
     ngAfterContentInit() {
+        // 1. Assign IDs and Listeners on load
+        this.initItems();
+        // 2. Re-init if items change dynamically (optional but good for robustness)
+        this.items.changes.subscribe(() => this.initItems());
+    }
+    initItems() {
         this.items.forEach((item, index) => {
-            // Assign unique ID if none provided
+            // Auto-assign ID if missing
             if (item.id === undefined)
-                item.id = index;
-            // Hook into the item's toggle event
+                item.id = `accordion-item-${index}`;
+            // Set up the toggle bridge
             item.onToggle = (id) => this.handleToggle(id);
         });
     }
     handleToggle(selectedId) {
         this.items.forEach(item => {
             if (item.id === selectedId) {
+                // Toggle the clicked item
                 item.isOpen = !item.isOpen;
             }
-            else {
-                // If type is 'single', close all other items
-                if (this.type === 'single') {
-                    item.isOpen = false;
-                }
+            else if (this.type === 'single') {
+                // Close others if in single mode
+                item.isOpen = false;
             }
         });
     }
     cn = cn;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AccordionComponent, isStandalone: true, selector: "tolle-accordion", inputs: { type: "type", class: "class" }, queries: [{ propertyName: "items", predicate: AccordionItemComponent }], ngImport: i0, template: `
-    <div [class]="cn('w-full border-t border-border', class)">
+    <div [class]="cn('w-full', class)">
       <ng-content></ng-content>
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }] });
@@ -4257,9 +4308,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             args: [{
                     selector: 'tolle-accordion',
                     standalone: true,
-                    imports: [CommonModule],
+                    imports: [CommonModule], // No AccordionItemComponent import needed here if projected via ng-content
                     template: `
-    <div [class]="cn('w-full border-t border-border', class)">
+    <div [class]="cn('w-full', class)">
       <ng-content></ng-content>
     </div>
   `
@@ -5471,13 +5522,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }] } });
 
-const alertVariants = cva("relative w-full rounded-lg border p-4 transition-all duration-300 [&>i~div]:pl-7 [&>i]:absolute [&>i]:left-4 [&>i]:top-4 [&>i]:text-foreground", {
+const alertVariants = cva("relative w-full rounded-lg border p-4 [&>i+div]:translate-y-[-3px] [&>i]:absolute [&>i]:left-4 [&>i]:top-4 [&>i]:text-foreground [&>i~div]:pl-7", {
     variants: {
         variant: {
             default: "bg-background text-foreground",
-            destructive: "border-destructive/50 text-destructive dark:border-destructive [&>i]:text-destructive",
-            success: "border-emerald-500/50 text-emerald-700 dark:text-emerald-400 [&>i]:text-emerald-600",
-            warning: "border-amber-500/50 text-amber-700 dark:text-amber-400 [&>i]:text-amber-600",
+            destructive: "border-red-500/50 text-red-500 dark:border-red-500 [&>i]:text-red-500",
+            success: "border-emerald-500/50 text-emerald-700 dark:border-emerald-500 [&>i]:text-emerald-600 dark:text-emerald-400",
+            warning: "border-amber-500/50 text-amber-700 dark:border-amber-500 [&>i]:text-amber-600 dark:text-amber-400",
+            info: "border-blue-500/50 text-blue-700 dark:border-blue-500 [&>i]:text-blue-600 dark:text-blue-400",
         },
     },
     defaultVariants: {
@@ -5491,24 +5543,18 @@ class AlertComponent {
     dismissible = false;
     onClose = new EventEmitter();
     dismissed = false;
-    isDismissing = false;
     alertVariants = alertVariants;
     cn = cn;
     dismiss() {
-        this.isDismissing = true;
-        // Wait for animation to finish before removing from DOM
-        setTimeout(() => {
-            this.dismissed = true;
-            this.onClose.emit();
-        }, 300);
+        this.dismissed = true;
+        this.onClose.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AlertComponent, isStandalone: true, selector: "tolle-alert", inputs: { variant: "variant", title: "title", class: "class", dismissible: "dismissible" }, outputs: { onClose: "onClose" }, ngImport: i0, template: `
     <div
       *ngIf="!dismissed"
+      @fade
       [class]="cn(alertVariants({ variant }), class)"
-      [class.opacity-0]="isDismissing"
-      [class.scale-95]="isDismissing"
       role="alert"
     >
       <ng-content select="[icon]"></ng-content>
@@ -5516,22 +5562,30 @@ class AlertComponent {
       <button
         *ngIf="dismissible"
         (click)="dismiss()"
-        class="absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 group-hover:opacity-100"
-        [class.opacity-100]="dismissible"
+        class="absolute right-2 top-2 rounded-md p-1 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+        type="button"
       >
         <i class="ri-close-line text-lg"></i>
+        <span class="sr-only">Close</span>
       </button>
 
       <div>
         <h5 *ngIf="title" class="mb-1 font-medium leading-none tracking-tight">
           {{ title }}
         </h5>
-        <div class="text-sm [&_p]:leading-relaxed">
+        <div class="text-sm [&_p]:leading-relaxed opacity-90">
           <ng-content></ng-content>
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
+            trigger('fade', [
+                transition(':leave', [
+                    style({ opacity: 1, transform: 'scale(1)' }),
+                    animate('300ms ease-in-out', style({ opacity: 0, transform: 'scale(0.95)', height: 0, margin: 0, padding: 0 }))
+                ])
+            ])
+        ] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
@@ -5539,12 +5593,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     selector: 'tolle-alert',
                     standalone: true,
                     imports: [CommonModule],
+                    animations: [
+                        trigger('fade', [
+                            transition(':leave', [
+                                style({ opacity: 1, transform: 'scale(1)' }),
+                                animate('300ms ease-in-out', style({ opacity: 0, transform: 'scale(0.95)', height: 0, margin: 0, padding: 0 }))
+                            ])
+                        ])
+                    ],
                     template: `
     <div
       *ngIf="!dismissed"
+      @fade
       [class]="cn(alertVariants({ variant }), class)"
-      [class.opacity-0]="isDismissing"
-      [class.scale-95]="isDismissing"
       role="alert"
     >
       <ng-content select="[icon]"></ng-content>
@@ -5552,22 +5613,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       <button
         *ngIf="dismissible"
         (click)="dismiss()"
-        class="absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 group-hover:opacity-100"
-        [class.opacity-100]="dismissible"
+        class="absolute right-2 top-2 rounded-md p-1 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+        type="button"
       >
         <i class="ri-close-line text-lg"></i>
+        <span class="sr-only">Close</span>
       </button>
 
       <div>
         <h5 *ngIf="title" class="mb-1 font-medium leading-none tracking-tight">
           {{ title }}
         </h5>
-        <div class="text-sm [&_p]:leading-relaxed">
+        <div class="text-sm [&_p]:leading-relaxed opacity-90">
           <ng-content></ng-content>
         </div>
       </div>
     </div>
-  `,
+  `
                 }]
         }], propDecorators: { variant: [{
                 type: Input
@@ -6630,6 +6692,433 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 args: ['itemEls']
             }] } });
 
+class SidebarComponent {
+    items = [];
+    collapsed = false;
+    class = '';
+    expandedParents = new Set();
+    expandedChildren = new Set();
+    cn = cn;
+    ngOnChanges(changes) {
+        if (changes['collapsed'] && this.collapsed) {
+            this.collapseAll();
+            return;
+        }
+        if (changes['items']) {
+            this.initializeState();
+        }
+    }
+    // --- STATE INIT ---
+    initializeState() {
+        this.collapseAll();
+        if (!this.items)
+            return;
+        this.items.forEach((group, gIndex) => {
+            group.items.forEach((item, iIndex) => {
+                const parentId = this.getParentId(group, item, gIndex, iIndex);
+                if (item.expanded) {
+                    this.expandedParents.add(parentId);
+                }
+                if (item.items) {
+                    item.items.forEach((subItem, sIndex) => {
+                        if (subItem.expanded) {
+                            const childId = this.getChildId(group, item, subItem, gIndex, iIndex, sIndex);
+                            this.expandedChildren.add(childId);
+                            this.expandedParents.add(parentId);
+                        }
+                    });
+                }
+            });
+        });
+    }
+    // --- ID GENERATORS (Now using Group Index correctly) ---
+    getGroupId(group, index) {
+        return group.id || group.title || `g-${index}`;
+    }
+    getParentId(group, item, gIndex, iIndex) {
+        const groupId = this.getGroupId(group, gIndex);
+        const itemId = item.id || item.title || `p-${iIndex}`;
+        return `${groupId}__${itemId}`;
+    }
+    getChildId(group, parent, subItem, gIndex, iIndex, sIndex) {
+        const parentId = this.getParentId(group, parent, gIndex, iIndex);
+        const subItemId = subItem.id || subItem.title || `c-${sIndex}`;
+        return `${parentId}__${subItemId}`;
+    }
+    // --- ACTIONS ---
+    toggleParent(group, item, gIndex, iIndex) {
+        if (this.collapsed)
+            return;
+        const id = this.getParentId(group, item, gIndex, iIndex);
+        // Create new Set reference to ensure Change Detection triggers
+        const newSet = new Set(this.expandedParents);
+        if (newSet.has(id)) {
+            newSet.delete(id);
+        }
+        else {
+            newSet.add(id);
+        }
+        this.expandedParents = newSet;
+    }
+    toggleChild(group, parent, subItem, gIndex, iIndex, sIndex) {
+        const id = this.getChildId(group, parent, subItem, gIndex, iIndex, sIndex);
+        // Create new Set reference
+        const newSet = new Set(this.expandedChildren);
+        if (newSet.has(id)) {
+            newSet.delete(id);
+        }
+        else {
+            newSet.add(id);
+        }
+        this.expandedChildren = newSet;
+    }
+    collapseAll() {
+        this.expandedParents = new Set();
+        this.expandedChildren = new Set();
+    }
+    // --- TEMPLATE HELPERS ---
+    isParentExpanded(group, item, gIndex, iIndex) {
+        return this.expandedParents.has(this.getParentId(group, item, gIndex, iIndex));
+    }
+    isChildExpanded(group, parent, subItem, gIndex, iIndex, sIndex) {
+        return this.expandedChildren.has(this.getChildId(group, parent, subItem, gIndex, iIndex, sIndex));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SidebarComponent, isStandalone: true, selector: "tolle-sidebar", inputs: { items: "items", collapsed: "collapsed", class: "class" }, usesOnChanges: true, ngImport: i0, template: `
+    <aside [class]="cn(
+      'flex flex-col h-full border-r bg-background transition-[width] duration-300 ease-in-out shrink-0 overflow-hidden',
+      collapsed ? 'w-16' : 'w-64',
+      class
+    )">
+      <div class="flex h-14 shrink-0 items-center border-b px-3 overflow-hidden whitespace-nowrap">
+        <ng-content select="[header]"></ng-content>
+      </div>
+
+      <div class="flex-1 min-h-0 overflow-y-auto overflow-x-hidden py-4 px-3 custom-scrollbar">
+
+        @for (group of items; track group.id || group.title || $index; let gIndex = $index) {
+          <div class="mb-6">
+
+            <div [class]="cn(
+              'mb-2 px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground/70 transition-all duration-200 overflow-hidden',
+              collapsed ? 'opacity-0 h-0 mb-0 px-0' : 'opacity-100 h-auto'
+            )">
+              {{ group.title }}
+            </div>
+
+            <div class="flex flex-col gap-1">
+              @for (item of group.items; track item.id || item.title || $index; let i = $index) {
+
+                @if (item.items && item.items.length) {
+                  <div class="relative">
+                    <button
+                      type="button"
+                      (click)="toggleParent(group, item, gIndex, i)"
+                      [disabled]="collapsed"
+                      [attr.aria-expanded]="isParentExpanded(group, item, gIndex, i)"
+                      [class]="cn(
+                        'group w-full relative flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors',
+                        'hover:bg-accent hover:text-accent-foreground',
+                        isParentExpanded(group, item, gIndex, i) ? 'text-foreground bg-accent/50' : 'text-muted-foreground',
+                        collapsed ? 'justify-center' : 'justify-start'
+                      )"
+                    >
+                      <i [class]="cn(
+                          item.icon || 'ri-circle-fill',
+                          'h-4 w-4 text-lg shrink-0 transition-transform',
+                          !collapsed && 'group-hover:scale-110'
+                        )"></i>
+
+                      <span [class]="cn(
+                        'truncate transition-all duration-300',
+                        collapsed ? 'opacity-0 w-0 ml-0' : 'opacity-100 w-auto ml-3'
+                      )">
+                        {{ item.title }}
+                      </span>
+
+                      @if (!collapsed) {
+                        <i [class]="cn(
+                          'ri-arrow-down-s-line ml-auto transition-transform duration-300',
+                          isParentExpanded(group, item, gIndex, i) ? 'rotate-180' : ''
+                        )"></i>
+                      }
+                    </button>
+
+                    <div [class]="cn(
+                      'grid transition-[grid-template-rows] duration-300 ease-in-out',
+                      isParentExpanded(group, item, gIndex, i) && !collapsed ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'
+                    )">
+                      <div class="overflow-hidden">
+                        <div class="flex flex-col gap-1 mt-1 ml-4 border-l border-border/50 pl-2">
+
+                          @for (subItem of item.items; track subItem.id || subItem.title || $index; let j = $index) {
+
+                            @if (subItem.items && subItem.items.length) {
+                              <div class="relative">
+                                <button
+                                  type="button"
+                                  (click)="toggleChild(group, item, subItem, gIndex, i, j); $event.stopPropagation()"
+                                  [class]="cn(
+                                    'group w-full relative flex items-center rounded-md px-3 py-1.5 text-sm font-medium transition-colors',
+                                    'hover:bg-accent hover:text-accent-foreground text-muted-foreground',
+                                    isChildExpanded(group, item, subItem, gIndex, i, j) ? 'text-foreground bg-accent/30' : ''
+                                  )"
+                                >
+                                  <span class="w-1.5 h-1.5 rounded-full bg-border shrink-0"></span>
+                                  <span class="ml-2 truncate">{{ subItem.title }}</span>
+                                  <i [class]="cn(
+                                    'ri-arrow-right-s-line ml-auto transition-transform duration-300 text-xs',
+                                    isChildExpanded(group, item, subItem, gIndex, i, j) ? 'rotate-90' : ''
+                                  )"></i>
+                                </button>
+
+                                <div [class]="cn(
+                                  'grid transition-[grid-template-rows] duration-300 ease-in-out',
+                                  isChildExpanded(group, item, subItem, gIndex, i, j) ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'
+                                )">
+                                  <div class="overflow-hidden">
+                                    <div class="flex flex-col gap-1 mt-1 ml-4 border-l border-border/30 pl-2">
+                                      @for (grandChild of subItem.items; track grandChild.title) {
+                                        <a
+                                          [routerLink]="grandChild.url"
+                                          routerLinkActive="bg-accent/50 text-accent-foreground"
+                                          [routerLinkActiveOptions]="{ exact: true }"
+                                          class="flex items-center gap-2 hover:no-underline rounded-md px-3 py-1.5 text-sm transition-colors hover:bg-accent hover:text-accent-foreground text-muted-foreground whitespace-nowrap"
+                                        >
+                                          <span class="w-1.5 h-1.5 rounded-full bg-border/70 shrink-0"></span>
+                                          <span class="truncate">{{ grandChild.title }}</span>
+                                        </a>
+                                      }
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            }
+                            @else {
+                              <a
+                                [routerLink]="subItem.url"
+                                routerLinkActive="bg-accent/50 text-accent-foreground"
+                                [routerLinkActiveOptions]="{ exact: true }"
+                                class="flex items-center gap-2 hover:no-underline rounded-md px-3 py-1.5 text-sm transition-colors hover:bg-accent hover:text-accent-foreground text-muted-foreground whitespace-nowrap"
+                              >
+                                <span class="w-1.5 h-1.5 rounded-full bg-border shrink-0"></span>
+                                <span class="truncate">{{ subItem.title }}</span>
+                              </a>
+                            }
+                          }
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                }
+                @else {
+                  <a
+                    [routerLink]="item.url"
+                    routerLinkActive="bg-primary/10 text-primary"
+                    [routerLinkActiveOptions]="{ exact: true }"
+                    [class]="cn(
+                      'group relative hover:no-underline flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors',
+                      'hover:bg-accent hover:text-accent-foreground text-muted-foreground',
+                      collapsed ? 'justify-center' : 'justify-start'
+                    )"
+                  >
+                    <i [class]="cn(
+                        item.icon || 'ri-circle-fill',
+                        'h-4 w-4 text-lg shrink-0 transition-transform',
+                        !collapsed && 'group-hover:scale-110'
+                      )"></i>
+                    <span [class]="cn(
+                      'truncate transition-all duration-300',
+                      collapsed ? 'opacity-0 w-0 ml-0' : 'opacity-100 w-auto ml-3'
+                    )">
+                      {{ item.title }}
+                    </span>
+                  </a>
+                }
+              }
+            </div>
+          </div>
+        }
+      </div>
+
+      <div class="border-t shrink-0 p-3 overflow-hidden whitespace-nowrap">
+        <ng-content select="[footer]"></ng-content>
+      </div>
+    </aside>
+  `, isInline: true, styles: [":host{display:block;height:100%}.custom-scrollbar{scrollbar-width:thin;scrollbar-color:rgba(156,163,175,.3) transparent}.custom-scrollbar::-webkit-scrollbar{width:4px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:#9ca3af4d;border-radius:20px}button:disabled{cursor:not-allowed;opacity:.6}*{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ml-4{margin-left:1rem}.border-l{border-left-width:1px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SidebarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tolle-sidebar', standalone: true, imports: [CommonModule, RouterModule], template: `
+    <aside [class]="cn(
+      'flex flex-col h-full border-r bg-background transition-[width] duration-300 ease-in-out shrink-0 overflow-hidden',
+      collapsed ? 'w-16' : 'w-64',
+      class
+    )">
+      <div class="flex h-14 shrink-0 items-center border-b px-3 overflow-hidden whitespace-nowrap">
+        <ng-content select="[header]"></ng-content>
+      </div>
+
+      <div class="flex-1 min-h-0 overflow-y-auto overflow-x-hidden py-4 px-3 custom-scrollbar">
+
+        @for (group of items; track group.id || group.title || $index; let gIndex = $index) {
+          <div class="mb-6">
+
+            <div [class]="cn(
+              'mb-2 px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground/70 transition-all duration-200 overflow-hidden',
+              collapsed ? 'opacity-0 h-0 mb-0 px-0' : 'opacity-100 h-auto'
+            )">
+              {{ group.title }}
+            </div>
+
+            <div class="flex flex-col gap-1">
+              @for (item of group.items; track item.id || item.title || $index; let i = $index) {
+
+                @if (item.items && item.items.length) {
+                  <div class="relative">
+                    <button
+                      type="button"
+                      (click)="toggleParent(group, item, gIndex, i)"
+                      [disabled]="collapsed"
+                      [attr.aria-expanded]="isParentExpanded(group, item, gIndex, i)"
+                      [class]="cn(
+                        'group w-full relative flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors',
+                        'hover:bg-accent hover:text-accent-foreground',
+                        isParentExpanded(group, item, gIndex, i) ? 'text-foreground bg-accent/50' : 'text-muted-foreground',
+                        collapsed ? 'justify-center' : 'justify-start'
+                      )"
+                    >
+                      <i [class]="cn(
+                          item.icon || 'ri-circle-fill',
+                          'h-4 w-4 text-lg shrink-0 transition-transform',
+                          !collapsed && 'group-hover:scale-110'
+                        )"></i>
+
+                      <span [class]="cn(
+                        'truncate transition-all duration-300',
+                        collapsed ? 'opacity-0 w-0 ml-0' : 'opacity-100 w-auto ml-3'
+                      )">
+                        {{ item.title }}
+                      </span>
+
+                      @if (!collapsed) {
+                        <i [class]="cn(
+                          'ri-arrow-down-s-line ml-auto transition-transform duration-300',
+                          isParentExpanded(group, item, gIndex, i) ? 'rotate-180' : ''
+                        )"></i>
+                      }
+                    </button>
+
+                    <div [class]="cn(
+                      'grid transition-[grid-template-rows] duration-300 ease-in-out',
+                      isParentExpanded(group, item, gIndex, i) && !collapsed ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'
+                    )">
+                      <div class="overflow-hidden">
+                        <div class="flex flex-col gap-1 mt-1 ml-4 border-l border-border/50 pl-2">
+
+                          @for (subItem of item.items; track subItem.id || subItem.title || $index; let j = $index) {
+
+                            @if (subItem.items && subItem.items.length) {
+                              <div class="relative">
+                                <button
+                                  type="button"
+                                  (click)="toggleChild(group, item, subItem, gIndex, i, j); $event.stopPropagation()"
+                                  [class]="cn(
+                                    'group w-full relative flex items-center rounded-md px-3 py-1.5 text-sm font-medium transition-colors',
+                                    'hover:bg-accent hover:text-accent-foreground text-muted-foreground',
+                                    isChildExpanded(group, item, subItem, gIndex, i, j) ? 'text-foreground bg-accent/30' : ''
+                                  )"
+                                >
+                                  <span class="w-1.5 h-1.5 rounded-full bg-border shrink-0"></span>
+                                  <span class="ml-2 truncate">{{ subItem.title }}</span>
+                                  <i [class]="cn(
+                                    'ri-arrow-right-s-line ml-auto transition-transform duration-300 text-xs',
+                                    isChildExpanded(group, item, subItem, gIndex, i, j) ? 'rotate-90' : ''
+                                  )"></i>
+                                </button>
+
+                                <div [class]="cn(
+                                  'grid transition-[grid-template-rows] duration-300 ease-in-out',
+                                  isChildExpanded(group, item, subItem, gIndex, i, j) ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'
+                                )">
+                                  <div class="overflow-hidden">
+                                    <div class="flex flex-col gap-1 mt-1 ml-4 border-l border-border/30 pl-2">
+                                      @for (grandChild of subItem.items; track grandChild.title) {
+                                        <a
+                                          [routerLink]="grandChild.url"
+                                          routerLinkActive="bg-accent/50 text-accent-foreground"
+                                          [routerLinkActiveOptions]="{ exact: true }"
+                                          class="flex items-center gap-2 hover:no-underline rounded-md px-3 py-1.5 text-sm transition-colors hover:bg-accent hover:text-accent-foreground text-muted-foreground whitespace-nowrap"
+                                        >
+                                          <span class="w-1.5 h-1.5 rounded-full bg-border/70 shrink-0"></span>
+                                          <span class="truncate">{{ grandChild.title }}</span>
+                                        </a>
+                                      }
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            }
+                            @else {
+                              <a
+                                [routerLink]="subItem.url"
+                                routerLinkActive="bg-accent/50 text-accent-foreground"
+                                [routerLinkActiveOptions]="{ exact: true }"
+                                class="flex items-center gap-2 hover:no-underline rounded-md px-3 py-1.5 text-sm transition-colors hover:bg-accent hover:text-accent-foreground text-muted-foreground whitespace-nowrap"
+                              >
+                                <span class="w-1.5 h-1.5 rounded-full bg-border shrink-0"></span>
+                                <span class="truncate">{{ subItem.title }}</span>
+                              </a>
+                            }
+                          }
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                }
+                @else {
+                  <a
+                    [routerLink]="item.url"
+                    routerLinkActive="bg-primary/10 text-primary"
+                    [routerLinkActiveOptions]="{ exact: true }"
+                    [class]="cn(
+                      'group relative hover:no-underline flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors',
+                      'hover:bg-accent hover:text-accent-foreground text-muted-foreground',
+                      collapsed ? 'justify-center' : 'justify-start'
+                    )"
+                  >
+                    <i [class]="cn(
+                        item.icon || 'ri-circle-fill',
+                        'h-4 w-4 text-lg shrink-0 transition-transform',
+                        !collapsed && 'group-hover:scale-110'
+                      )"></i>
+                    <span [class]="cn(
+                      'truncate transition-all duration-300',
+                      collapsed ? 'opacity-0 w-0 ml-0' : 'opacity-100 w-auto ml-3'
+                    )">
+                      {{ item.title }}
+                    </span>
+                  </a>
+                }
+              }
+            </div>
+          </div>
+        }
+      </div>
+
+      <div class="border-t shrink-0 p-3 overflow-hidden whitespace-nowrap">
+        <ng-content select="[footer]"></ng-content>
+      </div>
+    </aside>
+  `, styles: [":host{display:block;height:100%}.custom-scrollbar{scrollbar-width:thin;scrollbar-color:rgba(156,163,175,.3) transparent}.custom-scrollbar::-webkit-scrollbar{width:4px}.custom-scrollbar::-webkit-scrollbar-track{background:transparent}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:#9ca3af4d;border-radius:20px}button:disabled{cursor:not-allowed;opacity:.6}*{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ml-4{margin-left:1rem}.border-l{border-left-width:1px}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], collapsed: [{
+                type: Input
+            }], class: [{
+                type: Input
+            }] } });
+
 /*
  * Public API Surface of tolle
  */
@@ -6638,5 +7127,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionComponent, AccordionItemComponent, AlertComponent, AvatarComponent, AvatarFallbackComponent, BadgeComponent, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbLinkComponent, BreadcrumbSeparatorComponent, ButtonComponent, ButtonGroupComponent, CalendarComponent, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CheckboxComponent, DataTableComponent, DatePickerComponent, DateRangePickerComponent, DropdownItemComponent, DropdownLabelComponent, DropdownMenuComponent, DropdownSeparatorComponent, DropdownTriggerDirective, EmptyStateComponent, InputComponent, MaskedInputComponent, Modal, ModalComponent, ModalRef, ModalService, ModalStackService, MultiSelectComponent, OtpComponent, OtpGroupComponent, OtpSlotComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, RadioGroupComponent, RadioItemComponent, RangeCalendarComponent, SegmentedComponent, SelectComponent, SelectGroupComponent, SelectItemComponent, SelectSeparatorComponent, SkeletonComponent, SwitchComponent, TOLLE_CONFIG, TextareaComponent, ThemeService, ToastContainerComponent, ToastService, TolleCellDirective, TooltipDirective, cn, provideTolleConfig };
+export { AccordionComponent, AccordionItemComponent, AlertComponent, AvatarComponent, AvatarFallbackComponent, BadgeComponent, BreadcrumbComponent, BreadcrumbItemComponent, BreadcrumbLinkComponent, BreadcrumbSeparatorComponent, ButtonComponent, ButtonGroupComponent, CalendarComponent, CardComponent, CardContentComponent, CardFooterComponent, CardHeaderComponent, CardTitleComponent, CheckboxComponent, DataTableComponent, DatePickerComponent, DateRangePickerComponent, DropdownItemComponent, DropdownLabelComponent, DropdownMenuComponent, DropdownSeparatorComponent, DropdownTriggerDirective, EmptyStateComponent, InputComponent, MaskedInputComponent, Modal, ModalComponent, ModalRef, ModalService, ModalStackService, MultiSelectComponent, OtpComponent, OtpGroupComponent, OtpSlotComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, RadioGroupComponent, RadioItemComponent, RangeCalendarComponent, SegmentedComponent, SelectComponent, SelectGroupComponent, SelectItemComponent, SelectSeparatorComponent, SidebarComponent, SkeletonComponent, SwitchComponent, TOLLE_CONFIG, TextareaComponent, ThemeService, ToastContainerComponent, ToastService, TolleCellDirective, TooltipDirective, cn, provideTolleConfig };
 //# sourceMappingURL=tolle-ui.mjs.map