@brickclay-org/ui 0.0.4 → 0.0.5

package/README.md

@@ -22,12 +22,16 @@ A powerful calendar suite with advanced date and time selection capabilities. Th
 
 A customizable toggle/switch component with support for Angular forms integration via `ngModel` and reactive forms. Features three size variants (small, medium, large), disabled state, and full accessibility support.
 
+### Checkbox Component
+
+A fully accessible checkbox component with Angular forms integration. Features four size variants (small, medium, large, extra-large), disabled state, keyboard navigation, and seamless integration with both template-driven and reactive forms.
+
 *More components coming soon...*
 
 ## Installation
 
 ```bash
-npm install @brickclay-org/ui
+npm i @brickclay-org/ui@0.0.5
 ```
 
 ### Peer Dependencies
@@ -591,6 +595,248 @@ The toggle component includes:
 - Focus visible ring for keyboard users
 - Disabled state properly communicated to assistive technologies
 
+## ☑️ Checkbox
+
+A fully accessible checkbox component that integrates seamlessly with Angular forms. Supports both template-driven forms (`ngModel`) and reactive forms, with four size variants and comprehensive accessibility features.
+
+### CheckboxComponent
+
+A standalone checkbox component that implements `ControlValueAccessor` for seamless Angular forms integration.
+
+#### Basic Example
+
+```typescript
+import { CheckboxComponent } from '@brickclay/ui';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  template: `
+    <brickclay-checkbox
+      [(ngModel)]="isAccepted"
+      [label]="'I agree to the terms and conditions'"
+      (changed)="onCheckboxChange($event)">
+    </brickclay-checkbox>
+  `,
+  imports: [CheckboxComponent, FormsModule]
+})
+export class MyComponent {
+  isAccepted = false;
+
+  onCheckboxChange(value: boolean) {
+    console.log('Checkbox state:', value);
+  }
+}
+```
+
+#### Component Selector
+
+`<brickclay-checkbox>`
+
+#### Inputs
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `label` | `string` | `''` | Optional label text displayed next to the checkbox |
+| `disabled` | `boolean` | `false` | Disables the checkbox interaction |
+| `size` | `'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Size of the checkbox. Options: `'sm'` (14px), `'md'` (16px), `'lg'` (18px), `'xl'` (20px) |
+
+#### Outputs
+
+| Output | Type | Description |
+|--------|------|-------------|
+| `changed` | `EventEmitter<boolean>` | Emitted when checkbox state changes (returns new boolean value) |
+
+#### Features
+
+- ✅ **Angular Forms Integration** - Full support for `ngModel` and reactive forms
+- ✅ **Four Size Variants** - Small (14px), Medium (16px), Large (18px), Extra Large (20px)
+- ✅ **Accessibility** - ARIA attributes, keyboard navigation (Enter/Space), and screen reader support
+- ✅ **Disabled State** - Visual and functional disabled state
+- ✅ **Keyboard Support** - Full keyboard navigation with Enter and Space keys
+- ✅ **Focus Management** - Focus visible ring for keyboard users
+- ✅ **Event Handling** - `changed` event for state change notifications
+
+#### Usage Examples
+
+**Basic Checkbox with ngModel:**
+
+```typescript
+import { CheckboxComponent } from '@brickclay/ui';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  template: `
+    <brickclay-checkbox
+      [(ngModel)]="isChecked"
+      [label]="'Accept terms'">
+    </brickclay-checkbox>
+  `,
+  imports: [CheckboxComponent, FormsModule]
+})
+export class MyComponent {
+  isChecked = false;
+}
+```
+
+**Different Sizes:**
+
+```typescript
+<brickclay-checkbox
+  [(ngModel)]="value1"
+  [size]="'sm'"
+  [label]="'Small Checkbox'">
+</brickclay-checkbox>
+
+<brickclay-checkbox
+  [(ngModel)]="value2"
+  [size]="'md'"
+  [label]="'Medium Checkbox'">
+</brickclay-checkbox>
+
+<brickclay-checkbox
+  [(ngModel)]="value3"
+  [size]="'lg'"
+  [label]="'Large Checkbox'">
+</brickclay-checkbox>
+
+<brickclay-checkbox
+  [(ngModel)]="value4"
+  [size]="'xl'"
+  [label]="'Extra Large Checkbox'">
+</brickclay-checkbox>
+```
+
+**Disabled State:**
+
+```typescript
+<brickclay-checkbox
+  [ngModel]="true"
+  [disabled]="true"
+  [label]="'Disabled Checkbox'">
+</brickclay-checkbox>
+```
+
+**With Event Handler:**
+
+```typescript
+@Component({
+  template: `
+    <brickclay-checkbox
+      [(ngModel)]="newsletterSubscribed"
+      [label]="'Subscribe to newsletter'"
+      (changed)="onNewsletterToggle($event)">
+    </brickclay-checkbox>
+  `
+})
+export class MyComponent {
+  newsletterSubscribed = false;
+
+  onNewsletterToggle(subscribed: boolean) {
+    if (subscribed) {
+      this.subscribeToNewsletter();
+    } else {
+      this.unsubscribeFromNewsletter();
+    }
+  }
+}
+```
+
+**Reactive Forms Integration:**
+
+```typescript
+import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { CheckboxComponent } from '@brickclay/ui';
+
+@Component({
+  template: `
+    <form [formGroup]="registrationForm">
+      <brickclay-checkbox
+        formControlName="acceptTerms"
+        [label]="'I accept the terms and conditions'">
+      </brickclay-checkbox>
+      
+      <brickclay-checkbox
+        formControlName="receiveUpdates"
+        [label]="'Receive product updates'">
+      </brickclay-checkbox>
+    </form>
+  `,
+  imports: [CheckboxComponent, ReactiveFormsModule]
+})
+export class RegistrationComponent {
+  registrationForm: FormGroup;
+
+  constructor(private fb: FormBuilder) {
+    this.registrationForm = this.fb.group({
+      acceptTerms: [false, Validators.requiredTrue],
+      receiveUpdates: [false]
+    });
+  }
+}
+```
+
+**Without Label:**
+
+```typescript
+<brickclay-checkbox
+  [(ngModel)]="isSelected"
+  [size]="'md'">
+</brickclay-checkbox>
+```
+
+**Multiple Checkboxes:**
+
+```typescript
+@Component({
+  template: `
+    <div>
+      <brickclay-checkbox
+        *ngFor="let option of options"
+        [(ngModel)]="option.selected"
+        [label]="option.label"
+        (changed)="onOptionChange(option)">
+      </brickclay-checkbox>
+    </div>
+  `
+})
+export class MyComponent {
+  options = [
+    { label: 'Option 1', selected: false },
+    { label: 'Option 2', selected: false },
+    { label: 'Option 3', selected: false }
+  ];
+
+  onOptionChange(option: any) {
+    console.log(`${option.label} is now ${option.selected ? 'selected' : 'deselected'}`);
+  }
+}
+```
+
+#### Styling
+
+The checkbox component uses size variants:
+
+- **Small**: `sm` - 14px × 14px
+- **Medium**: `md` - 16px × 16px (Default)
+- **Large**: `lg` - 18px × 18px
+- **Extra Large**: `xl` - 20px × 20px
+
+The component includes built-in styles for:
+- Checked state (black background with white checkmark)
+- Unchecked state (white background with gray border)
+- Hover states (darker border on hover)
+- Disabled states (gray background and border)
+- Focus ring for accessibility (blue ring with offset)
+
+#### Accessibility
+
+The checkbox component includes:
+- Keyboard navigation support (Enter and Space keys)
+- Focus visible ring for keyboard users
+- Proper ARIA attributes
+- Disabled state properly communicated to assistive technologies
+- Tab navigation support
+
 ## 📐 TypeScript Interfaces
 
 ### CalendarRange
@@ -787,6 +1033,12 @@ For issues, feature requests, or contributions, please visit our [GitHub reposit
   - Disabled state support
   - Full accessibility features
   - Customizable styling
+- ✅ Checkbox component
+  - Angular forms integration (ngModel & reactive forms)
+  - Four size variants (small, medium, large, extra-large)
+  - Disabled state support
+  - Full keyboard navigation support
+  - Complete accessibility features
 - ✅ TypeScript definitions
 - ✅ Comprehensive documentation
 

package/fesm2022/brickclay-org-ui.mjs

@@ -2314,6 +2314,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Output
             }] } });
 
+class CheckboxComponent {
+    // Mapping: sm=14px, md=16px, lg=18px, xl=20px
+    size = 'md';
+    label = '';
+    disabled = false;
+    changed = new EventEmitter();
+    isChecked = false;
+    onChange = (_) => { };
+    onTouched = () => { };
+    toggle() {
+        if (this.disabled)
+            return;
+        this.isChecked = !this.isChecked;
+        this.onChange(this.isChecked);
+        this.onTouched();
+        this.changed.emit(this.isChecked);
+    }
+    writeValue(value) {
+        this.isChecked = value;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CheckboxComponent, isStandalone: true, selector: "brickclay-checkbox", inputs: { size: "size", label: "label", disabled: "disabled" }, outputs: { changed: "changed" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CheckboxComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<div\r\n  class=\"inline-flex items-center gap-2 cursor-pointer group outline-none\"\r\n  (click)=\"toggle()\"\r\n  (keydown.enter)=\"toggle()\"\r\n  (keydown.space)=\"$event.preventDefault(); toggle()\"\r\n  tabindex=\"0\"\r\n  [class.cursor-not-allowed]=\"disabled\"\r\n  [attr.aria-disabled]=\"disabled\">\r\n\r\n  <div\r\n    class=\"relative flex items-center justify-center border-2 transition-all duration-200 ease-in-out\"\r\n    [ngClass]=\"[\r\n      size === 'sm' ? 'rounded-[3px]' : '',\r\n      size === 'md' ? 'rounded' : '',\r\n      size === 'lg' ? 'rounded' : '',\r\n      size === 'xl' ? 'rounded-md' : '',\r\n\r\n      size === 'sm' ? 'w-[14px] h-[14px]' : '',\r\n      size === 'md' ? 'w-[16px] h-[16px]' : '',\r\n      size === 'lg' ? 'w-[18px] h-[18px]' : '',\r\n      size === 'xl' ? 'w-[20px] h-[20px]' : '',\r\n\r\n      isChecked && !disabled ? 'bg-black border-black' : '',\r\n      !isChecked && !disabled ? 'bg-white border-gray-300 group-hover:border-gray-400' : '',\r\n\r\n      disabled && isChecked ? 'bg-gray-300 border-gray-300' : '',\r\n      disabled && !isChecked ? 'bg-gray-100 border-gray-200' : '',\r\n\r\n      'group-focus-visible:ring-2 group-focus-visible:ring-blue-600 group-focus-visible:ring-offset-2'\r\n    ]\"\r\n  >\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"3.5\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      class=\"text-white pointer-events-none transition-opacity duration-200\"\r\n      [class.opacity-0]=\"!isChecked\"\r\n      [class.opacity-100]=\"isChecked\"\r\n    [class.w-[10.5px]]=\"size === 'sm'\"\r\n    [class.w-[12px]]=\"size === 'md'\"\r\n    [class.w-[13.5px]]=\"size === 'lg'\"\r\n    [class.w-[14px]]=\"size === 'xl'\"\r\n    >\r\n    <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n    </svg>\r\n  </div>\r\n\r\n  <span\r\n    *ngIf=\"label\"\r\n    class=\"font-medium select-none\"\r\n    [class.text-xs]=\"size === 'sm'\"\r\n    [class.text-sm]=\"size !== 'sm'\"\r\n    [class.text-gray-900]=\"!disabled\"\r\n    [class.text-gray-400]=\"disabled\"\r\n  >\r\n    {{ label }}\r\n  </span>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'brickclay-checkbox', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CheckboxComponent),
+                            multi: true
+                        }
+                    ], template: "<div\r\n  class=\"inline-flex items-center gap-2 cursor-pointer group outline-none\"\r\n  (click)=\"toggle()\"\r\n  (keydown.enter)=\"toggle()\"\r\n  (keydown.space)=\"$event.preventDefault(); toggle()\"\r\n  tabindex=\"0\"\r\n  [class.cursor-not-allowed]=\"disabled\"\r\n  [attr.aria-disabled]=\"disabled\">\r\n\r\n  <div\r\n    class=\"relative flex items-center justify-center border-2 transition-all duration-200 ease-in-out\"\r\n    [ngClass]=\"[\r\n      size === 'sm' ? 'rounded-[3px]' : '',\r\n      size === 'md' ? 'rounded' : '',\r\n      size === 'lg' ? 'rounded' : '',\r\n      size === 'xl' ? 'rounded-md' : '',\r\n\r\n      size === 'sm' ? 'w-[14px] h-[14px]' : '',\r\n      size === 'md' ? 'w-[16px] h-[16px]' : '',\r\n      size === 'lg' ? 'w-[18px] h-[18px]' : '',\r\n      size === 'xl' ? 'w-[20px] h-[20px]' : '',\r\n\r\n      isChecked && !disabled ? 'bg-black border-black' : '',\r\n      !isChecked && !disabled ? 'bg-white border-gray-300 group-hover:border-gray-400' : '',\r\n\r\n      disabled && isChecked ? 'bg-gray-300 border-gray-300' : '',\r\n      disabled && !isChecked ? 'bg-gray-100 border-gray-200' : '',\r\n\r\n      'group-focus-visible:ring-2 group-focus-visible:ring-blue-600 group-focus-visible:ring-offset-2'\r\n    ]\"\r\n  >\r\n    <svg\r\n      xmlns=\"http://www.w3.org/2000/svg\"\r\n      viewBox=\"0 0 24 24\"\r\n      fill=\"none\"\r\n      stroke=\"currentColor\"\r\n      stroke-width=\"3.5\"\r\n      stroke-linecap=\"round\"\r\n      stroke-linejoin=\"round\"\r\n      class=\"text-white pointer-events-none transition-opacity duration-200\"\r\n      [class.opacity-0]=\"!isChecked\"\r\n      [class.opacity-100]=\"isChecked\"\r\n    [class.w-[10.5px]]=\"size === 'sm'\"\r\n    [class.w-[12px]]=\"size === 'md'\"\r\n    [class.w-[13.5px]]=\"size === 'lg'\"\r\n    [class.w-[14px]]=\"size === 'xl'\"\r\n    >\r\n    <polyline points=\"20 6 9 17 4 12\"></polyline>\r\n    </svg>\r\n  </div>\r\n\r\n  <span\r\n    *ngIf=\"label\"\r\n    class=\"font-medium select-none\"\r\n    [class.text-xs]=\"size === 'sm'\"\r\n    [class.text-sm]=\"size !== 'sm'\"\r\n    [class.text-gray-900]=\"!disabled\"\r\n    [class.text-gray-400]=\"disabled\"\r\n  >\r\n    {{ label }}\r\n  </span>\r\n</div>\r\n" }]
+        }], propDecorators: { size: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], changed: [{
+                type: Output
+            }] } });
+
 /*
  * Public API Surface of brickclay-lib
  */
@@ -2322,5 +2379,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { BrickclayLib, CalendarManagerService, CalendarModule, CustomCalendarComponent, ScheduledDatePickerComponent, TimePickerComponent, ToggleComponent };
+export { BrickclayLib, CalendarManagerService, CalendarModule, CheckboxComponent, CustomCalendarComponent, ScheduledDatePickerComponent, TimePickerComponent, ToggleComponent };
 //# sourceMappingURL=brickclay-org-ui.mjs.map