@kouji-ui/components 0.1.1 → 0.1.2

package/src/public-api.ts

@@ -1,61 +0,0 @@
-// Public API for @kouji-ui/components
-export const KJ_COMPONENTS_VERSION = '0.0.1';
-
-export * from './accordion/index';
-export * from './alert/index';
-export * from './avatar/index';
-export * from './badge/index';
-export * from './breadcrumb/index';
-export * from './button/index';
-export * from './button-group/index';
-export * from './calendar/index';
-export * from './card/index';
-export * from './carousel/index';
-export * from './chat/index';
-export * from './checkbox/index';
-export * from './color-picker/index';
-export * from './combobox/index';
-export * from './confirm-popup/index';
-export * from './date-picker/index';
-export * from './dialog/index';
-export * from './drawer/index';
-export * from './dropdown-menu/index';
-export * from './empty-state/index';
-export * from './field/index';
-export * from './file-upload/index';
-export * from './form/index';
-export * from './icon/index';
-export * from './input/index';
-export * from './input-group/index';
-export * from './input-mask/index';
-export * from './input-otp/index';
-export * from './kbd/index';
-export * from './divider/index';
-export * from './link/index';
-export * from './list/index';
-export * from './menubar/index';
-export * from './number-input/index';
-export * from './overlay-badge/index';
-export * from './pagination/index';
-export * from './password-input/index';
-export * from './popover/index';
-export * from './progress-bar/index';
-export * from './radio/index';
-export * from './select/index';
-export * from './skeleton/index';
-export * from './slider/index';
-export * from './speed-dial/index';
-export * from './spinner/index';
-export * from './stepper/index';
-export * from './table/index';
-export * from './tabs/index';
-export * from './tag/index';
-export * from './textarea/index';
-export * from './time-picker/index';
-export * from './toast/index';
-export * from './toggle/index';
-export * from './tooltip/index';
-export * from './cascade-select/index';
-export * from './command-palette/index';
-export * from './tree-select/index';
-export * from './typography/index';

package/src/radio/_examples/index.ts

@@ -1,6 +0,0 @@
-// AUTO-GENERATED by scripts/migrate-examples.mjs
-// One barrel per component folder — used by the docs app as a lazy chunk.
-export { KjRadioDefaultExample } from './radio.default.example';
-export { KjRadioDisabledExample } from './radio.disabled.example';
-export { KjRadioGroupExample } from './radio.group.example';
-export { KjRadioInlineExample } from './radio.inline.example';

package/src/radio/_examples/radio.default.example.ts

@@ -1,26 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { KjRadioGroupComponent, KjRadioComponent } from '../radio';
-
-@Component({
-  selector: 'kj-radio-default-example',
-  standalone: true,
-  imports: [KjRadioGroupComponent, KjRadioComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-radio-group [(value)]="size" ariaLabel="Size">
-      <kj-radio [value]="'s'">Small</kj-radio>
-      <kj-radio [value]="'m'">Medium</kj-radio>
-      <kj-radio [value]="'l'">Large</kj-radio>
-    </kj-radio-group>
-  `,
-})
-export class KjRadioDefaultExample {
-  readonly size = signal<'s' | 'm' | 'l'>('m');
-}

package/src/radio/_examples/radio.disabled.example.ts

@@ -1,26 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { KjRadioGroupComponent, KjRadioComponent } from '../radio';
-
-@Component({
-  selector: 'kj-radio-disabled-example',
-  standalone: true,
-  imports: [KjRadioGroupComponent, KjRadioComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-radio-group [(value)]="choice" ariaLabel="Choice">
-      <kj-radio [value]="'a'">Option A</kj-radio>
-      <kj-radio [value]="'b'" [disabled]="true">Option B (disabled)</kj-radio>
-      <kj-radio [value]="'c'">Option C</kj-radio>
-    </kj-radio-group>
-  `,
-})
-export class KjRadioDisabledExample {
-  readonly choice = signal<'a' | 'b' | 'c'>('a');
-}

package/src/radio/_examples/radio.group.example.ts

@@ -1,27 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { KjRadioGroupComponent, KjRadioComponent } from '../radio';
-
-@Component({
-  selector: 'kj-radio-group-example',
-  standalone: true,
-  imports: [KjRadioGroupComponent, KjRadioComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-radio-group [(value)]="plan" ariaLabel="Plan">
-      <kj-radio [value]="'free'">Free</kj-radio>
-      <kj-radio [value]="'pro'">Pro</kj-radio>
-      <kj-radio [value]="'team'">Team</kj-radio>
-      <kj-radio [value]="'enterprise'">Enterprise</kj-radio>
-    </kj-radio-group>
-  `,
-})
-export class KjRadioGroupExample {
-  readonly plan = signal<'free' | 'pro' | 'team' | 'enterprise'>('pro');
-}

package/src/radio/_examples/radio.inline.example.ts

@@ -1,26 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { KjRadioGroupComponent, KjRadioComponent } from '../radio';
-
-@Component({
-  selector: 'kj-radio-inline-example',
-  standalone: true,
-  imports: [KjRadioGroupComponent, KjRadioComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-radio-group [(value)]="vote" orientation="horizontal" ariaLabel="Vote">
-      <kj-radio [value]="'yes'">Yes</kj-radio>
-      <kj-radio [value]="'no'">No</kj-radio>
-      <kj-radio [value]="'abstain'">Abstain</kj-radio>
-    </kj-radio-group>
-  `,
-})
-export class KjRadioInlineExample {
-  readonly vote = signal<'yes' | 'no' | 'abstain'>('yes');
-}

package/src/radio/index.ts

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

package/src/radio/radio.css

@@ -1,58 +0,0 @@
-@layer kj.component {
-  .kj-radio-group {
-    display: flex;
-    flex-direction: column;
-    gap: var(--kj-space-sm);
-  }
-  .kj-radio-group[data-orientation="horizontal"] { flex-direction: row; gap: var(--kj-space-lg); }
-
-  /* Outer host. Acts as a single click target whose label area forwards to
-     the inner dot. */
-  .kj-radio {
-    display: inline-flex;
-  }
-  .kj-radio-inner {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--kj-space-sm);
-    cursor: pointer;
-    color: var(--kj-fg-default);
-    font: 0.875rem / 1.4 var(--kj-font-sans);
-  }
-  .kj-radio-label { user-select: none; }
-
-  /* The interactive dot (carries the kjRadio directive). */
-  .kj-radio-dot {
-    --kj-radio-size:        1rem;
-    --kj-radio-border:      var(--kj-border-default);
-    --kj-radio-bg-checked:  var(--kj-bg-primary);
-
-    display: inline-block;
-    width: var(--kj-radio-size);
-    height: var(--kj-radio-size);
-    flex-shrink: 0;
-    border: var(--kj-border) solid var(--kj-radio-border);
-    border-radius: 9999px;
-    background: var(--kj-bg-field);
-    position: relative;
-    transition: var(--kj-transition);
-  }
-  .kj-radio-dot[data-checked]::after {
-    content: '';
-    position: absolute;
-    inset: 25%;
-    border-radius: 9999px;
-    background: var(--kj-radio-bg-checked);
-  }
-  .kj-radio-dot[data-checked] { border-color: var(--kj-radio-bg-checked); }
-  .kj-radio-dot:focus-visible { outline: 2px solid var(--kj-fg-primary); outline-offset: 2px; }
-
-  /* Disabled — dim the whole group (dot + label text) for visual consistency
-     with native form controls. */
-  .kj-radio[data-disabled] .kj-radio-inner { cursor: not-allowed; }
-  .kj-radio[data-disabled] .kj-radio-dot,
-  .kj-radio[data-disabled] .kj-radio-label {
-    opacity: 0.45;
-  }
-  .kj-radio[data-disabled] .kj-radio-dot { pointer-events: none; }
-}

package/src/radio/radio.playground.ts

@@ -1,90 +0,0 @@
-import { ChangeDetectionStrategy, Component, computed, signal } from '@angular/core';
-import { KjRadioGroupComponent, KjRadioComponent } from './radio';
-import type { PlaygroundFile } from '@kouji-ui/components/playground-types';
-
-/**
- * Playground state — module-scope signals. Knobs cover orientation, the
- * number of rendered options, the selected value, and a per-option disabled
- * demonstration of skip behaviour during keyboard navigation.
- */
-const selected = signal<string>('m');
-const orientation = signal<'horizontal' | 'vertical'>('vertical');
-const itemCount = signal<2 | 3 | 4 | 5>(3);
-const disableMiddle = signal(false);
-
-const ITEMS: ReadonlyArray<{ value: string; label: string }> = [
-  { value: 's', label: 'Small' },
-  { value: 'm', label: 'Medium' },
-  { value: 'l', label: 'Large' },
-  { value: 'xl', label: 'X-Large' },
-  { value: 'xxl', label: 'XX-Large' },
-];
-
-@Component({
-  selector: 'kj-radio-playground',
-  standalone: true,
-  imports: [KjRadioGroupComponent, KjRadioComponent],
-  template: `
-    <kj-radio-group
-      [(value)]="selected"
-      [orientation]="orientation()"
-      ariaLabel="Size"
-    >
-      @for (item of visibleItems(); track item.value; let i = $index) {
-        <kj-radio [value]="item.value" [disabled]="disableMiddle() && i === 1">
-          {{ item.label }}
-        </kj-radio>
-      }
-    </kj-radio-group>
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjRadioPlaygroundDemo {
-  protected readonly selected = selected;
-  protected readonly orientation = orientation;
-  protected readonly itemCount = itemCount;
-  protected readonly disableMiddle = disableMiddle;
-
-  protected readonly visibleItems = computed(() => ITEMS.slice(0, itemCount()));
-}
-
-export const PLAYGROUND: PlaygroundFile = {
-  component: KjRadioPlaygroundDemo,
-  state: {
-    selected: selected as unknown as ReturnType<typeof signal>,
-    orientation: orientation as unknown as ReturnType<typeof signal>,
-    itemCount: itemCount as unknown as ReturnType<typeof signal>,
-    disableMiddle: disableMiddle as unknown as ReturnType<typeof signal>,
-  },
-  controls: [
-    {
-      kind: 'chips',
-      name: 'orientation',
-      label: 'orientation',
-      options: ['vertical', 'horizontal'],
-    },
-    { kind: 'chips', name: 'itemCount', label: 'items', options: [2, 3, 4, 5] },
-    {
-      kind: 'chips',
-      name: 'selected',
-      label: 'selected',
-      options: ['s', 'm', 'l', 'xl', 'xxl'],
-    },
-    { kind: 'toggle', name: 'disableMiddle', label: 'disable middle item' },
-  ],
-  snippet: (values) => {
-    const s = values as {
-      selected: string;
-      orientation: string;
-      itemCount: number;
-      disableMiddle: boolean;
-    };
-    const items = ITEMS.slice(0, s.itemCount)
-      .map((item, i) => {
-        const disabled = s.disableMiddle && i === 1 ? ' [disabled]="true"' : '';
-        return `  <kj-radio [value]="'${item.value}'"${disabled}>${item.label}</kj-radio>`;
-      })
-      .join('\n');
-    return `<kj-radio-group\n  [(value)]="selected"\n  orientation="${s.orientation}"\n  ariaLabel="Size"\n>\n${items}\n</kj-radio-group>`;
-  },
-};

package/src/radio/radio.ts

@@ -1,143 +0,0 @@
-import { Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, input, viewChild } from '@angular/core';
-import { KjRadioGroup, KjRadio } from '@kouji-ui/core';
-
-/**
- * Radio group root. Two-way bind via `[(value)]`.
- *
- * Use `<kj-radio-group>` with `<kj-radio>` children to render a themed
- * single-selection control with label forwarding, disabled propagation, and
- * the design-system tokens applied on top of the headless `KjRadioGroup`.
- *
- * @doc-example Default
- *   A vertical size picker — the bare-minimum recipe.
- *   @doc-file radio.default.example.ts
- * @doc-example Usage
- *   A walkthrough of the most common usages — vertical and horizontal
- *   groups, disabled option. Use this as the copy-paste starting point.
- *   @doc-file radio.usage.example.ts
- * @doc-example Group
- *   Multiple option groups laid out together — labels stay click-targetable.
- *   @doc-file radio.group.example.ts
- * @doc-example Disabled
- *   `[disabled]="true"` removes the option from the tab order and dims it.
- *   @doc-file radio.disabled.example.ts
- * @doc-example Inline
- *   `orientation="horizontal"` lays the radios in a single row.
- *   @doc-file radio.inline.example.ts
- *
- * @doc-keyboard
- *   ArrowUp|ArrowDown    — Moves selection between radios in a vertical group
- *   ArrowLeft|ArrowRight — Moves selection between radios in a horizontal group
- *   Tab                  — Enters the group (focuses the checked or first radio)
- *   Space                — Selects the focused radio
- *
- * @doc-aria
- *   role="radiogroup"  — On the host `<kj-radio-group>` (provided by the directive)
- *   role="radio"       — On each `<kj-radio>` dot
- *   aria-checked       — Reflects the selection state per option
- *   aria-labelledby    — Wired from the option's visible text label id
- *   aria-disabled      — Reflects `[disabled]` on individual radios
- *   data-orientation   — Mirrors `horizontal` / `vertical` for theme hooks
- *
- * @doc-touch
- *   The label wraps both the dot and the text — the entire `<kj-radio>` row
- *   is clickable. Pair with adequate line-height so the row meets WCAG 2.5.5.
- *
- * @doc-a11y
- *   Selection follows the roving-tabindex pattern — only the checked (or
- *   first) radio is tab-focusable; arrow keys cycle within. Group always
- *   exposes a programmatic name — set `ariaLabel` or wire `aria-labelledby`
- *   to a sibling heading.
- *
- * @doc-related checkbox,select,toggle
- *
- * @doc-css-var
- *   --kj-radio-size        — Diameter of the radio dot.
- *   --kj-radio-border      — Border color of the unchecked dot. Inherits --kj-border-default.
- *   --kj-radio-bg-checked  — Inner fill and border color when checked. Inherits --kj-bg-primary.
- *
- * @doc-category Library/Data input
- * @doc
- * @doc-name radio
- * @doc-description Themed radio group for accessible single-selection forms input with label forwarding.
- * @doc-is-main
- */
-@Component({
-  selector: 'kj-radio-group',
-  standalone: true,
-  hostDirectives: [{ directive: KjRadioGroup, inputs: ['kjValue: value'], outputs: ['kjValueChange: valueChange'] }],
-  template: `<ng-content />`,
-  styleUrl: './radio.css',
-  encapsulation: ViewEncapsulation.None,
-  host: {
-    'class': 'kj-radio-group',
-    '[attr.data-orientation]': 'orientation()',
-    '[attr.aria-label]': 'ariaLabel()',
-  },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjRadioGroupComponent {
-  readonly orientation = input<'horizontal' | 'vertical'>('vertical');
-  readonly ariaLabel = input<string | undefined>(undefined);
-}
-
-let radioIdCounter = 0;
-
-/**
- * Single radio button. Must live inside `<kj-radio-group>`.
- *
- * The host renders a `<label>` that wraps the radio dot AND the projected
- * content. Clicking anywhere on the label (including the text) selects the
- * radio because the label's native click-forwarding behaviour fires the
- * directive's click handler. When `disabled` is set, both the dot and the
- * label text dim (see `[data-disabled]` rules in `radio.css`).
- * @doc
- * @doc-name radio
- */
-@Component({
-  selector: 'kj-radio',
-  standalone: true,
-  imports: [KjRadio],
-  template: `
-    <!-- Click-region wrapper. The focusable element is the inner kjRadio span
-         (role="radio", tabindex, Space/Enter handlers); this div only proxies
-         pointer events from the label area, so the lint rules below don't apply. -->
-    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
-    <div class="kj-radio-inner" (click)="onLabelClick($event)">
-      <span
-        #dot
-        kjRadio
-        tabindex="0"
-        class="kj-radio-dot"
-        [kjRadioValue]="value()"
-        [kjDisabled]="disabled()"
-        [attr.aria-labelledby]="labelId"
-      ></span>
-      <span class="kj-radio-label" [id]="labelId"><ng-content /></span>
-    </div>
-  `,
-  encapsulation: ViewEncapsulation.None,
-  host: {
-    'class': 'kj-radio',
-    '[attr.data-disabled]': "disabled() ? '' : null",
-  },
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KjRadioComponent {
-  readonly value = input.required<unknown>();
-  readonly disabled = input(false);
-
-  protected readonly labelId = `kj-radio-${++radioIdCounter}`;
-
-  private readonly dot = viewChild.required<ElementRef<HTMLElement>>('dot');
-
-  /** Forward label-area clicks to the radio dot. The dot itself bubbles
-   *  through, so we early-return to avoid a double-select. */
-  protected onLabelClick(e: MouseEvent): void {
-    if (this.disabled()) return;
-    const dotEl = this.dot().nativeElement;
-    const target = e.target as Node;
-    if (target === dotEl || dotEl.contains(target)) return;
-    dotEl.click();
-  }
-}

package/src/radio/radio.usage.example.ts

@@ -1,54 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { KjRadioGroupComponent, KjRadioComponent } from './radio';
-
-/**
- * A walkthrough of the most common radio usages — vertical and horizontal
- * groups, a disabled option, and a bound selection. Use this as the
- * copy-paste starting point for form choices.
- */
-@Component({
-  selector: 'kj-radio-usage-example',
-  standalone: true,
-  imports: [KjRadioGroupComponent, KjRadioComponent],
-  styles: [
-    `
-      :host {
-        display: flex;
-        flex-direction: column;
-        gap: var(--kj-space-xl);
-      }
-      .label {
-        font-size: 0.75rem;
-        color: var(--kj-fg-default);
-        opacity: 0.7;
-        text-transform: uppercase;
-        letter-spacing: 0.04em;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <div>
-      <span class="label">Size (vertical)</span>
-      <kj-radio-group [(value)]="size" ariaLabel="Size">
-        <kj-radio [value]="'s'">Small</kj-radio>
-        <kj-radio [value]="'m'">Medium</kj-radio>
-        <kj-radio [value]="'l'">Large</kj-radio>
-        <kj-radio [value]="'xl'" [disabled]="true">X-Large (out of stock)</kj-radio>
-      </kj-radio-group>
-    </div>
-
-    <div>
-      <span class="label">Plan (horizontal)</span>
-      <kj-radio-group [(value)]="plan" orientation="horizontal" ariaLabel="Plan">
-        <kj-radio [value]="'free'">Free</kj-radio>
-        <kj-radio [value]="'pro'">Pro</kj-radio>
-        <kj-radio [value]="'team'">Team</kj-radio>
-      </kj-radio-group>
-    </div>
-  `,
-})
-export class KjRadioUsageExample {
-  readonly size = signal<'s' | 'm' | 'l' | 'xl'>('m');
-  readonly plan = signal<'free' | 'pro' | 'team'>('pro');
-}

package/src/select/_examples/index.ts

@@ -1,6 +0,0 @@
-// AUTO-GENERATED by scripts/migrate-examples.mjs
-// One barrel per component folder — used by the docs app as a lazy chunk.
-export { KjSelectDefaultExample } from './select.default.example';
-export { KjSelectDisabledExample } from './select.disabled.example';
-export { KjSelectGroupedExample } from './select.grouped.example';
-export { KjSelectPlaceholderExample } from './select.placeholder.example';

package/src/select/_examples/select.default.example.ts

@@ -1,26 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { KjSelectComponent, KjOptionComponent } from '../select';
-
-@Component({
-  selector: 'kj-select-default-example',
-  standalone: true,
-  imports: [KjSelectComponent, KjOptionComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-select [(value)]="fruit" placeholder="Choose a fruit">
-      <kj-option [value]="'apple'">Apple</kj-option>
-      <kj-option [value]="'banana'">Banana</kj-option>
-      <kj-option [value]="'cherry'">Cherry</kj-option>
-    </kj-select>
-  `,
-})
-export class KjSelectDefaultExample {
-  readonly fruit = signal<string | undefined>(undefined);
-}

package/src/select/_examples/select.disabled.example.ts

@@ -1,24 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { KjSelectComponent, KjOptionComponent } from '../select';
-
-@Component({
-  selector: 'kj-select-disabled-example',
-  standalone: true,
-  imports: [KjSelectComponent, KjOptionComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-select [(value)]="lang" [disabled]="true" placeholder="Locked">
-      <kj-option [value]="'en'">English</kj-option>
-    </kj-select>
-  `,
-})
-export class KjSelectDisabledExample {
-  readonly lang = signal<string | undefined>('en');
-}

package/src/select/_examples/select.grouped.example.ts

@@ -1,37 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { KjSelectComponent, KjOptionComponent } from '../select';
-
-@Component({
-  selector: 'kj-select-grouped-example',
-  standalone: true,
-  imports: [KjSelectComponent, KjOptionComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-      .group-label {
-        padding: 4px 12px;
-        font-size: 0.75rem;
-        color: var(--kj-fg-default);
-        opacity: 0.6;
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-select [(value)]="city" placeholder="Choose a city">
-      <div class="group-label">Europe</div>
-      <kj-option [value]="'london'">London</kj-option>
-      <kj-option [value]="'berlin'">Berlin</kj-option>
-      <div class="group-label">Asia</div>
-      <kj-option [value]="'tokyo'">Tokyo</kj-option>
-      <kj-option [value]="'seoul'">Seoul</kj-option>
-    </kj-select>
-  `,
-})
-export class KjSelectGroupedExample {
-  readonly city = signal<string | undefined>(undefined);
-}

package/src/select/_examples/select.placeholder.example.ts

@@ -1,26 +0,0 @@
-import { Component, signal, ChangeDetectionStrategy } from '@angular/core';
-import { KjSelectComponent, KjOptionComponent } from '../select';
-
-@Component({
-  selector: 'kj-select-placeholder-example',
-  standalone: true,
-  imports: [KjSelectComponent, KjOptionComponent],
-  styles: [
-    `
-      :host {
-        display: block;
-      }
-    `,
-  ],
-  changeDetection: ChangeDetectionStrategy.Eager,
-  template: `
-    <kj-select [(value)]="status" placeholder="Pick a status">
-      <kj-option [value]="'active'">Active</kj-option>
-      <kj-option [value]="'inactive'">Inactive</kj-option>
-      <kj-option [value]="'pending'">Pending</kj-option>
-    </kj-select>
-  `,
-})
-export class KjSelectPlaceholderExample {
-  readonly status = signal<string | undefined>(undefined);
-}

package/src/select/index.ts

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