@plumile/ui 0.1.117 → 0.1.122

package/lib/esm/backoffice/molecules/inline_banner/inlineBanner.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"inlineBanner.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/inline_banner/inlineBanner.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nexport const container = sprinkles({\n  display: 'flex',\n  alignItems: 'flex-start',\n  justifyContent: 'space-between',\n  flexWrap: 'wrap',\n  gap: 3,\n  paddingX: 4,\n  paddingY: 3,\n  borderRadius: 'md',\n  fontSize: 'sm',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'border',\n});\n\nconst toneInfo = sprinkles({\n  backgroundColor: 'brandLightGray',\n  color: 'text',\n});\nconst toneSuccess = sprinkles({\n  backgroundColor: 'green-50',\n  color: 'green-800',\n});\nconst toneWarning = sprinkles({\n  backgroundColor: 'amber-50',\n  color: 'amber-900',\n});\nconst toneDanger = sprinkles({\n  backgroundColor: 'red-50',\n  color: 'red-800',\n});\n\nexport const toneRecipe = recipe({\n  variants: {\n    tone: {\n      info: toneInfo,\n      success: toneSuccess,\n      warning: toneWarning,\n      danger: toneDanger,\n    },\n  },\n  defaultVariants: {\n    tone: 'info',\n  },\n});\n\nexport type ToneRecipeVariants = RecipeVariants<typeof toneRecipe>;\n\nexport const content = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n  flex: 1,\n  minWidth: 0,\n});\n\nexport const title = sprinkles({\n  fontWeight: 'semibold',\n});\n\nexport const description = sprinkles({});\n\nexport const actions = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: 2,\n  flexWrap: 'wrap',\n  flexShrink: 0,\n});\n\nexport const closeButton = style([\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 8,\n    height: 8,\n    borderRadius: 'md',\n    backgroundColor: 'transparent',\n    cursor: 'pointer',\n    borderWidth: 0,\n    borderStyle: 'none',\n    color: 'inherit',\n  }),\n  {\n    selectors: {\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n"],"mappings":""}
+{"version":3,"file":"inlineBanner.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/inline_banner/inlineBanner.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { ghostIconButton } from '../../../theme/styleRecipes.css.js';\n\nexport const container = sprinkles({\n  display: 'flex',\n  alignItems: 'flex-start',\n  justifyContent: 'space-between',\n  flexWrap: 'wrap',\n  gap: 3,\n  paddingX: 4,\n  paddingY: 3,\n  borderRadius: 'md',\n  fontSize: 'sm',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'border',\n});\n\nconst toneInfo = sprinkles({\n  backgroundColor: 'brandLightGray',\n  color: 'text',\n});\nconst toneSuccess = sprinkles({\n  backgroundColor: 'green-50',\n  color: 'green-800',\n});\nconst toneWarning = sprinkles({\n  backgroundColor: 'amber-50',\n  color: 'amber-900',\n});\nconst toneDanger = sprinkles({\n  backgroundColor: 'red-50',\n  color: 'red-800',\n});\n\nexport const toneRecipe = recipe({\n  variants: {\n    tone: {\n      info: toneInfo,\n      success: toneSuccess,\n      warning: toneWarning,\n      danger: toneDanger,\n    },\n  },\n  defaultVariants: {\n    tone: 'info',\n  },\n});\n\nexport type ToneRecipeVariants = RecipeVariants<typeof toneRecipe>;\n\nexport const content = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n  flex: 1,\n  minWidth: 0,\n});\n\nexport const title = sprinkles({\n  fontWeight: 'semibold',\n});\n\nexport const description = sprinkles({});\n\nexport const actions = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: 2,\n  flexWrap: 'wrap',\n  flexShrink: 0,\n});\n\nexport const closeButton = style([\n  ghostIconButton,\n  sprinkles({\n    width: 8,\n    height: 8,\n    color: 'inherit',\n  }),\n]);\n"],"mappings":""}

package/lib/esm/backoffice/molecules/sidebar_collapse_toggle/sidebarCollapseToggle.css.js

@@ -1,7 +1,7 @@
 /* empty css                                      */
 /* empty css                                     */
 //#region src/backoffice/molecules/sidebar_collapse_toggle/sidebarCollapseToggle.css.ts
-var e = "_1x7c0k52 _1x7c0k50 txvbqbnw7 txvbqbojg txvbqbp6g txvbqbly7 txvbqb9jg txvbqbcp txvbqbao7 txvbqb1rg txvbqbv0t txvbqb12g txvbqb1py txvbqbv txvbqb8y txvbqbva1 txvbqb78 txvbqb6x txvbqb7k _1x7c0k51 txvbqbw41 txvbqbwm4", t = "_1x7c0k53 txvbqbnvy txvbqboj7 txvbqbdoy", n = "_1x7c0k54 txvbqb9jg txvbqbcp txvbqbdoy txvbqbtxp txvbqbc6p", r = "_1x7c0k55 txvbqb9my", i = "_1x7c0k56 txvbqb9hy";
+var e = "_1x7c0k51 qbwcuej qbwcueh txvbqbdsb txvbqbey txvbqbjtp txvbqb1g5 txvbqb2e3 txvbqb2g9 txvbqb1933 txvbqb19cb txvbqbv txvbqbux3 txvbqb7h txvbqb76 txvbqb7t qbwcuei txvbqb1aey txvbqb1bsa qbwcue4 txvbqb1c2w txvbqb1c9c qbwcue0 txvbqb1cb0 txvbqb1cws _1x7c0k50 txvbqbyoi txvbqbzm3 txvbqb10jb txvbqbvve txvbqbff6 txvbqb9j", t = "_1x7c0k52 txvbqbyo5 txvbqbzlq txvbqbjtp", n = "_1x7c0k53 txvbqbdsb txvbqbey txvbqbjtp txvbqb17hx txvbqbhnc", r = "_1x7c0k54 txvbqbdxd", i = "_1x7c0k55 txvbqbdq5";
 //#endregion
 export { e as button, t as buttonCollapsed, n as icon, r as label, i as labelCollapsed };
 

package/lib/esm/backoffice/molecules/sidebar_collapse_toggle/sidebarCollapseToggle.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebarCollapseToggle.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_collapse_toggle/sidebarCollapseToggle.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nexport const button = style([\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: 2,\n    paddingX: 3,\n    paddingY: 2,\n    borderRadius: 'md',\n    backgroundColor: 'transparent',\n    borderWidth: 0,\n    borderStyle: 'none',\n    cursor: 'pointer',\n    fontSize: 'sm',\n    color: 'textSecondary',\n    transitionProperty: 'colors',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  stateSprinkles({\n    backgroundColor: {\n      hover: 'surfaceMuted',\n    },\n    color: {\n      hover: 'text',\n    },\n  }),\n  {\n    selectors: {\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const buttonCollapsed = sprinkles({\n  justifyContent: 'center',\n  paddingX: 2,\n});\n\nexport const icon = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 6,\n  height: 6,\n});\n\nexport const label = sprinkles({ flex: 1 });\n\nexport const labelCollapsed = sprinkles({\n  display: 'none',\n});\n"],"mappings":""}
+{"version":3,"file":"sidebarCollapseToggle.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_collapse_toggle/sidebarCollapseToggle.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\nimport { ghostIconButton } from '../../../theme/styleRecipes.css.js';\n\nexport const button = style([\n  ghostIconButton,\n  sprinkles({\n    gap: 2,\n    paddingX: 3,\n    paddingY: 2,\n    fontSize: 'sm',\n  }),\n]);\n\nexport const buttonCollapsed = sprinkles({\n  justifyContent: 'center',\n  paddingX: 2,\n});\n\nexport const icon = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 6,\n  height: 6,\n});\n\nexport const label = sprinkles({ flex: 1 });\n\nexport const labelCollapsed = sprinkles({\n  display: 'none',\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/sidebar_nav_item/SidebarNavItem.js

@@ -1,123 +1,119 @@
 import { cx as e } from "../../../theme/tools.js";
-import { actionSlot as t, actions as n, actionsVisible as ee, badge as r, badgeCollapsed as te, dragHandle as ne, icon as i, iconNested as re, item as ie, itemActive as ae, itemCollapsed as a, itemDisabled as o, itemNested as s, label as c, labelCollapsed as l, link as u } from "./sidebarNavItem.css.js";
-import { useCallback as d, useEffect as oe, useRef as f, useState as p } from "react";
-import { Fragment as se, jsx as m, jsxs as h } from "react/jsx-runtime";
-import g from "@plumile/router/routing/Link.js";
+import { actionSlot as t, actions as ee, actionsVisible as te, badge as ne, badgeCollapsed as n, dragHandle as r, icon as i, iconNested as a, item as o, itemActive as s, itemCollapsed as re, itemDisabled as ie, itemDragging as ae, itemNested as oe, label as se, labelCollapsed as ce, link as c } from "./sidebarNavItem.css.js";
+import { useCallback as le, useEffect as ue, useRef as l, useState as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import m from "@plumile/router/routing/Link.js";
 //#region src/backoffice/molecules/sidebar_nav_item/SidebarNavItem.tsx
-var ce = g, _ = ({ label: g, href: _, icon: v, badge: y, isActive: b = !1, disabled: x = !1, onClick: S, onDragStart: le, onDragOver: ue, onDrop: de, onDragEnd: fe, collapsed: C = !1, nested: w = !1, ariaLabel: pe, className: T, actionSlot: E, dragHandleSlot: D, dragHandleLabel: O, draggable: k = !1 }) => {
-	let A = f(null), j = f(null), [M, N] = p(!1), [P, F] = p(!1), I = [ie];
-	C && I.push(a), w && !C && I.push(s), b && I.push(ae), x && I.push(o), T != null && I.push(T);
-	let L = e(...I), R = pe;
-	R == null && typeof g == "string" && (R = g);
-	let z, B;
-	C && (z = R, B = R);
-	let V;
-	b && (V = "page");
-	let H = null;
-	v != null && (H = /* @__PURE__ */ m("span", {
-		className: e(i, { [re]: w && !C }),
-		children: v
+var h = m, g = ({ label: m, href: g, icon: _, badge: v, isActive: y = !1, disabled: b = !1, onClick: de, collapsed: x = !1, nested: S = !1, ariaLabel: fe, className: C, actionSlot: w, dragHandleSlot: T, dragHandleLabel: E, dragHandleProps: D, isDragging: O = !1 }) => {
+	let k = l(null), A = l(null), [j, M] = u(!1), [N, P] = u(!1), F = [o];
+	x && F.push(re), S && !x && F.push(oe), y && F.push(s), b && F.push(ie), O && F.push(ae), C != null && F.push(C);
+	let I = e(...F), L = fe;
+	L == null && typeof m == "string" && (L = m);
+	let R, z;
+	x && (R = L, z = L);
+	let B;
+	y && (B = "page");
+	let V = null;
+	_ != null && (V = /* @__PURE__ */ f("span", {
+		className: e(i, { [a]: S && !x }),
+		children: _
 	}));
-	let U = null;
-	C && (U = l);
-	let me = e(c, U), W = null;
-	if (y != null) {
+	let H = null;
+	x && (H = ce);
+	let pe = e(se, H), U = null;
+	if (v != null) {
 		let t = null;
-		C && (t = te), W = /* @__PURE__ */ m("span", {
-			className: e(r, t),
-			children: y
+		x && (t = n), U = /* @__PURE__ */ f("span", {
+			className: e(ne, t),
+			children: v
 		});
 	}
-	let G = /* @__PURE__ */ h(se, { children: [
-		H,
-		/* @__PURE__ */ m("span", {
-			className: me,
-			children: g
+	let W = /* @__PURE__ */ p(d, { children: [
+		V,
+		/* @__PURE__ */ f("span", {
+			className: pe,
+			children: m
 		}),
-		W
-	] }), K = () => {
-		S?.();
-	}, q = !C && !x && (E != null || D != null), J = d(() => {
-		j.current != null && (clearTimeout(j.current), j.current = null);
+		U
+	] }), G = () => {
+		de?.();
+	}, K = !x && !b && !O && (w != null || T != null), q = le(() => {
+		A.current != null && (clearTimeout(A.current), A.current = null);
 	}, []);
-	oe(() => (q || (N(!1), F(!1), J()), () => {
-		J();
-	}), [J, q]);
-	let he = () => {
-		q && (J(), j.current = setTimeout(() => {
-			N(!0);
+	ue(() => (K || (M(!1), P(!1), q()), () => {
+		q();
+	}), [q, K]);
+	let me = () => {
+		K && (q(), A.current = setTimeout(() => {
+			M(!0);
 		}, 150));
+	}, he = () => {
+		q(), M(!1);
 	}, ge = () => {
-		J(), N(!1);
-	}, _e = () => {
-		q && F(!0);
-	}, ve = (e) => {
-		if (!q) {
-			F(!1);
+		K && P(!0);
+	}, _e = (e) => {
+		if (!K) {
+			P(!1);
 			return;
 		}
 		let t = e.relatedTarget;
-		t != null && A.current?.contains(t) || F(!1);
-	}, Y;
-	Y = x ? /* @__PURE__ */ m("span", {
-		className: u,
+		t != null && k.current?.contains(t) || P(!1);
+	}, J;
+	J = b ? /* @__PURE__ */ f("span", {
+		className: c,
 		"aria-disabled": "true",
-		"aria-label": z,
-		title: B,
-		children: G
-	}) : _ == null ? /* @__PURE__ */ m("button", {
+		"aria-label": R,
+		title: z,
+		children: W
+	}) : g == null ? /* @__PURE__ */ f("button", {
 		type: "button",
-		className: u,
-		onClick: K,
-		"aria-current": V,
-		"aria-label": z,
-		title: B,
-		children: G
-	}) : /* @__PURE__ */ m(ce, {
-		to: _,
-		className: u,
-		"aria-current": V,
-		"aria-label": z,
-		title: B,
-		onClick: K,
-		children: G
+		className: c,
+		onClick: G,
+		"aria-current": B,
+		"aria-label": R,
+		title: z,
+		children: W
+	}) : /* @__PURE__ */ f(h, {
+		to: g,
+		className: c,
+		"aria-current": B,
+		"aria-label": R,
+		title: z,
+		onClick: G,
+		children: W
 	});
-	let ye = q && (M || P), X;
-	ye && (X = ee);
-	let be = e(n, X), Z = null;
-	D != null && !C && (Z = /* @__PURE__ */ m("button", {
+	let Y = K && (j || N), X;
+	Y && (X = te);
+	let ve = e(ee, X), Z = null;
+	T != null && !x && (Z = /* @__PURE__ */ f("button", {
+		...D,
 		type: "button",
-		className: ne,
-		draggable: k,
-		onDragStart: le,
-		onDragEnd: fe,
-		"aria-label": O,
-		title: O,
-		children: D
+		className: e(r, D?.className),
+		"aria-label": E,
+		title: E,
+		children: T
 	}));
 	let Q = null;
-	E != null && !C && (Q = /* @__PURE__ */ m("span", {
+	w != null && !x && (Q = /* @__PURE__ */ f("span", {
 		className: t,
-		children: E
+		children: w
 	}));
 	let $ = null;
-	return q && ($ = /* @__PURE__ */ h("span", {
-		className: be,
+	return K && ($ = /* @__PURE__ */ p("span", {
+		className: ve,
 		children: [Z, Q]
-	})), /* @__PURE__ */ h("div", {
-		className: L,
-		onDragOver: ue,
-		onDrop: de,
-		onMouseEnter: he,
-		onMouseLeave: ge,
-		onFocusCapture: _e,
-		onBlurCapture: ve,
-		ref: A,
+	})), /* @__PURE__ */ p("div", {
+		className: I,
+		onMouseEnter: me,
+		onMouseLeave: he,
+		onFocusCapture: ge,
+		onBlurCapture: _e,
+		ref: k,
 		role: "listitem",
-		children: [Y, $]
+		children: [J, $]
 	});
 };
 //#endregion
-export { _ as SidebarNavItem, _ as default };
+export { g as SidebarNavItem, g as default };
 
 //# sourceMappingURL=SidebarNavItem.js.map

package/lib/esm/backoffice/molecules/sidebar_nav_item/SidebarNavItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarNavItem.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_nav_item/SidebarNavItem.tsx"],"sourcesContent":["import Link from '@plumile/router/routing/Link.js';\nimport {\n  type AnchorHTMLAttributes,\n  type ComponentPropsWithoutRef,\n  type DragEvent,\n  type FocusEvent,\n  type JSX,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport * as styles from './sidebarNavItem.css.js';\nimport { cx } from '../../../theme/tools.js';\n\ntype RouterLinkProps = ComponentPropsWithoutRef<typeof Link> &\n  AnchorHTMLAttributes<HTMLAnchorElement>;\nconst RouterLink = Link as unknown as (props: RouterLinkProps) => JSX.Element;\n\nexport type SidebarNavItemProps = {\n  label: ReactNode;\n  href?: string;\n  icon?: ReactNode;\n  badge?: ReactNode;\n  isActive?: boolean;\n  disabled?: boolean;\n  onClick?: () => void;\n  onDragStart?: (event: DragEvent) => void;\n  onDragOver?: (event: DragEvent) => void;\n  onDrop?: (event: DragEvent) => void;\n  onDragEnd?: (event: DragEvent) => void;\n  collapsed?: boolean;\n  nested?: boolean;\n  ariaLabel?: string;\n  className?: string;\n  actionSlot?: ReactNode;\n  dragHandleSlot?: ReactNode;\n  dragHandleLabel?: string;\n  draggable?: boolean;\n};\n\nexport const SidebarNavItem = ({\n  label,\n  href,\n  icon,\n  badge,\n  isActive = false,\n  disabled = false,\n  onClick,\n  onDragStart,\n  onDragOver,\n  onDrop,\n  onDragEnd,\n  collapsed = false,\n  nested = false,\n  ariaLabel,\n  className,\n  actionSlot,\n  dragHandleSlot,\n  dragHandleLabel,\n  draggable = false,\n}: SidebarNavItemProps): JSX.Element => {\n  const itemRef = useRef<HTMLDivElement | null>(null);\n  const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const [isHoverIntent, setIsHoverIntent] = useState(false);\n  const [isFocusWithin, setIsFocusWithin] = useState(false);\n\n  const itemClassNames: (string | null | undefined)[] = [styles.item];\n  if (collapsed) {\n    itemClassNames.push(styles.itemCollapsed);\n  }\n  if (nested && !collapsed) {\n    itemClassNames.push(styles.itemNested);\n  }\n  if (isActive) {\n    itemClassNames.push(styles.itemActive);\n  }\n  if (disabled) {\n    itemClassNames.push(styles.itemDisabled);\n  }\n  if (className != null) {\n    itemClassNames.push(className);\n  }\n  const itemClassName = cx(...itemClassNames);\n\n  let resolvedAriaLabel: string | undefined = ariaLabel;\n  if (resolvedAriaLabel == null && typeof label === 'string') {\n    resolvedAriaLabel = label;\n  }\n\n  let collapsedAriaLabel: string | undefined;\n  let collapsedTitle: string | undefined;\n  if (collapsed) {\n    collapsedAriaLabel = resolvedAriaLabel;\n    collapsedTitle = resolvedAriaLabel;\n  }\n\n  let ariaCurrent: 'page' | undefined;\n  if (isActive) {\n    ariaCurrent = 'page';\n  }\n\n  let iconNode: JSX.Element | null = null;\n  if (icon != null) {\n    iconNode = (\n      <span\n        className={cx(styles.icon, {\n          [styles.iconNested]: nested && !collapsed,\n        })}\n      >\n        {icon}\n      </span>\n    );\n  }\n\n  let labelExtraClass: string | null = null;\n  if (collapsed) {\n    labelExtraClass = styles.labelCollapsed;\n  }\n  const labelClassName = cx(styles.label, labelExtraClass);\n\n  let badgeNode: JSX.Element | null = null;\n  if (badge != null) {\n    let badgeExtraClass: string | null = null;\n    if (collapsed) {\n      badgeExtraClass = styles.badgeCollapsed;\n    }\n    badgeNode = (\n      <span className={cx(styles.badge, badgeExtraClass)}>{badge}</span>\n    );\n  }\n\n  const content = (\n    <>\n      {iconNode}\n      <span className={labelClassName}>{label}</span>\n      {badgeNode}\n    </>\n  );\n\n  const handleClick = (): void => {\n    if (onClick != null) {\n      onClick();\n    }\n  };\n\n  const shouldRenderActions =\n    !collapsed && !disabled && (actionSlot != null || dragHandleSlot != null);\n\n  const clearHoverTimeout = useCallback((): void => {\n    if (hoverTimeoutRef.current != null) {\n      clearTimeout(hoverTimeoutRef.current);\n      hoverTimeoutRef.current = null;\n    }\n  }, []);\n\n  useEffect(() => {\n    if (!shouldRenderActions) {\n      setIsHoverIntent(false);\n      setIsFocusWithin(false);\n      clearHoverTimeout();\n    }\n\n    return () => {\n      clearHoverTimeout();\n    };\n  }, [clearHoverTimeout, shouldRenderActions]);\n\n  const handleMouseEnter = (): void => {\n    if (!shouldRenderActions) {\n      return;\n    }\n    clearHoverTimeout();\n    hoverTimeoutRef.current = setTimeout(() => {\n      setIsHoverIntent(true);\n    }, 150);\n  };\n\n  const handleMouseLeave = (): void => {\n    clearHoverTimeout();\n    setIsHoverIntent(false);\n  };\n\n  const handleFocusCapture = (): void => {\n    if (!shouldRenderActions) {\n      return;\n    }\n    setIsFocusWithin(true);\n  };\n\n  const handleBlurCapture = (event: FocusEvent<HTMLDivElement>): void => {\n    if (!shouldRenderActions) {\n      setIsFocusWithin(false);\n      return;\n    }\n    const nextTarget = event.relatedTarget as Node | null;\n    if (nextTarget != null && itemRef.current?.contains(nextTarget)) {\n      return;\n    }\n    setIsFocusWithin(false);\n  };\n\n  let mainNode: JSX.Element;\n  if (disabled) {\n    mainNode = (\n      <span\n        className={styles.link}\n        aria-disabled=\"true\"\n        aria-label={collapsedAriaLabel}\n        title={collapsedTitle}\n      >\n        {content}\n      </span>\n    );\n  } else if (href != null) {\n    mainNode = (\n      <RouterLink\n        to={href}\n        className={styles.link}\n        aria-current={ariaCurrent}\n        aria-label={collapsedAriaLabel}\n        title={collapsedTitle}\n        onClick={handleClick}\n      >\n        {content}\n      </RouterLink>\n    );\n  } else {\n    mainNode = (\n      <button\n        type=\"button\"\n        className={styles.link}\n        onClick={handleClick}\n        aria-current={ariaCurrent}\n        aria-label={collapsedAriaLabel}\n        title={collapsedTitle}\n      >\n        {content}\n      </button>\n    );\n  }\n\n  const isActionsVisible =\n    shouldRenderActions && (isHoverIntent || isFocusWithin);\n  let actionsVisibilityClass: string | undefined;\n  if (isActionsVisible) {\n    actionsVisibilityClass = styles.actionsVisible;\n  }\n  const actionsClassName = cx(styles.actions, actionsVisibilityClass);\n\n  let dragHandleNode: JSX.Element | null = null;\n  if (dragHandleSlot != null && !collapsed) {\n    dragHandleNode = (\n      <button\n        type=\"button\"\n        className={styles.dragHandle}\n        draggable={draggable}\n        onDragStart={onDragStart}\n        onDragEnd={onDragEnd}\n        aria-label={dragHandleLabel}\n        title={dragHandleLabel}\n      >\n        {dragHandleSlot}\n      </button>\n    );\n  }\n\n  let actionNode: JSX.Element | null = null;\n  if (actionSlot != null && !collapsed) {\n    actionNode = <span className={styles.actionSlot}>{actionSlot}</span>;\n  }\n\n  let actionsNode: JSX.Element | null = null;\n  if (shouldRenderActions) {\n    actionsNode = (\n      <span className={actionsClassName}>\n        {dragHandleNode}\n        {actionNode}\n      </span>\n    );\n  }\n\n  return (\n    <div\n      className={itemClassName}\n      onDragOver={onDragOver}\n      onDrop={onDrop}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onFocusCapture={handleFocusCapture}\n      onBlurCapture={handleBlurCapture}\n      ref={itemRef}\n      role=\"listitem\"\n    >\n      {mainNode}\n      {actionsNode}\n    </div>\n  );\n};\n\nexport default SidebarNavItem;\n"],"mappings":"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"}
+{"version":3,"file":"SidebarNavItem.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_nav_item/SidebarNavItem.tsx"],"sourcesContent":["import Link from '@plumile/router/routing/Link.js';\nimport {\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type JSX,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport * as styles from './sidebarNavItem.css.js';\nimport { cx } from '../../../theme/tools.js';\n\ntype RouterLinkProps = ComponentPropsWithoutRef<typeof Link> &\n  AnchorHTMLAttributes<HTMLAnchorElement>;\nconst RouterLink = Link as unknown as (props: RouterLinkProps) => JSX.Element;\n\nexport type SidebarNavItemProps = {\n  label: ReactNode;\n  href?: string;\n  icon?: ReactNode;\n  badge?: ReactNode;\n  isActive?: boolean;\n  disabled?: boolean;\n  onClick?: () => void;\n  collapsed?: boolean;\n  nested?: boolean;\n  ariaLabel?: string;\n  className?: string;\n  actionSlot?: ReactNode;\n  dragHandleSlot?: ReactNode;\n  dragHandleLabel?: string;\n  dragHandleProps?: ButtonHTMLAttributes<HTMLButtonElement>;\n  isDragging?: boolean;\n};\n\nexport const SidebarNavItem = ({\n  label,\n  href,\n  icon,\n  badge,\n  isActive = false,\n  disabled = false,\n  onClick,\n  collapsed = false,\n  nested = false,\n  ariaLabel,\n  className,\n  actionSlot,\n  dragHandleSlot,\n  dragHandleLabel,\n  dragHandleProps,\n  isDragging = false,\n}: SidebarNavItemProps): JSX.Element => {\n  const itemRef = useRef<HTMLDivElement | null>(null);\n  const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const [isHoverIntent, setIsHoverIntent] = useState(false);\n  const [isFocusWithin, setIsFocusWithin] = useState(false);\n\n  const itemClassNames: (string | null | undefined)[] = [styles.item];\n  if (collapsed) {\n    itemClassNames.push(styles.itemCollapsed);\n  }\n  if (nested && !collapsed) {\n    itemClassNames.push(styles.itemNested);\n  }\n  if (isActive) {\n    itemClassNames.push(styles.itemActive);\n  }\n  if (disabled) {\n    itemClassNames.push(styles.itemDisabled);\n  }\n  if (isDragging) {\n    itemClassNames.push(styles.itemDragging);\n  }\n  if (className != null) {\n    itemClassNames.push(className);\n  }\n  const itemClassName = cx(...itemClassNames);\n\n  let resolvedAriaLabel: string | undefined = ariaLabel;\n  if (resolvedAriaLabel == null && typeof label === 'string') {\n    resolvedAriaLabel = label;\n  }\n\n  let collapsedAriaLabel: string | undefined;\n  let collapsedTitle: string | undefined;\n  if (collapsed) {\n    collapsedAriaLabel = resolvedAriaLabel;\n    collapsedTitle = resolvedAriaLabel;\n  }\n\n  let ariaCurrent: 'page' | undefined;\n  if (isActive) {\n    ariaCurrent = 'page';\n  }\n\n  let iconNode: JSX.Element | null = null;\n  if (icon != null) {\n    iconNode = (\n      <span\n        className={cx(styles.icon, {\n          [styles.iconNested]: nested && !collapsed,\n        })}\n      >\n        {icon}\n      </span>\n    );\n  }\n\n  let labelExtraClass: string | null = null;\n  if (collapsed) {\n    labelExtraClass = styles.labelCollapsed;\n  }\n  const labelClassName = cx(styles.label, labelExtraClass);\n\n  let badgeNode: JSX.Element | null = null;\n  if (badge != null) {\n    let badgeExtraClass: string | null = null;\n    if (collapsed) {\n      badgeExtraClass = styles.badgeCollapsed;\n    }\n    badgeNode = (\n      <span className={cx(styles.badge, badgeExtraClass)}>{badge}</span>\n    );\n  }\n\n  const content = (\n    <>\n      {iconNode}\n      <span className={labelClassName}>{label}</span>\n      {badgeNode}\n    </>\n  );\n\n  const handleClick = (): void => {\n    if (onClick != null) {\n      onClick();\n    }\n  };\n\n  const shouldRenderActions =\n    !collapsed &&\n    !disabled &&\n    !isDragging &&\n    (actionSlot != null || dragHandleSlot != null);\n\n  const clearHoverTimeout = useCallback((): void => {\n    if (hoverTimeoutRef.current != null) {\n      clearTimeout(hoverTimeoutRef.current);\n      hoverTimeoutRef.current = null;\n    }\n  }, []);\n\n  useEffect(() => {\n    if (!shouldRenderActions) {\n      setIsHoverIntent(false);\n      setIsFocusWithin(false);\n      clearHoverTimeout();\n    }\n\n    return () => {\n      clearHoverTimeout();\n    };\n  }, [clearHoverTimeout, shouldRenderActions]);\n\n  const handleMouseEnter = (): void => {\n    if (!shouldRenderActions) {\n      return;\n    }\n    clearHoverTimeout();\n    hoverTimeoutRef.current = setTimeout(() => {\n      setIsHoverIntent(true);\n    }, 150);\n  };\n\n  const handleMouseLeave = (): void => {\n    clearHoverTimeout();\n    setIsHoverIntent(false);\n  };\n\n  const handleFocusCapture = (): void => {\n    if (!shouldRenderActions) {\n      return;\n    }\n    setIsFocusWithin(true);\n  };\n\n  const handleBlurCapture = (event: FocusEvent<HTMLDivElement>): void => {\n    if (!shouldRenderActions) {\n      setIsFocusWithin(false);\n      return;\n    }\n    const nextTarget = event.relatedTarget as Node | null;\n    if (nextTarget != null && itemRef.current?.contains(nextTarget)) {\n      return;\n    }\n    setIsFocusWithin(false);\n  };\n\n  let mainNode: JSX.Element;\n  if (disabled) {\n    mainNode = (\n      <span\n        className={styles.link}\n        aria-disabled=\"true\"\n        aria-label={collapsedAriaLabel}\n        title={collapsedTitle}\n      >\n        {content}\n      </span>\n    );\n  } else if (href != null) {\n    mainNode = (\n      <RouterLink\n        to={href}\n        className={styles.link}\n        aria-current={ariaCurrent}\n        aria-label={collapsedAriaLabel}\n        title={collapsedTitle}\n        onClick={handleClick}\n      >\n        {content}\n      </RouterLink>\n    );\n  } else {\n    mainNode = (\n      <button\n        type=\"button\"\n        className={styles.link}\n        onClick={handleClick}\n        aria-current={ariaCurrent}\n        aria-label={collapsedAriaLabel}\n        title={collapsedTitle}\n      >\n        {content}\n      </button>\n    );\n  }\n\n  const isActionsVisible =\n    shouldRenderActions && (isHoverIntent || isFocusWithin);\n  let actionsVisibilityClass: string | undefined;\n  if (isActionsVisible) {\n    actionsVisibilityClass = styles.actionsVisible;\n  }\n  const actionsClassName = cx(styles.actions, actionsVisibilityClass);\n\n  let dragHandleNode: JSX.Element | null = null;\n  if (dragHandleSlot != null && !collapsed) {\n    dragHandleNode = (\n      <button\n        {...dragHandleProps}\n        type=\"button\"\n        className={cx(styles.dragHandle, dragHandleProps?.className)}\n        aria-label={dragHandleLabel}\n        title={dragHandleLabel}\n      >\n        {dragHandleSlot}\n      </button>\n    );\n  }\n\n  let actionNode: JSX.Element | null = null;\n  if (actionSlot != null && !collapsed) {\n    actionNode = <span className={styles.actionSlot}>{actionSlot}</span>;\n  }\n\n  let actionsNode: JSX.Element | null = null;\n  if (shouldRenderActions) {\n    actionsNode = (\n      <span className={actionsClassName}>\n        {dragHandleNode}\n        {actionNode}\n      </span>\n    );\n  }\n\n  return (\n    <div\n      className={itemClassName}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onFocusCapture={handleFocusCapture}\n      onBlurCapture={handleBlurCapture}\n      ref={itemRef}\n      role=\"listitem\"\n    >\n      {mainNode}\n      {actionsNode}\n    </div>\n  );\n};\n\nexport default SidebarNavItem;\n"],"mappings":"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"}

package/lib/esm/backoffice/molecules/sidebar_nav_item/sidebarNavItem.css.js

@@ -1,8 +1,8 @@
 /* empty css                                      */
 /* empty css                              */
 //#region src/backoffice/molecules/sidebar_nav_item/sidebarNavItem.css.ts
-var e = "_1nm2b9q0 txvbqb9jg txvbqbcp txvbqbany txvbqb7d txvbqb6x txvbqb7k txvbqbaj7 txvbqbvbl txvbqbtvp txvbqb2k", t = "_1nm2b9q1 txvbqbvcf txvbqbtvy txvbqb2l", n = "_1nm2b9q4 _1nm2b9q2 txvbqbnw7 txvbqbojg txvbqbpry txvbqbmjp txvbqb9ip txvbqbcp txvbqbao7 txvbqb1rp txvbqb8y txvbqb77 txvbqb6x txvbqb7k txvbqbv txvbqbva1 _1nm2b9q3 txvbqbw41 txvbqbwm4", r = "_1nm2b9q5 txvbqbnvy txvbqboj7 txvbqbdoy", i = "_1nm2b9q6 txvbqbnvy txvbqboj7 txvbqbpry txvbqbmjp txvbqb1rg", a = "_1nm2b9q7 txvbqbamp txvbqbv3t txvbqbv9z txvbqb8t7", o = "_1nm2b9q9 _1nm2b9q8 txvbqbva3 txvbqbr", s = "_1nm2b9qa txvbqb9ip txvbqbcp txvbqbao7 txvbqb9my txvbqbk5y txvbqb3b txvbqbv0t txvbqb12g txvbqb1py txvbqblag txvbqbt6p txvbqbv67 txvbqb1p", c = "_1nm2b9qb txvbqb9jg txvbqbcp", l = "_1nm2b9qe _1nm2b9qc txvbqb9jg txvbqbcp txvbqbdoy txvbqbtxp txvbqbc6p txvbqb1rg txvbqb12g txvbqb1py txvbqblag txvbqbv0t txvbqbva1 txvbqbi _1nm2b9qd txvbqbw41 txvbqbwm4", u = "_1nm2b9qf txvbqb9jg txvbqbcp txvbqbdoy txvbqbtxp txvbqbc6p txvbqbaj7 txvbqbv67", d = "_1nm2b9qg txvbqbtxg txvbqbc6g", f = "_1nm2b9qh txvbqb9my txvbqbk5y", p = "_1nm2b9qi txvbqb9hy", m = "_1nm2b9qj txvbqb9jg txvbqbcp txvbqbdoy txvbqbaj7", h = "_1nm2b9qk txvbqb9hy";
+var e = "_1nm2b9q0 txvbqbdsb txvbqbey txvbqbfet txvbqb7m txvbqb76 txvbqb7t txvbqbf7y txvbqb19dv txvbqb17f1 txvbqb2o", t = "_1nm2b9q1 txvbqb19ep txvbqb17fe txvbqb2p", n = "_1nm2b9q4 _1nm2b9q2 txvbqbyoi txvbqbzm3 txvbqb11ed txvbqbwqg txvbqbdr8 txvbqbey txvbqbff6 txvbqb2gm txvbqb9j txvbqb7g txvbqb76 txvbqb7t txvbqbv txvbqb19cb _1nm2b9q3 txvbqb1aex txvbqb1bs9", r = "_1nm2b9q5 txvbqbyo5 txvbqbzlq txvbqbjtp", i = "_1nm2b9q6 txvbqbyo5 txvbqbzlq txvbqb11ed txvbqbwqg txvbqb2g9", a = "_1nm2b9q7 txvbqbfd0 txvbqb1963 txvbqb19c9 txvbqbcol", o = "_1nm2b9q9 _1nm2b9q8 txvbqb19cd txvbqbr", s = "_1nm2b9qa txvbqb19eb txvbqbj", c = "_1nm2b9qb txvbqbdr8 txvbqbey txvbqbff6 txvbqbdxd txvbqbt9i txvbqb3f txvbqb1933 txvbqb1g5 txvbqb2e3 txvbqbux3 txvbqb16ex txvbqb198h txvbqb1p", l = "_1nm2b9qc txvbqbdsb txvbqbey", u = "_1nm2b9qf _1nm2b9qd txvbqbdsb txvbqbey txvbqbjtp txvbqb17hx txvbqbhnc txvbqb2g9 txvbqb1g5 txvbqb2e3 txvbqbux3 txvbqb1933 txvbqb19cb txvbqbi _1nm2b9qe txvbqb1aex txvbqb1bs9", d = "_1nm2b9qg txvbqbdsb txvbqbey txvbqbjtp txvbqb17hx txvbqbhnc txvbqbf7y txvbqb198h", f = "_1nm2b9qh txvbqb17hk txvbqbhmz", p = "_1nm2b9qi txvbqbdxd txvbqbt9i", m = "_1nm2b9qj txvbqbdq5", h = "_1nm2b9qk txvbqbdsb txvbqbey txvbqbjtp txvbqbf7y", g = "_1nm2b9ql txvbqbdq5";
 //#endregion
-export { c as actionSlot, e as actions, t as actionsVisible, m as badge, h as badgeCollapsed, l as dragHandle, u as icon, d as iconNested, n as item, a as itemActive, r as itemCollapsed, o as itemDisabled, i as itemNested, f as label, p as labelCollapsed, s as link };
+export { l as actionSlot, e as actions, t as actionsVisible, h as badge, g as badgeCollapsed, u as dragHandle, d as icon, f as iconNested, n as item, a as itemActive, r as itemCollapsed, o as itemDisabled, s as itemDragging, i as itemNested, p as label, m as labelCollapsed, c as link };
 
 //# sourceMappingURL=sidebarNavItem.css.js.map

package/lib/esm/backoffice/molecules/sidebar_nav_item/sidebarNavItem.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebarNavItem.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_nav_item/sidebarNavItem.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nconst inlineFlex = 'inline-flex';\n\nexport const actions = sprinkles({\n  display: inlineFlex,\n  alignItems: 'center',\n  gap: 1,\n  transitionProperty: 'opacity',\n  transitionDuration: 150,\n  transitionTimingFunction: 'ease',\n  flexShrink: 0,\n  opacity: 0,\n  visibility: 'hidden',\n  pointerEvents: 'none',\n});\n\nexport const actionsVisible = sprinkles({\n  opacity: 100,\n  visibility: 'visible',\n  pointerEvents: 'auto',\n});\n\nexport const item = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 2,\n    paddingY: 1.5,\n    paddingX: 3,\n    borderRadius: 'lg',\n    fontSize: 'sm',\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n    cursor: 'pointer',\n    color: 'textSecondary',\n  }),\n  stateSprinkles({\n    backgroundColor: {\n      hover: 'surfaceMuted',\n    },\n    color: {\n      hover: 'text',\n    },\n  }),\n  {\n    selectors: {\n      '&:has(:focus-visible)': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const itemCollapsed = sprinkles({\n  justifyContent: 'center',\n  paddingX: 2,\n});\n\nexport const itemNested = sprinkles({\n  paddingX: 2,\n  paddingY: 1.5,\n  borderRadius: 'md',\n});\n\nexport const itemActive = sprinkles({\n  fontWeight: 'semibold',\n  backgroundColor: 'primaryLight',\n  color: 'text',\n  boxShadow: 'primaryLightRing',\n});\n\nexport const itemDisabled = style([\n  sprinkles({\n    color: 'textMuted',\n    cursor: 'not-allowed',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n]);\n\nexport const link = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  flex: 1,\n  minWidth: 0,\n  textDecoration: 'none',\n  backgroundColor: 'transparent',\n  borderWidth: 0,\n  borderStyle: 'none',\n  padding: 0,\n  textAlign: 'left',\n  color: 'inherit',\n  font: 'inherit',\n});\n\nexport const actionSlot = sprinkles({\n  display: inlineFlex,\n  alignItems: 'center',\n});\n\nexport const dragHandle = style([\n  sprinkles({\n    display: inlineFlex,\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 6,\n    height: 6,\n    borderRadius: 'md',\n    borderWidth: 0,\n    borderStyle: 'none',\n    padding: 0,\n    backgroundColor: 'transparent',\n    color: 'textSecondary',\n    cursor: 'grab',\n  }),\n  stateSprinkles({\n    backgroundColor: {\n      hover: 'surfaceMuted',\n    },\n    color: {\n      hover: 'text',\n    },\n  }),\n  {\n    selectors: {\n      '&:active': {\n        cursor: 'grabbing',\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const icon = sprinkles({\n  display: inlineFlex,\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 6,\n  height: 6,\n  flexShrink: 0,\n  color: 'inherit',\n});\n\nexport const iconNested = sprinkles({\n  width: 5,\n  height: 5,\n});\n\nexport const label = sprinkles({\n  flex: 1,\n  minWidth: 0,\n});\n\nexport const labelCollapsed = sprinkles({\n  display: 'none',\n});\n\nexport const badge = sprinkles({\n  display: inlineFlex,\n  alignItems: 'center',\n  justifyContent: 'center',\n  flexShrink: 0,\n});\n\nexport const badgeCollapsed = sprinkles({\n  display: 'none',\n});\n"],"mappings":""}
+{"version":3,"file":"sidebarNavItem.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_nav_item/sidebarNavItem.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { sprinkles, stateSprinkles } from '../../../theme/sprinkles.css.js';\nimport { vars } from '../../../theme/themeContract.js';\n\nconst inlineFlex = 'inline-flex';\n\nexport const actions = sprinkles({\n  display: inlineFlex,\n  alignItems: 'center',\n  gap: 1,\n  transitionProperty: 'opacity',\n  transitionDuration: 150,\n  transitionTimingFunction: 'ease',\n  flexShrink: 0,\n  opacity: 0,\n  visibility: 'hidden',\n  pointerEvents: 'none',\n});\n\nexport const actionsVisible = sprinkles({\n  opacity: 100,\n  visibility: 'visible',\n  pointerEvents: 'auto',\n});\n\nexport const item = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 2,\n    paddingY: 1.5,\n    paddingX: 3,\n    borderRadius: 'lg',\n    fontSize: 'sm',\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n    cursor: 'pointer',\n    color: 'textSecondary',\n  }),\n  stateSprinkles({\n    backgroundColor: {\n      hover: 'surfaceMuted',\n    },\n    color: {\n      hover: 'text',\n    },\n  }),\n  {\n    selectors: {\n      '&:has(:focus-visible)': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const itemCollapsed = sprinkles({\n  justifyContent: 'center',\n  paddingX: 2,\n});\n\nexport const itemNested = sprinkles({\n  paddingX: 2,\n  paddingY: 1.5,\n  borderRadius: 'md',\n});\n\nexport const itemActive = sprinkles({\n  fontWeight: 'semibold',\n  backgroundColor: 'primaryLight',\n  color: 'text',\n  boxShadow: 'primaryLightRing',\n});\n\nexport const itemDisabled = style([\n  sprinkles({\n    color: 'textMuted',\n    cursor: 'not-allowed',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        backgroundColor: 'transparent',\n      },\n    },\n  },\n]);\n\nexport const itemDragging = sprinkles({\n  opacity: 50,\n  cursor: 'grabbing',\n});\n\nexport const link = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  flex: 1,\n  minWidth: 0,\n  textDecoration: 'none',\n  backgroundColor: 'transparent',\n  borderWidth: 0,\n  borderStyle: 'none',\n  padding: 0,\n  textAlign: 'left',\n  color: 'inherit',\n  font: 'inherit',\n});\n\nexport const actionSlot = sprinkles({\n  display: inlineFlex,\n  alignItems: 'center',\n});\n\nexport const dragHandle = style([\n  sprinkles({\n    display: inlineFlex,\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 6,\n    height: 6,\n    borderRadius: 'md',\n    borderWidth: 0,\n    borderStyle: 'none',\n    padding: 0,\n    backgroundColor: 'transparent',\n    color: 'textSecondary',\n    cursor: 'grab',\n  }),\n  stateSprinkles({\n    backgroundColor: {\n      hover: 'surfaceMuted',\n    },\n    color: {\n      hover: 'text',\n    },\n  }),\n  {\n    selectors: {\n      '&:active': {\n        cursor: 'grabbing',\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const icon = sprinkles({\n  display: inlineFlex,\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 6,\n  height: 6,\n  flexShrink: 0,\n  color: 'inherit',\n});\n\nexport const iconNested = sprinkles({\n  width: 5,\n  height: 5,\n});\n\nexport const label = sprinkles({\n  flex: 1,\n  minWidth: 0,\n});\n\nexport const labelCollapsed = sprinkles({\n  display: 'none',\n});\n\nexport const badge = sprinkles({\n  display: inlineFlex,\n  alignItems: 'center',\n  justifyContent: 'center',\n  flexShrink: 0,\n});\n\nexport const badgeCollapsed = sprinkles({\n  display: 'none',\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/sidebar_nav_section/SidebarNavSection.js

@@ -1,91 +1,188 @@
 import { cx as e } from "../../../theme/tools.js";
 import { ChevronDownSvg as t } from "../../../icons/ChevronDownSvg.js";
 import { SidebarNavItem as n } from "../sidebar_nav_item/SidebarNavItem.js";
-import { header as r, headerButton as i, headerButtonSidebarCollapsed as a, headerSidebarCollapsed as o, items as s, itemsNested as c, section as l, title as u, titleContent as d, titleIcon as f, titleSidebarCollapsed as p, toggleIcon as m, toggleIconCollapsed as h } from "./sidebarNavSection.css.js";
-import { useCallback as g, useId as _, useState as v } from "react";
-import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { CSS as r } from "../../../node_modules/@dnd-kit/utilities/dist/utilities.esm.js";
+import { DndContext as i, DragOverlay as a, KeyboardSensor as o, PointerSensor as s, TouchSensor as c, closestCenter as ee, useSensor as l, useSensors as u } from "../../../node_modules/@dnd-kit/core/dist/core.esm.js";
+import { SortableContext as d, sortableKeyboardCoordinates as f, useSortable as p, verticalListSortingStrategy as m } from "../../../node_modules/@dnd-kit/sortable/dist/sortable.esm.js";
+import { header as h, headerButton as g, headerButtonSidebarCollapsed as _, headerSidebarCollapsed as te, items as v, itemsNested as y, section as ne, sortableItem as b, sortableItemDragging as x, title as re, titleContent as S, titleIcon as ie, titleSidebarCollapsed as ae, toggleIcon as oe, toggleIconCollapsed as se } from "./sidebarNavSection.css.js";
+import { useCallback as C, useId as w, useMemo as T, useState as E } from "react";
+import { jsx as D, jsxs as O } from "react/jsx-runtime";
+import { useTranslation as ce } from "react-i18next";
 //#region src/backoffice/molecules/sidebar_nav_section/SidebarNavSection.tsx
-var x = ({ title: x, icon: S, items: C, collapsible: w = !1, isCollapsed: T, defaultCollapsed: E = !1, onCollapsedChange: D, collapsed: O = !1, className: k }) => {
-	let [A, j] = v(E), M = _(), N = _(), P = T ?? A, F = w, I = g(() => {
-		if (!F) return;
-		let e = !P;
-		T ?? j(e), D?.(e);
+var le = ({ item: t, isNested: i, sidebarCollapsed: a, dragHandleLabel: o, insertionPlacement: s }) => {
+	let { id: c, data: ee, ...l } = t, { attributes: u, listeners: d, setNodeRef: f, transform: m, transition: h, isDragging: g } = p({
+		id: c,
+		disabled: a
+	});
+	return /* @__PURE__ */ O("div", {
+		ref: f,
+		style: {
+			transform: r.Transform.toString(m),
+			transition: h
+		},
+		className: e(b, { [x]: g }),
+		children: [
+			s === "before" && /* @__PURE__ */ D("span", {
+				className: "_1rp5mg6k _1rp5mg6j txvbqbqv7 txvbqbo2g txvbqbdqi txvbqb2is txvbqb1961",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ D(n, {
+				...l,
+				collapsed: a,
+				nested: i,
+				dragHandleLabel: l.dragHandleLabel ?? o,
+				dragHandleProps: {
+					...u,
+					...d
+				},
+				isDragging: g
+			}),
+			s === "after" && /* @__PURE__ */ D("span", {
+				className: "_1rp5mg6k _1rp5mg6j txvbqbqv7 txvbqbo2g txvbqbdqi txvbqb2is txvbqb1961",
+				"aria-hidden": "true"
+			})
+		]
+	});
+}, k = ({ title: r, icon: p, items: b, collapsible: x = !1, isCollapsed: k, defaultCollapsed: ue = !1, onCollapsedChange: A, collapsed: j = !1, reorder: M, className: de }) => {
+	let [fe, pe] = E(ue), N = w(), P = w(), { t: F } = ce("ui", { useSuspense: !1 }), [I, L] = E(null), [R, z] = E(null), B = k ?? fe, V = x, me = C(() => {
+		if (!V) return;
+		let e = !B;
+		k ?? pe(e), A?.(e);
 	}, [
-		F,
-		P,
-		T,
-		D
-	]), L;
-	typeof x == "string" && (L = x);
-	let R = e(u, { [p]: O }), z = e(m, { [h]: P }), B;
-	O && (B = L);
-	let V = null;
-	S != null && (V = /* @__PURE__ */ y("span", {
-		className: f,
+		V,
+		B,
+		k,
+		A
+	]), H;
+	typeof r == "string" && (H = r);
+	let U = e(re, { [ae]: j }), he = e(oe, { [se]: B }), W;
+	j && (W = H);
+	let G = null;
+	p != null && (G = /* @__PURE__ */ D("span", {
+		className: ie,
 		"aria-hidden": "true",
-		children: S
+		children: p
 	}));
-	let H = null;
-	x != null && (H = F ? /* @__PURE__ */ b("button", {
-		id: N,
+	let ge = M?.enabled === !0 && b.length > 1, K = T(() => b.map((e) => e.id), [b]), _e = u(l(s, { activationConstraint: { distance: 4 } }), l(c, { activationConstraint: {
+		delay: 180,
+		tolerance: 5
+	} }), l(o, { coordinateGetter: f })), q = C(() => {
+		L(null), z(null);
+	}, []), ve = C((e) => {
+		L(e.active.id), z(e.active.id);
+	}, []), ye = C((e) => {
+		let t = b.find((t) => t.id === String(e.active.id)) ?? null, n = null;
+		e.over != null && (n = b.find((t) => t.id === String(e.over?.id)) ?? null);
+		let r = t?.data?.id ?? String(e.active.id), i = null;
+		n != null && (i = n.data?.id ?? String(e.over?.id)), q(), !(i == null || r === i) && M?.onReorder(r, i);
+	}, [
+		b,
+		M,
+		q
+	]), J = T(() => I == null ? null : b.find((e) => e.id === String(I)) ?? null, [I, b]), Y = null, X = "before";
+	if (I != null && R != null && I !== R) {
+		let e = K.indexOf(String(I)), t = K.indexOf(String(R));
+		e !== -1 && t !== -1 && (Y = String(R), e < t && (X = "after"));
+	}
+	let be = F("navigation.sidebar.reorder.handle"), xe = F("navigation.sidebar.reorder.instructions"), Z = null;
+	r != null && (Z = V ? /* @__PURE__ */ O("button", {
+		id: P,
 		type: "button",
-		className: e(i, { [a]: O }),
-		onClick: I,
-		"aria-expanded": !P,
-		"aria-controls": M,
-		"aria-label": B,
-		title: B,
-		children: [/* @__PURE__ */ b("span", {
-			className: d,
-			children: [V, /* @__PURE__ */ y("span", {
-				className: R,
-				children: x
+		className: e(g, { [_]: j }),
+		onClick: me,
+		"aria-expanded": !B,
+		"aria-controls": N,
+		"aria-label": W,
+		title: W,
+		children: [/* @__PURE__ */ O("span", {
+			className: S,
+			children: [G, /* @__PURE__ */ D("span", {
+				className: U,
+				children: r
 			})]
-		}), !O && /* @__PURE__ */ y("span", {
-			className: z,
+		}), !j && /* @__PURE__ */ D("span", {
+			className: he,
 			"aria-hidden": "true",
-			children: /* @__PURE__ */ y(t, {
+			children: /* @__PURE__ */ D(t, {
 				width: 18,
 				height: 18
 			})
 		})]
-	}) : /* @__PURE__ */ y("div", {
-		className: e(r, { [o]: O }),
-		title: B,
-		children: /* @__PURE__ */ b("div", {
-			className: d,
-			id: N,
-			children: [V, /* @__PURE__ */ y("span", {
-				className: R,
-				children: x
+	}) : /* @__PURE__ */ D("div", {
+		className: e(h, { [te]: j }),
+		title: W,
+		children: /* @__PURE__ */ O("div", {
+			className: S,
+			id: P,
+			children: [G, /* @__PURE__ */ D("span", {
+				className: U,
+				children: r
 			})]
 		})
 	}));
-	let U = null;
-	if (!P) {
-		let t = x != null && !O;
-		U = /* @__PURE__ */ y("div", {
-			className: e(s, { [c]: t }),
-			id: M,
+	let Q = null;
+	if (!B) {
+		let t = r != null && !j;
+		Q = /* @__PURE__ */ D("div", {
+			className: e(v, { [y]: t }),
+			id: N,
 			role: "list",
-			children: C.map((e) => {
+			children: b.map((e) => {
 				let { id: r, data: i, ...a } = e;
-				return /* @__PURE__ */ y(n, {
+				return /* @__PURE__ */ D(n, {
 					...a,
-					collapsed: O,
+					collapsed: j,
 					nested: t
 				}, r);
 			})
-		});
+		}), ge && !j && (Q = /* @__PURE__ */ O(i, {
+			accessibility: { screenReaderInstructions: { draggable: xe } },
+			collisionDetection: ee,
+			sensors: _e,
+			onDragStart: ve,
+			onDragOver: (e) => {
+				z(e.over?.id ?? null);
+			},
+			onDragCancel: q,
+			onDragEnd: ye,
+			children: [/* @__PURE__ */ D(d, {
+				items: K,
+				strategy: m,
+				children: /* @__PURE__ */ D("div", {
+					className: e(v, { [y]: t }),
+					id: N,
+					role: "list",
+					children: b.map((e) => {
+						let n;
+						return e.id === Y && (n = X), /* @__PURE__ */ D(le, {
+							item: e,
+							isNested: t,
+							sidebarCollapsed: j,
+							dragHandleLabel: be,
+							insertionPlacement: n
+						}, e.id);
+					})
+				})
+			}), /* @__PURE__ */ D(a, { children: J != null && /* @__PURE__ */ O("div", {
+				className: "_1rp5mg6m _1rp5mg6l txvbqbyoi txvbqbzm3 txvbqb11ed txvbqbwqg txvbqbdr8 txvbqbey txvbqbff6 txvbqb2gm txvbqb9j txvbqbfd0 txvbqb196b txvbqb19c9 txvbqb1uy txvbqb17h txvbqbck9",
+				children: [J.icon != null && /* @__PURE__ */ D("span", {
+					className: "_1rp5mg6n txvbqbdsb txvbqbey txvbqbjtp txvbqb17hx txvbqbhnc txvbqbf7y",
+					children: J.icon
+				}), /* @__PURE__ */ D("span", {
+					className: "_1rp5mg6p _1rp5mg6o txvbqbt9i",
+					children: J.label
+				})]
+			}) })]
+		}));
 	}
-	let W;
-	return x != null && (W = N), /* @__PURE__ */ b("section", {
-		className: e(l, k),
-		"aria-labelledby": W,
-		children: [H, U]
+	let $;
+	return r != null && ($ = P), /* @__PURE__ */ O("section", {
+		className: e(ne, de),
+		"aria-labelledby": $,
+		children: [Z, Q]
 	});
 };
 //#endregion
-export { x as SidebarNavSection, x as default };
+export { k as SidebarNavSection, k as default };
 
 //# sourceMappingURL=SidebarNavSection.js.map