@kouji-ui/components 0.1.5 → 0.3.0

package/fesm2022/kouji-ui-components.mjs

@@ -771,6 +771,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  *   --kj-badge-dot-size      — Diameter of the leading dot (when `dot` is set).
  *   --kj-badge-dot-color     — Fill of the leading dot. Defaults to currentColor.
  *
+ * Custom colours: the `bg` / `fg` / `dotColor` inputs set these variables as
+ * inline styles on the badge span, so they win over any variant or theme rule.
+ * Use for data-driven colour maps (status pills, role badges).
+ *
  * @doc-category Library/Data display
  * @doc
  * @doc-name badge
@@ -783,14 +787,26 @@ class KjBadgeComponent {
     size = input('md', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     dot = input(false, { ...(ngDevMode ? { debugName: "dot" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Custom background — any CSS color/var(). Wins over the variant (inline style). Empty = variant colours. */
+    bg = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bg" }] : /* istanbul ignore next */ []));
+    /** Custom foreground — any CSS color/var(). Wins over the variant (inline style). */
+    fg = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fg" }] : /* istanbul ignore next */ []));
+    /** Custom dot colour (with `dot`). Defaults to currentColor via the theme. */
+    dotColor = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dotColor" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: KjBadgeComponent, isStandalone: true, selector: "kj-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: KjBadgeComponent, isStandalone: true, selector: "kj-badge", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dot: { classPropertyName: "dot", publicName: "dot", isSignal: true, isRequired: false, transformFunction: null }, bg: { classPropertyName: "bg", publicName: "bg", isSignal: true, isRequired: false, transformFunction: null }, fg: { classPropertyName: "fg", publicName: "fg", isSignal: true, isRequired: false, transformFunction: null }, dotColor: { classPropertyName: "dotColor", publicName: "dotColor", isSignal: true, isRequired: false, transformFunction: null } }, host: { styleAttribute: "display: contents;" }, ngImport: i0, template: `
     <span
       kjBadge
       class="kj-badge"
       [kjBadgeVariant]="variant()"
       [kjBadgeDot]="dot()"
       [attr.data-size]="size()"
+      [style.--kj-badge-bg]="bg() || null"
+      [style.--kj-badge-fg]="fg() || null"
+      [style.--kj-badge-dot-color]="dotColor() || null"
     >
       <ng-content />
     </span>
@@ -805,11 +821,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       [kjBadgeVariant]="variant()"
       [kjBadgeDot]="dot()"
       [attr.data-size]="size()"
+      [style.--kj-badge-bg]="bg() || null"
+      [style.--kj-badge-fg]="fg() || null"
+      [style.--kj-badge-dot-color]="dotColor() || null"
     >
       <ng-content />
     </span>
   `, encapsulation: ViewEncapsulation.None, host: { style: 'display: contents;' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@layer kj.component{.kj-badge{--kj-badge-bg: var(--kj-bg-primary);--kj-badge-fg: var(--kj-fg-on-primary);--kj-badge-border-color: transparent;--kj-badge-radius: var(--kj-radius-selector);--kj-badge-padding-x: var(--kj-space-sm);--kj-badge-padding-y: .125rem;--kj-badge-font-size: .75rem;--kj-badge-dot-size: .375rem;--kj-badge-dot-color: currentColor;display:inline-flex;align-items:center;gap:.25rem;background:var(--kj-badge-bg);color:var(--kj-badge-fg);border:var(--kj-border) solid var(--kj-badge-border-color);border-radius:var(--kj-badge-radius);padding:var(--kj-badge-padding-y) var(--kj-badge-padding-x);font:var(--kj-badge-font-size) / 1 var(--kj-font-sans);font-weight:500}.kj-badge[data-dot]:before{content:\"\";flex:none;width:var(--kj-badge-dot-size);height:var(--kj-badge-dot-size);border-radius:50%;background:var(--kj-badge-dot-color)}.kj-badge[data-variant=secondary]{--kj-badge-bg: var(--kj-bg-surface);--kj-badge-fg: var(--kj-fg-default)}.kj-badge[data-variant=destructive]{--kj-badge-bg: var(--kj-bg-danger);--kj-badge-fg: var(--kj-fg-on-danger)}.kj-badge[data-variant=outline]{--kj-badge-bg: transparent;--kj-badge-fg: var(--kj-fg-default);--kj-badge-border-color: var(--kj-border-default)}.kj-badge[data-size=xs]{--kj-badge-padding-x: .1875rem;--kj-badge-padding-y: .03125rem;--kj-badge-font-size: .5625rem}.kj-badge[data-size=sm]{--kj-badge-padding-x: .375rem;--kj-badge-padding-y: .125rem;--kj-badge-font-size: .6875rem}.kj-badge[data-size=lg]{--kj-badge-padding-x: var(--kj-space-md);--kj-badge-font-size: .875rem}}\n"] }]
-        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }] } });
+        }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], bg: [{ type: i0.Input, args: [{ isSignal: true, alias: "bg", required: false }] }], fg: [{ type: i0.Input, args: [{ isSignal: true, alias: "fg", required: false }] }], dotColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "dotColor", required: false }] }] } });
 
 /**
  * Styled wrapper around the headless `KjBreadcrumb` directive — root of the
@@ -3548,7 +3567,7 @@ class KjDatePickerComponent {
         />
       </div>
     </div>
-  `, isInline: true, styles: [".kj-date-picker{display:inline-flex;align-items:center;gap:var(--kj-space-xs);position:relative}.kj-date-picker__input{--kj-date-picker-input-height: 2.25rem;appearance:none;border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-field);padding:0 var(--kj-space-md);height:var(--kj-date-picker-input-height);font:inherit;background:var(--kj-bg-field);color:var(--kj-fg-default);min-width:12ch}.kj-date-picker[data-size=xs] .kj-date-picker__input{--kj-date-picker-input-height: 1.75rem;font-size:.75rem;padding-inline:var(--kj-space-sm);min-width:0}.kj-date-picker[data-size=sm] .kj-date-picker__input{--kj-date-picker-input-height: 2rem;font-size:.8125rem}.kj-date-picker[data-size=lg] .kj-date-picker__input{--kj-date-picker-input-height: 2.75rem;font-size:1rem}.kj-date-picker__input:focus{outline:2px solid var(--kj-border-focus);outline-offset:2px;border-color:var(--kj-border-focus)}.kj-date-picker__input[disabled]{opacity:.55;cursor:not-allowed}.kj-date-picker__panel{box-sizing:border-box;z-index:50;display:inline-block;background:var(--kj-bg-elevated);color:var(--kj-fg-default);border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-box);box-shadow:var(--kj-shadow-md);padding:var(--kj-space-sm)}.kj-date-picker__panel .kj-calendar{padding:0}.kj-date-picker__panel[hidden]{display:none}\n"], dependencies: [{ kind: "directive", type: KjDatePicker, selector: "[kjDatePicker]", inputs: ["kjValue", "kjMin", "kjMax", "kjDisabledDates", "kjLocale", "kjFirstDayOfWeek", "kjReadonly", "kjOpen"], outputs: ["kjValueChange", "kjOpenChange"], exportAs: ["kjDatePicker"] }, { kind: "directive", type: KjDatePickerTrigger, selector: "input[kjDatePickerTrigger]", exportAs: ["kjDatePickerTrigger"] }, { kind: "directive", type: KjDatePickerCalendar, selector: "[kjDatePickerCalendar]", inputs: ["kjSide", "kjAlign", "kjOffset"], exportAs: ["kjDatePickerCalendar"] }, { kind: "component", type: KjCalendarComponent, selector: "kj-calendar", inputs: ["kjValue", "kjMin", "kjMax", "kjDisabledDates", "kjLocale", "kjFirstDayOfWeek", "kjAriaLabel", "kjDisabled"], outputs: ["kjValueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: [".kj-date-picker{display:inline-flex;align-items:center;gap:var(--kj-space-xs);position:relative}.kj-date-picker__input{--kj-date-picker-input-height: 2.25rem;appearance:none;border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-field);padding:0 var(--kj-space-md);height:var(--kj-date-picker-input-height);font:inherit;background:var(--kj-bg-field);color:var(--kj-fg-default);min-width:12ch}.kj-date-picker[data-size=xs] .kj-date-picker__input{--kj-date-picker-input-height: 1.75rem;font-size:.75rem;padding-inline:var(--kj-space-sm);min-width:0}.kj-date-picker[data-size=sm] .kj-date-picker__input{--kj-date-picker-input-height: 2rem;font-size:.8125rem}.kj-date-picker[data-size=lg] .kj-date-picker__input{--kj-date-picker-input-height: 2.75rem;font-size:1rem}.kj-date-picker__input:focus{outline:2px solid var(--kj-border-focus);outline-offset:2px;border-color:var(--kj-border-focus)}.kj-date-picker__input[disabled]{opacity:.55;cursor:not-allowed}.kj-date-picker__panel{box-sizing:border-box;z-index:50;display:inline-block;background:var(--kj-bg-elevated);color:var(--kj-fg-default);border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-box);box-shadow:var(--kj-shadow-md);padding:var(--kj-space-sm)}.kj-date-picker__panel .kj-calendar{padding:0}.kj-date-picker__panel[hidden]{display:none}\n"], dependencies: [{ kind: "directive", type: KjDatePicker, selector: "[kjDatePicker]", inputs: ["kjValue", "kjMin", "kjMax", "kjDisabledDates", "kjLocale", "kjFirstDayOfWeek", "kjReadonly", "kjOpen"], outputs: ["kjValueChange", "kjOpenChange"], exportAs: ["kjDatePicker"] }, { kind: "directive", type: KjDatePickerTrigger, selector: "input[kjDatePickerTrigger]", inputs: ["kjDisplayFormat"], exportAs: ["kjDatePickerTrigger"] }, { kind: "directive", type: KjDatePickerCalendar, selector: "[kjDatePickerCalendar]", inputs: ["kjSide", "kjAlign", "kjOffset"], exportAs: ["kjDatePickerCalendar"] }, { kind: "component", type: KjCalendarComponent, selector: "kj-calendar", inputs: ["kjValue", "kjMin", "kjMax", "kjDisabledDates", "kjLocale", "kjFirstDayOfWeek", "kjAriaLabel", "kjDisabled"], outputs: ["kjValueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjDatePickerComponent, decorators: [{
             type: Component,
@@ -3599,6 +3618,209 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
   `, encapsulation: ViewEncapsulation.None, host: { class: 'kj-date-picker-host', style: 'display: contents;' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kj-date-picker{display:inline-flex;align-items:center;gap:var(--kj-space-xs);position:relative}.kj-date-picker__input{--kj-date-picker-input-height: 2.25rem;appearance:none;border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-field);padding:0 var(--kj-space-md);height:var(--kj-date-picker-input-height);font:inherit;background:var(--kj-bg-field);color:var(--kj-fg-default);min-width:12ch}.kj-date-picker[data-size=xs] .kj-date-picker__input{--kj-date-picker-input-height: 1.75rem;font-size:.75rem;padding-inline:var(--kj-space-sm);min-width:0}.kj-date-picker[data-size=sm] .kj-date-picker__input{--kj-date-picker-input-height: 2rem;font-size:.8125rem}.kj-date-picker[data-size=lg] .kj-date-picker__input{--kj-date-picker-input-height: 2.75rem;font-size:1rem}.kj-date-picker__input:focus{outline:2px solid var(--kj-border-focus);outline-offset:2px;border-color:var(--kj-border-focus)}.kj-date-picker__input[disabled]{opacity:.55;cursor:not-allowed}.kj-date-picker__panel{box-sizing:border-box;z-index:50;display:inline-block;background:var(--kj-bg-elevated);color:var(--kj-fg-default);border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-box);box-shadow:var(--kj-shadow-md);padding:var(--kj-space-sm)}.kj-date-picker__panel .kj-calendar{padding:0}.kj-date-picker__panel[hidden]{display:none}\n"] }]
         }], propDecorators: { kjValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjValue", required: false }] }, { type: i0.Output, args: ["kjValueChange"] }], kjOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjOpen", required: false }] }, { type: i0.Output, args: ["kjOpenChange"] }], kjMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjMin", required: false }] }], kjMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjMax", required: false }] }], kjDisabledDates: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjDisabledDates", required: false }] }], kjLocale: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjLocale", required: false }] }], kjFirstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjFirstDayOfWeek", required: false }] }], kjPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjPlaceholder", required: false }] }], kjReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjReadonly", required: false }] }], kjDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjDisabled", required: false }] }], kjSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSize", required: false }] }] } });
 
+/** Format a Date as a locale short date + HH:mm time. */
+function formatDateTime(d, locale) {
+    const date = new Intl.DateTimeFormat(locale || undefined, { dateStyle: 'short' }).format(d);
+    const time = new Intl.DateTimeFormat(locale || undefined, { hour: '2-digit', minute: '2-digit', hour12: false }).format(d);
+    return date + ' ' + time;
+}
+/** "HH:mm" for the panel's time input. */
+function toTimeString(d) {
+    if (!d)
+        return '';
+    const hh = String(d.getHours()).padStart(2, '0');
+    const mm = String(d.getMinutes()).padStart(2, '0');
+    return hh + ':' + mm;
+}
+/**
+ * Themed datetime picker — the date-picker's calendar popover plus a time
+ * field in the panel. Value is a single native `Date` carrying both parts.
+ *
+ * Unlike `kj-date-picker`, selecting a calendar day keeps the panel open so
+ * the time can be adjusted; the day merge preserves the current time-of-day
+ * (defaults to 09:00 for a fresh value). Close with Escape or by clicking
+ * outside.
+ *
+ * @doc-example Default
+ *   Pick a meeting date and time — a single `Date` two-way binding.
+ *   @doc-file datetime-picker.example.ts
+ *
+ * @doc-keyboard
+ *   Enter|ArrowDown — Opens the calendar popover from the trigger
+ *   Escape          — Closes the popover and returns focus to the trigger
+ *
+ * @doc-css-var
+ *   --kj-datetime-picker-input-height — Height of the trigger input. Sizes override.
+ *
+ * @doc-related date-picker,calendar,time-picker
+ *
+ * @doc-category Library/Data input
+ * @doc
+ * @doc-name datetime-picker
+ * @doc-description Themed date + time picker sharing one native Date value; calendar popover with a time field.
+ * @doc-is-main
+ */
+class KjDatetimePickerComponent {
+    /** Selected date + time. Two-way bindable — `[(kjValue)]`. `null` clears. */
+    kjValue = model(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjValue" }] : /* istanbul ignore next */ []));
+    /** Two-way bindable open state for the popover. */
+    kjOpen = model(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjOpen" }] : /* istanbul ignore next */ []));
+    /** Earliest selectable date (inclusive). */
+    kjMin = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjMin" }] : /* istanbul ignore next */ []));
+    /** Latest selectable date (inclusive). */
+    kjMax = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjMax" }] : /* istanbul ignore next */ []));
+    /** BCP-47 locale tag. Defaults to Angular's `LOCALE_ID`. */
+    kjLocale = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjLocale" }] : /* istanbul ignore next */ []));
+    /** First day of the week override (0=Sun … 6=Sat). */
+    kjFirstDayOfWeek = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjFirstDayOfWeek" }] : /* istanbul ignore next */ []));
+    /** Placeholder text for the trigger input. */
+    kjPlaceholder = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjPlaceholder" }] : /* istanbul ignore next */ []));
+    /** Label for the time row inside the panel. */
+    kjTimeLabel = input('Time', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjTimeLabel" }] : /* istanbul ignore next */ []));
+    /** Hour used when a day is picked on a previously-empty value. */
+    kjDefaultHour = input(9, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjDefaultHour" }] : /* istanbul ignore next */ []));
+    kjReadonly = input(false, { ...(ngDevMode ? { debugName: "kjReadonly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    kjDisabled = input(false, { ...(ngDevMode ? { debugName: "kjDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Size preset for the trigger input. */
+    kjSize = input('md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjSize" }] : /* istanbul ignore next */ []));
+    /** Trigger display: locale short date + HH:mm. */
+    displayFormat = formatDateTime;
+    timeText = computed(() => toTimeString(this.kjValue()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "timeText" }] : /* istanbul ignore next */ []));
+    /** Merge the picked day into the value, preserving time-of-day. Keeps the
+     *  panel open so the time can be adjusted next. */
+    onCalendarSelect(day) {
+        if (!day) {
+            this.kjValue.set(null);
+            return;
+        }
+        const prev = this.kjValue();
+        const next = new Date(day);
+        if (prev) {
+            next.setHours(prev.getHours(), prev.getMinutes(), 0, 0);
+        }
+        else {
+            next.setHours(this.kjDefaultHour(), 0, 0, 0);
+        }
+        this.kjValue.set(next);
+    }
+    /** Merge an "HH:mm" time into the value, preserving the date part. */
+    onTimeInput(event) {
+        const raw = event.target.value;
+        const match = /^(\d{2}):(\d{2})$/.exec(raw);
+        if (!match)
+            return;
+        const base = this.kjValue() ?? new Date();
+        const next = new Date(base);
+        next.setHours(Number(match[1]), Number(match[2]), 0, 0);
+        this.kjValue.set(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjDatetimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: KjDatetimePickerComponent, isStandalone: true, selector: "kj-datetime-picker", inputs: { kjValue: { classPropertyName: "kjValue", publicName: "kjValue", isSignal: true, isRequired: false, transformFunction: null }, kjOpen: { classPropertyName: "kjOpen", publicName: "kjOpen", isSignal: true, isRequired: false, transformFunction: null }, kjMin: { classPropertyName: "kjMin", publicName: "kjMin", isSignal: true, isRequired: false, transformFunction: null }, kjMax: { classPropertyName: "kjMax", publicName: "kjMax", isSignal: true, isRequired: false, transformFunction: null }, kjLocale: { classPropertyName: "kjLocale", publicName: "kjLocale", isSignal: true, isRequired: false, transformFunction: null }, kjFirstDayOfWeek: { classPropertyName: "kjFirstDayOfWeek", publicName: "kjFirstDayOfWeek", isSignal: true, isRequired: false, transformFunction: null }, kjPlaceholder: { classPropertyName: "kjPlaceholder", publicName: "kjPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, kjTimeLabel: { classPropertyName: "kjTimeLabel", publicName: "kjTimeLabel", isSignal: true, isRequired: false, transformFunction: null }, kjDefaultHour: { classPropertyName: "kjDefaultHour", publicName: "kjDefaultHour", isSignal: true, isRequired: false, transformFunction: null }, kjReadonly: { classPropertyName: "kjReadonly", publicName: "kjReadonly", isSignal: true, isRequired: false, transformFunction: null }, kjDisabled: { classPropertyName: "kjDisabled", publicName: "kjDisabled", isSignal: true, isRequired: false, transformFunction: null }, kjSize: { classPropertyName: "kjSize", publicName: "kjSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { kjValue: "kjValueChange", kjOpen: "kjOpenChange" }, host: { styleAttribute: "display: contents;", classAttribute: "kj-datetime-picker-host" }, ngImport: i0, template: `
+    <div
+      kjDatePicker
+      class="kj-datetime-picker"
+      #picker="kjDatePicker"
+      [attr.data-size]="kjSize() === 'md' ? null : kjSize()"
+      [kjValue]="kjValue() ?? null!"
+      (kjValueChange)="kjValue.set($event)"
+      [(kjOpen)]="kjOpen"
+      [kjMin]="kjMin() ?? null!"
+      [kjMax]="kjMax() ?? null!"
+      [kjLocale]="kjLocale()"
+      [kjFirstDayOfWeek]="kjFirstDayOfWeek() ?? 0"
+      [kjReadonly]="kjReadonly()"
+      [kjDisabled]="kjDisabled()"
+    >
+      <input
+        kjDatePickerTrigger
+        #trig="kjDatePickerTrigger"
+        class="kj-datetime-picker__input"
+        [kjDisplayFormat]="displayFormat"
+        [placeholder]="kjPlaceholder()"
+      />
+      <div kjDatePickerCalendar [kjFor]="trig" class="kj-datetime-picker__panel">
+        <kj-calendar
+          [kjValue]="kjValue()"
+          [kjMin]="kjMin()"
+          [kjMax]="kjMax()"
+          [kjLocale]="kjLocale()"
+          [kjFirstDayOfWeek]="kjFirstDayOfWeek() ?? 0"
+          (kjValueChange)="onCalendarSelect($event)"
+        />
+        <label class="kj-datetime-picker__time">
+          <span class="kj-datetime-picker__time-label">{{ kjTimeLabel() }}</span>
+          <input
+            type="time"
+            class="kj-datetime-picker__time-input"
+            [value]="timeText()"
+            [disabled]="kjDisabled()"
+            (change)="onTimeInput($event)"
+          />
+        </label>
+      </div>
+    </div>
+  `, isInline: true, styles: [".kj-datetime-picker{display:inline-flex;align-items:center;gap:var(--kj-space-xs);position:relative}.kj-datetime-picker__input{--kj-datetime-picker-input-height: 2.25rem;appearance:none;border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-field);padding:0 var(--kj-space-md);height:var(--kj-datetime-picker-input-height);font:inherit;background:var(--kj-bg-field);color:var(--kj-fg-default);width:19ch;min-width:0}.kj-datetime-picker[data-size=xs] .kj-datetime-picker__input{--kj-datetime-picker-input-height: 1.75rem;font-size:.75rem;padding-inline:var(--kj-space-sm);min-width:0}.kj-datetime-picker[data-size=sm] .kj-datetime-picker__input{--kj-datetime-picker-input-height: 2rem;font-size:.8125rem}.kj-datetime-picker[data-size=lg] .kj-datetime-picker__input{--kj-datetime-picker-input-height: 2.75rem;font-size:1rem}.kj-datetime-picker__input:focus{outline:2px solid var(--kj-border-focus);outline-offset:2px;border-color:var(--kj-border-focus)}.kj-datetime-picker__input[disabled]{opacity:.55;cursor:not-allowed}.kj-datetime-picker__panel{box-sizing:border-box;z-index:50;display:inline-block;background:var(--kj-bg-elevated);color:var(--kj-fg-default);border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-box);box-shadow:var(--kj-shadow-md);padding:var(--kj-space-sm)}.kj-datetime-picker__panel .kj-calendar{padding:0}.kj-datetime-picker__panel[hidden]{display:none}.kj-datetime-picker__time{display:flex;align-items:center;justify-content:space-between;gap:var(--kj-space-sm);margin-top:var(--kj-space-sm);padding:var(--kj-space-sm) var(--kj-space-xs) 0;border-top:var(--kj-border) solid var(--kj-border-muted);font-size:.8125rem;color:var(--kj-fg-muted)}.kj-datetime-picker__time-input{appearance:none;border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-field);background:var(--kj-bg-field);color:var(--kj-fg-default);font:inherit;font-size:.8125rem;padding:2px var(--kj-space-sm)}.kj-datetime-picker__time-input:focus{outline:2px solid var(--kj-border-focus);outline-offset:1px}\n"], dependencies: [{ kind: "directive", type: KjDatePicker, selector: "[kjDatePicker]", inputs: ["kjValue", "kjMin", "kjMax", "kjDisabledDates", "kjLocale", "kjFirstDayOfWeek", "kjReadonly", "kjOpen"], outputs: ["kjValueChange", "kjOpenChange"], exportAs: ["kjDatePicker"] }, { kind: "directive", type: KjDatePickerTrigger, selector: "input[kjDatePickerTrigger]", inputs: ["kjDisplayFormat"], exportAs: ["kjDatePickerTrigger"] }, { kind: "directive", type: KjDatePickerCalendar, selector: "[kjDatePickerCalendar]", inputs: ["kjSide", "kjAlign", "kjOffset"], exportAs: ["kjDatePickerCalendar"] }, { kind: "component", type: KjCalendarComponent, selector: "kj-calendar", inputs: ["kjValue", "kjMin", "kjMax", "kjDisabledDates", "kjLocale", "kjFirstDayOfWeek", "kjAriaLabel", "kjDisabled"], outputs: ["kjValueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjDatetimePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kj-datetime-picker', standalone: true, imports: [KjDatePicker, KjDatePickerTrigger, KjDatePickerCalendar, KjCalendarComponent], template: `
+    <div
+      kjDatePicker
+      class="kj-datetime-picker"
+      #picker="kjDatePicker"
+      [attr.data-size]="kjSize() === 'md' ? null : kjSize()"
+      [kjValue]="kjValue() ?? null!"
+      (kjValueChange)="kjValue.set($event)"
+      [(kjOpen)]="kjOpen"
+      [kjMin]="kjMin() ?? null!"
+      [kjMax]="kjMax() ?? null!"
+      [kjLocale]="kjLocale()"
+      [kjFirstDayOfWeek]="kjFirstDayOfWeek() ?? 0"
+      [kjReadonly]="kjReadonly()"
+      [kjDisabled]="kjDisabled()"
+    >
+      <input
+        kjDatePickerTrigger
+        #trig="kjDatePickerTrigger"
+        class="kj-datetime-picker__input"
+        [kjDisplayFormat]="displayFormat"
+        [placeholder]="kjPlaceholder()"
+      />
+      <div kjDatePickerCalendar [kjFor]="trig" class="kj-datetime-picker__panel">
+        <kj-calendar
+          [kjValue]="kjValue()"
+          [kjMin]="kjMin()"
+          [kjMax]="kjMax()"
+          [kjLocale]="kjLocale()"
+          [kjFirstDayOfWeek]="kjFirstDayOfWeek() ?? 0"
+          (kjValueChange)="onCalendarSelect($event)"
+        />
+        <label class="kj-datetime-picker__time">
+          <span class="kj-datetime-picker__time-label">{{ kjTimeLabel() }}</span>
+          <input
+            type="time"
+            class="kj-datetime-picker__time-input"
+            [value]="timeText()"
+            [disabled]="kjDisabled()"
+            (change)="onTimeInput($event)"
+          />
+        </label>
+      </div>
+    </div>
+  `, encapsulation: ViewEncapsulation.None, host: { class: 'kj-datetime-picker-host', style: 'display: contents;' }, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".kj-datetime-picker{display:inline-flex;align-items:center;gap:var(--kj-space-xs);position:relative}.kj-datetime-picker__input{--kj-datetime-picker-input-height: 2.25rem;appearance:none;border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-field);padding:0 var(--kj-space-md);height:var(--kj-datetime-picker-input-height);font:inherit;background:var(--kj-bg-field);color:var(--kj-fg-default);width:19ch;min-width:0}.kj-datetime-picker[data-size=xs] .kj-datetime-picker__input{--kj-datetime-picker-input-height: 1.75rem;font-size:.75rem;padding-inline:var(--kj-space-sm);min-width:0}.kj-datetime-picker[data-size=sm] .kj-datetime-picker__input{--kj-datetime-picker-input-height: 2rem;font-size:.8125rem}.kj-datetime-picker[data-size=lg] .kj-datetime-picker__input{--kj-datetime-picker-input-height: 2.75rem;font-size:1rem}.kj-datetime-picker__input:focus{outline:2px solid var(--kj-border-focus);outline-offset:2px;border-color:var(--kj-border-focus)}.kj-datetime-picker__input[disabled]{opacity:.55;cursor:not-allowed}.kj-datetime-picker__panel{box-sizing:border-box;z-index:50;display:inline-block;background:var(--kj-bg-elevated);color:var(--kj-fg-default);border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-box);box-shadow:var(--kj-shadow-md);padding:var(--kj-space-sm)}.kj-datetime-picker__panel .kj-calendar{padding:0}.kj-datetime-picker__panel[hidden]{display:none}.kj-datetime-picker__time{display:flex;align-items:center;justify-content:space-between;gap:var(--kj-space-sm);margin-top:var(--kj-space-sm);padding:var(--kj-space-sm) var(--kj-space-xs) 0;border-top:var(--kj-border) solid var(--kj-border-muted);font-size:.8125rem;color:var(--kj-fg-muted)}.kj-datetime-picker__time-input{appearance:none;border:var(--kj-border) solid var(--kj-border-default);border-radius:var(--kj-radius-field);background:var(--kj-bg-field);color:var(--kj-fg-default);font:inherit;font-size:.8125rem;padding:2px var(--kj-space-sm)}.kj-datetime-picker__time-input:focus{outline:2px solid var(--kj-border-focus);outline-offset:1px}\n"] }]
+        }], propDecorators: { kjValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjValue", required: false }] }, { type: i0.Output, args: ["kjValueChange"] }], kjOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjOpen", required: false }] }, { type: i0.Output, args: ["kjOpenChange"] }], kjMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjMin", required: false }] }], kjMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjMax", required: false }] }], kjLocale: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjLocale", required: false }] }], kjFirstDayOfWeek: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjFirstDayOfWeek", required: false }] }], kjPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjPlaceholder", required: false }] }], kjTimeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjTimeLabel", required: false }] }], kjDefaultHour: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjDefaultHour", required: false }] }], kjReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjReadonly", required: false }] }], kjDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjDisabled", required: false }] }], kjSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSize", required: false }] }] } });
+
 /**
  * Service-launched modal dialog. Inject `KjDialogService` and call `open()`
  * with a template; mount `[kjDialog]` once near your trigger to host the
@@ -11994,6 +12216,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 }]
         }], ctorParameters: () => [], propDecorators: { kjCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjCount", required: true }] }], kjEstimateSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjEstimateSize", required: false }] }], kjOverscan: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjOverscan", required: false }] }] } });
 
+/**
+ * Registers a custom cell template for one column of a `<kj-table>`.
+ *
+ * Declare inside the table's content with the column id, and use the template
+ * context to render arbitrary markup (badges, buttons, avatars…) instead of
+ * the default `getValue()` text:
+ *
+ * ```html
+ * <kj-table [kjData]="rows()" [kjColumns]="cols">
+ *   <ng-template kjCellTemplate="role" let-row let-value="value">
+ *     <kj-badge [bg]="roleBg(row.role)">{{ value }}</kj-badge>
+ *   </ng-template>
+ * </kj-table>
+ * ```
+ *
+ * Context: `$implicit` / `row` — the row data; `value` — `cell.getValue()`;
+ * `cell` — the TanStack cell instance.
+ *
+ * Editing, grouping, and aggregation cells keep their built-in rendering;
+ * the template applies to plain data cells only.
+ *
+ * @doc-category Library/Data display
+ * @doc
+ * @doc-name table
+ */
+class KjCellTemplateDirective {
+    /** Column id this template renders. */
+    kjCellTemplate = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "kjCellTemplate" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    template = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjCellTemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: KjCellTemplateDirective, isStandalone: true, selector: "ng-template[kjCellTemplate]", inputs: { kjCellTemplate: { classPropertyName: "kjCellTemplate", publicName: "kjCellTemplate", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjCellTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: 'ng-template[kjCellTemplate]', standalone: true }]
+        }], propDecorators: { kjCellTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjCellTemplate", required: true }] }] } });
+
 /**
  * Inline text cell editor for `<kj-table>`. Renders the styled
  * `<kj-input>` component (which wraps the headless `kjInput` directive and
@@ -13515,6 +13776,17 @@ class KjTableComponent {
     /** Template for master-detail row expansion. Receives `$implicit = row`. */
     kjRowExpansionTpl = contentChild('kjRowExpansion', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "kjRowExpansionTpl" }] : /* istanbul ignore next */ []));
+    /** Custom cell templates declared as `ng-template[kjCellTemplate]` content. */
+    cellTemplates = contentChildren(KjCellTemplateDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "cellTemplates" }] : /* istanbul ignore next */ []));
+    /** Resolve the registered template for a cell's column, if any. */
+    cellTpl(cell) {
+        for (const t of this.cellTemplates()) {
+            if (t.kjCellTemplate() === cell.column.id)
+                return t.template;
+        }
+        return null;
+    }
     // ── Outputs ─────────────────────────────────────────────────────────────
     cellEdit = output();
     stateChange = output();
@@ -13928,7 +14200,7 @@ class KjTableComponent {
         this.editingCell.set(null);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KjTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: KjTableComponent, isStandalone: true, selector: "kj-table", inputs: { kjResource: { classPropertyName: "kjResource", publicName: "kjResource", isSignal: true, isRequired: false, transformFunction: null }, kjDensity: { classPropertyName: "kjDensity", publicName: "kjDensity", isSignal: true, isRequired: false, transformFunction: null }, kjVariant: { classPropertyName: "kjVariant", publicName: "kjVariant", isSignal: true, isRequired: false, transformFunction: null }, kjLoading: { classPropertyName: "kjLoading", publicName: "kjLoading", isSignal: true, isRequired: false, transformFunction: null }, kjSelection: { classPropertyName: "kjSelection", publicName: "kjSelection", isSignal: true, isRequired: false, transformFunction: null }, kjSelectionMode: { classPropertyName: "kjSelectionMode", publicName: "kjSelectionMode", isSignal: true, isRequired: false, transformFunction: null }, kjShowSelectionColumn: { classPropertyName: "kjShowSelectionColumn", publicName: "kjShowSelectionColumn", isSignal: true, isRequired: false, transformFunction: null }, kjStorageKey: { classPropertyName: "kjStorageKey", publicName: "kjStorageKey", isSignal: true, isRequired: false, transformFunction: null }, kjStorageAdapter: { classPropertyName: "kjStorageAdapter", publicName: "kjStorageAdapter", isSignal: true, isRequired: false, transformFunction: null }, kjVirtual: { classPropertyName: "kjVirtual", publicName: "kjVirtual", isSignal: true, isRequired: false, transformFunction: null }, kjEstimatedRowSize: { classPropertyName: "kjEstimatedRowSize", publicName: "kjEstimatedRowSize", isSignal: true, isRequired: false, transformFunction: null }, kjEnableFilters: { classPropertyName: "kjEnableFilters", publicName: "kjEnableFilters", isSignal: true, isRequired: false, transformFunction: null }, kjEnableResize: { classPropertyName: "kjEnableResize", publicName: "kjEnableResize", isSignal: true, isRequired: false, transformFunction: null }, kjEnableRowPinning: { classPropertyName: "kjEnableRowPinning", publicName: "kjEnableRowPinning", isSignal: true, isRequired: false, transformFunction: null }, kjEditOnDoubleClick: { classPropertyName: "kjEditOnDoubleClick", publicName: "kjEditOnDoubleClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { kjSelection: "kjSelectionChange", cellEdit: "cellEdit", stateChange: "stateChange", rowClick: "rowClick", rowDoubleClick: "rowDoubleClick" }, host: { properties: { "attr.data-density": "t.state.density()", "attr.data-variant": "kjVariant()", "attr.data-loading": "isLoading() ? \"\" : null", "attr.data-error": "hasError() ? \"\" : null" } }, queries: [{ propertyName: "kjRowExpansionTpl", first: true, predicate: ["kjRowExpansion"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.KjTable, inputs: ["kjTable", "kjColumns", "kjTableData", "kjData", "kjGetRowId", "kjGetRowId"] }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: KjTableComponent, isStandalone: true, selector: "kj-table", inputs: { kjResource: { classPropertyName: "kjResource", publicName: "kjResource", isSignal: true, isRequired: false, transformFunction: null }, kjDensity: { classPropertyName: "kjDensity", publicName: "kjDensity", isSignal: true, isRequired: false, transformFunction: null }, kjVariant: { classPropertyName: "kjVariant", publicName: "kjVariant", isSignal: true, isRequired: false, transformFunction: null }, kjLoading: { classPropertyName: "kjLoading", publicName: "kjLoading", isSignal: true, isRequired: false, transformFunction: null }, kjSelection: { classPropertyName: "kjSelection", publicName: "kjSelection", isSignal: true, isRequired: false, transformFunction: null }, kjSelectionMode: { classPropertyName: "kjSelectionMode", publicName: "kjSelectionMode", isSignal: true, isRequired: false, transformFunction: null }, kjShowSelectionColumn: { classPropertyName: "kjShowSelectionColumn", publicName: "kjShowSelectionColumn", isSignal: true, isRequired: false, transformFunction: null }, kjStorageKey: { classPropertyName: "kjStorageKey", publicName: "kjStorageKey", isSignal: true, isRequired: false, transformFunction: null }, kjStorageAdapter: { classPropertyName: "kjStorageAdapter", publicName: "kjStorageAdapter", isSignal: true, isRequired: false, transformFunction: null }, kjVirtual: { classPropertyName: "kjVirtual", publicName: "kjVirtual", isSignal: true, isRequired: false, transformFunction: null }, kjEstimatedRowSize: { classPropertyName: "kjEstimatedRowSize", publicName: "kjEstimatedRowSize", isSignal: true, isRequired: false, transformFunction: null }, kjEnableFilters: { classPropertyName: "kjEnableFilters", publicName: "kjEnableFilters", isSignal: true, isRequired: false, transformFunction: null }, kjEnableResize: { classPropertyName: "kjEnableResize", publicName: "kjEnableResize", isSignal: true, isRequired: false, transformFunction: null }, kjEnableRowPinning: { classPropertyName: "kjEnableRowPinning", publicName: "kjEnableRowPinning", isSignal: true, isRequired: false, transformFunction: null }, kjEditOnDoubleClick: { classPropertyName: "kjEditOnDoubleClick", publicName: "kjEditOnDoubleClick", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { kjSelection: "kjSelectionChange", cellEdit: "cellEdit", stateChange: "stateChange", rowClick: "rowClick", rowDoubleClick: "rowDoubleClick" }, host: { properties: { "attr.data-density": "t.state.density()", "attr.data-variant": "kjVariant()", "attr.data-loading": "isLoading() ? \"\" : null", "attr.data-error": "hasError() ? \"\" : null" } }, queries: [{ propertyName: "kjRowExpansionTpl", first: true, predicate: ["kjRowExpansion"], descendants: true, isSignal: true }, { propertyName: "cellTemplates", predicate: KjCellTemplateDirective, isSignal: true }], hostDirectives: [{ directive: i1.KjTable, inputs: ["kjTable", "kjColumns", "kjTableData", "kjData", "kjGetRowId", "kjGetRowId"] }], ngImport: i0, template: `
     <div class="kj-table-wrapper">
       <!-- Toolbar projection: matches either an explicit [kjToolbar] marker
            OR the styled <kj-table-toolbar> element directly, so users don't
@@ -14046,7 +14318,11 @@ class KjTableComponent {
                           (editCancel)="onEditorCancel()"
                         ></span>
                       } @else {
-                        {{ c.getValue() }}
+                        @if (cellTpl(c); as tpl) {
+                          <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: r.original, row: r.original, value: c.getValue(), cell: c }" />
+                        } @else {
+                          {{ c.getValue() }}
+                        }
                       }
                     </td>
                   }
@@ -14102,7 +14378,11 @@ class KjTableComponent {
                             (editCancel)="onEditorCancel()"
                           ></span>
                         } @else {
-                          {{ c.getValue() }}
+                          @if (cellTpl(c); as tpl) {
+                            <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: r.original, row: r.original, value: c.getValue(), cell: c }" />
+                          } @else {
+                            {{ c.getValue() }}
+                          }
                         }
                       </td>
                     }
@@ -14174,7 +14454,11 @@ class KjTableComponent {
                         {{ c.renderValue() }}
                       } @else if (c.getIsPlaceholder?.()) {
                       } @else {
-                        {{ c.getValue() }}
+                        @if (cellTpl(c); as tpl) {
+                          <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: r.original, row: r.original, value: c.getValue(), cell: c }" />
+                        } @else {
+                          {{ c.getValue() }}
+                        }
                       }
                     </td>
                   }
@@ -14211,7 +14495,13 @@ class KjTableComponent {
                     </td>
                   }
                   @for (c of r.getVisibleCells(); track c.id) {
-                    <td kjTableCell [kjCell]="c" tabindex="-1">{{ c.getValue() }}</td>
+                    <td kjTableCell [kjCell]="c" tabindex="-1">
+                      @if (cellTpl(c); as tpl) {
+                        <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: r.original, row: r.original, value: c.getValue(), cell: c }" />
+                      } @else {
+                        {{ c.getValue() }}
+                      }
+                    </td>
                   }
                 </tr>
               }
@@ -14392,7 +14682,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                           (editCancel)="onEditorCancel()"
                         ></span>
                       } @else {
-                        {{ c.getValue() }}
+                        @if (cellTpl(c); as tpl) {
+                          <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: r.original, row: r.original, value: c.getValue(), cell: c }" />
+                        } @else {
+                          {{ c.getValue() }}
+                        }
                       }
                     </td>
                   }
@@ -14448,7 +14742,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                             (editCancel)="onEditorCancel()"
                           ></span>
                         } @else {
-                          {{ c.getValue() }}
+                          @if (cellTpl(c); as tpl) {
+                            <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: r.original, row: r.original, value: c.getValue(), cell: c }" />
+                          } @else {
+                            {{ c.getValue() }}
+                          }
                         }
                       </td>
                     }
@@ -14520,7 +14818,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                         {{ c.renderValue() }}
                       } @else if (c.getIsPlaceholder?.()) {
                       } @else {
-                        {{ c.getValue() }}
+                        @if (cellTpl(c); as tpl) {
+                          <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: r.original, row: r.original, value: c.getValue(), cell: c }" />
+                        } @else {
+                          {{ c.getValue() }}
+                        }
                       }
                     </td>
                   }
@@ -14557,7 +14859,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                     </td>
                   }
                   @for (c of r.getVisibleCells(); track c.id) {
-                    <td kjTableCell [kjCell]="c" tabindex="-1">{{ c.getValue() }}</td>
+                    <td kjTableCell [kjCell]="c" tabindex="-1">
+                      @if (cellTpl(c); as tpl) {
+                        <ng-container [ngTemplateOutlet]="tpl" [ngTemplateOutletContext]="{ $implicit: r.original, row: r.original, value: c.getValue(), cell: c }" />
+                      } @else {
+                        {{ c.getValue() }}
+                      }
+                    </td>
                   }
                 </tr>
               }
@@ -14592,7 +14900,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
       <ng-content />
     </div>
   `, encapsulation: ViewEncapsulation.Emulated, styles: [":host{display:flex;flex-direction:column;min-height:0;min-width:0;font-family:var(--kj-font-sans);font-size:var(--kj-text-sm);--kj-table-row-height: 2.25rem}:host([data-density=\"compact\"]){--kj-table-row-height: 1.75rem}:host([data-density=\"comfortable\"]){--kj-table-row-height: 2.75rem}.kj-table-wrapper{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;min-width:0;position:relative}.kj-table-body{position:relative;overflow:auto;display:block;flex:1 1 auto;min-height:0;min-width:0}.kj-table-body>table{min-width:100%}:host th,:host td{height:var(--kj-table-row-height)}:host table{width:100%;border-collapse:collapse;background:var(--kj-bg-surface);color:var(--kj-fg-default)}:host th,:host td{text-align:left;padding:var(--kj-base-space-sm) var(--kj-base-space-md);border-bottom:1px solid var(--kj-border-default);position:relative}:host th{font-weight:600;background:var(--kj-bg-elevated)}:host th[aria-sort]{-webkit-user-select:none;user-select:none}.kj-table-sort-indicator{display:inline-flex;align-items:center;margin-inline-start:var(--kj-base-space-xs, .25rem);color:var(--kj-fg-subtle, var(--kj-fg-muted));transition:color var(--kj-transition);vertical-align:middle}:host th[data-sort=asc] .kj-table-sort-indicator,:host th[data-sort=desc] .kj-table-sort-indicator{color:var(--kj-fg-primary)}:host th[aria-sort]:hover .kj-table-sort-indicator,:host th[aria-sort]:focus-visible .kj-table-sort-indicator{color:var(--kj-fg-default)}:host([data-density=\"compact\"]) th,:host([data-density=\"compact\"]) td{padding:var(--kj-base-space-xs) var(--kj-base-space-sm)}:host([data-density=\"comfortable\"]) th,:host([data-density=\"comfortable\"]) td{padding:var(--kj-base-space-md) var(--kj-base-space-lg)}:host([data-variant=\"striped\"]) tbody tr:nth-child(2n) td{background:var(--kj-bg-elevated)}:host([data-variant=\"clean\"]) th,:host([data-variant=\"clean\"]) td{border-bottom-color:transparent}:host td:focus-visible,:host th:focus-visible{outline:2px solid var(--kj-border-focus);outline-offset:-2px}:host td.kj-table-cell--editing{position:relative}:host td .kj-table-cell-ghost{visibility:hidden;white-space:pre;display:inline-block;pointer-events:none}:host td.kj-table-cell--editing ::ng-deep kj-text-editor,:host td.kj-table-cell--editing ::ng-deep kj-number-editor,:host td.kj-table-cell--editing ::ng-deep kj-select-editor,:host td.kj-table-cell--editing ::ng-deep kj-date-editor,:host td.kj-table-cell--editing ::ng-deep kj-boolean-editor{position:absolute!important;inset:0!important;display:flex!important;align-items:center!important;padding:inherit!important;background:var(--kj-bg-surface);z-index:1}:host td.kj-table-cell--editing ::ng-deep kj-input,:host td.kj-table-cell--editing ::ng-deep kj-number-input,:host td.kj-table-cell--editing ::ng-deep kj-select{display:flex!important;width:100%!important;min-width:0!important;box-sizing:border-box}:host td.kj-table-cell--editing ::ng-deep input,:host td.kj-table-cell--editing ::ng-deep .kj-select-trigger{width:100%!important;min-width:0!important;box-sizing:border-box}:host td .kj-table-editor-anchor{display:none}:host tr[data-selected] td{background:color-mix(in oklab,var(--kj-bg-primary, var(--kj-bg-accent, currentColor)) 12%,var(--kj-bg-surface))}:host tr[data-selected] td:first-child{box-shadow:inset 3px 0 0 0 var(--kj-bg-primary, var(--kj-fg-primary))}:host td[data-pin=left],:host th[data-pin=left]{position:sticky;left:0;z-index:1;background:var(--kj-bg-surface)}:host td[data-pin=right],:host th[data-pin=right]{position:sticky;right:0;z-index:1;background:var(--kj-bg-surface)}:host td[data-pin=left]:not(:has(+td[data-pin=left])),:host th[data-pin=left]:not(:has(+th[data-pin=left])){border-right:1px solid var(--kj-border-strong, var(--kj-border-default));box-shadow:4px 0 6px -4px #00000040}:host tr>:not([data-pin=right])+td[data-pin=right],:host tr>:not([data-pin=right])+th[data-pin=right]{border-left:1px solid var(--kj-border-strong, var(--kj-border-default));box-shadow:-4px 0 6px -4px #00000040}:host([data-variant=\"striped\"]) tbody tr:nth-child(2n) td[data-pin]{background:var(--kj-bg-elevated)}.kj-table-resize-handle{position:absolute;top:25%;right:0;width:6px;height:50%;cursor:col-resize;-webkit-user-select:none;user-select:none;touch-action:none;background:transparent;border-right:2px solid var(--kj-border-strong, var(--kj-border-default));transition:border-color var(--kj-transition),background var(--kj-transition),width var(--kj-transition)}.kj-table-resize-handle:hover,.kj-table-resize-handle:focus-visible{border-right-color:var(--kj-border-focus);background:color-mix(in srgb,var(--kj-border-focus) 20%,transparent);width:8px;outline:none}:host th[data-resizing] .kj-table-resize-handle{top:0;height:9999px;width:0;background:transparent;border-right:2px solid var(--kj-border-focus, var(--kj-bg-primary));transform:translate(var(--kj-resize-delta, 0px));pointer-events:none;z-index:3;transition:none}:host th.kj-table-select-cell,:host td.kj-table-select-cell{width:2.5rem;padding-inline:var(--kj-base-space-sm);text-align:center;vertical-align:middle}.kj-table-select-cell kj-checkbox{display:inline-flex;align-items:center;justify-content:center}.kj-table-filter-row>th{font-weight:400;background:var(--kj-bg-surface);border-top:1px solid var(--kj-border-muted, var(--kj-border-default))}.kj-table-filter-cell{padding-top:var(--kj-base-space-xs);padding-bottom:var(--kj-base-space-xs);vertical-align:middle}.kj-table-filter-cell .kj-table-filter-anchor+*,.kj-table-filter-cell kj-input,.kj-table-filter-cell kj-number-input,.kj-table-filter-cell kj-date-picker,.kj-table-filter-cell kj-select{width:100%}.kj-table-filter-anchor{display:block;width:100%}:host .kj-table-editor-anchor .kj-input,:host .kj-table-editor-anchor .kj-select{--kj-input-height: 1.75rem;--kj-input-font-size: var(--kj-text-xs);--kj-input-padding-x: var(--kj-base-space-sm);--kj-input-padding-y: 0;--kj-input-radius: var(--kj-radius-selector)}.kj-table-empty,.kj-table-error,.kj-table-loading{display:flex;align-items:center;justify-content:center;padding:var(--kj-base-space-lg);color:var(--kj-fg-muted)}.kj-table-loading{position:absolute;inset:0;background:color-mix(in srgb,var(--kj-bg-surface) 70%,transparent);pointer-events:none}.kj-table-loading[data-has-rows]{inset:0 0 auto;height:2px;background:var(--kj-bg-primary);padding:0;animation:kj-table-loading-pulse 1.4s ease-in-out infinite}.kj-table-loading[data-has-rows] .kj-table-loading-fallback,.kj-table-loading[data-has-rows] ::ng-deep [kjLoading]{display:none}@keyframes kj-table-loading-pulse{0%,to{opacity:.55}50%{opacity:1}}.kj-table-error{color:var(--kj-fg-error, var(--kj-fg-default))}.kj-table-loading-fallback{font-size:var(--kj-text-sm)}.kj-table-expansion-row>td{background:var(--kj-bg-elevated)}.kj-table-tbody-pinned[data-pin=top]>tr>td{background:var(--kj-bg-elevated);border-bottom:2px solid var(--kj-border-primary, var(--kj-border-strong, var(--kj-border-default)));box-shadow:0 4px 6px -4px #00000040;position:sticky;top:0;z-index:2}.kj-table-tbody-pinned[data-pin=bottom]>tr>td{background:var(--kj-bg-elevated);border-top:2px solid var(--kj-border-primary, var(--kj-border-strong, var(--kj-border-default)));box-shadow:0 -4px 6px -4px #00000040;position:sticky;bottom:0;z-index:2}.kj-table-group-toggle{display:inline-flex;align-items:center;gap:var(--kj-base-space-xs, .25rem);background:transparent;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}.kj-table-group-toggle__chevron{display:inline-block;width:.75rem;font-family:var(--kj-font-mono);color:var(--kj-fg-muted);transition:transform var(--kj-transition)}.kj-table-group-toggle[aria-expanded=true] .kj-table-group-toggle__chevron{transform:rotate(90deg)}.kj-table-group-toggle__count{margin-inline-start:var(--kj-base-space-xs, .25rem);font-size:.75em;color:var(--kj-fg-muted);font-variant-numeric:tabular-nums}:host tbody tr[data-row-grouped] td{background:var(--kj-bg-elevated);font-weight:600}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { kjResource: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjResource", required: false }] }], kjDensity: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjDensity", required: false }] }], kjVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjVariant", required: false }] }], kjLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjLoading", required: false }] }], kjSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSelection", required: false }] }, { type: i0.Output, args: ["kjSelectionChange"] }], kjSelectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSelectionMode", required: false }] }], kjShowSelectionColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjShowSelectionColumn", required: false }] }], kjStorageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjStorageKey", required: false }] }], kjStorageAdapter: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjStorageAdapter", required: false }] }], kjVirtual: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjVirtual", required: false }] }], kjEstimatedRowSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjEstimatedRowSize", required: false }] }], kjEnableFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjEnableFilters", required: false }] }], kjEnableResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjEnableResize", required: false }] }], kjEnableRowPinning: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjEnableRowPinning", required: false }] }], kjEditOnDoubleClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjEditOnDoubleClick", required: false }] }], kjRowExpansionTpl: [{ type: i0.ContentChild, args: ['kjRowExpansion', { isSignal: true }] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], stateChange: [{ type: i0.Output, args: ["stateChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDoubleClick: [{ type: i0.Output, args: ["rowDoubleClick"] }] } });
+        }], ctorParameters: () => [], propDecorators: { kjResource: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjResource", required: false }] }], kjDensity: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjDensity", required: false }] }], kjVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjVariant", required: false }] }], kjLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjLoading", required: false }] }], kjSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSelection", required: false }] }, { type: i0.Output, args: ["kjSelectionChange"] }], kjSelectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjSelectionMode", required: false }] }], kjShowSelectionColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjShowSelectionColumn", required: false }] }], kjStorageKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjStorageKey", required: false }] }], kjStorageAdapter: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjStorageAdapter", required: false }] }], kjVirtual: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjVirtual", required: false }] }], kjEstimatedRowSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjEstimatedRowSize", required: false }] }], kjEnableFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjEnableFilters", required: false }] }], kjEnableResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjEnableResize", required: false }] }], kjEnableRowPinning: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjEnableRowPinning", required: false }] }], kjEditOnDoubleClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "kjEditOnDoubleClick", required: false }] }], kjRowExpansionTpl: [{ type: i0.ContentChild, args: ['kjRowExpansion', { isSignal: true }] }], cellTemplates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => KjCellTemplateDirective), { isSignal: true }] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], stateChange: [{ type: i0.Output, args: ["stateChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDoubleClick: [{ type: i0.Output, args: ["rowDoubleClick"] }] } });
 // ── helpers ───────────────────────────────────────────────────────────────
 function cellMeta(col) {
     return col.columnDef.meta?.kj;
@@ -17674,5 +17982,5 @@ const KJ_COMPONENTS_VERSION = '0.0.1';
  * Generated bundle index. Do not edit.
  */
 
-export { KJ_COMPONENTS_VERSION, KJ_EDITOR_CONTRACT, KJ_FILTER_CONTEXT, KjAccordionComponent, KjAccordionContentComponent, KjAccordionItemComponent, KjAccordionTriggerComponent, KjAlertActionsComponent, KjAlertComponent, KjAlertDescriptionComponent, KjAlertDismissComponent, KjAlertIconComponent, KjAlertTitleComponent, KjAvatarComponent, KjAvatarGroupComponent, KjBadgeComponent, KjBooleanEditor, KjBreadcrumbComponent, KjBreadcrumbCurrentComponent, KjBreadcrumbEllipsisComponent, KjBreadcrumbItemComponent, KjBreadcrumbLinkComponent, KjBreadcrumbListComponent, KjBreadcrumbSeparatorComponent, KjBulkAction, KjButtonComponent, KjButtonGroupComponent, KjCalendarComponent, KjCardComponent, KjCardContentComponent, KjCardCoverComponent, KjCardFooterComponent, KjCardHeaderComponent, KjCardSubtitleComponent, KjCardTitleComponent, KjCarouselAutoplayComponent, KjCarouselComponent, KjCarouselIndicatorsComponent, KjCarouselNextComponent, KjCarouselPauseComponent, KjCarouselPreviousComponent, KjCarouselSlideComponent, KjCarouselViewportComponent, KjCascadeOptionComponent, KjCascadeSelectComponent, KjCascadeSubPanelComponent, KjCellEditorOutlet, KjChatAvatarComponent, KjChatBubbleComponent, KjChatComponent, KjChatFooterComponent, KjChatHeaderComponent, KjChatLogComponent, KjCheckboxComponent, KjColorPickerComponent, KjComboboxComponent, KjComboboxEmptyComponent, KjComboboxLoadingComponent, KjComboboxOptionComponent, KjCommandEmptyComponent, KjCommandGroupComponent, KjCommandInputComponent, KjCommandItemComponent, KjCommandPaletteComponent, KjCommandPaletteFooter, KjCommandPaletteItemTemplate, KjCommandSeparatorComponent, KjConfirmPopupActionComponent, KjConfirmPopupActionsComponent, KjConfirmPopupCancelComponent, KjConfirmPopupComponent, KjConfirmPopupContentComponent, KjConfirmPopupMessageComponent, KjConfirmPopupTriggerComponent, KjDateEditor, KjDateFilter, KjDatePickerComponent, KjDialogComponent, KjDividerComponent, KjDrawerComponent, KjDropdownMenuComponent, KjEmptyStateActionsComponent, KjEmptyStateComponent, KjEmptyStateDescriptionComponent, KjEmptyStateIconComponent, KjEmptyStateTitleComponent, KjFieldComponent, KjFieldErrorComponent, KjFieldGroupComponent, KjFieldHelpComponent, KjFieldLabelComponent, KjFileUploadComponent, KjFilterCellOutlet, KjFormActionsComponent, KjFormComponent, KjFormSummaryComponent, KjIconGalleryExample, KjIconUsageExample, KjInputComponent, KjInputGroupAddonComponent, KjInputGroupComponent, KjInputMaskComponent, KjInputMaskCreditCardExample, KjInputMaskCustomTokensExample, KjInputMaskDateExample, KjInputMaskExample, KjInputMaskUsageExample, KjInputMaskValidationExample, KjInputOtpComponent, KjKbdComponent, KjLinkComponent, KjListComponent, KjListItemComponent, KjMenubarComponent, KjMenubarItemComponent, KjNumberEditor, KjNumberFilter, KjNumberInputComponent, KjOptionComponent, KjOverlayBadgeComponent, KjOverlayBadgeContentComponent, KjPaginationComponent, KjPaginationDefaultComponent, KjPaginationEllipsisComponent, KjPaginationFirstComponent, KjPaginationInfoComponent, KjPaginationItemComponent, KjPaginationLastComponent, KjPaginationNextComponent, KjPaginationPreviousComponent, KjPasswordInputComponent, KjPopoverComponent, KjProgressBarComponent, KjRadioComponent, KjRadioGroupComponent, KjSelectComponent, KjSelectEditor, KjSelectFilter, KjSkeletonComponent, KjSliderComponent, KjSpeedDialActionComponent, KjSpeedDialActionsComponent, KjSpeedDialComponent, KjSpeedDialTriggerComponent, KjSpinnerComponent, KjStepComponent, KjStepContentComponent, KjStepLabelComponent, KjStepperComponent, KjStepperNextComponent, KjStepperPreviousComponent, KjStepperResetComponent, KjTabComponent, KjTabListComponent, KjTabPanelComponent, KjTableComponent, KjTablePaginationComponent, KjTableSidePanelComponent, KjTableSidePanelContent, KjTableStatusBarComponent, KjTableToolbarComponent, KjTableVirtual, KjTabsComponent, KjTagComponent, KjTagListComponent, KjTagRemoveComponent, KjTextEditor, KjTextFilter, KjTextareaComponent, KjTimePickerComponent, KjToastCloseComponent, KjToastComponent, KjToastViewportComponent, KjToastWrapperComponent, KjToggleComponent, KjTooltipComponent, KjTreeSelectComponent, KjTreeSelectNodeComponent, LUCIDE_ICON_NAMES, copyToClipboard, downloadString, exportCsv, exportJson, provideLucideIcons, toTsv };
+export { KJ_COMPONENTS_VERSION, KJ_EDITOR_CONTRACT, KJ_FILTER_CONTEXT, KjAccordionComponent, KjAccordionContentComponent, KjAccordionItemComponent, KjAccordionTriggerComponent, KjAlertActionsComponent, KjAlertComponent, KjAlertDescriptionComponent, KjAlertDismissComponent, KjAlertIconComponent, KjAlertTitleComponent, KjAvatarComponent, KjAvatarGroupComponent, KjBadgeComponent, KjBooleanEditor, KjBreadcrumbComponent, KjBreadcrumbCurrentComponent, KjBreadcrumbEllipsisComponent, KjBreadcrumbItemComponent, KjBreadcrumbLinkComponent, KjBreadcrumbListComponent, KjBreadcrumbSeparatorComponent, KjBulkAction, KjButtonComponent, KjButtonGroupComponent, KjCalendarComponent, KjCardComponent, KjCardContentComponent, KjCardCoverComponent, KjCardFooterComponent, KjCardHeaderComponent, KjCardSubtitleComponent, KjCardTitleComponent, KjCarouselAutoplayComponent, KjCarouselComponent, KjCarouselIndicatorsComponent, KjCarouselNextComponent, KjCarouselPauseComponent, KjCarouselPreviousComponent, KjCarouselSlideComponent, KjCarouselViewportComponent, KjCascadeOptionComponent, KjCascadeSelectComponent, KjCascadeSubPanelComponent, KjCellEditorOutlet, KjCellTemplateDirective, KjChatAvatarComponent, KjChatBubbleComponent, KjChatComponent, KjChatFooterComponent, KjChatHeaderComponent, KjChatLogComponent, KjCheckboxComponent, KjColorPickerComponent, KjComboboxComponent, KjComboboxEmptyComponent, KjComboboxLoadingComponent, KjComboboxOptionComponent, KjCommandEmptyComponent, KjCommandGroupComponent, KjCommandInputComponent, KjCommandItemComponent, KjCommandPaletteComponent, KjCommandPaletteFooter, KjCommandPaletteItemTemplate, KjCommandSeparatorComponent, KjConfirmPopupActionComponent, KjConfirmPopupActionsComponent, KjConfirmPopupCancelComponent, KjConfirmPopupComponent, KjConfirmPopupContentComponent, KjConfirmPopupMessageComponent, KjConfirmPopupTriggerComponent, KjDateEditor, KjDateFilter, KjDatePickerComponent, KjDatetimePickerComponent, KjDialogComponent, KjDividerComponent, KjDrawerComponent, KjDropdownMenuComponent, KjEmptyStateActionsComponent, KjEmptyStateComponent, KjEmptyStateDescriptionComponent, KjEmptyStateIconComponent, KjEmptyStateTitleComponent, KjFieldComponent, KjFieldErrorComponent, KjFieldGroupComponent, KjFieldHelpComponent, KjFieldLabelComponent, KjFileUploadComponent, KjFilterCellOutlet, KjFormActionsComponent, KjFormComponent, KjFormSummaryComponent, KjIconGalleryExample, KjIconUsageExample, KjInputComponent, KjInputGroupAddonComponent, KjInputGroupComponent, KjInputMaskComponent, KjInputMaskCreditCardExample, KjInputMaskCustomTokensExample, KjInputMaskDateExample, KjInputMaskExample, KjInputMaskUsageExample, KjInputMaskValidationExample, KjInputOtpComponent, KjKbdComponent, KjLinkComponent, KjListComponent, KjListItemComponent, KjMenubarComponent, KjMenubarItemComponent, KjNumberEditor, KjNumberFilter, KjNumberInputComponent, KjOptionComponent, KjOverlayBadgeComponent, KjOverlayBadgeContentComponent, KjPaginationComponent, KjPaginationDefaultComponent, KjPaginationEllipsisComponent, KjPaginationFirstComponent, KjPaginationInfoComponent, KjPaginationItemComponent, KjPaginationLastComponent, KjPaginationNextComponent, KjPaginationPreviousComponent, KjPasswordInputComponent, KjPopoverComponent, KjProgressBarComponent, KjRadioComponent, KjRadioGroupComponent, KjSelectComponent, KjSelectEditor, KjSelectFilter, KjSkeletonComponent, KjSliderComponent, KjSpeedDialActionComponent, KjSpeedDialActionsComponent, KjSpeedDialComponent, KjSpeedDialTriggerComponent, KjSpinnerComponent, KjStepComponent, KjStepContentComponent, KjStepLabelComponent, KjStepperComponent, KjStepperNextComponent, KjStepperPreviousComponent, KjStepperResetComponent, KjTabComponent, KjTabListComponent, KjTabPanelComponent, KjTableComponent, KjTablePaginationComponent, KjTableSidePanelComponent, KjTableSidePanelContent, KjTableStatusBarComponent, KjTableToolbarComponent, KjTableVirtual, KjTabsComponent, KjTagComponent, KjTagListComponent, KjTagRemoveComponent, KjTextEditor, KjTextFilter, KjTextareaComponent, KjTimePickerComponent, KjToastCloseComponent, KjToastComponent, KjToastViewportComponent, KjToastWrapperComponent, KjToggleComponent, KjTooltipComponent, KjTreeSelectComponent, KjTreeSelectNodeComponent, LUCIDE_ICON_NAMES, copyToClipboard, downloadString, exportCsv, exportJson, provideLucideIcons, toTsv };
 //# sourceMappingURL=kouji-ui-components.mjs.map