@neasg/design-system 0.4.5 → 0.4.7

package/README.md

@@ -4,6 +4,12 @@ Shared NEA UI primitives, theme tokens, and Storybook documentation.
 
 ## Local Development
 
+Use Node 22 for local development:
+
+```bash
+nvm use
+```
+
 ```bash
 npm install
 npm test
@@ -11,145 +17,6 @@ npm run build
 npm run storybook
 ```
 
-## Package Usage
-
-```ts
-import "@neasg/design-system/styles.css";
-import { Badge, Button, Typography } from "@neasg/design-system";
-```
-
-For Tailwind-based apps, prefer the exported preset so you inherit the shared colors, font tokens, radius tokens, container sizing, and motion defaults:
-
-```ts
-// tailwind.config.ts
-import type { Config } from "tailwindcss";
-import neaTailwindPreset, {
-  neaDesignSystemContent,
-} from "@neasg/design-system/tailwind-preset";
-
-const config: Config = {
-  presets: [neaTailwindPreset],
-  content: [
-    "./app/**/*.{ts,tsx}",
-    "./components/**/*.{ts,tsx}",
-    ...neaDesignSystemContent,
-  ],
-};
-```
-
-Theme tokens are provided through the exported stylesheet. Import `@neasg/design-system/styles.css` once at your app root before rendering package components.
-
-If you want to change the package base font size, override `--font-size-root` after importing the stylesheet:
-
-```css
-:root {
-  --font-size-root: 15px;
-}
-```
-
-If you want the package font token to resolve to the actual Inter font in Next.js, load it into `--font-sans`:
-
-```ts
-import { Inter } from "next/font/google";
-
-const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-sans",
-});
-```
-
-The package currently includes:
-
-- theme tokens for colors, typography, font weights, border radius, shared spacing, and dashboard layout sizing/padding
-- typography primitives for titles, headings, body copy, labels, and captions
-- dashboard layout primitives for sidebar + content
-- page header with title, subtitle, and breadcrumbs
-- draggable tabs for overview/case tab strips
-- prescriptive table and pagination components with built-in sorting, loading skeletons, and table-level pagination wiring
-
-## Package Rules
-
-- Use `@neasg/design-system` as the source of truth for shared UI.
-- Prefer package components before creating app-local duplicates.
-- If a reusable pattern is missing, extract it into the design system instead of leaving it app-local.
-- This design system is light-theme only. Do not add dark theme tokens, dark variants, or a theme toggle unless product direction changes.
-
-## AI Usage
-
-### MCP Server (recommended)
-
-This design system includes the [Storybook MCP addon](https://storybook.js.org/docs/next/ai/mcp/overview/), which gives AI coding assistants direct access to component documentation, props, stories, and usage examples.
-
-**Setup:**
-
-1. Start the Storybook dev server in this repo:
-   ```bash
-   npm run storybook
-   ```
-   This starts on `http://localhost:6007` with the MCP endpoint at `/mcp`.
-
-2. In your consuming project, add a `.mcp.json` at the project root:
-   ```json
-   {
-     "mcpServers": {
-       "nea-design-system": {
-         "type": "http",
-         "url": "http://localhost:6007/mcp"
-       }
-     }
-   }
-   ```
-
-3. Restart Claude Code (or your MCP-compatible AI tool) in the consuming project. The following tools become available:
-   - **list-all-documentation** — discover all components and their story IDs
-   - **get-documentation** — get full component docs, props, and code examples
-   - **get-documentation-for-story** — get details for a specific story variant
-   - **preview-stories** — generate preview URLs for stories
-   - **get-storybook-story-instructions** — get guidance on writing stories
-
-The MCP server requires the Storybook dev server to be running. Start it before opening your AI tool.
-
-### Manual instructions
-
-If you are not using the MCP server, give your AI coding assistant these instructions explicitly:
-
-```text
-Use @neasg/design-system as the source of truth for shared UI.
-
-- Prefer components from @neasg/design-system before creating app-local UI.
-- Import package components directly when they already exist instead of building app-local copies.
-- Prefer this import pattern:
-  import { Button, Input, PageHeader, Table, Typography } from "@neasg/design-system";
-- Use the package theme tokens and Tailwind preset instead of inventing ad hoc colors, spacing, or radius values.
-- Do not introduce dark theme support. This design system is light-theme only.
-- If a needed shared pattern is missing, extract it into @neasg/design-system rather than building a duplicate local component.
-```
-
-## Common Exports
-
-- `@neasg/design-system`
-- `@neasg/design-system/button`
-- `@neasg/design-system/badge`
-- `@neasg/design-system/breadcrumb`
-- `@neasg/design-system/email-input`
-- `@neasg/design-system/input`
-- `@neasg/design-system/otp-input`
-- `@neasg/design-system/phone-input`
-- `@neasg/design-system/textarea`
-- `@neasg/design-system/select`
-- `@neasg/design-system/draggable-tabs`
-- `@neasg/design-system/layout`
-- `@neasg/design-system/page-header`
-- `@neasg/design-system/popover`
-- `@neasg/design-system/pagination`
-- `@neasg/design-system/table`
-- `@neasg/design-system/tailwind-preset`
-- `@neasg/design-system/tabs`
-- `@neasg/design-system/typography`
-- `@neasg/design-system/tooltip`
-- `@neasg/design-system/theme`
-- `@neasg/design-system/styles.css`
-
 ## Publishing
 
 This package is built to `dist/` before publish. The public package entry points are the compiled files in `dist`, not the raw `src` files.

package/dist/animated-icons/shield.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { motion, useAnimation } from "motion/react";
-import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, } from "react";
 import { cn } from "../lib/utils";
 const SVG_VARIANTS = {
     normal: { scale: 1 },
@@ -16,29 +16,41 @@ const SVG_VARIANTS = {
 const ShieldIcon = forwardRef(({ onMouseEnter, onMouseLeave, className, size = 24, ...props }, ref) => {
     const controls = useAnimation();
     const isControlledRef = useRef(false);
+    const isMountedRef = useRef(false);
+    useEffect(() => {
+        isMountedRef.current = true;
+        return () => {
+            isMountedRef.current = false;
+        };
+    }, []);
+    const startControls = useCallback((variant) => {
+        if (isMountedRef.current) {
+            controls.start(variant);
+        }
+    }, [controls]);
     useImperativeHandle(ref, () => {
         isControlledRef.current = true;
         return {
-            startAnimation: () => controls.start("animate"),
-            stopAnimation: () => controls.start("normal"),
+            startAnimation: () => startControls("animate"),
+            stopAnimation: () => startControls("normal"),
         };
-    });
+    }, [startControls]);
     const handleMouseEnter = useCallback((e) => {
         if (isControlledRef.current) {
             onMouseEnter === null || onMouseEnter === void 0 ? void 0 : onMouseEnter(e);
         }
         else {
-            controls.start("animate");
+            startControls("animate");
         }
-    }, [controls, onMouseEnter]);
+    }, [onMouseEnter, startControls]);
     const handleMouseLeave = useCallback((e) => {
         if (isControlledRef.current) {
             onMouseLeave === null || onMouseLeave === void 0 ? void 0 : onMouseLeave(e);
         }
         else {
-            controls.start("normal");
+            startControls("normal");
         }
-    }, [controls, onMouseLeave]);
+    }, [onMouseLeave, startControls]);
     return (_jsx("div", { className: cn(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...props, children: _jsx(motion.svg, { animate: controls, fill: "none", height: size, stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", variants: SVG_VARIANTS, viewBox: "0 0 24 24", width: size, xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" }) }) }));
 });
 ShieldIcon.displayName = "ShieldIcon";

package/dist/copy-button.d.ts

@@ -12,8 +12,8 @@ export interface CopyButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLBut
     onError?: (error: unknown) => void;
     /** Accessible label for the icon-only button. Defaults to "Copy". */
     copyLabel?: string;
-    /** Accessible label announced after copy. Defaults to "Copied". */
+    /** Feedback label after copying. Defaults to "Copied". */
     copiedLabel?: string;
 }
-declare function CopyButton({ value, feedbackDuration, children, onCopy, onError, copyLabel, copiedLabel, className, type, ...props }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function CopyButton({ value, feedbackDuration, children, onCopy, onError, onClick, copyLabel, copiedLabel, className, type, ...props }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;
 export { CopyButton };

package/dist/copy-button.js

@@ -4,14 +4,17 @@ import * as React from "react";
 import { Copy } from "lucide-react";
 import { CheckIcon } from "./animated-icons/check";
 import { cn } from "./lib/utils";
-function CopyButton({ value, feedbackDuration = 1500, children, onCopy, onError, copyLabel = "Copy", copiedLabel = "Copied", className, type = "button", ...props }) {
+function CopyButton({ value, feedbackDuration = 1500, children, onCopy, onError, onClick, copyLabel = "Copy", copiedLabel = "Copied", className, type = "button", ...props }) {
     const [copied, setCopied] = React.useState(false);
     const timeoutRef = React.useRef(null);
     React.useEffect(() => () => {
         if (timeoutRef.current)
             clearTimeout(timeoutRef.current);
     }, []);
-    const handleCopy = React.useCallback(async () => {
+    const handleCopy = React.useCallback(async (event) => {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (event.defaultPrevented)
+            return;
         try {
             await navigator.clipboard.writeText(value);
             setCopied(true);
@@ -23,7 +26,7 @@ function CopyButton({ value, feedbackDuration = 1500, children, onCopy, onError,
         catch (error) {
             onError === null || onError === void 0 ? void 0 : onError(error);
         }
-    }, [value, feedbackDuration, onCopy, onError]);
+    }, [value, feedbackDuration, onCopy, onClick, onError]);
     const iconOnly = children === undefined;
     const label = copied ? copiedLabel : copyLabel;
     return (_jsxs(_Fragment, { children: [_jsxs("button", { type: type, onClick: handleCopy, "aria-label": iconOnly ? label : undefined, className: cn("inline-flex cursor-pointer items-center gap-1.5 rounded text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-50", !iconOnly && "text-sm font-medium", className), ...props, children: [copied ? (_jsx(CheckIcon, { size: 16, className: "text-green-600" })) : (_jsx(Copy, { className: "h-4 w-4", "aria-hidden": "true" })), iconOnly ? null : _jsx("span", { children: copied ? copiedLabel : children })] }), _jsx("span", { className: "sr-only", "aria-live": "polite", children: copied ? copiedLabel : "" })] }));

package/dist/editable-table.js

@@ -117,12 +117,12 @@ function EditableTable({ value, onChange, columns, isEditing = false, className,
                                         const cellValue = getNestedValue(row, column.path);
                                         const isEditingCell = (editingCell === null || editingCell === void 0 ? void 0 : editingCell.rowIndex) === rowIndex &&
                                             (editingCell === null || editingCell === void 0 ? void 0 : editingCell.colPath) === column.path;
-                                        return (_jsx(TableCell, { className: cn("whitespace-normal", isEditing && "cursor-pointer hover:bg-muted/50"), minWidth: getColumnMinWidth(column), onClick: () => handleCellClick(rowIndex, column.path), children: isEditingCell ? (_jsx(InputControl, { ref: inputRef, value: editValue, onChange: (event) => setEditValue(event.target.value), onBlur: commitEdit, onKeyDown: handleKeyDown, className: "h-control w-full text-sm" })) : (_jsx("span", { className: cn("block whitespace-normal break-words", cellValue === null ||
+                                        return (_jsx(TableCell, { className: cn("whitespace-normal", isEditing && "cursor-pointer hover:bg-muted/50"), width: column.width, minWidth: getColumnMinWidth(column), maxWidth: getColumnMaxWidth(column), onClick: () => handleCellClick(rowIndex, column.path), children: isEditingCell ? (_jsx(InputControl, { ref: inputRef, value: editValue, onChange: (event) => setEditValue(event.target.value), onBlur: commitEdit, onKeyDown: handleKeyDown, className: "h-control w-full text-sm" })) : (_jsx("span", { className: cn("block whitespace-normal break-words", cellValue === null ||
                                                     cellValue === undefined ||
                                                     cellValue === ""
                                                     ? "text-muted-foreground"
                                                     : undefined), style: { maxWidth: getColumnMaxWidth(column) }, children: formatCellValue(cellValue) })) }, `cell-${rowIndex}-${columnIndex}`));
-                                    }), hasActionsColumn ? (_jsx(TableCell, { children: _jsxs("div", { className: "flex items-center justify-end gap-1", children: [renderRowActions
+                                    }), hasActionsColumn ? (_jsx(TableCell, { width: renderRowActions ? undefined : "72px", minWidth: renderRowActions ? "120px" : "72px", children: _jsxs("div", { className: "flex items-center justify-end gap-1", children: [renderRowActions
                                                     ? renderRowActions({
                                                         row,
                                                         rowIndex,

package/dist/index.d.ts

@@ -78,7 +78,7 @@ export { DraggableTabs, type DraggableTabItem, type DraggableTabsProps, } from "
 export { Drawer, } from "./drawer";
 export type { DrawerAction, DrawerProps, DrawerSide } from "./drawer";
 export { DashboardLayout, DashboardSidebar, useSidebar, } from "./layout";
-export type { DashboardLayoutProps, DashboardSidebarNavGroup, DashboardSidebarNavItem, } from "./layout";
+export type { DashboardLayoutProps, DashboardSidebarNavDropdownItem, DashboardSidebarNavGroup, DashboardSidebarNavItem, DashboardSidebarNavLinkItem, } from "./layout";
 export { PageHeader } from "./page-header";
 export { PageSection, PageSectionGroup } from "./page-section";
 export type { PageSectionGroupProps, PageSectionProps } from "./page-section";

package/dist/layout.d.ts

@@ -33,13 +33,10 @@ export interface DashboardSidebarProps extends React.HTMLAttributes<HTMLElement>
     }) => React.ReactNode);
     toggleAriaLabel?: string;
 }
-export interface DashboardSidebarNavItem {
+interface DashboardSidebarNavItemBase {
     id: string;
     label: string;
-    icon: React.ElementType;
-    href?: string;
-    target?: string;
-    rel?: string;
+    icon?: React.ElementType;
     active?: boolean;
     disabled?: boolean;
     wip?: boolean;
@@ -47,10 +44,30 @@ export interface DashboardSidebarNavItem {
     badgeVariant?: CountBadgeProps["variant"];
     badgePulse?: boolean;
     trailing?: React.ReactNode;
-    onClick?: () => void;
     onHoverStart?: () => void;
     onHoverEnd?: () => void;
 }
+export interface DashboardSidebarNavLinkItem extends DashboardSidebarNavItemBase {
+    href?: string;
+    target?: string;
+    rel?: string;
+    onClick?: () => void;
+    items?: never;
+    defaultExpanded?: never;
+    expanded?: never;
+    onExpandedChange?: never;
+}
+export interface DashboardSidebarNavDropdownItem extends DashboardSidebarNavItemBase {
+    items: DashboardSidebarNavItem[];
+    defaultExpanded?: boolean;
+    expanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    href?: never;
+    target?: never;
+    rel?: never;
+    onClick?: never;
+}
+export type DashboardSidebarNavItem = DashboardSidebarNavLinkItem | DashboardSidebarNavDropdownItem;
 export interface DashboardSidebarNavGroup {
     label?: string;
     items: DashboardSidebarNavItem[];

package/dist/layout.js

@@ -1,6 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { ChevronDownIcon } from "./animated-icons/chevron-down";
 import { ChevronLeftIcon } from "./animated-icons/chevron-left";
 import { ChevronRightIcon } from "./animated-icons/chevron-right";
 import { Badge } from "./badge";
@@ -80,7 +82,7 @@ function SidebarHeader({ className, children, }) {
     return _jsx("div", { className: cn("shrink-0", className), children: children });
 }
 function SidebarContent({ className, children, }) {
-    return _jsx("div", { className: cn("flex-1 overflow-y-auto", className), children: children });
+    return (_jsx("div", { className: cn("flex-1 overflow-y-auto", className), children: children }));
 }
 function SidebarFooter({ className, children, }) {
     return _jsx("div", { className: cn("shrink-0", className), children: children });
@@ -97,12 +99,25 @@ function SidebarMenu({ className, children, }) {
 function SidebarMenuItem({ className, children, }) {
     return _jsx("li", { className: className, children: children });
 }
-function SidebarMenuButton({ active = false, collapsed = false, disabled = false, className, asChild = false, children, ...props }) {
-    return (_jsx(Button, { asChild: asChild, variant: "ghost", disabled: disabled, className: cn("h-control w-full justify-start gap-3 rounded-lg text-sm font-medium shadow-none", collapsed ? "justify-center px-3" : "px-3", disabled
+const SidebarMenuButton = React.forwardRef(({ active = false, collapsed = false, disabled = false, className, asChild = false, children, ...props }, ref) => {
+    return (_jsx(Button, { ref: ref, asChild: asChild, variant: "ghost", disabled: disabled, className: cn("h-control w-full justify-start gap-3 rounded-lg text-sm font-medium shadow-none", collapsed ? "justify-center px-3" : "px-3", disabled
             ? "text-muted-foreground/50 hover:bg-transparent hover:text-muted-foreground/50"
             : active
                 ? "bg-white text-foreground hover:bg-white hover:text-foreground"
                 : "text-muted-foreground hover:bg-white hover:text-foreground", className), ...props, children: children }));
+});
+SidebarMenuButton.displayName = "SidebarMenuButton";
+function isDropdownSidebarItem(item) {
+    return Array.isArray(item.items);
+}
+function sidebarItemIsActive(item) {
+    if (item.active) {
+        return true;
+    }
+    if (isDropdownSidebarItem(item)) {
+        return item.items.some(sidebarItemIsActive);
+    }
+    return false;
 }
 function renderSidebarSlot(slot, isCollapsed) {
     if (typeof slot === "function") {
@@ -110,10 +125,11 @@ function renderSidebarSlot(slot, isCollapsed) {
     }
     return slot !== null && slot !== void 0 ? slot : null;
 }
-function DashboardSidebarItem({ item, isCollapsed, }) {
+function DashboardSidebarItemButton({ item, isCollapsed, active, expanded, depth = 0, onClick, ariaExpanded, }) {
     const Icon = item.icon;
     const iconRef = React.useRef(null);
     const showWipBadge = item.disabled || item.wip;
+    const hasDropdown = isDropdownSidebarItem(item);
     const handleMouseEnter = () => {
         var _a, _b, _c;
         if (!item.disabled) {
@@ -128,14 +144,62 @@ function DashboardSidebarItem({ item, isCollapsed, }) {
             (_c = item.onHoverEnd) === null || _c === void 0 ? void 0 : _c.call(item);
         }
     };
-    const content = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative flex h-5 w-5 shrink-0 items-center justify-center", children: [_jsx(Icon, { ref: iconRef, size: 16 }), isCollapsed && item.badgeCount !== undefined ? (_jsx(CountBadge, { count: item.badgeCount, variant: item.badgeVariant, size: "sm", pulse: item.badgePulse, className: "absolute -right-2 -top-2" })) : null] }), !isCollapsed ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "flex-1 truncate text-left", children: item.label }), showWipBadge ? _jsx(Badge, { variant: "muted", children: "WIP" }) : null, item.trailing, item.badgeCount !== undefined ? (_jsx(CountBadge, { count: item.badgeCount, variant: item.badgeVariant, size: "md", pulse: item.badgePulse })) : null] })) : null] }));
-    const button = (_jsx(SidebarMenuButton, { onClick: item.onClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleMouseEnter, onBlur: handleMouseLeave, disabled: item.disabled, active: item.active, collapsed: isCollapsed, "aria-current": item.active ? "page" : undefined, children: content }));
-    const interactive = item.href && !item.disabled ? (_jsx(SidebarMenuButton, { asChild: true, onClick: item.onClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleMouseEnter, onBlur: handleMouseLeave, active: item.active, collapsed: isCollapsed, "aria-current": item.active ? "page" : undefined, children: _jsx("a", { href: item.href, target: item.target, rel: item.rel, children: content }) })) : (button);
+    const content = (_jsxs(_Fragment, { children: [Icon ? (_jsxs("div", { className: "relative flex h-5 w-5 shrink-0 items-center justify-center", children: [_jsx(Icon, { ref: iconRef, size: 16 }), isCollapsed && item.badgeCount !== undefined ? (_jsx(CountBadge, { count: item.badgeCount, variant: item.badgeVariant, size: "sm", pulse: item.badgePulse, className: "absolute -right-2 -top-2" })) : null] })) : (_jsxs("div", { "aria-hidden": "true", className: "relative flex h-5 w-5 shrink-0 items-center justify-center", children: [_jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-current/35" }), isCollapsed && item.badgeCount !== undefined ? (_jsx(CountBadge, { count: item.badgeCount, variant: item.badgeVariant, size: "sm", pulse: item.badgePulse, className: "absolute -right-2 -top-2" })) : null] })), !isCollapsed ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "flex-1 truncate text-left", children: item.label }), showWipBadge ? _jsx(Badge, { variant: "muted", children: "WIP" }) : null, item.trailing, item.badgeCount !== undefined ? (_jsx(CountBadge, { count: item.badgeCount, variant: item.badgeVariant, size: "md", pulse: item.badgePulse })) : null, hasDropdown ? (_jsx(ChevronDownIcon, { "aria-hidden": "true", className: cn("shrink-0 text-muted-foreground transition-transform duration-200", expanded && "rotate-180 text-foreground"), size: 16 })) : null] })) : null] }));
+    const tooltipLabel = `${item.label}${showWipBadge ? " (WIP)" : ""}`;
+    const button = (_jsx(SidebarMenuButton, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleMouseEnter, onBlur: handleMouseLeave, onClick: onClick, disabled: item.disabled, active: active, collapsed: isCollapsed, "aria-current": active && !hasDropdown ? "page" : undefined, "aria-expanded": ariaExpanded, "aria-label": isCollapsed ? tooltipLabel : undefined, children: content }));
+    const interactive = !hasDropdown && item.href && !item.disabled ? (_jsx(SidebarMenuButton, { asChild: true, onClick: item.onClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleMouseEnter, onBlur: handleMouseLeave, active: active, collapsed: isCollapsed, "aria-current": active ? "page" : undefined, "aria-label": isCollapsed ? tooltipLabel : undefined, children: _jsx("a", { href: item.href, target: item.target, rel: item.rel, children: content }) })) : (button);
     if (isCollapsed) {
-        return (_jsx(Tooltip, { side: "right", content: _jsxs("p", { children: [item.label, showWipBadge ? " (WIP)" : ""] }), children: interactive }));
+        return (_jsx(Tooltip, { side: "right", content: _jsx("p", { children: tooltipLabel }), children: item.disabled ? (_jsx("span", { className: "block w-full cursor-not-allowed", children: interactive })) : (interactive) }));
     }
     return interactive;
 }
+function DashboardSidebarLeafItem({ item, isCollapsed, depth = 0, }) {
+    return (_jsx(DashboardSidebarItemButton, { item: item, isCollapsed: isCollapsed, active: sidebarItemIsActive(item), depth: depth, onClick: item.onClick }));
+}
+function DashboardSidebarDropdownItem({ item, isCollapsed, depth = 0, }) {
+    var _a;
+    const { toggle } = useSidebar();
+    const hasActiveDescendant = item.items.some(sidebarItemIsActive);
+    const isControlled = item.expanded !== undefined;
+    const [uncontrolledExpanded, setUncontrolledExpanded] = React.useState((_a = item.defaultExpanded) !== null && _a !== void 0 ? _a : Boolean(item.active || hasActiveDescendant));
+    const expanded = isControlled ? item.expanded : uncontrolledExpanded;
+    React.useEffect(() => {
+        if (!isControlled && (item.active || hasActiveDescendant)) {
+            setUncontrolledExpanded(true);
+        }
+    }, [hasActiveDescendant, isControlled, item.active]);
+    const setExpanded = React.useCallback((next) => {
+        var _a;
+        if (!isControlled) {
+            setUncontrolledExpanded(next);
+        }
+        (_a = item.onExpandedChange) === null || _a === void 0 ? void 0 : _a.call(item, next);
+    }, [isControlled, item]);
+    const handleOpenChange = React.useCallback((next) => {
+        if (item.disabled) {
+            return;
+        }
+        setExpanded(next);
+    }, [item.disabled, setExpanded]);
+    const handleClick = React.useCallback(() => {
+        if (item.disabled) {
+            return;
+        }
+        if (isCollapsed) {
+            setExpanded(true);
+            toggle();
+            return;
+        }
+        handleOpenChange(!expanded);
+    }, [expanded, handleOpenChange, isCollapsed, item.disabled, setExpanded, toggle]);
+    return (_jsxs(CollapsiblePrimitive.Root, { open: expanded, onOpenChange: handleOpenChange, children: [_jsx(DashboardSidebarItemButton, { item: item, isCollapsed: isCollapsed, active: item.active || hasActiveDescendant, expanded: expanded, depth: depth, onClick: handleClick, ariaExpanded: isCollapsed ? undefined : expanded }), !isCollapsed ? (_jsx(CollapsiblePrimitive.Content, { className: "overflow-hidden", children: _jsx("div", { className: "ml-5 mt-1 border-l border-border/70 pl-2", children: _jsx(SidebarMenu, { className: "space-y-1", children: item.items.map((child) => (_jsx(SidebarMenuItem, { children: _jsx(DashboardSidebarItem, { item: child, isCollapsed: false, depth: depth + 1 }) }, child.id))) }) }) })) : null] }));
+}
+function DashboardSidebarItem({ item, isCollapsed, depth = 0, }) {
+    if (isDropdownSidebarItem(item)) {
+        return (_jsx(DashboardSidebarDropdownItem, { item: item, isCollapsed: isCollapsed, depth: depth }));
+    }
+    return (_jsx(DashboardSidebarLeafItem, { item: item, isCollapsed: isCollapsed, depth: depth }));
+}
 function DashboardSidebar({ className, children, logo, search, navGroups, footerItems, footer, toggleAriaLabel = "Toggle sidebar", ...props }) {
     var _a;
     const { isCollapsed, toggle } = useSidebar();

package/dist/section-nav.d.ts

@@ -13,6 +13,7 @@ export interface SectionNavItem {
     disabled?: boolean;
     trailing?: React.ReactNode;
     onClick?: () => void;
+    items?: SectionNavItem[];
 }
 export interface SectionNavProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
     title?: React.ReactNode;

package/dist/section-nav.js

@@ -1,25 +1,91 @@
+"use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { Check } from "lucide-react";
+import { ChevronRightIcon } from "./animated-icons/chevron-right";
 import { Button } from "./button";
 import { cn } from "./lib/utils";
 import { Link } from "./link";
+import { Popover } from "./popover";
 import { Typography } from "./typography";
+function hasSectionNavChildren(item) {
+    return Array.isArray(item.items) && item.items.length > 0;
+}
+function sectionNavItemIsActive(item) {
+    if (item.active) {
+        return true;
+    }
+    if (hasSectionNavChildren(item)) {
+        return item.items.some(sectionNavItemIsActive);
+    }
+    return false;
+}
+function renderSectionNavItemContent({ item, active, surface, hasChildren, }) {
+    const Icon = item.icon;
+    return (_jsxs(_Fragment, { children: [Icon ? _jsx(Icon, { className: "h-4 w-4 shrink-0" }) : null, _jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: item.label }), item.trailing ? _jsx("span", { className: "shrink-0", children: item.trailing }) : null, surface === "menu" && active && !hasChildren ? (_jsx(Check, { "aria-hidden": "true", className: "h-4 w-4 shrink-0" })) : null, hasChildren ? (_jsx(ChevronRightIcon, { "aria-hidden": "true", size: 14, className: "shrink-0 text-muted-foreground" })) : null] }));
+}
+const SectionNavRow = React.forwardRef(({ item, active, surface, hasChildren = false, onSelect, ariaExpanded, className: triggerClassName, onClick: externalOnClick, ...buttonProps }, ref) => {
+    const isLink = Boolean(item.href) && !item.disabled && !hasChildren;
+    const className = cn(surface === "list"
+        ? "w-full justify-start gap-3 rounded-lg px-3 text-sm font-medium shadow-none"
+        : "h-auto min-h-control w-full justify-start gap-3 rounded-sm px-2 py-2 text-left text-sm font-normal shadow-none whitespace-normal", active && !item.disabled
+        ? surface === "list"
+            ? "bg-white hover:bg-white"
+            : "bg-accent text-accent-foreground hover:bg-accent hover:text-accent-foreground"
+        : surface === "list"
+            ? "hover:bg-white"
+            : "hover:bg-accent hover:text-accent-foreground");
+    const content = renderSectionNavItemContent({
+        item,
+        active,
+        surface,
+        hasChildren,
+    });
+    if (isLink) {
+        return (_jsx(Button, { ref: ref, asChild: true, variant: "ghost", disabled: item.disabled, className: cn(className, triggerClassName), "aria-current": active ? "page" : undefined, ...buttonProps, children: _jsx(Link, { variant: "inherit", href: item.href, target: item.target, rel: item.rel, onClick: (event) => {
+                    var _a;
+                    externalOnClick === null || externalOnClick === void 0 ? void 0 : externalOnClick(event);
+                    onSelect === null || onSelect === void 0 ? void 0 : onSelect();
+                    (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
+                }, children: content }) }));
+    }
+    return (_jsx(Button, { ref: ref, type: "button", variant: "ghost", disabled: item.disabled, className: cn(className, triggerClassName), "aria-current": active && !hasChildren ? "page" : undefined, "aria-expanded": hasChildren ? ariaExpanded : undefined, "aria-haspopup": hasChildren ? "menu" : undefined, ...buttonProps, onClick: hasChildren
+            ? externalOnClick
+            : (event) => {
+                var _a;
+                externalOnClick === null || externalOnClick === void 0 ? void 0 : externalOnClick(event);
+                onSelect === null || onSelect === void 0 ? void 0 : onSelect();
+                (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
+            }, children: content }));
+});
+SectionNavRow.displayName = "SectionNavRow";
+function SectionNavMenu({ items, surface, onItemSelect }) {
+    const renderedItems = items.map((item) => {
+        const content = hasSectionNavChildren(item) ? (_jsx(SectionNavSubmenuItem, { item: item, surface: surface, onItemSelect: onItemSelect })) : (_jsx(SectionNavRow, { item: item, active: sectionNavItemIsActive(item), surface: surface, onSelect: onItemSelect }));
+        if (surface === "list") {
+            return _jsx("li", { children: content }, item.id);
+        }
+        return _jsx("div", { children: content }, item.id);
+    });
+    if (surface === "list") {
+        return _jsx("ul", { className: "space-y-1.5", children: renderedItems });
+    }
+    return _jsx("div", { className: "space-y-1", children: renderedItems });
+}
+function SectionNavSubmenuItem({ item, surface, onItemSelect, }) {
+    const active = sectionNavItemIsActive(item);
+    const [open, setOpen] = React.useState(false);
+    return (_jsx(Popover, { open: open, onOpenChange: setOpen, surface: "menu", align: "start", side: "right", sideOffset: surface === "list" ? 8 : 6, contentClassName: "min-w-[14rem]", trigger: _jsx(SectionNavRow, { item: item, active: active, surface: surface, hasChildren: true, ariaExpanded: open }), children: _jsx("div", { children: _jsx(SectionNavMenu, { items: item.items, surface: "menu", onItemSelect: () => {
+                    setOpen(false);
+                    onItemSelect === null || onItemSelect === void 0 ? void 0 : onItemSelect();
+                } }) }) }));
+}
 function SectionNav({ title, items, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
     const titleId = React.useId();
     const resolvedLabelledBy = ariaLabelledBy !== null && ariaLabelledBy !== void 0 ? ariaLabelledBy : (!ariaLabel && title != null && !React.isValidElement(title)
         ? titleId
         : undefined);
     const renderedTitle = title == null ? null : React.isValidElement(title) ? (title) : (_jsx(Typography, { id: titleId, as: "h2", variant: "bodySm", className: "font-medium text-muted-foreground", children: title }));
-    return (_jsxs("nav", { className: cn("w-full space-y-3 rounded-xl bg-muted/40 p-3", className), "aria-label": ariaLabel, "aria-labelledby": resolvedLabelledBy, ...props, children: [renderedTitle, _jsx("ul", { className: "space-y-1.5", children: items.map((item) => {
-                    const Icon = item.icon;
-                    const itemClasses = cn("w-full justify-start", item.active &&
-                        !item.disabled &&
-                        "bg-white hover:bg-white");
-                    const content = (_jsxs(_Fragment, { children: [Icon ? _jsx(Icon, {}) : null, _jsx("span", { className: "min-w-0 flex-1 truncate text-left", children: item.label }), item.trailing ? (_jsx("span", { className: "shrink-0", children: item.trailing })) : null] }));
-                    const isLink = Boolean(item.href) && !item.disabled;
-                    return (_jsx("li", { children: _jsx(Button, { asChild: isLink, variant: "ghost", disabled: item.disabled, className: itemClasses, "aria-current": item.active ? "page" : undefined, ...(isLink
-                                ? {}
-                                : { type: "button", onClick: item.onClick }), children: isLink ? (_jsx(Link, { variant: "inherit", href: item.href, target: item.target, rel: item.rel, onClick: item.onClick, children: content })) : (content) }) }, item.id));
-                }) })] }));
+    return (_jsxs("nav", { className: cn("w-full space-y-3 rounded-xl bg-muted/40 p-3", className), "aria-label": ariaLabel, "aria-labelledby": resolvedLabelledBy, ...props, children: [renderedTitle, _jsx(SectionNavMenu, { items: items, surface: "list" })] }));
 }
 export { SectionNav };

package/dist/select.js

@@ -62,6 +62,13 @@ function Select({ label, options, placeholder = "Select an option", description,
         : options;
     const optionGroups = groupOptions(filteredOptions);
     const hasVisibleOptions = filteredOptions.length > 0;
+    const focusSearchInput = React.useCallback(() => {
+        const input = searchInputRef.current;
+        if (!input || document.activeElement === input) {
+            return;
+        }
+        input.focus({ preventScroll: true });
+    }, []);
     React.useEffect(() => {
         if (!isOpen) {
             setSearchQuery("");
@@ -71,13 +78,29 @@ function Select({ label, options, placeholder = "Select an option", description,
             return;
         }
         const animationFrame = window.requestAnimationFrame(() => {
-            var _a;
-            (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            focusSearchInput();
+        });
+        return () => {
+            window.cancelAnimationFrame(animationFrame);
+        };
+    }, [focusSearchInput, isOpen, searchable]);
+    React.useEffect(() => {
+        if (!isOpen || !searchable || !searchQuery) {
+            return;
+        }
+        const animationFrame = window.requestAnimationFrame(() => {
+            focusSearchInput();
         });
         return () => {
             window.cancelAnimationFrame(animationFrame);
         };
-    }, [isOpen, searchable]);
+    }, [
+        filteredOptions.length,
+        focusSearchInput,
+        isOpen,
+        searchable,
+        searchQuery,
+    ]);
     const handleOpenChange = React.useCallback((nextOpen) => {
         if (open === undefined) {
             setUncontrolledOpen(nextOpen);

package/dist/table.d.ts

@@ -100,6 +100,8 @@ export interface TableProps<Row> extends Omit<React.HTMLAttributes<HTMLDivElemen
     containerClassName?: string;
     tableClassName?: string;
     rowClassName?: string | ((row: Row, index: number) => string | undefined);
+    /** Constrains the table container height so the table body scrolls instead of the surrounding surface. */
+    maxHeight?: React.CSSProperties["maxHeight"];
     sorting?: TableSortingProps;
     pagination?: Omit<PaginationProps, "className">;
     loading?: boolean;
@@ -109,5 +111,5 @@ export interface TableProps<Row> extends Omit<React.HTMLAttributes<HTMLDivElemen
     /** When set, rows become interactive: cursor-pointer, hover highlight, and click handling. */
     onRowClick?: (row: Row, index: number) => void;
 }
-declare function Table<Row>({ columns, rows, getRowKey, emptyState, toolbar, caption, className, containerClassName, tableClassName, rowClassName, sorting, pagination, loading, loadingRows, striped, onRowClick, ...props }: TableProps<Row>): import("react/jsx-runtime").JSX.Element;
+declare function Table<Row>({ columns, rows, getRowKey, emptyState, toolbar, caption, className, containerClassName, tableClassName, rowClassName, maxHeight, sorting, pagination, loading, loadingRows, striped, onRowClick, style, ...props }: TableProps<Row>): import("react/jsx-runtime").JSX.Element;
 export { Table, TableRoot, TableContainer, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, SortableTableHead, TableRowSkeleton, };

package/dist/table.js

@@ -9,7 +9,7 @@ import { Skeleton } from "./skeleton";
 import { cn } from "./lib/utils";
 const TableRoot = React.forwardRef(({ className, wrapperClassName: _wrapperClassName, ...props }, ref) => (_jsx("table", { ref: ref, className: cn("w-full caption-bottom text-sm", className), ...props })));
 TableRoot.displayName = "TableRoot";
-const TableContainer = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("overflow-x-auto rounded-lg border bg-card", className), ...props })));
+const TableContainer = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("min-h-0 overflow-auto rounded-lg border bg-card", className), ...props })));
 TableContainer.displayName = "TableContainer";
 const TableHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("thead", { ref: ref, className: cn("sticky top-0 z-10 bg-muted [&_tr]:border-b [&>tr]:bg-inherit", className), ...props })));
 TableHeader.displayName = "TableHeader";
@@ -17,7 +17,7 @@ const TableBody = React.forwardRef(({ className, ...props }, ref) => (_jsx("tbod
 TableBody.displayName = "TableBody";
 const TableFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("tfoot", { ref: ref, className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props })));
 TableFooter.displayName = "TableFooter";
-const TableRow = React.forwardRef(({ className, ...props }, ref) => (_jsx("tr", { ref: ref, className: cn("border-b bg-card transition-colors cursor-pointer hover:bg-muted data-[state=selected]:bg-muted", className), ...props })));
+const TableRow = React.forwardRef(({ className, ...props }, ref) => (_jsx("tr", { ref: ref, className: cn("border-b bg-card transition-colors data-[state=selected]:bg-muted", className), ...props })));
 TableRow.displayName = "TableRow";
 const TableHead = React.forwardRef(({ className, style, width, minWidth, maxWidth, wrap = false, ...props }, ref) => (_jsx("th", { ref: ref, className: cn("h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", wrap ? "whitespace-normal" : "whitespace-nowrap", className), style: {
         ...style,
@@ -115,18 +115,21 @@ function getDefaultSkeleton(column) {
         height: "1rem",
     };
 }
-function Table({ columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { message: "No data available", description: "There are no rows to display in this table yet.", className: "border-0 bg-transparent px-0 py-6" })), toolbar, caption, className, containerClassName, tableClassName, rowClassName, sorting, pagination, loading = false, loadingRows = 5, striped = false, onRowClick, ...props }) {
+function Table({ columns, rows, getRowKey, emptyState = (_jsx(EmptyState, { message: "No data available", description: "There are no rows to display in this table yet.", className: "border-0 bg-transparent px-0 py-6" })), toolbar, caption, className, containerClassName, tableClassName, rowClassName, maxHeight, sorting, pagination, loading = false, loadingRows = 5, striped = false, onRowClick, style, ...props }) {
     // Use auto layout so the browser can grow a column to contain its (nowrap)
     // header. Caller can opt back into fixed layout via `tableClassName="table-fixed"`.
     const shouldUseFixedLayout = false;
-    const container = (_jsx(TableContainer, { className: cn("w-full", loading && "pointer-events-none select-none", className, containerClassName), ...props, children: _jsxs(TableRoot, { className: cn(shouldUseFixedLayout && "table-fixed", tableClassName), children: [caption ? _jsx(TableCaption, { children: caption }) : null, _jsx(TableHeader, { children: _jsx(TableRow, { children: columns.map((column) => {
+    const container = (_jsx(TableContainer, { className: cn("w-full", loading && "pointer-events-none select-none", className, containerClassName), style: {
+            ...style,
+            ...(maxHeight !== undefined ? { maxHeight } : {}),
+        }, ...props, children: _jsxs(TableRoot, { className: cn(shouldUseFixedLayout && "table-fixed", tableClassName), children: [caption ? _jsx(TableCaption, { children: caption }) : null, _jsx(TableHeader, { children: _jsx(TableRow, { children: columns.map((column) => {
                             var _a;
                             const sortField = (_a = column.sortKey) !== null && _a !== void 0 ? _a : column.key;
                             const isSortable = column.sortable && sorting;
                             return (isSortable ? (_jsx(SortableTableHead, { field: sortField, currentSortField: sorting.field, currentSortDirection: sorting.direction, onSort: sorting.onSort, className: cn(stickyClassName(column.sticky, "head"), column.headerClassName), allowWrap: column.wrap, width: column.width, minWidth: column.minWidth, maxWidth: column.maxWidth, align: column.align, sortLabel: column.sortLabel, children: column.header }, column.key)) : (_jsx(TableHead, { width: column.width, minWidth: column.minWidth, maxWidth: column.maxWidth, wrap: column.wrap, className: cn(alignClassName(column.align), stickyClassName(column.sticky, "head"), column.headerClassName), children: column.header }, column.key)));
-                        }) }) }), _jsx(TableBody, { className: cn(striped && "[&>tr:nth-child(even)]:bg-muted/60"), children: loading ? (_jsx(TableRowSkeleton, { rows: loadingRows, columns: columns.map((column) => { var _a; return (_a = column.skeleton) !== null && _a !== void 0 ? _a : getDefaultSkeleton(column); }) })) : rows.length ? (rows.map((row, rowIndex) => (_jsx(TableRow, { onClick: onRowClick ? () => onRowClick(row, rowIndex) : undefined, className: typeof rowClassName === "function"
+                        }) }) }), _jsx(TableBody, { className: cn(striped && "[&>tr:nth-child(even)]:bg-muted/60"), children: loading ? (_jsx(TableRowSkeleton, { rows: loadingRows, columns: columns.map((column) => { var _a; return (_a = column.skeleton) !== null && _a !== void 0 ? _a : getDefaultSkeleton(column); }) })) : rows.length ? (rows.map((row, rowIndex) => (_jsx(TableRow, { onClick: onRowClick ? () => onRowClick(row, rowIndex) : undefined, className: cn(onRowClick && "cursor-pointer hover:bg-muted", typeof rowClassName === "function"
                             ? rowClassName(row, rowIndex)
-                            : rowClassName, children: columns.map((column) => {
+                            : rowClassName), children: columns.map((column) => {
                             var _a, _b;
                             const value = (_b = (_a = column.cell) === null || _a === void 0 ? void 0 : _a.call(column, row, rowIndex)) !== null && _b !== void 0 ? _b : (column.accessorKey !== undefined
                                 ? row[column.accessorKey]

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@neasg/design-system",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "description": "NEA shared design system primitives, theme tokens, and Storybook docs.",
   "license": "UNLICENSED",
   "type": "module",
+  "engines": {
+    "node": ">=22 <23"
+  },
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -82,166 +85,7 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./avatar": {
-      "types": "./dist/avatar.d.ts",
-      "import": "./dist/avatar.js"
-    },
-    "./animated-icons": {
-      "types": "./dist/animated-icons/index.d.ts",
-      "import": "./dist/animated-icons/index.js"
-    },
-    "./badge": {
-      "types": "./dist/badge.d.ts",
-      "import": "./dist/badge.js"
-    },
-    "./back-button": {
-      "types": "./dist/back-button.d.ts",
-      "import": "./dist/back-button.js"
-    },
-    "./button": {
-      "types": "./dist/button.d.ts",
-      "import": "./dist/button.js"
-    },
-    "./dialog": {
-      "types": "./dist/dialog.d.ts",
-      "import": "./dist/dialog.js"
-    },
-    "./command": {
-      "types": "./dist/command.d.ts",
-      "import": "./dist/command.js"
-    },
-    "./count-badge": {
-      "types": "./dist/count-badge.d.ts",
-      "import": "./dist/count-badge.js"
-    },
-    "./command-search": {
-      "types": "./dist/command-search.d.ts",
-      "import": "./dist/command-search.js"
-    },
-    "./empty-state": {
-      "types": "./dist/empty-state.d.ts",
-      "import": "./dist/empty-state.js"
-    },
-    "./editable-table": {
-      "types": "./dist/editable-table.d.ts",
-      "import": "./dist/editable-table.js"
-    },
-    "./email-input": {
-      "types": "./dist/email-input.d.ts",
-      "import": "./dist/email-input.js"
-    },
-    "./input": {
-      "types": "./dist/input.d.ts",
-      "import": "./dist/input.js"
-    },
-    "./phone-input": {
-      "types": "./dist/phone-input.d.ts",
-      "import": "./dist/phone-input.js"
-    },
-    "./otp-input": {
-      "types": "./dist/otp-input.d.ts",
-      "import": "./dist/otp-input.js"
-    },
-    "./select": {
-      "types": "./dist/select.d.ts",
-      "import": "./dist/select.js"
-    },
-    "./label-value": {
-      "types": "./dist/label-value.d.ts",
-      "import": "./dist/label-value.js"
-    },
-    "./label-value-grid": {
-      "types": "./dist/label-value-grid.d.ts",
-      "import": "./dist/label-value-grid.js"
-    },
-    "./breadcrumb": {
-      "types": "./dist/breadcrumb.d.ts",
-      "import": "./dist/breadcrumb.js"
-    },
-    "./draggable-tabs": {
-      "types": "./dist/draggable-tabs.d.ts",
-      "import": "./dist/draggable-tabs.js"
-    },
-    "./drawer": {
-      "types": "./dist/drawer.d.ts",
-      "import": "./dist/drawer.js"
-    },
-    "./right-drawer": {
-      "types": "./dist/right-drawer.d.ts",
-      "import": "./dist/right-drawer.js"
-    },
-    "./layout": {
-      "types": "./dist/layout.d.ts",
-      "import": "./dist/layout.js"
-    },
-    "./page-header": {
-      "types": "./dist/page-header.d.ts",
-      "import": "./dist/page-header.js"
-    },
-    "./page-section": {
-      "types": "./dist/page-section.d.ts",
-      "import": "./dist/page-section.js"
-    },
-    "./popover": {
-      "types": "./dist/popover.d.ts",
-      "import": "./dist/popover.js"
-    },
-    "./pagination": {
-      "types": "./dist/pagination.d.ts",
-      "import": "./dist/pagination.js"
-    },
-    "./search-input": {
-      "types": "./dist/search-input.d.ts",
-      "import": "./dist/search-input.js"
-    },
-    "./section-nav": {
-      "types": "./dist/section-nav.d.ts",
-      "import": "./dist/section-nav.js"
-    },
     "./styles.css": "./dist/styles.css",
-    "./table": {
-      "types": "./dist/table.d.ts",
-      "import": "./dist/table.js"
-    },
-    "./table-toolbar": {
-      "types": "./dist/table-toolbar.d.ts",
-      "import": "./dist/table-toolbar.js"
-    },
-    "./tailwind-preset": {
-      "types": "./dist/tailwind-preset.d.ts",
-      "import": "./dist/tailwind-preset.js"
-    },
-    "./tabs": {
-      "types": "./dist/tabs.d.ts",
-      "import": "./dist/tabs.js"
-    },
-    "./textarea": {
-      "types": "./dist/textarea.d.ts",
-      "import": "./dist/textarea.js"
-    },
-    "./typography": {
-      "types": "./dist/typography.d.ts",
-      "import": "./dist/typography.js"
-    },
-    "./theme": {
-      "types": "./dist/theme.d.ts",
-      "import": "./dist/theme.js"
-    },
-    "./tooltip": {
-      "types": "./dist/tooltip.d.ts",
-      "import": "./dist/tooltip.js"
-    },
-    "./separator": {
-      "types": "./dist/separator.d.ts",
-      "import": "./dist/separator.js"
-    },
-    "./collapsible-section": {
-      "types": "./dist/collapsible-section.d.ts",
-      "import": "./dist/collapsible-section.js"
-    },
-    "./lib/utils": {
-      "types": "./dist/lib/utils.d.ts",
-      "import": "./dist/lib/utils.js"
-    }
+    "./package.json": "./package.json"
   }
 }