@kouji-ui/components 0.1.1 → 0.1.2

package/src/card/_examples/card.cover.example.ts

@@ -1,53 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import {
-  KjCardComponent,
-  KjCardCoverComponent,
-  KjCardHeaderComponent,
-  KjCardTitleComponent,
-  KjCardSubtitleComponent,
-  KjCardContentComponent,
-  KjCardFooterComponent,
-} from '../card';
-import { KjButtonComponent } from '../../button/button';
-
-@Component({
-  selector: 'kj-card-cover-example',
-  standalone: true,
-  imports: [
-    KjCardComponent,
-    KjCardCoverComponent,
-    KjCardHeaderComponent,
-    KjCardTitleComponent,
-    KjCardSubtitleComponent,
-    KjCardContentComponent,
-    KjCardFooterComponent,
-    KjButtonComponent,
-  ],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-card style="max-width: 16rem;">
-      <kj-card-cover fit="contain">
-        <img
-          src="https://images.unsplash.com/photo-1508921912186-1d1a45ebb3c1?w=480&fit=crop"
-          alt="Mountains"
-        />
-      </kj-card-cover>
-      <kj-card-header>
-        <kj-card-title>Mountain trip</kj-card-title>
-        <kj-card-subtitle>March 2024</kj-card-subtitle>
-      </kj-card-header>
-      <kj-card-content>Three days in the alps with the team.</kj-card-content>
-      <kj-card-footer>
-        <kj-button>View</kj-button>
-      </kj-card-footer>
-    </kj-card>
-  `,
-})
-export class KjCardCoverExample {}

package/src/card/_examples/card.example.ts

@@ -1,27 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { KjCardComponent } from '../card';
-
-/**
- * Default usage example for KjCardComponent.
- * Rendered live in the docs and as code in the example panel.
- */
-@Component({
-  selector: 'kj-card-example',
-  standalone: true,
-  imports: [KjCardComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<kj-card variant="default"
-    ><strong>Card title</strong>
-    <p style="margin: var(--kj-space-sm) 0 0; color: var(--kj-fg-muted);">
-      Body content goes here. Cards group related information.
-    </p></kj-card
-  >`,
-})
-export class KjCardExample {}

package/src/card/_examples/card.full.example.ts

@@ -1,51 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import {
-  KjCardComponent,
-  KjCardHeaderComponent,
-  KjCardTitleComponent,
-  KjCardSubtitleComponent,
-  KjCardContentComponent,
-  KjCardFooterComponent,
-} from '../card';
-import { KjButtonComponent } from '../../button/button';
-
-@Component({
-  selector: 'kj-card-full-example',
-  standalone: true,
-  imports: [
-    KjCardComponent,
-    KjCardHeaderComponent,
-    KjCardTitleComponent,
-    KjCardSubtitleComponent,
-    KjCardContentComponent,
-    KjCardFooterComponent,
-    KjButtonComponent,
-  ],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-card style="max-width: 24rem;">
-      <kj-card-header>
-        <kj-card-title>Project Atlas</kj-card-title>
-        <kj-card-subtitle>Status: in progress</kj-card-subtitle>
-      </kj-card-header>
-      <kj-card-content>
-        <p>
-          Atlas is the planning tool used by the platform team. It supports drafts, comments, and
-          shared boards.
-        </p>
-      </kj-card-content>
-      <kj-card-footer>
-        <kj-button kjVariant="ghost">Dismiss</kj-button>
-        <kj-button>Open</kj-button>
-      </kj-card-footer>
-    </kj-card>
-  `,
-})
-export class KjCardFullExample {}

package/src/card/_examples/index.ts

@@ -1,5 +0,0 @@
-// AUTO-GENERATED by scripts/migrate-examples.mjs
-// One barrel per component folder — used by the docs app as a lazy chunk.
-export { KjCardCoverExample } from './card.cover.example';
-export { KjCardExample } from './card.example';
-export { KjCardFullExample } from './card.full.example';

package/src/card/card.css

@@ -1,120 +0,0 @@
-/* ─────────────────────────────────────────────────────────────
-   .kj-card — component-layer tokens + structural CSS
-   ──────────────────────────────────────────────────────────── */
-
-@layer kj.component {
-  .kj-card {
-    --kj-card-bg:           var(--kj-bg-surface);
-    --kj-card-fg:           var(--kj-fg-default);
-    --kj-card-border-color: transparent;
-    --kj-card-border-width: var(--kj-border);
-    --kj-card-radius:       var(--kj-radius-box);
-    --kj-card-padding-x:    var(--kj-space-xl);
-    --kj-card-padding-y:    var(--kj-space-xl);
-    --kj-card-shadow:       none;
-
-    display: block;
-    background: var(--kj-card-bg);
-    color: var(--kj-card-fg);
-    border: var(--kj-card-border-width) solid var(--kj-card-border-color);
-    border-radius: var(--kj-card-radius);
-    box-shadow: var(--kj-card-shadow);
-    overflow: hidden;
-    transition: var(--kj-transition);
-  }
-
-  /* When no sub-components are used, fall back to the padded wrapper for plain content. */
-  .kj-card:not(:has(.kj-card-header, .kj-card-content, .kj-card-footer, .kj-card-cover)) {
-    padding: var(--kj-card-padding-y) var(--kj-card-padding-x);
-  }
-
-  .kj-card[data-variant="outline"] {
-    --kj-card-bg: transparent;
-    --kj-card-border-color: var(--kj-border-default);
-  }
-
-  .kj-card[data-variant="subtle"] {
-    --kj-card-bg: var(--kj-bg-field);
-  }
-
-  /* Lift modifier — borrows the theme's button-shadow value so cards in
-     brutalist themes (kouji / bauhaus) get the same hard offset block as
-     primary buttons. Themes without an offset signature fall back to
-     `--kj-shadow-md` so the card still reads as elevated. */
-  .kj-card[data-shadow="lift"] {
-    --kj-card-shadow: var(--kj-button-shadow, var(--kj-shadow-md));
-    --kj-card-border-color: var(--kj-border-default);
-  }
-
-  /* Cover image. Fixed aspect ratio + cover-fit prevents tall hero images
-     from blowing the card. The `--kj-card-cover-height` knob lets a
-     consumer override the height; `--kj-card-cover-fit` swaps cover/contain. */
-  .kj-card-cover {
-    --kj-card-cover-height: 12rem;
-    --kj-card-cover-fit:    cover;
-
-    display: block;
-    height: var(--kj-card-cover-height);
-    background: var(--kj-bg-field);
-    overflow: hidden;
-  }
-  .kj-card-cover img,
-  .kj-card-cover video {
-    width: 100%;
-    height: 100%;
-    display: block;
-    object-fit: var(--kj-card-cover-fit);
-    object-position: center;
-  }
-  /* Per-instance override via [data-fit]. */
-  .kj-card-cover[data-fit="contain"] { --kj-card-cover-fit: contain; }
-  .kj-card-cover[data-fit="cover"]   { --kj-card-cover-fit: cover; }
-  .kj-card-cover[data-size="sm"] { --kj-card-cover-height: 8rem; }
-  .kj-card-cover[data-size="lg"] { --kj-card-cover-height: 16rem; }
-
-  /* Header */
-  .kj-card-header {
-    display: flex;
-    flex-direction: column;
-    gap: var(--kj-space-xs, 0.25rem);
-    padding: var(--kj-card-padding-y) var(--kj-card-padding-x);
-  }
-
-  /* Title */
-  .kj-card-title {
-    font: 600 1rem / 1.3 var(--kj-font-sans);
-    margin: 0;
-    color: var(--kj-fg-default);
-  }
-
-  /* Subtitle */
-  .kj-card-subtitle {
-    font: 0.875rem / 1.4 var(--kj-font-sans);
-    color: var(--kj-fg-default);
-    opacity: 0.6;
-    margin: 0;
-  }
-
-  /* Content */
-  .kj-card-content {
-    display: block;
-    color: var(--kj-fg-default);
-    font: 0.9375rem / 1.5 var(--kj-font-sans);
-  }
-  .kj-card-content[data-padded] {
-    padding: var(--kj-card-padding-y) var(--kj-card-padding-x);
-  }
-
-  /* Footer */
-  .kj-card-footer {
-    display: flex;
-    align-items: center;
-    gap: var(--kj-space-sm);
-    padding: var(--kj-card-padding-y) var(--kj-card-padding-x);
-    border-top: var(--kj-border) solid var(--kj-border-default);
-  }
-  .kj-card-footer[data-align="start"]   { justify-content: flex-start; }
-  .kj-card-footer[data-align="center"]  { justify-content: center; }
-  .kj-card-footer[data-align="end"]     { justify-content: flex-end; }
-  .kj-card-footer[data-align="between"] { justify-content: space-between; }
-}

package/src/card/card.playground.ts

@@ -1,116 +0,0 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import {
-  KjCardComponent,
-  KjCardContentComponent,
-  KjCardFooterComponent,
-  KjCardHeaderComponent,
-  KjCardSubtitleComponent,
-  KjCardTitleComponent,
-} from './card';
-import { KjButtonComponent } from '../button/button';
-import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
-
-/**
- * Playground state — module-scope signals. Tunes variant, footer alignment,
- * and toggles header / footer slots so the full card composition can be
- * exercised without rewriting markup.
- */
-const variant = signal<'default' | 'outline' | 'subtle'>('default');
-const footerAlign = signal<'start' | 'center' | 'end' | 'between'>('end');
-const showHeader = signal(true);
-const showFooter = signal(true);
-const title = signal('Card title');
-const body = signal('Body content goes here. Cards group related information.');
-
-@Component({
-  selector: 'kj-card-playground',
-  standalone: true,
-  imports: [
-    KjCardComponent,
-    KjCardHeaderComponent,
-    KjCardTitleComponent,
-    KjCardSubtitleComponent,
-    KjCardContentComponent,
-    KjCardFooterComponent,
-    KjButtonComponent,
-  ],
-  template: `
-    <kj-card [variant]="variant()">
-      @if (showHeader()) {
-        <kj-card-header>
-          <kj-card-title>{{ title() }}</kj-card-title>
-          <kj-card-subtitle>Themed surface preview</kj-card-subtitle>
-        </kj-card-header>
-      }
-      <kj-card-content>{{ body() }}</kj-card-content>
-      @if (showFooter()) {
-        <kj-card-footer [align]="footerAlign()">
-          <kj-button kjVariant="ghost" kjSize="sm">Cancel</kj-button>
-          <kj-button kjSize="sm">Save</kj-button>
-        </kj-card-footer>
-      }
-    </kj-card>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjCardPlaygroundDemo {
-  protected readonly variant = variant;
-  protected readonly footerAlign = footerAlign;
-  protected readonly showHeader = showHeader;
-  protected readonly showFooter = showFooter;
-  protected readonly title = title;
-  protected readonly body = body;
-}
-
-export const PLAYGROUND: PlaygroundFile = {
-  component: KjCardPlaygroundDemo,
-  state: {
-    variant: variant as unknown as ReturnType<typeof signal>,
-    footerAlign: footerAlign as unknown as ReturnType<typeof signal>,
-    showHeader: showHeader as unknown as ReturnType<typeof signal>,
-    showFooter: showFooter as unknown as ReturnType<typeof signal>,
-    title: title as unknown as ReturnType<typeof signal>,
-    body: body as unknown as ReturnType<typeof signal>,
-  },
-  controls: [
-    {
-      kind: 'chips',
-      name: 'variant',
-      label: 'variant',
-      options: ['default', 'outline', 'subtle'],
-    },
-    {
-      kind: 'chips',
-      name: 'footerAlign',
-      label: 'footer align',
-      options: ['start', 'center', 'end', 'between'],
-    },
-    { kind: 'text', name: 'title', label: 'title' },
-    { kind: 'text', name: 'body', label: 'body' },
-    { kind: 'toggle', name: 'showHeader', label: 'header' },
-    { kind: 'toggle', name: 'showFooter', label: 'footer' },
-  ],
-  snippet: (values) => {
-    const s = values as {
-      variant: string;
-      footerAlign: string;
-      showHeader: boolean;
-      showFooter: boolean;
-      title: string;
-      body: string;
-    };
-    const slots: string[] = [];
-    if (s.showHeader) {
-      slots.push(
-        `  <kj-card-header>\n    <kj-card-title>${s.title}</kj-card-title>\n    <kj-card-subtitle>Themed surface preview</kj-card-subtitle>\n  </kj-card-header>`,
-      );
-    }
-    slots.push(`  <kj-card-content>${s.body}</kj-card-content>`);
-    if (s.showFooter) {
-      slots.push(
-        `  <kj-card-footer align="${s.footerAlign}">\n    <kj-button kjVariant="ghost" kjSize="sm">Cancel</kj-button>\n    <kj-button kjSize="sm">Save</kj-button>\n  </kj-card-footer>`,
-      );
-    }
-    return `<kj-card variant="${s.variant}">\n${slots.join('\n')}\n</kj-card>`;
-  },
-};

package/src/card/card.spec.ts

@@ -1,50 +0,0 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { describe, expect, test, beforeEach } from 'vitest';
-import { KjCardComponent } from './card';
-
-@Component({
-  standalone: true,
-  imports: [KjCardComponent],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `<kj-card [variant]="variant">Content</kj-card>`,
-})
-class HostComponent {
-  variant: 'default' | 'outline' | 'subtle' = 'default';
-}
-
-describe('KjCardComponent', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({ imports: [HostComponent] });
-  });
-
-  test('host element carries the .kj-card class', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    const card = fixture.nativeElement.querySelector('kj-card');
-    expect(card).not.toBeNull();
-    expect(card.classList.contains('kj-card')).toBe(true);
-  });
-
-  test('default variant has data-variant="default" attr', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    const card = fixture.nativeElement.querySelector('kj-card');
-    expect(card.getAttribute('data-variant')).toBe('default');
-  });
-
-  test('forwards variant input to data-variant attr', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.componentInstance.variant = 'outline';
-    fixture.detectChanges();
-    const card = fixture.nativeElement.querySelector('kj-card');
-    expect(card.getAttribute('data-variant')).toBe('outline');
-  });
-
-  test('projects content into the host', () => {
-    const fixture = TestBed.createComponent(HostComponent);
-    fixture.detectChanges();
-    const card = fixture.nativeElement.querySelector('kj-card');
-    expect(card.textContent.trim()).toBe('Content');
-  });
-});

package/src/card/card.ts

@@ -1,194 +0,0 @@
-import { Component, ChangeDetectionStrategy, ViewEncapsulation, input } from '@angular/core';
-
-/**
- * Themed surface container — card, panel, feature box.
- * Presentation-only: no headless directive in core, no behavior.
- *
- * Compose with `<kj-card-header>`, `<kj-card-content>`, `<kj-card-footer>`,
- * `<kj-card-cover>` sub-components for structured layouts.
- *
- * Variants:
- * - `default` — base surface (background `--kj-bg-surface`)
- * - `outline` — transparent background, neutral border
- * - `subtle`  — slightly elevated surface (background `--kj-bg-field`), no border
- *
- * @example
- * ```html
- * <kj-card>Default card</kj-card>
- * <kj-card variant="outline">Outlined</kj-card>
- * ```
- * @doc-example Default
- *   The default playground — a single card with title and body text.
- *   @doc-file card.example.ts
- * @doc-example Usage
- *   The common shape — header / content / footer with action buttons. Use this
- *   as the copy-paste starting point.
- *   @doc-file card.usage.example.ts
- * @doc-example Full
- *   Full composition — cover, header, content, and footer actions.
- *   @doc-file card.full.example.ts
- * @doc-example Cover
- *   `<kj-card-cover>` for full-bleed media at the top of the card.
- *   @doc-file card.cover.example.ts
- *
- * @doc-aria
- *   data-variant  — Mirrors the resolved variant for theme/scope hooks
- *   data-shadow   — Optional `"lift"` attribute pulls in --kj-button-shadow for brutalist offsets
- *
- * @doc-touch
- *   Cards are surfaces, not tap targets. When the entire card is interactive
- *   (clickable tile) wrap the content in a `<button>` or `<a>` and ensure the
- *   target spans ≥ 44×44.
- *
- * @doc-a11y
- *   Renders a plain `<div>` surface — no implicit role. Use `<kj-card-title>`
- *   (which mounts an `<h3>`) so the card's heading lands in the document
- *   outline. For clickable cards, wrap interactive content in a real link or
- *   button so keyboard activation works without extra wiring.
- *
- * @doc-related list,empty-state,skeleton
- *
- * @doc-css-var
- *   --kj-card-bg            — Background fill. Variant rules set this; override to brand-paint a one-off.
- *   --kj-card-fg            — Foreground (body text) color. Defaults to --kj-fg-default.
- *   --kj-card-border-color  — Border color. Outline variant sets this; subtle/default keep transparent.
- *   --kj-card-border-width  — Border thickness. Inherits --kj-border.
- *   --kj-card-radius        — Corner radius. Inherits --kj-radius-box.
- *   --kj-card-padding-x     — Horizontal padding for header/content/footer bands.
- *   --kj-card-padding-y     — Vertical padding for header/content/footer bands.
- *   --kj-card-shadow        — Box shadow. `data-shadow="lift"` borrows --kj-button-shadow for brutalist offsets.
- *   --kj-card-cover-height  — Height of the cover slot. Sizes (sm/md/lg) override.
- *   --kj-card-cover-fit     — object-fit for media in the cover slot. `cover` (default) or `contain`.
- *
- * @doc-category Library/Data display
- * @doc
- * @doc-name card
- * @doc-description Themed surface container for grouping related content with header, footer, and cover sub-components.
- * @doc-is-main
- */
-@Component({
-  selector: 'kj-card',
-  standalone: true,
-  template: `<ng-content />`,
-  styleUrl: './card.css',
-  encapsulation: ViewEncapsulation.None,
-  host: {
-    'class': 'kj-card',
-    '[attr.data-variant]': 'variant()',
-  },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjCardComponent {
-  readonly variant = input<'default' | 'outline' | 'subtle'>('default');
-}
-
-/**
- * Full-bleed image / video area at the top of a card.
- * `size` controls the fixed height (sm = 8rem, md = 12rem default, lg = 16rem).
- * `fit` controls `object-fit` on the inner media (`cover` default — fills and
- * crops; `contain` — letterboxes, no crop). Override the height directly with
- * the CSS custom property `--kj-card-cover-height` if the presets don't fit.
- * @doc
- * @doc-name card
- */
-@Component({
-  selector: 'kj-card-cover',
-  standalone: true,
-  template: `<ng-content />`,
-  encapsulation: ViewEncapsulation.None,
-  host: {
-    'class': 'kj-card-cover',
-    '[attr.data-size]': 'size()',
-    '[attr.data-fit]': 'fit()',
-  },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjCardCoverComponent {
-  readonly size = input<'sm' | 'md' | 'lg'>('md');
-  readonly fit = input<'cover' | 'contain'>('cover');
-}
-
-/**
- * Header band inside the card. Flexes title/subtitle on the left and an optional extra slot on the right.
- * @doc
- * @doc-name card
- */
-@Component({
-  selector: 'kj-card-header',
-  standalone: true,
-  template: `<ng-content />`,
-  encapsulation: ViewEncapsulation.None,
-  host: { 'class': 'kj-card-header' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjCardHeaderComponent {}
-
-/**
- * Card heading. Renders semantically as `<h3>`.
- * @doc
- * @doc-name card
- */
-@Component({
-  selector: 'kj-card-title',
-  standalone: true,
-  template: `<h3 class="kj-card-title"><ng-content /></h3>`,
-  encapsulation: ViewEncapsulation.None,
-  host: { style: 'display: contents;' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjCardTitleComponent {}
-
-/**
- * Card subtitle — smaller, lighter text below the title.
- * @doc
- * @doc-name card
- */
-@Component({
-  selector: 'kj-card-subtitle',
-  standalone: true,
-  template: `<p class="kj-card-subtitle"><ng-content /></p>`,
-  encapsulation: ViewEncapsulation.None,
-  host: { style: 'display: contents;' },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjCardSubtitleComponent {}
-
-/**
- * Main body slot. `padded` toggles the standard padding (default true).
- * @doc
- * @doc-name card
- */
-@Component({
-  selector: 'kj-card-content',
-  standalone: true,
-  template: `<ng-content />`,
-  encapsulation: ViewEncapsulation.None,
-  host: {
-    'class': 'kj-card-content',
-    '[attr.data-padded]': "padded() ? '' : null",
-  },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjCardContentComponent {
-  readonly padded = input(true);
-}
-
-/**
- * Footer actions area. `align` controls button placement.
- * @doc
- * @doc-name card
- */
-@Component({
-  selector: 'kj-card-footer',
-  standalone: true,
-  template: `<ng-content />`,
-  encapsulation: ViewEncapsulation.None,
-  host: {
-    'class': 'kj-card-footer',
-    '[attr.data-align]': 'align()',
-  },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjCardFooterComponent {
-  readonly align = input<'start' | 'center' | 'end' | 'between'>('end');
-}

package/src/card/card.usage.example.ts

@@ -1,46 +0,0 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { KjButtonComponent } from '../button/button';
-import {
-  KjCardComponent,
-  KjCardContentComponent,
-  KjCardFooterComponent,
-  KjCardHeaderComponent,
-  KjCardSubtitleComponent,
-  KjCardTitleComponent,
-} from './card';
-
-/**
- * Common card shape — header / subtitle / content / footer actions.
- * Use this as the copy-paste starting point for new screens.
- */
-@Component({
-  selector: 'kj-card-usage-example',
-  standalone: true,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    KjCardComponent,
-    KjCardHeaderComponent,
-    KjCardTitleComponent,
-    KjCardSubtitleComponent,
-    KjCardContentComponent,
-    KjCardFooterComponent,
-    KjButtonComponent,
-  ],
-  styles: [`:host { display: block; max-width: 32rem; }`],
-  template: `
-    <kj-card variant="default">
-      <kj-card-header>
-        <kj-card-title>Workspace settings</kj-card-title>
-        <kj-card-subtitle>Manage members and integrations</kj-card-subtitle>
-      </kj-card-header>
-      <kj-card-content>
-        <p>Invite teammates, rotate API keys, and configure SSO providers.</p>
-      </kj-card-content>
-      <kj-card-footer align="end">
-        <kj-button kjVariant="ghost">Cancel</kj-button>
-        <kj-button kjVariant="default">Save changes</kj-button>
-      </kj-card-footer>
-    </kj-card>
-  `,
-})
-export class KjCardUsageExample {}

package/src/card/index.ts

@@ -1 +0,0 @@
-export * from './card';