@lazhus/kg-ui 0.2.2

package/dist/components/kg-input.js

@@ -0,0 +1,318 @@
+import { LitElement as a, css as s, html as r } from "lit";
+import { classMap as l } from "lit/directives/class-map.js";
+class d extends a {
+  static properties = {
+    value: { type: String },
+    label: { type: String },
+    placeholder: { type: String },
+    type: { type: String },
+    size: { type: String },
+    disabled: { type: Boolean },
+    loading: { type: Boolean },
+    error: { type: Boolean },
+    fullwidth: { type: Boolean, reflect: !0 },
+    inverted: { type: Boolean, reflect: !0 },
+    hasLeft: { type: Boolean, state: !0 },
+    hasRight: { type: Boolean, state: !0 },
+    _showPassword: { type: Boolean, state: !0 },
+    positive: { type: Boolean, reflect: !0 },
+    integer: { type: Boolean, reflect: !0 }
+  };
+  static styles = s`
+    :host {
+      display: inline-block;
+      max-width: 100%;
+      vertical-align: top;
+    }
+
+    :host([fullwidth]) {
+      display: block;
+      width: 100%;
+    }
+
+    .kg-input-container {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      width: 100%;
+    }
+
+    .input-label {
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: var(--kg-text);
+      opacity: 0.8;
+      margin-left: 2px;
+    }
+
+    .ui-input {
+      display: inline-flex;
+      width: 100%;
+      color: var(--kg-text);
+      font-family: inherit;
+    }
+
+    .input-wrapper {
+      display: flex;
+      width: 100%;
+      align-items: stretch;
+      min-height: var(--kg-form-height);
+      background: var(--kg-surface);
+      border: 1px solid var(--kg-border);
+      border-radius: var(--kg-radius-md, 8px);
+      transition: all 0.2s ease;
+      overflow: hidden;
+      position: relative;
+    }
+
+    .input-wrapper:focus-within {
+      border-color: var(--kg-primary);
+      background: var(--kg-bg);
+      box-shadow: 0 0 0 2px rgba(65, 171, 52, 0.2);
+    }
+
+    input {
+      margin: 0;
+      flex: 1 1 auto;
+      outline: none;
+      -webkit-tap-highlight-color: rgba(0,0,0,0);
+      text-align: left;
+      line-height: var(--kg-form-height);
+      height: var(--kg-form-height);
+      font-family: inherit;
+      padding: 0 1rem;
+      background: transparent;
+      border: none;
+      color: inherit;
+      min-width: 0;
+      width: 100%;
+    }
+
+    input::placeholder {
+      color: var(--kg-text-muted);
+      opacity: 0.6;
+    }
+
+    /* Number input specific styling - hide spin buttons */
+    input[type="number"]::-webkit-inner-spin-button,
+    input[type="number"]::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+    input[type="number"] {
+      -moz-appearance: textfield;
+    }
+
+    .label-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--kg-bg-secondary, rgba(0,0,0,0.04));
+      padding: 0 0.8rem;
+      min-height: var(--kg-form-height);
+      color: var(--kg-text-muted);
+      font-size: 0.9em;
+      white-space: nowrap;
+      user-select: none;
+      transition: all 0.2s ease;
+      font-family: inherit;
+    }
+
+    /* Secret Sauce: Hide container if it has no content but KEEP THE SLOT ACTIVE */
+    .label-container:not(.visible) {
+      display: none;
+    }
+
+    .label-container.left {
+      border-right: 1px solid var(--kg-border);
+    }
+
+    .label-container.right {
+      border-left: 1px solid var(--kg-border);
+    }
+
+    .reveal-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 0.8rem;
+      cursor: pointer;
+      color: var(--kg-text-muted);
+      transition: color 0.2s;
+      user-select: none;
+    }
+
+    .reveal-btn:hover {
+        color: var(--kg-secondary);
+    }
+
+    /* States */
+    .disabled { opacity: 0.45; pointer-events: none; }
+    
+    .error .input-wrapper {
+      border-color: #DB2828;
+      background-color: rgba(219, 40, 40, 0.02);
+    }
+
+    .loading .input-wrapper::after {
+      position: absolute;
+      content: '';
+      top: 50%;
+      right: var(--loading-offset, 1rem);
+      margin-top: -0.5rem;
+      width: 1rem;
+      height: 1rem;
+      border: 2px solid rgba(0, 0, 0, 0.1);
+      border-top-color: var(--kg-secondary);
+      border-radius: 50%;
+      animation: input-spin 0.6s linear infinite;
+    }
+
+    @keyframes input-spin {
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
+    }
+
+    /* Sizes */
+    .mini input { font-size: 0.75rem; }
+    .small input { font-size: 0.85rem; }
+    .medium input { font-size: 1rem; }
+    .large input { font-size: 1.15rem; }
+    .massive input { font-size: 1.5rem; }
+
+    /* Variations */
+    .fullwidth { width: 100%; }
+
+    :host([inverted]) .input-label {
+      color: rgba(255, 255, 255, 0.9);
+    }
+
+    :host([inverted]) .input-wrapper {
+      background: rgba(255, 255, 255, 0.08);
+      border-color: rgba(255, 255, 255, 0.15);
+      color: #FFFFFF;
+    }
+
+    :host([inverted]) .input-wrapper:focus-within {
+      background: rgba(255, 255, 255, 0.12);
+      border-color: var(--kg-primary);
+    }
+
+    :host([inverted]) .label-container {
+      background: rgba(255, 255, 255, 0.12);
+      border-color: rgba(255, 255, 255, 0.15);
+      color: rgba(255, 255, 255, 0.7);
+    }
+
+    :host([inverted]) input::placeholder {
+      color: rgba(255, 255, 255, 0.5);
+    }
+
+    :host([inverted]) .reveal-btn {
+      color: rgba(255, 255, 255, 0.6);
+    }
+
+    :host([inverted]) .reveal-btn:hover {
+      color: var(--kg-secondary);
+    }
+
+    * {
+      font-family: 'Century Gothic', 'Apple Gothic', 'CenturyGothic', sans-serif;
+    }
+  `;
+  constructor() {
+    super(), this.type = "text", this.value = "", this.placeholder = "", this.hasLeft = !1, this.hasRight = !1, this._showPassword = !1;
+  }
+  _handleKeyDown(t) {
+    if (this.type === "number") {
+      if (t.key === "e" || t.key === "E") {
+        t.preventDefault();
+        return;
+      }
+      if (this.positive && (t.key === "-" || t.key === "_")) {
+        t.preventDefault();
+        return;
+      }
+      if (this.integer && (t.key === "." || t.key === ",")) {
+        t.preventDefault();
+        return;
+      }
+    }
+  }
+  _handleInput(t) {
+    let e = t.target.value;
+    this.type === "number" && (this.integer ? this.positive ? e = e.replace(/\D/g, "") : (e = e.replace(/[^\d-]/g, ""), e.indexOf("-") > 0 && (e = e.slice(0, e.indexOf("-")) + e.slice(e.indexOf("-") + 1))) : this.positive && (e = e.replace(/-/g, "")), t.target.value !== e && (t.target.value = e)), this.value = e, this.dispatchEvent(new CustomEvent("kg-input", {
+      detail: { value: this.value },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _handleSlotChange(t) {
+    const e = t.target;
+    if (!e) return;
+    const n = e.assignedNodes({ flatten: !0 }).some(
+      (i) => i.nodeType === Node.ELEMENT_NODE || i.nodeType === Node.TEXT_NODE && i.textContent.trim().length > 0
+    );
+    e.name === "left" && (this.hasLeft = n), e.name === "right" && (this.hasRight = n);
+  }
+  _togglePassword() {
+    this._showPassword = !this._showPassword;
+  }
+  render() {
+    const t = {
+      "ui-input": !0,
+      [this.size]: !!this.size,
+      disabled: this.disabled,
+      loading: this.loading,
+      error: this.error,
+      fullwidth: this.fullwidth,
+      inverted: this.inverted
+    }, e = this.type === "number", o = this.type === "password" ? this._showPassword ? "text" : "password" : e ? "text" : this.type, n = this.type === "password" ? this.hasRight ? "5rem" : "3rem" : this.hasRight ? "3rem" : "1rem", i = e ? this.integer ? "numeric" : "decimal" : "";
+    return r`
+      <div class="kg-input-container" style="--loading-offset: ${n}">
+        ${this.label ? r`<label class="input-label">${this.label}</label>` : ""}
+        <div class="${l(t)}">
+          <div class="input-wrapper">
+            <div class="label-container left ${this.hasLeft ? "visible" : ""}">
+              <slot name="left" @slotchange="${this._handleSlotChange}"></slot>
+            </div>
+            
+            <input 
+              type="${o}"
+              inputmode="${i}"
+              placeholder="${this.placeholder}" 
+              .value="${this.value}"
+              ?disabled="${this.disabled}"
+              @input="${this._handleInput}"
+              @keydown="${this._handleKeyDown}"
+            />
+
+            ${this.type === "password" ? r`
+                <div class="reveal-btn" @click="${this._togglePassword}">
+                    ${this._showPassword ? r`
+                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+                        <circle cx="12" cy="12" r="3"></circle>
+                      </svg>
+                    ` : r`
+                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 1.06-2M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
+                        <line x1="1" y1="1" x2="23" y2="23"></line>
+                      </svg>
+                    `}
+                </div>
+            ` : ""}
+
+            <div class="label-container right ${this.hasRight ? "visible" : ""}">
+              <slot name="right" @slotchange="${this._handleSlotChange}"></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+customElements.define("kg-input", d);
+export {
+  d as kginput
+};

package/dist/components/kg-loader.js

@@ -0,0 +1,175 @@
+import { LitElement as i, css as r, html as e } from "lit";
+class a extends i {
+  static properties = {
+    src: { type: String },
+    text: { type: String },
+    visible: { type: Boolean, reflect: !0 },
+    glass: { type: Boolean, reflect: !0 }
+  };
+  static styles = r`
+    :host {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      z-index: 999999;
+      background-color: var(--kg-bg, #ffffff);
+      visibility: hidden;
+      opacity: 0;
+      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+      pointer-events: none;
+    }
+
+    :host([visible]) {
+      visibility: visible;
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    :host([glass]) {
+      background-color: rgba(255, 255, 255, 0.4);
+      backdrop-filter: blur(20px) saturate(180%);
+      -webkit-backdrop-filter: blur(20px) saturate(180%);
+    }
+
+    /* Dark Mode Support */
+    :host-context([data-theme='dark']) {
+      background-color: #0f172a;
+    }
+    :host-context([data-theme='dark']):host([glass]) {
+      background-color: rgba(15, 23, 42, 0.6);
+    }
+
+    .loader-container {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+    }
+
+    /* Decorative Orbits */
+    .orbit {
+        position: absolute;
+        border: 2px solid var(--kg-primary);
+        border-radius: 50%;
+        opacity: 0.1;
+        pointer-events: none;
+    }
+    .orbit-1 { width: 140px; height: 140px; animation: rotate 3s linear infinite; border-top-color: transparent; }
+    .orbit-2 { width: 180px; height: 180px; animation: rotate 5s linear reverse infinite; border-right-color: transparent; }
+
+    @keyframes rotate {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+    }
+
+    .loader-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 1rem;
+      text-align: center;
+      padding: 3rem;
+      z-index: 2;
+    }
+
+    .image-wrapper {
+      position: relative;
+      min-width: 140px;
+      min-height: 140px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+      transform: scale(0.8);
+      transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+      transition-delay: 0.1s;
+    }
+
+    :host([visible]) .image-wrapper {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    .loader-image {
+      max-width: 200px;
+      max-height: 140px;
+      object-fit: contain;
+      filter: drop-shadow(0 4px 12px rgba(0,0,0,0.1));
+    }
+
+    .loader-info {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 1.5rem;
+        opacity: 0;
+        transform: translateY(10px);
+        transition: all 0.6s ease;
+        transition-delay: 0.3s;
+        width: 100%;
+        max-width: 240px;
+    }
+
+    :host([visible]) .loader-info {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    .loader-text {
+      font-size: 1.25rem;
+      font-weight: 700;
+      color: var(--kg-text, #1e293b);
+      letter-spacing: -0.01em;
+    }
+
+    :host-context([data-theme='dark']) .loader-text { color: #f8fafc; }
+  `;
+  constructor() {
+    super(), this.src = "", this.text = "", this.visible = !1, this.glass = !1;
+  }
+  render() {
+    return e`
+      <div class="loader-container">
+        <div class="orbit orbit-1"></div>
+        <div class="orbit orbit-2"></div>
+        
+        <div class="loader-content">
+            ${this.src ? e`
+            <div class="image-wrapper">
+                <img class="loader-image" src="${this.src}" alt="Loading" />
+            </div>
+            ` : ""}
+            
+            ${this.text ? e`
+            <div class="loader-info">
+                <div class="loader-text">${this.text}</div>
+            </div>
+            ` : ""}
+        </div>
+      </div>
+    `;
+  }
+}
+customElements.define("kg-loader", a);
+const n = {
+  _instance: null,
+  show(t = {}) {
+    this._instance || (this._instance = document.createElement("kg-loader"), document.body.appendChild(this._instance)), this._instance.src = t.src !== void 0 ? t.src : "", this._instance.text = t.text !== void 0 ? t.text : "", this._instance.glass = t.glass !== void 0 ? t.glass : !0, requestAnimationFrame(() => {
+      this._instance.visible = !0;
+    });
+  },
+  hide() {
+    this._instance && (this._instance.visible = !1);
+  }
+};
+export {
+  a as kgloader,
+  n as loader
+};

package/dist/components/kg-modal.js

@@ -0,0 +1,165 @@
+import { LitElement as i, css as a, html as t } from "lit";
+import { classMap as o } from "lit/directives/class-map.js";
+class l extends i {
+  static properties = {
+    open: { type: Boolean, reflect: !0 },
+    size: { type: String },
+    // mini, tiny, small, large, fullscreen
+    closable: {
+      type: Boolean,
+      converter: (e) => e !== "false"
+    },
+    basic: { type: Boolean }
+  };
+  static styles = a`
+    :host {
+      display: block;
+      --kg-modal-z-index: 2000;
+    }
+
+    .kg-modal-dimmer {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.6);
+      backdrop-filter: blur(5px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: var(--kg-modal-z-index);
+      opacity: 0;
+      visibility: hidden;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      padding: var(--kg-space-md);
+      box-sizing: border-box;
+    }
+
+    .kg-modal-dimmer.open {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    .kg-modal-content {
+      background: var(--kg-bg);
+      color: var(--kg-text);
+      border-radius: var(--kg-radius-lg);
+      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+      width: 100%;
+      max-width: 600px;
+      transform: scale(0.95) translateY(10px);
+      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+      display: flex;
+      flex-direction: column;
+      max-height: 90vh;
+      overflow: hidden;
+    }
+
+    .kg-modal-dimmer.open .kg-modal-content {
+      transform: scale(1) translateY(0);
+    }
+
+    /* Sizes */
+    .size-mini { max-width: 350px; }
+    .size-tiny { max-width: 450px; }
+    .size-small { max-width: 550px; }
+    .size-large { max-width: 900px; }
+    .size-fullscreen { 
+      max-width: 95vw; 
+      height: 95vh;
+    }
+
+    /* Basic style */
+    :host([basic]) .kg-modal-content {
+      background: transparent;
+      box-shadow: none;
+      color: white;
+    }
+
+    .modal-header {
+      padding: var(--kg-space-lg);
+      font-size: 1.25rem;
+      font-weight: 700;
+      border-bottom: 1px solid var(--kg-border);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .modal-body {
+      padding: var(--kg-space-lg);
+      overflow-y: auto;
+      flex: 1;
+    }
+
+    .modal-footer {
+      padding: var(--kg-space-md) var(--kg-space-lg);
+      border-top: 1px solid var(--kg-border);
+      background: var(--kg-surface);
+      display: flex;
+      justify-content: flex-end;
+      gap: 0.75rem;
+    }
+
+    .close-button {
+      background: none;
+      border: none;
+      color: var(--kg-text-muted);
+      cursor: pointer;
+      font-size: 1.5rem;
+      padding: 0.5rem;
+      line-height: 1;
+      border-radius: var(--kg-radius-sm);
+      transition: all 0.2s;
+    }
+
+    .close-button:hover {
+      background: var(--kg-surface);
+      color: var(--kg-text);
+    }
+  `;
+  constructor() {
+    super(), this.open = !1, this.size = "small", this.closable = !0, this.basic = !1;
+  }
+  close() {
+    this.open = !1, this.dispatchEvent(new CustomEvent("close", { bubbles: !0, composed: !0 }));
+  }
+  _handleDimmerClick(e) {
+    this.closable && e.target.classList.contains("kg-modal-dimmer") && this.close();
+  }
+  willUpdate(e) {
+    e.has("open") && (this.open ? document.body.style.overflow = "hidden" : document.body.style.overflow = "");
+  }
+  render() {
+    const e = {
+      "kg-modal-dimmer": !0,
+      open: this.open
+    }, s = {
+      "kg-modal-content": !0,
+      [`size-${this.size}`]: !0
+    };
+    return t`
+      <div class="${o(e)}" @click="${this._handleDimmerClick}">
+        <div class="${o(s)}">
+          <div class="modal-header">
+            <slot name="header"></slot>
+            ${this.closable ? t`
+              <button class="close-button" @click="${this.close}">&times;</button>
+            ` : ""}
+          </div>
+          <div class="modal-body">
+            <slot></slot>
+          </div>
+          <div class="modal-footer">
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+customElements.define("kg-modal", l);
+export {
+  l as kgmodal
+};