wally-ui 1.0.17 → 1.2.0

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

@@ -1,16 +1,133 @@
-<div class="h-dvh antialiased font-mono">
-  <div class="w-full h-full flex flex-col items-center justify-center p-4">
-    <div class="max-w-md w-full">
-      <h1 class="text-2xl font-bold text-[#0a0a0a] dark:text-white mb-4">
-        Components
-      </h1>
-      <p class="text-gray-700 dark:text-gray-400 mb-8">
-        Explore our collection of reusable Angular components.
+<div class="max-w-4xl mx-auto p-6 font-mono">
+  <div class="mb-4">
+    <wally-breadcrumb [items]="breadcrumbItems"></wally-breadcrumb>
+  </div>
+
+  <h1 class="text-2xl font-bold text-[#0a0a0a] dark:text-white mb-4">
+    Components
+  </h1>
+  <p class="text-gray-700 dark:text-gray-400 mb-6">
+    Explore our collection of reusable Angular components.
+  </p>
+
+  <!-- Requirements -->
+  <div id="requirements" class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-6">
+    <h3 class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-3">Requirements</h3>
+
+    <div class="space-y-3">
+      <div>
+        <p class="text-sm font-medium text-[#0a0a0a] dark:text-white mb-1">Angular Version</p>
+        <p class="text-sm text-gray-700 dark:text-gray-400">
+          Angular 17+ required for standalone component support
+        </p>
+      </div>
+
+      <div>
+        <p class="text-sm font-medium text-[#0a0a0a] dark:text-white mb-1">Tailwind CSS</p>
+        <p class="text-sm text-gray-700 dark:text-gray-400 mb-2">
+          Tailwind CSS v3 or v4 must be installed in your project.
+        </p>
+        <a href="https://tailwindcss.com/blog/tailwindcss-v4" target="_blank"
+          class="text-xs text-blue-500 underline hover:text-blue-700">
+          Learn about Tailwind v4
+        </a>
+      </div>
+
+      <div>
+        <p class="text-sm font-medium text-[#0a0a0a] dark:text-white mb-1">Installation</p>
+        <p class="text-sm text-gray-700 dark:text-gray-400 mb-2">
+          Components are standalone and can be installed individually:
+        </p>
+        <code class="text-sm text-[#0a0a0a] dark:text-white block">
+          npx wally-ui add {{ '<' }}component{{ '>' }}
+        </code>
+      </div>
+    </div>
+  </div>
+
+  <!-- Important Notice -->
+  <div id="important-notice"
+    class="bg-yellow-100 dark:bg-yellow-900/20 border border-yellow-300 dark:border-yellow-700 p-4 rounded-lg mb-6">
+    <h3 class="text-sm font-semibold text-yellow-800 dark:text-yellow-200 mb-2">⚠️ Experimental Project</h3>
+    <p class="text-sm text-yellow-700 dark:text-yellow-300">
+      Wally UI is currently in experimental development. Components may change and new features are being actively
+      developed. Use in production with caution.
+    </p>
+  </div>
+
+  <!-- List Components -->
+  <div id="list-components" class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-6">
+    <h3 class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-2">List Available Components</h3>
+    <code class="text-sm text-[#0a0a0a] dark:text-white">
+          npx wally-ui list
+        </code>
+  </div>
+
+  <!-- File Structure -->
+  <div id="installation-structure" class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-8">
+    <h3 class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-3">Installation Structure</h3>
+    <p class="text-sm text-gray-700 dark:text-gray-400 mb-3">
+      When installing a component, Wally UI will create the following folder structure:
+    </p>
+    <div class="font-mono text-sm text-[#0a0a0a] dark:text-white">
+      <div>src/</div>
+      <div>└── app/</div>
+      <div>&nbsp;&nbsp;&nbsp;&nbsp;└── components/</div>
+      <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└── wally-ui/</div>
+      <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└── button/</div>
+      <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├── button.ts
+      </div>
+      <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└──
+        button.html</div>
+    </div>
+  </div>
+
+  <!-- Available Components -->
+  <div id="available-components" class="space-y-4">
+    <h3 class="text-lg font-semibold text-[#0a0a0a] dark:text-white mb-4">Available Components</h3>
+
+    <div class="bg-gray-200 dark:bg-[#121212] rounded-lg p-4 mb-4">
+      <p class="text-sm text-gray-700 dark:text-gray-400">
+        More components are being built and will be added soon. Stay tuned for updates!
       </p>
+    </div>
 
-      <a href="/components/button" class="text-blue-500 underline hover:text-blue-700">
+    <div class="bg-gray-200 dark:bg-[#121212] rounded-lg p-4">
+      <div class="flex items-center gap-2 mb-2">
+        <h4 class="text-md font-semibold text-[#0a0a0a] dark:text-white">Button</h4>
+        <span class="text-xs bg-yellow-500 text-black px-2 py-1 rounded">Under Construction</span>
+      </div>
+      <p class="text-sm text-gray-700 dark:text-gray-400 mb-3">
+        A versatile button component with loading states, notifications, and customizable text. Currently being refined
+        and improved.
+      </p>
+      <a href="/components/button" class="text-blue-500 underline hover:text-blue-700 text-sm">
         View Documentation
       </a>
     </div>
+
+    <div class="bg-gray-200 dark:bg-[#121212] rounded-lg p-4">
+      <div class="flex items-center gap-2 mb-2">
+        <h4 class="text-md font-semibold text-[#0a0a0a] dark:text-white">Breadcrumb</h4>
+        <span class="text-xs bg-yellow-500 text-black px-2 py-1 rounded">Under Construction</span>
+      </div>
+      <p class="text-sm text-gray-700 dark:text-gray-400 mb-3">
+        A navigation component that shows the current page location within a hierarchy.
+      </p>
+      <a href="/components/breadcrumb" class="text-blue-500 underline hover:text-blue-700 text-sm">
+        View Documentation
+      </a>
+    </div>
+
+    <div class="bg-gray-200 dark:bg-[#121212] rounded-lg p-4 opacity-60">
+      <div class="flex items-center gap-2 mb-2">
+        <h4 class="text-md font-semibold text-[#0a0a0a] dark:text-white">Input Text</h4>
+        <span class="text-xs bg-blue-500 text-white px-2 py-1 rounded">Coming Soon</span>
+      </div>
+      <p class="text-sm text-gray-700 dark:text-gray-400">
+        A flexible input component with validation, placeholder support, and various styling options. Next in
+        development.
+      </p>
+    </div>
   </div>
 </div>

package/playground/showcase/src/app/pages/components/components.routes.ts

@@ -7,6 +7,10 @@ export const componentsRoutes: Routes = [
     },
     {
         path: 'button',
-        loadComponent: () => import('./button/button').then(m => m.ButtonDocs)
+        loadComponent: () => import('./button-docs/button-docs').then(m => m.ButtonDocs)
+    },
+    {
+        path: 'breadcrumb',
+        loadComponent: () => import('./breadcrumb-docs/breadcrumb-docs').then(m => m.BreadcrumbDocs)
     }
 ];

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

@@ -1,11 +1,15 @@
 import { Component } from '@angular/core';
+import { Breadcrumb, BreadcrumbItem } from '../../components/breadcrumb/breadcrumb';
 
 @Component({
   selector: 'wally-components',
-  imports: [],
+  imports: [Breadcrumb],
   templateUrl: './components.html',
   styleUrl: './components.css'
 })
 export class Components {
-
+  breadcrumbItems: BreadcrumbItem[] = [
+    { label: 'Home', url: '/' },
+    { label: 'Components' }
+  ];
 }

package/playground/showcase/src/app/pages/home/home.html

@@ -9,8 +9,8 @@
             </h2>
             <p class="mt-4 text-gray-700 dark:text-gray-400">
                 Stop searching for the perfect Angular components. Wally UI brings you a
-                collection of ready-to-use, beautifully crafted components that integrate
-                seamlessly with your projects.
+                collection of ready-to-use, beautifully crafted Angular components built with
+                standalone architecture and Tailwind CSS that integrate seamlessly with your projects.
             </p>
         </div>
   
@@ -22,10 +22,22 @@
             </code>
         </div>
 
-        <div class="mt-4 w-full max-w-md">
-            <a href="/components/button" class="text-blue-500 underline">
+        <div class="mt-4 w-full max-w-md flex flex-col gap-2">
+            <a href="/components" class="text-blue-500 underline">
                 Documentation
             </a>
+            <a href="/mcp" class="text-blue-500 underline">
+                MCP Server
+            </a>
+
+            <div class="flex gap-4 mt-2">
+                <a href="https://github.com/WalissonCF/wally-ui" target="_blank" class="text-blue-500 underline text-sm">
+                    GitHub
+                </a>
+                <a href="https://www.npmjs.com/package/wally-ui" target="_blank" class="text-blue-500 underline text-sm">
+                    NPM
+                </a>
+            </div>
         </div>
     </div>
 </div>

package/playground/showcase/src/app/pages/mcp/mcp.css

@@ -0,0 +1 @@
+/* MCP page styles - following project patterns */

package/playground/showcase/src/app/pages/mcp/mcp.html

@@ -0,0 +1,196 @@
+<div class="max-w-4xl mx-auto p-6 font-mono">
+  <div class="mb-4">
+    <wally-breadcrumb [items]="breadcrumbItems"></wally-breadcrumb>
+  </div>
+
+  <!-- Header -->
+  <div class="mb-8">
+    <h1 class="text-4xl font-bold text-[#0a0a0a] dark:text-white mb-2">
+      Wally UI MCP Server
+    </h1>
+    <p class="text-lg text-gray-700 dark:text-gray-400">
+      Model Context Protocol server for intelligent AI-powered component installation with Claude Desktop.
+    </p>
+  </div>
+
+  <!-- Installation Section -->
+  <section class="mb-8">
+    <h2 class="text-2xl font-bold text-[#0a0a0a] dark:text-white mb-4">
+      Installation
+    </h2>
+
+    <div class="bg-gray-200 dark:bg-[#121212] rounded-lg p-4 mb-4">
+      <code class="text-[#0a0a0a] dark:text-white">
+          <pre class="m-0">npm install -g wally-ui-mcp</pre>
+        </code>
+    </div>
+  </section>
+
+  <!-- Configuration Section -->
+  <section class="mb-8">
+    <h2 class="text-2xl font-bold text-[#0a0a0a] dark:text-white mb-4">
+      Configuration
+    </h2>
+
+    <p class="text-gray-700 dark:text-gray-400 mb-4">
+      Add to your Claude Desktop configuration file:
+    </p>
+
+    <div class="mb-4">
+      <p class="text-sm text-gray-700 dark:text-gray-400 mb-2">
+        <strong>Mac:</strong> <code
+          class="bg-gray-200 dark:bg-[#121212] px-2 py-1 rounded text-[#0a0a0a] dark:text-white">~/Library/Application Support/Claude/claude_desktop_config.json</code>
+      </p>
+      <p class="text-sm text-gray-700 dark:text-gray-400 mb-4">
+        <strong>Windows:</strong> <code
+          class="bg-gray-200 dark:bg-[#121212] px-2 py-1 rounded text-[#0a0a0a] dark:text-white">%APPDATA%\Claude\claude_desktop_config.json</code>
+      </p>
+    </div>
+
+    <div class="bg-gray-200 dark:bg-[#121212] rounded-lg p-4 mb-4">
+      <code class="text-sm text-[#0a0a0a] dark:text-white">
+          {{ '{' }}<br>
+          &nbsp;&nbsp;"mcpServers": {{ '{' }}<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;"wally-ui": {{ '{' }}<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"command": "npx",<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"args": ["wally-ui-mcp"],<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"env": {{ '{' }}{{ '}' }}<br>
+          &nbsp;&nbsp;&nbsp;&nbsp;{{ '}' }}<br>
+          &nbsp;&nbsp;{{ '}' }}<br>
+          {{ '}' }}
+        </code>
+    </div>
+  </section>
+
+  <!-- Features Section -->
+  <section class="mb-8">
+    <h2 class="text-2xl font-bold text-[#0a0a0a] dark:text-white mb-4">
+      Available Tools
+    </h2>
+
+    <div class="grid gap-4 md:grid-cols-2">
+      <div class="bg-gray-200 dark:bg-[#121212] rounded-lg p-4">
+        <h3 class="text-lg font-semibold text-[#0a0a0a] dark:text-white mb-2">
+          install-component
+        </h3>
+        <p class="text-gray-700 dark:text-gray-400 text-sm mb-2">
+          Installs Wally UI components directly into your Angular project.
+        </p>
+        <code class="text-xs bg-gray-200 dark:bg-[#121212] px-2 py-1 rounded text-[#0a0a0a] dark:text-white">
+            componentName: string
+          </code>
+      </div>
+
+      <div class="bg-gray-200 dark:bg-[#121212] rounded-lg p-4">
+        <h3 class="text-lg font-semibold text-[#0a0a0a] dark:text-white mb-2">
+          list-components
+        </h3>
+        <p class="text-gray-700 dark:text-gray-400 text-sm mb-2">
+          Lists all available components in the Wally UI library.
+        </p>
+        <code class="text-xs bg-gray-200 dark:bg-[#121212] px-2 py-1 rounded text-[#0a0a0a] dark:text-white">
+            No parameters
+          </code>
+      </div>
+
+      <div class="bg-gray-200 dark:bg-[#121212] rounded-lg p-4">
+        <h3 class="text-lg font-semibold text-[#0a0a0a] dark:text-white mb-2">
+          validate-component
+        </h3>
+        <p class="text-gray-700 dark:text-gray-400 text-sm mb-2">
+          Validates component structure and integrity.
+        </p>
+        <code class="text-xs bg-gray-200 dark:bg-[#121212] px-2 py-1 rounded text-[#0a0a0a] dark:text-white">
+            componentName: string
+          </code>
+      </div>
+
+      <div class="bg-gray-200 dark:bg-[#121212] rounded-lg p-4">
+        <h3 class="text-lg font-semibold text-[#0a0a0a] dark:text-white mb-2">
+          generate-docs
+        </h3>
+        <p class="text-gray-700 dark:text-gray-400 text-sm mb-2">
+          Generates documentation for components.
+        </p>
+        <code class="text-xs bg-gray-200 dark:bg-[#121212] px-2 py-1 rounded text-[#0a0a0a] dark:text-white">
+            componentName: string
+          </code>
+      </div>
+    </div>
+  </section>
+
+  <!-- Usage Examples -->
+  <section class="mb-8">
+    <h2 class="text-2xl font-bold text-[#0a0a0a] dark:text-white mb-4">
+      Usage Examples
+    </h2>
+
+    <div class="space-y-4">
+      <div>
+        <h3 class="text-lg font-semibold text-[#0a0a0a] dark:text-white mb-2">
+          List Available Components
+        </h3>
+        <p class="text-gray-700 dark:text-gray-400 mb-2">
+          Ask Claude to show you what components are available:
+        </p>
+        <div class="bg-gray-200 dark:bg-[#121212] rounded-lg p-4">
+          <code class="text-[#0a0a0a] dark:text-white">
+              <pre class="m-0">"Show me the available Wally UI components"</pre>
+            </code>
+        </div>
+      </div>
+
+      <div>
+        <h3 class="text-lg font-semibold text-[#0a0a0a] dark:text-white mb-2">
+          Install a Component
+        </h3>
+        <p class="text-gray-700 dark:text-gray-400 mb-2">
+          Ask Claude to install a specific component in your project:
+        </p>
+        <div class="bg-gray-200 dark:bg-[#121212] rounded-lg p-4">
+          <code class="text-[#0a0a0a] dark:text-white">
+              <pre class="m-0">"Install the button component from Wally UI in my Angular project"</pre>
+            </code>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Requirements -->
+  <section class="mb-8">
+    <h2 class="text-2xl font-bold text-[#0a0a0a] dark:text-white mb-4">
+      Requirements
+    </h2>
+
+    <ul class="list-disc list-inside text-gray-700 dark:text-gray-400 space-y-2">
+      <li>Node.js 18+</li>
+      <li>Claude Desktop with MCP support</li>
+      <li>Angular project (for component installation)</li>
+      <li>Tailwind CSS configured in your project</li>
+    </ul>
+  </section>
+
+  <!-- Links -->
+  <section class="mb-8">
+    <h2 class="text-2xl font-bold text-[#0a0a0a] dark:text-white mb-4">
+      Links
+    </h2>
+
+    <div class="flex flex-wrap gap-4">
+      <a href="https://www.npmjs.com/package/wally-ui-mcp" target="_blank"
+        class="text-blue-500 underline hover:text-blue-700">
+        NPM Package
+      </a>
+      <a href="https://github.com/WalissonCF/wally-ui" target="_blank"
+        class="text-blue-500 underline hover:text-blue-700">
+        GitHub Repository
+      </a>
+      <a href="https://modelcontextprotocol.io/" target="_blank" class="text-blue-500 underline hover:text-blue-700">
+        Model Context Protocol
+      </a>
+      <a href="/components" class="text-blue-500 underline hover:text-blue-700">
+        Browse Components
+      </a>
+    </div>
+  </section>
+</div>

package/playground/showcase/src/app/pages/mcp/mcp.spec.ts

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

package/playground/showcase/src/app/pages/mcp/mcp.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+import { Breadcrumb, BreadcrumbItem } from '../../components/breadcrumb/breadcrumb';
+
+@Component({
+  selector: 'wally-mcp',
+  imports: [Breadcrumb],
+  templateUrl: './mcp.html',
+  styleUrl: './mcp.css'
+})
+export class MCP {
+  breadcrumbItems: BreadcrumbItem[] = [
+    { label: 'Home', url: '/' },
+    { label: 'MCP Server' }
+  ];
+}

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

@@ -1,192 +0,0 @@
-<div class="font-mono">
-  <div class="max-w-4xl mx-auto p-6">
-    <h1 class="text-4xl font-bold mb-4 text-[#0a0a0a] dark:text-white">
-      Button
-    </h1>
-    <p class="text-lg mb-12 text-gray-700 dark:text-gray-400">
-      A versatile button component with loading states, notifications, and customizable text.
-    </p>
-
-    <!-- Basic Usage -->
-    <section class="mb-12">
-      <h2 class="text-2xl font-semibold mb-6 text-[#0a0a0a] dark:text-white">
-        Basic Usage
-      </h2>
-
-      <div class="space-y-8">
-        <div>
-          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
-            <code class="text-sm text-[#0a0a0a] dark:text-white">
-              {{ '<' }}wally-button{{ '>' }}{{ '<' }}/wally-button{{ '>' }}
-            </code>
-          </div>
-          <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
-            <wally-button></wally-button>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Custom Text -->
-    <section class="mb-12">
-      <h2 class="text-2xl font-semibold mb-6 text-[#0a0a0a] dark:text-white">
-        Custom Text
-      </h2>
-
-      <div class="space-y-8">
-        <div>
-          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
-            <code class="text-sm text-[#0a0a0a] dark:text-white">
-              {{ '<' }}wally-button text="Save Changes"{{ '>' }}{{ '<' }}/wally-button{{ '>' }}
-            </code>
-          </div>
-          <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
-            <wally-button text="Save Changes"></wally-button>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- States -->
-    <section class="mb-12">
-      <h2 class="text-2xl font-semibold mb-6 text-[#0a0a0a] dark:text-white">
-        States
-      </h2>
-
-      <div class="space-y-8">
-        <!-- Disabled -->
-        <div>
-          <h3 class="text-lg font-medium mb-3 text-[#0a0a0a] dark:text-white">
-            Disabled
-          </h3>
-          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
-            <code class="text-sm text-[#0a0a0a] dark:text-white">
-              {{ '<' }}wally-button text="Disabled" [disabled]="true"{{ '>' }}{{ '<' }}/wally-button{{ '>' }}
-            </code>
-          </div>
-          <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
-            <wally-button text="Disabled" [disabled]="true"></wally-button>
-          </div>
-        </div>
-
-        <!-- Loading -->
-        <div>
-          <h3 class="text-lg font-medium mb-3 text-[#0a0a0a] dark:text-white">
-            Loading
-          </h3>
-          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
-            <code class="text-sm text-[#0a0a0a] dark:text-white">
-              {{ '<' }}wally-button text="Loading" [loading]="true"{{ '>' }}{{ '<' }}/wally-button{{ '>' }}
-            </code>
-          </div>
-          <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
-            <wally-button text="Loading" [loading]="true"></wally-button>
-          </div>
-        </div>
-
-        <!-- With Notification -->
-        <div>
-          <h3 class="text-lg font-medium mb-3 text-[#0a0a0a] dark:text-white">
-            With Notification Badge
-          </h3>
-          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
-            <code class="text-sm text-[#0a0a0a] dark:text-white">
-              {{ '<' }}wally-button text="Messages" [showNotification]="true"{{ '>' }}{{ '<' }}/wally-button{{ '>' }}
-            </code>
-          </div>
-          <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
-            <wally-button text="Messages" [showNotification]="true"></wally-button>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Button Types -->
-    <section class="mb-12">
-      <h2 class="text-2xl font-semibold mb-6 text-[#0a0a0a] dark:text-white">
-        Button Types
-      </h2>
-
-      <div class="space-y-8">
-        <div>
-          <h3 class="text-lg font-medium mb-3 text-[#0a0a0a] dark:text-white">Submit Button</h3>
-          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
-            <code class="text-sm text-[#0a0a0a] dark:text-white">
-              {{ '<' }}wally-button text="Submit Form" type="submit"{{ '>' }}{{ '<' }}/wally-button{{ '>' }}
-            </code>
-          </div>
-          <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
-            <wally-button text="Submit Form" type="submit"></wally-button>
-          </div>
-        </div>
-      </div>
-    </section>
-
-    <!-- Properties -->
-    <section class="mb-12">
-      <h2 class="text-2xl font-semibold mb-6 text-[#0a0a0a] dark:text-white">Properties</h2>
-
-      <div class="space-y-4">
-        <div class="p-4 bg-gray-200 dark:bg-[#121212] rounded-lg">
-          <div class="font-mono text-sm mb-2">
-            <span class="text-blue-600 dark:text-blue-400">text</span><span class="text-[#0a0a0a] dark:text-white">: </span>
-            <span class="text-purple-600 dark:text-purple-400">string</span> <span class="text-[#0a0a0a] dark:text-white"> = </span>
-            <span class="text-green-600 dark:text-green-400">'Wally Button'</span>
-            <span class="text-[#0a0a0a] dark:text-white">;</span>
-          </div>
-          <p class="text-sm text-gray-700 dark:text-gray-400">The text displayed on the button</p>
-        </div>
-
-        <div class="p-4 bg-gray-200 dark:bg-[#121212] rounded-lg">
-          <div class="font-mono text-sm mb-2">
-            <span class="text-blue-600 dark:text-blue-400">type</span><span class="text-[#0a0a0a] dark:text-white">: </span>
-            <span class="text-purple-600 dark:text-purple-400">string</span> <span class="text-[#0a0a0a] dark:text-white"> = </span>
-            <span class="text-green-600 dark:text-green-400">'button'</span>
-            <span class="text-[#0a0a0a] dark:text-white">;</span>
-          </div>
-          <p class="text-sm text-gray-700 dark:text-gray-400">HTML button type (button, submit, reset)</p>
-        </div>
-
-        <div class="p-4 bg-gray-200 dark:bg-[#121212] rounded-lg">
-          <div class="font-mono text-sm mb-2">
-            <span class="text-blue-600 dark:text-blue-400">disabled</span><span class="text-[#0a0a0a] dark:text-white">: </span>
-            <span class="text-purple-600 dark:text-purple-400">boolean</span> <span class="text-[#0a0a0a] dark:text-white"> = </span>
-            <span class="text-green-600 dark:text-green-400">false</span>
-            <span class="text-[#0a0a0a] dark:text-white">;</span>
-          </div>
-          <p class="text-sm text-gray-700 dark:text-gray-400">Whether the button is disabled</p>
-        </div>
-
-        <div class="p-4 bg-gray-200 dark:bg-[#121212] rounded-lg">
-          <div class="font-mono text-sm mb-2">
-            <span class="text-blue-600 dark:text-blue-400">loading</span><span class="text-[#0a0a0a] dark:text-white">: </span>
-            <span class="text-purple-600 dark:text-purple-400">boolean</span> <span class="text-[#0a0a0a] dark:text-white"> = </span>
-            <span class="text-green-600 dark:text-green-400">false</span>
-            <span class="text-[#0a0a0a] dark:text-white">;</span>
-          </div>
-          <p class="text-sm text-gray-700 dark:text-gray-400">Shows loading spinner when true</p>
-        </div>
-
-        <div class="p-4 bg-gray-200 dark:bg-[#121212] rounded-lg">
-          <div class="font-mono text-sm mb-2">
-            <span class="text-blue-600 dark:text-blue-400">showNotification</span><span class="text-[#0a0a0a] dark:text-white">: </span>
-            <span class="text-purple-600 dark:text-purple-400">boolean</span> <span class="text-[#0a0a0a] dark:text-white"> = </span>
-            <span class="text-green-600 dark:text-green-400">false</span>
-            <span class="text-[#0a0a0a] dark:text-white">;</span>
-          </div>
-          <p class="text-sm text-gray-700 dark:text-gray-400">Shows notification badge when true</p>
-        </div>
-      </div>
-    </section>
-
-    <!-- Import -->
-    <section class="mb-12">
-      <h2 class="text-2xl font-semibold mb-6 text-[#0a0a0a] dark:text-white">Import</h2>
-      <div class="p-4 rounded-lg bg-gray-200 dark:bg-[#121212]">
-        <code class="text-sm text-[#0a0a0a] dark:text-white">
-          import {{ '{' }} Button {{ '}' }} from './components/button/button';
-        </code>
-      </div>
-    </section>
-  </div>
-</div>

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

@@ -1,12 +0,0 @@
-import { Component } from '@angular/core';
-import { Button as WallyButton } from '../../../components/button/button';
-
-@Component({
-  selector: 'app-button-docs',
-  imports: [WallyButton],
-  templateUrl: './button.html',
-  styleUrl: './button.css'
-})
-export class ButtonDocs {
-
-}