@lazhus/kg-ui 0.2.2

package/dist/components/kg-skeleton.js

@@ -0,0 +1,108 @@
+import { LitElement as e, css as i, html as r } from "lit";
+import { styleMap as a } from "lit/directives/style-map.js";
+class s extends e {
+  static properties = {
+    variant: { type: String },
+    // text, circle, rect
+    animation: { type: String },
+    // pulse, wave, none
+    width: { type: String },
+    height: { type: String },
+    borderRadius: { type: String, attribute: "border-radius" }
+  };
+  static styles = i`
+    :host {
+      display: inline-block;
+      vertical-align: middle;
+      width: 100%;
+      line-height: 0;
+    }
+
+    /* Circle ve Rect için width: fit-content olmalı */
+    :host([variant="circle"]), 
+    :host([variant="rect"]) {
+      width: fit-content;
+    }
+
+    .skeleton {
+      /* Light mode: Biraz daha belirgin, şık bir gri */
+      background-color: #ebebeb;
+      position: relative;
+      overflow: hidden;
+      display: block;
+      width: var(--skeleton-width, 100%);
+      height: var(--skeleton-height, 1.2em);
+      box-sizing: border-box;
+    }
+
+    /* Sadece Dark Mode seçiliyse renkleri değiştir */
+    :host-context([data-theme='dark']) .skeleton,
+    [data-theme='dark'] .skeleton {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+
+    /* Variants */
+    .skeleton.text {
+      margin: 0.3em 0;
+      height: 0.9em;
+      border-radius: 4px;
+    }
+
+    .skeleton.circle {
+      border-radius: 50%;
+    }
+
+    .skeleton.rect {
+      border-radius: 8px;
+    }
+
+    /* Animations */
+    .skeleton.pulse {
+      animation: pulse 1.5s ease-in-out infinite;
+    }
+
+    .skeleton.wave::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      transform: translateX(-100%);
+      /* Yumuşak parlayan dalga */
+      background-image: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0) 0,
+        rgba(255, 255, 255, 0.6) 50%,
+        rgba(255, 255, 255, 0) 100%
+      );
+      animation: wave 1.5s infinite;
+    }
+
+    @keyframes pulse {
+      0% { opacity: 1; }
+      50% { opacity: 0.4; }
+      100% { opacity: 1; }
+    }
+
+    @keyframes wave {
+      100% { transform: translateX(100%); }
+    }
+  `;
+  constructor() {
+    super(), this.variant = "text", this.animation = "pulse", this.width = "", this.height = "", this.borderRadius = "";
+  }
+  render() {
+    const t = {};
+    return this.width && (t["--skeleton-width"] = this.width), this.height && (t["--skeleton-height"] = this.height), this.borderRadius && (t["border-radius"] = this.borderRadius), r`
+      <span 
+        class="skeleton ${this.variant} ${this.animation}" 
+        style="${a(t)}"
+      ></span>
+    `;
+  }
+}
+customElements.define("kg-skeleton", s);
+export {
+  s as kgskeleton
+};

package/dist/components/kg-slider.js

@@ -0,0 +1,196 @@
+import { LitElement as a, css as s, html as t } from "lit";
+import "lit/directives/class-map.js";
+class n extends a {
+  static properties = {
+    value: { type: Number, reflect: !0 },
+    min: { type: Number },
+    max: { type: Number },
+    step: { type: Number },
+    label: { type: String },
+    color: { type: String },
+    disabled: { type: Boolean, reflect: !0 },
+    hideValue: { type: Boolean, reflect: !0, attribute: "hide-value" },
+    showPins: { type: Boolean, attribute: "show-pins" }
+  };
+  static styles = s`
+    :host {
+      display: block;
+      margin: 1rem 0;
+      font-family: inherit;
+    }
+
+    .kg-slider-container {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      width: 100%;
+    }
+
+    .slider-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .slider-label {
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: var(--kg-text);
+      opacity: 0.8;
+    }
+
+    .current-value {
+        font-size: 0.875rem;
+        font-weight: 700;
+        color: var(--slider-active-color, var(--kg-primary));
+        background: var(--kg-bg-secondary, rgba(0,0,0,0.04));
+        padding: 2px 8px;
+        border-radius: 4px;
+        min-width: 2.5rem;
+        text-align: center;
+    }
+
+    .slider-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+      height: 24px;
+    }
+
+    input[type="range"] {
+      -webkit-appearance: none;
+      width: 100%;
+      background: transparent;
+      margin: 0;
+      cursor: pointer;
+    }
+
+    input[type="range"]:focus {
+      outline: none;
+    }
+
+    /* Track Styles */
+    input[type="range"]::-webkit-slider-runnable-track {
+      width: 100%;
+      height: 6px;
+      background: var(--kg-border);
+      border-radius: 3px;
+      transition: background 0.2s;
+    }
+
+    .checked-track {
+        position: absolute;
+        height: 6px;
+        background: var(--slider-active-color, var(--kg-primary));
+        border-radius: 3px;
+        pointer-events: none;
+        left: 0;
+    }
+
+    /* Thumb Styles */
+    input[type="range"]::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      height: 20px;
+      width: 20px;
+      border-radius: 50%;
+      background: white;
+      border: 2px solid var(--slider-active-color, var(--kg-primary));
+      margin-top: -7px; /* Centers thumb on track */
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      position: relative;
+      z-index: 2;
+    }
+
+    input[type="range"]:not(:disabled):::-webkit-slider-thumb:hover {
+      transform: scale(1.2);
+      box-shadow: 0 0 0 6px rgba(var(--kg-primary-rgb, 19, 103, 255), 0.1);
+    }
+
+    input[type="range"]:active::-webkit-slider-thumb {
+      transform: scale(0.9);
+      background: var(--slider-active-color, var(--kg-primary));
+    }
+
+    /* Disabled State */
+    .disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .disabled input[type="range"] {
+        cursor: not-allowed;
+    }
+
+    .pins-container {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        pointer-events: none;
+        z-index: 0;
+    }
+
+    .pin {
+        width: 4px;
+        height: 4px;
+        background-color: var(--kg-text);
+        opacity: 0.3;
+        border-radius: 50%;
+    }
+  `;
+  constructor() {
+    super(), this.value = 50, this.min = 0, this.max = 100, this.step = 1, this.disabled = !1, this.hideValue = !1, this.showPins = !1;
+  }
+  _handleInput(r) {
+    this.value = Number(r.target.value), this.dispatchEvent(new CustomEvent("kg-input", {
+      detail: { value: this.value },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  render() {
+    const r = (this.value - this.min) / (this.max - this.min) * 100, i = `--slider-active-color: ${((e) => e ? e.startsWith("#") || e.startsWith("rgb") || e.startsWith("hsl") ? e : {
+      primary: "var(--kg-primary)",
+      secondary: "var(--kg-secondary)",
+      tertiary: "var(--kg-tertiary)",
+      error: "#e74c3c",
+      red: "#e74c3c",
+      green: "#2ecc71",
+      blue: "#3498db",
+      orange: "#f39c12",
+      purple: "#9b59b6"
+    }[e] || `var(--kg-${e}, ${e})` : "var(--kg-primary)")(this.color)};`;
+    return t`
+      <div class="kg-slider-container ${this.disabled ? "disabled" : ""}" style="${i}">
+        <div class="slider-header">
+            ${this.label ? t`<label class="slider-label">${this.label}</label>` : ""}
+            ${this.hideValue ? "" : t`<span class="current-value">${this.value}</span>`}
+        </div>
+        <div class="slider-wrapper">
+          ${this.showPins ? t`
+            <div class="pins-container">
+                ${[...Array(5)].map(() => t`<div class="pin"></div>`)}
+            </div>
+          ` : ""}
+          <div class="checked-track" style="width: ${r}%"></div>
+          <input 
+            type="range" 
+            .min="${this.min}" 
+            .max="${this.max}" 
+            .step="${this.step}" 
+            .value="${this.value}"
+            ?disabled="${this.disabled}"
+            @input="${this._handleInput}"
+          />
+        </div>
+      </div>
+    `;
+  }
+}
+customElements.define("kg-slider", n);
+export {
+  n as kgslider
+};

package/dist/components/kg-spinner.js

@@ -0,0 +1,79 @@
+import { LitElement as r, css as s, html as t } from "lit";
+class i extends r {
+  static properties = {
+    size: { type: String, reflect: !0 },
+    // 'small', 'medium', 'large' or custom px
+    color: { type: String, reflect: !0 },
+    thickness: { type: Number }
+  };
+  static styles = s`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 0;
+    }
+
+    .spinner {
+      animation: rotate 1.5s linear infinite;
+      transform-origin: center center;
+    }
+
+    circle {
+      stroke: var(--spinner-color, var(--kg-primary));
+      stroke-dasharray: 1, 200;
+      stroke-dashoffset: 0;
+      animation: dash 1.5s ease-in-out infinite;
+      stroke-linecap: round;
+      fill: none;
+    }
+
+    @keyframes rotate {
+      100% { transform: rotate(360deg); }
+    }
+
+    @keyframes dash {
+      0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+      }
+      50% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -35px;
+      }
+      100% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -124px;
+      }
+    }
+
+    /* Sizes */
+    :host([size="small"]) .spinner { width: 16px; height: 16px; }
+    :host([size="medium"]) .spinner { width: 32px; height: 32px; }
+    :host([size="large"]) .spinner { width: 48px; height: 48px; }
+
+    /* Colors */
+    :host([color="primary"]) { --spinner-color: var(--kg-primary); }
+    :host([color="secondary"]) { --spinner-color: var(--kg-secondary); }
+    :host([color="tertiary"]) { --spinner-color: var(--kg-tertiary); }
+    :host([color="error"]) { --spinner-color: #DB2828; }
+    :host([color="white"]) { --spinner-color: white; }
+  `;
+  constructor() {
+    super(), this.size = "medium", this.color = "primary", this.thickness = 4;
+  }
+  render() {
+    let e = "";
+    return ["small", "medium", "large"].includes(this.size) || (e = `width: ${this.size}; height: ${this.size};`), t`
+      <svg class="spinner" viewBox="25 25 50 50" style="${e}">
+        <circle cx="50" cy="50" r="20" 
+          stroke-width="${this.thickness}">
+        </circle>
+      </svg>
+    `;
+  }
+}
+customElements.define("kg-spinner", i);
+export {
+  i as kgspinner
+};

package/dist/components/kg-stepper.js

@@ -0,0 +1,214 @@
+import { LitElement as l, css as n, html as t } from "lit";
+import { classMap as a } from "lit/directives/class-map.js";
+import { unsafeHTML as p } from "lit/directives/unsafe-html.js";
+class d extends l {
+  static properties = {
+    steps: { type: Array },
+    activeStep: { type: Number },
+    vertical: { type: Boolean },
+    clickable: { type: Boolean }
+  };
+  static styles = n`
+    :host {
+      display: block;
+      width: 100%;
+      font-family: inherit;
+    }
+
+    .stepper-container {
+      display: flex;
+      width: 100%;
+      padding: 1rem 0;
+    }
+
+    .stepper-container.horizontal {
+      flex-direction: row;
+      align-items: flex-start;
+      justify-content: space-between;
+    }
+
+    .stepper-container.vertical {
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+
+    .step-item {
+      display: flex;
+      position: relative;
+      flex: 1;
+    }
+
+    .horizontal .step-item {
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+    }
+
+    .vertical .step-item {
+      flex-direction: row;
+      align-items: center;
+      gap: 1rem;
+      min-height: 60px;
+    }
+
+    /* Connection Lines */
+    .step-line {
+      position: absolute;
+      background: var(--kg-border);
+      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+      z-index: 1;
+    }
+
+    .horizontal .step-line {
+      top: 16px;
+      left: calc(50% + 20px);
+      right: calc(-50% + 20px);
+      height: 2px;
+    }
+
+    .vertical .step-line {
+      left: 16px;
+      top: 36px;
+      bottom: -4px;
+      width: 2px;
+    }
+
+    .step-item:last-child .step-line {
+      display: none;
+    }
+
+    .step-line.active {
+      background: var(--kg-primary);
+    }
+
+    /* Step Circle */
+    .step-circle {
+      width: 34px;
+      height: 34px;
+      border-radius: 50%;
+      background: var(--kg-bg);
+      border: 2px solid var(--kg-border);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 700;
+      font-size: 0.9rem;
+      color: var(--kg-text-muted);
+      z-index: 2;
+      transition: all 0.3s ease;
+      cursor: default;
+    }
+
+    .step-item.clickable .step-circle {
+        cursor: pointer;
+    }
+
+    .step-item.active .step-circle {
+      border-color: var(--kg-primary);
+      color: var(--kg-primary);
+      box-shadow: 0 0 0 4px rgba(65, 171, 52, 0.1);
+    }
+
+    .step-item.completed .step-circle {
+      background: var(--kg-primary);
+      border-color: var(--kg-primary);
+      color: white;
+    }
+
+    /* Content */
+    .step-content {
+      margin-top: 0.75rem;
+      z-index: 2;
+    }
+
+    .vertical .step-content {
+      margin-top: 0;
+      text-align: left;
+    }
+
+    .step-title {
+      display: block;
+      font-weight: 600;
+      font-size: 0.95rem;
+      color: var(--kg-text);
+      transition: color 0.3s ease;
+    }
+
+    .step-item.active .step-title {
+      color: var(--kg-primary);
+    }
+
+    .step-desc {
+      display: block;
+      font-size: 0.8rem;
+      color: var(--kg-text-muted);
+      margin-top: 2px;
+    }
+
+    /* Icons */
+    .check-icon {
+      width: 18px;
+      height: 18px;
+    }
+
+    .custom-icon-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 18px;
+        height: 18px;
+    }
+
+    .custom-icon-wrapper svg {
+        width: 100%;
+        height: 100%;
+    }
+  `;
+  constructor() {
+    super(), this.steps = [], this.activeStep = 0, this.vertical = !1, this.clickable = !1;
+  }
+  _handleStepClick(i) {
+    this.clickable && this.dispatchEvent(new CustomEvent("kg-step-change", {
+      detail: { step: i },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  render() {
+    const i = Array.isArray(this.steps) ? this.steps : [];
+    return i.length === 0 ? t`<div style="padding: 1rem; color: var(--kg-text-muted); text-align: center;">Henüz adım eklenmedi.</div>` : t`
+      <div class="stepper-container ${this.vertical ? "vertical" : "horizontal"}">
+        ${i.map((e, r) => {
+      const s = r < this.activeStep, c = r === this.activeStep, o = {
+        "step-item": !0,
+        completed: s,
+        active: c,
+        clickable: this.clickable
+      };
+      return t`
+            <div class="${a(o)}" @click="${() => this._handleStepClick(r)}">
+              <div class="step-line ${s ? "active" : ""}"></div>
+              
+              <div class="step-circle">
+                ${s ? t`
+                  <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>
+                ` : e.icon ? t`<div class="custom-icon-wrapper">${p(e.icon)}</div>` : r + 1}
+              </div>
+
+              <div class="step-content">
+                <span class="step-title">${typeof e == "string" ? e : e.title}</span>
+                ${e.description ? t`<span class="step-desc">${e.description}</span>` : ""}
+              </div>
+            </div>
+          `;
+    })}
+      </div>
+    `;
+  }
+}
+customElements.define("kg-stepper", d);
+export {
+  d as kgstepper
+};

package/dist/components/kg-switch.js

@@ -0,0 +1,106 @@
+import { LitElement as s, css as a, html as e } from "lit";
+import "lit/directives/class-map.js";
+class c extends s {
+  static properties = {
+    checked: { type: Boolean, reflect: !0 },
+    disabled: { type: Boolean },
+    label: { type: String },
+    color: { type: String }
+    // primary, secondary, tertiary
+  };
+  static styles = a`
+    :host {
+      display: inline-block;
+      vertical-align: middle;
+      cursor: pointer;
+      user-select: none;
+      font-family: inherit;
+    }
+
+    :host([disabled]) {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    .kg-switch-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+    }
+
+    .kg-switch-track {
+      position: relative;
+      width: 44px;
+      height: 24px;
+      background: var(--kg-border);
+      border-radius: 24px;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
+    }
+
+    .kg-switch-thumb {
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: 20px;
+      height: 20px;
+      background: white;
+      border-radius: 50%;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    /* Checked State */
+    :host([checked]) .kg-switch-track {
+      background: var(--switch-active-color, var(--kg-primary));
+    }
+
+    :host([checked]) .kg-switch-thumb {
+      transform: translateX(20px);
+    }
+
+    .label {
+      font-size: 0.95rem;
+      font-weight: 500;
+      color: var(--kg-text);
+    }
+  `;
+  constructor() {
+    super(), this.checked = !1, this.disabled = !1, this.color = "primary";
+  }
+  _toggle() {
+    this.disabled || (this.checked = !this.checked, this.dispatchEvent(new CustomEvent("change", {
+      detail: { checked: this.checked },
+      bubbles: !0,
+      composed: !0
+    })));
+  }
+  render() {
+    const r = ((t) => !t || t === "primary" ? "var(--kg-primary)" : t.startsWith("#") || t.startsWith("rgb") || t.startsWith("hsl") ? t : {
+      secondary: "var(--kg-secondary)",
+      tertiary: "var(--kg-tertiary)",
+      error: "#e74c3c",
+      red: "#e74c3c",
+      green: "#2ecc71",
+      blue: "#3498db",
+      orange: "#f39c12",
+      purple: "#9b59b6"
+    }[t] || `var(--kg-${t}, ${t})`)(this.color), i = this.checked ? `--switch-active-color: ${r};` : "";
+    return e`
+      <div 
+        class="kg-switch-wrapper" 
+        style="${i}"
+        @click="${this._toggle}"
+      >
+        <div class="kg-switch-track">
+          <div class="kg-switch-thumb"></div>
+        </div>
+        ${this.label ? e`<span class="label">${this.label}</span>` : ""}
+      </div>
+    `;
+  }
+}
+customElements.define("kg-switch", c);
+export {
+  c as kgswitch
+};