@lazhus/kg-ui 0.2.2

package/dist/components/kg-progress.js

@@ -0,0 +1,82 @@
+import { LitElement as t, css as s, html as r } from "lit";
+class o extends t {
+  static properties = {
+    value: { type: Number },
+    max: { type: Number },
+    color: { type: String, reflect: !0 },
+    height: { type: String },
+    showValue: { type: Boolean },
+    indeterminate: { type: Boolean, reflect: !0 }
+  };
+  static styles = s`
+    :host {
+      display: block;
+      width: 100%;
+      margin: 0.5rem 0;
+    }
+
+    .progress-wrapper {
+      width: 100%;
+      background-color: var(--kg-bg-secondary, #eee);
+      border-radius: 4px;
+      overflow: hidden;
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+
+    .progress-bar {
+      height: 100%;
+      background-color: var(--progress-color, var(--kg-primary));
+      border-radius: 4px;
+      transition: width 0.3s ease;
+    }
+
+    .progress-label {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 0.7rem;
+      font-weight: 700;
+      pointer-events: none;
+      z-index: 1;
+      color: white;
+      text-shadow: 0 0 2px rgba(0,0,0,0.8);
+    }
+
+    /* Colors */
+    :host([color="primary"]) { --progress-color: var(--kg-primary); }
+    :host([color="secondary"]) { --progress-color: var(--kg-secondary); }
+    :host([color="tertiary"]) { --progress-color: var(--kg-tertiary); }
+    :host([color="error"]) { --progress-color: #DB2828; }
+
+    /* Indeterminate Animation */
+    :host([indeterminate]) .progress-bar {
+      width: 30% !important;
+      animation: indeterminate 1.5s infinite linear;
+      position: absolute;
+    }
+
+    @keyframes indeterminate {
+      0% { left: -30%; }
+      100% { left: 100%; }
+    }
+  `;
+  constructor() {
+    super(), this.value = 0, this.max = 100, this.color = "primary", this.height = "12px", this.showValue = !1, this.indeterminate = !1;
+  }
+  render() {
+    const e = Math.min(100, Math.max(0, this.value / this.max * 100));
+    return r`
+      <div class="progress-wrapper" style="height: ${this.height};">
+        ${this.showValue && !this.indeterminate ? r`<span class="progress-label">${Math.round(e)}%</span>` : ""}
+        <div class="progress-bar" style="width: ${this.indeterminate ? "30%" : e + "%"};"></div>
+      </div>
+    `;
+  }
+}
+customElements.define("kg-progress", o);
+export {
+  o as kgprogress
+};

package/dist/components/kg-radio-group.js

@@ -0,0 +1,75 @@
+import { LitElement as r, css as a, html as i } from "lit";
+class l extends r {
+  static properties = {
+    value: { type: String, reflect: !0 },
+    direction: { type: String },
+    // horizontal, vertical
+    label: { type: String }
+  };
+  static styles = a`
+    :host {
+      display: block;
+    }
+
+    .kg-radio-group-container {
+      display: flex;
+      gap: 16px;
+    }
+
+    .kg-radio-group-container.vertical {
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .kg-radio-group-container.horizontal {
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+
+    .group-label {
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: var(--kg-text-muted);
+      margin-bottom: 0.75rem;
+      display: block;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+  `;
+  constructor() {
+    super(), this.direction = "vertical", this.value = "", this.addEventListener("kg-radio-select", this._handleRadioSelect);
+  }
+  _handleRadioSelect(e) {
+    const t = e.detail.value;
+    this.value = t, this._updateChildren(), this.dispatchEvent(new CustomEvent("change", {
+      detail: { value: this.value },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _updateChildren() {
+    this.querySelectorAll("kg-radio").forEach((t) => {
+      t.checked = t.value === this.value;
+    });
+  }
+  firstUpdated() {
+    this._updateChildren();
+  }
+  updated(e) {
+    e.has("value") && this._updateChildren();
+  }
+  render() {
+    return i`
+      <div class="kg-radio-group">
+        ${this.label ? i`<span class="group-label">${this.label}</span>` : ""}
+        <div class="kg-radio-group-container ${this.direction}">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+customElements.define("kg-radio-group", l);
+export {
+  l as kgradiogroup
+};

package/dist/components/kg-radio.js

@@ -0,0 +1,121 @@
+import { LitElement as o, css as s, html as e } from "lit";
+import { classMap as c } from "lit/directives/class-map.js";
+class l extends o {
+  static properties = {
+    checked: { type: Boolean, reflect: !0 },
+    label: { type: String },
+    name: { type: String },
+    value: { type: String },
+    disabled: { type: Boolean },
+    color: { type: String }
+  };
+  static styles = s`
+    :host {
+      display: inline-block;
+      cursor: pointer;
+      user-select: none;
+      font-family: inherit;
+    }
+
+    .kg-radio-container {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      position: relative;
+    }
+
+    .radio-circle {
+      width: 20px;
+      height: 20px;
+      border: 2px solid var(--kg-border);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--kg-bg);
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      position: relative;
+      flex-shrink: 0;
+    }
+
+    .kg-radio-container:hover .radio-circle {
+      border-color: var(--radio-active-color, var(--kg-primary));
+    }
+
+    .kg-radio-container.checked .radio-circle {
+      border-color: var(--radio-active-color, var(--kg-primary));
+    }
+
+    /* Inner Dot */
+    .radio-circle::after {
+      content: '';
+      width: 10px;
+      height: 10px;
+      background: var(--radio-active-color, var(--kg-primary));
+      border-radius: 50%;
+      transform: scale(0);
+      transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    }
+
+    .checked .radio-circle::after {
+      transform: scale(1);
+    }
+
+    .label-text {
+      font-size: 0.95rem;
+      color: var(--kg-text);
+      transition: color 0.2s;
+    }
+
+    /* States */
+    .disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .disabled .radio-circle {
+        background: var(--kg-surface);
+    }
+  `;
+  constructor() {
+    super(), this.checked = !1, this.disabled = !1;
+  }
+  _handleClick() {
+    this.disabled || this.checked || this.dispatchEvent(new CustomEvent("kg-radio-select", {
+      detail: { value: this.value },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  render() {
+    const t = {
+      "kg-radio-container": !0,
+      checked: this.checked,
+      disabled: this.disabled
+    }, i = (r) => r ? r.startsWith("#") || r.startsWith("rgb") || r.startsWith("hsl") ? r : {
+      primary: "var(--kg-primary)",
+      secondary: "var(--kg-secondary)",
+      tertiary: "var(--kg-tertiary)",
+      error: "#e74c3c",
+      red: "#e74c3c",
+      green: "#2ecc71",
+      blue: "#3498db",
+      orange: "#f39c12",
+      purple: "#9b59b6"
+    }[r] || `var(--kg-${r}, ${r})` : "var(--kg-primary)", a = this.color ? `--radio-active-color: ${i(this.color)}` : "";
+    return e`
+      <div 
+        class="${c(t)}" 
+        style="${a}"
+        @click="${this._handleClick}"
+      >
+        <div class="radio-circle"></div>
+        ${this.label ? e`<span class="label-text">${this.label}</span>` : ""}
+      </div>
+    `;
+  }
+}
+customElements.define("kg-radio", l);
+export {
+  l as kgradio
+};

package/dist/components/kg-row.js

@@ -0,0 +1,42 @@
+import { LitElement as e, css as t, html as s } from "lit";
+class n extends e {
+  static properties = {
+    columns: { type: Number },
+    // can force children to share columns
+    stretched: { type: Boolean },
+    centered: { type: Boolean },
+    justify: { type: String }
+    // start, center, end, space-between
+  };
+  static styles = t`
+    :host {
+      display: flex;
+      flex-wrap: wrap;
+      margin: 0 calc(var(--kg-space-md) * -1);
+      box-sizing: border-box;
+    }
+
+    :host([centered]) {
+      justify-content: center;
+    }
+
+    :host([justify="space-between"]) { justify-content: space-between; }
+    :host([justify="end"]) { justify-content: flex-end; }
+
+    :host([stretched]) {
+      align-items: stretch;
+    }
+
+    /* Handle nesting if needed */
+    ::slotted(kg-column) {
+      padding: var(--kg-space-md);
+    }
+  `;
+  render() {
+    return s`<slot></slot>`;
+  }
+}
+customElements.define("kg-row", n);
+export {
+  n as kgrow
+};

package/dist/components/kg-select.js

@@ -0,0 +1,331 @@
+import { LitElement as n, css as c, html as s } from "lit";
+import "lit/directives/class-map.js";
+import "lit/directives/live.js";
+class d extends n {
+  static properties = {
+    options: { type: Array },
+    value: { type: Object },
+    // Can be string or array
+    placeholder: { type: String },
+    label: { type: String },
+    multiple: { type: Boolean },
+    disabled: { type: Boolean },
+    searchable: { type: Boolean },
+    _open: { type: Boolean, state: !0 },
+    _searchQuery: { type: String, state: !0 }
+  };
+  static styles = c`
+    :host {
+      display: inline-block;
+      width: 100%;
+      position: relative;
+      font-family: inherit;
+      user-select: none;
+    }
+
+    .kg-select-container {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      width: 100%;
+    }
+
+    .select-label {
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: var(--kg-text);
+      opacity: 0.8;
+      margin-left: 2px;
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .select-trigger {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: var(--kg-form-height);
+      padding: 0 1rem;
+      background: var(--kg-surface);
+      border: 1px solid var(--kg-border);
+      border-radius: var(--kg-radius-md, 8px);
+      cursor: pointer;
+      transition: all 0.2s ease;
+      gap: 8px;
+      flex-wrap: nowrap;
+      overflow: hidden;
+    }
+
+    .select-trigger:hover {
+      border-color: var(--kg-primary);
+    }
+
+    .select-trigger.open {
+      border-color: var(--kg-primary);
+      box-shadow: 0 0 0 2px rgba(65, 171, 52, 0.2);
+    }
+
+    .select-trigger.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      background: var(--kg-bg-secondary);
+    }
+
+    .placeholder {
+      color: var(--kg-text-muted);
+      opacity: 0.6;
+    }
+
+    .selected-text {
+      color: var(--kg-text);
+      flex: 1;
+    }
+
+    .tags-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px;
+        flex: 1;
+    }
+
+    .tag {
+        background: var(--kg-primary);
+        color: white;
+        padding: 2px 8px;
+        border-radius: 4px;
+        font-size: 0.8rem;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+    }
+
+    .tag-remove {
+        cursor: pointer;
+        opacity: 0.8;
+    }
+
+    .tag-remove:hover {
+        opacity: 1;
+    }
+
+    .chevron {
+      transition: transform 0.2s ease;
+      color: var(--kg-text-muted);
+      flex-shrink: 0;
+    }
+
+    .open .chevron {
+      transform: rotate(180deg);
+    }
+
+    /* Dropdown */
+    .select-dropdown {
+      position: absolute;
+      top: calc(100% + 5px);
+      left: 0;
+      width: 100%;
+      background: var(--kg-surface);
+      border: 1px solid var(--kg-border);
+      border-radius: var(--kg-radius-md, 8px);
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+      z-index: 1000;
+      max-height: 300px;
+      overflow-y: auto;
+      display: none;
+      animation: slideDown 0.2s ease-out;
+    }
+
+    .select-dropdown.visible {
+      display: block;
+    }
+
+    @keyframes slideDown {
+      from { opacity: 0; transform: translateY(-10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    .search-container {
+        padding: 8px;
+        border-bottom: 1px solid var(--kg-border);
+        position: sticky;
+        top: 0;
+        background: var(--kg-surface);
+        z-index: 10;
+    }
+
+    .search-input {
+        width: 100%;
+        padding: 6px 10px;
+        border: 1px solid var(--kg-border);
+        border-radius: 4px;
+        outline: none;
+        font-family: inherit;
+        font-size: 0.9rem;
+    }
+
+    .search-input:focus {
+        border-color: var(--kg-primary);
+    }
+
+    .option-item {
+      padding: 10px 16px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      transition: background 0.15s;
+      color: var(--kg-text);
+    }
+
+    .option-item:hover {
+      background: var(--kg-bg-secondary, rgba(0,0,0,0.04));
+    }
+
+    .option-item.selected {
+      background: rgba(var(--kg-primary-rgb, 19, 103, 255), 0.08);
+      color: var(--kg-primary);
+      font-weight: 600;
+    }
+
+    .no-results {
+        padding: 16px;
+        text-align: center;
+        color: var(--kg-text-muted);
+        font-size: 0.9rem;
+    }
+
+    .check-icon {
+        width: 16px;
+        height: 16px;
+    }
+  `;
+  constructor() {
+    super(), this.options = [], this.value = null, this.placeholder = "Seçiniz...", this.multiple = !1, this.disabled = !1, this.searchable = !1, this._open = !1, this._searchQuery = "", this._handleOutsideClick = this._handleOutsideClick.bind(this);
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this._handleOutsideClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick);
+  }
+  _handleOutsideClick(t) {
+    if (!this._open) return;
+    t.composedPath().includes(this) || this._closeDropdown();
+  }
+  _toggleDropdown(t) {
+    this.disabled || (this._open = !this._open, this._open && (this._searchQuery = "", setTimeout(() => {
+      const r = this.shadowRoot.querySelector(".search-input");
+      r && r.focus();
+    }, 100)));
+  }
+  _closeDropdown() {
+    this._open = !1;
+  }
+  _selectOption(t, r) {
+    if (r.stopPropagation(), this.multiple) {
+      let i = Array.isArray(this.value) ? [...this.value] : [];
+      const o = i.indexOf(t.value);
+      o > -1 ? i.splice(o, 1) : i.push(t.value), this.value = i;
+    } else
+      this.value = t.value, this._closeDropdown();
+    this._dispatchChange();
+  }
+  _dispatchChange() {
+    this.dispatchEvent(new CustomEvent("change", {
+      detail: { value: this.value },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _handleSearch(t) {
+    this._searchQuery = t.target.value.toLowerCase();
+  }
+  _removeTag(t, r) {
+    r.stopPropagation();
+    let i = [...this.value];
+    const o = i.indexOf(t);
+    o > -1 && (i.splice(o, 1), this.value = i, this._dispatchChange());
+  }
+  render() {
+    const t = (e) => this.multiple && Array.isArray(this.value) ? this.value.includes(e) : this.value === e, i = (() => {
+      if (!this.value) return null;
+      if (this.multiple && Array.isArray(this.value))
+        return this.options.filter((a) => this.value.includes(a.value));
+      const e = this.options.find((a) => a.value === this.value);
+      return e ? e.label : null;
+    })(), l = (this.options || []).filter(
+      (e) => e.label.toLowerCase().includes(this._searchQuery || "")
+    );
+    return s`
+      <div class="kg-select-container">
+        ${this.label ? s`<label class="select-label">${this.label}</label>` : ""}
+        
+        <div 
+          class="select-trigger ${this._open ? "open" : ""} ${this.disabled ? "disabled" : ""}" 
+          @click="${this._toggleDropdown}"
+        >
+          ${!this.value || this.multiple && this.value.length === 0 ? s`
+            <span class="placeholder">${this.placeholder}</span>
+          ` : this.multiple ? s`
+            <div class="tags-container">
+                ${i.slice(0, 2).map((e) => s`
+                    <div class="tag">
+                        ${e.label}
+                        <span class="tag-remove" @click="${(a) => this._removeTag(e.value, a)}">×</span>
+                    </div>
+                `)}
+                ${i.length > 2 ? s`
+                    <div class="tag" style="background: var(--kg-secondary); cursor: default;">
+                        +${i.length - 2}
+                    </div>
+                ` : ""}
+            </div>
+          ` : s`
+            <span class="selected-text">${i}</span>
+          `}
+          
+          <svg class="chevron" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="6 9 12 15 18 9"></polyline>
+          </svg>
+        </div>
+
+        <div class="select-dropdown ${this._open ? "visible" : ""}">
+          ${this.searchable ? s`
+              <div class="search-container">
+                  <input 
+                    type="text" 
+                    class="search-input" 
+                    placeholder="Ara..." 
+                    .value="${this._searchQuery}"
+                    @input="${this._handleSearch}"
+                    @click="${(e) => e.stopPropagation()}"
+                  />
+              </div>
+          ` : ""}
+
+          ${l.length > 0 ? l.map((e) => s`
+            <div 
+              class="option-item ${t(e.value) ? "selected" : ""}" 
+              @click="${(a) => this._selectOption(e, a)}"
+            >
+              <span>${e.label}</span>
+              ${t(e.value) ? s`
+                <svg class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+                    <polyline points="20 6 9 17 4 12"></polyline>
+                </svg>
+              ` : ""}
+            </div>
+          `) : s`
+            <div class="no-results">Sonuç bulunamadı</div>
+          `}
+        </div>
+      </div>
+    `;
+  }
+}
+customElements.define("kg-select", d);
+export {
+  d as kgselect
+};