@semantic-components/ui-lab 0.62.0 → 0.63.0

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,76 @@
+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();
+  }
+}