@ng-json-render/primitives 0.0.2

package/fesm2022/ng-json-render-primitives.mjs

@@ -0,0 +1,986 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component, model, inject } from '@angular/core';
+import { JR_CONTEXT, defineRegistry } from '@ng-json-render/core';
+
+/** Centered, max-width page container. */
+class JrContainer {
+    maxWidth = input(960, ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
+    maxWidthValue = computed(() => {
+        const w = this.maxWidth();
+        return typeof w === 'number' ? `${w}px` : w;
+    }, ...(ngDevMode ? [{ debugName: "maxWidthValue" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrContainer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JrContainer, isStandalone: true, selector: "jr-container", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.max-width": "maxWidthValue()", "style.margin-inline": "\"auto\"" }, classAttribute: "block w-full" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrContainer, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'jr-container',
+                    template: `<ng-content />`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'block w-full',
+                        '[style.max-width]': 'maxWidthValue()',
+                        '[style.margin-inline]': '"auto"',
+                    },
+                }]
+        }], propDecorators: { maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }] } });
+/** Flexbox stack (row or column) with configurable gap and alignment. */
+class JrStack {
+    direction = input('column', ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    gap = input(12, ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
+    align = input(...(ngDevMode ? [undefined, { debugName: "align" }] : /* istanbul ignore next */ []));
+    justify = input(...(ngDevMode ? [undefined, { debugName: "justify" }] : /* istanbul ignore next */ []));
+    wrap = input(false, ...(ngDevMode ? [{ debugName: "wrap" }] : /* istanbul ignore next */ []));
+    gapValue = computed(() => {
+        const g = this.gap();
+        return typeof g === 'number' ? `${g}px` : g;
+    }, ...(ngDevMode ? [{ debugName: "gapValue" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrStack, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JrStack, isStandalone: true, selector: "jr-stack", inputs: { direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, justify: { classPropertyName: "justify", publicName: "justify", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.flex-direction": "direction()", "style.gap": "gapValue()", "style.align-items": "align()", "style.justify-content": "justify()", "style.flex-wrap": "wrap() ? \"wrap\" : null" }, styleAttribute: "display: flex; box-sizing: border-box;" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrStack, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'jr-stack',
+                    template: `<ng-content />`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        style: 'display: flex; box-sizing: border-box;',
+                        '[style.flex-direction]': 'direction()',
+                        '[style.gap]': 'gapValue()',
+                        '[style.align-items]': 'align()',
+                        '[style.justify-content]': 'justify()',
+                        '[style.flex-wrap]': 'wrap() ? "wrap" : null',
+                    },
+                }]
+        }], propDecorators: { direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], justify: [{ type: i0.Input, args: [{ isSignal: true, alias: "justify", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }] } });
+/**
+ * Responsive grid. `columns` is the target column count at full width; the grid
+ * collapses to fewer columns as the container narrows (each column never shrinks
+ * below `minItemWidth`), so specs stay responsive without media queries.
+ */
+class JrGrid {
+    columns = input(2, ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    gap = input(16, ...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
+    /** Minimum width a column may shrink to before the grid drops a column. */
+    minItemWidth = input(200, ...(ngDevMode ? [{ debugName: "minItemWidth" }] : /* istanbul ignore next */ []));
+    gapValue = computed(() => {
+        const g = this.gap();
+        return typeof g === 'number' ? `${g}px` : g;
+    }, ...(ngDevMode ? [{ debugName: "gapValue" }] : /* istanbul ignore next */ []));
+    templateColumns = computed(() => {
+        const cols = Math.max(1, this.columns());
+        if (cols === 1)
+            return '1fr';
+        const gap = this.gapValue();
+        const min = this.minItemWidth();
+        // Width of one column when `cols` fit; `auto-fit` drops columns once this
+        // would fall below `minItemWidth`. `min(100%, …)` avoids overflow on tiny screens.
+        const ideal = `calc((100% - (${cols} - 1) * ${gap}) / ${cols})`;
+        return `repeat(auto-fit, minmax(min(100%, max(${min}px, ${ideal})), 1fr))`;
+    }, ...(ngDevMode ? [{ debugName: "templateColumns" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrGrid, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JrGrid, isStandalone: true, selector: "jr-grid", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, minItemWidth: { classPropertyName: "minItemWidth", publicName: "minItemWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.grid-template-columns": "templateColumns()", "style.gap": "gapValue()" }, styleAttribute: "display: grid; box-sizing: border-box;" }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrGrid, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'jr-grid',
+                    template: `<ng-content />`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        style: 'display: grid; box-sizing: border-box;',
+                        '[style.grid-template-columns]': 'templateColumns()',
+                        '[style.gap]': 'gapValue()',
+                    },
+                }]
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], minItemWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minItemWidth", required: false }] }] } });
+/** Bordered surface with an optional title/subtitle. */
+class JrCard {
+    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
+    subtitle = input(...(ngDevMode ? [undefined, { debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrCard, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JrCard, isStandalone: true, selector: "jr-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block rounded-xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900" }, ngImport: i0, template: `
+    @if (title() || subtitle()) {
+      <div class="mb-3">
+        @if (title()) {
+          <div
+            class="text-sm font-semibold text-zinc-900 dark:text-zinc-100"
+          >
+            {{ title() }}
+          </div>
+        }
+        @if (subtitle()) {
+          <div class="text-xs text-zinc-500 dark:text-zinc-400">
+            {{ subtitle() }}
+          </div>
+        }
+      </div>
+    }
+    <ng-content />
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrCard, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'jr-card',
+                    template: `
+    @if (title() || subtitle()) {
+      <div class="mb-3">
+        @if (title()) {
+          <div
+            class="text-sm font-semibold text-zinc-900 dark:text-zinc-100"
+          >
+            {{ title() }}
+          </div>
+        }
+        @if (subtitle()) {
+          <div class="text-xs text-zinc-500 dark:text-zinc-400">
+            {{ subtitle() }}
+          </div>
+        }
+      </div>
+    }
+    <ng-content />
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'block rounded-xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900',
+                    },
+                }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }] } });
+/** Horizontal rule. */
+class JrDivider {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrDivider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: JrDivider, isStandalone: true, selector: "jr-divider", host: { attributes: { "role": "separator" }, classAttribute: "block border-t border-zinc-200 dark:border-zinc-800" }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrDivider, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'jr-divider',
+                    template: '',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'block border-t border-zinc-200 dark:border-zinc-800',
+                        role: 'separator',
+                    },
+                }]
+        }] });
+
+/** Section heading (levels 1–4). */
+class JrHeading {
+    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    level = input(2, ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
+    sizeClass = computed(() => {
+        const base = 'block font-semibold tracking-tight text-zinc-900 dark:text-zinc-50 ';
+        return (base +
+            { 1: 'text-3xl', 2: 'text-2xl', 3: 'text-lg', 4: 'text-base' }[this.level()]);
+    }, ...(ngDevMode ? [{ debugName: "sizeClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrHeading, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JrHeading, isStandalone: true, selector: "jr-heading", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "sizeClass()" } }, ngImport: i0, template: `{{ value() }}<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrHeading, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'jr-heading',
+                    template: `{{ value() }}<ng-content />`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'sizeClass()',
+                    },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], level: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }] } });
+/** Body text. */
+class JrText {
+    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    weight = input('normal', ...(ngDevMode ? [{ debugName: "weight" }] : /* istanbul ignore next */ []));
+    size = input('base', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrText, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JrText, isStandalone: true, selector: "jr-text", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.font-medium": "weight() === \"medium\"", "class.font-semibold": "weight() === \"bold\"", "class.text-sm": "size() === \"sm\"", "class.text-xs": "size() === \"xs\"", "class.text-lg": "size() === \"lg\"" }, classAttribute: "text-zinc-600 dark:text-zinc-300" }, ngImport: i0, template: `{{ value() }}<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrText, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'jr-text',
+                    template: `{{ value() }}<ng-content />`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'text-zinc-600 dark:text-zinc-300',
+                        '[class.font-medium]': 'weight() === "medium"',
+                        '[class.font-semibold]': 'weight() === "bold"',
+                        '[class.text-sm]': 'size() === "sm"',
+                        '[class.text-xs]': 'size() === "xs"',
+                        '[class.text-lg]': 'size() === "lg"',
+                    },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], weight: [{ type: i0.Input, args: [{ isSignal: true, alias: "weight", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+const BADGE_TONES = {
+    neutral: 'bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300',
+    success: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-400',
+    warning: 'bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-400',
+    danger: 'bg-red-100 text-red-700 dark:bg-red-500/15 dark:text-red-400',
+    info: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-500/15 dark:text-indigo-300',
+};
+/** Small status pill. */
+class JrBadge {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    tone = input('neutral', ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    toneClass = computed(() => 'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ' +
+        (BADGE_TONES[this.tone()] ?? BADGE_TONES['neutral']), ...(ngDevMode ? [{ debugName: "toneClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JrBadge, isStandalone: true, selector: "jr-badge", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "toneClass()" } }, ngImport: i0, template: `{{ label() }}<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrBadge, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'jr-badge',
+                    template: `{{ label() }}<ng-content />`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        '[class]': 'toneClass()',
+                    },
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }] } });
+/** KPI tile: a big value with a label and an optional delta. */
+class JrStat {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    delta = input(null, ...(ngDevMode ? [{ debugName: "delta" }] : /* istanbul ignore next */ []));
+    absDelta = computed(() => Math.abs(this.delta() ?? 0), ...(ngDevMode ? [{ debugName: "absDelta" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrStat, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JrStat, isStandalone: true, selector: "jr-stat", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, delta: { classPropertyName: "delta", publicName: "delta", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <div class="text-sm font-medium text-zinc-500 dark:text-zinc-400">
+      {{ label() }}
+    </div>
+    <div class="mt-1 flex items-baseline gap-2">
+      <span class="text-2xl font-semibold text-zinc-900 dark:text-zinc-50">
+        {{ value() }}
+      </span>
+      @if (delta() !== null) {
+        <span
+          class="text-xs font-medium"
+          [class.text-emerald-600]="(delta() ?? 0) >= 0"
+          [class.text-red-600]="(delta() ?? 0) < 0"
+        >
+          {{ (delta() ?? 0) >= 0 ? '▲' : '▼' }} {{ absDelta() }}%
+        </span>
+      }
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrStat, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'jr-stat',
+                    template: `
+    <div class="text-sm font-medium text-zinc-500 dark:text-zinc-400">
+      {{ label() }}
+    </div>
+    <div class="mt-1 flex items-baseline gap-2">
+      <span class="text-2xl font-semibold text-zinc-900 dark:text-zinc-50">
+        {{ value() }}
+      </span>
+      @if (delta() !== null) {
+        <span
+          class="text-xs font-medium"
+          [class.text-emerald-600]="(delta() ?? 0) >= 0"
+          [class.text-red-600]="(delta() ?? 0) < 0"
+        >
+          {{ (delta() ?? 0) >= 0 ? '▲' : '▼' }} {{ absDelta() }}%
+        </span>
+      }
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'block' },
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], delta: [{ type: i0.Input, args: [{ isSignal: true, alias: "delta", required: false }] }] } });
+
+const ALERT_TONES = {
+    info: 'border-indigo-200 bg-indigo-50 text-indigo-800 dark:border-indigo-500/30 dark:bg-indigo-500/10 dark:text-indigo-200',
+    success: 'border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-500/30 dark:bg-emerald-500/10 dark:text-emerald-200',
+    warning: 'border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-200',
+    danger: 'border-red-200 bg-red-50 text-red-800 dark:border-red-500/30 dark:bg-red-500/10 dark:text-red-200',
+};
+/** Inline callout / alert banner. */
+class JrAlert {
+    title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
+    message = input('', ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    tone = input('info', ...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
+    toneClass = computed(() => 'block rounded-lg border px-4 py-3 ' +
+        (ALERT_TONES[this.tone()] ?? ALERT_TONES['info']), ...(ngDevMode ? [{ debugName: "toneClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrAlert, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JrAlert, isStandalone: true, selector: "jr-alert", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "alert" }, properties: { "class": "toneClass()" } }, ngImport: i0, template: `
+    @if (title()) {
+      <div class="font-medium">{{ title() }}</div>
+    }
+    <div class="text-sm" [class.mt-0.5]="!!title()">
+      {{ message() }}<ng-content />
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrAlert, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'jr-alert',
+                    template: `
+    @if (title()) {
+      <div class="font-medium">{{ title() }}</div>
+    }
+    <div class="text-sm" [class.mt-0.5]="!!title()">
+      {{ message() }}<ng-content />
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        role: 'alert',
+                        '[class]': 'toneClass()',
+                    },
+                }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }] } });
+/** Determinate progress bar (0–100). */
+class JrProgress {
+    value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    clamped = computed(() => Math.max(0, Math.min(100, Math.round(this.value()))), ...(ngDevMode ? [{ debugName: "clamped" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrProgress, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JrProgress, isStandalone: true, selector: "jr-progress", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <div
+      class="h-2 w-full overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-800"
+    >
+      <div
+        class="h-full rounded-full bg-indigo-600 transition-[width] duration-300"
+        [style.width.%]="clamped()"
+      ></div>
+    </div>
+    @if (label()) {
+      <div class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">
+        {{ label() }} · {{ clamped() }}%
+      </div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrProgress, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'jr-progress',
+                    template: `
+    <div
+      class="h-2 w-full overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-800"
+    >
+      <div
+        class="h-full rounded-full bg-indigo-600 transition-[width] duration-300"
+        [style.width.%]="clamped()"
+      ></div>
+    </div>
+    @if (label()) {
+      <div class="mt-1 text-xs text-zinc-500 dark:text-zinc-400">
+        {{ label() }} · {{ clamped() }}%
+      </div>
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'block' },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
+/** Responsive CSS bar chart (no chart library). */
+class JrBarChart {
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    height = input(160, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    max = computed(() => Math.max(1, ...this.data().map((d) => d.value)), ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    pct(value) {
+        return Math.max(2, (value / this.max()) * 100);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrBarChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JrBarChart, isStandalone: true, selector: "jr-bar-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <div class="flex items-end gap-2" [style.height.px]="height()">
+      @for (d of data(); track $index) {
+        <div class="flex h-full flex-1 items-end">
+          <div
+            class="w-full rounded-t-md bg-indigo-500 transition-[height] duration-300 dark:bg-indigo-400"
+            [style.height.%]="pct(d.value)"
+            [title]="d.label + ': ' + d.value"
+          ></div>
+        </div>
+      }
+    </div>
+    <div class="mt-1.5 flex gap-2">
+      @for (d of data(); track $index) {
+        <div
+          class="flex-1 truncate text-center text-xs text-zinc-500 dark:text-zinc-400"
+        >
+          {{ d.label }}
+        </div>
+      }
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrBarChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'jr-bar-chart',
+                    template: `
+    <div class="flex items-end gap-2" [style.height.px]="height()">
+      @for (d of data(); track $index) {
+        <div class="flex h-full flex-1 items-end">
+          <div
+            class="w-full rounded-t-md bg-indigo-500 transition-[height] duration-300 dark:bg-indigo-400"
+            [style.height.%]="pct(d.value)"
+            [title]="d.label + ': ' + d.value"
+          ></div>
+        </div>
+      }
+    </div>
+    <div class="mt-1.5 flex gap-2">
+      @for (d of data(); track $index) {
+        <div
+          class="flex-1 truncate text-center text-xs text-zinc-500 dark:text-zinc-400"
+        >
+          {{ d.label }}
+        </div>
+      }
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'block' },
+                }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
+/** Responsive SVG line/area chart (no chart library). */
+class JrLineChart {
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    height = input(120, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    geom = computed(() => {
+        const d = this.data();
+        if (d.length < 2)
+            return { line: '', area: '' };
+        const w = 300;
+        const h = 100;
+        const max = Math.max(...d);
+        const min = Math.min(...d);
+        const range = max - min || 1;
+        const step = w / (d.length - 1);
+        const pts = d.map((v, i) => {
+            const x = i * step;
+            const y = h - ((v - min) / range) * (h * 0.9) - h * 0.05;
+            return `${x.toFixed(1)},${y.toFixed(1)}`;
+        });
+        return { line: pts.join(' '), area: `0,${h} ${pts.join(' ')} ${w},${h}` };
+    }, ...(ngDevMode ? [{ debugName: "geom" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrLineChart, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JrLineChart, isStandalone: true, selector: "jr-line-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <svg
+      viewBox="0 0 300 100"
+      preserveAspectRatio="none"
+      class="w-full"
+      [style.height.px]="height()"
+      aria-hidden="true"
+    >
+      @if (geom().line) {
+        <polygon
+          [attr.points]="geom().area"
+          class="fill-indigo-500/10 dark:fill-indigo-400/10"
+        />
+        <polyline
+          [attr.points]="geom().line"
+          fill="none"
+          class="stroke-indigo-500 dark:stroke-indigo-400"
+          stroke-width="2"
+          stroke-linejoin="round"
+          stroke-linecap="round"
+          vector-effect="non-scaling-stroke"
+        />
+      }
+    </svg>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrLineChart, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'jr-line-chart',
+                    template: `
+    <svg
+      viewBox="0 0 300 100"
+      preserveAspectRatio="none"
+      class="w-full"
+      [style.height.px]="height()"
+      aria-hidden="true"
+    >
+      @if (geom().line) {
+        <polygon
+          [attr.points]="geom().area"
+          class="fill-indigo-500/10 dark:fill-indigo-400/10"
+        />
+        <polyline
+          [attr.points]="geom().line"
+          fill="none"
+          class="stroke-indigo-500 dark:stroke-indigo-400"
+          stroke-width="2"
+          stroke-linejoin="round"
+          stroke-linecap="round"
+          vector-effect="non-scaling-stroke"
+        />
+      }
+    </svg>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'block' },
+                }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
+
+/** Simple data table. */
+class JrTable {
+    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    rows = input([], ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    cols = computed(() => this.columns().map((c) => typeof c === 'string'
+        ? { key: c, label: c }
+        : { key: c.key, label: c.label ?? c.key }), ...(ngDevMode ? [{ debugName: "cols" }] : /* istanbul ignore next */ []));
+    cell(row, key) {
+        const v = row[key];
+        return v == null ? '' : String(v);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrTable, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JrTable, isStandalone: true, selector: "jr-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <div
+      class="overflow-x-auto rounded-xl border border-zinc-200 dark:border-zinc-800"
+    >
+      <table class="w-full border-collapse text-sm">
+        <thead>
+          <tr class="bg-zinc-50 dark:bg-zinc-800/50">
+            @for (col of cols(); track col.key) {
+              <th
+                class="px-4 py-2.5 text-left font-medium text-zinc-500 dark:text-zinc-400"
+              >
+                {{ col.label }}
+              </th>
+            }
+          </tr>
+        </thead>
+        <tbody>
+          @for (row of rows(); track $index) {
+            <tr
+              class="border-t border-zinc-100 dark:border-zinc-800/70"
+            >
+              @for (col of cols(); track col.key) {
+                <td class="px-4 py-2.5 text-zinc-700 dark:text-zinc-300">
+                  {{ cell(row, col.key) }}
+                </td>
+              }
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrTable, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'jr-table',
+                    template: `
+    <div
+      class="overflow-x-auto rounded-xl border border-zinc-200 dark:border-zinc-800"
+    >
+      <table class="w-full border-collapse text-sm">
+        <thead>
+          <tr class="bg-zinc-50 dark:bg-zinc-800/50">
+            @for (col of cols(); track col.key) {
+              <th
+                class="px-4 py-2.5 text-left font-medium text-zinc-500 dark:text-zinc-400"
+              >
+                {{ col.label }}
+              </th>
+            }
+          </tr>
+        </thead>
+        <tbody>
+          @for (row of rows(); track $index) {
+            <tr
+              class="border-t border-zinc-100 dark:border-zinc-800/70"
+            >
+              @for (col of cols(); track col.key) {
+                <td class="px-4 py-2.5 text-zinc-700 dark:text-zinc-300">
+                  {{ cell(row, col.key) }}
+                </td>
+              }
+            </tr>
+          }
+        </tbody>
+      </table>
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'block' },
+                }]
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }] } });
+
+// Note: these controls expose a `value` / `checked` model(), which *structurally*
+// satisfies Angular's Signal Forms `FormValueControl` / `FormCheckboxControl`
+// contracts — so on Angular 21 they work with the `[field]` directive — without
+// importing `@angular/forms/signals`, keeping the package usable on Angular 19+.
+const FIELD_LABEL = 'text-sm font-medium text-zinc-700 dark:text-zinc-300';
+const CONTROL = 'w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 shadow-sm outline-none placeholder:text-zinc-400 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500/30 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100';
+/**
+ * Text input. A Signal Forms Signal Forms value control — usable with the `[field]`
+ * directive, or driven by `$bindState` through the renderer.
+ */
+class JrInput {
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    hint = input(...(ngDevMode ? [undefined, { debugName: "hint" }] : /* istanbul ignore next */ []));
+    labelClass = FIELD_LABEL;
+    controlClass = CONTROL;
+    read(e) {
+        return e.target.value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JrInput, isStandalone: true, selector: "jr-input", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <label class="flex flex-col gap-1.5">
+      @if (label()) {
+        <span [class]="labelClass">{{ label() }}</span>
+      }
+      <input
+        [type]="type()"
+        [value]="value()"
+        [placeholder]="placeholder()"
+        [class]="controlClass"
+        (input)="value.set(read($event))"
+      />
+      @if (hint()) {
+        <span class="text-xs text-zinc-500 dark:text-zinc-400">{{
+          hint()
+        }}</span>
+      }
+    </label>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrInput, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'jr-input',
+                    template: `
+    <label class="flex flex-col gap-1.5">
+      @if (label()) {
+        <span [class]="labelClass">{{ label() }}</span>
+      }
+      <input
+        [type]="type()"
+        [value]="value()"
+        [placeholder]="placeholder()"
+        [class]="controlClass"
+        (input)="value.set(read($event))"
+      />
+      @if (hint()) {
+        <span class="text-xs text-zinc-500 dark:text-zinc-400">{{
+          hint()
+        }}</span>
+      }
+    </label>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'block' },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }] } });
+/** Multi-line text input (Signal Forms value control). */
+class JrTextarea {
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    rows = input(3, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    labelClass = FIELD_LABEL;
+    controlClass = CONTROL;
+    read(e) {
+        return e.target.value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrTextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JrTextarea, isStandalone: true, selector: "jr-textarea", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <label class="flex flex-col gap-1.5">
+      @if (label()) {
+        <span [class]="labelClass">{{ label() }}</span>
+      }
+      <textarea
+        [value]="value()"
+        [placeholder]="placeholder()"
+        [rows]="rows()"
+        [class]="controlClass"
+        (input)="value.set(read($event))"
+      ></textarea>
+    </label>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrTextarea, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'jr-textarea',
+                    template: `
+    <label class="flex flex-col gap-1.5">
+      @if (label()) {
+        <span [class]="labelClass">{{ label() }}</span>
+      }
+      <textarea
+        [value]="value()"
+        [placeholder]="placeholder()"
+        [rows]="rows()"
+        [class]="controlClass"
+        (input)="value.set(read($event))"
+      ></textarea>
+    </label>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'block' },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }] } });
+/** Dropdown select (Signal Forms value control). */
+class JrSelect {
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input(...(ngDevMode ? [undefined, { debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    labelClass = FIELD_LABEL;
+    controlClass = CONTROL;
+    normalized = computed(() => this.options().map((o) => typeof o === 'string'
+        ? { value: o, label: o }
+        : { value: o.value, label: o.label ?? o.value }), ...(ngDevMode ? [{ debugName: "normalized" }] : /* istanbul ignore next */ []));
+    read(e) {
+        return e.target.value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: JrSelect, isStandalone: true, selector: "jr-select", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <label class="flex flex-col gap-1.5">
+      @if (label()) {
+        <span [class]="labelClass">{{ label() }}</span>
+      }
+      <select
+        [value]="value()"
+        [class]="controlClass"
+        (change)="value.set(read($event))"
+      >
+        @if (placeholder()) {
+          <option value="" disabled>{{ placeholder() }}</option>
+        }
+        @for (opt of normalized(); track opt.value) {
+          <option [value]="opt.value">{{ opt.label }}</option>
+        }
+      </select>
+    </label>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrSelect, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'jr-select',
+                    template: `
+    <label class="flex flex-col gap-1.5">
+      @if (label()) {
+        <span [class]="labelClass">{{ label() }}</span>
+      }
+      <select
+        [value]="value()"
+        [class]="controlClass"
+        (change)="value.set(read($event))"
+      >
+        @if (placeholder()) {
+          <option value="" disabled>{{ placeholder() }}</option>
+        }
+        @for (opt of normalized(); track opt.value) {
+          <option [value]="opt.value">{{ opt.label }}</option>
+        }
+      </select>
+    </label>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'block' },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
+/** Checkbox (Signal Forms checkbox control). */
+class JrCheckbox {
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    read(e) {
+        return e.target.checked;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JrCheckbox, isStandalone: true, selector: "jr-checkbox", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <label class="flex cursor-pointer items-center gap-2.5">
+      <input
+        type="checkbox"
+        class="h-4 w-4 rounded border-zinc-300 text-indigo-600 focus:ring-indigo-500/40 dark:border-zinc-600 dark:bg-zinc-800"
+        [checked]="checked()"
+        (change)="checked.set(read($event))"
+      />
+      <span class="text-sm text-zinc-700 dark:text-zinc-300">{{
+        label()
+      }}</span>
+    </label>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrCheckbox, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'jr-checkbox',
+                    template: `
+    <label class="flex cursor-pointer items-center gap-2.5">
+      <input
+        type="checkbox"
+        class="h-4 w-4 rounded border-zinc-300 text-indigo-600 focus:ring-indigo-500/40 dark:border-zinc-600 dark:bg-zinc-800"
+        [checked]="checked()"
+        (change)="checked.set(read($event))"
+      />
+      <span class="text-sm text-zinc-700 dark:text-zinc-300">{{
+        label()
+      }}</span>
+    </label>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'block' },
+                }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+/** Toggle switch (Signal Forms checkbox control). */
+class JrSwitch {
+    checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrSwitch, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JrSwitch, isStandalone: true, selector: "jr-switch", inputs: { checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, host: { classAttribute: "block" }, ngImport: i0, template: `
+    <div class="flex cursor-pointer items-center justify-between gap-3">
+      <span class="text-sm text-zinc-700 dark:text-zinc-300">{{
+        label()
+      }}</span>
+      <button
+        type="button"
+        role="switch"
+        [attr.aria-checked]="checked()"
+        (click)="checked.set(!checked())"
+        class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
+        [class.bg-indigo-600]="checked()"
+        [class.bg-zinc-300]="!checked()"
+        [class.dark:bg-zinc-700]="!checked()"
+      >
+        <span
+          class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
+          [class.translate-x-6]="checked()"
+          [class.translate-x-1]="!checked()"
+        ></span>
+      </button>
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrSwitch, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'jr-switch',
+                    template: `
+    <div class="flex cursor-pointer items-center justify-between gap-3">
+      <span class="text-sm text-zinc-700 dark:text-zinc-300">{{
+        label()
+      }}</span>
+      <button
+        type="button"
+        role="switch"
+        [attr.aria-checked]="checked()"
+        (click)="checked.set(!checked())"
+        class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
+        [class.bg-indigo-600]="checked()"
+        [class.bg-zinc-300]="!checked()"
+        [class.dark:bg-zinc-700]="!checked()"
+      >
+        <span
+          class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
+          [class.translate-x-6]="checked()"
+          [class.translate-x-1]="!checked()"
+        ></span>
+      </button>
+    </div>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'block' },
+                }]
+        }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+const BUTTON_VARIANTS = {
+    primary: 'bg-indigo-600 text-white hover:bg-indigo-500 focus-visible:ring-indigo-500/40',
+    secondary: 'border border-zinc-300 bg-white text-zinc-800 hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:bg-zinc-800',
+    ghost: 'text-zinc-700 hover:bg-zinc-100 dark:text-zinc-200 dark:hover:bg-zinc-800',
+    danger: 'bg-red-600 text-white hover:bg-red-500 focus-visible:ring-red-500/40',
+};
+/** Button that emits the `press` action. */
+class JrButton {
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    ctx = inject(JR_CONTEXT);
+    buttonClass = computed(() => 'inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium transition-colors outline-none focus-visible:ring-2 disabled:opacity-50 disabled:pointer-events-none ' +
+        (BUTTON_VARIANTS[this.variant()] ?? BUTTON_VARIANTS['primary']), ...(ngDevMode ? [{ debugName: "buttonClass" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.17", type: JrButton, isStandalone: true, selector: "jr-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "inline-block" }, ngImport: i0, template: `
+    <button
+      type="button"
+      [class]="buttonClass()"
+      [disabled]="disabled()"
+      (click)="ctx.emit('press')"
+    >
+      {{ label() }}<ng-content />
+    </button>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: JrButton, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'jr-button',
+                    template: `
+    <button
+      type="button"
+      [class]="buttonClass()"
+      [disabled]="disabled()"
+      (click)="ctx.emit('press')"
+    >
+      {{ label() }}<ng-content />
+    </button>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { class: 'inline-block' },
+                }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+
+/**
+ * Registry of all built-in primitive components, keyed by catalog `type`.
+ * Pass to `<jr-renderer [registry]="primitivesRegistry">` or
+ * `provideJsonRender({ registry: primitivesRegistry })`.
+ */
+const primitivesRegistry = defineRegistry({
+    // layout
+    Container: JrContainer,
+    Stack: JrStack,
+    Grid: JrGrid,
+    Card: JrCard,
+    Divider: JrDivider,
+    // content
+    Heading: JrHeading,
+    Text: JrText,
+    Badge: JrBadge,
+    Stat: JrStat,
+    // feedback
+    Alert: JrAlert,
+    Progress: JrProgress,
+    // data
+    Table: JrTable,
+    BarChart: JrBarChart,
+    LineChart: JrLineChart,
+    // forms
+    Input: JrInput,
+    Textarea: JrTextarea,
+    Select: JrSelect,
+    Checkbox: JrCheckbox,
+    Switch: JrSwitch,
+    Button: JrButton,
+});
+
+// layout
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { JrAlert, JrBadge, JrBarChart, JrButton, JrCard, JrCheckbox, JrContainer, JrDivider, JrGrid, JrHeading, JrInput, JrLineChart, JrProgress, JrSelect, JrStack, JrStat, JrSwitch, JrTable, JrText, JrTextarea, primitivesRegistry };
+//# sourceMappingURL=ng-json-render-primitives.mjs.map