@lazhus/kg-ui 0.2.2

package/dist/components/kg-divider.js

@@ -0,0 +1,118 @@
+import { LitElement as t, css as r, html as e } from "lit";
+import { classMap as l } from "lit/directives/class-map.js";
+class a extends t {
+  static properties = {
+    vertical: { type: Boolean },
+    dashed: { type: Boolean },
+    fitted: { type: Boolean },
+    inverted: { type: Boolean },
+    label: { type: String }
+  };
+  static styles = r`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    :host([vertical]) {
+      display: inline-flex;
+      vertical-align: middle;
+      height: 1.5rem;
+      width: auto;
+      align-self: center;
+    }
+
+    .divider-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+    }
+
+    .divider-container.horizontal {
+      flex-direction: row;
+      margin: 1.5rem 0;
+    }
+
+    .divider-container.vertical {
+      flex-direction: column;
+      margin: 0 1rem;
+      height: 100%;
+      width: auto;
+    }
+
+    .line {
+      flex: 1;
+      border: 0;
+    }
+
+    .divider-container.horizontal .line {
+      border-top: 1px solid var(--kg-border);
+      height: 0;
+    }
+
+    .divider-container.vertical .line {
+      border-left: 1px solid var(--kg-border);
+      width: 0;
+      height: 100%;
+    }
+
+    /* Dashed State */
+    .divider-container.dashed.horizontal .line {
+      border-top-style: dashed;
+    }
+
+    .divider-container.dashed.vertical .line {
+      border-left-style: dashed;
+    }
+
+    .label {
+      padding: 0 1rem;
+      font-size: 0.85rem;
+      font-weight: 700;
+      color: var(--kg-text-muted);
+      white-space: nowrap;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      flex-shrink: 0;
+    }
+
+    .divider-container.vertical .label {
+      padding: 0.5rem 0;
+      writing-mode: vertical-lr;
+    }
+
+    .fitted { margin: 0 !important; }
+
+    .inverted .line { border-color: rgba(255, 255, 255, 0.2); }
+    .inverted .label { color: rgba(255, 255, 255, 0.6); }
+
+    .no-label .label { display: none; }
+  `;
+  constructor() {
+    super(), this.vertical = !1, this.dashed = !1, this.fitted = !1, this.inverted = !1, this.label = "";
+  }
+  render() {
+    const i = {
+      "divider-container": !0,
+      horizontal: !this.vertical,
+      vertical: this.vertical,
+      dashed: this.dashed,
+      fitted: this.fitted,
+      inverted: this.inverted,
+      "no-label": !this.label
+    };
+    return e`
+      <div class="${l(i)}">
+        <div class="line"></div>
+        ${this.label ? e`<span class="label">${this.label}</span>` : ""}
+        <div class="line"></div>
+      </div>
+    `;
+  }
+}
+customElements.define("kg-divider", a);
+export {
+  a as kgdivider
+};

package/dist/components/kg-drawer.js

@@ -0,0 +1,178 @@
+import { LitElement as o, css as i, html as t } from "lit";
+import { classMap as r } from "lit/directives/class-map.js";
+class s extends o {
+  static properties = {
+    open: { type: Boolean, reflect: !0 },
+    placement: { type: String },
+    // left, right, top, bottom
+    size: { type: String },
+    // small, medium, large, full
+    noOverlay: { type: Boolean },
+    closable: {
+      type: Boolean,
+      converter: (e) => e !== "false"
+    }
+  };
+  static styles = i`
+    :host {
+      display: block;
+      --kg-drawer-width: 350px;
+      --kg-drawer-height: 350px;
+      --kg-drawer-z-index: 1000;
+    }
+
+    .kg-drawer-overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.4);
+      backdrop-filter: blur(4px);
+      z-index: var(--kg-drawer-z-index);
+      opacity: 0;
+      visibility: hidden;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .kg-drawer-overlay.open {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    .kg-drawer-content {
+      position: fixed;
+      background: var(--kg-bg);
+      color: var(--kg-text);
+      z-index: calc(var(--kg-drawer-z-index) + 1);
+      box-shadow: var(--kg-shadow);
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+    }
+
+    /* Placements */
+    .placement-right {
+      top: 0;
+      right: 0;
+      width: var(--kg-drawer-width);
+      height: 100%;
+      transform: translateX(100%);
+    }
+
+    .placement-left {
+      top: 0;
+      left: 0;
+      width: var(--kg-drawer-width);
+      height: 100%;
+      transform: translateX(-100%);
+    }
+
+    .placement-top {
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: var(--kg-drawer-height);
+      transform: translateY(-100%);
+    }
+
+    .placement-bottom {
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: var(--kg-drawer-height);
+      transform: translateY(100%);
+    }
+
+    /* Open States */
+    .open.placement-right, .open.placement-left { transform: translateX(0); }
+    .open.placement-top, .open.placement-bottom { transform: translateY(0); }
+
+    /* Sizes */
+    .size-small { --kg-drawer-width: 260px; --kg-drawer-height: 260px; }
+    .size-medium { --kg-drawer-width: 400px; --kg-drawer-height: 400px; }
+    .size-large { --kg-drawer-width: 600px; --kg-drawer-height: 600px; }
+    .size-full { --kg-drawer-width: 100%; --kg-drawer-height: 100%; }
+
+    .drawer-header {
+      padding: var(--kg-space-md) var(--kg-space-lg);
+      border-bottom: 1px solid var(--kg-border);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .drawer-body {
+      padding: var(--kg-space-lg);
+      flex: 1;
+      overflow-y: auto;
+    }
+
+    .drawer-footer {
+      padding: var(--kg-space-md) var(--kg-space-lg);
+      border-top: 1px solid var(--kg-border);
+    }
+
+    .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.placement = "right", this.size = "medium", this.closable = !0;
+  }
+  close() {
+    this.open = !1, this.dispatchEvent(new CustomEvent("close", { bubbles: !0, composed: !0 }));
+  }
+  _handleOverlayClick() {
+    this.closable && this.close();
+  }
+  willUpdate(e) {
+    e.has("open") && (this.open ? document.body.style.overflow = "hidden" : document.body.style.overflow = "");
+  }
+  render() {
+    const e = {
+      "kg-drawer-overlay": !0,
+      open: this.open && !this.noOverlay
+    }, a = {
+      "kg-drawer-content": !0,
+      open: this.open,
+      [`placement-${this.placement}`]: !0,
+      [`size-${this.size}`]: !0
+    };
+    return t`
+      <div class="${r(e)}" @click="${this._handleOverlayClick}"></div>
+      <div class="${r(a)}">
+        <div class="drawer-header">
+          <slot name="header"></slot>
+          ${this.closable ? t`
+            <button class="close-button" @click="${this.close}">&times;</button>
+          ` : ""}
+        </div>
+        <div class="drawer-body">
+          <slot></slot>
+        </div>
+        <div class="drawer-footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+customElements.define("kg-drawer", s);
+export {
+  s as kgdrawer
+};

package/dist/components/kg-file-upload.js

@@ -0,0 +1,274 @@
+import { LitElement as l, css as o, html as t } from "lit";
+class d extends l {
+  static properties = {
+    label: { type: String },
+    placeholder: { type: String },
+    accept: { type: String },
+    multiple: { type: Boolean },
+    disabled: { type: Boolean },
+    hideChips: { type: Boolean, attribute: "hide-chips" },
+    files: { type: Array, state: !0 },
+    _previews: { state: !0 }
+  };
+  static styles = o`
+    :host {
+      display: block;
+      width: 100%;
+      font-family: inherit;
+    }
+
+    .container {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+
+    .label {
+      font-size: 0.85rem;
+      font-weight: 600;
+      color: var(--kg-text);
+    }
+
+    .upload-wrapper {
+      display: flex;
+      align-items: stretch;
+      border: 2px solid var(--kg-border);
+      border-radius: 10px;
+      overflow: hidden;
+      background: var(--kg-bg-primary);
+      transition: all 0.2s ease;
+      height: var(--kg-form-height);
+      cursor: pointer;
+    }
+
+    .upload-wrapper:hover:not(.disabled) {
+      border-color: var(--kg-primary);
+    }
+
+    .upload-wrapper.active {
+      border-color: var(--kg-primary);
+      box-shadow: 0 0 0 3px rgba(65, 171, 52, 0.1);
+    }
+
+    .upload-wrapper.disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+      background: var(--kg-bg-secondary);
+    }
+
+    .file-display {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      padding: 0 1rem;
+      font-size: 0.9rem;
+      color: var(--kg-text-muted);
+      min-width: 0;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .file-display.has-file {
+      color: var(--kg-text);
+      font-weight: 500;
+    }
+
+    .divider {
+      width: 1px;
+      background: var(--kg-border);
+      margin: 8px 0;
+      transition: background 0.2s ease;
+    }
+
+    .upload-wrapper:hover .divider {
+      background: var(--kg-primary);
+      opacity: 0.3;
+    }
+
+    .upload-btn {
+      width: 48px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--kg-primary);
+      background: transparent;
+      transition: all 0.2s ease;
+    }
+
+    .upload-wrapper:hover .upload-btn {
+      background: rgba(65, 171, 52, 0.05);
+    }
+
+    input[type="file"] {
+      display: none;
+    }
+
+    /* File Chips below for multiple */
+    .file-chips {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      margin-top: 0.75rem;
+    }
+
+    .chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+      padding: 0.4rem 0.75rem;
+      background: var(--kg-bg-secondary);
+      border: 1px solid var(--kg-border);
+      border-radius: 20px;
+      font-size: 0.8rem;
+      animation: slideIn 0.2s ease;
+    }
+
+    .chip-name {
+      max-width: 150px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .chip-remove {
+      cursor: pointer;
+      color: var(--kg-text-muted);
+      display: flex;
+      align-items: center;
+    }
+
+    .chip-remove:hover {
+      color: #e74c3c;
+    }
+
+    @keyframes slideIn {
+      from { opacity: 0; transform: scale(0.95); }
+      to { opacity: 1; transform: scale(1); }
+    }
+
+    .preview-thumb {
+      width: 24px;
+      height: 24px;
+      object-fit: cover;
+      border-radius: 4px;
+      margin-right: 8px;
+      border: 1px solid var(--kg-border);
+    }
+    
+    .chip .preview-thumb {
+        width: 20px;
+        height: 20px;
+        margin-right: 6px;
+    }
+  `;
+  constructor() {
+    super(), this.label = "", this.placeholder = "Dosya seçin...", this.accept = "*", this.multiple = !1, this.disabled = !1, this.hideChips = !1, this.files = [], this._previews = /* @__PURE__ */ new Map();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._revokePreviews();
+  }
+  updated(e) {
+    e.has("files") && this._updatePreviews();
+  }
+  _revokePreviews() {
+    this._previews.forEach((e) => URL.revokeObjectURL(e)), this._previews.clear();
+  }
+  _updatePreviews() {
+    this._revokePreviews();
+    const e = /* @__PURE__ */ new Map();
+    this.files.forEach((i) => {
+      i.type.startsWith("image/") && e.set(i, URL.createObjectURL(i));
+    }), this._previews = e, this.requestUpdate();
+  }
+  _handleFileChange(e) {
+    const i = Array.from(e.target.files);
+    this._addFiles(i), e.target.value = "";
+  }
+  _addFiles(e) {
+    this.disabled || e.length === 0 || (this.files = this.multiple ? e : [e[0]], this._emitChange());
+  }
+  _removeFile(e) {
+    this.files = this.files.filter((i, r) => r !== e), this._emitChange();
+  }
+  _emitChange() {
+    this.dispatchEvent(new CustomEvent("kg-change", {
+      detail: { files: this.files },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _triggerUpload() {
+    this.disabled || this.shadowRoot.querySelector("input").click();
+  }
+  // Drag & Drop
+  _onDragOver(e) {
+    e.preventDefault(), !this.disabled && this.shadowRoot.querySelector(".upload-wrapper").classList.add("active");
+  }
+  _onDragLeave() {
+    this.shadowRoot.querySelector(".upload-wrapper").classList.remove("active");
+  }
+  _onDrop(e) {
+    if (e.preventDefault(), this._onDragLeave(), this.disabled) return;
+    const i = Array.from(e.dataTransfer.files);
+    this._addFiles(i);
+  }
+  render() {
+    const e = this.files.length > 0, i = e ? this.multiple ? `${this.files.length} Dosya Seçildi` : this.files[0].name : this.placeholder;
+    return t`
+      <div class="container">
+        ${this.label ? t`<label class="label">${this.label}</label>` : ""}
+        
+        <div 
+          class="upload-wrapper ${this.disabled ? "disabled" : ""}"
+          @click="${this._triggerUpload}"
+          @dragover="${this._onDragOver}"
+          @dragleave="${this._onDragLeave}"
+          @drop="${this._onDrop}"
+        >
+          <div class="file-display ${e ? "has-file" : ""}">
+            ${e && !this.multiple && this._previews.get(this.files[0]) ? t`<img src="${this._previews.get(this.files[0])}" class="preview-thumb" alt="Preview" />` : ""}
+            ${i}
+          </div>
+          
+          <div class="divider"></div>
+          
+          <div class="upload-btn">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+              <line x1="12" y1="5" x2="12" y2="19"></line>
+              <line x1="5" y1="12" x2="19" y2="12"></line>
+            </svg>
+          </div>
+
+          <input 
+            type="file" 
+            ?multiple="${this.multiple}" 
+            accept="${this.accept}"
+            ?disabled="${this.disabled}"
+            @change="${this._handleFileChange}"
+          >
+        </div>
+
+        ${this.multiple && !this.hideChips && this.files.length > 0 ? t`
+          <div class="file-chips">
+            ${this.files.map((r, s) => t`
+              <div class="chip">
+                ${this._previews.get(r) ? t`<img src="${this._previews.get(r)}" class="preview-thumb" alt="Preview" />` : ""}
+                <span class="chip-name">${r.name}</span>
+                <div class="chip-remove" @click="${(a) => {
+      a.stopPropagation(), this._removeFile(s);
+    }}">
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+                </div>
+              </div>
+            `)}
+          </div>
+        ` : ""}
+      </div>
+    `;
+  }
+}
+customElements.define("kg-file-upload", d);
+export {
+  d as kgfileupload
+};

package/dist/components/kg-grid.js

@@ -0,0 +1,46 @@
+import { LitElement as e, css as t, html as d } from "lit";
+class i extends e {
+  static properties = {
+    container: { type: Boolean },
+    // if true, acts as a centered container
+    padded: { type: Boolean },
+    relaxed: { type: Boolean },
+    doubling: { type: Boolean },
+    stackable: { type: Boolean }
+  };
+  static styles = t`
+    :host {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    :host([container]) {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding-left: var(--kg-space-md);
+      padding-right: var(--kg-space-md);
+    }
+
+    .ui-grid {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+    }
+
+    :host([padded]) {
+      padding: var(--kg-space-md) 0;
+    }
+  `;
+  render() {
+    return d`
+      <div class="ui-grid">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+customElements.define("kg-grid", i);
+export {
+  i as kggrid
+};

package/dist/components/kg-image.js

@@ -0,0 +1,100 @@
+import { LitElement as i, css as r, html as t } from "lit";
+class s extends i {
+  static properties = {
+    src: { type: String },
+    alt: { type: String },
+    width: { type: String },
+    height: { type: String },
+    fit: { type: String },
+    // 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'
+    shape: { type: String },
+    // 'square' | 'circle' | 'rounded'
+    lazy: { type: Boolean },
+    _error: { state: !0 }
+  };
+  static styles = r`
+    :host {
+      display: inline-block;
+      line-height: 0;
+      overflow: hidden;
+      background-color: var(--kg-bg-secondary);
+    }
+
+    :host([shape="circle"]) {
+      border-radius: 50%;
+    }
+
+    :host([shape="rounded"]) {
+      border-radius: var(--kg-radius, 8px);
+    }
+
+    :host([shape="square"]) {
+      border-radius: 0;
+    }
+
+    .img-wrapper {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    img {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+
+    .fallback {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      color: var(--kg-text-muted);
+      font-size: 0.8rem;
+    }
+  `;
+  constructor() {
+    super(), this.src = "", this.alt = "", this.width = "100%", this.height = "auto", this.fit = "cover", this.shape = "square", this.lazy = !1, this._error = !1;
+  }
+  willUpdate(e) {
+    e.has("src") && (this._error = !1);
+  }
+  render() {
+    return `${this.width}${this.height}`, t`
+      <style>
+        :host {
+          width: ${this.width};
+          height: ${this.height};
+        }
+        img {
+          object-fit: ${this.fit};
+        }
+      </style>
+      <div class="img-wrapper">
+        ${this._error || !this.src ? t`
+              <div class="fallback">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+                  <circle cx="8.5" cy="8.5" r="1.5"></circle>
+                  <polyline points="21 15 16 10 5 21"></polyline>
+                </svg>
+              </div>
+            ` : t`
+              <img 
+                src="${this.src}" 
+                alt="${this.alt}"
+                loading="${this.lazy ? "lazy" : "eager"}"
+                @error="${() => this._error = !0}"
+              />
+            `}
+      </div>
+    `;
+  }
+}
+customElements.define("kg-image", s);
+export {
+  s as kgimage
+};