@plusui/library 0.1.0

package/dist/components/popconfirm/popconfirm.style.d.ts

@@ -0,0 +1,417 @@
+export declare const popconfirmStyle: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            host: string;
+            headerLeft: string;
+            headerRight: string;
+            content: string;
+            footer: string;
+            footerActions: string;
+        };
+        md: {
+            host: string;
+            headerLeft: string;
+            headerRight: string;
+            content: string;
+            footer: string;
+            footerActions: string;
+        };
+        lg: {
+            host: string;
+            headerLeft: string;
+            headerRight: string;
+            content: string;
+            footer: string;
+            footerActions: string;
+        };
+    };
+    isVisible: {
+        true: {
+            host: string;
+        };
+        false: {
+            host: string;
+        };
+    };
+    status: {
+        success: {
+            headerWrapper: string;
+        };
+        warning: {
+            headerWrapper: string;
+        };
+        danger: {
+            headerWrapper: string;
+        };
+        primary: {
+            headerWrapper: string;
+        };
+        default: {
+            headerWrapper: string;
+        };
+        info: {
+            headerWrapper: string;
+        };
+    };
+}, {
+    host: string;
+    arrow: string;
+    headerWrapper: string;
+    headerLeft: string;
+    title: string;
+    headerRight: string;
+    content: string;
+    footer: string;
+    footerActions: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        sm: {
+            host: string;
+            headerLeft: string;
+            headerRight: string;
+            content: string;
+            footer: string;
+            footerActions: string;
+        };
+        md: {
+            host: string;
+            headerLeft: string;
+            headerRight: string;
+            content: string;
+            footer: string;
+            footerActions: string;
+        };
+        lg: {
+            host: string;
+            headerLeft: string;
+            headerRight: string;
+            content: string;
+            footer: string;
+            footerActions: string;
+        };
+    };
+    isVisible: {
+        true: {
+            host: string;
+        };
+        false: {
+            host: string;
+        };
+    };
+    status: {
+        success: {
+            headerWrapper: string;
+        };
+        warning: {
+            headerWrapper: string;
+        };
+        danger: {
+            headerWrapper: string;
+        };
+        primary: {
+            headerWrapper: string;
+        };
+        default: {
+            headerWrapper: string;
+        };
+        info: {
+            headerWrapper: string;
+        };
+    };
+}, {
+    size: {
+        sm: {
+            host: string;
+            headerLeft: string;
+            headerRight: string;
+            content: string;
+            footer: string;
+            footerActions: string;
+        };
+        md: {
+            host: string;
+            headerLeft: string;
+            headerRight: string;
+            content: string;
+            footer: string;
+            footerActions: string;
+        };
+        lg: {
+            host: string;
+            headerLeft: string;
+            headerRight: string;
+            content: string;
+            footer: string;
+            footerActions: string;
+        };
+    };
+    isVisible: {
+        true: {
+            host: string;
+        };
+        false: {
+            host: string;
+        };
+    };
+    status: {
+        success: {
+            headerWrapper: string;
+        };
+        warning: {
+            headerWrapper: string;
+        };
+        danger: {
+            headerWrapper: string;
+        };
+        primary: {
+            headerWrapper: string;
+        };
+        default: {
+            headerWrapper: string;
+        };
+        info: {
+            headerWrapper: string;
+        };
+    };
+}>, {
+    size: {
+        sm: {
+            host: string;
+            headerLeft: string;
+            headerRight: string;
+            content: string;
+            footer: string;
+            footerActions: string;
+        };
+        md: {
+            host: string;
+            headerLeft: string;
+            headerRight: string;
+            content: string;
+            footer: string;
+            footerActions: string;
+        };
+        lg: {
+            host: string;
+            headerLeft: string;
+            headerRight: string;
+            content: string;
+            footer: string;
+            footerActions: string;
+        };
+    };
+    isVisible: {
+        true: {
+            host: string;
+        };
+        false: {
+            host: string;
+        };
+    };
+    status: {
+        success: {
+            headerWrapper: string;
+        };
+        warning: {
+            headerWrapper: string;
+        };
+        danger: {
+            headerWrapper: string;
+        };
+        primary: {
+            headerWrapper: string;
+        };
+        default: {
+            headerWrapper: string;
+        };
+        info: {
+            headerWrapper: string;
+        };
+    };
+}, {
+    host: string;
+    arrow: string;
+    headerWrapper: string;
+    headerLeft: string;
+    title: string;
+    headerRight: string;
+    content: string;
+    footer: string;
+    footerActions: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            host: string;
+            headerLeft: string;
+            headerRight: string;
+            content: string;
+            footer: string;
+            footerActions: string;
+        };
+        md: {
+            host: string;
+            headerLeft: string;
+            headerRight: string;
+            content: string;
+            footer: string;
+            footerActions: string;
+        };
+        lg: {
+            host: string;
+            headerLeft: string;
+            headerRight: string;
+            content: string;
+            footer: string;
+            footerActions: string;
+        };
+    };
+    isVisible: {
+        true: {
+            host: string;
+        };
+        false: {
+            host: string;
+        };
+    };
+    status: {
+        success: {
+            headerWrapper: string;
+        };
+        warning: {
+            headerWrapper: string;
+        };
+        danger: {
+            headerWrapper: string;
+        };
+        primary: {
+            headerWrapper: string;
+        };
+        default: {
+            headerWrapper: string;
+        };
+        info: {
+            headerWrapper: string;
+        };
+    };
+}, {
+    host: string;
+    arrow: string;
+    headerWrapper: string;
+    headerLeft: string;
+    title: string;
+    headerRight: string;
+    content: string;
+    footer: string;
+    footerActions: string;
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        sm: {
+            host: string;
+            headerLeft: string;
+            headerRight: string;
+            content: string;
+            footer: string;
+            footerActions: string;
+        };
+        md: {
+            host: string;
+            headerLeft: string;
+            headerRight: string;
+            content: string;
+            footer: string;
+            footerActions: string;
+        };
+        lg: {
+            host: string;
+            headerLeft: string;
+            headerRight: string;
+            content: string;
+            footer: string;
+            footerActions: string;
+        };
+    };
+    isVisible: {
+        true: {
+            host: string;
+        };
+        false: {
+            host: string;
+        };
+    };
+    status: {
+        success: {
+            headerWrapper: string;
+        };
+        warning: {
+            headerWrapper: string;
+        };
+        danger: {
+            headerWrapper: string;
+        };
+        primary: {
+            headerWrapper: string;
+        };
+        default: {
+            headerWrapper: string;
+        };
+        info: {
+            headerWrapper: string;
+        };
+    };
+}, {
+    size: {
+        sm: {
+            host: string;
+            headerLeft: string;
+            headerRight: string;
+            content: string;
+            footer: string;
+            footerActions: string;
+        };
+        md: {
+            host: string;
+            headerLeft: string;
+            headerRight: string;
+            content: string;
+            footer: string;
+            footerActions: string;
+        };
+        lg: {
+            host: string;
+            headerLeft: string;
+            headerRight: string;
+            content: string;
+            footer: string;
+            footerActions: string;
+        };
+    };
+    isVisible: {
+        true: {
+            host: string;
+        };
+        false: {
+            host: string;
+        };
+    };
+    status: {
+        success: {
+            headerWrapper: string;
+        };
+        warning: {
+            headerWrapper: string;
+        };
+        danger: {
+            headerWrapper: string;
+        };
+        primary: {
+            headerWrapper: string;
+        };
+        default: {
+            headerWrapper: string;
+        };
+        info: {
+            headerWrapper: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+//# sourceMappingURL=popconfirm.style.d.ts.map

package/dist/components/popconfirm/popconfirm.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popconfirm.style.d.ts","sourceRoot":"","sources":["../../../src/components/popconfirm/popconfirm.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCA+E1B,CAAC"}

package/dist/components/popconfirm/popconfirm.style.js

@@ -0,0 +1,78 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const popconfirmStyle = ce({
+    slots: {
+        host: 'plus-ui-element popconfirm fixed z-[1000] shadow-md bg-color-surface rounded-lg flex-col transition-all duration-200 ease-in-out transform opacity-0 scale-95',
+        arrow: 'arrow absolute size-2 rotate-45 bg-inherit',
+        headerWrapper: 'header-wrapper flex flex-row justify-between',
+        headerLeft: 'left-side flex flex-row items-center text-inherit',
+        title: 'header font-semibold text-color-default',
+        headerRight: 'right-side cursor-pointer text-color-default',
+        content: 'content-area',
+        footer: 'footer',
+        footerActions: 'footer-actions flex flex-row justify-end',
+    },
+    variants: {
+        size: {
+            sm: {
+                host: 'w-60 p-3 gap-3',
+                headerLeft: 'text-md gap-1.5',
+                headerRight: 'text-md',
+                content: 'text-sm',
+                footer: 'text-sm',
+                footerActions: 'gap-1.5',
+            },
+            md: {
+                host: 'w-64 p-4 gap-4',
+                headerLeft: 'text-lg gap-2',
+                headerRight: 'text-lg',
+                content: 'text-base',
+                footer: 'text-base',
+                footerActions: 'gap-2',
+            },
+            lg: {
+                host: 'w-72 p-4 gap-4',
+                headerLeft: 'text-xl gap-3',
+                headerRight: 'text-xl',
+                content: 'text-lg',
+                footer: 'text-lg',
+                footerActions: 'gap-3',
+            },
+        },
+        isVisible: {
+            true: {
+                host: 'flex opacity-100 scale-100',
+            },
+            false: {
+                host: 'opacity-0 scale-95 pointer-events-none hidden',
+            },
+        },
+        status: {
+            success: {
+                headerWrapper: 'text-color-success',
+            },
+            warning: {
+                headerWrapper: 'text-color-warning',
+            },
+            danger: {
+                headerWrapper: 'text-color-danger',
+            },
+            primary: {
+                headerWrapper: 'text-color-primary',
+            },
+            default: {
+                headerWrapper: 'text-color-default',
+            },
+            info: {
+                headerWrapper: 'text-color-info',
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        isVisible: false,
+        status: 'default',
+    },
+});
+
+export { popconfirmStyle };

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

@@ -0,0 +1 @@
+{"version":3,"file":"popconfirm.style.js","sourceRoot":"","sources":["../../../src/components/popconfirm/popconfirm.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,eAAe,GAAG,EAAE,CAAC;IAChC,KAAK,EAAE;QACL,IAAI,EAAE,+JAA+J;QACrK,KAAK,EACH,4CAA4C;QAC9C,aAAa,EACX,8CAA8C;QAChD,UAAU,EACR,mDAAmD;QACrD,KAAK,EACH,yCAAyC;QAC3C,WAAW,EACT,8CAA8C;QAChD,OAAO,EAAE,cAAc;QACvB,MAAM,EAAE,QAAQ;QAChB,aAAa,EACX,0CAA0C;KAC7C;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE;gBACF,IAAI,EAAE,gBAAgB;gBACtB,UAAU,EAAE,iBAAiB;gBAC7B,WAAW,EAAE,SAAS;gBACtB,OAAO,EAAE,SAAS;gBAClB,MAAM,EAAE,SAAS;gBACjB,aAAa,EAAE,SAAS;aACzB;YACD,EAAE,EAAE;gBACF,IAAI,EAAE,gBAAgB;gBACtB,UAAU,EAAE,eAAe;gBAC3B,WAAW,EAAE,SAAS;gBACtB,OAAO,EAAE,WAAW;gBACpB,MAAM,EAAE,WAAW;gBACnB,aAAa,EAAE,OAAO;aACvB;YACD,EAAE,EAAE;gBACF,IAAI,EAAE,gBAAgB;gBACtB,UAAU,EAAE,eAAe;gBAC3B,WAAW,EAAE,SAAS;gBACtB,OAAO,EAAE,SAAS;gBAClB,MAAM,EAAE,SAAS;gBACjB,aAAa,EAAE,OAAO;aACvB;SACF;QACD,SAAS,EAAE;YACT,IAAI,EAAE;gBACJ,IAAI,EAAE,4BAA4B;aACnC;YACD,KAAK,EAAE;gBACL,IAAI,EAAE,+CAA+C;aACtD;SACF;QACD,MAAM,EAAE;YACN,OAAO,EAAE;gBACP,aAAa,EAAE,oBAAoB;aACpC;YACD,OAAO,EAAE;gBACP,aAAa,EAAE,oBAAoB;aACpC;YACD,MAAM,EAAE;gBACN,aAAa,EAAE,mBAAmB;aACnC;YACD,OAAO,EAAE;gBACP,aAAa,EAAE,oBAAoB;aACpC;YACD,OAAO,EAAE;gBACP,aAAa,EAAE,oBAAoB;aACpC;YACD,IAAI,EAAE;gBACJ,aAAa,EAAE,iBAAiB;aACjC;SACF;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,KAAK;QAChB,MAAM,EAAE,SAAS;KAClB;CACF,CAAC,CAAC"}

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

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

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

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

package/dist/components/popover/index.js

@@ -0,0 +1,16 @@
+import PlusPopover from './popover.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 './popover.style.js';
+import '../../index-B9iart53.js';
+
+customElements.define('plus-popover', PlusPopover);
+
+export { PlusPopover };

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/popover/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/popover/popover.d.ts

@@ -0,0 +1,184 @@
+import Tailwind from '../base/tailwind-base';
+declare enum PopoverTrigger {
+    Hover = "hover",
+    Click = "click"
+}
+declare enum PopoverPosition {
+    Top = "top",
+    TopStart = "top-start",
+    TopEnd = "top-end",
+    Bottom = "bottom",
+    BottomStart = "bottom-start",
+    BottomEnd = "bottom-end",
+    Left = "left",
+    LeftStart = "left-start",
+    LeftEnd = "left-end",
+    Right = "right",
+    RightStart = "right-start",
+    RightEnd = "right-end"
+}
+/**
+ * @tag plus-popover
+ * @summary Popover component that displays content in a floating panel.
+ *
+ * @slot - The target element that triggers the popover
+ * @slot icon - Custom icon for the popover
+ * @slot title - The popover title
+ * @slot actions - Actions like close button
+ * @slot content - The main content inside the popover
+ *
+ * @csspart popover - The popover container element
+ * @csspart arrow - The popover arrow indicator
+ * @csspart title - The popover title
+ * @csspart close - The close button area
+ * @csspart content - The main content inside the popover
+ *
+ * @event plus-popover-open - Emitted when the popover is opened
+ * @event plus-popover-close - Emitted when the popover is closed
+ * @event plus-popover-dismiss - Emitted when the popover is dismissed via close button
+ *
+ * @example
+ * ```html
+ * <plus-popover>
+ *   <plus-button>Click me</plus-button>
+ *   <div slot="title">Popover Title</div>
+ *   <div slot="content">Popover content goes here</div>
+ * </plus-popover>
+ * ```
+ */
+export default class PlusPopover extends Tailwind {
+    slots: Array<HTMLElement>;
+    /**
+     * The size of the popover.
+     *
+     * Available options:
+     * - `sm` (small)
+     * - `md` (medium - default)
+     * - `lg` (large)
+     *
+     * @type {'sm' | 'md' | 'lg'}
+     * @default 'md'
+     */
+    size: 'sm' | 'md' | 'lg';
+    /**
+     * The position of the popover relative to the target element.
+     *
+     * Available options:
+     * - `top` (default)
+     * - `top-start`
+     * - `top-end`
+     * - `bottom`
+     * - `bottom-start`
+     * - `bottom-end`
+     * - `left`
+     * - `left-start`
+     * - `left-end`
+     * - `right`
+     * - `right-start`
+     * - `right-end`
+     *
+     * @type {PopoverPosition}
+     * @default PopoverPosition.Top
+     */
+    orientation: PopoverPosition;
+    /**
+     * Determines how the popover is triggered.
+     *
+     * Available options:
+     * - `click` (default) - Popover toggles on click.
+     * - `hover` - Popover appears on hover.
+     *
+     * @type {'click' | 'hover'}
+     * @default 'click'
+     */
+    trigger: PopoverTrigger;
+    /**
+     * The main text content of the popover.
+     *
+     * If a slot with `name="content"` is provided, this text will be ignored.
+     *
+     * @type {string}
+     */
+    text?: string;
+    /**
+     * The header title of the popover.
+     *
+     * If a slot with `name="title"` is provided, this text will be ignored.
+     *
+     * @type {string}
+     * @default 'Title'
+     */
+    headerText?: string;
+    /**
+     * The status of the popover, which affects its styling.
+     *
+     * Available options:
+     * - `success` (green)
+     * - `warning` (yellow)
+     * - `danger` (red)
+     * - `info` (blue)
+     * - `primary` (default theme color)
+     * - `default` (gray - default)
+     *
+     * @type {'success' | 'warning' | 'danger' | 'info' | 'primary' | 'default'}
+     * @default 'default'
+     */
+    status: 'success' | 'warning' | 'danger' | 'info' | 'primary' | 'default';
+    /**
+     * Determines whether the popover can be dismissed by clicking the close button.
+     *
+     * - `true` (default) - Popover can be closed.
+     * - `false` - The close button is hidden.
+     *
+     * @type {boolean}
+     * @default true
+     */
+    dismissable: boolean;
+    /**
+     * Determines whether a status icon should be displayed in the popover.
+     *
+     * - `true` (default) - An icon representing the status will be displayed.
+     * - `false` - No icon will be displayed.
+     *
+     * @type {boolean}
+     * @default true
+     */
+    statusIcon: boolean;
+    /**
+     * Determines whether the arrow should be displayed.
+     *
+     * - `true` (default) - Arrow will be displayed.
+     * - `false` - Arrow will be hidden.
+     *
+     * @type {boolean}
+     * @default true
+     */
+    showArrow: boolean;
+    /**
+     * Controls the visibility of the popover.
+     *
+     * @private
+     * @type {boolean}
+     * @default false
+     */
+    private isVisible;
+    private targetElement?;
+    private arrowElement?;
+    private cleanup?;
+    private getPopover;
+    private updatePosition;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private handleClick;
+    private closePopover;
+    private cleanupAutoUpdate;
+    private _cleanupTarget;
+    private handleOutsideClick;
+    private handleSlotChange;
+    private _setupPopover;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export { PlusPopover };
+//# sourceMappingURL=popover.d.ts.map