@ultraviolet/ui 3.10.1 → 3.11.0

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

@@ -0,0 +1,24 @@
+import type { CSSProperties, ReactElement } from 'react';
+type PinnedItemsProps = {
+    /**
+     * This prop is used to control if the item is expanded or collapsed
+     */
+    toggle?: boolean;
+    /**
+     * 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;
+    /**
+     * This function will be called when the user reorder the pinned items
+     */
+    onReorder?: (pinnedItems: string[]) => void;
+    /**
+     * Use this prop if it is needed to wrap each PinnedItem component into another component (eg NavLink)
+     */
+    itemWrapper?: (item: ReactElement, itemId: string) => ReactElement;
+    style?: CSSProperties;
+};
+export declare const PinnedItems: ({ toggle, onReorder, onToggle, itemWrapper, style, }: PinnedItemsProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=PinnedItems.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PinnedItems.d.ts","sourceRoot":"","sources":["../../../../../src/components/compositions/Navigation/components/PinnedItems.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAa,YAAY,EAAE,MAAM,OAAO,CAAA;AAYnE,KAAK,gBAAgB,GAAG;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACpC;;OAEG;IACH,SAAS,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IAC3C;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,KAAK,YAAY,CAAA;IAClE,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,WAAW,4HAiJvB,CAAA"}

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

@@ -0,0 +1,105 @@
+'use client';
+import { __name } from "../../../../_virtual/_rolldown/runtime.js";
+import { _objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.114.0/helpers/objectSpread2.js";
+import { Text } from "../../../Text/index.js";
+import { useNavigation } from "../NavigationProvider.js";
+import { navigationPinnedItemContainer, navigationPinnedItemDropableArea, navigationPinnedItemRelativeDiv } from "./styles.css.js";
+import { Item } from "./Item.js";
+import { useCallback } from "react";
+import { useTheme } from "@ultraviolet/themes";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PinCategoryIcon } from "@ultraviolet/icons/category";
+
+//#region src/components/compositions/Navigation/components/PinnedItems.tsx
+const PinnedItems = ({ toggle = true, onReorder, onToggle, itemWrapper, style }) => {
+	const context = useNavigation();
+	if (!context) throw new Error("Navigation.PinnedItems can only be used inside a NavigationProvider.");
+	const { locales, pinnedItems, pinnedFeature, reorderItems, expanded, items, animation, showHide } = context;
+	const theme = useTheme();
+	const onDrop = useCallback((event, index) => {
+		event.preventDefault();
+		if (event === null || event === void 0 ? void 0 : event.dataTransfer) {
+			event.currentTarget.style.borderColor = "transparent";
+			const data = JSON.parse(event.dataTransfer.getData("text"));
+			if (data.index === index - 1 || index > data.index) {
+				const newItems = reorderItems(data.index, index - 1);
+				onReorder === null || onReorder === void 0 || onReorder(newItems);
+				return;
+			}
+			const newItems = reorderItems(data.index, index);
+			onReorder === null || onReorder === void 0 || onReorder(newItems);
+		}
+	}, [onReorder, reorderItems]);
+	const onDragOver = useCallback((event) => {
+		event.preventDefault();
+		event.currentTarget.style.borderColor = theme.colors.primary.border;
+	}, [theme.colors.primary.border]);
+	const onDragLeave = useCallback((event) => {
+		event.preventDefault();
+		event.currentTarget.style.borderColor = "transparent";
+	}, []);
+	if (Object.keys(items).length === 0) return null;
+	if (pinnedFeature && showHide !== "hide") return /* @__PURE__ */ jsx("div", {
+		style: _objectSpread2({ width: animation ? "100%" : void 0 }, style),
+		children: /* @__PURE__ */ jsxs(Item, {
+			categoryIcon: /* @__PURE__ */ jsx(PinCategoryIcon, { variant: "neutral" }),
+			"data-testid": "pinned-group",
+			id: "pinned-group",
+			label: locales["navigation.pinned.item.group.label"],
+			onToggle,
+			toggle,
+			type: "pinnedGroup",
+			children: [pinnedItems.length > 0 ? pinnedItems.map((itemId, index) => {
+				var _items$itemId;
+				if ((_items$itemId = items[itemId]) === null || _items$itemId === void 0 ? void 0 : _items$itemId.label) {
+					var _items$itemId$active;
+					var _items$itemId2;
+					var _items$itemId$onClick;
+					var _items$itemId3;
+					var _items$itemId4;
+					const itemElement = /* @__PURE__ */ jsx(Item, {
+						active: (_items$itemId$active = (_items$itemId2 = items[itemId]) === null || _items$itemId2 === void 0 ? void 0 : _items$itemId2.active) !== null && _items$itemId$active !== void 0 ? _items$itemId$active : false,
+						id: itemId,
+						index,
+						label: items[itemId].label,
+						onClickPinUnpin: (_items$itemId$onClick = (_items$itemId3 = items[itemId]) === null || _items$itemId3 === void 0 ? void 0 : _items$itemId3.onClickPinUnpin) !== null && _items$itemId$onClick !== void 0 ? _items$itemId$onClick : void 0,
+						onToggle: (_items$itemId4 = items[itemId]) === null || _items$itemId4 === void 0 ? void 0 : _items$itemId4.onToggle,
+						toggle,
+						type: "pinned"
+					}, itemId);
+					return /* @__PURE__ */ jsxs("div", {
+						className: navigationPinnedItemRelativeDiv,
+						children: [/* @__PURE__ */ jsx("div", {
+							className: navigationPinnedItemDropableArea,
+							onDragLeave,
+							onDragOver,
+							onDrop: (event) => onDrop(event, index)
+						}), itemWrapper ? itemWrapper(itemElement, itemId) : itemElement]
+					}, itemId);
+				}
+				return null;
+			}) : /* @__PURE__ */ jsx("div", {
+				className: navigationPinnedItemContainer({ expanded }),
+				children: /* @__PURE__ */ jsx(Text, {
+					as: "p",
+					prominence: "weak",
+					sentiment: "neutral",
+					variant: "caption",
+					children: locales["navigation.pinned.item.group.empty"]
+				})
+			}), /* @__PURE__ */ jsx("div", {
+				className: navigationPinnedItemRelativeDiv,
+				children: /* @__PURE__ */ jsx("div", {
+					className: navigationPinnedItemDropableArea,
+					onDragLeave,
+					onDragOver,
+					onDrop: (event) => onDrop(event, pinnedItems.length)
+				})
+			})]
+		})
+	});
+	return null;
+};
+
+//#endregion
+export { PinnedItems };

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

@@ -0,0 +1,2 @@
+export declare const Separator: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Separator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../../../../src/components/compositions/Navigation/components/Separator.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS,+CAAwD,CAAA"}

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

@@ -0,0 +1,11 @@
+'use client';
+import { __name } from "../../../../_virtual/_rolldown/runtime.js";
+import { navigationSeparator } from "./styles.css.js";
+import { Separator as Separator$1 } from "../../../Separator/index.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/compositions/Navigation/components/Separator.tsx
+const Separator = () => /* @__PURE__ */ jsx(Separator$1, { className: navigationSeparator });
+
+//#endregion
+export { Separator };

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

@@ -0,0 +1,16 @@
+import type { CSSProperties, ReactNode } from 'react';
+type ShowAllProp = {
+    showContent: ReactNode;
+    hideContent: ReactNode;
+    onShowHide?: (expanded: 'show' | 'hide') => void;
+    disabled?: boolean;
+    /**
+     * Add a tooltip to display on hover when the navigation is not-exanped
+     */
+    tooltip?: string;
+    'data-testid'?: string;
+    style?: CSSProperties;
+};
+export declare const ShowHide: import("react").MemoExoticComponent<({ showContent, hideContent, onShowHide, tooltip, 'data-testid': dataTestId, style, }: ShowAllProp) => import("react/jsx-runtime").JSX.Element>;
+export {};
+//# sourceMappingURL=ShowHide.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ShowHide.d.ts","sourceRoot":"","sources":["../../../../../src/components/compositions/Navigation/components/ShowHide.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOrD,KAAK,WAAW,GAAG;IACjB,WAAW,EAAE,SAAS,CAAA;IACtB,WAAW,EAAE,SAAS,CAAA;IACtB,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAA;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED,eAAO,MAAM,QAAQ,qLAgEpB,CAAA"}

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

@@ -0,0 +1,54 @@
+'use client';
+import { __name } from "../../../../_virtual/_rolldown/runtime.js";
+import { Stack } from "../../../Stack/index.js";
+import { useNavigation } from "../NavigationProvider.js";
+import { navigationShowHideStack } from "./styles.css.js";
+import { Button } from "../../../Button/index.js";
+import { memo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { ArrowDownIcon } from "@ultraviolet/icons/ArrowDownIcon";
+import { ArrowUpIcon } from "@ultraviolet/icons/ArrowUpIcon";
+
+//#region src/components/compositions/Navigation/components/ShowHide.tsx
+const ShowHide = memo(({ showContent, hideContent, onShowHide, tooltip, "data-testid": dataTestId, style }) => {
+	const context = useNavigation();
+	if (!context) throw new Error("Navigation.ShowAll can only be used inside a NavigationProvider.");
+	const { expanded, showHide } = context;
+	const [computedShown, setIsShown] = useState(showHide === "show");
+	const onClick = () => {
+		setIsShown(!computedShown);
+		onShowHide === null || onShowHide === void 0 || onShowHide(computedShown ? "hide" : "show");
+	};
+	if (expanded) return /* @__PURE__ */ jsx(Stack, {
+		className: navigationShowHideStack,
+		justifyContent: "flex-end",
+		style,
+		children: /* @__PURE__ */ jsx(Button, {
+			"data-testid": dataTestId,
+			onClick,
+			sentiment: "primary",
+			size: "small",
+			style,
+			variant: "ghost",
+			children: computedShown ? hideContent : showContent
+		})
+	});
+	return /* @__PURE__ */ jsx(Stack, {
+		alignItems: "center",
+		className: navigationShowHideStack,
+		justifyContent: "flex-end",
+		style,
+		children: /* @__PURE__ */ jsx(Button, {
+			"data-testid": dataTestId,
+			onClick,
+			sentiment: "primary",
+			size: "small",
+			tooltip,
+			variant: "ghost",
+			children: computedShown ? /* @__PURE__ */ jsx(ArrowUpIcon, {}) : /* @__PURE__ */ jsx(ArrowDownIcon, {})
+		})
+	});
+});
+
+//#endregion
+export { ShowHide };

package/dist/components/compositions/Navigation/components/items.css.d.ts

@@ -0,0 +1,98 @@
+export declare const navigationItemMenuContainer: string;
+export declare const navigationItemRelative: string;
+export declare const navigationItemPadded: string;
+export declare const navigationItemPinIcon: Record<"active" | "inactive", string>;
+export declare const navigationItemMenu: string;
+export declare const navigationItemMenuPinned: string;
+export declare const navigationItemContainerBase: string;
+export declare const navigationItemContainer: import("@vanilla-extract/recipes").RuntimeFn<{
+    disabled: {
+        true: {
+            backgroundColor: "unset";
+            cursor: "not-allowed";
+        };
+    };
+    hasActive: {
+        true: {
+            backgroundColor: `var(--${string})`;
+        };
+    };
+    isActive: {
+        true: {
+            backgroundColor: `var(--${string})`;
+            selectors: {
+                '&:hover': {
+                    backgroundColor: `var(--${string})`;
+                };
+            };
+        };
+    };
+    noExpand: {
+        false: {
+            cursor: "pointer";
+        };
+    };
+    subLabel: {
+        true: {
+            padding: `var(--${string}) var(--${string})`;
+        };
+    };
+}>;
+export declare const navigationItemContainerAnimated: import("@vanilla-extract/recipes").RuntimeFn<{
+    animated: {
+        true: {};
+    };
+    animation: {
+        collapse: {};
+        expand: {};
+    };
+}>;
+export declare const navigationItemShowDraggable: string;
+export declare const navigationItemShowPinButton: string;
+export declare const navigationItemWeakText: string;
+export declare const navigationItemVariants: import("@vanilla-extract/recipes").RuntimeFn<{
+    showDraggableIcon: {
+        true: string;
+    };
+    showPinIcon: {
+        true: string;
+    };
+    shouldHaveWeakText: {
+        true: string;
+    };
+}>;
+export declare const navigationItemDragIcon: string;
+export declare const navigationItemWrapText: import("@vanilla-extract/recipes").RuntimeFn<{
+    disabled: {
+        true: {
+            color: `var(--${string})`;
+        };
+    };
+    weak: {
+        true: {
+            color: `var(--${string})`;
+        };
+    };
+}>;
+export declare const navigationItemBadge: string;
+export declare const navigationItemPinnedButton: string;
+export declare const navigationItemAnimatedIcon: import("@vanilla-extract/recipes").RuntimeFn<{
+    animated: {
+        true: {};
+    };
+    animation: {
+        collapse: {};
+        expand: {};
+    };
+}>;
+export declare const navigationItemMenuStack: string;
+export declare const navigationItemStackIcon: string;
+export declare const navigationItemCategoryIcon: string;
+export declare const navigationItemPaddingStack: import("@vanilla-extract/recipes").RuntimeFn<{
+    hide: {
+        true: {
+            display: "none";
+        };
+    };
+}>;
+//# sourceMappingURL=items.css.d.ts.map

package/dist/components/compositions/Navigation/components/items.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"items.css.d.ts","sourceRoot":"","sources":["../../../../../src/components/compositions/Navigation/components/items.css.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,2BAA2B,QAAwB,CAAA;AAEhE,eAAO,MAAM,sBAAsB,QAAkC,CAAA;AAErE,eAAO,MAAM,oBAAoB,QAAyC,CAAA;AAW1E,eAAO,MAAM,qBAAqB,uCAiBhC,CAAA;AAEF,eAAO,MAAM,kBAAkB,QAE7B,CAAA;AAEF,eAAO,MAAM,wBAAwB,QAAY,CAAA;AAEjD,eAAO,MAAM,2BAA2B,QAUtC,CAAA;AAEF,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+ElC,CAAA;AAEF,eAAO,MAAM,+BAA+B;;;;;;;;EAwB1C,CAAA;AAEF,eAAO,MAAM,2BAA2B,QAAY,CAAA;AACpD,eAAO,MAAM,2BAA2B,QAAY,CAAA;AACpD,eAAO,MAAM,sBAAsB,QAAY,CAAA;AAE/C,eAAO,MAAM,sBAAsB;;;;;;;;;;EAYjC,CAAA;AAEF,eAAO,MAAM,sBAAsB,QAUjC,CAAA;AACF,eAAO,MAAM,sBAAsB;;;;;;;;;;;EA6BjC,CAAA;AAEF,eAAO,MAAM,mBAAmB,QAgB9B,CAAA;AAEF,eAAO,MAAM,0BAA0B,QA2BrC,CAAA;AAEF,eAAO,MAAM,0BAA0B;;;;;;;;EAwBrC,CAAA;AAEF,eAAO,MAAM,uBAAuB,QAIlC,CAAA;AAEF,eAAO,MAAM,uBAAuB,QAElC,CAAA;AAEF,eAAO,MAAM,0BAA0B,QAErC,CAAA;AAEF,eAAO,MAAM,0BAA0B;;;;;;EAWrC,CAAA"}

package/dist/components/compositions/Navigation/components/items.css.js

@@ -0,0 +1,124 @@
+/* empty css                           */
+/* empty css                                                    */
+/* empty css                                                       */
+/* empty css                     */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+
+//#region src/components/compositions/Navigation/components/items.css.ts
+var navigationItemMenuContainer = "uv_5h81qo0";
+var navigationItemRelative = "uv_5h81qo1";
+var navigationItemPadded = "uv_5h81qo2";
+var navigationItemPinIcon = {
+	active: "uv_5h81qo4 uv_5h81qo3",
+	inactive: "uv_5h81qo5 uv_5h81qo3"
+};
+var navigationItemMenu = "uv_5h81qo6";
+var navigationItemMenuPinned = "uv_5h81qo7";
+var navigationItemContainer = createRuntimeFn({
+	defaultClassName: "uv_5h81qo9 uv_5h81qo8",
+	variantClassNames: {
+		disabled: { true: "uv_5h81qoa" },
+		hasActive: { true: "uv_5h81qob" },
+		isActive: { true: "uv_5h81qoc" },
+		noExpand: { false: "uv_5h81qod" },
+		subLabel: { true: "uv_5h81qoe" }
+	},
+	defaultVariants: {
+		disabled: false,
+		hasActive: false,
+		isActive: false,
+		noExpand: false,
+		subLabel: false
+	},
+	compoundVariants: [
+		[{
+			disabled: false,
+			isActive: false,
+			noExpand: false
+		}, "uv_5h81qof"],
+		[{
+			disabled: false,
+			hasActive: true,
+			isActive: false,
+			noExpand: false
+		}, "uv_5h81qog"],
+		[{
+			disabled: false,
+			isActive: false,
+			noExpand: false
+		}, "uv_5h81qoh"]
+	]
+});
+var navigationItemContainerAnimated = createRuntimeFn({
+	defaultClassName: "uv_5h81qoi",
+	variantClassNames: {
+		animated: { true: "uv_5h81qoj" },
+		animation: {
+			collapse: "uv_5h81qok",
+			expand: "uv_5h81qol"
+		}
+	},
+	defaultVariants: {},
+	compoundVariants: [[{
+		animated: true,
+		animation: "collapse"
+	}, "uv_5h81qom"], [{
+		animated: true,
+		animation: "expand"
+	}, "uv_5h81qon"]]
+});
+var navigationItemVariants = createRuntimeFn({
+	defaultClassName: "uv_5h81qor",
+	variantClassNames: {
+		showDraggableIcon: { true: "uv_5h81qos uv_5h81qoo" },
+		showPinIcon: { true: "uv_5h81qot uv_5h81qop" },
+		shouldHaveWeakText: { true: "uv_5h81qou uv_5h81qoq" }
+	},
+	defaultVariants: {},
+	compoundVariants: []
+});
+var navigationItemDragIcon = "uv_5h81qov";
+var navigationItemWrapText = createRuntimeFn({
+	defaultClassName: "uv_5h81qow",
+	variantClassNames: {
+		disabled: { true: "uv_5h81qox" },
+		weak: { true: "uv_5h81qoy" }
+	},
+	defaultVariants: {
+		disabled: false,
+		weak: false
+	},
+	compoundVariants: []
+});
+var navigationItemBadge = "uv_5h81qoz";
+var navigationItemPinnedButton = "uv_5h81qo10";
+var navigationItemAnimatedIcon = createRuntimeFn({
+	defaultClassName: "uv_5h81qo11",
+	variantClassNames: {
+		animated: { true: "uv_5h81qo12" },
+		animation: {
+			collapse: "uv_5h81qo13",
+			expand: "uv_5h81qo14"
+		}
+	},
+	defaultVariants: {},
+	compoundVariants: [[{
+		animated: true,
+		animation: "collapse"
+	}, "uv_5h81qo15"], [{
+		animated: true,
+		animation: "expand"
+	}, "uv_5h81qo16"]]
+});
+var navigationItemMenuStack = "uv_5h81qo17";
+var navigationItemStackIcon = "uv_5h81qo18";
+var navigationItemCategoryIcon = "uv_5h81qo19";
+var navigationItemPaddingStack = createRuntimeFn({
+	defaultClassName: "uv_5h81qo1a",
+	variantClassNames: { hide: { true: "uv_5h81qo1b" } },
+	defaultVariants: {},
+	compoundVariants: []
+});
+
+//#endregion
+export { navigationItemAnimatedIcon, navigationItemBadge, navigationItemCategoryIcon, navigationItemContainer, navigationItemContainerAnimated, navigationItemDragIcon, navigationItemMenu, navigationItemMenuContainer, navigationItemMenuPinned, navigationItemMenuStack, navigationItemPadded, navigationItemPaddingStack, navigationItemPinIcon, navigationItemPinnedButton, navigationItemRelative, navigationItemStackIcon, navigationItemVariants, navigationItemWrapText };

package/dist/components/compositions/Navigation/components/styles.css.d.ts

@@ -0,0 +1,25 @@
+export declare const navigationGroupText: import("@vanilla-extract/recipes").RuntimeFn<{
+    animation: {
+        collapse: {
+            animation: `${string} 250ms ease-in-out reverse`;
+        };
+        expand: {
+            animation: `${string} 250ms ease-in-out`;
+        };
+        false: {};
+    };
+}>;
+export declare const navigationGroupStack: string;
+export declare const navigationPinnedItemDropableArea: string;
+export declare const navigationPinnedItemRelativeDiv: string;
+export declare const navigationPinnedItemContainer: import("@vanilla-extract/recipes").RuntimeFn<{
+    expanded: {
+        true: {
+            marginLeft: `var(--${string})`;
+            paddingLeft: `var(--${string})`;
+        };
+    };
+}>;
+export declare const navigationSeparator: string;
+export declare const navigationShowHideStack: string;
+//# sourceMappingURL=styles.css.d.ts.map

package/dist/components/compositions/Navigation/components/styles.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../../src/components/compositions/Navigation/components/styles.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,mBAAmB;;;;;;;;;;EAkB9B,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAAwC,CAAA;AAEzE,eAAO,MAAM,gCAAgC,QAsB3C,CAAA;AAEF,eAAO,MAAM,+BAA+B,QAE1C,CAAA;AAEF,eAAO,MAAM,6BAA6B;;;;;;;EAYxC,CAAA;AAEF,eAAO,MAAM,mBAAmB,QAG9B,CAAA;AAEF,eAAO,MAAM,uBAAuB,QAElC,CAAA"}

package/dist/components/compositions/Navigation/components/styles.css.js

@@ -0,0 +1,29 @@
+/* empty css                           */
+/* empty css                      */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+
+//#region src/components/compositions/Navigation/components/styles.css.ts
+var navigationGroupText = createRuntimeFn({
+	defaultClassName: "uv_1kj9apl0",
+	variantClassNames: { animation: {
+		collapse: "uv_1kj9apl1",
+		expand: "uv_1kj9apl2",
+		false: "uv_1kj9apl3"
+	} },
+	defaultVariants: {},
+	compoundVariants: []
+});
+var navigationGroupStack = "uv_1kj9apl4";
+var navigationPinnedItemDropableArea = "uv_1kj9apl5";
+var navigationPinnedItemRelativeDiv = "uv_1kj9apl6";
+var navigationPinnedItemContainer = createRuntimeFn({
+	defaultClassName: "uv_1kj9apl7",
+	variantClassNames: { expanded: { true: "uv_1kj9apl8" } },
+	defaultVariants: {},
+	compoundVariants: []
+});
+var navigationSeparator = "uv_1kj9apl9";
+var navigationShowHideStack = "uv_1kj9apla";
+
+//#endregion
+export { navigationGroupStack, navigationGroupText, navigationPinnedItemContainer, navigationPinnedItemDropableArea, navigationPinnedItemRelativeDiv, navigationSeparator, navigationShowHideStack };

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

@@ -0,0 +1,10 @@
+export declare const NAVIGATION_MIN_WIDTH = 220;
+export declare const NAVIGATION_WIDTH = 280;
+export declare const NAVIGATION_COLLASPED_WIDTH = 67;
+export declare const NAVIGATION_MAX_WIDTH = 320;
+/**
+ * ANIMATIONS
+ * collapse and expand animation duration of the whole nav in ms
+ */
+export declare const ANIMATION_DURATION = 250;
+//# sourceMappingURL=constants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/Navigation/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB,MAAM,CAAA;AACvC,eAAO,MAAM,gBAAgB,MAAM,CAAA;AACnC,eAAO,MAAM,0BAA0B,KAAK,CAAA;AAC5C,eAAO,MAAM,oBAAoB,MAAM,CAAA;AAEvC;;;GAGG;AACH,eAAO,MAAM,kBAAkB,MAAM,CAAA"}

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

@@ -0,0 +1,65 @@
+import { NavigationProvider, useNavigation } from './NavigationProvider';
+import type { NavigationProps } from './types';
+export declare function Navigation({ 'data-testid': dataTestId, children, className, id, logo, onToggleExpand, onWidthResize, style }: NavigationProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Navigation {
+    var Group: ({ children, label, style, additionalData, }: {
+        children: import("react").ReactNode;
+        label: string;
+        style?: import("react").CSSProperties | undefined;
+        additionalData?: import("react").ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element | null;
+}
+export declare namespace Navigation {
+    var 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, }: {
+        children?: import("react").ReactNode;
+        categoryIcon?: import("react").ReactNode;
+        label: string;
+        labelDescription?: import("react").ReactNode;
+        id: string;
+        subLabel?: string | undefined;
+        badgeText?: string | undefined;
+        badgeSentiment?: "black" | "danger" | "info" | "neutral" | "primary" | "secondary" | "success" | "warning" | "white" | undefined;
+        href?: string | undefined;
+        target?: string | undefined;
+        rel?: string | undefined;
+        onToggle?: ((toggle: boolean) => void) | undefined;
+        onClickPinUnpin?: ((parameters: import("./types").PinUnPinType) => void) | undefined;
+        toggle?: boolean | undefined;
+        active?: boolean | undefined;
+        noPinButton?: boolean | undefined;
+        type?: import("./types").ItemType | undefined;
+        index?: number | undefined;
+        as?: import("react").ElementType | undefined;
+        noExpand?: boolean | undefined;
+        alwaysVisible?: boolean | undefined;
+        disabled?: boolean | undefined;
+        'data-testid'?: string | undefined;
+        style?: import("react").CSSProperties | undefined;
+    }) => import("react/jsx-runtime").JSX.Element | null>;
+}
+export declare namespace Navigation {
+    var PinnedItems: ({ toggle, onReorder, onToggle, itemWrapper, style, }: {
+        toggle?: boolean | undefined;
+        onToggle?: ((toggle: boolean) => void) | undefined;
+        onReorder?: ((pinnedItems: string[]) => void) | undefined;
+        itemWrapper?: ((item: import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>, itemId: string) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>) | undefined;
+        style?: import("react").CSSProperties | undefined;
+    }) => import("react/jsx-runtime").JSX.Element | null;
+}
+export declare namespace Navigation {
+    var Separator: () => import("react/jsx-runtime").JSX.Element;
+}
+export declare namespace Navigation {
+    var ShowHide: import("react").MemoExoticComponent<({ showContent, hideContent, onShowHide, tooltip, 'data-testid': dataTestId, style, }: {
+        showContent: import("react").ReactNode;
+        hideContent: import("react").ReactNode;
+        onShowHide?: ((expanded: "hide" | "show") => void) | undefined;
+        disabled?: boolean | undefined;
+        tooltip?: string | undefined;
+        'data-testid'?: string | undefined;
+        style?: import("react").CSSProperties | undefined;
+    }) => import("react/jsx-runtime").JSX.Element>;
+}
+export { NavigationProvider, useNavigation };
+export type { NavigationProps };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/Navigation/index.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACxE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;mCAOnB,EACzB,aAAa,EAAE,UAAU,EACzB,QAAQ,EACR,SAAS,EACT,EAAE,EACF,IAAI,EACJ,cAAc,EACd,aAAa,EACb,KAAK,EACN,EAAE,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBlB,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,CAAA;AAC5C,YAAY,EAAE,eAAe,EAAE,CAAA"}

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

@@ -0,0 +1,35 @@
+'use client';
+import { __name } from "../../../_virtual/_rolldown/runtime.js";
+import { NavigationProvider, useNavigation } from "./NavigationProvider.js";
+import { Group } from "./components/Group.js";
+import { Item } from "./components/Item.js";
+import { PinnedItems } from "./components/PinnedItems.js";
+import { Separator } from "./components/Separator.js";
+import { ShowHide } from "./components/ShowHide.js";
+import { NavigationContent } from "./NavigationContent.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/compositions/Navigation/index.tsx
+/**
+* Navigation is a component that allows you to create a sidebar navigation.
+* You can wrap your navigation items like `<Navigation.Item>` with your router
+* to make it work in your application.
+*/
+const Navigation = ({ "data-testid": dataTestId, children, className, id, logo, onToggleExpand, onWidthResize, style }) => /* @__PURE__ */ jsx(NavigationContent, {
+	className,
+	"data-testid": dataTestId,
+	id,
+	logo,
+	onToggleExpand,
+	onWidthResize,
+	style,
+	children
+});
+Navigation.Group = Group;
+Navigation.Item = Item;
+Navigation.PinnedItems = PinnedItems;
+Navigation.Separator = Separator;
+Navigation.ShowHide = ShowHide;
+
+//#endregion
+export { Navigation, NavigationProvider, useNavigation };

package/dist/components/compositions/Navigation/locales/en.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    readonly 'navigation.collapse.button': "Collapse sidebar";
+    readonly 'navigation.expand.button': "Expand sidebar";
+    readonly 'navigation.pin.limit': "You cannot pin more products";
+    readonly 'navigation.pin.tooltip': "Pin product";
+    readonly 'navigation.pinned.item.group.empty': "You have no pinned items.";
+    readonly 'navigation.pinned.item.group.label': "Pinned items";
+    readonly 'navigation.unpin.tooltip': "Unpin product";
+};
+export default _default;
+//# sourceMappingURL=en.d.ts.map

package/dist/components/compositions/Navigation/locales/en.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../../../../src/components/compositions/Navigation/locales/en.ts"],"names":[],"mappings":";;;;;;;;;AAAA,wBAQU"}