@flikk/ui 1.0.0-beta.1 → 1.0.0-beta.10

package/dist/components/layout/FormLayout/FormLayoutHeader.js

@@ -0,0 +1,12 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { formLayoutTheme } from './FormLayout.theme.js';
+
+const FormLayoutHeader = React__default.forwardRef(({ title, subtitle, action, className, theme: customTheme, ...props }, ref) => {
+    const theme = { ...formLayoutTheme, ...customTheme };
+    return (jsx("div", { ref: ref, className: cn(theme.header, className), ...props, children: jsxs("div", { className: "flex items-start justify-between", children: [jsxs("div", { children: [jsx("div", { className: theme.headerTitle, children: title }), subtitle && jsx("div", { className: theme.headerSubtitle, children: subtitle })] }), action && jsx("div", { children: action })] }) }));
+});
+FormLayoutHeader.displayName = "FormLayout.Header";
+
+export { FormLayoutHeader };

package/dist/components/layout/FormLayout/FormLayoutSection.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { FormLayoutSectionProps } from "./FormLayout.types";
+export declare const FormLayoutSection: React.ForwardRefExoticComponent<FormLayoutSectionProps & React.RefAttributes<HTMLElement>>;

package/dist/components/layout/FormLayout/FormLayoutSection.js

@@ -0,0 +1,12 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { formLayoutTheme } from './FormLayout.theme.js';
+
+const FormLayoutSection = React__default.forwardRef(({ title, description, action, className, contentClassName, theme: customTheme, children, ...props }, ref) => {
+    const theme = { ...formLayoutTheme, ...customTheme };
+    return (jsxs("section", { ref: ref, className: cn(theme.section, className), ...props, children: [jsxs("div", { className: theme.sectionSidebar, children: [jsx("div", { className: theme.sectionTitle, children: title }), description && (jsx("div", { className: theme.sectionDescription, children: description })), action && jsx("div", { className: theme.sectionAction, children: action })] }), jsx("div", { className: cn(theme.sectionContent, contentClassName), children: children })] }));
+});
+FormLayoutSection.displayName = "FormLayout.Section";
+
+export { FormLayoutSection };

package/dist/components/layout/FormLayout/index.d.ts

@@ -0,0 +1,3 @@
+export { FormLayout } from "./FormLayout";
+export type { FormLayoutProps, FormLayoutHeaderProps, FormLayoutBodyProps, FormLayoutSectionProps, FormLayoutFooterProps, FormLayoutTheme, FormLayoutThemeOverrides, } from "./FormLayout.types";
+export { formLayoutTheme } from "./FormLayout.theme";

package/dist/components/layout/PageLayout/PageLayout.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { PageLayoutProps } from "./PageLayout.types";
+export declare const PageLayout: React.ForwardRefExoticComponent<PageLayoutProps & React.RefAttributes<HTMLDivElement>> & {
+    Sidebar: React.ForwardRefExoticComponent<import("./PageLayout.types").PageLayoutSidebarProps & React.RefAttributes<HTMLElement>>;
+    Header: React.ForwardRefExoticComponent<import("./PageLayout.types").PageLayoutHeaderProps & React.RefAttributes<HTMLElement>>;
+    Content: React.ForwardRefExoticComponent<import("./PageLayout.types").PageLayoutContentProps & React.RefAttributes<HTMLElement>>;
+};

package/dist/components/layout/PageLayout/PageLayout.js

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { pageLayoutTheme } from './PageLayout.theme.js';
+import { PageLayoutSidebar } from './PageLayoutSidebar.js';
+import { PageLayoutHeader } from './PageLayoutHeader.js';
+import { PageLayoutContent } from './PageLayoutContent.js';
+
+const PageLayoutRoot = React__default.forwardRef(({ className, theme: customTheme, children, ...props }, ref) => {
+    const theme = { ...pageLayoutTheme, ...customTheme };
+    // Separate Sidebar children from the rest (Header, Content)
+    // so we can wrap non-sidebar children in a vertical main column.
+    const childArray = React__default.Children.toArray(children);
+    const sidebar = [];
+    const main = [];
+    childArray.forEach((child) => {
+        if (React__default.isValidElement(child) && child.type === PageLayoutSidebar) {
+            sidebar.push(child);
+        }
+        else {
+            main.push(child);
+        }
+    });
+    return (jsxs("div", { ref: ref, className: cn(theme.root, className), ...props, children: [sidebar, jsx("div", { className: cn(theme.main), children: main })] }));
+});
+PageLayoutRoot.displayName = "PageLayout";
+const PageLayout = Object.assign(PageLayoutRoot, {
+    Sidebar: PageLayoutSidebar,
+    Header: PageLayoutHeader,
+    Content: PageLayoutContent,
+});
+
+export { PageLayout };

package/dist/components/layout/PageLayout/PageLayout.theme.d.ts

@@ -0,0 +1,2 @@
+import type { PageLayoutTheme } from "./PageLayout.types";
+export declare const pageLayoutTheme: PageLayoutTheme;

package/dist/components/layout/PageLayout/PageLayout.theme.js

@@ -0,0 +1,10 @@
+const pageLayoutTheme = {
+    root: "flex h-screen overflow-hidden bg-[var(--color-background)]",
+    sidebar: "flex flex-col shrink-0 border-r border-[var(--color-border)] bg-[var(--color-background-secondary)] overflow-y-auto",
+    sidebarCollapsed: "hidden lg:flex",
+    main: "flex flex-col flex-1 min-w-0 overflow-hidden",
+    header: "shrink-0 border-b border-[var(--color-border)] bg-[var(--color-background)]",
+    content: "flex-1 overflow-y-auto",
+};
+
+export { pageLayoutTheme };

package/dist/components/layout/PageLayout/PageLayout.types.d.ts

@@ -0,0 +1,39 @@
+import React from "react";
+export interface PageLayoutTheme {
+    root: string;
+    sidebar: string;
+    sidebarCollapsed: string;
+    main: string;
+    header: string;
+    content: string;
+}
+export interface PageLayoutThemeOverrides {
+    root?: string;
+    sidebar?: string;
+    sidebarCollapsed?: string;
+    main?: string;
+    header?: string;
+    content?: string;
+}
+export interface PageLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Theme overrides for the root container. */
+    theme?: PageLayoutThemeOverrides;
+}
+export interface PageLayoutSidebarProps extends React.HTMLAttributes<HTMLElement> {
+    /** Width of the sidebar (CSS value). Defaults to "16rem". */
+    width?: string;
+    /** Whether the sidebar is collapsed on mobile. Defaults to true. */
+    collapsedOnMobile?: boolean;
+    /** Theme overrides for the sidebar. */
+    theme?: PageLayoutThemeOverrides;
+}
+export interface PageLayoutHeaderProps extends React.HTMLAttributes<HTMLElement> {
+    /** Whether the header is sticky. Defaults to true. */
+    sticky?: boolean;
+    /** Theme overrides for the header. */
+    theme?: PageLayoutThemeOverrides;
+}
+export interface PageLayoutContentProps extends React.HTMLAttributes<HTMLElement> {
+    /** Theme overrides for the content area. */
+    theme?: PageLayoutThemeOverrides;
+}

package/dist/components/layout/PageLayout/PageLayoutContent.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { PageLayoutContentProps } from "./PageLayout.types";
+export declare const PageLayoutContent: React.ForwardRefExoticComponent<PageLayoutContentProps & React.RefAttributes<HTMLElement>>;

package/dist/components/layout/PageLayout/PageLayoutContent.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { pageLayoutTheme } from './PageLayout.theme.js';
+
+const PageLayoutContent = React__default.forwardRef(({ className, theme: customTheme, children, ...props }, ref) => {
+    const theme = { ...pageLayoutTheme, ...customTheme };
+    return (jsx("main", { ref: ref, className: cn(theme.content, className), ...props, children: children }));
+});
+PageLayoutContent.displayName = "PageLayout.Content";
+
+export { PageLayoutContent };

package/dist/components/layout/PageLayout/PageLayoutHeader.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { PageLayoutHeaderProps } from "./PageLayout.types";
+export declare const PageLayoutHeader: React.ForwardRefExoticComponent<PageLayoutHeaderProps & React.RefAttributes<HTMLElement>>;

package/dist/components/layout/PageLayout/PageLayoutHeader.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { pageLayoutTheme } from './PageLayout.theme.js';
+
+const PageLayoutHeader = React__default.forwardRef(({ sticky = true, className, theme: customTheme, children, ...props }, ref) => {
+    const theme = { ...pageLayoutTheme, ...customTheme };
+    return (jsx("header", { ref: ref, className: cn(theme.header, sticky && "sticky top-0 z-10", className), ...props, children: children }));
+});
+PageLayoutHeader.displayName = "PageLayout.Header";
+
+export { PageLayoutHeader };

package/dist/components/layout/PageLayout/PageLayoutSidebar.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { PageLayoutSidebarProps } from "./PageLayout.types";
+export declare const PageLayoutSidebar: React.ForwardRefExoticComponent<PageLayoutSidebarProps & React.RefAttributes<HTMLElement>>;

package/dist/components/layout/PageLayout/PageLayoutSidebar.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { pageLayoutTheme } from './PageLayout.theme.js';
+
+const PageLayoutSidebar = React__default.forwardRef(({ width = "16rem", collapsedOnMobile = true, className, theme: customTheme, style, children, ...props }, ref) => {
+    const theme = { ...pageLayoutTheme, ...customTheme };
+    return (jsx("aside", { ref: ref, className: cn(theme.sidebar, collapsedOnMobile && theme.sidebarCollapsed, className), style: { width, ...style }, ...props, children: children }));
+});
+PageLayoutSidebar.displayName = "PageLayout.Sidebar";
+
+export { PageLayoutSidebar };

package/dist/components/layout/PageLayout/index.d.ts

@@ -0,0 +1,3 @@
+export { PageLayout } from "./PageLayout";
+export type { PageLayoutProps, PageLayoutSidebarProps, PageLayoutHeaderProps, PageLayoutContentProps, PageLayoutTheme, PageLayoutThemeOverrides, } from "./PageLayout.types";
+export { pageLayoutTheme } from "./PageLayout.theme";

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

@@ -0,0 +1,2 @@
+export * from "./FormLayout";
+export * from "./PageLayout";

package/dist/hooks/useSelectPortal.d.ts

@@ -6,6 +6,8 @@ export interface UseSimpleDropdownOptions {
     offset?: number;
     estimatedWidth?: number;
     autoWidth?: boolean;
+    onClose?: () => void;
+    stickyTracking?: boolean;
 }
 export interface SimpleDropdownReturn {
     position: {
@@ -24,5 +26,5 @@ export interface SimpleDropdownReturn {
  * Uses position: fixed with pure viewport coordinates to properly follow scroll
  * Fixes critical issues: dropdown not following scroll & multiple dropdowns not working
  */
-export declare const useSimpleDropdown: ({ triggerRef, isOpen, placement, offset, estimatedWidth, autoWidth, }: UseSimpleDropdownOptions) => SimpleDropdownReturn;
-export declare const useSelectPortal: ({ triggerRef, isOpen, placement, offset, estimatedWidth, autoWidth, }: UseSimpleDropdownOptions) => SimpleDropdownReturn;
+export declare const useSimpleDropdown: ({ triggerRef, isOpen, placement, offset, estimatedWidth, autoWidth, onClose, stickyTracking, }: UseSimpleDropdownOptions) => SimpleDropdownReturn;
+export declare const useSelectPortal: ({ triggerRef, isOpen, placement, offset, estimatedWidth, autoWidth, onClose, stickyTracking, }: UseSimpleDropdownOptions) => SimpleDropdownReturn;

package/dist/hooks/useSelectPortal.js

@@ -1,19 +1,11 @@
-import { useRef, useState, useCallback, useLayoutEffect, useMemo } from 'react';
+import { useRef, useState, useCallback, useLayoutEffect } from 'react';
 
-// Simple debounce utility
-const debounce = (func, wait) => {
-    let timeout;
-    return () => {
-        clearTimeout(timeout);
-        timeout = setTimeout(func, wait);
-    };
-};
 /**
  * Fixed dropdown positioning hook
  * Uses position: fixed with pure viewport coordinates to properly follow scroll
  * Fixes critical issues: dropdown not following scroll & multiple dropdowns not working
  */
-const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", offset = 4, estimatedWidth, autoWidth = false, }) => {
+const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", offset = 4, estimatedWidth, autoWidth = false, onClose, stickyTracking = false, }) => {
     const contentRef = useRef(null);
     const [position, setPosition] = useState({ top: -9999, left: -9999, width: 0 });
     const [cssVariables, setCssVariables] = useState({});
@@ -22,6 +14,7 @@ const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", off
     const [isReady, setIsReady] = useState(false);
     const isInitialRenderRef = useRef(true);
     const rafIdRef = useRef(null);
+    const frozenPlacementRef = useRef(placement);
     // Enhanced measurement system - use actual DOM measurements when available
     const measureDropdownHeight = useCallback(() => {
         if (contentRef.current) {
@@ -130,6 +123,7 @@ const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", off
         }
         setActualPlacement(finalPlacement);
         setIsFlipped(needsFlip);
+        frozenPlacementRef.current = finalPlacement;
         // Calculate position based on final placement
         let top = 0;
         let left = 0;
@@ -175,42 +169,45 @@ const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", off
             }
         }
         // Collision detection - handle both horizontal and vertical overflow
-        // Horizontal bounds checking
-        const rightEdge = left + dropdownWidth;
-        const overflow = rightEdge - (viewportWidth - margin);
-        if (overflow > 0) {
-            // Shift left just enough to fit
-            const shiftedLeft = left - overflow;
-            if (shiftedLeft >= margin) {
-                left = shiftedLeft;
+        // Skip clamping for stickyTracking so the dropdown follows the trigger past viewport edges
+        if (!stickyTracking) {
+            // Horizontal bounds checking
+            const rightEdge = left + dropdownWidth;
+            const overflow = rightEdge - (viewportWidth - margin);
+            if (overflow > 0) {
+                // Shift left just enough to fit
+                const shiftedLeft = left - overflow;
+                if (shiftedLeft >= margin) {
+                    left = shiftedLeft;
+                }
+                else {
+                    // Clamp to viewport margin
+                    left = margin;
+                }
             }
-            else {
-                // Clamp to viewport margin
+            // Handle left edge overflow
+            if (left < margin) {
                 left = margin;
             }
-        }
-        // Handle left edge overflow
-        if (left < margin) {
-            left = margin;
-        }
-        // Vertical bounds checking
-        const bottomEdge = top + dropdownHeight;
-        const verticalOverflow = bottomEdge - (viewportHeight - margin);
-        if (verticalOverflow > 0) {
-            // Shift up just enough to fit
-            const shiftedTop = top - verticalOverflow;
-            if (shiftedTop >= margin) {
-                top = shiftedTop;
+            // Vertical bounds checking
+            const bottomEdge = top + dropdownHeight;
+            const verticalOverflow = bottomEdge - (viewportHeight - margin);
+            if (verticalOverflow > 0) {
+                // Shift up just enough to fit
+                const shiftedTop = top - verticalOverflow;
+                if (shiftedTop >= margin) {
+                    top = shiftedTop;
+                }
+                else {
+                    // Clamp to viewport margin
+                    top = margin;
+                }
             }
-            else {
-                // Clamp to viewport margin
+            // Handle top edge overflow
+            if (top < margin) {
                 top = margin;
             }
         }
-        // Handle top edge overflow
-        if (top < margin) {
-            top = margin;
-        }
         setPosition({ top, left, width: dropdownWidth });
         // Calculate available space based on placement direction
         let availableSpace = 0;
@@ -242,7 +239,54 @@ const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", off
         }
         setCssVariables(cssVars);
         // Mark initial render as complete after first calculation
-    }, [measureDropdownHeight, measureDropdownWidth, offset, placement, triggerRef]);
+    }, [measureDropdownHeight, measureDropdownWidth, offset, placement, triggerRef, stickyTracking]);
+    // Direct DOM mutation for stickyTracking — bypasses React state for zero-lag scroll tracking
+    const updatePositionInDOM = useCallback(() => {
+        if (!triggerRef.current || !contentRef.current)
+            return;
+        const rect = triggerRef.current.getBoundingClientRect();
+        const frozen = frozenPlacementRef.current;
+        const dropdownHeight = measureDropdownHeight();
+        const dropdownWidth = measureDropdownWidth();
+        let top = 0;
+        let left = 0;
+        if (frozen.startsWith("top") || frozen.startsWith("bottom")) {
+            if (frozen.includes("start")) {
+                left = rect.left;
+            }
+            else if (frozen.includes("end")) {
+                left = rect.right - dropdownWidth;
+            }
+            else {
+                left = rect.left + (rect.width / 2) - (dropdownWidth / 2);
+            }
+            if (frozen.startsWith("top")) {
+                top = rect.top - dropdownHeight - offset;
+            }
+            else {
+                top = rect.bottom + offset;
+            }
+        }
+        else if (frozen.startsWith("left") || frozen.startsWith("right")) {
+            if (frozen.includes("start")) {
+                top = rect.top;
+            }
+            else if (frozen.includes("end")) {
+                top = rect.bottom - dropdownHeight;
+            }
+            else {
+                top = rect.top + (rect.height / 2) - (dropdownHeight / 2);
+            }
+            if (frozen.startsWith("left")) {
+                left = rect.left - dropdownWidth - offset;
+            }
+            else {
+                left = rect.right + offset;
+            }
+        }
+        contentRef.current.style.top = `${top}px`;
+        contentRef.current.style.left = `${left}px`;
+    }, [triggerRef, measureDropdownHeight, measureDropdownWidth, offset]);
     // Reset initial render flag when dropdown opens
     useLayoutEffect(() => {
         if (!isOpen) {
@@ -280,20 +324,59 @@ const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", off
             return;
         calculatePosition();
     }, [isOpen, calculatePosition]);
-    // Debounced position updates for better performance
-    const debouncedCalculatePosition = useMemo(() => debounce(calculatePosition, 16), // ~60fps
-    [calculatePosition]);
-    // Update position on scroll and resize - debounced for performance
+    // rAF-synced scroll handler: skips internal scrolls, detects off-screen trigger
+    const scrollRafRef = useRef(null);
+    const handleScroll = useCallback((e) => {
+        // Skip if scroll originated inside the popover content
+        if (contentRef.current && contentRef.current.contains(e.target)) {
+            return;
+        }
+        // Close if trigger has scrolled off-screen (skip for stickyTracking)
+        if (!stickyTracking && triggerRef.current) {
+            const rect = triggerRef.current.getBoundingClientRect();
+            const isOffScreen = rect.bottom < 0 || rect.top > window.innerHeight
+                || rect.right < 0 || rect.left > window.innerWidth;
+            if (isOffScreen && onClose) {
+                onClose();
+                return;
+            }
+        }
+        if (stickyTracking) {
+            // Direct DOM mutation — zero-lag tracking, bypasses React state entirely
+            updatePositionInDOM();
+        }
+        else {
+            if (scrollRafRef.current)
+                cancelAnimationFrame(scrollRafRef.current);
+            scrollRafRef.current = requestAnimationFrame(() => {
+                scrollRafRef.current = null;
+                calculatePosition();
+            });
+        }
+    }, [calculatePosition, onClose, triggerRef, stickyTracking, updatePositionInDOM]);
+    const handleResize = useCallback(() => {
+        if (scrollRafRef.current)
+            cancelAnimationFrame(scrollRafRef.current);
+        scrollRafRef.current = requestAnimationFrame(() => {
+            scrollRafRef.current = null;
+            calculatePosition();
+        });
+    }, [calculatePosition]);
+    // Update position on scroll and resize - rAF-synced for smooth tracking
     useLayoutEffect(() => {
         if (!isOpen)
             return;
-        window.addEventListener("scroll", debouncedCalculatePosition, { passive: true, capture: true });
-        window.addEventListener("resize", debouncedCalculatePosition, { passive: true });
+        window.addEventListener("scroll", handleScroll, { passive: true, capture: true });
+        window.addEventListener("resize", handleResize, { passive: true });
         return () => {
-            window.removeEventListener("scroll", debouncedCalculatePosition, true);
-            window.removeEventListener("resize", debouncedCalculatePosition);
+            window.removeEventListener("scroll", handleScroll, true);
+            window.removeEventListener("resize", handleResize);
+            if (scrollRafRef.current) {
+                cancelAnimationFrame(scrollRafRef.current);
+                scrollRafRef.current = null;
+            }
         };
-    }, [isOpen, debouncedCalculatePosition]);
+    }, [isOpen, handleScroll, handleResize]);
     // Recalculate when dropdown content resizes (e.g. search filtering)
     useLayoutEffect(() => {
         if (!isOpen)
@@ -303,13 +386,18 @@ const useSimpleDropdown = ({ triggerRef, isOpen, placement = "bottom-start", off
         if (typeof ResizeObserver === "undefined")
             return;
         const observer = new ResizeObserver(() => {
-            calculatePosition();
+            if (stickyTracking) {
+                updatePositionInDOM();
+            }
+            else {
+                calculatePosition();
+            }
         });
         observer.observe(contentRef.current);
         return () => {
             observer.disconnect();
         };
-    }, [isOpen, calculatePosition]);
+    }, [isOpen, calculatePosition, stickyTracking, updatePositionInDOM]);
     return {
         position,
         cssVariables,

package/dist/index.d.ts

@@ -1,6 +1,8 @@
 export * from "./components/core";
+export * from "./components/data-display";
 export * from "./components/forms";
 export * from "./components/charts";
+export * from "./components/layout";
 export * from "./components/effects";
 export { cn } from "./utils/cn";
 export { debounce } from "./utils/debounce";