wally-ui 1.2.1 → 1.4.0

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

@@ -0,0 +1,55 @@
+// Button documentation code examples
+export const ButtonCodeExamples = {
+  // Installation
+  installation: `npx wally-ui add button`,
+
+  // Import examples
+  import: `import { Button } from './components/wally-ui/button/button';`,
+  componentImport: `@Component({
+  selector: 'app-example',
+  imports: [Button],
+  templateUrl: './example.html',
+  styleUrl: './example.css'
+})`,
+
+  // Basic usage
+  basicUsage: `<wally-button>Wally Button</wally-button>`,
+
+  // States
+  disabled: `<wally-button [disabled]="true">Disabled</wally-button>`,
+  loading: `<wally-button [loading]="true">Loading</wally-button>`,
+  notification: `<wally-button [showNotification]="true">Messages</wally-button>`,
+
+  // Types
+  submit: `<wally-button type="submit">Submit Form</wally-button>`,
+
+  // Events
+  clickTemplate: `<wally-button (click)="handleClick()">Click Me</wally-button>`,
+  clickMethod: `handleClick(): void {
+  this.clickMessage.set('Button clicked!');
+}`,
+
+  // Icons
+  iconWithText: `<wally-button>
+  Save
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+       stroke-width="1.5" stroke="currentColor" class="size-5">
+    <path stroke-linecap="round" stroke-linejoin="round"
+          d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+  </svg>
+</wally-button>`,
+
+  iconOnly: `<wally-button>
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+       stroke-width="1.5" stroke="currentColor" class="size-5">
+    <path stroke-linecap="round" stroke-linejoin="round"
+          d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M3.124 7.5A8.969 8.969 0 0 1 5.292 3m13.416 0a8.969 8.969 0 0 1 2.168 4.5" />
+  </svg>
+</wally-button>`,
+
+  // Properties
+  propertyType: `type: string = 'button';`,
+  propertyDisabled: `disabled: boolean = false;`,
+  propertyLoading: `loading: boolean = false;`,
+  propertyShowNotification: `showNotification: boolean = false;`,
+};

package/playground/showcase/src/app/pages/{components → documentation/components}/button-docs/button-docs.html

@@ -48,9 +48,7 @@
     <section class="mb-8">
       <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Installation</h2>
       <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-        <code class="text-sm text-[#0a0a0a] dark:text-white">
-          npx wally-ui add button
-        </code>
+        <pre><code [innerHTML]="basicUsageCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
       </div>
     </section>
 
@@ -109,20 +107,11 @@
       <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Import</h2>
       <div class="space-y-4">
         <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-          <code class="text-sm text-[#0a0a0a] dark:text-white">
-            import {{ '{' }} Button {{ '}' }} from './components/wally-ui/button/button';
-          </code>
+          <pre><code [innerHTML]="importCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
         </div>
 
         <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-          <code class="text-sm text-[#0a0a0a] dark:text-white">
-            &#64;Component({{ '{' }}<br>
-            &nbsp;&nbsp;selector: 'app-example',<br>
-            &nbsp;&nbsp;imports: [Button],<br>
-            &nbsp;&nbsp;templateUrl: './example.html',<br>
-            &nbsp;&nbsp;styleUrl: './example.css'<br>
-            {{ '}' }})
-          </code>
+          <pre><code [innerHTML]="componentImportCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
         </div>
       </div>
     </section>
@@ -136,9 +125,7 @@
       <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{{ '<' }}/wally-button{{ '>' }}
-            </code>
+            <pre><code [innerHTML]="basicUsageTemplateCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
           </div>
           <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
             <wally-button>Wally Button</wally-button>
@@ -160,9 +147,7 @@
             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 [disabled]="true"{{ '>' }}Disabled{{ '<' }}/wally-button{{ '>' }}
-            </code>
+            <pre><code [innerHTML]="disabledCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
           </div>
           <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
             <wally-button [disabled]="true">Disabled</wally-button>
@@ -175,9 +160,7 @@
             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 [loading]="true"{{ '>' }}Loading{{ '<' }}/wally-button{{ '>' }}
-            </code>
+            <pre><code [innerHTML]="loadingCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
           </div>
           <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
             <wally-button [loading]="true">Loading</wally-button>
@@ -190,9 +173,7 @@
             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 [showNotification]="true"{{ '>' }}Messages{{ '<' }}/wally-button{{ '>' }}
-            </code>
+            <pre><code [innerHTML]="notificationCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
           </div>
           <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
             <wally-button [showNotification]="true">Messages</wally-button>
@@ -211,9 +192,7 @@
         <div>
           <h3 class="text-md 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 type="submit"{{ '>' }}Submit Form{{ '<' }}/wally-button{{ '>' }}
-            </code>
+            <pre><code [innerHTML]="submitCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
           </div>
           <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
             <wally-button type="submit">Submit Form</wally-button>
@@ -232,12 +211,10 @@
         <div>
           <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Handling Click Events</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 (click)="handleClick()"{{ '>' }}Click Me{{ '<' }}/wally-button{{ '>' }}<br><br>
-              handleClick() {{ '{' }}<br>
-              &nbsp;&nbsp;this.clickMessage.set('Button clicked!');<br>
-              {{ '}' }}
-            </code>
+            <pre><code [innerHTML]="clickCodeHTML" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+          </div>
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
+            <pre><code [innerHTML]="clickCodeTs" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
           </div>
           <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
             <div class="space-y-4 text-center">
@@ -264,16 +241,7 @@
         <div>
           <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Icon with Text</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{{ '>' }}<br>
-              &nbsp;&nbsp;Save<br>
-              &nbsp;&nbsp;{{ '<' }}svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"<br>
-              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stroke-width="1.5" stroke="currentColor" class="size-5"{{ '>' }}<br>
-              &nbsp;&nbsp;&nbsp;&nbsp;{{ '<' }}path stroke-linecap="round" stroke-linejoin="round"<br>
-              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /{{ '>' }}<br>
-              &nbsp;&nbsp;{{ '<' }}/svg{{ '>' }}<br>
-              {{ '<' }}/wally-button{{ '>' }}
-            </code>
+            <pre><code [innerHTML]="iconCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
           </div>
           <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
             <wally-button>
@@ -291,15 +259,7 @@
         <div>
           <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Icon Only</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{{ '>' }}<br>
-              &nbsp;&nbsp;{{ '<' }}svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"<br>
-              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stroke-width="1.5" stroke="currentColor" class="size-5"{{ '>' }}<br>
-              &nbsp;&nbsp;&nbsp;&nbsp;{{ '<' }}path stroke-linecap="round" stroke-linejoin="round"<br>
-              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0M3.124 7.5A8.969 8.969 0 0 1 5.292 3m13.416 0a8.969 8.969 0 0 1 2.168 4.5" /{{ '>' }}<br>
-              &nbsp;&nbsp;{{ '<' }}/svg{{ '>' }}<br>
-              {{ '<' }}/wally-button{{ '>' }}
-            </code>
+            <pre><code [innerHTML]="iconNotificationCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
           </div>
           <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
             <wally-button>
@@ -319,66 +279,33 @@
       <h2 class="text-lg font-semibold mb-4 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">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 class="space-y-2">
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+            <pre><code [innerHTML]="propertyTypeCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
           </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 class="space-y-2">
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+            <pre><code [innerHTML]="propertyDisabledCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
           </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 class="space-y-2">
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+            <pre><code [innerHTML]="propertyLoadingCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
           </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 class="space-y-2">
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+            <pre><code [innerHTML]="propertyShowNotificationCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
           </div>
           <p class="text-sm text-gray-700 dark:text-gray-400">Shows notification badge 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">icon</span><span class="text-[#0a0a0a] dark:text-white">:
-            </span>
-            <span class="text-purple-600 dark:text-purple-400">'left' | 'right' | 'none'</span> <span
-              class="text-[#0a0a0a] dark:text-white"> = </span>
-            <span class="text-green-600 dark:text-green-400">'none'</span>
-            <span class="text-[#0a0a0a] dark:text-white">;</span>
-          </div>
-          <p class="text-sm text-gray-700 dark:text-gray-400">Position of the icon content (left, right, or none)</p>
-        </div>
       </div>
     </section>
 
@@ -397,8 +324,6 @@
           </p>
         </div>
 
-
-
         <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
           <div class="flex items-center gap-2 mb-2">
             <h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Accessibility</h3>

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

@@ -0,0 +1,64 @@
+import { Component, signal, WritableSignal } from '@angular/core';
+
+import { AiPromptService } from '../../../../core/services/ai-prompt.service';
+import { getFormattedCode } from '../../../../core/utils/prism';
+
+import { ButtonCodeExamples } from './button-docs.examples';
+
+import { Breadcrumb, BreadcrumbItem } from '../../../../components/breadcrumb/breadcrumb';
+import { Button } from '../../../../components/button/button';
+
+@Component({
+  selector: 'app-button-docs',
+  imports: [
+    Button,
+    Breadcrumb
+  ],
+  templateUrl: './button-docs.html',
+  styleUrl: './button-docs.css'
+})
+export class ButtonDocs {
+  breadcrumbItems: BreadcrumbItem[] = [
+    { label: 'Home', url: '/' },
+    { label: 'Documentation', url: '/documentation' },
+    { label: 'Components', url: '/documentation/components' },
+    { label: 'Button' }
+  ];
+
+  basicUsageCode = getFormattedCode(ButtonCodeExamples.installation, 'bash');
+  importCode = getFormattedCode(ButtonCodeExamples.import, 'typescript');
+  componentImportCode = getFormattedCode(ButtonCodeExamples.componentImport, 'typescript');
+  basicUsageTemplateCode = getFormattedCode(ButtonCodeExamples.basicUsage, 'html');
+  disabledCode = getFormattedCode(ButtonCodeExamples.disabled, 'html');
+  loadingCode = getFormattedCode(ButtonCodeExamples.loading, 'html');
+  notificationCode = getFormattedCode(ButtonCodeExamples.notification, 'html');
+  submitCode = getFormattedCode(ButtonCodeExamples.submit, 'html');
+  clickCodeHTML = getFormattedCode(ButtonCodeExamples.clickTemplate, 'html');
+  clickCodeTs = getFormattedCode(ButtonCodeExamples.clickMethod, 'typescript');
+  iconCode = getFormattedCode(ButtonCodeExamples.iconWithText, 'html');
+  iconNotificationCode = getFormattedCode(ButtonCodeExamples.iconOnly, 'html');
+
+  // Properties
+  propertyTypeCode = getFormattedCode(ButtonCodeExamples.propertyType, 'typescript');
+  propertyDisabledCode = getFormattedCode(ButtonCodeExamples.propertyDisabled, 'typescript');
+  propertyLoadingCode = getFormattedCode(ButtonCodeExamples.propertyLoading, 'typescript');
+  propertyShowNotificationCode = getFormattedCode(ButtonCodeExamples.propertyShowNotification, 'typescript');
+
+  clickMessage: WritableSignal<string> = signal<string>('');
+
+  constructor(
+    private aiPromptService: AiPromptService
+  ) { }
+
+  handleClick(): void {
+    this.clickMessage.set('Button clicked!');
+  }
+
+  get claudeUrl(): string {
+    return this.aiPromptService.generateClaudeUrl();
+  }
+
+  get chatGptUrl(): string {
+    return this.aiPromptService.generateChatGptUrl();
+  }
+}

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

@@ -0,0 +1,73 @@
+<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>
+
+  <!-- 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>
+
+    <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="/documentation/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="/documentation/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">
+      <div class="flex items-center gap-2 mb-2">
+        <h4 class="text-md font-semibold text-[#0a0a0a] dark:text-white">Input</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 input component with full FormGroup support, perfect for forms and data entry.
+      </p>
+      <a href="/documentation/components/input" class="text-blue-500 underline hover:text-blue-700 text-sm">
+        View Documentation
+      </a>
+    </div>
+
+    <div class="w-auto h-auto">
+      <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4944285767597175"
+        crossorigin="anonymous"></script>
+      <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-gw-3+1f-3d+2z"
+        data-ad-client="ca-pub-4944285767597175" data-ad-slot="4427496130"></ins>
+      <script>
+        (adsbygoogle = window.adsbygoogle || []).push({});
+      </script>
+    </div>
+  </div>
+</div>

package/playground/showcase/src/app/pages/{components → documentation/components}/components.routes.ts

@@ -12,5 +12,9 @@ export const componentsRoutes: Routes = [
     {
         path: 'breadcrumb',
         loadComponent: () => import('./breadcrumb-docs/breadcrumb-docs').then(m => m.BreadcrumbDocs)
+    },
+    {
+        path: 'input',
+        loadComponent: () => import('./input-docs/input-docs').then(m => m.InputDocs)
     }
 ];

package/playground/showcase/src/app/pages/{components → documentation/components}/components.ts

@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
-import { Breadcrumb, BreadcrumbItem } from '../../components/breadcrumb/breadcrumb';
+
+import { Breadcrumb, BreadcrumbItem } from '../../../components/breadcrumb/breadcrumb';
 
 @Component({
   selector: 'wally-components',
@@ -10,6 +11,7 @@ import { Breadcrumb, BreadcrumbItem } from '../../components/breadcrumb/breadcru
 export class Components {
   breadcrumbItems: BreadcrumbItem[] = [
     { label: 'Home', url: '/' },
+    { label: 'Documentation', url: '/documentation' },
     { label: 'Components' }
   ];
 }

package/playground/showcase/src/app/pages/documentation/components/input-docs/input-docs.css

@@ -0,0 +1,13 @@
+pre {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    max-width: 100%;
+}
+
+code {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    display: block;
+}

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

@@ -0,0 +1,88 @@
+// Input documentation code examples
+export const InputCodeExamples = {
+  // Installation
+  installation: `npx wally-ui add input`,
+
+  // Import examples
+  import: `import { Input } from './components/wally-ui/input/input';`,
+  componentImport: `@Component({
+  selector: 'app-example',
+  imports: [Input, ReactiveFormsModule],
+  templateUrl: './example.html',
+  styleUrl: './example.css'
+})`,
+
+  // Basic usage
+  basicUsage: `<wally-input placeholder="Enter text"></wally-input>`,
+  basicSetup: `placeholder: string = 'Enter your name';`,
+
+  // FormGroup usage (most important!)
+  formGroupTemplate: `<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
+  <wally-input
+    formControlName="name"
+    placeholder="Enter your name">
+  </wally-input>
+
+  <wally-input
+    formControlName="email"
+    placeholder="Enter your email">
+  </wally-input>
+</form>`,
+
+  formGroupSetup: `import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
+
+userForm: FormGroup;
+
+constructor(private fb: FormBuilder) {
+  this.userForm = this.fb.group({
+    name: ['', Validators.required],
+    email: ['', [Validators.required, Validators.email]]
+  });
+}
+
+onSubmit() {
+  if (this.userForm.valid) {
+    console.log(this.userForm.value);
+  }
+}`,
+
+  // States
+  withValue: `<wally-input value="Pre-filled text" placeholder="Enter text"></wally-input>`,
+
+  // Types
+  emailType: `<wally-input type="email" placeholder="Enter your email"></wally-input>`,
+  passwordType: `<wally-input type="password" placeholder="Enter password"></wally-input>`,
+
+  // Form validation example
+  validationTemplate: `<form [formGroup]="validationForm">
+  <wally-input
+    formControlName="username"
+    placeholder="Username (required)">
+  </wally-input>
+
+  @if (validationForm.get('username')?.invalid && validationForm.get('username')?.touched) {
+    <div>
+      <span class="text-red-500 text-sm">Username is required</span>
+    </div>
+  }
+</form>`,
+
+  validationSetup: `validationForm = this.fb.group({
+  username: ['', [Validators.required, Validators.minLength(3)]]
+});`,
+
+  // New Features Examples
+  withLabel: `<wally-input label="Full Name" placeholder="Enter your name"></wally-input>`,
+  loadingState: `<wally-input [loading]="true" placeholder="Loading..."></wally-input>`,
+  validState: `<wally-input [valid]="true" placeholder="Valid input"></wally-input>`,
+  errorState: `<wally-input errorMessage="This field is required" placeholder="Enter value"></wally-input>`,
+  passwordWithToggle: `<wally-input type="password" label="Password" placeholder="Enter secure password"></wally-input>`,
+
+  // Properties
+  propertyLabel: `label: string = '';`,
+  propertyType: `type: string = 'text';`,
+  propertyPlaceholder: `placeholder: string = '';`,
+  propertyLoading: `loading: boolean = false;`,
+  propertyValid: `valid: boolean = false;`,
+  propertyError: `errorMessage: string = '';`
+};