sangam-ui 1.0.0 → 1.0.2

package/dist/index.d.ts

@@ -1585,21 +1585,40 @@ declare const PageFooter: React.ForwardRefExoticComponent<PageFooterProps & Reac
  *
  * Logo 36×28. Text: 12px, weight 500, line-height 16px.
  */
-interface SideMenuItem {
+/**
+ * Data for one row in a {@link SideMenuGroup}.
+ * Each entry is rendered exclusively with {@link SideMenuItem}.
+ */
+interface SideMenuNavItem {
     id: string;
     label: string;
     /** Icon for collapsed state (and expanded when iconExpanded not provided) */
     icon: React.ReactNode;
     /** Icon for expanded state. Use when icon needs different styling on white bg (e.g. Profile/avtarimg). */
     iconExpanded?: React.ReactNode;
+    /** When the menu is expanded, show a trailing chevron (submenu affordance). */
+    hasSubmenu?: boolean;
+}
+/**
+ * Group wrapper config for SideMenu rows.
+ * Label behavior:
+ * - Expanded: shows `groupName`
+ * - Collapsed: shows `--`
+ * - `showGroup: false`: hides label, still renders items
+ */
+interface SideMenuItemGroup {
+    id: string;
+    groupName: string;
+    items: SideMenuNavItem[];
+    showGroup?: boolean;
 }
 interface SideMenuProps extends Omit<React.HTMLAttributes<HTMLElement>, "children">, VariantProps<typeof sideMenuVariants> {
     /** Logo element (e.g. img 36×28) */
     logo: React.ReactNode;
-    /** Top nav items: Dashboard, Orders, Projects */
-    topItems: SideMenuItem[];
-    /** Bottom nav items: Search, Settings, Profile */
-    bottomItems: SideMenuItem[];
+    /** Top groups of nav rows (e.g., AI Services, Compute, Storage). */
+    topGroups: SideMenuItemGroup[];
+    /** Bottom groups of nav rows (e.g., utilities/profile section). */
+    bottomGroups: SideMenuItemGroup[];
     /** ID of currently selected item (controlled). Omit for uncontrolled; use defaultSelectedId for initial. */
     selectedId?: string;
     /** Initial selected ID when uncontrolled. Ignored if selectedId is provided. */
@@ -1625,6 +1644,29 @@ declare const sideMenuVariants: (props?: ({
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string;
 declare const SideMenu: React.ForwardRefExoticComponent<SideMenuProps & React.RefAttributes<HTMLElement>>;
 
+/**
+ * Single row for {@link SideMenu}: leading icon, optional label, optional submenu chevron.
+ * Use inside `SideMenu` via grouped sections, or alone for layout/testing.
+ */
+interface SideMenuItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    /** Visible label (hidden when `iconOnly` is true). */
+    label: string;
+    /** Leading icon, typically from `@esds-sangam/icons`. Parent picks collapsed vs expanded asset. */
+    leadingIcon: React.ReactNode;
+    /** When true, only the icon is shown (collapsed rail / design “icon only”). */
+    iconOnly?: boolean;
+    /** When true and not `iconOnly`, shows a trailing chevron (submenu affordance). */
+    hasSubmenu?: boolean;
+    /** Selected / active row styling. */
+    selected?: boolean;
+    /**
+     * Applies hover surface without a pointer (e.g. Storybook / design previews).
+     * Ignored when `selected` is true.
+     */
+    hovered?: boolean;
+}
+declare const SideMenuItem: React.ForwardRefExoticComponent<SideMenuItemProps & React.RefAttributes<HTMLButtonElement>>;
+
 /**
  * Upload Pattern – Stage 1: File uploader
  *
@@ -1697,4 +1739,4 @@ type Size = "sm" | "md" | "lg";
 type Variant = "primary" | "secondary" | "outline" | "ghost";
 type ColorScheme = "primary" | "secondary" | "success" | "error" | "warning" | "info";
 
-export { Avatar, Badge, type BaseComponentProps, Button, Card, Checkbox, Chip, type ColorScheme, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerHeaderTop, DrawerSurface, DrawerTitle, DrawerTrigger, Dropdown, DropdownMulti, type DropdownMultiProps, type DropdownOption, type DropdownProps, Input, Label, Loader, Menu, MenuContent, MenuItem, MenuMenu, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, PageFooter, type PageFooterAction, type PageFooterProps, PageHeader, type PageHeaderAction, type PageHeaderProps, type PageHeaderTab, Pagination, Popup, PopupContent, PopupTrigger, ProgressBar, Radio, RadioGroup, SearchField, SideMenu, type SideMenuItem, type SideMenuProps, type Size, Skeleton, Stepper, type StepperProps, type StepperStep, type StepperStepVariant, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsRoot, TabsTrigger, type TabsTriggerOption, type TabsTriggerProps, Textarea, Toast, type ToastEntryOptions, ToastProvider, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Upload, UploadFileItem, type UploadFileItemProps, type UploadFileItemStatus, type UploadProps, type Variant, avatarVariants, badgeVariants, buttonVariants, cardVariants, checkboxRootVariants as checkboxVariants, chipVariants, dropdownContentVariants, dropdownItemVariants, dropdownTriggerVariants, inputVariants, loaderVariants, pageHeaderVariants, radioVariants, searchFieldVariants, sideMenuVariants, skeletonVariants, tabsListVariants, tabsTriggerVariants, textareaVariants, toastVariants, toggleVariants, tooltipContentVariants, uploadBoxVariants, uploadFileItemBoxVariants, useToast };
+export { Avatar, Badge, type BaseComponentProps, Button, Card, Checkbox, Chip, type ColorScheme, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerHeaderTop, DrawerSurface, DrawerTitle, DrawerTrigger, Dropdown, DropdownMulti, type DropdownMultiProps, type DropdownOption, type DropdownProps, Input, Label, Loader, Menu, MenuContent, MenuItem, MenuMenu, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, PageFooter, type PageFooterAction, type PageFooterProps, PageHeader, type PageHeaderAction, type PageHeaderProps, type PageHeaderTab, Pagination, Popup, PopupContent, PopupTrigger, ProgressBar, Radio, RadioGroup, SearchField, SideMenu, SideMenuItem, type SideMenuItemGroup, type SideMenuItemProps, type SideMenuNavItem, type SideMenuProps, type Size, Skeleton, Stepper, type StepperProps, type StepperStep, type StepperStepVariant, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsRoot, TabsTrigger, type TabsTriggerOption, type TabsTriggerProps, Textarea, Toast, type ToastEntryOptions, ToastProvider, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Upload, UploadFileItem, type UploadFileItemProps, type UploadFileItemStatus, type UploadProps, type Variant, avatarVariants, badgeVariants, buttonVariants, cardVariants, checkboxRootVariants as checkboxVariants, chipVariants, dropdownContentVariants, dropdownItemVariants, dropdownTriggerVariants, inputVariants, loaderVariants, pageHeaderVariants, radioVariants, searchFieldVariants, sideMenuVariants, skeletonVariants, tabsListVariants, tabsTriggerVariants, textareaVariants, toastVariants, toggleVariants, tooltipContentVariants, uploadBoxVariants, uploadFileItemBoxVariants, useToast };

package/dist/index.js

@@ -3474,12 +3474,144 @@ var PageFooter = React26.forwardRef(
 PageFooter.displayName = "PageFooter";
 
 // src/patterns/SideMenu.tsx
-import * as React27 from "react";
+import * as React28 from "react";
 import { cva as cva19 } from "class-variance-authority";
-import { cn as cn27 } from "@esds-sangam/utils";
+import { cn as cn28 } from "@esds-sangam/utils";
 import * as SelectPrimitive2 from "@radix-ui/react-select";
 import { ChevronDown as ChevronDown3, ChevronUp as ChevronUp2, Tickmark as Tickmark4 } from "@esds-sangam/icons";
-import { Fragment as Fragment4, jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
+
+// src/patterns/SideMenuItem.tsx
+import * as React27 from "react";
+import { ChevronRight as ChevronRight3 } from "@esds-sangam/icons";
+import { cn as cn27 } from "@esds-sangam/utils";
+import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
+var MENU_TEXT_STYLES = "text-xs font-medium leading-4 text-semantic-text-neutral-primary";
+var SideMenuItem = React27.forwardRef(
+  ({
+    label,
+    leadingIcon,
+    iconOnly = false,
+    hasSubmenu = false,
+    selected = false,
+    hovered = false,
+    className,
+    type = "button",
+    ...props
+  }, ref) => {
+    if (iconOnly) {
+      return /* @__PURE__ */ jsx27(
+        "button",
+        {
+          ref,
+          type,
+          className: cn27(
+            "inline-flex w-full items-center justify-center outline-none focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-offset-2",
+            className
+          ),
+          ...props,
+          children: /* @__PURE__ */ jsx27(
+            "span",
+            {
+              className: cn27(
+                "flex h-9 w-9 items-center justify-center rounded-sm [&>svg]:size-5",
+                selected && "border border-semantic-border-neutral-secondary bg-semantic-background-neutral-primary shadow-elevation-bottom-sm"
+              ),
+              children: leadingIcon
+            }
+          )
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx27(
+      "button",
+      {
+        ref,
+        type,
+        className: cn27(
+          "inline-flex w-full items-center justify-start outline-none focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-offset-2",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxs21(
+          "span",
+          {
+            className: cn27(
+              "flex h-9 min-w-0 flex-1 items-center gap-2 rounded-sm px-2",
+              selected ? "mx-1 my-0.5 border border-semantic-border-neutral-secondary bg-semantic-background-neutral-primary shadow-elevation-bottom-sm" : "hover:bg-neutral-200/60",
+              !selected && hovered && "bg-neutral-200/60"
+            ),
+            children: [
+              /* @__PURE__ */ jsx27("span", { className: "shrink-0 [&>svg]:size-5", children: leadingIcon }),
+              /* @__PURE__ */ jsx27("span", { className: cn27(MENU_TEXT_STYLES, "min-w-0 flex-1 truncate text-left"), children: label }),
+              hasSubmenu ? /* @__PURE__ */ jsx27(
+                ChevronRight3,
+                {
+                  size: 14,
+                  className: "shrink-0 text-semantic-icon-neutral-tertiary",
+                  "aria-hidden": true
+                }
+              ) : null
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+SideMenuItem.displayName = "SideMenuItem";
+
+// src/patterns/SideMenu.tsx
+import { Fragment as Fragment4, jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
+function SideMenuNavRow({
+  item,
+  isCollapsed,
+  isSelected,
+  onClick
+}) {
+  const leadingIcon = isCollapsed && !isSelected ? item.icon : item.iconExpanded ?? item.icon;
+  return /* @__PURE__ */ jsx28(
+    SideMenuItem,
+    {
+      label: item.label,
+      leadingIcon,
+      iconOnly: isCollapsed,
+      hasSubmenu: item.hasSubmenu ?? false,
+      selected: isSelected,
+      onClick
+    }
+  );
+}
+function SideMenuGroup({
+  group,
+  isCollapsed,
+  selectedId,
+  onItemClick,
+  className
+}) {
+  const showGroup = group.showGroup ?? true;
+  return /* @__PURE__ */ jsxs22("div", { className: cn28("flex flex-col gap-2", className), children: [
+    showGroup ? /* @__PURE__ */ jsx28(
+      "div",
+      {
+        className: cn28(
+          "text-xs font-medium leading-4 text-semantic-text-neutral-tertiary",
+          isCollapsed ? "px-0 text-center" : "px-2 text-left"
+        ),
+        children: isCollapsed ? "--" : group.groupName
+      }
+    ) : null,
+    group.items.map((item) => /* @__PURE__ */ jsx28(
+      SideMenuNavRow,
+      {
+        item,
+        isCollapsed,
+        isSelected: selectedId === item.id,
+        onClick: () => onItemClick(item.id)
+      },
+      item.id
+    ))
+  ] });
+}
 var sideMenuVariants = cva19(
   "flex flex-col self-start transition-[width] duration-200 ease-out",
   {
@@ -3496,14 +3628,13 @@ var sideMenuVariants = cva19(
     }
   }
 );
-var MENU_TEXT_STYLES = "text-xs font-medium leading-4 text-semantic-text-neutral-primary";
-var SideMenu = React27.forwardRef(
+var SideMenu = React28.forwardRef(
   ({
     className,
     variant = "default",
     logo,
-    topItems,
-    bottomItems,
+    topGroups,
+    bottomGroups,
     selectedId: selectedIdProp,
     defaultSelectedId,
     expanded: expandedProp,
@@ -3516,17 +3647,17 @@ var SideMenu = React27.forwardRef(
     onMouseLeave,
     ...props
   }, ref) => {
-    const [internalSelected, setInternalSelected] = React27.useState(
+    const [internalSelected, setInternalSelected] = React28.useState(
       defaultSelectedId ?? null
     );
     const selectedId = selectedIdProp !== void 0 ? selectedIdProp : internalSelected;
     const isControlled = selectedIdProp !== void 0;
-    const [hoverExpanded, setHoverExpanded] = React27.useState(false);
+    const [hoverExpanded, setHoverExpanded] = React28.useState(false);
     const isUncontrolledDefault = variant === "default" && expandedProp === void 0;
     const isExpandedByHover = isUncontrolledDefault && hoverExpanded;
     const effectiveExpanded = variant === "hover" || variant === "selected" || variant === "sticky" || isExpandedByHover;
     const isCollapsed = !effectiveExpanded;
-    const [isProjectOpen, setIsProjectOpen] = React27.useState(false);
+    const [isProjectOpen, setIsProjectOpen] = React28.useState(false);
     const handleMouseEnter = (e) => {
       if (isUncontrolledDefault) setHoverExpanded(true);
       onMouseEnter?.(e);
@@ -3544,7 +3675,7 @@ var SideMenu = React27.forwardRef(
       { value: "project-2", label: "Project 2" },
       { value: "project-3", label: "Project 3" }
     ];
-    const [internalProject, setInternalProject] = React27.useState(
+    const [internalProject, setInternalProject] = React28.useState(
       defaultProject ?? projectOptions[0]?.value ?? "project-1"
     );
     const currentProject = projectProp !== void 0 ? projectProp : internalProject;
@@ -3552,18 +3683,18 @@ var SideMenu = React27.forwardRef(
       if (projectProp === void 0) setInternalProject(value);
       onProjectChange?.(value);
     };
-    return /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx28(
       "div",
       {
-        className: cn27("relative w-12 shrink-0 overflow-visible", className),
+        className: cn28("relative w-12 shrink-0 overflow-visible", className),
         ...props,
-        children: /* @__PURE__ */ jsx27(
+        children: /* @__PURE__ */ jsx28(
           "div",
           {
             className: "absolute left-0 top-0",
             onMouseEnter: handleMouseEnter,
             onMouseLeave: handleMouseLeave,
-            children: /* @__PURE__ */ jsxs21(
+            children: /* @__PURE__ */ jsxs22(
               "nav",
               {
                 ref,
@@ -3574,17 +3705,17 @@ var SideMenu = React27.forwardRef(
                   variant: isExpandedByHover && selectedId ? "selected" : isExpandedByHover ? "hover" : variant
                 }),
                 children: [
-                  /* @__PURE__ */ jsx27(
+                  /* @__PURE__ */ jsx28(
                     "div",
                     {
-                      className: cn27(
+                      className: cn28(
                         "mb-4 shrink-0 flex items-center",
                         isCollapsed ? "justify-center" : "justify-start"
                       ),
                       children: logo
                     }
                   ),
-                  /* @__PURE__ */ jsx27("div", { className: cn27("mb-4 shrink-0", isCollapsed ? "flex justify-center" : ""), children: isCollapsed ? /* @__PURE__ */ jsx27("div", { className: "flex h-9 w-9 items-center justify-center rounded-sm", children: /* @__PURE__ */ jsx27("span", { className: "inline-flex h-6 w-6 items-center justify-center rounded-[4px] bg-blue-300 text-sm font-semibold leading-6 text-blue-600", children: "P" }) }) : /* @__PURE__ */ jsx27(
+                  /* @__PURE__ */ jsx28("div", { className: cn28("mb-4 shrink-0", isCollapsed ? "flex justify-center" : ""), children: isCollapsed ? /* @__PURE__ */ jsx28("div", { className: "flex h-9 w-9 items-center justify-center rounded-sm", children: /* @__PURE__ */ jsx28("span", { className: "inline-flex h-6 w-6 items-center justify-center rounded-[4px] bg-blue-300 text-sm font-semibold leading-6 text-blue-600", children: "P" }) }) : /* @__PURE__ */ jsx28(
                     SelectPrimitive2.Root,
                     {
                       value: currentProject,
@@ -3594,12 +3725,12 @@ var SideMenu = React27.forwardRef(
                         setIsProjectOpen(open);
                         if (isUncontrolledDefault && open) setHoverExpanded(true);
                       },
-                      children: /* @__PURE__ */ jsxs21("div", { className: "relative", children: [
-                        /* @__PURE__ */ jsx27("span", { className: "pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 inline-flex h-6 w-6 items-center justify-center rounded-[4px] bg-blue-300 text-sm font-semibold leading-6 text-blue-600", children: "P" }),
-                        /* @__PURE__ */ jsxs21(
+                      children: /* @__PURE__ */ jsxs22("div", { className: "relative", children: [
+                        /* @__PURE__ */ jsx28("span", { className: "pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 inline-flex h-6 w-6 items-center justify-center rounded-[4px] bg-blue-300 text-sm font-semibold leading-6 text-blue-600", children: "P" }),
+                        /* @__PURE__ */ jsxs22(
                           SelectPrimitive2.Trigger,
                           {
-                            className: cn27(
+                            className: cn28(
                               "group",
                               dropdownTriggerVariants({ error: false }),
                               // Make room for the P icon
@@ -3610,97 +3741,41 @@ var SideMenu = React27.forwardRef(
                               "[&>span]:block [&>span]:min-w-0 [&>span]:truncate [&>span]:whitespace-nowrap"
                             ),
                             children: [
-                              /* @__PURE__ */ jsx27(SelectPrimitive2.Value, { placeholder: "Project 1" }),
-                              /* @__PURE__ */ jsx27(SelectPrimitive2.Icon, { asChild: true, children: /* @__PURE__ */ jsxs21(Fragment4, { children: [
-                                /* @__PURE__ */ jsx27(ChevronDown3, { size: 14, className: "shrink-0 group-data-[state=open]:hidden" }),
-                                /* @__PURE__ */ jsx27(ChevronUp2, { size: 14, className: "hidden shrink-0 group-data-[state=open]:block" })
+                              /* @__PURE__ */ jsx28(SelectPrimitive2.Value, { placeholder: "Project 1" }),
+                              /* @__PURE__ */ jsx28(SelectPrimitive2.Icon, { asChild: true, children: /* @__PURE__ */ jsxs22(Fragment4, { children: [
+                                /* @__PURE__ */ jsx28(ChevronDown3, { size: 14, className: "shrink-0 group-data-[state=open]:hidden" }),
+                                /* @__PURE__ */ jsx28(ChevronUp2, { size: 14, className: "hidden shrink-0 group-data-[state=open]:block" })
                               ] }) })
                             ]
                           }
                         ),
-                        /* @__PURE__ */ jsx27(SelectPrimitive2.Portal, { children: /* @__PURE__ */ jsx27(SelectPrimitive2.Content, { className: cn27(dropdownContentVariants()), position: "popper", sideOffset: 6, children: /* @__PURE__ */ jsx27(SelectPrimitive2.Viewport, { children: projectOptions.map((opt) => /* @__PURE__ */ jsxs21(SelectPrimitive2.Item, { value: opt.value, disabled: opt.disabled, className: cn27(dropdownItemVariants()), children: [
-                          /* @__PURE__ */ jsx27(SelectPrimitive2.ItemText, { children: opt.label }),
-                          /* @__PURE__ */ jsx27(SelectPrimitive2.ItemIndicator, { className: "absolute right-2 inline-flex items-center justify-center", children: /* @__PURE__ */ jsx27(Tickmark4, { size: 14, "aria-hidden": "true" }) })
+                        /* @__PURE__ */ jsx28(SelectPrimitive2.Portal, { children: /* @__PURE__ */ jsx28(SelectPrimitive2.Content, { className: cn28(dropdownContentVariants()), position: "popper", sideOffset: 6, children: /* @__PURE__ */ jsx28(SelectPrimitive2.Viewport, { children: projectOptions.map((opt) => /* @__PURE__ */ jsxs22(SelectPrimitive2.Item, { value: opt.value, disabled: opt.disabled, className: cn28(dropdownItemVariants()), children: [
+                          /* @__PURE__ */ jsx28(SelectPrimitive2.ItemText, { children: opt.label }),
+                          /* @__PURE__ */ jsx28(SelectPrimitive2.ItemIndicator, { className: "absolute right-2 inline-flex items-center justify-center", children: /* @__PURE__ */ jsx28(Tickmark4, { size: 14, "aria-hidden": "true" }) })
                         ] }, opt.value)) }) }) })
                       ] })
                     }
                   ) }),
-                  /* @__PURE__ */ jsx27("div", { className: "flex flex-1 flex-col gap-2", children: topItems.map((item) => {
-                    const isSelected = selectedId === item.id;
-                    const itemIcon = isCollapsed && !isSelected ? item.icon : item.iconExpanded ?? item.icon;
-                    return /* @__PURE__ */ jsx27(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => handleItemClick(item.id),
-                        className: cn27(
-                          "inline-flex w-full items-center outline-none focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-offset-2",
-                          isCollapsed ? "justify-center" : "justify-start"
-                        ),
-                        children: isCollapsed ? /* @__PURE__ */ jsx27(
-                          "span",
-                          {
-                            className: cn27(
-                              "flex h-9 w-9 items-center justify-center rounded-sm [&>svg]:size-5",
-                              isSelected && "border border-semantic-border-neutral-secondary bg-semantic-background-neutral-primary shadow-elevation-bottom-sm"
-                            ),
-                            children: itemIcon
-                          }
-                        ) : /* @__PURE__ */ jsxs21(
-                          "span",
-                          {
-                            className: cn27(
-                              "flex h-9 min-w-0 flex-1 items-center gap-2 rounded-sm px-2",
-                              isSelected ? "mx-1 my-0.5 border border-semantic-border-neutral-secondary bg-semantic-background-neutral-primary shadow-elevation-bottom-sm" : "hover:bg-neutral-200/60"
-                            ),
-                            children: [
-                              /* @__PURE__ */ jsx27("span", { className: "shrink-0 [&>svg]:size-5", children: itemIcon }),
-                              /* @__PURE__ */ jsx27("span", { className: cn27(MENU_TEXT_STYLES, "truncate"), children: item.label })
-                            ]
-                          }
-                        )
-                      },
-                      item.id
-                    );
-                  }) }),
-                  /* @__PURE__ */ jsx27("div", { className: "flex flex-col gap-2 pt-4", children: bottomItems.map((item) => {
-                    const isSelected = selectedId === item.id;
-                    const itemIcon = isCollapsed && !isSelected ? item.icon : item.iconExpanded ?? item.icon;
-                    return /* @__PURE__ */ jsx27(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => handleItemClick(item.id),
-                        className: cn27(
-                          "inline-flex w-full items-center outline-none focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-offset-2",
-                          isCollapsed ? "justify-center" : "justify-start"
-                        ),
-                        children: isCollapsed ? /* @__PURE__ */ jsx27(
-                          "span",
-                          {
-                            className: cn27(
-                              "flex h-9 w-9 items-center justify-center rounded-sm [&>svg]:size-5",
-                              isSelected && "border border-semantic-border-neutral-secondary bg-semantic-background-neutral-primary shadow-elevation-bottom-sm"
-                            ),
-                            children: itemIcon
-                          }
-                        ) : /* @__PURE__ */ jsxs21(
-                          "span",
-                          {
-                            className: cn27(
-                              "flex h-9 min-w-0 flex-1 items-center gap-2 rounded-sm px-2",
-                              isSelected ? "mx-1 my-0.5 border border-semantic-border-neutral-secondary bg-semantic-background-neutral-primary shadow-elevation-bottom-sm" : "hover:bg-neutral-200/60"
-                            ),
-                            children: [
-                              /* @__PURE__ */ jsx27("span", { className: "shrink-0 [&>svg]:size-5", children: itemIcon }),
-                              /* @__PURE__ */ jsx27("span", { className: cn27(MENU_TEXT_STYLES, "truncate"), children: item.label })
-                            ]
-                          }
-                        )
-                      },
-                      item.id
-                    );
-                  }) })
+                  /* @__PURE__ */ jsx28("div", { className: "flex flex-1 flex-col gap-4", children: topGroups.map((group) => /* @__PURE__ */ jsx28(
+                    SideMenuGroup,
+                    {
+                      group,
+                      isCollapsed,
+                      selectedId,
+                      onItemClick: handleItemClick
+                    },
+                    group.id
+                  )) }),
+                  /* @__PURE__ */ jsx28("div", { className: "flex flex-col gap-4 pt-4", children: bottomGroups.map((group) => /* @__PURE__ */ jsx28(
+                    SideMenuGroup,
+                    {
+                      group,
+                      isCollapsed,
+                      selectedId,
+                      onItemClick: handleItemClick
+                    },
+                    group.id
+                  )) })
                 ]
               }
             )
@@ -3713,12 +3788,12 @@ var SideMenu = React27.forwardRef(
 SideMenu.displayName = "SideMenu";
 
 // src/patterns/Upload.tsx
-import * as React28 from "react";
+import * as React29 from "react";
 import { cva as cva20 } from "class-variance-authority";
 import { colors } from "@esds-sangam/tokens";
-import { cn as cn28 } from "@esds-sangam/utils";
+import { cn as cn29 } from "@esds-sangam/utils";
 import { CloudUpload, DocumentPdf, Close as Close11, Delete, Retry, TickmarkFilled as TickmarkFilled6 } from "@esds-sangam/icons";
-import { Fragment as Fragment5, jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
 var uploadBoxVariants = cva20([
   "relative flex flex-col items-center justify-center w-full",
   "rounded-sm border border-dashed border-semantic-border-neutral-primary hover:border-semantic-border-neutralInverse-primary",
@@ -3733,7 +3808,7 @@ function formatFileSize(bytes) {
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
   return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
-var Upload = React28.forwardRef(
+var Upload = React29.forwardRef(
   ({
     className,
     label,
@@ -3744,9 +3819,9 @@ var Upload = React28.forwardRef(
     helperText = "PNG, JPG, PDF, EXCEL (max size)",
     ...props
   }, ref) => {
-    const inputRef = React28.useRef(null);
-    const [fileEntries, setFileEntries] = React28.useState([]);
-    const progressIntervalRef = React28.useRef(null);
+    const inputRef = React29.useRef(null);
+    const [fileEntries, setFileEntries] = React29.useState([]);
+    const progressIntervalRef = React29.useRef(null);
     const handleClick = () => {
       inputRef.current?.click();
     };
@@ -3774,7 +3849,7 @@ var Upload = React28.forwardRef(
         )
       );
     };
-    React28.useEffect(() => {
+    React29.useEffect(() => {
       const uploading = fileEntries.filter((e) => e.status === "uploading");
       if (uploading.length === 0) return;
       const steps = [10, 50, 100];
@@ -3813,18 +3888,18 @@ var Upload = React28.forwardRef(
     const handleDragOver = (event) => {
       event.preventDefault();
     };
-    return /* @__PURE__ */ jsxs22(
+    return /* @__PURE__ */ jsxs23(
       "div",
       {
         ref,
-        className: cn28("flex w-full min-w-[328px] flex-col gap-2", className),
+        className: cn29("flex w-full min-w-[328px] flex-col gap-2", className),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs22("label", { className: "text-xs font-medium leading-4 text-semantic-text-neutral-primary", children: [
+          /* @__PURE__ */ jsxs23("label", { className: "text-xs font-medium leading-4 text-semantic-text-neutral-primary", children: [
             label,
-            required && /* @__PURE__ */ jsx28("span", { className: "text-semantic-text-semantic-error-subtle ml-0.5", children: "*" })
+            required && /* @__PURE__ */ jsx29("span", { className: "text-semantic-text-semantic-error-subtle ml-0.5", children: "*" })
           ] }),
-          /* @__PURE__ */ jsxs22(
+          /* @__PURE__ */ jsxs23(
             "div",
             {
               role: "button",
@@ -3838,13 +3913,13 @@ var Upload = React28.forwardRef(
               },
               onDrop: handleDrop,
               onDragOver: handleDragOver,
-              className: cn28(
+              className: cn29(
                 uploadBoxVariants(),
                 // Padding: top/bottom 20px (py-5), left/right 12px (px-3)
                 "py-5 px-3"
               ),
               children: [
-                /* @__PURE__ */ jsx28(
+                /* @__PURE__ */ jsx29(
                   "input",
                   {
                     ref: inputRef,
@@ -3857,12 +3932,12 @@ var Upload = React28.forwardRef(
                     "aria-hidden": "true"
                   }
                 ),
-                /* @__PURE__ */ jsxs22("div", { className: "relative z-0 flex flex-col items-center gap-2 text-center pointer-events-none", children: [
-                  /* @__PURE__ */ jsx28("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-semantic-background-semantic-info-subtle text-semantic-icon-semantic-info-subtle", children: /* @__PURE__ */ jsx28(CloudUpload, { size: 20, color: colors.blue["600"], "aria-hidden": "true" }) }),
-                  /* @__PURE__ */ jsxs22("div", { className: "flex flex-col gap-1", children: [
-                    /* @__PURE__ */ jsxs22("p", { className: "text-sm leading-6 text-semantic-text-neutral-primary", children: [
-                      /* @__PURE__ */ jsx28("span", { className: "font-normal", children: "Drop your files here or " }),
-                      /* @__PURE__ */ jsx28(
+                /* @__PURE__ */ jsxs23("div", { className: "relative z-0 flex flex-col items-center gap-2 text-center pointer-events-none", children: [
+                  /* @__PURE__ */ jsx29("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-semantic-background-semantic-info-subtle text-semantic-icon-semantic-info-subtle", children: /* @__PURE__ */ jsx29(CloudUpload, { size: 20, color: colors.blue["600"], "aria-hidden": "true" }) }),
+                  /* @__PURE__ */ jsxs23("div", { className: "flex flex-col gap-1", children: [
+                    /* @__PURE__ */ jsxs23("p", { className: "text-sm leading-6 text-semantic-text-neutral-primary", children: [
+                      /* @__PURE__ */ jsx29("span", { className: "font-normal", children: "Drop your files here or " }),
+                      /* @__PURE__ */ jsx29(
                         Button,
                         {
                           type: "button",
@@ -3877,13 +3952,13 @@ var Upload = React28.forwardRef(
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsx28("p", { className: "text-xs font-normal leading-4 text-semantic-text-neutral-tertiary", children: helperText })
+                    /* @__PURE__ */ jsx29("p", { className: "text-xs font-normal leading-4 text-semantic-text-neutral-tertiary", children: helperText })
                   ] })
                 ] })
               ]
             }
           ),
-          fileEntries.length > 0 && /* @__PURE__ */ jsx28("div", { className: "flex flex-col gap-3", children: fileEntries.map((entry) => /* @__PURE__ */ jsx28(
+          fileEntries.length > 0 && /* @__PURE__ */ jsx29("div", { className: "flex flex-col gap-3", children: fileEntries.map((entry) => /* @__PURE__ */ jsx29(
             UploadFileItem,
             {
               status: entry.status,
@@ -3917,7 +3992,7 @@ var uploadFileItemBoxVariants = cva20(
     }
   }
 );
-var UploadFileItem = React28.forwardRef(
+var UploadFileItem = React29.forwardRef(
   ({
     className,
     status = "uploading",
@@ -3931,72 +4006,72 @@ var UploadFileItem = React28.forwardRef(
   }, ref) => {
     const progressValue = Math.min(100, Math.max(0, progress));
     const showProgress = status !== "failed";
-    return /* @__PURE__ */ jsxs22(
+    return /* @__PURE__ */ jsxs23(
       "div",
       {
         ref,
         role: "listitem",
-        className: cn28(uploadFileItemBoxVariants({ status }), className),
+        className: cn29(uploadFileItemBoxVariants({ status }), className),
         ...props,
         children: [
-          /* @__PURE__ */ jsxs22("div", { className: "flex min-w-0 flex-1 gap-3", children: [
-            /* @__PURE__ */ jsxs22("div", { className: "flex flex-1 min-w-0 gap-2", children: [
-              /* @__PURE__ */ jsx28(DocumentPdf, { size: 24, className: "shrink-0 text-semantic-text-neutral-primary", "aria-hidden": true }),
-              /* @__PURE__ */ jsxs22("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
-                /* @__PURE__ */ jsx28("p", { className: "truncate text-sm font-medium leading-6 text-semantic-text-neutral-primary", children: fileName }),
-                status === "failed" ? /* @__PURE__ */ jsx28("p", { className: "text-xs font-normal leading-4 text-semantic-text-semantic-error-subtle", children: "Upload failed" }) : fileSize ? /* @__PURE__ */ jsx28("p", { className: "text-xs font-normal leading-4 text-semantic-text-neutral-tertiary", children: fileSize }) : null
+          /* @__PURE__ */ jsxs23("div", { className: "flex min-w-0 flex-1 gap-3", children: [
+            /* @__PURE__ */ jsxs23("div", { className: "flex flex-1 min-w-0 gap-2", children: [
+              /* @__PURE__ */ jsx29(DocumentPdf, { size: 24, className: "shrink-0 text-semantic-text-neutral-primary", "aria-hidden": true }),
+              /* @__PURE__ */ jsxs23("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+                /* @__PURE__ */ jsx29("p", { className: "truncate text-sm font-medium leading-6 text-semantic-text-neutral-primary", children: fileName }),
+                status === "failed" ? /* @__PURE__ */ jsx29("p", { className: "text-xs font-normal leading-4 text-semantic-text-semantic-error-subtle", children: "Upload failed" }) : fileSize ? /* @__PURE__ */ jsx29("p", { className: "text-xs font-normal leading-4 text-semantic-text-neutral-tertiary", children: fileSize }) : null
               ] })
             ] }),
-            /* @__PURE__ */ jsxs22("div", { className: "flex shrink-0 flex-col items-end justify-center", children: [
-              status === "uploading" && /* @__PURE__ */ jsx28(
+            /* @__PURE__ */ jsxs23("div", { className: "flex shrink-0 flex-col items-end justify-center", children: [
+              status === "uploading" && /* @__PURE__ */ jsx29(
                 "button",
                 {
                   type: "button",
                   onClick: onCancel,
                   className: "inline-flex items-center justify-center rounded p-0 text-semantic-text-neutral-primary hover:opacity-semantic-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-semantic-border-neutralInverse-primary focus-visible:ring-offset-1",
                   "aria-label": "Cancel upload",
-                  children: /* @__PURE__ */ jsx28(Close11, { size: 20, "aria-hidden": true })
+                  children: /* @__PURE__ */ jsx29(Close11, { size: 20, "aria-hidden": true })
                 }
               ),
-              status === "complete" && /* @__PURE__ */ jsx28(Fragment5, { children: /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-4", children: [
-                /* @__PURE__ */ jsx28(TickmarkFilled6, { size: 20, className: "!text-semantic-icon-semantic-success-subtle shrink-0", "aria-hidden": true }),
-                /* @__PURE__ */ jsx28(
+              status === "complete" && /* @__PURE__ */ jsx29(Fragment5, { children: /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-4", children: [
+                /* @__PURE__ */ jsx29(TickmarkFilled6, { size: 20, className: "!text-semantic-icon-semantic-success-subtle shrink-0", "aria-hidden": true }),
+                /* @__PURE__ */ jsx29(
                   "button",
                   {
                     type: "button",
                     onClick: onDelete,
                     className: "inline-flex items-center justify-center rounded p-0 text-semantic-text-neutral-primary hover:opacity-semantic-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-semantic-border-neutralInverse-primary focus-visible:ring-offset-1",
                     "aria-label": "Delete file",
-                    children: /* @__PURE__ */ jsx28(Delete, { size: 20, "aria-hidden": true })
+                    children: /* @__PURE__ */ jsx29(Delete, { size: 20, "aria-hidden": true })
                   }
                 )
               ] }) }),
-              status === "failed" && /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-4", children: [
-                /* @__PURE__ */ jsx28(
+              status === "failed" && /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-4", children: [
+                /* @__PURE__ */ jsx29(
                   "button",
                   {
                     type: "button",
                     onClick: onRetry,
                     className: "inline-flex items-center justify-center rounded p-0 text-semantic-text-neutral-primary hover:opacity-semantic-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-semantic-border-neutralInverse-primary focus-visible:ring-offset-1",
                     "aria-label": "Retry upload",
-                    children: /* @__PURE__ */ jsx28(Retry, { size: 20, "aria-hidden": true })
+                    children: /* @__PURE__ */ jsx29(Retry, { size: 20, "aria-hidden": true })
                   }
                 ),
-                /* @__PURE__ */ jsx28(
+                /* @__PURE__ */ jsx29(
                   "button",
                   {
                     type: "button",
                     onClick: onDelete,
                     className: "inline-flex items-center justify-center rounded p-0 text-semantic-text-neutral-primary hover:opacity-semantic-hover focus:outline-none focus-visible:ring-2 focus-visible:ring-semantic-border-neutralInverse-primary focus-visible:ring-offset-1",
                     "aria-label": "Delete file",
-                    children: /* @__PURE__ */ jsx28(Delete, { size: 20, "aria-hidden": true })
+                    children: /* @__PURE__ */ jsx29(Delete, { size: 20, "aria-hidden": true })
                   }
                 )
               ] })
             ] })
           ] }),
-          showProgress && /* @__PURE__ */ jsxs22("div", { className: "flex w-full items-center gap-sm", children: [
-            /* @__PURE__ */ jsx28(
+          showProgress && /* @__PURE__ */ jsxs23("div", { className: "flex w-full items-center gap-sm", children: [
+            /* @__PURE__ */ jsx29(
               ProgressBar,
               {
                 value: progressValue,
@@ -4005,7 +4080,7 @@ var UploadFileItem = React28.forwardRef(
                 "aria-label": `Upload progress ${progressValue}%`
               }
             ),
-            /* @__PURE__ */ jsxs22("span", { className: "text-xs font-normal leading-4 text-semantic-text-neutral-tertiary shrink-0 text-right", children: [
+            /* @__PURE__ */ jsxs23("span", { className: "text-xs font-normal leading-4 text-semantic-text-neutral-tertiary shrink-0 text-right", children: [
               progressValue,
               "%"
             ] })
@@ -4058,6 +4133,7 @@ export {
   RadioGroup,
   SearchField,
   SideMenu,
+  SideMenuItem,
   Skeleton,
   Stepper,
   Table,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sangam-ui",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",