wally-ui 1.3.0 → 1.5.0

package/package.json

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

package/playground/showcase/public/robots.txt

@@ -11,4 +11,7 @@ User-agent: claudebot
 Allow: /
 
 User-agent: ChatGPT-User
-Allow: /
+Allow: /
+
+# Sitemap location
+Sitemap: https://wally-ui.com/sitemap.xml

package/playground/showcase/public/sitemap.xml

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+        xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
+        http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+
+    <!-- Homepage -->
+    <url>
+        <loc>https://wally-ui.com/</loc>
+        <lastmod>2025-01-25</lastmod>
+        <changefreq>weekly</changefreq>
+        <priority>1.0</priority>
+    </url>
+
+    <!-- Documentation Index -->
+    <url>
+        <loc>https://wally-ui.com/documentation</loc>
+        <lastmod>2025-01-25</lastmod>
+        <changefreq>weekly</changefreq>
+        <priority>0.9</priority>
+    </url>
+
+    <!-- Components Index -->
+    <url>
+        <loc>https://wally-ui.com/documentation/components</loc>
+        <lastmod>2025-09-25</lastmod>
+        <changefreq>weekly</changefreq>
+        <priority>0.9</priority>
+    </url>
+
+    <!-- Button Documentation -->
+    <url>
+        <loc>https://wally-ui.com/documentation/components/button</loc>
+        <lastmod>2025-09-25</lastmod>
+        <changefreq>monthly</changefreq>
+        <priority>0.8</priority>
+    </url>
+
+    <!-- Input Documentation -->
+    <url>
+        <loc>https://wally-ui.com/documentation/components/input</loc>
+        <lastmod>2025-09-25</lastmod>
+        <changefreq>monthly</changefreq>
+        <priority>0.8</priority>
+    </url>
+
+</urlset>

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

@@ -13,6 +13,7 @@ export interface BreadcrumbItem {
     CommonModule,
     RouterModule
   ],
+  // standalone: true, (If your application is lower than Angular 19, uncomment this line)
   templateUrl: './breadcrumb.html',
 })
 export class Breadcrumb {

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

@@ -1,27 +1,71 @@
+@if (label()) {
+<div class="py-2">
+    <label [for]="inputId" class="block text-sm font-medium text-[#0a0a0a] dark:text-white">
+        {{ label() }}
+    </label>
+</div>
+}
+
 <div class="relative">
-    <!-- 
-        ps-11 pe-9 - add padding when there is an icon
-    -->
-    <input [type]="type()" [value]="value()" [disabled]="disabled" [placeholder]="placeholder()" class="
+    <input [id]="inputId" [type]="currentInputType()" [value]="value()" [disabled]="isDisabled() || loading()"
+        [placeholder]="placeholder()" [autocomplete]="autocomplete() || (type() === 'password' ? 'new-password' : '')"
+        [attr.aria-describedby]="errorId()" [attr.aria-invalid]="!!errorMessage()" class="
         font-semibold
-        block 
+        block
         w-full
-        bg-gray-100
         rounded-lg
-        text-base md:text-sm
-        focus:outline-none focus:ring-2 focus:ring-gray-300
-        dark:bg-[#191919] dark:text-white dark:placeholder:text-gray-400 dark:focus:ring-gray-400
-        disabled:opacity-85 disabled:pointer-events-none
-        py-4 px-4
-        ">
+        border-2 border-transparent
+        text-[#0a0a0a] text-base md:text-sm placeholder:text-neutral-400
+        focus:outline-none focus:ring-2 focus:ring-neutral-300
+        bg-gray-100
+        dark:bg-[#1b1b1b] dark:text-white dark:placeholder:text-neutral-500 dark:focus:ring-neutral-700
+        disabled:opacity-70 disabled:pointer-events-none disabled:cursor-not-allowed
+        transition duration-200 ease-in-out
+        py-4 px-4" [ngClass]="{
+            'pe-12': type() === 'password',
+            'ps-12': loading(),
+            '!bg-green-100 focus:!ring-green-500/50 placeholder:!text-green-600/70 !text-green-600 focus:!border-green-500 dark:!bg-[#1b1b1b] dark:!border-green-600  dark:!text-green-500 dark:placeholder:!text-green-400/40 dark:focus:!ring-green-500/50': valid() && !errorMessage(),
+            '!border-red-300 bg-red-100 !text-red-500 placeholder:text-red-300 focus:ring-red-300 dark:!text-red-500 dark:placeholder:!text-red-500 dark:!border-red-500 dark:focus:!ring-red-500': errorMessage() && !valid()
+        }">
 
-    <!-- <div
-        class="absolute inset-y-0 start-0 flex items-center pointer-events-none ps-4 peer-disabled:opacity-50 peer-disabled:pointer-events-none">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
-            class="flex-shrink-0 size-4 text-gray-500">
-            <path fill-rule="evenodd"
-                d="M1.5 4.5a3 3 0 0 1 3-3h1.372c.86 0 1.61.586 1.819 1.42l1.105 4.423a1.875 1.875 0 0 1-.694 1.955l-1.293.97c-.135.101-.164.249-.126.352a11.285 11.285 0 0 0 6.697 6.697c.103.038.25.009.352-.126l.97-1.293a1.875 1.875 0 0 1 1.955-.694l4.423 1.105c.834.209 1.42.959 1.42 1.82V19.5a3 3 0 0 1-3 3h-2.25C8.552 22.5 1.5 15.448 1.5 6.75V4.5Z"
-                clip-rule="evenodd" />
+    <!-- Loading spinner -->
+    @if (loading()) {
+    <div class="absolute inset-y-0 start-0 flex items-center ps-4">
+        <svg class="size-4 animate-spin text-neutral-500 dark:text-neutral-400" xmlns="http://www.w3.org/2000/svg"
+            fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
+            </path>
         </svg>
-    </div> -->
-</div>
+    </div>
+    }
+
+    @if (type() === 'password' && !loading()) {
+    <button type="button" (click)="togglePasswordVisibility()"
+        class="absolute inset-y-0 end-0 flex items-center pe-4 cursor-pointer focus:outline-none transition duration-200 ease-in-out">
+        @if (showPassword()) {
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
+            class="size-5 text-neutral-500 hover:text-neutral-700 dark:text-neutral-500 dark:hover:text-neutral-200">
+            <path stroke-linecap="round" stroke-linejoin="round"
+                d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
+            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+        </svg>
+        } @else {
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
+            class="size-5 text-neutral-500 hover:text-neutral-700 dark:text-neutral-500 dark:hover:text-neutral-200">
+            <path stroke-linecap="round" stroke-linejoin="round"
+                d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" />
+        </svg>
+        }
+    </button>
+    }
+</div>
+
+@if (errorMessage()) {
+<div class="py-1" [id]="inputId + '-error'">
+    <span class="text-sm text-red-500 font-medium">
+        {{ errorMessage() }}
+    </span>
+</div>
+}

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

@@ -1,4 +1,7 @@
-import { Component, effect, forwardRef, HostListener, input, InputSignal, model, signal, untracked, WritableSignal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+  Component, computed, HostListener, input, InputSignal, signal, untracked, WritableSignal
+} from '@angular/core';
 
 import {
   ControlValueAccessor,
@@ -7,9 +10,11 @@ import {
 
 @Component({
   selector: 'wally-input',
-  imports: [],
+  imports: [
+    CommonModule
+  ],
+  // standalone: true, (If your application is lower than Angular 19, uncomment this line)
   templateUrl: './input.html',
-  styleUrl: './input.css',
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
@@ -19,31 +24,52 @@ import {
   ]
 })
 export class Input implements ControlValueAccessor {
-  type: WritableSignal<string> = signal<string>('text');
-  // disabled: WritableSignal<boolean> = signal<boolean>(false);
-  disabled = false;
-  loading: WritableSignal<boolean> = signal<boolean>(false);
-  
   placeholder: InputSignal<string> = input<string>('');
+  type: InputSignal<string> = input<string>('text');
+  label: InputSignal<string> = input<string>('');
+  autocomplete: InputSignal<string> = input<string>('');
+
+  valid: InputSignal<boolean> = input<boolean>(false);
+  errorMessage: InputSignal<string> = input<string>('');
+  loading: InputSignal<boolean> = input<boolean>(false);
+  disabled: InputSignal<boolean> = input<boolean>(false);
+
+  protected readonly showPassword = signal<boolean>(false);
+  protected readonly inputId = `wally-input-${Math.random().toString(36).substring(2, 11)}`;
+  protected readonly errorId = computed(() =>
+    this.errorMessage() ? `${this.inputId}-error` : undefined
+  );
+
+  protected readonly isDisabled = computed(() =>
+    this.disabled() || this.internalDisabled()
+  );
+
+  private touched: WritableSignal<boolean> = signal<boolean>(false);
+  value: WritableSignal<string> = signal<string>('');
+
+  protected readonly currentInputType = computed(() => {
+    const currentType = this.type();
+
+    if (currentType !== 'password') {
+      return currentType;
+    }
+
+    if (this.showPassword()) {
+      return 'text';
+    }
 
-  value = signal<string>('');
+    return 'password';
+  });
 
-  private touched = signal<boolean>(false);
+  private internalDisabled = signal<boolean>(false);
 
   private onChange = (value: any) => { };
   private onTouched = () => { };
 
-  constructor() {
-    effect(() => {
-      const currentValue = this.value();
-      this.onChange(currentValue)
-    });
-  }
-
   writeValue(obj: any): void {
     untracked(() => {
       this.value.set(obj || '');
-    })
+    });
   }
 
   registerOnChange(fn: any): void {
@@ -55,13 +81,19 @@ export class Input implements ControlValueAccessor {
   }
 
   setDisabledState?(isDisabled: boolean): void {
-    this.disabled = isDisabled;
+    this.internalDisabled.set(isDisabled);
+  }
+
+  togglePasswordVisibility(): void {
+    this.showPassword.set(!this.showPassword());
   }
 
   @HostListener('input', ['$event'])
   onInputChange(event: Event): void {
     const target = event.target as HTMLInputElement;
-    this.value.set(target.value);
+    const newValue = target.value;
+    this.value.set(newValue);
+    this.onChange(newValue);
   }
 
   @HostListener('blur')
@@ -71,8 +103,4 @@ export class Input implements ControlValueAccessor {
       this.onTouched();
     }
   }
-
-  onInputFocus(): void {
-
-  }
 }

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

@@ -50,7 +50,7 @@
     <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>
+        <span class="text-xs bg-blue-500 text-white px-2 py-1 rounded">New</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.
@@ -59,5 +59,15 @@
         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/documentation/components/input-docs/input-docs.examples.ts

@@ -71,8 +71,20 @@ onSubmit() {
   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>`,
+  disabledState: `<wally-input [disabled]="true" placeholder="Disabled input"></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 = '';`,
-  propertyValue: `value: string = '';`
+  propertyLoading: `loading: boolean = false;`,
+  propertyValid: `valid: boolean = false;`,
+  propertyError: `errorMessage: string = '';`,
+  propertyDisabled: `disabled: boolean = false;`
 };

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

@@ -8,16 +8,9 @@
       Input
     </h1>
     <p class="text-gray-700 dark:text-gray-400 mb-4">
-      A versatile input component with full FormGroup and ReactiveFormsModule support, perfect for forms and data entry.
+      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">
@@ -62,10 +55,17 @@
     <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]">
-        <div class="flex flex-col gap-2 w-full">
-          <wally-input placeholder="Enter your name"></wally-input>
-          <wally-input type="email" placeholder="Enter your email"></wally-input>
-        </div>
+        <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>
+            <wally-input label="Loading State" [loading]="true" placeholder="Processing..."></wally-input>
+            <wally-input label="Valid State" [valid]="true" placeholder="Valid input"></wally-input>
+            <wally-input label="Error State" errorMessage="This field is required" placeholder="Invalid input"></wally-input>
+            <wally-input label="Disabled State" [disabled]="true" placeholder="Disabled input"></wally-input>
+          </div>
+        </form>
       </div>
     </section>
 
@@ -156,30 +156,79 @@
       </div>
     </section>
 
-    <!-- Input Types -->
+    <!-- Input Features -->
     <section class="mb-8">
-      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Input Types</h2>
+      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Input Features</h2>
 
       <div class="space-y-8">
-        <!-- Email -->
+        <!-- Labels -->
         <div>
-          <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Email Input</h3>
+          <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]="emailTypeCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+            <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]">
-            <wally-input type="email" placeholder="Enter your email"></wally-input>
+            <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>
 
-        <!-- Password -->
+        <!-- Loading State -->
         <div>
-          <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Password Input</h3>
+          <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]="passwordTypeCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+            <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 type="password" placeholder="Enter password"></wally-input>
+            <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>
+
+        <!-- Disabled State -->
+        <div>
+          <h3 class="text-md font-medium mb-3 text-[#0a0a0a] dark:text-white">Disabled State</h3>
+          <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg mb-4">
+            <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-input label="Username" [disabled]="true" placeholder="Disabled input"></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>
@@ -241,6 +290,13 @@
       <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>
@@ -257,55 +313,46 @@
 
         <div class="space-y-2">
           <div class="bg-gray-200 dark:bg-[#121212] p-4 rounded-lg">
-            <pre><code [innerHTML]="propertyValueCode" class="text-sm text-[#0a0a0a] dark:text-white"></code></pre>
+            <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">Current value of the input</p>
+          <p class="text-sm text-gray-700 dark:text-gray-400">Shows loading spinner and disables input when true</p>
         </div>
-      </div>
-    </section>
-
-    <!-- Under Construction -->
-    <section class="mb-8">
-      <h2 class="text-lg font-semibold mb-4 text-[#0a0a0a] dark:text-white">Under Construction</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-yellow-500 text-black px-2 py-1 rounded">Under Construction</span>
+        <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">
-            Support for left and right icons within the input field.
-          </p>
+          <p class="text-sm text-gray-700 dark:text-gray-400">Shows green styling when input is valid</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-yellow-500 text-black px-2 py-1 rounded">Under Construction</span>
+        <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">
-            Different input sizes: small, medium, large for various use cases.
-          </p>
+          <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 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">Loading States</h3>
-            <span class="text-xs bg-yellow-500 text-black px-2 py-1 rounded">Under Construction</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">
-            Loading spinner integration for async operations.
-          </p>
+          <p class="text-sm text-gray-700 dark:text-gray-400">Disables the input when true - shows visual disabled state and prevents interaction</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">Error States</h3>
-            <span class="text-xs bg-yellow-500 text-black px-2 py-1 rounded">Under Construction</span>
+            <h3 class="text-md font-medium text-[#0a0a0a] dark:text-white">Styles-Only Directive</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">
-            Built-in error styling and validation message integration.
+            A lightweight directive for developers who want only the input styling without the full component logic.
           </p>
         </div>
       </div>

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

@@ -56,10 +56,22 @@ export class InputDocs {
   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');
+  disabledCode = getFormattedCode(InputCodeExamples.disabledState, 'html');
+  passwordCode = getFormattedCode(InputCodeExamples.passwordWithToggle, 'html');
+
   // Properties
+  propertyLabelCode = getFormattedCode(InputCodeExamples.propertyLabel, 'typescript');
   propertyTypeCode = getFormattedCode(InputCodeExamples.propertyType, 'typescript');
   propertyPlaceholderCode = getFormattedCode(InputCodeExamples.propertyPlaceholder, 'typescript');
-  propertyValueCode = getFormattedCode(InputCodeExamples.propertyValue, 'typescript');
+  propertyLoadingCode = getFormattedCode(InputCodeExamples.propertyLoading, 'typescript');
+  propertyValidCode = getFormattedCode(InputCodeExamples.propertyValid, 'typescript');
+  propertyErrorCode = getFormattedCode(InputCodeExamples.propertyError, 'typescript');
+  propertyDisabledCode = getFormattedCode(InputCodeExamples.propertyDisabled, 'typescript');
 
   constructor(
     private aiPromptService: AiPromptService,

package/playground/showcase/src/index.html

@@ -16,10 +16,13 @@
     );
   </script>
 
+  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4944285767597175"
+    crossorigin="anonymous"></script>
+
   <meta name="robots" content="index, follow">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="Wally UI - Angular component library">
-  
+
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>