@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/checkbox/visual-checkbox.ts

@@ -0,0 +1,47 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { SiCheckIcon, SiMinusIcon } from '@semantic-icons/lucide-icons';
+import { cn } from '@semantic-components/ui';
+import { ScCheckboxIndicator } from './checkbox-indicator';
+import { SC_CHECKBOX_FIELD } from './checkbox-types';
+
+@Component({
+  selector: 'span[sc-visual-checkbox]',
+  imports: [ScCheckboxIndicator, SiCheckIcon, SiMinusIcon],
+  host: {
+    'data-slot': 'visual-checkbox',
+    '[class]': 'class()',
+    '[attr.data-state]': 'checkbox.dataState()',
+  },
+  template: `
+    <span sc-checkbox-indicator [state]="checkbox.dataState()">
+      @if (checkbox.dataState() === 'indeterminate') {
+        <svg si-minus-icon class="size-4"></svg>
+      } @else if (checkbox.dataState() === 'checked') {
+        <svg si-check-icon class="size-4"></svg>
+      }
+    </span>
+  `,
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScVisualCheckbox {
+  readonly checkbox = inject(SC_CHECKBOX_FIELD);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'pointer-events-none inline-flex size-4 shrink-0 items-center justify-center',
+      'ring-offset-background',
+      'peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2',
+      'peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+      this.classInput(),
+    ),
+  );
+}

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

@@ -0,0 +1,191 @@
+# Collapsible Components
+
+An interactive component which expands/collapses a panel. Built on top of `@angular/aria/accordion` for robust accessibility support.
+
+## Architecture
+
+```
+ScCollapsible (Root - uses AccordionGroup)
+    ├── disabled: boolean
+    │
+    ├── ScCollapsibleTrigger (uses AccordionTrigger)
+    │     ├── panelId: string (links to panel)
+    │     ├── expanded: boolean
+    │     └── disabled: boolean
+    │
+    └── ScCollapsiblePanel (uses AccordionPanel + animation wrapper)
+          ├── panelId: string (links to trigger)
+          ├── animate.enter / animate.leave (on internal div)
+          │
+          └── ScCollapsibleContent (content styling wrapper)
+                └── [your content here]
+```
+
+## Components
+
+| Component              | Selector                         | Description                                             |
+| ---------------------- | -------------------------------- | ------------------------------------------------------- |
+| `ScCollapsible`        | `div[sc-collapsible]`            | Root wrapper using `AccordionGroup`                     |
+| `ScCollapsibleTrigger` | `button[sc-collapsible-trigger]` | Button to toggle panel using `AccordionTrigger`         |
+| `ScCollapsiblePanel`   | `div[sc-collapsible-panel]`      | Collapsible panel with animation using `AccordionPanel` |
+| `ScCollapsibleContent` | `div[sc-collapsible-content]`    | Content styling wrapper with padding                    |
+
+## Inputs
+
+### ScCollapsible
+
+| Input      | Type      | Default | Description             |
+| ---------- | --------- | ------- | ----------------------- |
+| `disabled` | `boolean` | `false` | Disable the collapsible |
+
+### ScCollapsibleTrigger
+
+| Input      | Type      | Default      | Description                              |
+| ---------- | --------- | ------------ | ---------------------------------------- |
+| `panelId`  | `string`  | **required** | Links trigger to its corresponding panel |
+| `expanded` | `boolean` | `false`      | Whether the panel is expanded            |
+| `disabled` | `boolean` | `false`      | Whether the trigger is disabled          |
+
+### ScCollapsiblePanel
+
+| Input     | Type     | Default      | Description                              |
+| --------- | -------- | ------------ | ---------------------------------------- |
+| `panelId` | `string` | **required** | Links panel to its corresponding trigger |
+
+The `ScCollapsiblePanel` component wraps collapsible content using `AccordionPanel` from Angular ARIA. It includes an internal animated div wrapper with `overflow-hidden` class and Angular's `animate.enter`/`animate.leave` directives for smooth expand/collapse transitions.
+
+## Usage
+
+### Basic Collapsible
+
+Use `panelId` to link the trigger to its corresponding panel. Wrap content in `sc-collapsible-content` for smooth animations.
+
+```html
+<div sc-collapsible class="w-[350px] space-y-2">
+  <div class="flex items-center justify-between">
+    <h4 class="text-sm font-semibold">Can I use this?</h4>
+    <button sc-collapsible-trigger panelId="faq-1">
+      <svg><!-- chevron icon --></svg>
+    </button>
+  </div>
+  <div sc-collapsible-panel panelId="faq-1">
+    <div sc-collapsible-content>
+      <p>Yes. It's free and open source.</p>
+    </div>
+  </div>
+</div>
+```
+
+### Initially Open
+
+```html
+<div sc-collapsible>
+  <button sc-collapsible-trigger panelId="open-demo" [expanded]="true">Toggle</button>
+  <div sc-collapsible-panel panelId="open-demo">
+    <div sc-collapsible-content>This content is visible by default.</div>
+  </div>
+</div>
+```
+
+### Disabled
+
+```html
+<div sc-collapsible [disabled]="true">
+  <button sc-collapsible-trigger panelId="disabled-demo">Toggle (disabled)</button>
+  <div sc-collapsible-panel panelId="disabled-demo">
+    <div sc-collapsible-content>This cannot be toggled.</div>
+  </div>
+</div>
+```
+
+### Two-Way Binding
+
+Bind to the `expanded` state of the trigger.
+
+```typescript
+@Component({
+  template: `
+    <div sc-collapsible>
+      <button sc-collapsible-trigger panelId="controlled" [(expanded)]="isOpen">Toggle</button>
+      <div sc-collapsible-panel panelId="controlled">
+        <div sc-collapsible-content>Content</div>
+      </div>
+    </div>
+    <button (click)="isOpen.set(!isOpen())">External Toggle</button>
+  `,
+})
+export class MyComponent {
+  isOpen = signal(false);
+}
+```
+
+### With Chevron Animation
+
+```html
+<div sc-collapsible>
+  <button sc-collapsible-trigger panelId="chevron-demo" #trigger="scCollapsibleTrigger" class="flex items-center gap-2">
+    <span>Toggle</span>
+    <svg class="size-4 transition-transform duration-200" [class.rotate-180]="trigger.expanded()">
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  </button>
+  <div sc-collapsible-panel panelId="chevron-demo">
+    <div sc-collapsible-content>Content here</div>
+  </div>
+</div>
+```
+
+## Animations
+
+The collapsible uses Angular's animation system through an internal div wrapper within the `ScCollapsiblePanel` component:
+
+- **Opening**: When a panel expands, Angular applies the `animate-collapsible-down` class via `animate.enter` on the internal animated div
+- **Closing**: When a panel collapses, Angular applies the `animate-collapsible-up` class via `animate.leave` on the internal animated div
+- **Height Calculation**: The component automatically sets the `--radix-collapsible-content-height` CSS variable to the actual content height, ensuring smooth animations
+- **Timing**: Angular handles all animation timing and cleanup automatically
+
+The animations are defined in the `tw-animate-css` package and create a smooth slide-down/slide-up effect. The `overflow-hidden` class on the animated wrapper ensures content is properly clipped during the transition.
+
+## Data Attributes
+
+| Attribute    | Values           | Description   |
+| ------------ | ---------------- | ------------- |
+| `data-state` | `open`, `closed` | Current state |
+
+You can use these for CSS styling:
+
+```css
+[data-state='open'] {
+  /* styles when open */
+}
+
+[data-state='closed'] {
+  /* styles when closed */
+}
+```
+
+## Accessibility
+
+Built on `@angular/aria/accordion`, providing:
+
+- Trigger button has `aria-expanded` indicating open state
+- Trigger button has `aria-controls` pointing to its panel
+- Panel has `role="region"` and `aria-labelledby` pointing to its trigger
+- `data-state` attribute on trigger and panel (`open` / `closed`)
+- Disabled state is properly communicated via `disabled` attribute
+
+## Customization
+
+All components accept a `class` input for custom styling:
+
+```html
+<div sc-collapsible class="border rounded-lg p-4">
+  <!-- styled container -->
+</div>
+
+<div sc-collapsible-panel panelId="styled">
+  <div sc-collapsible-content class="px-4">
+    <!-- content with custom padding -->
+  </div>
+</div>
+```

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

@@ -0,0 +1,28 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'div[sc-collapsible-content]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'collapsible-content',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScCollapsibleContent {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('pt-0 pb-2.5', this.classInput()),
+  );
+}

package/src/lib/components/collapsible/collapsible-panel.ts

@@ -0,0 +1,42 @@
+import { AccordionContent, AccordionPanel } from '@angular/aria/accordion';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'div[sc-collapsible-panel]',
+  imports: [AccordionContent],
+  hostDirectives: [
+    {
+      directive: AccordionPanel,
+      inputs: ['panelId'],
+    },
+  ],
+  template: `
+    <ng-template ngAccordionContent>
+      <div
+        class="overflow-hidden"
+        animate.enter="animate-collapsible-down"
+        animate.leave="animate-collapsible-up"
+      >
+        <ng-content />
+      </div>
+    </ng-template>
+  `,
+  host: {
+    'data-slot': 'collapsible-panel',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScCollapsiblePanel {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() => cn('', this.classInput()));
+}

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

@@ -0,0 +1,48 @@
+import { AccordionTrigger } from '@angular/aria/accordion';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'button[sc-collapsible-trigger]',
+  exportAs: 'scCollapsibleTrigger',
+  hostDirectives: [
+    {
+      directive: AccordionTrigger,
+      inputs: ['panelId', 'disabled', 'expanded'],
+      outputs: ['expandedChange'],
+    },
+  ],
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'collapsible-trigger',
+    type: 'button',
+    '[attr.data-state]': 'trigger.expanded() ? "open" : "closed"',
+    '[disabled]': 'trigger.disabled()',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScCollapsibleTrigger {
+  readonly trigger = inject(AccordionTrigger);
+
+  /**
+   * Whether the collapsible is expanded
+   */
+  readonly expanded = this.trigger.expanded;
+
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('[&_svg]:pointer-events-none', this.classInput()),
+  );
+}

package/src/lib/components/collapsible/collapsible.ts

@@ -0,0 +1,33 @@
+import { AccordionGroup } from '@angular/aria/accordion';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'div[sc-collapsible]',
+  hostDirectives: [
+    {
+      directive: AccordionGroup,
+      inputs: ['disabled'],
+    },
+  ],
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'collapsible',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScCollapsible {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() => cn('', this.classInput()));
+}

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

@@ -0,0 +1,4 @@
+export { ScCollapsible } from './collapsible';
+export { ScCollapsibleContent } from './collapsible-content';
+export { ScCollapsiblePanel } from './collapsible-panel';
+export { ScCollapsibleTrigger } from './collapsible-trigger';

package/src/lib/components/color-picker/README.md

@@ -0,0 +1,218 @@
+# Color Picker
+
+A component for selecting colors with support for various formats and input methods.
+
+## Usage
+
+```html
+<div sc-color-picker [(value)]="color" class="space-y-4">
+  <div sc-color-picker-area></div>
+  <div sc-color-picker-hue></div>
+  <div class="flex items-center gap-3">
+    <div sc-color-picker-preview></div>
+    <input sc-color-picker-input format="hex" />
+  </div>
+</div>
+```
+
+## Components
+
+### ScColorPicker
+
+Root container that manages color state.
+
+**Selector:** `[sc-color-picker]`
+
+**Inputs:**
+
+| Input      | Type      | Default | Description            |
+| ---------- | --------- | ------- | ---------------------- |
+| `disabled` | `boolean` | `false` | Disable picker         |
+| `class`    | `string`  | `''`    | Additional CSS classes |
+
+**Two-way Bindings:**
+
+| Binding | Type     | Default     | Description     |
+| ------- | -------- | ----------- | --------------- |
+| `value` | `string` | `'#000000'` | Hex color value |
+
+**Computed Properties:**
+
+| Property | Type     | Description        |
+| -------- | -------- | ------------------ |
+| `hsv`    | `HSV`    | Current HSV values |
+| `rgb`    | `RGB`    | Current RGB values |
+| `hsl`    | `HSL`    | Current HSL values |
+| `hex`    | `string` | Current hex value  |
+
+**Methods:**
+
+| Method             | Description            |
+| ------------------ | ---------------------- |
+| `setHsv(hsv)`      | Set HSV values         |
+| `setRgb(rgb)`      | Set RGB values         |
+| `setHex(hex)`      | Set hex value          |
+| `setHue(h)`        | Set hue (0-360)        |
+| `setSaturation(s)` | Set saturation (0-100) |
+| `setValue(v)`      | Set value (0-100)      |
+
+### ScColorPickerArea
+
+Saturation/brightness selection area.
+
+**Selector:** `[sc-color-picker-area]`
+
+Features mouse and touch drag support.
+
+### ScColorPickerHue
+
+Hue slider (rainbow gradient).
+
+**Selector:** `[sc-color-picker-hue]`
+
+### ScColorPickerPreview
+
+Color preview swatch.
+
+**Selector:** `[sc-color-picker-preview]`
+
+### ScColorPickerInput
+
+Text input for color values.
+
+**Selector:** `input[sc-color-picker-input]`
+
+**Inputs:**
+
+| Input    | Type                      | Default | Description    |
+| -------- | ------------------------- | ------- | -------------- |
+| `format` | `'hex' \| 'rgb' \| 'hsl'` | `'hex'` | Display format |
+| `class`  | `string`                  | `''`    | Additional CSS |
+
+### ScColorPickerSwatches
+
+Preset color swatches.
+
+**Selector:** `[sc-color-picker-swatches]`
+
+**Inputs:**
+
+| Input    | Type       | Default            | Description    |
+| -------- | ---------- | ------------------ | -------------- |
+| `colors` | `string[]` | (12 preset colors) | Swatch colors  |
+| `class`  | `string`   | `''`               | Additional CSS |
+
+### ScColorPickerEyeDropper
+
+Eye dropper button (Chrome/Edge only).
+
+**Selector:** `button[sc-color-picker-eyedropper]`
+
+Uses the EyeDropper API to pick colors from the screen.
+
+## Types
+
+```typescript
+interface HSV {
+  h: number; // 0-360
+  s: number; // 0-100
+  v: number; // 0-100
+}
+
+interface RGB {
+  r: number; // 0-255
+  g: number; // 0-255
+  b: number; // 0-255
+}
+
+interface HSL {
+  h: number; // 0-360
+  s: number; // 0-100
+  l: number; // 0-100
+}
+```
+
+## Examples
+
+### Full Picker
+
+```html
+<div sc-color-picker [(value)]="color" class="space-y-4 rounded-lg border p-4">
+  <div sc-color-picker-area></div>
+  <div sc-color-picker-hue></div>
+  <div class="flex items-center gap-3">
+    <div sc-color-picker-preview></div>
+    <input sc-color-picker-input format="hex" class="flex-1" />
+  </div>
+</div>
+```
+
+### With Swatches
+
+```html
+<div sc-color-picker [(value)]="color" class="space-y-4">
+  <div sc-color-picker-area></div>
+  <div sc-color-picker-hue></div>
+  <div sc-color-picker-swatches></div>
+</div>
+```
+
+### With Eye Dropper
+
+```html
+<div sc-color-picker [(value)]="color" class="space-y-4">
+  <div sc-color-picker-area></div>
+  <div sc-color-picker-hue></div>
+  <div class="flex gap-2">
+    <input sc-color-picker-input format="hex" class="flex-1" />
+    <button sc-color-picker-eyedropper></button>
+  </div>
+</div>
+```
+
+### Custom Swatches
+
+```html
+<div sc-color-picker [(value)]="color">
+  <div sc-color-picker-swatches [colors]="['#ff0000', '#00ff00', '#0000ff']"></div>
+</div>
+```
+
+### Simple Swatch Only
+
+```html
+<div sc-color-picker [(value)]="color" class="space-y-4">
+  <div sc-color-picker-swatches></div>
+  <div class="flex items-center gap-3">
+    <div sc-color-picker-preview></div>
+    <span>{{ color() }}</span>
+  </div>
+</div>
+```
+
+### Compact
+
+```html
+<div sc-color-picker [(value)]="color" class="w-[200px] space-y-3">
+  <div sc-color-picker-area class="h-32"></div>
+  <div sc-color-picker-hue></div>
+  <input sc-color-picker-input format="hex" />
+</div>
+```
+
+## Features
+
+- **Saturation/Brightness Area**: 2D picker for saturation and brightness
+- **Hue Slider**: Full spectrum hue selection
+- **Multiple Formats**: Hex, RGB, HSL display
+- **Preset Swatches**: Quick color selection
+- **Eye Dropper**: Pick colors from screen (Chrome/Edge)
+- **Touch Support**: Works on mobile devices
+- **Two-way Binding**: Sync color state with `[(value)]`
+
+## Accessibility
+
+- Keyboard accessible input field
+- ARIA labels on swatch buttons
+- Screen reader text for eye dropper
+- Focus indicators on interactive elements