@foxeltech/angular-ui 0.0.1

package/src/lib/ui/components/drawer/drawer.component.html

@@ -0,0 +1,101 @@
+<div class="drawer-host-wrapper">
+  <a href="/" class="h-[60px] p-4">
+    @if (logo) {
+      <img
+        [src]="logo"
+        class="h-[20px] w-auto transition-all duration-300 ease-in-out"
+        [ngClass]="{ 'scale-90 ml-2': !isExpanded, 'ml-5': isExpanded }"
+      />
+    } @else {
+      <div class="h-[30px] w-auto transition-all duration-300 ease-in-out"></div>
+    }
+  </a>
+  <div class="drawer-container" [@drawerExpand]="getDrawerState()">
+    <!-- Navigation Items -->
+    <nav class="drawer-nav">
+      <ng-container *ngFor="let item of items">
+        <ng-container
+          *ngTemplateOutlet="drawerItem; context: { $implicit: item, level: 0 }"
+        ></ng-container>
+      </ng-container>
+    </nav>
+  </div>
+
+  <!-- Floating Toggle Button on right border -->
+  <button
+    type="button"
+    class="toggle-btn"
+    (click)="toggleDrawer()"
+    [matTooltip]="isExpanded ? 'Collapse' : 'Expand'"
+    matTooltipClass="text-text-primary text-xs font-semibold"
+    matTooltipPosition="right"
+  >
+    <fx-ui-hero-icon
+      [icon]="isExpanded ? 'chevron-left' : 'chevron-right'"
+      [size]="16"
+      class="text-text-primary"
+    ></fx-ui-hero-icon>
+  </button>
+</div>
+
+<!-- Recursive Template for Drawer Items -->
+<ng-template #drawerItem let-item let-level="level">
+  <div class="drawer-item-wrapper">
+    <!-- Item Button/Link -->
+    <a
+      *ngIf="item.route && !item.children"
+      [routerLink]="item.route"
+      class="drawer-item"
+      [class.active]="isActiveRoute(item.route)"
+      [class.has-children]="item.children && item.children.length > 0"
+      [style.paddingLeft.px]="isExpanded ? 16 + level * 16 : 16"
+      [matTooltip]="!isExpanded ? item.label : ''"
+      matTooltipPosition="right"
+      matTooltipClass="text-text-primary text-xs font-semibold"
+      (click)="onItemClick(item, $event)"
+    >
+      <div class="item-content">
+        <fx-ui-hero-icon [icon]="item.icon" [size]="20" class="item-icon"></fx-ui-hero-icon>
+        <span *ngIf="isExpanded" class="item-label">{{ item.label }}</span>
+      </div>
+    </a>
+
+    <button
+      *ngIf="!item.route || item.children"
+      type="button"
+      class="drawer-item"
+      [class.active]="isActiveRoute(item.route)"
+      [class.has-children]="item.children && item.children.length > 0"
+      [style.paddingLeft.px]="isExpanded ? 16 + level * 16 : 16"
+      [matTooltip]="!isExpanded ? item.label : ''"
+      matTooltipPosition="right"
+      matTooltipClass="text-text-primary text-sm font-semibold"
+      (click)="onItemClick(item, $event)"
+    >
+      <div class="item-content">
+        <fx-ui-hero-icon [icon]="item.icon" [size]="20" class="item-icon"></fx-ui-hero-icon>
+        <span *ngIf="isExpanded" class="item-label">{{ item.label }}</span>
+        <fx-ui-hero-icon
+          *ngIf="isExpanded && item.children && item.children.length > 0"
+          [icon]="'chevron-down'"
+          [size]="16"
+          class="chevron-icon"
+          [class.rotated]="isAccordionExpanded(item.id)"
+        ></fx-ui-hero-icon>
+      </div>
+    </button>
+
+    <!-- Accordion Children -->
+    <div
+      *ngIf="item.children && item.children.length > 0"
+      class="accordion-children"
+      [@accordionExpand]="getAccordionState(item.id)"
+    >
+      <ng-container *ngFor="let child of item.children">
+        <ng-container
+          *ngTemplateOutlet="drawerItem; context: { $implicit: child, level: level + 1 }"
+        ></ng-container>
+      </ng-container>
+    </div>
+  </div>
+</ng-template>

package/src/lib/ui/components/flow-connection/flow-connection.component.html

@@ -0,0 +1,10 @@
+<vflow
+  [background]="{
+  type: 'solid',
+  color: `rgba(var(${backgroundColor})`
+}"
+  [nodes]="nodes"
+  [edges]="edges"
+  (onConnect)="handleConnection($event)"
+  [view]="view"
+/>

package/src/lib/ui/components/hero-icon/hero-icon.component.html

@@ -0,0 +1,8 @@
+<ng-heroicons
+  [icon]="icon"
+  [size]="size"
+  [solid]="solid"
+  [outline]="outline"
+  [color]="color"
+  [class]="class"
+/>

package/src/lib/ui/components/input/input.component.html

@@ -0,0 +1,48 @@
+<div class="mb-4 text-left w-full text-text-primary" [class]="class">
+  @if(label){<label class="block txt-field-label">
+    {{ label }}
+    @if (required) {<span class="txt-required">*</span>}
+  </label>
+  }
+
+  <div class="relative">
+    <input
+      appTrimOnBlur
+      [appTrimOnBlurCollapse]="true"
+      [type]="displayType"
+      [placeholder]="placeholder"
+      [disabled]="disabled"
+      [value]="value"
+      (input)="onInput($event)"
+      (blur)="onBlur()"
+      (focus)="onFocus()"
+      [attr.maxlength]="maxlength"
+      [class]="type === 'otp' ? 'input-otp' : 'input-default'"
+      [ngClass]="{
+        'input-invalid': invalid,
+        'pr-8': type === 'password' || suffixIcon,
+        'txt-otp-input': type === 'otp'
+      }"
+    />
+    <button
+      type="button"
+      class="absolute inset-y-0 right-2 flex items-center text-text-primary hover:text-text-secondary"
+      (click)="onSuffixClick()"
+      [disabled]="disabled"
+    >
+      @if (type === 'password') {
+      <i class="material-symbols-outlined text-lg select-none">{{
+        showPassword ? 'visibility_off' : 'visibility'
+      }}</i>
+      } @else if (suffixIcon) {
+      <i [class]="iconClass" class="text-lg select-none">{{ suffixIcon }}</i>
+      }
+    </button>
+  </div>
+
+  @if (invalid){
+  <div class="txt-invalid">
+    {{ getErrorMessage(label) }}
+  </div>
+  }
+</div>

package/src/lib/ui/components/kanban-board/kanban-board.component.html

@@ -0,0 +1,43 @@
+<div class="kanban-board">
+  <div class="kanban-columns">
+    @for (column of columns; track column.id) {
+      <div class="kanban-column">
+        <div class="kanban-column-header">
+          <h3 class="kanban-column-title">{{ column.title }}</h3>
+          <span class="kanban-column-count">{{ column.items.length }}</span>
+        </div>
+        
+        <div
+          class="kanban-column-content"
+          cdkDropList
+          [id]="column.id"
+          [cdkDropListData]="column.items"
+          [cdkDropListConnectedTo]="getColumnIds()"
+          (cdkDropListDropped)="onDrop($event, column.id)"
+        >
+          @for (item of column.items; track $index) {
+            <div class="kanban-item" cdkDrag>
+              <div class="kanban-item-placeholder" *cdkDragPlaceholder></div>
+              
+              @if (itemTemplate) {
+                <ng-container
+                  *ngTemplateOutlet="itemTemplate; context: { $implicit: item, index: $index }"
+                ></ng-container>
+              } @else {
+                <div class="kanban-item-default">
+                  {{ item }}
+                </div>
+              }
+            </div>
+          }
+          
+          @if (column.items.length === 0) {
+            <div class="kanban-column-empty">
+              Drop items here
+            </div>
+          }
+        </div>
+      </div>
+    }
+  </div>
+</div>

package/src/lib/ui/components/loading-panel/loading-panel.component.html

@@ -0,0 +1,51 @@
+<!-- Full-screen glass overlay -->
+<div
+  *ngIf="show"
+  class="fixed inset-0 z-50 flex items-center justify-center"
+  aria-hidden="false"
+  role="alert"
+  aria-busy="true"
+>
+  <div class="absolute inset-0 bg-bg-primary/30 backdrop-blur-xl" aria-hidden="true"></div>
+
+  <div
+    class="relative z-10 flex flex-col items-center gap-4 p-6 rounded-2xl shadow-xl bg-bg-primary/70 border border-border-strong backdrop-bg-primary/70"
+    style="min-width: 220px; max-width: 90%"
+  >
+  <svg fill="rgb(var(--primary))" width="50" height="50" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="4" cy="12" r="0">
+      <animate begin="0;spinner_z0Or.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="0;3" fill="freeze"/>
+      <animate begin="spinner_OLMs.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="4;12" fill="freeze"/>
+      <animate begin="spinner_UHR2.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="12;20" fill="freeze"/>
+      <animate id="spinner_lo66" begin="spinner_Aguh.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0" fill="freeze"/>
+      <animate id="spinner_z0Or" begin="spinner_lo66.end" attributeName="cx" dur="0.001s" values="20;4" fill="freeze"/>
+    </circle>
+    <circle cx="4" cy="12" r="3">
+      <animate begin="0;spinner_z0Or.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="4;12" fill="freeze"/>
+      <animate begin="spinner_OLMs.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="12;20" fill="freeze"/>
+      <animate id="spinner_JsnR" begin="spinner_UHR2.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0" fill="freeze"/>
+      <animate id="spinner_Aguh" begin="spinner_JsnR.end" attributeName="cx" dur="0.001s" values="20;4" fill="freeze"/>
+      <animate begin="spinner_Aguh.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="0;3" fill="freeze"/>
+    </circle>
+    <circle cx="12" cy="12" r="3">
+      <animate begin="0;spinner_z0Or.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="12;20" fill="freeze"/>
+      <animate id="spinner_hSjk" begin="spinner_OLMs.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0" fill="freeze"/>
+      <animate id="spinner_UHR2" begin="spinner_hSjk.end" attributeName="cx" dur="0.001s" values="20;4" fill="freeze"/>
+      <animate begin="spinner_UHR2.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="0;3" fill="freeze"/>
+      <animate begin="spinner_Aguh.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="4;12" fill="freeze"/>
+    </circle>
+    <circle cx="20" cy="12" r="3">
+      <animate id="spinner_4v5M" begin="0;spinner_z0Or.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0" fill="freeze"/>
+      <animate id="spinner_OLMs" begin="spinner_4v5M.end" attributeName="cx" dur="0.001s" values="20;4" fill="freeze"/>
+      <animate begin="spinner_OLMs.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="0;3" fill="freeze"/>
+      <animate begin="spinner_UHR2.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="4;12" fill="freeze"/>
+      <animate begin="spinner_Aguh.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="12;20" fill="freeze"/>
+    </circle>
+  </svg>
+  
+
+    <div *ngIf="message" class="text-sm text-text-primary text-center">
+      {{ message }}
+    </div>
+  </div>
+</div>

package/src/lib/ui/components/radio-button/radio-button.component.html

@@ -0,0 +1,35 @@
+<div class="w-full rounded-lg overflow-hidden" [class]="class" role="radiogroup">
+  @if (label){
+  <label class="txt-field-label">
+    {{ label }}
+    @if(required){<span class="txt-required">*</span>} </label
+  >}
+
+  <button
+    *ngFor="let opt of options"
+    type="button"
+    role="radio"
+    [attr.aria-checked]="value === opt.value"
+    (click)="onSelectValue(opt.value)"
+    [disabled]="disabled"
+    [class.text-gray-900]="value !== opt.value"
+    class="flex-1 px-normal w-full flex items-center gap-normal h-10 rounded-md hover:bg-bg-hover transition-all duration-150 disabled:opacity-60 disabled:cursor-not-allowed"
+  >
+    <span
+      [ngClass]="{
+        'radio-checked': value === opt.value,
+        'radio-uncheck': value !== opt.value
+      }"
+      class="radio-container"
+    >
+      @if(value === opt.value) {<span class="radio-dot"></span>}
+    </span>
+
+    <span class="txt-default mb-0">{{ opt.label }}</span>
+  </button>
+  @if (invalid){
+  <div class="txt-invalid">
+    {{ getErrorMessage(label) }}
+  </div>
+  }
+</div>

package/src/lib/ui/components/radio-button-toggle/radio-button-toggle.component.html

@@ -0,0 +1,34 @@
+<div class="flex flex-col text-left mb-4 w-full" [class]="class">
+  @if(label){<label class="txt-field-label">
+    {{ label }}
+    @if(required) {<span class="txt-required">*</span>} </label
+  >}
+
+  <div class="inline-flex w-full rounded-lg overflow-hidden" role="radiogroup">
+    @for(opt of options; track opt){<button
+      type="button"
+      role="radio"
+      [attr.aria-checked]="value === opt.value"
+      (click)="onSelectValue(opt.value)"
+      [disabled]="disabled"
+      [class.text-gray-900]="value !== opt.value"
+      class="flex-1 bg-bg-primary flex items-center pl-normal gap-normal h-10 rounded-md hover:bg-bg-hover transition-all duration-150 disabled:opacity-60 disabled:cursor-not-allowed"
+    >
+      <span
+        [ngClass]="{
+          'radio-checked': value === opt.value,
+          'radio-uncheck': value !== opt.value
+        }"
+        class="radio-container"
+      >
+        @if(value === opt.value) {<span class="radio-dot"></span>}
+      </span>
+
+      <span class="txt-field-label mb-0">{{ opt.label }}</span></button
+    >}
+  </div>
+
+  @if(invalid){
+  <div class="txt-invalid">{{ getErrorMessage(label) }}</div>
+  }
+</div>

package/src/lib/ui/components/rich-text-area/rich-text-area.component.html

@@ -0,0 +1,3 @@
+<div class="w-full rounded-2xl shadow-sm p-1 bg-bg-primary">
+  <div #editorContainer class="min-h-[200px] text-base"></div>
+</div>

package/src/lib/ui/components/search-bar/search-bar.component.html

@@ -0,0 +1,22 @@
+<div class="relative">
+  <fx-ui-hero-icon icon="magnifying-glass" [size]="18" class="absolute left-1 top-[3px] text-text-primary"></fx-ui-hero-icon>
+  <input
+    type="text"
+    class="input-default px-9"
+    [attr.placeholder]="placeholder"
+    [disabled]="disabled"
+    [value]="value"
+    (input)="onValueChange($any($event.target).value)"
+    (keydown.enter)="onEnterKey()"
+  />
+
+  <button
+    *ngIf="value && !disabled"
+    type="button"
+    class="absolute inset-y-0 right-2 flex items-center text-text-primary hover:text-text-secondary"
+    (click)="clear()"
+    aria-label="Clear"
+  >
+    <i class="material-symbols-outlined text-lg select-none">close</i>
+  </button>
+</div>

package/src/lib/ui/components/select/select.component.css

@@ -0,0 +1,102 @@
+::ng-deep .fx-select-field {
+  display: block !important;
+  width: 100% !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  border-radius: 0.75rem;
+  box-shadow: 0 1px 1px rgb(var(--border-default));
+}
+
+::ng-deep .fx-select-field .mat-mdc-form-field-wrapper,
+::ng-deep .fx-select-field .mat-mdc-text-field-wrapper {
+  padding: 0 !important;
+  margin: 0 !important;
+  width: 100% !important;
+}
+
+::ng-deep .fx-select-field .mdc-text-field {
+  width: 100% !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  --mdc-shape-small: 0 !important;
+}
+
+::ng-deep .fx-select-field .mat-mdc-form-field-flex {
+  width: 100% !important;
+  margin: 0 !important;
+  padding: 0 0.75rem !important;
+  border: 1px solid rgb(var(--border-default));
+  border-radius: 0.5rem;
+  height: 36px !important;
+  align-items: center;
+  background-color: rgb(var(--bg-primary));
+}
+
+::ng-deep .fx-select-field .mdc-notched-outline,
+::ng-deep .fx-select-field .mat-mdc-form-field-subscript-wrapper {
+  display: none !important;
+}
+
+::ng-deep .fx-select-field.mat-focused .mat-mdc-form-field-flex {
+  border: 2px solid rgb(var(--border-interactive)) !important;
+  outline: none !important;
+  border-radius: 0.5rem;
+}
+
+::ng-deep .fx-select-field.mat-form-field-invalid .mat-mdc-form-field-flex {
+  border-color: #ef4444 !important;
+  box-shadow: none !important;
+}
+
+::ng-deep .fx-select-field .mat-mdc-select-trigger {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+::ng-deep .fx-select-field .mat-mdc-select-arrow-wrapper {
+  margin-right: 0 !important;
+}
+
+::ng-deep .fx-select-field .mat-mdc-select-arrow-wrapper {
+  color: rgb(var(--text-primary));
+}
+
+::ng-deep .mat-mdc-select-panel {
+  background-color: rgb(var(--bg-primary))  !important;
+  border: 1px solid rgb(var(--border-default)) !important;
+  border-radius: 0.5rem !important;
+  box-shadow: 0 2px 4px rgb(0 0 0 / 0.1) !important;
+}
+
+::ng-deep .fx-select-field .mat-mdc-select-placeholder {
+  color: rgb(var(--text-placeholder)) !important;
+  font-size: 14px;
+}
+
+::ng-deep .fx-select-field .mat-mdc-select-value {
+  color: rgb(var(--text-primary)) !important;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.mat-select-panel .search-option-full-width {
+  /* Remove default padding to allow the input to stretch */
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  /* Ensure it is a block element to take up full width */
+  display: block; 
+  /* Prevent the option from being highlighted on hover/focus */
+  pointer-events: none;
+  /* Optional: Adjust height if needed */
+  line-height: initial;
+  height: auto;
+}
+
+.mat-select-panel .search-option-full-width .search-bar {
+  width: 100%;
+  padding: 8px 16px; /* Add visual padding back to the input */
+  border: none;
+  /* Optional: Add a subtle border to separate it from the options */
+  border-bottom: 1px solid #ddd; 
+  box-sizing: border-box; /* Include padding in the element's total width */
+}

package/src/lib/ui/components/select/select.component.html

@@ -0,0 +1,42 @@
+<div class="mb-4 text-left w-full" [class]="class">
+  @if (label) {
+  <label class="block txt-field-label">
+    {{ label }}
+    @if(required) {<span class="txt-required">*</span>}
+  </label>
+  }
+
+  <mat-form-field class="fx-select-field w-full shadow-sm" appearance="fill">
+    <mat-select
+      [placeholder]="placeholder"
+      [disabled]="disabled"
+      [multiple]="multiple"
+      [value]="value"
+      (selectionChange)="onSelectionChange($event.value)"
+      (openedChange)="onOpened($event)"
+      (blur)="onTouched()"
+    >
+      @if(enableSearch){
+      <div class="px-semi w-full">
+        <input
+          type="text"
+          [placeholder]="'Search'"
+          [(ngModel)]="searchTerm"
+          (ngModelChange)="onSearchChange($event)"
+          (click)="$event.stopPropagation()"
+          class="text-text-primary placeholder:text-text-placeholder w-full bg-bg-primary border-b px-semi py-normal border-border-default focus:outline-none focus:border-border-interactive text-sm text-text-primary tracking-normal ring-0 transition-colors duration-500 ease-in-out"
+        />
+      </div>
+      }
+      <mat-option *ngFor="let option of filteredOptions" [value]="option.value">
+        <span class="txt-default">{{ option.label }}</span>
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  @if(invalid) {
+  <div class="txt-invalid text-left">
+    {{ getErrorMessage(label) }}
+  </div>
+  }
+</div>

package/src/lib/ui/components/skeleton-table-loading/skeleton-table-loading.component.html

@@ -0,0 +1,21 @@
+<div class="w-full animate-pulse space-y-normal">
+  <div
+    class="grid gap-small"
+    [ngStyle]="{ 'grid-template-columns': 'repeat(' + columns + ', minmax(0, 1fr))' }"
+  >
+    @for(col of [].constructor(columns); track col) {
+      <div class="h-6 bg-bg-hover rounded"></div>
+    }
+  </div>
+
+  @for(row of [].constructor(rows); track row) {
+    <div
+      class="grid gap-small"
+      [ngStyle]="{ 'grid-template-columns': 'repeat(' + columns + ', minmax(0, 1fr))' }"
+    >
+      @for(col of [].constructor(columns); track col) {
+        <div class="h-7 bg-bg-hover rounded"></div>
+      }
+    </div>
+  }
+</div>

package/src/lib/ui/components/slider/slider.component.html

@@ -0,0 +1,54 @@
+<div
+  class="w-full select-none"
+  [class.cursor-not-allowed]="disabled"
+  [class.opacity-60]="disabled"
+  role="group"
+>
+  <div
+    #track
+    class="relative touch-none py-4"
+    (click)="onTrackClick($event)"
+    [attr.aria-disabled]="disabled"
+    [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
+  >
+    <div
+      class="relative flex items-center"
+      [ngClass]="{ 'flex-col h-48': vertical }"
+    >
+      <div
+        class="relative flex-1 rounded-full bg-gray-600 h-2"
+        [ngClass]="{ 'w-1 rotate-0 h-full w-auto bg-border-gray-700': vertical }"
+      >
+        <div
+          class="absolute left-0 top-0 h-full rounded-full bg-primary"
+          *ngIf="!vertical"
+          [style.width.%]="percent"
+        ></div>
+
+        <div
+          class="absolute bottom-0 left-0 w-full rounded-full bg-primary"
+          *ngIf="vertical"
+          [style.height.%]="percent"
+          style="transform-origin: bottom;"
+        ></div>
+
+        <button
+          #thumb
+          type="button"
+          class="absolute -mt-1 -ml-1.5 w-4 h-4 rounded-full shadow focus:ring-primary bg-primary border-2 border-text-primary"
+          [ngStyle]="thumbStyle()"
+          role="slider"
+          [attr.aria-valuemin]="min"
+          [attr.aria-valuemax]="max"
+          [attr.aria-valuenow]="value"
+          [attr.aria-disabled]="disabled"
+          tabindex="0"
+          (pointerdown)="onPointerDown($event)"
+          (pointermove)="onPointerMove($event)"
+          (pointerup)="onPointerUp($event)"
+          [disabled]="disabled"
+        ></button>
+      </div>
+    </div>
+  </div>
+</div>

package/src/lib/ui/components/switch/switch.component.html

@@ -0,0 +1,21 @@
+<div
+  class="relative flex items-center w-10 h-5 rounded-full transition-colors duration-300 cursor-pointer"
+  [ngClass]="{
+    'bg-success': value && !disabled,
+    'bg-button-default': !value && !disabled,
+    'bg-bg-hover': disabled
+  }"
+  (click)="toggle()"
+>
+  @if(value) {
+    <i style="font-size: 20px;" class="material-symbols-outlined absolute left-0.5 top-0 text-text-inverse">check</i>
+    
+  }
+  @if(!value) {
+    <i style="font-size: 20px;" class="material-symbols-outlined absolute right-0.5 top-0 text-text-inverse">close</i>
+  }
+  <div
+    class="absolute top-0.5 left-0.5 w-4 h-4 bg-text-inverse rounded-full shadow-md transform transition-transform duration-300"
+    [ngClass]="{ 'translate-x-5': value }"
+  ></div>
+</div>

package/src/lib/ui/components/tab-component/tab.component.html

@@ -0,0 +1 @@
+<ng-template><ng-content></ng-content></ng-template>