@semantic-components/ui-lab 0.63.0 → 0.65.0

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

@@ -1,99 +0,0 @@
-# Switch
-
-A control that allows the user to toggle between checked and not checked.
-
-## Components
-
-- `ScSwitch` - Toggle switch with built-in thumb
-
-## Usage
-
-```html
-<button sc-switch></button>
-```
-
-## With Label
-
-```html
-<div class="flex items-center space-x-2">
-  <button sc-switch id="airplane-mode"></button>
-  <label for="airplane-mode">Airplane Mode</label>
-</div>
-```
-
-## Two-Way Binding
-
-```typescript
-@Component({
-  template: `
-    <button sc-switch [(checked)]="enabled"></button>
-    <p>Switch is {{ enabled() ? 'on' : 'off' }}</p>
-  `,
-})
-export class MyComponent {
-  enabled = signal(false);
-}
-```
-
-## With Signal Forms
-
-ScSwitch implements `FormCheckboxControl` and works seamlessly with Angular Signal Forms:
-
-```typescript
-import { signal } from '@angular/core';
-import { form, FormField } from '@angular/forms/signals';
-import { required } from '@angular/forms/signals';
-
-readonly formModel = signal({ notifications: true });
-readonly myForm = form(this.formModel, (schemaPath) => {
-  required(schemaPath.notifications);
-});
-```
-
-```html
-<button sc-switch [formField]="myForm.notifications" id="notifications"></button>
-<label for="notifications">Enable notifications</label>
-```
-
-Note: Add `FormField` to your component's `imports` array to use the `[formField]` directive. When using `[formField]`, you cannot use other property bindings like `[checked]` on the same element.
-
-## Disabled State
-
-```html
-<button sc-switch [disabled]="true"></button>
-<button sc-switch [checked]="true" [disabled]="true"></button>
-```
-
-## In a Form
-
-```html
-<div class="flex items-center justify-between">
-  <div class="space-y-0.5">
-    <label for="notifications">Notifications</label>
-    <p class="text-sm text-muted-foreground">Receive email notifications.</p>
-  </div>
-  <button sc-switch [(checked)]="notifications" id="notifications"></button>
-</div>
-```
-
-## Inputs
-
-| Input      | Type      | Default | Description                |
-| ---------- | --------- | ------- | -------------------------- |
-| `checked`  | `boolean` | `false` | The checked state (model)  |
-| `disabled` | `boolean` | `false` | Whether switch is disabled |
-| `class`    | `string`  | `''`    | Additional CSS classes     |
-
-## Outputs
-
-| Output          | Type      | Description                      |
-| --------------- | --------- | -------------------------------- |
-| `checkedChange` | `boolean` | Emits when checked state changes |
-
-## Accessibility
-
-- Uses `role="switch"` for screen readers
-- `aria-checked` reflects the current state
-- Keyboard accessible with Space key to toggle
-- Focus ring for keyboard navigation
-- Disabled state properly communicated

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

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

package/src/lib/components/switch/switch.ts

@@ -1,56 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  model,
-  ViewEncapsulation,
-} from '@angular/core';
-import type { FormCheckboxControl } from '@angular/forms/signals';
-import { cn } from '@semantic-components/ui';
-
-@Component({
-  selector: 'button[sc-switch]',
-  host: {
-    'data-slot': 'switch',
-    type: 'button',
-    role: 'switch',
-    '[class]': 'class()',
-    '[attr.aria-checked]': 'checked()',
-    '[attr.data-state]': 'checked() ? "checked" : "unchecked"',
-    '[disabled]': 'disabled()',
-    '(click)': 'toggle()',
-    '(keydown.space)': 'toggle(); $event.preventDefault()',
-  },
-  template: `
-    <span data-slot="switch-thumb" [class]="thumbClass()"></span>
-  `,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScSwitch implements FormCheckboxControl {
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly checked = model<boolean>(false);
-  readonly disabled = input<boolean>(false);
-
-  protected readonly class = computed(() =>
-    cn(
-      'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50',
-      this.checked() ? 'bg-primary' : 'bg-input',
-      this.classInput(),
-    ),
-  );
-
-  protected readonly thumbClass = computed(() =>
-    cn(
-      'pointer-events-none block size-5 rounded-full bg-background shadow-lg ring-0 transition-transform',
-      this.checked() ? 'translate-x-5' : 'translate-x-0',
-    ),
-  );
-
-  protected toggle(): void {
-    if (!this.disabled()) {
-      this.checked.update((v) => !v);
-    }
-  }
-}

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

@@ -1,105 +0,0 @@
-# Table
-
-A responsive table component.
-
-## Components
-
-- `ScTable` - Main table element
-- `ScTableHeader` - Table header (thead)
-- `ScTableBody` - Table body (tbody)
-- `ScTableFooter` - Table footer (tfoot)
-- `ScTableRow` - Table row (tr)
-- `ScTableHeaderCell` - Table header cell (th)
-- `ScTableCell` - Table data cell (td)
-- `ScTableCaption` - Table caption
-
-## Usage
-
-```html
-<table sc-table>
-  <thead sc-table-header>
-    <tr sc-table-row>
-      <th sc-table-header-cell>Column 1</th>
-      <th sc-table-header-cell>Column 2</th>
-    </tr>
-  </thead>
-  <tbody sc-table-body>
-    <tr sc-table-row>
-      <td sc-table-cell>Data 1</td>
-      <td sc-table-cell>Data 2</td>
-    </tr>
-  </tbody>
-</table>
-```
-
-## With Caption
-
-```html
-<table sc-table>
-  <caption sc-table-caption>A list of your recent invoices.</caption>
-  <thead sc-table-header>
-    <!-- ... -->
-  </thead>
-  <tbody sc-table-body>
-    <!-- ... -->
-  </tbody>
-</table>
-```
-
-## With Footer
-
-```html
-<table sc-table>
-  <thead sc-table-header>
-    <!-- ... -->
-  </thead>
-  <tbody sc-table-body>
-    <!-- ... -->
-  </tbody>
-  <tfoot sc-table-footer>
-    <tr sc-table-row>
-      <td sc-table-cell colspan="3">Total</td>
-      <td sc-table-cell class="text-right">$750.00</td>
-    </tr>
-  </tfoot>
-</table>
-```
-
-## With Border Container
-
-```html
-<div class="rounded-md border">
-  <table sc-table>
-    <!-- ... -->
-  </table>
-</div>
-```
-
-## Component Inputs
-
-All table components accept a `class` input for additional CSS classes.
-
-| Component           | Default Styling                                                               |
-| ------------------- | ----------------------------------------------------------------------------- |
-| `ScTable`           | `w-full caption-bottom text-sm`                                               |
-| `ScTableHeader`     | `[&_tr]:border-b`                                                             |
-| `ScTableBody`       | `[&_tr:last-child]:border-0`                                                  |
-| `ScTableFooter`     | `border-t bg-muted/50 font-medium [&>tr]:last:border-b-0`                     |
-| `ScTableRow`        | `border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted` |
-| `ScTableHeaderCell` | `h-12 px-4 text-left align-middle font-medium text-muted-foreground`          |
-| `ScTableCell`       | `p-4 align-middle`                                                            |
-| `ScTableCaption`    | `mt-4 text-sm text-muted-foreground`                                          |
-
-## Features
-
-- Hover state on rows (`hover:bg-muted/50`)
-- Selected state support (`data-[state=selected]:bg-muted`)
-- Checkbox column support (`[&:has([role=checkbox])]:pr-0`)
-- Responsive text sizing
-
-## Accessibility
-
-- Uses native HTML table elements for built-in accessibility
-- Screen readers can navigate using table navigation commands
-- Caption provides table description
-- Header cells associate with data cells

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

@@ -1,8 +0,0 @@
-export * from './table';
-export * from './table-header';
-export * from './table-body';
-export * from './table-footer';
-export * from './table-row';
-export * from './table-header-cell';
-export * from './table-cell';
-export * from './table-caption';

package/src/lib/components/table/table-body.ts

@@ -1,17 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: 'tbody[sc-table-body]',
-  host: {
-    'data-slot': 'table-body',
-    '[class]': 'class()',
-  },
-})
-export class ScTableBody {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('[&_tr:last-child]:border-0', this.classInput()),
-  );
-}

package/src/lib/components/table/table-caption.ts

@@ -1,17 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: 'caption[sc-table-caption]',
-  host: {
-    'data-slot': 'table-caption',
-    '[class]': 'class()',
-  },
-})
-export class ScTableCaption {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('mt-4 text-sm text-muted-foreground', this.classInput()),
-  );
-}

package/src/lib/components/table/table-cell.ts

@@ -1,17 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: 'td[sc-table-cell]',
-  host: {
-    'data-slot': 'table-cell',
-    '[class]': 'class()',
-  },
-})
-export class ScTableCell {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', this.classInput()),
-  );
-}

package/src/lib/components/table/table-footer.ts

@@ -1,20 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: 'tfoot[sc-table-footer]',
-  host: {
-    'data-slot': 'table-footer',
-    '[class]': 'class()',
-  },
-})
-export class ScTableFooter {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
-      this.classInput(),
-    ),
-  );
-}

package/src/lib/components/table/table-header-cell.ts

@@ -1,20 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: 'th[sc-table-header-cell]',
-  host: {
-    'data-slot': 'table-header-cell',
-    '[class]': 'class()',
-  },
-})
-export class ScTableHeaderCell {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
-      this.classInput(),
-    ),
-  );
-}

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

@@ -1,17 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: 'thead[sc-table-header]',
-  host: {
-    'data-slot': 'table-header',
-    '[class]': 'class()',
-  },
-})
-export class ScTableHeader {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('[&_tr]:border-b', this.classInput()),
-  );
-}

package/src/lib/components/table/table-row.ts

@@ -1,20 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: 'tr[sc-table-row]',
-  host: {
-    'data-slot': 'table-row',
-    '[class]': 'class()',
-  },
-})
-export class ScTableRow {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
-      this.classInput(),
-    ),
-  );
-}

package/src/lib/components/table/table.ts

@@ -1,17 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: 'table[sc-table]',
-  host: {
-    'data-slot': 'table',
-    '[class]': 'class()',
-  },
-})
-export class ScTable {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('w-full caption-bottom text-sm', this.classInput()),
-  );
-}

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

@@ -1,169 +0,0 @@
-# ScTabs Components
-
-A set of Angular components that wrap `@angular/aria/tabs` directives with shadcn/ui styling.
-
-## Architecture
-
-The components use `hostDirectives` to leverage Angular ARIA's accessible tabs implementation while providing custom styling.
-
-```
-ScTabs (root wrapper)
-└── ScTabList (tablist container)
-    ├── ScTab (tab button)
-    ├── ScTab
-    └── ...
-└── ScTabPanel (tab panel content)
-└── ScTabPanel
-└── ...
-```
-
-## Components
-
-| Component    | Selector            | Host Directive | Description                    |
-| ------------ | ------------------- | -------------- | ------------------------------ |
-| `ScTabs`     | `div[sc-tabs]`      | `Tabs`         | Root wrapper for tabs          |
-| `ScTabList`  | `div[sc-tab-list]`  | `TabList`      | Container for tab buttons      |
-| `ScTab`      | `button[sc-tab]`    | `Tab`          | Button to activate a tab panel |
-| `ScTabPanel` | `div[sc-tab-panel]` | `TabPanel`     | Content panel for each tab     |
-
-## Inputs
-
-### ScTabList
-
-| Input           | Type                         | Default        | Description                      |
-| --------------- | ---------------------------- | -------------- | -------------------------------- |
-| `selectedTab`   | `string`                     | `''`           | The currently selected tab value |
-| `selectionMode` | `'follow' \| 'explicit'`     | `'follow'`     | Tab activation behavior on focus |
-| `orientation`   | `'horizontal' \| 'vertical'` | `'horizontal'` | Tab list direction               |
-
-### ScTab
-
-| Input      | Type      | Default      | Description                       |
-| ---------- | --------- | ------------ | --------------------------------- |
-| `value`    | `string`  | **required** | Unique value identifying this tab |
-| `disabled` | `boolean` | `false`      | Whether the tab is disabled       |
-
-### ScTabPanel
-
-| Input             | Type      | Default      | Description                          |
-| ----------------- | --------- | ------------ | ------------------------------------ |
-| `value`           | `string`  | **required** | Value matching the corresponding tab |
-| `preserveContent` | `boolean` | `false`      | Retains DOM when panel is hidden     |
-
-## Usage
-
-### Basic Tabs
-
-```html
-<div sc-tabs>
-  <div sc-tab-list selectedTab="tab1">
-    <button sc-tab value="tab1">Tab 1</button>
-    <button sc-tab value="tab2">Tab 2</button>
-    <button sc-tab value="tab3">Tab 3</button>
-  </div>
-  <div sc-tab-panel value="tab1">Content for Tab 1</div>
-  <div sc-tab-panel value="tab2">Content for Tab 2</div>
-  <div sc-tab-panel value="tab3">Content for Tab 3</div>
-</div>
-```
-
-### Selection Modes
-
-```html
-<!-- Follow mode (default): tabs activate immediately on focus -->
-<div sc-tab-list selectionMode="follow" selectedTab="account">
-  <button sc-tab value="account">Account</button>
-  <button sc-tab value="password">Password</button>
-</div>
-
-<!-- Explicit mode: requires Space/Enter to activate focused tabs -->
-<div sc-tab-list selectionMode="explicit" selectedTab="account">
-  <button sc-tab value="account">Account</button>
-  <button sc-tab value="password">Password</button>
-</div>
-```
-
-### With Disabled Tab
-
-```html
-<div sc-tab-list selectedTab="active">
-  <button sc-tab value="active">Active Tab</button>
-  <button sc-tab value="disabled" disabled>Disabled</button>
-</div>
-```
-
-### Vertical Tabs
-
-```html
-<div sc-tabs class="flex gap-4">
-  <div sc-tab-list orientation="vertical" selectedTab="tab1" class="flex-col">
-    <button sc-tab value="tab1">Tab 1</button>
-    <button sc-tab value="tab2">Tab 2</button>
-  </div>
-  <div class="flex-1">
-    <div sc-tab-panel value="tab1">Content 1</div>
-    <div sc-tab-panel value="tab2">Content 2</div>
-  </div>
-</div>
-```
-
-### Full Width Tabs
-
-```html
-<div sc-tab-list class="grid w-full grid-cols-3" selectedTab="tab1">
-  <button sc-tab value="tab1">Tab 1</button>
-  <button sc-tab value="tab2">Tab 2</button>
-  <button sc-tab value="tab3">Tab 3</button>
-</div>
-```
-
-### Preserve Content (Lazy Loading)
-
-```html
-<!-- Content is destroyed when hidden (default) -->
-<div sc-tab-panel value="tab1">Heavy content here</div>
-
-<!-- Content is preserved when hidden -->
-<div sc-tab-panel value="tab1" [preserveContent]="true">Heavy content that persists in DOM</div>
-```
-
-## Keyboard Navigation
-
-| Key               | Action                                            |
-| ----------------- | ------------------------------------------------- |
-| `ArrowLeft`       | Move focus to previous tab                        |
-| `ArrowRight`      | Move focus to next tab                            |
-| `ArrowUp`         | Move focus to previous tab (vertical orientation) |
-| `ArrowDown`       | Move focus to next tab (vertical orientation)     |
-| `Home`            | Move focus to first tab                           |
-| `End`             | Move focus to last tab                            |
-| `Space` / `Enter` | Activate focused tab (explicit mode only)         |
-| `Tab`             | Move focus to the active tab panel                |
-
-## Accessibility
-
-- Full ARIA tabs pattern implementation via `@angular/aria/tabs`
-- Proper `role="tablist"`, `role="tab"`, and `role="tabpanel"` attributes
-- `aria-selected` state management on tabs
-- Automatic `aria-controls` and `aria-labelledby` linking
-- Roving tabindex for keyboard navigation
-- RTL language support
-
-## Styling
-
-The components use Tailwind CSS with shadcn/ui design tokens:
-
-- List: `bg-muted rounded-lg p-1`
-- Active tab: `bg-background text-foreground shadow`
-- Inactive tab: `text-muted-foreground`
-- Focus ring on keyboard navigation
-
-All components accept a `class` input for custom styling:
-
-```html
-<div sc-tab-list class="w-full">
-  <!-- full width tab list -->
-</div>
-
-<button sc-tab value="special" class="font-bold">Special Tab</button>
-```

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

@@ -1,4 +0,0 @@
-export { ScTab } from './tab';
-export { ScTabList } from './tab-list';
-export { ScTabPanel } from './tab-panel';
-export { ScTabs } from './tabs';

package/src/lib/components/tabs/tab-list.ts

@@ -1,38 +0,0 @@
-import { TabList } from '@angular/aria/tabs';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Component({
-  selector: 'div[sc-tab-list]',
-  hostDirectives: [
-    {
-      directive: TabList,
-      inputs: ['selectedTab', 'selectionMode', 'orientation'],
-    },
-  ],
-  template: `
-    <ng-content />
-  `,
-  host: {
-    'data-slot': 'tab-list',
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScTabList {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
-      this.classInput(),
-    ),
-  );
-}

package/src/lib/components/tabs/tab-panel.ts

@@ -1,45 +0,0 @@
-import { TabContent, TabPanel } from '@angular/aria/tabs';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Component({
-  selector: 'div[sc-tab-panel]',
-  imports: [TabContent],
-  hostDirectives: [
-    {
-      directive: TabPanel,
-      inputs: ['value'],
-    },
-  ],
-  template: `
-    <ng-template ngTabContent>
-      <ng-content />
-    </ng-template>
-  `,
-  host: {
-    'data-slot': 'tab-panel',
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScTabPanel {
-  protected readonly tabPanel = inject(TabPanel);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'mt-2 ring-offset-background',
-      'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-      this.classInput(),
-    ),
-  );
-}