@semantic-components/ui-lab 0.63.0 → 0.65.0

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

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

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

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

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

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

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

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

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