@semantic-components/ui-lab 0.63.0 → 0.65.0

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

@@ -1,186 +0,0 @@
-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

@@ -1,293 +0,0 @@
-# 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

@@ -1,78 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

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