@semantic-components/ui-lab 0.63.0 → 0.65.0

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

@@ -1,161 +0,0 @@
-# Command Components
-
-A command palette for fast, keyboard-driven navigation and actions.
-
-## Architecture
-
-```
-ScCommand (Root)
-    ├── value: model<string> (search query)
-    │
-    ├── ScCommandInput (search input with icon)
-    │
-    └── ScCommandList (scrollable results)
-          │
-          ├── ScCommandEmpty (shown when no results)
-          │
-          ├── ScCommandGroup
-          │     ├── ScCommandGroupHeading
-          │     ├── ScCommandItem
-          │     │     └── ScCommandShortcut
-          │     └── ScCommandItem
-          │
-          ├── ScCommandSeparator
-          │
-          └── ScCommandGroup
-                └── ...
-```
-
-## Components
-
-| Component               | Selector                     | Description                    |
-| ----------------------- | ---------------------------- | ------------------------------ |
-| `ScCommand`             | `div[sc-command]`            | Root wrapper with search state |
-| `ScCommandInput`        | `div[sc-command-input]`      | Search input with icon         |
-| `ScCommandList`         | `div[sc-command-list]`       | Scrollable results container   |
-| `ScCommandEmpty`        | `div[sc-command-empty]`      | Shown when no results match    |
-| `ScCommandGroup`        | `div[sc-command-group]`      | Group of related items         |
-| `ScCommandGroupHeading` | `[sc-command-group-heading]` | Group heading text             |
-| `ScCommandItem`         | `div[sc-command-item]`       | Individual command item        |
-| `ScCommandSeparator`    | `[sc-command-separator]`     | Visual separator               |
-| `ScCommandShortcut`     | `[sc-command-shortcut]`      | Keyboard shortcut display      |
-
-## Inputs
-
-### ScCommandInput
-
-| Input         | Type     | Default       | Description            |
-| ------------- | -------- | ------------- | ---------------------- |
-| `placeholder` | `string` | `'Search...'` | Input placeholder text |
-
-### ScCommandItem
-
-| Input      | Type       | Default | Description                    |
-| ---------- | ---------- | ------- | ------------------------------ |
-| `value`    | `string`   | `''`    | Searchable value for filtering |
-| `keywords` | `string[]` | `[]`    | Additional search keywords     |
-| `disabled` | `boolean`  | `false` | Whether item is disabled       |
-| `selected` | `boolean`  | `false` | Whether item is selected       |
-
-## Outputs
-
-### ScCommandItem
-
-| Output   | Type   | Description                  |
-| -------- | ------ | ---------------------------- |
-| `select` | `void` | Emitted when item is clicked |
-
-## Usage
-
-### Basic Command
-
-```html
-<div sc-command class="rounded-lg border shadow-md">
-  <div sc-command-input placeholder="Type a command..." />
-  <div sc-command-list>
-    <div sc-command-empty>No results found.</div>
-    <div sc-command-group>
-      <span sc-command-group-heading>Actions</span>
-      <div sc-command-item value="new file" (select)="newFile()">
-        <svg>...</svg>
-        <span>New File</span>
-        <span sc-command-shortcut>⌘N</span>
-      </div>
-      <div sc-command-item value="open file" (select)="openFile()">
-        <svg>...</svg>
-        <span>Open File</span>
-        <span sc-command-shortcut>⌘O</span>
-      </div>
-    </div>
-  </div>
-</div>
-```
-
-### With Multiple Groups
-
-```html
-<div sc-command-list>
-  <div sc-command-group>
-    <span sc-command-group-heading>Suggestions</span>
-    <div sc-command-item value="calendar">Calendar</div>
-    <div sc-command-item value="calculator">Calculator</div>
-  </div>
-  <div sc-command-separator></div>
-  <div sc-command-group>
-    <span sc-command-group-heading>Settings</span>
-    <div sc-command-item value="profile">Profile</div>
-    <div sc-command-item value="billing">Billing</div>
-  </div>
-</div>
-```
-
-### With Keywords for Better Search
-
-```html
-<div sc-command-item value="profile" [keywords]="['account', 'user', 'settings']" (select)="goToProfile()">Profile</div>
-```
-
-Items will match if the search query matches either the `value` or any of the `keywords`.
-
-### In a Dialog
-
-```html
-<div sc-dialog-provider [(open)]="open">
-  <ng-template scDialogPortal>
-    <div sc-dialog class="p-0">
-      <div sc-command>
-        <div sc-command-input />
-        <div sc-command-list>
-          <!-- items -->
-        </div>
-      </div>
-    </div>
-  </ng-template>
-</div>
-```
-
-## Features
-
-- **Real-time filtering**: Items filter as you type
-- **Keyword search**: Match by value or additional keywords
-- **Groups**: Organize items into logical groups
-- **Keyboard shortcuts**: Display shortcuts with `sc-command-shortcut`
-- **Empty state**: Show message when no results
-- **Scrollable list**: Fixed height with overflow scroll
-
-## Accessibility
-
-- Uses `role="listbox"` on the list
-- Uses `role="option"` on items
-- Uses `role="group"` on groups
-- Uses `role="separator"` on separators
-- `data-disabled` and `data-selected` attributes
-
-## Styling
-
-The components use Tailwind CSS with shadcn/ui design tokens:
-
-- Container: `bg-popover text-popover-foreground rounded-md`
-- Input: `border-b` separator with search icon
-- Items: `hover:bg-accent` on hover, icons sized to `size-4`
-- Shortcuts: `text-muted-foreground text-xs`

package/src/lib/components/command/command-empty.ts

@@ -1,17 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: 'div[sc-command-empty]',
-  host: {
-    'data-slot': 'command-empty',
-    '[class]': 'class()',
-  },
-})
-export class ScCommandEmpty {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('py-6 text-center text-sm', this.classInput()),
-  );
-}

package/src/lib/components/command/command-group-heading.ts

@@ -1,20 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: '[sc-command-group-heading]',
-  host: {
-    'data-slot': 'command-group-heading',
-    '[class]': 'class()',
-  },
-})
-export class ScCommandGroupHeading {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'px-2 py-1.5 text-xs font-medium text-muted-foreground',
-      this.classInput(),
-    ),
-  );
-}

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

@@ -1,23 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: 'div[sc-command-group]',
-  host: {
-    'data-slot': 'command-group',
-    role: 'group',
-    '[class]': 'class()',
-  },
-})
-export class ScCommandGroup {
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly heading = input<string>('');
-
-  protected readonly class = computed(() =>
-    cn(
-      'overflow-hidden p-1 text-foreground',
-      '[&_[data-slot=command-group-heading]]:px-2 [&_[data-slot=command-group-heading]]:py-1.5 [&_[data-slot=command-group-heading]]:text-xs [&_[data-slot=command-group-heading]]:font-medium [&_[data-slot=command-group-heading]]:text-muted-foreground',
-      this.classInput(),
-    ),
-  );
-}

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

@@ -1,67 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScCommand } from './command';
-
-@Component({
-  selector: 'div[sc-command-input]',
-  template: `
-    <svg
-      class="mr-2 size-4 shrink-0 opacity-50"
-      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"
-      aria-hidden="true"
-    >
-      <circle cx="11" cy="11" r="8" />
-      <path d="m21 21-4.3-4.3" />
-    </svg>
-    <input
-      type="text"
-      [class]="inputClass()"
-      [placeholder]="placeholder()"
-      [value]="command.value()"
-      (input)="onInput($event)"
-    />
-  `,
-  host: {
-    'data-slot': 'command-input',
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScCommandInput {
-  readonly command = inject(ScCommand);
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly placeholder = input<string>('Search...');
-
-  protected readonly class = computed(() =>
-    cn('flex items-center border-b px-3', this.classInput()),
-  );
-
-  protected readonly inputClass = computed(() =>
-    cn(
-      'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none',
-      'placeholder:text-muted-foreground',
-      'disabled:cursor-not-allowed disabled:opacity-50',
-    ),
-  );
-
-  onInput(event: Event): void {
-    const input = event.target as HTMLInputElement;
-    this.command.value.set(input.value);
-  }
-}

package/src/lib/components/command/command-item.ts

@@ -1,61 +0,0 @@
-import { Option } from '@angular/aria/listbox';
-import {
-  computed,
-  Directive,
-  effect,
-  ElementRef,
-  inject,
-  input,
-  output,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: 'div[sc-command-item]',
-  hostDirectives: [
-    {
-      directive: Option,
-      inputs: ['value', 'label'],
-    },
-  ],
-  host: {
-    'data-slot': 'command-item',
-    '[attr.data-disabled]': 'disabled() || null',
-    '[class]': 'class()',
-    '(click)': 'onClick()',
-  },
-})
-export class ScCommandItem {
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly disabled = input<boolean>(false);
-
-  readonly select = output<void>();
-
-  private readonly option = inject(Option);
-  private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
-
-  constructor() {
-    effect(() => {
-      if (this.option.active()) {
-        this.elementRef.nativeElement.scrollIntoView({ block: 'nearest' });
-      }
-    });
-  }
-
-  protected readonly class = computed(() =>
-    cn(
-      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none',
-      'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-      'data-[active=true]:bg-accent data-[active=true]:text-accent-foreground',
-      'hover:bg-accent hover:text-accent-foreground',
-      '[&>svg]:size-4 [&>svg]:shrink-0',
-      this.classInput(),
-    ),
-  );
-
-  onClick(): void {
-    if (!this.disabled()) {
-      this.select.emit();
-    }
-  }
-}

package/src/lib/components/command/command-list.ts

@@ -1,19 +0,0 @@
-import { Listbox } from '@angular/aria/listbox';
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: 'div[sc-command-list]',
-  hostDirectives: [Listbox],
-  host: {
-    'data-slot': 'command-list',
-    '[class]': 'class()',
-  },
-})
-export class ScCommandList {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('max-h-[300px] overflow-y-auto overflow-x-hidden', this.classInput()),
-  );
-}

package/src/lib/components/command/command-separator.ts

@@ -1,18 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: '[sc-command-separator]',
-  host: {
-    'data-slot': 'command-separator',
-    role: 'separator',
-    '[class]': 'class()',
-  },
-})
-export class ScCommandSeparator {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('-mx-1 h-px bg-border', this.classInput()),
-  );
-}

package/src/lib/components/command/command-shortcut.ts

@@ -1,20 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: '[sc-command-shortcut]',
-  host: {
-    'data-slot': 'command-shortcut',
-    '[class]': 'class()',
-  },
-})
-export class ScCommandShortcut {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'ml-auto text-xs tracking-widest text-muted-foreground',
-      this.classInput(),
-    ),
-  );
-}

package/src/lib/components/command/command.ts

@@ -1,35 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  model,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Component({
-  selector: 'div[sc-command]',
-  template: `
-    <ng-content />
-  `,
-  host: {
-    'data-slot': 'command',
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScCommand {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  /** Current search/filter value */
-  readonly value = model<string>('');
-
-  protected readonly class = computed(() =>
-    cn(
-      'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
-      this.classInput(),
-    ),
-  );
-}

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

@@ -1,9 +0,0 @@
-export { ScCommand } from './command';
-export { ScCommandEmpty } from './command-empty';
-export { ScCommandGroup } from './command-group';
-export { ScCommandGroupHeading } from './command-group-heading';
-export { ScCommandInput } from './command-input';
-export { ScCommandItem } from './command-item';
-export { ScCommandList } from './command-list';
-export { ScCommandSeparator } from './command-separator';
-export { ScCommandShortcut } from './command-shortcut';

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

@@ -1,103 +0,0 @@
-# Confetti
-
-A celebration animation effect with customizable particles for showing success or celebration moments.
-
-## Installation
-
-```typescript
-import { ScConfetti } from '@/ui/confetti';
-import type { ConfettiOptions, ConfettiParticle, ConfettiShape } from '@/ui/confetti';
-```
-
-## Usage
-
-### Basic Usage
-
-```html
-<sc-confetti #confetti (complete)="onComplete()" />
-
-<button (click)="confetti.fire()">Fire Confetti!</button>
-```
-
-### With Custom Options
-
-```typescript
-confetti.fire({
-  particleCount: 100,
-  spread: 70,
-  colors: ['#ff0000', '#00ff00', '#0000ff'],
-  origin: { x: 0.5, y: 0.5 },
-});
-```
-
-### Fire from Element
-
-```typescript
-@ViewChild('celebrateBtn') celebrateBtn!: ElementRef;
-
-fireFromButton(): void {
-  this.confetti.fireFromElement(this.celebrateBtn.nativeElement, {
-    particleCount: 50,
-    spread: 60,
-  });
-}
-```
-
-### Multiple Bursts
-
-```typescript
-// Fire from multiple origins
-confetti.fire({ origin: { x: 0.3, y: 0.6 }, particleCount: 50 });
-confetti.fire({ origin: { x: 0.7, y: 0.6 }, particleCount: 50 });
-```
-
-## API Reference
-
-### Inputs
-
-| Input     | Type              | Default | Description              |
-| --------- | ----------------- | ------- | ------------------------ |
-| `options` | `ConfettiOptions` | `{}`    | Default confetti options |
-
-### Outputs
-
-| Output     | Type   | Description                      |
-| ---------- | ------ | -------------------------------- |
-| `complete` | `void` | Emitted when animation completes |
-
-### Methods
-
-| Method                               | Description                     |
-| ------------------------------------ | ------------------------------- |
-| `fire(options?)`                     | Fire confetti with options      |
-| `fireFromElement(element, options?)` | Fire from specific element      |
-| `stop()`                             | Stop animation and clear canvas |
-
-## Type Definitions
-
-```typescript
-interface ConfettiOptions {
-  particleCount?: number; // Number of particles (default: 100)
-  spread?: number; // Spread angle in degrees (default: 70)
-  startVelocity?: number; // Initial velocity (default: 30)
-  decay?: number; // Velocity decay rate (default: 0.94)
-  gravity?: number; // Gravity effect (default: 1)
-  drift?: number; // Horizontal drift (default: 0)
-  colors?: string[]; // Particle colors
-  shapes?: ConfettiShape[]; // Particle shapes
-  origin?: { x: number; y: number }; // Origin point (0-1)
-  duration?: number; // Animation duration in ms (default: 3000)
-}
-
-type ConfettiShape = 'square' | 'circle' | 'triangle' | 'ribbon';
-```
-
-## Features
-
-- Canvas-based particle animation
-- Customizable particle count, colors, and shapes
-- Adjustable spread, velocity, and gravity
-- Fire from specific elements or custom origins
-- Multiple simultaneous bursts support
-- Automatic cleanup on completion
-- Responsive canvas sizing

package/src/lib/components/confetti/confetti-types.ts

@@ -1,47 +0,0 @@
-export interface ConfettiParticle {
-  x: number;
-  y: number;
-  vx: number;
-  vy: number;
-  color: string;
-  size: number;
-  rotation: number;
-  rotationSpeed: number;
-  shape: ConfettiShape;
-}
-
-export type ConfettiShape = 'square' | 'circle' | 'triangle' | 'ribbon';
-
-export interface ConfettiOptions {
-  particleCount?: number;
-  spread?: number;
-  startVelocity?: number;
-  decay?: number;
-  gravity?: number;
-  drift?: number;
-  colors?: string[];
-  shapes?: ConfettiShape[];
-  origin?: { x: number; y: number };
-  duration?: number;
-}
-
-export const DEFAULT_CONFETTI_OPTIONS: Required<ConfettiOptions> = {
-  particleCount: 100,
-  spread: 70,
-  startVelocity: 30,
-  decay: 0.94,
-  gravity: 1,
-  drift: 0,
-  colors: [
-    '#ef4444',
-    '#f97316',
-    '#eab308',
-    '#22c55e',
-    '#3b82f6',
-    '#8b5cf6',
-    '#ec4899',
-  ],
-  shapes: ['square', 'circle', 'ribbon'],
-  origin: { x: 0.5, y: 0.5 },
-  duration: 3000,
-};