@semantic-components/ui-lab 0.63.0 → 0.65.0

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

@@ -1,80 +0,0 @@
-# Breadcrumb
-
-Displays the path to the current resource using a hierarchy of links.
-
-## Components
-
-- `ScBreadcrumb` - Root nav element with aria-label
-- `ScBreadcrumbList` - Ordered list container
-- `ScBreadcrumbItem` - Individual item wrapper
-- `ScBreadcrumbLink` - Clickable link to a page
-- `ScBreadcrumbPage` - Current page (non-clickable)
-- `ScBreadcrumbSeparator` - Visual separator between items
-- `ScBreadcrumbEllipsis` - Collapsed items indicator
-
-## Usage
-
-```html
-<nav sc-breadcrumb>
-  <ol sc-breadcrumb-list>
-    <li sc-breadcrumb-item>
-      <a sc-breadcrumb-link href="/">Home</a>
-    </li>
-    <li sc-breadcrumb-separator></li>
-    <li sc-breadcrumb-item>
-      <a sc-breadcrumb-link href="/components">Components</a>
-    </li>
-    <li sc-breadcrumb-separator></li>
-    <li sc-breadcrumb-item>
-      <span sc-breadcrumb-page>Breadcrumb</span>
-    </li>
-  </ol>
-</nav>
-```
-
-## With Ellipsis
-
-For long paths, use the ellipsis to indicate collapsed items:
-
-```html
-<nav sc-breadcrumb>
-  <ol sc-breadcrumb-list>
-    <li sc-breadcrumb-item>
-      <a sc-breadcrumb-link href="/">Home</a>
-    </li>
-    <li sc-breadcrumb-separator></li>
-    <li sc-breadcrumb-item>
-      <span sc-breadcrumb-ellipsis></span>
-    </li>
-    <li sc-breadcrumb-separator></li>
-    <li sc-breadcrumb-item>
-      <span sc-breadcrumb-page>Current Page</span>
-    </li>
-  </ol>
-</nav>
-```
-
-## Custom Separator
-
-Pass content to the separator to customize it:
-
-```html
-<li sc-breadcrumb-separator>/</li>
-```
-
-## With RouterLink
-
-Use Angular's routerLink for navigation:
-
-```html
-<li sc-breadcrumb-item>
-  <a sc-breadcrumb-link routerLink="/components">Components</a>
-</li>
-```
-
-## Accessibility
-
-- Uses semantic `<nav>` element with `aria-label="breadcrumb"`
-- Uses `<ol>` for ordered list semantics
-- Current page marked with `aria-current="page"`
-- Separators are hidden from assistive technology with `aria-hidden="true"`

package/src/lib/components/breadcrumb/breadcrumb-ellipsis.ts

@@ -1,46 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Component({
-  selector: 'span[sc-breadcrumb-ellipsis]',
-  host: {
-    'data-slot': 'breadcrumb-ellipsis',
-    role: 'presentation',
-    'aria-hidden': 'true',
-    '[class]': 'class()',
-  },
-  template: `
-    <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-4"
-    >
-      <circle cx="12" cy="12" r="1" />
-      <circle cx="19" cy="12" r="1" />
-      <circle cx="5" cy="12" r="1" />
-    </svg>
-    <span class="sr-only">More</span>
-  `,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScBreadcrumbEllipsis {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('flex size-9 items-center justify-center', this.classInput()),
-  );
-}

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

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

package/src/lib/components/breadcrumb/breadcrumb-link.ts

@@ -1,17 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: 'a[sc-breadcrumb-link]',
-  host: {
-    'data-slot': 'breadcrumb-link',
-    '[class]': 'class()',
-  },
-})
-export class ScBreadcrumbLink {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('transition-colors hover:text-foreground', this.classInput()),
-  );
-}

package/src/lib/components/breadcrumb/breadcrumb-list.ts

@@ -1,20 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: 'ol[sc-breadcrumb-list]',
-  host: {
-    'data-slot': 'breadcrumb-list',
-    '[class]': 'class()',
-  },
-})
-export class ScBreadcrumbList {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
-      this.classInput(),
-    ),
-  );
-}

package/src/lib/components/breadcrumb/breadcrumb-page.ts

@@ -1,20 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: 'span[sc-breadcrumb-page]',
-  host: {
-    'data-slot': 'breadcrumb-page',
-    role: 'link',
-    'aria-disabled': 'true',
-    'aria-current': 'page',
-    '[class]': 'class()',
-  },
-})
-export class ScBreadcrumbPage {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('font-normal text-foreground', this.classInput()),
-  );
-}

package/src/lib/components/breadcrumb/breadcrumb-separator.ts

@@ -1,45 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Component({
-  selector: 'li[sc-breadcrumb-separator]',
-  host: {
-    'data-slot': 'breadcrumb-separator',
-    role: 'presentation',
-    'aria-hidden': 'true',
-    '[class]': 'class()',
-  },
-  template: `
-    <ng-content>
-      <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-3.5"
-      >
-        <path d="m9 18 6-6-6-6" />
-      </svg>
-    </ng-content>
-  `,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScBreadcrumbSeparator {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn('[&>svg]:size-3.5', this.classInput()),
-  );
-}

package/src/lib/components/breadcrumb/breadcrumb.ts

@@ -1,10 +0,0 @@
-import { Directive } from '@angular/core';
-
-@Directive({
-  selector: 'nav[sc-breadcrumb]',
-  host: {
-    'data-slot': 'breadcrumb',
-    'aria-label': 'breadcrumb',
-  },
-})
-export class ScBreadcrumb {}

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

@@ -1,7 +0,0 @@
-export * from './breadcrumb';
-export * from './breadcrumb-list';
-export * from './breadcrumb-item';
-export * from './breadcrumb-link';
-export * from './breadcrumb-page';
-export * from './breadcrumb-separator';
-export * from './breadcrumb-ellipsis';

package/src/lib/components/button-group/button-group-separator.ts

@@ -1,26 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-export type ButtonGroupSeparatorOrientation = 'horizontal' | 'vertical';
-
-@Directive({
-  selector: 'div[sc-button-group-separator]',
-  host: {
-    'data-slot': 'button-group-separator',
-    role: 'separator',
-    '[attr.aria-orientation]': 'orientation()',
-    '[attr.data-orientation]': 'orientation()',
-    '[class]': 'class()',
-  },
-})
-export class ScButtonGroupSeparator {
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly orientation = input<ButtonGroupSeparatorOrientation>('vertical');
-
-  protected readonly class = computed(() =>
-    cn(
-      'bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto',
-      this.classInput(),
-    ),
-  );
-}

package/src/lib/components/button-group/button-group-text.ts

@@ -1,20 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Directive({
-  selector: 'div[sc-button-group-text]',
-  host: {
-    'data-slot': 'button-group-text',
-    '[class]': 'class()',
-  },
-})
-export class ScButtonGroupText {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      "bg-muted gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
-      this.classInput(),
-    ),
-  );
-}

package/src/lib/components/button-group/button-group.ts

@@ -1,43 +0,0 @@
-import { computed, Directive, input } from '@angular/core';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '@semantic-components/ui';
-
-export const buttonGroupVariants = cva(
-  "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
-  {
-    variants: {
-      orientation: {
-        horizontal:
-          '[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none',
-        vertical:
-          '[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none',
-      },
-    },
-    defaultVariants: {
-      orientation: 'horizontal',
-    },
-  },
-);
-
-export type ScButtonGroupVariants = VariantProps<typeof buttonGroupVariants>;
-
-@Directive({
-  selector: 'div[sc-button-group]',
-  host: {
-    'data-slot': 'button-group',
-    role: 'group',
-    '[class]': 'class()',
-  },
-})
-export class ScButtonGroup {
-  readonly classInput = input<string>('', { alias: 'class' });
-  readonly orientation =
-    input<ScButtonGroupVariants['orientation']>('horizontal');
-
-  protected readonly class = computed(() =>
-    cn(
-      buttonGroupVariants({ orientation: this.orientation() }),
-      this.classInput(),
-    ),
-  );
-}

package/src/lib/components/button-group/index.ts

@@ -1,10 +0,0 @@
-export {
-  ScButtonGroup,
-  buttonGroupVariants,
-  type ScButtonGroupVariants,
-} from './button-group';
-export { ScButtonGroupText } from './button-group-text';
-export {
-  ScButtonGroupSeparator,
-  type ButtonGroupSeparatorOrientation,
-} from './button-group-separator';