@plusui/library 0.1.0

package/dist/components/toggle/toggle.style.js

@@ -0,0 +1,249 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const toggleStyle = ce({
+    slots: {
+        base: [
+            'plus-toggle',
+            'antialiased font-sans flex flex-col items-start justify-start w-full relative',
+        ],
+        label: [
+        // Style comes from labelStyle import in component
+        ],
+        control: [
+            'flex flex-row items-center justify-start group/base cursor-pointer text-(--d-text)',
+        ],
+        inputElement: ['sr-only'],
+        switch: [
+            'relative rounded-full box-content border border-(--d-border)',
+            'bg-(--d-switch-bg)',
+            'flex-shrink-0',
+            'transition-colors duration-300',
+            'group-hover/base:bg-(--d-switch-bg-hover)',
+            'group-active/base:bg-(--d-switch-bg-active)',
+            'overflow-hidden',
+        ],
+        text: ['text-(--d-text)'],
+        dot: [
+            'absolute rounded-full bg-(--d-dot-bg) transform',
+            'flex items-center justify-center',
+            'text-(--d-dot-text)',
+            'transition-all duration-300',
+            'group-hover/base:shadow-sm',
+        ],
+        icon: [''],
+        caption: [
+        // Style comes from captionStyle import in component
+        ],
+    },
+    variants: {
+        focus: {
+            true: {
+                switch: 'ring-default z-[1]',
+            },
+        },
+        error: {
+            true: {},
+        },
+        checked: {
+            true: {
+                dot: ['origin-left'],
+            },
+            false: {
+                dot: ['origin-right'],
+            },
+        },
+        readonly: {
+            true: {
+                control: ['cursor-default'],
+                switch: [
+                    'group-hover/base:!bg-(--d-switch-bg)',
+                    'group-active/base:!bg-(--d-switch-bg)',
+                ],
+                dot: [
+                    'group-hover/base:!shadow-none',
+                    'group-active/base:!transform-none',
+                ],
+            },
+        },
+        disabled: {
+            true: {
+                control: [
+                    'cursor-not-allowed opacity-60',
+                ],
+                switch: [
+                    'group-hover/base:!bg-(--d-switch-bg)',
+                    'group-active/base:!bg-(--d-switch-bg)',
+                ],
+                dot: [
+                    'group-hover/base:!shadow-none',
+                    'group-active/base:!transform-none',
+                ],
+            },
+        },
+        animation: {
+            default: {
+                dot: [
+                    'transition-all duration-300 ease-in-out',
+                ],
+            },
+            bounce: {
+                dot: [
+                    'transition-all duration-400 ease-bounce',
+                ],
+            },
+            smooth: {
+                dot: [
+                    'transition-all duration-500 ease-in-out',
+                ],
+            },
+        },
+        size: {
+            sm: {
+                base: 'text-sm gap-0.5',
+                label: 'text-sm',
+                control: 'gap-1.5',
+                switch: 'w-10 h-5',
+                dot: 'top-0.5 left-0.5 w-4 h-4 text-[6px] leading-[6px]',
+                text: 'text-sm',
+                caption: 'text-xs',
+            },
+            md: {
+                base: 'text-base gap-1',
+                label: 'text-base',
+                control: 'gap-2',
+                switch: 'w-13 h-6.5',
+                dot: 'top-1 left-1 w-4.5 h-4.5 text-[8px] leading-[8px]',
+                text: 'text-base',
+                caption: 'text-sm',
+            },
+            lg: {
+                base: 'text-lg gap-1.5',
+                label: 'text-lg',
+                control: 'gap-2.5',
+                switch: 'w-14 h-7',
+                dot: 'top-1 left-1 w-5 h-5 text-[10px] leading-[10px]',
+                text: 'text-lg',
+                caption: 'text-base',
+            },
+        },
+        fullWidth: {
+            true: {
+                base: 'max-w-none',
+            },
+            false: {
+                base: 'max-w-[256px]',
+            },
+        },
+    },
+    compoundVariants: [
+        // Checked + Size combinations (for dot positioning)
+        {
+            checked: true,
+            size: 'sm',
+            class: {
+                dot: [
+                    'translate-x-[calc(theme(width.10)-theme(width.5))]',
+                ],
+            },
+        },
+        {
+            checked: true,
+            size: 'md',
+            class: {
+                dot: [
+                    'translate-x-[calc(var(--spacing)*13-var(--spacing)*6.5)]',
+                ],
+            },
+        },
+        {
+            checked: true,
+            size: 'lg',
+            class: {
+                dot: [
+                    'translate-x-[calc(theme(width.14)-theme(width.7))]',
+                ],
+            },
+        },
+        // Interactive states for dot (press animation)
+        // FALSE state (dot expands to the right)
+        {
+            disabled: false,
+            readonly: false,
+            checked: false,
+            size: 'sm',
+            class: {
+                dot: [
+                    'group-active/base:w-5 group-active/base:h-4',
+                ],
+            },
+        },
+        {
+            disabled: false,
+            readonly: false,
+            checked: false,
+            size: 'md',
+            class: {
+                dot: [
+                    'group-active/base:w-6 group-active/base:h-4.5',
+                ],
+            },
+        },
+        {
+            disabled: false,
+            readonly: false,
+            checked: false,
+            size: 'lg',
+            class: {
+                dot: [
+                    'group-active/base:w-6.5 group-active/base:h-5',
+                ],
+            },
+        },
+        // TRUE state (dot expands to the left)
+        {
+            disabled: false,
+            readonly: false,
+            checked: true,
+            size: 'sm',
+            class: {
+                dot: [
+                    'group-active/base:w-5 group-active/base:h-4 group-active/base:-ml-1',
+                ],
+            },
+        },
+        {
+            disabled: false,
+            readonly: false,
+            checked: true,
+            size: 'md',
+            class: {
+                dot: [
+                    'group-active/base:w-6 group-active/base:h-4.5 group-active/base:-ml-1.5',
+                ],
+            },
+        },
+        {
+            disabled: false,
+            readonly: false,
+            checked: true,
+            size: 'lg',
+            class: {
+                dot: [
+                    'group-active/base:w-6.5 group-active/base:h-5 group-active/base:-ml-1.5',
+                ],
+            },
+        },
+    ],
+    defaultVariants: {
+        focus: false,
+        error: false,
+        disabled: false,
+        readonly: false,
+        checked: false,
+        size: 'md',
+        fullWidth: false,
+        animation: 'default',
+    },
+});
+
+export { toggleStyle };

package/dist/components/toggle/toggle.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.style.js","sourceRoot":"","sources":["../../../src/components/toggle/toggle.style.ts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+export * from './tooltip.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/tooltip/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/index.ts"],"names":[],"mappings":"AAEA,cAAc,cAAc,CAAC"}

package/dist/components/tooltip/index.js

@@ -0,0 +1,16 @@
+import PlusTooltip from './tooltip.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../../state-D1d5Sfj8.js';
+import '../../query-assigned-elements-B8Evmg7O.js';
+import '../../base-Cl6v8-BZ.js';
+import '../../floating-ui.dom-OBaMlALa.js';
+import '../base/tailwind-base.js';
+import '../../styles/global.js';
+import '../../style-inject.es-tgCJW-Cu.js';
+import './tooltip.style.js';
+import '../../index-B9iart53.js';
+
+customElements.define('plus-tooltip', PlusTooltip);
+
+export { PlusTooltip };

package/dist/components/tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,cAAc,cAAc,CAAC;AAE7B,cAAc,CAAC,MAAM,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC"}

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,104 @@
+import Tailwind from '../base/tailwind-base';
+/**
+ * @tag plus-tooltip
+ * @summary Tooltip component that displays additional information on hover or click.
+ *
+ * @slot - The target element that triggers the tooltip
+ *
+ * @csspart tooltip - The tooltip container element
+ * @csspart arrow - The tooltip arrow indicator
+ *
+ * @event plus-tooltip-show - Emitted when the tooltip is shown
+ * @event plus-tooltip-hide - Emitted when the tooltip is hidden
+ *
+ * @example
+ * ```html
+ * <plus-tooltip content="This is a tooltip">
+ *   <plus-button>Hover me</plus-button>
+ * </plus-tooltip>
+ * ```
+ */
+declare enum TooltipTrigger {
+    Hover = "hover",
+    Click = "click"
+}
+declare enum TooltipOrientation {
+    Top = "top",
+    Bottom = "bottom",
+    Left = "left",
+    Right = "right"
+}
+export default class PlusTooltip extends Tailwind {
+    slots: Array<HTMLElement>;
+    /**
+     * Sets the size of the tooltip.
+     * - sm: Small size
+     * - md: Medium size
+     * - lg: Large size
+     * @default 'md'
+     */
+    size: 'sm' | 'md' | 'lg';
+    /**
+     * The text content displayed inside the tooltip.
+     */
+    message: string;
+    /**
+     * The trigger event for the tooltip.
+     * - hover: Tooltip appears on hover.
+     * - click: Tooltip appears on click.
+     * @default 'hover'
+     */
+    trigger: TooltipTrigger;
+    /**
+     * The tooltip placement relative to the target element.
+     * - top, bottom, left, right
+     * @default 'top'
+     */
+    orientation: TooltipOrientation;
+    hideDelay: number;
+    private isVisible;
+    private targetElement?;
+    private cleanup?;
+    private hideTimeout?;
+    /**
+     * Retrieves the tooltip element from the DOM.
+     */
+    private getTooltip;
+    /**
+     * Updates the tooltip position dynamically.
+     */
+    private updatePosition;
+    /**
+     * Handles tooltip appearance when the mouse enters the target element.
+     */
+    private handleMouseEnter;
+    /**
+     * Handles tooltip disappearance when the mouse leaves the target element.
+     */
+    private handleMouseLeave;
+    /**
+     * Handles tooltip toggle when the target element is clicked.
+     */
+    private handleClick;
+    private handleKeyDown;
+    /**
+     * Cleans up auto-update behavior to improve performance.
+     */
+    private cleanupAutoUpdate;
+    /**
+     * Removes event listeners and resets tooltip state.
+     */
+    private _cleanupTarget;
+    /**
+     * Handles changes to the slotted content and reattaches event listeners.
+     */
+    private handleSlotChange;
+    /**
+     * Attaches event listeners based on the trigger type.
+     */
+    private _setupTooltip;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export { PlusTooltip };
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/components/tooltip/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.ts"],"names":[],"mappings":"AAUA,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAG7C;;;;;;;;;;;;;;;;;;GAkBG;AACH,aAAK,cAAc;IACjB,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,aAAK,kBAAkB;IACrB,GAAG,QAAQ;IACX,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,QAAQ;IAE/C,KAAK,EAAG,KAAK,CAAC,WAAW,CAAC,CAAC;IAE3B;;;;;;OAMG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IAEH,OAAO,SAAM;IAEb;;;;;OAKG;IAEH,OAAO,EAAE,cAAc,CAAwB;IAE/C;;;;OAIG;IAEH,WAAW,EAAE,kBAAkB,CAA0B;IAGzD,SAAS,SAAK;IAGd,OAAO,CAAC,SAAS,CAAS;IAE1B,OAAO,CAAC,aAAa,CAAC,CAAc;IACpC,OAAO,CAAC,OAAO,CAAC,CAAa;IAC7B,OAAO,CAAC,WAAW,CAAC,CAAS;IAE7B;;OAEG;IACH,OAAO,CAAC,UAAU;IAIlB;;OAEG;IACH,OAAO,CAAC,cAAc,CAkCpB;IAEF;;OAEG;IACH,OAAO,CAAC,gBAAgB,CAYtB;IAEF;;OAEG;IACH,OAAO,CAAC,gBAAgB,CAUtB;IAEF;;OAEG;IACH,OAAO,CAAC,WAAW,CAejB;IAEF,OAAO,CAAC,aAAa,CAKnB;IAEF;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAOzB;;OAEG;IACH,OAAO,CAAC,cAAc;IAiBtB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IASxB;;OAEG;IACH,OAAO,CAAC,aAAa;IAgBZ,oBAAoB;IAQpB,MAAM;CAkBhB;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,267 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { x } from '../../lit-element-ByzbtpGk.js';
+import { r } from '../../state-D1d5Sfj8.js';
+import { o } from '../../query-assigned-elements-B8Evmg7O.js';
+import { c as computePosition, o as offset, s as shift, f as flip, a as arrow, b as autoUpdate } from '../../floating-ui.dom-OBaMlALa.js';
+import Tailwind from '../base/tailwind-base.js';
+import { tooltipStyle } from './tooltip.style.js';
+import '../../base-Cl6v8-BZ.js';
+import '../../styles/global.js';
+import '../../style-inject.es-tgCJW-Cu.js';
+import '../../index-B9iart53.js';
+
+/**
+ * @tag plus-tooltip
+ * @summary Tooltip component that displays additional information on hover or click.
+ *
+ * @slot - The target element that triggers the tooltip
+ *
+ * @csspart tooltip - The tooltip container element
+ * @csspart arrow - The tooltip arrow indicator
+ *
+ * @event plus-tooltip-show - Emitted when the tooltip is shown
+ * @event plus-tooltip-hide - Emitted when the tooltip is hidden
+ *
+ * @example
+ * ```html
+ * <plus-tooltip content="This is a tooltip">
+ *   <plus-button>Hover me</plus-button>
+ * </plus-tooltip>
+ * ```
+ */
+var TooltipTrigger;
+(function (TooltipTrigger) {
+    TooltipTrigger["Hover"] = "hover";
+    TooltipTrigger["Click"] = "click";
+})(TooltipTrigger || (TooltipTrigger = {}));
+var TooltipOrientation;
+(function (TooltipOrientation) {
+    TooltipOrientation["Top"] = "top";
+    TooltipOrientation["Bottom"] = "bottom";
+    TooltipOrientation["Left"] = "left";
+    TooltipOrientation["Right"] = "right";
+})(TooltipOrientation || (TooltipOrientation = {}));
+class PlusTooltip extends Tailwind {
+    constructor() {
+        super(...arguments);
+        /**
+         * Sets the size of the tooltip.
+         * - sm: Small size
+         * - md: Medium size
+         * - lg: Large size
+         * @default 'md'
+         */
+        this.size = 'md';
+        /**
+         * The text content displayed inside the tooltip.
+         */
+        this.message = '';
+        /**
+         * The trigger event for the tooltip.
+         * - hover: Tooltip appears on hover.
+         * - click: Tooltip appears on click.
+         * @default 'hover'
+         */
+        this.trigger = TooltipTrigger.Hover;
+        /**
+         * The tooltip placement relative to the target element.
+         * - top, bottom, left, right
+         * @default 'top'
+         */
+        this.orientation = TooltipOrientation.Top;
+        this.hideDelay = 0;
+        this.isVisible = false;
+        /**
+         * Updates the tooltip position dynamically.
+         */
+        this.updatePosition = () => {
+            const tooltip = this.getTooltip();
+            if (!tooltip || !this.targetElement)
+                return;
+            const arrowElement = tooltip.querySelector('.arrow');
+            if (!arrowElement)
+                return;
+            computePosition(this.targetElement, tooltip, {
+                placement: this.orientation,
+                middleware: [
+                    offset(8),
+                    shift(),
+                    flip(),
+                    arrow({ element: arrowElement, padding: 4 }),
+                ],
+            }).then(({ x, y, middlewareData, placement }) => {
+                if (!tooltip)
+                    return;
+                Object.assign(tooltip.style, { left: `${x}px`, top: `${y}px` });
+                const { x: arrowX, y: arrowY } = middlewareData.arrow || {};
+                const staticSide = {
+                    top: 'bottom',
+                    right: 'left',
+                    bottom: 'top',
+                    left: 'right',
+                }[placement.split('-')[0]];
+                Object.assign(arrowElement.style, {
+                    left: arrowX != null ? `${arrowX}px` : '',
+                    top: arrowY != null ? `${arrowY}px` : '',
+                    [staticSide]: '-4px',
+                });
+            });
+        };
+        /**
+         * Handles tooltip appearance when the mouse enters the target element.
+         */
+        this.handleMouseEnter = () => {
+            if (this.hideTimeout) {
+                window.clearTimeout(this.hideTimeout);
+                this.hideTimeout = undefined;
+            }
+            const tooltip = this.getTooltip();
+            if (!tooltip || !this.targetElement)
+                return;
+            this.isVisible = true;
+            this.updatePosition();
+            this.cleanup = autoUpdate(this.targetElement, tooltip, this.updatePosition);
+        };
+        /**
+         * Handles tooltip disappearance when the mouse leaves the target element.
+         */
+        this.handleMouseLeave = () => {
+            if (this.hideDelay > 0) {
+                this.hideTimeout = window.setTimeout(() => {
+                    this.isVisible = false;
+                    this.cleanupAutoUpdate();
+                }, this.hideDelay);
+            }
+            else {
+                this.isVisible = false;
+                this.cleanupAutoUpdate();
+            }
+        };
+        /**
+         * Handles tooltip toggle when the target element is clicked.
+         */
+        this.handleClick = () => {
+            const tooltip = this.getTooltip();
+            if (!tooltip || !this.targetElement)
+                return;
+            this.isVisible = !this.isVisible;
+            if (this.isVisible) {
+                this.updatePosition();
+                this.cleanup = autoUpdate(this.targetElement, tooltip, this.updatePosition);
+            }
+            else {
+                this.cleanupAutoUpdate();
+            }
+        };
+        this.handleKeyDown = (event) => {
+            if (event.key === 'Escape' && this.isVisible) {
+                this.isVisible = false;
+                this.cleanupAutoUpdate();
+            }
+        };
+    }
+    /**
+     * Retrieves the tooltip element from the DOM.
+     */
+    getTooltip() {
+        return this.shadowRoot?.querySelector('.tooltip') || null;
+    }
+    /**
+     * Cleans up auto-update behavior to improve performance.
+     */
+    cleanupAutoUpdate() {
+        if (this.cleanup) {
+            this.cleanup();
+            this.cleanup = undefined;
+        }
+    }
+    /**
+     * Removes event listeners and resets tooltip state.
+     */
+    _cleanupTarget() {
+        if (this.targetElement) {
+            this.targetElement.removeEventListener('mouseenter', this.handleMouseEnter);
+            this.targetElement.removeEventListener('mouseleave', this.handleMouseLeave);
+            this.targetElement.removeEventListener('click', this.handleClick);
+            this.targetElement.removeEventListener('keydown', this.handleKeyDown);
+        }
+        this.cleanupAutoUpdate();
+        this.isVisible = false;
+    }
+    /**
+     * Handles changes to the slotted content and reattaches event listeners.
+     */
+    handleSlotChange() {
+        const newTarget = this.slots[0];
+        if (newTarget && newTarget !== this.targetElement) {
+            this._cleanupTarget();
+            this.targetElement = newTarget;
+            this._setupTooltip();
+        }
+    }
+    /**
+     * Attaches event listeners based on the trigger type.
+     */
+    _setupTooltip() {
+        if (!this.targetElement)
+            return;
+        this._cleanupTarget();
+        if (this.trigger === TooltipTrigger.Hover) {
+            this.targetElement.addEventListener('mouseenter', this.handleMouseEnter);
+            this.targetElement.addEventListener('mouseleave', this.handleMouseLeave);
+        }
+        else if (this.trigger === TooltipTrigger.Click) {
+            this.targetElement.addEventListener('click', this.handleClick);
+        }
+        this.targetElement.addEventListener('keydown', this.handleKeyDown);
+        this.targetElement.setAttribute('aria-describedby', 'tooltip-content');
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._cleanupTarget();
+        if (this.hideTimeout) {
+            window.clearTimeout(this.hideTimeout);
+        }
+    }
+    render() {
+        const { base, arrow } = tooltipStyle({
+            size: this.size,
+            isVisible: this.isVisible,
+        });
+        return x `
+      <slot @slotchange=${this.handleSlotChange}></slot>
+      <div
+        role="tooltip"
+        id="tooltip-content"
+        aria-hidden="${!this.isVisible}"
+        class="${base()}"
+      >
+        ${this.message}
+        <div class="${arrow()}" aria-label="Tooltip arrow"></div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    o({ flatten: true })
+], PlusTooltip.prototype, "slots", void 0);
+__decorate([
+    n({ type: String })
+], PlusTooltip.prototype, "size", void 0);
+__decorate([
+    n({ type: String })
+], PlusTooltip.prototype, "message", void 0);
+__decorate([
+    n({ type: String })
+], PlusTooltip.prototype, "trigger", void 0);
+__decorate([
+    n({ type: String })
+], PlusTooltip.prototype, "orientation", void 0);
+__decorate([
+    n({ type: Number })
+], PlusTooltip.prototype, "hideDelay", void 0);
+__decorate([
+    r()
+], PlusTooltip.prototype, "isVisible", void 0);
+
+export { PlusTooltip, PlusTooltip as default };

package/dist/components/tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/components/tooltip/tooltip.ts"],"names":[],"mappings":"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"}