flikkui 0.1.0-beta.11 → 0.1.0-beta.12

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,160 @@
+import { __extends, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+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
+ */
+var DefaultFallback = function (_a) {
+    var error = _a.error, attempt = _a.attempt, maxAttempts = _a.maxAttempts, retryIn = _a.retryIn, retry = _a.retry, reset = _a.reset;
+    var theme = retryBoundaryTheme;
+    var 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
+ */
+var RetryFallbackWrapper = function (_a) {
+    var error = _a.error, attempt = _a.attempt, maxAttempts = _a.maxAttempts, retryDelay = _a.retryDelay, onRetry = _a.onRetry, onReset = _a.onReset, fallback = _a.fallback, className = _a.className;
+    var _b = useState(Math.ceil(retryDelay / 1000)), countdown = _b[0], setCountdown = _b[1];
+    var hasMoreRetries = attempt < maxAttempts;
+    // Countdown timer
+    useEffect(function () {
+        if (!hasMoreRetries || retryDelay === 0)
+            return;
+        setCountdown(Math.ceil(retryDelay / 1000));
+        var interval = setInterval(function () {
+            setCountdown(function (prev) {
+                if (prev <= 1) {
+                    clearInterval(interval);
+                    onRetry();
+                    return 0;
+                }
+                return prev - 1;
+            });
+        }, 1000);
+        return function () { return clearInterval(interval); };
+    }, [retryDelay, hasMoreRetries, onRetry]);
+    var fallbackProps = {
+        error: error,
+        attempt: attempt,
+        maxAttempts: 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, __assign({}, fallbackProps))));
+};
+/**
+ * RetryBoundary - Error boundary with exponential backoff retry
+ *
+ * @example
+ * <RetryBoundary
+ *   retry={{ maxAttempts: 3, initialDelay: 1000 }}
+ *   onMaxRetriesReached={(error) => logError(error)}
+ * >
+ *   <AsyncComponent />
+ * </RetryBoundary>
+ */
+var RetryBoundary = /** @class */ (function (_super) {
+    __extends(RetryBoundary, _super);
+    function RetryBoundary(props) {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _this = _super.call(this, props) || this;
+        _this.handleRetry = function () {
+            var onRetry = _this.props.onRetry;
+            var newAttempt = _this.state.attempt + 1;
+            onRetry === null || onRetry === void 0 ? void 0 : onRetry(newAttempt);
+            _this.setState({
+                error: null,
+                attempt: newAttempt,
+                retryDelay: 0,
+            });
+        };
+        _this.handleReset = function () {
+            _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,
+        };
+        return _this;
+    }
+    RetryBoundary.getDerivedStateFromError = function (error) {
+        return { error: error };
+    };
+    RetryBoundary.prototype.componentDidCatch = function (error, errorInfo) {
+        var attempt = this.state.attempt;
+        var _a = this.props, onError = _a.onError, onMaxRetriesReached = _a.onMaxRetriesReached;
+        // Normalize error for retry check
+        var streamingError = normalizeError(error);
+        var canRetry = shouldRetry(streamingError, attempt, this.retryConfig);
+        onError === null || onError === void 0 ? void 0 : onError(error, attempt);
+        if (canRetry) {
+            var delay = calculateRetryDelay(attempt, this.retryConfig);
+            this.setState({ retryDelay: delay });
+        }
+        else {
+            onMaxRetriesReached === null || onMaxRetriesReached === void 0 ? void 0 : onMaxRetriesReached(error);
+        }
+    };
+    RetryBoundary.prototype.render = function () {
+        var _a;
+        var _b = this.props, children = _b.children, fallback = _b.fallback, className = _b.className;
+        var _c = this.state, error = _c.error, attempt = _c.attempt, retryDelay = _c.retryDelay;
+        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;
+    };
+    return RetryBoundary;
+}(Component));
+
+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 @@
+var 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.js

@@ -1,7 +1,10 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/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 '../../../utils/streamingErrors.js';
+import '../../../utils/optimisticErrors.js';
+import '../../../utils/actionQueue.js';
 import { segmentedTheme } from './Segmented.theme.js';
 import { SegmentedContext } from './SegmentedContext.js';
 import { SegmentedItem } from './SegmentedItem.js';

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

@@ -3,7 +3,7 @@
  */
 var segmentedTheme = {
     // Base styles for the segmented container
-    baseStyle: "relative flex rounded-[var(--segmented-rounded)] p-[2px] ",
+    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,7 +15,7 @@ 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-real-md",
+    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
@@ -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/SegmentedItem.js

@@ -1,4 +1,4 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default, { useContext } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { segmentedItemTheme } from './Segmented.theme.js';

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

@@ -1,3 +1,3 @@
-import React from 'react';
-import { SidebarProps } from './Sidebar.types';
+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

@@ -1,28 +1,33 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 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';
 
 var SidebarContainer = React__default.forwardRef(function (_a, ref) {
     var _b, _c, _d;
-    var _e = _a.side, side = _e === void 0 ? 'left' : _e, _f = _a.variant, variant = _f === void 0 ? 'sidebar' : _f, width = _a.width, children = _a.children, className = _a.className, _g = _a.theme, customTheme = _g === void 0 ? {} : _g, props = __rest(_a, ["side", "variant", "width", "children", "className", "theme"]);
+    var _e = _a.side, side = _e === void 0 ? "left" : _e, _f = _a.variant, variant = _f === void 0 ? "sidebar" : _f, width = _a.width, children = _a.children, className = _a.className, _g = _a.theme, customTheme = _g === void 0 ? {} : _g, props = __rest(_a, ["side", "variant", "width", "children", "className", "theme"]);
     var context = useSidebarContext();
     var collapsed = (_b = context === null || context === void 0 ? void 0 : context.collapsed) !== null && _b !== void 0 ? _b : false;
+    // Default widths
+    var expandedWidth = (width === null || width === void 0 ? void 0 : width.expanded) || ((_c = context === null || context === void 0 ? void 0 : context.width) === null || _c === void 0 ? void 0 : _c.expanded) || 280;
+    var collapsedWidth = (width === null || width === void 0 ? void 0 : width.collapsed) || ((_d = context === null || context === void 0 ? void 0 : context.width) === null || _d === void 0 ? void 0 : _d.collapsed) || 80;
     var theme = __assign(__assign(__assign({}, sidebarTheme), customTheme), { variants: __assign(__assign({}, sidebarTheme.variants), customTheme.variants), sides: __assign(__assign({}, sidebarTheme.sides), customTheme.sides) });
     var sidebarClasses = cn(theme.baseStyle, theme.variants[variant], theme.sides[side], className);
-    var widthValue = collapsed
-        ? ((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)
-        : ((width === null || width === void 0 ? void 0 : width.expanded) || ((_d = context === null || context === void 0 ? void 0 : context.width) === null || _d === void 0 ? void 0 : _d.expanded) || 280);
-    return (React__default.createElement("div", __assign({ ref: ref, className: sidebarClasses, "data-side": side, "data-variant": variant, "data-collapsed": collapsed, style: {
-            width: "".concat(widthValue, "px"),
+    return (React__default.createElement(motion.div, __assign({ 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));
 });
 var Sidebar = React__default.forwardRef(function (_a, ref) {
-    var _b = _a.side, side = _b === void 0 ? 'left' : _b, _c = _a.variant, variant = _c === void 0 ? 'sidebar' : _c, _d = _a.defaultCollapsed, defaultCollapsed = _d === void 0 ? false : _d, controlledCollapsed = _a.collapsed, onCollapsedChange = _a.onCollapsedChange, width = _a.width, children = _a.children, className = _a.className, _e = _a.theme, customTheme = _e === void 0 ? {} : _e, props = __rest(_a, ["side", "variant", "defaultCollapsed", "collapsed", "onCollapsedChange", "width", "children", "className", "theme"]);
+    var _b = _a.side, side = _b === void 0 ? "left" : _b, _c = _a.variant, variant = _c === void 0 ? "sidebar" : _c, _d = _a.defaultCollapsed, defaultCollapsed = _d === void 0 ? false : _d, controlledCollapsed = _a.collapsed, onCollapsedChange = _a.onCollapsedChange, width = _a.width, children = _a.children, className = _a.className, _e = _a.theme, customTheme = _e === void 0 ? {} : _e, props = __rest(_a, ["side", "variant", "defaultCollapsed", "collapsed", "onCollapsedChange", "width", "children", "className", "theme"]);
     return (React__default.createElement(SidebarProvider, { defaultCollapsed: defaultCollapsed, collapsed: controlledCollapsed, onCollapsedChange: onCollapsedChange, width: width, side: side, variant: variant },
         React__default.createElement(SidebarContainer, __assign({ ref: ref, className: className, theme: customTheme, side: side, variant: variant, width: width }, props), children)));
 });
-Sidebar.displayName = 'Sidebar';
+Sidebar.displayName = "Sidebar";
 
 export { Sidebar };

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

@@ -1,3 +1,3 @@
-import React from 'react';
-import { SidebarContentProps } from './Sidebar.types';
+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

@@ -1,12 +1,14 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
+import { useSidebarContext } from './SidebarContext.js';
 
 var SidebarContent = React__default.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("div", __assign({ ref: ref, className: cn('flex-1 flex flex-col min-h-0 overflow-hidden', className) }, props),
-        React__default.createElement("div", { className: "flex-1 overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent" }, children)));
+    var sidebarContext = useSidebarContext();
+    var collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
+    return (React__default.createElement("div", __assign({ 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';
+SidebarContent.displayName = "SidebarContent";
 
 export { SidebarContent };

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

@@ -1,3 +1,3 @@
-import React from 'react';
-import { SidebarFooterProps } from './Sidebar.types';
+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

@@ -1,11 +1,14 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
+import { useSidebarContext } from './SidebarContext.js';
 
 var SidebarFooter = React__default.forwardRef(function (_a, ref) {
     var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("div", __assign({ ref: ref, className: cn('flex-shrink-0 border-t border-gray-200 bg-white p-4', className) }, props), children));
+    var sidebarContext = useSidebarContext();
+    var collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
+    return (React__default.createElement("div", __assign({ 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';
+SidebarFooter.displayName = "SidebarFooter";
 
 export { SidebarFooter };

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

@@ -1,3 +1,3 @@
-import React from 'react';
-import { SidebarHeaderProps } from './Sidebar.types';
+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

@@ -1,4 +1,4 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { useSidebarContext } from './SidebarContext.js';
@@ -10,13 +10,12 @@ var SidebarHeader = React__default.forwardRef(function (_a, ref) {
     var 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", __assign({ ref: ref, className: cn('flex-shrink-0 border-b border-gray-200 bg-white', className) }, props), children));
+        return (React__default.createElement("div", __assign({ ref: ref, className: cn("flex-shrink-0 border-b border-gray-200 bg-white", className) }, props), children));
     }
-    return (React__default.createElement("div", __assign({ ref: ref, className: cn('flex items-center justify-between flex-shrink-0 p-4 border-b border-gray-200 bg-white', className) }, props),
-        logo && (React__default.createElement("div", { className: cn('flex items-center min-w-0', collapsed && 'justify-center w-full') }, logo)),
-        showToggle && !collapsed && (React__default.createElement("div", { className: "flex-shrink-0 ml-4" }, customToggle || React__default.createElement(SidebarToggle, null))),
-        showToggle && collapsed && (React__default.createElement("div", { className: "absolute top-4 right-2" }, customToggle || React__default.createElement(SidebarToggle, null)))));
+    return (React__default.createElement("div", __assign({ 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';
+SidebarHeader.displayName = "SidebarHeader";
 
 export { SidebarHeader };

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

@@ -1,4 +1,4 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 

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

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

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

@@ -1,4 +1,4 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { useSidebarContext } from './SidebarContext.js';
@@ -8,12 +8,12 @@ var SidebarNavGroup = React__default.forwardRef(function (_a, ref) {
     var sidebarContext = useSidebarContext();
     var collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
     var showTitle = title && (!collapsed || showTitleWhenCollapsed);
-    return (React__default.createElement("div", __assign({ ref: ref, className: cn('space-y-1', className) }, props),
-        showTitle && (React__default.createElement("div", { className: "px-3 py-2" },
-            React__default.createElement("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wider" }, title))),
-        React__default.createElement("div", { className: "space-y-1" }, children),
-        React__default.createElement("div", { className: "pt-4" })));
+    return (React__default.createElement("div", __assign({ ref: ref, className: cn("space-y-1", className) }, props),
+        showTitle && (React__default.createElement("div", { className: "px-2 py-2" },
+            React__default.createElement("h3", { className: "text-xs font-semibold text-[var(--color-text-muted)] uppercase tracking-wider" }, title))),
+        collapsed && !showTitleWhenCollapsed && (React__default.createElement("div", { className: "h-px bg-[var(--color-border)] mx-2 my-2" })),
+        React__default.createElement("div", { className: "space-y-1" }, children)));
 });
-SidebarNavGroup.displayName = 'SidebarNavGroup';
+SidebarNavGroup.displayName = "SidebarNavGroup";
 
 export { SidebarNavGroup };

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

@@ -0,0 +1,7 @@
+import React from "react";
+export interface SidebarSubmenuProps {
+    children: React.ReactNode;
+    isOpen: boolean;
+    className?: string;
+}
+export declare const SidebarSubmenu: ({ children, isOpen, className, }: SidebarSubmenuProps) => React.JSX.Element;

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

@@ -0,0 +1,13 @@
+import React__default from 'react';
+import { AnimatePresence, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+
+var SidebarSubmenu = function (_a) {
+    var children = _a.children, isOpen = _a.isOpen, className = _a.className;
+    return (React__default.createElement(AnimatePresence, { initial: false }, isOpen && (React__default.createElement(motion.div, { initial: "collapsed", animate: "open", exit: "collapsed", variants: {
+            open: { opacity: 1, height: "auto" },
+            collapsed: { opacity: 0, height: 0 },
+        }, transition: { duration: 0.2, ease: "easeInOut" }, className: cn("overflow-hidden", className) }, children))));
+};
+
+export { SidebarSubmenu };

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

@@ -1,3 +1,3 @@
-import React from 'react';
-import { SidebarToggleProps } from './Sidebar.types';
+import React from "react";
+import { SidebarToggleProps } from "./Sidebar.types";
 export declare const SidebarToggle: React.ForwardRefExoticComponent<SidebarToggleProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1,15 +1,17 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
+import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline';
+import { motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { useSidebarContext } from './SidebarContext.js';
-import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/Bars3Icon.js';
+import { Button } from '../Button/Button.js';
 
 var SidebarToggle = React__default.forwardRef(function (_a, ref) {
     var expandIcon = _a.expandIcon, collapseIcon = _a.collapseIcon, className = _a.className, onClick = _a.onClick, props = __rest(_a, ["expandIcon", "collapseIcon", "className", "onClick"]);
     var sidebarContext = useSidebarContext();
     if (!sidebarContext) {
-        if (process.env.NODE_ENV !== 'production') {
-            console.warn('SidebarToggle must be used within a Sidebar component');
+        if (process.env.NODE_ENV !== "production") {
+            console.warn("SidebarToggle must be used within a Sidebar component");
         }
         return null;
     }
@@ -18,11 +20,11 @@ var SidebarToggle = React__default.forwardRef(function (_a, ref) {
         toggleCollapsed();
         onClick === null || onClick === void 0 ? void 0 : onClick(e);
     };
-    var defaultIcon = (React__default.createElement(ForwardRef, { className: "size-4", "aria-hidden": "true" }));
-    return (React__default.createElement("button", __assign({ ref: ref, type: "button", className: cn('inline-flex items-center justify-center rounded-md p-2 text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-[var(--color-primary-500)] focus:ring-offset-2 transition-colors', className), onClick: handleClick, "aria-label": collapsed ? 'Expand sidebar' : 'Collapse sidebar', title: collapsed ? 'Expand sidebar' : 'Collapse sidebar' }, props), collapsed
-        ? (expandIcon || defaultIcon)
-        : (collapseIcon || defaultIcon)));
+    return (React__default.createElement(Button, __assign({ ref: ref, variant: "ghost", size: "sm", className: cn("size-8 p-0", className), onClick: handleClick, "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar", title: collapsed ? "Expand sidebar" : "Collapse sidebar" }, props),
+        React__default.createElement(motion.div, { initial: false, animate: { rotate: collapsed ? 180 : 0 }, transition: { duration: 0.2 } }, collapsed
+            ? expandIcon || React__default.createElement(ChevronRightIcon, { className: "size-4" })
+            : collapseIcon || React__default.createElement(ChevronLeftIcon, { className: "size-4" }))));
 });
-SidebarToggle.displayName = 'SidebarToggle';
+SidebarToggle.displayName = "SidebarToggle";
 
 export { SidebarToggle };

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

@@ -1,9 +1,10 @@
-export { Sidebar } from './Sidebar';
-export { SidebarHeader } from './SidebarHeader';
-export { SidebarContent } from './SidebarContent';
-export { SidebarFooter } from './SidebarFooter';
-export { SidebarNav } from './SidebarNav';
-export { SidebarNavGroup } from './SidebarNavGroup';
-export { SidebarToggle } from './SidebarToggle';
-export { useSidebarContext } from './SidebarContext';
-export type { SidebarProps, SidebarHeaderProps, SidebarContentProps, SidebarFooterProps, SidebarNavProps, SidebarNavGroupProps, SidebarToggleProps, SidebarSide, SidebarVariant, SidebarContextValue, SidebarTheme, SidebarThemeOverrides, } from './Sidebar.types';
+export { Sidebar } from "./Sidebar";
+export { SidebarHeader } from "./SidebarHeader";
+export { SidebarContent } from "./SidebarContent";
+export { SidebarFooter } from "./SidebarFooter";
+export { SidebarNav } from "./SidebarNav";
+export { SidebarNavGroup } from "./SidebarNavGroup";
+export { SidebarSubmenu } from "./SidebarSubmenu";
+export { SidebarToggle } from "./SidebarToggle";
+export { useSidebarContext } from "./SidebarContext";
+export type { SidebarProps, SidebarHeaderProps, SidebarContentProps, SidebarFooterProps, SidebarNavProps, SidebarNavGroupProps, SidebarToggleProps, SidebarSide, SidebarVariant, SidebarContextValue, SidebarTheme, SidebarThemeOverrides, } from "./Sidebar.types";