@lazhus/kg-ui 0.2.2

package/dist/components/kg-tab-panel.js

@@ -0,0 +1,35 @@
+import { LitElement as t, css as e, html as a } from "lit";
+class s extends t {
+  static properties = {
+    value: { type: String },
+    label: { type: String },
+    active: { type: Boolean, reflect: !0 }
+  };
+  static styles = e`
+    :host {
+      display: none;
+      width: 100%;
+      height: 100%;
+      animation: fadeIn 0.3s ease;
+    }
+
+    :host([active]) {
+      display: block;
+    }
+
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(5px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+  `;
+  constructor() {
+    super(), this.value = "", this.label = "", this.active = !1;
+  }
+  render() {
+    return a`<slot></slot>`;
+  }
+}
+customElements.define("kg-tab-panel", s);
+export {
+  s as kgtabpanel
+};

package/dist/components/kg-tabs.js

@@ -0,0 +1,158 @@
+import { LitElement as a, css as i, html as r } from "lit";
+class o extends a {
+  static properties = {
+    activeTab: { type: String, reflect: !0 },
+    vertical: { type: Boolean, reflect: !0 }
+  };
+  static styles = i`
+    :host {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      font-family: inherit;
+    }
+
+    :host([vertical]) {
+      flex-direction: row;
+    }
+
+    .tabs-header {
+      display: flex;
+      border-bottom: 2px solid var(--kg-border);
+      gap: 0.5rem;
+      padding: 0 0.5rem;
+      overflow-x: auto;
+      scrollbar-width: none;
+    }
+
+    :host([vertical]) .tabs-header {
+      flex-direction: column;
+      border-bottom: none;
+      border-right: 2px solid var(--kg-border);
+      padding: 0.5rem 0 0.5rem 0.5rem;
+      gap: 0.25rem;
+      min-width: 180px;
+    }
+
+    .tab-trigger {
+      padding: 0.75rem 1.25rem;
+      font-size: 0.9rem;
+      font-weight: 600;
+      color: var(--kg-text-muted);
+      cursor: pointer;
+      position: relative;
+      white-space: nowrap;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      background: transparent;
+      border: none;
+      outline: none;
+      border-radius: 8px 8px 0 0;
+      margin-bottom: -2px;
+    }
+
+    :host([vertical]) .tab-trigger {
+      padding: 0.75rem 1rem;
+      text-align: left;
+      border-radius: 8px 0 0 8px;
+      margin-bottom: 0;
+      margin-right: -2px;
+    }
+
+    .tab-trigger:hover {
+      color: var(--kg-primary);
+      background: rgba(65, 171, 52, 0.05);
+    }
+
+    .tab-trigger.active {
+      color: var(--kg-primary);
+      background: rgba(65, 171, 52, 0.08);
+    }
+
+    /* Standard Underline */
+    .tab-trigger::after {
+      content: '';
+      position: absolute;
+      bottom: -2px;
+      left: 0;
+      width: 100%;
+      height: 2px;
+      background: var(--kg-primary);
+      transform: scaleX(0);
+      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      border-radius: 2px 2px 0 0;
+    }
+
+    :host([vertical]) .tab-trigger::after {
+      bottom: 0;
+      left: auto;
+      right: -2px;
+      width: 2px;
+      height: 100%;
+      transform: scaleY(0);
+      border-radius: 2px 0 0 2px;
+    }
+
+    .tab-trigger.active::after {
+      transform: scaleX(1);
+    }
+
+    :host([vertical]) .tab-trigger.active::after {
+      transform: scaleY(1);
+    }
+
+    .tabs-content {
+      padding: 1.5rem 0;
+      flex: 1;
+    }
+
+    :host([vertical]) .tabs-content {
+      padding: 0 1.5rem;
+    }
+  `;
+  constructor() {
+    super(), this.activeTab = "", this.vertical = !1;
+  }
+  firstUpdated() {
+    if (this._updatePanels(), !this.activeTab) {
+      const t = this.querySelector("kg-tab-panel");
+      t && (this.activeTab = t.value);
+    }
+  }
+  updated(t) {
+    t.has("activeTab") && this._updatePanels();
+  }
+  _handleTabClick(t) {
+    this.activeTab = t, this.dispatchEvent(new CustomEvent("kg-tab-change", {
+      detail: { value: t },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _updatePanels() {
+    Array.from(this.querySelectorAll("kg-tab-panel")).forEach((e) => {
+      e.active = e.value === this.activeTab;
+    }), this.requestUpdate();
+  }
+  render() {
+    const t = Array.from(this.querySelectorAll("kg-tab-panel"));
+    return r`
+      <div class="tabs-header">
+        ${t.map((e) => r`
+          <button 
+            class="tab-trigger ${this.activeTab === e.value ? "active" : ""}"
+            @click="${() => this._handleTabClick(e.value)}"
+          >
+            ${e.label}
+          </button>
+        `)}
+      </div>
+      <div class="tabs-content">
+        <slot @slotchange="${this._updatePanels}"></slot>
+      </div>
+    `;
+  }
+}
+customElements.define("kg-tabs", o);
+export {
+  o as kgtabs
+};

package/dist/components/kg-text.js

@@ -0,0 +1,141 @@
+import { LitElement as e, css as i, html as o } from "lit";
+import { classMap as n } from "lit/directives/class-map.js";
+class r extends e {
+  static properties = {
+    variant: { type: String },
+    // h1, h2, h3, h4, h5, h6, body, small, desc, caption
+    color: { type: String },
+    // default, muted, primary, secondary, tertiary, error
+    weight: { type: String },
+    // light, normal, medium, semibold, bold
+    align: { type: String },
+    // left, center, right, justify
+    as: { type: String },
+    // p, span, div, h1-h6
+    dividing: { type: Boolean },
+    disabled: { type: Boolean }
+  };
+  static styles = i`
+    :host {
+      display: block;
+      font-family: 'Century Gothic', 'Apple Gothic', 'CenturyGothic', sans-serif;
+      margin: 0;
+      padding: 0;
+      color: var(--kg-text);
+      line-height: 1.6;
+    }
+
+    :host([as="span"]) {
+      display: inline;
+    }
+
+    .ui-text {
+      margin: 0;
+      padding: 0;
+      transition: all 0.2s ease;
+    }
+
+    /* Headers */
+    .h1 { font-size: 2.5rem; font-weight: 700; line-height: 1.2; margin-bottom: 0.5em; }
+    .h2 { font-size: 2rem; font-weight: 700; line-height: 1.25; margin-bottom: 0.5em; }
+    .h3 { font-size: 1.5rem; font-weight: 700; line-height: 1.3; margin-bottom: 0.5em; }
+    .h4 { font-size: 1.25rem; font-weight: 700; line-height: 1.4; margin-bottom: 0.5em; }
+    .h5 { font-size: 1.1rem; font-weight: 700; line-height: 1.4; margin-bottom: 0.5em; }
+    .h6 { font-size: 1rem; font-weight: 700; line-height: 1.4; margin-bottom: 0.5em; }
+
+    /* Body Variants */
+    .body { font-size: 1rem; }
+    .small { font-size: 0.85rem; }
+    .desc { 
+      font-size: 0.95rem; 
+      color: var(--kg-text-muted); 
+      line-height: 1.5;
+    }
+    .caption { 
+      font-size: 0.75rem; 
+      text-transform: uppercase; 
+      letter-spacing: 0.05em;
+      color: var(--kg-text-muted);
+    }
+
+    /* Features */
+    .dividing {
+      padding-bottom: 0.25em;
+      border-bottom: 1px solid var(--kg-border);
+      margin-bottom: 1em;
+    }
+
+    /* Colors */
+    .muted { color: var(--kg-text-muted); }
+    .primary { color: var(--kg-primary); }
+    .secondary { color: var(--kg-secondary); }
+    .tertiary { color: var(--kg-tertiary); }
+    .error { color: #DB2828; }
+
+    /* Weights */
+    .light { font-weight: 300; }
+    .normal { font-weight: 400; }
+    .medium { font-weight: 500; }
+    .semibold { font-weight: 600; }
+    .bold { font-weight: 700; }
+
+    /* Alignment */
+    .center { text-align: center; }
+    .right { text-align: right; }
+    .justify { text-align: justify; }
+
+    /* Disabled */
+    .disabled {
+      opacity: 0.45;
+      pointer-events: none;
+    }
+
+    /* Subheader integration if used inside or after kg-text */
+    ::slotted([slot="sub"]) {
+      display: block;
+      font-weight: 400;
+      font-size: 0.85em;
+      color: var(--kg-text-muted);
+      margin-top: 0.25em;
+    }
+
+    ::slotted([slot="icon"]) {
+      margin-right: 0.5em;
+      opacity: 0.8;
+    }
+
+    .wrapper {
+      display: flex;
+      align-items: baseline;
+    }
+  `;
+  constructor() {
+    super(), this.variant = "body", this.weight = "", this.align = "left", this.dividing = !1;
+  }
+  render() {
+    const t = {
+      "ui-text": !0,
+      [this.variant]: !0,
+      [this.color]: !!this.color,
+      [this.weight]: !!this.weight,
+      [this.align]: !!this.align,
+      dividing: this.dividing,
+      disabled: this.disabled
+    };
+    return o`
+      <div class="${n(t)}">
+        <div class="wrapper">
+          <slot name="icon"></slot>
+          <div class="content">
+            <slot></slot>
+            <slot name="sub"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+customElements.define("kg-text", r);
+export {
+  r as kgtext
+};

package/dist/components/kg-textarea.js

@@ -0,0 +1,162 @@
+import { LitElement as r, css as a, html as t } from "lit";
+import { classMap as i } from "lit/directives/class-map.js";
+class l extends r {
+  static properties = {
+    value: { type: String },
+    label: { type: String },
+    placeholder: { type: String },
+    rows: { type: Number },
+    disabled: { type: Boolean, reflect: !0 },
+    error: { type: Boolean, reflect: !0 },
+    fullwidth: { type: Boolean, reflect: !0 },
+    inverted: { type: Boolean, reflect: !0 },
+    resize: { type: String, reflect: !0 }
+    // none, both, horizontal, vertical
+  };
+  static styles = a`
+    :host {
+      display: inline-block;
+      max-width: 100%;
+      vertical-align: top;
+    }
+
+    :host([fullwidth]) {
+      display: block;
+      width: 100%;
+    }
+
+    /* Allow host to grow with content if resize is allowed */
+    :host([resize="both"]), :host([resize="horizontal"]) {
+      display: inline-block;
+      width: auto;
+      min-width: 100px;
+    }
+
+    .kg-textarea-container {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      width: 100%;
+    }
+
+    .textarea-label {
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: var(--kg-text);
+      opacity: 0.8;
+      margin-left: 2px;
+    }
+
+    .ui-textarea {
+      display: inline-flex;
+      width: 100%;
+      color: var(--kg-text);
+      font-family: inherit;
+    }
+
+    .textarea-wrapper {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      align-items: stretch;
+      background: var(--kg-surface);
+      border: 1px solid var(--kg-border);
+      border-radius: var(--kg-radius-md, 8px);
+      transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
+      position: relative;
+    }
+
+    .textarea-wrapper:focus-within {
+      border-color: var(--kg-primary);
+      background: var(--kg-bg);
+      box-shadow: 0 0 0 2px rgba(65, 171, 52, 0.2);
+    }
+
+    textarea {
+      margin: 0;
+      flex: 1 1 auto;
+      outline: none;
+      -webkit-tap-highlight-color: rgba(0,0,0,0);
+      text-align: left;
+      line-height: 1.5;
+      font-family: inherit;
+      padding: 0.75rem 1rem;
+      background: transparent;
+      border: none;
+      color: inherit;
+      min-width: 0;
+      width: 100%;
+      min-height: 5rem;
+    }
+
+    textarea::placeholder {
+      color: var(--kg-text-muted);
+      opacity: 0.6;
+    }
+
+    /* States */
+    .disabled { opacity: 0.45; pointer-events: none; }
+    
+    .error .textarea-wrapper {
+      border-color: #DB2828;
+      background-color: rgba(219, 40, 40, 0.02);
+    }
+
+    /* Variations */
+    :host([inverted]) .textarea-label {
+      color: rgba(255, 255, 255, 0.9);
+    }
+    :host([inverted]) .textarea-wrapper {
+      background: rgba(255, 255, 255, 0.08);
+      border-color: rgba(255, 255, 255, 0.15);
+      color: #FFFFFF;
+    }
+    :host([inverted]) .textarea-wrapper:focus-within {
+      background: rgba(255, 255, 255, 0.12);
+      border-color: var(--kg-primary);
+    }
+    :host([inverted]) textarea::placeholder {
+      color: rgba(255, 255, 255, 0.5);
+    }
+  `;
+  constructor() {
+    super(), this.value = "", this.placeholder = "", this.rows = 3, this.disabled = !1, this.error = !1, this.fullwidth = !1, this.inverted = !1, this.resize = "vertical";
+  }
+  _handleInput(e) {
+    this.value = e.target.value, this.dispatchEvent(new CustomEvent("kg-input", {
+      detail: { value: this.value },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  render() {
+    const e = {
+      "ui-textarea": !0,
+      disabled: this.disabled,
+      error: this.error,
+      fullwidth: this.fullwidth,
+      inverted: this.inverted
+    };
+    return t`
+      <div class="kg-textarea-container">
+        ${this.label ? t`<label class="textarea-label">${this.label}</label>` : ""}
+        <div class="${i(e)}">
+          <div class="textarea-wrapper">
+            <textarea 
+              placeholder="${this.placeholder}" 
+              .value="${this.value}"
+              rows="${this.rows}"
+              ?disabled="${this.disabled}"
+              style="resize: ${this.resize}"
+              @input="${this._handleInput}"
+            ></textarea>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+customElements.define("kg-textarea", l);
+export {
+  l as kgtextarea
+};

package/dist/components/kg-toast.js

@@ -0,0 +1,200 @@
+import { LitElement as d, css as m, html as a } from "lit";
+import "lit/directives/class-map.js";
+class h extends d {
+  static properties = {
+    color: { type: String, reflect: !0 },
+    title: { type: String },
+    message: { type: String },
+    duration: { type: Number },
+    visible: { type: Boolean, reflect: !0 }
+  };
+  static styles = m`
+    :host {
+      --toast-accent: var(--kg-secondary);
+      display: block;
+      pointer-events: none;
+      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+      opacity: 0;
+      transform: translateY(-20px) scale(0.95);
+      margin-bottom: 0.75rem;
+    }
+
+    :host([visible]) {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+
+    .toast-container {
+      pointer-events: auto;
+      min-width: 260px;
+      max-width: 320px;
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      border-radius: var(--kg-radius-md, 8px);
+      box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+      padding: 0.8rem 1rem;
+      display: flex;
+      flex-direction: column;
+      gap: 0.2rem;
+      position: relative;
+      border-left: 5px solid var(--toast-accent);
+      transition: all 0.3s ease;
+    }
+
+    .toast-header {
+      font-weight: 700;
+      font-size: 0.95rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-right: 1.5rem;
+      color: var(--toast-text-color, var(--kg-text));
+    }
+
+    .toast-message {
+      font-size: 0.85rem;
+      line-height: 1.4;
+      color: var(--toast-text-color, var(--kg-text));
+      opacity: 0.85;
+    }
+
+    .close-btn {
+      position: absolute;
+      top: 0.4rem;
+      right: 0.4rem;
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      opacity: 0.5;
+      font-size: 0.8rem;
+      transition: all 0.2s;
+      border-radius: 50%;
+      color: var(--toast-text-color, var(--kg-text));
+    }
+
+    .close-btn:hover {
+      opacity: 1;
+      background: rgba(255, 255, 255, 0.1);
+    }
+
+    /* Glassmorphic Vibrant Colors */
+    :host([color="primary"]) { 
+      --toast-accent: var(--kg-primary);
+      --toast-bg: rgba(65, 171, 52, 0.15);
+      --toast-text-color: #2b7122;
+    }
+    :host([color="secondary"]) { 
+      --toast-accent: var(--kg-secondary);
+      --toast-bg: rgba(19, 103, 255, 0.12);
+      --toast-text-color: #0d46ad;
+    }
+    :host([color="tertiary"]) { 
+      --toast-accent: var(--kg-tertiary);
+      --toast-bg: rgba(251, 177, 64, 0.18);
+      --toast-text-color: #8c5a00;
+    }
+    :host([color="error"]) { 
+      --toast-accent: #DB2828;
+      --toast-bg: rgba(219, 40, 40, 0.12);
+      --toast-text-color: #b21e1e;
+    }
+
+    .toast-container {
+      background-color: var(--toast-bg);
+    }
+
+    /* Dark Mode Text Adjustments */
+    :host-context([data-theme='dark']) {
+      --toast-text-color: white;
+    }
+    :host-context([data-theme='dark']) :host([color="primary"]) { --toast-bg: rgba(65, 171, 52, 0.25); }
+    :host-context([data-theme='dark']) :host([color="secondary"]) { --toast-bg: rgba(19, 103, 255, 0.2); }
+    :host-context([data-theme='dark']) :host([color="tertiary"]) { --toast-bg: rgba(251, 177, 64, 0.3); }
+    :host-context([data-theme='dark']) :host([color="error"]) { --toast-bg: rgba(219, 40, 40, 0.25); }
+
+    /* Dark Mode Adjustment */
+    :host-context([data-theme='dark']) .toast-container {
+      box-shadow: 0 15px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05) inset;
+    }
+  `;
+  constructor() {
+    super(), this.duration = 3e3, this.visible = !1, this.color = "secondary", this._timerId = null;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.duration > 0 && (this._timerId = setTimeout(() => this.close(), this.duration));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._timerId && clearTimeout(this._timerId);
+  }
+  close() {
+    this._timerId && (clearTimeout(this._timerId), this._timerId = null), this.visible = !1, this.dispatchEvent(new CustomEvent("kg-close", { bubbles: !0, composed: !0 }));
+  }
+  render() {
+    return a`
+      <div class="toast-container">
+        <div class="close-btn" @click=${(t) => {
+      t.stopPropagation(), this.close();
+    }} title="Close">✕</div>
+        <div class="toast-header">
+          <span>${this.title}</span>
+        </div>
+        ${this.message ? a`<div class="toast-message">${this.message}</div>` : ""}
+      </div>
+    `;
+  }
+}
+customElements.define("kg-toast", h);
+const b = {
+  show(e) {
+    const t = e.position || "top-right";
+    let o = document.querySelector(`.kg-toast-container.${t}`);
+    if (!o) {
+      o = document.createElement("div"), o.className = `kg-toast-container ${t}`;
+      const i = t.includes("top"), n = t.includes("bottom"), c = t.includes("left"), l = t.includes("middle") || t.includes("center");
+      let s = `
+        position: fixed;
+        z-index: 99999;
+        display: flex;
+        flex-direction: column;
+        pointer-events: none;
+        width: 340px;
+        ${i ? "top: 1.5rem;" : "bottom: 1.5rem;"}
+        ${n ? "flex-direction: column-reverse;" : ""}
+      `;
+      l ? s += `
+          left: 50%;
+          transform: translateX(-50%);
+          align-items: center;
+        ` : c ? s += "left: 1.5rem;" : s += "right: 1.5rem;", o.setAttribute("style", s), document.body.appendChild(o);
+    }
+    const r = document.createElement("kg-toast");
+    r.title = e.title || "Notification", r.message = e.message || "", r.color = e.color || "secondary", r.duration = e.duration !== void 0 ? e.duration : 4e3, o.appendChild(r), requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        r.visible = !0;
+      });
+    }), r.addEventListener("kg-close", () => {
+      setTimeout(() => {
+        r.parentNode === o && r.remove(), o.children.length === 0 && o.remove();
+      }, 400);
+    });
+  },
+  success(e, t) {
+    this.show({ title: e, message: t, color: "primary" });
+  },
+  error(e, t) {
+    this.show({ title: e, message: t, color: "error" });
+  },
+  info(e, t) {
+    this.show({ title: e, message: t, color: "secondary" });
+  },
+  warning(e, t) {
+    this.show({ title: e, message: t, color: "tertiary" });
+  }
+};
+export {
+  h as kgtoast,
+  b as toast
+};