wally-ui 1.2.1 → 1.4.0

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

@@ -0,0 +1,357 @@
+<div class="font-mono">
+  <div class="max-w-4xl mx-auto p-6">
+    <div class="mb-4">
+      <wally-breadcrumb [items]="breadcrumbItems"></wally-breadcrumb>
+    </div>
+
+    <h1 class="text-2xl font-bold mb-4 text-[#0a0a0a] dark:text-white">
+      Input
+    </h1>
+    <p class="text-gray-700 dark:text-gray-400 mb-4">
+      A fully-featured input component with label support, loading states, validation styling, and complete FormGroup integration.
+    </p>
+
+    <!-- Under Construction Badge -->
+    <div class="mb-6">
+      <span class="text-xs bg-yellow-500 text-black px-3 py-1 rounded-full font-medium">Under Construction</span>
+      <p class="text-sm text-gray-600 dark:text-gray-400 mt-2">
+        This component is actively being developed. More features and improvements coming soon!
+      </p>
+    </div>
+
+    <!-- AI Prompts -->
+    <div class="flex flex-wrap gap-2 mb-6">
+      <a [href]="claudeUrl" target="_blank"
+        class="inline-flex items-center gap-2 px-3 py-1.5 text-xs bg-gray-200 dark:bg-[#121212] text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-[#1a1a1a] hover:text-[#0a0a0a] dark:hover:text-white transition-colors">
+        <svg xmlns="http://www.w3.org/2000/svg" class="size-6" viewBox="0 0 24 24">
+          <path fill="currentColor"
+            d="m4.714 15.956l4.718-2.648l.079-.23l-.08-.128h-.23l-.79-.048l-2.695-.073l-2.337-.097l-2.265-.122l-.57-.121l-.535-.704l.055-.353l.48-.321l.685.06l1.518.104l2.277.157l1.651.098l2.447.255h.389l.054-.158l-.133-.097l-.103-.098l-2.356-1.596l-2.55-1.688l-1.336-.972l-.722-.491L2 6.223l-.158-1.008l.656-.722l.88.06l.224.061l.893.686l1.906 1.476l2.49 1.833l.364.304l.146-.104l.018-.072l-.164-.274l-1.354-2.446l-1.445-2.49l-.644-1.032l-.17-.619a3 3 0 0 1-.103-.729L6.287.133L6.7 0l.995.134l.42.364l.619 1.415L9.735 4.14l1.555 3.03l.455.898l.243.832l.09.255h.159V9.01l.127-1.706l.237-2.095l.23-2.695l.08-.76l.376-.91l.747-.492l.583.28l.48.685l-.067.444l-.286 1.851l-.558 2.903l-.365 1.942h.213l.243-.242l.983-1.306l1.652-2.064l.728-.82l.85-.904l.547-.431h1.032l.759 1.129l-.34 1.166l-1.063 1.347l-.88 1.142l-1.263 1.7l-.79 1.36l.074.11l.188-.02l2.853-.606l1.542-.28l1.84-.315l.832.388l.09.395l-.327.807l-1.967.486l-2.307.462l-3.436.813l-.043.03l.049.061l1.548.146l.662.036h1.62l3.018.225l.79.522l.473.638l-.08.485l-1.213.62l-1.64-.389l-3.825-.91l-1.31-.329h-.183v.11l1.093 1.068l2.003 1.81l2.508 2.33l.127.578l-.321.455l-.34-.049l-2.204-1.657l-.85-.747l-1.925-1.62h-.127v.17l.443.649l2.343 3.521l.122 1.08l-.17.353l-.607.213l-.668-.122l-1.372-1.924l-1.415-2.168l-1.141-1.943l-.14.08l-.674 7.254l-.316.37l-.728.28l-.607-.461l-.322-.747l.322-1.476l.388-1.924l.316-1.53l.285-1.9l.17-.632l-.012-.042l-.14.018l-1.432 1.967l-2.18 2.945l-1.724 1.845l-.413.164l-.716-.37l.066-.662l.401-.589l2.386-3.036l1.439-1.882l.929-1.086l-.006-.158h-.055L4.138 18.56l-1.13.146l-.485-.456l.06-.746l.231-.243l1.907-1.312Z" />
+        </svg>
+        Open in Claude
+      </a>
+
+      <a [href]="chatGptUrl" target="_blank"
+        class="inline-flex items-center gap-2 px-3 py-1.5 text-xs bg-gray-200 dark:bg-[#121212] text-gray-600 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-[#1a1a1a] hover:text-[#0a0a0a] dark:hover:text-white transition-colors">
+        <svg xmlns="http://www.w3.org/2000/svg" class="size-6" viewBox="0 0 48 48">
+          <path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
+            d="M18.38 27.94v-14.4l11.19-6.46c6.2-3.58 17.3 5.25 12.64 13.33" />
+          <path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
+            d="m18.38 20.94l12.47-7.2l11.19 6.46c6.2 3.58 4.1 17.61-5.23 17.61" />
+          <path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
+            d="m24.44 17.44l12.47 7.2v12.93c0 7.16-13.2 12.36-17.86 4.28" />
+          <path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
+            d="M30.5 21.2v14.14L19.31 41.8c-6.2 3.58-17.3-5.25-12.64-13.33" />
+          <path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
+            d="m30.5 27.94l-12.47 7.2l-11.19-6.46c-6.21-3.59-4.11-17.61 5.22-17.61" />
+          <path fill="none" stroke="currentColor" stroke-width="3" stroke-linejoin="round"
+            d="m24.44 31.44l-12.47-7.2V11.31c0-7.16 13.2-12.36 17.86-4.28" />
+        </svg>
+        Open in ChatGPT
+      </a>
+    </div>
+
+    <!-- Installation -->
+    <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">
+        <pre><code [innerHTML]="installationCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+      </div>
+    </section>
+
+    <!-- Preview -->
+    <section class="mb-8">
+      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Preview</h2>
+      <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
+        <form>
+          <div class="flex flex-col gap-4 w-full">
+            <wally-input label="Full Name" placeholder="Enter your name"></wally-input>
+            <wally-input label="Email Address" type="email" placeholder="Enter your email"></wally-input>
+            <wally-input label="Password" type="password" placeholder="Enter password"></wally-input>
+          </div>
+        </form>
+      </div>
+    </section>
+
+    <!-- Import -->
+    <section class="mb-8">
+      <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">
+          <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">
+          <pre><code [innerHTML]="componentImportCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+        </div>
+      </div>
+    </section>
+
+    <!-- FormGroup Usage (HIGHLIGHTED SECTION) -->
+    <section class="mb-8">
+      <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 p-4 rounded-lg mb-4">
+        <h2 class="text-lg font-semibold mb-2 text-blue-800 dark:text-blue-200">
+          FormGroup & ReactiveFormsModule Support
+        </h2>
+        <p class="text-sm text-blue-700 dark:text-blue-300">
+          This input component is fully compatible with Angular's FormGroup and ReactiveFormsModule!
+          Use <span class="bg-blue-100 dark:bg-blue-800 px-1 py-0.5 rounded text-xs">formControlName</span> for seamless form integration.
+        </p>
+      </div>
+
+      <div class="space-y-8">
+        <div>
+          <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Template Setup</h3>
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
+            <pre><code [innerHTML]="formGroupTemplateCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+          </div>
+        </div>
+
+        <div>
+          <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Component Setup</h3>
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
+            <pre><code [innerHTML]="formGroupSetupCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+          </div>
+        </div>
+
+        <div>
+          <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Live Example</h3>
+          <form [formGroup]="basicForm" (ngSubmit)="onBasicSubmit()" class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
+            <div class="flex flex-col gap-2 w-full">
+              <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Name</label>
+                <wally-input formControlName="name" placeholder="Enter your name"></wally-input>
+              </div>
+
+              <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email</label>
+                <wally-input formControlName="email" type="email" placeholder="Enter your email"></wally-input>
+              </div>
+
+              <wally-button type="submit" class="w-full">
+                Submit (Check Console)
+              </wally-button>
+
+              <div class="text-sm text-gray-600 dark:text-gray-400 mt-4">
+                Form Value: {{ basicForm.value | json }}
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+    </section>
+
+    <!-- Basic Usage -->
+    <section class="mb-8">
+      <h2 class="text-lg font-semibold mb-4 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">
+            <pre><code [innerHTML]="basicSetupCode" 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]="basicUsageCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+          </div>
+          <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
+            <wally-input placeholder="Enter text"></wally-input>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Input Features -->
+    <section class="mb-8">
+      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Input Features</h2>
+
+      <div class="space-y-8">
+        <!-- Labels -->
+        <div>
+          <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">With Labels</h3>
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
+            <pre><code [innerHTML]="labelCode" 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="flex flex-col gap-4">
+              <wally-input label="Full Name" placeholder="Enter your name"></wally-input>
+              <wally-input label="Email Address" type="email" placeholder="Enter your email"></wally-input>
+            </div>
+          </div>
+        </div>
+
+        <!-- Loading State -->
+        <div>
+          <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Loading State</h3>
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
+            <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-input label="Processing..." [loading]="true" placeholder="Loading example"></wally-input>
+          </div>
+        </div>
+
+        <!-- Valid State -->
+        <div>
+          <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Valid State</h3>
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
+            <pre><code [innerHTML]="validCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+          </div>
+          <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
+            <wally-input label="Username" [valid]="true" placeholder="Valid input example"></wally-input>
+          </div>
+        </div>
+
+        <!-- Error State -->
+        <div>
+          <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Error State</h3>
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
+            <pre><code [innerHTML]="errorCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+          </div>
+          <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
+            <wally-input label="Email" errorMessage="Please enter a valid email address" placeholder="Enter email"></wally-input>
+          </div>
+        </div>
+
+        <!-- Password with Toggle -->
+        <div>
+          <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Password with Toggle</h3>
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
+            <pre><code [innerHTML]="passwordCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+          </div>
+          <div class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
+            <form>
+              <wally-input label="Password" type="password" placeholder="Enter secure password"></wally-input>
+            </form>
+          </div>
+        </div>
+      </div>
+    </section>
+
+
+    <!-- Form Validation -->
+    <section class="mb-8">
+      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Form Validation</h2>
+
+      <div class="space-y-8">
+        <div>
+          <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Validation Setup</h3>
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
+            <pre><code [innerHTML]="validationSetupCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+          </div>
+        </div>
+
+        <div>
+          <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Template with Validation</h3>
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
+            <pre><code [innerHTML]="validationTemplateCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+          </div>
+        </div>
+
+        <div>
+          <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Live Validation Example</h3>
+          <form [formGroup]="validationForm" (ngSubmit)="onValidationSubmit()" class="p-6 border rounded-lg bg-white dark:bg-[#121212]">
+            <div class="flex flex-col gap-2 w-full">
+              <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Username (min 3 chars)</label>
+                <wally-input formControlName="username" placeholder="Enter username"></wally-input>
+
+                @if (validationForm.get('username')?.invalid && validationForm.get('username')?.touched) {
+                  <div class="mt-2">
+                    <span class="text-red-500 text-sm">
+                      @if (validationForm.get('username')?.errors?.['required']) {
+                        <span>Username is required</span>
+                      }
+                      @if (validationForm.get('username')?.errors?.['minlength']) {
+                        <span>Username must be at least 3 characters</span>
+                      }
+                    </span>
+                  </div>
+                }
+              </div>
+
+              <wally-button type="submit" [disabled]="validationForm.invalid" class="w-full">
+                Submit ({{ validationForm.valid ? 'Valid' : 'Invalid' }})
+              </wally-button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </section>
+
+    <!-- Properties -->
+    <section class="mb-8">
+      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Properties</h2>
+
+      <div class="space-y-4">
+        <div class="space-y-2">
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+            <pre><code [innerHTML]="propertyLabelCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+          </div>
+          <p class="text-sm text-gray-700 dark:text-gray-400">Optional label text displayed above the input</p>
+        </div>
+
+        <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 input type (text, email, password, etc.)</p>
+        </div>
+
+        <div class="space-y-2">
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+            <pre><code [innerHTML]="propertyPlaceholderCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+          </div>
+          <p class="text-sm text-gray-700 dark:text-gray-400">Placeholder text for the input</p>
+        </div>
+
+        <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 and disables input when true</p>
+        </div>
+
+        <div class="space-y-2">
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+            <pre><code [innerHTML]="propertyValidCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+          </div>
+          <p class="text-sm text-gray-700 dark:text-gray-400">Shows green styling when input is valid</p>
+        </div>
+
+        <div class="space-y-2">
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
+            <pre><code [innerHTML]="propertyErrorCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+          </div>
+          <p class="text-sm text-gray-700 dark:text-gray-400">Error message text - shows red styling and displays error below input</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- Future Features -->
+    <section class="mb-8">
+      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Future Features</h2>
+
+      <div class="space-y-4">
+        <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">Input Icons</h3>
+            <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">
+            Support for custom icons on the left and right sides of the input.
+          </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">Input Sizes</h3>
+            <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">
+            Different input sizes: small, medium, large for various layouts.
+          </p>
+        </div>
+      </div>
+    </section>
+
+  </div>
+</div>

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

@@ -0,0 +1,105 @@
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+
+import { Breadcrumb, BreadcrumbItem } from '../../../../components/breadcrumb/breadcrumb';
+import { Input } from '../../../../components/input/input';
+import { Button } from '../../../../components/button/button';
+
+import { AiPromptService } from '../../../../core/services/ai-prompt.service';
+import { InputCodeExamples } from './input-docs.examples';
+import { getFormattedCode } from '../../../../core/utils/prism';
+import { JsonPipe } from '@angular/common';
+
+@Component({
+  selector: 'app-input-docs',
+  imports: [
+    Input,
+    Breadcrumb,
+    Button,
+    ReactiveFormsModule,
+    JsonPipe
+  ],
+  templateUrl: './input-docs.html',
+  styleUrl: './input-docs.css'
+})
+export class InputDocs {
+  breadcrumbItems: BreadcrumbItem[] = [
+    { label: 'Home', url: '/' },
+    { label: 'Documentation', url: '/documentation' },
+    { label: 'Components', url: '/documentation/components' },
+    { label: 'Input' }
+  ];
+
+  // Form examples
+  basicForm: FormGroup;
+  validationForm: FormGroup;
+
+  // Code examples with highlighting
+  installationCode = getFormattedCode(InputCodeExamples.installation, 'bash');
+  importCode = getFormattedCode(InputCodeExamples.import, 'typescript');
+  componentImportCode = getFormattedCode(InputCodeExamples.componentImport, 'typescript');
+  basicUsageCode = getFormattedCode(InputCodeExamples.basicUsage, 'html');
+  basicSetupCode = getFormattedCode(InputCodeExamples.basicSetup, 'typescript');
+
+  // FormGroup examples (highlighted!)
+  formGroupTemplateCode = getFormattedCode(InputCodeExamples.formGroupTemplate, 'html');
+  formGroupSetupCode = getFormattedCode(InputCodeExamples.formGroupSetup, 'typescript');
+
+  // States
+  withValueCode = getFormattedCode(InputCodeExamples.withValue, 'html');
+
+  // Types
+  emailTypeCode = getFormattedCode(InputCodeExamples.emailType, 'html');
+  passwordTypeCode = getFormattedCode(InputCodeExamples.passwordType, 'html');
+
+  // Validation
+  validationTemplateCode = getFormattedCode(InputCodeExamples.validationTemplate, 'html');
+  validationSetupCode = getFormattedCode(InputCodeExamples.validationSetup, 'typescript');
+
+  // New Features
+  labelCode = getFormattedCode(InputCodeExamples.withLabel, 'html');
+  loadingCode = getFormattedCode(InputCodeExamples.loadingState, 'html');
+  validCode = getFormattedCode(InputCodeExamples.validState, 'html');
+  errorCode = getFormattedCode(InputCodeExamples.errorState, 'html');
+  passwordCode = getFormattedCode(InputCodeExamples.passwordWithToggle, 'html');
+
+  // Properties
+  propertyLabelCode = getFormattedCode(InputCodeExamples.propertyLabel, 'typescript');
+  propertyTypeCode = getFormattedCode(InputCodeExamples.propertyType, 'typescript');
+  propertyPlaceholderCode = getFormattedCode(InputCodeExamples.propertyPlaceholder, 'typescript');
+  propertyLoadingCode = getFormattedCode(InputCodeExamples.propertyLoading, 'typescript');
+  propertyValidCode = getFormattedCode(InputCodeExamples.propertyValid, 'typescript');
+  propertyErrorCode = getFormattedCode(InputCodeExamples.propertyError, 'typescript');
+
+  constructor(
+    private aiPromptService: AiPromptService,
+    private fb: FormBuilder
+  ) {
+    this.basicForm = this.fb.group({
+      name: [''],
+      email: ['']
+    });
+
+    this.validationForm = this.fb.group({
+      username: ['', [Validators.required, Validators.minLength(3)]]
+    });
+  }
+
+  get claudeUrl(): string {
+    return this.aiPromptService.generateClaudeUrl();
+  }
+
+  get chatGptUrl(): string {
+    return this.aiPromptService.generateChatGptUrl();
+  }
+
+  onBasicSubmit() {
+    console.log('Basic Form:', this.basicForm.value);
+  }
+
+  onValidationSubmit() {
+    if (this.validationForm.valid) {
+      console.log('Validation Form:', this.validationForm.value);
+    }
+  }
+}

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

@@ -4,12 +4,73 @@
   </div>
 
   <h1 class="text-2xl font-bold text-[#0a0a0a] dark:text-white mb-4">
-    Components
+    Documentation
   </h1>
   <p class="text-gray-700 dark:text-gray-400 mb-6">
-    Explore our collection of reusable Angular components.
+    Welcome to Wally UI documentation. Learn how to get started and explore our component library.
   </p>
 
+  <!-- Philosophy & Approach -->
+  <div id="philosophy" class="mb-8">
+    <h2 class="text-lg font-semibold text-[#0a0a0a] dark:text-white mb-4">
+      A Modern Approach to Angular UI Components
+    </h2>
+    <p class="text-gray-700 dark:text-gray-400 mb-4">
+      Wally UI is a modern approach to building Angular interfaces, inspired by the success of shadcn/ui in React.
+      Unlike traditional libraries, it doesn't add heavy dependencies to your project: each component is generated
+      via npx and becomes your code, ready to edit, customize, and evolve as needed.
+    </p>
+
+    <div class="grid gap-3 md:grid-cols-2 mb-6">
+      <div class="bg-gray-200 dark:bg-[#121212] p-3 rounded-lg">
+        <h3 class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-2">No External Dependencies</h3>
+        <p class="text-sm text-gray-700 dark:text-gray-400">
+          You control the code, without being tied to third-party updates.
+        </p>
+      </div>
+
+      <div class="bg-gray-200 dark:bg-[#121212] p-3 rounded-lg">
+        <h3 class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-2">Total Customization</h3>
+        <p class="text-sm text-gray-700 dark:text-gray-400">
+          Since the component is yours, it can be adapted to any design system or business rules.
+        </p>
+      </div>
+
+      <div class="bg-gray-200 dark:bg-[#121212] p-3 rounded-lg">
+        <h3 class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-2">Lightweight</h3>
+        <p class="text-sm text-gray-700 dark:text-gray-400">
+          Only what you actually add goes into the bundle, without loading dozens of unused components.
+        </p>
+      </div>
+
+      <div class="bg-gray-200 dark:bg-[#121212] p-3 rounded-lg">
+        <h3 class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-2">Tailwind Integrated</h3>
+        <p class="text-sm text-gray-700 dark:text-gray-400">
+          Modern, responsive, and consistent styles with the power of Tailwind CSS.
+        </p>
+      </div>
+
+      <div class="bg-gray-200 dark:bg-[#121212] p-3 rounded-lg">
+        <h3 class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-2">Learning & Clarity</h3>
+        <p class="text-sm text-gray-700 dark:text-gray-400">
+          Each component serves as a practical example of Angular best practices.
+        </p>
+      </div>
+
+      <div class="bg-gray-200 dark:bg-[#121212] p-3 rounded-lg">
+        <h3 class="text-sm font-semibold text-[#0a0a0a] dark:text-white mb-2">Standalone Components</h3>
+        <p class="text-sm text-gray-700 dark:text-gray-400">
+          Leverages Angular's latest features, reducing complexity and improving modularity.
+        </p>
+      </div>
+    </div>
+
+    <p class="text-gray-700 dark:text-gray-400">
+      With Wally UI, you gain agility to start projects, flexibility to shape your UI without limitations,
+      and simplicity to maintain code long-term. It's the most practical and modern way to build Angular interfaces.
+    </p>
+  </div>
+
   <!-- 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>
@@ -82,52 +143,18 @@
     </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>
-
-    <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>
+  <!-- Navigation to Components -->
+  <div class="space-y-4">
+    <h3 class="text-lg font-semibold text-[#0a0a0a] dark:text-white mb-4">Explore</h3>
 
     <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>
+      <h4 class="text-md font-semibold text-[#0a0a0a] dark:text-white mb-2">Components</h4>
       <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.
+        Browse our collection of reusable Angular components with examples and documentation.
       </p>
-      <a href="/components/breadcrumb" class="text-blue-500 underline hover:text-blue-700 text-sm">
-        View Documentation
+      <a href="/documentation/components" class="text-blue-500 underline hover:text-blue-700 text-sm">
+        View Components →
       </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/documentation/documentation.routes.ts

@@ -0,0 +1,12 @@
+import { Routes } from '@angular/router';
+
+export const documentationRoutes: Routes = [
+    {
+        path: '',
+        loadComponent: () => import('./documentation').then(m => m.Documentation)
+    },
+    {
+        path: 'components',
+        loadChildren: () => import('./components/components.routes').then(m => m.componentsRoutes)
+    }
+];

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

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