feat: add checkbox atom component

projects/my-wallet-ds/src/lib/atoms/checkbox/checkbox.component.css

@@ -0,0 +1,50 @@
+label {
+    cursor: pointer;
+}
+
+.checkbox-hidden {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+
+    &:checked + .checkmark::after {
+        content: "";
+        position: absolute;
+        left: 11px;
+        bottom: 3px;
+        width: 6px;
+        height: 18px;
+        border: solid #0ea5e9;
+        border-width: 0 6px 6px 0;
+        transform: rotate(45deg);
+        box-shadow: 2px 4px 4px -3px #0ea5e9;
+    }
+
+    &:checked + .checkmark::before {
+        opacity: 1;
+    }
+
+}
+
+.checkmark {
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    border: 1px solid #606463;
+    position: relative;
+    transition: all 0.3s ease;
+    
+    &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: 4px;
+    pointer-events: none;
+    transition: all 0.3s ease;
+    }
+}

projects/my-wallet-ds/src/lib/atoms/checkbox/checkbox.component.html

@@ -0,0 +1,5 @@
+
+  <label>
+    <input type="checkbox" class="checkbox-hidden" (change)="checked.emit(checkbox.checked)" #checkbox>
+    <span class="checkmark"></span> 
+  </label>

projects/my-wallet-ds/src/lib/atoms/checkbox/checkbox.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CheckboxComponent } from './checkbox.component';
+
+describe('CheckboxComponent', () => {
+  let component: CheckboxComponent;
+  let fixture: ComponentFixture<CheckboxComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CheckboxComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(CheckboxComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/my-wallet-ds/src/lib/atoms/checkbox/checkbox.component.ts

@@ -0,0 +1,12 @@
+import { Component, output } from '@angular/core';
+
+@Component({
+  selector: 'mw-checkbox',
+  standalone: true,
+  imports: [],
+  templateUrl: './checkbox.component.html',
+  styleUrl: './checkbox.component.css'
+})
+export class CheckboxComponent {
+  checked = output<boolean>()
+}