wally-ui 1.8.0 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wally-ui",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "description": "About Where’s Wally? Right here — bringing you ready-to-use Angular components with Wally-UI. Stop searching, start building.",
   "bin": {
     "wally": "dist/cli.js"

package/playground/showcase/src/app/components/button/button.html

@@ -1,28 +1,10 @@
-<button
-    [type]="type()"
-    [disabled]="disabled() || loading()"
-    [attr.aria-label]="ariaLabel() || null"
-    [attr.aria-describedby]="ariaDescribedBy() || null"
-    [attr.aria-pressed]="ariaPressed()"
-    [attr.aria-busy]="loading()"
-    (click)="handleClick()"
-    class="
-        group
-        relative
-        w-full
-        flex items-center justify-center gap-2
-        text-white text-sm font-medium dark:text-[#0a0a0a]
-        bg-[#0a0a0a] hover:bg-[#0a0a0a]/85
-        disabled:bg-[#0a0a0a]/85
-        dark:bg-white dark:hover:bg-white/85
-        dark:disabled:bg-white/85
-        disabled:pointer-events-none
-        p-2.5
-        rounded-md
-        transition duration-300 ease-in-out
-        antialiased
-        cursor-pointer
-    ">
+<button [type]="type()" [disabled]="disabled() || loading()" [attr.aria-label]="ariaLabel() || null"
+    [attr.aria-describedby]="ariaDescribedBy() || null" [attr.aria-pressed]="ariaPressed()" [attr.aria-busy]="loading()"
+    (click)="handleClick()" class="group relative w-full flex items-center justify-center gap-2 text-sm font-medium disabled:pointer-events-none p-2.5 rounded-md transition duration-300 ease-in-out antialiased cursor-pointer
+    " [ngClass]="{
+        'text-white dark:text-[#0a0a0a] bg-[#0a0a0a] hover:bg-[#0a0a0a]/85 disabled:bg-[#0a0a0a]/85 dark:bg-white dark:hover:bg-white/85 dark:disabled:bg-white/85 dark:disabled:text-[#0a0a0a]/60': variant() === 'primary',
+        'text-[#0a0a0a] bg-neutral-200 hover:bg-neutral-200/60 disabled:bg-neutral-200/60 disabled:text-neutral-400 dark:text-white dark:bg-white/20 dark:hover:bg-white/10 dark:disabled:bg-white/5 dark:disabled:text-white/50': variant() === 'secondary',
+    }">
 
     @if (showNotification()) {
     <span class="absolute top-0 right-0 -mt-1 -mr-1 flex size-3">
@@ -34,8 +16,10 @@
     }
 
     @if (loading()) {
-    <svg class="size-4 animate-spin text-white dark:text-[#0a0a0a]" xmlns="http://www.w3.org/2000/svg" fill="none"
-        viewBox="0 0 24 24">
+    <svg class="size-4 animate-spin" [ngClass]="{
+            'text-white dark:text-[#0a0a0a]': variant() === 'primary',
+            'dark:text-white': variant() === 'secondary',
+        }" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
         <path class="opacity-75" fill="currentColor"
             d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">

package/playground/showcase/src/app/components/button/button.ts

@@ -1,6 +1,8 @@
 import { Component, input, InputSignal, output, OutputEmitterRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
+
 @Component({
   selector: 'wally-button',
   imports: [
@@ -14,6 +16,7 @@ export class Button {
   disabled: InputSignal<boolean> = input<boolean>(false);
   loading: InputSignal<boolean> = input<boolean>(false);
   showNotification: InputSignal<boolean> = input<boolean>(false);
+  variant: InputSignal<ButtonVariant> = input<ButtonVariant>('primary');
 
   // Accessibility properties
   ariaLabel: InputSignal<string> = input<string>('');

package/playground/showcase/src/app/components/carousel/carousel.html

@@ -1,32 +1,46 @@
-<div class="w-full flex flex-col items-center gap-4">
-    <div class="relative w-96 h-96 overflow-hidden shadow rounded-lg" #carouselContainer>
-        <ng-content></ng-content>
-    </div>
+<div class="w-full h-full flex flex-col items-center gap-4 p-2">
+    <div class="w-full h-full flex items-center gap-3">
+        <div>
+            <button type="button"
+                class="group hidden sm:block bg-neutral-100 hover:bg-neutral-200 border-2 border-neutral-200 hover:border-neutral-300 dark:bg-[#1b1b1b] dark:hover:bg-[#1d1d1d] dark:border-neutral-700 hover:dark:border-neutral-600 p-2 rounded-full cursor-pointer transition-all duration-500 ease-in-out"
+                (click)="navigateToPreviousItem()" aria-label="Go to previous slide">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
+                    stroke="currentColor"
+                    class="size-5 text-neutral-500 dark:text-neutral-300 group-hover:dark:text-white transition-all duration-500 ease-in-out">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" />
+                </svg>
+            </button>
+        </div>
+
+        <div class="relative w-full h-full overflow-hidden p-2 shadow rounded-lg" #carouselContainer>
+            <ng-content></ng-content>
+        </div>
 
-    <div class="flex items-center gap-3">
-        @for (navigationDot of navigationDotsArray; track $index; let dotIndex = $index) {
-            <button
-                class="size-2 rounded-full transition-all duration-500 ease-in-out cursor-pointer"
-                [ngClass]="{
-                    'bg-blue-500 border scale-150': dotIndex === currentVisibleItemIndex(),
-                    'bg-white hover:bg-gray-400 hover:scale-125': dotIndex !== currentVisibleItemIndex()
-                }"
-                (click)="navigateToSpecificItem(dotIndex)"
-                [attr.aria-label]="'Navigate to slide ' + (dotIndex + 1)">
+        <div>
+            <button type="button"
+                class="group hidden sm:block bg-neutral-100 hover:bg-neutral-200 border-2 border-neutral-200 hover:border-neutral-300 dark:bg-[#1b1b1b] dark:hover:bg-[#1d1d1d] dark:border-neutral-700 hover:dark:border-neutral-600 p-2 rounded-full cursor-pointer transition-all duration-500 ease-in-out"
+                (click)="navigateToNextItem()" aria-label="Go to next slide">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
+                    stroke="currentColor"
+                    class="size-5 text-neutral-500 dark:text-neutral-300 group-hover:dark:text-white transition-all duration-500 ease-in-out">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
+                </svg>
             </button>
-        }
+        </div>
     </div>
 
-    <div class="flex gap-4">
-        <button class="px-4 py-2 bg-gray-700 text-white rounded hover:bg-gray-600 transition-colors duration-200"
-                (click)="navigateToPreviousItem()"
-                aria-label="Go to previous slide">
-            Previous
-        </button>
-        <button class="px-4 py-2 bg-gray-700 text-white rounded hover:bg-gray-600 transition-colors duration-200"
-                (click)="navigateToNextItem()"
-                aria-label="Go to next slide">
-            Next
+    @if (isNavigationIndicator()) {
+    <div class="flex items-center gap-2">
+        @for (navigationIndicator of navigationIndicatorsArray; track $index; let indicatorIndex = $index) {
+        <button type="button"
+            class="w-3.5 h-1.5 rounded-sm transition-all duration-500 ease-in-out cursor-pointer focus:outline-none focus:ring-0 active:outline-none"
+            [ngClass]="{
+                        'bg-blue-500': indicatorIndex === currentVisibleItemIndex(),
+                        'bg-neutral-300 hover:bg-neutral-400 hover:scale-105 dark:bg-neutral-700': indicatorIndex !== currentVisibleItemIndex()
+                    }" (click)="navigateToSpecificItem(indicatorIndex)"
+            [attr.aria-label]="'Navigate to slide ' + (indicatorIndex + 1)">
         </button>
+        }
     </div>
+    }
 </div>

package/playground/showcase/src/app/components/carousel/carousel.ts

@@ -1,4 +1,4 @@
-import { Component, input, OnInit, signal, ViewChild, ElementRef, AfterViewInit, Renderer2, OnDestroy, HostListener } from '@angular/core';
+import { Component, signal, ViewChild, ElementRef, AfterViewInit, Renderer2, OnDestroy, HostListener, WritableSignal, input, InputSignal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 @Component({
@@ -6,14 +6,14 @@ import { CommonModule } from '@angular/common';
   imports: [CommonModule],
   templateUrl: './carousel.html',
 })
-export class Carousel implements OnInit, AfterViewInit, OnDestroy {
+export class Carousel implements AfterViewInit, OnDestroy {
   @ViewChild('carouselContainer', { static: false }) carouselContainer!: ElementRef;
 
-  totalItemsCount = signal<number>(0);
-  currentVisibleItemIndex = signal<number>(0);
+  isNavigationIndicator: InputSignal<boolean> = input<boolean>(false);
+  totalItemsCount: WritableSignal<number> = signal<number>(0);
+  currentVisibleItemIndex: WritableSignal<number> = signal<number>(0);
   carouselItemElements: HTMLElement[] = [];
 
-  // Touch and swipe gesture state
   private gestureState = {
     startPositionX: 0,
     startPositionY: 0,
@@ -23,22 +23,19 @@ export class Carousel implements OnInit, AfterViewInit, OnDestroy {
     gestureStartTime: 0
   };
 
-  // Configuration constants for touch and swipe behavior
-  private readonly MINIMUM_SWIPE_DISTANCE = 50; // minimum pixels to register as swipe
-  private readonly MINIMUM_SWIPE_VELOCITY = 0.3; // minimum velocity to register as swipe
-  private readonly MAXIMUM_SWIPE_DURATION = 300; // maximum milliseconds for swipe gesture
+  private readonly MINIMUM_SWIPE_DISTANCE = 50;
+  private readonly MINIMUM_SWIPE_VELOCITY = 0.3;
+  private readonly MAXIMUM_SWIPE_DURATION = 300;
 
-  // Event listener cleanup functions
   private eventListenerCleanupFunctions: (() => void)[] = [];
 
-  get navigationDotsArray() {
+  get navigationIndicatorsArray() {
     return Array(this.totalItemsCount()).fill(0);
   }
 
-  constructor(private renderer: Renderer2) { }
-
-  ngOnInit(): void {
-  }
+  constructor(
+    private renderer: Renderer2
+  ) { }
 
   ngAfterViewInit(): void {
     if (this.carouselContainer) {
@@ -49,16 +46,76 @@ export class Carousel implements OnInit, AfterViewInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    // Clean up all event listeners to prevent memory leaks
     this.eventListenerCleanupFunctions.forEach(cleanupFunction => cleanupFunction());
   }
 
+  calculateNextItemIndex(currentItemIndex: number): number {
+    return (currentItemIndex + 1) % this.totalItemsCount();
+  }
+
+  calculatePreviousItemIndex(currentItemIndex: number): number {
+    return (currentItemIndex - 1 + this.totalItemsCount()) % this.totalItemsCount();
+  }
+
+  navigateToNextItem(): void {
+    this.currentVisibleItemIndex.set(this.calculateNextItemIndex(this.currentVisibleItemIndex()));
+    this.updateAllItemElementPositions();
+  }
+
+  navigateToPreviousItem(): void {
+    this.currentVisibleItemIndex.set(this.calculatePreviousItemIndex(this.currentVisibleItemIndex()));
+    this.updateAllItemElementPositions();
+  }
+
+  navigateToSpecificItem(targetItemIndex: number): void {
+    this.currentVisibleItemIndex.set(targetItemIndex);
+    this.updateAllItemElementPositions();
+  }
+
+  updateItemElementPosition(carouselItemElement: HTMLElement, itemIndex: number): void {
+    const currentVisibleIndex = this.currentVisibleItemIndex();
+
+    if (itemIndex === currentVisibleIndex) {
+      this.renderer.setStyle(carouselItemElement, 'transform', 'translateX(0)');
+    } else if (itemIndex > currentVisibleIndex) {
+      this.renderer.setStyle(carouselItemElement, 'transform', 'translateX(110%)');
+    } else {
+      this.renderer.setStyle(carouselItemElement, 'transform', 'translateX(-110%)');
+    }
+  }
+
+  updateAllItemElementPositions(): void {
+    this.carouselItemElements.forEach((itemElement, itemIndex) => {
+      this.updateItemElementPosition(itemElement, itemIndex);
+    });
+  }
+
+  @HostListener('keydown', ['$event'])
+  handleKeyboardNavigation(keyboardEvent: KeyboardEvent): void {
+    switch (keyboardEvent.key) {
+      case 'ArrowLeft':
+        keyboardEvent.preventDefault();
+        this.navigateToPreviousItem();
+        break;
+      case 'ArrowRight':
+        keyboardEvent.preventDefault();
+        this.navigateToNextItem();
+        break;
+      case 'Home':
+        keyboardEvent.preventDefault();
+        this.navigateToSpecificItem(0);
+        break;
+      case 'End':
+        keyboardEvent.preventDefault();
+        this.navigateToSpecificItem(this.totalItemsCount() - 1);
+        break;
+    }
+  }
+
   private initializeCarouselItems(): void {
-    // Get all direct children elements of the carousel container
     this.carouselItemElements = Array.from(this.carouselContainer.nativeElement.children);
     this.totalItemsCount.set(this.carouselItemElements.length);
 
-    // Apply positioning and styling to each carousel item using Renderer2
     this.carouselItemElements.forEach((itemElement, itemIndex) => {
       this.renderer.setStyle(itemElement, 'position', 'absolute');
       this.renderer.setStyle(itemElement, 'inset', '0');
@@ -73,18 +130,15 @@ export class Carousel implements OnInit, AfterViewInit, OnDestroy {
   private setupTouchAndMouseEvents(): void {
     const carouselContainerElement = this.carouselContainer.nativeElement;
 
-    // Touch events for mobile devices
     const touchStartListener = this.renderer.listen(carouselContainerElement, 'touchstart', (event) => this.handleTouchStart(event));
     const touchMoveListener = this.renderer.listen(carouselContainerElement, 'touchmove', (event) => this.handleTouchMove(event));
     const touchEndListener = this.renderer.listen(carouselContainerElement, 'touchend', () => this.handleTouchEnd());
 
-    // Mouse events for desktop devices
     const mouseDownListener = this.renderer.listen(carouselContainerElement, 'mousedown', (event) => this.handleMouseDown(event));
     const mouseMoveListener = this.renderer.listen(carouselContainerElement, 'mousemove', (event) => this.handleMouseMove(event));
     const mouseUpListener = this.renderer.listen(carouselContainerElement, 'mouseup', () => this.handleMouseUp());
     const mouseLeaveListener = this.renderer.listen(carouselContainerElement, 'mouseleave', () => this.handleMouseUp());
 
-    // Store all cleanup functions for proper memory management
     this.eventListenerCleanupFunctions.push(
       touchStartListener,
       touchMoveListener,
@@ -95,48 +149,24 @@ export class Carousel implements OnInit, AfterViewInit, OnDestroy {
       mouseLeaveListener
     );
 
-    // Optimize touch performance by restricting to horizontal panning only
     this.renderer.setStyle(carouselContainerElement, 'touch-action', 'pan-x');
   }
 
   private setupAccessibilityAttributes(): void {
     const carouselContainerElement = this.carouselContainer.nativeElement;
 
-    // Set ARIA attributes for screen readers and accessibility
     this.renderer.setAttribute(carouselContainerElement, 'role', 'region');
     this.renderer.setAttribute(carouselContainerElement, 'aria-label', 'Carousel');
     this.renderer.setAttribute(carouselContainerElement, 'tabindex', '0');
   }
 
-  updateItemElementPosition(carouselItemElement: HTMLElement, itemIndex: number): void {
-    const currentVisibleIndex = this.currentVisibleItemIndex();
-
-    if (itemIndex === currentVisibleIndex) {
-      // Position the currently visible item at center (0% translation)
-      this.renderer.setStyle(carouselItemElement, 'transform', 'translateX(0)');
-    } else if (itemIndex > currentVisibleIndex) {
-      // Position items to the right of current item (110% translation to the right)
-      this.renderer.setStyle(carouselItemElement, 'transform', 'translateX(110%)');
-    } else {
-      // Position items to the left of current item (110% translation to the left)
-      this.renderer.setStyle(carouselItemElement, 'transform', 'translateX(-110%)');
-    }
-  }
-
-  updateAllItemElementPositions(): void {
-    this.carouselItemElements.forEach((itemElement, itemIndex) => {
-      this.updateItemElementPosition(itemElement, itemIndex);
-    });
-  }
-
-  // Touch event handlers for mobile devices
   private handleTouchStart(touchEvent: TouchEvent): void {
     this.initializeGesture(touchEvent.touches[0].clientX, touchEvent.touches[0].clientY);
   }
 
   private handleTouchMove(touchEvent: TouchEvent): void {
     if (this.gestureState.isCurrentlyDragging) {
-      touchEvent.preventDefault(); // Prevent page scrolling during swipe
+      touchEvent.preventDefault();
       this.updateGesturePosition(touchEvent.touches[0].clientX, touchEvent.touches[0].clientY);
     }
   }
@@ -145,14 +175,13 @@ export class Carousel implements OnInit, AfterViewInit, OnDestroy {
     this.finalizeGestureAndNavigate();
   }
 
-  // Mouse event handlers for desktop devices
   private handleMouseDown(mouseEvent: MouseEvent): void {
     this.initializeGesture(mouseEvent.clientX, mouseEvent.clientY);
   }
 
   private handleMouseMove(mouseEvent: MouseEvent): void {
     if (this.gestureState.isCurrentlyDragging) {
-      mouseEvent.preventDefault(); // Prevent text selection during drag
+      mouseEvent.preventDefault();
       this.updateGesturePosition(mouseEvent.clientX, mouseEvent.clientY);
     }
   }
@@ -161,7 +190,6 @@ export class Carousel implements OnInit, AfterViewInit, OnDestroy {
     this.finalizeGestureAndNavigate();
   }
 
-  // Unified gesture handling methods
   private initializeGesture(xPosition: number, yPosition: number): void {
     this.gestureState = {
       startPositionX: xPosition,
@@ -188,70 +216,18 @@ export class Carousel implements OnInit, AfterViewInit, OnDestroy {
     const gestureDuration = Date.now() - this.gestureState.gestureStartTime;
     const gestureVelocity = Math.abs(horizontalDistanceMoved) / gestureDuration;
 
-    // Only process horizontal swipes (ignore vertical movements)
     if (Math.abs(horizontalDistanceMoved) > Math.abs(verticalDistanceMoved)) {
-      // Check if gesture meets minimum requirements for navigation
       const isValidSwipeGesture = Math.abs(horizontalDistanceMoved) > this.MINIMUM_SWIPE_DISTANCE ||
         (gestureVelocity > this.MINIMUM_SWIPE_VELOCITY && gestureDuration < this.MAXIMUM_SWIPE_DURATION);
 
       if (isValidSwipeGesture) {
         if (horizontalDistanceMoved > 0) {
-          this.navigateToPreviousItem(); // Swipe right = go to previous item
+          this.navigateToPreviousItem();
         } else {
-          this.navigateToNextItem(); // Swipe left = go to next item
+          this.navigateToNextItem();
         }
       }
     }
-
-    // Reset gesture state after processing
     this.gestureState.isCurrentlyDragging = false;
   }
-
-  // Keyboard navigation handler
-  @HostListener('keydown', ['$event'])
-  handleKeyboardNavigation(keyboardEvent: KeyboardEvent): void {
-    switch (keyboardEvent.key) {
-      case 'ArrowLeft':
-        keyboardEvent.preventDefault();
-        this.navigateToPreviousItem();
-        break;
-      case 'ArrowRight':
-        keyboardEvent.preventDefault();
-        this.navigateToNextItem();
-        break;
-      case 'Home':
-        keyboardEvent.preventDefault();
-        this.navigateToSpecificItem(0);
-        break;
-      case 'End':
-        keyboardEvent.preventDefault();
-        this.navigateToSpecificItem(this.totalItemsCount() - 1);
-        break;
-    }
-  }
-
-  // Circular buffer algorithm implementation for infinite carousel navigation
-  calculateNextItemIndex(currentItemIndex: number): number {
-    return (currentItemIndex + 1) % this.totalItemsCount();
-  }
-
-  calculatePreviousItemIndex(currentItemIndex: number): number {
-    return (currentItemIndex - 1 + this.totalItemsCount()) % this.totalItemsCount();
-  }
-
-  navigateToNextItem(): void {
-    this.currentVisibleItemIndex.set(this.calculateNextItemIndex(this.currentVisibleItemIndex()));
-    this.updateAllItemElementPositions();
-  }
-
-  navigateToPreviousItem(): void {
-    this.currentVisibleItemIndex.set(this.calculatePreviousItemIndex(this.currentVisibleItemIndex()));
-    this.updateAllItemElementPositions();
-  }
-
-  navigateToSpecificItem(targetItemIndex: number): void {
-    this.currentVisibleItemIndex.set(targetItemIndex);
-    this.updateAllItemElementPositions();
-  }
-  // end test Circular Buffer ---
-}
+}

package/playground/showcase/src/app/pages/documentation/components/button-docs/button-docs.examples.ts

@@ -15,6 +15,10 @@ export const ButtonCodeExamples = {
   // Basic usage
   basicUsage: `<wally-button>Wally Button</wally-button>`,
 
+  // Variants
+  primaryVariant: `<wally-button variant="primary">Primary Button</wally-button>`,
+  secondaryVariant: `<wally-button variant="secondary">Secondary Button</wally-button>`,
+
   // States
   disabled: `<wally-button [disabled]="true">Disabled</wally-button>`,
   loading: `<wally-button [loading]="true">Loading</wally-button>`,