medos-sdk 1.1.6 → 1.1.8

package/dist/vanilla/components/VanillaSelect.d.ts

@@ -0,0 +1,46 @@
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface VanillaSelectOptions {
+    placeholder?: string;
+    disabled?: boolean;
+    error?: boolean;
+    onValueChange?: (value: string) => void;
+}
+export declare class VanillaSelect {
+    private readonly container;
+    private options;
+    private readonly config;
+    private selectedValue;
+    private selectedLabel;
+    private isOpen;
+    private triggerElement;
+    private contentElement;
+    private handleDocumentClick;
+    private handleWindowResize;
+    private handleWindowScroll;
+    constructor(container: HTMLElement | string, options: SelectOption[], config?: VanillaSelectOptions);
+    private renderTrigger;
+    private attachTriggerEvents;
+    private toggleOpen;
+    private open;
+    private close;
+    private createPortal;
+    private removePortal;
+    private updatePosition;
+    private attachPortalEvents;
+    private detachPortalEvents;
+    private focusNextItem;
+    private selectValue;
+    setValue(value: string): void;
+    getValue(): string;
+    setOptions(options: SelectOption[]): void;
+    setDisabled(disabled: boolean): void;
+    setError(error: boolean): void;
+    destroy(): void;
+    private escapeHtml;
+}
+export declare function upgradeNativeSelect(selectElement: HTMLSelectElement, config?: VanillaSelectOptions): VanillaSelect;
+export default VanillaSelect;

package/dist/vanilla/components/VanillaSelect.js

@@ -0,0 +1,523 @@
+import { VanillaIcons } from "./VanillaIcons";
+function injectSelectStyles() {
+    if (typeof document === "undefined")
+        return;
+    const styleId = "medos-vanilla-select-styles";
+    if (document.getElementById(styleId))
+        return;
+    const styleElement = document.createElement("style");
+    styleElement.id = styleId;
+    styleElement.innerHTML = `
+    /* Container */
+    .medos-select-container {
+      position: relative;
+      display: inline-block;
+      width: 100%;
+    }
+
+    /* Trigger Button */
+    .medos-select-trigger {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      justify-content: space-between;
+      white-space: nowrap;
+      border-radius: var(--medos-radius-md, 8px);
+      border: 1px solid var(--medos-color-border, #e5e7eb);
+      background-color: var(--medos-color-surface, #fff);
+      padding: var(--medos-spacing-sm, 10px) var(--medos-spacing-md, 12px);
+      font-size: var(--medos-typography-font-size-sm, 14px);
+      line-height: 1.5;
+      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+      transition: var(--medos-transition-normal, 200ms ease-in-out);
+      cursor: pointer;
+      outline: none;
+      font-family: inherit;
+      text-align: left;
+      box-sizing: border-box;
+      color: var(--medos-color-text, #111827);
+    }
+
+    .medos-select-trigger:hover:not(:disabled) {
+      border-color: var(--medos-color-border-hover, #d1d5db);
+    }
+
+    .medos-select-trigger:focus:not(:disabled) {
+      border-color: var(--medos-color-primary, #27903f);
+      box-shadow: 0 0 0 2px rgba(39, 144, 63, 0.15);
+    }
+
+    .medos-select-trigger:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+      background-color: #f9fafb;
+    }
+
+    .medos-select-trigger-error {
+      border-color: #ef4444;
+    }
+
+    .medos-select-trigger-error:focus {
+      border-color: #ef4444;
+      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
+    }
+
+    .medos-select-trigger[aria-expanded="true"] {
+      border-color: var(--medos-color-primary, #27903f);
+      box-shadow: 0 0 0 2px rgba(39, 144, 63, 0.15);
+    }
+
+    /* Select Value */
+    .medos-select-value {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .medos-select-placeholder {
+      color: #94a3b8;
+    }
+
+    /* Select Icon */
+    .medos-select-icon {
+      height: 16px;
+      width: 16px;
+      opacity: 0.5;
+      flex-shrink: 0;
+      margin-left: 8px;
+      transition: transform 0.2s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .medos-select-trigger[aria-expanded="true"] .medos-select-icon {
+      transform: rotate(180deg);
+    }
+
+    .medos-select-icon-error {
+      color: #ef4444;
+    }
+
+    /* Content Dropdown - Portal */
+    .medos-select-content {
+      position: absolute;
+      z-index: 99999;
+      overflow: hidden;
+      border-radius: 6px;
+      border: 1px solid #e2e8f0;
+      background-color: #ffffff;
+      color: #1e293b;
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+      animation: medos-select-show 0.15s ease-out;
+      box-sizing: border-box;
+    }
+
+    @keyframes medos-select-show {
+      from {
+        opacity: 0;
+        transform: translateY(-4px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    /* Viewport */
+    .medos-select-viewport {
+      padding: 4px;
+      max-height: 256px;
+      overflow-y: auto;
+    }
+
+    /* Select Item */
+    .medos-select-item {
+      position: relative;
+      display: flex;
+      width: 100%;
+      cursor: pointer;
+      user-select: none;
+      align-items: center;
+      border-radius: 4px;
+      padding: 8px 8px 8px 32px;
+      font-size: 14px;
+      outline: none;
+      transition: background-color 0.1s ease;
+      box-sizing: border-box;
+      color: #1e293b;
+    }
+
+    .medos-select-item:hover:not(.medos-select-item-disabled) {
+      background-color: #f1f5f9;
+    }
+
+    .medos-select-item:focus {
+      background-color: #f1f5f9;
+    }
+
+    .medos-select-item-selected {
+      background-color: #f3f4f6;
+    }
+
+    .medos-select-item-disabled {
+      pointer-events: none;
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    /* Item Indicator */
+    .medos-select-item-indicator {
+      position: absolute;
+      left: 8px;
+      display: flex;
+      height: 14px;
+      width: 14px;
+      align-items: center;
+      justify-content: center;
+      color: var(--medos-color-primary, #27903f);
+    }
+
+    /* Item Text */
+    .medos-select-item-text {
+      flex: 1;
+    }
+
+    /* Scrollbar styling */
+    .medos-select-viewport::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    .medos-select-viewport::-webkit-scrollbar-track {
+      background: #f1f5f9;
+      border-radius: 4px;
+    }
+
+    .medos-select-viewport::-webkit-scrollbar-thumb {
+      background: #cbd5e1;
+      border-radius: 4px;
+    }
+
+    .medos-select-viewport::-webkit-scrollbar-thumb:hover {
+      background: #94a3b8;
+    }
+  `;
+    document.head.appendChild(styleElement);
+}
+export class VanillaSelect {
+    constructor(container, options, config = {}) {
+        this.selectedValue = "";
+        this.selectedLabel = "";
+        this.isOpen = false;
+        this.triggerElement = null;
+        this.contentElement = null;
+        this.handleDocumentClick = null;
+        this.handleWindowResize = null;
+        this.handleWindowScroll = null;
+        if (typeof container === "string") {
+            const el = document.getElementById(container);
+            if (!el) {
+                throw new Error(`Container element with id "${container}" not found`);
+            }
+            this.container = el;
+        }
+        else {
+            this.container = container;
+        }
+        this.options = options;
+        this.config = {
+            placeholder: "Select...",
+            disabled: false,
+            error: false,
+            ...config,
+        };
+        injectSelectStyles();
+        this.renderTrigger();
+    }
+    renderTrigger() {
+        const displayValue = this.selectedLabel || this.config.placeholder;
+        const isPlaceholder = !this.selectedLabel;
+        this.container.innerHTML = "";
+        this.container.classList.add("medos-select-container");
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = `medos-select-trigger ${this.config.error ? "medos-select-trigger-error" : ""}`;
+        button.setAttribute("aria-expanded", this.isOpen.toString());
+        button.setAttribute("aria-haspopup", "listbox");
+        if (this.config.disabled) {
+            button.disabled = true;
+        }
+        button.innerHTML = `
+      <span class="medos-select-value ${isPlaceholder ? "medos-select-placeholder" : ""}">
+        ${this.escapeHtml(displayValue || "")}
+      </span>
+      <span class="medos-select-icon ${this.config.error ? "medos-select-icon-error" : ""}">
+        ${VanillaIcons.chevronDown(16)}
+      </span>
+    `;
+        this.container.appendChild(button);
+        this.triggerElement = button;
+        this.attachTriggerEvents();
+    }
+    attachTriggerEvents() {
+        if (!this.triggerElement)
+            return;
+        this.triggerElement.addEventListener("click", (e) => {
+            e.preventDefault();
+            if (!this.config.disabled) {
+                this.toggleOpen();
+            }
+        });
+        this.triggerElement.addEventListener("keydown", (e) => {
+            if (this.config.disabled)
+                return;
+            if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+                e.preventDefault();
+                this.open();
+            }
+        });
+    }
+    toggleOpen() {
+        if (this.isOpen) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    open() {
+        if (this.isOpen || this.config.disabled)
+            return;
+        this.isOpen = true;
+        if (this.triggerElement) {
+            this.triggerElement.setAttribute("aria-expanded", "true");
+        }
+        this.createPortal();
+        this.attachPortalEvents();
+        setTimeout(() => {
+            if (this.contentElement) {
+                const selectedItem = this.contentElement.querySelector(".medos-select-item-selected");
+                const firstItem = this.contentElement.querySelector(".medos-select-item:not(.medos-select-item-disabled)");
+                (selectedItem || firstItem)?.focus();
+            }
+        }, 0);
+    }
+    close() {
+        if (!this.isOpen)
+            return;
+        this.isOpen = false;
+        if (this.triggerElement) {
+            this.triggerElement.setAttribute("aria-expanded", "false");
+            this.triggerElement.focus();
+        }
+        this.removePortal();
+        this.detachPortalEvents();
+    }
+    createPortal() {
+        if (!this.triggerElement)
+            return;
+        const rect = this.triggerElement.getBoundingClientRect();
+        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+        this.contentElement = document.createElement("div");
+        this.contentElement.className = "medos-select-content";
+        this.contentElement.setAttribute("role", "listbox");
+        this.contentElement.style.top = `${rect.bottom + scrollTop + 4}px`;
+        this.contentElement.style.left = `${rect.left + scrollLeft}px`;
+        this.contentElement.style.width = `${rect.width}px`;
+        this.contentElement.innerHTML = `
+      <div class="medos-select-viewport">
+        ${this.options
+            .map((option) => `
+          <div
+            class="medos-select-item ${this.selectedValue === option.value
+            ? "medos-select-item-selected"
+            : ""} ${option.disabled ? "medos-select-item-disabled" : ""}"
+            role="option"
+            aria-selected="${this.selectedValue === option.value}"
+            data-value="${this.escapeHtml(option.value)}"
+            data-label="${this.escapeHtml(option.label)}"
+            ${option.disabled ? 'data-disabled="true"' : ""}
+            tabindex="${option.disabled ? "-1" : "0"}"
+          >
+            ${this.selectedValue === option.value
+            ? `
+              <span class="medos-select-item-indicator">
+                ${VanillaIcons.check(14)}
+              </span>
+            `
+            : ""}
+            <span class="medos-select-item-text">${this.escapeHtml(option.label)}</span>
+          </div>
+        `)
+            .join("")}
+      </div>
+    `;
+        document.body.appendChild(this.contentElement);
+    }
+    removePortal() {
+        this.contentElement?.remove();
+        this.contentElement = null;
+    }
+    updatePosition() {
+        if (!this.isOpen || !this.triggerElement || !this.contentElement)
+            return;
+        const rect = this.triggerElement.getBoundingClientRect();
+        const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+        const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+        this.contentElement.style.top = `${rect.bottom + scrollTop + 4}px`;
+        this.contentElement.style.left = `${rect.left + scrollLeft}px`;
+        this.contentElement.style.width = `${rect.width}px`;
+    }
+    attachPortalEvents() {
+        this.handleDocumentClick = (e) => {
+            const target = e.target;
+            if (this.isOpen &&
+                this.contentElement &&
+                !this.contentElement.contains(target) &&
+                this.triggerElement &&
+                !this.triggerElement.contains(target)) {
+                this.close();
+            }
+        };
+        document.addEventListener("mousedown", this.handleDocumentClick);
+        this.handleWindowResize = () => this.updatePosition();
+        this.handleWindowScroll = () => this.updatePosition();
+        window.addEventListener("resize", this.handleWindowResize);
+        window.addEventListener("scroll", this.handleWindowScroll, true);
+        if (this.contentElement) {
+            this.contentElement.addEventListener("click", (e) => {
+                const target = e.target;
+                const item = target.closest(".medos-select-item");
+                if (item && !item.dataset.disabled) {
+                    const value = item.dataset.value || "";
+                    const label = item.dataset.label || "";
+                    this.selectValue(value, label);
+                }
+            });
+            this.contentElement.addEventListener("keydown", (e) => {
+                if (e.key === "Escape") {
+                    this.close();
+                }
+                else if (e.key === "ArrowDown") {
+                    e.preventDefault();
+                    this.focusNextItem(1);
+                }
+                else if (e.key === "ArrowUp") {
+                    e.preventDefault();
+                    this.focusNextItem(-1);
+                }
+                else if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    const focused = document.activeElement;
+                    if (focused &&
+                        focused.classList.contains("medos-select-item") &&
+                        !focused.dataset.disabled) {
+                        const value = focused.dataset.value || "";
+                        const label = focused.dataset.label || "";
+                        this.selectValue(value, label);
+                    }
+                }
+            });
+        }
+    }
+    detachPortalEvents() {
+        if (this.handleDocumentClick) {
+            document.removeEventListener("mousedown", this.handleDocumentClick);
+            this.handleDocumentClick = null;
+        }
+        if (this.handleWindowResize) {
+            window.removeEventListener("resize", this.handleWindowResize);
+            this.handleWindowResize = null;
+        }
+        if (this.handleWindowScroll) {
+            window.removeEventListener("scroll", this.handleWindowScroll, true);
+            this.handleWindowScroll = null;
+        }
+    }
+    focusNextItem(direction) {
+        if (!this.contentElement)
+            return;
+        const items = Array.from(this.contentElement.querySelectorAll(".medos-select-item:not(.medos-select-item-disabled)"));
+        if (items.length === 0)
+            return;
+        const currentFocused = document.activeElement;
+        let currentIndex = items.indexOf(currentFocused);
+        let nextIndex = currentIndex + direction;
+        if (nextIndex < 0)
+            nextIndex = items.length - 1;
+        if (nextIndex >= items.length)
+            nextIndex = 0;
+        items[nextIndex]?.focus();
+    }
+    selectValue(value, label) {
+        this.selectedValue = value;
+        this.selectedLabel = label;
+        this.close();
+        this.renderTrigger();
+        this.config.onValueChange?.(value);
+    }
+    setValue(value) {
+        const option = this.options.find((o) => o.value === value);
+        if (option) {
+            this.selectedValue = option.value;
+            this.selectedLabel = option.label;
+            this.renderTrigger();
+        }
+    }
+    getValue() {
+        return this.selectedValue;
+    }
+    setOptions(options) {
+        this.options = options;
+        if (!options.some((o) => o.value === this.selectedValue)) {
+            this.selectedValue = "";
+            this.selectedLabel = "";
+        }
+        this.renderTrigger();
+    }
+    setDisabled(disabled) {
+        this.config.disabled = disabled;
+        this.renderTrigger();
+        this.attachTriggerEvents();
+    }
+    setError(error) {
+        this.config.error = error;
+        this.renderTrigger();
+    }
+    destroy() {
+        this.close();
+        this.container.innerHTML = "";
+    }
+    escapeHtml(text) {
+        const div = document.createElement("div");
+        div.textContent = text;
+        return div.innerHTML;
+    }
+}
+export function upgradeNativeSelect(selectElement, config = {}) {
+    const options = Array.from(selectElement.options).map((opt) => ({
+        value: opt.value,
+        label: opt.text,
+        disabled: opt.disabled,
+    }));
+    const container = document.createElement("div");
+    selectElement.parentNode?.insertBefore(container, selectElement);
+    selectElement.style.display = "none";
+    const vanillaSelect = new VanillaSelect(container, options, {
+        ...config,
+        placeholder: selectElement.options[0]?.text || "Select...",
+        disabled: selectElement.disabled,
+        onValueChange: (value) => {
+            selectElement.value = value;
+            selectElement.dispatchEvent(new Event("change", { bubbles: true }));
+            config.onValueChange?.(value);
+        },
+    });
+    if (selectElement.value) {
+        vanillaSelect.setValue(selectElement.value);
+    }
+    return vanillaSelect;
+}
+export default VanillaSelect;

package/dist/vanilla/components/index.d.ts

@@ -0,0 +1,3 @@
+export { VanillaIcons } from "./VanillaIcons";
+export { VanillaSelect, upgradeNativeSelect, type SelectOption, type VanillaSelectOptions, } from "./VanillaSelect";
+export { VanillaCalendar, type VanillaCalendarOptions, } from "./VanillaCalendar";

package/dist/vanilla/components/index.js

@@ -0,0 +1,3 @@
+export { VanillaIcons } from "./VanillaIcons";
+export { VanillaSelect, upgradeNativeSelect, } from "./VanillaSelect";
+export { VanillaCalendar, } from "./VanillaCalendar";

package/dist/vanilla/components/theme-injector.d.ts

@@ -0,0 +1 @@
+export declare function injectThemedStyles(): void;