@semantic-components/ui-lab 0.63.0 → 0.65.0

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

@@ -1,133 +0,0 @@
-# Resizable
-
-Accessible resizable panel groups and layouts with keyboard support.
-
-## Usage
-
-```html
-<div sc-resizable-panel-group direction="horizontal" class="min-h-[200px] max-w-md rounded-lg border">
-  <div sc-resizable-panel [defaultSize]="50">
-    <div class="flex h-full items-center justify-center p-6">
-      <span class="font-semibold">One</span>
-    </div>
-  </div>
-  <div sc-resizable-handle></div>
-  <div sc-resizable-panel [defaultSize]="50">
-    <div class="flex h-full items-center justify-center p-6">
-      <span class="font-semibold">Two</span>
-    </div>
-  </div>
-</div>
-```
-
-## Components
-
-### ScResizablePanelGroup
-
-Container directive for a group of resizable panels.
-
-**Selector:** `[sc-resizable-panel-group]`
-
-**Inputs:**
-
-| Input       | Type                         | Default        | Description                    |
-| ----------- | ---------------------------- | -------------- | ------------------------------ |
-| `direction` | `'horizontal' \| 'vertical'` | `'horizontal'` | Layout direction of the panels |
-| `class`     | `string`                     | `''`           | Additional CSS classes         |
-
-### ScResizablePanel
-
-Individual resizable panel within a panel group.
-
-**Selector:** `[sc-resizable-panel]`
-
-**Inputs:**
-
-| Input         | Type     | Default | Description                        |
-| ------------- | -------- | ------- | ---------------------------------- |
-| `defaultSize` | `number` | `50`    | Initial size as percentage (0-100) |
-| `minSize`     | `number` | `10`    | Minimum size as percentage         |
-| `maxSize`     | `number` | `90`    | Maximum size as percentage         |
-| `class`       | `string` | `''`    | Additional CSS classes             |
-
-**Methods:**
-
-- `setSize(size: number)`: Programmatically set the panel size
-
-### ScResizableHandle
-
-Drag handle between panels for resizing.
-
-**Selector:** `[sc-resizable-handle]`
-
-**Inputs:**
-
-| Input        | Type      | Default | Description                           |
-| ------------ | --------- | ------- | ------------------------------------- |
-| `withHandle` | `boolean` | `false` | Show a visual grip icon on the handle |
-| `class`      | `string`  | `''`    | Additional CSS classes                |
-
-## Examples
-
-### Vertical Layout
-
-```html
-<div sc-resizable-panel-group direction="vertical" class="min-h-[300px] max-w-md rounded-lg border">
-  <div sc-resizable-panel [defaultSize]="30">Header</div>
-  <div sc-resizable-handle></div>
-  <div sc-resizable-panel [defaultSize]="70">Content</div>
-</div>
-```
-
-### With Handle Icon
-
-```html
-<div sc-resizable-panel-group direction="horizontal">
-  <div sc-resizable-panel [defaultSize]="30">Sidebar</div>
-  <div sc-resizable-handle [withHandle]="true"></div>
-  <div sc-resizable-panel [defaultSize]="70">Content</div>
-</div>
-```
-
-### Three Panels with Size Constraints
-
-```html
-<div sc-resizable-panel-group direction="horizontal">
-  <div sc-resizable-panel [defaultSize]="25" [minSize]="15">Left</div>
-  <div sc-resizable-handle [withHandle]="true"></div>
-  <div sc-resizable-panel [defaultSize]="50">Center</div>
-  <div sc-resizable-handle [withHandle]="true"></div>
-  <div sc-resizable-panel [defaultSize]="25" [minSize]="15">Right</div>
-</div>
-```
-
-### Nested Panels
-
-```html
-<div sc-resizable-panel-group direction="horizontal" class="min-h-[300px]">
-  <div sc-resizable-panel [defaultSize]="30">Sidebar</div>
-  <div sc-resizable-handle></div>
-  <div sc-resizable-panel [defaultSize]="70">
-    <div sc-resizable-panel-group direction="vertical" class="h-full">
-      <div sc-resizable-panel [defaultSize]="40">Top</div>
-      <div sc-resizable-handle></div>
-      <div sc-resizable-panel [defaultSize]="60">Bottom</div>
-    </div>
-  </div>
-</div>
-```
-
-## Features
-
-- **Mouse and Touch Support**: Drag handles work with both mouse and touch devices
-- **Flexible Sizing**: Panels use flex-grow for proportional sizing
-- **Size Constraints**: Set minimum and maximum sizes for panels
-- **Nested Groups**: Panel groups can be nested for complex layouts
-- **Visual Handle**: Optional grip icon for better affordance
-- **Direction Support**: Both horizontal and vertical layouts
-
-## Accessibility
-
-- Handles have focus styles for keyboard navigation
-- Proper cursor styles indicate resize direction
-- Touch-friendly hit areas

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

@@ -1,4 +0,0 @@
-export * from './resizable.types';
-export * from './resizable-panel-group';
-export * from './resizable-panel';
-export * from './resizable-handle';

package/src/lib/components/resizable/resizable-handle.ts

@@ -1,160 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  ElementRef,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScResizablePanelGroup } from './resizable-panel-group';
-
-@Component({
-  selector: '[sc-resizable-handle]',
-  host: {
-    'data-slot': 'resizable-handle',
-    'data-panel-resize-handle': '',
-    '[class]': 'class()',
-    '[attr.data-direction]': 'group.direction()',
-    '(mousedown)': 'onMouseDown($event)',
-    '(touchstart)': 'onTouchStart($event)',
-  },
-  template: `
-    @if (withHandle()) {
-      <div
-        class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          class="size-2.5"
-        >
-          <circle cx="12" cy="5" r="1" />
-          <circle cx="12" cy="12" r="1" />
-          <circle cx="12" cy="19" r="1" />
-        </svg>
-      </div>
-    }
-  `,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScResizableHandle {
-  readonly group = inject(ScResizablePanelGroup);
-  private readonly elementRef = inject(ElementRef);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly withHandle = input<boolean>(false);
-
-  private dragging = false;
-  private startPos = 0;
-  private startSizes: number[] = [];
-
-  protected readonly class = computed(() =>
-    cn(
-      'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1',
-      'data-[direction=vertical]:h-px data-[direction=vertical]:w-full data-[direction=vertical]:after:left-0 data-[direction=vertical]:after:h-1 data-[direction=vertical]:after:w-full data-[direction=vertical]:after:-translate-y-1/2 data-[direction=vertical]:after:translate-x-0',
-      '[&[data-direction=horizontal]]:cursor-col-resize [&[data-direction=vertical]]:cursor-row-resize',
-      this.classInput(),
-    ),
-  );
-
-  protected onMouseDown(event: MouseEvent): void {
-    event.preventDefault();
-    this.startDrag(event.clientX, event.clientY);
-
-    const onMouseMove = (e: MouseEvent) => this.onDrag(e.clientX, e.clientY);
-    const onMouseUp = () => {
-      this.dragging = false;
-      document.removeEventListener('mousemove', onMouseMove);
-      document.removeEventListener('mouseup', onMouseUp);
-    };
-
-    document.addEventListener('mousemove', onMouseMove);
-    document.addEventListener('mouseup', onMouseUp);
-  }
-
-  protected onTouchStart(event: TouchEvent): void {
-    if (event.touches.length !== 1) return;
-    event.preventDefault();
-    const touch = event.touches[0];
-    this.startDrag(touch.clientX, touch.clientY);
-
-    const onTouchMove = (e: TouchEvent) => {
-      if (e.touches.length !== 1) return;
-      const t = e.touches[0];
-      this.onDrag(t.clientX, t.clientY);
-    };
-    const onTouchEnd = () => {
-      this.dragging = false;
-      document.removeEventListener('touchmove', onTouchMove);
-      document.removeEventListener('touchend', onTouchEnd);
-    };
-
-    document.addEventListener('touchmove', onTouchMove, { passive: false });
-    document.addEventListener('touchend', onTouchEnd);
-  }
-
-  private startDrag(clientX: number, clientY: number): void {
-    this.dragging = true;
-    const isHorizontal = this.group.direction() === 'horizontal';
-    this.startPos = isHorizontal ? clientX : clientY;
-
-    const panels = this.group.getPanels();
-    this.startSizes = panels.map((p) => p.size());
-  }
-
-  private onDrag(clientX: number, clientY: number): void {
-    if (!this.dragging) return;
-
-    const isHorizontal = this.group.direction() === 'horizontal';
-    const currentPos = isHorizontal ? clientX : clientY;
-    const delta = currentPos - this.startPos;
-
-    const panels = this.group.getPanels();
-    const handles = this.group.getHandles();
-    const handleIndex = handles.indexOf(this);
-
-    if (handleIndex === -1 || panels.length < 2) return;
-
-    // Get the container size
-    const container = this.elementRef.nativeElement.parentElement;
-    if (!container) return;
-
-    const containerSize = isHorizontal
-      ? container.offsetWidth
-      : container.offsetHeight;
-    const deltaPercent = (delta / containerSize) * 100;
-
-    // Adjust the panels on either side of this handle
-    const leftPanelIndex = handleIndex;
-    const rightPanelIndex = handleIndex + 1;
-
-    if (leftPanelIndex >= 0 && rightPanelIndex < panels.length) {
-      const leftPanel = panels[leftPanelIndex];
-      const rightPanel = panels[rightPanelIndex];
-
-      const newLeftSize = this.startSizes[leftPanelIndex] + deltaPercent;
-      const newRightSize = this.startSizes[rightPanelIndex] - deltaPercent;
-
-      // Only apply if both panels stay within bounds
-      if (
-        newLeftSize >= leftPanel.minSize() &&
-        newLeftSize <= leftPanel.maxSize() &&
-        newRightSize >= rightPanel.minSize() &&
-        newRightSize <= rightPanel.maxSize()
-      ) {
-        leftPanel.setSize(newLeftSize);
-        rightPanel.setSize(newRightSize);
-      }
-    }
-  }
-}

package/src/lib/components/resizable/resizable-panel-group.ts

@@ -1,38 +0,0 @@
-import { computed, Directive, input, contentChildren } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ResizableDirection } from './resizable.types';
-import { ScResizablePanel } from './resizable-panel';
-import { ScResizableHandle } from './resizable-handle';
-
-@Directive({
-  selector: '[sc-resizable-panel-group]',
-  host: {
-    'data-slot': 'resizable-panel-group',
-    'data-panel-group': '',
-    '[class]': 'class()',
-    '[attr.data-direction]': 'direction()',
-  },
-})
-export class ScResizablePanelGroup {
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly direction = input<ResizableDirection>('horizontal');
-
-  private readonly panels = contentChildren(ScResizablePanel, {
-    descendants: true,
-  });
-  private readonly handles = contentChildren(ScResizableHandle, {
-    descendants: true,
-  });
-
-  protected readonly class = computed(() =>
-    cn('flex size-full data-[direction=vertical]:flex-col', this.classInput()),
-  );
-
-  getPanels() {
-    return this.panels();
-  }
-
-  getHandles() {
-    return this.handles();
-  }
-}

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

@@ -1,51 +0,0 @@
-import { computed, Directive, inject, input, signal } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ResizableDirection } from './resizable.types';
-import { ScResizablePanelGroup } from './resizable-panel-group';
-
-@Directive({
-  selector: '[sc-resizable-panel]',
-  host: {
-    'data-slot': 'resizable-panel',
-    'data-panel': '',
-    '[class]': 'class()',
-    '[style.flex-grow]': 'size()',
-    '[style.flex-shrink]': '1',
-    '[style.flex-basis]': '"0%"',
-    '[style.min-width]':
-      'group.direction() === "horizontal" ? minSizePx() : undefined',
-    '[style.min-height]':
-      'group.direction() === "vertical" ? minSizePx() : undefined',
-    '[style.max-width]':
-      'group.direction() === "horizontal" ? maxSizePx() : undefined',
-    '[style.max-height]':
-      'group.direction() === "vertical" ? maxSizePx() : undefined',
-  },
-})
-export class ScResizablePanel {
-  readonly group = inject(ScResizablePanelGroup);
-
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly defaultSize = input<number>(50);
-  readonly minSize = input<number>(10);
-  readonly maxSize = input<number>(90);
-
-  readonly size = signal<number>(this.defaultSize());
-
-  protected readonly class = computed(() =>
-    cn('overflow-hidden', this.classInput()),
-  );
-
-  protected readonly minSizePx = computed(() => `${this.minSize()}%`);
-  protected readonly maxSizePx = computed(() => `${this.maxSize()}%`);
-
-  constructor() {
-    // Initialize size from defaultSize
-    this.size.set(this.defaultSize());
-  }
-
-  setSize(newSize: number): void {
-    const clamped = Math.max(this.minSize(), Math.min(this.maxSize(), newSize));
-    this.size.set(clamped);
-  }
-}

package/src/lib/components/resizable/resizable.types.ts

@@ -1 +0,0 @@
-export type ResizableDirection = 'horizontal' | 'vertical';

package/src/lib/components/scroll-area/README.md

@@ -1,76 +0,0 @@
-# Scroll Area
-
-Augments native scroll functionality for custom, cross-browser styling with a custom scrollbar.
-
-## Components
-
-- `ScScrollArea` - Container that hides native scrollbar
-- `ScScrollBar` - Custom scrollbar with track and thumb
-
-## Usage
-
-### Vertical Scroll
-
-```html
-<div sc-scroll-area class="h-72 w-48 rounded-md border">
-  <div class="p-4">
-    <!-- Scrollable content -->
-  </div>
-  <div sc-scroll-bar orientation="vertical"></div>
-</div>
-```
-
-### Horizontal Scroll
-
-```html
-<div sc-scroll-area class="w-96 whitespace-nowrap rounded-md border">
-  <div class="flex w-max space-x-4 p-4">
-    <!-- Horizontally scrollable content -->
-  </div>
-  <div sc-scroll-bar orientation="horizontal"></div>
-</div>
-```
-
-### Both Scrollbars
-
-```html
-<div sc-scroll-area class="h-72 w-72 rounded-md border">
-  <div class="p-4" style="width: 500px;">
-    <!-- Content wider and taller than container -->
-  </div>
-  <div sc-scroll-bar orientation="vertical"></div>
-  <div sc-scroll-bar orientation="horizontal"></div>
-</div>
-```
-
-## Inputs
-
-### ScScrollArea
-
-| Input           | Type     | Default | Description                      |
-| --------------- | -------- | ------- | -------------------------------- |
-| `class`         | `string` | `''`    | Additional CSS classes           |
-| `viewportClass` | `string` | `''`    | Classes for the viewport element |
-
-### ScScrollBar
-
-| Input         | Type                         | Default      | Description            |
-| ------------- | ---------------------------- | ------------ | ---------------------- |
-| `orientation` | `'vertical' \| 'horizontal'` | `'vertical'` | Scrollbar orientation  |
-| `class`       | `string`                     | `''`         | Additional CSS classes |
-
-## Features
-
-- Custom styled scrollbar that matches your design system
-- Supports vertical, horizontal, or both scrollbars
-- Drag-to-scroll on the thumb
-- Click-to-scroll on the track
-- Auto-hides when content fits
-- Syncs with native scroll events
-- Responsive to content size changes
-
-## Accessibility
-
-- Native scroll behavior is preserved
-- Keyboard navigation works as expected
-- Touch scrolling works on mobile devices

package/src/lib/components/scroll-area/index.ts

@@ -1,2 +0,0 @@
-export * from './scroll-area';
-export * from './scroll-bar';

package/src/lib/components/scroll-area/scroll-area.ts

@@ -1,87 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  contentChild,
-  ElementRef,
-  input,
-  signal,
-  viewChild,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import { ScScrollBar } from './scroll-bar';
-
-@Component({
-  selector: 'div[sc-scroll-area]',
-  host: {
-    'data-slot': 'scroll-area',
-    '[class]': 'class()',
-  },
-  template: `
-    <div
-      #viewport
-      class="h-full w-full overflow-scroll scrollbar-none"
-      [class]="viewportClass()"
-    >
-      <div #content class="min-w-full table">
-        <ng-content />
-      </div>
-    </div>
-    <ng-content select="[sc-scroll-bar]" />
-  `,
-  styles: `
-    .scrollbar-none {
-      scrollbar-width: none;
-      -ms-overflow-style: none;
-    }
-    .scrollbar-none::-webkit-scrollbar {
-      display: none;
-    }
-  `,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScScrollArea {
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly viewportClassInput = input<string>('', { alias: 'viewportClass' });
-
-  readonly viewport =
-    viewChild.required<ElementRef<HTMLDivElement>>('viewport');
-  readonly content = viewChild.required<ElementRef<HTMLDivElement>>('content');
-  readonly verticalScrollbar = contentChild(ScScrollBar);
-
-  readonly scrollTop = signal(0);
-  readonly scrollLeft = signal(0);
-  readonly scrollHeight = signal(0);
-  readonly scrollWidth = signal(0);
-  readonly clientHeight = signal(0);
-  readonly clientWidth = signal(0);
-
-  protected readonly class = computed(() =>
-    cn('relative overflow-hidden', this.classInput()),
-  );
-
-  protected readonly viewportClass = computed(() =>
-    cn('', this.viewportClassInput()),
-  );
-
-  updateScrollState(): void {
-    const el = this.viewport().nativeElement;
-    this.scrollTop.set(el.scrollTop);
-    this.scrollLeft.set(el.scrollLeft);
-    this.scrollHeight.set(el.scrollHeight);
-    this.scrollWidth.set(el.scrollWidth);
-    this.clientHeight.set(el.clientHeight);
-    this.clientWidth.set(el.clientWidth);
-  }
-
-  scrollTo(top: number, left?: number): void {
-    const el = this.viewport().nativeElement;
-    el.scrollTop = top;
-    if (left !== undefined) {
-      el.scrollLeft = left;
-    }
-    this.updateScrollState();
-  }
-}