@semantic-components/ui-lab 0.63.0 → 0.65.0

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

@@ -1,247 +0,0 @@
-# ScPopover Components
-
-A set of Angular components for creating accessible popovers with shadcn/ui styling.
-
-## Architecture
-
-The components follow a dependency injection (DI) pattern where child components inject the parent `ScPopoverProvider` to access shared state.
-
-```
-ScPopoverProvider (root wrapper - manages open state, side, align)
-├── ScPopoverTrigger (button that toggles popover)
-└── ScPopoverPortal (overlay positioning with CDK)
-    └── ScPopover (floating dialog panel)
-        └── ScPopoverClose (optional close button)
-```
-
-## Components
-
-| Component           | Selector                     | Description                          |
-| ------------------- | ---------------------------- | ------------------------------------ |
-| `ScPopoverProvider` | `div[sc-popover-provider]`   | Root wrapper, manages state          |
-| `ScPopoverTrigger`  | `button[sc-popover-trigger]` | Button that toggles the popover      |
-| `ScPopoverPortal`   | `div[sc-popover-portal]`     | Overlay positioning with CDK         |
-| `ScPopover`         | `div[sc-popover]`            | Floating dialog panel                |
-| `ScPopoverClose`    | `button[sc-popover-close]`   | Optional button to close the popover |
-
-## Usage
-
-### Basic Popover
-
-```html
-<div sc-popover-provider>
-  <button sc-popover-trigger>Open Popover</button>
-  <div sc-popover-portal>
-    <div sc-popover>
-      <h4 class="font-medium">Title</h4>
-      <p class="text-sm text-muted-foreground">Content goes here.</p>
-    </div>
-  </div>
-</div>
-```
-
-### Different Sides
-
-```html
-<!-- Top -->
-<div sc-popover-provider side="top">
-  <button sc-popover-trigger>Top</button>
-  <div sc-popover-portal>
-    <div sc-popover>Content</div>
-  </div>
-</div>
-
-<!-- Right -->
-<div sc-popover-provider side="right">
-  <button sc-popover-trigger>Right</button>
-  <div sc-popover-portal>
-    <div sc-popover>Content</div>
-  </div>
-</div>
-
-<!-- Bottom (default) -->
-<div sc-popover-provider side="bottom">
-  <button sc-popover-trigger>Bottom</button>
-  <div sc-popover-portal>
-    <div sc-popover>Content</div>
-  </div>
-</div>
-
-<!-- Left -->
-<div sc-popover-provider side="left">
-  <button sc-popover-trigger>Left</button>
-  <div sc-popover-portal>
-    <div sc-popover>Content</div>
-  </div>
-</div>
-```
-
-### Alignment
-
-```html
-<!-- Align start -->
-<div sc-popover-provider align="start">
-  <button sc-popover-trigger>Align Start</button>
-  <div sc-popover-portal>
-    <div sc-popover>Content</div>
-  </div>
-</div>
-
-<!-- Align center (default) -->
-<div sc-popover-provider align="center">
-  <button sc-popover-trigger>Align Center</button>
-  <div sc-popover-portal>
-    <div sc-popover>Content</div>
-  </div>
-</div>
-
-<!-- Align end -->
-<div sc-popover-provider align="end">
-  <button sc-popover-trigger>Align End</button>
-  <div sc-popover-portal>
-    <div sc-popover>Content</div>
-  </div>
-</div>
-```
-
-### With Close Button
-
-```html
-<div sc-popover-provider>
-  <button sc-popover-trigger>Open</button>
-  <div sc-popover-portal>
-    <div sc-popover class="relative">
-      <button sc-popover-close>
-        <svg><!-- X icon --></svg>
-      </button>
-      <p>Content with close button</p>
-    </div>
-  </div>
-</div>
-```
-
-### Controlled Popover
-
-```typescript
-@Component({
-  template: `
-    <div sc-popover-provider [(open)]="isOpen">
-      <button sc-popover-trigger>Toggle</button>
-      <div sc-popover-portal>
-        <div sc-popover>Content</div>
-      </div>
-    </div>
-  `,
-})
-export class MyComponent {
-  isOpen = signal(false);
-}
-```
-
-### Form Popover
-
-```html
-<div sc-popover-provider>
-  <button sc-popover-trigger>Update dimensions</button>
-  <div sc-popover-portal>
-    <div sc-popover>
-      <div class="grid gap-4">
-        <div class="space-y-2">
-          <h4 class="font-medium leading-none">Dimensions</h4>
-          <p class="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
-        </div>
-        <div class="grid gap-2">
-          <div class="grid grid-cols-3 items-center gap-4">
-            <label for="width">Width</label>
-            <input id="width" value="100%" class="col-span-2" />
-          </div>
-          <div class="grid grid-cols-3 items-center gap-4">
-            <label for="height">Height</label>
-            <input id="height" value="25px" class="col-span-2" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-```
-
-## Keyboard Navigation
-
-| Key      | Action          |
-| -------- | --------------- |
-| `Escape` | Close popover   |
-| `Tab`    | Navigate within |
-
-## Side Options
-
-| Side     | Description                     |
-| -------- | ------------------------------- |
-| `bottom` | Appears below trigger (default) |
-| `top`    | Appears above trigger           |
-| `left`   | Appears to the left of trigger  |
-| `right`  | Appears to the right of trigger |
-
-## Align Options
-
-| Align    | Description                      |
-| -------- | -------------------------------- |
-| `center` | Centered with trigger (default)  |
-| `start`  | Aligned to start edge of trigger |
-| `end`    | Aligned to end edge of trigger   |
-
-## How It Works
-
-### State Management
-
-`ScPopoverProvider` uses a `model` signal for the `open` state:
-
-```typescript
-readonly open = model<boolean>(false);
-```
-
-`ScPopoverTrigger` toggles the state on click:
-
-```typescript
-togglePopover(): void {
-  this.popover.open.update((v) => !v);
-}
-```
-
-### Positioning
-
-`ScPopoverPortal` uses CDK connected overlay with positions computed from `side` and `align`:
-
-```typescript
-protected readonly position = computed(() => {
-  const side = this.popover.side();
-  const align = this.popover.align();
-  return positionMap[side][align];
-});
-```
-
-### Outside Click
-
-The popover closes when clicking outside:
-
-```html
-<ng-template (overlayOutsideClick)="closePopover()"></ng-template>
-```
-
-## Accessibility
-
-- `role="dialog"` on `ScPopover`
-- `aria-haspopup="dialog"` on the trigger
-- `aria-expanded` reflects open state on trigger
-- Escape key closes the popover
-- Click outside closes the popover
-
-## Customization
-
-All components accept a `class` input for custom styling:
-
-```html
-<div sc-popover class="w-96">
-  <!-- wider popover -->
-</div>
-```

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

@@ -1,6 +0,0 @@
-export { ScPopoverProvider } from './popover-provider';
-export type { PopoverAlign, PopoverSide } from './popover-provider';
-export { ScPopoverTrigger } from './popover-trigger';
-export { ScPopoverPortal } from './popover-portal';
-export { ScPopover } from './popover';
-export { ScPopoverClose } from './popover-close';

package/src/lib/components/popover/popover-close.ts

@@ -1,29 +0,0 @@
-import { computed, Directive, inject, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScPopoverProvider } from './popover-provider';
-
-@Directive({
-  selector: 'button[sc-popover-close]',
-  host: {
-    'data-slot': 'popover-close',
-    '[class]': 'class()',
-    '(click)': 'closePopover()',
-  },
-})
-export class ScPopoverClose {
-  private readonly popover = inject(ScPopoverProvider);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'absolute right-2 top-2 rounded-sm opacity-70 ring-offset-background transition-opacity',
-      'hover:opacity-100',
-      'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
-      this.classInput(),
-    ),
-  );
-
-  protected closePopover(): void {
-    this.popover.open.set(false);
-  }
-}

package/src/lib/components/popover/popover-portal.ts

@@ -1,161 +0,0 @@
-import { OverlayModule, ConnectedPosition } from '@angular/cdk/overlay';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import {
-  ScPopoverProvider,
-  PopoverSide,
-  PopoverAlign,
-} from './popover-provider';
-
-const positionMap: Record<
-  PopoverSide,
-  Record<PopoverAlign, ConnectedPosition>
-> = {
-  top: {
-    start: {
-      originX: 'start',
-      originY: 'top',
-      overlayX: 'start',
-      overlayY: 'bottom',
-      offsetY: -4,
-    },
-    center: {
-      originX: 'center',
-      originY: 'top',
-      overlayX: 'center',
-      overlayY: 'bottom',
-      offsetY: -4,
-    },
-    end: {
-      originX: 'end',
-      originY: 'top',
-      overlayX: 'end',
-      overlayY: 'bottom',
-      offsetY: -4,
-    },
-  },
-  bottom: {
-    start: {
-      originX: 'start',
-      originY: 'bottom',
-      overlayX: 'start',
-      overlayY: 'top',
-      offsetY: 4,
-    },
-    center: {
-      originX: 'center',
-      originY: 'bottom',
-      overlayX: 'center',
-      overlayY: 'top',
-      offsetY: 4,
-    },
-    end: {
-      originX: 'end',
-      originY: 'bottom',
-      overlayX: 'end',
-      overlayY: 'top',
-      offsetY: 4,
-    },
-  },
-  left: {
-    start: {
-      originX: 'start',
-      originY: 'top',
-      overlayX: 'end',
-      overlayY: 'top',
-      offsetX: -4,
-    },
-    center: {
-      originX: 'start',
-      originY: 'center',
-      overlayX: 'end',
-      overlayY: 'center',
-      offsetX: -4,
-    },
-    end: {
-      originX: 'start',
-      originY: 'bottom',
-      overlayX: 'end',
-      overlayY: 'bottom',
-      offsetX: -4,
-    },
-  },
-  right: {
-    start: {
-      originX: 'end',
-      originY: 'top',
-      overlayX: 'start',
-      overlayY: 'top',
-      offsetX: 4,
-    },
-    center: {
-      originX: 'end',
-      originY: 'center',
-      overlayX: 'start',
-      overlayY: 'center',
-      offsetX: 4,
-    },
-    end: {
-      originX: 'end',
-      originY: 'bottom',
-      overlayX: 'start',
-      overlayY: 'bottom',
-      offsetX: 4,
-    },
-  },
-};
-
-@Component({
-  selector: 'div[sc-popover-portal]',
-  imports: [OverlayModule],
-  template: `
-    @if (origin(); as origin) {
-      <ng-template
-        [cdkConnectedOverlayOpen]="popover.overlayOpen()"
-        [cdkConnectedOverlay]="{ origin, usePopover: 'inline' }"
-        [cdkConnectedOverlayPositions]="[position()]"
-        (overlayOutsideClick)="closePopover()"
-        (overlayKeydown)="onKeydown($event)"
-      >
-        <ng-content />
-      </ng-template>
-    }
-  `,
-  host: {
-    'data-slot': 'popover-portal',
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScPopoverPortal {
-  readonly popover = inject(ScPopoverProvider);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly origin = computed(() => this.popover.origin());
-
-  protected readonly position = computed(() => {
-    const side = this.popover.side();
-    const align = this.popover.align();
-    return positionMap[side][align];
-  });
-
-  protected readonly class = computed(() => cn('', this.classInput()));
-
-  protected closePopover(): void {
-    this.popover.open.set(false);
-  }
-
-  protected onKeydown(event: KeyboardEvent): void {
-    if (event.key === 'Escape') {
-      this.popover.open.set(false);
-    }
-  }
-}

package/src/lib/components/popover/popover-provider.ts

@@ -1,82 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  contentChild,
-  effect,
-  input,
-  model,
-  signal,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScPopoverTrigger } from './popover-trigger';
-
-export type PopoverAlign = 'start' | 'center' | 'end';
-export type PopoverSide = 'top' | 'right' | 'bottom' | 'left';
-
-@Component({
-  selector: 'div[sc-popover-provider]',
-  template: `
-    <ng-content />
-  `,
-  host: {
-    'data-slot': 'popover-provider',
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScPopoverProvider {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  /** Which side the popover appears on */
-  readonly side = input<PopoverSide>('bottom');
-
-  /** Alignment along the side */
-  readonly align = input<PopoverAlign>('center');
-
-  /**
-   * Logical state: Controls animation state (open/closed)
-   * - When true: Triggers entry animation
-   * - When false: Triggers exit animation
-   */
-  readonly open = model<boolean>(false);
-
-  /**
-   * Physical state: Controls DOM presence via cdkConnectedOverlayOpen
-   * - When true: Content exists in DOM (can animate)
-   * - When false: Content removed from DOM
-   * - Stays true during close animation to allow it to complete
-   */
-  readonly overlayOpen = signal<boolean>(false);
-
-  private readonly triggerChild = contentChild(ScPopoverTrigger);
-
-  readonly origin = computed(() => this.triggerChild()?.overlayOrigin);
-
-  protected readonly class = computed(() =>
-    cn('relative inline-block', this.classInput()),
-  );
-
-  constructor() {
-    // Synchronize overlay state with logical state for opening
-    effect(() => {
-      if (this.open()) {
-        // Opening: Mount DOM immediately so animation can start
-        this.overlayOpen.set(true);
-      }
-      // Note: When closing (open = false), overlayOpen stays true
-      // until animation completes (handled by onPopoverAnimationComplete)
-    });
-  }
-
-  /**
-   * Called by popover when its close animation completes
-   */
-  onPopoverAnimationComplete(): void {
-    if (!this.open()) {
-      this.overlayOpen.set(false);
-    }
-  }
-}

package/src/lib/components/popover/popover-trigger.ts

@@ -1,27 +0,0 @@
-import { CdkOverlayOrigin } from '@angular/cdk/overlay';
-import { computed, Directive, inject, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScPopoverProvider } from './popover-provider';
-
-@Directive({
-  selector: 'button[sc-popover-trigger]',
-  hostDirectives: [CdkOverlayOrigin],
-  host: {
-    'data-slot': 'popover-trigger',
-    '[class]': 'class()',
-    '[attr.aria-haspopup]': '"dialog"',
-    '[attr.aria-expanded]': 'popover.open()',
-    '(click)': 'togglePopover()',
-  },
-})
-export class ScPopoverTrigger {
-  readonly popover = inject(ScPopoverProvider);
-  readonly overlayOrigin = inject(CdkOverlayOrigin);
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() => cn('', this.classInput()));
-
-  togglePopover(): void {
-    this.popover.open.update((v) => !v);
-  }
-}

package/src/lib/components/popover/popover.ts

@@ -1,66 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  effect,
-  ElementRef,
-  inject,
-  input,
-  signal,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScPopoverProvider } from './popover-provider';
-
-type ScPopoverState = 'open' | 'closed';
-
-@Component({
-  selector: 'div[sc-popover]',
-  template: `
-    <ng-content />
-  `,
-  host: {
-    role: 'dialog',
-    tabindex: '-1',
-    'data-slot': 'popover',
-    '[attr.data-state]': 'state()',
-    '[class]': 'class()',
-    '(animationend)': 'onAnimationEnd($event)',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScPopover {
-  private readonly elementRef = inject(ElementRef<HTMLElement>);
-
-  readonly popover = inject(ScPopoverProvider);
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly state = signal<ScPopoverState>('closed');
-
-  protected readonly class = computed(() =>
-    cn(
-      'bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-md outline-none',
-      'animate-in fade-in-0 zoom-in-95 duration-200',
-      'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:duration-200',
-      this.classInput(),
-    ),
-  );
-
-  constructor() {
-    // Sync state with provider's open signal
-    effect(() => {
-      const isOpen = this.popover.open();
-      this.state.set(isOpen ? 'open' : 'closed');
-    });
-  }
-
-  protected onAnimationEnd(event: AnimationEvent): void {
-    // Only trigger cleanup when close animation completes
-    if (
-      this.state() === 'closed' &&
-      event.target === this.elementRef.nativeElement
-    ) {
-      this.popover.onPopoverAnimationComplete();
-    }
-  }
-}

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

@@ -1,75 +0,0 @@
-# Progress
-
-Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
-
-## Components
-
-- `ScProgress` - The progress bar component with value and max inputs
-
-## Usage
-
-```html
-<div sc-progress [value]="33"></div>
-```
-
-## With Custom Max
-
-```html
-<div sc-progress [value]="50" [max]="200"></div>
-```
-
-## With Signal Forms
-
-ScProgress implements `FormValueControl<number | null>` and can be used to visualize form completion:
-
-```typescript
-import { signal, computed } from '@angular/core';
-import { form, FormField } from '@angular/forms/signals';
-
-readonly formModel = signal({ name: '', email: '', bio: '' });
-readonly myForm = form(this.formModel);
-
-// Calculate completion percentage
-readonly completionPercentage = computed(() => {
-  const data = this.formModel();
-  const fields = [data.name, data.email, data.bio];
-  const filledFields = fields.filter(f => f.trim().length > 0).length;
-  return Math.round((filledFields / fields.length) * 100);
-});
-```
-
-```html
-<div sc-progress [value]="completionPercentage()"></div>
-```
-
-Note: While progress implements `FormValueControl`, it's typically used to display computed values rather than being directly bound with `[formField]`. When using `[formField]`, you cannot use other property bindings like `[value]` or `[max]` on the same element.
-
-## Custom Styling
-
-Override the default height or width:
-
-```html
-<div sc-progress [value]="66" class="h-4 w-[60%]"></div>
-```
-
-## Inputs
-
-| Input   | Type                  | Default | Description            |
-| ------- | --------------------- | ------- | ---------------------- |
-| `value` | `number \| null`      | `null`  | Current progress value |
-| `max`   | `number \| undefined` | `100`   | Maximum value          |
-| `class` | `string`              | `''`    | Additional CSS classes |
-
-## States
-
-The component exposes a `data-state` attribute:
-
-- `indeterminate` - When value is null
-- `loading` - When value is less than max
-- `complete` - When value equals or exceeds max
-
-## Accessibility
-
-- Uses `role="progressbar"` for screen readers
-- Proper `aria-valuemin`, `aria-valuemax`, and `aria-valuenow` attributes
-- State is communicated via `data-state` attribute

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

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