@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/tabs/tab.ts

@@ -0,0 +1,45 @@
+import { Tab } from '@angular/aria/tabs';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'button[sc-tab]',
+  hostDirectives: [
+    {
+      directive: Tab,
+      inputs: ['value', 'disabled'],
+    },
+  ],
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'tab',
+    '[attr.data-state]': 'tab.selected() ? "active" : "inactive"',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScTab {
+  protected readonly tab = inject(Tab);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      'disabled:pointer-events-none disabled:opacity-50',
+      'data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/tabs/tabs.ts

@@ -0,0 +1,28 @@
+import { Tabs } from '@angular/aria/tabs';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'div[sc-tabs]',
+  hostDirectives: [Tabs],
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'tabs',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScTabs {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() => cn('', this.classInput()));
+}

package/src/lib/components/tag-input/README.md

@@ -0,0 +1,271 @@
+# Tag Input
+
+A multi-tag input component with chips for adding and removing tags.
+
+## Usage
+
+```html
+<div sc-tag-input [(tags)]="tags">
+  @for (tag of tags(); track tag) {
+  <span sc-tag-input-tag [tag]="tag"></span>
+  }
+  <input sc-tag-input-field />
+</div>
+```
+
+## Components
+
+### ScTagInput
+
+Root container that manages tag state.
+
+**Selector:** `[sc-tag-input]`
+
+**Inputs:**
+
+| Input             | Type             | Default          | Description            |
+| ----------------- | ---------------- | ---------------- | ---------------------- |
+| `placeholder`     | `string`         | `'Add tag...'`   | Input placeholder      |
+| `disabled`        | `boolean`        | `false`          | Disabled state         |
+| `maxTags`         | `number \| null` | `null`           | Maximum number of tags |
+| `allowDuplicates` | `boolean`        | `false`          | Allow duplicate tags   |
+| `delimiters`      | `string[]`       | `['Enter', ',']` | Keys that add tags     |
+| `minLength`       | `number`         | `1`              | Minimum tag length     |
+| `maxLength`       | `number \| null` | `null`           | Maximum tag length     |
+| `class`           | `string`         | `''`             | Additional CSS         |
+
+**Two-way Bindings:**
+
+| Binding | Type       | Default | Description   |
+| ------- | ---------- | ------- | ------------- |
+| `tags`  | `string[]` | `[]`    | Array of tags |
+
+**Outputs:**
+
+| Output      | Type     | Description     |
+| ----------- | -------- | --------------- |
+| `tagAdd`    | `string` | Tag was added   |
+| `tagRemove` | `string` | Tag was removed |
+
+**Methods:**
+
+| Method                    | Description                |
+| ------------------------- | -------------------------- |
+| `addTag(value)`           | Add a tag programmatically |
+| `removeTag(tag)`          | Remove a specific tag      |
+| `removeTagAtIndex(index)` | Remove tag by index        |
+| `removeLastTag()`         | Remove the last tag        |
+| `clearAll()`              | Remove all tags            |
+| `focusInput()`            | Focus the input field      |
+
+### ScTagInputField
+
+The input field for typing new tags.
+
+**Selector:** `input[sc-tag-input-field]`
+
+**Inputs:**
+
+| Input       | Type      | Default | Description               |
+| ----------- | --------- | ------- | ------------------------- |
+| `addOnBlur` | `boolean` | `false` | Add tag when losing focus |
+| `class`     | `string`  | `''`    | Additional CSS            |
+
+### ScTagInputTag
+
+Individual tag chip.
+
+**Selector:** `[sc-tag-input-tag]`
+
+**Inputs:**
+
+| Input     | Type                                    | Default     | Description    |
+| --------- | --------------------------------------- | ----------- | -------------- |
+| `tag`     | `string`                                | Required    | Tag text       |
+| `variant` | `'default' \| 'secondary' \| 'outline'` | `'default'` | Visual style   |
+| `class`   | `string`                                | `''`        | Additional CSS |
+
+### ScTagInputClear
+
+Button to clear all tags.
+
+**Selector:** `button[sc-tag-input-clear]`
+
+### ScTagInputCount
+
+Display tag count with optional max.
+
+**Selector:** `[sc-tag-input-count]`
+
+**Inputs:**
+
+| Input     | Type      | Default | Description         |
+| --------- | --------- | ------- | ------------------- |
+| `showMax` | `boolean` | `true`  | Show max in "x / y" |
+| `class`   | `string`  | `''`    | Additional CSS      |
+
+## Examples
+
+### Basic
+
+```html
+<div sc-tag-input [(tags)]="tags">
+  @for (tag of tags(); track tag) {
+  <span sc-tag-input-tag [tag]="tag"></span>
+  }
+  <input sc-tag-input-field />
+</div>
+```
+
+### With Clear Button
+
+```html
+<div sc-tag-input [(tags)]="tags">
+  @for (tag of tags(); track tag) {
+  <span sc-tag-input-tag [tag]="tag"></span>
+  }
+  <input sc-tag-input-field />
+  <button sc-tag-input-clear></button>
+</div>
+```
+
+### With Max Tags
+
+```html
+<div sc-tag-input [(tags)]="tags" [maxTags]="5">
+  @for (tag of tags(); track tag) {
+  <span sc-tag-input-tag [tag]="tag"></span>
+  }
+  <input sc-tag-input-field />
+</div>
+<span sc-tag-input-count></span>
+```
+
+### Different Variants
+
+```html
+<!-- Default (Primary) -->
+<span sc-tag-input-tag [tag]="tag" variant="default"></span>
+
+<!-- Secondary -->
+<span sc-tag-input-tag [tag]="tag" variant="secondary"></span>
+
+<!-- Outline -->
+<span sc-tag-input-tag [tag]="tag" variant="outline"></span>
+```
+
+### Custom Delimiters
+
+```html
+<!-- Add tags with Space or Tab -->
+<div sc-tag-input [(tags)]="tags" [delimiters]="['Enter', ' ', 'Tab']">
+  @for (tag of tags(); track tag) {
+  <span sc-tag-input-tag [tag]="tag"></span>
+  }
+  <input sc-tag-input-field />
+</div>
+```
+
+### Allow Duplicates
+
+```html
+<div sc-tag-input [(tags)]="tags" [allowDuplicates]="true">
+  @for (tag of tags(); track $index) {
+  <span sc-tag-input-tag [tag]="tag"></span>
+  }
+  <input sc-tag-input-field />
+</div>
+```
+
+### Add on Blur
+
+```html
+<div sc-tag-input [(tags)]="tags">
+  @for (tag of tags(); track tag) {
+  <span sc-tag-input-tag [tag]="tag"></span>
+  }
+  <input sc-tag-input-field [addOnBlur]="true" />
+</div>
+```
+
+### With Validation
+
+```html
+<div sc-tag-input [(tags)]="tags" [minLength]="2" [maxLength]="20">
+  @for (tag of tags(); track tag) {
+  <span sc-tag-input-tag [tag]="tag"></span>
+  }
+  <input sc-tag-input-field />
+</div>
+```
+
+### Disabled
+
+```html
+<div sc-tag-input [tags]="['Fixed', 'Tags']" [disabled]="true">
+  @for (tag of ['Fixed', 'Tags']; track tag) {
+  <span sc-tag-input-tag [tag]="tag"></span>
+  }
+  <input sc-tag-input-field />
+</div>
+```
+
+### Form Field
+
+```html
+<div class="space-y-2">
+  <label class="text-sm font-medium">Skills</label>
+  <div sc-tag-input [(tags)]="skills" [maxTags]="10" placeholder="Add a skill...">
+    @for (tag of skills(); track tag) {
+    <span sc-tag-input-tag [tag]="tag" variant="secondary"></span>
+    }
+    <input sc-tag-input-field />
+  </div>
+  <div class="flex justify-between text-xs text-muted-foreground">
+    <span>Add up to 10 skills</span>
+    <span sc-tag-input-count></span>
+  </div>
+</div>
+```
+
+### Email Recipients
+
+```html
+<div sc-tag-input [(tags)]="emails" placeholder="Add recipient...">
+  @for (email of emails(); track email) {
+  <span sc-tag-input-tag [tag]="email" variant="outline" class="rounded-full"></span>
+  }
+  <input sc-tag-input-field [addOnBlur]="true" />
+</div>
+```
+
+## Keyboard Navigation
+
+| Key         | Action                               |
+| ----------- | ------------------------------------ |
+| `Enter`     | Add tag (default delimiter)          |
+| `,`         | Add tag (default delimiter)          |
+| `Backspace` | Remove last tag (when input empty)   |
+| `Tab`       | Move focus / add tag (if configured) |
+
+## Features
+
+- **Flexible Delimiters**: Configure any keys to trigger tag addition
+- **Duplicate Prevention**: Optional duplicate checking
+- **Max Tags Limit**: Enforce maximum number of tags
+- **Validation**: Min/max length constraints
+- **Add on Blur**: Optionally add tag when input loses focus
+- **Paste Support**: Paste comma-separated values
+- **Keyboard Support**: Full keyboard navigation
+- **Clear All**: Remove all tags at once
+- **Count Display**: Show current/max tag count
+- **Multiple Variants**: Default, secondary, outline styles
+- **Two-way Binding**: Sync with `[(tags)]`
+
+## Accessibility
+
+- Click container to focus input
+- ARIA labels on remove buttons
+- Keyboard navigation support
+- Focus indicators
+- Disabled state support

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

@@ -0,0 +1,5 @@
+export { SC_TAG_INPUT, ScTagInput } from './tag-input';
+export { ScTagInputField } from './tag-input-field';
+export { ScTagInputTag } from './tag-input-tag';
+export { ScTagInputClear } from './tag-input-clear';
+export { ScTagInputCount } from './tag-input-count';

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

@@ -0,0 +1,60 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_TAG_INPUT } from './tag-input';
+
+// ============================================================================
+// TagInputClear
+// ============================================================================
+@Component({
+  selector: 'button[sc-tag-input-clear]',
+  template: `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      class="size-4"
+    >
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </svg>
+  `,
+  host: {
+    'data-slot': 'tag-input-clear',
+    type: 'button',
+    '[class]': 'class()',
+    '[disabled]': 'tagInput.disabled() || tagInput.tags().length === 0',
+    '(click)': 'onClick($event)',
+    '[attr.aria-label]': '"Clear all tags"',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScTagInputClear {
+  readonly tagInput = inject(SC_TAG_INPUT);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'ml-auto inline-flex size-6 items-center justify-center rounded-md',
+      'text-muted-foreground hover:text-foreground hover:bg-muted',
+      'disabled:pointer-events-none disabled:opacity-50',
+      'focus:outline-none focus:ring-1 focus:ring-ring',
+      this.classInput(),
+    ),
+  );
+
+  onClick(event: Event): void {
+    event.stopPropagation();
+    this.tagInput.clearAll();
+  }
+}

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

@@ -0,0 +1,42 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_TAG_INPUT } from './tag-input';
+
+// ============================================================================
+// TagInputCount
+// ============================================================================
+@Component({
+  selector: '[sc-tag-input-count]',
+  template: `
+    {{ tagInput.tags().length }}{{ maxText() }}
+  `,
+  host: {
+    'data-slot': 'tag-input-count',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScTagInputCount {
+  readonly tagInput = inject(SC_TAG_INPUT);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly showMax = input<boolean>(true);
+
+  protected readonly class = computed(() =>
+    cn('text-xs text-muted-foreground', this.classInput()),
+  );
+
+  protected readonly maxText = computed(() => {
+    if (!this.showMax()) return '';
+    const max = this.tagInput.maxTags();
+    return max !== null ? ` / ${max}` : '';
+  });
+}

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

@@ -0,0 +1,121 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_TAG_INPUT } from './tag-input';
+
+// ============================================================================
+// TagInputField
+// ============================================================================
+@Component({
+  selector: 'input[sc-tag-input-field]',
+  template: ``,
+  host: {
+    'data-slot': 'tag-input-field',
+    type: 'text',
+    '[class]': 'class()',
+    '[placeholder]': 'tagInput.canAddMore() ? tagInput.placeholder() : ""',
+    '[disabled]': 'tagInput.disabled() || !tagInput.canAddMore()',
+    '[value]': 'tagInput.inputValue()',
+    '(input)': 'onInput($event)',
+    '(keydown)': 'onKeydown($event)',
+    '(focus)': 'tagInput.isFocused.set(true)',
+    '(blur)': 'onBlur()',
+    '(paste)': 'onPaste($event)',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScTagInputField {
+  readonly tagInput = inject(SC_TAG_INPUT);
+  private readonly elementRef = inject(ElementRef<HTMLInputElement>);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly addOnBlur = input<boolean>(false);
+
+  protected readonly class = computed(() =>
+    cn(
+      'flex-1 min-w-[120px] bg-transparent text-sm outline-none placeholder:text-muted-foreground',
+      'disabled:cursor-not-allowed',
+      this.classInput(),
+    ),
+  );
+
+  constructor() {
+    this.tagInput.setInputRef(this.elementRef);
+  }
+
+  onInput(event: Event): void {
+    const value = (event.target as HTMLInputElement).value;
+    this.tagInput.inputValue.set(value);
+  }
+
+  onKeydown(event: KeyboardEvent): void {
+    const value = this.tagInput.inputValue();
+    const delimiters = this.tagInput.delimiters();
+
+    // Check if key is a delimiter
+    if (delimiters.includes(event.key)) {
+      event.preventDefault();
+      if (value.trim()) {
+        if (this.tagInput.addTag(value)) {
+          this.tagInput.inputValue.set('');
+        }
+      }
+      return;
+    }
+
+    // Handle backspace to remove last tag
+    if (event.key === 'Backspace' && !value) {
+      event.preventDefault();
+      this.tagInput.removeLastTag();
+    }
+  }
+
+  onBlur(): void {
+    this.tagInput.isFocused.set(false);
+
+    if (this.addOnBlur()) {
+      const value = this.tagInput.inputValue();
+      if (value.trim()) {
+        if (this.tagInput.addTag(value)) {
+          this.tagInput.inputValue.set('');
+        }
+      }
+    }
+  }
+
+  onPaste(event: ClipboardEvent): void {
+    const delimiters = this.tagInput.delimiters();
+    const pastedText = event.clipboardData?.getData('text') ?? '';
+
+    // Check if pasted text contains delimiters (excluding Enter)
+    const textDelimiters = delimiters.filter((d) => d !== 'Enter');
+    const hasDelimiters = textDelimiters.some((d) => pastedText.includes(d));
+
+    if (hasDelimiters) {
+      event.preventDefault();
+
+      // Split by all text delimiters
+      let tags = [pastedText];
+      textDelimiters.forEach((delimiter) => {
+        tags = tags.flatMap((t) => t.split(delimiter));
+      });
+
+      // Add each tag
+      tags.forEach((tag) => {
+        if (tag.trim()) {
+          this.tagInput.addTag(tag);
+        }
+      });
+
+      this.tagInput.inputValue.set('');
+    }
+  }
+}

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

@@ -0,0 +1,70 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_TAG_INPUT } from './tag-input';
+
+// ============================================================================
+// TagInputTag
+// ============================================================================
+@Component({
+  selector: '[sc-tag-input-tag]',
+  template: `
+    <span class="truncate">{{ tag() }}</span>
+    @if (!tagInput.disabled()) {
+      <button
+        type="button"
+        class="ml-1 rounded-full hover:bg-foreground/20 focus:outline-none focus:ring-1 focus:ring-ring"
+        (click)="remove($event)"
+        [attr.aria-label]="'Remove ' + tag()"
+      >
+        <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 18" />
+          <path d="m6 6 12 12" />
+        </svg>
+      </button>
+    }
+  `,
+  host: {
+    'data-slot': 'tag-input-tag',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScTagInputTag {
+  readonly tagInput = inject(SC_TAG_INPUT);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly tag = input.required<string>();
+  readonly variant = input<'default' | 'secondary' | 'outline'>('default');
+
+  protected readonly class = computed(() =>
+    cn(
+      'inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium transition-colors',
+      'max-w-[150px]',
+      this.variant() === 'default' && 'bg-primary text-primary-foreground',
+      this.variant() === 'secondary' &&
+        'bg-secondary text-secondary-foreground',
+      this.variant() === 'outline' && 'border bg-background',
+      this.classInput(),
+    ),
+  );
+
+  remove(event: Event): void {
+    event.stopPropagation();
+    this.tagInput.removeTag(this.tag());
+  }
+}