@semantic-components/ui-lab 0.63.0 → 0.65.0

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

@@ -1,72 +0,0 @@
-# Empty
-
-A composable empty state component for displaying placeholder content.
-
-## Components
-
-- `ScEmpty` - Root container with dashed border and centered layout
-- `ScEmptyHeader` - Header section for icon, title, and description
-- `ScEmptyMedia` - Media/icon container with variant support
-- `ScEmptyTitle` - Title text
-- `ScEmptyDescription` - Description text
-- `ScEmptyContent` - Content section for actions or additional content
-
-## Usage
-
-```html
-<div sc-empty class="border">
-  <div sc-empty-header>
-    <div sc-empty-media variant="icon">
-      <svg si-search-icon></svg>
-    </div>
-    <div sc-empty-title>No results found</div>
-    <div sc-empty-description>Try adjusting your search or filter to find what you're looking for.</div>
-  </div>
-</div>
-```
-
-## With Actions
-
-```html
-<div sc-empty class="border">
-  <div sc-empty-header>
-    <div sc-empty-media variant="icon">
-      <svg si-folder-icon></svg>
-    </div>
-    <div sc-empty-title>No projects yet</div>
-    <div sc-empty-description>Get started by creating your first project.</div>
-  </div>
-  <div sc-empty-content>
-    <button sc-button>Create Project</button>
-  </div>
-</div>
-```
-
-## Media Variants
-
-```html
-<!-- Default: transparent background -->
-<div sc-empty-media>
-  <svg si-inbox-icon class="size-12"></svg>
-</div>
-
-<!-- Icon: muted background with rounded container -->
-<div sc-empty-media variant="icon">
-  <svg si-search-icon></svg>
-</div>
-```
-
-## Inputs
-
-### ScEmpty
-
-| Input   | Type     | Default | Description            |
-| ------- | -------- | ------- | ---------------------- |
-| `class` | `string` | `''`    | Additional CSS classes |
-
-### ScEmptyMedia
-
-| Input     | Type                  | Default     | Description            |
-| --------- | --------------------- | ----------- | ---------------------- |
-| `variant` | `'default' \| 'icon'` | `'default'` | Media container style  |
-| `class`   | `string`              | `''`        | Additional CSS classes |

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

@@ -1,20 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: 'div[sc-empty-content]',
-  host: {
-    'data-slot': 'empty-content',
-    '[class]': 'class()',
-  },
-})
-export class ScEmptyContent {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'gap-2.5 text-sm flex w-full max-w-sm min-w-0 flex-col items-center text-balance',
-      this.classInput(),
-    ),
-  );
-}

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

@@ -1,20 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: 'div[sc-empty-description]',
-  host: {
-    'data-slot': 'empty-description',
-    '[class]': 'class()',
-  },
-})
-export class ScEmptyDescription {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'text-sm/relaxed text-muted-foreground [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
-      this.classInput(),
-    ),
-  );
-}

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

@@ -1,17 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: 'div[sc-empty-header]',
-  host: {
-    'data-slot': 'empty-header',
-    '[class]': 'class()',
-  },
-})
-export class ScEmptyHeader {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('gap-2 flex max-w-sm flex-col items-center', this.classInput()),
-  );
-}

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

@@ -1,29 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-type EmptyMediaVariant = 'default' | 'icon';
-
-@Directive({
-  selector: 'div[sc-empty-media]',
-  host: {
-    'data-slot': 'empty-icon',
-    '[attr.data-variant]': 'variant()',
-    '[class]': 'class()',
-  },
-})
-export class ScEmptyMedia {
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly variant = input<EmptyMediaVariant>('default');
-
-  protected readonly class = computed(() => {
-    const base =
-      'mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0';
-
-    const variantClass =
-      this.variant() === 'icon'
-        ? 'bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*=size-])]:size-4'
-        : 'bg-transparent';
-
-    return cn(base, variantClass, this.classInput());
-  });
-}

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

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

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

@@ -1,20 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: 'div[sc-empty]',
-  host: {
-    'data-slot': 'empty',
-    '[class]': 'class()',
-  },
-})
-export class ScEmpty {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'gap-4 rounded-xl border-dashed p-6 flex w-full min-w-0 flex-1 flex-col items-center justify-center text-center text-balance',
-      this.classInput(),
-    ),
-  );
-}

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

@@ -1,6 +0,0 @@
-export { ScEmpty } from './empty';
-export { ScEmptyHeader } from './empty-header';
-export { ScEmptyMedia } from './empty-media';
-export { ScEmptyTitle } from './empty-title';
-export { ScEmptyDescription } from './empty-description';
-export { ScEmptyContent } from './empty-content';

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

@@ -1,326 +0,0 @@
-# Field
-
-A flexible field composition system for building accessible forms with labels, descriptions, errors, and various layout orientations.
-
-## Components
-
-- `ScField` - Main field wrapper with orientation support
-- `ScFieldSet` - Fieldset container for grouping related fields
-- `ScFieldLegend` - Legend element for fieldsets
-- `ScFieldGroup` - Container for multiple fields
-- `ScFieldContent` - Content wrapper for field elements
-- `ScFieldLabel` - Label element
-- `ScFieldTitle` - Alternative title element (non-label)
-- `ScFieldDescription` - Description/help text
-- `ScFieldSeparator` - Visual separator with optional content
-- `ScFieldError` - Error message display with multi-error support
-
-## Features
-
-- **Three orientation modes**: vertical, horizontal, and responsive
-- **Flexible composition**: Mix and match components as needed
-- **Error handling**: Display single or multiple validation errors
-- **Disabled state**: Automatically propagates to child components
-- **Invalid state**: Visual feedback for validation errors
-- **Container queries**: Responsive layout using `@container` queries
-- **Separator with content**: Optional text in separators
-
-## Usage
-
-### Basic Vertical Field
-
-```typescript
-import { Component } from '@angular/core';
-import { ScField, ScFieldLabel, ScFieldDescription } from '@semantic-components/ui-lab';
-
-@Component({
-  template: `
-    <div sc-field>
-      <label sc-field-label for="email">Email</label>
-      <input id="email" type="email" />
-      <p sc-field-description>We'll never share your email.</p>
-    </div>
-  `,
-})
-```
-
-### Horizontal Layout
-
-```typescript
-@Component({
-  template: `
-    <div sc-field [orientation]="'horizontal'">
-      <label sc-field-label for="username">Username</label>
-      <input id="username" type="text" />
-    </div>
-  `,
-})
-```
-
-### Responsive Layout
-
-```typescript
-@Component({
-  template: `
-    <div sc-field [orientation]="'responsive'">
-      <label sc-field-label for="name">Name</label>
-      <div sc-field-content>
-        <input id="name" type="text" />
-        <p sc-field-description>Enter your full name.</p>
-      </div>
-    </div>
-  `,
-})
-```
-
-### With Validation Errors
-
-```typescript
-import { Component, signal } from '@angular/core';
-import { ScField, ScFieldLabel, ScFieldError, ScFieldErrorItem } from '@semantic-components/ui-lab';
-
-@Component({
-  template: `
-    <div sc-field [invalid]="errors().length > 0">
-      <label sc-field-label for="password">Password</label>
-      <input id="password" type="password" />
-      <div sc-field-error [errors]="errors()"></div>
-    </div>
-  `,
-})
-export class MyComponent {
-  readonly errors = signal<ScFieldErrorItem[]>([{ message: 'Password must be at least 8 characters' }, { message: 'Password must contain a number' }]);
-}
-```
-
-### Single Error Display
-
-```typescript
-@Component({
-  template: `
-    <div sc-field [invalid]="error()">
-      <label sc-field-label for="email">Email</label>
-      <input id="email" type="email" />
-      @if (error()) {
-        <div sc-field-error [errors]="[{ message: error() }]"></div>
-      }
-    </div>
-  `,
-})
-export class MyComponent {
-  readonly error = signal<string>('');
-}
-```
-
-### Using ScFieldError with Template
-
-For custom error rendering, you can use the error directive with content projection:
-
-```typescript
-@Component({
-  template: `
-    <div sc-field [invalid]="errors().length > 0">
-      <label sc-field-label for="email">Email</label>
-      <input id="email" type="email" />
-
-      @if (errors().length === 1) {
-        <div sc-field-error>{{ errors()[0].message }}</div>
-      } @else if (errors().length > 1) {
-        <div sc-field-error>
-          <ul class="ml-4 flex list-disc flex-col gap-1">
-            @for (error of errors(); track error.message) {
-              <li>{{ error.message }}</li>
-            }
-          </ul>
-        </div>
-      }
-    </div>
-  `,
-})
-export class MyComponent {
-  readonly errors = signal<ScFieldErrorItem[]>([]);
-}
-```
-
-### Field Groups
-
-```typescript
-@Component({
-  template: `
-    <div sc-field-group>
-      <div sc-field>
-        <label sc-field-label for="firstName">First Name</label>
-        <input id="firstName" type="text" />
-      </div>
-
-      <div sc-field>
-        <label sc-field-label for="lastName">Last Name</label>
-        <input id="lastName" type="text" />
-      </div>
-    </div>
-  `,
-})
-```
-
-### FieldSet with Legend
-
-```typescript
-@Component({
-  template: `
-    <fieldset sc-field-set>
-      <legend sc-field-legend>Personal Information</legend>
-
-      <div sc-field-group>
-        <div sc-field>
-          <label sc-field-label for="name">Name</label>
-          <input id="name" type="text" />
-        </div>
-
-        <div sc-field>
-          <label sc-field-label for="email">Email</label>
-          <input id="email" type="email" />
-        </div>
-      </div>
-    </fieldset>
-  `,
-})
-```
-
-### Field Separator
-
-```typescript
-@Component({
-  template: `
-    <div sc-field-group>
-      <div sc-field>
-        <label sc-field-label for="email">Email</label>
-        <input id="email" type="email" />
-      </div>
-
-      <div sc-field-separator>or</div>
-
-      <div sc-field>
-        <label sc-field-label for="phone">Phone</label>
-        <input id="phone" type="tel" />
-      </div>
-    </div>
-  `,
-})
-```
-
-### Disabled State
-
-```typescript
-@Component({
-  template: `
-    <div sc-field [disabled]="true">
-      <label sc-field-label for="readonly">Read-only Field</label>
-      <input id="readonly" type="text" disabled />
-      <p sc-field-description>This field is disabled.</p>
-    </div>
-  `,
-})
-```
-
-## Inputs & Outputs
-
-### ScField
-
-| Input         | Type                                         | Default      | Description               |
-| ------------- | -------------------------------------------- | ------------ | ------------------------- |
-| `orientation` | `'vertical' \| 'horizontal' \| 'responsive'` | `'vertical'` | Layout orientation        |
-| `invalid`     | `boolean`                                    | `false`      | Whether field has errors  |
-| `disabled`    | `boolean`                                    | `false`      | Whether field is disabled |
-| `class`       | `string`                                     | `''`         | Additional CSS classes    |
-
-### ScFieldLegend
-
-| Input     | Type                  | Default    | Description            |
-| --------- | --------------------- | ---------- | ---------------------- |
-| `variant` | `'legend' \| 'label'` | `'legend'` | Visual variant         |
-| `class`   | `string`              | `''`       | Additional CSS classes |
-
-### ScFieldError
-
-| Input    | Type                 | Default | Description            |
-| -------- | -------------------- | ------- | ---------------------- |
-| `errors` | `ScFieldErrorItem[]` | `[]`    | Array of error objects |
-| `class`  | `string`             | `''`    | Additional CSS classes |
-
-**ScFieldErrorItem interface:**
-
-```typescript
-interface ScFieldErrorItem {
-  message?: string;
-}
-```
-
-### Other Components
-
-All other components (`ScFieldSet`, `ScFieldGroup`, `ScFieldContent`, `ScFieldLabel`, `ScFieldTitle`, `ScFieldDescription`, `ScFieldSeparator`) accept a `class` input for additional styling.
-
-## Layout Orientations
-
-### Vertical (Default)
-
-Fields stack vertically with labels above inputs:
-
-```
-[Label]
-[Input]
-[Description]
-```
-
-### Horizontal
-
-Labels and inputs on the same line:
-
-```
-[Label] [Input]
-```
-
-### Responsive
-
-Vertical on mobile, horizontal on larger screens using container queries:
-
-```
-Mobile:     Desktop:
-[Label]     [Label] [Input]
-[Input]
-```
-
-## Error Display
-
-The `ScFieldError` component automatically handles:
-
-- **No errors**: Component is hidden
-- **Single error**: Displays the error message directly
-- **Multiple errors**: Can be displayed as a list using content projection
-
-Use the `errors` input with an array of error objects, or use content projection for custom error rendering.
-
-## Accessibility
-
-- Uses `role="group"` for field wrapper
-- Uses `role="alert"` for error messages
-- Supports proper label associations via `for` attribute
-- Disabled state uses `data-disabled` attribute
-- Invalid state uses `data-invalid` attribute
-- Error messages are announced to screen readers
-
-## Styling
-
-The component uses `data-slot` attributes for targeted styling:
-
-- `data-slot="field"` - Main field container
-- `data-slot="field-set"` - Fieldset container
-- `data-slot="field-legend"` - Legend element
-- `data-slot="field-group"` - Field group container
-- `data-slot="field-content"` - Content wrapper
-- `data-slot="field-label"` - Label element
-- `data-slot="field-title"` - Title element
-- `data-slot="field-description"` - Description text
-- `data-slot="field-separator"` - Separator element
-- `data-slot="field-error"` - Error message
-
-Use these slots to customize styling or target specific elements in your CSS.

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

@@ -1,20 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: '[sc-field-content]',
-  host: {
-    'data-slot': 'field-content',
-    '[class]': 'class()',
-  },
-})
-export class ScFieldContent {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'gap-0.5 group/field-content flex flex-1 flex-col leading-snug',
-      this.classInput(),
-    ),
-  );
-}

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

@@ -1,22 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: '[sc-field-description]',
-  host: {
-    'data-slot': 'field-description',
-    '[class]': 'class()',
-  },
-})
-export class ScFieldDescription {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',
-      'last:mt-0 nth-last-2:-mt-1',
-      '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',
-      this.classInput(),
-    ),
-  );
-}

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

@@ -1,18 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: '[sc-field-error]',
-  host: {
-    role: 'alert',
-    'data-slot': 'field-error',
-    '[class]': 'class()',
-  },
-})
-export class ScFieldError {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('text-destructive text-sm font-normal', this.classInput()),
-  );
-}

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

@@ -1,20 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: '[sc-field-group]',
-  host: {
-    'data-slot': 'field-group',
-    '[class]': 'class()',
-  },
-})
-export class ScFieldGroup {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'gap-5 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col',
-      this.classInput(),
-    ),
-  );
-}

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

@@ -1,24 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-export type ScFieldLegendVariant = 'legend' | 'label';
-
-@Directive({
-  selector: 'legend[sc-field-legend]',
-  host: {
-    'data-slot': 'field-legend',
-    '[attr.data-variant]': 'variant()',
-    '[class]': 'class()',
-  },
-})
-export class ScFieldLegend {
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly variant = input<ScFieldLegendVariant>('legend');
-
-  protected readonly class = computed(() =>
-    cn(
-      'mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',
-      this.classInput(),
-    ),
-  );
-}

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

@@ -1,20 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: '[sc-field-separator]',
-  host: {
-    'data-slot': 'field-separator',
-    '[class]': 'class()',
-  },
-})
-export class ScFieldSeparator {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      '-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative',
-      this.classInput(),
-    ),
-  );
-}

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

@@ -1,20 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: 'fieldset[sc-field-set]',
-  host: {
-    'data-slot': 'field-set',
-    '[class]': 'class()',
-  },
-})
-export class ScFieldSet {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col',
-      this.classInput(),
-    ),
-  );
-}