@semantic-components/ui-lab 0.63.0 → 0.65.0

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

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

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

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

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

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

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

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

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

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

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