🐛 fix(checkbox): adding disabled state for reactive forms usage

.gitignore

@@ -50,4 +50,5 @@ Thumbs.db
 .clinerules
 .clineignore
 memory-bank
-.amazonq
+.amazonq
+.kilocode

apps/web/public/components/avatar/doc/api.md

@@ -4,13 +4,14 @@
 
 | Property      | Description                                       | Type                                        | Default   |
 | ------------- | ------------------------------------------------- | ------------------------------------------- | --------- |
-| `[zSize]`     | Avatar size variant                               | `sm \| default \| md \| lg \| xl \| number` | `default` |
-| `[zShape]`    | Avatar shape                                      | `circle \| rounded \| square`               | `circle`  |
-| `[zStatus]`   | Status indicator badge                            | `online \| offline \| doNotDisturb \| away` |           |
-| `[zSrc]`      | Image source URL                                  | `string`                                    |           |
+| `[class]`     | Additional CSS classes                            | `string`                                    | `''`      |
 | `[zAlt]`      | Image alt text for accessibility                  | `string`                                    | `''`      |
 | `[zFallback]` | Fallback text displayed while loading or on error | `string`                                    | `''`      |
-| `[class]`     | Additional CSS classes                            | `string`                                    | `''`      |
+| `[zPriority]` | Should image load with high priority              | `boolean`                                   | `false`   |
+| `[zShape]`    | Avatar shape                                      | `circle \| rounded \| square`               | `circle`  |
+| `[zSize]`     | Avatar size variant                               | `sm \| default \| md \| lg \| xl \| number` | `default` |
+| `[zSrc]`      | Image source URL                                  | `string \| SafeUrl`                         | `''`      |
+| `[zStatus]`   | Status indicator badge                            | `online \| offline \| doNotDisturb \| away` |           |
 
 [z-avatar-group] Component
 

apps/web/public/components/badge/demo/default.md

@@ -17,7 +17,7 @@ import { ZardBadgeComponent } from '../badge.component';
         <z-badge zType="outline">Outline</z-badge>
       </div>
       <div class="flex w-full flex-wrap gap-2">
-        <z-badge zType="secondary" class="bg-blue-500 text-white dark:bg-blue-600">
+        <z-badge zType="secondary" zShape="pill" class="bg-blue-500 text-white dark:bg-blue-600">
           <z-icon zType="badge-check" />
           Verified
         </z-badge>

apps/web/public/components/checkbox/demo/default.md

@@ -1,17 +1,17 @@
 ```angular-ts showLineNumbers copyButton
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
 import { ZardCheckboxComponent } from '../checkbox.component';
 
 @Component({
   selector: 'z-demo-checkbox-default',
   imports: [ZardCheckboxComponent, FormsModule],
-  standalone: true,
   template: `
     <span z-checkbox></span>
     <span z-checkbox [(ngModel)]="checked">Default Checked</span>
   `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ZardDemoCheckboxDefaultComponent {
   checked = true;

apps/web/public/components/checkbox/demo/destructive.md

@@ -1,17 +1,17 @@
 ```angular-ts showLineNumbers copyButton
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
 import { ZardCheckboxComponent } from '../checkbox.component';
 
 @Component({
   selector: 'z-demo-checkbox-destructive',
   imports: [ZardCheckboxComponent, FormsModule],
-  standalone: true,
   template: `
     <span z-checkbox zType="destructive"></span>
     <span z-checkbox zType="destructive" [(ngModel)]="checked">Destructive Checked</span>
   `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ZardDemoCheckboxDestructiveComponent {
   checked = true;

apps/web/public/components/checkbox/demo/disabled.md

@@ -1,20 +1,37 @@
 ```angular-ts showLineNumbers copyButton
-import { Component } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { ChangeDetectionStrategy, Component, type OnInit } from '@angular/core';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { ZardCheckboxComponent } from '../checkbox.component';
 
 @Component({
   selector: 'z-demo-checkbox-disabled',
-  imports: [ZardCheckboxComponent, FormsModule],
-  standalone: true,
+  imports: [ZardCheckboxComponent, FormsModule, ReactiveFormsModule],
   template: `
-    <span z-checkbox disabled>Disabled</span>
-    <span z-checkbox disabled [(ngModel)]="checked">Disabled</span>
+    <div class="flex flex-col gap-8">
+      <form [formGroup]="form">
+        <span z-checkbox formControlName="acceptTerms">Accept Terms</span>
+        <span z-checkbox formControlName="newsletter">Subscribe</span>
+      </form>
+
+      <div>
+        <span z-checkbox [zDisabled]="true">Disabled</span>
+        <span z-checkbox [zDisabled]="true" [(ngModel)]="checked">Disabled</span>
+      </div>
+    </div>
   `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ZardDemoCheckboxDisabledComponent {
+export class ZardDemoCheckboxDisabledComponent implements OnInit {
   checked = true;
+  form = new FormGroup({
+    acceptTerms: new FormControl(false),
+    newsletter: new FormControl(false),
+  });
+
+  ngOnInit() {
+    this.form.disable();
+  }
 }
 
 ```

apps/web/public/components/checkbox/demo/shape.md

@@ -1,20 +1,21 @@
 ```angular-ts showLineNumbers copyButton
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
 import { ZardCheckboxComponent } from '../checkbox.component';
 
 @Component({
   selector: 'z-demo-checkbox-shape',
   imports: [ZardCheckboxComponent, FormsModule],
-  standalone: true,
   template: `
-    <span z-checkbox zShape="circle" [(ngModel)]="checked">Cicle</span>
-    <span z-checkbox zShape="square" [(ngModel)]="checked">Square</span>
+    <span z-checkbox zShape="circle" [(ngModel)]="checked1">Circle</span>
+    <span z-checkbox zShape="square" [(ngModel)]="checked2">Square</span>
   `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ZardDemoCheckboxShapeComponent {
-  checked = true;
+  checked1 = true;
+  checked2 = true;
 }
 
 ```

apps/web/public/components/checkbox/doc/api.md

@@ -6,8 +6,9 @@
 
 To get a customized checkbox, just pass the following props to the directive.
 
-| Property | Description   | Type                          | Default   |
-| -------- | ------------- | ----------------------------- | --------- |
-| `zType`  | chekbox type  | `default \| destructive`      | `default` |
-| `zSize`  | chekbox size  | `default \| sm \| lg \| icon` | `default` |
-| `zShape` | chekbox shape | `default \| circle \| square` | `default` |
+| Property    | Description             | Type                          | Default   |
+| ----------- | ----------------------- | ----------------------------- | --------- |
+| `zType`     | checkbox type           | `default \| destructive`      | `default` |
+| `zSize`     | checkbox size           | `default \| lg `              | `default` |
+| `zShape`    | checkbox shape          | `default \| circle \| square` | `default` |
+| `zDisabled` | checkbox disabled state | `boolean`                     | `false`   |

apps/web/public/installation/manual/avatar.md

@@ -1,30 +1,43 @@
 
 
 ```angular-ts title="avatar.component.ts" expandable="true" expandableTitle="Expand" copyButton showLineNumbers
-import { ChangeDetectionStrategy, Component, computed, input, signal, ViewEncapsulation } from '@angular/core';
-
-import { avatarVariants, imageVariants, type ZardImageVariants, type ZardAvatarVariants } from './avatar.variants';
+import { NgOptimizedImage } from '@angular/common';
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  input,
+  signal,
+  ViewEncapsulation,
+} from '@angular/core';
+import type { SafeUrl } from '@angular/platform-browser';
 
 import { mergeClasses } from '@/shared/utils/merge-classes';
 
+import { avatarVariants, imageVariants, type ZardAvatarVariants, type ZardImageVariants } from './avatar.variants';
+
 export type ZardAvatarStatus = 'online' | 'offline' | 'doNotDisturb' | 'away';
 
 @Component({
   selector: 'z-avatar, [z-avatar]',
-  standalone: true,
+  imports: [NgOptimizedImage],
   template: `
     @if (zFallback() && (!zSrc() || !imageLoaded())) {
       <span class="absolute z-0 m-auto text-base">{{ zFallback() }}</span>
     }
 
     @if (zSrc() && !imageError()) {
       <img
-        [src]="zSrc()"
+        fill
+        sizes="100%"
         [alt]="zAlt()"
         [class]="imgClasses()"
-        [hidden]="!imageLoaded()"
-        (load)="onImageLoad()"
+        [ngSrc]="zSrc()"
+        [priority]="zPriority()"
         (error)="onImageError()"
+        (load)="onImageLoad()"
       />
     }
 
@@ -41,7 +54,7 @@ export type ZardAvatarStatus = 'online' | 'offline' | 'doNotDisturb' | 'away';
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round"
-            class="absolute -right-[5px] -bottom-[5px] z-20 h-5 w-5 text-green-500"
+            class="absolute -right-1.25 -bottom-1.25 z-20 h-5 w-5 text-green-500"
           >
             <circle cx="12" cy="12" r="10" fill="currentColor" />
           </svg>
@@ -57,7 +70,7 @@ export type ZardAvatarStatus = 'online' | 'offline' | 'doNotDisturb' | 'away';
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round"
-            class="absolute -right-[5px] -bottom-[5px] z-20 h-5 w-5 text-red-500"
+            class="absolute -right-1.25 -bottom-1.25 z-20 h-5 w-5 text-red-500"
           >
             <circle cx="12" cy="12" r="10" fill="currentColor" />
           </svg>
@@ -73,7 +86,7 @@ export type ZardAvatarStatus = 'online' | 'offline' | 'doNotDisturb' | 'away';
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round"
-            class="absolute -right-[5px] -bottom-[5px] z-20 h-5 w-5 text-red-500"
+            class="absolute -right-1.25 -bottom-1.25 z-20 h-5 w-5 text-red-500"
           >
             <circle cx="12" cy="12" r="10" />
             <path d="M8 12h8" fill="currentColor" />
@@ -90,7 +103,7 @@ export type ZardAvatarStatus = 'online' | 'offline' | 'doNotDisturb' | 'away';
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round"
-            class="absolute -right-[5px] -bottom-[5px] z-20 h-5 w-5 rotate-y-180 text-yellow-400"
+            class="absolute -right-1.25 -bottom-1.25 z-20 h-5 w-5 rotate-y-180 text-yellow-400"
           >
             <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" fill="currentColor" />
           </svg>
@@ -110,18 +123,27 @@ export type ZardAvatarStatus = 'online' | 'offline' | 'doNotDisturb' | 'away';
   exportAs: 'zAvatar',
 })
 export class ZardAvatarComponent {
-  readonly zStatus = input<ZardAvatarStatus>();
-  readonly zShape = input<ZardImageVariants['zShape']>('circle');
-  readonly zSize = input<ZardAvatarVariants['zSize'] | number>('default');
-  readonly zSrc = input<string>();
+  readonly class = input<string>('');
   readonly zAlt = input<string>('');
   readonly zFallback = input<string>('');
-
-  readonly class = input<string>('');
+  readonly zPriority = input(false, { transform: booleanAttribute });
+  readonly zShape = input<ZardImageVariants['zShape']>('circle');
+  readonly zSize = input<ZardAvatarVariants['zSize'] | number>('default');
+  readonly zSrc = input<string | SafeUrl>('');
+  readonly zStatus = input<ZardAvatarStatus>();
 
   protected readonly imageError = signal(false);
   protected readonly imageLoaded = signal(false);
 
+  constructor() {
+    effect(() => {
+      // Reset image state when zSrc changes
+      this.zSrc();
+      this.imageError.set(false);
+      this.imageLoaded.set(false);
+    });
+  }
+
   protected readonly containerClasses = computed(() => {
     const size = this.zSize();
     const zSize = typeof size === 'number' ? undefined : (size as ZardAvatarVariants['zSize']);

apps/web/public/installation/manual/badge.md

@@ -5,13 +5,12 @@ import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation
 
 import type { ClassValue } from 'clsx';
 
-import { badgeVariants, type ZardBadgeVariants } from './badge.variants';
-
 import { mergeClasses } from '@/shared/utils/merge-classes';
 
+import { badgeVariants, type ZardBadgeShapeVariants, type ZardBadgeTypeVariants } from './badge.variants';
+
 @Component({
   selector: 'z-badge',
-  standalone: true,
   template: `
     <ng-content />
   `,
@@ -23,8 +22,8 @@ import { mergeClasses } from '@/shared/utils/merge-classes';
   exportAs: 'zBadge',
 })
 export class ZardBadgeComponent {
-  readonly zType = input<ZardBadgeVariants['zType']>('default');
-  readonly zShape = input<ZardBadgeVariants['zShape']>('default');
+  readonly zType = input<ZardBadgeTypeVariants>('default');
+  readonly zShape = input<ZardBadgeShapeVariants>('default');
 
   readonly class = input<ClassValue>('');
 
@@ -41,14 +40,14 @@ export class ZardBadgeComponent {
 import { cva, type VariantProps } from 'class-variance-authority';
 
 export const badgeVariants = cva(
-  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+  'inline-flex items-center justify-center border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
   {
     variants: {
       zType: {
-        default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
-        secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90 h-5',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 h-5',
         destructive:
-          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 h-5',
         outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
       },
       zShape: {
@@ -63,7 +62,9 @@ export const badgeVariants = cva(
     },
   },
 );
-export type ZardBadgeVariants = VariantProps<typeof badgeVariants>;
+
+export type ZardBadgeTypeVariants = NonNullable<VariantProps<typeof badgeVariants>['zType']>;
+export type ZardBadgeShapeVariants = NonNullable<VariantProps<typeof badgeVariants>['zShape']>;
 
 ```