flikkui 0.1.0-beta.4 → 0.1.0-beta.6

package/dist/components/core/Segmented/Segmented.js

@@ -0,0 +1,69 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useRef, useState, useEffect, useMemo } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { debounce } from '../../../utils/debounce.js';
+import { segmentedTheme } from './Segmented.theme.js';
+import { SegmentedContext } from './SegmentedContext.js';
+import { SegmentedItem } from './SegmentedItem.js';
+
+/**
+ * Segmented component for selecting one option from a set of segments
+ * Uses compound component pattern with Segmented.Item
+ */
+var SegmentedComponent = React__default.forwardRef(function (_a, ref) {
+    var _b;
+    var value = _a.value, onChange = _a.onChange, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.block, block = _e === void 0 ? false : _e, children = _a.children, className = _a.className, slidingBackgroundClassName = _a.slidingBackgroundClassName, theme = _a.theme, props = __rest(_a, ["value", "onChange", "size", "disabled", "block", "children", "className", "slidingBackgroundClassName", "theme"]);
+    var containerRef = useRef(null);
+    var _f = useState({}), activeStyle = _f[0], setActiveStyle = _f[1];
+    var updateActiveStyle = function () {
+        if (!containerRef.current || !value)
+            return;
+        var activeButton = containerRef.current.querySelector("[data-value=\"".concat(value, "\"]"));
+        if (activeButton) {
+            var containerRect = containerRef.current.getBoundingClientRect();
+            var buttonRect = activeButton.getBoundingClientRect();
+            setActiveStyle({
+                width: buttonRect.width,
+                height: buttonRect.height,
+                transform: "translateX(".concat(buttonRect.left - containerRect.left - 2, "px)"),
+            });
+        }
+    };
+    useEffect(function () {
+        updateActiveStyle();
+    }, [value]);
+    // Debounced resize handler for better performance
+    var debouncedUpdateActiveStyle = useMemo(function () { return debounce(updateActiveStyle, 100); }, [updateActiveStyle]);
+    useEffect(function () {
+        window.addEventListener('resize', debouncedUpdateActiveStyle);
+        return function () { return window.removeEventListener('resize', debouncedUpdateActiveStyle); };
+    }, [debouncedUpdateActiveStyle]);
+    var contextValue = {
+        selectedValue: value,
+        onChange: onChange,
+        size: size,
+        disabled: disabled,
+    };
+    return (React__default.createElement(SegmentedContext.Provider, { value: contextValue },
+        React__default.createElement("div", __assign({ ref: function (node) {
+                containerRef.current = node;
+                if (typeof ref === 'function') {
+                    ref(node);
+                }
+                else if (ref) {
+                    ref.current = node;
+                }
+            }, role: "tablist", "aria-orientation": "horizontal", className: cn((theme === null || theme === void 0 ? void 0 : theme.baseStyle) || segmentedTheme.baseStyle, ((_b = theme === null || theme === void 0 ? void 0 : theme.sizes) === null || _b === void 0 ? void 0 : _b[size]) || segmentedTheme.sizes[size], block && ((theme === null || theme === void 0 ? void 0 : theme.blockStyle) || segmentedTheme.blockStyle), disabled && ((theme === null || theme === void 0 ? void 0 : theme.disabledStyle) || segmentedTheme.disabledStyle), className // User overrides take precedence
+            ), "data-size": size, "data-disabled": disabled, "data-block": block }, props),
+            value && (React__default.createElement("div", { className: cn((theme === null || theme === void 0 ? void 0 : theme.slidingBackgroundStyle) || segmentedTheme.slidingBackgroundStyle, slidingBackgroundClassName // User overrides take precedence
+                ), style: activeStyle })),
+            children)));
+});
+// Set display name for dev tools and Storybook
+SegmentedComponent.displayName = "Segmented";
+// Create compound component with proper typing
+var Segmented = Object.assign(SegmentedComponent, {
+    Item: SegmentedItem,
+});
+
+export { Segmented, Segmented as default };

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

@@ -0,0 +1,40 @@
+/**
+ * Default theme for the Segmented component
+ */
+var segmentedTheme = {
+    // Base styles for the segmented container
+    baseStyle: "relative flex rounded-[var(--segmented-rounded)] p-[2px] bg-neutral-100 overflow-hidden",
+    // Size variants using CSS variables
+    sizes: {
+        sm: "min-h-[var(--segmented-min-h-sm)]",
+        md: "min-h-[var(--segmented-min-h-md)]",
+        lg: "min-h-[var(--segmented-min-h-lg)]",
+    },
+    // Block style
+    blockStyle: "w-full",
+    // Disabled style
+    disabledStyle: "opacity-50 cursor-not-allowed pointer-events-none",
+    // Sliding background style with CSS variables
+    slidingBackgroundStyle: "absolute top-[2px] left-[2px] rounded-[calc(var(--segmented-rounded)-1.5px)] transition-transform duration-200 ease-out pointer-events-none z-0 bg-[var(--segmented-active-bg)] shadow-[var(--segmented-active-shadow)]",
+};
+/**
+ * Default theme for the SegmentedItem component
+ */
+var segmentedItemTheme = {
+    // Base styles for the segmented item
+    baseStyle: "relative flex min-h-full min-w-fit flex-1 items-center justify-center transition-all duration-200 rounded-[calc(var(--segmented-rounded)-1.5px)] font-medium cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-1",
+    // Size variants using CSS variables
+    sizes: {
+        sm: "text-[length:var(--segmented-text-size-sm)] px-[var(--segmented-px-sm)]",
+        md: "text-[length:var(--segmented-text-size-md)] px-[var(--segmented-px-md)]",
+        lg: "text-[length:var(--segmented-text-size-lg)] px-[var(--segmented-px-lg)]",
+    },
+    // Selected state
+    selectedStyle: "text-neutral-900 z-10",
+    // Unselected state
+    unselectedStyle: "text-neutral-500 hover:text-neutral-800 ",
+    // Disabled state
+    disabledStyle: "opacity-50 cursor-not-allowed pointer-events-none",
+};
+
+export { segmentedItemTheme, segmentedTheme };

package/dist/components/core/Segmented/SegmentedContext.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+/**
+ * Context for sharing state between Segmented container and SegmentedItem components
+ */
+var SegmentedContext = createContext(null);
+
+export { SegmentedContext };

package/dist/components/core/Segmented/SegmentedItem.js

@@ -0,0 +1,30 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useContext } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { segmentedItemTheme } from './Segmented.theme.js';
+import { SegmentedContext } from './SegmentedContext.js';
+
+var SegmentedItem = React__default.forwardRef(function (_a, ref) {
+    var value = _a.value, _b = _a.disabled, disabled = _b === void 0 ? false : _b, children = _a.children, className = _a.className, onClick = _a.onClick, props = __rest(_a, ["value", "disabled", "children", "className", "onClick"]);
+    var context = useContext(SegmentedContext);
+    if (!context) {
+        throw new Error("SegmentedItem must be used within a Segmented component");
+    }
+    var selectedValue = context.selectedValue, onChange = context.onChange, size = context.size, contextDisabled = context.disabled;
+    var isSelected = value === selectedValue;
+    var isDisabled = disabled || contextDisabled;
+    var handleClick = function (event) {
+        if (isDisabled)
+            return;
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    };
+    return (React__default.createElement("button", __assign({ ref: ref, type: "button", role: "tab", "aria-selected": isSelected, disabled: isDisabled, className: cn(segmentedItemTheme.baseStyle, segmentedItemTheme.sizes[size], isSelected
+            ? segmentedItemTheme.selectedStyle
+            : segmentedItemTheme.unselectedStyle, isDisabled && segmentedItemTheme.disabledStyle, className // User overrides take precedence
+        ), onClick: handleClick, "data-value": value, "data-selected": isSelected, "data-disabled": isDisabled }, props), children));
+});
+// Set display name for dev tools and Storybook
+SegmentedItem.displayName = "SegmentedItem";
+
+export { SegmentedItem, SegmentedItem as default };

package/dist/components/core/Stepper/Stepper.js

@@ -0,0 +1,57 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { stepperTheme } from './Stepper.theme.js';
+import StepperItem from './components/StepperItem.js';
+import ProgressIndicator from './components/ProgressIndicator.js';
+
+/**
+ * Stepper component for displaying multi-step vertical progress
+ *
+ * @example
+ * ```tsx
+ * <Stepper
+ *   activeStep={1}
+ *   steps={[
+ *     { label: "Create account", completed: true },
+ *     { label: "Profile information", active: true },
+ *     { label: "Business information" },
+ *     { label: "Theme" },
+ *     { label: "Preview" }
+ *   ]}
+ * />
+ * ```
+ */
+var Stepper = React__default.forwardRef(function (_a, ref) {
+    var activeStep = _a.activeStep, steps = _a.steps, className = _a.className, props = __rest(_a, ["activeStep", "steps", "className"]);
+    // Helper function to determine step status
+    var getStepStatus = function (index, step) {
+        if (step.completed && (step.active || index === activeStep))
+            return 'active-complete';
+        if (step.completed)
+            return 'complete';
+        if (step.active || index === activeStep)
+            return 'current';
+        return 'upcoming';
+    };
+    return (
+    // Main navigation wrapper with ARIA label for accessibility
+    React__default.createElement("nav", __assign({ ref: ref, "aria-label": "Progress", className: cn(stepperTheme.baseStyle, className) }, props),
+        React__default.createElement("ol", { role: "list", className: "" }, steps === null || steps === void 0 ? void 0 : steps.map(function (step, stepIdx) {
+            var status = getStepStatus(stepIdx, step);
+            var isLast = stepIdx === steps.length - 1;
+            // Get the status of the next step (if there is one)
+            var nextStepStatus = !isLast
+                ? getStepStatus(stepIdx + 1, steps[stepIdx + 1])
+                : undefined;
+            return (
+            // Individual step container
+            React__default.createElement("li", { key: step.label, className: cn(!isLast ? 'pb-10' : '', 'relative') },
+                React__default.createElement(StepperItem, { step: step, status: status, nextStepStatus: nextStepStatus, isLast: isLast, stepNumber: stepIdx + 1 })));
+        })),
+        React__default.createElement(ProgressIndicator, { activeStep: activeStep, totalSteps: steps.length })));
+});
+// Set display name for dev tools and Storybook
+Stepper.displayName = "Stepper";
+
+export { Stepper as default };

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

@@ -0,0 +1,9 @@
+/**
+ * Default theme for the Stepper component
+ * Matches the original visual design while using CSS variables
+ */
+var stepperTheme = {
+    // Base stepper container styles
+    baseStyle: ""};
+
+export { stepperTheme };

package/dist/components/core/Stepper/components/ConnectorLine.js

@@ -0,0 +1,42 @@
+import React__default from 'react';
+import { cn } from '../../../../utils/cn.js';
+import { motion } from '../../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+
+/**
+ * ConnectorLine component for displaying the vertical line between steps
+ */
+var ConnectorLine = function (_a) {
+    var status = _a.status, isLast = _a.isLast, nextStepStatus = _a.nextStepStatus, _b = _a.animate, animate = _b === void 0 ? false : _b, _c = _a.className, className = _c === void 0 ? "" : _c;
+    // If this is the last item, don't render a connector
+    if (isLast)
+        return null;
+    // Base styles for connector line
+    var baseStyles = "absolute top-4 left-4 -ml-px mt-0.5 h-full";
+    // Determine the connector style based on current and next step status
+    var statusStyles;
+    if (status === "complete" || status === "active-complete") {
+        if (nextStepStatus === "current") {
+            // Gradient only when connecting a completed step to the current step
+            statusStyles = "w-0.5 bg-gradient-to-b from-success-base to-primary-base";
+        }
+        else {
+            // Solid green for connections between completed steps
+            statusStyles = "w-0.5 bg-success-base";
+        }
+    }
+    else {
+        // Dashed line for incomplete steps
+        statusStyles = "border-l-2 border-dashed border-neutral-200";
+    }
+    // Only animate the connector line when it's a completed step connecting to the current step
+    var shouldAnimate = animate && (status === "complete" || status === "active-complete") && nextStepStatus === "current";
+    if (shouldAnimate) {
+        return (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("div", { "aria-hidden": "true", className: cn(baseStyles, "border-l-2 border-dashed border-neutral-200") }),
+            React__default.createElement(motion.div, { "aria-hidden": "true", className: cn(baseStyles, statusStyles, className, "origin-top"), initial: { scaleY: 0, opacity: 0 }, animate: { scaleY: 1, opacity: 1 }, transition: { duration: 0.8 } })));
+    }
+    // Non-animated connector - immediately show at full height
+    return (React__default.createElement("div", { "aria-hidden": "true", className: cn(baseStyles, statusStyles, className) }));
+};
+
+export { ConnectorLine as default };

package/dist/components/core/Stepper/components/IconCircle.js

@@ -0,0 +1,44 @@
+import React__default, { useState, useEffect } from 'react';
+import { cn } from '../../../../utils/cn.js';
+import '../../../../node_modules/tslib/tslib.es6.js';
+import '../../../../icons/core/PlusIcon.js';
+import '../../../../icons/core/MinusIcon.js';
+import '../../../../icons/core/SearchIcon.js';
+import '../../../../icons/core/LockIcon.js';
+import '../../../../icons/core/DollarIcon.js';
+import { TickIcon } from '../../../../icons/core/TickIcon.js';
+
+/**
+ * IconCircle component for displaying step status with consistent styling
+ */
+var IconCircle = function (_a) {
+    var status = _a.status, stepNumber = _a.stepNumber, _b = _a.animate, animate = _b === void 0 ? false : _b, _c = _a.className, className = _c === void 0 ? "" : _c;
+    // Track the visual status with a delay
+    var _d = useState(status), visualStatus = _d[0], setVisualStatus = _d[1];
+    // Update the visual status with a delay when the actual status changes
+    useEffect(function () {
+        if (animate && (status === "current" || status === "active-complete")) {
+            // Delay updating to "current" or "active-complete" status by 0.5 seconds
+            var timer_1 = setTimeout(function () {
+                setVisualStatus(status);
+            }, 500);
+            return function () { return clearTimeout(timer_1); };
+        }
+        else {
+            // For non-animated or non-current statuses, update immediately
+            setVisualStatus(status);
+        }
+    }, [status, animate]);
+    // Common base styles for all states
+    var baseStyles = "relative z-10 flex size-8 items-center justify-center rounded-full transition-all duration-300";
+    // Styles specific to each status
+    var statusStyles = {
+        complete: "bg-success-base ring-2 ring-white",
+        current: "border border-primary-base bg-white shadow-xl shadow-primary/20 ring-4 ring-primary-base/20",
+        upcoming: "border border-neutral-300 bg-white text-text-secondary/70",
+        "active-complete": "bg-success-base ring-2 ring-white shadow-xl shadow-success/20 ring-4 ring-success-base/20"
+    };
+    return (React__default.createElement("div", { className: cn(baseStyles, statusStyles[visualStatus], className) }, visualStatus === "complete" || visualStatus === "active-complete" ? (React__default.createElement(TickIcon, { size: "sm", className: "text-white", "aria-hidden": "true", strokeWidth: 3 })) : (React__default.createElement("div", { className: "font-bold text-sm ".concat(visualStatus === "current" ? "text-primary-base" : "") }, stepNumber))));
+};
+
+export { IconCircle as default };

package/dist/components/core/Stepper/components/ProgressIndicator.js

@@ -0,0 +1,12 @@
+import React__default from 'react';
+
+var ProgressIndicator = function (_a) {
+    var activeStep = _a.activeStep, totalSteps = _a.totalSteps;
+    return (React__default.createElement("div", { className: "text-xs text-text-placeholder font-medium mt-4" },
+        "Step ",
+        activeStep + 1,
+        " of ",
+        totalSteps));
+};
+
+export { ProgressIndicator as default };

package/dist/components/core/Stepper/components/StepContent.js

@@ -0,0 +1,36 @@
+import React__default, { useState, useEffect } from 'react';
+import { cn } from '../../../../utils/cn.js';
+
+/**
+ * StepContent component for displaying step label and description
+ */
+var StepContent = function (_a) {
+    var step = _a.step, status = _a.status, _b = _a.animate, animate = _b === void 0 ? false : _b, _c = _a.className, className = _c === void 0 ? "" : _c;
+    // Track the visual status with a delay
+    var _d = useState(status), visualStatus = _d[0], setVisualStatus = _d[1];
+    // Update the visual status with a delay when the actual status changes
+    useEffect(function () {
+        if (animate && (status === "current" || status === "active-complete")) {
+            // Delay updating to "current" or "active-complete" status by 1 second to match IconCircle
+            var timer_1 = setTimeout(function () {
+                setVisualStatus(status);
+            }, 1000);
+            return function () { return clearTimeout(timer_1); };
+        }
+        else {
+            // For non-animated or non-current statuses, update immediately
+            setVisualStatus(status);
+        }
+    }, [status, animate]);
+    return (React__default.createElement("div", { className: cn("ml-4 flex min-w-0 flex-col", className) },
+        React__default.createElement("div", { className: cn("text-sm font-semibold", visualStatus === "current" || visualStatus === "active-complete"
+                ? "text-primary-base"
+                : visualStatus === "upcoming"
+                    ? "text-text-secondary"
+                    : visualStatus === "complete"
+                        ? "text-text-primary"
+                        : "") }, step.label),
+        step.description && (React__default.createElement("div", { className: "text-sm text-text-secondary" }, step.description))));
+};
+
+export { StepContent as default };

package/dist/components/core/Stepper/components/StepperItem.js

@@ -0,0 +1,22 @@
+import React__default from 'react';
+import { cn } from '../../../../utils/cn.js';
+import IconCircle from './IconCircle.js';
+import ConnectorLine from './ConnectorLine.js';
+import StepContent from './StepContent.js';
+
+/**
+ * StepperItem component for rendering an individual step
+ */
+var StepperItem = function (_a) {
+    var step = _a.step, status = _a.status, nextStepStatus = _a.nextStepStatus, isLast = _a.isLast, stepNumber = _a.stepNumber, _b = _a.className, className = _b === void 0 ? "" : _b;
+    // Content that goes inside either the <a> or <div> wrapper
+    var innerContent = (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { className: "flex h-9 items-center", "aria-hidden": "true" },
+            React__default.createElement(IconCircle, { status: status, stepNumber: stepNumber, animate: status === "current" || status === "active-complete" })),
+        React__default.createElement(StepContent, { step: step, status: status, animate: status === "current" || status === "active-complete" })));
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(ConnectorLine, { status: status, isLast: isLast, nextStepStatus: nextStepStatus, animate: status === "complete" && nextStepStatus === "current" }),
+        step.href ? (React__default.createElement("a", { href: step.href, className: cn("group relative flex items-start", className), "aria-current": status === "current" ? "step" : undefined }, innerContent)) : (React__default.createElement("div", { className: cn("group relative flex items-start", className), "aria-current": status === "current" ? "step" : undefined }, innerContent))));
+};
+
+export { StepperItem as default };

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

@@ -7,14 +7,14 @@ var tabsTheme = {
     // TabsList styles
     listStyle: "relative inline-flex items-center  flex-row border-b border-border gap-2",
     // TabsTrigger base styles with data-attribute state handling
-    triggerStyle: "relative inline-flex items-center justify-center whitespace-nowrap font-medium transition-all duration-300 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-base focus-visible:ring-offset-2 border-b-2 border-transparent hover:border-neutral-300 disabled:cursor-not-allowed disabled:opacity-50 text-text-muted hover:text-text-primary data-[state=active]:border-primary-base data-[state=active]:text-primary-base",
+    triggerStyle: "relative inline-flex items-center justify-center whitespace-nowrap font-medium transition-all duration-300 cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 border-b-2 border-transparent hover:border-neutral-300 disabled:cursor-not-allowed disabled:opacity-50 text-text-muted hover:text-text-primary data-[state=active]:border-primary data-[state=active]:text-primary",
     // TabsTrigger size variants
     triggerSizes: {
         sm: "px-2 py-1.5 text-sm gap-1",
         md: "px-2 py-2 text-sm gap-2",
     },
     // TabsContent styles  
-    contentStyle: "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-base focus-visible:ring-offset-2",
+    contentStyle: "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2",
 };
 
 export { tabsTheme };

package/dist/components/core/Tooltip/Tooltip.animations.js

@@ -0,0 +1,46 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+
+// Define optimized spring configurations
+var springConfig = {
+    type: "spring",
+    stiffness: 500,
+    damping: 30
+};
+/**
+ * Base animation variants for the tooltip - optimized for smooth positioning
+ */
+var baseTooltipVariants = {
+    initial: {
+        opacity: 0,
+        transition: { duration: 0.1 }
+    },
+    animate: {
+        opacity: 1,
+        transition: __assign(__assign({}, springConfig), { duration: 0.2 })
+    },
+    exit: {
+        opacity: 0,
+        transition: { duration: 0.15, damping: 35 }
+    }
+};
+/**
+ * Get animation variants based on tooltip placement
+ * @param placement - Tooltip placement (top, right, bottom, left)
+ * @returns Animation variants for the specified placement
+ */
+var getTooltipVariants = function (placement) {
+    switch (placement) {
+        case 'top':
+            return __assign(__assign({}, baseTooltipVariants), { initial: __assign(__assign({}, baseTooltipVariants.initial), { y: 2 }), animate: __assign(__assign({}, baseTooltipVariants.animate), { y: 0 }), exit: __assign(__assign({}, baseTooltipVariants.exit), { y: 2 }) });
+        case 'right':
+            return __assign(__assign({}, baseTooltipVariants), { initial: __assign(__assign({}, baseTooltipVariants.initial), { x: -2 }), animate: __assign(__assign({}, baseTooltipVariants.animate), { x: 0 }), exit: __assign(__assign({}, baseTooltipVariants.exit), { x: -2 }) });
+        case 'bottom':
+            return __assign(__assign({}, baseTooltipVariants), { initial: __assign(__assign({}, baseTooltipVariants.initial), { y: -2 }), animate: __assign(__assign({}, baseTooltipVariants.animate), { y: 0 }), exit: __assign(__assign({}, baseTooltipVariants.exit), { y: -2 }) });
+        case 'left':
+            return __assign(__assign({}, baseTooltipVariants), { initial: __assign(__assign({}, baseTooltipVariants.initial), { x: 2 }), animate: __assign(__assign({}, baseTooltipVariants.animate), { x: 0 }), exit: __assign(__assign({}, baseTooltipVariants.exit), { x: 2 }) });
+        default:
+            return baseTooltipVariants;
+    }
+};
+
+export { baseTooltipVariants, getTooltipVariants };

package/dist/components/core/Tooltip/Tooltip.js

@@ -0,0 +1,85 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useState, useRef, useCallback, useEffect } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { tooltipTheme } from './Tooltip.theme.js';
+import { getTooltipVariants } from './Tooltip.animations.js';
+import { useTooltipPositioning } from './useTooltipPositioning.js';
+import { AnimatePresence } from '../../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.js';
+import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+
+var Tooltip = function (_a) {
+    var content = _a.content, children = _a.children, _b = _a.placement, placement = _b === void 0 ? 'top' : _b, _c = _a.delay, delay = _c === void 0 ? 300 : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, className = _a.className, _e = _a.maxWidth, maxWidth = _e === void 0 ? "360px" : _e, _f = _a.minWidth, minWidth = _f === void 0 ? "fit-content" : _f, _g = _a.showOnFocus, showOnFocus = _g === void 0 ? true : _g, _h = _a.wrapText, wrapText = _h === void 0 ? false : _h, id = _a.id, themeOverrides = _a.theme, ariaLabel = _a["aria-label"], _j = _a.role, role = _j === void 0 ? 'tooltip' : _j;
+    var _k = useState(false), isVisible = _k[0], setIsVisible = _k[1];
+    var tooltipRef = useRef(null);
+    var triggerRef = useRef(null);
+    var timerRef = useRef(null);
+    // Merge global theme with component-specific overrides
+    var theme = __assign(__assign({}, tooltipTheme), (themeOverrides || {}));
+    // Use custom positioning hook
+    var debouncedPositioning = useTooltipPositioning({
+        tooltipRef: tooltipRef,
+        triggerRef: triggerRef,
+        placement: placement,
+        isVisible: isVisible,
+    }).debouncedPositioning;
+    // Event handlers - simplified timer management
+    var handleShowTooltip = useCallback(function () {
+        if (disabled)
+            return;
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
+        timerRef.current = setTimeout(function () {
+            setIsVisible(true);
+        }, delay);
+    }, [disabled, delay]);
+    var handleHideTooltip = useCallback(function () {
+        if (timerRef.current) {
+            clearTimeout(timerRef.current);
+        }
+        // Immediate hide for better responsiveness
+        setIsVisible(false);
+    }, []);
+    // Clean up timeout on unmount
+    useEffect(function () {
+        return function () {
+            if (timerRef.current) {
+                clearTimeout(timerRef.current);
+            }
+        };
+    }, []);
+    // Handle window resize with debouncing - only when tooltip is visible
+    useEffect(function () {
+        if (isVisible) {
+            window.addEventListener('resize', debouncedPositioning);
+            return function () {
+                window.removeEventListener('resize', debouncedPositioning);
+            };
+        }
+    }, [isVisible, debouncedPositioning]);
+    // Keyboard handler - removed isVisible dependency to prevent re-creation
+    var handleKeyDown = useCallback(function (e) {
+        if (e.key === 'Escape') {
+            handleHideTooltip();
+        }
+    }, [handleHideTooltip]);
+    // Event handlers for trigger element - using mouse events for better predictability
+    var triggerHandlers = __assign(__assign({ onMouseEnter: handleShowTooltip, onMouseLeave: handleHideTooltip }, (showOnFocus && {
+        onFocus: handleShowTooltip,
+        onBlur: handleHideTooltip,
+    })), { onKeyDown: handleKeyDown });
+    // Computed values - simplified without unnecessary memoization
+    var textOverflowClass = wrapText ? '' : 'text-ellipsis overflow-hidden whitespace-nowrap';
+    var widthClasses = cn(minWidth === 'fit-content' ? 'w-fit' : 'min-w-fit', textOverflowClass);
+    return (React__default.createElement("div", __assign({ className: "relative inline-block", ref: triggerRef }, triggerHandlers, { tabIndex: showOnFocus ? 0 : undefined, "aria-describedby": isVisible && id ? id : undefined }),
+        children,
+        React__default.createElement(AnimatePresence, null, isVisible && (React__default.createElement(motion.div, { id: id, role: role, ref: tooltipRef, style: {
+                maxWidth: maxWidth,
+                minWidth: minWidth !== 'fit-content' ? minWidth : undefined,
+                width: 'max-content'
+            }, className: cn(theme.baseStyle, theme[placement] || '', widthClasses, className), "aria-hidden": !isVisible, "aria-label": ariaLabel, "aria-live": role === 'tooltip' ? 'polite' : undefined, variants: getTooltipVariants(placement), initial: "initial", animate: "animate", exit: "exit" }, content)))));
+};
+// Set display name for dev tools and Storybook
+Tooltip.displayName = "Tooltip";
+
+export { Tooltip as default };

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

@@ -0,0 +1,11 @@
+var tooltipTheme = {
+    // Base style for the tooltip
+    baseStyle: "absolute z-50 bg-background border border-border rounded-lg p-1.5 px-2 shadow-xl text-xs font-medium text-text-primary transition-opacity duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 pointer-events-none",
+    // Placement styles - flattened
+    top: "bottom-full mb-2.5 text-center",
+    right: "left-full ml-2.5 text-left",
+    bottom: "top-full mt-2.5 text-center",
+    left: "right-full mr-2.5 text-right",
+};
+
+export { tooltipTheme };

package/dist/components/core/Tooltip/useTooltipPositioning.js

@@ -0,0 +1,59 @@
+import { useRef, useCallback, useEffect } from 'react';
+import { debounce } from '../../../utils/debounce.js';
+import '../../../node_modules/tslib/tslib.es6.js';
+
+var useTooltipPositioning = function (_a) {
+    var tooltipRef = _a.tooltipRef, triggerRef = _a.triggerRef, placement = _a.placement, isVisible = _a.isVisible;
+    // Stable refs to break dependency cycles
+    var placementRef = useRef(placement);
+    var isVisibleRef = useRef(isVisible);
+    // Update refs without causing re-renders
+    placementRef.current = placement;
+    isVisibleRef.current = isVisible;
+    // Optimized positioning function - reduces getBoundingClientRect calls
+    var positionTooltip = useCallback(function () {
+        if (!tooltipRef.current || !triggerRef.current || !isVisibleRef.current)
+            return;
+        var tooltipElement = tooltipRef.current;
+        var triggerElement = triggerRef.current;
+        var currentPlacement = placementRef.current;
+        // Single getBoundingClientRect call for trigger
+        var triggerRect = triggerElement.getBoundingClientRect();
+        // Only get tooltip rect when needed for centering calculations
+        if (currentPlacement === 'top' || currentPlacement === 'bottom') {
+            var tooltipRect = tooltipElement.getBoundingClientRect();
+            var leftOffset = (triggerRect.width - tooltipRect.width) / 2;
+            tooltipElement.style.left = "".concat(leftOffset, "px");
+        }
+        else if (currentPlacement === 'left' || currentPlacement === 'right') {
+            var tooltipRect = tooltipElement.getBoundingClientRect();
+            var topOffset = (triggerRect.height - tooltipRect.height) / 2;
+            tooltipElement.style.top = "".concat(topOffset, "px");
+        }
+    }, []); // No dependencies = stable function!
+    // Stable debounced positioning - no dependency on positionTooltip
+    var debouncedPositioning = useCallback(debounce(function () {
+        if (isVisibleRef.current) {
+            positionTooltip();
+        }
+    }, 100), [] // No dependencies = stable function!
+    );
+    // Single positioning effect - only triggers when visibility changes
+    useEffect(function () {
+        if (isVisible && tooltipRef.current && triggerRef.current) {
+            // Reduced delay for better responsiveness
+            var timeoutId_1 = setTimeout(function () {
+                if (isVisibleRef.current) {
+                    positionTooltip();
+                }
+            }, 10); // Reduced from 16ms to 10ms
+            return function () { return clearTimeout(timeoutId_1); };
+        }
+    }, [isVisible]); // Removed positionTooltip dependency to prevent circular re-renders
+    return {
+        positionTooltip: positionTooltip,
+        debouncedPositioning: debouncedPositioning,
+    };
+};
+
+export { useTooltipPositioning };

package/dist/components/core/Tree/Tree.animations.js

@@ -0,0 +1,38 @@
+// Animation variants for expand/collapse
+var treeNodeVariants = {
+    expanded: {
+        opacity: 1,
+        height: 'auto',
+        transition: {
+            duration: 0.2,
+            ease: 'easeOut',
+        },
+    },
+    collapsed: {
+        opacity: 0,
+        height: 0,
+        transition: {
+            duration: 0.15,
+            ease: 'easeIn',
+        },
+    },
+};
+// Animation variants for expand icon rotation
+var expandIconVariants = {
+    expanded: {
+        rotate: 90,
+        transition: {
+            duration: 0.2,
+            ease: 'easeOut',
+        },
+    },
+    collapsed: {
+        rotate: 0,
+        transition: {
+            duration: 0.15,
+            ease: 'easeIn',
+        },
+    },
+};
+
+export { expandIconVariants, treeNodeVariants };