@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/field/field-title.ts

@@ -0,0 +1,20 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: '[sc-field-title]',
+  host: {
+    'data-slot': 'field-title',
+    '[class]': 'class()',
+  },
+})
+export class ScFieldTitle {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/field/field.ts

@@ -0,0 +1,89 @@
+import { _IdGenerator } from '@angular/cdk/a11y';
+import {
+  computed,
+  contentChild,
+  Directive,
+  ElementRef,
+  inject,
+  InjectionToken,
+  input,
+} from '@angular/core';
+import { FormField } from '@angular/forms/signals';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@semantic-components/ui';
+
+const fieldVariants = cva(
+  'gap-2 group/field flex w-full data-[invalid=true]:text-destructive',
+  {
+    variants: {
+      orientation: {
+        vertical: 'flex-col [&>*]:w-full [&>.sr-only]:w-auto',
+        horizontal:
+          'flex-row items-center [&>[data-slot=label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+        responsive:
+          'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',
+      },
+    },
+    defaultVariants: {
+      orientation: 'vertical',
+    },
+  },
+);
+
+export type ScFieldVariants = VariantProps<typeof fieldVariants>;
+
+export interface ScFieldContext {
+  id: () => string;
+}
+
+export const SC_FIELD = new InjectionToken<ScFieldContext>('SC_FIELD');
+
+@Directive({
+  selector: 'div[sc-field], label[sc-field]',
+  host: {
+    '[attr.role]': 'role()',
+    'data-slot': 'field',
+    '[attr.id]': 'id()',
+    '[attr.data-orientation]': 'orientation()',
+    '[attr.data-invalid]': 'invalid()',
+    '[attr.data-disabled]': 'disabled()',
+    '[class]': 'class()',
+  },
+  providers: [
+    {
+      provide: SC_FIELD,
+      useExisting: ScField,
+    },
+  ],
+})
+export class ScField implements ScFieldContext {
+  private readonly elementRef = inject(ElementRef<HTMLElement>);
+
+  readonly id = input(inject(_IdGenerator).getId('sc-field-'));
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly orientation = input<ScFieldVariants['orientation']>('vertical');
+  readonly invalidInput = input<boolean>(false, { alias: 'invalid' });
+  readonly disabledInput = input<boolean>(false, { alias: 'disabled' });
+
+  private readonly formFieldDirective = contentChild(FormField);
+
+  protected readonly role = computed(() => {
+    // Only LABEL preserves native semantics, DIV gets role="group"
+    const tagName = this.elementRef.nativeElement.tagName;
+    return tagName === 'LABEL' ? null : 'group';
+  });
+
+  readonly invalid = computed(() => {
+    if (this.invalidInput()) return true;
+    return this.formFieldDirective()?.state().invalid() ?? false;
+  });
+
+  readonly disabled = computed(() => {
+    if (this.disabledInput()) return true;
+    return this.formFieldDirective()?.state().disabled() ?? false;
+  });
+
+  protected readonly class = computed(() =>
+    cn(fieldVariants({ orientation: this.orientation() }), this.classInput()),
+  );
+}

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

@@ -0,0 +1,9 @@
+export * from './field';
+export * from './field-set';
+export * from './field-legend';
+export * from './field-group';
+export * from './field-content';
+export * from './field-title';
+export * from './field-description';
+export * from './field-separator';
+export * from './field-error';

package/src/lib/components/file-upload/README.md

@@ -0,0 +1,256 @@
+# File Upload
+
+A drag and drop file upload zone with preview and progress support.
+
+## Usage
+
+```html
+<div sc-file-upload [multiple]="true" [(files)]="files">
+  <div sc-file-upload-dropzone>
+    <p>Drag and drop files here or click to browse</p>
+  </div>
+
+  <div sc-file-upload-list>
+    @for (file of files(); track file.id) {
+    <div sc-file-upload-item [file]="file">
+      <div sc-file-upload-item-preview [file]="file"></div>
+      <div sc-file-upload-item-name>{{ file.file.name }}</div>
+      <div sc-file-upload-item-size [file]="file"></div>
+      <button sc-file-upload-item-delete [fileId]="file.id"></button>
+    </div>
+    }
+  </div>
+</div>
+```
+
+## Components
+
+### ScFileUpload
+
+Root container that manages file state.
+
+**Selector:** `[sc-file-upload]`
+
+**Inputs:**
+
+| Input      | Type      | Default | Description                           |
+| ---------- | --------- | ------- | ------------------------------------- |
+| `multiple` | `boolean` | `false` | Allow multiple file selection         |
+| `accept`   | `string`  | `''`    | Accepted file types (e.g. `image/*`)  |
+| `maxSize`  | `number`  | `0`     | Max file size in bytes (0 = no limit) |
+| `maxFiles` | `number`  | `0`     | Max number of files (0 = no limit)    |
+| `disabled` | `boolean` | `false` | Disable file upload                   |
+| `class`    | `string`  | `''`    | Additional CSS classes                |
+
+**Two-way Bindings:**
+
+| Binding | Type               | Description    |
+| ------- | ------------------ | -------------- |
+| `files` | `FileUploadFile[]` | Selected files |
+
+**Outputs:**
+
+| Output          | Type             | Description                 |
+| --------------- | ---------------- | --------------------------- |
+| `filesSelected` | `File[]`         | Emitted when files added    |
+| `fileRemoved`   | `FileUploadFile` | Emitted when file removed   |
+| `error`         | `string`         | Emitted on validation error |
+
+**Methods:**
+
+| Method                                    | Description                |
+| ----------------------------------------- | -------------------------- |
+| `addFiles(files: FileList \| File[])`     | Add files programmatically |
+| `removeFile(fileId: string)`              | Remove a file by ID        |
+| `updateFileProgress(fileId, progress)`    | Update upload progress     |
+| `updateFileStatus(fileId, status, error)` | Update file status         |
+| `clearFiles()`                            | Remove all files           |
+
+### ScFileUploadDropzone
+
+Drag and drop zone that also responds to clicks.
+
+**Selector:** `[sc-file-upload-dropzone]`
+
+**Data Attributes:**
+
+| Attribute       | Values            |
+| --------------- | ----------------- |
+| `data-dragging` | `true` \| `false` |
+| `data-disabled` | `true` \| `null`  |
+
+### ScFileUploadTrigger
+
+Button that opens the file picker.
+
+**Selector:** `button[sc-file-upload-trigger]`
+
+### ScFileUploadList
+
+Container for file items.
+
+**Selector:** `[sc-file-upload-list]`
+
+### ScFileUploadItem
+
+Individual file item container.
+
+**Selector:** `[sc-file-upload-item]`
+
+**Inputs:**
+
+| Input   | Type             | Required | Description     |
+| ------- | ---------------- | -------- | --------------- |
+| `file`  | `FileUploadFile` | Yes      | The file object |
+| `class` | `string`         | No       | Additional CSS  |
+
+**Data Attributes:**
+
+| Attribute     | Values                                              |
+| ------------- | --------------------------------------------------- |
+| `data-status` | `'pending' \| 'uploading' \| 'complete' \| 'error'` |
+
+### ScFileUploadItemPreview
+
+File preview (shows image thumbnail for images).
+
+**Selector:** `[sc-file-upload-item-preview]`
+
+**Inputs:**
+
+| Input  | Type             | Required | Description     |
+| ------ | ---------------- | -------- | --------------- |
+| `file` | `FileUploadFile` | Yes      | The file object |
+
+### ScFileUploadItemName
+
+File name display.
+
+**Selector:** `[sc-file-upload-item-name]`
+
+### ScFileUploadItemSize
+
+Formatted file size display.
+
+**Selector:** `[sc-file-upload-item-size]`
+
+**Inputs:**
+
+| Input  | Type             | Required | Description     |
+| ------ | ---------------- | -------- | --------------- |
+| `file` | `FileUploadFile` | Yes      | The file object |
+
+### ScFileUploadItemDelete
+
+Delete button for removing a file.
+
+**Selector:** `button[sc-file-upload-item-delete]`
+
+**Inputs:**
+
+| Input    | Type     | Required | Description |
+| -------- | -------- | -------- | ----------- |
+| `fileId` | `string` | Yes      | File ID     |
+
+### ScFileUploadItemProgress
+
+Progress bar for upload status.
+
+**Selector:** `[sc-file-upload-item-progress]`
+
+**Inputs:**
+
+| Input  | Type             | Required | Description     |
+| ------ | ---------------- | -------- | --------------- |
+| `file` | `FileUploadFile` | Yes      | The file object |
+
+## Types
+
+```typescript
+interface FileUploadFile {
+  file: File;
+  id: string;
+  progress?: number;
+  status: 'pending' | 'uploading' | 'complete' | 'error';
+  error?: string;
+}
+```
+
+## Examples
+
+### Basic Dropzone
+
+```html
+<div sc-file-upload [multiple]="true" [(files)]="files">
+  <div sc-file-upload-dropzone class="p-8">
+    <div class="flex flex-col items-center gap-2">
+      <p>Drag and drop files here</p>
+      <p class="text-sm text-muted-foreground">or click to browse</p>
+    </div>
+  </div>
+</div>
+```
+
+### Image Upload
+
+```html
+<div sc-file-upload [multiple]="true" accept="image/*" [maxSize]="5242880" [(files)]="images">
+  <div sc-file-upload-dropzone>
+    <p>Upload images (PNG, JPG up to 5MB)</p>
+  </div>
+
+  <div sc-file-upload-list>
+    @for (file of images(); track file.id) {
+    <div sc-file-upload-item [file]="file">
+      <div sc-file-upload-item-preview [file]="file"></div>
+      <div sc-file-upload-item-name>{{ file.file.name }}</div>
+      <button sc-file-upload-item-delete [fileId]="file.id"></button>
+    </div>
+    }
+  </div>
+</div>
+```
+
+### Button Trigger
+
+```html
+<div sc-file-upload [(files)]="files">
+  <button sc-file-upload-trigger>Upload Files</button>
+</div>
+```
+
+### With Progress
+
+```html
+<div sc-file-upload [(files)]="files" (filesSelected)="handleUpload($event)">
+  <div sc-file-upload-dropzone>Upload files</div>
+
+  <div sc-file-upload-list>
+    @for (file of files(); track file.id) {
+    <div sc-file-upload-item [file]="file">
+      <div sc-file-upload-item-name>{{ file.file.name }}</div>
+      @if (file.status === 'uploading') {
+      <div sc-file-upload-item-progress [file]="file"></div>
+      }
+    </div>
+    }
+  </div>
+</div>
+```
+
+## Features
+
+- **Drag and Drop**: Drop files directly onto the dropzone
+- **Click to Browse**: Click dropzone or trigger button to open file picker
+- **File Validation**: Accept types, max size, max file count
+- **Image Preview**: Automatic thumbnail for image files
+- **Progress Tracking**: Built-in progress bar component
+- **File Management**: Add, remove, clear files programmatically
+- **Multiple/Single**: Support for single or multiple file selection
+
+## Accessibility
+
+- Hidden file input is properly labeled
+- Visual feedback for drag state
+- Keyboard accessible trigger button
+- Screen reader text for delete button

package/src/lib/components/file-upload/file-upload-dropzone.ts

@@ -0,0 +1,100 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  ElementRef,
+  inject,
+  input,
+  signal,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_FILE_UPLOAD } from './file-upload';
+
+@Component({
+  selector: '[sc-file-upload-dropzone]',
+  template: `
+    <input
+      #fileInput
+      type="file"
+      class="sr-only"
+      [multiple]="fileUpload.multiple()"
+      [accept]="fileUpload.accept()"
+      [disabled]="fileUpload.disabled()"
+      (change)="onFileSelect($event)"
+    />
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'file-upload-dropzone',
+    '[class]': 'class()',
+    '[attr.data-dragging]': 'isDragging()',
+    '[attr.data-disabled]': 'fileUpload.disabled() || null',
+    '(click)': 'openFilePicker()',
+    '(dragover)': 'onDragOver($event)',
+    '(dragleave)': 'onDragLeave($event)',
+    '(drop)': 'onDrop($event)',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScFileUploadDropzone {
+  readonly fileUpload = inject(SC_FILE_UPLOAD);
+  private readonly elementRef = inject(ElementRef);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly isDragging = signal(false);
+
+  protected readonly class = computed(() =>
+    cn(
+      'relative flex min-h-[150px] cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed',
+      'transition-colors hover:border-primary/50 hover:bg-accent/50',
+      'data-[dragging=true]:border-primary data-[dragging=true]:bg-accent',
+      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      this.classInput(),
+    ),
+  );
+
+  openFilePicker(): void {
+    if (this.fileUpload.disabled()) return;
+    const input = this.elementRef.nativeElement.querySelector(
+      'input[type="file"]',
+    ) as HTMLInputElement;
+    input?.click();
+  }
+
+  onFileSelect(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    if (input.files && input.files.length > 0) {
+      this.fileUpload.addFiles(input.files);
+      input.value = '';
+    }
+  }
+
+  onDragOver(event: DragEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!this.fileUpload.disabled()) {
+      this.isDragging.set(true);
+    }
+  }
+
+  onDragLeave(event: DragEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this.isDragging.set(false);
+  }
+
+  onDrop(event: DragEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this.isDragging.set(false);
+
+    if (this.fileUpload.disabled()) return;
+
+    const files = event.dataTransfer?.files;
+    if (files && files.length > 0) {
+      this.fileUpload.addFiles(files);
+    }
+  }
+}

package/src/lib/components/file-upload/file-upload-item-delete.ts

@@ -0,0 +1,59 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_FILE_UPLOAD } from './file-upload';
+
+@Component({
+  selector: 'button[sc-file-upload-item-delete]',
+  template: `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="size-4"
+    >
+      <path d="M18 6 6 18" />
+      <path d="m6 6 12 12" />
+    </svg>
+    <span class="sr-only">Remove file</span>
+  `,
+  host: {
+    'data-slot': 'file-upload-item-delete',
+    type: 'button',
+    '[class]': 'class()',
+    '(click)': 'onClick()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScFileUploadItemDelete {
+  private readonly fileUpload = inject(SC_FILE_UPLOAD);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly fileId = input.required<string>();
+
+  protected readonly class = computed(() =>
+    cn(
+      'inline-flex size-8 items-center justify-center rounded-md text-muted-foreground',
+      'transition-colors hover:bg-accent hover:text-foreground',
+      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+      this.classInput(),
+    ),
+  );
+
+  onClick(): void {
+    this.fileUpload.removeFile(this.fileId());
+  }
+}

package/src/lib/components/file-upload/file-upload-item-name.ts

@@ -0,0 +1,17 @@
+import { computed, Directive, input } from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Directive({
+  selector: '[sc-file-upload-item-name]',
+  host: {
+    'data-slot': 'file-upload-item-name',
+    '[class]': 'class()',
+  },
+})
+export class ScFileUploadItemName {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('flex-1 truncate text-sm font-medium', this.classInput()),
+  );
+}

package/src/lib/components/file-upload/file-upload-item-preview.ts

@@ -0,0 +1,52 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { FileUploadFile } from './file-upload';
+
+@Component({
+  selector: '[sc-file-upload-item-preview]',
+  template: `
+    @if (isImage()) {
+      <img
+        [src]="previewUrl()"
+        [alt]="file().file.name"
+        class="size-full object-cover"
+      />
+    } @else {
+      <ng-content />
+    }
+  `,
+  host: {
+    'data-slot': 'file-upload-item-preview',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScFileUploadItemPreview {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly file = input.required<FileUploadFile>();
+
+  protected readonly isImage = computed(() =>
+    this.file().file.type.startsWith('image/'),
+  );
+
+  protected readonly previewUrl = computed(() => {
+    if (this.isImage()) {
+      return URL.createObjectURL(this.file().file);
+    }
+    return '';
+  });
+
+  protected readonly class = computed(() =>
+    cn(
+      'flex size-10 items-center justify-center overflow-hidden rounded bg-muted',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/file-upload/file-upload-item-progress.ts

@@ -0,0 +1,33 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { FileUploadFile } from './file-upload';
+
+@Component({
+  selector: '[sc-file-upload-item-progress]',
+  template: `
+    <div
+      class="h-full rounded-full bg-primary transition-all"
+      [style.width.%]="file().progress || 0"
+    ></div>
+  `,
+  host: {
+    'data-slot': 'file-upload-item-progress',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScFileUploadItemProgress {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly file = input.required<FileUploadFile>();
+
+  protected readonly class = computed(() =>
+    cn('h-1 w-full overflow-hidden rounded-full bg-muted', this.classInput()),
+  );
+}

package/src/lib/components/file-upload/file-upload-item-size.ts

@@ -0,0 +1,39 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { FileUploadFile } from './file-upload';
+
+@Component({
+  selector: '[sc-file-upload-item-size]',
+  template: `
+    {{ formattedSize() }}
+  `,
+  host: {
+    'data-slot': 'file-upload-item-size',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScFileUploadItemSize {
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly file = input.required<FileUploadFile>();
+
+  protected readonly formattedSize = computed(() => {
+    const bytes = this.file().file.size;
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+  });
+
+  protected readonly class = computed(() =>
+    cn('text-xs text-muted-foreground', this.classInput()),
+  );
+}