@teja-app/ui 0.0.2 → 0.0.3

package/dist/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const useSelection = require("./useSelection-DyXUWnGK.cjs");
+const useSidebar = require("./useSidebar-d1VZFhxd.cjs");
 const utils_index = require("./utils/index.cjs");
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
@@ -23,7 +23,7 @@ function _interopNamespaceDefault(e2) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const ReactDOM__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactDOM);
-const variantStyles$3 = {
+const variantStyles$4 = {
   primary: [
     // Light mode
     "bg-primary-800 text-white border border-gold-500/40",
@@ -63,7 +63,7 @@ const variantStyles$3 = {
     "dark:focus:ring-error/30"
   ].join(" ")
 };
-const sizeStyles$a = {
+const sizeStyles$b = {
   sm: "px-3 py-1.5 text-sm h-8",
   md: "px-4 py-2 text-base h-10",
   lg: "px-6 py-3 text-lg h-12"
@@ -93,9 +93,9 @@ const Button = React.forwardRef(
           "dark:focus:ring-offset-primary-900",
           "disabled:opacity-50 disabled:cursor-not-allowed",
           // Variant styles
-          variantStyles$3[variant],
+          variantStyles$4[variant],
           // Size styles
-          sizeStyles$a[size2],
+          sizeStyles$b[size2],
           // Width styles
           fullWidth && "w-full",
           // Custom className (allows override)
@@ -146,7 +146,7 @@ const Button = React.forwardRef(
   }
 );
 Button.displayName = "Button";
-const sizeStyles$9 = {
+const sizeStyles$a = {
   xs: "h-3 w-3",
   // 12px
   sm: "h-4 w-4",
@@ -176,7 +176,7 @@ const Spinner = React.forwardRef(
         ref,
         className: utils_index.cn(
           "animate-spin",
-          sizeStyles$9[size2],
+          sizeStyles$a[size2],
           colorStyles[color],
           className
         ),
@@ -7387,7 +7387,7 @@ const CloseIcon$2 = () => /* @__PURE__ */ jsxRuntime.jsx(
     )
   }
 );
-const sizeStyles$8 = {
+const sizeStyles$9 = {
   sm: "max-w-[400px]",
   md: "max-w-[560px]",
   lg: "max-w-[720px]"
@@ -7440,7 +7440,7 @@ function Modal({
               "bg-white border border-primary-200",
               // Dark mode
               "dark:bg-primary-800 dark:border-primary-700",
-              sizeStyles$8[size2],
+              sizeStyles$9[size2],
               className
             ),
             children: [
@@ -7518,7 +7518,7 @@ const CloseIcon$1 = () => /* @__PURE__ */ jsxRuntime.jsx(
     )
   }
 );
-const sizeStyles$7 = {
+const sizeStyles$8 = {
   sm: "max-w-[400px]",
   md: "max-w-[560px]",
   lg: "max-w-[720px]"
@@ -7567,7 +7567,7 @@ function Drawer({
               "bg-white border-l border-primary-200",
               // Dark mode
               "dark:bg-primary-800 dark:border-primary-700",
-              sizeStyles$7[size2],
+              sizeStyles$8[size2],
               className
             ),
             children: [
@@ -7683,7 +7683,7 @@ const paddingStyles = {
   md: "p-6",
   lg: "p-8"
 };
-const variantStyles$2 = {
+const variantStyles$3 = {
   default: [
     "shadow-sm border border-primary-200",
     "dark:border-primary-700"
@@ -7724,7 +7724,7 @@ const Card = React.forwardRef(
           // Padding
           paddingStyles[padding],
           // Variant
-          variantStyles$2[variant],
+          variantStyles$3[variant],
           // Hover effect
           hoverable && [
             "cursor-pointer",
@@ -7740,7 +7740,7 @@ const Card = React.forwardRef(
   }
 );
 Card.displayName = "Card";
-const sizeStyles$6 = {
+const sizeStyles$7 = {
   sm: "h-4 w-4",
   md: "h-5 w-5",
   lg: "h-6 w-6"
@@ -7810,7 +7810,7 @@ const Checkbox = React.forwardRef(
                 "aria-describedby": errorId,
                 onChange: handleChange,
                 className: utils_index.cn(
-                  sizeStyles$6[size2],
+                  sizeStyles$7[size2],
                   "rounded border transition-colors",
                   "focus:ring-2 focus:ring-offset-0",
                   "disabled:cursor-not-allowed",
@@ -7864,7 +7864,7 @@ const Checkbox = React.forwardRef(
   }
 );
 Checkbox.displayName = "Checkbox";
-const sizeStyles$5 = {
+const sizeStyles$6 = {
   sm: "h-4 w-4",
   md: "h-5 w-5",
   lg: "h-6 w-6"
@@ -7903,7 +7903,7 @@ const Radio = React.forwardRef(
               id: radioId,
               disabled,
               className: utils_index.cn(
-                sizeStyles$5[size2],
+                sizeStyles$6[size2],
                 "border transition-colors",
                 "focus:ring-2 focus:ring-offset-0",
                 "disabled:cursor-not-allowed",
@@ -8010,7 +8010,7 @@ function RadioGroup({
   ] });
 }
 RadioGroup.displayName = "RadioGroup";
-const sizeStyles$4 = {
+const sizeStyles$5 = {
   sm: {
     switch: "h-5 w-9",
     dot: "h-3 w-3",
@@ -8037,7 +8037,7 @@ function Toggle({
   className,
   isLoading = false
 }) {
-  const currentSize = sizeStyles$4[size2];
+  const currentSize = sizeStyles$5[size2];
   const isDisabled = disabled || isLoading;
   return /* @__PURE__ */ jsxRuntime.jsx(W, { className, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
     (label || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 mr-4", children: [
@@ -8274,7 +8274,7 @@ function Combobox({
   ] });
 }
 Combobox.displayName = "Combobox";
-const variantStyles$1 = {
+const variantStyles$2 = {
   default: utils_index.cn(
     "bg-primary-100 text-primary-700 border-primary-200",
     "dark:bg-primary-800 dark:text-primary-200 dark:border-primary-700"
@@ -8300,7 +8300,7 @@ const variantStyles$1 = {
     "dark:bg-gold-900/50 dark:text-gold-300 dark:border-gold-700"
   )
 };
-const sizeStyles$3 = {
+const sizeStyles$4 = {
   sm: "px-2 py-0.5 text-xs",
   md: "px-2.5 py-1 text-sm",
   lg: "px-3 py-1.5 text-base"
@@ -8313,8 +8313,8 @@ const Badge = React.forwardRef(
         ref,
         className: utils_index.cn(
           "inline-flex items-center justify-center font-medium rounded-full border",
-          variantStyles$1[variant],
-          sizeStyles$3[size2],
+          variantStyles$2[variant],
+          sizeStyles$4[size2],
           className
         ),
         ...props,
@@ -8472,7 +8472,7 @@ const TableCell = React.forwardRef(
   }
 );
 TableCell.displayName = "TableCell";
-const sizeStyles$2 = {
+const sizeStyles$3 = {
   sm: "px-3 py-1.5 text-sm",
   md: "px-4 py-2 text-sm",
   lg: "px-5 py-2.5 text-base"
@@ -8521,7 +8521,7 @@ function Tabs({
               className: ({ selected }) => utils_index.cn(
                 "relative outline-none transition-colors duration-normal",
                 "focus-visible:ring-2 focus-visible:ring-gold-500/50",
-                sizeStyles$2[size2],
+                sizeStyles$3[size2],
                 fullWidth && "flex-1",
                 // Default variant styles
                 variant === "default" && [
@@ -8705,7 +8705,7 @@ const Breadcrumbs = React.forwardRef(
   }
 );
 Breadcrumbs.displayName = "Breadcrumbs";
-const variantStyles = {
+const variantStyles$1 = {
   text: "rounded",
   circular: "rounded-full",
   rectangular: "rounded-md"
@@ -8741,7 +8741,7 @@ const Skeleton = React.forwardRef(
               {
                 className: utils_index.cn(
                   "bg-primary-200 dark:bg-primary-700",
-                  variantStyles[variant],
+                  variantStyles$1[variant],
                   animate && "animate-pulse"
                 ),
                 style: {
@@ -8763,7 +8763,7 @@ const Skeleton = React.forwardRef(
         ref,
         className: utils_index.cn(
           "bg-primary-200 dark:bg-primary-700",
-          variantStyles[variant],
+          variantStyles$1[variant],
           animate && "animate-pulse",
           className
         ),
@@ -8841,7 +8841,7 @@ const defaultIcons = {
     }
   )
 };
-const sizeStyles$1 = {
+const sizeStyles$2 = {
   sm: {
     container: "py-6 px-4",
     icon: "w-10 h-10",
@@ -8877,7 +8877,7 @@ const EmptyState = React.forwardRef(
     className,
     ...props
   }, ref) => {
-    const styles = sizeStyles$1[size2];
+    const styles = sizeStyles$2[size2];
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -8921,7 +8921,7 @@ const EmptyState = React.forwardRef(
 EmptyState.displayName = "EmptyState";
 const ChevronLeftIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) });
 const ChevronRightIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "h-4 w-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) });
-const sizeStyles = {
+const sizeStyles$1 = {
   sm: { button: "h-8 min-w-8 px-2 text-sm", text: "text-sm" },
   md: { button: "h-10 min-w-10 px-3 text-sm", text: "text-sm" }
 };
@@ -8971,7 +8971,7 @@ function Pagination({
   className
 }) {
   const pageSizeId = React.useId();
-  const currentSize = sizeStyles[size2];
+  const currentSize = sizeStyles$1[size2];
   const canGoPrevious = currentPage > 1;
   const canGoNext = currentPage < totalPages;
   const pageNumbers = React.useMemo(
@@ -9498,11 +9498,452 @@ function MultiSelect({
   ] });
 }
 MultiSelect.displayName = "MultiSelect";
-exports.useDebounce = useSelection.useDebounce;
-exports.useDebouncedCallback = useSelection.useDebouncedCallback;
-exports.useDebouncedCallbackWithControl = useSelection.useDebouncedCallbackWithControl;
-exports.useSelection = useSelection.useSelection;
-exports.useTable = useSelection.useTable;
+function shouldShowItem(item) {
+  if (item.visible === void 0) return true;
+  if (typeof item.visible === "boolean") return item.visible;
+  if (typeof item.visible === "function") return item.visible();
+  return true;
+}
+function isItemActive(currentPath, href, matcher = "exact") {
+  if (!currentPath) return false;
+  if (typeof matcher === "function") {
+    return matcher(currentPath, href);
+  }
+  switch (matcher) {
+    case "exact":
+      return currentPath === href;
+    case "startsWith":
+      return currentPath === href || currentPath.startsWith(`${href}/`);
+    default:
+      return false;
+  }
+}
+const sizeStyles = {
+  sm: "px-2 py-1.5 text-xs gap-2",
+  md: "px-3 py-2.5 text-sm gap-3",
+  lg: "px-4 py-3 text-base gap-3"
+};
+const iconSizeStyles = {
+  sm: "h-4 w-4",
+  md: "h-5 w-5",
+  lg: "h-6 w-6"
+};
+const DefaultLink = ({
+  to,
+  children,
+  className,
+  onClick,
+  title,
+  "aria-current": ariaCurrent,
+  "aria-label": ariaLabel
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  "a",
+  {
+    href: to,
+    className,
+    onClick,
+    title,
+    "aria-current": ariaCurrent,
+    "aria-label": ariaLabel,
+    children
+  }
+);
+function SidebarItem({
+  item,
+  currentPath,
+  size: size2 = "md",
+  collapsed = false,
+  onNavigate,
+  LinkComponent,
+  className,
+  ...props
+}) {
+  if (!shouldShowItem(item)) {
+    return null;
+  }
+  const isActive = isItemActive(currentPath, item.href, item.activeMatch);
+  const LinkElement = LinkComponent || DefaultLink;
+  const handleClick = () => {
+    if (item.disabled) return;
+    item.onClick?.();
+    onNavigate?.(item.href);
+  };
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    item.icon && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: utils_index.cn(
+          "flex-shrink-0",
+          iconSizeStyles[size2],
+          "[&>svg]:h-full [&>svg]:w-full"
+        ),
+        "aria-hidden": "true",
+        children: item.icon
+      }
+    ),
+    !collapsed && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: item.label }),
+    !collapsed && item.badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: utils_index.cn(
+          "flex-shrink-0 rounded-full px-2 py-0.5 text-xs font-medium",
+          isActive ? "bg-primary-200 text-primary-800 dark:bg-primary-700 dark:text-primary-200" : "bg-primary-100 text-primary-600 dark:bg-primary-800 dark:text-primary-300"
+        ),
+        children: item.badge
+      }
+    )
+  ] });
+  if (item.onClick && !item.href) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: handleClick,
+        disabled: item.disabled,
+        "aria-label": item["aria-label"] || item.label,
+        title: collapsed ? item.label : void 0,
+        className: utils_index.cn(
+          // Base styles
+          "flex w-full items-center rounded-lg font-medium",
+          "transition-colors duration-150",
+          "focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:ring-offset-2",
+          "dark:focus:ring-offset-primary-900",
+          // Size styles
+          sizeStyles[size2],
+          // State styles
+          item.disabled && "opacity-50 cursor-not-allowed",
+          !item.disabled && !isActive && [
+            "text-primary-600 hover:bg-primary-50 hover:text-primary-900",
+            "dark:text-primary-400 dark:hover:bg-primary-800 dark:hover:text-primary-100"
+          ],
+          isActive && [
+            "bg-primary-100 text-primary-900",
+            "dark:bg-primary-800 dark:text-primary-100"
+          ],
+          // Collapsed mode
+          collapsed && "justify-center",
+          className
+        ),
+        ...props,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    LinkElement,
+    {
+      to: item.href,
+      onClick: handleClick,
+      className: utils_index.cn(
+        // Base styles
+        "flex items-center rounded-lg font-medium",
+        "transition-colors duration-150",
+        "focus:outline-none focus:ring-2 focus:ring-primary-500/20 focus:ring-offset-2",
+        "dark:focus:ring-offset-primary-900",
+        // Size styles
+        sizeStyles[size2],
+        // State styles
+        item.disabled && "opacity-50 cursor-not-allowed pointer-events-none",
+        !item.disabled && !isActive && [
+          "text-primary-600 hover:bg-primary-50 hover:text-primary-900",
+          "dark:text-primary-400 dark:hover:bg-primary-800 dark:hover:text-primary-100"
+        ],
+        isActive && [
+          "bg-primary-100 text-primary-900",
+          "dark:bg-primary-800 dark:text-primary-100"
+        ],
+        // Collapsed mode
+        collapsed && "justify-center",
+        className
+      ),
+      "aria-current": isActive ? "page" : void 0,
+      "aria-label": item["aria-label"] || (collapsed ? item.label : void 0),
+      title: collapsed ? item.label : void 0,
+      children: content
+    }
+  );
+}
+function shouldShowGroup(group) {
+  if (group.visible === void 0) return true;
+  if (typeof group.visible === "boolean") return group.visible;
+  if (typeof group.visible === "function") return group.visible();
+  return true;
+}
+const SidebarGroup = React.forwardRef(
+  ({
+    group,
+    currentPath,
+    size: size2 = "md",
+    collapsed = false,
+    LinkComponent,
+    onNavigate,
+    className,
+    ...props
+  }, ref) => {
+    if (!shouldShowGroup(group)) {
+      return null;
+    }
+    const visibleItems = group.items.filter(shouldShowItem);
+    if (visibleItems.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, role: "group", className: utils_index.cn("space-y-1", className), ...props, children: [
+      group.label && !collapsed && /* @__PURE__ */ jsxRuntime.jsx(
+        "h3",
+        {
+          className: utils_index.cn(
+            "px-3 py-2 text-xs font-semibold uppercase tracking-wider",
+            "text-primary-500 dark:text-primary-400"
+          ),
+          children: group.label
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": group.label || `Navigation group ${group.key}`, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-1", children: visibleItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+        SidebarItem,
+        {
+          item,
+          currentPath,
+          size: size2,
+          collapsed,
+          LinkComponent,
+          onNavigate
+        }
+      ) }, item.key)) }) })
+    ] });
+  }
+);
+SidebarGroup.displayName = "SidebarGroup";
+const SidebarDivider = React.forwardRef(
+  ({ label, className, ...props }, ref) => {
+    if (label) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils_index.cn("relative my-4", className), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "hr",
+          {
+            ref,
+            className: "w-full border-t border-primary-200 dark:border-primary-700",
+            ...props
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "bg-white px-2 text-xs text-primary-500 dark:bg-primary-900 dark:text-primary-400", children: label }) })
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "hr",
+      {
+        ref,
+        className: utils_index.cn(
+          "my-4 border-t border-primary-200 dark:border-primary-700",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+SidebarDivider.displayName = "SidebarDivider";
+const variantStyles = {
+  default: [
+    "bg-white border-r border-gold-500/40",
+    "dark:bg-primary-900 dark:border-gold-500/20"
+  ].join(" "),
+  minimal: [
+    "bg-white border-r border-primary-200",
+    "dark:bg-primary-900 dark:border-primary-700"
+  ].join(" ")
+};
+const Sidebar = React.forwardRef(
+  ({
+    navigation,
+    currentPath,
+    isOpen = false,
+    onClose,
+    collapsed = false,
+    onCollapsedChange,
+    variant = "default",
+    size: size2 = "md",
+    header,
+    footer,
+    LinkComponent,
+    onNavigate,
+    showMobileOverlay = true,
+    width = "16rem",
+    collapsedWidth = "4rem",
+    className,
+    "aria-label": ariaLabel = "Main navigation",
+    ...props
+  }, ref) => {
+    React.useEffect(() => {
+      const handleEscape = (event) => {
+        if (event.key === "Escape" && isOpen) {
+          onClose?.();
+        }
+      };
+      document.addEventListener("keydown", handleEscape);
+      return () => document.removeEventListener("keydown", handleEscape);
+    }, [isOpen, onClose]);
+    React.useEffect(() => {
+      if (isOpen) {
+        document.body.style.overflow = "hidden";
+      } else {
+        document.body.style.overflow = "";
+      }
+      return () => {
+        document.body.style.overflow = "";
+      };
+    }, [isOpen]);
+    const handleNavigate = React.useCallback(
+      (href) => {
+        onNavigate?.(href);
+        onClose?.();
+      },
+      [onNavigate, onClose]
+    );
+    const handleOverlayClick = React.useCallback(() => {
+      onClose?.();
+    }, [onClose]);
+    const handleCollapseToggle = React.useCallback(() => {
+      onCollapsedChange?.(!collapsed);
+    }, [collapsed, onCollapsedChange]);
+    const hasVisibleGroups = (groups) => groups?.some(shouldShowGroup) ?? false;
+    const hasFeatured = hasVisibleGroups(navigation.featured);
+    const hasPrimary = hasVisibleGroups(navigation.primary);
+    const hasSecondary = hasVisibleGroups(navigation.secondary);
+    const hasBottom = hasVisibleGroups(navigation.bottom);
+    const sidebarWidth = collapsed ? collapsedWidth : width;
+    const sidebarContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      header && /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_index.cn("flex-shrink-0", collapsed && "px-2"), children: header }),
+      hasFeatured && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 px-3 py-3", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: navigation.featured?.map((group) => /* @__PURE__ */ jsxRuntime.jsx(
+        SidebarGroup,
+        {
+          group,
+          currentPath,
+          size: size2,
+          collapsed,
+          LinkComponent,
+          onNavigate: handleNavigate
+        },
+        group.key
+      )) }) }),
+      hasPrimary && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto px-3 py-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: navigation.primary?.map((group) => /* @__PURE__ */ jsxRuntime.jsx(
+        SidebarGroup,
+        {
+          group,
+          currentPath,
+          size: size2,
+          collapsed,
+          LinkComponent,
+          onNavigate: handleNavigate
+        },
+        group.key
+      )) }) }),
+      hasPrimary && hasSecondary && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3", children: /* @__PURE__ */ jsxRuntime.jsx(SidebarDivider, {}) }),
+      hasSecondary && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 px-3 py-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: navigation.secondary?.map((group) => /* @__PURE__ */ jsxRuntime.jsx(
+        SidebarGroup,
+        {
+          group,
+          currentPath,
+          size: size2,
+          collapsed,
+          LinkComponent,
+          onNavigate: handleNavigate
+        },
+        group.key
+      )) }) }),
+      !hasPrimary && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
+      (hasPrimary || hasSecondary) && hasBottom && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3", children: /* @__PURE__ */ jsxRuntime.jsx(SidebarDivider, {}) }),
+      hasBottom && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 px-3 py-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: navigation.bottom?.map((group) => /* @__PURE__ */ jsxRuntime.jsx(
+        SidebarGroup,
+        {
+          group,
+          currentPath,
+          size: size2,
+          collapsed,
+          LinkComponent,
+          onNavigate: handleNavigate
+        },
+        group.key
+      )) }) }),
+      footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_index.cn("flex-shrink-0", collapsed && "px-2"), children: footer }),
+      onCollapsedChange && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden lg:block flex-shrink-0 border-t border-primary-200 dark:border-primary-700 p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleCollapseToggle,
+          className: utils_index.cn(
+            "flex w-full items-center justify-center rounded-lg p-2",
+            "text-primary-500 hover:bg-primary-50 hover:text-primary-700",
+            "dark:text-primary-400 dark:hover:bg-primary-800 dark:hover:text-primary-200",
+            "transition-colors duration-150",
+            "focus:outline-none focus:ring-2 focus:ring-primary-500/20"
+          ),
+          "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              className: utils_index.cn(
+                "h-5 w-5 transition-transform duration-200",
+                collapsed && "rotate-180"
+              ),
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M11 19l-7-7 7-7m8 14l-7-7 7-7"
+                }
+              )
+            }
+          )
+        }
+      ) })
+    ] });
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      showMobileOverlay && isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "fixed inset-0 z-40 bg-black/20 lg:hidden",
+          onClick: handleOverlayClick,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "aside",
+        {
+          ref,
+          className: utils_index.cn(
+            // Base styles
+            "fixed top-0 left-0 z-50 flex h-full flex-col",
+            "transform transition-all duration-300 ease-in-out",
+            // Desktop styles
+            "lg:static lg:z-auto lg:translate-x-0",
+            // Mobile styles
+            isOpen ? "translate-x-0" : "-translate-x-full",
+            // Variant styles
+            variantStyles[variant],
+            className
+          ),
+          style: { width: sidebarWidth },
+          "aria-label": ariaLabel,
+          ...props,
+          children: sidebarContent
+        }
+      )
+    ] });
+  }
+);
+Sidebar.displayName = "Sidebar";
+exports.useDebounce = useSidebar.useDebounce;
+exports.useDebouncedCallback = useSidebar.useDebouncedCallback;
+exports.useDebouncedCallbackWithControl = useSidebar.useDebouncedCallbackWithControl;
+exports.useSelection = useSidebar.useSelection;
+exports.useSidebar = useSidebar.useSidebar;
+exports.useTable = useSidebar.useTable;
 exports.cn = utils_index.cn;
 exports.Badge = Badge;
 exports.Breadcrumbs = Breadcrumbs;
@@ -9521,6 +9962,10 @@ exports.PasswordInput = PasswordInput;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
 exports.Select = Select;
+exports.Sidebar = Sidebar;
+exports.SidebarDivider = SidebarDivider;
+exports.SidebarGroup = SidebarGroup;
+exports.SidebarItem = SidebarItem;
 exports.Skeleton = Skeleton;
 exports.Spinner = Spinner;
 exports.TabContentPanels = TabContentPanels;