@lazhus/kg-ui 0.3.0 → 0.4.0

package/dist/components/kg-avatar.js

@@ -0,0 +1,137 @@
+import { LitElement as a, css as n, html as r } from "lit";
+class c extends a {
+  static properties = {
+    src: { type: String },
+    alt: { type: String },
+    name: { type: String },
+    size: { type: String },
+    // tiny, small, medium, large, huge, massive
+    shape: { type: String },
+    // circle, square, rounded
+    status: { type: String },
+    // online, offline, away, busy
+    badge: { type: String },
+    // numeric or simple dot
+    color: { type: String }
+    // primary, secondary, tertiary, etc. or hex
+  };
+  static styles = n`
+    :host {
+      display: inline-block;
+      vertical-align: middle;
+      position: relative;
+      line-height: 0;
+    }
+
+    .avatar-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--kg-bg-secondary, #eee);
+      color: var(--kg-text-muted, #666);
+      font-weight: 700;
+      overflow: hidden;
+      user-select: none;
+      transition: all 0.2s ease;
+      position: relative;
+    }
+
+    .avatar-img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .initials {
+      text-transform: uppercase;
+    }
+
+    /* Shapes */
+    .circle { border-radius: 50%; }
+    .square { border-radius: 0; }
+    .rounded { border-radius: var(--kg-radius-md, 8px); }
+
+    /* Sizes */
+    .tiny   { width: 24px; height: 24px; font-size: 0.7rem; }
+    .small  { width: 32px; height: 32px; font-size: 0.85rem; }
+    .medium { width: 48px; height: 48px; font-size: 1.1rem; }
+    .large  { width: 64px; height: 64px; font-size: 1.5rem; }
+    .huge   { width: 96px; height: 96px; font-size: 2.2rem; }
+    .massive { width: 128px; height: 128px; font-size: 3rem; }
+
+    /* Status Badge */
+    .status-badge {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      width: 25%;
+      height: 25%;
+      border-radius: 50%;
+      border: 2px solid var(--kg-bg, white);
+      z-index: 1;
+    }
+
+    .online  { background-color: #41ab34; }
+    .offline { background-color: #9e9e9e; }
+    .away    { background-color: #fbb140; }
+    .busy    { background-color: #db2828; }
+
+    .numeric-badge {
+      position: absolute;
+      top: -4px;
+      right: -4px;
+      background: #db2828;
+      color: white;
+      font-size: 10px;
+      padding: 2px 6px;
+      border-radius: 10px;
+      border: 2px solid var(--kg-bg, white);
+      font-weight: bold;
+      line-height: 1;
+      z-index: 2;
+    }
+
+    /* Semantic Colors for Avatar Background */
+    .primary   { background-color: var(--kg-primary); color: white; }
+    .secondary { background-color: var(--kg-secondary); color: white; }
+    .tertiary  { background-color: var(--kg-tertiary); color: white; }
+    .error     { background-color: #db2828; color: white; }
+    .success   { background-color: #41ab34; color: white; }
+    .warning   { background-color: #fbb140; color: white; }
+    .info      { background-color: #1367FF; color: white; }
+
+    /* Custom Color Helper */
+    .custom-color {
+      background-color: var(--avatar-bg);
+      color: white;
+    }
+  `;
+  constructor() {
+    super(), this.size = "medium", this.shape = "circle", this.alt = "Avatar";
+  }
+  getInitials() {
+    if (!this.name) return "";
+    const t = this.name.split(" ");
+    return t.length > 1 ? (t[0][0] + t[t.length - 1][0]).toUpperCase() : t[0][0].toUpperCase();
+  }
+  render() {
+    const e = ["primary", "secondary", "tertiary", "error", "success", "warning", "info"].includes(this.color), i = this.color && !e, o = [
+      "avatar-wrapper",
+      this.size,
+      this.shape,
+      this.color && e ? this.color : "",
+      i ? "custom-color" : ""
+    ].join(" "), s = i ? `--avatar-bg: ${this.color};` : "";
+    return r`
+      <div class="${o}" style="${s}" title="${this.name || this.alt}">
+        ${this.src ? r`<img class="avatar-img" src="${this.src}" alt="${this.alt}" @error=${() => this.src = ""} />` : r`<span class="initials">${this.getInitials()}</span>`}
+      </div>
+      ${this.status ? r`<div class="status-badge ${this.status} ${this.shape}"></div>` : ""}
+      ${this.badge ? r`<div class="numeric-badge">${this.badge}</div>` : ""}
+    `;
+  }
+}
+customElements.define("kg-avatar", c);
+export {
+  c as kgavatar
+};

package/dist/components/kg-breadcrumbs.js

@@ -0,0 +1,130 @@
+import { LitElement as a, css as r, html as e } from "lit";
+class n extends a {
+  static properties = {
+    separator: { type: String }
+  };
+  static styles = r`
+    :host {
+      display: block;
+    }
+
+    nav {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0;
+      margin: 0;
+      list-style: none;
+      font-size: 0.9rem;
+      color: var(--kg-text-muted, #666);
+    }
+
+    ::slotted(a), ::slotted(span) {
+      display: flex;
+      align-items: center;
+      gap: 0.25rem;
+      color: inherit;
+      text-decoration: none;
+      transition: color 0.2s;
+    }
+
+    ::slotted(a:hover) {
+      color: var(--kg-primary, #41ab34);
+    }
+
+    ::slotted(.active) {
+      color: var(--kg-text, #1a1a1a);
+      font-weight: 600;
+      pointer-events: none;
+    }
+
+    .separator {
+      display: flex;
+      align-items: center;
+      user-select: none;
+      font-size: 0.8em;
+      opacity: 0.5;
+    }
+  `;
+  constructor() {
+    super(), this.separator = "/";
+  }
+  _handleSlotChange(t) {
+    t.target.assignedNodes().filter((o) => o.nodeType === Node.ELEMENT_NODE), this.requestUpdate();
+  }
+  render() {
+    return e`
+      <nav aria-label="Breadcrumb">
+        <slot @slotchange="${this._handleSlotChange}"></slot>
+      </nav>
+    `;
+  }
+}
+class i extends a {
+  static properties = {
+    href: { type: String },
+    active: { type: Boolean, reflect: !0 },
+    separator: { type: String }
+  };
+  static styles = r`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .item {
+      color: var(--kg-text-muted, #666);
+      text-decoration: none;
+      transition: color 0.2s;
+      display: flex;
+      align-items: center;
+      gap: 0.4rem;
+      cursor: pointer;
+    }
+
+    .item:hover {
+      color: var(--kg-primary, #41ab34);
+    }
+
+    .item.active {
+      color: var(--kg-text, #1a1a1a);
+      font-weight: 600;
+      pointer-events: none;
+    }
+
+    .separator {
+      color: var(--kg-text-muted, #999);
+      opacity: 0.6;
+      font-size: 0.85em;
+      user-select: none;
+      margin: 0 2px;
+    }
+
+    :host(:last-child) .separator {
+      display: none;
+    }
+  `;
+  constructor() {
+    super(), this.active = !1, this.separator = "/";
+  }
+  render() {
+    const t = e`
+      <slot name="icon"></slot>
+      <slot></slot>
+    `;
+    return e`
+      ${this.href && !this.active ? e`<a class="item" href="${this.href}">${t}</a>` : e`<span class="item ${this.active ? "active" : ""}">${t}</span>`}
+      <span class="separator">
+        <slot name="separator">${this.separator}</slot>
+      </span>
+    `;
+  }
+}
+customElements.define("kg-breadcrumbs", n);
+customElements.define("kg-breadcrumb-item", i);
+export {
+  i as kgbreadcrumbitem,
+  n as kgbreadcrumbs
+};

package/dist/components/kg-list.js

@@ -0,0 +1,90 @@
+import { LitElement as e, css as t, html as r } from "lit";
+class l extends e {
+  static styles = t`
+    :host {
+      display: block;
+      width: 100%;
+    }
+    .list-container {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+    ::slotted(kg-list-item:not(:last-child)) {
+      border-bottom: 1px solid var(--kg-border, #eee);
+    }
+  `;
+  render() {
+    return r`
+      <div class="list-container">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+class o extends e {
+  static properties = {
+    active: { type: Boolean, reflect: !0 },
+    clickable: { type: Boolean, reflect: !0 }
+  };
+  static styles = t`
+    :host {
+      display: block;
+    }
+    .item-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      padding: 0.75rem 1rem;
+      transition: all 0.2s ease;
+      background: transparent;
+      border-radius: var(--kg-radius-sm, 4px);
+    }
+    :host([clickable]) .item-wrapper {
+      cursor: pointer;
+    }
+    :host([clickable]:hover) .item-wrapper {
+      background: var(--kg-bg-secondary, rgba(0,0,0,0.03));
+    }
+    :host([active]) .item-wrapper {
+      background: var(--kg-bg-secondary, rgba(0,0,0,0.05));
+      border-left: 3px solid var(--kg-primary);
+    }
+    .content {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+    ::slotted([slot="header"]) {
+      margin: 0;
+      font-weight: 600;
+      font-size: 0.95rem;
+      color: var(--kg-text);
+    }
+    ::slotted([slot="description"]) {
+      margin: 0;
+      font-size: 0.85rem;
+      color: var(--kg-text-muted);
+    }
+  `;
+  render() {
+    return r`
+      <div class="item-wrapper">
+        <slot name="left"></slot>
+        <div class="content">
+          <slot name="header"></slot>
+          <slot name="description"></slot>
+          <slot></slot>
+        </div>
+        <slot name="right"></slot>
+      </div>
+    `;
+  }
+}
+customElements.define("kg-list", l);
+customElements.define("kg-list-item", o);
+export {
+  l as kglist,
+  o as kglistitem
+};

package/dist/components/kg-tag.js

@@ -0,0 +1,121 @@
+import { LitElement as a, css as c, html as s } from "lit";
+class l extends a {
+  static properties = {
+    color: { type: String },
+    // primary, secondary, tertiary, error, success, info, warning
+    size: { type: String },
+    // mini, tiny, small, medium, large
+    pill: { type: Boolean },
+    basic: { type: Boolean },
+    closable: { type: Boolean }
+  };
+  static styles = c`
+    :host {
+      display: inline-flex;
+    }
+
+    .tag {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0.25em 0.8em;
+      border-radius: var(--kg-radius-sm, 4px);
+      font-size: 0.85rem;
+      font-weight: 600;
+      line-height: 1;
+      gap: 0.4em;
+      background: var(--kg-bg-secondary, #eee);
+      color: var(--kg-text, #333);
+      border: 1px solid transparent;
+      user-select: none;
+      transition: all 0.2s ease;
+      white-space: nowrap;
+    }
+
+    .pill { border-radius: 100px; }
+
+    /* Sizes */
+    .mini   { font-size: 0.65rem; padding: 0.2em 0.5em; }
+    .tiny   { font-size: 0.75rem; padding: 0.22em 0.6em; }
+    .small  { font-size: 0.8rem; padding: 0.25em 0.7em; }
+    .medium { font-size: 0.9rem; padding: 0.3em 0.85em; }
+    .large  { font-size: 1rem; padding: 0.35em 1em; }
+
+    /* Colors */
+    .primary   { background: var(--kg-primary); color: white; }
+    .secondary { background: var(--kg-secondary); color: white; }
+    .tertiary  { background: var(--kg-tertiary); color: white; }
+    .error     { background: #DB2828; color: white; }
+    .success   { background: #41ab34; color: white; }
+    .warning   { background: #FBB140; color: white; }
+
+    /* Basic (Outlined) */
+    .basic {
+      background: transparent;
+      border-color: currentColor;
+      color: var(--kg-text-muted);
+    }
+    .basic.primary   { color: var(--kg-primary); }
+    .basic.secondary { color: var(--kg-secondary); }
+    .basic.tertiary  { color: var(--kg-tertiary); }
+    .basic.error     { color: #DB2828; }
+    .basic.success   { color: #41ab34; }
+
+    .close-icon {
+      cursor: pointer;
+      opacity: 0.7;
+      display: flex;
+      align-items: center;
+      margin-right: -0.3em;
+      font-size: 1.1em;
+    }
+
+    .close-icon:hover {
+      opacity: 1;
+    }
+
+    /* Custom Colors */
+    .custom-color {
+      background: var(--kg-tag-color);
+      color: white;
+    }
+    .basic.custom-color {
+      background: transparent;
+      border-color: var(--kg-tag-color);
+      color: var(--kg-tag-color);
+    }
+  `;
+  constructor() {
+    super(), this.size = "medium", this.color = "";
+  }
+  _handleClose(o) {
+    o.stopPropagation(), this.dispatchEvent(new CustomEvent("kg-close", {
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  render() {
+    const r = ["primary", "secondary", "tertiary", "error", "success", "warning"].includes(this.color), e = this.color && !r, t = [
+      "tag",
+      this.size,
+      this.color && r ? this.color : "",
+      e ? "custom-color" : "",
+      this.pill ? "pill" : "",
+      this.basic ? "basic" : ""
+    ].join(" "), i = e ? `--kg-tag-color: ${this.color};` : "";
+    return s`
+      <div class="${t}" style="${i}">
+        <slot name="left"></slot>
+        <slot></slot>
+        <slot name="right"></slot>
+        ${this.closable ? s`
+          <span class="close-icon" @click="${this._handleClose}">✕</span>
+        ` : ""}
+      </div>
+    `;
+  }
+}
+customElements.define("kg-tag", l);
+export {
+  l as kgtag
+};

package/dist/components/kg-tooltip.js

@@ -0,0 +1,131 @@
+import { LitElement as e, css as i, html as t } from "lit";
+class r extends e {
+  static properties = {
+    content: { type: String },
+    position: { type: String, reflect: !0 },
+    // top, bottom, left, right
+    trigger: { type: String, reflect: !0 },
+    // hover, click
+    visible: { type: Boolean, reflect: !0 }
+  };
+  static styles = i`
+    :host {
+      display: inline-block;
+      position: relative;
+    }
+
+    .tooltip-trigger {
+      display: inline-block;
+      cursor: pointer;
+    }
+
+    .tooltip-content {
+      position: absolute;
+      background: #333;
+      color: white;
+      padding: 0.5rem 0.75rem;
+      border-radius: 6px;
+      font-size: 0.85rem;
+      white-space: nowrap;
+      z-index: 1000;
+      opacity: 0;
+      visibility: hidden;
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+      pointer-events: none;
+    }
+
+    /* Position Styles */
+    .top {
+      bottom: 100%;
+      left: 50%;
+      transform: translateX(-50%) translateY(-8px);
+      margin-bottom: 8px;
+    }
+    .bottom {
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%) translateY(8px);
+      margin-top: 8px;
+    }
+    .left {
+      top: 50%;
+      right: 100%;
+      transform: translateY(-50%) translateX(-8px);
+      margin-right: 8px;
+    }
+    .right {
+      top: 50%;
+      left: 100%;
+      transform: translateY(-50%) translateX(8px);
+      margin-left: 8px;
+    }
+
+    /* Arrow */
+    .tooltip-content::after {
+      content: '';
+      position: absolute;
+      border: 5px solid transparent;
+    }
+
+    .top::after { top: 100%; left: 50%; transform: translateX(-50%); border-top-color: #333; }
+    .bottom::after { bottom: 100%; left: 50%; transform: translateX(-50%); border-bottom-color: #333; }
+    .left::after { left: 100%; top: 50%; transform: translateY(-50%); border-left-color: #333; }
+    .right::after { right: 100%; top: 50%; transform: translateY(-50%); border-right-color: #333; }
+
+    /* Visibility Logic */
+    :host([trigger="hover"]:hover) .tooltip-content,
+    :host([visible]) .tooltip-content {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    /* Transform Adjustment for Visible State */
+    :host([trigger="hover"]:hover) .tooltip-content.top,
+    :host([visible]) .tooltip-content.top { transform: translateX(-50%) translateY(-4px); }
+    
+    :host([trigger="hover"]:hover) .tooltip-content.bottom,
+    :host([visible]) .tooltip-content.bottom { transform: translateX(-50%) translateY(4px); }
+    
+    :host([trigger="hover"]:hover) .tooltip-content.left,
+    :host([visible]) .tooltip-content.left { transform: translateY(-50%) translateX(-4px); }
+    
+    :host([trigger="hover"]:hover) .tooltip-content.right,
+    :host([visible]) .tooltip-content.right { transform: translateY(-50%) translateX(4px); }
+  `;
+  constructor() {
+    super(), this.position = "top", this.trigger = "hover", this.visible = !1;
+  }
+  _show() {
+    this.trigger === "click" && (this.visible = !this.visible);
+  }
+  _hide() {
+    this.trigger;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.trigger === "click" && document.addEventListener("click", this._handleOutsideClick.bind(this));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick.bind(this));
+  }
+  _handleOutsideClick(o) {
+    this.visible && !this.contains(o.target) && (this.visible = !1);
+  }
+  render() {
+    return t`
+      <div class="tooltip-trigger" 
+           @click="${this._show}"
+           role="tooltip" 
+           aria-haspopup="true">
+        <slot></slot>
+      </div>
+      <div class="tooltip-content ${this.position}">
+        ${this.content || t`<slot name="content"></slot>`}
+      </div>
+    `;
+  }
+}
+customElements.define("kg-tooltip", r);
+export {
+  r as kgtooltip
+};