@kuzenbo/core 0.0.2 → 0.0.4

package/dist/ui/navigation-list.js

@@ -0,0 +1,916 @@
+"use client";
+
+import { a as useComponentSize } from "../size-provider-18EvJgDT.js";
+import { Separator } from "./separator.js";
+import { Skeleton } from "./skeleton.js";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cn, tv } from "tailwind-variants";
+import { ArrowRight01Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { Collapsible } from "@base-ui/react/collapsible";
+
+//#region src/ui/navigation-list/navigation-list-context.tsx
+const NavigationListContext = createContext({
+	size: "md",
+	tone: "surface",
+	variant: "light"
+});
+const resolveCandidate = (fallback, contextValue, candidates) => {
+	for (const candidate of candidates) if (candidate !== void 0 && candidate !== null) return candidate;
+	return contextValue ?? fallback;
+};
+const useResolvedNavigationListTone = (...candidates) => {
+	const { tone } = useContext(NavigationListContext);
+	return resolveCandidate("surface", tone, candidates);
+};
+const useResolvedNavigationListVariant = (...candidates) => {
+	const { variant } = useContext(NavigationListContext);
+	return resolveCandidate("light", variant, candidates);
+};
+const useResolvedNavigationListSize = (...candidates) => {
+	const { size } = useContext(NavigationListContext);
+	return resolveCandidate("md", size, candidates);
+};
+
+//#endregion
+//#region src/ui/navigation-list/navigation-list-item-context.tsx
+const NavigationListItemContext = createContext({
+	collapsible: false,
+	disabled: false,
+	open: false,
+	size: void 0,
+	tone: void 0,
+	variant: void 0
+});
+const useNavigationListItemContext = () => useContext(NavigationListItemContext);
+
+//#endregion
+//#region src/ui/navigation-list/navigation-list-action.tsx
+const navigationListActionVariants = tv({
+	base: "absolute right-1 flex aspect-square cursor-pointer items-center justify-center rounded-md p-0 outline-hidden transition-transform group-data-[collapsible=true]/navigation-list-item:right-10 group-has-data-[slot=navigation-list-badge]/navigation-list-item:right-14 [&>svg]:shrink-0",
+	variants: {
+		size: {
+			xs: "top-0.5 w-4 [&>svg:not([class*='size-'])]:size-3",
+			sm: "top-1 w-5 [&>svg:not([class*='size-'])]:size-3.5",
+			md: "top-1.5 w-5 [&>svg:not([class*='size-'])]:size-4",
+			lg: "top-2 w-6 [&>svg:not([class*='size-'])]:size-4",
+			xl: "top-2.5 w-7 [&>svg:not([class*='size-'])]:size-5"
+		},
+		tone: {
+			surface: "text-muted-foreground ring-ring hover:bg-muted hover:text-foreground focus-visible:ring-2 peer-hover/navigation-list-link:text-foreground peer-data-active/navigation-list-link:text-foreground",
+			sidebar: "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/navigation-list-link:text-sidebar-accent-foreground peer-data-active/navigation-list-link:text-sidebar-accent-foreground"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		tone: "surface"
+	}
+});
+const NavigationListAction = ({ className, render, showOnHover = false, size, tone, ...props }) => {
+	const itemContext = useNavigationListItemContext();
+	const resolvedSize = useResolvedNavigationListSize(size, itemContext.size);
+	const resolvedTone = useResolvedNavigationListTone(tone, itemContext.tone);
+	return useRender({
+		defaultTagName: "button",
+		props: mergeProps({
+			className: cn(navigationListActionVariants({
+				size: resolvedSize,
+				tone: resolvedTone
+			}), itemContext.variant === "filled" && resolvedTone === "surface" && "peer-data-active/navigation-list-link:text-primary-foreground", itemContext.variant === "filled" && resolvedTone === "sidebar" && "peer-data-active/navigation-list-link:text-sidebar-primary-foreground", "peer-data-[size=xs]/navigation-list-link:top-0.5 peer-data-[size=sm]/navigation-list-link:top-1 peer-data-[size=md]/navigation-list-link:top-1.5 peer-data-[size=lg]/navigation-list-link:top-2 peer-data-[size=xl]/navigation-list-link:top-2.5", showOnHover && "group-focus-within/navigation-list-item:opacity-100 group-hover/navigation-list-item:opacity-100 peer-data-active/navigation-list-link:opacity-100 md:opacity-0", className),
+			type: render ? void 0 : "button"
+		}, props),
+		render,
+		state: {
+			size: resolvedSize,
+			slot: "navigation-list-action",
+			tone: resolvedTone
+		}
+	});
+};
+
+//#endregion
+//#region src/ui/navigation-list/navigation-list-badge.tsx
+const navigationListBadgeVariants = tv({
+	base: "pointer-events-none absolute right-1 flex items-center justify-center rounded-md px-1 font-medium tabular-nums select-none group-data-[collapsible=true]/navigation-list-item:right-8",
+	variants: {
+		size: {
+			xs: "top-0.5 h-4 min-w-4 text-[10px]",
+			sm: "top-1 h-5 min-w-5 text-[11px]",
+			md: "top-1.5 h-5 min-w-5 text-xs",
+			lg: "top-2 h-6 min-w-6 text-xs",
+			xl: "top-2.5 h-7 min-w-7 text-sm"
+		},
+		tone: {
+			surface: "text-muted-foreground peer-hover/navigation-list-link:text-foreground peer-data-active/navigation-list-link:text-foreground",
+			sidebar: "text-sidebar-foreground peer-hover/navigation-list-link:text-sidebar-accent-foreground peer-data-active/navigation-list-link:text-sidebar-accent-foreground"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		tone: "surface"
+	}
+});
+const NavigationListBadge = ({ className, size, tone, ...props }) => {
+	const itemContext = useNavigationListItemContext();
+	const resolvedSize = useResolvedNavigationListSize(size, itemContext.size);
+	const resolvedTone = useResolvedNavigationListTone(tone, itemContext.tone);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(navigationListBadgeVariants({
+			size: resolvedSize,
+			tone: resolvedTone
+		}), itemContext.variant === "filled" && resolvedTone === "surface" && "peer-data-active/navigation-list-link:text-primary-foreground", itemContext.variant === "filled" && resolvedTone === "sidebar" && "peer-data-active/navigation-list-link:text-sidebar-primary-foreground", className),
+		"data-size": resolvedSize,
+		"data-slot": "navigation-list-badge",
+		"data-tone": resolvedTone,
+		...props
+	});
+};
+
+//#endregion
+//#region src/ui/navigation-list/navigation-list-content.tsx
+const navigationListContentVariants = tv({
+	base: "flex min-w-0 list-none flex-col rounded-lg border",
+	variants: {
+		size: {
+			xs: "gap-0.5 p-1",
+			sm: "gap-1 p-1.5",
+			md: "gap-1 p-2",
+			lg: "gap-1.5 p-2.5",
+			xl: "gap-2 p-3"
+		},
+		tone: {
+			surface: "border-border bg-background text-foreground",
+			sidebar: "border-sidebar-border bg-sidebar text-sidebar-foreground"
+		},
+		variant: {
+			subtle: "",
+			light: "",
+			filled: ""
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		tone: "surface",
+		variant: "light"
+	}
+});
+const NavigationListContent = ({ className, size, tone, variant, ...props }) => {
+	const resolvedSize = useResolvedNavigationListSize(size);
+	const resolvedTone = useResolvedNavigationListTone(tone);
+	const resolvedVariant = useResolvedNavigationListVariant(variant);
+	return /* @__PURE__ */ jsx("ul", {
+		className: cn(navigationListContentVariants({
+			size: resolvedSize,
+			tone: resolvedTone,
+			variant: resolvedVariant
+		}), className),
+		"data-navigation-list": "content",
+		"data-size": resolvedSize,
+		"data-slot": "navigation-list-content",
+		"data-tone": resolvedTone,
+		"data-variant": resolvedVariant,
+		...props
+	});
+};
+
+//#endregion
+//#region src/ui/navigation-list/navigation-list-group.tsx
+const navigationListGroupVariants = tv({
+	base: "list-none space-y-1",
+	variants: {
+		size: {
+			xs: "",
+			sm: "",
+			md: "",
+			lg: "",
+			xl: ""
+		},
+		tone: {
+			surface: "",
+			sidebar: ""
+		},
+		variant: {
+			subtle: "",
+			light: "",
+			filled: ""
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		tone: "surface",
+		variant: "light"
+	}
+});
+const NavigationListGroup = ({ className, size, tone, variant, ...props }) => {
+	const resolvedSize = useResolvedNavigationListSize(size);
+	const resolvedTone = useResolvedNavigationListTone(tone);
+	const resolvedVariant = useResolvedNavigationListVariant(variant);
+	return /* @__PURE__ */ jsx("li", {
+		className: cn(navigationListGroupVariants({
+			size: resolvedSize,
+			tone: resolvedTone,
+			variant: resolvedVariant
+		}), className),
+		"data-size": resolvedSize,
+		"data-slot": "navigation-list-group",
+		"data-tone": resolvedTone,
+		"data-variant": resolvedVariant,
+		...props
+	});
+};
+
+//#endregion
+//#region src/ui/navigation-list/navigation-list-group-content.tsx
+const navigationListGroupContentVariants = tv({
+	base: "flex list-none flex-col",
+	variants: {
+		size: {
+			xs: "gap-0.5",
+			sm: "gap-0.5",
+			md: "gap-1",
+			lg: "gap-1",
+			xl: "gap-1.5"
+		},
+		tone: {
+			surface: "",
+			sidebar: ""
+		},
+		variant: {
+			subtle: "",
+			light: "",
+			filled: ""
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		tone: "surface",
+		variant: "light"
+	}
+});
+const NavigationListGroupContent = ({ className, size, tone, variant, ...props }) => {
+	const resolvedSize = useResolvedNavigationListSize(size);
+	const resolvedTone = useResolvedNavigationListTone(tone);
+	const resolvedVariant = useResolvedNavigationListVariant(variant);
+	return /* @__PURE__ */ jsx("ul", {
+		className: cn(navigationListGroupContentVariants({
+			size: resolvedSize,
+			tone: resolvedTone,
+			variant: resolvedVariant
+		}), className),
+		"data-size": resolvedSize,
+		"data-slot": "navigation-list-group-content",
+		"data-tone": resolvedTone,
+		"data-variant": resolvedVariant,
+		...props
+	});
+};
+
+//#endregion
+//#region src/ui/navigation-list/navigation-list-group-label.tsx
+const navigationListGroupLabelVariants = tv({
+	base: "flex items-center rounded-md px-2 font-medium uppercase tracking-wide",
+	variants: {
+		size: {
+			xs: "h-6 text-[10px]",
+			sm: "h-7 text-[10px]",
+			md: "h-8 text-[11px]",
+			lg: "h-9 text-xs",
+			xl: "h-10 text-xs"
+		},
+		tone: {
+			surface: "text-muted-foreground",
+			sidebar: "text-sidebar-foreground/70"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		tone: "surface"
+	}
+});
+const NavigationListGroupLabel = ({ className, render, size, tone, ...props }) => {
+	const resolvedSize = useResolvedNavigationListSize(size);
+	const resolvedTone = useResolvedNavigationListTone(tone);
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn(navigationListGroupLabelVariants({
+			size: resolvedSize,
+			tone: resolvedTone
+		}), className) }, props),
+		render,
+		state: {
+			slot: "navigation-list-group-label",
+			size: resolvedSize,
+			tone: resolvedTone
+		}
+	});
+};
+
+//#endregion
+//#region src/ui/navigation-list/navigation-list-item.tsx
+const navigationListItemVariants = tv({
+	base: "group/navigation-list-item relative list-none",
+	variants: {
+		size: {
+			xs: "",
+			sm: "",
+			md: "",
+			lg: "",
+			xl: ""
+		},
+		tone: {
+			surface: "",
+			sidebar: ""
+		},
+		variant: {
+			subtle: "",
+			light: "",
+			filled: ""
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		tone: "surface",
+		variant: "light"
+	}
+});
+const NavigationListItem = ({ className, collapsible = false, opened, defaultOpened = false, onOpenedChange, disabled = false, size, tone, variant, children, ...props }) => {
+	const [internalOpen, setInternalOpen] = useState(defaultOpened);
+	const isControlled = opened !== void 0;
+	const resolvedOpen = collapsible ? isControlled ? opened ?? false : internalOpen : false;
+	const handleOpenChange = useCallback((nextOpen) => {
+		if (!collapsible) return;
+		if (!isControlled) setInternalOpen(nextOpen);
+		onOpenedChange?.(nextOpen);
+	}, [
+		collapsible,
+		isControlled,
+		onOpenedChange
+	]);
+	const resolvedSize = useResolvedNavigationListSize(size);
+	const resolvedTone = useResolvedNavigationListTone(tone);
+	const resolvedVariant = useResolvedNavigationListVariant(variant);
+	const contextValue = useMemo(() => ({
+		collapsible,
+		disabled,
+		open: resolvedOpen,
+		size: resolvedSize,
+		tone: resolvedTone,
+		variant: resolvedVariant
+	}), [
+		collapsible,
+		disabled,
+		resolvedOpen,
+		resolvedSize,
+		resolvedTone,
+		resolvedVariant
+	]);
+	const itemProps = {
+		className: cn(navigationListItemVariants({
+			size: resolvedSize,
+			tone: resolvedTone,
+			variant: resolvedVariant
+		}), className),
+		"data-collapsible": collapsible ? "true" : "false",
+		"data-disabled": disabled ? "true" : void 0,
+		"data-open": resolvedOpen ? "true" : "false",
+		"data-size": resolvedSize,
+		"data-slot": "navigation-list-item",
+		"data-tone": resolvedTone,
+		"data-variant": resolvedVariant,
+		...props
+	};
+	return /* @__PURE__ */ jsx(NavigationListItemContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("li", {
+			...itemProps,
+			children: collapsible ? /* @__PURE__ */ jsx(Collapsible.Root, {
+				disabled,
+				onOpenChange: handleOpenChange,
+				open: resolvedOpen,
+				children
+			}) : children
+		})
+	});
+};
+
+//#endregion
+//#region src/ui/navigation-list/navigation-list-link.tsx
+const navigationListLinkVariants = tv({
+	base: "peer/navigation-list-link flex w-full cursor-pointer gap-2 overflow-hidden rounded-md text-left ring-offset-background outline-hidden transition-colors group-has-data-[slot=navigation-list-action]/navigation-list-item:pr-20 group-has-data-[slot=navigation-list-badge]/navigation-list-item:pr-20 focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50",
+	variants: {
+		size: {
+			xs: "min-h-6 px-1.5 text-xs [&_svg:not([class*='size-'])]:size-3",
+			sm: "min-h-7 px-2 text-xs [&_svg:not([class*='size-'])]:size-3.5",
+			md: "min-h-8 px-2 text-sm [&_svg:not([class*='size-'])]:size-4",
+			lg: "min-h-9 px-2.5 text-sm [&_svg:not([class*='size-'])]:size-4",
+			xl: "min-h-10 px-3 text-base [&_svg:not([class*='size-'])]:size-5"
+		},
+		tone: {
+			surface: "ring-ring",
+			sidebar: "ring-sidebar-ring"
+		},
+		variant: {
+			subtle: "",
+			light: "",
+			filled: ""
+		},
+		noWrap: {
+			true: "",
+			false: ""
+		},
+		hasDescription: {
+			true: "items-start py-1.5",
+			false: "items-center"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		tone: "surface",
+		variant: "light",
+		noWrap: false,
+		hasDescription: false
+	},
+	compoundVariants: [
+		{
+			tone: "surface",
+			variant: "subtle",
+			className: "hover:bg-muted/70 hover:text-foreground data-active:bg-muted/50 data-active:text-foreground data-active:font-medium"
+		},
+		{
+			tone: "surface",
+			variant: "light",
+			className: "hover:bg-muted hover:text-foreground data-active:bg-muted data-active:text-foreground data-active:font-medium"
+		},
+		{
+			tone: "surface",
+			variant: "filled",
+			className: "hover:bg-muted hover:text-foreground data-active:bg-primary data-active:text-primary-foreground data-active:font-medium"
+		},
+		{
+			tone: "sidebar",
+			variant: "subtle",
+			className: "hover:bg-sidebar-accent/70 hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent/60 data-active:text-sidebar-accent-foreground data-active:font-medium"
+		},
+		{
+			tone: "sidebar",
+			variant: "light",
+			className: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground data-active:font-medium"
+		},
+		{
+			tone: "sidebar",
+			variant: "filled",
+			className: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground data-active:bg-sidebar-primary data-active:text-sidebar-primary-foreground data-active:font-medium"
+		}
+	]
+});
+const navigationListLinkBodyVariants = tv({
+	base: "min-w-0 flex-1",
+	variants: { noWrap: {
+		true: "truncate",
+		false: ""
+	} },
+	defaultVariants: { noWrap: false }
+});
+const navigationListLinkLabelVariants = tv({
+	base: "block",
+	variants: { noWrap: {
+		true: "truncate",
+		false: ""
+	} },
+	defaultVariants: { noWrap: false }
+});
+const navigationListLinkDescriptionVariants = tv({
+	base: "mt-0.5 block text-xs",
+	variants: {
+		noWrap: {
+			true: "truncate",
+			false: ""
+		},
+		tone: {
+			surface: "text-muted-foreground",
+			sidebar: "text-sidebar-foreground/70"
+		}
+	},
+	defaultVariants: {
+		noWrap: false,
+		tone: "surface"
+	}
+});
+const navigationListDefaultChevron = /* @__PURE__ */ jsx(HugeiconsIcon, {
+	"aria-hidden": "true",
+	icon: ArrowRight01Icon,
+	strokeWidth: 2
+});
+const NavigationListLink = ({ className, render, href, active, label, description, leftSection, rightSection, noWrap = false, disableRightSectionRotation = false, size, tone, variant, disabled, onClick, onKeyDown, children, ...props }) => {
+	const itemContext = useNavigationListItemContext();
+	const resolvedSize = useResolvedNavigationListSize(size, itemContext.size);
+	const resolvedTone = useResolvedNavigationListTone(tone, itemContext.tone);
+	const resolvedVariant = useResolvedNavigationListVariant(variant, itemContext.variant);
+	const hasToggleBehavior = itemContext.collapsible;
+	const isLinkLike = !hasToggleBehavior && (href !== void 0 || render !== void 0);
+	const resolvedActive = Boolean(active || props["aria-current"] === "page");
+	const resolvedAriaCurrent = props["aria-current"] ?? (resolvedActive && isLinkLike ? "page" : void 0);
+	const resolvedDisabled = disabled ?? itemContext.disabled;
+	useEffect(() => {
+		if (process.env.NODE_ENV === "production" || !hasToggleBehavior) return;
+		if (href !== void 0) console.warn("[NavigationList.Link] `href` is ignored when used inside `NavigationList.Item collapsible`. Parent rows are disclosure buttons.");
+		if (render !== void 0) console.warn("[NavigationList.Link] `render` is ignored when used inside `NavigationList.Item collapsible`. Parent rows are disclosure buttons.");
+	}, [
+		hasToggleBehavior,
+		href,
+		render
+	]);
+	const usesDefaultChevron = rightSection === void 0 && hasToggleBehavior;
+	const renderedRightSection = usesDefaultChevron ? navigationListDefaultChevron : rightSection;
+	const hasRenderedRightSection = renderedRightSection !== null;
+	const handleClick = useCallback((event) => {
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		if (resolvedDisabled) event.preventDefault();
+	}, [onClick, resolvedDisabled]);
+	const composedContent = children ?? (label || description || leftSection || hasRenderedRightSection ? /* @__PURE__ */ jsxs(Fragment, { children: [
+		leftSection ? /* @__PURE__ */ jsx("span", {
+			className: "shrink-0",
+			"data-slot": "navigation-list-link-left-section",
+			children: leftSection
+		}) : null,
+		/* @__PURE__ */ jsxs("span", {
+			className: navigationListLinkBodyVariants({ noWrap }),
+			children: [label ? /* @__PURE__ */ jsx("span", {
+				className: navigationListLinkLabelVariants({ noWrap }),
+				"data-slot": "navigation-list-link-label",
+				children: label
+			}) : null, description ? /* @__PURE__ */ jsx("span", {
+				className: navigationListLinkDescriptionVariants({
+					noWrap,
+					tone: resolvedTone
+				}),
+				"data-slot": "navigation-list-link-description",
+				children: description
+			}) : null]
+		}),
+		hasRenderedRightSection ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": usesDefaultChevron ? "true" : void 0,
+			className: cn("ml-auto flex shrink-0 items-center justify-center", hasToggleBehavior && !disableRightSectionRotation && "data-[open=true]:rotate-90"),
+			"data-open": itemContext.open ? "true" : "false",
+			"data-slot": "navigation-list-link-right-section",
+			children: renderedRightSection
+		}) : null
+	] }) : null);
+	const state = {
+		active: resolvedActive,
+		collapsible: hasToggleBehavior,
+		disabled: resolvedDisabled,
+		open: itemContext.open,
+		size: resolvedSize,
+		slot: "navigation-list-link",
+		tone: resolvedTone,
+		variant: resolvedVariant
+	};
+	const resolvedClassName = typeof className === "function" ? className(state) : className;
+	const mergedClassName = cn(navigationListLinkVariants({
+		hasDescription: Boolean(description),
+		noWrap,
+		size: resolvedSize,
+		tone: resolvedTone,
+		variant: resolvedVariant
+	}), resolvedClassName);
+	const resolvedRender = render ?? (href ? (renderProps) => {
+		const { children: renderChildren, ...anchorProps } = renderProps;
+		return /* @__PURE__ */ jsx("a", {
+			...anchorProps,
+			href,
+			children: renderChildren
+		});
+	} : void 0);
+	const renderedLinkElement = useRender({
+		defaultTagName: "button",
+		props: mergeProps({
+			className: mergedClassName,
+			"aria-current": resolvedAriaCurrent,
+			"aria-disabled": resolvedDisabled ? "true" : void 0,
+			disabled: isLinkLike ? void 0 : resolvedDisabled,
+			onClick: handleClick,
+			onKeyDown,
+			type: isLinkLike ? void 0 : "button",
+			children: composedContent
+		}, props),
+		render: resolvedRender,
+		state
+	});
+	if (hasToggleBehavior) return /* @__PURE__ */ jsx(Collapsible.Trigger, {
+		"aria-disabled": resolvedDisabled ? "true" : void 0,
+		className: mergedClassName,
+		"data-active": resolvedActive ? "true" : void 0,
+		"data-size": resolvedSize,
+		"data-slot": "navigation-list-link",
+		"data-tone": resolvedTone,
+		"data-variant": resolvedVariant,
+		disabled: resolvedDisabled,
+		onClick,
+		onKeyDown,
+		type: "button",
+		children: composedContent
+	});
+	return renderedLinkElement;
+};
+
+//#endregion
+//#region src/ui/navigation-list/navigation-list-separator.tsx
+const NavigationListSeparator = ({ className, tone, ...props }) => {
+	const resolvedTone = useResolvedNavigationListTone(tone);
+	return /* @__PURE__ */ jsx(Separator, {
+		className: cn(resolvedTone === "sidebar" ? "bg-sidebar-border" : "bg-border", className),
+		"data-slot": "navigation-list-separator",
+		"data-tone": resolvedTone,
+		...props
+	});
+};
+
+//#endregion
+//#region src/ui/navigation-list/navigation-list-skeleton.tsx
+const navigationListSkeletonVariants = tv({
+	base: "flex items-center gap-2 rounded-md px-2",
+	variants: {
+		size: {
+			xs: "h-6",
+			sm: "h-7",
+			md: "h-8",
+			lg: "h-9",
+			xl: "h-10"
+		},
+		tone: {
+			surface: "",
+			sidebar: ""
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		tone: "surface"
+	}
+});
+const NavigationListSkeleton = ({ className, showIcon = false, size, tone, ...props }) => {
+	const itemContext = useNavigationListItemContext();
+	const resolvedSize = useResolvedNavigationListSize(size, itemContext.size);
+	const resolvedTone = useResolvedNavigationListTone(tone, itemContext.tone);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(navigationListSkeletonVariants({
+			size: resolvedSize,
+			tone: resolvedTone
+		}), className),
+		"data-size": resolvedSize,
+		"data-slot": "navigation-list-skeleton",
+		"data-tone": resolvedTone,
+		...props,
+		children: [showIcon ? /* @__PURE__ */ jsx(Skeleton, {
+			className: "size-4 rounded-md",
+			"data-slot": "navigation-list-skeleton-icon"
+		}) : null, /* @__PURE__ */ jsx(Skeleton, {
+			className: "h-4 max-w-(--navigation-list-skeleton-width) flex-1",
+			"data-slot": "navigation-list-skeleton-text",
+			style: { "--navigation-list-skeleton-width": "100%" }
+		})]
+	});
+};
+
+//#endregion
+//#region src/ui/navigation-list/navigation-list-sub.tsx
+const navigationListSubVariants = tv({
+	base: "mx-2 mt-1 flex min-w-0 list-none flex-col border-l overflow-hidden [&[hidden]:not([hidden='until-found'])]:hidden data-[open=false]:pointer-events-none data-[open=false]:mt-0 data-[open=false]:max-h-0 data-[open=false]:opacity-0 data-[open=false]:py-0 data-[open=false]:border-transparent data-[open=true]:max-h-[48rem] data-[open=true]:opacity-100",
+	variants: {
+		size: {
+			xs: "gap-0.5 px-1 py-0.5",
+			sm: "gap-0.5 px-1.5 py-0.5",
+			md: "gap-1 px-2 py-0.5",
+			lg: "gap-1 px-2.5 py-1",
+			xl: "gap-1.5 px-3 py-1"
+		},
+		tone: {
+			surface: "border-border",
+			sidebar: "border-sidebar-border"
+		},
+		variant: {
+			subtle: "",
+			light: "",
+			filled: ""
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		tone: "surface",
+		variant: "light"
+	}
+});
+const NavigationListSub = ({ className, keepMounted = true, size, tone, variant, ...props }) => {
+	const itemContext = useNavigationListItemContext();
+	const resolvedSize = useResolvedNavigationListSize(size, itemContext.size);
+	const resolvedTone = useResolvedNavigationListTone(tone, itemContext.tone);
+	const resolvedVariant = useResolvedNavigationListVariant(variant, itemContext.variant);
+	const resolvedClassName = cn(navigationListSubVariants({
+		size: resolvedSize,
+		tone: resolvedTone,
+		variant: resolvedVariant
+	}), className);
+	if (!itemContext.collapsible) return /* @__PURE__ */ jsx("ul", {
+		className: resolvedClassName,
+		"data-open": "true",
+		"data-size": resolvedSize,
+		"data-slot": "navigation-list-sub",
+		"data-tone": resolvedTone,
+		"data-variant": resolvedVariant,
+		...props
+	});
+	return /* @__PURE__ */ jsx(Collapsible.Panel, {
+		keepMounted,
+		children: /* @__PURE__ */ jsx("ul", {
+			className: resolvedClassName,
+			"data-open": itemContext.open ? "true" : "false",
+			"data-size": resolvedSize,
+			"data-slot": "navigation-list-sub",
+			"data-tone": resolvedTone,
+			"data-variant": resolvedVariant,
+			hidden: keepMounted && !itemContext.open,
+			...props
+		})
+	});
+};
+
+//#endregion
+//#region src/ui/navigation-list/navigation-list-sub-item.tsx
+const NavigationListSubItem = ({ className, ...props }) => /* @__PURE__ */ jsx("li", {
+	className: cn("group/navigation-list-sub-item relative list-none", className),
+	"data-slot": "navigation-list-sub-item",
+	...props
+});
+
+//#endregion
+//#region src/ui/navigation-list/navigation-list-sub-link.tsx
+const navigationListSubLinkVariants = tv({
+	base: "flex min-w-0 items-center gap-2 overflow-hidden rounded-md text-left outline-hidden transition-colors focus-visible:ring-2 [&>span:last-child]:truncate",
+	variants: {
+		size: {
+			xs: "h-6 px-1.5 text-xs [&_svg:not([class*='size-'])]:size-3",
+			sm: "h-7 px-2 text-xs [&_svg:not([class*='size-'])]:size-3.5",
+			md: "h-8 px-2 text-sm [&_svg:not([class*='size-'])]:size-4",
+			lg: "h-9 px-2.5 text-sm [&_svg:not([class*='size-'])]:size-4",
+			xl: "h-10 px-3 text-base [&_svg:not([class*='size-'])]:size-5"
+		},
+		tone: {
+			surface: "ring-ring",
+			sidebar: "ring-sidebar-ring"
+		},
+		variant: {
+			subtle: "",
+			light: "",
+			filled: ""
+		},
+		active: {
+			true: "font-medium",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		tone: "surface",
+		variant: "light",
+		active: false
+	},
+	compoundVariants: [
+		{
+			tone: "surface",
+			variant: "subtle",
+			className: "hover:bg-muted/70 hover:text-foreground data-active:bg-muted/50"
+		},
+		{
+			tone: "surface",
+			variant: "light",
+			className: "hover:bg-muted hover:text-foreground data-active:bg-muted"
+		},
+		{
+			tone: "surface",
+			variant: "filled",
+			className: "hover:bg-muted hover:text-foreground data-active:bg-primary data-active:text-primary-foreground"
+		},
+		{
+			tone: "sidebar",
+			variant: "subtle",
+			className: "hover:bg-sidebar-accent/70 hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent/60 data-active:text-sidebar-accent-foreground"
+		},
+		{
+			tone: "sidebar",
+			variant: "light",
+			className: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground"
+		},
+		{
+			tone: "sidebar",
+			variant: "filled",
+			className: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground data-active:bg-sidebar-primary data-active:text-sidebar-primary-foreground"
+		}
+	]
+});
+const NavigationListSubLink = ({ className, render, active, size, tone, variant, ...props }) => {
+	const itemContext = useNavigationListItemContext();
+	const resolvedSize = useResolvedNavigationListSize(size, itemContext.size);
+	const resolvedTone = useResolvedNavigationListTone(tone, itemContext.tone);
+	const resolvedVariant = useResolvedNavigationListVariant(variant, itemContext.variant);
+	const resolvedActive = active ?? props["aria-current"] === "page";
+	const resolvedAriaCurrent = props["aria-current"] ?? (resolvedActive ? "page" : void 0);
+	return useRender({
+		defaultTagName: "a",
+		props: mergeProps({
+			"aria-current": resolvedAriaCurrent,
+			className: cn(navigationListSubLinkVariants({
+				active: resolvedActive,
+				size: resolvedSize,
+				tone: resolvedTone,
+				variant: resolvedVariant
+			}), className)
+		}, props),
+		render,
+		state: {
+			active: resolvedActive,
+			size: resolvedSize,
+			slot: "navigation-list-sub-link",
+			tone: resolvedTone,
+			variant: resolvedVariant
+		}
+	});
+};
+
+//#endregion
+//#region src/ui/navigation-list/navigation-list.tsx
+const navigationListVariants = tv({
+	base: "flex min-w-0 flex-col",
+	variants: {
+		size: {
+			xs: "gap-1",
+			sm: "gap-1",
+			md: "gap-1.5",
+			lg: "gap-2",
+			xl: "gap-2.5"
+		},
+		tone: {
+			surface: "",
+			sidebar: ""
+		},
+		variant: {
+			subtle: "",
+			light: "",
+			filled: ""
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		tone: "surface",
+		variant: "light"
+	}
+});
+const NavigationList = ({ className, size: providedSize, tone = "surface", variant = "light", children, ...props }) => {
+	const size = useComponentSize(providedSize);
+	const resolvedClassName = typeof className === "function" ? className({
+		size,
+		slot: "navigation-list",
+		tone,
+		variant
+	}) : className;
+	return /* @__PURE__ */ jsx(NavigationListContext.Provider, {
+		value: {
+			size,
+			tone,
+			variant
+		},
+		children: /* @__PURE__ */ jsx("nav", {
+			className: cn(navigationListVariants({
+				size,
+				tone,
+				variant
+			}), resolvedClassName),
+			"data-size": size,
+			"data-slot": "navigation-list",
+			"data-tone": tone,
+			"data-variant": variant,
+			...props,
+			children
+		})
+	});
+};
+NavigationList.Action = NavigationListAction;
+NavigationList.Badge = NavigationListBadge;
+NavigationList.Content = NavigationListContent;
+NavigationList.Group = NavigationListGroup;
+NavigationList.GroupContent = NavigationListGroupContent;
+NavigationList.GroupLabel = NavigationListGroupLabel;
+NavigationList.Item = NavigationListItem;
+NavigationList.Link = NavigationListLink;
+NavigationList.Separator = NavigationListSeparator;
+NavigationList.Skeleton = NavigationListSkeleton;
+NavigationList.Sub = NavigationListSub;
+NavigationList.SubItem = NavigationListSubItem;
+NavigationList.SubLink = NavigationListSubLink;
+
+//#endregion
+export { NavigationList, NavigationListAction, NavigationListBadge, NavigationListContent, NavigationListGroup, NavigationListGroupContent, NavigationListGroupLabel, NavigationListItem, NavigationListLink, NavigationListSeparator, NavigationListSkeleton, NavigationListSub, NavigationListSubItem, NavigationListSubLink };
+//# sourceMappingURL=navigation-list.js.map