@datum-cloud/datum-ui 3.0.0 → 3.2.0

package/dist/app-navigation/index.mjs

@@ -1,3 +1,3 @@
 import { C as SidebarProvider, S as SidebarGroupLabel, _ as SidebarMenuSubButton, a as SidebarInput, b as SidebarGroupAction, c as SidebarSeparator, d as SidebarMenuAction, f as SidebarMenuBadge, g as SidebarMenuSub, h as SidebarMenuSkeleton, i as SidebarHeader, l as SidebarTrigger, m as SidebarMenuItem, n as SidebarContent, o as SidebarInset, p as SidebarMenuButton, r as SidebarFooter, s as SidebarRail, t as Sidebar, u as SidebarMenu, v as SidebarMenuSubItem, w as useSidebar, x as SidebarGroupContent, y as SidebarGroup } from "../sidebar-BeWEEu7P.mjs";
-import { a as hasActiveDescendant, i as findItemByHref, n as NavMenu, o as isNavItemActive, r as NavMenuItem, s as normalizePath, t as AppNavigation } from "../app-navigation-D52ikGN-.mjs";
+import { a as hasActiveDescendant, i as findItemByHref, n as NavMenu, o as isNavItemActive, r as NavMenuItem, s as normalizePath, t as AppNavigation } from "../app-navigation-DEqa2_TC.mjs";
 export { AppNavigation, NavMenu, NavMenuItem, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, findItemByHref, hasActiveDescendant, isNavItemActive, normalizePath, useSidebar };

package/dist/{app-navigation-D52ikGN-.mjs → app-navigation-DEqa2_TC.mjs}

@@ -99,13 +99,22 @@ function useNavMenuContext() {
 * Uses type + title + href + level (not href alone) so that collapsible groups
 * with href:null can still be toggled and duplicate hrefs never collide.
 */
+/**
+* Depth at which an item's children render. A `group` is only a section label,
+* so its children render at the group's own depth and look like top-level rows.
+*/
+function childLevel(item, level) {
+	return item.type === "group" ? level : level + 1;
+}
 function getNavItemKey(item, level) {
 	return `${item.type}:${item.title}:${item.href ?? ""}:${level}`;
 }
 //#endregion
 //#region src/components/features/app-navigation/nav-menu/parts.tsx
 const NAV_STYLES = {
-	menuButton: "rounded-xl h-8 font-normal text-xs transition-all px-2 py-1 data-[active=true]:bg-sidebar data-[active=true]:text-foreground data-[active=true]:text-sidebar-primary data-[active=true]:[&>svg]:text-primary hover:bg-sidebar hover:text-sidebar-primary hover:[&>svg]:text-sidebar-primary hover:bg-sidebar-accent data-[active=true]:bg-sidebar-accent hover:font-semibold data-[active=true]:hover:[&>svg]:text-sidebar-primary transition-colors duration-300 gap-2.5 text-foreground [&>svg]:text-icon-primary",
+	/** Side inset of every row. Drops back to px-2 so a 32px button fits the 48px icon rail. */
+	rowInset: "px-3 group-data-[collapsible=icon]:px-2",
+	menuButton: "rounded-xl h-8 font-normal text-xs transition-all px-3 py-1 data-[active=true]:bg-sidebar data-[active=true]:text-foreground data-[active=true]:text-sidebar-primary data-[active=true]:[&>svg]:text-primary hover:bg-sidebar hover:text-sidebar-primary hover:[&>svg]:text-sidebar-primary hover:bg-sidebar-accent data-[active=true]:bg-sidebar-accent hover:font-semibold data-[active=true]:hover:[&>svg]:text-sidebar-primary transition-colors duration-300 gap-2.5 text-foreground [&>svg]:text-icon-primary",
 	disabled: "pointer-events-none opacity-50",
 	icon: "duration-300 transition-all",
 	iconSmall: "size-4 duration-300 transition-all"
@@ -157,6 +166,13 @@ const COLLAPSIBLE_CHILD_VARIANTS = {
 		}
 	}
 };
+/**
+* Nested rows already sit inside their parent's inset; adding another would push
+* their labels past the parent's label instead of lining up under it.
+*/
+function rowInsetFor(level) {
+	return level >= 1 ? "px-0" : NAV_STYLES.rowInset;
+}
 /** Stable React key for a rendered nav item at a given depth. */
 function itemKeyOf(item, level) {
 	return `${item.title}-${item.href || ""}-${level}`;
@@ -179,7 +195,8 @@ function NavBadge({ badge }) {
 * Memoized so unchanged subtrees skip re-rendering when their props are stable.
 *
 * Items with children use {@link NavCollapsibleItem}. Section headers use
-* {@link NavGroup} (always open, no dropdown).
+* {@link NavGroup} (always open, no dropdown); their children render at the
+* header's own level, so they look like top-level rows.
 */
 const NavMenuItem = memo(({ item, level = 0 }) => {
 	if (item.hidden) return null;
@@ -197,32 +214,21 @@ const NavMenuItem = memo(({ item, level = 0 }) => {
 	});
 });
 NavMenuItem.displayName = "NavMenuItem";
-/** A labelled group of nav items (always open — Vercel-style section headers). */
+/**
+* A labelled group of nav items (always open — Vercel-style section headers).
+* The same tree renders in the icon rail with the header hidden, so the rail
+* shows every item's icon and collapsing the sidebar never remounts the items.
+*/
 function NavGroup({ item, level }) {
 	const ctx = useNavMenuContext();
-	const { pathname, isIconRail, isMobile } = ctx;
+	const { pathname } = ctx;
 	const hasActiveChild = item.children?.some((child) => hasActiveDescendant(child, pathname)) ?? false;
-	if (isIconRail && !isMobile) return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		item.showSeparatorAbove && /* @__PURE__ */ jsx(SidebarSeparator, { className: "my-1" }),
-		/* @__PURE__ */ jsx(SidebarMenu, {
-			className: "px-2",
-			children: /* @__PURE__ */ jsx(NavSidebarMenuButton, {
-				item,
-				isActive: hasActiveChild,
-				disableTooltip: ctx.disableTooltip,
-				className: cn(ctx.itemClassName, hasActiveChild && "[&>svg:first-of-type]:text-primary"),
-				activeClassName: ctx.activeItemClassName,
-				onClick: () => ctx.setOpen(true)
-			})
-		}),
-		item.showSeparatorBelow && /* @__PURE__ */ jsx(SidebarSeparator, { className: "my-2" })
-	] });
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		item.showSeparatorAbove && /* @__PURE__ */ jsx(SidebarSeparator, { className: "my-2" }),
 		/* @__PURE__ */ jsxs(SidebarGroup, {
-			className: "mb-1 p-0! px-2",
+			className: cn("mb-1 p-0!", !item.showSeparatorAbove && "mt-3"),
 			children: [item.title && /* @__PURE__ */ jsx(SidebarMenu, {
-				className: "w-full",
+				className: cn("w-full group-data-[collapsible=icon]:hidden", NAV_STYLES.rowInset),
 				children: /* @__PURE__ */ jsx(NavSidebarMenuButton, {
 					item,
 					isActive: hasActiveChild,
@@ -238,8 +244,8 @@ function NavGroup({ item, level }) {
 				className: "flex flex-col gap-0.5",
 				children: (item.children || []).map((child) => /* @__PURE__ */ jsx(NavMenuItem, {
 					item: child,
-					level: level + 1
-				}, itemKeyOf(child, level + 1)))
+					level: childLevel(item, level)
+				}, itemKeyOf(child, childLevel(item, level))))
 			})]
 		}),
 		item.showSeparatorBelow && /* @__PURE__ */ jsx(SidebarSeparator, { className: "my-2" })
@@ -263,7 +269,7 @@ function NavCollapsibleItem({ item, level }) {
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		item.showSeparatorAbove && /* @__PURE__ */ jsx(SidebarSeparator, { className: "my-2" }),
 		/* @__PURE__ */ jsx(SidebarMenu, {
-			className: "px-2",
+			className: rowInsetFor(level),
 			children: /* @__PURE__ */ jsx(Collapsible, {
 				asChild: true,
 				open: panelOpen,
@@ -347,7 +353,7 @@ function NavLeafItem({ item, level }) {
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		item.showSeparatorAbove && /* @__PURE__ */ jsx(SidebarSeparator, { className: "my-2" }),
 		/* @__PURE__ */ jsx(SidebarMenu, {
-			className: cn(`level_${level} px-2`),
+			className: cn(`level_${level}`, rowInsetFor(level)),
 			children: /* @__PURE__ */ jsx(SidebarMenuItem, {
 				className: "[&>*:first-child]:w-full",
 				children: /* @__PURE__ */ jsx(NavSidebarMenuButton, {
@@ -431,7 +437,7 @@ function NavMenu({ ref, className, items, currentPath, linkComponent: LinkComp =
 				navItems.forEach((navItem) => {
 					const key = getNavItemKey(navItem, level);
 					if (prev[key] && hasActiveDescendant(navItem, pathname)) newOpenItems[key] = true;
-					if (navItem.children) keepActive(navItem.children, level + 1);
+					if (navItem.children) keepActive(navItem.children, childLevel(navItem, level));
 				});
 			};
 			keepActive(items, 0);
@@ -510,7 +516,7 @@ function NavSkeleton() {
 		"data-sidebar": "menu",
 		children: [
 			/* @__PURE__ */ jsx(SidebarMenu, {
-				className: "px-2",
+				className: NAV_STYLES.rowInset,
 				children: /* @__PURE__ */ jsx(SidebarMenuItem, {
 					className: "[&>*:first-child]:w-full",
 					children: /* @__PURE__ */ jsx(SidebarMenuSkeleton, {
@@ -528,7 +534,7 @@ function NavSkeleton() {
 				5,
 				6
 			].map((i) => /* @__PURE__ */ jsx(SidebarMenu, {
-				className: "px-2",
+				className: NAV_STYLES.rowInset,
 				children: /* @__PURE__ */ jsx(SidebarMenuItem, {
 					className: "[&>*:first-child]:w-full",
 					children: /* @__PURE__ */ jsx(SidebarMenuSkeleton, {
@@ -539,7 +545,7 @@ function NavSkeleton() {
 			}, i)),
 			/* @__PURE__ */ jsx(SidebarSeparator, { className: "my-2" }),
 			/* @__PURE__ */ jsx(SidebarMenu, {
-				className: "px-2",
+				className: NAV_STYLES.rowInset,
 				children: /* @__PURE__ */ jsx(SidebarMenuItem, {
 					className: "[&>*:first-child]:w-full",
 					children: /* @__PURE__ */ jsx(SidebarMenuSkeleton, {

package/dist/components/base/typography/typography.d.ts

@@ -1,7 +1,7 @@
 import type { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const titleVariants: (props?: ({
-    level?: 1 | 2 | 3 | 4 | 5 | 6 | null | undefined;
+    level?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | null | undefined;
     weight?: "bold" | "normal" | "medium" | "semibold" | "extrabold" | null | undefined;
     textColor?: "default" | "secondary" | "destructive" | "success" | "info" | "warning" | "primary" | "muted" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -300,7 +300,13 @@ declare function Title({ className, level, weight, textColor, as, children, ...p
     className: string;
 }, HTMLElement>;
 interface TextProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>, VariantProps<typeof textVariants> {
-    as?: 'span' | 'p' | 'div';
+    /**
+     * Headings are allowed because the scale's display steps start at 16px
+     * (`Title` level 6), so a smaller heading — a card or section label at 13
+     * or 14px — has no `Title` level. Render it as `<Text as="h4">` rather than
+     * dropping to a raw size class.
+     */
+    as?: 'span' | 'p' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     copyable?: boolean;
     ellipsis?: boolean;
     mark?: boolean;

package/dist/components/features/app-navigation/nav-menu/nav-menu-context.d.ts

@@ -44,6 +44,13 @@ export declare function useNavMenuContext(): NavMenuContextValue;
  * Uses type + title + href + level (not href alone) so that collapsible groups
  * with href:null can still be toggled and duplicate hrefs never collide.
  */
+/**
+ * Depth at which an item's children render. A `group` is only a section label,
+ * so its children render at the group's own depth and look like top-level rows.
+ */
+export declare function childLevel(item: {
+    type: string;
+}, level: number): number;
 export declare function getNavItemKey(item: {
     type: string;
     title: string;

package/dist/components/features/app-navigation/nav-menu/nav-menu-item.d.ts

@@ -7,7 +7,8 @@ declare function itemKeyOf(item: NavItem, level: number): string;
  * Memoized so unchanged subtrees skip re-rendering when their props are stable.
  *
  * Items with children use {@link NavCollapsibleItem}. Section headers use
- * {@link NavGroup} (always open, no dropdown).
+ * {@link NavGroup} (always open, no dropdown); their children render at the
+ * header's own level, so they look like top-level rows.
  */
 export declare const NavMenuItem: import("react").MemoExoticComponent<({ item, level }: {
     item: NavItem;

package/dist/components/features/app-navigation/nav-menu/parts.d.ts

@@ -3,7 +3,9 @@ import type { ComponentProps } from 'react';
 import type { NavItem } from './types';
 import { SidebarMenuButton } from '../../../base/sidebar';
 export declare const NAV_STYLES: {
-    readonly menuButton: "rounded-xl h-8 font-normal text-xs transition-all px-2 py-1 data-[active=true]:bg-sidebar data-[active=true]:text-foreground data-[active=true]:text-sidebar-primary data-[active=true]:[&>svg]:text-primary hover:bg-sidebar hover:text-sidebar-primary hover:[&>svg]:text-sidebar-primary hover:bg-sidebar-accent data-[active=true]:bg-sidebar-accent hover:font-semibold data-[active=true]:hover:[&>svg]:text-sidebar-primary transition-colors duration-300 gap-2.5 text-foreground [&>svg]:text-icon-primary";
+    /** Side inset of every row. Drops back to px-2 so a 32px button fits the 48px icon rail. */
+    readonly rowInset: "px-3 group-data-[collapsible=icon]:px-2";
+    readonly menuButton: "rounded-xl h-8 font-normal text-xs transition-all px-3 py-1 data-[active=true]:bg-sidebar data-[active=true]:text-foreground data-[active=true]:text-sidebar-primary data-[active=true]:[&>svg]:text-primary hover:bg-sidebar hover:text-sidebar-primary hover:[&>svg]:text-sidebar-primary hover:bg-sidebar-accent data-[active=true]:bg-sidebar-accent hover:font-semibold data-[active=true]:hover:[&>svg]:text-sidebar-primary transition-colors duration-300 gap-2.5 text-foreground [&>svg]:text-icon-primary";
     readonly disabled: "pointer-events-none opacity-50";
     readonly icon: "duration-300 transition-all";
     readonly iconSmall: "size-4 duration-300 transition-all";

package/dist/index.mjs

@@ -41,9 +41,9 @@ import { t as Switch } from "./switch-BaR-Vna4.mjs";
 import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./table/index.mjs";
 import { Tabs, TabsContent, TabsLinkTrigger, TabsList, TabsTrigger } from "./tabs/index.mjs";
 import { t as Textarea } from "./textarea-DiSGxCBO.mjs";
-import { a as ListItem, c as Title, d as titleVariants, i as List, l as paragraphVariants, n as Code, o as Paragraph, r as Link, s as Text, t as Blockquote, u as textVariants } from "./typography-DNQXFq1I.mjs";
+import { a as ListItem, c as Title, d as titleVariants, i as List, l as paragraphVariants, n as Code, o as Paragraph, r as Link, s as Text, t as Blockquote, u as textVariants } from "./typography-q71iTG72.mjs";
 import { t as VisuallyHidden } from "./visuallyhidden-D7L_qs8b.mjs";
-import { a as hasActiveDescendant, i as findItemByHref, n as NavMenu, o as isNavItemActive, r as NavMenuItem, s as normalizePath, t as AppNavigation } from "./app-navigation-D52ikGN-.mjs";
+import { a as hasActiveDescendant, i as findItemByHref, n as NavMenu, o as isNavItemActive, r as NavMenuItem, s as normalizePath, t as AppNavigation } from "./app-navigation-DEqa2_TC.mjs";
 import { n as EASE, t as DURATION } from "./motion-DvGRWdsm.mjs";
 import { t as LoaderOverlay } from "./loader-overlay-DD94azZX.mjs";
 import { t as Autocomplete } from "./autocomplete-BxtzndxZ.mjs";

package/dist/typography/index.mjs

@@ -1,2 +1,2 @@
-import { a as ListItem, c as Title, d as titleVariants, i as List, l as paragraphVariants, n as Code, o as Paragraph, r as Link, s as Text, t as Blockquote, u as textVariants } from "../typography-DNQXFq1I.mjs";
+import { a as ListItem, c as Title, d as titleVariants, i as List, l as paragraphVariants, n as Code, o as Paragraph, r as Link, s as Text, t as Blockquote, u as textVariants } from "../typography-q71iTG72.mjs";
 export { Blockquote, Code, Link, List, ListItem, Paragraph, Text, Title, paragraphVariants, textVariants, titleVariants };

package/dist/{typography-DNQXFq1I.mjs → typography-q71iTG72.mjs}

@@ -12,7 +12,8 @@ const titleVariants = cva("font-semibold leading-tight tracking-tight", {
 			3: "text-2xl",
 			4: "text-xl",
 			5: "text-lg",
-			6: "text-base"
+			6: "text-base",
+			7: "text-sm"
 		},
 		weight: {
 			normal: "font-normal",
@@ -115,7 +116,7 @@ const paragraphVariants = cva("leading-relaxed", {
 	}
 });
 function Title({ className, level, weight, textColor, as, children, ...props }) {
-	const Component = as ?? `h${level ?? 4}`;
+	const Component = as ?? `h${Math.min(level ?? 4, 6)}`;
 	return React.createElement(Component, {
 		className: cn(titleVariants({
 			level,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@datum-cloud/datum-ui",
   "type": "module",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/datum-cloud/datum-ui"