@semantic-components/ui-lab 0.63.0 → 0.65.0

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

@@ -1,183 +0,0 @@
-# Marquee
-
-Scrolling content with smooth infinite animations, multiple directions, and customizable speed.
-
-## Components
-
-- `ScMarquee` - Main marquee container with duplicate content support
-- `ScMarqueeItem` - Individual item in the marquee
-- `ScMarqueeClone` - Clone container for seamless looping
-- `ScMarqueeFade` - Wrapper that adds gradient fade effects
-- `ScAutoMarquee` - Self-contained auto-looping marquee
-- `ScMarqueeText` - Simple text-only marquee
-
-## Usage
-
-### Text Marquee
-
-```html
-<sc-marquee-text text="Breaking news: This is scrolling text!" [duration]="15" />
-```
-
-### Content Marquee
-
-```html
-<sc-marquee [duration]="30" [gap]="24">
-  @for (item of items; track item) {
-  <div sc-marquee-item>{{ item }}</div>
-  }
-  <ng-container sc-marquee-clone>
-    @for (item of items; track item) {
-    <div sc-marquee-item>{{ item }}</div>
-    }
-  </ng-container>
-</sc-marquee>
-```
-
-### Vertical Marquee
-
-```html
-<sc-marquee direction="vertical" [duration]="20">
-  <!-- items -->
-</sc-marquee>
-```
-
-### Reversed Direction
-
-```html
-<sc-marquee [reverse]="true">
-  <!-- items -->
-</sc-marquee>
-```
-
-## API
-
-### ScMarquee
-
-| Input          | Type                         | Default        | Description              |
-| -------------- | ---------------------------- | -------------- | ------------------------ |
-| `class`        | `string`                     | `''`           | Additional CSS classes   |
-| `direction`    | `'horizontal' \| 'vertical'` | `'horizontal'` | Scroll direction         |
-| `duration`     | `number`                     | `40`           | Animation duration (sec) |
-| `gap`          | `number`                     | `16`           | Gap between items (px)   |
-| `pauseOnHover` | `boolean`                    | `true`         | Pause animation on hover |
-| `reverse`      | `boolean`                    | `false`        | Reverse scroll direction |
-
-### ScMarqueeText
-
-| Input          | Type      | Default | Description                   |
-| -------------- | --------- | ------- | ----------------------------- |
-| `class`        | `string`  | `''`    | Additional CSS classes        |
-| `text`         | `string`  | -       | **Required.** Text to display |
-| `separator`    | `string`  | `'•'`   | Separator between repetitions |
-| `duration`     | `number`  | `20`    | Animation duration (sec)      |
-| `pauseOnHover` | `boolean` | `true`  | Pause animation on hover      |
-| `reverse`      | `boolean` | `false` | Reverse scroll direction      |
-
-### ScMarqueeItem
-
-| Input   | Type     | Default | Description            |
-| ------- | -------- | ------- | ---------------------- |
-| `class` | `string` | `''`    | Additional CSS classes |
-
-### ScMarqueeClone
-
-| Input   | Type     | Default | Description            |
-| ------- | -------- | ------- | ---------------------- |
-| `class` | `string` | `''`    | Additional CSS classes |
-
-### ScMarqueeFade
-
-| Input       | Type                         | Default        | Description            |
-| ----------- | ---------------------------- | -------------- | ---------------------- |
-| `class`     | `string`                     | `''`           | Additional CSS classes |
-| `direction` | `'horizontal' \| 'vertical'` | `'horizontal'` | Fade direction         |
-| `fadeSize`  | `string`                     | `'5rem'`       | Size of fade gradient  |
-
-## Examples
-
-### Logo Carousel
-
-```html
-<sc-marquee [duration]="30" [gap]="48">
-  @for (logo of logos; track logo) {
-  <div sc-marquee-item class="w-32 h-16 flex items-center justify-center border rounded">{{ logo }}</div>
-  }
-  <ng-container sc-marquee-clone>
-    @for (logo of logos; track logo) {
-    <div sc-marquee-item class="w-32 h-16 flex items-center justify-center border rounded">{{ logo }}</div>
-    }
-  </ng-container>
-</sc-marquee>
-```
-
-### Testimonials
-
-```html
-<sc-marquee [duration]="40" [gap]="24">
-  @for (testimonial of testimonials; track testimonial.name) {
-  <div sc-marquee-item class="w-80 p-4 border rounded">
-    <p>"{{ testimonial.quote }}"</p>
-    <p class="font-medium">{{ testimonial.name }}</p>
-  </div>
-  }
-  <ng-container sc-marquee-clone>
-    <!-- duplicate content -->
-  </ng-container>
-</sc-marquee>
-```
-
-### Vertical Notifications
-
-```html
-<div class="h-48 overflow-hidden">
-  <sc-marquee direction="vertical" [duration]="20">
-    @for (notification of notifications; track notification.id) {
-    <div sc-marquee-item class="p-3 border rounded">{{ notification.icon }} {{ notification.title }}</div>
-    }
-    <ng-container sc-marquee-clone>
-      <!-- duplicate content -->
-    </ng-container>
-  </sc-marquee>
-</div>
-```
-
-### Stacked Marquees
-
-```html
-<div class="space-y-2">
-  <sc-marquee [duration]="30"><!-- row 1 --></sc-marquee>
-  <sc-marquee [duration]="25" [reverse]="true"><!-- row 2 --></sc-marquee>
-  <sc-marquee [duration]="35"><!-- row 3 --></sc-marquee>
-</div>
-```
-
-### Speed Variations
-
-```html
-<!-- Fast -->
-<sc-marquee-text text="Fast" [duration]="10" />
-
-<!-- Normal -->
-<sc-marquee-text text="Normal" [duration]="20" />
-
-<!-- Slow -->
-<sc-marquee-text text="Slow" [duration]="40" />
-```
-
-## How It Works
-
-The marquee creates seamless infinite scrolling by:
-
-1. Displaying the original content
-2. Displaying a clone of the content (via `sc-marquee-clone`)
-3. Animating both together with CSS animations
-4. When the first set scrolls out, the second set takes its place seamlessly
-
-For `sc-marquee-text`, the text is automatically duplicated multiple times internally.
-
-## Accessibility
-
-- Clone content is marked with `aria-hidden="true"` to prevent duplicate screen reader announcements
-- Pause on hover allows users to read content
-- Animations respect `prefers-reduced-motion` media query (can be added via CSS)

package/src/lib/components/marquee/auto-marquee.ts

@@ -1,73 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Component({
-  selector: 'sc-auto-marquee',
-  template: `
-    <div [class]="trackClass()">
-      <div [class]="contentClass()">
-        <ng-content />
-      </div>
-      <div [class]="contentClass()" aria-hidden="true">
-        <ng-content select="[clone]" />
-      </div>
-    </div>
-  `,
-  host: {
-    'data-slot': 'auto-marquee',
-    '[class]': 'class()',
-    '[style.--marquee-duration]': 'duration() + "s"',
-    '[style.--marquee-gap]': 'gap() + "px"',
-    '[attr.data-pause-on-hover]': 'pauseOnHover() || null',
-  },
-  styles: `
-    [data-slot='auto-marquee'] {
-      --marquee-duration: 30s;
-      --marquee-gap: 16px;
-      overflow: hidden;
-    }
-
-    [data-slot='auto-marquee'] [data-slot='auto-marquee-track'] {
-      display: flex;
-      gap: var(--marquee-gap);
-      width: max-content;
-      animation: auto-marquee-scroll var(--marquee-duration) linear infinite;
-    }
-
-    [data-slot='auto-marquee'][data-pause-on-hover]:hover
-      [data-slot='auto-marquee-track'] {
-      animation-play-state: paused;
-    }
-
-    @keyframes auto-marquee-scroll {
-      from {
-        transform: translateX(0);
-      }
-      to {
-        transform: translateX(calc(-50% - var(--marquee-gap) / 2));
-      }
-    }
-  `,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScAutoMarquee {
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly duration = input<number>(30);
-  readonly gap = input<number>(16);
-  readonly pauseOnHover = input<boolean>(true);
-
-  protected readonly class = computed(() => cn('w-full', this.classInput()));
-
-  protected readonly trackClass = computed(() => cn('flex'));
-
-  protected readonly contentClass = computed(() =>
-    cn('flex shrink-0 items-center gap-[--marquee-gap]'),
-  );
-}

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

@@ -1,6 +0,0 @@
-export { ScMarquee } from './marquee';
-export { ScMarqueeItem } from './marquee-item';
-export { ScMarqueeClone } from './marquee-clone';
-export { ScMarqueeFade } from './marquee-fade';
-export { ScAutoMarquee } from './auto-marquee';
-export { ScMarqueeText } from './marquee-text';

package/src/lib/components/marquee/marquee-clone.ts

@@ -1,17 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: '[sc-marquee-clone]',
-  host: {
-    'data-slot': 'marquee-clone',
-    '[class]': 'class()',
-  },
-})
-export class ScMarqueeClone {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('flex-shrink-0', this.classInput()),
-  );
-}

package/src/lib/components/marquee/marquee-fade.ts

@@ -1,53 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Component({
-  selector: 'sc-marquee-fade',
-  template: `
-    <div [class]="fadeLeftClass()"></div>
-    <ng-content />
-    <div [class]="fadeRightClass()"></div>
-  `,
-  host: {
-    'data-slot': 'marquee-fade',
-    '[class]': 'class()',
-    '[attr.data-direction]': 'direction()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScMarqueeFade {
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly direction = input<'horizontal' | 'vertical'>('horizontal');
-  readonly fadeSize = input<string>('5rem');
-
-  protected readonly class = computed(() =>
-    cn('relative overflow-hidden', this.classInput()),
-  );
-
-  protected readonly fadeLeftClass = computed(() => {
-    const isVertical = this.direction() === 'vertical';
-    return cn(
-      'pointer-events-none absolute z-10 from-background to-transparent',
-      isVertical
-        ? `top-0 left-0 right-0 h-[${this.fadeSize()}] bg-gradient-to-b`
-        : `left-0 top-0 bottom-0 w-[${this.fadeSize()}] bg-gradient-to-r`,
-    );
-  });
-
-  protected readonly fadeRightClass = computed(() => {
-    const isVertical = this.direction() === 'vertical';
-    return cn(
-      'pointer-events-none absolute z-10 from-background to-transparent',
-      isVertical
-        ? `bottom-0 left-0 right-0 h-[${this.fadeSize()}] bg-gradient-to-t`
-        : `right-0 top-0 bottom-0 w-[${this.fadeSize()}] bg-gradient-to-l`,
-    );
-  });
-}

package/src/lib/components/marquee/marquee-item.ts

@@ -1,17 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: '[sc-marquee-item]',
-  host: {
-    'data-slot': 'marquee-item',
-    '[class]': 'class()',
-  },
-})
-export class ScMarqueeItem {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('flex-shrink-0', this.classInput()),
-  );
-}

package/src/lib/components/marquee/marquee-text.ts

@@ -1,80 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Component({
-  selector: 'sc-marquee-text',
-  template: `
-    <div [class]="trackClass()">
-      <span [class]="textClass()">{{ text() }}</span>
-      <span [class]="separatorClass()">{{ separator() }}</span>
-      <span [class]="textClass()">{{ text() }}</span>
-      <span [class]="separatorClass()">{{ separator() }}</span>
-      <span [class]="textClass()">{{ text() }}</span>
-      <span [class]="separatorClass()">{{ separator() }}</span>
-      <span [class]="textClass()">{{ text() }}</span>
-      <span [class]="separatorClass()">{{ separator() }}</span>
-    </div>
-  `,
-  host: {
-    'data-slot': 'marquee-text',
-    '[class]': 'class()',
-    '[style.--text-duration]': 'duration() + "s"',
-    '[attr.data-pause-on-hover]': 'pauseOnHover() || null',
-    '[attr.data-reverse]': 'reverse() || null',
-  },
-  styles: `
-    [data-slot='marquee-text'] {
-      --text-duration: 20s;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-
-    [data-slot='marquee-text'] > div {
-      display: inline-block;
-      animation: marquee-text-scroll var(--text-duration) linear infinite;
-    }
-
-    [data-slot='marquee-text'][data-reverse] > div {
-      animation-direction: reverse;
-    }
-
-    [data-slot='marquee-text'][data-pause-on-hover]:hover > div {
-      animation-play-state: paused;
-    }
-
-    @keyframes marquee-text-scroll {
-      from {
-        transform: translateX(0);
-      }
-      to {
-        transform: translateX(-50%);
-      }
-    }
-  `,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScMarqueeText {
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly text = input.required<string>();
-  readonly separator = input<string>('•');
-  readonly duration = input<number>(20);
-  readonly pauseOnHover = input<boolean>(true);
-  readonly reverse = input<boolean>(false);
-
-  protected readonly class = computed(() => cn('w-full', this.classInput()));
-
-  protected readonly trackClass = computed(() => cn('whitespace-nowrap'));
-
-  protected readonly textClass = computed(() => cn('inline-block px-4'));
-
-  protected readonly separatorClass = computed(() =>
-    cn('inline-block px-2 text-muted-foreground'),
-  );
-}

package/src/lib/components/marquee/marquee.ts

@@ -1,96 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Component({
-  selector: 'sc-marquee',
-  template: `
-    <div [class]="innerClass()">
-      <ng-content />
-    </div>
-    <div [class]="innerClass()" aria-hidden="true">
-      <ng-content select="[sc-marquee-clone]" />
-    </div>
-  `,
-  host: {
-    'data-slot': 'marquee',
-    '[class]': 'class()',
-    '[style.--duration]': 'duration() + "s"',
-    '[style.--gap]': 'gap() + "px"',
-    '[attr.data-direction]': 'direction()',
-    '[attr.data-pause-on-hover]': 'pauseOnHover() || null',
-    '[attr.data-reverse]': 'reverse() || null',
-  },
-  styles: `
-    [data-slot='marquee'] {
-      --duration: 40s;
-      --gap: 16px;
-      display: flex;
-      overflow: hidden;
-      gap: var(--gap);
-    }
-
-    [data-slot='marquee'] > div {
-      display: flex;
-      flex-shrink: 0;
-      gap: var(--gap);
-      animation: marquee var(--duration) linear infinite;
-    }
-
-    [data-slot='marquee'][data-direction='vertical'] {
-      flex-direction: column;
-    }
-
-    [data-slot='marquee'][data-direction='vertical'] > div {
-      flex-direction: column;
-      animation-name: marquee-vertical;
-    }
-
-    [data-slot='marquee'][data-reverse] > div {
-      animation-direction: reverse;
-    }
-
-    [data-slot='marquee'][data-pause-on-hover]:hover > div {
-      animation-play-state: paused;
-    }
-
-    @keyframes marquee {
-      from {
-        transform: translateX(0);
-      }
-      to {
-        transform: translateX(calc(-100% - var(--gap)));
-      }
-    }
-
-    @keyframes marquee-vertical {
-      from {
-        transform: translateY(0);
-      }
-      to {
-        transform: translateY(calc(-100% - var(--gap)));
-      }
-    }
-  `,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScMarquee {
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly direction = input<'horizontal' | 'vertical'>('horizontal');
-  readonly duration = input<number>(40);
-  readonly gap = input<number>(16);
-  readonly pauseOnHover = input<boolean>(true);
-  readonly reverse = input<boolean>(false);
-
-  protected readonly class = computed(() => cn(this.classInput()));
-
-  protected readonly innerClass = computed(() =>
-    cn('flex shrink-0 items-center justify-around'),
-  );
-}