@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/kanban-board/kanban-column.ts

@@ -0,0 +1,371 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  output,
+  signal,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { ScKanbanCard } from './kanban-card';
+import type { KanbanCard, KanbanColumn, KanbanDragEvent } from './kanban-types';
+
+@Component({
+  selector: 'sc-kanban-column',
+  imports: [ScKanbanCard],
+  template: `
+    <div [class]="columnClass()">
+      <!-- Header -->
+      <div
+        class="flex items-center justify-between p-3 border-b"
+        [style.border-top-color]="column().color || 'transparent'"
+        [style.border-top-width]="column().color ? '3px' : '0'"
+      >
+        <div class="flex items-center gap-2">
+          <button
+            type="button"
+            class="p-0.5 hover:bg-muted rounded transition-colors"
+            (click)="toggleCollapse()"
+            [attr.aria-expanded]="!collapsed()"
+            [attr.aria-label]="
+              collapsed() ? 'Expand column' : 'Collapse column'
+            "
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              [class]="collapsed() ? '-rotate-90' : 'rotate-0'"
+              class="transition-transform"
+            >
+              <path d="m6 9 6 6 6-6" />
+            </svg>
+          </button>
+          <h3 class="font-semibold text-sm text-foreground">
+            {{ column().title }}
+          </h3>
+          <span class="px-1.5 py-0.5 text-xs font-medium bg-muted rounded-full">
+            {{ cards().length }}
+            @if (column().limit) {
+              /{{ column().limit }}
+            }
+          </span>
+        </div>
+
+        @if (showAddButton()) {
+          <button
+            type="button"
+            class="p-1 hover:bg-muted rounded transition-colors text-muted-foreground hover:text-foreground"
+            (click)="startAddingCard()"
+            aria-label="Add card"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M5 12h14" />
+              <path d="M12 5v14" />
+            </svg>
+          </button>
+        }
+      </div>
+
+      <!-- Collapsed state -->
+      @if (collapsed()) {
+        <div class="p-3 text-center text-sm text-muted-foreground">
+          {{ cards().length }} cards
+        </div>
+      } @else {
+        <!-- Cards container -->
+        <div
+          class="flex-1 p-2 space-y-2 overflow-y-auto min-h-[100px]"
+          [class.bg-primary/5]="isDragOver()"
+          [class.ring-2]="isDragOver()"
+          [class.ring-primary]="isDragOver()"
+          [class.ring-inset]="isDragOver()"
+          (dragover)="onDragOver($event)"
+          (dragleave)="onDragLeave($event)"
+          (drop)="onDrop($event)"
+          role="list"
+          [attr.aria-label]="column().title + ' cards'"
+        >
+          @for (card of cards(); track card.id; let idx = $index) {
+            <div
+              [class.border-t-2]="dropIndex() === idx"
+              [class.border-primary]="dropIndex() === idx"
+              [class.pt-2]="dropIndex() === idx"
+            >
+              <sc-kanban-card
+                [card]="card"
+                [disabled]="disabled()"
+                [showDelete]="showDeleteCard()"
+                (dragStart)="onCardDragStart($event, card)"
+                (dragEnd)="onCardDragEnd()"
+                (delete)="deleteCard.emit(card)"
+                (cardClick)="cardClick.emit($event)"
+              />
+            </div>
+          }
+
+          <!-- Drop indicator at end -->
+          @if (dropIndex() === cards().length && cards().length > 0) {
+            <div class="border-t-2 border-primary pt-2"></div>
+          }
+
+          <!-- Empty state -->
+          @if (cards().length === 0 && !isAddingCard()) {
+            <div
+              class="flex items-center justify-center h-24 text-sm text-muted-foreground border-2 border-dashed rounded-lg"
+            >
+              Drop cards here
+            </div>
+          }
+
+          <!-- Add card form -->
+          @if (isAddingCard()) {
+            <div class="p-2 bg-card border rounded-lg shadow-sm">
+              <textarea
+                #addInput
+                class="w-full p-2 text-sm border rounded resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+                rows="2"
+                placeholder="Enter card title..."
+                (keydown.enter)="submitNewCard($event)"
+                (keydown.escape)="cancelAddingCard()"
+                (blur)="onInputBlur()"
+              ></textarea>
+              <div class="flex items-center gap-2 mt-2">
+                <button
+                  type="button"
+                  class="px-3 py-1.5 text-xs font-medium bg-primary text-primary-foreground rounded hover:bg-primary/90 transition-colors"
+                  (mousedown)="submitNewCardFromButton()"
+                >
+                  Add
+                </button>
+                <button
+                  type="button"
+                  class="px-3 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors"
+                  (mousedown)="cancelAddingCard()"
+                >
+                  Cancel
+                </button>
+              </div>
+            </div>
+          }
+        </div>
+
+        <!-- Add card button at bottom -->
+        @if (!isAddingCard() && showAddButton()) {
+          <button
+            type="button"
+            class="w-full p-2 text-sm text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors flex items-center justify-center gap-1 border-t"
+            (click)="startAddingCard()"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M5 12h14" />
+              <path d="M12 5v14" />
+            </svg>
+            Add card
+          </button>
+        }
+
+        <!-- Limit warning -->
+        @if (isOverLimit()) {
+          <div
+            class="px-3 py-1.5 text-xs text-orange-600 dark:text-orange-400 bg-orange-500/10 border-t"
+          >
+            Column limit exceeded ({{ cards().length }}/{{ column().limit }})
+          </div>
+        }
+      }
+    </div>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScKanbanColumn {
+  readonly column = input.required<KanbanColumn>();
+  readonly cards = input<KanbanCard[]>([]);
+  readonly disabled = input(false);
+  readonly showAddButton = input(true);
+  readonly showDeleteCard = input(true);
+  readonly class = input<string>('');
+
+  readonly cardMoved = output<KanbanDragEvent>();
+  readonly addCard = output<string>();
+  readonly deleteCard = output<KanbanCard>();
+  readonly cardClick = output<KanbanCard>();
+  readonly collapseChange = output<boolean>();
+
+  protected readonly collapsed = signal(false);
+  protected readonly isDragOver = signal(false);
+  protected readonly dropIndex = signal<number | null>(null);
+  protected readonly isAddingCard = signal(false);
+  protected readonly draggedCard = signal<KanbanCard | null>(null);
+
+  protected readonly columnClass = computed(() =>
+    cn(
+      'flex flex-col bg-muted/30 border rounded-lg min-w-[280px] max-w-[320px] max-h-full',
+      this.class(),
+    ),
+  );
+
+  protected readonly isOverLimit = computed(() => {
+    const limit = this.column().limit;
+    return limit !== undefined && this.cards().length > limit;
+  });
+
+  protected toggleCollapse(): void {
+    const newValue = !this.collapsed();
+    this.collapsed.set(newValue);
+    this.collapseChange.emit(newValue);
+  }
+
+  protected onDragOver(event: DragEvent): void {
+    if (this.disabled()) return;
+
+    event.preventDefault();
+    event.dataTransfer!.dropEffect = 'move';
+    this.isDragOver.set(true);
+
+    // Calculate drop index based on mouse position
+    const container = event.currentTarget as HTMLElement;
+    const cards = container.querySelectorAll('sc-kanban-card');
+    const mouseY = event.clientY;
+
+    let newDropIndex = this.cards().length;
+
+    cards.forEach((card, index) => {
+      const rect = card.getBoundingClientRect();
+      const cardMiddle = rect.top + rect.height / 2;
+
+      if (mouseY < cardMiddle) {
+        newDropIndex = Math.min(newDropIndex, index);
+      }
+    });
+
+    this.dropIndex.set(newDropIndex);
+  }
+
+  protected onDragLeave(event: DragEvent): void {
+    // Only handle if leaving the container, not entering a child
+    const relatedTarget = event.relatedTarget as HTMLElement;
+    const container = event.currentTarget as HTMLElement;
+
+    if (!container.contains(relatedTarget)) {
+      this.isDragOver.set(false);
+      this.dropIndex.set(null);
+    }
+  }
+
+  protected onDrop(event: DragEvent): void {
+    event.preventDefault();
+    this.isDragOver.set(false);
+
+    const data = event.dataTransfer?.getData('application/json');
+    if (!data) return;
+
+    try {
+      const card = JSON.parse(data) as KanbanCard;
+      const sourceColumnId = card.columnId;
+      const targetColumnId = this.column().id;
+      const sourceIndex = card.order;
+      const targetIndex = this.dropIndex() ?? this.cards().length;
+
+      this.cardMoved.emit({
+        card,
+        sourceColumnId,
+        targetColumnId,
+        sourceIndex,
+        targetIndex,
+      });
+    } catch {
+      // Invalid JSON, ignore
+    }
+
+    this.dropIndex.set(null);
+  }
+
+  protected onCardDragStart(_event: DragEvent, card: KanbanCard): void {
+    this.draggedCard.set(card);
+  }
+
+  protected onCardDragEnd(): void {
+    this.draggedCard.set(null);
+    this.isDragOver.set(false);
+    this.dropIndex.set(null);
+  }
+
+  protected startAddingCard(): void {
+    this.isAddingCard.set(true);
+    // Focus the input after it renders
+    requestAnimationFrame(() => {
+      const input = document.querySelector(
+        'sc-kanban-column textarea',
+      ) as HTMLTextAreaElement;
+      input?.focus();
+    });
+  }
+
+  protected cancelAddingCard(): void {
+    this.isAddingCard.set(false);
+  }
+
+  protected submitNewCard(event: Event): void {
+    event.preventDefault();
+    const textarea = event.target as HTMLTextAreaElement;
+    const title = textarea.value.trim();
+
+    if (title) {
+      this.addCard.emit(title);
+      textarea.value = '';
+    }
+
+    this.isAddingCard.set(false);
+  }
+
+  protected submitNewCardFromButton(): void {
+    const textarea = document.querySelector(
+      'sc-kanban-column textarea',
+    ) as HTMLTextAreaElement;
+    const title = textarea?.value.trim();
+
+    if (title) {
+      this.addCard.emit(title);
+    }
+
+    this.isAddingCard.set(false);
+  }
+
+  protected onInputBlur(): void {
+    // Small delay to allow button click to register
+    setTimeout(() => {
+      if (this.isAddingCard()) {
+        this.isAddingCard.set(false);
+      }
+    }, 150);
+  }
+}

package/src/lib/components/kanban-board/kanban-types.ts

@@ -0,0 +1,52 @@
+export interface KanbanCard {
+  id: string;
+  title: string;
+  description?: string;
+  columnId: string;
+  order: number;
+  labels?: KanbanLabel[];
+  assignee?: KanbanAssignee;
+  dueDate?: Date;
+  priority?: 'low' | 'medium' | 'high' | 'urgent';
+  metadata?: Record<string, unknown>;
+}
+
+export interface KanbanLabel {
+  id: string;
+  text: string;
+  color: string;
+}
+
+export interface KanbanAssignee {
+  id: string;
+  name: string;
+  avatar?: string;
+  initials?: string;
+}
+
+export interface KanbanColumn {
+  id: string;
+  title: string;
+  order: number;
+  color?: string;
+  limit?: number;
+  collapsed?: boolean;
+}
+
+export interface KanbanDragEvent {
+  card: KanbanCard;
+  sourceColumnId: string;
+  targetColumnId: string;
+  sourceIndex: number;
+  targetIndex: number;
+}
+
+export interface KanbanCardAddEvent {
+  columnId: string;
+  title: string;
+}
+
+export interface KanbanCardDeleteEvent {
+  card: KanbanCard;
+  columnId: string;
+}

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

@@ -0,0 +1,58 @@
+# Kbd
+
+A component for displaying keyboard keys and shortcuts.
+
+## Components
+
+- `ScKbd` - A keyboard key indicator
+- `ScKbdGroup` - A group of keyboard keys displayed inline
+
+## Usage
+
+```html
+<kbd sc-kbd>⌘</kbd>
+```
+
+## Keyboard Shortcuts
+
+```html
+<div class="flex items-center gap-2">
+  <kbd sc-kbd>⌘</kbd>
+  <span>+</span>
+  <kbd sc-kbd>K</kbd>
+</div>
+```
+
+## Kbd Group
+
+```html
+<kbd sc-kbd-group>
+  <kbd sc-kbd>⌘</kbd>
+  <kbd sc-kbd>K</kbd>
+</kbd>
+```
+
+## Inline Usage
+
+```html
+<p>
+  Press
+  <kbd sc-kbd>⌘</kbd>
+  <kbd sc-kbd>K</kbd>
+  to open the command palette.
+</p>
+```
+
+## Inputs
+
+### ScKbd
+
+| Input   | Type     | Default | Description            |
+| ------- | -------- | ------- | ---------------------- |
+| `class` | `string` | `''`    | Additional CSS classes |
+
+### ScKbdGroup
+
+| Input   | Type     | Default | Description            |
+| ------- | -------- | ------- | ---------------------- |
+| `class` | `string` | `''`    | Additional CSS classes |

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

@@ -0,0 +1,2 @@
+export { ScKbd } from './kbd';
+export { ScKbdGroup } from './kbd-group';

package/src/lib/components/kbd/kbd-group.ts

@@ -0,0 +1,17 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'kbd[sc-kbd-group]',
+  host: {
+    'data-slot': 'kbd-group',
+    '[class]': 'class()',
+  },
+})
+export class ScKbdGroup {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('gap-1 inline-flex items-center', this.classInput()),
+  );
+}

package/src/lib/components/kbd/kbd.ts

@@ -0,0 +1,20 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: 'kbd[sc-kbd]',
+  host: {
+    'data-slot': 'kbd',
+    '[class]': 'class()',
+  },
+})
+export class ScKbd {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*=size-])]:size-3 pointer-events-none inline-flex items-center justify-center select-none',
+      this.classInput(),
+    ),
+  );
+}

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

@@ -0,0 +1,90 @@
+# Label
+
+Renders an accessible label associated with controls.
+
+## Components
+
+- `ScLabel` - Styled label directive for form controls
+
+## Usage
+
+### Recommended: With Field Component
+
+It is recommended to use the label inside a `sc-field` component for automatic association with form controls and better accessibility:
+
+```html
+<div sc-field>
+  <label sc-label>Email</label>
+  <input sc-input type="email" placeholder="Enter your email" />
+  <p sc-field-description>The label automatically links to the input via the field context.</p>
+</div>
+```
+
+When used inside a field, the label automatically associates with the input without needing an explicit `for` attribute.
+
+### Standalone Usage
+
+You can also use the label independently with an explicit `for` attribute:
+
+```html
+<label sc-label for="email">Email</label>
+<input type="email" id="email" />
+```
+
+## With Checkbox
+
+```html
+<div class="flex items-center space-x-2">
+  <sc-checkbox id="terms" />
+  <label sc-label for="terms">Accept terms and conditions</label>
+</div>
+```
+
+## With Input
+
+```html
+<div class="grid w-full max-w-sm items-center gap-1.5">
+  <label sc-label for="email">Email</label>
+  <input type="email" id="email" placeholder="Email" class="..." />
+</div>
+```
+
+## Required Field
+
+```html
+<label sc-label for="required">
+  Required Field
+  <span class="text-destructive">*</span>
+</label>
+```
+
+## Disabled Styling
+
+The label supports `peer-disabled` styling when used with Tailwind's peer modifier:
+
+```html
+<input type="text" id="disabled" disabled class="peer ..." />
+<label sc-label for="disabled">Disabled Input</label>
+```
+
+## Inputs
+
+| Input   | Type     | Default | Description            |
+| ------- | -------- | ------- | ---------------------- |
+| `class` | `string` | `''`    | Additional CSS classes |
+
+## Styling
+
+The label applies the following styles by default:
+
+- `text-sm` - Small text size
+- `font-medium` - Medium font weight
+- `leading-none` - Tight line height
+- `peer-disabled:cursor-not-allowed` - Not-allowed cursor when peer is disabled
+- `peer-disabled:opacity-70` - Reduced opacity when peer is disabled
+
+## Accessibility
+
+- Uses native `<label>` element for built-in accessibility
+- Associates with form controls via `for` attribute
+- Clicking the label focuses/activates the associated control

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

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

package/src/lib/components/label/label.ts

@@ -0,0 +1,32 @@
+import { computed, Directive, inject, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_FIELD } from '../field';
+
+@Directive({
+  selector: 'label[sc-label]',
+  host: {
+    'data-slot': 'label',
+    '[attr.for]': 'for()',
+    '[class]': 'class()',
+  },
+})
+export class ScLabel {
+  private readonly field = inject(SC_FIELD, { optional: true });
+
+  readonly forInput = input<string>('', { alias: 'for' });
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly for = computed(() => {
+    // Priority: explicit for input > field context
+    const forValue = this.forInput() || this.field?.id();
+    return forValue || null;
+  });
+
+  protected readonly class = computed(() =>
+    cn(
+      'has-data-checked:bg-primary/5 has-data-checked:border-primary dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2.5 group/label peer/label flex w-fit leading-snug',
+      'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/language-switcher/index.ts

@@ -0,0 +1,4 @@
+export * from './language.service';
+export * from './language-toggle';
+export { ScLanguageSelect } from './language-select';
+export { ScLanguageButton } from './language-button';