@kouji-ui/components 0.1.1 → 0.1.2

package/src/icon/_examples/icon.gallery.example.ts

@@ -1,199 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ViewEncapsulation,
-  computed,
-  signal,
-} from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { KjIconDirective } from '@kouji-ui/core';
-import { KjInputComponent } from '../../input/input';
-import { KjButtonComponent } from '../../button/button';
-import { LUCIDE_ICON_NAMES } from '../lucide/icon-names';
-
-/**
- * Lucide icon gallery with a live substring filter. Each tile renders the icon
- * via the `kjIcon` directive, which goes through the lazy loader registered by
- * `provideLucideLoader()` — only icons currently mounted in the DOM trigger a
- * dynamic per-icon `import()`. Click a tile to copy its `<i kjIcon="…">`
- * snippet to the clipboard.
- */
-@Component({
-  selector: 'kj-icon-gallery-example',
-  standalone: true,
-  imports: [FormsModule, KjIconDirective, KjInputComponent, KjButtonComponent],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  encapsulation: ViewEncapsulation.None,
-  styles: [`
-    kj-icon-gallery-example {
-      display: block; }
-    kj-icon-gallery-example .gallery-header {
-      display: flex;
-      flex-direction: column;
-      gap: var(--kj-space-sm);
-      margin-bottom: var(--kj-space-lg);
-    }
-    kj-icon-gallery-example .gallery-title {
-      display: flex;
-      align-items: baseline;
-      justify-content: space-between;
-      gap: var(--kj-space-md);
-      flex-wrap: wrap;
-    }
-    kj-icon-gallery-example .gallery-title h3 {
-      margin: 0;
-      font-size: var(--kj-font-size-lg, 1.125rem);
-      font-weight: 600;
-      color: var(--kj-fg-default, currentColor);
-    }
-    kj-icon-gallery-example .gallery-count {
-      font-size: var(--kj-font-size-sm, 0.875rem);
-      color: var(--kj-fg-muted, currentColor);
-      font-variant-numeric: tabular-nums;
-    }
-    kj-icon-gallery-example .gallery-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-      gap: var(--kj-space-md);
-    }
-    kj-icon-gallery-example .gallery-tile {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: var(--kj-space-xs);
-      min-height: 88px;
-      padding: var(--kj-space-md);
-      border: 1px solid var(--kj-border-default, rgba(0, 0, 0, 0.12));
-      border-radius: var(--kj-radius-md, 8px);
-      background: var(--kj-bg-body, transparent);
-      color: inherit;
-      font: inherit;
-      cursor: pointer;
-      transition: background-color 120ms ease, border-color 120ms ease;
-    }
-    kj-icon-gallery-example .gallery-tile:hover,
-    kj-icon-gallery-example .gallery-tile:focus-visible {
-      background: var(--kj-bg-surface, rgba(0, 0, 0, 0.04));
-      border-color: var(--kj-border-default, rgba(0, 0, 0, 0.24));
-      outline: none;
-    }
-    kj-icon-gallery-example .gallery-tile:focus-visible {
-      box-shadow: 0 0 0 2px var(--kj-bg-primary, #5b8def);
-    }
-    kj-icon-gallery-example .gallery-tile i.kj-icon {
-      font-size: 24px;
-    }
-    kj-icon-gallery-example .gallery-tile .name {
-      font-size: 11px;
-      letter-spacing: 0.04em;
-      text-transform: lowercase;
-      color: var(--kj-fg-muted, currentColor);
-      word-break: break-all;
-      text-align: center;
-      line-height: 1.2;
-    }
-    kj-icon-gallery-example .gallery-empty { text-align: center;
-      color: var(--kj-fg-muted, currentColor);
-      border: 1px dashed var(--kj-border-default, rgba(0, 0, 0, 0.12));
-      border-radius: var(--kj-radius-md, 8px);
-    }
-    kj-icon-gallery-example .visually-hidden {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      padding: 0;
-      margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      white-space: nowrap;
-      border: 0;
-    }
-  `],
-  template: `
-    <header class="gallery-header">
-      <div class="gallery-title">
-        <h3 id="kj-icon-gallery-heading">Lucide icons</h3>
-        <span class="gallery-count" aria-live="polite">
-          {{ filtered().length }} of {{ total }} shown
-        </span>
-      </div>
-      <label class="visually-hidden" for="kj-icon-gallery-search">
-        Search icons by name
-      </label>
-      <kj-input
-        id="kj-icon-gallery-search"
-        type="search"
-        placeholder="Search icons..."
-        aria-label="Search icons by name"
-        [ngModel]="query()"
-        (ngModelChange)="query.set($event)"
-      />
-    </header>
-
-    @if (filtered().length === 0) {
-      <p class="gallery-empty" role="status">
-        No icons match &ldquo;{{ query() }}&rdquo;.
-      </p>
-    } @else {
-      <ul
-        class="gallery-grid"
-        role="list"
-        aria-labelledby="kj-icon-gallery-heading"
-      >
-        @for (name of filtered(); track name) {
-          <li>
-            <kj-button
-              kjVariant="ghost"
-              class="gallery-tile"
-              [attr.aria-label]="'Copy icon snippet for ' + name"
-              (click)="copy(name)"
-            >
-              <i [kjIcon]="name"></i>
-              <span class="name">{{ name }}</span>
-            </kj-button>
-          </li>
-        }
-      </ul>
-    }
-
-    <div class="visually-hidden" role="status" aria-live="polite">
-      {{ announcement() }}
-    </div>
-  `,
-})
-export class KjIconGalleryExample {
-  protected readonly total = LUCIDE_ICON_NAMES.length;
-  protected readonly query = signal('');
-  protected readonly announcement = signal('');
-
-  protected readonly filtered = computed(() => {
-    const q = this.query().trim().toLowerCase();
-    if (!q) return LUCIDE_ICON_NAMES;
-    return LUCIDE_ICON_NAMES.filter((name) => name.toLowerCase().includes(q));
-  });
-
-  protected async copy(name: string): Promise<void> {
-    const snippet = `<i kjIcon="${name}"></i>`;
-    try {
-      // `navigator.clipboard` is unavailable in non-secure contexts (e.g. SSR);
-      // fall back silently to a textarea so the example still works locally.
-      if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
-        await navigator.clipboard.writeText(snippet);
-      } else if (typeof document !== 'undefined') {
-        const ta = document.createElement('textarea');
-        ta.value = snippet;
-        ta.setAttribute('readonly', '');
-        ta.style.position = 'fixed';
-        ta.style.opacity = '0';
-        document.body.appendChild(ta);
-        ta.select();
-        document.execCommand('copy');
-        document.body.removeChild(ta);
-      }
-      this.announcement.set(`Copied snippet for ${name}`);
-    } catch {
-      this.announcement.set(`Could not copy snippet for ${name}`);
-    }
-  }
-}

package/src/icon/_examples/icon.usage.example.ts

@@ -1,46 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { KjIconDirective } from '@kouji-ui/core';
-
-/**
- * Common icon usages — decorative inline, meaningful with a label, size
- * tokens, and semantic color tokens. Copy-paste starting point.
- */
-@Component({
-  selector: 'kj-icon-usage-example',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [KjIconDirective],
-  styles: [`
-    :host { display: flex; flex-direction: column; gap: var(--kj-space-md); }
-    .row { display: flex; gap: var(--kj-space-md); align-items: center; flex-wrap: wrap; }
-    code { font: var(--kj-text-sm)/1 var(--kj-font-mono); color: var(--kj-fg-muted); }
-  `],
-  template: `
-    <div class="row">
-      <i kjIcon="search"></i>
-      <span>Decorative — silent for AT, inherits text color</span>
-    </div>
-
-    <div class="row">
-      <i kjIcon="alert-triangle" kjIconLabel="Warning"></i>
-      <span>Meaningful — exposed as <code>role="img"</code> with a label</span>
-    </div>
-
-    <div class="row">
-      <i kjIcon="circle" kjIconSize="xs"></i>
-      <i kjIcon="circle" kjIconSize="sm"></i>
-      <i kjIcon="circle" kjIconSize="md"></i>
-      <i kjIcon="circle" kjIconSize="lg"></i>
-      <i kjIcon="circle" kjIconSize="xl"></i>
-    </div>
-
-    <div class="row">
-      <i kjIcon="check" kjIconColor="success"></i>
-      <i kjIcon="info" kjIconColor="info"></i>
-      <i kjIcon="alert-triangle" kjIconColor="warning"></i>
-      <i kjIcon="x-circle" kjIconColor="danger"></i>
-      <i kjIcon="circle" kjIconColor="muted"></i>
-    </div>
-  `,
-})
-export class KjIconUsageExample {}

package/src/icon/_examples/index.ts

@@ -1,4 +0,0 @@
-// AUTO-GENERATED by scripts/migrate-examples.mjs (manually augmented)
-// One barrel per component folder — used by the docs app as a lazy chunk.
-export { KjIconGalleryExample } from './icon.gallery.example';
-export { KjIconUsageExample } from './icon.usage.example';

package/src/icon/icon.playground.ts

@@ -1,63 +0,0 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { KjIconDirective, type KjIconColor, type KjIconSize } from '@kouji-ui/core';
-import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
-
-/**
- * Playground state — module-scope signals. `provideLucideIcons` is a
- * function (no class to mount), so the live stage hosts a single `<span>`
- * wearing the `[kjIcon]` directive. Knobs let users pick any icon name,
- * the size token, and a semantic color.
- */
-const name = signal('check');
-const size = signal<KjIconSize>('md');
-const color = signal<KjIconColor | 'inherit'>('inherit');
-const label = signal('');
-
-@Component({
-  selector: 'kj-icon-playground',
-  standalone: true,
-  imports: [KjIconDirective],
-  template: `
-    <span
-      [kjIcon]="name()"
-      [kjIconSize]="size()"
-      [kjIconColor]="color() === 'inherit' ? null : color()"
-      [kjIconLabel]="label() || null"
-    ></span>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjIconPlaygroundDemo {
-  protected readonly name = name;
-  protected readonly size = size;
-  protected readonly color = color;
-  protected readonly label = label;
-}
-
-export const PLAYGROUND: PlaygroundFile = {
-  component: KjIconPlaygroundDemo,
-  state: {
-    name: name as unknown as ReturnType<typeof signal>,
-    size: size as unknown as ReturnType<typeof signal>,
-    color: color as unknown as ReturnType<typeof signal>,
-    label: label as unknown as ReturnType<typeof signal>,
-  },
-  controls: [
-    { kind: 'text', name: 'name', label: 'name (lucide)', placeholder: 'check' },
-    { kind: 'chips', name: 'size', label: 'size', options: ['xs', 'sm', 'md', 'lg', 'xl'] },
-    {
-      kind: 'chips',
-      name: 'color',
-      label: 'color',
-      options: ['inherit', 'muted', 'primary', 'success', 'warning', 'danger', 'info'],
-    },
-    { kind: 'text', name: 'label', label: 'aria-label (meaningful)' },
-  ],
-  snippet: (values) => {
-    const s = values as { name: string; size: string; color: string; label: string };
-    const attrs: string[] = [`kjIcon="${s.name}"`, `kjIconSize="${s.size}"`];
-    if (s.color !== 'inherit') attrs.push(`kjIconColor="${s.color}"`);
-    if (s.label) attrs.push(`kjIconLabel="${s.label}"`);
-    return `<span\n  ${attrs.join('\n  ')}\n></span>`;
-  },
-};

package/src/icon/index.ts

@@ -1,5 +0,0 @@
-export * from './lucide/index';
-export {
-  KjIconGalleryExample,
-  KjIconUsageExample,
-} from './_examples';