@ultraviolet/ui 3.10.1 → 3.11.0

package/dist/components/compositions/Navigation/components/Item.js

@@ -0,0 +1,200 @@
+'use client';
+import { __name } from "../../../../_virtual/_rolldown/runtime.js";
+import { Stack } from "../../../Stack/index.js";
+import { Tooltip } from "../../../Tooltip/index.js";
+import { useNavigation } from "../NavigationProvider.js";
+import { navigationItemAnimatedIcon, navigationItemContainer, navigationItemContainerAnimated, navigationItemMenuStack } from "./items.css.js";
+import { ItemContext } from "./ItemProvider.js";
+import { ItemExpanded } from "./ItemExpanded.js";
+import { ItemMenu, ItemMenuItem } from "./ItemMenu.js";
+import { Children, isValidElement, memo, useContext, useEffect, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@ultraviolet/utils";
+import { OpenInNewIcon } from "@ultraviolet/icons/OpenInNewIcon";
+
+//#region src/components/compositions/Navigation/components/Item.tsx
+const onDragStopTrigger = (event) => {
+	const element = event.currentTarget;
+	element.style.opacity = "1";
+};
+const Item = memo(({ children, categoryIcon, label, labelDescription, subLabel, badgeText, badgeSentiment, href, target, rel, onToggle, onClickPinUnpin, toggle, active, noPinButton, type = "default", as, disabled, noExpand = false, index, id, "data-testid": dataTestId, style, alwaysVisible }) => {
+	const context = useNavigation();
+	if (!context) throw new Error("Navigation.Item can only be used inside a NavigationProvider.");
+	const hasParents = !!useContext(ItemContext);
+	const { expanded, locales, pinnedFeature, pinnedItems, pinLimit, animation, registerItem, shouldAnimate, animationType, showHide } = context;
+	const makeRegisterRef = useRef(null);
+	useEffect(() => {
+		makeRegisterRef.current = () => registerItem({ [id]: {
+			active,
+			label,
+			onClickPinUnpin,
+			onToggle
+		} });
+	}, [
+		active,
+		id,
+		label,
+		onClickPinUnpin,
+		registerItem,
+		onToggle
+	]);
+	useEffect(() => {
+		if (type !== "pinnedGroup" && pinnedFeature) {
+			var _makeRegisterRef$curr;
+			(_makeRegisterRef$curr = makeRegisterRef.current) === null || _makeRegisterRef$curr === void 0 || _makeRegisterRef$curr.call(makeRegisterRef);
+		}
+	}, [
+		type,
+		pinnedFeature,
+		active,
+		id,
+		label,
+		registerItem
+	]);
+	const hasHrefAndNoChildren = href && !children;
+	const hasPinnedFeatureAndNoChildren = pinnedFeature && !children && !noPinButton;
+	const isItemPinned = pinnedItems.includes(id);
+	const shouldShowPinnedButton = useMemo(() => {
+		if (href || disabled) return false;
+		if (hasPinnedFeatureAndNoChildren && type !== "default") return true;
+		if (hasPinnedFeatureAndNoChildren) return true;
+		return false;
+	}, [
+		disabled,
+		hasPinnedFeatureAndNoChildren,
+		href,
+		type
+	]);
+	const hasActiveChildren = useMemo(() => {
+		if (!children) return false;
+		return Children.map(children, (child) => {
+			if (isValidElement(child)) {
+				if ("to" in child.props) {
+					var _child$props$children;
+					return (_child$props$children = child.props.children) === null || _child$props$children === void 0 ? void 0 : _child$props$children.props.active;
+				}
+				return child.props.active;
+			}
+			return null;
+		}).includes(true);
+	}, [children]);
+	const isPinDisabled = pinnedItems.length >= pinLimit;
+	const containerTag = useMemo(() => {
+		if (as) return as;
+		if (hasHrefAndNoChildren) return "a";
+		if (noExpand || shouldShowPinnedButton) return "div";
+		return "button";
+	}, [
+		as,
+		hasHrefAndNoChildren,
+		noExpand,
+		shouldShowPinnedButton
+	]);
+	const pinTooltipLocale = useMemo(() => {
+		if (isPinDisabled) return locales["navigation.pin.limit"];
+		if (isItemPinned) return locales["navigation.unpin.tooltip"];
+		return locales["navigation.pin.tooltip"];
+	}, [
+		isItemPinned,
+		isPinDisabled,
+		locales
+	]);
+	if (!alwaysVisible && showHide === "hide") return null;
+	const computedAnimation = animation === "collapse" ? "collapse" : "expand";
+	if (expanded || !expanded && animation === "expand") return /* @__PURE__ */ jsx(ItemExpanded, {
+		active,
+		badgeSentiment,
+		badgeText,
+		categoryIcon,
+		containerTag,
+		dataTestId,
+		disabled,
+		hasActiveChildren,
+		hasPinnedFeatureAndNoChildren,
+		href,
+		id,
+		index,
+		isItemPinned,
+		isPinDisabled,
+		label,
+		labelDescription,
+		noExpand,
+		onClickPinUnpin,
+		onDragStopTrigger,
+		onToggle,
+		pinTooltipLocale,
+		rel,
+		shouldShowPinnedButton,
+		style,
+		subLabel,
+		target,
+		toggle,
+		type,
+		children
+	});
+	if (categoryIcon || Children.count(children) > 0 && !hasParents) return /* @__PURE__ */ jsx(ItemMenu, {
+		active,
+		categoryIcon,
+		hasActiveChildren,
+		label,
+		style,
+		children
+	});
+	if (hasParents) return /* @__PURE__ */ jsx(ItemMenuItem, {
+		active,
+		badgeSentiment,
+		badgeText,
+		disabled,
+		hasActiveChildren,
+		hasHrefAndNoChildren,
+		href,
+		id,
+		isItemPinned,
+		isPinDisabled,
+		label,
+		labelDescription,
+		noExpand,
+		onClickPinUnpin,
+		onToggle,
+		pinTooltipLocale,
+		rel,
+		shouldShowPinnedButton,
+		style,
+		target
+	});
+	if (!hasParents && href) return /* @__PURE__ */ jsx(Tooltip, {
+		placement: "right",
+		text: label,
+		children: /* @__PURE__ */ jsx(Stack, {
+			alignItems: "flex-start",
+			className: navigationItemMenuStack,
+			gap: 1,
+			justifyContent: "flex-start",
+			children: /* @__PURE__ */ jsx(Stack, {
+				alignItems: "center",
+				as: containerTag,
+				className: cn(navigationItemContainer({ disabled }), navigationItemContainerAnimated({
+					animated: shouldAnimate && animationType === "complex",
+					animation: computedAnimation
+				})),
+				gap: 1,
+				href,
+				justifyContent: "center",
+				rel,
+				target,
+				children: /* @__PURE__ */ jsx(OpenInNewIcon, {
+					className: navigationItemAnimatedIcon({
+						animated: shouldAnimate && animationType === "complex",
+						animation: computedAnimation
+					}),
+					prominence: "weak",
+					sentiment: "neutral"
+				})
+			})
+		})
+	});
+	return null;
+});
+
+//#endregion
+export { Item };

package/dist/components/compositions/Navigation/components/ItemExpanded.d.ts

@@ -0,0 +1,3 @@
+import type { ItemExpandedType } from './ComponentsTypes';
+export declare const ItemExpanded: ({ categoryIcon, containerTag, disabled, active, noExpand, subLabel, shouldShowPinnedButton, children, dataTestId, type, href, rel, id, style, target, label, labelDescription, hasPinnedFeatureAndNoChildren, badgeText, badgeSentiment, isItemPinned, pinTooltipLocale, onClickPinUnpin, isPinDisabled, onToggle, index, onDragStopTrigger, toggle, hasActiveChildren, }: ItemExpandedType) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ItemExpanded.d.ts.map

package/dist/components/compositions/Navigation/components/ItemExpanded.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemExpanded.d.ts","sourceRoot":"","sources":["../../../../../src/components/compositions/Navigation/components/ItemExpanded.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAsLzD,eAAO,MAAM,YAAY,0aA4MxB,CAAA"}

package/dist/components/compositions/Navigation/components/ItemExpanded.js

@@ -0,0 +1,214 @@
+import { __name } from "../../../../_virtual/_rolldown/runtime.js";
+import { Stack } from "../../../Stack/index.js";
+import { Text } from "../../../Text/index.js";
+import { useNavigation } from "../NavigationProvider.js";
+import { Expandable } from "../../../Expandable/index.js";
+import { navigationItemCategoryIcon, navigationItemContainer, navigationItemContainerAnimated, navigationItemDragIcon, navigationItemPadded, navigationItemPaddingStack, navigationItemStackIcon, navigationItemVariants, navigationItemWrapText } from "./items.css.js";
+import { ItemBadge, ItemPinnedButton } from "./ItemFragments.js";
+import { ItemContext, ItemProvider } from "./ItemProvider.js";
+import { useCallback, useContext, useMemo, useReducer } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@ultraviolet/utils";
+import { OpenInNewIcon } from "@ultraviolet/icons/OpenInNewIcon";
+import { ArrowDownIcon } from "@ultraviolet/icons/ArrowDownIcon";
+import { ArrowRightIcon } from "@ultraviolet/icons/ArrowRightIcon";
+import { DragIcon } from "@ultraviolet/icons/DragIcon";
+
+//#region src/components/compositions/Navigation/components/ItemExpanded.tsx
+const ItemChildren = ({ noExpand, type, children, internalExpanded }) => {
+	const context = useNavigation();
+	if (!context) throw new Error("Navigation.Item can only be used inside a NavigationProvider.");
+	const { animation, animationType, shouldAnimate } = context;
+	return /* @__PURE__ */ jsx(Fragment$1, { children: noExpand ? /* @__PURE__ */ jsx(ItemProvider, { children: /* @__PURE__ */ jsx(Stack, {
+		className: noExpand || type === "pinnedGroup" ? "" : navigationItemPaddingStack({ hide: shouldAnimate && animationType === "complex" && animation === "expand" }),
+		width: animation ? "100%" : void 0,
+		children
+	}) }) : /* @__PURE__ */ jsx(ItemProvider, { children: /* @__PURE__ */ jsx(Expandable, {
+		animationDuration: 0,
+		opened: internalExpanded,
+		children: /* @__PURE__ */ jsx(Stack, {
+			className: noExpand || type === "pinnedGroup" ? "" : navigationItemPaddingStack({ hide: shouldAnimate && animationType === "complex" && animation === "expand" }),
+			width: animation ? "100%" : void 0,
+			children
+		})
+	}) }) });
+};
+const ItemContent = ({ disabled, active, categoryIcon, type, label, hasActiveChildren, labelDescription, noExpand, subLabel }) => {
+	const context = useNavigation();
+	if (!context) throw new Error("Navigation.Item can only be used inside a NavigationProvider.");
+	const { expanded, animation } = context;
+	const hasParents = !!useContext(ItemContext);
+	return /* @__PURE__ */ jsxs(Stack, {
+		alignItems: categoryIcon ? "flex-start" : "center",
+		direction: "row",
+		gap: 1,
+		justifyContent: "center",
+		children: [
+			categoryIcon ? /* @__PURE__ */ jsx(Stack, {
+				alignItems: "center",
+				className: navigationItemCategoryIcon,
+				justifyContent: "center",
+				children: categoryIcon
+			}) : null,
+			type === "pinned" && expanded ? /* @__PURE__ */ jsx(DragIcon, {
+				className: navigationItemDragIcon,
+				disabled,
+				prominence: "default",
+				sentiment: "neutral",
+				size: "small"
+			}) : null,
+			/* @__PURE__ */ jsxs(Stack, { children: [animation ? null : /* @__PURE__ */ jsxs(Text, {
+				as: "span",
+				className: navigationItemWrapText({
+					disabled,
+					weak: hasActiveChildren && !noExpand && !disabled && !!active
+				}),
+				"data-animation": animation,
+				disabled,
+				prominence: (categoryIcon || !hasParents) && !active ? "strong" : "default",
+				sentiment: active ? "primary" : "neutral",
+				variant: "bodySmallStrong",
+				whiteSpace: "pre-wrap",
+				children: [label, labelDescription ? /* @__PURE__ */ jsx("span", {
+					className: navigationItemPadded,
+					children: labelDescription
+				}) : null]
+			}), subLabel && !animation ? /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				className: navigationItemWrapText({
+					disabled,
+					weak: hasActiveChildren && !noExpand && !disabled && !!active
+				}),
+				"data-animation": animation,
+				disabled,
+				prominence: "weak",
+				sentiment: "neutral",
+				variant: "caption",
+				whiteSpace: "pre-wrap",
+				children: subLabel
+			}) : null] })
+		]
+	});
+};
+const ItemExpanded = ({ categoryIcon, containerTag, disabled, active, noExpand, subLabel, shouldShowPinnedButton, children, dataTestId, type, href, rel, id, style, target, label, labelDescription, hasPinnedFeatureAndNoChildren, badgeText, badgeSentiment, isItemPinned, pinTooltipLocale, onClickPinUnpin, isPinDisabled, onToggle, index, onDragStopTrigger, toggle, hasActiveChildren }) => {
+	const context = useNavigation();
+	const [internalExpanded, onToggleExpand] = useReducer((prevState) => !prevState, Boolean(toggle));
+	if (!context) throw new Error("Navigation.Item can only be used inside a NavigationProvider.");
+	const { expanded, animation, shouldAnimate, animationType, pinnedFeature } = context;
+	const showDraggableIcon = !noExpand && pinnedFeature && shouldShowPinnedButton && !disabled;
+	const showPinIcon = !(noExpand || disabled) && shouldShowPinnedButton && pinnedFeature;
+	const shouldHaveWeakText = !!children && !active && shouldShowPinnedButton && !disabled;
+	const hasHrefAndNoChildren = href && !children;
+	const triggerToggle = useCallback(() => {
+		onToggleExpand();
+		onToggle === null || onToggle === void 0 || onToggle(internalExpanded);
+	}, [internalExpanded, onToggle]);
+	const ArrowIcon = useMemo(() => internalExpanded ? ArrowDownIcon : ArrowRightIcon, [internalExpanded]);
+	const onDragStart = useCallback((event) => {
+		if (expanded) {
+			event.dataTransfer.setData("text/plain", JSON.stringify({
+				index,
+				label
+			}));
+			const element = event.currentTarget;
+			element.style.opacity = "0.5";
+		}
+	}, [
+		expanded,
+		index,
+		label
+	]);
+	const onDragEnd = useCallback((event) => expanded ? onDragStopTrigger(event) : void 0, [expanded, onDragStopTrigger]);
+	const ariaExpanded = useMemo(() => {
+		if (hasHrefAndNoChildren && internalExpanded) return true;
+		if (hasHrefAndNoChildren && !internalExpanded) return false;
+	}, [hasHrefAndNoChildren, internalExpanded]);
+	const computedAnimation = animation === "collapse" ? "collapse" : "expand";
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Stack, {
+		alignItems: categoryIcon ? "flex-start" : "center",
+		"aria-expanded": ariaExpanded,
+		as: containerTag,
+		className: cn(navigationItemContainer({
+			disabled,
+			hasActive: hasActiveChildren,
+			isActive: !!active,
+			noExpand,
+			subLabel: !!subLabel
+		}), navigationItemContainerAnimated({
+			animated: shouldAnimate && animationType === "complex",
+			animation: computedAnimation
+		}), navigationItemVariants({
+			shouldHaveWeakText,
+			showDraggableIcon,
+			showPinIcon
+		})),
+		"data-testid": dataTestId,
+		direction: "row",
+		disabled: containerTag === "button" ? disabled : void 0,
+		draggable: type === "pinned" && expanded,
+		gap: 1,
+		href,
+		id,
+		justifyContent: "space-between",
+		onClick: triggerToggle,
+		onDragEnd,
+		onDragStart,
+		rel,
+		style,
+		target,
+		children: [/* @__PURE__ */ jsx(ItemContent, {
+			active,
+			categoryIcon,
+			disabled,
+			hasActiveChildren,
+			label,
+			labelDescription,
+			noExpand,
+			subLabel,
+			type
+		}), /* @__PURE__ */ jsxs(Stack, {
+			alignItems: "center",
+			direction: "row",
+			gap: href ? 1 : void 0,
+			children: [
+				badgeText || hasPinnedFeatureAndNoChildren ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ItemBadge, {
+					animation: !!animation,
+					badgeSentiment,
+					badgeText,
+					disabled
+				}), /* @__PURE__ */ jsx(ItemPinnedButton, {
+					active,
+					id,
+					isItemPinned,
+					isPinDisabled,
+					onClickPinUnpin,
+					pinTooltipLocale,
+					shouldShowPinnedButton
+				})] }) : null,
+				hasHrefAndNoChildren && target === "_blank" && !animation ? /* @__PURE__ */ jsx(OpenInNewIcon, {
+					disabled,
+					prominence: "default",
+					sentiment: "neutral"
+				}) : null,
+				children && !animation && !noExpand ? /* @__PURE__ */ jsx(Stack, {
+					alignItems: "center",
+					className: navigationItemStackIcon,
+					direction: "row",
+					gap: 1,
+					children: /* @__PURE__ */ jsx(ArrowIcon, {
+						prominence: "weak",
+						sentiment: "neutral"
+					})
+				}) : null
+			]
+		})]
+	}), children ? /* @__PURE__ */ jsx(ItemChildren, {
+		internalExpanded,
+		noExpand,
+		type,
+		children
+	}) : null] });
+};
+
+//#endregion
+export { ItemExpanded };

package/dist/components/compositions/Navigation/components/ItemFragments.d.ts

@@ -0,0 +1,6 @@
+import type { ItemExpandedType } from './ComponentsTypes';
+export declare const ItemBadge: ({ badgeText, animation, disabled, badgeSentiment, }: Pick<ItemExpandedType, "badgeSentiment" | "badgeText" | "disabled"> & {
+    animation: boolean;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export declare const ItemPinnedButton: ({ shouldShowPinnedButton, isItemPinned, pinTooltipLocale, isPinDisabled, id, active, onClickPinUnpin, }: Pick<ItemExpandedType, "active" | "id" | "isItemPinned" | "isPinDisabled" | "onClickPinUnpin" | "pinTooltipLocale" | "shouldShowPinnedButton">) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ItemFragments.d.ts.map

package/dist/components/compositions/Navigation/components/ItemFragments.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemFragments.d.ts","sourceRoot":"","sources":["../../../../../src/components/compositions/Navigation/components/ItemFragments.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAA;AAQzD,eAAO,MAAM,SAAS;;oDAkBZ,CAAA;AAEV,eAAO,MAAM,gBAAgB,6SA4E5B,CAAA"}

package/dist/components/compositions/Navigation/components/ItemFragments.js

@@ -0,0 +1,63 @@
+import { __name } from "../../../../_virtual/_rolldown/runtime.js";
+import { Tooltip } from "../../../Tooltip/index.js";
+import { useNavigation } from "../NavigationProvider.js";
+import { Badge } from "../../../Badge/index.js";
+import { navigationItemBadge, navigationItemPinIcon, navigationItemPinnedButton, navigationItemRelative } from "./items.css.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { PinOutlineIcon } from "@ultraviolet/icons/PinOutlineIcon";
+import { UnpinIcon } from "@ultraviolet/icons/UnpinIcon";
+
+//#region src/components/compositions/Navigation/components/ItemFragments.tsx
+const ItemBadge = ({ badgeText, animation, disabled, badgeSentiment }) => badgeText && !animation ? /* @__PURE__ */ jsx(Badge, {
+	className: navigationItemBadge,
+	disabled,
+	prominence: "strong",
+	sentiment: badgeSentiment,
+	size: "small",
+	children: badgeText
+}) : null;
+const ItemPinnedButton = ({ shouldShowPinnedButton, isItemPinned, pinTooltipLocale, isPinDisabled, id, active, onClickPinUnpin }) => {
+	const context = useNavigation();
+	if (!context) throw new Error("Navigation.Item can only be used inside a NavigationProvider.");
+	const { locales, pinItem, unpinItem, pinnedItems, pinLimit } = context;
+	const PinUnpinIcon = useMemo(() => isItemPinned ? UnpinIcon : PinOutlineIcon, [isItemPinned]);
+	return shouldShowPinnedButton ? /* @__PURE__ */ jsx(Tooltip, {
+		placement: "right",
+		tabIndex: -1,
+		text: isItemPinned ? locales["navigation.unpin.tooltip"] : pinTooltipLocale,
+		children: /* @__PURE__ */ jsx("div", {
+			className: navigationItemRelative,
+			children: /* @__PURE__ */ jsx("button", {
+				"aria-disabled": isItemPinned ? false : isPinDisabled,
+				"aria-label": isItemPinned ? "unpin" : "pin",
+				className: navigationItemPinnedButton,
+				onClick: (event) => {
+					if (pinnedItems.length < pinLimit || isItemPinned) {
+						event.preventDefault();
+						event.stopPropagation();
+						let newValue;
+						if (isItemPinned) newValue = unpinItem(id);
+						else newValue = pinItem(id);
+						onClickPinUnpin === null || onClickPinUnpin === void 0 || onClickPinUnpin({
+							id,
+							state: isItemPinned ? "unpin" : "pin",
+							totalPinned: newValue
+						});
+					}
+				},
+				onKeyDown: () => {},
+				type: "button",
+				children: /* @__PURE__ */ jsx(PinUnpinIcon, {
+					className: navigationItemPinIcon[active ? "active" : "inactive"],
+					disabled: isItemPinned ? false : isPinDisabled,
+					sentiment: active ? "primary" : "neutral",
+					size: "medium"
+				})
+			})
+		})
+	}) : null;
+};
+
+//#endregion
+export { ItemBadge, ItemPinnedButton };

package/dist/components/compositions/Navigation/components/ItemMenu.d.ts

@@ -0,0 +1,4 @@
+import type { ItemMenuItemType, ItemMenuType } from './ComponentsTypes';
+export declare const ItemMenu: ({ style, children, label, categoryIcon, active, hasActiveChildren, }: ItemMenuType) => import("react/jsx-runtime").JSX.Element;
+export declare const ItemMenuItem: ({ active, shouldShowPinnedButton, disabled, href, onToggle, rel, style, target, hasActiveChildren, noExpand, labelDescription, label, badgeText, badgeSentiment, hasHrefAndNoChildren, pinTooltipLocale, isItemPinned, isPinDisabled, onClickPinUnpin, id, }: ItemMenuItemType) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ItemMenu.d.ts.map

package/dist/components/compositions/Navigation/components/ItemMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/compositions/Navigation/components/ItemMenu.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAavE,eAAO,MAAM,QAAQ,iIAmEpB,CAAA;AAED,eAAO,MAAM,YAAY,6TAyGxB,CAAA"}

package/dist/components/compositions/Navigation/components/ItemMenu.js

@@ -0,0 +1,135 @@
+import { __name } from "../../../../_virtual/_rolldown/runtime.js";
+import { Stack } from "../../../Stack/index.js";
+import { Tooltip } from "../../../Tooltip/index.js";
+import { Text } from "../../../Text/index.js";
+import { useNavigation } from "../NavigationProvider.js";
+import { navigationItemAnimatedIcon, navigationItemMenu, navigationItemMenuContainer, navigationItemMenuPinned, navigationItemMenuStack, navigationItemPadded, navigationItemWrapText } from "./items.css.js";
+import { ItemBadge, ItemPinnedButton } from "./ItemFragments.js";
+import { ItemProvider } from "./ItemProvider.js";
+import { Button } from "../../../Button/index.js";
+import { Menu } from "../../../Menu/index.js";
+import { Children } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@ultraviolet/utils";
+import { OpenInNewIcon } from "@ultraviolet/icons/OpenInNewIcon";
+import { OrganizationDashboardCategoryIcon } from "@ultraviolet/icons/category/OrganizationDashboardCategoryIcon";
+
+//#region src/components/compositions/Navigation/components/ItemMenu.tsx
+const ItemMenu = ({ style, children, label, categoryIcon, active, hasActiveChildren }) => /* @__PURE__ */ jsx(Stack, {
+	alignItems: "flex-start",
+	className: navigationItemMenuStack,
+	gap: 1,
+	justifyContent: "flex-start",
+	style,
+	children: Children.count(children) > 0 ? /* @__PURE__ */ jsx(Menu, {
+		className: navigationItemMenuContainer,
+		disclosure: /* @__PURE__ */ jsx(Button, {
+			"aria-label": label,
+			sentiment: "neutral",
+			size: "small",
+			variant: hasActiveChildren ? "filled" : "ghost",
+			children: categoryIcon ? /* @__PURE__ */ jsx(Stack, {
+				alignItems: "center",
+				direction: "row",
+				gap: 1,
+				justifyContent: "center",
+				children: categoryIcon
+			}) : null
+		}),
+		dynamicDomRendering: false,
+		placement: "right",
+		triggerMethod: "hover",
+		children: /* @__PURE__ */ jsx(ItemProvider, { children })
+	}) : /* @__PURE__ */ jsx(Tooltip, {
+		placement: "right",
+		tabIndex: -1,
+		text: label,
+		children: /* @__PURE__ */ jsx(Button, {
+			"aria-label": label,
+			sentiment: "neutral",
+			size: "small",
+			variant: active ? "filled" : "ghost",
+			children: /* @__PURE__ */ jsx(Stack, {
+				alignItems: "center",
+				direction: "row",
+				gap: 1,
+				justifyContent: "center",
+				children: categoryIcon !== null && categoryIcon !== void 0 ? categoryIcon : /* @__PURE__ */ jsx(OrganizationDashboardCategoryIcon, { variant: active ? "primary" : "neutral" })
+			})
+		})
+	})
+});
+const ItemMenuItem = ({ active, shouldShowPinnedButton, disabled, href, onToggle, rel, style, target, hasActiveChildren, noExpand, labelDescription, label, badgeText, badgeSentiment, hasHrefAndNoChildren, pinTooltipLocale, isItemPinned, isPinDisabled, onClickPinUnpin, id }) => {
+	const context = useNavigation();
+	if (!context) throw new Error("Navigation.Item can only be used inside a NavigationProvider.");
+	const { pinnedFeature, animation, shouldAnimate, animationType } = context;
+	const computedAnimation = animation === "collapse" ? "collapse" : "expand";
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		active,
+		borderless: true,
+		className: cn(navigationItemMenu, pinnedFeature && shouldShowPinnedButton ? navigationItemMenuPinned : ""),
+		disabled,
+		href,
+		onClick: () => onToggle === null || onToggle === void 0 ? void 0 : onToggle(!!active),
+		rel,
+		sentiment: active ? "primary" : "neutral",
+		style,
+		target,
+		children: /* @__PURE__ */ jsxs(Stack, {
+			alignItems: "center",
+			direction: "row",
+			flex: 1,
+			gap: 1,
+			justifyContent: "space-between",
+			width: "100%",
+			children: [
+				animation ? null : /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					className: navigationItemWrapText({
+						disabled,
+						weak: hasActiveChildren && !noExpand && !disabled && !!active
+					}),
+					variant: "bodySmall",
+					whiteSpace: "pre-wrap",
+					children: label
+				}),
+				labelDescription ? /* @__PURE__ */ jsx("span", {
+					className: navigationItemPadded,
+					children: labelDescription
+				}) : null,
+				/* @__PURE__ */ jsxs(Stack, {
+					direction: "row",
+					children: [
+						/* @__PURE__ */ jsx(ItemBadge, {
+							animation: !!animation,
+							badgeSentiment,
+							badgeText,
+							disabled
+						}),
+						hasHrefAndNoChildren && target === "_blank" ? /* @__PURE__ */ jsx(OpenInNewIcon, {
+							className: navigationItemAnimatedIcon({
+								animated: shouldAnimate && animationType === "complex",
+								animation: computedAnimation
+							}),
+							disabled,
+							prominence: "weak",
+							sentiment: "neutral"
+						}) : null,
+						/* @__PURE__ */ jsx(ItemPinnedButton, {
+							active,
+							id,
+							isItemPinned,
+							isPinDisabled,
+							onClickPinUnpin,
+							pinTooltipLocale,
+							shouldShowPinnedButton
+						})
+					]
+				})
+			]
+		})
+	});
+};
+
+//#endregion
+export { ItemMenu, ItemMenuItem };

package/dist/components/compositions/Navigation/components/ItemProvider.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export declare const ItemContext: import("react").Context<boolean>;
+type ItemProviderProps = {
+    children: ReactNode;
+};
+export declare const ItemProvider: ({ children }: ItemProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ItemProvider.d.ts.map

package/dist/components/compositions/Navigation/components/ItemProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemProvider.d.ts","sourceRoot":"","sources":["../../../../../src/components/compositions/Navigation/components/ItemProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,eAAO,MAAM,WAAW,kCAAuB,CAAA;AAE/C,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,YAAY,8EAIxB,CAAA"}

package/dist/components/compositions/Navigation/components/ItemProvider.js

@@ -0,0 +1,17 @@
+'use client';
+import { __name } from "../../../../_virtual/_rolldown/runtime.js";
+import { createContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/compositions/Navigation/components/ItemProvider.tsx
+const ItemContext = createContext(false);
+const ItemProvider = ({ children }) => {
+	const value = useMemo(() => true, []);
+	return /* @__PURE__ */ jsx(ItemContext.Provider, {
+		value,
+		children
+	});
+};
+
+//#endregion
+export { ItemContext, ItemProvider };