wally-ui 1.4.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wally-ui",
-  "version": "1.4.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/input/input.html

@@ -1,5 +1,5 @@
 @if (label()) {
-<div class="py-1">
+<div class="py-2">
     <label [for]="inputId" class="block text-sm font-medium text-[#0a0a0a] dark:text-white">
         {{ label() }}
     </label>
@@ -7,8 +7,9 @@
 }
 
 <div class="relative">
-    <input [id]="inputId" [type]="currentInputType()" [value]="value()" [disabled]="disabled || loading()"
-        [placeholder]="placeholder()" [autocomplete]="autocomplete() || (type() === 'password' ? 'new-password' : '')" 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
         w-full
@@ -18,7 +19,7 @@
         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-80 disabled:pointer-events-none
+        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',
@@ -62,7 +63,7 @@
 </div>
 
 @if (errorMessage()) {
-<div class="py-1">
+<div class="py-1" [id]="inputId + '-error'">
     <span class="text-sm text-red-500 font-medium">
         {{ errorMessage() }}
     </span>

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

@@ -32,9 +32,17 @@ export class Input implements ControlValueAccessor {
   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>('');
@@ -53,7 +61,7 @@ export class Input implements ControlValueAccessor {
     return 'password';
   });
 
-  disabled: boolean = false;
+  private internalDisabled = signal<boolean>(false);
 
   private onChange = (value: any) => { };
   private onTouched = () => { };
@@ -73,7 +81,7 @@ export class Input implements ControlValueAccessor {
   }
 
   setDisabledState?(isDisabled: boolean): void {
-    this.disabled = isDisabled;
+    this.internalDisabled.set(isDisabled);
   }
 
   togglePasswordVisibility(): 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.

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

@@ -76,6 +76,7 @@ onSubmit() {
   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
@@ -84,5 +85,6 @@ onSubmit() {
   propertyPlaceholder: `placeholder: string = '';`,
   propertyLoading: `loading: boolean = false;`,
   propertyValid: `valid: boolean = false;`,
-  propertyError: `errorMessage: string = '';`
+  propertyError: `errorMessage: string = '';`,
+  propertyDisabled: `disabled: boolean = false;`
 };

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

@@ -11,13 +11,6 @@
       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">
@@ -67,6 +60,10 @@
             <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>
@@ -211,6 +208,17 @@
           </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>
@@ -323,6 +331,13 @@
           </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 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">Disables the input when true - shows visual disabled state and prevents interaction</p>
+        </div>
       </div>
     </section>
 
@@ -333,21 +348,11 @@
       <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>
+            <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">
-            Different input sizes: small, medium, large for various layouts.
+            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

@@ -61,6 +61,7 @@ export class InputDocs {
   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
@@ -70,6 +71,7 @@ export class InputDocs {
   propertyLoadingCode = getFormattedCode(InputCodeExamples.propertyLoading, 'typescript');
   propertyValidCode = getFormattedCode(InputCodeExamples.propertyValid, 'typescript');
   propertyErrorCode = getFormattedCode(InputCodeExamples.propertyError, 'typescript');
+  propertyDisabledCode = getFormattedCode(InputCodeExamples.propertyDisabled, 'typescript');
 
   constructor(
     private aiPromptService: AiPromptService,