@kodaris/krubble-components 1.0.0

package/dist/code-demo/code-demo.js

@@ -0,0 +1,277 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+/**
+ * Code demo component with Preview/Code tabs and syntax highlighting.
+ *
+ * Usage:
+ * ```html
+ * <kr-code-demo language="html">
+ *   <div slot="preview">
+ *     <kr-button>Click me</kr-button>
+ *   </div>
+ *   <script slot="code" type="text/plain">
+ *     <kr-button>Click me</kr-button>
+ *   </script>
+ * </kr-code-demo>
+ * ```
+ *
+ * Requires Prism.js to be loaded globally for syntax highlighting.
+ */
+let KRCodeDemo = class KRCodeDemo extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.language = 'html';
+        this.code = '';
+        this.activeTab = 'preview';
+        this.copied = false;
+    }
+    setTab(tab) {
+        this.activeTab = tab;
+    }
+    getHighlightedCode() {
+        if (!this.code)
+            return '';
+        if (window.Prism && window.Prism.languages[this.language]) {
+            return window.Prism.highlight(this.code, window.Prism.languages[this.language], this.language);
+        }
+        // Fallback: escape HTML and return plain text
+        return this.escapeHtml(this.code);
+    }
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    async copyCode() {
+        if (!this.code)
+            return;
+        try {
+            await navigator.clipboard.writeText(this.code);
+            this.copied = true;
+            setTimeout(() => {
+                this.copied = false;
+            }, 2000);
+        }
+        catch (err) {
+            console.error('Failed to copy code:', err);
+        }
+    }
+    render() {
+        return html `
+      <div class="tabs">
+        <button
+          class=${classMap({ tab: true, 'tab--active': this.activeTab === 'preview' })}
+          @click=${() => this.setTab('preview')}
+        >
+          Preview
+        </button>
+        <button
+          class=${classMap({ tab: true, 'tab--active': this.activeTab === 'code' })}
+          @click=${() => this.setTab('code')}
+        >
+          Code
+        </button>
+      </div>
+
+      <div class=${classMap({ panel: true, 'panel--active': this.activeTab === 'preview', preview: true })}>
+        <slot name="preview"></slot>
+      </div>
+
+      <div class=${classMap({ panel: true, 'panel--active': this.activeTab === 'code', 'code-container': true })}>
+        <button
+          class=${classMap({ 'copy-btn': true, 'copy-btn--copied': this.copied })}
+          @click=${this.copyCode}
+        >
+          ${this.copied ? 'Copied!' : 'Copy'}
+        </button>
+        <pre class="code"><code>${unsafeHTML(this.getHighlightedCode())}</code></pre>
+      </div>
+
+    `;
+    }
+};
+KRCodeDemo.styles = css `
+    :host {
+      display: block;
+      border: 1px solid #e9ecef;
+      border-radius: 8px;
+      overflow: hidden;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    }
+
+    .tabs {
+      display: flex;
+      background: #f8f9fa;
+      border-bottom: 1px solid #e9ecef;
+    }
+
+    .tab {
+      padding: 10px 20px;
+      background: none;
+      border: none;
+      color: #6c757d;
+      font-size: 14px;
+      font-weight: 500;
+      font-family: inherit;
+      cursor: pointer;
+      position: relative;
+      transition: color 0.15s;
+    }
+
+    .tab:hover {
+      color: #495057;
+    }
+
+    .tab--active {
+      color: #1a1a2e;
+    }
+
+    .tab--active::after {
+      content: '';
+      position: absolute;
+      bottom: -1px;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background: #4f46e5;
+    }
+
+    .panel {
+      display: none;
+    }
+
+    .panel--active {
+      display: block;
+    }
+
+    .preview {
+      padding: 24px;
+      background: #ffffff;
+    }
+
+    .code-container {
+      position: relative;
+    }
+
+    .code {
+      margin: 0;
+      padding: 20px;
+      background: #1e1e2e;
+      overflow-x: auto;
+      font-family: 'SF Mono', 'Fira Code', 'Monaco', 'Consolas', monospace;
+      font-size: 13px;
+      line-height: 1.6;
+      color: #cdd6f4;
+    }
+
+    .code code {
+      font-family: inherit;
+    }
+
+    .copy-btn {
+      position: absolute;
+      top: 12px;
+      right: 12px;
+      padding: 6px 12px;
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 6px;
+      color: rgba(255, 255, 255, 0.7);
+      font-size: 12px;
+      font-family: inherit;
+      cursor: pointer;
+      transition: background 0.15s, color 0.15s;
+    }
+
+    .copy-btn:hover {
+      background: rgba(255, 255, 255, 0.15);
+      color: white;
+    }
+
+    .copy-btn--copied {
+      background: rgba(34, 197, 94, 0.2);
+      border-color: rgba(34, 197, 94, 0.3);
+      color: #4ade80;
+    }
+
+    /* Prism.js theme overrides for dark mode */
+    .code .token.comment,
+    .code .token.prolog,
+    .code .token.doctype,
+    .code .token.cdata {
+      color: #6c7086;
+    }
+
+    .code .token.punctuation {
+      color: #9399b2;
+    }
+
+    .code .token.property,
+    .code .token.tag,
+    .code .token.boolean,
+    .code .token.number,
+    .code .token.constant,
+    .code .token.symbol,
+    .code .token.deleted {
+      color: #f38ba8;
+    }
+
+    .code .token.selector,
+    .code .token.attr-name,
+    .code .token.string,
+    .code .token.char,
+    .code .token.builtin,
+    .code .token.inserted {
+      color: #a6e3a1;
+    }
+
+    .code .token.operator,
+    .code .token.entity,
+    .code .token.url,
+    .code .language-css .token.string,
+    .code .style .token.string {
+      color: #94e2d5;
+    }
+
+    .code .token.atrule,
+    .code .token.attr-value,
+    .code .token.keyword {
+      color: #cba6f7;
+    }
+
+    .code .token.function,
+    .code .token.class-name {
+      color: #89b4fa;
+    }
+
+    .code .token.regex,
+    .code .token.important,
+    .code .token.variable {
+      color: #fab387;
+    }
+  `;
+__decorate([
+    property({ type: String })
+], KRCodeDemo.prototype, "language", void 0);
+__decorate([
+    property({ type: String })
+], KRCodeDemo.prototype, "code", void 0);
+__decorate([
+    state()
+], KRCodeDemo.prototype, "activeTab", void 0);
+__decorate([
+    state()
+], KRCodeDemo.prototype, "copied", void 0);
+KRCodeDemo = __decorate([
+    customElement('kr-code-demo')
+], KRCodeDemo);
+export { KRCodeDemo };
+//# sourceMappingURL=code-demo.js.map

package/dist/code-demo/code-demo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-demo.js","sourceRoot":"","sources":["../../src/code-demo/code-demo.ts"],"names":[],"mappings":"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"}

package/dist/context-menu/context-menu.d.ts

@@ -0,0 +1,54 @@
+import { LitElement } from 'lit';
+export interface ContextMenuItem {
+    id: string;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+    divider?: boolean;
+}
+export interface ContextMenuOptions {
+    x: number;
+    y: number;
+    items: ContextMenuItem[];
+}
+/**
+ * Context menu component that can be opened programmatically.
+ *
+ * Usage:
+ * ```ts
+ * const result = await ContextMenu.open({
+ *   x: event.clientX,
+ *   y: event.clientY,
+ *   items: [
+ *     { id: 'edit', label: 'Edit Item' },
+ *     { id: 'divider', label: '', divider: true },
+ *     { id: 'add-above', label: 'Add Item Above' },
+ *     { id: 'add-below', label: 'Add Item Below' },
+ *   ]
+ * });
+ *
+ * if (result) {
+ *   console.log('Selected:', result.id);
+ * }
+ * ```
+ */
+export declare class KRContextMenu extends LitElement {
+    static styles: import("lit").CSSResult;
+    private items;
+    private resolvePromise;
+    private boundHandleOutsideClick;
+    private boundHandleKeyDown;
+    static open(options: ContextMenuOptions): Promise<ContextMenuItem | null>;
+    show(options: ContextMenuOptions): Promise<ContextMenuItem | null>;
+    private handleOutsideClick;
+    private handleKeyDown;
+    private handleItemClick;
+    private close;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kr-context-menu': KRContextMenu;
+    }
+}
+//# sourceMappingURL=context-menu.d.ts.map

package/dist/context-menu/context-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.d.ts","sourceRoot":"","sources":["../../src/context-menu/context-menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,eAAe,EAAE,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,0BAuDpB;IAGF,OAAO,CAAC,KAAK,CAAyB;IAEtC,OAAO,CAAC,cAAc,CAA0D;IAEhF,OAAO,CAAC,uBAAuB,CAAsC;IACrE,OAAO,CAAC,kBAAkB,CAAiC;WAE9C,IAAI,CAAC,OAAO,EAAE,kBAAkB,GAAG,OAAO,CAAC,eAAe,GAAG,IAAI,CAAC;IAczE,IAAI,CAAC,OAAO,EAAE,kBAAkB,GAAG,OAAO,CAAC,eAAe,GAAG,IAAI,CAAC;IA4BxE,OAAO,CAAC,kBAAkB;IAM1B,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,KAAK;IAaJ,MAAM;CAoBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/context-menu/context-menu.js

@@ -0,0 +1,179 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+/**
+ * Context menu component that can be opened programmatically.
+ *
+ * Usage:
+ * ```ts
+ * const result = await ContextMenu.open({
+ *   x: event.clientX,
+ *   y: event.clientY,
+ *   items: [
+ *     { id: 'edit', label: 'Edit Item' },
+ *     { id: 'divider', label: '', divider: true },
+ *     { id: 'add-above', label: 'Add Item Above' },
+ *     { id: 'add-below', label: 'Add Item Below' },
+ *   ]
+ * });
+ *
+ * if (result) {
+ *   console.log('Selected:', result.id);
+ * }
+ * ```
+ */
+let KRContextMenu = class KRContextMenu extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.items = [];
+        this.resolvePromise = null;
+        this.boundHandleOutsideClick = this.handleOutsideClick.bind(this);
+        this.boundHandleKeyDown = this.handleKeyDown.bind(this);
+    }
+    static async open(options) {
+        // Remove any existing context menu
+        const existing = document.querySelector('kr-context-menu');
+        if (existing) {
+            existing.remove();
+        }
+        // Create and position the menu
+        const menu = document.createElement('kr-context-menu');
+        document.body.appendChild(menu);
+        return menu.show(options);
+    }
+    async show(options) {
+        this.items = options.items;
+        this.style.left = `${options.x}px`;
+        this.style.top = `${options.y}px`;
+        // Adjust position if menu would go off screen
+        await this.updateComplete;
+        const rect = this.getBoundingClientRect();
+        if (rect.right > window.innerWidth) {
+            this.style.left = `${options.x - rect.width}px`;
+        }
+        if (rect.bottom > window.innerHeight) {
+            this.style.top = `${options.y - rect.height}px`;
+        }
+        // Add event listeners after a microtask to avoid the current event triggering close
+        requestAnimationFrame(() => {
+            document.addEventListener('click', this.boundHandleOutsideClick);
+            document.addEventListener('contextmenu', this.boundHandleOutsideClick);
+            document.addEventListener('keydown', this.boundHandleKeyDown);
+        });
+        return new Promise((resolve) => {
+            this.resolvePromise = resolve;
+        });
+    }
+    handleOutsideClick(e) {
+        if (!this.contains(e.target)) {
+            this.close(null);
+        }
+    }
+    handleKeyDown(e) {
+        if (e.key === 'Escape') {
+            this.close(null);
+        }
+    }
+    handleItemClick(item) {
+        if (!item.disabled && !item.divider) {
+            this.close(item);
+        }
+    }
+    close(result) {
+        document.removeEventListener('click', this.boundHandleOutsideClick);
+        document.removeEventListener('contextmenu', this.boundHandleOutsideClick);
+        document.removeEventListener('keydown', this.boundHandleKeyDown);
+        if (this.resolvePromise) {
+            this.resolvePromise(result);
+            this.resolvePromise = null;
+        }
+        this.remove();
+    }
+    render() {
+        return html `
+      <div class="menu">
+        ${this.items.map(item => item.divider
+            ? html `<div class="menu__divider"></div>`
+            : html `
+              <button
+                class="menu__item"
+                ?disabled=${item.disabled}
+                @click=${() => this.handleItemClick(item)}
+              >
+                ${item.icon ? html `<span class="menu__item-icon">${item.icon}</span>` : null}
+                ${item.label}
+              </button>
+            `)}
+      </div>
+    `;
+    }
+};
+KRContextMenu.styles = css `
+    :host {
+      position: fixed;
+      z-index: 10000;
+    }
+
+    .menu {
+      background: #1a1a2e;
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 8px;
+      padding: 4px;
+      min-width: 180px;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+    }
+
+    .menu__item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      width: 100%;
+      padding: 10px 12px;
+      background: none;
+      border: none;
+      color: rgba(255, 255, 255, 0.8);
+      font-size: 13px;
+      font-family: inherit;
+      text-align: left;
+      cursor: pointer;
+      border-radius: 6px;
+      transition: background 0.15s ease;
+    }
+
+    .menu__item:hover:not(:disabled) {
+      background: rgba(255, 255, 255, 0.05);
+      color: #ffffff;
+    }
+
+    .menu__item:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .menu__item-icon {
+      width: 16px;
+      height: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .menu__divider {
+      height: 1px;
+      background: rgba(255, 255, 255, 0.1);
+      margin: 4px 0;
+    }
+  `;
+__decorate([
+    state()
+], KRContextMenu.prototype, "items", void 0);
+KRContextMenu = __decorate([
+    customElement('kr-context-menu')
+], KRContextMenu);
+export { KRContextMenu };
+//# sourceMappingURL=context-menu.js.map

package/dist/context-menu/context-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.js","sourceRoot":"","sources":["../../src/context-menu/context-menu.ts"],"names":[],"mappings":"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"}

package/dist/dialog/dialog.d.ts

@@ -0,0 +1,58 @@
+import { LitElement } from 'lit';
+export interface DialogConfig<T = unknown> {
+    data?: T;
+}
+export declare class DialogRef<R = unknown> {
+    private resolvePromise;
+    private promise;
+    private dialogElement;
+    constructor();
+    /** @internal */
+    setDialogElement(el: KRDialog): void;
+    close(result?: R): void;
+    afterClosed(): Promise<R | undefined>;
+}
+/**
+ * Generic dialog component that renders a Lit component inside a dialog shell.
+ *
+ * Usage:
+ * ```ts
+ * // Define your dialog content component
+ * class EditItemDialog extends LitElement {
+ *   // Injected by KRDialog
+ *   dialogRef: DialogRef<{ label: string }>;
+ *   data: { label: string };
+ *
+ *   save() {
+ *     this.dialogRef.close({ label: this.label });
+ *   }
+ * }
+ *
+ * // Open the dialog
+ * const dialogRef = KRDialog.open(EditItemDialog, {
+ *   data: { label: 'Dashboard' }
+ * });
+ *
+ * const result = await dialogRef.afterClosed();
+ * if (result) {
+ *   console.log('Saved:', result.label);
+ * }
+ * ```
+ */
+export declare class KRDialog extends LitElement {
+    static styles: import("lit").CSSResult;
+    private contentElement;
+    private dialogRef;
+    private boundHandleKeyDown;
+    static open(component: new () => LitElement, config?: DialogConfig): DialogRef;
+    private handleKeyDown;
+    private handleBackdropClick;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kr-dialog': KRDialog;
+    }
+}
+//# sourceMappingURL=dialog.d.ts.map

package/dist/dialog/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/dialog/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,OAAO;IACvC,IAAI,CAAC,EAAE,CAAC,CAAC;CACV;AAED,qBAAa,SAAS,CAAC,CAAC,GAAG,OAAO;IAChC,OAAO,CAAC,cAAc,CAAiD;IACvE,OAAO,CAAC,OAAO,CAAyB;IACxC,OAAO,CAAC,aAAa,CAAyB;;IAQ9C,gBAAgB;IAChB,gBAAgB,CAAC,EAAE,EAAE,QAAQ;IAI7B,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;IAQhB,WAAW,IAAI,OAAO,CAAC,CAAC,GAAG,SAAS,CAAC;CAGtC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,0BAyBpB;IAGF,OAAO,CAAC,cAAc,CAA2B;IAEjD,OAAO,CAAC,SAAS,CAA0B;IAC3C,OAAO,CAAC,kBAAkB,CAAiC;IAE3D,MAAM,CAAC,IAAI,CACT,SAAS,EAAE,UAAU,UAAU,EAC/B,MAAM,CAAC,EAAE,YAAY,GACpB,SAAS;IA0BZ,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,mBAAmB;IAMlB,oBAAoB;IAKpB,MAAM;CAQhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}