flikkui 0.1.0-beta.11

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

@@ -0,0 +1,3 @@
+export { Pill } from './Pill';
+export type { PillProps, PillVariant, PillSize, PillTheme, PillThemeOverrides, } from './Pill.types';
+export { pillTheme } from './Pill.theme';

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

@@ -0,0 +1,36 @@
+/**
+ * Animation variants for Popover component
+ */
+export declare const popoverContentVariants: {
+    hidden: {
+        opacity: number;
+        scale: number;
+    };
+    visible: {
+        opacity: number;
+        scale: number;
+    };
+    exit: {
+        opacity: number;
+        scale: number;
+    };
+};
+export declare const popoverBackdropVariants: {
+    hidden: {
+        opacity: number;
+    };
+    visible: {
+        opacity: number;
+    };
+    exit: {
+        opacity: number;
+    };
+};
+export declare const popoverTransitions: {
+    content: {
+        duration: number;
+    };
+    backdrop: {
+        duration: number;
+    };
+};

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

@@ -0,0 +1,19 @@
+/**
+ * Animation variants for Popover component
+ */
+var popoverContentVariants = {
+    hidden: { opacity: 0, scale: 0.95 },
+    visible: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.95 }
+};
+var popoverBackdropVariants = {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1 },
+    exit: { opacity: 0 }
+};
+var popoverTransitions = {
+    content: { duration: 0.2 },
+    backdrop: { duration: 0.15 }
+};
+
+export { popoverBackdropVariants, popoverContentVariants, popoverTransitions };

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { PopoverRootProps as PopoverProps } from "./Popover.types";
+export declare const Popover: (({ 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>>;
+};

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 PopoverRoot = 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 = Object.assign(PopoverRoot, {
+    Trigger: PopoverTrigger,
+    Content: PopoverContent,
+});
+
+export { Popover };

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-[var(--color-border)] rounded-lg shadow-real-xl p-4 max-w-sm",
+    // Backdrop styles
+    backdropStyle: "fixed inset-0 bg-black/50",
+};
+
+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 { PopoverContent };

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

@@ -0,0 +1,90 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useRef, 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 { popoverTransitions, popoverBackdropVariants, popoverContentVariants } from './Popover.animations.js';
+import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
+import { useReducedMotion } from '../../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.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 ? true : _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 shouldReduceMotion = useReducedMotion();
+    var localRef = useRef(null);
+    // Use the same positioning hook as Select/Tooltip (now supports all 12 placements)
+    var _e = useSelectPortal({
+        triggerRef: triggerRef,
+        isOpen: isOpen || false,
+        placement: placement, // PopoverPlacement matches SelectPlacement now
+        offset: offset || 8,
+        autoWidth: true,
+    }), position = _e.position, cssVariables = _e.cssVariables, portalContentRef = _e.contentRef;
+    // 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]);
+    // Combine refs - merge localRef, external ref, context contentRef, and portal contentRef
+    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;
+        }
+        // Also set the portal contentRef for positioning
+        if (portalContentRef && typeof portalContentRef === 'object' && 'current' in portalContentRef) {
+            portalContentRef.current = el;
+        }
+    }, [ref, contentRef, portalContentRef]);
+    // 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: shouldReduceMotion ? {} : popoverBackdropVariants, initial: shouldReduceMotion ? undefined : "hidden", animate: shouldReduceMotion ? undefined : "visible", exit: shouldReduceMotion ? undefined : "exit", transition: shouldReduceMotion ? { duration: 0 } : popoverTransitions.backdrop, className: cn("fixed inset-0 z-[9998]", 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: __assign(__assign({}, cssVariables), { top: "".concat(position.top, "px"), left: "".concat(position.left, "px") }), role: "dialog", "aria-modal": "true", variants: shouldReduceMotion ? {} : popoverContentVariants, initial: shouldReduceMotion ? undefined : "hidden", animate: shouldReduceMotion ? undefined : "visible", exit: shouldReduceMotion ? undefined : "exit", transition: shouldReduceMotion ? { duration: 0 } : popoverTransitions.content, "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 };

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,66 @@
+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 _b;
+    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((_b = childElement.props) === null || _b === void 0 ? void 0 : _b.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/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 { 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 };

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 };

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

@@ -0,0 +1,42 @@
+import React from 'react';
+export type ProgressiveBlurPosition = 'top' | 'bottom' | 'left' | 'right';
+export interface ProgressiveBlurProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Position(s) where the blur effect should be applied
+     * Can be a single position or array of positions
+     */
+    position: ProgressiveBlurPosition | ProgressiveBlurPosition[];
+    /**
+     * Blur intensity in pixels
+     * @default 8
+     */
+    blurIntensity?: number;
+    /**
+     * Custom blur levels array for more control
+     * If provided, overrides blurIntensity
+     */
+    blurLevels?: number[];
+    /**
+     * Size of the blur region (height for top/bottom, width for left/right)
+     * @default "40px"
+     */
+    size?: string;
+    /**
+     * Custom className for styling overrides
+     */
+    className?: string;
+    /**
+     * Theme overrides
+     */
+    theme?: ProgressiveBlurThemeOverrides;
+}
+export interface ProgressiveBlurThemeOverrides {
+    /**
+     * Base styles for the blur container
+     */
+    baseStyle?: string;
+    /**
+     * Position-specific styles
+     */
+    positions?: Partial<Record<ProgressiveBlurPosition, string>>;
+}

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

@@ -0,0 +1,2 @@
+export { ProgressiveBlur } from './ProgressiveBlur';
+export type { ProgressiveBlurProps, ProgressiveBlurPosition, ProgressiveBlurThemeOverrides, } from './ProgressiveBlur.types';

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

@@ -0,0 +1,5 @@
+import React from "react";
+import { SegmentedProps } from "./Segmented.types";
+export declare const Segmented: React.ForwardRefExoticComponent<SegmentedProps & React.RefAttributes<HTMLDivElement>> & {
+    Item: React.ForwardRefExoticComponent<import("./Segmented.types").SegmentedItemProps & React.RefAttributes<HTMLButtonElement>>;
+};

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

@@ -0,0 +1,71 @@
+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';
+import { GlassEffect } from '../../effects/GlassEffect/GlassEffect.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),
+            React__default.createElement(GlassEffect, { rounded: "var(--segmented-rounded)", blendModeOuter: "soft-light" }),
+            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 };