@ultraviolet/ui 3.12.3 → 3.13.1

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

@@ -0,0 +1,39 @@
+import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../../../../components/Stack/index.js";
+import { init_NavigationProvider, useNavigation } from "../../NavigationProvider.js";
+import { init_styles_css, navigationStyle } from "../../styles.css.js";
+import { ItemProvider, init_ItemProvider } from "./ItemProvider.js";
+import { Expandable, init_Expandable } from "../../../../components/Expandable/index.js";
+import { Fragment, jsx } from "react/jsx-runtime";
+
+//#region src/compositions/Navigation/components/Item/Children.tsx
+var ItemChildren;
+var init_Children = __esmMin(() => {
+	init_Expandable();
+	init_Stack();
+	init_NavigationProvider();
+	init_styles_css();
+	init_ItemProvider();
+	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, { children: noExpand ? /* @__PURE__ */ jsx(ItemProvider, { children: /* @__PURE__ */ jsx(Stack, {
+			className: noExpand || type === "pinnedGroup" ? "" : navigationStyle.itemPaddingStack({ 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" ? "" : navigationStyle.itemPaddingStack({ hide: shouldAnimate && animationType === "complex" && animation === "expand" }),
+				width: animation ? "100%" : void 0,
+				children
+			})
+		}) }) });
+	};
+});
+
+//#endregion
+init_Children();
+export { ItemChildren, init_Children };

package/dist/compositions/Navigation/components/Item/Content.d.ts

@@ -0,0 +1,3 @@
+import type { ItemExpandedType } from '../ComponentsTypes';
+export declare const ItemContent: ({ disabled, active, categoryIcon, type, label, hasActiveChildren, labelDescription, noExpand, subLabel, }: Pick<ItemExpandedType, 'disabled' | 'active' | 'categoryIcon' | 'type' | 'label' | 'hasActiveChildren' | 'labelDescription' | 'noExpand' | 'subLabel'>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Content.d.ts.map

package/dist/compositions/Navigation/components/Item/Content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../../../../src/compositions/Navigation/components/Item/Content.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAE1D,eAAO,MAAM,WAAW,8GAUrB,IAAI,CACL,gBAAgB,EACd,UAAU,GACV,QAAQ,GACR,cAAc,GACd,MAAM,GACN,OAAO,GACP,mBAAmB,GACnB,kBAAkB,GAClB,UAAU,GACV,UAAU,CACb,4CAmFA,CAAA"}

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

@@ -0,0 +1,80 @@
+import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../../../../components/Stack/index.js";
+import { Text, init_Text } from "../../../../components/Text/index.js";
+import { init_NavigationProvider, useNavigation } from "../../NavigationProvider.js";
+import { init_styles_css, navigationStyle } from "../../styles.css.js";
+import { ItemContext, init_ItemProvider } from "./ItemProvider.js";
+import { useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DragIcon } from "@ultraviolet/icons/DragIcon";
+
+//#region src/compositions/Navigation/components/Item/Content.tsx
+var ItemContent;
+var init_Content = __esmMin(() => {
+	init_Stack();
+	init_Text();
+	init_NavigationProvider();
+	init_styles_css();
+	init_ItemProvider();
+	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: navigationStyle.itemCategoryIcon,
+					justifyContent: "center",
+					children: categoryIcon
+				}) : null,
+				type === "pinned" && expanded ? /* @__PURE__ */ jsx(DragIcon, {
+					className: navigationStyle.itemDragIcon,
+					disabled,
+					prominence: "default",
+					sentiment: "neutral",
+					size: "small"
+				}) : null,
+				/* @__PURE__ */ jsxs(Stack, { children: [animation ? null : /* @__PURE__ */ jsxs(Text, {
+					as: "span",
+					className: navigationStyle.itemWrapText({
+						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: navigationStyle.itemPadded,
+						children: labelDescription
+					}) : null]
+				}), subLabel && !animation ? /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					className: navigationStyle.itemWrapText({
+						disabled,
+						weak: hasActiveChildren && !noExpand && !disabled && !!active
+					}),
+					"data-animation": animation,
+					disabled,
+					prominence: "weak",
+					sentiment: "neutral",
+					variant: "caption",
+					whiteSpace: "pre-wrap",
+					children: subLabel
+				}) : null] })
+			]
+		});
+	};
+});
+
+//#endregion
+init_Content();
+export { ItemContent, init_Content };

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

@@ -0,0 +1,88 @@
+import type { Badge } from '../../../../components/Badge';
+import type { ItemType, PinUnPinType } from '../../types';
+import type { ComponentProps, CSSProperties, ElementType, ReactNode } from 'react';
+type ItemProps = {
+    children?: ReactNode;
+    /**
+     * Sets a category icon on the left of the item
+     */
+    categoryIcon?: ReactNode;
+    /**
+     * The label of the item that will be shown.
+     * It is also used as the key for pinning.
+     */
+    label: string;
+    /**
+     * It will be added after the label when you want to have complementory information with the label
+     */
+    labelDescription?: ReactNode;
+    /**
+     * It should be a unique id and will be used for pin/unpin and show/hide feature.
+     */
+    id: string;
+    /**
+     * Text shown under the label with a lighter color and smaller font size
+     */
+    subLabel?: string;
+    /**
+     * Badge is added on the right of the item. It is hidden on hover if pinned
+     * feature is enabled
+     */
+    badgeText?: string;
+    /**
+     * Defined the sentiment of the badge according to Badge component from
+     * `@ultraviolet/ui`
+     */
+    badgeSentiment?: ComponentProps<typeof Badge>['sentiment'];
+    href?: HTMLAnchorElement['href'];
+    target?: HTMLAnchorElement['target'];
+    rel?: HTMLAnchorElement['rel'];
+    /**
+     * This function will be triggered on click of the item. If the item is expandable
+     * toggle will be passed with it.
+     */
+    onToggle?: (toggle: boolean) => void;
+    onClickPinUnpin?: (parameters: PinUnPinType) => void;
+    /**
+     * This prop is used to control if the item is expanded or collapsed
+     */
+    toggle?: boolean;
+    /**
+     * Set this to true if your current page is this item.
+     */
+    active?: boolean;
+    /**
+     * If you want to remove pin button on your item use this prop
+     */
+    noPinButton?: boolean;
+    /**
+     * You don't need to use this prop it's used internally to control the type of the item
+     */
+    type?: ItemType;
+    /**
+     * You don't need to use this prop it's used internally for pinned item to be reorganized with drag and drop
+     */
+    index?: number;
+    /**
+     * When the item has href it becomes a link if not it is a button.
+     * When using an external routing tool you might need to remove both of them and use
+     * a non focusable element. This option allows you to choose the tag of the
+     * item.
+     */
+    as?: ElementType;
+    /**
+     * Use this prop if you want to remove the expand behavior when the item
+     * has sub items.
+     */
+    noExpand?: boolean;
+    /**
+     * When set to true, the item is still visible even when `showHide='hide'` (NavigationProvider)
+     */
+    alwaysVisible?: boolean;
+    disabled?: boolean;
+    'data-testid'?: string;
+    style?: CSSProperties;
+};
+export declare const Item: import("react").MemoExoticComponent<({ children, categoryIcon, label, labelDescription, subLabel, badgeText, badgeSentiment, href, target, rel, onToggle, onClickPinUnpin, toggle, active, noPinButton, type, as, disabled, noExpand, index, id, 'data-testid': dataTestId, style, alwaysVisible, }: ItemProps) => import("react/jsx-runtime").JSX.Element | null>;
+export {};
+//# sourceMappingURL=Item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../../src/compositions/Navigation/components/Item/Item.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAA;AACzD,OAAO,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,aAAa,CAAA;AACzD,OAAO,KAAK,EACV,cAAc,EACd,aAAa,EAEb,WAAW,EACX,SAAS,EACV,MAAM,OAAO,CAAA;AAMd,KAAK,SAAS,GAAG;IACf,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B;;OAEG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,WAAW,CAAC,CAAA;IAC1D,IAAI,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAA;IAChC,MAAM,CAAC,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAA;IACpC,GAAG,CAAC,EAAE,iBAAiB,CAAC,KAAK,CAAC,CAAA;IAC9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACpC,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,YAAY,KAAK,IAAI,CAAA;IACpD;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;OAKG;IACH,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAOD,eAAO,MAAM,IAAI,uSA0BZ,SAAS,oDA4Qb,CAAA"}

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

@@ -0,0 +1,238 @@
+'use client';
+import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../../../../components/Stack/index.js";
+import { Tooltip, init_Tooltip } from "../../../../components/Tooltip/index.js";
+import { init_NavigationProvider, useNavigation } from "../../NavigationProvider.js";
+import { init_styles_css, navigationStyle } from "../../styles.css.js";
+import { ItemContext, init_ItemProvider } from "./ItemProvider.js";
+import { ItemMenu, init_Menu } from "../Menu/Menu.js";
+import { ItemMenuItem, init_MenuItem } from "../Menu/MenuItem.js";
+import { NestedMenu, init_NestedMenu } from "../Menu/NestedMenu.js";
+import { ItemExpanded, init_ItemExpanded } from "./ItemExpanded.js";
+import { Children, isValidElement, memo, useContext, useEffect, useMemo, useRef } from "react";
+import { cn } from "@ultraviolet/utils";
+import { jsx } from "react/jsx-runtime";
+import { OpenInNewIcon } from "@ultraviolet/icons/OpenInNewIcon";
+
+//#region src/compositions/Navigation/components/Item/Item.tsx
+var onDragStopTrigger, Item;
+var init_Item = __esmMin(() => {
+	init_Stack();
+	init_Tooltip();
+	init_NavigationProvider();
+	init_styles_css();
+	init_Menu();
+	init_MenuItem();
+	init_NestedMenu();
+	init_ItemExpanded();
+	init_ItemProvider();
+	onDragStopTrigger = (event) => {
+		const element = event.currentTarget;
+		element.style.opacity = "1";
+	};
+	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 (Children.count(children) > 0 && hasParents) return /* @__PURE__ */ jsx(NestedMenu, {
+			active,
+			badgeSentiment,
+			badgeText,
+			disabled,
+			hasActiveChildren,
+			hasHrefAndNoChildren,
+			href,
+			id,
+			isItemPinned,
+			isPinDisabled,
+			label,
+			labelDescription,
+			noExpand,
+			onClickPinUnpin,
+			onToggle,
+			pinTooltipLocale,
+			rel,
+			shouldShowPinnedButton,
+			style,
+			target,
+			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: navigationStyle.itemMenuStack,
+				gap: 1,
+				justifyContent: "flex-start",
+				children: /* @__PURE__ */ jsx(Stack, {
+					alignItems: "center",
+					as: containerTag,
+					className: cn(navigationStyle.itemContainer({ disabled }), navigationStyle.itemContainerAnimated({
+						animated: shouldAnimate && animationType === "complex",
+						animation: computedAnimation
+					})),
+					gap: 1,
+					href,
+					justifyContent: "center",
+					rel,
+					target,
+					children: /* @__PURE__ */ jsx(OpenInNewIcon, {
+						className: navigationStyle.itemAnimatedIcon({
+							animated: shouldAnimate && animationType === "complex",
+							animation: computedAnimation
+						}),
+						prominence: "weak",
+						sentiment: "neutral"
+					})
+				})
+			})
+		});
+		return null;
+	});
+});
+
+//#endregion
+init_Item();
+export { Item, init_Item };

package/dist/compositions/Navigation/components/Item/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/compositions/Navigation/components/Item/ItemExpanded.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ItemExpanded.d.ts","sourceRoot":"","sources":["../../../../../src/compositions/Navigation/components/Item/ItemExpanded.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAG1D,eAAO,MAAM,YAAY,8WA8BtB,gBAAgB,4CA8KlB,CAAA"}

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

@@ -0,0 +1,149 @@
+import { __esmMin, __name } from "../../../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../../../../components/Stack/index.js";
+import { init_NavigationProvider, useNavigation } from "../../NavigationProvider.js";
+import { init_styles_css, navigationStyle } from "../../styles.css.js";
+import { ItemBadge, init_Badge } from "./Badge.js";
+import { ItemPinnedButton, init_PinnedButton } from "./PinnedButton.js";
+import { ItemChildren, init_Children } from "./Children.js";
+import { ItemContent, init_Content } from "./Content.js";
+import { useCallback, useMemo, useReducer } from "react";
+import { cn } from "@ultraviolet/utils";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { OpenInNewIcon } from "@ultraviolet/icons/OpenInNewIcon";
+import { ArrowRightIcon } from "@ultraviolet/icons/ArrowRightIcon";
+import { ArrowDownIcon } from "@ultraviolet/icons/ArrowDownIcon";
+
+//#region src/compositions/Navigation/components/Item/ItemExpanded.tsx
+var ItemExpanded;
+var init_ItemExpanded = __esmMin(() => {
+	init_Stack();
+	init_NavigationProvider();
+	init_styles_css();
+	init_Badge();
+	init_Children();
+	init_Content();
+	init_PinnedButton();
+	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(navigationStyle.itemContainer({
+				disabled,
+				hasActive: hasActiveChildren,
+				isActive: !!active,
+				noExpand,
+				subLabel: !!subLabel
+			}), navigationStyle.itemContainerAnimated({
+				animated: shouldAnimate && animationType === "complex",
+				animation: computedAnimation
+			}), navigationStyle.itemVariants({
+				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: navigationStyle.itemStackIcon,
+						direction: "row",
+						gap: 1,
+						children: /* @__PURE__ */ jsx(ArrowIcon, {
+							prominence: "weak",
+							sentiment: "neutral"
+						})
+					}) : null
+				]
+			})]
+		}), children ? /* @__PURE__ */ jsx(ItemChildren, {
+			internalExpanded,
+			noExpand,
+			type,
+			children
+		}) : null] });
+	};
+});
+
+//#endregion
+init_ItemExpanded();
+export { ItemExpanded, init_ItemExpanded };

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

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

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

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

package/dist/compositions/Navigation/components/Item/PinnedButton.d.ts

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

package/dist/compositions/Navigation/components/Item/PinnedButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinnedButton.d.ts","sourceRoot":"","sources":["../../../../../src/compositions/Navigation/components/Item/PinnedButton.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAG1D,eAAO,MAAM,gBAAgB,4GAQ1B,IAAI,CACL,gBAAgB,EACd,wBAAwB,GACxB,cAAc,GACd,kBAAkB,GAClB,eAAe,GACf,IAAI,GACJ,QAAQ,GACR,iBAAiB,CACpB,mDA6DA,CAAA"}