@flikk/ui 1.0.0-beta.1

package/dist/components/core/ScrollArea/smooth/SnapPointDetector.js

@@ -0,0 +1,147 @@
+/**
+ * Detects and manages CSS scroll snap points
+ * Reads snap-align values from DOM and calculates scroll positions
+ */
+class SnapPointDetector {
+    constructor(element, orientation = 'vertical') {
+        this.snapPoints = [];
+        this.element = element;
+        this.orientation = orientation;
+        this.detectSnapPoints();
+    }
+    /**
+     * Detect snap points from DOM
+     * Reads CSS scroll-snap-type and scroll-snap-align
+     */
+    detectSnapPoints() {
+        this.snapPoints = [];
+        const style = window.getComputedStyle(this.element);
+        const snapType = style.scrollSnapType;
+        // Check if snap is enabled
+        if (!snapType || snapType === 'none') {
+            return;
+        }
+        // Get all direct children (potential snap points)
+        const children = Array.from(this.element.children);
+        children.forEach((child) => {
+            const childStyle = window.getComputedStyle(child);
+            const snapAlign = childStyle.scrollSnapAlign;
+            if (snapAlign && snapAlign !== 'none') {
+                const position = this.calculateSnapPosition(child, snapAlign);
+                if (position !== null) {
+                    this.snapPoints.push({
+                        position,
+                        element: child,
+                        align: this.parseSnapAlign(snapAlign),
+                    });
+                }
+            }
+        });
+        // Sort snap points by position
+        this.snapPoints.sort((a, b) => a.position - b.position);
+    }
+    /**
+     * Calculate scroll position for a snap point
+     */
+    calculateSnapPosition(element, snapAlign) {
+        if (this.orientation === 'horizontal') {
+            const elementOffset = element.offsetLeft;
+            const containerWidth = this.element.clientWidth;
+            const elementWidth = element.offsetWidth;
+            if (snapAlign.includes('start')) {
+                return elementOffset;
+            }
+            else if (snapAlign.includes('center')) {
+                return elementOffset - (containerWidth - elementWidth) / 2;
+            }
+            else if (snapAlign.includes('end')) {
+                return elementOffset - (containerWidth - elementWidth);
+            }
+        }
+        else {
+            const elementOffset = element.offsetTop;
+            const containerHeight = this.element.clientHeight;
+            const elementHeight = element.offsetHeight;
+            if (snapAlign.includes('start')) {
+                return elementOffset;
+            }
+            else if (snapAlign.includes('center')) {
+                return elementOffset - (containerHeight - elementHeight) / 2;
+            }
+            else if (snapAlign.includes('end')) {
+                return elementOffset - (containerHeight - elementHeight);
+            }
+        }
+        return null;
+    }
+    /**
+     * Parse snap align value
+     */
+    parseSnapAlign(snapAlign) {
+        if (snapAlign.includes('center'))
+            return 'center';
+        if (snapAlign.includes('end'))
+            return 'end';
+        return 'start';
+    }
+    /**
+     * Find nearest snap point to current position
+     */
+    findNearestSnapPoint(position) {
+        if (this.snapPoints.length === 0)
+            return null;
+        let nearest = this.snapPoints[0];
+        let minDistance = Math.abs(position - nearest.position);
+        for (const snapPoint of this.snapPoints) {
+            const distance = Math.abs(position - snapPoint.position);
+            if (distance < minDistance) {
+                minDistance = distance;
+                nearest = snapPoint;
+            }
+        }
+        return nearest;
+    }
+    /**
+     * Find snap point in direction of scroll
+     */
+    findSnapPointInDirection(position, direction) {
+        if (this.snapPoints.length === 0)
+            return null;
+        if (direction > 0) {
+            // Scrolling down/right - find next snap point
+            return (this.snapPoints.find((snap) => snap.position > position + 1) || null);
+        }
+        else {
+            // Scrolling up/left - find previous snap point
+            const reversed = [...this.snapPoints].reverse();
+            return reversed.find((snap) => snap.position < position - 1) || null;
+        }
+    }
+    /**
+     * Check if position is close to a snap point
+     */
+    isNearSnapPoint(position, threshold = 10) {
+        return this.snapPoints.some((snap) => Math.abs(snap.position - position) < threshold);
+    }
+    /**
+     * Get all snap points
+     */
+    getSnapPoints() {
+        return [...this.snapPoints];
+    }
+    /**
+     * Refresh snap points (call when DOM changes)
+     */
+    refresh() {
+        this.detectSnapPoints();
+    }
+    /**
+     * Update orientation
+     */
+    setOrientation(orientation) {
+        this.orientation = orientation;
+        this.detectSnapPoints();
+    }
+}
+
+export { SnapPointDetector };

package/dist/components/core/ScrollArea/smooth/easings.d.ts

@@ -0,0 +1,88 @@
+import { EasingFunction } from './SmoothScrollEngine.types';
+/**
+ * Linear easing (no acceleration)
+ */
+export declare const linear: EasingFunction;
+/**
+ * Quadratic ease-in
+ */
+export declare const easeInQuad: EasingFunction;
+/**
+ * Quadratic ease-out
+ */
+export declare const easeOutQuad: EasingFunction;
+/**
+ * Quadratic ease-in-out
+ */
+export declare const easeInOutQuad: EasingFunction;
+/**
+ * Cubic ease-in
+ */
+export declare const easeInCubic: EasingFunction;
+/**
+ * Cubic ease-out
+ */
+export declare const easeOutCubic: EasingFunction;
+/**
+ * Cubic ease-in-out
+ */
+export declare const easeInOutCubic: EasingFunction;
+/**
+ * Quartic ease-in
+ */
+export declare const easeInQuart: EasingFunction;
+/**
+ * Quartic ease-out
+ */
+export declare const easeOutQuart: EasingFunction;
+/**
+ * Quartic ease-in-out
+ */
+export declare const easeInOutQuart: EasingFunction;
+/**
+ * Exponential ease-in
+ */
+export declare const easeInExpo: EasingFunction;
+/**
+ * Exponential ease-out
+ */
+export declare const easeOutExpo: EasingFunction;
+/**
+ * Exponential ease-in-out
+ */
+export declare const easeInOutExpo: EasingFunction;
+/**
+ * Custom smooth deceleration easing
+ * Designed specifically for natural scroll feel
+ */
+export declare const smoothDecel: EasingFunction;
+/**
+ * Custom elastic easing with slight bounce
+ */
+export declare const elastic: EasingFunction;
+/**
+ * Back ease-out (slight overshoot)
+ */
+export declare const easeOutBack: EasingFunction;
+/**
+ * Default easing map for easy access
+ */
+export declare const easings: {
+    readonly linear: EasingFunction;
+    readonly easeInQuad: EasingFunction;
+    readonly easeOutQuad: EasingFunction;
+    readonly easeInOutQuad: EasingFunction;
+    readonly easeInCubic: EasingFunction;
+    readonly easeOutCubic: EasingFunction;
+    readonly easeInOutCubic: EasingFunction;
+    readonly easeInQuart: EasingFunction;
+    readonly easeOutQuart: EasingFunction;
+    readonly easeInOutQuart: EasingFunction;
+    readonly easeInExpo: EasingFunction;
+    readonly easeOutExpo: EasingFunction;
+    readonly easeInOutExpo: EasingFunction;
+    readonly smoothDecel: EasingFunction;
+    readonly elastic: EasingFunction;
+    readonly easeOutBack: EasingFunction;
+};
+export type EasingName = keyof typeof easings;

package/dist/components/core/ScrollArea/smooth/easings.js

@@ -0,0 +1,19 @@
+/**
+ * Linear easing (no acceleration)
+ */
+/**
+ * Quartic ease-out
+ */
+const easeOutQuart = (t) => {
+    const t1 = t - 1;
+    return 1 - t1 * t1 * t1 * t1;
+};
+/**
+ * Custom smooth deceleration easing
+ * Designed specifically for natural scroll feel
+ */
+const smoothDecel = (t) => {
+    return 1 - Math.pow(1 - t, 3);
+};
+
+export { easeOutQuart, smoothDecel };

package/dist/components/core/ScrollArea/smooth/effects.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Apply elastic edge effect at scroll boundaries
+ * Creates a spring-back effect when scrolling past limits
+ *
+ * @param position - Current scroll position
+ * @param min - Minimum scroll boundary (usually 0)
+ * @param max - Maximum scroll boundary
+ * @param strength - Effect strength (0-1, higher = more resistance)
+ * @returns Modified position with elastic effect applied
+ */
+export declare function applyElasticEdgeEffect(position: number, min: number, max: number, strength?: number): number;
+/**
+ * Apply rubber-band overscroll effect
+ * iOS-style resistance when scrolling past boundaries
+ *
+ * @param delta - Scroll delta to apply
+ * @param position - Current scroll position
+ * @param min - Minimum scroll boundary
+ * @param max - Maximum scroll boundary
+ * @param strength - Resistance strength (0-1, higher = more resistance)
+ * @returns Modified delta with rubber-band effect
+ */
+export declare function applyRubberBandEffect(delta: number, position: number, min: number, max: number, strength?: number): number;
+/**
+ * Calculate spring-back force for elastic edges
+ * Returns velocity adjustment to spring back to bounds
+ *
+ * @param position - Current position
+ * @param min - Minimum boundary
+ * @param max - Maximum boundary
+ * @param stiffness - Spring stiffness (higher = faster spring-back)
+ * @returns Spring force to apply
+ */
+export declare function calculateSpringForce(position: number, min: number, max: number, stiffness?: number): number;
+/**
+ * Smooth damping function for velocity
+ * Applies gradual deceleration
+ *
+ * @param velocity - Current velocity
+ * @param damping - Damping factor (0-1, higher = faster slowdown)
+ * @returns Damped velocity
+ */
+export declare function applyVelocityDamping(velocity: number, damping?: number): number;
+/**
+ * Check if position is within elastic zone near boundaries
+ *
+ * @param position - Current position
+ * @param min - Minimum boundary
+ * @param max - Maximum boundary
+ * @param threshold - Distance from boundary to consider elastic (pixels)
+ * @returns True if in elastic zone
+ */
+export declare function isInElasticZone(position: number, min: number, max: number, threshold?: number): boolean;

package/dist/components/core/ScrollArea/smooth/effects.js

@@ -0,0 +1,83 @@
+/**
+ * Apply elastic edge effect at scroll boundaries
+ * Creates a spring-back effect when scrolling past limits
+ *
+ * @param position - Current scroll position
+ * @param min - Minimum scroll boundary (usually 0)
+ * @param max - Maximum scroll boundary
+ * @param strength - Effect strength (0-1, higher = more resistance)
+ * @returns Modified position with elastic effect applied
+ */
+function applyElasticEdgeEffect(position, min, max, strength = 0.3) {
+    // Clamp strength between 0 and 1
+    const clampedStrength = Math.max(0, Math.min(1, strength));
+    if (position < min) {
+        // Below minimum - apply exponential damping
+        const distance = min - position;
+        const damped = distance * Math.exp(-distance * clampedStrength * 0.1);
+        return min - damped;
+    }
+    if (position > max) {
+        // Above maximum - apply exponential damping
+        const distance = position - max;
+        const damped = distance * Math.exp(-distance * clampedStrength * 0.1);
+        return max + damped;
+    }
+    return position;
+}
+/**
+ * Apply rubber-band overscroll effect
+ * iOS-style resistance when scrolling past boundaries
+ *
+ * @param delta - Scroll delta to apply
+ * @param position - Current scroll position
+ * @param min - Minimum scroll boundary
+ * @param max - Maximum scroll boundary
+ * @param strength - Resistance strength (0-1, higher = more resistance)
+ * @returns Modified delta with rubber-band effect
+ */
+function applyRubberBandEffect(delta, position, min, max, strength = 0.5) {
+    // Clamp strength between 0 and 1
+    const clampedStrength = Math.max(0, Math.min(1, strength));
+    // Calculate how far we are from boundaries
+    let distanceFromEdge = 0;
+    if (position < min && delta < 0) {
+        // Scrolling down past top
+        distanceFromEdge = min - position;
+    }
+    else if (position > max && delta > 0) {
+        // Scrolling up past bottom
+        distanceFromEdge = position - max;
+    }
+    else {
+        // Within bounds - no resistance
+        return delta;
+    }
+    // Apply resistance based on distance from edge
+    // Further from edge = more resistance
+    const resistance = 1 - Math.min(1, distanceFromEdge / 100) * clampedStrength;
+    return delta * Math.max(0.1, resistance);
+}
+/**
+ * Calculate spring-back force for elastic edges
+ * Returns velocity adjustment to spring back to bounds
+ *
+ * @param position - Current position
+ * @param min - Minimum boundary
+ * @param max - Maximum boundary
+ * @param stiffness - Spring stiffness (higher = faster spring-back)
+ * @returns Spring force to apply
+ */
+function calculateSpringForce(position, min, max, stiffness = 0.15) {
+    if (position < min) {
+        // Spring back up
+        return (min - position) * stiffness;
+    }
+    if (position > max) {
+        // Spring back down
+        return (max - position) * stiffness;
+    }
+    return 0;
+}
+
+export { applyElasticEdgeEffect, applyRubberBandEffect, calculateSpringForce };

package/dist/components/core/ScrollArea/smooth/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Smooth scrolling subsystem for ScrollArea
+ * Provides momentum-based scrolling with snap point integration
+ */
+export { SmoothScrollEngine } from './SmoothScrollEngine';
+export { useSmoothScroll } from './useSmoothScroll';
+export type { SmoothScrollConfig, SmoothScrollConfigUpdate, ScrollProgress, ScrollToOptions, SnapPoint, EasingFunction, ScrollDirection, Velocity, PerformanceMetrics, } from './SmoothScrollEngine.types';
+export type { SmoothScrollAPI } from './useSmoothScroll.types';
+export { linear, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInExpo, easeOutExpo, easeInOutExpo, smoothDecel, elastic, easeOutBack, easings, } from './easings';
+export type { EasingName } from './easings';
+export { applyElasticEdgeEffect, applyRubberBandEffect, calculateSpringForce, applyVelocityDamping, isInElasticZone, } from './effects';
+export { SnapPointDetector } from './SnapPointDetector';

package/dist/components/core/ScrollArea/smooth/useSmoothScroll.d.ts

@@ -0,0 +1,26 @@
+import { RefObject } from 'react';
+import { SmoothScrollConfig } from './SmoothScrollEngine.types';
+import { SmoothScrollAPI } from './useSmoothScroll.types';
+/**
+ * Custom hook for applying smooth scrolling to any element
+ *
+ * @param elementRef - Ref to the scrollable element
+ * @param config - Smooth scroll configuration
+ * @param orientation - Scroll orientation
+ * @returns API object for programmatic control, or null if disabled
+ *
+ * @example
+ * ```tsx
+ * const ref = useRef<HTMLDivElement>(null);
+ * const smoothAPI = useSmoothScroll(ref, {
+ *   lerp: 0.1,
+ *   elasticEdges: true,
+ * });
+ *
+ * // Programmatic control
+ * <button onClick={() => smoothAPI?.scrollTo(500)}>
+ *   Scroll to 500px
+ * </button>
+ * ```
+ */
+export declare function useSmoothScroll(elementRef: RefObject<HTMLElement> | null, config?: Partial<SmoothScrollConfig>, orientation?: 'vertical' | 'horizontal'): SmoothScrollAPI | null;

package/dist/components/core/ScrollArea/smooth/useSmoothScroll.js

@@ -0,0 +1,118 @@
+import { useRef, useEffect, useMemo } from 'react';
+import { SmoothScrollEngine } from './SmoothScrollEngine.js';
+import { isReducedMotion } from '../../../../utils/smoothScrollUtils.js';
+
+/**
+ * Custom hook for applying smooth scrolling to any element
+ *
+ * @param elementRef - Ref to the scrollable element
+ * @param config - Smooth scroll configuration
+ * @param orientation - Scroll orientation
+ * @returns API object for programmatic control, or null if disabled
+ *
+ * @example
+ * ```tsx
+ * const ref = useRef<HTMLDivElement>(null);
+ * const smoothAPI = useSmoothScroll(ref, {
+ *   lerp: 0.1,
+ *   elasticEdges: true,
+ * });
+ *
+ * // Programmatic control
+ * <button onClick={() => smoothAPI?.scrollTo(500)}>
+ *   Scroll to 500px
+ * </button>
+ * ```
+ */
+function useSmoothScroll(elementRef, config = {}, orientation = 'vertical') {
+    const engineRef = useRef(null);
+    // Check for reduced motion preference
+    const shouldDisable = isReducedMotion();
+    // Initialize engine
+    useEffect(() => {
+        // Don't initialize if ref is null, disabled, or element doesn't exist
+        if (!elementRef || !elementRef.current || shouldDisable) {
+            return;
+        }
+        const element = elementRef.current;
+        if (process.env.NODE_ENV !== 'production') {
+            console.log('[useSmoothScroll] Initializing engine', {
+                element,
+                config,
+                orientation,
+            });
+        }
+        // Create engine
+        engineRef.current = new SmoothScrollEngine(element, config, orientation);
+        // Start engine
+        engineRef.current.start();
+        // Refresh snap points after a short delay to ensure DOM is ready
+        if (config.respectSnapPoints) {
+            setTimeout(() => {
+                var _a;
+                (_a = engineRef.current) === null || _a === void 0 ? void 0 : _a.refreshSnapPoints();
+            }, 100);
+        }
+        // Cleanup
+        return () => {
+            var _a;
+            if (process.env.NODE_ENV !== 'production') {
+                console.log('[useSmoothScroll] Destroying engine');
+            }
+            (_a = engineRef.current) === null || _a === void 0 ? void 0 : _a.destroy();
+            engineRef.current = null;
+        };
+    }, [elementRef, shouldDisable, orientation, config.respectSnapPoints]);
+    // Update config when it changes
+    useEffect(() => {
+        if (engineRef.current && Object.keys(config).length > 0) {
+            engineRef.current.updateConfig(config);
+        }
+    }, [config]);
+    // Return stable API object
+    // Note: We don't gate on engineRef.current here because refs don't trigger
+    // re-renders. The methods use optional chaining so they safely no-op before
+    // the engine is initialised in the effect above.
+    const api = useMemo(() => {
+        if (shouldDisable) {
+            return null;
+        }
+        return {
+            scrollTo: (position, options) => {
+                var _a;
+                (_a = engineRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(position, options);
+            },
+            scrollToElement: (element, options) => {
+                var _a;
+                (_a = engineRef.current) === null || _a === void 0 ? void 0 : _a.scrollToElement(element, options);
+            },
+            getVelocity: () => {
+                var _a, _b;
+                return (_b = (_a = engineRef.current) === null || _a === void 0 ? void 0 : _a.getVelocity()) !== null && _b !== void 0 ? _b : 0;
+            },
+            getProgress: () => {
+                var _a, _b;
+                return (_b = (_a = engineRef.current) === null || _a === void 0 ? void 0 : _a.getProgress()) !== null && _b !== void 0 ? _b : null;
+            },
+            stop: () => {
+                var _a;
+                (_a = engineRef.current) === null || _a === void 0 ? void 0 : _a.stop();
+            },
+            start: () => {
+                var _a;
+                (_a = engineRef.current) === null || _a === void 0 ? void 0 : _a.start();
+            },
+            update: (newConfig) => {
+                var _a;
+                (_a = engineRef.current) === null || _a === void 0 ? void 0 : _a.updateConfig(newConfig);
+            },
+            refreshSnapPoints: () => {
+                var _a;
+                (_a = engineRef.current) === null || _a === void 0 ? void 0 : _a.refreshSnapPoints();
+            },
+        };
+    }, [shouldDisable]);
+    return api;
+}
+
+export { useSmoothScroll };

package/dist/components/core/ScrollArea/smooth/useSmoothScroll.types.d.ts

@@ -0,0 +1,46 @@
+import { ScrollProgress, ScrollToOptions, SmoothScrollConfigUpdate } from './SmoothScrollEngine.types';
+/**
+ * API object returned by useSmoothScroll hook
+ * Provides programmatic control over smooth scrolling
+ */
+export interface SmoothScrollAPI {
+    /**
+     * Programmatically scroll to a position
+     * @param position - Target scroll position in pixels
+     * @param options - Animation options
+     */
+    scrollTo: (position: number, options?: ScrollToOptions) => void;
+    /**
+     * Scroll to a specific element
+     * @param element - Target element to scroll to
+     * @param options - Animation options
+     */
+    scrollToElement: (element: HTMLElement, options?: ScrollToOptions) => void;
+    /**
+     * Get current scroll velocity
+     * @returns Velocity in pixels per frame
+     */
+    getVelocity: () => number;
+    /**
+     * Get current scroll progress
+     * @returns Scroll progress information
+     */
+    getProgress: () => ScrollProgress | null;
+    /**
+     * Pause smooth scrolling
+     */
+    stop: () => void;
+    /**
+     * Resume smooth scrolling
+     */
+    start: () => void;
+    /**
+     * Update configuration
+     * @param config - Partial configuration to update
+     */
+    update: (config: SmoothScrollConfigUpdate) => void;
+    /**
+     * Refresh snap points (call when DOM changes)
+     */
+    refreshSnapPoints: () => void;
+}

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,66 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+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
+ */
+const SegmentedComponent = React__default.forwardRef(({ value, onChange, size = "md", disabled = false, block = false, children, className, slidingBackgroundClassName, theme, ...props }, ref) => {
+    var _a;
+    const containerRef = useRef(null);
+    const [activeStyle, setActiveStyle] = useState({});
+    const updateActiveStyle = () => {
+        if (!containerRef.current || !value)
+            return;
+        const activeButton = containerRef.current.querySelector(`[data-value="${value}"]`);
+        if (activeButton) {
+            const containerRect = containerRef.current.getBoundingClientRect();
+            const buttonRect = activeButton.getBoundingClientRect();
+            setActiveStyle({
+                width: buttonRect.width,
+                height: buttonRect.height,
+                transform: `translateX(${buttonRect.left - containerRect.left - 2}px)`,
+            });
+        }
+    };
+    useEffect(() => {
+        updateActiveStyle();
+    }, [value]);
+    // Debounced resize handler for better performance
+    const debouncedUpdateActiveStyle = useMemo(() => debounce(updateActiveStyle, 100), [updateActiveStyle]);
+    useEffect(() => {
+        window.addEventListener('resize', debouncedUpdateActiveStyle);
+        return () => window.removeEventListener('resize', debouncedUpdateActiveStyle);
+    }, [debouncedUpdateActiveStyle]);
+    const contextValue = {
+        selectedValue: value,
+        onChange,
+        size,
+        disabled,
+    };
+    return (jsx(SegmentedContext.Provider, { value: contextValue, children: jsxs("div", { ref: (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, ((_a = theme === null || theme === void 0 ? void 0 : theme.sizes) === null || _a === void 0 ? void 0 : _a[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, children: [jsx(GlassEffect, { rounded: "var(--segmented-radius)", blendModeOuter: "soft-light" }), value && (jsx("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
+const Segmented = Object.assign(SegmentedComponent, {
+    Item: SegmentedItem,
+});
+
+export { Segmented };