flikkui 0.1.0-beta.2

package/dist/components/core/Pagination/Pagination.types.d.ts

@@ -0,0 +1,57 @@
+import React from "react";
+/**
+ * Pagination component props
+ * @property {number} currentPage - The current active page number (1-based)
+ * @property {number} totalPages - The total number of pages
+ * @property {function} onPageChange - Callback when page changes
+ * @property {PaginationSize} size - Size variant of pagination
+ * @property {boolean} showFirstLast - Whether to show first/last page buttons
+ * @property {boolean} showPrevNext - Whether to show previous/next buttons
+ * @property {number} siblingCount - Number of sibling pages to show around current page
+ * @property {string} previousLabel - Label for previous button
+ * @property {string} nextLabel - Label for next button
+ * @property {string} firstLabel - Label for first page button
+ * @property {string} lastLabel - Label for last page button
+ */
+export interface PaginationProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The current active page number (1-based) */
+    currentPage: number;
+    /** The total number of pages */
+    totalPages: number;
+    /** Callback when page changes */
+    onPageChange: (page: number) => void;
+    /** Size variant of pagination */
+    size?: PaginationSize;
+    /** Whether to show first/last page buttons */
+    showFirstLast?: boolean;
+    /** Whether to show previous/next buttons */
+    showPrevNext?: boolean;
+    /** Number of sibling pages to show around current page */
+    siblingCount?: number;
+    /** Label for previous button */
+    previousLabel?: string;
+    /** Label for next button */
+    nextLabel?: string;
+    /** Label for first page button */
+    firstLabel?: string;
+    /** Label for last page button */
+    lastLabel?: string;
+    /** Additional class names */
+    className?: string;
+}
+export type PaginationSize = "sm" | "md" | "lg";
+/**
+ * Internal pagination item props
+ */
+export interface PaginationItemProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Whether this item is currently active */
+    isActive?: boolean;
+    /** Whether this item is disabled */
+    isDisabled?: boolean;
+    /** Size variant */
+    size?: PaginationSize;
+    /** Item type for styling */
+    variant?: "page" | "ellipsis";
+    /** Additional class names */
+    className?: string;
+}

package/dist/components/core/Pagination/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Pagination } from "./Pagination";
+export type { PaginationProps, PaginationSize } from "./Pagination.types";

package/dist/components/core/Popover/Popover.animations.d.ts

@@ -0,0 +1,5 @@
+import { Variants } from 'motion/react';
+/**
+ * Dropdown animation variants for the Select component
+ */
+export declare const popoverAnimations: Variants;

package/dist/components/core/Popover/Popover.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+import { PopoverRootProps as PopoverProps } from "./Popover.types";
+/**
+ * Popover component using compound component pattern
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Popover>
+ *   <Popover.Trigger>
+ *     <Button>Open Popover</Button>
+ *   </Popover.Trigger>
+ *   <Popover.Content>
+ *     <div>Popover content</div>
+ *   </Popover.Content>
+ * </Popover>
+ * ```
+ */
+declare const Popover: ({ children, className, isOpen: controlledIsOpen, defaultIsOpen, onOpenChange, placement, offset, triggerType, closeOnClickOutside, closeOnEsc, preventClose, hasBackdrop, theme: themeOverrides, ...props }: PopoverProps) => React.JSX.Element;
+declare const _default: (({ children, className, isOpen: controlledIsOpen, defaultIsOpen, onOpenChange, placement, offset, triggerType, closeOnClickOutside, closeOnEsc, preventClose, hasBackdrop, theme: themeOverrides, ...props }: PopoverProps) => React.JSX.Element) & {
+    Trigger: React.ForwardRefExoticComponent<Omit<import("./Popover.types").PopoverTriggerProps, "ref"> & React.RefAttributes<any>>;
+    Content: React.ForwardRefExoticComponent<import("./Popover.types").PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+export { Popover };

package/dist/components/core/Popover/Popover.js

@@ -0,0 +1,68 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useState, useRef, useCallback } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { PopoverContext } from './PopoverContext.js';
+import { PopoverTrigger } from './PopoverTrigger.js';
+import PopoverContent from './PopoverContent.js';
+import { popoverTheme } from './Popover.theme.js';
+
+/**
+ * Popover component using compound component pattern
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Popover>
+ *   <Popover.Trigger>
+ *     <Button>Open Popover</Button>
+ *   </Popover.Trigger>
+ *   <Popover.Content>
+ *     <div>Popover content</div>
+ *   </Popover.Content>
+ * </Popover>
+ * ```
+ */
+var Popover = function (_a) {
+    var children = _a.children, className = _a.className, controlledIsOpen = _a.isOpen, _b = _a.defaultIsOpen, defaultIsOpen = _b === void 0 ? false : _b, onOpenChange = _a.onOpenChange, _c = _a.placement, placement = _c === void 0 ? "bottom" : _c, _d = _a.offset, offset = _d === void 0 ? 8 : _d, _e = _a.triggerType, triggerType = _e === void 0 ? "click" : _e, _f = _a.closeOnClickOutside, closeOnClickOutside = _f === void 0 ? true : _f, _g = _a.closeOnEsc, closeOnEsc = _g === void 0 ? true : _g, _h = _a.preventClose, preventClose = _h === void 0 ? false : _h, _j = _a.hasBackdrop, hasBackdrop = _j === void 0 ? false : _j, themeOverrides = _a.theme, props = __rest(_a, ["children", "className", "isOpen", "defaultIsOpen", "onOpenChange", "placement", "offset", "triggerType", "closeOnClickOutside", "closeOnEsc", "preventClose", "hasBackdrop", "theme"]);
+    // State for uncontrolled mode
+    var _k = useState(defaultIsOpen), uncontrolledIsOpen = _k[0], setUncontrolledIsOpen = _k[1];
+    // Determine if controlled or uncontrolled
+    var isControlled = controlledIsOpen !== undefined;
+    var isOpen = isControlled ? controlledIsOpen : uncontrolledIsOpen;
+    // Refs for positioning
+    var triggerRef = useRef(null);
+    var contentRef = useRef(null);
+    // Handle open state changes
+    var handleOpenChange = useCallback(function (value) {
+        if (!isControlled) {
+            setUncontrolledIsOpen(value);
+        }
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(value);
+    }, [isControlled, onOpenChange]);
+    // Merge theme with overrides
+    var theme = __assign(__assign({}, popoverTheme), (themeOverrides || {}));
+    // Context value
+    var contextValue = {
+        isOpen: isOpen,
+        onOpenChange: handleOpenChange,
+        triggerRef: triggerRef,
+        contentRef: contentRef,
+        placement: placement,
+        offset: offset,
+        triggerType: triggerType,
+        closeOnClickOutside: closeOnClickOutside,
+        closeOnEsc: closeOnEsc,
+        preventClose: preventClose,
+        hasBackdrop: hasBackdrop,
+        theme: theme,
+    };
+    return (React__default.createElement(PopoverContext.Provider, { value: contextValue },
+        React__default.createElement("div", __assign({ className: cn("popover", className), "data-state": isOpen ? "open" : "closed", "data-backdrop": hasBackdrop ? "true" : "false" }, props), children)));
+};
+// Export as a unified component
+var Popover$1 = Object.assign(Popover, {
+    Trigger: PopoverTrigger,
+    Content: PopoverContent,
+});
+
+export { Popover, Popover$1 as default };

package/dist/components/core/Popover/Popover.theme.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Theme for Popover component
+ */
+export interface PopoverTheme {
+    baseStyle: string;
+    contentStyle: string;
+    backdropStyle: string;
+}
+/**
+ * Default theme for the Popover component
+ */
+export declare const popoverTheme: PopoverTheme;

package/dist/components/core/Popover/Popover.theme.js

@@ -0,0 +1,13 @@
+/**
+ * Default theme for the Popover component
+ */
+var popoverTheme = {
+    // Base styles for the popover
+    baseStyle: "z-50 outline-none",
+    // Content styles
+    contentStyle: "bg-white border border-gray-200 rounded-md shadow-lg p-3 max-w-sm",
+    // Backdrop styles
+    backdropStyle: "fixed inset-0 bg-black/30",
+};
+
+export { popoverTheme };

package/dist/components/core/Popover/Popover.types.d.ts

@@ -0,0 +1,53 @@
+import React, { ReactNode } from "react";
+import { PopoverTheme } from "./Popover.theme";
+export type PopoverPlacement = "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end";
+export type PopoverTriggerType = "click" | "hover";
+export interface PopoverContextValue {
+    isOpen: boolean;
+    onOpenChange: (isOpen: boolean) => void;
+    triggerRef: React.RefObject<HTMLElement | null>;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+    placement: PopoverPlacement;
+    offset: number;
+    triggerType: PopoverTriggerType;
+    closeOnClickOutside: boolean;
+    closeOnEsc: boolean;
+    preventClose: boolean;
+    hasBackdrop: boolean;
+    theme: PopoverTheme;
+}
+export interface PopoverRootProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    isOpen?: boolean;
+    defaultIsOpen?: boolean;
+    onOpenChange?: (isOpen: boolean) => void;
+    placement?: PopoverPlacement;
+    offset?: number;
+    triggerType?: PopoverTriggerType;
+    closeOnClickOutside?: boolean;
+    closeOnEsc?: boolean;
+    preventClose?: boolean;
+    hasBackdrop?: boolean;
+    theme?: Partial<PopoverTheme>;
+}
+export interface PopoverTriggerProps {
+    children: React.ReactElement;
+    className?: string;
+    [key: string]: any;
+}
+export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    animation?: boolean;
+    portal?: boolean;
+}
+/**
+ * Theme overrides for the Popover component
+ */
+export interface PopoverThemeOverrides {
+    /** Base style for the popover */
+    baseStyle?: string;
+    /** Content style for the popover */
+    contentStyle?: string;
+    /** Backdrop style for the popover */
+    backdropStyle?: string;
+}

package/dist/components/core/Popover/PopoverContent.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { PopoverContentProps } from "./Popover.types";
+/**
+ * PopoverContent component displays the content of the popover
+ */
+declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
+export default PopoverContent;

package/dist/components/core/Popover/PopoverContent.js

@@ -0,0 +1,190 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useRef, useState, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { cn } from '../../../utils/cn.js';
+import { usePopoverContext } from './PopoverContext.js';
+import { useClickOutside } from '../../../utils/useClickOutside.js';
+import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
+
+/**
+ * PopoverContent component displays the content of the popover
+ */
+var PopoverContent = React__default.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className; _a.animation; var _c = _a.portal, portal = _c === void 0 ? false : _c, props = __rest(_a, ["children", "className", "animation", "portal"]);
+    var _d = usePopoverContext(), isOpen = _d.isOpen, onOpenChange = _d.onOpenChange, triggerRef = _d.triggerRef, contentRef = _d.contentRef, placement = _d.placement, offset = _d.offset, triggerType = _d.triggerType, closeOnClickOutside = _d.closeOnClickOutside, closeOnEsc = _d.closeOnEsc, preventClose = _d.preventClose, hasBackdrop = _d.hasBackdrop, theme = _d.theme;
+    var localRef = useRef(null);
+    var _e = useState({
+        top: 0,
+        left: 0,
+    }), position = _e[0], setPosition = _e[1];
+    // Use our custom hook for detecting clicks outside
+    useClickOutside(localRef, function (e) {
+        var _a;
+        // Skip if clicking on the trigger element (triggering will be handled by the trigger itself)
+        if (e.target === triggerRef.current || ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+            return;
+        }
+        if (closeOnClickOutside && !preventClose) {
+            onOpenChange(false);
+        }
+    });
+    // Close the popover when pressing escape
+    useEffect(function () {
+        var handleKeyDown = function (e) {
+            if (closeOnEsc && e.key === "Escape" && !preventClose) {
+                onOpenChange(false);
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return function () {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [closeOnEsc, onOpenChange, preventClose]);
+    // Position the popover based on the trigger element
+    useEffect(function () {
+        if (!triggerRef.current || !localRef.current)
+            return;
+        var updatePosition = function () {
+            if (!triggerRef.current || !localRef.current)
+                return;
+            var targetRect = triggerRef.current.getBoundingClientRect();
+            var contentRect = localRef.current.getBoundingClientRect();
+            var top = 0;
+            var left = 0;
+            // Default offset
+            var offsetValue = offset || 8;
+            switch (placement) {
+                case "top":
+                    top = targetRect.top - contentRect.height - offsetValue;
+                    left = targetRect.left + targetRect.width / 2 - contentRect.width / 2;
+                    break;
+                case "top-start":
+                    top = targetRect.top - contentRect.height - offsetValue;
+                    left = targetRect.left;
+                    break;
+                case "top-end":
+                    top = targetRect.top - contentRect.height - offsetValue;
+                    left = targetRect.right - contentRect.width;
+                    break;
+                case "bottom":
+                    top = targetRect.bottom + offsetValue;
+                    left = targetRect.left + targetRect.width / 2 - contentRect.width / 2;
+                    break;
+                case "bottom-start":
+                    top = targetRect.bottom + offsetValue;
+                    left = targetRect.left;
+                    break;
+                case "bottom-end":
+                    top = targetRect.bottom + offsetValue;
+                    left = targetRect.right - contentRect.width;
+                    break;
+                case "left":
+                    top = targetRect.top + targetRect.height / 2 - contentRect.height / 2;
+                    left = targetRect.left - contentRect.width - offsetValue;
+                    break;
+                case "left-start":
+                    top = targetRect.top;
+                    left = targetRect.left - contentRect.width - offsetValue;
+                    break;
+                case "left-end":
+                    top = targetRect.bottom - contentRect.height;
+                    left = targetRect.left - contentRect.width - offsetValue;
+                    break;
+                case "right":
+                    top = targetRect.top + targetRect.height / 2 - contentRect.height / 2;
+                    left = targetRect.right + offsetValue;
+                    break;
+                case "right-start":
+                    top = targetRect.top;
+                    left = targetRect.right + offsetValue;
+                    break;
+                case "right-end":
+                    top = targetRect.bottom - contentRect.height;
+                    left = targetRect.right + offsetValue;
+                    break;
+                default:
+                    top = targetRect.bottom + offsetValue;
+                    left = targetRect.left + targetRect.width / 2 - contentRect.width / 2;
+            }
+            // Adjust position to ensure it doesn't go off-screen
+            var windowWidth = window.innerWidth;
+            var windowHeight = window.innerHeight;
+            // Prevent going off the right edge
+            if (left + contentRect.width > windowWidth) {
+                left = windowWidth - contentRect.width - 10;
+            }
+            // Prevent going off the left edge
+            if (left < 10) {
+                left = 10;
+            }
+            // Prevent going off the bottom edge
+            if (top + contentRect.height > windowHeight) {
+                top = windowHeight - contentRect.height - 10;
+            }
+            // Prevent going off the top edge
+            if (top < 10) {
+                top = 10;
+            }
+            setPosition({ top: top, left: left });
+        };
+        // Run immediately to position correctly on first render
+        updatePosition();
+        // Update position on scroll and resize
+        window.addEventListener("scroll", updatePosition, true);
+        window.addEventListener("resize", updatePosition);
+        return function () {
+            window.removeEventListener("scroll", updatePosition, true);
+            window.removeEventListener("resize", updatePosition);
+        };
+    }, [triggerRef, placement, offset, isOpen]);
+    // Combine refs
+    var handleRef = useCallback(function (el) {
+        localRef.current = el;
+        if (typeof ref === "function") {
+            ref(el);
+        }
+        else if (ref) {
+            ref.current = el;
+        }
+        if (contentRef) {
+            contentRef.current = el;
+        }
+    }, [ref, contentRef]);
+    // Animation variants
+    var contentVariants = {
+        hidden: { opacity: 0, scale: 0.95 },
+        visible: { opacity: 1, scale: 1 },
+        exit: { opacity: 0, scale: 0.95 }
+    };
+    // Backdrop variants
+    var backdropVariants = {
+        hidden: { opacity: 0 },
+        visible: { opacity: 1 },
+        exit: { opacity: 0 }
+    };
+    // Extract DOM props to avoid type conflicts
+    // HTML event props that conflict with Framer Motion
+    props.onDrag; props.onDragStart; props.onDragEnd; props.onAnimationStart; props.onAnimationEnd; var domProps = __rest(props, ["onDrag", "onDragStart", "onDragEnd", "onAnimationStart", "onAnimationEnd"]);
+    // Create a backdrop portal
+    var renderBackdrop = hasBackdrop && isOpen && typeof document !== 'undefined';
+    var backdrop = renderBackdrop ? (createPortal(React__default.createElement(motion.div, { key: "backdrop", variants: backdropVariants, initial: "hidden", animate: "visible", exit: "exit", transition: { duration: 0.15 }, className: cn("fixed inset-0 bg-black/50 z-40", theme.backdropStyle), onClick: function (e) {
+            e.stopPropagation();
+            if (!preventClose) {
+                onOpenChange(false);
+            }
+        } }), document.body)) : null;
+    var popoverContent = (React__default.createElement(AnimatePresence, null, isOpen && (React__default.createElement(React__default.Fragment, null,
+        backdrop,
+        React__default.createElement(motion.div, __assign({ ref: handleRef, className: cn("fixed z-50", theme.baseStyle, theme.contentStyle, "popover-content", className), style: {
+                top: "".concat(position.top, "px"),
+                left: "".concat(position.left, "px"),
+            }, role: "dialog", "aria-modal": "true", variants: contentVariants, initial: "hidden", animate: "visible", exit: "exit", transition: { duration: 0.2 }, "data-state": isOpen ? "open" : "closed", "data-placement": placement, "data-trigger": triggerType, "data-backdrop": hasBackdrop ? "true" : "false", onClick: function (e) { return e.stopPropagation(); } }, domProps), children)))));
+    // Use portal if specified
+    return portal && typeof document !== 'undefined'
+        ? createPortal(popoverContent, document.body)
+        : popoverContent;
+});
+PopoverContent.displayName = "PopoverContent";
+
+export { PopoverContent as default };

package/dist/components/core/Popover/PopoverContext.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { PopoverContextValue } from './Popover.types';
+export declare const PopoverContext: React.Context<PopoverContextValue | undefined>;
+export declare const usePopoverContext: () => PopoverContextValue;

package/dist/components/core/Popover/PopoverContext.js

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+
+// Create context
+var PopoverContext = createContext(undefined);
+// Custom hook for consuming context
+var usePopoverContext = function () {
+    var context = useContext(PopoverContext);
+    if (context === undefined) {
+        throw new Error("usePopoverContext must be used within a Popover component");
+    }
+    return context;
+};
+
+export { PopoverContext, usePopoverContext };

package/dist/components/core/Popover/PopoverTrigger.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { PopoverTriggerProps } from "./Popover.types";
+export declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<PopoverTriggerProps, "ref"> & React.RefAttributes<any>>;

package/dist/components/core/Popover/PopoverTrigger.js

@@ -0,0 +1,65 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { usePopoverContext } from './PopoverContext.js';
+
+var PopoverTrigger = React__default.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
+    var context = usePopoverContext();
+    // Create trigger events based on triggerType
+    var getTriggerEvents = function () {
+        if (context.triggerType === "click") {
+            return {
+                onClick: function (e) {
+                    var _a, _b;
+                    e.preventDefault();
+                    context.onOpenChange(!context.isOpen);
+                    // Call the original onClick if it exists
+                    (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                },
+            };
+        }
+        if (context.triggerType === "hover") {
+            return {
+                onMouseEnter: function (e) {
+                    var _a, _b;
+                    context.onOpenChange(true);
+                    // Call the original onMouseEnter if it exists
+                    (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a.onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                },
+                onMouseLeave: function (e) {
+                    var _a, _b;
+                    if (!context.preventClose) {
+                        context.onOpenChange(false);
+                    }
+                    // Call the original onMouseLeave if it exists
+                    (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a.onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                },
+            };
+        }
+        return {};
+    };
+    // Merge refs for the trigger element
+    function setRef(node) {
+        context.triggerRef.current = node;
+        if (ref) {
+            if (typeof ref === "function")
+                ref(node);
+            else if (typeof ref === "object")
+                ref.current = node;
+        }
+        var childRef = children.ref;
+        if (childRef) {
+            if (typeof childRef === "function")
+                childRef(node);
+            else if (typeof childRef === "object")
+                childRef.current = node;
+        }
+    }
+    var triggerEvents = getTriggerEvents();
+    var childElement = children;
+    return React__default.cloneElement(childElement, __assign(__assign({ ref: setRef, "aria-expanded": context.isOpen, "aria-haspopup": true, "aria-controls": context.isOpen ? "popover-content" : undefined, className: cn(childElement.props.className, className, "popover-trigger"), "data-state": context.isOpen ? "open" : "closed", "data-trigger-type": context.triggerType }, triggerEvents), props));
+});
+PopoverTrigger.displayName = "PopoverTrigger";
+
+export { PopoverTrigger };

package/dist/components/core/Popover/index.d.ts

@@ -0,0 +1,6 @@
+import Popover from './Popover';
+import { PopoverContext, usePopoverContext } from './PopoverContext';
+import { PopoverRootProps as PopoverProps, PopoverContentProps, PopoverTriggerProps, PopoverContextValue, PopoverPlacement, PopoverTriggerType, PopoverThemeOverrides } from './Popover.types';
+export { Popover, PopoverContext, usePopoverContext };
+export type { PopoverProps, PopoverContentProps, PopoverTriggerProps, PopoverContextValue, PopoverPlacement, PopoverTriggerType, PopoverThemeOverrides };
+export default Popover;

package/dist/components/core/Popover/index.js

@@ -0,0 +1,6 @@
+import Popover from './Popover.js';
+export { PopoverContext, usePopoverContext } from './PopoverContext.js';
+
+
+
+export { Popover, Popover as default };

package/dist/components/core/Popover/test-popover.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const PopoverExample: () => React.JSX.Element;
+export declare const CustomStyledPopover: () => React.JSX.Element;

package/dist/components/core/ProgressiveBlur/ProgressiveBlur.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ProgressiveBlurProps } from './ProgressiveBlur.types';
+declare const ProgressiveBlur: React.ForwardRefExoticComponent<ProgressiveBlurProps & React.RefAttributes<HTMLDivElement>>;
+export default ProgressiveBlur;

package/dist/components/core/ProgressiveBlur/ProgressiveBlur.js

@@ -0,0 +1,35 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { progressiveBlurTheme } from './ProgressiveBlur.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+var ProgressiveBlur = React__default.forwardRef(function (_a, ref) {
+    var position = _a.position, _b = _a.blurIntensity, blurIntensity = _b === void 0 ? 8 : _b, blurLevels = _a.blurLevels, _c = _a.size, size = _c === void 0 ? "40px" : _c, className = _a.className, theme = _a.theme, props = __rest(_a, ["position", "blurIntensity", "blurLevels", "size", "className", "theme"]);
+    // Normalize position to array
+    var positions = Array.isArray(position) ? position : [position];
+    // Generate blur levels array
+    var levels = blurLevels || [
+        blurIntensity * 0.25, // 2px
+        blurIntensity * 0.5, // 4px
+        blurIntensity * 0.75, // 6px
+        blurIntensity, // 8px
+    ];
+    return (React__default.createElement(React__default.Fragment, null, positions.map(function (pos) {
+        var _a;
+        var isVertical = pos === 'top' || pos === 'bottom';
+        var sizeStyle = isVertical ? { height: size } : { width: size };
+        return (React__default.createElement("div", __assign({ key: pos, ref: positions.length === 1 ? ref : undefined, className: cn(progressiveBlurTheme.baseStyle, progressiveBlurTheme.positions[pos], theme === null || theme === void 0 ? void 0 : theme.baseStyle, (_a = theme === null || theme === void 0 ? void 0 : theme.positions) === null || _a === void 0 ? void 0 : _a[pos], className), style: sizeStyle }, props), levels.map(function (blur, index) {
+            var opacity = 1 - (index * 0.15); // Progressive opacity
+            return (React__default.createElement("div", { key: index, className: "absolute inset-0", style: {
+                    backdropFilter: "blur(".concat(blur, "px)"),
+                    WebkitBackdropFilter: "blur(".concat(blur, "px)"),
+                    maskImage: progressiveBlurTheme.gradients[pos],
+                    WebkitMaskImage: progressiveBlurTheme.gradients[pos],
+                    opacity: opacity,
+                } }));
+        })));
+    })));
+});
+ProgressiveBlur.displayName = 'ProgressiveBlur';
+
+export { ProgressiveBlur as default };

package/dist/components/core/ProgressiveBlur/ProgressiveBlur.theme.d.ts

@@ -0,0 +1,15 @@
+export declare const progressiveBlurTheme: {
+    readonly baseStyle: "absolute pointer-events-none z-10";
+    readonly positions: {
+        readonly top: "top-0 left-0 right-0";
+        readonly bottom: "bottom-0 left-0 right-0";
+        readonly left: "left-0 top-0 bottom-0";
+        readonly right: "right-0 top-0 bottom-0";
+    };
+    readonly gradients: {
+        readonly top: "linear-gradient(to bottom, black, transparent)";
+        readonly bottom: "linear-gradient(to top, black, transparent)";
+        readonly left: "linear-gradient(to right, black, transparent)";
+        readonly right: "linear-gradient(to left, black, transparent)";
+    };
+};

package/dist/components/core/ProgressiveBlur/ProgressiveBlur.theme.js

@@ -0,0 +1,17 @@
+var progressiveBlurTheme = {
+    baseStyle: "absolute pointer-events-none z-10",
+    positions: {
+        top: "top-0 left-0 right-0",
+        bottom: "bottom-0 left-0 right-0",
+        left: "left-0 top-0 bottom-0",
+        right: "right-0 top-0 bottom-0",
+    },
+    gradients: {
+        top: "linear-gradient(to bottom, black, transparent)",
+        bottom: "linear-gradient(to top, black, transparent)",
+        left: "linear-gradient(to right, black, transparent)",
+        right: "linear-gradient(to left, black, transparent)",
+    },
+};
+
+export { progressiveBlurTheme };