@krollins/blueprint 0.2.2 → 0.3.0

package/dist/shared/time-picker-B_KTAdhx.js

@@ -0,0 +1,423 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { t } from "./form-control-CBEBNz12.js";
+import { a as n, i as r, r as i } from "./field-message-CPXPLd6z.js";
+import { LitElement as a, css as o, html as s, nothing as c } from "lit";
+import { customElement as l, property as u, state as d } from "lit/decorators.js";
+import { classMap as f } from "lit/directives/class-map.js";
+//#region source/components/time-picker/time-picker.style.ts
+var p = o`
+  /* Base styles */
+  :host {
+    display: inline-block;
+    width: 100%;
+  }
+
+  .time-picker {
+    position: relative;
+    font-family: var(--bp-font-family);
+  }
+
+  .label {
+    display: block;
+    font-size: var(--bp-font-size-sm);
+    font-weight: var(--bp-font-weight-medium);
+    color: var(--bp-color-text);
+    line-height: var(--bp-line-height-normal);
+    margin-bottom: var(--bp-spacing-xs);
+    cursor: pointer;
+  }
+
+  .label-required {
+    color: var(--bp-color-error);
+    margin-left: var(--bp-spacing-xs);
+  }
+
+  .input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .input {
+    width: 100%;
+    padding: var(--bp-spacing-sm) var(--bp-spacing-md);
+    padding-right: var(--bp-spacing-2xl);
+    border: var(--bp-border-width) solid var(--bp-color-input-border);
+    border-radius: var(--bp-border-radius-md);
+    font-size: var(--bp-font-size-base);
+    font-family: var(--bp-font-family);
+    color: var(--bp-color-text);
+    background-color: var(--bp-color-surface);
+    cursor: pointer;
+    transition: border-color var(--bp-transition-fast);
+  }
+
+  .input::placeholder {
+    color: var(--bp-color-text-muted);
+  }
+
+  .icon {
+    position: absolute;
+    right: var(--bp-spacing-sm);
+    pointer-events: none;
+    font-size: var(--bp-font-size-lg);
+    color: var(--bp-color-text-muted);
+  }
+
+  .clear-button {
+    position: absolute;
+    right: var(--bp-spacing-xl);
+    background: none;
+    border: none;
+    border-radius: var(--bp-border-radius-sm);
+    font-size: var(--bp-font-size-xl);
+    color: var(--bp-color-text-muted);
+    cursor: pointer;
+    padding: 0;
+    width: var(--bp-spacing-lg);
+    height: var(--bp-spacing-lg);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition:
+      color var(--bp-transition-fast),
+      background-color var(--bp-transition-fast);
+  }
+
+  .dropdown {
+    position: absolute;
+    top: calc(100% + var(--bp-spacing-xs));
+    left: 0;
+    right: 0;
+    background-color: var(--bp-color-surface);
+    border: var(--bp-border-width) solid var(--bp-color-border);
+    border-top: calc(var(--bp-border-width) * 2) solid var(--bp-color-primary);
+    border-radius: var(--bp-border-radius-sm);
+    box-shadow: var(--bp-shadow-md);
+    max-height: 320px;
+    overflow-y: auto;
+    z-index: var(--bp-z-dropdown);
+    animation: slideDown var(--bp-transition-fast) ease-out;
+  }
+
+  @keyframes slideDown {
+    from {
+      opacity: 0;
+      transform: translateY(-8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .time-option {
+    padding: var(--bp-spacing-sm) var(--bp-spacing-md);
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    font-size: var(--bp-font-size-base);
+    color: var(--bp-color-text);
+    transition: background-color var(--bp-transition-fast);
+  }
+
+  /* Variants */
+  .time-option--selected {
+    background-color: color-mix(
+      in srgb,
+      var(--bp-color-primary) 8%,
+      transparent
+    );
+    color: var(--bp-color-primary);
+    font-weight: var(--bp-font-weight-semibold);
+  }
+
+  /* Sizes */
+  .time-picker--sm .input {
+    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);
+    padding-right: var(--bp-spacing-xl);
+    font-size: var(--bp-font-size-sm);
+  }
+
+  .time-picker--sm .icon {
+    font-size: var(--bp-font-size-base);
+  }
+
+  .time-picker--sm .clear-button {
+    right: var(--bp-spacing-lg);
+  }
+
+  .time-picker--lg .input {
+    padding: var(--bp-spacing-md) var(--bp-spacing-lg);
+    padding-right: var(--bp-spacing-24);
+    font-size: var(--bp-font-size-lg);
+  }
+
+  .time-picker--lg .icon {
+    font-size: var(--bp-font-size-xl);
+  }
+
+  .time-picker--lg .clear-button {
+    right: var(--bp-spacing-2xl);
+  }
+
+  /* States */
+  .input:hover:not(:disabled) {
+    border-color: var(--bp-color-primary);
+  }
+
+  .input[aria-expanded='true'] {
+    border-color: var(--bp-color-primary);
+  }
+
+  .input:focus {
+    outline: none;
+    border-color: var(--bp-color-focus);
+    box-shadow: 0 0 0 var(--bp-focus-width) var(--bp-color-focus);
+  }
+
+  /* Invalid: error border, also while hovered, open or focused */
+  .time-picker--invalid .input,
+  .time-picker--invalid .input:hover:not(:disabled),
+  .time-picker--invalid .input[aria-expanded='true'],
+  .time-picker--invalid .input:focus {
+    border-color: var(--bp-color-error);
+  }
+
+  .input:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .clear-button:hover {
+    color: var(--bp-color-primary);
+    background-color: color-mix(
+      in srgb,
+      var(--bp-color-primary) 8%,
+      transparent
+    );
+  }
+
+  .time-option:hover {
+    background-color: color-mix(
+      in srgb,
+      var(--bp-color-primary) 8%,
+      transparent
+    );
+  }
+
+  .time-option--selected:hover {
+    background-color: color-mix(
+      in srgb,
+      var(--bp-color-primary) 12%,
+      transparent
+    );
+  }
+`, m = class extends t(a) {
+	static {
+		this.styles = [r, p];
+	}
+	constructor() {
+		super(), this.isOpen = !1, this.focusedHour = null, this.focusedMinute = null, this.handleDocumentClick = (e) => {
+			this.contains(e.target) || (this.isOpen = !1);
+		}, this.toggleDropdown = () => {
+			this.disabled || (this.isOpen = !this.isOpen, this.isOpen ? (globalThis.setTimeout(() => {
+				document.addEventListener("click", this.handleDocumentClick);
+			}, 0), this.updateComplete.then(() => {
+				let e = this.shadowRoot?.querySelector(".time-option--selected");
+				e && e.scrollIntoView({ block: "nearest" });
+			})) : document.removeEventListener("click", this.handleDocumentClick));
+		}, this.value = "", this.name = "", this.label = "", this.helperText = "", this.errorMessage = "", this.placeholder = "Select time", this.disabled = !1, this.required = !1, this.size = "md", this.format = "12", this.step = 15;
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), document.removeEventListener("click", this.handleDocumentClick);
+	}
+	parseTime(e) {
+		if (!e) return null;
+		let t = e.match(/^(\d{1,2}):(\d{2})(?:\s*(AM|PM))?$/i);
+		if (!t) return null;
+		let n = parseInt(t[1], 10), r = parseInt(t[2], 10), i = t[3]?.toUpperCase();
+		return this.format === "12" && i && (i === "PM" && n !== 12 && (n += 12), i === "AM" && n === 12 && (n = 0)), n < 0 || n > 23 || r < 0 || r > 59 ? null : {
+			hours: n,
+			minutes: r
+		};
+	}
+	formatTime(e, t) {
+		if (this.format === "24") return `${e.toString().padStart(2, "0")}:${t.toString().padStart(2, "0")}`;
+		let n = e >= 12 ? "PM" : "AM";
+		return `${e === 0 ? 12 : e > 12 ? e - 12 : e}:${t.toString().padStart(2, "0")} ${n}`;
+	}
+	getDisplayValue() {
+		if (!this.value) return "";
+		let e = this.parseTime(this.value);
+		return e ? this.formatTime(e.hours, e.minutes) : this.value;
+	}
+	generateTimeOptions() {
+		let e = [], t = this.format === "24" ? 23 : 11;
+		for (let n = 0; n <= t; n++) for (let t = 0; t < 60; t += this.step) {
+			let r = (this.format, n);
+			e.push({
+				hours: r,
+				minutes: t,
+				display: this.formatTime(r, t)
+			});
+		}
+		if (this.format === "12") for (let t = 0; t <= 11; t++) for (let n = 0; n < 60; n += this.step) {
+			let r = t + 12;
+			e.push({
+				hours: r,
+				minutes: n,
+				display: this.formatTime(r, n)
+			});
+		}
+		return e;
+	}
+	handleTimeSelect(e, t) {
+		let n = this.formatTime(e, t), r = this.value;
+		this.value = n, this.isOpen = !1, this.dispatchEvent(new CustomEvent("bp-change", {
+			detail: {
+				value: n,
+				hours: e,
+				minutes: t,
+				previousValue: r
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	handleClear(e) {
+		e.stopPropagation();
+		let t = this.value;
+		this.value = "", this.dispatchEvent(new CustomEvent("bp-change", {
+			detail: {
+				value: "",
+				hours: null,
+				minutes: null,
+				previousValue: t
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	handleKeyDown(e) {
+		let t = e;
+		if (!this.isOpen) {
+			(t.key === "ArrowDown" || t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.isOpen = !0);
+			return;
+		}
+		switch (t.key) {
+			case "Escape":
+				t.preventDefault(), this.isOpen = !1;
+				break;
+			case "ArrowDown":
+			case "ArrowUp":
+				t.preventDefault();
+				break;
+			case "Enter":
+			case " ": t.preventDefault(), this.focusedHour !== null && this.focusedMinute !== null && this.handleTimeSelect(this.focusedHour, this.focusedMinute);
+		}
+	}
+	isSelected(e, t) {
+		let n = this.parseTime(this.value);
+		return n ? n.hours === e && n.minutes === t : !1;
+	}
+	render() {
+		let e = {
+			helperText: this.helperText,
+			errorMessage: this.errorMessage,
+			invalid: !1
+		}, { invalid: t, describedBy: r } = i(e), a = this.getDisplayValue(), o = this.generateTimeOptions();
+		return s`
+      <div
+        class="time-picker time-picker--${this.size} ${t ? "time-picker--invalid" : ""}"
+      >
+        ${this.label ? s`
+                <label class="label" part="label" @click=${this.toggleDropdown}>
+                  ${this.label}
+                  ${this.required ? s`<span class="label-required">*</span>` : ""}
+                </label>
+              ` : ""}
+        <div
+          class="input-wrapper"
+          part="input-wrapper"
+          @keydown=${this.handleKeyDown}
+        >
+          <input
+            type="text"
+            class="input"
+            part="input"
+            .value=${a}
+            placeholder=${this.placeholder}
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+            name=${this.name}
+            readonly
+            aria-haspopup="listbox"
+            aria-expanded=${this.isOpen}
+            aria-disabled=${this.disabled}
+            aria-label=${this.label || this.placeholder || "Time picker"}
+            aria-invalid=${t ? "true" : c}
+            aria-describedby=${r ?? c}
+            @click=${this.toggleDropdown}
+          />
+          ${this.value && !this.disabled ? s`
+                  <button
+                    type="button"
+                    class="clear-button"
+                    part="clear-button"
+                    @click=${this.handleClear}
+                    aria-label="Clear time"
+                    tabindex="-1"
+                  >
+                    ✕
+                  </button>
+                ` : ""}
+          <div class="icon" part="icon">
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M8 4V8L10.5 10.5M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+
+        ${this.isOpen ? s`
+                <div class="dropdown" part="dropdown" role="listbox">
+                  ${o.map((e) => s`
+                      <div
+                        class=${f({
+			"time-option": !0,
+			"time-option--selected": this.isSelected(e.hours, e.minutes)
+		})}
+                        part="time-option"
+                        role="option"
+                        aria-selected=${this.isSelected(e.hours, e.minutes)}
+                        @click=${() => this.handleTimeSelect(e.hours, e.minutes)}
+                      >
+                        ${e.display}
+                      </div>
+                    `)}
+                </div>
+              ` : ""}
+      </div>
+      ${n(e)}
+    `;
+	}
+};
+e([u({ type: String })], m.prototype, "value", void 0), e([u({ type: String })], m.prototype, "name", void 0), e([u({ type: String })], m.prototype, "label", void 0), e([u({ type: String })], m.prototype, "helperText", void 0), e([u({ type: String })], m.prototype, "errorMessage", void 0), e([u({ type: String })], m.prototype, "placeholder", void 0), e([u({ type: Boolean })], m.prototype, "disabled", void 0), e([u({ type: Boolean })], m.prototype, "required", void 0), e([u({ type: String })], m.prototype, "size", void 0), e([u({ type: String })], m.prototype, "format", void 0), e([u({ type: Number })], m.prototype, "step", void 0), e([d()], m.prototype, "isOpen", void 0), e([d()], m.prototype, "focusedHour", void 0), e([d()], m.prototype, "focusedMinute", void 0), m = e([l("bp-time-picker")], m);
+//#endregion
+export { m as t };
+
+//# sourceMappingURL=time-picker-B_KTAdhx.js.map

package/dist/shared/time-picker-B_KTAdhx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker-B_KTAdhx.js","names":["_decorate","__decorate","renderFieldMessage","fieldMessageStyles","fieldMessageState","timePickerStyles","BpTimePicker","FormControlMixin","LitElement","selected","timeString","match","hours","minutes","period","parsed","options","maxHours","h","m","newValue","oldValue","event","message","displayValue","timeOptions","invalid","nothing","describedBy","classMap","option","property","state","customElement"],"sources":["../../source/components/time-picker/time-picker.style.ts","../../source/components/time-picker/time-picker.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const timePickerStyles = css`\n  /* Base styles */\n  :host {\n    display: inline-block;\n    width: 100%;\n  }\n\n  .time-picker {\n    position: relative;\n    font-family: var(--bp-font-family);\n  }\n\n  .label {\n    display: block;\n    font-size: var(--bp-font-size-sm);\n    font-weight: var(--bp-font-weight-medium);\n    color: var(--bp-color-text);\n    line-height: var(--bp-line-height-normal);\n    margin-bottom: var(--bp-spacing-xs);\n    cursor: pointer;\n  }\n\n  .label-required {\n    color: var(--bp-color-error);\n    margin-left: var(--bp-spacing-xs);\n  }\n\n  .input-wrapper {\n    position: relative;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n\n  .input {\n    width: 100%;\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n    padding-right: var(--bp-spacing-2xl);\n    border: var(--bp-border-width) solid var(--bp-color-input-border);\n    border-radius: var(--bp-border-radius-md);\n    font-size: var(--bp-font-size-base);\n    font-family: var(--bp-font-family);\n    color: var(--bp-color-text);\n    background-color: var(--bp-color-surface);\n    cursor: pointer;\n    transition: border-color var(--bp-transition-fast);\n  }\n\n  .input::placeholder {\n    color: var(--bp-color-text-muted);\n  }\n\n  .icon {\n    position: absolute;\n    right: var(--bp-spacing-sm);\n    pointer-events: none;\n    font-size: var(--bp-font-size-lg);\n    color: var(--bp-color-text-muted);\n  }\n\n  .clear-button {\n    position: absolute;\n    right: var(--bp-spacing-xl);\n    background: none;\n    border: none;\n    border-radius: var(--bp-border-radius-sm);\n    font-size: var(--bp-font-size-xl);\n    color: var(--bp-color-text-muted);\n    cursor: pointer;\n    padding: 0;\n    width: var(--bp-spacing-lg);\n    height: var(--bp-spacing-lg);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition:\n      color var(--bp-transition-fast),\n      background-color var(--bp-transition-fast);\n  }\n\n  .dropdown {\n    position: absolute;\n    top: calc(100% + var(--bp-spacing-xs));\n    left: 0;\n    right: 0;\n    background-color: var(--bp-color-surface);\n    border: var(--bp-border-width) solid var(--bp-color-border);\n    border-top: calc(var(--bp-border-width) * 2) solid var(--bp-color-primary);\n    border-radius: var(--bp-border-radius-sm);\n    box-shadow: var(--bp-shadow-md);\n    max-height: 320px;\n    overflow-y: auto;\n    z-index: var(--bp-z-dropdown);\n    animation: slideDown var(--bp-transition-fast) ease-out;\n  }\n\n  @keyframes slideDown {\n    from {\n      opacity: 0;\n      transform: translateY(-8px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n\n  .time-option {\n    padding: var(--bp-spacing-sm) var(--bp-spacing-md);\n    min-height: 44px;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    font-size: var(--bp-font-size-base);\n    color: var(--bp-color-text);\n    transition: background-color var(--bp-transition-fast);\n  }\n\n  /* Variants */\n  .time-option--selected {\n    background-color: color-mix(\n      in srgb,\n      var(--bp-color-primary) 8%,\n      transparent\n    );\n    color: var(--bp-color-primary);\n    font-weight: var(--bp-font-weight-semibold);\n  }\n\n  /* Sizes */\n  .time-picker--sm .input {\n    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);\n    padding-right: var(--bp-spacing-xl);\n    font-size: var(--bp-font-size-sm);\n  }\n\n  .time-picker--sm .icon {\n    font-size: var(--bp-font-size-base);\n  }\n\n  .time-picker--sm .clear-button {\n    right: var(--bp-spacing-lg);\n  }\n\n  .time-picker--lg .input {\n    padding: var(--bp-spacing-md) var(--bp-spacing-lg);\n    padding-right: var(--bp-spacing-24);\n    font-size: var(--bp-font-size-lg);\n  }\n\n  .time-picker--lg .icon {\n    font-size: var(--bp-font-size-xl);\n  }\n\n  .time-picker--lg .clear-button {\n    right: var(--bp-spacing-2xl);\n  }\n\n  /* States */\n  .input:hover:not(:disabled) {\n    border-color: var(--bp-color-primary);\n  }\n\n  .input[aria-expanded='true'] {\n    border-color: var(--bp-color-primary);\n  }\n\n  .input:focus {\n    outline: none;\n    border-color: var(--bp-color-focus);\n    box-shadow: 0 0 0 var(--bp-focus-width) var(--bp-color-focus);\n  }\n\n  /* Invalid: error border, also while hovered, open or focused */\n  .time-picker--invalid .input,\n  .time-picker--invalid .input:hover:not(:disabled),\n  .time-picker--invalid .input[aria-expanded='true'],\n  .time-picker--invalid .input:focus {\n    border-color: var(--bp-color-error);\n  }\n\n  .input:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .clear-button:hover {\n    color: var(--bp-color-primary);\n    background-color: color-mix(\n      in srgb,\n      var(--bp-color-primary) 8%,\n      transparent\n    );\n  }\n\n  .time-option:hover {\n    background-color: color-mix(\n      in srgb,\n      var(--bp-color-primary) 8%,\n      transparent\n    );\n  }\n\n  .time-option--selected:hover {\n    background-color: color-mix(\n      in srgb,\n      var(--bp-color-primary) 12%,\n      transparent\n    );\n  }\n`;\n","import { LitElement, html, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { timePickerStyles } from './time-picker.style.js';\nimport { FormControlMixin } from '../../utilities/form-control.js';\nimport {\n  fieldMessageState,\n  renderFieldMessage,\n  fieldMessageStyles,\n} from '../../utilities/field-message.js';\n\nexport type TimePickerSize = 'sm' | 'md' | 'lg';\nexport type TimeFormat = '12' | '24';\n\n/**\n * A time picker component with dropdown time selection.\n *\n * @element bp-time-picker\n *\n * @fires bp-change - Fired when the selected time changes\n *\n * @csspart input-wrapper - The input wrapper container\n * @csspart input - The text input field\n * @csspart icon - The clock icon indicator\n * @csspart clear-button - The clear button\n * @csspart dropdown - The time options dropdown\n * @csspart time-option - Individual time option in dropdown\n */\n@customElement('bp-time-picker')\nexport class BpTimePicker extends FormControlMixin(LitElement) {\n  @property({ type: String }) declare value: string;\n  @property({ type: String }) declare name: string;\n  @property({ type: String }) declare label: string;\n\n  /** Helper text displayed below the time picker */\n  @property({ type: String }) declare helperText: string;\n\n  /**\n   * Error text. When set, the time picker is invalid: the message replaces the\n   * helper text, is announced, and the border turns to the error color.\n   */\n  @property({ type: String }) declare errorMessage: string;\n  @property({ type: String }) declare placeholder: string;\n  @property({ type: Boolean }) declare disabled: boolean;\n  @property({ type: Boolean }) declare required: boolean;\n  @property({ type: String }) declare size: TimePickerSize;\n  @property({ type: String }) declare format: TimeFormat;\n  @property({ type: Number }) declare step: number;\n\n  @state() private isOpen = false;\n  @state() private focusedHour: number | null = null;\n  @state() private focusedMinute: number | null = null;\n\n  static styles = [fieldMessageStyles, timePickerStyles];\n\n  constructor() {\n    super();\n    this.value = '';\n    this.name = '';\n    this.label = '';\n    this.helperText = '';\n    this.errorMessage = '';\n    this.placeholder = 'Select time';\n    this.disabled = false;\n    this.required = false;\n    this.size = 'md';\n    this.format = '12';\n    this.step = 15; // 15-minute intervals by default\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('click', this.handleDocumentClick);\n  }\n\n  private handleDocumentClick = (e: MouseEvent) => {\n    if (!this.contains(e.target as globalThis.Node)) {\n      this.isOpen = false;\n    }\n  };\n\n  private toggleDropdown = () => {\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n\n    if (this.isOpen) {\n      // Add document click handler on next tick to avoid immediate close\n      globalThis.setTimeout(() => {\n        document.addEventListener('click', this.handleDocumentClick);\n      }, 0);\n      // Scroll to selected option\n      this.updateComplete.then(() => {\n        const selected = this.shadowRoot?.querySelector(\n          '.time-option--selected'\n        ) as HTMLElement;\n        if (selected) {\n          selected.scrollIntoView({ block: 'nearest' });\n        }\n      });\n    } else {\n      document.removeEventListener('click', this.handleDocumentClick);\n    }\n  };\n\n  private parseTime(\n    timeString: string\n  ): { hours: number; minutes: number } | null {\n    if (!timeString) return null;\n\n    const match = timeString.match(/^(\\d{1,2}):(\\d{2})(?:\\s*(AM|PM))?$/i);\n    if (!match) return null;\n\n    let hours = parseInt(match[1], 10);\n    const minutes = parseInt(match[2], 10);\n    const period = match[3]?.toUpperCase();\n\n    if (this.format === '12' && period) {\n      if (period === 'PM' && hours !== 12) hours += 12;\n      if (period === 'AM' && hours === 12) hours = 0;\n    }\n\n    if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) return null;\n\n    return { hours, minutes };\n  }\n\n  private formatTime(hours: number, minutes: number): string {\n    if (this.format === '24') {\n      return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;\n    }\n\n    const period = hours >= 12 ? 'PM' : 'AM';\n    const displayHours = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;\n    return `${displayHours}:${minutes.toString().padStart(2, '0')} ${period}`;\n  }\n\n  private getDisplayValue(): string {\n    if (!this.value) return '';\n\n    const parsed = this.parseTime(this.value);\n    if (!parsed) return this.value;\n\n    return this.formatTime(parsed.hours, parsed.minutes);\n  }\n\n  private generateTimeOptions(): Array<{\n    hours: number;\n    minutes: number;\n    display: string;\n  }> {\n    const options: Array<{ hours: number; minutes: number; display: string }> =\n      [];\n    const maxHours = this.format === '24' ? 23 : 11;\n\n    for (let h = 0; h <= maxHours; h++) {\n      for (let m = 0; m < 60; m += this.step) {\n        const hours = this.format === '24' ? h : h;\n        options.push({\n          hours,\n          minutes: m,\n          display: this.formatTime(hours, m),\n        });\n      }\n    }\n\n    // For 12-hour format, add PM times\n    if (this.format === '12') {\n      for (let h = 0; h <= 11; h++) {\n        for (let m = 0; m < 60; m += this.step) {\n          const hours = h + 12;\n          options.push({\n            hours,\n            minutes: m,\n            display: this.formatTime(hours, m),\n          });\n        }\n      }\n    }\n\n    return options;\n  }\n\n  private handleTimeSelect(hours: number, minutes: number) {\n    const newValue = this.formatTime(hours, minutes);\n    const oldValue = this.value;\n\n    this.value = newValue;\n    this.isOpen = false;\n\n    this.dispatchEvent(\n      new CustomEvent('bp-change', {\n        detail: { value: newValue, hours, minutes, previousValue: oldValue },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleClear(e: MouseEvent) {\n    e.stopPropagation();\n    const oldValue = this.value;\n    this.value = '';\n\n    this.dispatchEvent(\n      new CustomEvent('bp-change', {\n        detail: {\n          value: '',\n          hours: null,\n          minutes: null,\n          previousValue: oldValue,\n        },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleKeyDown(e: Event) {\n    const event = e as globalThis.KeyboardEvent;\n    if (!this.isOpen) {\n      if (\n        event.key === 'ArrowDown' ||\n        event.key === 'Enter' ||\n        event.key === ' '\n      ) {\n        event.preventDefault();\n        this.isOpen = true;\n      }\n      return;\n    }\n\n    switch (event.key) {\n      case 'Escape':\n        event.preventDefault();\n        this.isOpen = false;\n        break;\n\n      case 'ArrowDown':\n      case 'ArrowUp':\n        event.preventDefault();\n        // Navigate through time options\n        break;\n\n      case 'Enter':\n      case ' ':\n        event.preventDefault();\n        if (this.focusedHour !== null && this.focusedMinute !== null) {\n          this.handleTimeSelect(this.focusedHour, this.focusedMinute);\n        }\n        break;\n    }\n  }\n\n  private isSelected(hours: number, minutes: number): boolean {\n    const parsed = this.parseTime(this.value);\n    if (!parsed) return false;\n    return parsed.hours === hours && parsed.minutes === minutes;\n  }\n\n  render() {\n    const message = {\n      helperText: this.helperText,\n      errorMessage: this.errorMessage,\n      invalid: false,\n    };\n    const { invalid, describedBy } = fieldMessageState(message);\n    const displayValue = this.getDisplayValue();\n    const timeOptions = this.generateTimeOptions();\n\n    return html`\n      <div\n        class=\"time-picker time-picker--${this.size} ${\n          invalid ? 'time-picker--invalid' : ''\n        }\"\n      >\n        ${\n          this.label\n            ? html`\n                <label class=\"label\" part=\"label\" @click=${this.toggleDropdown}>\n                  ${this.label}\n                  ${\n                    this.required\n                      ? html`<span class=\"label-required\">*</span>`\n                      : ''\n                  }\n                </label>\n              `\n            : ''\n        }\n        <div\n          class=\"input-wrapper\"\n          part=\"input-wrapper\"\n          @keydown=${this.handleKeyDown}\n        >\n          <input\n            type=\"text\"\n            class=\"input\"\n            part=\"input\"\n            .value=${displayValue}\n            placeholder=${this.placeholder}\n            ?disabled=${this.disabled}\n            ?required=${this.required}\n            name=${this.name}\n            readonly\n            aria-haspopup=\"listbox\"\n            aria-expanded=${this.isOpen}\n            aria-disabled=${this.disabled}\n            aria-label=${this.label || this.placeholder || 'Time picker'}\n            aria-invalid=${invalid ? 'true' : nothing}\n            aria-describedby=${describedBy ?? nothing}\n            @click=${this.toggleDropdown}\n          />\n          ${\n            this.value && !this.disabled\n              ? html`\n                  <button\n                    type=\"button\"\n                    class=\"clear-button\"\n                    part=\"clear-button\"\n                    @click=${this.handleClear}\n                    aria-label=\"Clear time\"\n                    tabindex=\"-1\"\n                  >\n                    ✕\n                  </button>\n                `\n              : ''\n          }\n          <div class=\"icon\" part=\"icon\">\n            <svg\n              width=\"16\"\n              height=\"16\"\n              viewBox=\"0 0 16 16\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M8 4V8L10.5 10.5M14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2C11.3137 2 14 4.68629 14 8Z\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </div>\n        </div>\n\n        ${\n          this.isOpen\n            ? html`\n                <div class=\"dropdown\" part=\"dropdown\" role=\"listbox\">\n                  ${timeOptions.map(\n                    (option) => html`\n                      <div\n                        class=${classMap({\n                          'time-option': true,\n                          'time-option--selected': this.isSelected(\n                            option.hours,\n                            option.minutes\n                          ),\n                        })}\n                        part=\"time-option\"\n                        role=\"option\"\n                        aria-selected=${this.isSelected(\n                          option.hours,\n                          option.minutes\n                        )}\n                        @click=${() =>\n                          this.handleTimeSelect(option.hours, option.minutes)}\n                      >\n                        ${option.display}\n                      </div>\n                    `\n                  )}\n                </div>\n              `\n            : ''\n        }\n      </div>\n      ${renderFieldMessage(message)}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bp-time-picker': BpTimePicker;\n  }\n}\n"],"mappings":"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"}

package/dist/shared/tooltip-DUXEHFzC.js

@@ -0,0 +1,212 @@
+import { t as e } from "./decorate-BJVyhdRd.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a, state as o } from "lit/decorators.js";
+//#region source/components/tooltip/tooltip.style.ts
+var s = n`
+  /* Base styles */
+  :host {
+    display: inline-block;
+    position: relative;
+  }
+
+  .tooltip-wrapper {
+    position: relative;
+    display: inline-block;
+  }
+
+  .tooltip-trigger {
+    display: inline-block;
+  }
+
+  .tooltip-content {
+    position: absolute;
+    z-index: var(--bp-z-tooltip);
+    padding: var(--bp-spacing-sm) var(--bp-spacing-md);
+    background-color: var(--bp-color-text);
+    color: var(--bp-color-text-inverse);
+    border-radius: var(--bp-border-radius-sm);
+    font-size: var(--bp-font-size-sm);
+    font-family: var(--bp-font-family);
+    line-height: var(--bp-line-height-tight);
+    max-width: calc(var(--bp-spacing-24) * 3);
+    white-space: normal;
+    box-shadow: var(--bp-shadow-md);
+    pointer-events: none;
+    animation: tooltip-fade-in var(--bp-transition-fast);
+  }
+
+  @keyframes tooltip-fade-in {
+    from {
+      opacity: 0;
+      scale: 0.95;
+    }
+    to {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+
+  /* Placement variants */
+  .tooltip-content--top {
+    bottom: calc(100% + var(--bp-spacing-xs));
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .tooltip-content--top::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: var(--bp-spacing-sm);
+    border-style: solid;
+    border-color: var(--bp-color-text) transparent transparent transparent;
+  }
+
+  .tooltip-content--bottom {
+    top: calc(100% + var(--bp-spacing-xs));
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .tooltip-content--bottom::after {
+    content: '';
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: var(--bp-spacing-sm);
+    border-style: solid;
+    border-color: transparent transparent var(--bp-color-text) transparent;
+  }
+
+  .tooltip-content--left {
+    right: calc(100% + var(--bp-spacing-xs));
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .tooltip-content--left::after {
+    content: '';
+    position: absolute;
+    left: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: var(--bp-spacing-sm);
+    border-style: solid;
+    border-color: transparent transparent transparent var(--bp-color-text);
+  }
+
+  .tooltip-content--right {
+    left: calc(100% + var(--bp-spacing-xs));
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .tooltip-content--right::after {
+    content: '';
+    position: absolute;
+    right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: var(--bp-spacing-sm);
+    border-style: solid;
+    border-color: transparent var(--bp-color-text) transparent transparent;
+  }
+
+  /* States */
+  :host([disabled]) {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`, c = class extends t {
+	static {
+		this.styles = [s];
+	}
+	constructor() {
+		super(), this.isVisible = !1, this.showTimeout = null, this.hideTimeout = null, this.tooltipId = `tooltip-${Math.random().toString(36).substr(2, 9)}`, this.content = "", this.placement = "top", this.disabled = !1, this.delay = 200;
+	}
+	handleMouseEnter() {
+		this.disabled || (this.clearTimeouts(), this.showTimeout = window.setTimeout(() => {
+			this.isVisible = !0, this.dispatchEvent(new CustomEvent("bp-show", {
+				detail: {
+					placement: this.placement,
+					content: this.content
+				},
+				bubbles: !0,
+				composed: !0
+			}));
+		}, this.delay));
+	}
+	handleMouseLeave() {
+		this.clearTimeouts(), this.hideTimeout = window.setTimeout(() => {
+			this.isVisible = !1, this.dispatchEvent(new CustomEvent("bp-hide", {
+				detail: {
+					placement: this.placement,
+					content: this.content
+				},
+				bubbles: !0,
+				composed: !0
+			}));
+		}, 100);
+	}
+	handleFocus() {
+		this.disabled || (this.isVisible = !0, this.dispatchEvent(new CustomEvent("bp-show", {
+			detail: {
+				placement: this.placement,
+				content: this.content
+			},
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	handleBlur() {
+		this.isVisible = !1, this.dispatchEvent(new CustomEvent("bp-hide", {
+			detail: {
+				placement: this.placement,
+				content: this.content
+			},
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	clearTimeouts() {
+		this.showTimeout !== null && (window.clearTimeout(this.showTimeout), this.showTimeout = null), this.hideTimeout !== null && (window.clearTimeout(this.hideTimeout), this.hideTimeout = null);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.clearTimeouts();
+	}
+	render() {
+		return r`
+      <div
+        class="tooltip-wrapper"
+        aria-describedby=${this.isVisible ? this.tooltipId : ""}
+        @mouseenter=${this.handleMouseEnter}
+        @mouseleave=${this.handleMouseLeave}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+      >
+        <div class="tooltip-trigger" part="trigger">
+          <slot></slot>
+        </div>
+        ${this.isVisible && !this.disabled ? r`
+                <div
+                  id=${this.tooltipId}
+                  class="tooltip-content tooltip-content--${this.placement}"
+                  part="content"
+                  role="tooltip"
+                  aria-hidden="false"
+                >
+                  ${this.content}
+                </div>
+              ` : null}
+      </div>
+    `;
+	}
+};
+e([a({ type: String })], c.prototype, "content", void 0), e([a({ type: String })], c.prototype, "placement", void 0), e([a({ type: Boolean })], c.prototype, "disabled", void 0), e([a({ type: Number })], c.prototype, "delay", void 0), e([o()], c.prototype, "isVisible", void 0), c = e([i("bp-tooltip")], c);
+//#endregion
+export { c as t };
+
+//# sourceMappingURL=tooltip-DUXEHFzC.js.map