@flikk/ui 1.0.0-beta.1

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

@@ -0,0 +1,136 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useRef, useEffect, useCallback, useState } from 'react';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
+import { createPortal } from 'react-dom';
+import { cn } from '../../../utils/cn.js';
+import { usePopoverContext } from './PopoverContext.js';
+import { useClickOutside } from '../../../hooks/useClickOutside.js';
+import { popoverTransitions, popoverContentVariants } from './Popover.animations.js';
+import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
+import { Overlay } from '../../effects/Overlay/Overlay.js';
+import { useIsClient } from '../../../hooks/useIsClient.js';
+
+/** Overlay backdrop animations (fade in/out) */
+const overlayBackdropAnimations = {
+    initial: { opacity: 0 },
+    animate: { opacity: 1, transition: { duration: 0.15 } },
+    exit: { opacity: 0, transition: { duration: 0.1 } },
+};
+/** Overlay content animations (scale + fade) */
+const overlayContentAnimations = {
+    initial: { opacity: 0, scale: 0.95 },
+    animate: { opacity: 1, scale: 1, transition: { duration: 0.2 } },
+    exit: { opacity: 0, scale: 0.95, transition: { duration: 0.15 } },
+};
+const useDarkMode = () => {
+    const [isDark, setIsDark] = useState(false);
+    useEffect(() => {
+        if (typeof document === "undefined")
+            return;
+        const checkDarkMode = () => {
+            const hasDarkClass = document.documentElement.classList.contains("dark") ||
+                document.body.classList.contains("dark") ||
+                document.querySelector(".dark") !== null;
+            setIsDark(hasDarkClass);
+        };
+        checkDarkMode();
+        const observer = new MutationObserver(checkDarkMode);
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+        observer.observe(document.body, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+        return () => observer.disconnect();
+    }, []);
+    return isDark;
+};
+/**
+ * PopoverContent component displays the content of the popover
+ */
+const PopoverContent = React__default.forwardRef(({ children, className, animation = true, portal = true, ...props }, ref) => {
+    const { isOpen, onOpenChange, triggerRef, contentRef, placement, offset, triggerType, closeOnClickOutside, closeOnEsc, preventClose, hasBackdrop, theme, contentId, } = usePopoverContext();
+    const shouldReduceMotion = useReducedMotion();
+    const localRef = useRef(null);
+    // Use the same positioning hook as Select/Tooltip (now supports all 12 placements)
+    const { position, cssVariables, contentRef: portalContentRef } = useSelectPortal({
+        triggerRef,
+        isOpen: isOpen || false,
+        placement: placement,
+        offset: offset || 8,
+        autoWidth: true,
+    });
+    // Click outside detection (active when no backdrop — with backdrop, Overlay handles it)
+    useClickOutside(localRef, (e) => {
+        var _a;
+        if (hasBackdrop)
+            return; // Overlay handles click-outside via backdrop
+        if (e.target === triggerRef.current || ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+            return;
+        }
+        if (closeOnClickOutside && !preventClose) {
+            onOpenChange(false);
+        }
+    });
+    // Escape key handling (active when no backdrop — with backdrop, Overlay handles it)
+    useEffect(() => {
+        if (hasBackdrop)
+            return; // Overlay handles escape key
+        const handleKeyDown = (e) => {
+            if (closeOnEsc && e.key === "Escape" && !preventClose) {
+                onOpenChange(false);
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [hasBackdrop, closeOnEsc, onOpenChange, preventClose]);
+    // Combine refs
+    const handleRef = useCallback((el) => {
+        localRef.current = el;
+        if (typeof ref === "function") {
+            ref(el);
+        }
+        else if (ref) {
+            ref.current = el;
+        }
+        if (contentRef) {
+            contentRef.current = el;
+        }
+        if (portalContentRef && typeof portalContentRef === 'object' && 'current' in portalContentRef) {
+            portalContentRef.current = el;
+        }
+    }, [ref, contentRef, portalContentRef]);
+    const isDarkMode = useDarkMode();
+    const isClient = useIsClient();
+    // Extract DOM props to avoid type conflicts with Framer Motion
+    const { onDrag, onDragStart, onDragEnd, onAnimationStart, onAnimationEnd, ...domProps } = props;
+    const contentClasses = cn(theme.baseStyle, theme.contentStyle, "popover-content", className);
+    const contentPositionStyle = {
+        ...cssVariables,
+        position: "fixed",
+        top: `${position.top}px`,
+        left: `${position.left}px`,
+    };
+    // When hasBackdrop is true, delegate backdrop + escape + click-outside to Overlay
+    if (hasBackdrop) {
+        return (jsx(Overlay, { ref: handleRef, isOpen: isOpen, onClose: () => {
+                if (!preventClose)
+                    onOpenChange(false);
+            }, closeOnOverlayClick: closeOnClickOutside && !preventClose, closeOnEsc: closeOnEsc && !preventClose, enableScrollLock: false, enableFocusTrap: false, position: "none", role: "dialog", ariaModal: true, contentClassName: contentClasses, contentStyle: contentPositionStyle, animations: animation && !shouldReduceMotion
+                ? { overlay: overlayBackdropAnimations, content: overlayContentAnimations }
+                : undefined, children: jsx("div", { id: contentId, "data-state": isOpen ? "open" : "closed", "data-placement": placement, "data-trigger": triggerType, ...domProps, children: children }) }));
+    }
+    // Without backdrop: manual portal + positioning + escape + click-outside
+    const popoverContent = (jsx(AnimatePresence, { children: isOpen && (jsx(motion.div, { ref: handleRef, id: contentId, className: cn("fixed z-50", contentClasses), style: contentPositionStyle, role: "dialog", "aria-modal": "true", variants: shouldReduceMotion || !animation ? {} : popoverContentVariants, initial: shouldReduceMotion || !animation ? undefined : "hidden", animate: shouldReduceMotion || !animation ? undefined : "visible", exit: shouldReduceMotion || !animation ? undefined : "exit", transition: shouldReduceMotion || !animation ? { duration: 0 } : popoverTransitions.content, "data-state": isOpen ? "open" : "closed", "data-placement": placement, "data-trigger": triggerType, onClick: (e) => e.stopPropagation(), ...domProps, children: children })) }));
+    if (portal && isClient) {
+        return createPortal(jsx("div", { className: isDarkMode ? "dark" : undefined, children: popoverContent }), document.body);
+    }
+    return popoverContent;
+});
+PopoverContent.displayName = "PopoverContent";
+
+export { PopoverContent };

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
+const PopoverContext = createContext(undefined);
+// Custom hook for consuming context
+const usePopoverContext = () => {
+    const 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,74 @@
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { usePopoverContext } from './PopoverContext.js';
+
+const PopoverTrigger = React__default.forwardRef(({ children, className, ...props }, ref) => {
+    var _a;
+    const context = usePopoverContext();
+    // Create trigger events based on triggerType
+    const getTriggerEvents = () => {
+        if (context.triggerType === "click") {
+            return {
+                onClick: (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: (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: (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;
+        }
+        const childRef = children.ref;
+        if (childRef) {
+            if (typeof childRef === "function")
+                childRef(node);
+            else if (typeof childRef === "object")
+                childRef.current = node;
+        }
+    }
+    const triggerEvents = getTriggerEvents();
+    const childElement = children;
+    return React__default.cloneElement(childElement, {
+        ref: setRef,
+        "aria-expanded": context.isOpen,
+        "aria-haspopup": true,
+        "aria-controls": context.contentId,
+        className: cn((_a = childElement.props) === null || _a === void 0 ? void 0 : _a.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,5 @@
+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 };

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { ProgressProps } from "./Progress.types";
+/**
+ * Progress component - Linear progress bar for tracking completion
+ *
+ * Features:
+ * - Determinate mode: Shows specific progress value (0-100)
+ * - Indeterminate mode: Animated loading state when value is undefined
+ * - Multiple sizes and semantic colors
+ * - Flexible label positioning (right, top, bottom, inside)
+ * - Respects reduced motion preferences
+ * - Full className override support
+ *
+ * @example
+ * // Determinate progress
+ * <Progress value={60} color="primary" />
+ *
+ * // With label
+ * <Progress value={75} showLabel labelPosition="right" />
+ *
+ * // Indeterminate (loading)
+ * <Progress color="primary" />
+ *
+ * // Custom label format
+ * <Progress value={50} showLabel formatLabel={(pct) => `${pct}% complete`} />
+ */
+declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
+export { Progress };

package/dist/components/core/Progress/Progress.js

@@ -0,0 +1,109 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import React__default, { useMemo } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
+import { progressTheme } from './Progress.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+const PROGRESS_SPRING_TRANSITION = {
+    type: "spring",
+    stiffness: 100,
+    damping: 20,
+    mass: 0.5,
+};
+/**
+ * Progress component - Linear progress bar for tracking completion
+ *
+ * Features:
+ * - Determinate mode: Shows specific progress value (0-100)
+ * - Indeterminate mode: Animated loading state when value is undefined
+ * - Multiple sizes and semantic colors
+ * - Flexible label positioning (right, top, bottom, inside)
+ * - Respects reduced motion preferences
+ * - Full className override support
+ *
+ * @example
+ * // Determinate progress
+ * <Progress value={60} color="primary" />
+ *
+ * // With label
+ * <Progress value={75} showLabel labelPosition="right" />
+ *
+ * // Indeterminate (loading)
+ * <Progress color="primary" />
+ *
+ * // Custom label format
+ * <Progress value={50} showLabel formatLabel={(pct) => `${pct}% complete`} />
+ */
+const Progress = React__default.forwardRef(({ value, size = "md", color = "primary", showLabel = false, labelPosition = "right", formatLabel, animated = true, trackClassName, fillClassName, className, theme: customTheme, ...props }, ref) => {
+    const shouldReduceMotion = useReducedMotion();
+    // Merge custom theme with default theme
+    const theme = useMemo(() => {
+        if (!customTheme)
+            return progressTheme;
+        return {
+            ...progressTheme,
+            ...customTheme,
+            sizes: { ...progressTheme.sizes, ...customTheme.sizes },
+            colors: { ...progressTheme.colors, ...customTheme.colors },
+        };
+    }, [customTheme]);
+    // Calculate percentage (clamped to 0-100)
+    const percentage = useMemo(() => {
+        if (value === undefined || value === null)
+            return 0;
+        return Math.min(Math.max(Math.round(value), 0), 100);
+    }, [value]);
+    // Determine if this is indeterminate mode
+    const isIndeterminate = value === undefined || value === null;
+    // Format the label
+    const label = useMemo(() => {
+        if (formatLabel)
+            return formatLabel(percentage);
+        return `${percentage}%`;
+    }, [percentage, formatLabel]);
+    // Determine if animation should be applied
+    const shouldAnimate = animated && !shouldReduceMotion;
+    // Get container layout based on label position
+    const containerLayoutClass = useMemo(() => {
+        if (!showLabel || isIndeterminate)
+            return "";
+        switch (labelPosition) {
+            case "top":
+                return "flex flex-col gap-1.5";
+            case "bottom":
+                return "flex flex-col-reverse gap-1.5";
+            case "right":
+                return "flex items-center gap-3";
+            case "inside":
+                return "";
+            default:
+                return "";
+        }
+    }, [showLabel, labelPosition, isIndeterminate]);
+    // Render label element
+    const renderLabel = () => {
+        if (!showLabel || isIndeterminate)
+            return null;
+        if (labelPosition === "inside") {
+            // Only show inside label for lg size (enough height)
+            if (size !== "lg")
+                return null;
+            return jsx("span", { className: theme.insideLabelStyle, children: label });
+        }
+        return (jsx("span", { className: cn(theme.labelStyle, labelPosition === "top" || labelPosition === "bottom"
+                ? "text-left"
+                : ""), children: label }));
+    };
+    // Track element with optional fill
+    const renderTrack = () => (jsxs("div", { className: cn(theme.trackStyle, theme.sizes[size], "relative", trackClassName), children: [isIndeterminate ? (
+            // Indeterminate animation
+            jsx("div", { className: cn(theme.fillStyle, theme.colors[color], "w-1/3", theme.indeterminateStyle, fillClassName) })) : shouldAnimate ? (
+            // Animated determinate progress with spring animation
+            jsx(motion.div, { className: cn(theme.fillStyle, theme.colors[color], fillClassName), initial: { width: 0 }, animate: { width: `${percentage}%` }, transition: PROGRESS_SPRING_TRANSITION })) : (
+            // Static determinate progress
+            jsx("div", { className: cn(theme.fillStyle, theme.colors[color], fillClassName), style: { width: `${percentage}%` } })), showLabel && labelPosition === "inside" && size === "lg" && !isIndeterminate && (jsx("span", { className: theme.insideLabelStyle, children: label }))] }));
+    return (jsxs("div", { ref: ref, className: cn(theme.containerStyle, containerLayoutClass, className), role: "progressbar", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": isIndeterminate ? undefined : percentage, "aria-label": isIndeterminate ? "Loading" : `${percentage}% complete`, ...props, children: [labelPosition === "top" && renderLabel(), labelPosition === "right" ? (jsxs(Fragment, { children: [jsx("div", { className: "flex-1", children: renderTrack() }), renderLabel()] })) : (renderTrack()), labelPosition === "bottom" && renderLabel()] }));
+});
+Progress.displayName = "Progress";
+
+export { Progress };

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

@@ -0,0 +1,5 @@
+import { ProgressTheme } from "./Progress.types";
+/**
+ * Default theme configuration for Progress component
+ */
+export declare const progressTheme: ProgressTheme;

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

@@ -0,0 +1,33 @@
+/**
+ * Default theme configuration for Progress component
+ */
+const progressTheme = {
+    // Container styles
+    containerStyle: "w-full",
+    // Track (background) styles
+    trackStyle: "relative w-full rounded-full bg-[var(--color-background-tertiary)] overflow-hidden",
+    // Fill (progress bar) styles
+    fillStyle: "h-full rounded-full",
+    // Label text styles
+    labelStyle: "text-sm font-medium text-[var(--color-text-secondary)] tabular-nums min-w-[2.5rem] text-right",
+    // Inside label styles (when label is positioned inside the bar)
+    insideLabelStyle: "absolute inset-0 flex items-center justify-center text-xs font-medium text-white tabular-nums",
+    // Size variants for track height
+    sizes: {
+        sm: "h-1.5",
+        md: "h-2.5",
+        lg: "h-4",
+    },
+    // Color variants for the fill
+    colors: {
+        neutral: "bg-[var(--color-neutral-400)] dark:bg-[var(--color-neutral-500)]",
+        primary: "bg-[var(--color-primary)] dark:bg-[var(--color-primary-400)]",
+        success: "bg-[var(--color-success)] dark:bg-[var(--color-success-400)]",
+        warning: "bg-[var(--color-warning)] dark:bg-[var(--color-warning-400)]",
+        danger: "bg-[var(--color-danger)] dark:bg-[var(--color-danger-400)]",
+    },
+    // Indeterminate animation styles
+    indeterminateStyle: "animate-[progress-indeterminate_1.5s_ease-in-out_infinite]",
+};
+
+export { progressTheme };

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

@@ -0,0 +1,92 @@
+import React from "react";
+export type ProgressSize = "sm" | "md" | "lg";
+export type ProgressColor = "neutral" | "primary" | "success" | "warning" | "danger";
+export type ProgressLabelPosition = "right" | "top" | "bottom" | "inside";
+/**
+ * Theme configuration for Progress component
+ */
+export interface ProgressTheme {
+    /** Outer container styles */
+    containerStyle: string;
+    /** Track (background) styles */
+    trackStyle: string;
+    /** Fill (progress bar) styles */
+    fillStyle: string;
+    /** Label text styles */
+    labelStyle: string;
+    /** Inside label styles (when label is inside the bar) */
+    insideLabelStyle: string;
+    /** Size variants for the track height */
+    sizes: Record<ProgressSize, string>;
+    /** Color variants for the fill */
+    colors: Record<ProgressColor, string>;
+    /** Indeterminate animation styles */
+    indeterminateStyle: string;
+}
+/**
+ * Theme overrides for Progress component
+ */
+export interface ProgressThemeOverrides {
+    containerStyle?: string;
+    trackStyle?: string;
+    fillStyle?: string;
+    labelStyle?: string;
+    insideLabelStyle?: string;
+    sizes?: Partial<Record<ProgressSize, string>>;
+    colors?: Partial<Record<ProgressColor, string>>;
+    indeterminateStyle?: string;
+}
+export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Progress value from 0 to 100.
+     * If undefined, the progress bar will be in indeterminate mode.
+     */
+    value?: number;
+    /**
+     * The size of the progress bar
+     * @default 'md'
+     */
+    size?: ProgressSize;
+    /**
+     * The semantic color of the progress bar
+     * @default 'primary'
+     */
+    color?: ProgressColor;
+    /**
+     * Whether to show the percentage label
+     * @default false
+     */
+    showLabel?: boolean;
+    /**
+     * Position of the label
+     * @default 'right'
+     */
+    labelPosition?: ProgressLabelPosition;
+    /**
+     * Custom label formatter function
+     * @param percentage - The current percentage value (0-100)
+     * @returns The formatted label string
+     */
+    formatLabel?: (percentage: number) => string;
+    /**
+     * Whether to animate value changes
+     * @default true
+     */
+    animated?: boolean;
+    /**
+     * Additional class name for the track (background) element
+     */
+    trackClassName?: string;
+    /**
+     * Additional class name for the fill (progress) element
+     */
+    fillClassName?: string;
+    /**
+     * Additional class name for the container
+     */
+    className?: string;
+    /**
+     * Component-level theme overrides
+     */
+    theme?: ProgressThemeOverrides;
+}

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

@@ -0,0 +1,2 @@
+export { Progress } from "./Progress";
+export type { ProgressProps, ProgressSize, ProgressColor, ProgressLabelPosition, ProgressThemeOverrides, } from "./Progress.types";

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

@@ -0,0 +1,34 @@
+import React, { CSSProperties, PropsWithChildren } from "react";
+export type ProgressiveBlurProps = PropsWithChildren<{
+    position?: "top" | "bottom" | "left" | "right";
+    strength?: number;
+    height?: string;
+    width?: string;
+    divCount?: number;
+    exponential?: boolean;
+    zIndex?: number;
+    animated?: boolean | "scroll";
+    duration?: string;
+    easing?: string;
+    opacity?: number;
+    curve?: "linear" | "bezier" | "ease-in" | "ease-out" | "ease-in-out";
+    responsive?: boolean;
+    mobileHeight?: string;
+    tabletHeight?: string;
+    desktopHeight?: string;
+    mobileWidth?: string;
+    tabletWidth?: string;
+    desktopWidth?: string;
+    preset?: "top" | "bottom" | "left" | "right" | "subtle" | "intense" | "smooth" | "sharp" | "header" | "footer" | "sidebar" | "page-header" | "page-footer";
+    gpuOptimized?: boolean;
+    hoverIntensity?: number;
+    target?: "parent" | "page";
+    onAnimationComplete?: () => void;
+    className?: string;
+    style?: CSSProperties;
+}>;
+export declare const ProgressiveBlur: React.NamedExoticComponent<ProgressiveBlurProps> & {
+    displayName: string;
+    PRESETS: Record<string, Partial<ProgressiveBlurProps>>;
+    CURVE_FUNCTIONS: Record<string, (p: number) => number>;
+};