@semantic-components/ui-lab 0.62.0 → 0.63.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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