@semantic-components/ui-lab 0.63.0 → 0.65.0

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

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

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

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

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

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

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

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

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