wally-ui 1.0.9 → 1.0.11

package/README.md

@@ -1,6 +1,8 @@
 # Wally UI
 
-Angular component generator CLI
+Where's Wally? Right here — bringing you ready-to-use Angular components.
+
+**[Live Demo](https://walissoncf.github.io/wally-ui/)**
 
 ## Usage
 ```bash

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wally-ui",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "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"
@@ -45,7 +45,7 @@
   "bugs": {
     "url": "https://github.com/WalissonCF/wally-ui/issues"
   },
-  "homepage": "https://github.com/WalissonCF/wally-ui#readme",
+  "homepage": "https://walissoncf.github.io/wally-ui/",
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^24.5.1",

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

@@ -1,12 +1,33 @@
-<button class="
+<button [type]="buttonType()" [disabled]="buttonDisabled() || buttonLoading()" class="
+        group
         w-full
-        bg-[#0a0a0a]
-        dark:bg-white
+        flex items-center justify-center
+        bg-[#0a0a0a] hover:bg-[#0a0a0a]/85
+        disabled:bg-[#0a0a0a]/85
+        dark:bg-white dark:hover:bg-white/85
+        dark:disabled:bg-white/85
+        disabled:pointer-events-none
         p-2.5
         rounded-md
+        transition delay-150 duration-300 ease-in-out
+        antialiased
+        cursor-pointer
     ">
+
+    @if (buttonLoading()) {
+    <svg class="mr-3 -ml-1 size-4 animate-spin dark:text-[#0a0a0a]" 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>
+    }
+
     <span class="
     text-white
+    text-sm
+    font-medium
     dark:text-[#0a0a0a]
     ">
         {{ buttonText() }}

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

@@ -1,10 +1,17 @@
 import { Component, input, InputSignal } from '@angular/core';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'wally-button',
-  imports: [],
+  imports: [
+    CommonModule
+  ],
+  // standalone: true, (If your application is lower than Angular 19, uncomment this line)
   templateUrl: './button.html',
 })
 export class Button {
   buttonText: InputSignal<string> = input<string>('Add your button text here');
+  buttonType: InputSignal<string> = input<string>('button');
+  buttonDisabled: InputSignal<boolean> = input<boolean>(false);
+  buttonLoading: InputSignal<boolean> = input<boolean>(false);
 }

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

@@ -1,4 +1,23 @@
-<p>home works!</p>
-<div class="p-4">
-    <wally-button></wally-button>
-</div>
+<div class="h-dvh antialiased font-mono">
+    <div class="w-full h-full flex flex-col items-center justify-center">
+        <div class="max-w-md">
+            <h1 class="text-2xl font-bold text-[#0a0a0a] dark:text-white">
+                Wally UI
+            </h1>
+            <h2 class="text-xl font-semibold text-[#0a0a0a] dark:text-white">
+                Where's Wally? Right here!
+            </h2>
+            <p class="mt-4 text-gray-700 dark:text-gray-400">
+                Stop searching for the perfect Angular components. Wally UI brings you a
+                collection of ready-to-use, beautifully crafted components that integrate
+                seamlessly with your projects.
+            </p>
+        </div>
+
+        <code
+            class="w-md max-w-md mt-6 block bg-gray-200 dark:bg-[#121212] dark:text-white text-[#0a0a0a] p-4 rounded-md text-sm cursor-pointer hover:opacity-85 transition-colorsselect-all"
+            onclick="navigator.clipboard.writeText('npx wally-ui add button')">
+            <pre class="m-0">$ npx wally-ui add button</pre>
+        </code>
+    </div>
+</div>