@semantic-components/ui-lab 0.63.0 → 0.65.0

package/src/lib/components/tag-input/tag-input.ts

@@ -1,118 +0,0 @@
-import {
-  computed,
-  Directive,
-  ElementRef,
-  InjectionToken,
-  input,
-  model,
-  output,
-  signal,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-// Token for tag input context
-export const SC_TAG_INPUT = new InjectionToken<ScTagInput>('SC_TAG_INPUT');
-
-// ============================================================================
-// TagInput
-// ============================================================================
-@Directive({
-  selector: '[sc-tag-input]',
-  exportAs: 'scTagInput',
-  providers: [{ provide: SC_TAG_INPUT, useExisting: ScTagInput }],
-  host: {
-    'data-slot': 'tag-input',
-    '[class]': 'class()',
-    '[attr.data-disabled]': 'disabled() || null',
-    '[attr.data-focused]': 'isFocused() || null',
-    '(click)': 'focusInput()',
-  },
-})
-export class ScTagInput {
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly tags = model<string[]>([]);
-  readonly placeholder = input<string>('Add tag...');
-  readonly disabled = input<boolean>(false);
-  readonly maxTags = input<number | null>(null);
-  readonly allowDuplicates = input<boolean>(false);
-  readonly delimiters = input<string[]>(['Enter', ',']);
-  readonly minLength = input<number>(1);
-  readonly maxLength = input<number | null>(null);
-
-  readonly tagAdd = output<string>();
-  readonly tagRemove = output<string>();
-
-  readonly isFocused = signal(false);
-  readonly inputValue = signal('');
-
-  private inputRef: ElementRef<HTMLInputElement> | null = null;
-
-  protected readonly class = computed(() =>
-    cn(
-      'flex flex-wrap items-center gap-1.5 min-h-10 w-full rounded-md border border-input bg-background px-3 py-2',
-      'focus-within:ring-1 focus-within:ring-ring focus-within:border-ring',
-      'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
-      this.classInput(),
-    ),
-  );
-
-  readonly canAddMore = computed(() => {
-    const max = this.maxTags();
-    if (max === null) return true;
-    return this.tags().length < max;
-  });
-
-  setInputRef(ref: ElementRef<HTMLInputElement>): void {
-    this.inputRef = ref;
-  }
-
-  focusInput(): void {
-    if (!this.disabled()) {
-      this.inputRef?.nativeElement.focus();
-    }
-  }
-
-  addTag(value: string): boolean {
-    const trimmed = value.trim();
-
-    // Validation
-    if (trimmed.length < this.minLength()) return false;
-    if (this.maxLength() !== null && trimmed.length > this.maxLength()!)
-      return false;
-    if (!this.canAddMore()) return false;
-    if (!this.allowDuplicates() && this.tags().includes(trimmed)) return false;
-
-    this.tags.update((tags) => [...tags, trimmed]);
-    this.tagAdd.emit(trimmed);
-    return true;
-  }
-
-  removeTag(tag: string): void {
-    if (this.disabled()) return;
-    this.tags.update((tags) => tags.filter((t) => t !== tag));
-    this.tagRemove.emit(tag);
-  }
-
-  removeTagAtIndex(index: number): void {
-    if (this.disabled()) return;
-    const tag = this.tags()[index];
-    if (tag) {
-      this.tags.update((tags) => tags.filter((_, i) => i !== index));
-      this.tagRemove.emit(tag);
-    }
-  }
-
-  removeLastTag(): void {
-    const tags = this.tags();
-    if (tags.length > 0) {
-      this.removeTagAtIndex(tags.length - 1);
-    }
-  }
-
-  clearAll(): void {
-    if (this.disabled()) return;
-    const removed = [...this.tags()];
-    this.tags.set([]);
-    removed.forEach((tag) => this.tagRemove.emit(tag));
-  }
-}

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

@@ -1,80 +0,0 @@
-# Textarea
-
-Displays a form textarea or a component that looks like a textarea.
-
-## Components
-
-- `ScTextarea` - Styled textarea directive for multi-line text input
-
-## Usage
-
-```html
-<textarea sc-textarea placeholder="Type your message here."></textarea>
-```
-
-## With Label
-
-```html
-<div class="grid w-full gap-1.5">
-  <label sc-label for="message">Your message</label>
-  <textarea sc-textarea id="message" placeholder="Type your message here."></textarea>
-</div>
-```
-
-## With Helper Text
-
-```html
-<div class="grid w-full gap-1.5">
-  <label sc-label for="bio">Bio</label>
-  <textarea sc-textarea id="bio" placeholder="Tell us about yourself"></textarea>
-  <p class="text-sm text-muted-foreground">Your bio will be visible on your public profile.</p>
-</div>
-```
-
-## Custom Rows
-
-```html
-<textarea sc-textarea rows="2" placeholder="Small"></textarea>
-<textarea sc-textarea rows="6" placeholder="Large"></textarea>
-```
-
-## Disabled
-
-```html
-<textarea sc-textarea placeholder="Disabled" disabled></textarea>
-```
-
-## With Max Length
-
-```html
-<textarea sc-textarea maxlength="200" placeholder="Max 200 characters"></textarea>
-```
-
-## Inputs
-
-| Input   | Type     | Default | Description            |
-| ------- | -------- | ------- | ---------------------- |
-| `class` | `string` | `''`    | Additional CSS classes |
-
-## Styling
-
-The textarea applies the following styles by default:
-
-- `min-h-[80px]` - Minimum height
-- `w-full` - Full width
-- `rounded-md` - Rounded corners
-- `border border-input` - Border styling
-- `bg-background` - Background color
-- `px-3 py-2` - Padding
-- `text-sm` - Small text size
-- `ring-offset-background` - Ring offset for focus
-- `placeholder:text-muted-foreground` - Muted placeholder text
-- `focus-visible:ring-2` - Focus ring
-- `disabled:cursor-not-allowed disabled:opacity-50` - Disabled state
-
-## Accessibility
-
-- Uses native `<textarea>` element for built-in accessibility
-- Supports all standard textarea attributes (`rows`, `cols`, `maxlength`, etc.)
-- Focus ring for keyboard navigation
-- Works with `<label>` elements via `id` attribute

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

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

package/src/lib/components/textarea/textarea.ts

@@ -1,41 +0,0 @@
-import { _IdGenerator } from '@angular/cdk/a11y';
-import { computed, Directive, inject, input } from '@angular/core';
-import { FormField } from '@angular/forms/signals';
-import { cn } from '@semantic-components/ui';
-import { SC_FIELD } from '../field/field';
-
-@Directive({
-  selector: 'textarea[sc-textarea]',
-  host: {
-    'data-slot': 'textarea',
-    '[attr.id]': 'id()',
-    '[attr.aria-invalid]': 'invalid() || null',
-    '[attr.disabled]': 'disabled() || null',
-    '[class]': 'class()',
-  },
-})
-export class ScTextarea {
-  private readonly field = inject(SC_FIELD, { optional: true });
-  private readonly formField = inject(FormField, { optional: true });
-  private readonly fallbackId = inject(_IdGenerator).getId('sc-textarea-');
-
-  readonly idInput = input('', { alias: 'id' });
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  readonly id = computed(
-    () => this.idInput() || this.field?.id() || this.fallbackId,
-  );
-
-  readonly invalid = computed(() => this.formField?.state().invalid() ?? false);
-
-  readonly disabled = computed(
-    () => this.formField?.state().disabled() ?? false,
-  );
-
-  protected readonly class = computed(() =>
-    cn(
-      'border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50',
-      this.classInput(),
-    ),
-  );
-}

package/src/lib/components/theme-toggle/README.md

@@ -1,258 +0,0 @@
-# Theme Toggle
-
-A component for switching between light and dark themes with system preference support.
-
-## Usage
-
-### Basic Toggle Button
-
-The theme toggle uses content projection for icons, following the declarative architecture pattern.
-
-```typescript
-import { ScThemeToggle } from '@semantic-components/ui-lab';
-import { SiMoonIcon, SiSunIcon } from '@semantic-icons/lucide-icons';
-
-@Component({
-  imports: [ScThemeToggle, SiSunIcon, SiMoonIcon],
-  template: `
-    <button sc-theme-toggle #toggle="scThemeToggle">
-      @if (toggle.isDark()) {
-        <svg si-sun-icon></svg>
-      } @else {
-        <svg si-moon-icon></svg>
-      }
-    </button>
-  `,
-})
-export class MyComponent {}
-```
-
-### With Variants
-
-```html
-<!-- Default variant -->
-<button sc-theme-toggle variant="default" #toggle="scThemeToggle">
-  @if (toggle.isDark()) {
-  <svg si-sun-icon></svg>
-  } @else {
-  <svg si-moon-icon></svg>
-  }
-</button>
-
-<!-- Outline variant -->
-<button sc-theme-toggle variant="outline" #toggle="scThemeToggle">
-  @if (toggle.isDark()) {
-  <svg si-sun-icon></svg>
-  } @else {
-  <svg si-moon-icon></svg>
-  }
-</button>
-
-<!-- Ghost variant -->
-<button sc-theme-toggle variant="ghost" #toggle="scThemeToggle">
-  @if (toggle.isDark()) {
-  <svg si-sun-icon></svg>
-  } @else {
-  <svg si-moon-icon></svg>
-  }
-</button>
-```
-
-### With Sizes
-
-```html
-<button sc-theme-toggle size="sm" #toggle="scThemeToggle">
-  @if (toggle.isDark()) {
-  <svg si-sun-icon></svg>
-  } @else {
-  <svg si-moon-icon></svg>
-  }
-</button>
-```
-
-### Theme Select Dropdown
-
-The theme select follows the composable pattern - consumers provide the label and connect it with IDs.
-
-```typescript
-import { ScThemeField, ScThemeSelect } from '@semantic-components/ui-lab';
-
-@Component({
-  imports: [ScThemeField, ScThemeSelect],
-  template: `
-    <div sc-theme-field>
-      <label class="text-sm font-medium">Theme</label>
-      <select sc-theme-select>
-        <option value="light">Light</option>
-        <option value="dark">Dark</option>
-        <option value="system">System</option>
-      </select>
-    </div>
-  `,
-})
-export class MyComponent {}
-```
-
-With translations:
-
-```html
-<div sc-theme-field>
-  <label>Thème</label>
-  <select sc-theme-select>
-    <option value="light">Lumière</option>
-    <option value="dark">Sombre</option>
-    <option value="system">Système</option>
-  </select>
-</div>
-```
-
-Without ScThemeField (custom layout, manual IDs):
-
-```html
-<div class="custom-layout">
-  <label for="my-theme">Choose theme</label>
-  <select sc-theme-select id="my-theme">
-    <option value="light">Light</option>
-    <option value="dark">Dark</option>
-    <option value="system">System</option>
-  </select>
-</div>
-```
-
-### Using ScTheme Directly
-
-```typescript
-import { ScTheme } from '@semantic-components/ui-lab';
-
-export class MyComponent {
-  private theme = inject(ScTheme);
-
-  // Read the current theme
-  currentTheme = this.theme.theme;
-
-  // Check if dark mode is active
-  isDark = this.theme.isDark;
-
-  // Set a specific theme
-  setDark() {
-    this.theme.setTheme('dark');
-  }
-
-  // Toggle between light and dark
-  toggle() {
-    this.theme.toggleTheme();
-  }
-}
-```
-
-## Components
-
-### ScThemeToggle
-
-A button that toggles between light and dark themes. Uses content projection for icons following the declarative architecture pattern.
-
-**Selector:** `button[sc-theme-toggle]`
-
-**Export As:** `scThemeToggle`
-
-**Inputs:**
-
-| Input     | Type                 | Default   | Description            |
-| --------- | -------------------- | --------- | ---------------------- |
-| `variant` | `ThemeToggleVariant` | `'ghost'` | Visual style variant   |
-| `size`    | `ThemeToggleSize`    | `'icon'`  | Button size            |
-| `class`   | `string`             | `''`      | Additional CSS classes |
-
-**Variants:** `'default'` | `'outline'` | `'ghost'`
-
-**Sizes:** `'default'` | `'sm'` | `'lg'` | `'icon'`
-
-**Public Properties (via template reference):**
-
-| Property | Type              | Description                  |
-| -------- | ----------------- | ---------------------------- |
-| `isDark` | `Signal<boolean>` | Whether dark theme is active |
-
-**Usage:**
-
-Use a template reference variable with `#toggle="scThemeToggle"` to access the `isDark()` signal for conditional icon rendering.
-
-### ScThemeSelect
-
-A dropdown select for choosing between light, dark, and system themes. Follows the composable pattern - consumers provide the label, options, and IDs for full control and i18n support.
-
-**Selector:** `select[sc-theme-select]`
-
-**Inputs:**
-
-| Input   | Type     | Default | Description            |
-| ------- | -------- | ------- | ---------------------- |
-| `class` | `string` | `''`    | Additional CSS classes |
-
-**Options:**
-
-Consumers must provide the option elements via content projection. The values must be `'light'`, `'dark'`, or `'system'`.
-
-```html
-<option value="light">Light</option>
-<option value="dark">Dark</option>
-<option value="system">System</option>
-```
-
-### ScThemeField
-
-A container component for theme select with consistent spacing and automatic ID management.
-
-**Selector:** `div[sc-theme-field]`
-
-**Inputs:**
-
-| Input   | Type     | Default | Description            |
-| ------- | -------- | ------- | ---------------------- |
-| `class` | `string` | `''`    | Additional CSS classes |
-
-**Behavior:**
-
-Automatically generates a unique ID and applies it to the label's `for` attribute and the select's `id` attribute, ensuring proper accessibility without manual ID management.
-
-## ScTheme
-
-A singleton service for managing theme state.
-
-**Properties:**
-
-| Property        | Type                        | Description                                       |
-| --------------- | --------------------------- | ------------------------------------------------- |
-| `theme`         | `Signal<Theme>`             | Current theme setting ('light', 'dark', 'system') |
-| `resolvedTheme` | `Signal<'light' \| 'dark'>` | Actual applied theme (resolves 'system')          |
-| `isDark`        | `Signal<boolean>`           | Whether dark theme is currently active            |
-
-**Methods:**
-
-| Method        | Parameters     | Description                   |
-| ------------- | -------------- | ----------------------------- |
-| `setTheme`    | `theme: Theme` | Set the theme explicitly      |
-| `toggleTheme` | none           | Toggle between light and dark |
-
-## Architecture
-
-This component follows the **declarative architecture** pattern:
-
-- **Content Projection**: Icons are provided by consumers via `<ng-content />`, not embedded in the component
-- **Template References**: Use `#toggle="scThemeToggle"` to access component state in templates
-- **Signal-based State**: The `isDark()` signal drives conditional rendering
-- **No Imperative Methods**: All state changes happen through user interactions, not programmatic calls
-
-This design gives consumers full control over icon presentation while maintaining clean separation of concerns.
-
-## Accessibility
-
-- The toggle button uses `aria-label` to describe the action
-- The toggle button uses `aria-pressed` to indicate the current state
-- The select dropdown includes a screen-reader-only label
-- Icons are marked with `aria-hidden="true"`
-- Full keyboard navigation support
-
-## Persistence
-
-The theme preference is automatically persisted to `localStorage` under the key `sc-theme` and restored on page load.

package/src/lib/components/theme-toggle/index.ts

@@ -1,4 +0,0 @@
-export * from './theme-toggle';
-export * from './theme-select';
-export * from './theme-field';
-export * from './theme.service';

package/src/lib/components/theme-toggle/theme-field.ts

@@ -1,40 +0,0 @@
-import { _IdGenerator } from '@angular/cdk/a11y';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  ElementRef,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_FIELD } from '../field';
-
-@Component({
-  selector: 'div[sc-theme-field], label[sc-theme-field]',
-  providers: [{ provide: SC_FIELD, useExisting: ScThemeField }],
-  host: {
-    '[attr.role]': 'role()',
-    'data-slot': 'theme-field',
-    '[class]': 'class()',
-  },
-  template: `
-    <ng-content />
-  `,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScThemeField {
-  private readonly elementRef = inject(ElementRef<HTMLElement>);
-
-  readonly id = input(inject(_IdGenerator).getId('sc-theme-field-'));
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly role = computed(() => {
-    const tagName = this.elementRef.nativeElement.tagName;
-    return tagName === 'LABEL' ? null : 'group';
-  });
-
-  protected readonly class = computed(() => cn('space-y-2', this.classInput()));
-}

package/src/lib/components/theme-toggle/theme-select.ts

@@ -1,56 +0,0 @@
-import { _IdGenerator } from '@angular/cdk/a11y';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { SC_FIELD } from '../field';
-import { ScTheme, Theme } from './theme.service';
-
-@Component({
-  selector: 'select[sc-theme-select]',
-  host: {
-    'data-slot': 'theme-select',
-    '[id]': 'id()',
-    '[class]': 'class()',
-    '[value]': 'theme()',
-    '(change)': 'onThemeChange($event)',
-  },
-  template: `
-    <ng-content />
-  `,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScThemeSelect {
-  private readonly themeService = inject(ScTheme);
-  private readonly field = inject(SC_FIELD, { optional: true });
-  private readonly fallbackId = inject(_IdGenerator).getId('sc-theme-select-');
-
-  readonly idInput = input('', { alias: 'id' });
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  // Priority: explicit id > field's id > own fallback id
-  readonly id = computed(
-    () => this.idInput() || this.field?.id() || this.fallbackId,
-  );
-
-  protected readonly theme = this.themeService.theme;
-
-  protected readonly class = computed(() =>
-    cn(
-      'h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background',
-      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-      this.classInput(),
-    ),
-  );
-
-  protected onThemeChange(event: Event): void {
-    const target = event.target as HTMLSelectElement;
-    this.themeService.setTheme(target.value as Theme);
-  }
-}

package/src/lib/components/theme-toggle/theme-toggle.ts

@@ -1,76 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScTheme, Theme } from './theme.service';
-
-export type ThemeToggleVariant = 'default' | 'outline' | 'ghost';
-export type ThemeToggleSize = 'default' | 'sm' | 'lg' | 'icon';
-
-const variantStyles: Record<ThemeToggleVariant, string> = {
-  default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-  outline:
-    'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-  ghost: 'hover:bg-accent hover:text-accent-foreground',
-};
-
-const sizeStyles: Record<ThemeToggleSize, string> = {
-  default: 'h-10 px-4 py-2',
-  sm: 'h-9 rounded-md px-3',
-  lg: 'h-11 rounded-md px-8',
-  icon: 'size-10',
-};
-
-@Component({
-  selector: 'button[sc-theme-toggle]',
-  exportAs: 'scThemeToggle',
-  host: {
-    'data-slot': 'theme-toggle',
-    type: 'button',
-    '[class]': 'class()',
-    '[attr.aria-label]': 'ariaLabel()',
-    '[attr.aria-pressed]': 'isDark()',
-    '(click)': 'toggle()',
-  },
-  template: `
-    <ng-content />
-  `,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScThemeToggle {
-  private readonly themeService = inject(ScTheme);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly variant = input<ThemeToggleVariant>('ghost');
-  readonly size = input<ThemeToggleSize>('icon');
-
-  readonly isDark = this.themeService.isDark;
-  protected readonly theme = this.themeService.theme;
-
-  protected readonly class = computed(() =>
-    cn(
-      'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium',
-      'ring-offset-background transition-colors',
-      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-      'disabled:pointer-events-none disabled:opacity-50',
-      '[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-      variantStyles[this.variant()],
-      sizeStyles[this.size()],
-      this.classInput(),
-    ),
-  );
-
-  protected readonly ariaLabel = computed(() =>
-    this.isDark() ? 'Switch to light theme' : 'Switch to dark theme',
-  );
-
-  protected toggle(): void {
-    this.themeService.toggleTheme();
-  }
-}