@flikk/ui 1.0.0-beta.1

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

@@ -0,0 +1,30 @@
+import { SegmentedSize } from "./Segmented.types";
+/**
+ * Internal theme structure for the Segmented component
+ */
+interface SegmentedTheme {
+    baseStyle: string;
+    sizes: Record<SegmentedSize, string>;
+    blockStyle: string;
+    disabledStyle: string;
+    slidingBackgroundStyle: string;
+}
+/**
+ * Internal theme structure for the SegmentedItem component
+ */
+interface SegmentedItemTheme {
+    baseStyle: string;
+    sizes: Record<SegmentedSize, string>;
+    selectedStyle: string;
+    unselectedStyle: string;
+    disabledStyle: string;
+}
+/**
+ * Default theme for the Segmented component
+ */
+export declare const segmentedTheme: SegmentedTheme;
+/**
+ * Default theme for the SegmentedItem component
+ */
+export declare const segmentedItemTheme: SegmentedItemTheme;
+export {};

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

@@ -0,0 +1,40 @@
+/**
+ * Default theme for the Segmented component
+ */
+const segmentedTheme = {
+    // Base styles for the segmented container
+    baseStyle: "relative flex rounded-[var(--segmented-radius)] p-[2px] bg-[var(--color-background-secondary)]",
+    // Size variants using CSS variables
+    sizes: {
+        sm: "min-h-[var(--segmented-min-h-sm)]",
+        md: "min-h-[var(--segmented-min-h-md)]",
+        lg: "min-h-[var(--segmented-min-h-lg)]",
+    },
+    // Block style
+    blockStyle: "w-full",
+    // Disabled style
+    disabledStyle: "opacity-50 cursor-not-allowed pointer-events-none",
+    // Sliding background style with CSS variables
+    slidingBackgroundStyle: "absolute top-[2px] left-[2px] rounded-[calc(var(--segmented-radius)-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
+ */
+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-radius)-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)]",
+        md: "text-[length:var(--segmented-text-size-md)] px-[var(--segmented-px-md)]",
+        lg: "text-[length:var(--segmented-text-size-lg)] px-[var(--segmented-px-lg)]",
+    },
+    // Selected state
+    selectedStyle: "text-[var(--color-text-primary)] z-10",
+    // Unselected state
+    unselectedStyle: "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] ",
+    // Disabled state
+    disabledStyle: "opacity-50 cursor-not-allowed pointer-events-none",
+};
+
+export { segmentedItemTheme, segmentedTheme };

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

@@ -0,0 +1,52 @@
+import React from "react";
+/**
+ * Size options for the Segmented component
+ */
+export type SegmentedSize = "sm" | "md" | "lg";
+/**
+ * Theme overrides for Segmented component
+ */
+export interface SegmentedThemeOverrides {
+    /** Base styles for the container */
+    baseStyle?: string;
+    /** Size-specific styles */
+    sizes?: Partial<Record<SegmentedSize, string>>;
+    /** Block/full-width styles */
+    blockStyle?: string;
+    /** Disabled state styles */
+    disabledStyle?: string;
+    /** Sliding background styles */
+    slidingBackgroundStyle?: string;
+}
+/**
+ * Segmented component props
+ */
+export interface SegmentedProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** The currently selected value (controlled mode) */
+    value?: string;
+    /** Function called when selection changes */
+    onChange?: (value: string) => void;
+    /** Size of the segmented control */
+    size?: SegmentedSize;
+    /** Whether the segmented control is disabled */
+    disabled?: boolean;
+    /** Whether the segmented control should take full width */
+    block?: boolean;
+    /** Children SegmentedItem components */
+    children?: React.ReactNode;
+    /** Custom className for the sliding background */
+    slidingBackgroundClassName?: string;
+    /** Theme overrides for advanced customization */
+    theme?: SegmentedThemeOverrides;
+}
+/**
+ * SegmentedItem component props
+ */
+export interface SegmentedItemProps extends React.HTMLAttributes<HTMLButtonElement> {
+    /** The value for this segment */
+    value: string;
+    /** Whether this segment is disabled */
+    disabled?: boolean;
+    /** Children content */
+    children?: React.ReactNode;
+}

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { SegmentedSize } from "./Segmented.types";
+/**
+ * Context interface for sharing state between Segmented and SegmentedItem
+ */
+interface SegmentedContextValue {
+    selectedValue?: string;
+    onChange?: (value: string) => void;
+    size: SegmentedSize;
+    disabled: boolean;
+}
+/**
+ * Context for sharing state between Segmented container and SegmentedItem components
+ */
+export declare const SegmentedContext: React.Context<SegmentedContextValue | null>;
+export {};

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

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

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

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

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

@@ -0,0 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useContext } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { segmentedItemTheme } from './Segmented.theme.js';
+import { SegmentedContext } from './SegmentedContext.js';
+
+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");
+    }
+    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 (jsx("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: children }));
+});
+// Set display name for dev tools and Storybook
+SegmentedItem.displayName = "SegmentedItem";
+
+export { SegmentedItem };

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

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

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

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

package/dist/components/core/Separator/Separator.js

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useMemo } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { separatorTheme } from './Separator.theme.js';
+
+const Separator = React__default.forwardRef(({ vertical = false, margin = 'md', className, theme: customTheme = {}, ...props }, ref) => {
+    const theme = useMemo(() => {
+        var _a, _b;
+        return ({
+            ...separatorTheme,
+            ...customTheme,
+            margins: {
+                horizontal: {
+                    ...separatorTheme.margins.horizontal,
+                    ...(_a = customTheme.margins) === null || _a === void 0 ? void 0 : _a.horizontal,
+                },
+                vertical: {
+                    ...separatorTheme.margins.vertical,
+                    ...(_b = customTheme.margins) === null || _b === void 0 ? void 0 : _b.vertical,
+                },
+            },
+        });
+    }, [customTheme]);
+    const marginStyle = vertical
+        ? theme.margins.vertical[margin] || ''
+        : theme.margins.horizontal[margin] || '';
+    const orientationStyle = vertical ? theme.vertical : theme.horizontal;
+    return (jsx("div", { ref: ref, className: cn(theme.baseStyle, orientationStyle, marginStyle, className), role: "separator", "aria-orientation": vertical ? 'vertical' : 'horizontal', ...props }));
+});
+Separator.displayName = 'Separator';
+
+export { Separator };

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

@@ -0,0 +1,2 @@
+import { SeparatorTheme } from './Separator.types';
+export declare const separatorTheme: SeparatorTheme;

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

@@ -0,0 +1,19 @@
+const separatorTheme = {
+    baseStyle: 'bg-[var(--color-border)] border-0',
+    horizontal: 'w-full h-px',
+    vertical: 'h-full w-px',
+    margins: {
+        horizontal: {
+            sm: 'my-2',
+            md: 'my-4',
+            lg: 'my-6',
+        },
+        vertical: {
+            sm: 'mx-2',
+            md: 'mx-4',
+            lg: 'mx-6',
+        },
+    },
+};
+
+export { separatorTheme };

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

@@ -0,0 +1,40 @@
+import { HTMLAttributes } from 'react';
+export type SeparatorMargin = 'sm' | 'md' | 'lg';
+export interface SeparatorTheme {
+    baseStyle: string;
+    horizontal: string;
+    vertical: string;
+    margins: {
+        horizontal: Record<SeparatorMargin, string>;
+        vertical: Record<SeparatorMargin, string>;
+    };
+}
+export interface SeparatorThemeOverrides {
+    baseStyle?: string;
+    horizontal?: string;
+    vertical?: string;
+    margins?: {
+        horizontal?: Partial<Record<SeparatorMargin, string>>;
+        vertical?: Partial<Record<SeparatorMargin, string>>;
+    };
+}
+export interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Whether the separator is vertical (default is horizontal)
+     * @default false
+     */
+    vertical?: boolean;
+    /**
+     * The margin size for spacing
+     * @default 'md'
+     */
+    margin?: SeparatorMargin;
+    /**
+     * Custom class name for the separator
+     */
+    className?: string;
+    /**
+     * Component-level theme overrides
+     */
+    theme?: SeparatorThemeOverrides;
+}

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

@@ -0,0 +1,3 @@
+export { Separator } from './Separator';
+export type { SeparatorProps, SeparatorTheme, SeparatorThemeOverrides } from './Separator.types';
+export { separatorTheme } from './Separator.theme';

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,43 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default, { useMemo } 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 SIDEBAR_TRANSITION = {
+    type: "spring",
+    stiffness: 300,
+    damping: 30,
+};
+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 = useMemo(() => ({
+        ...sidebarTheme,
+        ...customTheme,
+        variants: {
+            ...sidebarTheme.variants,
+            ...customTheme.variants,
+        },
+        sides: {
+            ...sidebarTheme.sides,
+            ...customTheme.sides,
+        },
+    }), [customTheme]);
+    const sidebarClasses = cn(theme.baseStyle, theme.variants[variant], theme.sides[side], className);
+    const animateValue = useMemo(() => ({
+        width: collapsed ? collapsedWidth : expandedWidth,
+    }), [collapsed, collapsedWidth, expandedWidth]);
+    return (jsx(motion.div, { ref: ref, className: sidebarClasses, "data-side": side, "data-variant": variant, "data-collapsed": collapsed, initial: false, animate: animateValue, transition: SIDEBAR_TRANSITION, ...props, children: children }));
+});
+const Sidebar = React__default.forwardRef(({ side = "left", variant = "sidebar", defaultCollapsed = false, collapsed: controlledCollapsed, onCollapsedChange, width, children, className, theme: customTheme = {}, ...props }, ref) => {
+    return (jsx(SidebarProvider, { defaultCollapsed: defaultCollapsed, collapsed: controlledCollapsed, onCollapsedChange: onCollapsedChange, width: width, side: side, variant: variant, children: jsx(SidebarContainer, { ref: ref, className: className, theme: customTheme, side: side, variant: variant, width: width, ...props, children: children }) }));
+});
+Sidebar.displayName = "Sidebar";
+
+export { Sidebar };

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

@@ -0,0 +1,2 @@
+import { SidebarTheme } from './Sidebar.types';
+export declare const sidebarTheme: SidebarTheme;

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-[var(--radius-base)] shadow-lg border border-gray-200',
+        inset: 'rounded-[var(--radius-base)] 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/Sidebar.types.d.ts

@@ -0,0 +1,129 @@
+import { ReactNode } from 'react';
+export type SidebarSide = 'left' | 'right';
+export type SidebarVariant = 'sidebar' | 'floating' | 'inset';
+export interface SidebarContextValue {
+    collapsed: boolean;
+    setCollapsed: (collapsed: boolean) => void;
+    toggleCollapsed: () => void;
+    width: {
+        expanded: number;
+        collapsed: number;
+    };
+    side: SidebarSide;
+    variant: SidebarVariant;
+}
+export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Which side the sidebar appears on
+     * @default "left"
+     */
+    side?: SidebarSide;
+    /**
+     * Visual variant of the sidebar
+     * @default "sidebar"
+     */
+    variant?: SidebarVariant;
+    /**
+     * Whether the sidebar is collapsed by default
+     * @default false
+     */
+    defaultCollapsed?: boolean;
+    /**
+     * Controlled collapsed state
+     */
+    collapsed?: boolean;
+    /**
+     * Callback when collapsed state changes
+     */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /**
+     * Sidebar width configuration
+     */
+    width?: {
+        expanded?: number;
+        collapsed?: number;
+    };
+    /**
+     * Children components
+     */
+    children: ReactNode;
+    /**
+     * Custom theme overrides
+     */
+    theme?: SidebarThemeOverrides;
+}
+export interface SidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Logo component to display
+     */
+    logo?: ReactNode;
+    /**
+     * Whether to show the collapse toggle button
+     * @default true
+     */
+    showToggle?: boolean;
+    /**
+     * Custom toggle button
+     */
+    customToggle?: ReactNode;
+    /**
+     * Children for custom header content
+     */
+    children?: ReactNode;
+}
+export interface SidebarContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+export interface SidebarFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+export interface SidebarNavProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+export interface SidebarNavGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Title for the navigation group
+     */
+    title?: string;
+    /**
+     * Whether to show the title when sidebar is collapsed
+     * @default false
+     */
+    showTitleWhenCollapsed?: boolean;
+    /**
+     * Children navigation items
+     */
+    children: ReactNode;
+}
+export interface SidebarToggleProps extends React.HTMLAttributes<HTMLButtonElement> {
+    /**
+     * Custom icon for expanded state
+     */
+    expandIcon?: ReactNode;
+    /**
+     * Custom icon for collapsed state
+     */
+    collapseIcon?: ReactNode;
+}
+export interface SidebarTheme {
+    baseStyle: string;
+    variants: {
+        [K in SidebarVariant]: string;
+    };
+    sides: {
+        [K in SidebarSide]: string;
+    };
+    collapsed: string;
+    expanded: string;
+}
+export interface SidebarThemeOverrides {
+    baseStyle?: string;
+    variants?: Partial<{
+        [K in SidebarVariant]: string;
+    }>;
+    sides?: Partial<{
+        [K in SidebarSide]: string;
+    }>;
+    collapsed?: string;
+    expanded?: string;
+}

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,13 @@
+import { jsx } from 'react/jsx-runtime';
+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 (jsx("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: children }));
+});
+SidebarContent.displayName = "SidebarContent";
+
+export { SidebarContent };

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { SidebarContextValue } from './Sidebar.types';
+export declare const useSidebarContext: () => SidebarContextValue | null;
+interface SidebarProviderProps {
+    children: React.ReactNode;
+    defaultCollapsed?: boolean;
+    collapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    width?: {
+        expanded?: number;
+        collapsed?: number;
+    };
+    side?: 'left' | 'right';
+    variant?: 'sidebar' | 'floating' | 'inset';
+}
+export declare const SidebarProvider: React.FC<SidebarProviderProps>;
+export {};

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

@@ -0,0 +1,38 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useState, useCallback, useMemo } 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 = useMemo(() => ({
+        collapsed,
+        setCollapsed,
+        toggleCollapsed,
+        width: {
+            expanded: width.expanded || 280,
+            collapsed: width.collapsed || 80,
+        },
+        side,
+        variant,
+    }), [collapsed, setCollapsed, toggleCollapsed, width.expanded, width.collapsed, side, variant]);
+    return (jsx(SidebarContext.Provider, { value: contextValue, children: 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,13 @@
+import { jsx } from 'react/jsx-runtime';
+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 (jsx("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: 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,18 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+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 (jsx("div", { ref: ref, className: cn("flex-shrink-0 border-b border-gray-200 bg-white", className), ...props, children: children }));
+    }
+    return (jsxs("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, children: [jsx("div", { className: cn("flex items-center min-w-0 transition-all duration-200", collapsed ? "flex-shrink-0" : "flex-1"), children: logo }), showToggle && (jsx("div", { className: "flex-shrink-0", children: customToggle || jsx(SidebarToggle, {}) }))] }));
+});
+SidebarHeader.displayName = "SidebarHeader";
+
+export { SidebarHeader };

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

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

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

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+
+const SidebarNav = React__default.forwardRef(({ children, className, ...props }, ref) => {
+    return (jsx("nav", { ref: ref, className: cn('flex-1 space-y-1 p-4', className), role: "navigation", ...props, children: children }));
+});
+SidebarNav.displayName = 'SidebarNav';
+
+export { SidebarNav };

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

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