@kouji-ui/components 0.1.1 → 0.1.2

package/src/empty-state/_examples/empty-state.example.ts

@@ -1,59 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import {
-  KjEmptyStateComponent,
-  KjEmptyStateIconComponent,
-  KjEmptyStateTitleComponent,
-  KjEmptyStateDescriptionComponent,
-  KjEmptyStateActionsComponent,
-} from '../empty-state';
-import { KjButtonComponent } from '../../button/button';
-
-/**
- * Default usage example for KjEmptyStateComponent — the never-populated case.
- * No `kjLive`: the page has just loaded and AT will read the content in flow.
- */
-@Component({
-  selector: 'kj-empty-state-example',
-  standalone: true,
-  imports: [
-    KjEmptyStateComponent,
-    KjEmptyStateIconComponent,
-    KjEmptyStateTitleComponent,
-    KjEmptyStateDescriptionComponent,
-    KjEmptyStateActionsComponent,
-    KjButtonComponent,
-  ],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-empty-state>
-      <kj-empty-state-icon aria-hidden="true">
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-        </svg>
-      </kj-empty-state-icon>
-      <kj-empty-state-title>No projects yet</kj-empty-state-title>
-      <kj-empty-state-description
-        >Create your first project to start collaborating with your
-        team.</kj-empty-state-description
-      >
-      <kj-empty-state-actions>
-        <kj-button kjVariant="primary">Create project</kj-button>
-      </kj-empty-state-actions>
-    </kj-empty-state>
-  `,
-})
-export class KjEmptyStateExample {}

package/src/empty-state/_examples/empty-state.search.example.ts

@@ -1,82 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import {
-  KjEmptyStateComponent,
-  KjEmptyStateIconComponent,
-  KjEmptyStateTitleComponent,
-  KjEmptyStateDescriptionComponent,
-  KjEmptyStateActionsComponent,
-} from '../empty-state';
-import { KjButtonComponent } from '../../button/button';
-
-/**
- * Search-no-results case. `kjLive="polite"` + neutral variant → host
- * gains `role="status"`; AT announces the result politely without
- * stealing focus. This is the central use case for the live region —
- * the result set just collapsed in response to user typing, so the
- * user needs to be told even if focus is still inside the input.
- */
-@Component({
-  selector: 'kj-empty-state-search-example',
-  standalone: true,
-  imports: [
-    KjEmptyStateComponent,
-    KjEmptyStateIconComponent,
-    KjEmptyStateTitleComponent,
-    KjEmptyStateDescriptionComponent,
-    KjEmptyStateActionsComponent,
-    KjButtonComponent,
-  ],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-      .search {
-        display: flex;
-        flex-direction: column;
-        gap: var(--kj-space-md);
-      }
-      input {
-        padding: var(--kj-space-sm) var(--kj-space-md);
-        border: 1px solid var(--kj-border-default);
-        border-radius: var(--kj-radius-field, 0.5rem);
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <div class="search">
-      <input
-        type="search"
-        [value]="query()"
-        (input)="query.set($any($event.target).value)"
-        placeholder="Search…"
-      />
-      <kj-empty-state kjLive="polite">
-        <kj-empty-state-icon>
-          <svg
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="1.5"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <circle cx="11" cy="11" r="7" />
-            <path d="m20 20-3.5-3.5" />
-          </svg>
-        </kj-empty-state-icon>
-        <kj-empty-state-title>No results match "{{ query() || 'octopus' }}"</kj-empty-state-title>
-        <kj-empty-state-description
-          >Try adjusting your search or clearing filters.</kj-empty-state-description
-        >
-        <kj-empty-state-actions>
-          <kj-button kjVariant="ghost" (click)="query.set('')">Clear search</kj-button>
-        </kj-empty-state-actions>
-      </kj-empty-state>
-    </div>
-  `,
-})
-export class KjEmptyStateSearchExample {
-  readonly query = signal('octopus');
-}

package/src/empty-state/_examples/empty-state.sizes.example.ts

@@ -1,76 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import {
-  KjEmptyStateComponent,
-  KjEmptyStateIconComponent,
-  KjEmptyStateTitleComponent,
-  KjEmptyStateDescriptionComponent,
-  KjEmptyStateActionsComponent,
-} from '../empty-state';
-import { KjButtonComponent } from '../../button/button';
-
-/**
- * The three size presets stacked. `sm` fits inside a card body; `md` is
- * the default section-replacement size; `lg` is the full-route empty.
- */
-@Component({
-  selector: 'kj-empty-state-sizes-example',
-  standalone: true,
-  imports: [
-    KjEmptyStateComponent,
-    KjEmptyStateIconComponent,
-    KjEmptyStateTitleComponent,
-    KjEmptyStateDescriptionComponent,
-    KjEmptyStateActionsComponent,
-    KjButtonComponent,
-  ],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-      .stack {
-        display: grid;
-        gap: var(--kj-space-lg);
-      }
-      .stack > kj-empty-state {
-        border-radius: var(--kj-radius-box);
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <div class="stack">
-      <kj-empty-state kjSize="sm">
-        <kj-empty-state-title>Small — inline</kj-empty-state-title>
-        <kj-empty-state-description
-          >Compact placeholder for cards or sidebar slots.</kj-empty-state-description
-        >
-        <kj-empty-state-actions>
-          <kj-button kjSize="sm">Add item</kj-button>
-        </kj-empty-state-actions>
-      </kj-empty-state>
-
-      <kj-empty-state kjSize="md">
-        <kj-empty-state-title>Medium — section default</kj-empty-state-title>
-        <kj-empty-state-description
-          >The standard placement for an empty list, feed, or panel.</kj-empty-state-description
-        >
-        <kj-empty-state-actions>
-          <kj-button>Add item</kj-button>
-        </kj-empty-state-actions>
-      </kj-empty-state>
-
-      <kj-empty-state kjSize="lg">
-        <kj-empty-state-title>Large — full page</kj-empty-state-title>
-        <kj-empty-state-description
-          >For empty routes — inboxes, dashboards, anything that takes the whole content
-          area.</kj-empty-state-description
-        >
-        <kj-empty-state-actions>
-          <kj-button kjSize="lg">Get started</kj-button>
-        </kj-empty-state-actions>
-      </kj-empty-state>
-    </div>
-  `,
-})
-export class KjEmptyStateSizesExample {}

package/src/empty-state/_examples/empty-state.usage.example.ts

@@ -1,66 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import {
-  KjEmptyStateComponent,
-  KjEmptyStateIconComponent,
-  KjEmptyStateTitleComponent,
-  KjEmptyStateDescriptionComponent,
-  KjEmptyStateActionsComponent,
-} from '../empty-state';
-import { KjButtonComponent } from '../../button/button';
-
-/**
- * A walkthrough of the most common empty-state usages — never-populated
- * neutral, search-no-results live-region neutral, and an error variant.
- */
-@Component({
-  selector: 'kj-empty-state-usage-example',
-  standalone: true,
-  imports: [
-    KjEmptyStateComponent,
-    KjEmptyStateIconComponent,
-    KjEmptyStateTitleComponent,
-    KjEmptyStateDescriptionComponent,
-    KjEmptyStateActionsComponent,
-    KjButtonComponent,
-  ],
-  styles: [
-    `
-      :host {
-        display: flex;
-        flex-direction: column;
-        gap: var(--kj-space-lg);
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-empty-state>
-      <kj-empty-state-icon>📁</kj-empty-state-icon>
-      <kj-empty-state-title>No projects yet</kj-empty-state-title>
-      <kj-empty-state-description
-        >Create your first project to get started.</kj-empty-state-description
-      >
-      <kj-empty-state-actions>
-        <kj-button kjVariant="default">Create project</kj-button>
-      </kj-empty-state-actions>
-    </kj-empty-state>
-
-    <kj-empty-state kjLive="polite">
-      <kj-empty-state-icon>🔍</kj-empty-state-icon>
-      <kj-empty-state-title>No results for "kouji"</kj-empty-state-title>
-      <kj-empty-state-description
-        >Try a different query or clear the filters.</kj-empty-state-description
-      >
-    </kj-empty-state>
-
-    <kj-empty-state kjVariant="error" kjLive="assertive">
-      <kj-empty-state-icon>⚠</kj-empty-state-icon>
-      <kj-empty-state-title>Could not load projects</kj-empty-state-title>
-      <kj-empty-state-description>Check your connection and try again.</kj-empty-state-description>
-      <kj-empty-state-actions>
-        <kj-button kjVariant="outline">Retry</kj-button>
-      </kj-empty-state-actions>
-    </kj-empty-state>
-  `,
-})
-export class KjEmptyStateUsageExample {}

package/src/empty-state/_examples/empty-state.with-actions.example.ts

@@ -1,68 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import {
-  KjEmptyStateComponent,
-  KjEmptyStateIconComponent,
-  KjEmptyStateTitleComponent,
-  KjEmptyStateDescriptionComponent,
-  KjEmptyStateActionsComponent,
-} from '../empty-state';
-import { KjButtonComponent } from '../../button/button';
-
-/**
- * Primary action with an optional secondary row. Project secondary
- * affordances ("Learn more", "Contact support") via the `[secondary]`
- * attribute selector — they render in a smaller row beneath the
- * primary buttons.
- */
-@Component({
-  selector: 'kj-empty-state-with-actions-example',
-  standalone: true,
-  imports: [
-    KjEmptyStateComponent,
-    KjEmptyStateIconComponent,
-    KjEmptyStateTitleComponent,
-    KjEmptyStateDescriptionComponent,
-    KjEmptyStateActionsComponent,
-    KjButtonComponent,
-  ],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-      a {
-        color: var(--kj-bg-primary, #2563eb);
-        text-decoration: underline;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-empty-state>
-      <kj-empty-state-icon>
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="1.5"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <path d="M12 2v20" />
-          <path d="M2 12h20" />
-        </svg>
-      </kj-empty-state-icon>
-      <kj-empty-state-title>Start a new workspace</kj-empty-state-title>
-      <kj-empty-state-description
-        >Workspaces let you separate clients, products, or environments.</kj-empty-state-description
-      >
-      <kj-empty-state-actions kjHasSecondary>
-        <kj-button kjVariant="primary">Create workspace</kj-button>
-        <kj-button kjVariant="ghost">Import existing</kj-button>
-        <a secondary href="#">Learn more</a>
-        <a secondary href="#">Contact support</a>
-      </kj-empty-state-actions>
-    </kj-empty-state>
-  `,
-})
-export class KjEmptyStateWithActionsExample {}

package/src/empty-state/_examples/index.ts

@@ -1,8 +0,0 @@
-// AUTO-GENERATED by scripts/migrate-examples.mjs
-// One barrel per component folder — used by the docs app as a lazy chunk.
-export { KjEmptyStateErrorExample } from './empty-state.error.example';
-export { KjEmptyStateExample } from './empty-state.example';
-export { KjEmptyStateSearchExample } from './empty-state.search.example';
-export { KjEmptyStateSizesExample } from './empty-state.sizes.example';
-export { KjEmptyStateUsageExample } from './empty-state.usage.example';
-export { KjEmptyStateWithActionsExample } from './empty-state.with-actions.example';

package/src/empty-state/empty-state.css

@@ -1,114 +0,0 @@
-/* ─────────────────────────────────────────────────────────────
-   .kj-empty-state — components-only family
-   ──────────────────────────────────────────────────────────── */
-
-@layer kj.component {
-  .kj-empty-state {
-    --kj-empty-state-bg:        transparent;
-    --kj-empty-state-fg:        var(--kj-fg-default);
-    --kj-empty-state-muted-fg:  var(--kj-fg-muted);
-    --kj-empty-state-accent:    var(--kj-border-default);
-    --kj-empty-state-padding-y: var(--kj-space-2xl, 2rem);
-    --kj-empty-state-padding-x: var(--kj-space-xl,  1.5rem);
-    --kj-empty-state-gap:       var(--kj-space-md,  0.75rem);
-    --kj-empty-state-icon-size: 3rem;
-    --kj-empty-state-title-size: 1.125rem;
-    --kj-empty-state-desc-size:  0.9375rem;
-    --kj-empty-state-max-width:  32rem;
-
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-    gap: var(--kj-empty-state-gap);
-    padding: var(--kj-empty-state-padding-y) var(--kj-empty-state-padding-x);
-    background: var(--kj-empty-state-bg);
-    color: var(--kj-empty-state-fg);
-  }
-
-  .kj-empty-state[data-size="sm"] {
-    --kj-empty-state-padding-y: var(--kj-space-lg, 1rem);
-    --kj-empty-state-padding-x: var(--kj-space-md, 0.75rem);
-    --kj-empty-state-gap: var(--kj-space-sm, 0.5rem);
-    --kj-empty-state-icon-size: 2rem;
-    --kj-empty-state-title-size: 1rem;
-    --kj-empty-state-desc-size:  0.875rem;
-  }
-
-  .kj-empty-state[data-size="lg"] {
-    --kj-empty-state-padding-y: var(--kj-space-3xl, 3rem);
-    --kj-empty-state-padding-x: var(--kj-space-2xl, 2rem);
-    --kj-empty-state-gap: var(--kj-space-lg, 1rem);
-    --kj-empty-state-icon-size: 4.5rem;
-    --kj-empty-state-title-size: 1.5rem;
-    --kj-empty-state-desc-size:  1rem;
-  }
-
-  .kj-empty-state[data-variant="error"] {
-    --kj-empty-state-accent: var(--kj-fg-danger, #b91c1c);
-  }
-  .kj-empty-state[data-variant="error"] .kj-empty-state-icon {
-    color: var(--kj-empty-state-accent);
-  }
-
-  .kj-empty-state-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--kj-empty-state-icon-size);
-    height: var(--kj-empty-state-icon-size);
-    color: var(--kj-empty-state-muted-fg);
-    line-height: 1;
-  }
-  .kj-empty-state-icon svg,
-  .kj-empty-state-icon img {
-    width: 100%;
-    height: 100%;
-    display: block;
-  }
-
-  .kj-empty-state-title {
-    font: 600 var(--kj-empty-state-title-size) / 1.3 var(--kj-font-sans);
-    color: var(--kj-empty-state-fg);
-    margin: 0;
-    max-width: var(--kj-empty-state-max-width);
-  }
-
-  .kj-empty-state-description {
-    font: var(--kj-empty-state-desc-size) / 1.5 var(--kj-font-sans);
-    color: var(--kj-empty-state-muted-fg);
-    margin: 0;
-    max-width: var(--kj-empty-state-max-width);
-  }
-
-  .kj-empty-state-actions {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--kj-space-sm, 0.5rem);
-    margin-top: var(--kj-space-sm, 0.5rem);
-  }
-
-  .kj-empty-state-actions__primary {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--kj-space-sm, 0.5rem);
-    flex-wrap: wrap;
-  }
-
-  .kj-empty-state-actions__secondary {
-    display: none;
-    align-items: center;
-    justify-content: center;
-    gap: var(--kj-space-sm, 0.5rem);
-    font-size: 0.8125rem;
-    color: var(--kj-empty-state-muted-fg);
-  }
-
-  .kj-empty-state-actions[data-has-secondary] .kj-empty-state-actions__secondary,
-  .kj-empty-state-actions:has(.kj-empty-state-actions__secondary > *) .kj-empty-state-actions__secondary {
-    display: flex;
-  }
-}

package/src/empty-state/empty-state.playground.ts

@@ -1,87 +0,0 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import {
-  KjEmptyStateComponent,
-  KjEmptyStateTitleComponent,
-  KjEmptyStateDescriptionComponent,
-  KjEmptyStateActionsComponent,
-} from './empty-state';
-import { KjButtonComponent } from '../button/button';
-import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
-
-/**
- * Playground state — module-scope signals. Knobs cover the tonal variant,
- * title text, an optional description, and a primary-action toggle so the
- * actions slot can be exercised.
- */
-const variant = signal<'neutral' | 'error'>('neutral');
-const title = signal('No projects yet');
-const description = signal('Create your first project to get started.');
-const showAction = signal(true);
-
-@Component({
-  selector: 'kj-empty-state-playground',
-  standalone: true,
-  imports: [
-    KjEmptyStateComponent,
-    KjEmptyStateTitleComponent,
-    KjEmptyStateDescriptionComponent,
-    KjEmptyStateActionsComponent,
-    KjButtonComponent,
-  ],
-  template: `
-    <kj-empty-state [kjVariant]="variant()">
-      <kj-empty-state-title>{{ title() }}</kj-empty-state-title>
-      @if (description()) {
-        <kj-empty-state-description>{{ description() }}</kj-empty-state-description>
-      }
-      @if (showAction()) {
-        <kj-empty-state-actions>
-          <kj-button kjVariant="default">Create project</kj-button>
-        </kj-empty-state-actions>
-      }
-    </kj-empty-state>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjEmptyStatePlaygroundDemo {
-  protected readonly variant = variant;
-  protected readonly title = title;
-  protected readonly description = description;
-  protected readonly showAction = showAction;
-}
-
-export const PLAYGROUND: PlaygroundFile = {
-  component: KjEmptyStatePlaygroundDemo,
-  state: {
-    variant: variant as unknown as ReturnType<typeof signal>,
-    title: title as unknown as ReturnType<typeof signal>,
-    description: description as unknown as ReturnType<typeof signal>,
-    showAction: showAction as unknown as ReturnType<typeof signal>,
-  },
-  controls: [
-    { kind: 'chips', name: 'variant', label: 'variant', options: ['neutral', 'error'] },
-    { kind: 'text', name: 'title', label: 'title' },
-    { kind: 'text', name: 'description', label: 'description' },
-    { kind: 'toggle', name: 'showAction', label: 'show action' },
-  ],
-  snippet: (values) => {
-    const s = values as {
-      variant: string;
-      title: string;
-      description: string;
-      showAction: boolean;
-    };
-    const lines: string[] = [`<kj-empty-state kjVariant="${s.variant}">`];
-    lines.push(`  <kj-empty-state-title>${s.title}</kj-empty-state-title>`);
-    if (s.description) {
-      lines.push(`  <kj-empty-state-description>${s.description}</kj-empty-state-description>`);
-    }
-    if (s.showAction) {
-      lines.push('  <kj-empty-state-actions>');
-      lines.push('    <kj-button kjVariant="default">Create project</kj-button>');
-      lines.push('  </kj-empty-state-actions>');
-    }
-    lines.push('</kj-empty-state>');
-    return lines.join('\n');
-  },
-};