sangam-ui 1.0.1 → 1.0.2

package/dist/index.d.ts

@@ -1586,8 +1586,8 @@ declare const PageFooter: React.ForwardRefExoticComponent<PageFooterProps & Reac
  * Logo 36×28. Text: 12px, weight 500, line-height 16px.
  */
 /**
- * Data for one row in {@link SideMenu} `topItems` / `bottomItems`.
- * Each entry is rendered exclusively with {@link SideMenuItem} (Dashboard, Orders, Projects, Search, Settings, Profile, etc.).
+ * Data for one row in a {@link SideMenuGroup}.
+ * Each entry is rendered exclusively with {@link SideMenuItem}.
  */
 interface SideMenuNavItem {
     id: string;
@@ -1599,13 +1599,26 @@ interface SideMenuNavItem {
     /** 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: SideMenuNavItem[];
-    /** Bottom nav items: Search, Settings, Profile */
-    bottomItems: SideMenuNavItem[];
+    /** 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. */
@@ -1633,7 +1646,7 @@ declare const SideMenu: React.ForwardRefExoticComponent<SideMenuProps & React.Re
 
 /**
  * Single row for {@link SideMenu}: leading icon, optional label, optional submenu chevron.
- * Use inside `SideMenu` via `topItems` / `bottomItems`, or alone for layout/testing.
+ * 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). */
@@ -1726,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, SideMenuItem, 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 };
+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

@@ -3581,6 +3581,37 @@ function SideMenuNavRow({
     }
   );
 }
+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",
   {
@@ -3602,8 +3633,8 @@ var SideMenu = React28.forwardRef(
     className,
     variant = "default",
     logo,
-    topItems,
-    bottomItems,
+    topGroups,
+    bottomGroups,
     selectedId: selectedIdProp,
     defaultSelectedId,
     expanded: expandedProp,
@@ -3725,25 +3756,25 @@ var SideMenu = React28.forwardRef(
                       ] })
                     }
                   ) }),
-                  /* @__PURE__ */ jsx28("div", { className: "flex flex-1 flex-col gap-2", children: topItems.map((item) => /* @__PURE__ */ jsx28(
-                    SideMenuNavRow,
+                  /* @__PURE__ */ jsx28("div", { className: "flex flex-1 flex-col gap-4", children: topGroups.map((group) => /* @__PURE__ */ jsx28(
+                    SideMenuGroup,
                     {
-                      item,
+                      group,
                       isCollapsed,
-                      isSelected: selectedId === item.id,
-                      onClick: () => handleItemClick(item.id)
+                      selectedId,
+                      onItemClick: handleItemClick
                     },
-                    item.id
+                    group.id
                   )) }),
-                  /* @__PURE__ */ jsx28("div", { className: "flex flex-col gap-2 pt-4", children: bottomItems.map((item) => /* @__PURE__ */ jsx28(
-                    SideMenuNavRow,
+                  /* @__PURE__ */ jsx28("div", { className: "flex flex-col gap-4 pt-4", children: bottomGroups.map((group) => /* @__PURE__ */ jsx28(
+                    SideMenuGroup,
                     {
-                      item,
+                      group,
                       isCollapsed,
-                      isSelected: selectedId === item.id,
-                      onClick: () => handleItemClick(item.id)
+                      selectedId,
+                      onItemClick: handleItemClick
                     },
-                    item.id
+                    group.id
                   )) })
                 ]
               }

package/package.json

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