@ttoss/components 2.5.1 → 2.6.0

package/README.md

@@ -177,6 +177,70 @@ import { Menu } from '@ttoss/components/Menu';
 </Menu>;
 ```
 
+### NavList
+
+Navigation lists for sidebars, menus, and dropdowns with icons, grouping, and routing integration. [📖 Docs](https://storybook.ttoss.dev/?path=/docs/components-navlist--docs)
+
+```tsx
+import { NavList } from '@ttoss/components/NavList';
+
+// Simple navigation
+<NavList
+  items={[
+    { id: '1', label: 'Home', href: '/', icon: 'mdi:home' },
+    { id: '2', label: 'Profile', href: '/profile', icon: 'mdi:account' },
+    { id: '3', label: 'Settings', href: '/settings', icon: 'mdi:cog' },
+  ]}
+  variant="sidebar"
+/>
+
+// With groups
+<NavList
+  groups={[
+    {
+      id: 'main',
+      label: 'Main Menu',
+      items: [
+        { id: '1', label: 'Dashboard', href: '/dashboard', icon: 'mdi:view-dashboard' },
+        { id: '2', label: 'Analytics', href: '/analytics', icon: 'mdi:chart-line' },
+      ],
+    },
+    {
+      id: 'settings',
+      label: 'Settings',
+      items: [
+        { id: '3', label: 'Account', href: '/account', icon: 'mdi:account-cog' },
+      ],
+      divider: true, // Divider after group
+    },
+  ]}
+/>
+
+// With Next.js routing
+import NextLink from 'next/link';
+
+<NavList
+  items={items}
+  LinkComponent={NextLink}
+  onItemClick={(item) => console.log('Clicked:', item)}
+/>
+```
+
+**Variants:**
+
+- `sidebar` - Sidebar navigation with larger icons (20px) and generous spacing
+- `menu` - Card-based menu with hover animations (18px icons)
+- `dropdown` - Compact dropdown with subtle borders (16px icons)
+
+**Features:**
+
+- **Auto-grouping** - Items automatically group by `group` property
+- **Active states** - Highlight active items with `active` prop
+- **Disabled items** - Prevent interaction with `disabled` prop
+- **Dividers** - Visual separators with `divider` prop on items or groups
+- **Icon support** - 200k+ icons via `@ttoss/react-icons`
+- **Custom routing** - Compatible with Next.js, React Router via `LinkComponent`
+
 ### Modal
 
 Theme-aware modals with accessibility features. [📖 Docs](https://storybook.ttoss.dev/?path=/docs/components-modal--docs)

package/dist/JsonEditor/index.d.ts

@@ -1,2 +1 @@
 export { JsonEditor } from 'json-edit-react';
-import 'react-json-view-lite';

package/dist/NavList/index.d.ts

@@ -0,0 +1,54 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type NavListItem = {
+    id?: string;
+    label: string;
+    href: string;
+    icon?: string;
+    disabled?: boolean;
+    active?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    group?: string;
+    divider?: boolean;
+};
+type NavListGroup = {
+    id?: string;
+    label?: string;
+    items: NavListItem[];
+    divider?: boolean;
+};
+type NavListProps = {
+    items?: NavListItem[];
+    groups?: NavListGroup[];
+    variant?: 'sidebar' | 'menu' | 'dropdown';
+    onItemClick?: (item: NavListItem) => void;
+    sx?: Record<string, unknown>;
+    iconSize?: number;
+    /**
+     * Custom Link component to use for rendering links.
+     * Useful for integrating with Next.js Link, React Router Link, etc.
+     *
+     * @example
+     * // Next.js
+     * import NextLink from 'next/link';
+     * <NavList LinkComponent={NextLink} ... />
+     *
+     * @example
+     * // React Router
+     * import { Link as RouterLink } from 'react-router-dom';
+     * <NavList LinkComponent={RouterLink} ... />
+     */
+    LinkComponent?: React.ComponentType<{
+        href: string;
+        onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+        children: React.ReactNode;
+        [key: string]: unknown;
+    }>;
+};
+declare const NavList: {
+    ({ items, groups, variant, onItemClick, sx, iconSize, LinkComponent, }: NavListProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { NavList, type NavListGroup, type NavListItem, type NavListProps };