@semantic-components/ui-lab 0.63.0 → 0.65.0

package/src/lib/components/multi-select/multi-select.ts

@@ -1,394 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  ElementRef,
-  input,
-  model,
-  output,
-  signal,
-  ViewEncapsulation,
-  viewChild,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-export interface MultiSelectOption {
-  value: string;
-  label: string;
-  disabled?: boolean;
-}
-
-@Component({
-  selector: 'sc-multi-select',
-  exportAs: 'scMultiSelect',
-  template: `
-    <div [class]="containerClass()">
-      <!-- Trigger -->
-      <button
-        #triggerEl
-        type="button"
-        [class]="triggerClass()"
-        [disabled]="disabled()"
-        (click)="toggleDropdown()"
-        [attr.aria-expanded]="dropdownOpen()"
-        [attr.aria-haspopup]="'listbox'"
-      >
-        <div class="flex flex-wrap gap-1 flex-1">
-          @if (selectedOptions().length === 0) {
-            <span class="text-muted-foreground">{{ placeholder() }}</span>
-          } @else if (showChips()) {
-            @for (option of selectedOptions(); track option.value) {
-              <span [class]="chipClass()">
-                {{ option.label }}
-                <button
-                  type="button"
-                  class="ml-1 hover:text-foreground focus:outline-none"
-                  (click)="removeOption($event, option)"
-                  [attr.aria-label]="'Remove ' + option.label"
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    class="size-3"
-                  >
-                    <path d="M18 6 6 18M6 6l12 12" />
-                  </svg>
-                </button>
-              </span>
-            }
-          } @else {
-            <span>{{ selectedOptions().length }} selected</span>
-          }
-        </div>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          class="size-4 shrink-0 text-muted-foreground"
-        >
-          <path d="m6 9 6 6 6-6" />
-        </svg>
-      </button>
-
-      <!-- Dropdown -->
-      @if (dropdownOpen()) {
-        <div
-          [class]="dropdownClass()"
-          role="listbox"
-          aria-multiselectable="true"
-        >
-          <!-- Search -->
-          @if (searchable()) {
-            <div class="p-2 border-b">
-              <input
-                #searchInput
-                type="text"
-                [class]="searchInputClass()"
-                placeholder="Search..."
-                [value]="searchQuery()"
-                (input)="onSearchInput($event)"
-                (keydown)="onSearchKeydown($event)"
-              />
-            </div>
-          }
-
-          <!-- Select All -->
-          @if (showSelectAll()) {
-            <div class="p-1 border-b">
-              <button
-                type="button"
-                [class]="selectAllClass()"
-                (click)="toggleSelectAll()"
-              >
-                <div [class]="checkboxClass(allSelected())">
-                  @if (allSelected()) {
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="3"
-                      class="size-3"
-                    >
-                      <path d="M20 6 9 17l-5-5" />
-                    </svg>
-                  } @else if (someSelected()) {
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="3"
-                      class="size-3"
-                    >
-                      <path d="M5 12h14" />
-                    </svg>
-                  }
-                </div>
-                <span>Select All</span>
-              </button>
-            </div>
-          }
-
-          <!-- Options -->
-          <div class="max-h-48 overflow-y-auto p-1">
-            @for (option of filteredOptions(); track option.value) {
-              <button
-                type="button"
-                role="option"
-                [class]="optionClass(option)"
-                [disabled]="option.disabled"
-                [attr.aria-selected]="isSelected(option)"
-                (click)="toggleOption(option)"
-              >
-                <div [class]="checkboxClass(isSelected(option))">
-                  @if (isSelected(option)) {
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="3"
-                      class="size-3"
-                    >
-                      <path d="M20 6 9 17l-5-5" />
-                    </svg>
-                  }
-                </div>
-                <span>{{ option.label }}</span>
-              </button>
-            } @empty {
-              <div class="px-2 py-6 text-center text-sm text-muted-foreground">
-                No options found
-              </div>
-            }
-          </div>
-
-          <!-- Clear All -->
-          @if (showClearAll() && selectedOptions().length > 0) {
-            <div class="p-2 border-t">
-              <button
-                type="button"
-                class="w-full text-sm text-muted-foreground hover:text-foreground"
-                (click)="clearAll()"
-              >
-                Clear all
-              </button>
-            </div>
-          }
-        </div>
-      }
-    </div>
-
-    @if (dropdownOpen()) {
-      <div class="fixed inset-0 z-40" (click)="closeDropdown()"></div>
-    }
-  `,
-  host: {
-    'data-slot': 'multi-select',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScMultiSelect {
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly placeholder = input<string>('Select options...');
-  readonly disabled = input<boolean>(false);
-  readonly options = input<MultiSelectOption[]>([]);
-  readonly searchable = input<boolean>(true);
-  readonly showChips = input<boolean>(true);
-  readonly showSelectAll = input<boolean>(false);
-  readonly showClearAll = input<boolean>(true);
-  readonly maxDisplayedChips = input<number>(3);
-
-  readonly value = model<string[]>([]);
-
-  readonly valueChange = output<string[]>();
-  readonly optionSelect = output<MultiSelectOption>();
-  readonly optionRemove = output<MultiSelectOption>();
-
-  protected readonly dropdownOpen = signal(false);
-  protected readonly searchQuery = signal('');
-
-  private readonly searchInput =
-    viewChild<ElementRef<HTMLInputElement>>('searchInput');
-  private readonly triggerEl =
-    viewChild<ElementRef<HTMLButtonElement>>('triggerEl');
-
-  protected readonly selectedOptions = computed(() => {
-    const selected = this.value();
-    return this.options().filter((o) => selected.includes(o.value));
-  });
-
-  protected readonly filteredOptions = computed(() => {
-    const query = this.searchQuery().toLowerCase();
-    if (!query) return this.options();
-    return this.options().filter((o) => o.label.toLowerCase().includes(query));
-  });
-
-  protected readonly allSelected = computed(() => {
-    const filtered = this.filteredOptions().filter((o) => !o.disabled);
-    return (
-      filtered.length > 0 &&
-      filtered.every((o) => this.value().includes(o.value))
-    );
-  });
-
-  protected readonly someSelected = computed(() => {
-    const filtered = this.filteredOptions().filter((o) => !o.disabled);
-    const selected = filtered.filter((o) => this.value().includes(o.value));
-    return selected.length > 0 && selected.length < filtered.length;
-  });
-
-  protected readonly containerClass = computed(() =>
-    cn('relative', this.classInput()),
-  );
-
-  protected readonly triggerClass = computed(() =>
-    cn(
-      'flex min-h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-1.5 text-sm shadow-sm',
-      'hover:bg-accent/50',
-      'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
-      'disabled:cursor-not-allowed disabled:opacity-50',
-      'transition-colors',
-    ),
-  );
-
-  protected readonly chipClass = computed(() =>
-    cn(
-      'inline-flex items-center gap-1 rounded-md bg-secondary px-2 py-0.5 text-xs font-medium text-secondary-foreground',
-    ),
-  );
-
-  protected readonly dropdownClass = computed(() =>
-    cn(
-      'absolute left-0 top-full mt-1 z-50 w-full rounded-md border bg-popover shadow-md',
-      'animate-in fade-in-0 zoom-in-95',
-    ),
-  );
-
-  protected readonly searchInputClass = computed(() =>
-    cn(
-      'flex h-8 w-full rounded-md border border-input bg-transparent px-2 py-1 text-sm',
-      'placeholder:text-muted-foreground',
-      'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
-    ),
-  );
-
-  protected readonly selectAllClass = computed(() =>
-    cn(
-      'flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm',
-      'hover:bg-accent hover:text-accent-foreground',
-    ),
-  );
-
-  protected optionClass(option: MultiSelectOption): string {
-    return cn(
-      'flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm',
-      'hover:bg-accent hover:text-accent-foreground',
-      'focus-visible:outline-none focus-visible:bg-accent',
-      option.disabled && 'opacity-50 cursor-not-allowed',
-    );
-  }
-
-  protected checkboxClass(checked: boolean): string {
-    return cn(
-      'flex size-4 shrink-0 items-center justify-center rounded-sm border border-primary',
-      checked && 'bg-primary text-primary-foreground',
-    );
-  }
-
-  isSelected(option: MultiSelectOption): boolean {
-    return this.value().includes(option.value);
-  }
-
-  toggleDropdown(): void {
-    if (this.dropdownOpen()) {
-      this.closeDropdown();
-    } else {
-      this.openDropdown();
-    }
-  }
-
-  openDropdown(): void {
-    this.dropdownOpen.set(true);
-    this.searchQuery.set('');
-    if (this.searchable()) {
-      setTimeout(() => {
-        this.searchInput()?.nativeElement.focus();
-      });
-    }
-  }
-
-  closeDropdown(): void {
-    this.dropdownOpen.set(false);
-    this.searchQuery.set('');
-  }
-
-  toggleOption(option: MultiSelectOption): void {
-    if (option.disabled) return;
-
-    const current = this.value();
-    if (current.includes(option.value)) {
-      this.value.set(current.filter((v) => v !== option.value));
-      this.optionRemove.emit(option);
-    } else {
-      this.value.set([...current, option.value]);
-      this.optionSelect.emit(option);
-    }
-    this.valueChange.emit(this.value());
-  }
-
-  removeOption(event: Event, option: MultiSelectOption): void {
-    event.stopPropagation();
-    const current = this.value();
-    this.value.set(current.filter((v) => v !== option.value));
-    this.optionRemove.emit(option);
-    this.valueChange.emit(this.value());
-  }
-
-  toggleSelectAll(): void {
-    const filtered = this.filteredOptions().filter((o) => !o.disabled);
-    if (this.allSelected()) {
-      // Deselect all filtered
-      const filteredValues = filtered.map((o) => o.value);
-      this.value.set(this.value().filter((v) => !filteredValues.includes(v)));
-    } else {
-      // Select all filtered
-      const current = new Set(this.value());
-      filtered.forEach((o) => current.add(o.value));
-      this.value.set([...current]);
-    }
-    this.valueChange.emit(this.value());
-  }
-
-  clearAll(): void {
-    this.value.set([]);
-    this.valueChange.emit([]);
-  }
-
-  onSearchInput(event: Event): void {
-    const input = event.target as HTMLInputElement;
-    this.searchQuery.set(input.value);
-  }
-
-  onSearchKeydown(event: KeyboardEvent): void {
-    if (event.key === 'Escape') {
-      this.closeDropdown();
-      this.triggerEl()?.nativeElement.focus();
-    }
-  }
-
-  focus(): void {
-    this.triggerEl()?.nativeElement.focus();
-  }
-
-  getSelectedOptions(): MultiSelectOption[] {
-    return this.selectedOptions();
-  }
-}

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

@@ -1,113 +0,0 @@
-# Native Checkbox
-
-A directive that styles native `<input type="checkbox">` elements while preserving native form behavior.
-
-## Why Native Checkbox?
-
-Unlike `ScCheckbox` (which is a custom component), `ScNativeCheckbox` is a directive for native HTML checkbox inputs. This provides:
-
-- **Native form integration** - Works with `ngModel`, Reactive Forms, and Signal Forms
-- **No ControlValueAccessor needed** - The native input handles all form state
-- **Browser accessibility** - Leverages built-in browser accessibility features
-- **Smaller bundle** - No custom form control logic
-
-## Components
-
-- `ScNativeCheckbox` - Directive for `<input type="checkbox">`
-
-## Usage
-
-### Basic
-
-```html
-<input scNativeCheckbox id="terms" (change)="onCheck($event)" />
-<label for="terms">Accept terms</label>
-```
-
-### With ngModel
-
-```html
-<input scNativeCheckbox [(ngModel)]="accepted" id="terms" />
-<label for="terms">Accept terms</label>
-```
-
-### With Signal Forms
-
-```typescript
-import { signal } from '@angular/core';
-import { form, FormField } from '@angular/forms/signals';
-
-readonly formModel = signal({ newsletter: false });
-readonly checkboxForm = form(this.formModel);
-```
-
-```html
-<input scNativeCheckbox type="checkbox" id="newsletter" [formField]="checkboxForm.newsletter" />
-<label for="newsletter">Subscribe</label>
-```
-
-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
-<input scNativeCheckbox [indeterminate]="someSelected" id="select-all" />
-<label for="select-all">Select all</label>
-```
-
-### Disabled
-
-```html
-<input scNativeCheckbox disabled id="disabled" />
-<label for="disabled">Disabled checkbox</label>
-```
-
-## Inputs
-
-| Input           | Type      | Default | Description                              |
-| --------------- | --------- | ------- | ---------------------------------------- |
-| `checked`       | `boolean` | -       | Checked state (for programmatic control) |
-| `indeterminate` | `boolean` | `false` | Whether checkbox is indeterminate        |
-| `class`         | `string`  | `''`    | Additional CSS classes                   |
-
-## Architecture
-
-### Styling Approach
-
-The directive uses `appearance: none` to hide the native checkbox appearance and applies custom styles via Tailwind CSS classes. The checkmark icon is rendered as a background-image using inline SVG data URIs.
-
-```
-┌─────────────────────────────────────┐
-│  Native <input type="checkbox">     │
-│  ┌─────────────────────────────┐    │
-│  │  appearance: none           │    │
-│  │  + Tailwind border/bg       │    │
-│  │  + SVG background-image     │    │
-│  └─────────────────────────────┘    │
-└─────────────────────────────────────┘
-```
-
-### State Tracking
-
-The directive listens to `change` and `input` events to track the native checked state, then conditionally shows the checkmark SVG via `background-image`.
-
-CSS pseudo-classes (`:checked`, `:disabled`, `:focus-visible`) handle visual state changes natively.
-
-### Comparison with ScCheckbox
-
-| Feature              | ScCheckbox          | ScNativeCheckbox       |
-| -------------------- | ------------------- | ---------------------- |
-| Type                 | Component           | Directive              |
-| Form Integration     | Two-way via model() | Native form controls   |
-| ARIA                 | Manual attributes   | Native browser support |
-| Checkmark            | SVG in template     | SVG background-image   |
-| Signal Forms         | FormCheckboxControl | FormCheckboxControl    |
-| ControlValueAccessor | Not implemented     | Not needed             |
-
-## Accessibility
-
-- Native `<input type="checkbox">` provides built-in accessibility
-- Works with `<label for="id">` associations
-- Keyboard accessible (Space to toggle, Tab to navigate)
-- Focus ring styling via `:focus-visible`
-- Disabled state via native `disabled` attribute

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

@@ -1 +0,0 @@
-export * from './native-checkbox';

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

@@ -1,116 +0,0 @@
-import {
-  afterNextRender,
-  computed,
-  Directive,
-  effect,
-  ElementRef,
-  inject,
-  input,
-  PLATFORM_ID,
-  signal,
-} from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
-import { cn } from '@semantic-components/ui';
-
-const checkSvgLight = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")`;
-const indeterminateSvgLight = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' x2='19' y1='12' y2='12'/%3E%3C/svg%3E")`;
-
-const checkSvgDark = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")`;
-const indeterminateSvgDark = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' x2='19' y1='12' y2='12'/%3E%3C/svg%3E")`;
-
-@Directive({
-  selector: 'input[scNativeCheckbox]',
-  host: {
-    type: 'checkbox',
-    'data-slot': 'checkbox',
-    '[class]': 'class()',
-    '[style.background-image]': 'backgroundImage()',
-    '[style.background-size]': '"100% 100%"',
-    '[style.background-position]': '"center"',
-    '[style.background-repeat]': '"no-repeat"',
-    '(change)': 'onChange()',
-    '(input)': 'onChange()',
-  },
-})
-export class ScNativeCheckbox {
-  private readonly elementRef = inject(ElementRef<HTMLInputElement>);
-  private readonly platformId = inject(PLATFORM_ID);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly checkedInput = input<boolean | undefined>(undefined, {
-    alias: 'checked',
-  });
-  readonly indeterminate = input<boolean>(false);
-
-  protected readonly internalChecked = signal(false);
-  protected readonly isDarkMode = signal(false);
-
-  constructor() {
-    // Set indeterminate state on the native element
-    effect(() => {
-      this.elementRef.nativeElement.indeterminate = this.indeterminate();
-    });
-
-    // Sync checked state from input to both internal signal and native element
-    effect(() => {
-      const checked = this.checkedInput();
-      if (checked !== undefined) {
-        this.internalChecked.set(checked);
-        this.elementRef.nativeElement.checked = checked;
-      }
-    });
-
-    // Detect dark mode and watch for changes
-    if (isPlatformBrowser(this.platformId)) {
-      afterNextRender(() => {
-        // Initial detection
-        this.updateDarkMode();
-
-        // Watch for class changes on document element
-        const observer = new MutationObserver(() => {
-          this.updateDarkMode();
-        });
-
-        observer.observe(document.documentElement, {
-          attributes: true,
-          attributeFilter: ['class'],
-        });
-
-        // Sync initial checked state from native element
-        if (this.checkedInput() === undefined) {
-          this.internalChecked.set(this.elementRef.nativeElement.checked);
-        }
-      });
-    }
-  }
-
-  private updateDarkMode(): void {
-    this.isDarkMode.set(document.documentElement.classList.contains('dark'));
-  }
-
-  protected readonly class = computed(() =>
-    cn(
-      'peer h-4 w-4 shrink-0 appearance-none rounded-sm border border-primary bg-background ring-offset-background transition-colors',
-      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-      'disabled:cursor-not-allowed disabled:opacity-50',
-      'checked:bg-primary checked:border-primary',
-      'indeterminate:bg-primary indeterminate:border-primary',
-      this.classInput(),
-    ),
-  );
-
-  protected readonly backgroundImage = computed(() => {
-    const isDark = this.isDarkMode();
-    if (this.indeterminate()) {
-      return isDark ? indeterminateSvgDark : indeterminateSvgLight;
-    }
-    if (this.internalChecked()) {
-      return isDark ? checkSvgDark : checkSvgLight;
-    }
-    return 'none';
-  });
-
-  protected onChange(): void {
-    this.internalChecked.set(this.elementRef.nativeElement.checked);
-  }
-}