flikkui 0.1.0-beta.8 → 0.2.0-beta.1

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

@@ -0,0 +1,35 @@
+/**
+ * RetryBoundary Component
+ * Error boundary with exponential backoff retry
+ */
+import React, { Component } from "react";
+import type { RetryBoundaryProps } from "./RetryBoundary.types";
+/**
+ * Error boundary state
+ */
+interface RetryBoundaryState {
+    error: Error | null;
+    attempt: number;
+    retryDelay: number;
+}
+/**
+ * RetryBoundary - Error boundary with exponential backoff retry
+ *
+ * @example
+ * <RetryBoundary
+ *   retry={{ maxAttempts: 3, initialDelay: 1000 }}
+ *   onMaxRetriesReached={(error) => logError(error)}
+ * >
+ *   <AsyncComponent />
+ * </RetryBoundary>
+ */
+export declare class RetryBoundary extends Component<RetryBoundaryProps, RetryBoundaryState> {
+    private retryConfig;
+    constructor(props: RetryBoundaryProps);
+    static getDerivedStateFromError(error: Error): Partial<RetryBoundaryState>;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    handleRetry: () => void;
+    handleReset: () => void;
+    render(): React.ReactNode;
+}
+export {};

package/dist/components/core/RetryBoundary/RetryBoundary.js

@@ -0,0 +1,154 @@
+import React__default, { Component, useState, useEffect } from 'react';
+import { XMarkIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
+import { Button } from '../Button/Button.js';
+import { shouldRetry, calculateRetryDelay } from '../../../utils/retryUtils.js';
+import { normalizeError } from '../../../utils/streamingErrors.js';
+import { retryBoundaryTheme } from './RetryBoundary.theme.js';
+
+/**
+ * RetryBoundary Component
+ * Error boundary with exponential backoff retry
+ */
+/**
+ * Default fallback UI component
+ */
+const DefaultFallback = ({ error, attempt, maxAttempts, retryIn, retry, reset, }) => {
+    const theme = retryBoundaryTheme;
+    const hasMoreRetries = attempt < maxAttempts;
+    return (React__default.createElement("div", { className: theme.container },
+        React__default.createElement("div", { className: "flex flex-col items-start gap-2 text-[var(--color-danger)]" },
+            React__default.createElement("div", { className: "text-2xl rounded-full p-3  mb-3 w-fit glass-effect shadow-xl shadow-black/5" },
+                React__default.createElement(XMarkIcon, { className: "size-5" })),
+            React__default.createElement("span", { className: "text-base font-semibold" }, "Something went wrong")),
+        React__default.createElement("p", { className: theme.errorMessage }, error.message),
+        retryIn > 0 && hasMoreRetries && (React__default.createElement("p", { className: theme.countdown },
+            "Retrying in ",
+            retryIn,
+            "s... (Attempt ",
+            attempt + 1,
+            " of ",
+            maxAttempts,
+            ")")),
+        React__default.createElement("div", { className: "flex items-center gap-2 mt-6" },
+            hasMoreRetries ? (React__default.createElement(Button, { onClick: retry, size: "sm", variant: "filled", color: "dark" },
+                React__default.createElement(ArrowPathIcon, { className: "size-4" }),
+                "Retry Now")) : (React__default.createElement("p", { className: "text-xs text-[var(--color-text-muted)]" }, "Max retries reached")),
+            React__default.createElement(Button, { onClick: reset, size: "sm", color: "neutral" }, "Dismiss"))));
+};
+/**
+ * Wrapper component to handle retry countdown and state
+ */
+const RetryFallbackWrapper = ({ error, attempt, maxAttempts, retryDelay, onRetry, onReset, fallback, className, }) => {
+    const [countdown, setCountdown] = useState(Math.ceil(retryDelay / 1000));
+    const hasMoreRetries = attempt < maxAttempts;
+    // Countdown timer
+    useEffect(() => {
+        if (!hasMoreRetries || retryDelay === 0)
+            return;
+        setCountdown(Math.ceil(retryDelay / 1000));
+        const interval = setInterval(() => {
+            setCountdown((prev) => {
+                if (prev <= 1) {
+                    clearInterval(interval);
+                    onRetry();
+                    return 0;
+                }
+                return prev - 1;
+            });
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [retryDelay, hasMoreRetries, onRetry]);
+    const fallbackProps = {
+        error,
+        attempt,
+        maxAttempts,
+        retryIn: countdown,
+        retry: onRetry,
+        reset: onReset,
+    };
+    // Custom fallback
+    if (fallback) {
+        if (typeof fallback === "function") {
+            return React__default.createElement("div", { className: className }, fallback(fallbackProps));
+        }
+        return React__default.createElement("div", { className: className }, fallback);
+    }
+    // Default fallback
+    return (React__default.createElement("div", { className: className },
+        React__default.createElement(DefaultFallback, { ...fallbackProps })));
+};
+/**
+ * RetryBoundary - Error boundary with exponential backoff retry
+ *
+ * @example
+ * <RetryBoundary
+ *   retry={{ maxAttempts: 3, initialDelay: 1000 }}
+ *   onMaxRetriesReached={(error) => logError(error)}
+ * >
+ *   <AsyncComponent />
+ * </RetryBoundary>
+ */
+class RetryBoundary extends Component {
+    constructor(props) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        super(props);
+        this.handleRetry = () => {
+            const { onRetry } = this.props;
+            const newAttempt = this.state.attempt + 1;
+            onRetry === null || onRetry === void 0 ? void 0 : onRetry(newAttempt);
+            this.setState({
+                error: null,
+                attempt: newAttempt,
+                retryDelay: 0,
+            });
+        };
+        this.handleReset = () => {
+            this.setState({
+                error: null,
+                attempt: 0,
+                retryDelay: 0,
+            });
+        };
+        this.state = {
+            error: null,
+            attempt: 0,
+            retryDelay: 0,
+        };
+        this.retryConfig = {
+            maxAttempts: (_b = (_a = props.retry) === null || _a === void 0 ? void 0 : _a.maxAttempts) !== null && _b !== void 0 ? _b : 3,
+            initialDelay: (_d = (_c = props.retry) === null || _c === void 0 ? void 0 : _c.initialDelay) !== null && _d !== void 0 ? _d : 1000,
+            backoffMultiplier: (_f = (_e = props.retry) === null || _e === void 0 ? void 0 : _e.backoffMultiplier) !== null && _f !== void 0 ? _f : 2,
+            maxDelay: (_h = (_g = props.retry) === null || _g === void 0 ? void 0 : _g.maxDelay) !== null && _h !== void 0 ? _h : 10000,
+            shouldRetry: (_j = props.retry) === null || _j === void 0 ? void 0 : _j.shouldRetry,
+        };
+    }
+    static getDerivedStateFromError(error) {
+        return { error };
+    }
+    componentDidCatch(error, errorInfo) {
+        const { attempt } = this.state;
+        const { onError, onMaxRetriesReached } = this.props;
+        // Normalize error for retry check
+        const streamingError = normalizeError(error);
+        const canRetry = shouldRetry(streamingError, attempt, this.retryConfig);
+        onError === null || onError === void 0 ? void 0 : onError(error, attempt);
+        if (canRetry) {
+            const delay = calculateRetryDelay(attempt, this.retryConfig);
+            this.setState({ retryDelay: delay });
+        }
+        else {
+            onMaxRetriesReached === null || onMaxRetriesReached === void 0 ? void 0 : onMaxRetriesReached(error);
+        }
+    }
+    render() {
+        var _a;
+        const { children, fallback, className } = this.props;
+        const { error, attempt, retryDelay } = this.state;
+        if (error) {
+            return (React__default.createElement(RetryFallbackWrapper, { error: error, attempt: attempt, maxAttempts: (_a = this.retryConfig.maxAttempts) !== null && _a !== void 0 ? _a : 3, retryDelay: retryDelay, onRetry: this.handleRetry, onReset: this.handleReset, fallback: fallback, className: className }));
+        }
+        return children;
+    }
+}
+
+export { RetryBoundary };

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

@@ -0,0 +1,2 @@
+import type { RetryBoundaryTheme } from "./RetryBoundary.types";
+export declare const retryBoundaryTheme: RetryBoundaryTheme;

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

@@ -0,0 +1,7 @@
+const retryBoundaryTheme = {
+    container: "flex flex-col items-start justify-center p-6 rounded-[var(--form-rounded)] bg-[var(--color-danger-50)]/50 border border-[var(--color-danger-100)]",
+    errorMessage: "text-sm text-[var(--color-text-secondary)] text-center max-w-md mt-1",
+    countdown: "text-xs text-[var(--color-text-muted)] tabular-nums mt-3",
+};
+
+export { retryBoundaryTheme };

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

@@ -0,0 +1,51 @@
+import type { RetryConfig } from "../../../utils/retryUtils";
+/**
+ * Props for custom retry fallback render function
+ */
+export interface RetryFallbackProps {
+    /** The error that was caught */
+    error: Error;
+    /** Current retry attempt (0-indexed) */
+    attempt: number;
+    /** Maximum retry attempts */
+    maxAttempts: number;
+    /** Seconds until auto-retry (0 if not auto-retrying) */
+    retryIn: number;
+    /** Manually trigger a retry */
+    retry: () => void;
+    /** Reset error state completely */
+    reset: () => void;
+}
+/**
+ * Props for RetryBoundary component
+ */
+export interface RetryBoundaryProps {
+    /** Content to render when no error */
+    children: React.ReactNode;
+    /**
+     * Custom fallback UI or render function
+     * If not provided, uses default retry UI
+     */
+    fallback?: React.ReactNode | ((props: RetryFallbackProps) => React.ReactNode);
+    /** Retry configuration */
+    retry?: RetryConfig;
+    /** Called when an error is caught */
+    onError?: (error: Error, attempt: number) => void;
+    /** Called when a retry is triggered */
+    onRetry?: (attempt: number) => void;
+    /** Called when max retries is reached */
+    onMaxRetriesReached?: (error: Error) => void;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Theme configuration for RetryBoundary
+ */
+export interface RetryBoundaryTheme {
+    /** Container styles */
+    container?: string;
+    /** Error message styles */
+    errorMessage?: string;
+    /** Retry countdown styles */
+    countdown?: string;
+}

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

@@ -0,0 +1,3 @@
+export { RetryBoundary } from "./RetryBoundary";
+export type { RetryBoundaryProps, RetryFallbackProps, RetryBoundaryTheme, } from "./RetryBoundary.types";
+export { retryBoundaryTheme } from "./RetryBoundary.theme";

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

@@ -3,4 +3,3 @@ 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>>;
 };
-export default Segmented;

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

@@ -1,51 +1,50 @@
-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 () {
+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;
-        var activeButton = containerRef.current.querySelector("[data-value=\"".concat(value, "\"]"));
+        const activeButton = containerRef.current.querySelector(`[data-value="${value}"]`);
         if (activeButton) {
-            var containerRect = containerRef.current.getBoundingClientRect();
-            var buttonRect = activeButton.getBoundingClientRect();
+            const containerRect = containerRef.current.getBoundingClientRect();
+            const buttonRect = activeButton.getBoundingClientRect();
             setActiveStyle({
                 width: buttonRect.width,
                 height: buttonRect.height,
-                transform: "translateX(".concat(buttonRect.left - containerRect.left - 2, "px)"),
+                transform: `translateX(${buttonRect.left - containerRect.left - 2}px)`,
             });
         }
     };
-    useEffect(function () {
+    useEffect(() => {
         updateActiveStyle();
     }, [value]);
     // Debounced resize handler for better performance
-    var debouncedUpdateActiveStyle = useMemo(function () { return debounce(updateActiveStyle, 100); }, [updateActiveStyle]);
-    useEffect(function () {
+    const debouncedUpdateActiveStyle = useMemo(() => debounce(updateActiveStyle, 100), [updateActiveStyle]);
+    useEffect(() => {
         window.addEventListener('resize', debouncedUpdateActiveStyle);
-        return function () { return window.removeEventListener('resize', debouncedUpdateActiveStyle); };
+        return () => window.removeEventListener('resize', debouncedUpdateActiveStyle);
     }, [debouncedUpdateActiveStyle]);
-    var contextValue = {
+    const contextValue = {
         selectedValue: value,
-        onChange: onChange,
-        size: size,
-        disabled: disabled,
+        onChange,
+        size,
+        disabled,
     };
     return (React__default.createElement(SegmentedContext.Provider, { value: contextValue },
-        React__default.createElement("div", __assign({ ref: function (node) {
+        React__default.createElement("div", { ref: (node) => {
                 containerRef.current = node;
                 if (typeof ref === 'function') {
                     ref(node);
@@ -53,8 +52,9 @@ var SegmentedComponent = React__default.forwardRef(function (_a, ref) {
                 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),
+            }, 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 },
+            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)));
@@ -62,8 +62,8 @@ var SegmentedComponent = React__default.forwardRef(function (_a, ref) {
 // Set display name for dev tools and Storybook
 SegmentedComponent.displayName = "Segmented";
 // Create compound component with proper typing
-var Segmented = Object.assign(SegmentedComponent, {
+const Segmented = Object.assign(SegmentedComponent, {
     Item: SegmentedItem,
 });
 
-export { Segmented, Segmented as default };
+export { Segmented };

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

@@ -1,4 +1,4 @@
-import { SegmentedSize } from './Segmented.types';
+import { SegmentedSize } from "./Segmented.types";
 /**
  * Internal theme structure for the Segmented component
  */

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

@@ -1,9 +1,9 @@
 /**
  * Default theme for the Segmented component
  */
-var segmentedTheme = {
+const segmentedTheme = {
     // Base styles for the segmented container
-    baseStyle: "relative flex rounded-[var(--segmented-rounded)] p-[2px] bg-neutral-100 overflow-hidden",
+    baseStyle: "relative flex rounded-[var(--segmented-rounded)] p-[2px] bg-[var(--color-background-secondary)]",
     // Size variants using CSS variables
     sizes: {
         sm: "min-h-[var(--segmented-min-h-sm)]",
@@ -15,14 +15,14 @@ var segmentedTheme = {
     // 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)]",
+    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(--color-background-secondary)] shadow-real-md glass-effect",
 };
 /**
  * Default theme for the SegmentedItem component
  */
-var segmentedItemTheme = {
+const 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",
+    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-[var(--color-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)]",
@@ -30,9 +30,9 @@ var segmentedItemTheme = {
         lg: "text-[length:var(--segmented-text-size-lg)] px-[var(--segmented-px-lg)]",
     },
     // Selected state
-    selectedStyle: "text-neutral-900 z-10",
+    selectedStyle: "text-[var(--color-text-primary)] z-10",
     // Unselected state
-    unselectedStyle: "text-neutral-500 hover:text-neutral-800 ",
+    unselectedStyle: "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] ",
     // Disabled state
     disabledStyle: "opacity-50 cursor-not-allowed pointer-events-none",
 };

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

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

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

@@ -1,4 +1,3 @@
 import React from "react";
 import { SegmentedItemProps } from "./Segmented.types";
 export declare const SegmentedItem: React.ForwardRefExoticComponent<SegmentedItemProps & React.RefAttributes<HTMLButtonElement>>;
-export default SegmentedItem;

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

@@ -1,30 +1,28 @@
-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);
+const SegmentedItem = React__default.forwardRef(({ value, disabled = false, children, className, onClick, ...props }, ref) => {
+    const 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) {
+    const { selectedValue, onChange, size, disabled: contextDisabled } = context;
+    const isSelected = value === selectedValue;
+    const isDisabled = disabled || contextDisabled;
+    const handleClick = (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
+    return (React__default.createElement("button", { 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));
+        ), 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 };
+export { SegmentedItem };

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

@@ -1,4 +1,2 @@
-import Segmented from './Segmented';
 export { Segmented } from './Segmented';
 export type { SegmentedProps, SegmentedItemProps, SegmentedSize } from './Segmented.types';
-export { Segmented as default };

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

@@ -0,0 +1,3 @@
+import React from "react";
+import { SidebarProps } from "./Sidebar.types";
+export declare const Sidebar: React.ForwardRefExoticComponent<SidebarProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Sidebar/Sidebar.js

@@ -0,0 +1,41 @@
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { motion } from 'motion/react';
+import { sidebarTheme } from './Sidebar.theme.js';
+import { useSidebarContext, SidebarProvider } from './SidebarContext.js';
+
+const SidebarContainer = React__default.forwardRef(({ side = "left", variant = "sidebar", width, children, className, theme: customTheme = {}, ...props }, ref) => {
+    var _a, _b, _c;
+    const context = useSidebarContext();
+    const collapsed = (_a = context === null || context === void 0 ? void 0 : context.collapsed) !== null && _a !== void 0 ? _a : false;
+    // Default widths
+    const expandedWidth = (width === null || width === void 0 ? void 0 : width.expanded) || ((_b = context === null || context === void 0 ? void 0 : context.width) === null || _b === void 0 ? void 0 : _b.expanded) || 280;
+    const collapsedWidth = (width === null || width === void 0 ? void 0 : width.collapsed) || ((_c = context === null || context === void 0 ? void 0 : context.width) === null || _c === void 0 ? void 0 : _c.collapsed) || 80;
+    const theme = {
+        ...sidebarTheme,
+        ...customTheme,
+        variants: {
+            ...sidebarTheme.variants,
+            ...customTheme.variants,
+        },
+        sides: {
+            ...sidebarTheme.sides,
+            ...customTheme.sides,
+        },
+    };
+    const sidebarClasses = cn(theme.baseStyle, theme.variants[variant], theme.sides[side], className);
+    return (React__default.createElement(motion.div, { ref: ref, className: sidebarClasses, "data-side": side, "data-variant": variant, "data-collapsed": collapsed, initial: false, animate: {
+            width: collapsed ? collapsedWidth : expandedWidth,
+        }, transition: {
+            type: "spring",
+            stiffness: 300,
+            damping: 30,
+        }, ...props }, children));
+});
+const Sidebar = React__default.forwardRef(({ side = "left", variant = "sidebar", defaultCollapsed = false, collapsed: controlledCollapsed, onCollapsedChange, width, children, className, theme: customTheme = {}, ...props }, ref) => {
+    return (React__default.createElement(SidebarProvider, { defaultCollapsed: defaultCollapsed, collapsed: controlledCollapsed, onCollapsedChange: onCollapsedChange, width: width, side: side, variant: variant },
+        React__default.createElement(SidebarContainer, { ref: ref, className: className, theme: customTheme, side: side, variant: variant, width: width, ...props }, children)));
+});
+Sidebar.displayName = "Sidebar";
+
+export { Sidebar };

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

@@ -0,0 +1,16 @@
+const sidebarTheme = {
+    baseStyle: 'flex flex-col h-full bg-white border-r border-gray-200 overflow-hidden transition-all duration-300 ease-in-out',
+    variants: {
+        sidebar: 'relative',
+        floating: 'rounded-lg shadow-lg border border-gray-200',
+        inset: 'rounded-lg bg-gray-50 border border-gray-200',
+    },
+    sides: {
+        left: 'border-r',
+        right: 'border-l',
+    },
+    collapsed: 'w-20',
+    expanded: 'w-[280px]', // Using arbitrary value since 280px is not a standard Tailwind width
+};
+
+export { sidebarTheme };

package/dist/components/core/Sidebar/SidebarContent.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SidebarContentProps } from "./Sidebar.types";
+export declare const SidebarContent: React.ForwardRefExoticComponent<SidebarContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Sidebar/SidebarContent.js

@@ -0,0 +1,12 @@
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useSidebarContext } from './SidebarContext.js';
+
+const SidebarContent = React__default.forwardRef(({ children, className, ...props }, ref) => {
+    const sidebarContext = useSidebarContext();
+    const collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
+    return (React__default.createElement("div", { ref: ref, className: cn("flex-1 overflow-y-auto overflow-x-hidden py-2 transition-all duration-200", collapsed ? "px-2" : "px-3", className), ...props }, children));
+});
+SidebarContent.displayName = "SidebarContent";
+
+export { SidebarContent };

package/dist/components/core/Sidebar/SidebarContext.js

@@ -0,0 +1,37 @@
+import React__default, { createContext, useContext, useState, useCallback } from 'react';
+
+const SidebarContext = createContext(null);
+const useSidebarContext = () => {
+    const context = useContext(SidebarContext);
+    // Return null if not in sidebar context (allows NavItem to work elsewhere)
+    return context;
+};
+const SidebarProvider = ({ children, defaultCollapsed = false, collapsed: controlledCollapsed, onCollapsedChange, width = {}, side = 'left', variant = 'sidebar', }) => {
+    const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
+    // Determine if component is controlled
+    const isControlled = controlledCollapsed !== undefined;
+    const collapsed = isControlled ? controlledCollapsed : internalCollapsed;
+    const setCollapsed = useCallback((newCollapsed) => {
+        if (!isControlled) {
+            setInternalCollapsed(newCollapsed);
+        }
+        onCollapsedChange === null || onCollapsedChange === void 0 ? void 0 : onCollapsedChange(newCollapsed);
+    }, [isControlled, onCollapsedChange]);
+    const toggleCollapsed = useCallback(() => {
+        setCollapsed(!collapsed);
+    }, [collapsed, setCollapsed]);
+    const contextValue = {
+        collapsed,
+        setCollapsed,
+        toggleCollapsed,
+        width: {
+            expanded: width.expanded || 280,
+            collapsed: width.collapsed || 80,
+        },
+        side,
+        variant,
+    };
+    return (React__default.createElement(SidebarContext.Provider, { value: contextValue }, children));
+};
+
+export { SidebarProvider, useSidebarContext };

package/dist/components/core/Sidebar/SidebarFooter.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SidebarFooterProps } from "./Sidebar.types";
+export declare const SidebarFooter: React.ForwardRefExoticComponent<SidebarFooterProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Sidebar/SidebarFooter.js

@@ -0,0 +1,12 @@
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useSidebarContext } from './SidebarContext.js';
+
+const SidebarFooter = React__default.forwardRef(({ children, className, ...props }, ref) => {
+    const sidebarContext = useSidebarContext();
+    const collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
+    return (React__default.createElement("div", { ref: ref, className: cn("flex-shrink-0 border-t border-[var(--color-border)] bg-[var(--color-background)] transition-all duration-200", collapsed ? "p-2 flex justify-center" : "p-4", className), ...props }, children));
+});
+SidebarFooter.displayName = "SidebarFooter";
+
+export { SidebarFooter };

package/dist/components/core/Sidebar/SidebarHeader.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SidebarHeaderProps } from "./Sidebar.types";
+export declare const SidebarHeader: React.ForwardRefExoticComponent<SidebarHeaderProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Sidebar/SidebarHeader.js

@@ -0,0 +1,19 @@
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { useSidebarContext } from './SidebarContext.js';
+import { SidebarToggle } from './SidebarToggle.js';
+
+const SidebarHeader = React__default.forwardRef(({ logo, showToggle = true, customToggle, children, className, ...props }, ref) => {
+    const sidebarContext = useSidebarContext();
+    const collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
+    // If children are provided, use them instead of default layout
+    if (children) {
+        return (React__default.createElement("div", { ref: ref, className: cn("flex-shrink-0 border-b border-gray-200 bg-white", className), ...props }, children));
+    }
+    return (React__default.createElement("div", { ref: ref, className: cn("flex items-center justify-between flex-shrink-0 h-16 border-b border-[var(--color-border)] bg-[var(--color-background)] transition-all duration-200", collapsed ? "px-3" : "px-4", className), ...props },
+        React__default.createElement("div", { className: cn("flex items-center min-w-0 transition-all duration-200", collapsed ? "flex-shrink-0" : "flex-1") }, logo),
+        showToggle && (React__default.createElement("div", { className: "flex-shrink-0" }, customToggle || React__default.createElement(SidebarToggle, null)))));
+});
+SidebarHeader.displayName = "SidebarHeader";
+
+export { SidebarHeader };