wally-ui 1.11.2 → 1.12.0

package/dist/cli.js

@@ -41,6 +41,13 @@ program
     .command('add <component>')
     .description('Add a new component')
     .action(async (component) => {
+    // Block AI components (coming soon in Chat SDK)
+    if (component.startsWith('ai-')) {
+        console.log(chalk_1.default.yellowBright(`\n AI components (${component}) are part of the Chat SDK (coming soon).`));
+        console.log(chalk_1.default.blueBright('These components will be available via: ') + chalk_1.default.cyan('npx wally-ui add chat-sdk'));
+        console.log(chalk_1.default.gray('Visit https://wally-ui.com/documentation/chat-sdk for more info.\n'));
+        return;
+    }
     // Check if Angular project
     if (!fs_extra_1.default.existsSync('angular.json')) {
         console.log(chalk_1.default.redBright('Not an Angular project. Run this in Angular project root.'));

package/dist/cli.js.map

@@ -1 +1 @@
-{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"cli.js","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":";;;;;;AAEA,yCAAoC;AACpC,wDAAgC;AAChC,wDAA0B;AAC1B,kDAA0B;AAC1B,gDAAwB;AAExB,OAAO,CAAC,GAAG,CAAC,eAAK,CAAC,WAAW,CAAC;;;;;;;;;;CAU7B,CAAC,CAAC,CAAC;AAEJ,MAAM,OAAO,GAAY,IAAI,mBAAO,EAAE,CAAC;AAEvC,MAAM,eAAe,GAAG,CAAC,QAAgB,EAAE,EAAE;IACzC,MAAM,EAAE,GAAG,kBAAQ,CAAC,eAAe,CAAC;QAChC,KAAK,EAAE,OAAO,CAAC,KAAK;QACpB,MAAM,EAAE,OAAO,CAAC,MAAM;KACzB,CAAC,CAAC;IAEH,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;QACzB,EAAE,CAAC,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC,EAAE;YAC3B,EAAE,CAAC,KAAK,EAAE,CAAC;YACX,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,KAAK,GAAG,IAAI,MAAM,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,CAAC,CAAC;QAC1F,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAEF,OAAO;KACF,IAAI,CAAC,OAAO,CAAC;KACb,WAAW,CAAC,6BAA6B,CAAC;KAC1C,OAAO,CAAC,OAAO,CAAC,CAAC;AAEtB,OAAO;KACF,OAAO,CAAC,iBAAiB,CAAC;KAC1B,WAAW,CAAC,qBAAqB,CAAC;KAClC,MAAM,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE;IACxB,gDAAgD;IAChD,IAAI,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC;QAC9B,OAAO,CAAC,GAAG,CAAC,eAAK,CAAC,YAAY,CAAC,qBAAqB,SAAS,2CAA2C,CAAC,CAAC,CAAC;QAC3G,OAAO,CAAC,GAAG,CAAC,eAAK,CAAC,UAAU,CAAC,0CAA0C,CAAC,GAAG,eAAK,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC,CAAC;QACpH,OAAO,CAAC,GAAG,CAAC,eAAK,CAAC,IAAI,CAAC,oEAAoE,CAAC,CAAC,CAAC;QAC9F,OAAO;IACX,CAAC;IAED,2BAA2B;IAC3B,IAAI,CAAC,kBAAE,CAAC,UAAU,CAAC,cAAc,CAAC,EAAE,CAAC;QACjC,OAAO,CAAC,GAAG,CAAC,eAAK,CAAC,SAAS,CAAC,2DAA2D,CAAC,CAAC,CAAC;QAC1F,OAAO;IACX,CAAC;IAED,MAAM,aAAa,GAAG,+BAA+B,SAAS,EAAE,CAAC;IAEjE,IAAI,MAAM,kBAAE,CAAC,UAAU,CAAC,aAAa,CAAC,EAAE,CAAC;QACrC,OAAO,CAAC,GAAG,CAAC,eAAK,CAAC,YAAY,CAAC,cAAc,SAAS,uBAAuB,aAAa,EAAE,CAAC,CAAC,CAAC;QAC/F,MAAM,eAAe,GAAG,MAAM,eAAe,CACzC,eAAK,CAAC,UAAU,CAAC,+BAA+B,CAAC,GAAG,eAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAC5E,CAAC;QAEF,IAAI,CAAC,eAAe,EAAE,CAAC;YACnB,OAAO,CAAC,GAAG,CAAC,eAAK,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC;YAChD,OAAO;QACX,CAAC;IACL,CAAC;IAED,MAAM,cAAc,GAAG,cAAI,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC;IAEnH,IAAI,CAAC;QACD,MAAM,cAAc,GAAG,MAAM,kBAAE,CAAC,QAAQ,CAAC,cAAI,CAAC,IAAI,CAAC,cAAc,EAAE,GAAG,SAAS,KAAK,CAAC,EAAE,MAAM,CAAC,CAAC;QAC/F,MAAM,QAAQ,GAAG,MAAM,kBAAE,CAAC,QAAQ,CAAC,cAAI,CAAC,IAAI,CAAC,cAAc,EAAE,GAAG,SAAS,OAAO,CAAC,EAAE,MAAM,CAAC,CAAC;QAE3F,MAAM,kBAAE,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;QAClC,MAAM,kBAAE,CAAC,SAAS,CAAC,GAAG,aAAa,IAAI,SAAS,KAAK,EAAE,cAAc,CAAC,CAAC;QACvE,MAAM,kBAAE,CAAC,SAAS,CAAC,GAAG,aAAa,IAAI,SAAS,OAAO,EAAE,QAAQ,CAAC,CAAC;QAEnE,OAAO,CAAC,GAAG,CAAC,eAAK,CAAC,KAAK,CAAC,+BAA+B,CAAC,CAAC,CAAC;IAC9D,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACb,OAAO,CAAC,GAAG,CAAC,eAAK,CAAC,GAAG,CAAC,uBAAuB,SAAS,EAAE,CAAC,CAAC,CAAC;IAC/D,CAAC;AACL,CAAC,CAAC,CAAC;AAEP,OAAO;KACF,OAAO,CAAC,MAAM,CAAC;KACf,KAAK,CAAC,IAAI,CAAC;KACX,WAAW,CAAC,2BAA2B,CAAC;KACxC,MAAM,CAAC,KAAK,IAAI,EAAE;IACf,MAAM,wBAAwB,GAAW,cAAI,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC;IAE1H,IAAI,CAAC;QACD,MAAM,UAAU,GAAa,MAAM,kBAAE,CAAC,OAAO,CAAC,wBAAwB,CAAC,CAAC;QACxE,OAAO,CAAC,GAAG,CAAC,eAAK,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC,CAAC;QACnD,UAAU,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE;YAC3B,OAAO,CAAC,GAAG,CAAC,eAAK,CAAC,KAAK,CAAC,OAAO,SAAS,EAAE,CAAC,CAAC,CAAC;QACjD,CAAC,CAAC,CAAA;IACN,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACb,OAAO,CAAC,GAAG,CAAC,eAAK,CAAC,GAAG,CAAC,yCAAyC,CAAC,CAAC,CAAC;QAClE,OAAO,CAAC,GAAG,CAAC,eAAK,CAAC,MAAM,CAAC,kDAAkD,CAAC,CAAC,CAAC;IAClF,CAAC;AACL,CAAC,CAAC,CAAA;AAEN,OAAO,CAAC,KAAK,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wally-ui",
-  "version": "1.11.2",
+  "version": "1.12.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"
@@ -35,7 +35,9 @@
     "design-system",
     "tailwind",
     "angular-tailwind",
-    "typescript"
+    "typescript",
+    "chatbot",
+    "chatbot-sdk"
   ],
   "engines": {
     "node": ">=20.0.0"

package/playground/showcase/public/sitemap.xml

@@ -52,4 +52,36 @@
         <priority>0.8</priority>
     </url>
 
+    <!-- Breadcrumb Documentation -->
+    <url>
+        <loc>https://wally-ui.com/documentation/components/breadcrumb</loc>
+        <lastmod>2025-10-08</lastmod>
+        <changefreq>monthly</changefreq>
+        <priority>0.8</priority>
+    </url>
+
+    <!-- Tooltip Documentation -->
+    <url>
+        <loc>https://wally-ui.com/documentation/components/tooltip</loc>
+        <lastmod>2025-10-08</lastmod>
+        <changefreq>monthly</changefreq>
+        <priority>0.8</priority>
+    </url>
+
+    <!-- Chat SDK Documentation -->
+    <url>
+        <loc>https://wally-ui.com/documentation/chat-sdk</loc>
+        <lastmod>2025-10-08</lastmod>
+        <changefreq>weekly</changefreq>
+        <priority>0.9</priority>
+    </url>
+
+    <!-- MCP Server Documentation -->
+    <url>
+        <loc>https://wally-ui.com/mcp</loc>
+        <lastmod>2025-10-08</lastmod>
+        <changefreq>monthly</changefreq>
+        <priority>0.8</priority>
+    </url>
+
 </urlset>

package/playground/showcase/src/app/app.routes.server.ts

@@ -25,6 +25,14 @@ export const serverRoutes: ServerRoute[] = [
     path: 'documentation/components/carousel',
     renderMode: RenderMode.Prerender,
   },
+  {
+    path: 'documentation/components/tooltip',
+    renderMode: RenderMode.Prerender,
+  },
+  {
+    path: 'documentation/chat-sdk',
+    renderMode: RenderMode.Prerender,
+  },
   {
     path: 'components',
     renderMode: RenderMode.Prerender,

package/playground/showcase/src/app/components/ai/ai-chat/ai-chat.html

@@ -0,0 +1,5 @@
+<div class="w-full border bg-white/50 border-neutral-300 dark:bg-[#1b1b1b] dark:border-neutral-700 shadow-lg rounded-4xl p-1">
+    <div class="w-full">
+        <wally-ai-composer></wally-ai-composer>
+    </div>
+</div>

package/playground/showcase/src/app/components/ai/ai-chat/ai-chat.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AiChat } from './ai-chat';
+
+describe('AiChat', () => {
+  let component: AiChat;
+  let fixture: ComponentFixture<AiChat>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AiChat]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AiChat);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/playground/showcase/src/app/components/ai/ai-chat/ai-chat.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+import { AiPromptInput } from '../ai-prompt-input/ai-prompt-input';
+import { AiComposer } from '../ai-composer/ai-composer';
+
+@Component({
+  selector: 'wally-ai-chat',
+  imports: [
+    AiComposer,
+    AiPromptInput,
+  ],
+  templateUrl: './ai-chat.html',
+  styleUrl: './ai-chat.css'
+})
+export class AiChat {
+
+}

package/playground/showcase/src/app/components/ai/ai-composer/ai-composer.html

@@ -0,0 +1,69 @@
+<div class="w-full flex flex-col" role="region" aria-label="AI message composer">
+    <!-- Selected Text Context -->
+    <div class="p-0.5">
+        <div
+            id="selected-context"
+            class="w-full flex items-center gap-1 justify-between border bg-neutral-100 border-neutral-300 dark:bg-[#121212] dark:border-neutral-700 rounded-t-3xl rounded-b-lg p-3"
+            role="status"
+            aria-live="polite">
+            <div class="w-full flex gap-4 items-center">
+                <svg viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
+                    class="size-5 text-[#0a0a0a] dark:text-white"
+                    aria-hidden="true">
+                    <path
+                        d="M12.5293 6.5293C12.7566 6.30203 13.1081 6.27383 13.3662 6.44434L13.4707 6.5293L17.4707 10.5293C17.7304 10.789 17.7304 11.211 17.4707 11.4707L13.4707 15.4707C13.211 15.7304 12.789 15.7304 12.5293 15.4707C12.2696 15.211 12.2696 14.789 12.5293 14.5293L15.3936 11.665H6C3.97588 11.665 2.33496 10.0241 2.33496 8V4.5C2.33496 4.13273 2.63273 3.83496 3 3.83496C3.36727 3.83496 3.66504 4.13273 3.66504 4.5V8C3.66504 9.28958 4.71042 10.335 6 10.335H15.3936L12.5293 7.4707L12.4443 7.36621C12.2738 7.10808 12.302 6.75657 12.5293 6.5293Z">
+                    </path>
+                </svg>
+
+                <p class="text-sm text-[#0a0a0a] dark:text-white" id="context-label">
+                    "Ask about"
+                </p>
+            </div>
+
+            <div>
+                <wally-button
+                    [variant]="'ghost'"
+                    [rounded]="true"
+                    [ariaLabel]="'Clear selected context'">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" class="size-5" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+                    </svg>
+                </wally-button>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-full px-4 pt-4">
+        <wally-ai-prompt-input></wally-ai-prompt-input>
+    </div>
+
+    <!-- Action Buttons -->
+    <div class="w-full flex justify-between px-2 pb-2" role="toolbar" aria-label="Composer actions">
+        <div class="size-10">
+            <wally-tooltip [text]="'Add files and more'" position="bottom">
+                <wally-button
+                    [variant]="'ghost'"
+                    [rounded]="true"
+                    [ariaLabel]="'Add attachment or insert content'">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
+                        stroke="currentColor" class="size-5" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
+                    </svg>
+                </wally-button>
+            </wally-tooltip>
+        </div>
+
+        <div class="size-10">
+            <wally-button
+                [variant]="'primary'"
+                [rounded]="true"
+                [ariaLabel]="'Send message'">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3"
+                    stroke="currentColor" class="size-5" aria-hidden="true">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18" />
+                </svg>
+            </wally-button>
+        </div>
+    </div>
+</div>

package/playground/showcase/src/app/components/ai/ai-composer/ai-composer.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AiComposer } from './ai-composer';
+
+describe('AiComposer', () => {
+  let component: AiComposer;
+  let fixture: ComponentFixture<AiComposer>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AiComposer]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AiComposer);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/playground/showcase/src/app/components/ai/ai-composer/ai-composer.ts

@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+import { AiPromptInput } from '../ai-prompt-input/ai-prompt-input';
+import { Button } from '../../button/button';
+import { Tooltip } from '../../tooltip/tooltip';
+
+@Component({
+  selector: 'wally-ai-composer',
+  imports: [
+    AiPromptInput,
+    Tooltip,
+    Button
+  ],
+  templateUrl: './ai-composer.html',
+  styleUrl: './ai-composer.css'
+})
+export class AiComposer {
+
+}

package/playground/showcase/src/app/components/ai/ai-prompt-input/ai-prompt-input.html

@@ -0,0 +1,10 @@
+<textarea #textarea id="ai-prompt-input" class="w-full h-auto max-h-60 text-sm placeholder:text-neutral-400 dark:text-white dark:placeholder:text-neutral-500 resize-none focus:outline-none focus:ring-0 overflow-y-auto [&::-webkit-scrollbar]:w-2
+      [&::-webkit-scrollbar-track]:bg-transparent
+      [&::-webkit-scrollbar-thumb]:bg-neutral-300
+      [&::-webkit-scrollbar-thumb]:rounded-full
+      dark:[&::-webkit-scrollbar-thumb]:bg-neutral-700" name="ai-prompt" rows="1" placeholder="Ask something"
+    aria-label="AI prompt input" aria-describedby="ai-prompt-description" autocomplete="off" autocorrect="off"
+    aria-multiline="true" autocapitalize="sentences" spellcheck="true" (input)="onInput()"></textarea>
+<span id="ai-prompt-description" class="sr-only">
+    Enter your message or prompt for the AI assistant. Press Enter to send, Shift+Enter for new line.
+</span>

package/playground/showcase/src/app/components/ai/ai-prompt-input/ai-prompt-input.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AiPromptInput } from './ai-prompt-input';
+
+describe('AiPromptInput', () => {
+  let component: AiPromptInput;
+  let fixture: ComponentFixture<AiPromptInput>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AiPromptInput]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AiPromptInput);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/playground/showcase/src/app/components/ai/ai-prompt-input/ai-prompt-input.ts

@@ -0,0 +1,25 @@
+import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'wally-ai-prompt-input',
+  imports: [],
+  templateUrl: './ai-prompt-input.html',
+  styleUrl: './ai-prompt-input.css'
+})
+export class AiPromptInput implements AfterViewInit {
+  @ViewChild('textarea') textarea!: ElementRef<HTMLTextAreaElement>;
+
+  ngAfterViewInit(): void {
+    this.adjustHeight();
+  }
+
+  public onInput(): void {
+    this.adjustHeight();
+  }
+
+  private adjustHeight(): void {
+    const element = this.textarea.nativeElement;
+    element.style.height = 'auto';
+    element.style.height = `${element.scrollHeight}px`;
+  }
+}

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

@@ -1,7 +1,11 @@
 <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 text-white disabled:pointer-events-none p-2.5 rounded-md transition-all duration-300 ease-in-out antialiased cursor-pointer ' + variantClasses()">
+    [class]="'group relative w-full flex items-center justify-center gap-2 text-sm font-medium text-white disabled:pointer-events-none p-2.5 transition-all duration-300 ease-in-out antialiased cursor-pointer ' + variantClasses()"
+    [ngClass]="{
+      'rounded-md': !rounded(),
+      'rounded-full': rounded()
+    }">
 
     @if (showNotification()) {
     <span class="absolute top-0 right-0 -mt-1 -mr-1 flex size-3">

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

@@ -21,6 +21,7 @@ export class Button {
   showNotification: InputSignal<boolean> = input<boolean>(false);
   variant: InputSignal<ButtonVariant> = input<ButtonVariant>('primary');
   href: InputSignal<string> = input<string>('');
+  rounded: InputSignal<boolean> = input<boolean>(false);
 
   // Accessibility properties
   ariaLabel: InputSignal<string> = input<string>('');

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

@@ -1,13 +1,12 @@
 import { Component, signal, ViewChild, ElementRef, AfterViewInit, Renderer2, OnDestroy, HostListener, WritableSignal, input, InputSignal } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { it } from 'node:test';
 
 @Component({
   selector: 'wally-carousel',
   imports: [CommonModule],
   templateUrl: './carousel.html',
 })
-export class Carousel implements AfterViewInit {
+export class Carousel implements AfterViewInit, OnDestroy {
   @ViewChild('carouselContainer', { static: false }) carouselContainer!: ElementRef;
 
   isNavigationIndicator: InputSignal<boolean> = input<boolean>(false);

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

@@ -0,0 +1,9 @@
+<div class="relative inline-block tooltip-wrapper " (mouseenter)="show()" (mouseleave)="hide()" (focus)="show()" (blur)="hide()">
+    <ng-content></ng-content>
+
+    @if (visible() && !disabled()) {
+        <div #tooltipElement [id]="tooltipId" [class]="tooltipClasses()" role="tooltip" [attr.aria-hidden]="!visible()">
+            {{ text() }}
+        </div>
+    }
+</div>

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

@@ -0,0 +1,189 @@
+import { Component, computed, effect, ElementRef, input, InputSignal, OnDestroy, signal, ViewChild, WritableSignal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+type TooltipPosition = 'top' | 'bottom' | 'left' | 'right' | 'auto';
+
+@Component({
+  selector: 'wally-tooltip',
+  imports: [CommonModule],
+  templateUrl: './tooltip.html',
+  styleUrl: './tooltip.css'
+})
+export class Tooltip implements OnDestroy {
+  @ViewChild('tooltipElement', { read: ElementRef }) tooltipElement?: ElementRef<HTMLDivElement>;
+
+  text: InputSignal<string> = input.required<string>();
+  position: InputSignal<TooltipPosition> = input<TooltipPosition>('auto');
+  delay: InputSignal<number> = input<number>(200);
+  disabled: InputSignal<boolean> = input<boolean>(false);
+  offset: InputSignal<number> = input<number>(2);
+
+  visible: WritableSignal<boolean> = signal<boolean>(false);
+  actualPosition = signal<Exclude<TooltipPosition, 'auto'>>('top');
+  tooltipId = `tooltip-${Math.random().toString(36).substr(2, 9)}`;
+
+  private showTimeout?: number;
+  private hideTimeout?: number;
+
+  tooltipClasses = computed(() => {
+    const base = 'absolute z-50 py-1.5 px-3 text-sm text-white bg-[#121212] shadow-lg whitespace-nowrap pointer-events-none rounded-xl';
+    const darkMode = 'dark:bg-white dark:text-[#121212]';
+
+    const positions = {
+      top: `bottom-full left-1/2 -translate-x-1/2 mb-${this.offset()}`,
+      bottom: `top-full left-1/2 -translate-x-1/2 mt-${this.offset()}`,
+      left: `right-full top-1/2 -translate-y-1/2 mr-${this.offset()}`,
+      right: `left-full top-1/2 -translate-y-1/2 ml-${this.offset()}`
+    };
+
+    // Animação super suave - apenas fade rápido
+    const animation = this.visible()
+      ? 'transition-opacity duration-150 opacity-100'
+      : 'transition-opacity duration-100 opacity-0';
+
+    return `${base} ${darkMode} ${positions[this.actualPosition()]} ${animation}`;
+  });
+
+  constructor(
+    private elementRef: ElementRef
+  ) {
+    effect(() => {
+      if (this.visible() && this.position() === 'auto') {
+        setTimeout(() => this.calculateBestPosition(), 10);
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    if (this.showTimeout) {
+      window.clearTimeout(this.showTimeout);
+    }
+    if (this.hideTimeout) {
+      window.clearTimeout(this.hideTimeout);
+    }
+  }
+
+  show(): void {
+    if (this.disabled()) {
+      return;
+    }
+
+    if (this.hideTimeout) {
+      window.clearTimeout(this.hideTimeout);
+      this.hideTimeout = undefined;
+    }
+
+    this.showTimeout = window.setTimeout(() => {
+      this.visible.set(true);
+
+      if (this.position() !== 'auto') {
+        this.actualPosition.set(this.position() as Exclude<TooltipPosition, 'auto'>);
+      }
+    }, this.delay());
+  }
+
+  hide(): void {
+    if (this.showTimeout) {
+      window.clearTimeout(this.showTimeout);
+      this.showTimeout = undefined;
+    }
+
+    this.hideTimeout = window.setTimeout(() => {
+      this.visible.set(false);
+    }, 100);
+  }
+
+  private calculateBestPosition() {
+    const hostElement =
+      this.elementRef.nativeElement.querySelector('.tooltip-wrapper');
+    if (!hostElement) return;
+
+    const rect = hostElement.getBoundingClientRect();
+    const tooltipEl = this.tooltipElement?.nativeElement;
+    if (!tooltipEl) return;
+
+    const tooltipRect = tooltipEl.getBoundingClientRect();
+    const offset = this.offset();
+
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    const spaceAbove = rect.top;
+    const spaceBelow = viewportHeight - rect.bottom;
+    const spaceLeft = rect.left;
+    const spaceRight = viewportWidth - rect.right;
+
+    const tooltipWidth = tooltipRect.width || 150;
+    const tooltipHeight = tooltipRect.height || 40;
+
+    const positions: {
+      position: Exclude<TooltipPosition, 'auto'>; space: number; isValid: boolean}[] = [
+        {
+          position: 'top',
+          space: spaceAbove,
+          isValid: spaceAbove >= tooltipHeight + offset
+        },
+        {
+          position: 'bottom',
+          space: spaceBelow,
+          isValid: spaceBelow >= tooltipHeight + offset
+        },
+        {
+          position: 'left',
+          space: spaceLeft,
+          isValid: spaceLeft >= tooltipWidth + offset
+        },
+        {
+          position: 'right',
+          space: spaceRight,
+          isValid: spaceRight >= tooltipWidth + offset
+        }
+      ];
+
+    const priorityOrder: Exclude<TooltipPosition, 'auto'>[] = ['top', 'bottom', 'right', 'left'];
+
+    let bestPosition: Exclude<TooltipPosition, 'auto'> = 'top';
+
+    for (const preferred of priorityOrder) {
+      const pos = positions.find(p => p.position === preferred);
+      if (pos?.isValid) {
+        bestPosition = preferred;
+        break;
+      }
+    }
+
+    if (!positions.find(p => p.position ===
+      bestPosition)?.isValid) {
+      const maxSpace = positions.reduce((max, pos) => pos.space >
+        max.space ? pos : max, positions[0]);
+      bestPosition = maxSpace.position;
+    }
+
+    this.actualPosition.set(bestPosition);
+
+    setTimeout(() => {
+      const updatedTooltipRect = tooltipEl.getBoundingClientRect();
+      const padding = 8;
+
+      if (bestPosition === 'top' || bestPosition === 'bottom') {
+        if (updatedTooltipRect.left < padding) {
+          const shift = padding - updatedTooltipRect.left;
+          tooltipEl.style.transform = `translateX(${shift}px)`;
+        } else if (updatedTooltipRect.right > viewportWidth - padding) {
+          const shift = (viewportWidth - padding) - updatedTooltipRect.right;
+          tooltipEl.style.transform = `translateX(${shift}px)`;
+        }
+      }
+
+      if (bestPosition === 'left' || bestPosition === 'right') {
+        if (updatedTooltipRect.top < padding) {
+          const shift = padding - updatedTooltipRect.top;
+          tooltipEl.style.transform = `translateY(${shift}px)`;
+        } else if (updatedTooltipRect.bottom > viewportHeight - padding) {
+          const shift = (viewportHeight - padding) - updatedTooltipRect.bottom;
+          tooltipEl.style.transform = `translateY(${shift}px)`;
+        }
+      }
+    }, 0);
+  }
+}