@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/chart/pie-chart.ts

@@ -0,0 +1,186 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  signal,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { CHART_COLORS, ChartDataPoint } from './chart-types';
+import { SC_CHART } from './chart-container';
+
+@Component({
+  selector: '[sc-pie-chart]',
+  template: `
+    <svg
+      [attr.viewBox]="viewBox()"
+      class="w-full"
+      [style.height.px]="size()"
+      preserveAspectRatio="xMidYMid meet"
+    >
+      @for (slice of slices(); track slice.label; let i = $index) {
+        <path
+          [attr.d]="slice.path"
+          [attr.fill]="slice.color"
+          class="cursor-pointer transition-opacity hover:opacity-80"
+          (mouseenter)="onSliceHover($event, slice)"
+          (mouseleave)="onSliceLeave()"
+        />
+      }
+
+      @if (showLabels()) {
+        @for (slice of slices(); track slice.label) {
+          <text
+            [attr.x]="slice.labelX"
+            [attr.y]="slice.labelY"
+            text-anchor="middle"
+            class="pointer-events-none fill-background text-xs font-medium"
+          >
+            {{ slice.percentage }}%
+          </text>
+        }
+      }
+    </svg>
+
+    @if (hoveredSlice()) {
+      <div
+        class="pointer-events-none absolute z-50 rounded-lg border bg-background px-3 py-1.5 text-sm shadow-md"
+        [style.left.px]="tooltipX()"
+        [style.top.px]="tooltipY()"
+        [style.transform]="'translate(-50%, -100%) translateY(-8px)'"
+      >
+        <div class="flex items-center gap-2">
+          <div
+            class="size-3 rounded-sm"
+            [style.background-color]="hoveredSlice()!.color"
+          ></div>
+          <span class="font-medium">{{ hoveredSlice()!.label }}</span>
+        </div>
+        <div class="text-muted-foreground">
+          {{ hoveredSlice()!.value }} ({{ hoveredSlice()!.percentage }}%)
+        </div>
+      </div>
+    }
+  `,
+  host: {
+    'data-slot': 'pie-chart',
+    '[class]': 'class()',
+    class: 'relative block',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScPieChart {
+  private readonly container = inject(SC_CHART, { optional: true });
+
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly data = input<ChartDataPoint[]>([]);
+  readonly size = input<number>(300);
+  readonly innerRadius = input<number>(0); // 0 for pie, >0 for donut
+  readonly showLabels = input<boolean>(true);
+
+  readonly hoveredSlice = signal<
+    (ChartDataPoint & { percentage: number; color: string }) | null
+  >(null);
+  readonly tooltipX = signal(0);
+  readonly tooltipY = signal(0);
+
+  protected readonly viewBox = computed(
+    () => `0 0 ${this.size()} ${this.size()}`,
+  );
+  protected readonly class = computed(() => cn('', this.classInput()));
+
+  protected readonly total = computed(() =>
+    this.data().reduce((sum, d) => sum + d.value, 0),
+  );
+
+  protected readonly slices = computed(() => {
+    const data = this.data();
+    const total = this.total();
+    const centerX = this.size() / 2;
+    const centerY = this.size() / 2;
+    const outerRadius = this.size() / 2 - 10;
+    const innerR = this.innerRadius();
+
+    let startAngle = -Math.PI / 2;
+    const slices: {
+      label: string;
+      value: number;
+      percentage: number;
+      path: string;
+      color: string;
+      labelX: number;
+      labelY: number;
+    }[] = [];
+
+    for (let i = 0; i < data.length; i++) {
+      const d = data[i];
+      const percentage = Math.round((d.value / total) * 100);
+      const angle = (d.value / total) * 2 * Math.PI;
+      const endAngle = startAngle + angle;
+
+      const x1 = centerX + outerRadius * Math.cos(startAngle);
+      const y1 = centerY + outerRadius * Math.sin(startAngle);
+      const x2 = centerX + outerRadius * Math.cos(endAngle);
+      const y2 = centerY + outerRadius * Math.sin(endAngle);
+
+      const largeArc = angle > Math.PI ? 1 : 0;
+      const color =
+        d.color ||
+        this.container?.getColor(d.label, i) ||
+        CHART_COLORS[i % CHART_COLORS.length];
+
+      let path: string;
+      if (innerR > 0) {
+        const ix1 = centerX + innerR * Math.cos(startAngle);
+        const iy1 = centerY + innerR * Math.sin(startAngle);
+        const ix2 = centerX + innerR * Math.cos(endAngle);
+        const iy2 = centerY + innerR * Math.sin(endAngle);
+
+        path = `M ${x1} ${y1} A ${outerRadius} ${outerRadius} 0 ${largeArc} 1 ${x2} ${y2} L ${ix2} ${iy2} A ${innerR} ${innerR} 0 ${largeArc} 0 ${ix1} ${iy1} Z`;
+      } else {
+        path = `M ${centerX} ${centerY} L ${x1} ${y1} A ${outerRadius} ${outerRadius} 0 ${largeArc} 1 ${x2} ${y2} Z`;
+      }
+
+      const labelAngle = startAngle + angle / 2;
+      const labelRadius =
+        innerR > 0 ? (outerRadius + innerR) / 2 : outerRadius * 0.6;
+      const labelX = centerX + labelRadius * Math.cos(labelAngle);
+      const labelY = centerY + labelRadius * Math.sin(labelAngle);
+
+      slices.push({
+        label: d.label,
+        value: d.value,
+        percentage,
+        path,
+        color,
+        labelX,
+        labelY,
+      });
+
+      startAngle = endAngle;
+    }
+
+    return slices;
+  });
+
+  onSliceHover(
+    event: MouseEvent,
+    slice: { label: string; value: number; percentage: number; color: string },
+  ): void {
+    const path = event.target as SVGElement;
+    const parentRect = path.closest('[sc-pie-chart]')?.getBoundingClientRect();
+    if (parentRect) {
+      const pathRect = path.getBoundingClientRect();
+      this.tooltipX.set(pathRect.left - parentRect.left + pathRect.width / 2);
+      this.tooltipY.set(pathRect.top - parentRect.top);
+    }
+    this.hoveredSlice.set(slice);
+  }
+
+  onSliceLeave(): void {
+    this.hoveredSlice.set(null);
+  }
+}

package/src/lib/components/checkbox/README.md

@@ -0,0 +1,293 @@
+# Checkbox
+
+A control that allows the user to toggle between checked and not checked.
+
+## Components
+
+- `ScCheckboxField` (selector: `[sc-checkbox-field]`) - Grid container that observes input state and positions children via `data-slot`
+- `ScCheckbox` - Directive for native input (applied to `input[type="checkbox"]`)
+- `ScCheckboxIndicator` - Directive for styling the visual checkbox box (applied to `span`)
+- `ScVisualCheckbox` - Component for visual representation (rendered automatically by `ScCheckboxField`)
+
+## Usage
+
+```html
+<div sc-checkbox-field>
+  <input type="checkbox" sc-checkbox [(ngModel)]="accepted" id="terms" />
+  <label sc-label for="terms">Accept terms and conditions</label>
+</div>
+```
+
+## With Description
+
+When a `data-slot="field-description"` child is present, the label automatically becomes `font-medium`:
+
+```html
+<div sc-checkbox-field>
+  <input type="checkbox" sc-checkbox [(ngModel)]="marketing" id="marketing" />
+  <label sc-label for="marketing">Marketing emails</label>
+  <p sc-field-description>Receive emails about new products, features, and more.</p>
+</div>
+```
+
+## With Label Element
+
+Use `<label>` as the host element for implicit label association:
+
+```html
+<label sc-checkbox-field class="cursor-pointer">
+  <input type="checkbox" sc-checkbox [(ngModel)]="option" />
+  Option text
+</label>
+```
+
+## With Signal Forms
+
+`ScCheckbox` implements `FormCheckboxControl` and works seamlessly with Angular Signal Forms:
+
+```typescript
+import { signal } from '@angular/core';
+import { form, FormField } from '@angular/forms/signals';
+import { required } from '@angular/forms/signals';
+
+readonly formModel = signal({ acceptTerms: false });
+readonly myForm = form(this.formModel, (schemaPath) => {
+  required(schemaPath.acceptTerms);
+});
+```
+
+```html
+<div sc-checkbox-field>
+  <input type="checkbox" sc-checkbox [formField]="myForm.acceptTerms" id="terms" />
+  <label sc-label for="terms">Accept terms and conditions</label>
+</div>
+```
+
+Note: Add `FormField` to your component's `imports` array to use the `[formField]` directive. When using `[formField]`, you cannot use other property bindings like `[checked]` on the same element.
+
+## Indeterminate State
+
+```html
+<div sc-checkbox-field>
+  <input type="checkbox" sc-checkbox [(ngModel)]="allSelected" [indeterminate]="someSelected" />
+  <label sc-label for="select-all">Select all</label>
+</div>
+```
+
+## Disabled
+
+```html
+<div sc-checkbox-field>
+  <input type="checkbox" sc-checkbox [disabled]="true" id="disabled-unchecked" />
+  <label sc-label for="disabled-unchecked">Disabled unchecked</label>
+</div>
+
+<div sc-checkbox-field>
+  <input type="checkbox" sc-checkbox [(ngModel)]="checked" [disabled]="true" id="disabled-checked" />
+  <label sc-label for="disabled-checked">Disabled checked</label>
+</div>
+```
+
+## Advanced: Custom Checkbox Indicator
+
+Inject the checkbox context to build completely custom visuals:
+
+```typescript
+import { inject } from '@angular/core';
+import { SC_CHECKBOX_FIELD } from '@semantic-components/ui-lab';
+
+export class MyCustomCheckboxVisual {
+  readonly checkbox = inject(SC_CHECKBOX_FIELD);
+
+  // Use checkbox.checked(), checkbox.disabled(), checkbox.indeterminate(), checkbox.dataState()
+}
+```
+
+## Custom Theme
+
+Customize colors using CSS variables:
+
+```html
+<div style="--primary: oklch(0.6 0.25 280); --primary-foreground: oklch(0.985 0 0);">
+  <div sc-checkbox-field>
+    <input type="checkbox" sc-checkbox [(ngModel)]="purple" id="purple" />
+    <label sc-label for="purple">Purple checkbox</label>
+  </div>
+</div>
+```
+
+Available CSS variables:
+
+- `--primary` - Border and background color when checked (OKLCH format: `oklch(lightness chroma hue)`)
+- `--primary-foreground` - Checkmark color (OKLCH format: `oklch(lightness chroma hue)`)
+- `--ring` - Focus ring color (OKLCH format: `oklch(lightness chroma hue)`)
+- `--ring-offset-background` - Focus ring offset color
+
+OKLCH format parameters:
+
+- **Lightness**: 0 (black) to 1 (white)
+- **Chroma**: 0 (gray) to ~0.4 (vivid color)
+- **Hue**: 0-360 (color angle)
+
+## Inputs
+
+### ScCheckboxField (`[sc-checkbox-field]`)
+
+| Input   | Type     | Default | Description            |
+| ------- | -------- | ------- | ---------------------- |
+| `class` | `string` | `''`    | Additional CSS classes |
+
+### ScCheckbox (`sc-checkbox`)
+
+| Input           | Type      | Default | Description                       |
+| --------------- | --------- | ------- | --------------------------------- |
+| `indeterminate` | `boolean` | `false` | Whether checkbox is indeterminate |
+| `class`         | `string`  | `''`    | Additional CSS classes            |
+
+Note: Standard input attributes (`id`, `name`, `checked`, `disabled`) are set directly on the native input element.
+
+### ScVisualCheckbox (`sc-visual-checkbox`)
+
+| Input | Type | Default | Description |
+| ----- | ---- | ------- | ----------- |
+
+Note: `ScVisualCheckbox` is rendered automatically by `ScCheckboxField`. You do not need to add it manually.
+
+## Data Slots
+
+Children are positioned in the grid using `data-slot` attributes:
+
+| Data Slot           | Grid Position | Component            |
+| ------------------- | ------------- | -------------------- |
+| `checkbox`          | col-1, row-1  | `ScCheckbox`         |
+| `visual-checkbox`   | col-1, row-1  | `ScVisualCheckbox`   |
+| `label`             | col-2, row-1  | `ScLabel`            |
+| `field-description` | col-2, row-2  | `ScFieldDescription` |
+
+## Context API
+
+The `sc-checkbox-field` component provides a context via dependency injection that child components can access:
+
+```typescript
+export interface ScCheckboxContext {
+  checked: () => boolean;
+  disabled: () => boolean;
+  indeterminate: () => boolean;
+  dataState: () => 'checked' | 'unchecked' | 'indeterminate';
+}
+```
+
+Inject using `SC_CHECKBOX_FIELD` token:
+
+```typescript
+import { inject } from '@angular/core';
+import { SC_CHECKBOX_FIELD } from '@semantic-components/ui-lab';
+
+readonly checkbox = inject(SC_CHECKBOX_FIELD);
+```
+
+## Data Attributes
+
+| Attribute       | Values                                      | Description    |
+| --------------- | ------------------------------------------- | -------------- |
+| `data-state`    | `checked` \| `unchecked` \| `indeterminate` | Current state  |
+| `data-disabled` | present when disabled                       | Disabled state |
+
+## Accessibility
+
+- Uses a native `<input type="checkbox">` with `opacity: 0` for full accessibility
+- Native checkbox provides all semantic roles and ARIA attributes automatically
+- Keyboard accessible via native browser behavior (Space/Enter to toggle)
+- Focus ring styled via `peer-focus-visible` CSS classes
+- Works seamlessly with associated `<label>` elements via `id` attribute
+- Full native form integration (submission, validation, autofill)
+- Visual representation is marked with `aria-hidden="true"` (decorative only)
+- Compatible with all screen readers (NVDA, JAWS, VoiceOver, TalkBack)
+- Indeterminate state synced to native input element
+
+## Architecture
+
+The checkbox uses a composable, grid-based architecture inspired by [Catalyst](https://catalyst.tailwindui.com/docs/checkbox):
+
+### Grid Layout
+
+`ScCheckboxField` uses a 2-column CSS Grid (`grid-cols-[1rem_1fr]`) where:
+
+- **Column 1** (`1rem` = 16px) holds the checkbox input and visual indicator, both `size-4`, overlapping in the same grid cell
+- **Column 2** (`1fr`) holds the label (row 1) and optional description (row 2)
+
+Children are positioned using `*:data-[slot=...]` selectors on the parent, following the Catalyst data-slot pattern.
+
+```
+┌─ grid grid-cols-[1rem_1fr] ──────────────────────────┐
+│  col-1 (1rem)   │  col-2 (1fr)                       │
+│  ┌────────────┐ │                                    │
+│  │ ScCheckbox │ │  <label data-slot="label">         │  row-1
+│  │ + Visual   │ │                                    │
+│  │ (overlap)  │ │                                    │
+│  └────────────┘ │                                    │
+│                 │  <p data-slot="field-description">  │  row-2
+│                 │                                    │
+└─────────────────┴────────────────────────────────────┘
+       gap-x-2                  gap-y-1
+```
+
+### Component Structure
+
+```
+[sc-checkbox-field] (grid container, provides context)
+├── <ng-content select="[sc-checkbox]" />  (projected input, col-1 row-1)
+├── span[sc-visual-checkbox]               (visual, col-1 row-1, pointer-events-none)
+│   └── span[sc-checkbox-indicator]        (box with border/background)
+│       ├── <svg si-check-icon>            (checkmark icon)
+│       └── <svg si-minus-icon>            (indeterminate icon)
+└── <ng-content />                         (label, description, col-2)
+```
+
+**Template ordering:** The input is projected first (via `<ng-content select="[sc-checkbox]" />`), then the visual checkbox is rendered, then remaining content. This ensures the `peer` class on the input correctly enables `peer-focus-visible` and `peer-disabled` styles on the visual checkbox.
+
+### Styling Breakdown
+
+- **ScCheckboxField**: `grid grid-cols-[1rem_1fr] items-start gap-x-2 gap-y-1` - Grid container with data-slot positioning
+- **ScCheckbox**: `peer size-4 cursor-pointer opacity-0` - Invisible native input (16px x 16px)
+- **ScVisualCheckbox**: `pointer-events-none size-4` - Visual container, clicks pass through to input
+- **ScCheckboxIndicator**: `size-4 border rounded-sm` - Actual visual checkbox box
+
+### State Flow
+
+```
+Native Input (source of truth)
+  ├─ User interactions (click, keyboard)
+  ├─ Form bindings (ngModel, formField)
+  └─ Attributes (checked, disabled, indeterminate)
+         ↓
+ScCheckboxField (observer)
+  ├─ contentChild() queries ScCheckbox
+  ├─ Reads signals from ScCheckbox directly
+  └─ Provides context via SC_CHECKBOX_FIELD token
+         ↓
+ScVisualCheckbox (renderer)
+  ├─ inject(SC_CHECKBOX_FIELD)
+  └─ Renders based on checkbox.dataState()
+```
+
+**How state propagates:**
+
+1. User interacts with native input (click, keyboard)
+2. Input's `(change)` event handler updates the `checked` model signal
+3. ScCheckboxField's computed signals react to changes (zoneless-compatible)
+4. ScVisualCheckbox injects context and renders accordingly
+5. CSS peer selectors style based on input state (focus, disabled, etc.)
+
+### Benefits
+
+This pattern provides:
+
+- **Native behavior**: All browser/OS checkbox features work automatically
+- **Accessibility**: Screen readers interact with the real checkbox
+- **Composability**: Consumers provide their own input element with label and description
+- **Grid layout**: Automatic alignment of checkbox, label, and description via data-slots
+- **Flexibility**: Visual representation is fully customizable
+- **Simplicity**: No manual ARIA management or keyboard handling needed
+- **Single source of truth**: Native input owns all state
+- **Zoneless compatible**: Works with OnPush change detection and zoneless mode

package/src/lib/components/checkbox/checkbox-field.ts

@@ -0,0 +1,78 @@
+import { _IdGenerator } from '@angular/cdk/a11y';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  contentChild,
+  ElementRef,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_FIELD } from '../field';
+import { SC_CHECKBOX_FIELD, type ScCheckboxContext } from './checkbox-types';
+import { ScCheckbox } from './checkbox';
+import { ScVisualCheckbox } from './visual-checkbox';
+
+@Component({
+  selector: 'div[sc-checkbox-field], label[sc-checkbox-field]',
+  imports: [ScVisualCheckbox],
+  providers: [
+    { provide: SC_CHECKBOX_FIELD, useExisting: ScCheckboxField },
+    { provide: SC_FIELD, useExisting: ScCheckboxField },
+  ],
+  host: {
+    '[attr.role]': 'role()',
+    'data-slot': 'checkbox-field',
+    '[class]': 'class()',
+    '[attr.data-state]': 'dataState()',
+    '[attr.data-disabled]': 'disabled() ? "" : null',
+  },
+  template: `
+    <ng-content select="[sc-checkbox]" />
+    <span sc-visual-checkbox></span>
+    <ng-content />
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScCheckboxField implements ScCheckboxContext {
+  private readonly elementRef = inject(ElementRef<HTMLElement>);
+  private readonly checkbox = contentChild(ScCheckbox);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  readonly id = input(inject(_IdGenerator).getId('sc-checkbox-field-'));
+
+  protected readonly role = computed(() => {
+    const tagName = this.elementRef.nativeElement.tagName;
+    return tagName === 'LABEL' ? null : 'group';
+  });
+
+  // Computed state from input (implements ScCheckboxContext)
+  // These read directly from the ScCheckbox's signals
+  readonly checked = computed(() => this.checkbox()?.checked() ?? false);
+  readonly disabled = computed(
+    () => this.checkbox()?.disabledSignal() ?? false,
+  );
+  readonly indeterminate = computed(
+    () => this.checkbox()?.indeterminate() ?? false,
+  );
+  readonly dataState = computed(() => {
+    if (this.indeterminate()) return 'indeterminate';
+    return this.checked() ? 'checked' : 'unchecked';
+  });
+
+  protected readonly class = computed(() =>
+    cn(
+      'grid grid-cols-[1rem_1fr] items-start gap-x-2 gap-y-1',
+      '*:data-[slot=checkbox]:col-start-1 *:data-[slot=checkbox]:row-start-1',
+      '*:data-[slot=visual-checkbox]:col-start-1 *:data-[slot=visual-checkbox]:row-start-1',
+      '*:data-[slot=label]:col-start-2 *:data-[slot=label]:row-start-1',
+      '*:data-[slot=field-description]:col-start-2 *:data-[slot=field-description]:row-start-2',
+      'has-[>[data-slot=field-description]]:*:data-[slot=label]:font-medium',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/checkbox/checkbox-indicator.ts

@@ -0,0 +1,27 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'span[sc-checkbox-indicator]',
+  host: {
+    'data-slot': 'checkbox-indicator',
+    '[class]': 'class()',
+    '[attr.data-state]': 'state()',
+    '[attr.aria-hidden]': 'true',
+  },
+})
+export class ScCheckboxIndicator {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly state = input<'checked' | 'unchecked' | 'indeterminate'>(
+    'unchecked',
+  );
+
+  protected readonly class = computed(() =>
+    cn(
+      'pointer-events-none inline-flex size-4 shrink-0 items-center justify-center rounded-sm border border-primary transition-colors',
+      'data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      'data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/checkbox/checkbox-types.ts

@@ -0,0 +1,15 @@
+import { InjectionToken } from '@angular/core';
+
+export interface ScCheckboxContext {
+  // Auto-generated id, overridable by consumer
+  id: () => string;
+  // Computed state from native input
+  checked: () => boolean;
+  disabled: () => boolean;
+  indeterminate: () => boolean;
+  dataState: () => 'checked' | 'unchecked' | 'indeterminate';
+}
+
+export const SC_CHECKBOX_FIELD = new InjectionToken<ScCheckboxContext>(
+  'SC_CHECKBOX_FIELD',
+);

package/src/lib/components/checkbox/checkbox.ts

@@ -0,0 +1,74 @@
+import { _IdGenerator } from '@angular/cdk/a11y';
+import {
+  computed,
+  Directive,
+  effect,
+  ElementRef,
+  inject,
+  input,
+  model,
+  signal,
+} from '@angular/core';
+import type { FormCheckboxControl } from '@angular/forms/signals';
+import { cn } from '@semantic-components/ui';
+import { SC_CHECKBOX_FIELD } from './checkbox-types';
+
+export const SC_CHECKBOX = 'SC_CHECKBOX';
+
+@Directive({
+  selector: 'input[type="checkbox"][sc-checkbox]',
+  host: {
+    'data-slot': 'checkbox',
+    '[id]': 'id()',
+    '[class]': 'class()',
+    '[checked]': 'checked()',
+    '(change)': 'onInputChange($event)',
+  },
+  exportAs: SC_CHECKBOX,
+})
+export class ScCheckbox implements FormCheckboxControl {
+  private readonly elementRef = inject(ElementRef<HTMLInputElement>);
+  private readonly checkboxField = inject(SC_CHECKBOX_FIELD, {
+    optional: true,
+  });
+  private readonly fallbackId = inject(_IdGenerator).getId('sc-checkbox-');
+
+  readonly idInput = input('', { alias: 'id' });
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly indeterminate = input<boolean>(false);
+  readonly checked = model<boolean>(false);
+
+  // Priority: explicit id > field's generated id > own fallback id
+  readonly id = computed(
+    () => this.idInput() || this.checkboxField?.id() || this.fallbackId,
+  );
+
+  // Expose disabled state as a signal
+  readonly disabledSignal = signal(false);
+
+  constructor() {
+    // Sync indeterminate input to native property
+    effect(() => {
+      this.elementRef.nativeElement.indeterminate = this.indeterminate();
+    });
+
+    // Track disabled state
+    effect(() => {
+      this.disabledSignal.set(this.elementRef.nativeElement.disabled);
+    });
+  }
+
+  protected onInputChange(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    this.checked.set(input.checked);
+    this.disabledSignal.set(input.disabled);
+  }
+
+  protected readonly class = computed(() =>
+    cn(
+      'peer size-4 cursor-pointer opacity-0',
+      'disabled:cursor-not-allowed',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/checkbox/index.ts

@@ -0,0 +1,5 @@
+export * from './checkbox-field';
+export * from './checkbox-indicator';
+export * from './checkbox-types';
+export * from './checkbox';
+export * from './visual-checkbox';