@logosphere-ui/core 0.0.0-alpha.3 → 0.0.0-alpha.30

package/dist/timepicker-BKUTi_AU.js

@@ -0,0 +1,316 @@
+import { unsafeCSS as d, css as _, LitElement as m, html as h } from "lit";
+import { property as s, state as c, query as u, customElement as v } from "lit/decorators.js";
+import { createPopper as b } from "@popperjs/core";
+import "./input-BJtn_iTC.js";
+import "./ui-icon-DrrH0WhF.js";
+const g = ":host{display:block;width:100%}.timepicker__reference{display:block;width:100%}.timepicker__trigger{border:none;background:transparent;color:var(--color-tertiary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;flex-shrink:0;height:100%;min-height:32px;outline:none;border-radius:0 var(--radius-base) var(--radius-base) 0;transition:color var(--transition-speed-fast) var(--transition-timing),background-color var(--transition-speed-fast) var(--transition-timing)}.timepicker__trigger:hover{color:var(--color-body-text);background-color:var(--color-body-bg-hover)}.timepicker__trigger--active{color:var(--color-body-text)}.timepicker__trigger:disabled{pointer-events:none;opacity:.4}.timepicker__popup[popover]{position:fixed;inset:unset;margin:0;padding:0;border:none;width:240px;background-color:var(--color-body-bg);border-radius:12px;box-shadow:0 4px 16px #7878783d;overflow:hidden;z-index:var(--z-index-dropdown, 1000)}.timepicker__spinner{display:flex;flex-direction:row;align-items:stretch;padding:var(--spacing-1) var(--spacing-2)}.timepicker__col{flex:1;display:flex;flex-direction:column;padding:0px var(--spacing-5)}.timepicker__col--left{align-items:flex-start}.timepicker__col--right{align-items:flex-end}.timepicker__col--sep{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--spacing-1)}.timepicker__spin-btn{height:32px;display:flex;align-items:center;justify-content:center;border:none;padding:var(--spacing-2);background:transparent;color:var(--color-secondary);border-radius:var(--radius-base);cursor:pointer;outline:none;box-sizing:border-box;transition:background-color var(--transition-speed-fast) var(--transition-timing),color var(--transition-speed-fast) var(--transition-timing)}.timepicker__spin-btn:hover{background-color:var(--color-body-bg-hover);color:var(--color-body-text)}.timepicker__spin-btn:active{background-color:var(--color-body-bg-active)}.timepicker__time-unit{height:32px;display:flex;align-items:center;justify-content:center;font-size:14px;font-family:var(--font-family-base);font-weight:var(--font-weight-regular);line-height:1.25rem;letter-spacing:-.14px;color:var(--color-body-text);text-align:center;box-sizing:border-box;padding:var(--spacing-2)}.timepicker__colon{height:32px;display:flex;align-items:center;justify-content:center;font-size:16px;font-family:var(--font-family-base);font-weight:var(--font-weight-medium);color:var(--color-secondary)}.timepicker__actions{display:flex;align-items:center;padding:var(--spacing-2);border-top:1px solid var(--color-border);gap:var(--spacing-1)}.timepicker__action-btn{flex:1 0 0;min-width:0;height:32px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--color-secondary);border-radius:var(--radius-full);cursor:pointer;padding:var(--spacing-2);outline:none;transition:background-color var(--transition-speed-fast) var(--transition-timing),color var(--transition-speed-fast) var(--transition-timing)}.timepicker__action-btn:hover{background-color:var(--color-body-bg-hover);color:var(--color-body-text)}.timepicker__action-btn:active{background-color:var(--color-body-bg-active)}";
+var f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (t, r, n, a) => {
+  for (var o = a > 1 ? void 0 : a ? y(r, n) : r, p = t.length - 1, l; p >= 0; p--)
+    (l = t[p]) && (o = (a ? l(r, n, o) : l(o)) || o);
+  return a && o && f(r, n, o), o;
+};
+let e = class extends m {
+  constructor() {
+    super(...arguments), this.value = "", this.label = "", this.helper = "", this.error = "", this.placeholder = "__:__", this.required = !1, this.disabled = !1, this.readonly = !1, this.size = "default", this.variant = "default", this._isOpen = !1, this._hour = 0, this._minute = 0, this._handleOutsideClick = (t) => {
+      this._isOpen && !t.composedPath().includes(this) && (this._isOpen = !1);
+    }, this._handleInputChange = (t) => {
+      t.stopPropagation();
+      const r = t.detail?.value ?? "";
+      if (/^\d{2}:\d{2}$/.test(r)) {
+        const [n, a] = this._parseValue(r);
+        this._hour = n, this._minute = a;
+        const o = `${this._pad(n)}:${this._pad(a)}`;
+        this.value = o, this._emit(o);
+      }
+    }, this._handleInputClear = (t) => {
+      t.stopPropagation(), this.value = "", this._hour = 0, this._minute = 0, this._emit(""), this.dispatchEvent(new CustomEvent("clear", { bubbles: !0, composed: !0 })), this._isOpen = !1;
+    }, this._incrementHour = () => {
+      this._hour = (this._hour + 1) % 24, this._syncValue();
+    }, this._decrementHour = () => {
+      this._hour = (this._hour - 1 + 24) % 24, this._syncValue();
+    }, this._incrementMinute = () => {
+      this._minute = (this._minute + 1) % 60, this._syncValue();
+    }, this._decrementMinute = () => {
+      this._minute = (this._minute - 1 + 60) % 60, this._syncValue();
+    };
+  }
+  // ── Lifecycle ───────────────────────────────────────────────────────────────
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this._handleOutsideClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._handleOutsideClick), this._destroyPopper();
+  }
+  willUpdate(t) {
+    if (t.has("value") && /^\d{1,2}:\d{2}$/.test(this.value)) {
+      const [r, n] = this._parseValue(this.value);
+      this._hour = r, this._minute = n;
+    }
+  }
+  updated(t) {
+    t.has("_isOpen") && (this._isOpen ? this.updateComplete.then(() => {
+      this._showPopover(), this._updatePopper();
+    }) : (this._hidePopover(), this._destroyPopper()));
+  }
+  // ── Value helpers ───────────────────────────────────────────────────────────
+  _parseValue(t) {
+    const r = t.match(/^(\d{1,2}):(\d{2})$/);
+    return r ? [
+      Math.min(23, Math.max(0, parseInt(r[1], 10))),
+      Math.min(59, Math.max(0, parseInt(r[2], 10)))
+    ] : [0, 0];
+  }
+  _pad(t) {
+    return String(t).padStart(2, "0");
+  }
+  // ── Popper / Popover ────────────────────────────────────────────────────────
+  _updatePopper() {
+    !this._referenceEl || !this._popupEl || (this._popperInstance = b(this._referenceEl, this._popupEl, {
+      placement: "bottom-start",
+      modifiers: [
+        { name: "offset", options: { offset: [0, 4] } },
+        { name: "flip", options: { fallbackPlacements: ["top-start"] } },
+        {
+          name: "preventOverflow",
+          options: { boundary: document.documentElement, padding: 8 }
+        }
+      ]
+    }));
+  }
+  _destroyPopper() {
+    this._popperInstance?.destroy(), this._popperInstance = void 0;
+  }
+  _showPopover() {
+    this._popupEl?.showPopover?.();
+  }
+  _hidePopover() {
+    const t = this._popupEl;
+    try {
+      t?.hidePopover?.();
+    } catch {
+    }
+  }
+  _togglePopup() {
+    if (!(this.disabled || this.readonly))
+      if (this._isOpen)
+        this._isOpen = !1;
+      else {
+        const [t, r] = this._parseValue(this.value);
+        this._hour = t, this._minute = r, this._isOpen = !0;
+      }
+  }
+  _clearValue(t) {
+    t?.stopPropagation(), this.value = "", this._hour = 0, this._minute = 0, this._emit(""), this.dispatchEvent(new CustomEvent("clear", { bubbles: !0, composed: !0 })), this._isOpen = !1;
+  }
+  _setNow() {
+    const t = /* @__PURE__ */ new Date();
+    this._hour = t.getHours(), this._minute = t.getMinutes(), this._syncValue();
+  }
+  _emit(t) {
+    this.onChange?.(t), this.dispatchEvent(new CustomEvent("change", {
+      bubbles: !0,
+      composed: !0,
+      detail: { value: t }
+    }));
+  }
+  _syncValue() {
+    const t = `${this._pad(this._hour)}:${this._pad(this._minute)}`;
+    this.value = t, this._emit(t);
+  }
+  _startSpin(t) {
+    t(), this._spinInterval = setInterval(t, 120);
+  }
+  _stopSpin() {
+    clearInterval(this._spinInterval), this._spinInterval = void 0;
+  }
+  // ── Render ──────────────────────────────────────────────────────────────────
+  _renderPopup() {
+    return h`
+      <div data-timepicker-popup popover="manual" class="timepicker__popup">
+        <div class="timepicker__spinner">
+          <!-- Sol sütun: saat -->
+          <div class="timepicker__col timepicker__col--left">
+            <button
+              class="timepicker__spin-btn"
+              @mousedown=${() => this._startSpin(this._incrementHour)}
+              @mouseup=${this._stopSpin}
+              @mouseleave=${this._stopSpin}
+              @touchstart=${(t) => {
+      t.preventDefault(), this._startSpin(this._incrementHour);
+    }}
+              @touchend=${this._stopSpin}
+              tabindex="-1"
+              aria-label="Saat artır"
+            ><ui-icon name="uil-arrow-up" size="16"></ui-icon></button>
+            <div class="timepicker__time-unit">${this._pad(this._hour)}</div>
+            <button
+              class="timepicker__spin-btn"
+              @mousedown=${() => this._startSpin(this._decrementHour)}
+              @mouseup=${this._stopSpin}
+              @mouseleave=${this._stopSpin}
+              @touchstart=${(t) => {
+      t.preventDefault(), this._startSpin(this._decrementHour);
+    }}
+              @touchend=${this._stopSpin}
+              tabindex="-1"
+              aria-label="Saat azalt"
+            ><ui-icon name="uil-arrow-down" size="16"></ui-icon></button>
+          </div>
+
+          <!-- Orta sütun: iki nokta -->
+          <div class="timepicker__col timepicker__col--sep">
+            <div class="timepicker__colon">:</div>
+          </div>
+
+          <!-- Sağ sütun: dakika -->
+          <div class="timepicker__col timepicker__col--right">
+            <button
+              class="timepicker__spin-btn"
+              @mousedown=${() => this._startSpin(this._incrementMinute)}
+              @mouseup=${this._stopSpin}
+              @mouseleave=${this._stopSpin}
+              @touchstart=${(t) => {
+      t.preventDefault(), this._startSpin(this._incrementMinute);
+    }}
+              @touchend=${this._stopSpin}
+              tabindex="-1"
+              aria-label="Dakika artır"
+            ><ui-icon name="uil-arrow-up" size="16"></ui-icon></button>
+            <div class="timepicker__time-unit">${this._pad(this._minute)}</div>
+            <button
+              class="timepicker__spin-btn"
+              @mousedown=${() => this._startSpin(this._decrementMinute)}
+              @mouseup=${this._stopSpin}
+              @mouseleave=${this._stopSpin}
+              @touchstart=${(t) => {
+      t.preventDefault(), this._startSpin(this._decrementMinute);
+    }}
+              @touchend=${this._stopSpin}
+              tabindex="-1"
+              aria-label="Dakika azalt"
+            ><ui-icon name="uil-arrow-down" size="16"></ui-icon></button>
+          </div>
+        </div>
+
+        <!-- Action buttons -->
+        <div class="timepicker__actions">
+          <button
+            class="timepicker__action-btn"
+            @click=${this._setNow}
+            title="Şu anki saati seç"
+          >
+            <ui-icon name="uil-calendar-alt" size="16"></ui-icon>
+          </button>
+          <button
+            class="timepicker__action-btn"
+            @click=${() => this._clearValue()}
+            title="Temizle"
+          >
+            <ui-icon name="uil-trash" size="16"></ui-icon>
+          </button>
+          <button
+            class="timepicker__action-btn"
+            @click=${() => {
+      this._isOpen = !1;
+    }}
+            title="Kapat"
+          >
+            <ui-icon name="uil-times" size="16"></ui-icon>
+          </button>
+        </div>
+      </div>
+    `;
+  }
+  render() {
+    return h`
+      <div class="timepicker__reference">
+        <logosphere-input
+          .label=${this.label}
+          .helper=${this.helper}
+          .error=${this.error}
+          .required=${this.required}
+          .disabled=${this.disabled}
+          .readonly=${this.readonly}
+          .size=${this.size}
+          .variant=${this.variant}
+          .placeholder=${this.placeholder}
+          .value=${this.value}
+          mask="00:00"
+          @input=${this._handleInputChange}
+          @clear=${this._handleInputClear}
+          @change=${(t) => t.stopPropagation()}
+        >
+          <button
+            slot="suffix"
+            type="button"
+            class="timepicker__trigger ${this._isOpen ? "timepicker__trigger--active" : ""}"
+            @click=${this._togglePopup}
+            ?disabled=${this.disabled}
+            tabindex=${this.disabled ? "-1" : "0"}
+            aria-label="Saat seç"
+            aria-expanded=${this._isOpen ? "true" : "false"}
+          >
+            <ui-icon name="uil-clock" size="16"></ui-icon>
+          </button>
+        </logosphere-input>
+      </div>
+
+      ${this._renderPopup()}
+    `;
+  }
+};
+e.styles = [_`${d(g)}`];
+i([
+  s({ type: String })
+], e.prototype, "value", 2);
+i([
+  s({ type: String })
+], e.prototype, "label", 2);
+i([
+  s({ type: String })
+], e.prototype, "helper", 2);
+i([
+  s({ type: String })
+], e.prototype, "error", 2);
+i([
+  s({ type: String })
+], e.prototype, "placeholder", 2);
+i([
+  s({ type: Boolean })
+], e.prototype, "required", 2);
+i([
+  s({ type: Boolean })
+], e.prototype, "disabled", 2);
+i([
+  s({ type: Boolean })
+], e.prototype, "readonly", 2);
+i([
+  s({ type: String })
+], e.prototype, "size", 2);
+i([
+  s({ type: String })
+], e.prototype, "variant", 2);
+i([
+  s({ attribute: !1 })
+], e.prototype, "onChange", 2);
+i([
+  c()
+], e.prototype, "_isOpen", 2);
+i([
+  c()
+], e.prototype, "_hour", 2);
+i([
+  c()
+], e.prototype, "_minute", 2);
+i([
+  u(".timepicker__reference")
+], e.prototype, "_referenceEl", 2);
+i([
+  u("[data-timepicker-popup]")
+], e.prototype, "_popupEl", 2);
+e = i([
+  v("logosphere-timepicker")
+], e);
+export {
+  e as T
+};

package/dist/timepicker-CRtoPBMn.cjs

@@ -0,0 +1,119 @@
+"use strict";const a=require("lit"),t=require("lit/decorators.js"),l=require("@popperjs/core");require("./input-DPTTu8ZR.cjs");require("./ui-icon-DKZMrOTi.cjs");const u=":host{display:block;width:100%}.timepicker__reference{display:block;width:100%}.timepicker__trigger{border:none;background:transparent;color:var(--color-tertiary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;flex-shrink:0;height:100%;min-height:32px;outline:none;border-radius:0 var(--radius-base) var(--radius-base) 0;transition:color var(--transition-speed-fast) var(--transition-timing),background-color var(--transition-speed-fast) var(--transition-timing)}.timepicker__trigger:hover{color:var(--color-body-text);background-color:var(--color-body-bg-hover)}.timepicker__trigger--active{color:var(--color-body-text)}.timepicker__trigger:disabled{pointer-events:none;opacity:.4}.timepicker__popup[popover]{position:fixed;inset:unset;margin:0;padding:0;border:none;width:240px;background-color:var(--color-body-bg);border-radius:12px;box-shadow:0 4px 16px #7878783d;overflow:hidden;z-index:var(--z-index-dropdown, 1000)}.timepicker__spinner{display:flex;flex-direction:row;align-items:stretch;padding:var(--spacing-1) var(--spacing-2)}.timepicker__col{flex:1;display:flex;flex-direction:column;padding:0px var(--spacing-5)}.timepicker__col--left{align-items:flex-start}.timepicker__col--right{align-items:flex-end}.timepicker__col--sep{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--spacing-1)}.timepicker__spin-btn{height:32px;display:flex;align-items:center;justify-content:center;border:none;padding:var(--spacing-2);background:transparent;color:var(--color-secondary);border-radius:var(--radius-base);cursor:pointer;outline:none;box-sizing:border-box;transition:background-color var(--transition-speed-fast) var(--transition-timing),color var(--transition-speed-fast) var(--transition-timing)}.timepicker__spin-btn:hover{background-color:var(--color-body-bg-hover);color:var(--color-body-text)}.timepicker__spin-btn:active{background-color:var(--color-body-bg-active)}.timepicker__time-unit{height:32px;display:flex;align-items:center;justify-content:center;font-size:14px;font-family:var(--font-family-base);font-weight:var(--font-weight-regular);line-height:1.25rem;letter-spacing:-.14px;color:var(--color-body-text);text-align:center;box-sizing:border-box;padding:var(--spacing-2)}.timepicker__colon{height:32px;display:flex;align-items:center;justify-content:center;font-size:16px;font-family:var(--font-family-base);font-weight:var(--font-weight-medium);color:var(--color-secondary)}.timepicker__actions{display:flex;align-items:center;padding:var(--spacing-2);border-top:1px solid var(--color-border);gap:var(--spacing-1)}.timepicker__action-btn{flex:1 0 0;min-width:0;height:32px;display:inline-flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--color-secondary);border-radius:var(--radius-full);cursor:pointer;padding:var(--spacing-2);outline:none;transition:background-color var(--transition-speed-fast) var(--transition-timing),color var(--transition-speed-fast) var(--transition-timing)}.timepicker__action-btn:hover{background-color:var(--color-body-bg-hover);color:var(--color-body-text)}.timepicker__action-btn:active{background-color:var(--color-body-bg-active)}";var h=Object.defineProperty,d=Object.getOwnPropertyDescriptor,i=(p,e,r,o)=>{for(var s=o>1?void 0:o?d(e,r):e,n=p.length-1,c;n>=0;n--)(c=p[n])&&(s=(o?c(e,r,s):c(s))||s);return o&&s&&h(e,r,s),s};exports.TimePicker=class extends a.LitElement{constructor(){super(...arguments),this.value="",this.label="",this.helper="",this.error="",this.placeholder="__:__",this.required=!1,this.disabled=!1,this.readonly=!1,this.size="default",this.variant="default",this._isOpen=!1,this._hour=0,this._minute=0,this._handleOutsideClick=e=>{this._isOpen&&!e.composedPath().includes(this)&&(this._isOpen=!1)},this._handleInputChange=e=>{e.stopPropagation();const r=e.detail?.value??"";if(/^\d{2}:\d{2}$/.test(r)){const[o,s]=this._parseValue(r);this._hour=o,this._minute=s;const n=`${this._pad(o)}:${this._pad(s)}`;this.value=n,this._emit(n)}},this._handleInputClear=e=>{e.stopPropagation(),this.value="",this._hour=0,this._minute=0,this._emit(""),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0})),this._isOpen=!1},this._incrementHour=()=>{this._hour=(this._hour+1)%24,this._syncValue()},this._decrementHour=()=>{this._hour=(this._hour-1+24)%24,this._syncValue()},this._incrementMinute=()=>{this._minute=(this._minute+1)%60,this._syncValue()},this._decrementMinute=()=>{this._minute=(this._minute-1+60)%60,this._syncValue()}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleOutsideClick),this._destroyPopper()}willUpdate(e){if(e.has("value")&&/^\d{1,2}:\d{2}$/.test(this.value)){const[r,o]=this._parseValue(this.value);this._hour=r,this._minute=o}}updated(e){e.has("_isOpen")&&(this._isOpen?this.updateComplete.then(()=>{this._showPopover(),this._updatePopper()}):(this._hidePopover(),this._destroyPopper()))}_parseValue(e){const r=e.match(/^(\d{1,2}):(\d{2})$/);return r?[Math.min(23,Math.max(0,parseInt(r[1],10))),Math.min(59,Math.max(0,parseInt(r[2],10)))]:[0,0]}_pad(e){return String(e).padStart(2,"0")}_updatePopper(){!this._referenceEl||!this._popupEl||(this._popperInstance=l.createPopper(this._referenceEl,this._popupEl,{placement:"bottom-start",modifiers:[{name:"offset",options:{offset:[0,4]}},{name:"flip",options:{fallbackPlacements:["top-start"]}},{name:"preventOverflow",options:{boundary:document.documentElement,padding:8}}]}))}_destroyPopper(){this._popperInstance?.destroy(),this._popperInstance=void 0}_showPopover(){this._popupEl?.showPopover?.()}_hidePopover(){const e=this._popupEl;try{e?.hidePopover?.()}catch{}}_togglePopup(){if(!(this.disabled||this.readonly))if(this._isOpen)this._isOpen=!1;else{const[e,r]=this._parseValue(this.value);this._hour=e,this._minute=r,this._isOpen=!0}}_clearValue(e){e?.stopPropagation(),this.value="",this._hour=0,this._minute=0,this._emit(""),this.dispatchEvent(new CustomEvent("clear",{bubbles:!0,composed:!0})),this._isOpen=!1}_setNow(){const e=new Date;this._hour=e.getHours(),this._minute=e.getMinutes(),this._syncValue()}_emit(e){this.onChange?.(e),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:e}}))}_syncValue(){const e=`${this._pad(this._hour)}:${this._pad(this._minute)}`;this.value=e,this._emit(e)}_startSpin(e){e(),this._spinInterval=setInterval(e,120)}_stopSpin(){clearInterval(this._spinInterval),this._spinInterval=void 0}_renderPopup(){return a.html`
+      <div data-timepicker-popup popover="manual" class="timepicker__popup">
+        <div class="timepicker__spinner">
+          <!-- Sol sütun: saat -->
+          <div class="timepicker__col timepicker__col--left">
+            <button
+              class="timepicker__spin-btn"
+              @mousedown=${()=>this._startSpin(this._incrementHour)}
+              @mouseup=${this._stopSpin}
+              @mouseleave=${this._stopSpin}
+              @touchstart=${e=>{e.preventDefault(),this._startSpin(this._incrementHour)}}
+              @touchend=${this._stopSpin}
+              tabindex="-1"
+              aria-label="Saat artır"
+            ><ui-icon name="uil-arrow-up" size="16"></ui-icon></button>
+            <div class="timepicker__time-unit">${this._pad(this._hour)}</div>
+            <button
+              class="timepicker__spin-btn"
+              @mousedown=${()=>this._startSpin(this._decrementHour)}
+              @mouseup=${this._stopSpin}
+              @mouseleave=${this._stopSpin}
+              @touchstart=${e=>{e.preventDefault(),this._startSpin(this._decrementHour)}}
+              @touchend=${this._stopSpin}
+              tabindex="-1"
+              aria-label="Saat azalt"
+            ><ui-icon name="uil-arrow-down" size="16"></ui-icon></button>
+          </div>
+
+          <!-- Orta sütun: iki nokta -->
+          <div class="timepicker__col timepicker__col--sep">
+            <div class="timepicker__colon">:</div>
+          </div>
+
+          <!-- Sağ sütun: dakika -->
+          <div class="timepicker__col timepicker__col--right">
+            <button
+              class="timepicker__spin-btn"
+              @mousedown=${()=>this._startSpin(this._incrementMinute)}
+              @mouseup=${this._stopSpin}
+              @mouseleave=${this._stopSpin}
+              @touchstart=${e=>{e.preventDefault(),this._startSpin(this._incrementMinute)}}
+              @touchend=${this._stopSpin}
+              tabindex="-1"
+              aria-label="Dakika artır"
+            ><ui-icon name="uil-arrow-up" size="16"></ui-icon></button>
+            <div class="timepicker__time-unit">${this._pad(this._minute)}</div>
+            <button
+              class="timepicker__spin-btn"
+              @mousedown=${()=>this._startSpin(this._decrementMinute)}
+              @mouseup=${this._stopSpin}
+              @mouseleave=${this._stopSpin}
+              @touchstart=${e=>{e.preventDefault(),this._startSpin(this._decrementMinute)}}
+              @touchend=${this._stopSpin}
+              tabindex="-1"
+              aria-label="Dakika azalt"
+            ><ui-icon name="uil-arrow-down" size="16"></ui-icon></button>
+          </div>
+        </div>
+
+        <!-- Action buttons -->
+        <div class="timepicker__actions">
+          <button
+            class="timepicker__action-btn"
+            @click=${this._setNow}
+            title="Şu anki saati seç"
+          >
+            <ui-icon name="uil-calendar-alt" size="16"></ui-icon>
+          </button>
+          <button
+            class="timepicker__action-btn"
+            @click=${()=>this._clearValue()}
+            title="Temizle"
+          >
+            <ui-icon name="uil-trash" size="16"></ui-icon>
+          </button>
+          <button
+            class="timepicker__action-btn"
+            @click=${()=>{this._isOpen=!1}}
+            title="Kapat"
+          >
+            <ui-icon name="uil-times" size="16"></ui-icon>
+          </button>
+        </div>
+      </div>
+    `}render(){return a.html`
+      <div class="timepicker__reference">
+        <logosphere-input
+          .label=${this.label}
+          .helper=${this.helper}
+          .error=${this.error}
+          .required=${this.required}
+          .disabled=${this.disabled}
+          .readonly=${this.readonly}
+          .size=${this.size}
+          .variant=${this.variant}
+          .placeholder=${this.placeholder}
+          .value=${this.value}
+          mask="00:00"
+          @input=${this._handleInputChange}
+          @clear=${this._handleInputClear}
+          @change=${e=>e.stopPropagation()}
+        >
+          <button
+            slot="suffix"
+            type="button"
+            class="timepicker__trigger ${this._isOpen?"timepicker__trigger--active":""}"
+            @click=${this._togglePopup}
+            ?disabled=${this.disabled}
+            tabindex=${this.disabled?"-1":"0"}
+            aria-label="Saat seç"
+            aria-expanded=${this._isOpen?"true":"false"}
+          >
+            <ui-icon name="uil-clock" size="16"></ui-icon>
+          </button>
+        </logosphere-input>
+      </div>
+
+      ${this._renderPopup()}
+    `}};exports.TimePicker.styles=[a.css`${a.unsafeCSS(u)}`];i([t.property({type:String})],exports.TimePicker.prototype,"value",2);i([t.property({type:String})],exports.TimePicker.prototype,"label",2);i([t.property({type:String})],exports.TimePicker.prototype,"helper",2);i([t.property({type:String})],exports.TimePicker.prototype,"error",2);i([t.property({type:String})],exports.TimePicker.prototype,"placeholder",2);i([t.property({type:Boolean})],exports.TimePicker.prototype,"required",2);i([t.property({type:Boolean})],exports.TimePicker.prototype,"disabled",2);i([t.property({type:Boolean})],exports.TimePicker.prototype,"readonly",2);i([t.property({type:String})],exports.TimePicker.prototype,"size",2);i([t.property({type:String})],exports.TimePicker.prototype,"variant",2);i([t.property({attribute:!1})],exports.TimePicker.prototype,"onChange",2);i([t.state()],exports.TimePicker.prototype,"_isOpen",2);i([t.state()],exports.TimePicker.prototype,"_hour",2);i([t.state()],exports.TimePicker.prototype,"_minute",2);i([t.query(".timepicker__reference")],exports.TimePicker.prototype,"_referenceEl",2);i([t.query("[data-timepicker-popup]")],exports.TimePicker.prototype,"_popupEl",2);exports.TimePicker=i([t.customElement("logosphere-timepicker")],exports.TimePicker);

package/dist/timepicker.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./timepicker-CRtoPBMn.cjs");Object.defineProperty(exports,"TimePicker",{enumerable:!0,get:()=>e.TimePicker});

package/dist/timepicker.js

@@ -0,0 +1,4 @@
+import { T as i } from "./timepicker-BKUTi_AU.js";
+export {
+  i as TimePicker
+};