@plumile/ui 0.1.144 → 0.1.145

package/lib/esm/atomic/organisms/sidebar/NavigationSidebar.js

@@ -1,55 +1,55 @@
 import { cx as e } from "../../../theme/tools.js";
 import { useUiTranslation as t } from "../../../i18n/useUiTranslation.js";
 import { ChevronLeftIcon as n, ChevronRightIcon as r } from "./icons.js";
-import { childIcon as i, childLabel as a, childLinkRecipe as o, collapseButton as s, collapseButtonLabel as c, collapseButtonStateRecipe as l, collapsibleContent as u, collapsibleItem as d, collapsibleSection as f, collapsibleStateRecipe as p, iconBaseLayer as m, iconHiddenOnHover as h, iconVisibleOnHover as g, iconWrapper as _, itemWrapper as v, label as y, navButton as b, navGapRecipe as x, navLinkRecipe as ee, navWithTrailingAction as S, trailingActionButton as C, trailingActionIconHidden as w, trailingActionIconVisible as T, trailingActionIconWrapper as te, trailingIconWrapper as E } from "./navigationSidebar.css.js";
-import { SidebarContainer as D } from "./SidebarContainer.js";
-import { useCallback as O, useMemo as k, useState as A } from "react";
-import { Fragment as j, jsx as M, jsxs as N } from "react/jsx-runtime";
-import P from "@plumile/router/routing/Link.js";
-import F from "@plumile/router/routing/useLocation.js";
+import { childIcon as i, childIconTheme as a, childLabel as o, childLinkRecipe as s, collapseButton as c, collapseButtonLabel as l, collapseButtonStateRecipe as u, collapsibleContent as d, collapsibleContentTheme as f, collapsibleItem as ee, collapsibleSection as p, collapsibleStateRecipe as m, iconBaseLayer as h, iconHiddenOnHover as g, iconVisibleOnHover as _, iconWrapper as v, itemWrapper as y, label as te, navButton as b, navGapRecipe as x, navLinkRecipe as S, navWithTrailingAction as C, trailingActionButton as w, trailingActionIconHidden as T, trailingActionIconVisible as E, trailingActionIconWrapper as D, trailingIconWrapper as ne } from "./navigationSidebar.css.js";
+import { SidebarContainer as O } from "./SidebarContainer.js";
+import { useCallback as k, useMemo as A, useState as j } from "react";
+import { Fragment as M, jsx as N, jsxs as P } from "react/jsx-runtime";
+import F from "@plumile/router/routing/Link.js";
+import I from "@plumile/router/routing/useLocation.js";
 //#region src/atomic/organisms/sidebar/NavigationSidebar.tsx
-var I = ({ id: t, isExpanded: n, children: r }) => {
+var L = ({ id: t, isExpanded: n, children: r }) => {
 	let i = "collapsed";
-	return n && (i = "expanded"), /* @__PURE__ */ M("div", {
+	return n && (i = "expanded"), /* @__PURE__ */ N("div", {
 		id: t,
 		"aria-hidden": !n,
-		className: e(f, p({ state: i })),
-		children: /* @__PURE__ */ M("div", {
-			className: u,
+		className: e(p, m({ state: i })),
+		children: /* @__PURE__ */ N("div", {
+			className: e(d, f),
 			children: r
 		})
 	});
-}, L = ({ items: u, headerSlot: f, isCollapsed: p, onCollapsedChange: L, showCollapseToggle: R = !0 }) => {
-	let { t: z } = t(), [B, V] = A(!1), [H, U] = A({}), W = p != null, G = p ?? B, { pathname: K } = F(), q = (e, t) => t === !0 ? K === e : K === e ? !0 : K.startsWith(`${e}/`), J = O((e, t) => {
+}, R = ({ items: d, headerSlot: f, isCollapsed: p, onCollapsedChange: m, showCollapseToggle: R = !0 }) => {
+	let { t: z } = t(), [B, V] = j(!1), [H, U] = j({}), W = p != null, G = p ?? B, { pathname: K } = I(), q = (e, t) => t === !0 ? K === e : K === e ? !0 : K.startsWith(`${e}/`), J = k((e, t) => {
 		U((n) => ({
 			...n,
 			[e]: t
 		}));
-	}, []), Y = O(() => {
+	}, []), Y = k(() => {
 		let e = !G;
-		W || V(e), L?.(e);
+		W || V(e), m?.(e);
 	}, [
 		G,
 		W,
-		L
+		m
 	]), X;
 	G || (X = f ?? void 0);
-	let Z = k(() => {
+	let Z = A(() => {
 		if (!R) return null;
 		let t = n, i = z("navigation.sidebar.actions.collapseAriaLabel");
 		G && (t = r, i = z("navigation.sidebar.actions.expandAriaLabel"));
 		let a = "expanded";
 		G && (a = "collapsed");
 		let o = null;
-		return G || (o = /* @__PURE__ */ M("span", {
-			className: c,
+		return G || (o = /* @__PURE__ */ N("span", {
+			className: l,
 			children: z("navigation.sidebar.actions.collapse")
-		})), /* @__PURE__ */ N("button", {
+		})), /* @__PURE__ */ P("button", {
 			type: "button",
 			onClick: Y,
-			className: e(s, l({ state: a })),
+			className: e(c, u({ state: a })),
 			"aria-label": i,
-			children: [/* @__PURE__ */ M(t, { size: 20 }), o]
+			children: [/* @__PURE__ */ N(t, { size: 20 }), o]
 		});
 	}, [
 		Y,
@@ -57,80 +57,80 @@ var I = ({ id: t, isExpanded: n, children: r }) => {
 		R,
 		z
 	]);
-	return /* @__PURE__ */ M(D, {
+	return /* @__PURE__ */ N(O, {
 		headerSlot: X,
 		footerSlot: Z,
 		isCollapsed: G,
 		showDefaultHeaderAction: !1,
-		children: u.map((t) => {
-			let n = t.childItems ?? null, r = n != null && n.length > 0, s = H[t.key] ?? t.defaultExpanded ?? !1, c = !s, l, u = !G && r;
-			u && (l = `navigation-sidebar-${t.key}-children`), r && n.some((e) => q(e.to)) && (s = !0);
+		children: d.map((t) => {
+			let n = t.childItems ?? null, r = n != null && n.length > 0, c = H[t.key] ?? t.defaultExpanded ?? !1, l = !c, u, d = !G && r;
+			d && (u = `navigation-sidebar-${t.key}-children`), r && n.some((e) => q(e.to)) && (c = !0);
 			let f = null;
 			!G && t.trailingAction != null && (f = t.trailingAction);
-			let p = f != null, D = t.hoverIcon !== void 0 && t.hoverIcon !== null, O = t.trailingIcon !== void 0 && t.trailingIcon !== null, k = t.trailingHoverIcon !== void 0 && t.trailingHoverIcon !== null, A = !G && !p && (O || k), F;
-			G && (F = t.label);
-			let L = "expanded";
-			G && (L = "collapsed");
-			let R = x({ state: L }), z;
-			p && (z = S);
+			let p = f != null, m = t.hoverIcon !== void 0 && t.hoverIcon !== null, O = t.trailingIcon !== void 0 && t.trailingIcon !== null, k = t.trailingHoverIcon !== void 0 && t.trailingHoverIcon !== null, A = !G && !p && (O || k), j;
+			G && (j = t.label);
+			let I = "expanded";
+			G && (I = "collapsed");
+			let R = x({ state: I }), z;
+			p && (z = C);
 			let B = null;
-			G || (B = /* @__PURE__ */ M("span", {
-				className: y,
+			G || (B = /* @__PURE__ */ N("span", {
+				className: te,
 				children: t.label
 			}));
 			let V = null;
-			D && (V = /* @__PURE__ */ M("span", {
-				className: g,
+			m && (V = /* @__PURE__ */ N("span", {
+				className: _,
 				children: t.hoverIcon
 			}));
-			let U = /* @__PURE__ */ N("span", {
-				className: _,
-				children: [/* @__PURE__ */ M("span", {
-					className: e(m, { [h]: D }),
+			let U = /* @__PURE__ */ P("span", {
+				className: v,
+				children: [/* @__PURE__ */ N("span", {
+					className: e(h, { [g]: m }),
 					children: t.icon
 				}), V]
 			}), W = null;
 			if (A) {
 				let n = null;
-				O && (n = /* @__PURE__ */ M("span", {
-					className: e(m, { [h]: k }),
+				O && (n = /* @__PURE__ */ N("span", {
+					className: e(h, { [g]: k }),
 					children: t.trailingIcon
 				}));
 				let r = null;
-				k && (r = /* @__PURE__ */ M("span", {
-					className: g,
+				k && (r = /* @__PURE__ */ N("span", {
+					className: _,
 					children: t.trailingHoverIcon
-				})), W = /* @__PURE__ */ N("span", {
-					className: E,
+				})), W = /* @__PURE__ */ P("span", {
+					className: ne,
 					children: [n, r]
 				});
 			}
-			let K = /* @__PURE__ */ N(j, { children: [
+			let K = /* @__PURE__ */ P(M, { children: [
 				U,
 				B,
 				W
 			] }), Y = () => {
-				!r || G || J(t.key, c);
+				!r || G || J(t.key, l);
 			}, X;
 			if (r) X = e(b, R, z);
 			else {
 				let n = "default";
-				q(t.to, t.exact) && (n = "active"), X = e(ee({ state: n }), R, z);
+				q(t.to, t.exact) && (n = "active"), X = e(S({ state: n }), R, z);
 			}
 			let Z;
-			Z = r ? /* @__PURE__ */ M("button", {
+			Z = r ? /* @__PURE__ */ N("button", {
 				type: "button",
 				className: X,
-				"aria-expanded": s,
-				"aria-controls": l,
-				"aria-label": F,
+				"aria-expanded": c,
+				"aria-controls": u,
+				"aria-label": j,
 				onClick: Y,
 				children: K
-			}) : /* @__PURE__ */ M(P, {
+			}) : /* @__PURE__ */ N(F, {
 				to: t.to,
 				className: X,
 				exact: t.exact,
-				"aria-label": F,
+				"aria-label": j,
 				children: K
 			});
 			let Q = null;
@@ -138,55 +138,55 @@ var I = ({ id: t, isExpanded: n, children: r }) => {
 				let e = (e) => {
 					e.preventDefault(), e.stopPropagation(), f.onClick();
 				}, t = f.hoverIcon, n = t != null, r = null;
-				n && (r = /* @__PURE__ */ M("span", {
-					className: T,
+				n && (r = /* @__PURE__ */ N("span", {
+					className: E,
 					children: t
-				})), Q = /* @__PURE__ */ M("button", {
+				})), Q = /* @__PURE__ */ N("button", {
 					type: "button",
 					"aria-label": f.label,
 					onClick: e,
-					className: C,
-					children: /* @__PURE__ */ N("span", {
-						className: te,
-						children: [/* @__PURE__ */ M("span", {
-							className: w,
+					className: w,
+					children: /* @__PURE__ */ P("span", {
+						className: D,
+						children: [/* @__PURE__ */ N("span", {
+							className: T,
 							children: f.icon
 						}), r]
 					})
 				});
 			}
 			let $ = null;
-			return u && l != null && ($ = /* @__PURE__ */ M(I, {
-				id: l,
-				isExpanded: s,
-				children: n.map((e) => {
-					let t = null;
-					e.icon != null && (t = /* @__PURE__ */ M("span", {
-						className: i,
-						children: e.icon
+			return d && u != null && ($ = /* @__PURE__ */ N(L, {
+				id: u,
+				isExpanded: c,
+				children: n.map((t) => {
+					let n = null;
+					t.icon != null && (n = /* @__PURE__ */ N("span", {
+						className: e(i, a),
+						children: t.icon
 					}));
-					let n = "default";
-					return q(e.to) && (n = "active"), /* @__PURE__ */ M("div", {
-						className: d,
-						children: /* @__PURE__ */ N(P, {
-							to: e.to,
-							className: o({ state: n }),
-							"aria-label": e.label,
-							children: [t, /* @__PURE__ */ M("span", {
-								className: a,
-								children: e.label
+					let r = "default";
+					return q(t.to) && (r = "active"), /* @__PURE__ */ N("div", {
+						className: ee,
+						children: /* @__PURE__ */ P(F, {
+							to: t.to,
+							className: s({ state: r }),
+							"aria-label": t.label,
+							children: [n, /* @__PURE__ */ N("span", {
+								className: o,
+								children: t.label
 							})]
 						})
-					}, e.key);
+					}, t.key);
 				})
-			})), /* @__PURE__ */ N("div", { children: [/* @__PURE__ */ N("div", {
-				className: v,
+			})), /* @__PURE__ */ P("div", { children: [/* @__PURE__ */ P("div", {
+				className: y,
 				children: [Z, Q]
 			}), $] }, t.key);
 		})
 	});
 };
 //#endregion
-export { L as NavigationSidebar };
+export { R as NavigationSidebar };
 
 //# sourceMappingURL=NavigationSidebar.js.map

package/lib/esm/atomic/organisms/sidebar/NavigationSidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationSidebar.js","names":[],"sources":["../../../../../src/atomic/organisms/sidebar/NavigationSidebar.tsx"],"sourcesContent":["import {\n  type JSX,\n  type MouseEvent,\n  type ReactNode,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react';\nimport Link from '@plumile/router/routing/Link.js';\nimport useLocation from '@plumile/router/routing/useLocation.js';\nimport type { RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { useUiTranslation } from '../../../i18n/useUiTranslation.js';\nimport { cx } from '../../../theme/tools.js';\nimport { ChevronLeftIcon, ChevronRightIcon } from './icons.js';\nimport * as styles from './navigationSidebar.css.js';\nimport { SidebarContainer } from './SidebarContainer.js';\n\ntype SidebarItemTrailingAction = {\n  icon: ReactNode;\n  hoverIcon?: ReactNode;\n  label: string;\n  onClick: () => void;\n};\n\ntype SidebarItem = {\n  key: string;\n  to: string;\n  label: string;\n  icon: ReactNode;\n  exact?: boolean;\n  hoverIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n  trailingHoverIcon?: ReactNode;\n  trailingAction?: SidebarItemTrailingAction;\n  childItems?: SidebarChildItem[];\n  defaultExpanded?: boolean;\n};\n\ntype SidebarChildItem = {\n  key: string;\n  to: string;\n  label: string;\n  icon?: ReactNode;\n};\n\ntype NavigationSidebarProps = {\n  items: SidebarItem[];\n  headerSlot?: ReactNode;\n  isCollapsed?: boolean;\n  onCollapsedChange?: (nextCollapsed: boolean) => void;\n  showCollapseToggle?: boolean;\n};\n\nconst CollapsibleSection = ({\n  id,\n  isExpanded,\n  children,\n}: {\n  id: string;\n  isExpanded: boolean;\n  children: ReactNode;\n}): JSX.Element => {\n  let collapsibleStateKey: NonNullable<\n    NonNullable<RecipeVariants<typeof styles.collapsibleStateRecipe>>['state']\n  > = 'collapsed';\n  if (isExpanded) {\n    collapsibleStateKey = 'expanded';\n  }\n\n  return (\n    <div\n      id={id}\n      aria-hidden={!isExpanded}\n      className={cx(\n        styles.collapsibleSection,\n        styles.collapsibleStateRecipe({ state: collapsibleStateKey }),\n      )}\n    >\n      <div className={styles.collapsibleContent}>{children}</div>\n    </div>\n  );\n};\n\nconst NavigationSidebar = ({\n  items,\n  headerSlot,\n  isCollapsed: isCollapsedProp,\n  onCollapsedChange,\n  showCollapseToggle = true,\n}: NavigationSidebarProps): JSX.Element => {\n  const { t } = useUiTranslation();\n  const [internalCollapsed, setInternalCollapsed] = useState(false);\n  const [expandedState, setExpandedState] = useState<Record<string, boolean>>(\n    {},\n  );\n  const isControlled = isCollapsedProp != null;\n  const isCollapsed = isCollapsedProp ?? internalCollapsed;\n  const { pathname } = useLocation();\n\n  const isPathActive = (target: string, exact?: boolean): boolean => {\n    if (exact === true) {\n      return pathname === target;\n    }\n    if (pathname === target) {\n      return true;\n    }\n    return pathname.startsWith(`${target}/`);\n  };\n\n  const handleToggle = useCallback((key: string, nextState: boolean) => {\n    setExpandedState((prev) => {\n      return {\n        ...prev,\n        [key]: nextState,\n      };\n    });\n  }, []);\n\n  const handleCollapseToggle = useCallback(() => {\n    const nextState = !isCollapsed;\n    if (!isControlled) {\n      setInternalCollapsed(nextState);\n    }\n    onCollapsedChange?.(nextState);\n  }, [isCollapsed, isControlled, onCollapsedChange]);\n\n  let headerContent: ReactNode | undefined;\n  if (!isCollapsed) {\n    headerContent = headerSlot ?? undefined;\n  }\n\n  const collapseButton = useMemo(() => {\n    if (!showCollapseToggle) {\n      return null;\n    }\n\n    let CollapseIcon = ChevronLeftIcon;\n    let buttonLabel = t('navigation.sidebar.actions.collapseAriaLabel');\n    if (isCollapsed) {\n      CollapseIcon = ChevronRightIcon;\n      buttonLabel = t('navigation.sidebar.actions.expandAriaLabel');\n    }\n\n    let collapseState: NonNullable<\n      NonNullable<\n        RecipeVariants<typeof styles.collapseButtonStateRecipe>\n      >['state']\n    > = 'expanded';\n    if (isCollapsed) {\n      collapseState = 'collapsed';\n    }\n\n    let collapseLabel: JSX.Element | null = null;\n    if (!isCollapsed) {\n      collapseLabel = (\n        <span className={styles.collapseButtonLabel}>\n          {t('navigation.sidebar.actions.collapse')}\n        </span>\n      );\n    }\n\n    return (\n      <button\n        type=\"button\"\n        onClick={handleCollapseToggle}\n        className={cx(\n          styles.collapseButton,\n          styles.collapseButtonStateRecipe({ state: collapseState }),\n        )}\n        aria-label={buttonLabel}\n      >\n        <CollapseIcon size={20} />\n        {collapseLabel}\n      </button>\n    );\n  }, [handleCollapseToggle, isCollapsed, showCollapseToggle, t]);\n\n  return (\n    <SidebarContainer\n      headerSlot={headerContent}\n      footerSlot={collapseButton}\n      isCollapsed={isCollapsed}\n      showDefaultHeaderAction={false}\n    >\n      {items.map((item) => {\n        const childItems = item.childItems ?? null;\n        const hasChildren = childItems != null && childItems.length > 0;\n        const storedExpanded = expandedState[item.key];\n        let isExpanded = storedExpanded ?? item.defaultExpanded ?? false;\n        const nextExpanded = !isExpanded;\n        let childSectionId: string | undefined;\n        const shouldRenderChildren = !isCollapsed && hasChildren;\n        if (shouldRenderChildren) {\n          childSectionId = `navigation-sidebar-${item.key}-children`;\n        }\n\n        if (hasChildren) {\n          const hasActiveChild = childItems.some((child) => {\n            return isPathActive(child.to);\n          });\n\n          if (hasActiveChild) {\n            isExpanded = true;\n          }\n        }\n\n        let trailingAction: SidebarItemTrailingAction | null = null;\n        if (!isCollapsed && item.trailingAction != null) {\n          trailingAction = item.trailingAction;\n        }\n        const showTrailingAction = trailingAction != null;\n        const hasHoverIcon =\n          item.hoverIcon !== undefined && item.hoverIcon !== null;\n        const hasTrailingIcon =\n          item.trailingIcon !== undefined && item.trailingIcon !== null;\n        const hasTrailingHoverIcon =\n          item.trailingHoverIcon !== undefined &&\n          item.trailingHoverIcon !== null;\n        const showTrailing =\n          !isCollapsed &&\n          !showTrailingAction &&\n          (hasTrailingIcon || hasTrailingHoverIcon);\n\n        let itemAriaLabel: string | undefined;\n        if (isCollapsed) {\n          itemAriaLabel = item.label;\n        }\n\n        let gapState: NonNullable<\n          NonNullable<RecipeVariants<typeof styles.navGapRecipe>>['state']\n        > = 'expanded';\n        if (isCollapsed) {\n          gapState = 'collapsed';\n        }\n        const gapClassName = styles.navGapRecipe({ state: gapState });\n\n        let paddingClassName: string | undefined;\n        if (showTrailingAction) {\n          paddingClassName = styles.navWithTrailingAction;\n        }\n\n        let labelNode: JSX.Element | null = null;\n        if (!isCollapsed) {\n          labelNode = <span className={styles.label}>{item.label}</span>;\n        }\n\n        let hoverLayer: JSX.Element | null = null;\n        if (hasHoverIcon) {\n          hoverLayer = (\n            <span className={styles.iconVisibleOnHover}>{item.hoverIcon}</span>\n          );\n        }\n\n        const leadingIcon = (\n          <span className={styles.iconWrapper}>\n            <span\n              className={cx(styles.iconBaseLayer, {\n                [styles.iconHiddenOnHover]: hasHoverIcon,\n              })}\n            >\n              {item.icon}\n            </span>\n            {hoverLayer}\n          </span>\n        );\n\n        let trailingIcons: JSX.Element | null = null;\n        if (showTrailing) {\n          let trailingBaseLayer: JSX.Element | null = null;\n          if (hasTrailingIcon) {\n            trailingBaseLayer = (\n              <span\n                className={cx(styles.iconBaseLayer, {\n                  [styles.iconHiddenOnHover]: hasTrailingHoverIcon,\n                })}\n              >\n                {item.trailingIcon}\n              </span>\n            );\n          }\n\n          let trailingHoverLayer: JSX.Element | null = null;\n          if (hasTrailingHoverIcon) {\n            trailingHoverLayer = (\n              <span className={styles.iconVisibleOnHover}>\n                {item.trailingHoverIcon}\n              </span>\n            );\n          }\n\n          trailingIcons = (\n            <span className={styles.trailingIconWrapper}>\n              {trailingBaseLayer}\n              {trailingHoverLayer}\n            </span>\n          );\n        }\n\n        const commonContent = (\n          <>\n            {leadingIcon}\n            {labelNode}\n            {trailingIcons}\n          </>\n        );\n\n        const handleClick = (): void => {\n          if (!hasChildren || isCollapsed) {\n            return;\n          }\n          handleToggle(item.key, nextExpanded);\n        };\n\n        let interactiveClassName: string;\n        if (hasChildren) {\n          interactiveClassName = cx(\n            styles.navButton,\n            gapClassName,\n            paddingClassName,\n          );\n        } else {\n          let navState: NonNullable<\n            NonNullable<RecipeVariants<typeof styles.navLinkRecipe>>['state']\n          > = 'default';\n          if (isPathActive(item.to, item.exact)) {\n            navState = 'active';\n          }\n          interactiveClassName = cx(\n            styles.navLinkRecipe({ state: navState }),\n            gapClassName,\n            paddingClassName,\n          );\n        }\n\n        let itemNode: JSX.Element;\n        if (hasChildren) {\n          itemNode = (\n            <button\n              type=\"button\"\n              className={interactiveClassName}\n              aria-expanded={isExpanded}\n              aria-controls={childSectionId}\n              aria-label={itemAriaLabel}\n              onClick={handleClick}\n            >\n              {commonContent}\n            </button>\n          );\n        } else {\n          itemNode = (\n            <Link\n              to={item.to}\n              className={interactiveClassName}\n              exact={item.exact}\n              aria-label={itemAriaLabel}\n            >\n              {commonContent}\n            </Link>\n          );\n        }\n\n        let trailingActionNode: JSX.Element | null = null;\n        if (trailingAction != null) {\n          const handleTrailingClick = (\n            event: MouseEvent<HTMLButtonElement>,\n          ): void => {\n            event.preventDefault();\n            event.stopPropagation();\n            trailingAction.onClick();\n          };\n\n          const trailingHoverIcon = trailingAction.hoverIcon;\n          const showTrailingHoverIcon =\n            trailingHoverIcon !== undefined && trailingHoverIcon !== null;\n          let trailingHoverContent: JSX.Element | null = null;\n          if (showTrailingHoverIcon) {\n            trailingHoverContent = (\n              <span className={styles.trailingActionIconVisible}>\n                {trailingHoverIcon}\n              </span>\n            );\n          }\n\n          trailingActionNode = (\n            <button\n              type=\"button\"\n              aria-label={trailingAction.label}\n              onClick={handleTrailingClick}\n              className={styles.trailingActionButton}\n            >\n              <span className={styles.trailingActionIconWrapper}>\n                <span className={styles.trailingActionIconHidden}>\n                  {trailingAction.icon}\n                </span>\n                {trailingHoverContent}\n              </span>\n            </button>\n          );\n        }\n\n        let childList: JSX.Element | null = null;\n        if (shouldRenderChildren && childSectionId != null) {\n          childList = (\n            <CollapsibleSection id={childSectionId} isExpanded={isExpanded}>\n              {childItems.map((child) => {\n                let leading: JSX.Element | null = null;\n                if (child.icon != null) {\n                  leading = (\n                    <span className={styles.childIcon}>{child.icon}</span>\n                  );\n                }\n\n                let childState: NonNullable<\n                  NonNullable<\n                    RecipeVariants<typeof styles.childLinkRecipe>\n                  >['state']\n                > = 'default';\n                if (isPathActive(child.to)) {\n                  childState = 'active';\n                }\n\n                return (\n                  <div key={child.key} className={styles.collapsibleItem}>\n                    <Link\n                      to={child.to}\n                      className={styles.childLinkRecipe({ state: childState })}\n                      aria-label={child.label}\n                    >\n                      {leading}\n                      <span className={styles.childLabel}>{child.label}</span>\n                    </Link>\n                  </div>\n                );\n              })}\n            </CollapsibleSection>\n          );\n        }\n\n        return (\n          <div key={item.key}>\n            <div className={styles.itemWrapper}>\n              {itemNode}\n              {trailingActionNode}\n            </div>\n            {childList}\n          </div>\n        );\n      })}\n    </SidebarContainer>\n  );\n};\n\nexport { NavigationSidebar };\nexport type {\n  NavigationSidebarProps,\n  SidebarChildItem,\n  SidebarItem,\n  SidebarItemTrailingAction,\n};\n"],"mappings":"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"}
+{"version":3,"file":"NavigationSidebar.js","names":[],"sources":["../../../../../src/atomic/organisms/sidebar/NavigationSidebar.tsx"],"sourcesContent":["import {\n  type JSX,\n  type MouseEvent,\n  type ReactNode,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react';\nimport Link from '@plumile/router/routing/Link.js';\nimport useLocation from '@plumile/router/routing/useLocation.js';\nimport type { RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { useUiTranslation } from '../../../i18n/useUiTranslation.js';\nimport { cx } from '../../../theme/tools.js';\nimport { ChevronLeftIcon, ChevronRightIcon } from './icons.js';\nimport * as styles from './navigationSidebar.css.js';\nimport { SidebarContainer } from './SidebarContainer.js';\n\ntype SidebarItemTrailingAction = {\n  icon: ReactNode;\n  hoverIcon?: ReactNode;\n  label: string;\n  onClick: () => void;\n};\n\ntype SidebarItem = {\n  key: string;\n  to: string;\n  label: string;\n  icon: ReactNode;\n  exact?: boolean;\n  hoverIcon?: ReactNode;\n  trailingIcon?: ReactNode;\n  trailingHoverIcon?: ReactNode;\n  trailingAction?: SidebarItemTrailingAction;\n  childItems?: SidebarChildItem[];\n  defaultExpanded?: boolean;\n};\n\ntype SidebarChildItem = {\n  key: string;\n  to: string;\n  label: string;\n  icon?: ReactNode;\n};\n\ntype NavigationSidebarProps = {\n  items: SidebarItem[];\n  headerSlot?: ReactNode;\n  isCollapsed?: boolean;\n  onCollapsedChange?: (nextCollapsed: boolean) => void;\n  showCollapseToggle?: boolean;\n};\n\nconst CollapsibleSection = ({\n  id,\n  isExpanded,\n  children,\n}: {\n  id: string;\n  isExpanded: boolean;\n  children: ReactNode;\n}): JSX.Element => {\n  let collapsibleStateKey: NonNullable<\n    NonNullable<RecipeVariants<typeof styles.collapsibleStateRecipe>>['state']\n  > = 'collapsed';\n  if (isExpanded) {\n    collapsibleStateKey = 'expanded';\n  }\n\n  return (\n    <div\n      id={id}\n      aria-hidden={!isExpanded}\n      className={cx(\n        styles.collapsibleSection,\n        styles.collapsibleStateRecipe({ state: collapsibleStateKey }),\n      )}\n    >\n      <div\n        className={cx(\n          styles.collapsibleContent,\n          styles.collapsibleContentTheme,\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n\nconst NavigationSidebar = ({\n  items,\n  headerSlot,\n  isCollapsed: isCollapsedProp,\n  onCollapsedChange,\n  showCollapseToggle = true,\n}: NavigationSidebarProps): JSX.Element => {\n  const { t } = useUiTranslation();\n  const [internalCollapsed, setInternalCollapsed] = useState(false);\n  const [expandedState, setExpandedState] = useState<Record<string, boolean>>(\n    {},\n  );\n  const isControlled = isCollapsedProp != null;\n  const isCollapsed = isCollapsedProp ?? internalCollapsed;\n  const { pathname } = useLocation();\n\n  const isPathActive = (target: string, exact?: boolean): boolean => {\n    if (exact === true) {\n      return pathname === target;\n    }\n    if (pathname === target) {\n      return true;\n    }\n    return pathname.startsWith(`${target}/`);\n  };\n\n  const handleToggle = useCallback((key: string, nextState: boolean) => {\n    setExpandedState((prev) => {\n      return {\n        ...prev,\n        [key]: nextState,\n      };\n    });\n  }, []);\n\n  const handleCollapseToggle = useCallback(() => {\n    const nextState = !isCollapsed;\n    if (!isControlled) {\n      setInternalCollapsed(nextState);\n    }\n    onCollapsedChange?.(nextState);\n  }, [isCollapsed, isControlled, onCollapsedChange]);\n\n  let headerContent: ReactNode | undefined;\n  if (!isCollapsed) {\n    headerContent = headerSlot ?? undefined;\n  }\n\n  const collapseButton = useMemo(() => {\n    if (!showCollapseToggle) {\n      return null;\n    }\n\n    let CollapseIcon = ChevronLeftIcon;\n    let buttonLabel = t('navigation.sidebar.actions.collapseAriaLabel');\n    if (isCollapsed) {\n      CollapseIcon = ChevronRightIcon;\n      buttonLabel = t('navigation.sidebar.actions.expandAriaLabel');\n    }\n\n    let collapseState: NonNullable<\n      NonNullable<\n        RecipeVariants<typeof styles.collapseButtonStateRecipe>\n      >['state']\n    > = 'expanded';\n    if (isCollapsed) {\n      collapseState = 'collapsed';\n    }\n\n    let collapseLabel: JSX.Element | null = null;\n    if (!isCollapsed) {\n      collapseLabel = (\n        <span className={styles.collapseButtonLabel}>\n          {t('navigation.sidebar.actions.collapse')}\n        </span>\n      );\n    }\n\n    return (\n      <button\n        type=\"button\"\n        onClick={handleCollapseToggle}\n        className={cx(\n          styles.collapseButton,\n          styles.collapseButtonStateRecipe({ state: collapseState }),\n        )}\n        aria-label={buttonLabel}\n      >\n        <CollapseIcon size={20} />\n        {collapseLabel}\n      </button>\n    );\n  }, [handleCollapseToggle, isCollapsed, showCollapseToggle, t]);\n\n  return (\n    <SidebarContainer\n      headerSlot={headerContent}\n      footerSlot={collapseButton}\n      isCollapsed={isCollapsed}\n      showDefaultHeaderAction={false}\n    >\n      {items.map((item) => {\n        const childItems = item.childItems ?? null;\n        const hasChildren = childItems != null && childItems.length > 0;\n        const storedExpanded = expandedState[item.key];\n        let isExpanded = storedExpanded ?? item.defaultExpanded ?? false;\n        const nextExpanded = !isExpanded;\n        let childSectionId: string | undefined;\n        const shouldRenderChildren = !isCollapsed && hasChildren;\n        if (shouldRenderChildren) {\n          childSectionId = `navigation-sidebar-${item.key}-children`;\n        }\n\n        if (hasChildren) {\n          const hasActiveChild = childItems.some((child) => {\n            return isPathActive(child.to);\n          });\n\n          if (hasActiveChild) {\n            isExpanded = true;\n          }\n        }\n\n        let trailingAction: SidebarItemTrailingAction | null = null;\n        if (!isCollapsed && item.trailingAction != null) {\n          trailingAction = item.trailingAction;\n        }\n        const showTrailingAction = trailingAction != null;\n        const hasHoverIcon =\n          item.hoverIcon !== undefined && item.hoverIcon !== null;\n        const hasTrailingIcon =\n          item.trailingIcon !== undefined && item.trailingIcon !== null;\n        const hasTrailingHoverIcon =\n          item.trailingHoverIcon !== undefined &&\n          item.trailingHoverIcon !== null;\n        const showTrailing =\n          !isCollapsed &&\n          !showTrailingAction &&\n          (hasTrailingIcon || hasTrailingHoverIcon);\n\n        let itemAriaLabel: string | undefined;\n        if (isCollapsed) {\n          itemAriaLabel = item.label;\n        }\n\n        let gapState: NonNullable<\n          NonNullable<RecipeVariants<typeof styles.navGapRecipe>>['state']\n        > = 'expanded';\n        if (isCollapsed) {\n          gapState = 'collapsed';\n        }\n        const gapClassName = styles.navGapRecipe({ state: gapState });\n\n        let paddingClassName: string | undefined;\n        if (showTrailingAction) {\n          paddingClassName = styles.navWithTrailingAction;\n        }\n\n        let labelNode: JSX.Element | null = null;\n        if (!isCollapsed) {\n          labelNode = <span className={styles.label}>{item.label}</span>;\n        }\n\n        let hoverLayer: JSX.Element | null = null;\n        if (hasHoverIcon) {\n          hoverLayer = (\n            <span className={styles.iconVisibleOnHover}>{item.hoverIcon}</span>\n          );\n        }\n\n        const leadingIcon = (\n          <span className={styles.iconWrapper}>\n            <span\n              className={cx(styles.iconBaseLayer, {\n                [styles.iconHiddenOnHover]: hasHoverIcon,\n              })}\n            >\n              {item.icon}\n            </span>\n            {hoverLayer}\n          </span>\n        );\n\n        let trailingIcons: JSX.Element | null = null;\n        if (showTrailing) {\n          let trailingBaseLayer: JSX.Element | null = null;\n          if (hasTrailingIcon) {\n            trailingBaseLayer = (\n              <span\n                className={cx(styles.iconBaseLayer, {\n                  [styles.iconHiddenOnHover]: hasTrailingHoverIcon,\n                })}\n              >\n                {item.trailingIcon}\n              </span>\n            );\n          }\n\n          let trailingHoverLayer: JSX.Element | null = null;\n          if (hasTrailingHoverIcon) {\n            trailingHoverLayer = (\n              <span className={styles.iconVisibleOnHover}>\n                {item.trailingHoverIcon}\n              </span>\n            );\n          }\n\n          trailingIcons = (\n            <span className={styles.trailingIconWrapper}>\n              {trailingBaseLayer}\n              {trailingHoverLayer}\n            </span>\n          );\n        }\n\n        const commonContent = (\n          <>\n            {leadingIcon}\n            {labelNode}\n            {trailingIcons}\n          </>\n        );\n\n        const handleClick = (): void => {\n          if (!hasChildren || isCollapsed) {\n            return;\n          }\n          handleToggle(item.key, nextExpanded);\n        };\n\n        let interactiveClassName: string;\n        if (hasChildren) {\n          interactiveClassName = cx(\n            styles.navButton,\n            gapClassName,\n            paddingClassName,\n          );\n        } else {\n          let navState: NonNullable<\n            NonNullable<RecipeVariants<typeof styles.navLinkRecipe>>['state']\n          > = 'default';\n          if (isPathActive(item.to, item.exact)) {\n            navState = 'active';\n          }\n          interactiveClassName = cx(\n            styles.navLinkRecipe({ state: navState }),\n            gapClassName,\n            paddingClassName,\n          );\n        }\n\n        let itemNode: JSX.Element;\n        if (hasChildren) {\n          itemNode = (\n            <button\n              type=\"button\"\n              className={interactiveClassName}\n              aria-expanded={isExpanded}\n              aria-controls={childSectionId}\n              aria-label={itemAriaLabel}\n              onClick={handleClick}\n            >\n              {commonContent}\n            </button>\n          );\n        } else {\n          itemNode = (\n            <Link\n              to={item.to}\n              className={interactiveClassName}\n              exact={item.exact}\n              aria-label={itemAriaLabel}\n            >\n              {commonContent}\n            </Link>\n          );\n        }\n\n        let trailingActionNode: JSX.Element | null = null;\n        if (trailingAction != null) {\n          const handleTrailingClick = (\n            event: MouseEvent<HTMLButtonElement>,\n          ): void => {\n            event.preventDefault();\n            event.stopPropagation();\n            trailingAction.onClick();\n          };\n\n          const trailingHoverIcon = trailingAction.hoverIcon;\n          const showTrailingHoverIcon =\n            trailingHoverIcon !== undefined && trailingHoverIcon !== null;\n          let trailingHoverContent: JSX.Element | null = null;\n          if (showTrailingHoverIcon) {\n            trailingHoverContent = (\n              <span className={styles.trailingActionIconVisible}>\n                {trailingHoverIcon}\n              </span>\n            );\n          }\n\n          trailingActionNode = (\n            <button\n              type=\"button\"\n              aria-label={trailingAction.label}\n              onClick={handleTrailingClick}\n              className={styles.trailingActionButton}\n            >\n              <span className={styles.trailingActionIconWrapper}>\n                <span className={styles.trailingActionIconHidden}>\n                  {trailingAction.icon}\n                </span>\n                {trailingHoverContent}\n              </span>\n            </button>\n          );\n        }\n\n        let childList: JSX.Element | null = null;\n        if (shouldRenderChildren && childSectionId != null) {\n          childList = (\n            <CollapsibleSection id={childSectionId} isExpanded={isExpanded}>\n              {childItems.map((child) => {\n                let leading: JSX.Element | null = null;\n                if (child.icon != null) {\n                  leading = (\n                    <span\n                      className={cx(styles.childIcon, styles.childIconTheme)}\n                    >\n                      {child.icon}\n                    </span>\n                  );\n                }\n\n                let childState: NonNullable<\n                  NonNullable<\n                    RecipeVariants<typeof styles.childLinkRecipe>\n                  >['state']\n                > = 'default';\n                if (isPathActive(child.to)) {\n                  childState = 'active';\n                }\n\n                return (\n                  <div key={child.key} className={styles.collapsibleItem}>\n                    <Link\n                      to={child.to}\n                      className={styles.childLinkRecipe({ state: childState })}\n                      aria-label={child.label}\n                    >\n                      {leading}\n                      <span className={styles.childLabel}>{child.label}</span>\n                    </Link>\n                  </div>\n                );\n              })}\n            </CollapsibleSection>\n          );\n        }\n\n        return (\n          <div key={item.key}>\n            <div className={styles.itemWrapper}>\n              {itemNode}\n              {trailingActionNode}\n            </div>\n            {childList}\n          </div>\n        );\n      })}\n    </SidebarContainer>\n  );\n};\n\nexport { NavigationSidebar };\nexport type {\n  NavigationSidebarProps,\n  SidebarChildItem,\n  SidebarItem,\n  SidebarItemTrailingAction,\n};\n"],"mappings":";;;;;;;;;;AAsDA,IAAM,KAAsB,EAC1B,OACA,eACA,kBAKiB;CACjB,IAAI,IAEA;CAKJ,OAJI,MACF,IAAsB,aAItB,kBAAC,OAAD;EACM;EACJ,eAAa,CAAC;EACd,WAAW,EACT,GACA,EAA8B,EAAE,OAAO,EAAoB,CAAC,CAC9D;YAEA,kBAAC,OAAD;GACE,WAAW,EACT,GACA,CACF;GAEC;EACE,CAAA;CACF,CAAA;AAET,GAEM,KAAqB,EACzB,UACA,eACA,aAAa,GACb,sBACA,wBAAqB,SACoB;CACzC,IAAM,EAAE,SAAM,EAAiB,GACzB,CAAC,GAAmB,KAAwB,EAAS,EAAK,GAC1D,CAAC,GAAe,KAAoB,EACxC,CAAC,CACH,GACM,IAAe,KAAmB,MAClC,IAAc,KAAmB,GACjC,EAAE,gBAAa,EAAY,GAE3B,KAAgB,GAAgB,MAChC,MAAU,KACL,MAAa,IAElB,MAAa,IACR,KAEF,EAAS,WAAW,GAAG,EAAO,EAAE,GAGnC,IAAe,GAAa,GAAa,MAAuB;EACpE,GAAkB,OACT;GACL,GAAG;IACF,IAAM;EACT,EACD;CACH,GAAG,CAAC,CAAC,GAEC,IAAuB,QAAkB;EAC7C,IAAM,IAAY,CAAC;EAInB,AAHK,KACH,EAAqB,CAAS,GAEhC,IAAoB,CAAS;CAC/B,GAAG;EAAC;EAAa;EAAc;CAAiB,CAAC,GAE7C;CACJ,AAAK,MACH,IAAgB,KAAc,KAAA;CAGhC,IAAM,IAAiB,QAAc;EACnC,IAAI,CAAC,GACH,OAAO;EAGT,IAAI,IAAe,GACf,IAAc,EAAE,8CAA8C;EAClE,AAAI,MACF,IAAe,GACf,IAAc,EAAE,4CAA4C;EAG9D,IAAI,IAIA;EACJ,AAAI,MACF,IAAgB;EAGlB,IAAI,IAAoC;EASxC,OARK,MACH,IACE,kBAAC,QAAD;GAAM,WAAW;aACd,EAAE,qCAAqC;EACpC,CAAA,IAKR,kBAAC,UAAD;GACE,MAAK;GACL,SAAS;GACT,WAAW,EACT,GACA,EAAiC,EAAE,OAAO,EAAc,CAAC,CAC3D;GACA,cAAY;aAPd,CASE,kBAAC,GAAD,EAAc,MAAM,GAAK,CAAA,GACxB,CACK;;CAEZ,GAAG;EAAC;EAAsB;EAAa;EAAoB;CAAC,CAAC;CAE7D,OACE,kBAAC,GAAD;EACE,YAAY;EACZ,YAAY;EACC;EACb,yBAAyB;YAExB,EAAM,KAAK,MAAS;GACnB,IAAM,IAAa,EAAK,cAAc,MAChC,IAAc,KAAc,QAAQ,EAAW,SAAS,GAE1D,IADmB,EAAc,EAAK,QACP,EAAK,mBAAmB,IACrD,IAAe,CAAC,GAClB,GACE,IAAuB,CAAC,KAAe;GAK7C,AAJI,MACF,IAAiB,sBAAsB,EAAK,IAAI,aAG9C,KACqB,EAAW,MAAM,MAC/B,EAAa,EAAM,EAAE,CAG1B,MACF,IAAa;GAIjB,IAAI,IAAmD;GACvD,AAAI,CAAC,KAAe,EAAK,kBAAkB,SACzC,IAAiB,EAAK;GAExB,IAAM,IAAqB,KAAkB,MACvC,IACJ,EAAK,cAAc,KAAA,KAAa,EAAK,cAAc,MAC/C,IACJ,EAAK,iBAAiB,KAAA,KAAa,EAAK,iBAAiB,MACrD,IACJ,EAAK,sBAAsB,KAAA,KAC3B,EAAK,sBAAsB,MACvB,IACJ,CAAC,KACD,CAAC,MACA,KAAmB,IAElB;GACJ,AAAI,MACF,IAAgB,EAAK;GAGvB,IAAI,IAEA;GACJ,AAAI,MACF,IAAW;GAEb,IAAM,IAAe,EAAoB,EAAE,OAAO,EAAS,CAAC,GAExD;GACJ,AAAI,MACF,IAAmB;GAGrB,IAAI,IAAgC;GACpC,AAAK,MACH,IAAY,kBAAC,QAAD;IAAM,WAAW;cAAe,EAAK;GAAY,CAAA;GAG/D,IAAI,IAAiC;GACrC,AAAI,MACF,IACE,kBAAC,QAAD;IAAM,WAAW;cAA4B,EAAK;GAAgB,CAAA;GAItE,IAAM,IACJ,kBAAC,QAAD;IAAM,WAAW;cAAjB,CACE,kBAAC,QAAD;KACE,WAAW,EAAG,GAAsB,GACjC,IAA2B,EAC9B,CAAC;eAEA,EAAK;IACF,CAAA,GACL,CACG;OAGJ,IAAoC;GACxC,IAAI,GAAc;IAChB,IAAI,IAAwC;IAC5C,AAAI,MACF,IACE,kBAAC,QAAD;KACE,WAAW,EAAG,GAAsB,GACjC,IAA2B,EAC9B,CAAC;eAEA,EAAK;IACF,CAAA;IAIV,IAAI,IAAyC;IAS7C,AARI,MACF,IACE,kBAAC,QAAD;KAAM,WAAW;eACd,EAAK;IACF,CAAA,IAIV,IACE,kBAAC,QAAD;KAAM,WAAW;eAAjB,CACG,GACA,CACG;;GAEV;GAEA,IAAM,IACJ,kBAAA,GAAA,EAAA,UAAA;IACG;IACA;IACA;GACD,EAAA,CAAA,GAGE,UAA0B;IAC1B,CAAC,KAAe,KAGpB,EAAa,EAAK,KAAK,CAAY;GACrC,GAEI;GACJ,IAAI,GACF,IAAuB,EACrB,GACA,GACA,CACF;QACK;IACL,IAAI,IAEA;IAIJ,AAHI,EAAa,EAAK,IAAI,EAAK,KAAK,MAClC,IAAW,WAEb,IAAuB,EACrB,EAAqB,EAAE,OAAO,EAAS,CAAC,GACxC,GACA,CACF;GACF;GAEA,IAAI;GACJ,AAcE,IAdE,IAEA,kBAAC,UAAD;IACE,MAAK;IACL,WAAW;IACX,iBAAe;IACf,iBAAe;IACf,cAAY;IACZ,SAAS;cAER;GACK,CAAA,IAIR,kBAAC,GAAD;IACE,IAAI,EAAK;IACT,WAAW;IACX,OAAO,EAAK;IACZ,cAAY;cAEX;GACG,CAAA;GAIV,IAAI,IAAyC;GAC7C,IAAI,KAAkB,MAAM;IAC1B,IAAM,KACJ,MACS;KAGT,AAFA,EAAM,eAAe,GACrB,EAAM,gBAAgB,GACtB,EAAe,QAAQ;IACzB,GAEM,IAAoB,EAAe,WACnC,IACJ,KAAyD,MACvD,IAA2C;IAS/C,AARI,MACF,IACE,kBAAC,QAAD;KAAM,WAAW;eACd;IACG,CAAA,IAIV,IACE,kBAAC,UAAD;KACE,MAAK;KACL,cAAY,EAAe;KAC3B,SAAS;KACT,WAAW;eAEX,kBAAC,QAAD;MAAM,WAAW;gBAAjB,CACE,kBAAC,QAAD;OAAM,WAAW;iBACd,EAAe;MACZ,CAAA,GACL,CACG;;IACA,CAAA;GAEZ;GAEA,IAAI,IAAgC;GA0CpC,OAzCI,KAAwB,KAAkB,SAC5C,IACE,kBAAC,GAAD;IAAoB,IAAI;IAA4B;cACjD,EAAW,KAAK,MAAU;KACzB,IAAI,IAA8B;KAClC,AAAI,EAAM,QAAQ,SAChB,IACE,kBAAC,QAAD;MACE,WAAW,EAAG,GAAkB,CAAqB;gBAEpD,EAAM;KACH,CAAA;KAIV,IAAI,IAIA;KAKJ,OAJI,EAAa,EAAM,EAAE,MACvB,IAAa,WAIb,kBAAC,OAAD;MAAqB,WAAW;gBAC9B,kBAAC,GAAD;OACE,IAAI,EAAM;OACV,WAAW,EAAuB,EAAE,OAAO,EAAW,CAAC;OACvD,cAAY,EAAM;iBAHpB,CAKG,GACD,kBAAC,QAAD;QAAM,WAAW;kBAAoB,EAAM;OAAY,CAAA,CACnD;;KACH,GATK,EAAM,GASX;IAET,CAAC;GACiB,CAAA,IAKtB,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;IAAK,WAAW;cAAhB,CACG,GACA,CACE;OACJ,CACE,EAAA,GANK,EAAK,GAMV;EAET,CAAC;CACe,CAAA;AAEtB"}

package/lib/esm/atomic/organisms/sidebar/SidebarContainer.js

@@ -1,29 +1,29 @@
 import { cx as e } from "../../../theme/tools.js";
-import { content as t, nav as n, navCollapsed as r, sidebar as i, sidebarWidthRecipe as a } from "./sidebar.css.js";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { content as t, nav as n, navCollapsed as r, sidebar as i, sidebarTheme as a, sidebarWidthRecipe as o } from "./sidebar.css.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/atomic/organisms/sidebar/SidebarContainer.tsx
-var c = ({ children: c, headerSlot: l, footerSlot: u, hideHeader: d = !1, isCollapsed: f = !1 }) => {
-	let p = null;
-	f || (p = l);
-	let m = !d && p != null, h = "expanded";
-	return f && (h = "collapsed"), /* @__PURE__ */ s("aside", {
-		className: e(i, a({ state: h })),
-		children: [/* @__PURE__ */ s("div", {
+var l = ({ children: l, headerSlot: u, footerSlot: d, hideHeader: f = !1, isCollapsed: p = !1 }) => {
+	let m = null;
+	p || (m = u);
+	let h = !f && m != null, g = "expanded";
+	return p && (g = "collapsed"), /* @__PURE__ */ c("aside", {
+		className: e(i, a, o({ state: g })),
+		children: [/* @__PURE__ */ c("div", {
 			className: t,
-			children: [m && /* @__PURE__ */ o("div", {
-				className: "_1cyd4aw6 txvbqbfb7 txvbqb19fz txvbqblee txvbqbgz5 txvbqbos3",
-				children: p
-			}), /* @__PURE__ */ o("nav", {
-				className: e(n, { [r]: f }),
-				children: c
+			children: [h && /* @__PURE__ */ s("div", {
+				className: "_1cyd4aw7 txvbqbfpn txvbqb19uf txvbqblsu txvbqbhdl txvbqbp6j",
+				children: m
+			}), /* @__PURE__ */ s("nav", {
+				className: e(n, { [r]: p }),
+				children: l
 			})]
-		}), u != null && /* @__PURE__ */ o("div", {
-			className: e("_1cyd4aw9 txvbqbrl7", { "_1cyd4awa txvbqbfb7 txvbqbldo": f }),
-			children: u
+		}), d != null && /* @__PURE__ */ s("div", {
+			className: e("_1cyd4awa txvbqbrzn", { "_1cyd4awb txvbqbfpn txvbqbls4": p }),
+			children: d
 		})]
 	});
 };
 //#endregion
-export { c as SidebarContainer };
+export { l as SidebarContainer };
 
 //# sourceMappingURL=SidebarContainer.js.map

package/lib/esm/atomic/organisms/sidebar/SidebarContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarContainer.js","names":[],"sources":["../../../../../src/atomic/organisms/sidebar/SidebarContainer.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport type { RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { cx } from '../../../theme/tools.js';\nimport * as styles from './sidebar.css.js';\n\nexport type SidebarContainerProps = {\n  children: ReactNode;\n  headerSlot?: ReactNode;\n  footerSlot?: ReactNode;\n  hideHeader?: boolean;\n  isCollapsed?: boolean;\n  showDefaultHeaderAction?: boolean;\n};\n\nexport const SidebarContainer = ({\n  children,\n  headerSlot,\n  footerSlot,\n  hideHeader = false,\n  isCollapsed = false,\n}: SidebarContainerProps): JSX.Element => {\n  let headerAction: ReactNode | null = null;\n  if (!isCollapsed) {\n    headerAction = headerSlot;\n  }\n\n  const shouldRenderHeader = !hideHeader && headerAction != null;\n\n  let widthState: NonNullable<\n    NonNullable<RecipeVariants<typeof styles.sidebarWidthRecipe>>['state']\n  > = 'expanded';\n  if (isCollapsed) {\n    widthState = 'collapsed';\n  }\n\n  return (\n    <aside\n      className={cx(\n        styles.sidebar,\n        styles.sidebarWidthRecipe({ state: widthState }),\n      )}\n    >\n      <div className={styles.content}>\n        {shouldRenderHeader && (\n          <div className={styles.headerActions}>{headerAction}</div>\n        )}\n        <nav\n          className={cx(styles.nav, {\n            [styles.navCollapsed]: isCollapsed,\n          })}\n        >\n          {children}\n        </nav>\n      </div>\n      {footerSlot != null && (\n        <div\n          className={cx(styles.footer, {\n            [styles.footerCollapsed]: isCollapsed,\n          })}\n        >\n          {footerSlot}\n        </div>\n      )}\n    </aside>\n  );\n};\n"],"mappings":";;;;AAeA,IAAa,KAAoB,EAC/B,aACA,eACA,eACA,gBAAa,IACb,iBAAc,SAC0B;CACxC,IAAI,IAAiC;CACrC,AAAK,MACH,IAAe;CAGjB,IAAM,IAAqB,CAAC,KAAc,KAAgB,MAEtD,IAEA;CAKJ,OAJI,MACF,IAAa,cAIb,kBAAC,SAAD;EACE,WAAW,EACT,GACA,EAA0B,EAAE,OAAO,EAAW,CAAC,CACjD;YAJF,CAME,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACG,KACC,kBAAC,OAAD;IAAK,WAAW;cAAuB;GAAkB,CAAA,GAE3D,kBAAC,OAAD;IACE,WAAW,EAAG,GAAY,GACvB,IAAsB,EACzB,CAAC;IAEA;GACE,CAAA,CACF;MACJ,KAAc,QACb,kBAAC,OAAD;GACE,WAAW,EAAG,uBAAe,EAC1B,iCAAyB,EAC5B,CAAC;aAEA;EACE,CAAA,CAEF;;AAEX"}
+{"version":3,"file":"SidebarContainer.js","names":[],"sources":["../../../../../src/atomic/organisms/sidebar/SidebarContainer.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\nimport type { RecipeVariants } from '@vanilla-extract/recipes';\n\nimport { cx } from '../../../theme/tools.js';\nimport * as styles from './sidebar.css.js';\n\nexport type SidebarContainerProps = {\n  children: ReactNode;\n  headerSlot?: ReactNode;\n  footerSlot?: ReactNode;\n  hideHeader?: boolean;\n  isCollapsed?: boolean;\n  showDefaultHeaderAction?: boolean;\n};\n\nexport const SidebarContainer = ({\n  children,\n  headerSlot,\n  footerSlot,\n  hideHeader = false,\n  isCollapsed = false,\n}: SidebarContainerProps): JSX.Element => {\n  let headerAction: ReactNode | null = null;\n  if (!isCollapsed) {\n    headerAction = headerSlot;\n  }\n\n  const shouldRenderHeader = !hideHeader && headerAction != null;\n\n  let widthState: NonNullable<\n    NonNullable<RecipeVariants<typeof styles.sidebarWidthRecipe>>['state']\n  > = 'expanded';\n  if (isCollapsed) {\n    widthState = 'collapsed';\n  }\n\n  return (\n    <aside\n      className={cx(\n        styles.sidebar,\n        styles.sidebarTheme,\n        styles.sidebarWidthRecipe({ state: widthState }),\n      )}\n    >\n      <div className={styles.content}>\n        {shouldRenderHeader && (\n          <div className={styles.headerActions}>{headerAction}</div>\n        )}\n        <nav\n          className={cx(styles.nav, {\n            [styles.navCollapsed]: isCollapsed,\n          })}\n        >\n          {children}\n        </nav>\n      </div>\n      {footerSlot != null && (\n        <div\n          className={cx(styles.footer, {\n            [styles.footerCollapsed]: isCollapsed,\n          })}\n        >\n          {footerSlot}\n        </div>\n      )}\n    </aside>\n  );\n};\n"],"mappings":";;;;AAeA,IAAa,KAAoB,EAC/B,aACA,eACA,eACA,gBAAa,IACb,iBAAc,SAC0B;CACxC,IAAI,IAAiC;CACrC,AAAK,MACH,IAAe;CAGjB,IAAM,IAAqB,CAAC,KAAc,KAAgB,MAEtD,IAEA;CAKJ,OAJI,MACF,IAAa,cAIb,kBAAC,SAAD;EACE,WAAW,EACT,GACA,GACA,EAA0B,EAAE,OAAO,EAAW,CAAC,CACjD;YALF,CAOE,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACG,KACC,kBAAC,OAAD;IAAK,WAAW;cAAuB;GAAkB,CAAA,GAE3D,kBAAC,OAAD;IACE,WAAW,EAAG,GAAY,GACvB,IAAsB,EACzB,CAAC;IAEA;GACE,CAAA,CACF;MACJ,KAAc,QACb,kBAAC,OAAD;GACE,WAAW,EAAG,uBAAe,EAC1B,iCAAyB,EAC5B,CAAC;aAEA;EACE,CAAA,CAEF;;AAEX"}

package/lib/esm/atomic/organisms/sidebar/navigationSidebar.css.js

@@ -2,7 +2,7 @@
 /* empty css                                 */
 import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
 //#region src/atomic/organisms/sidebar/navigationSidebar.css.ts
-var t = "w6b4r71 w6b4r70 txvbqbfb7 txvbqbey txvbqbldo txvbqb2rg txvbqb25s txvbqb2pn txvbqb1f2 txvbqb1b2f txvbqb1atp txvbqbj8r txvbqb7g txvbqb78 txvbqb7t", n = e({
+var t = "w6b4r71 w6b4r70 txvbqbfpn txvbqbey txvbqbls4 txvbqb2uc txvbqb28o txvbqb2sj txvbqbjn7 txvbqb7g txvbqb78 txvbqb7t", n = e({
 	defaultClassName: "w6b4r72",
 	variantClassNames: { state: {
 		collapsed: "w6b4r73",
@@ -10,7 +10,7 @@ var t = "w6b4r71 w6b4r70 txvbqbfb7 txvbqbey txvbqbldo txvbqb2rg txvbqb25s txvbqb
 	} },
 	defaultVariants: { state: "expanded" },
 	compoundVariants: []
-}), r = "w6b4r75 txvbqbppb txvbqb9j txvbqbgwm", i = "w6b4r76 txvbqbfbk txvbqb7k txvbqb79 txvbqb7v", a = e({
+}), r = "w6b4r75 txvbqbq3r txvbqb9j txvbqbhb2", i = "w6b4r76 txvbqbfq0 txvbqb7k txvbqb79 txvbqb7v", a = e({
 	defaultClassName: "w6b4r77",
 	variantClassNames: { state: {
 		expanded: "w6b4r78",
@@ -18,32 +18,32 @@ var t = "w6b4r71 w6b4r70 txvbqbfb7 txvbqbey txvbqbldo txvbqb2rg txvbqb25s txvbqb
 	} },
 	defaultVariants: { state: "collapsed" },
 	compoundVariants: []
-}), o = "w6b4r7a txvbqbrk4 txvbqbpqe txvbqbaqj txvbqb2pn txvbqb1nq txvbqb108h txvbqbwcq", s = "w6b4r7b", c = "w6b4r7c txvbqb133r", l = "w6b4r7g w6b4r7e w6b4r7d txvbqb108h txvbqb1162 txvbqb123a txvbqbxfd txvbqbfb7 txvbqbey txvbqblee txvbqb19fz txvbqb2rg txvbqb9j txvbqbni8 txvbqb17yw txvbqb1aqb txvbqb7g txvbqb78 txvbqb7t w6b4r7f txvbqbgxc txvbqb1b15", u = e({
-	defaultClassName: "w6b4r7l w6b4r7i w6b4r7e w6b4r7d txvbqb108h txvbqb1162 txvbqb123a txvbqbxfd txvbqbfb7 txvbqbey txvbqblee txvbqb19fz txvbqb2rg txvbqb9j txvbqbni8 txvbqb17yw txvbqb1aqb txvbqb7g txvbqb78 txvbqb7t w6b4r7h txvbqbgwz txvbqb3f",
+}), o = "w6b4r7a txvbqbryk txvbqbq4u txvbqbb4z txvbqb2sj txvbqb10mx txvbqbwr6", s = "w6b4r7b", c = "w6b4r7c", l = "w6b4r7d txvbqb13i7", u = "w6b4r7h w6b4r7f w6b4r7e txvbqb10mx txvbqb11ki txvbqb12hq txvbqbxtt txvbqbfpn txvbqbey txvbqblsu txvbqb19uf txvbqb2uc txvbqb9j txvbqbnwo txvbqb18dc txvbqb1b4r txvbqb7g txvbqb78 txvbqb7t w6b4r7g txvbqbhbs", d = e({
+	defaultClassName: "w6b4r7m w6b4r7j w6b4r7f w6b4r7e txvbqb10mx txvbqb11ki txvbqb12hq txvbqbxtt txvbqbfpn txvbqbey txvbqblsu txvbqb19uf txvbqb2uc txvbqb9j txvbqbnwo txvbqb18dc txvbqb1b4r txvbqb7g txvbqb78 txvbqb7t w6b4r7i txvbqbhbf txvbqb3f",
 	variantClassNames: { state: {
-		default: "w6b4r7m w6b4r7j txvbqb1b15",
-		active: "w6b4r7n w6b4r7k txvbqb1akf txvbqb1b43 txvbqb1nq txvbqb2rt"
+		default: "w6b4r7n w6b4r7k txvbqb1bc9",
+		active: "w6b4r7o w6b4r7l"
 	} },
 	defaultVariants: { state: "default" },
 	compoundVariants: []
-}), d = e({
-	defaultClassName: "w6b4r7q",
+}), f = e({
+	defaultClassName: "w6b4r7r",
 	variantClassNames: { state: {
-		collapsed: "w6b4r7r w6b4r7o txvbqbecj",
-		expanded: "w6b4r7s w6b4r7p txvbqbedm"
+		collapsed: "w6b4r7s w6b4r7p txvbqbeqz",
+		expanded: "w6b4r7t w6b4r7q txvbqbes2"
 	} },
 	defaultVariants: { state: "expanded" },
 	compoundVariants: []
-}), f = "w6b4r7t txvbqb119b", p = "w6b4r7u txvbqbfhc txvbqbuth txvbqb1ahj txvbqbwcq txvbqb17zz txvbqb7m txvbqb78 txvbqb7t", m = "w6b4r7v txvbqb133r txvbqbfb7 txvbqbey txvbqbldo txvbqb191j txvbqbj6y txvbqbgrx", h = "w6b4r7w txvbqb7m txvbqb78 txvbqb7t", g = "w6b4r7x w6b4r7w txvbqb7m txvbqb78 txvbqb7t", _ = "w6b4r7z w6b4r7w txvbqb7m txvbqb78 txvbqb7t w6b4r7y txvbqb1b4f", v = "w6b4r710 txvbqb133r txvbqbq3e txvbqbfb7 txvbqbey txvbqbldo txvbqb191j txvbqbj6y", y = "w6b4r712 w6b4r711 txvbqb133e txvbqb18ya txvbqb135x txvbqbfb7 txvbqbey txvbqbldo txvbqb192m txvbqbj81 txvbqb2r3 txvbqb1atp txvbqb1b2f txvbqb1b4f txvbqb7g txvbqb78 txvbqb7t", b = "w6b4r713 txvbqb133r txvbqbfb7 txvbqbey txvbqbldo txvbqb1916 txvbqbj6l", x = "w6b4r715 w6b4r714 txvbqb7m txvbqb78 txvbqb7t", S = "w6b4r717 w6b4r716 txvbqb1b4f txvbqb7m txvbqb78 txvbqb7t", C = e({
-	defaultClassName: "w6b4r71c w6b4r719 w6b4r718 txvbqb108h txvbqb1162 txvbqb123a txvbqbxfd txvbqbfb7 txvbqbey txvbqbgz5 txvbqb2rg txvbqb9j txvbqbgwm txvbqbni8 txvbqb3f txvbqb7h txvbqb78 txvbqb7t",
+}), p = "w6b4r7u txvbqb11nr", m = "w6b4r7v txvbqbfvs txvbqbv7x txvbqb1avz txvbqbwr6 txvbqb18ef txvbqb7m txvbqb78 txvbqb7t", h = "w6b4r7w txvbqb13i7 txvbqbfpn txvbqbey txvbqbls4 txvbqb19fz txvbqbjle txvbqbh6d", g = "w6b4r7x txvbqb7m txvbqb78 txvbqb7t", _ = "w6b4r7y w6b4r7x txvbqb7m txvbqb78 txvbqb7t", v = "w6b4r710 w6b4r7x txvbqb7m txvbqb78 txvbqb7t w6b4r7z txvbqb1bjr", y = "w6b4r711 txvbqb13i7 txvbqbqhu txvbqbfpn txvbqbey txvbqbls4 txvbqb19fz txvbqbjle", b = "w6b4r713 w6b4r712 txvbqb13hu txvbqb19cq txvbqb13kd txvbqbfpn txvbqbey txvbqbls4 txvbqb19h2 txvbqbjmh txvbqb2tz txvbqb1b85 txvbqb1bjr txvbqb7g txvbqb78 txvbqb7t", x = "w6b4r714 txvbqb13i7 txvbqbfpn txvbqbey txvbqbls4 txvbqb19fm txvbqbjl1", S = "w6b4r716 w6b4r715 txvbqb7m txvbqb78 txvbqb7t", C = "w6b4r718 w6b4r717 txvbqb1bjr txvbqb7m txvbqb78 txvbqb7t", w = e({
+	defaultClassName: "w6b4r71d w6b4r71a w6b4r719 txvbqb10mx txvbqb11ki txvbqb12hq txvbqbxtt txvbqbfpn txvbqbey txvbqbhdl txvbqb2uc txvbqb9j txvbqbhb2 txvbqbnwo txvbqb3f txvbqb7h txvbqb78 txvbqb7t",
 	variantClassNames: { state: {
-		default: "w6b4r71d w6b4r71a txvbqb1b15",
-		active: "w6b4r71e w6b4r71b txvbqb1awp txvbqb1b43 txvbqbgwz"
+		default: "w6b4r71e w6b4r71b txvbqb1bc9",
+		active: "w6b4r71f w6b4r71c"
 	} },
 	defaultVariants: { state: "default" },
 	compoundVariants: []
-}), w = "w6b4r71f txvbqbfb7 txvbqbey txvbqbldo txvbqb1916 txvbqbj6l txvbqbgrx txvbqb1b2f", T = "w6b4r71g txvbqbfhc txvbqbuth txvbqb1ahj txvbqbwcq txvbqb17zz";
+}), T = "w6b4r71g txvbqbfpn txvbqbey txvbqbls4 txvbqb19fm txvbqbjl1 txvbqbh6d", E = "w6b4r71h", D = "w6b4r71i txvbqbfvs txvbqbv7x txvbqb1avz txvbqbwr6 txvbqb18ef";
 //#endregion
-export { w as childIcon, T as childLabel, C as childLinkRecipe, t as collapseButton, r as collapseButtonLabel, n as collapseButtonStateRecipe, o as collapsibleContent, s as collapsibleItem, i as collapsibleSection, a as collapsibleStateRecipe, h as iconBaseLayer, g as iconHiddenOnHover, _ as iconVisibleOnHover, m as iconWrapper, c as itemWrapper, p as label, l as navButton, d as navGapRecipe, u as navLinkRecipe, f as navWithTrailingAction, y as trailingActionButton, x as trailingActionIconHidden, S as trailingActionIconVisible, b as trailingActionIconWrapper, v as trailingIconWrapper };
+export { T as childIcon, E as childIconTheme, D as childLabel, w as childLinkRecipe, t as collapseButton, r as collapseButtonLabel, n as collapseButtonStateRecipe, o as collapsibleContent, s as collapsibleContentTheme, c as collapsibleItem, i as collapsibleSection, a as collapsibleStateRecipe, g as iconBaseLayer, _ as iconHiddenOnHover, v as iconVisibleOnHover, h as iconWrapper, l as itemWrapper, m as label, u as navButton, f as navGapRecipe, d as navLinkRecipe, p as navWithTrailingAction, b as trailingActionButton, S as trailingActionIconHidden, C as trailingActionIconVisible, x as trailingActionIconWrapper, y as trailingIconWrapper };
 
 //# sourceMappingURL=navigationSidebar.css.js.map

package/lib/esm/atomic/organisms/sidebar/navigationSidebar.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigationSidebar.css.js","names":[],"sources":["../../../../../src/atomic/organisms/sidebar/navigationSidebar.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.css.js';\n\nexport const collapseButton = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: 'lg',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'tonePrimaryBorder',\n    color: 'tonePrimaryText',\n    backgroundColor: 'surfaceElevated',\n    height: 10,\n    transitionProperty: 'default',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.colors.tonePrimarySurface,\n        color: vars.colors.tonePrimaryText,\n        boxShadow: vars.boxShadow.brandGlow,\n      },\n      '&:focus-visible': {\n        outline: 'none',\n        boxShadow: `0 0 0 2px ${vars.colors.tonePrimaryBorder}`,\n      },\n    },\n  },\n]);\n\nexport const collapseButtonStateRecipe = recipe({\n  variants: {\n    state: {\n      collapsed: {\n        width: vars.spacing[10],\n        paddingInline: 0,\n      },\n      expanded: {\n        paddingInline: vars.spacing[3],\n        width: 'auto',\n      },\n    },\n  },\n  defaultVariants: {\n    state: 'expanded',\n  },\n});\n\nexport type CollapseButtonStateVariants = RecipeVariants<\n  typeof collapseButtonStateRecipe\n>;\n\nexport const collapseButtonLabel = sprinkles({\n  marginLeft: 2,\n  fontSize: 'sm',\n  fontWeight: 'medium',\n});\n\nexport const collapsibleSection = sprinkles({\n  display: 'grid',\n  transitionProperty: 'gridTemplateRowsOpacity',\n  transitionDuration: 300,\n  transitionTimingFunction: 'ease-in-out',\n});\n\nexport const collapsibleStateRecipe = recipe({\n  variants: {\n    state: {\n      expanded: {\n        gridTemplateRows: '1fr',\n        opacity: 1,\n      },\n      collapsed: {\n        gridTemplateRows: '0fr',\n        opacity: 0,\n        pointerEvents: 'none',\n      },\n    },\n  },\n  defaultVariants: {\n    state: 'collapsed',\n  },\n});\n\nexport type CollapsibleStateVariants = RecipeVariants<\n  typeof collapsibleStateRecipe\n>;\n\nexport const collapsibleContent = sprinkles({\n  marginTop: 1,\n  marginLeft: 5,\n  borderLeftWidth: 2,\n  borderStyle: 'solid',\n  borderColor: 'brandPrimaryRed',\n  paddingLeft: 3,\n  overflow: 'hidden',\n});\n\nexport const collapsibleItem = style({\n  selectors: {\n    '&:not(:first-child)': {\n      marginTop: vars.spacing[1],\n    },\n  },\n});\n\nexport const itemWrapper = sprinkles({\n  position: 'relative',\n});\n\nconst interactiveBase = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'flex-start',\n    width: 'full',\n    borderRadius: 'lg',\n    paddingY: 2,\n    paddingX: 3,\n    fontSize: 'sm',\n    lineHeight: 1.2,\n    textAlign: 'left',\n    backgroundColor: 'transparent',\n    transitionProperty: 'default',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.colors.surfaceMuted,\n        borderColor: vars.colors.tonePrimaryBorder,\n      },\n      '&:focus-visible': {\n        outline: 'none',\n      },\n    },\n  },\n]);\n\nexport const navButton = style([\n  interactiveBase,\n  sprinkles({ fontWeight: 'bold', color: 'text' }),\n]);\n\nconst navLinkBase = style([\n  interactiveBase,\n  sprinkles({ fontWeight: 'semibold', textDecoration: 'none' }),\n]);\n\nexport const navLinkRecipe = recipe({\n  base: navLinkBase,\n  variants: {\n    state: {\n      default: sprinkles({\n        color: 'text',\n      }),\n      active: sprinkles({\n        backgroundImage: 'brandDiagonal',\n        color: 'brandWhite',\n        borderColor: 'brandPrimaryRed',\n        borderRadius: 'xl',\n      }),\n    },\n  },\n  defaultVariants: {\n    state: 'default',\n  },\n});\n\nexport type NavLinkVariants = RecipeVariants<typeof navLinkRecipe>;\n\nexport const navGapRecipe = recipe({\n  variants: {\n    state: {\n      collapsed: sprinkles({ columnGap: 0 }),\n      expanded: sprinkles({ columnGap: 3 }),\n    },\n  },\n  defaultVariants: {\n    state: 'expanded',\n  },\n});\n\nexport type NavGapVariants = RecipeVariants<typeof navGapRecipe>;\n\nexport const navWithTrailingAction = sprinkles({\n  paddingRight: 12,\n});\n\nexport const label = sprinkles({\n  flex: 1,\n  minWidth: 0,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  transitionProperty: 'opacity',\n  transitionDuration: 200,\n  transitionTimingFunction: 'ease',\n});\n\nexport const iconWrapper = sprinkles({\n  position: 'relative',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 5,\n  height: 5,\n  flexShrink: 0,\n});\n\nconst fadingLayer = sprinkles({\n  transitionProperty: 'opacity',\n  transitionDuration: 200,\n  transitionTimingFunction: 'ease',\n});\n\nexport const iconBaseLayer = fadingLayer;\n\nexport const iconHiddenOnHover = style([\n  fadingLayer,\n  {\n    selectors: {\n      [`${itemWrapper}:hover &`]: { opacity: 0 },\n      [`${itemWrapper}:focus-visible &`]: { opacity: 0 },\n      [`${itemWrapper}:focus-within &`]: { opacity: 0 },\n    },\n  },\n]);\n\nexport const iconVisibleOnHover = style([\n  fadingLayer,\n  sprinkles({ opacity: 0 }),\n  {\n    selectors: {\n      [`${itemWrapper}:hover &`]: { opacity: 1 },\n      [`${itemWrapper}:focus-visible &`]: { opacity: 1 },\n      [`${itemWrapper}:focus-within &`]: { opacity: 1 },\n    },\n  },\n]);\n\nexport const trailingIconWrapper = sprinkles({\n  position: 'relative',\n  marginLeft: 'auto',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 5,\n  height: 5,\n});\n\nexport const trailingActionButton = style([\n  sprinkles({\n    position: 'absolute',\n    top: '1/2',\n    right: 2,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 8,\n    height: 8,\n    borderRadius: 'md',\n    backgroundColor: 'surfaceElevated',\n    color: 'tonePrimaryText',\n    opacity: 0,\n    transitionProperty: 'default',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    transform: 'translateY(-50%)',\n    selectors: {\n      [`${itemWrapper}:hover &`]: { opacity: 1 },\n      [`${itemWrapper}:focus-within &`]: { opacity: 1 },\n      '&:hover': {\n        backgroundColor: vars.colors.tonePrimarySurface,\n        color: vars.colors.tonePrimaryText,\n      },\n      '&:focus-visible': {\n        outline: 'none',\n        boxShadow: `0 0 0 2px ${vars.colors.tonePrimaryBorder}`,\n        opacity: 1,\n      },\n    },\n  },\n]);\n\nexport const trailingActionIconWrapper = sprinkles({\n  position: 'relative',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 4,\n  height: 4,\n});\n\nexport const trailingActionIconHidden = style([\n  sprinkles({\n    transitionProperty: 'opacity',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      [`${trailingActionButton}:hover &`]: { opacity: 0 },\n      [`${trailingActionButton}:focus-visible &`]: { opacity: 0 },\n    },\n  },\n]);\n\nexport const trailingActionIconVisible = style([\n  sprinkles({\n    opacity: 0,\n    transitionProperty: 'opacity',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      [`${trailingActionButton}:hover &`]: { opacity: 1 },\n      [`${trailingActionButton}:focus-visible &`]: { opacity: 1 },\n    },\n  },\n]);\n\nconst childLinkBase = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 2,\n    borderRadius: 'lg',\n    paddingY: 2,\n    paddingX: 3,\n    fontSize: 'sm',\n    fontWeight: 'medium',\n    lineHeight: 1.2,\n    textDecoration: 'none',\n    transitionProperty: 'colors',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.colors.surfaceMuted,\n        color: vars.colors.text,\n      },\n    },\n  },\n]);\n\nexport const childLinkRecipe = recipe({\n  base: childLinkBase,\n  variants: {\n    state: {\n      default: sprinkles({\n        color: 'text',\n      }),\n      active: sprinkles({\n        backgroundColor: 'brandSecondaryOrange',\n        color: 'brandWhite',\n        fontWeight: 'semibold',\n      }),\n    },\n  },\n  defaultVariants: {\n    state: 'default',\n  },\n});\n\nexport type ChildLinkVariants = RecipeVariants<typeof childLinkRecipe>;\n\nexport const childIcon = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 4,\n  height: 4,\n  flexShrink: 0,\n  color: 'tonePrimaryText',\n});\n\nexport const childLabel = sprinkles({\n  flex: 1,\n  minWidth: 0,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n"],"mappings":""}
+{"version":3,"file":"navigationSidebar.css.js","names":[],"sources":["../../../../../src/atomic/organisms/sidebar/navigationSidebar.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.css.js';\n\nexport const collapseButton = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: 'lg',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    height: 10,\n    transitionProperty: 'default',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    backgroundColor: vars.sidebar.collapseButtonBackground,\n    borderColor: vars.sidebar.collapseButtonBorderColor,\n    color: vars.sidebar.collapseButtonColor,\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.sidebar.collapseButtonHoverBackground,\n        color: vars.sidebar.collapseButtonHoverColor,\n        boxShadow: vars.sidebar.collapseButtonHoverShadow,\n      },\n      '&:focus-visible': {\n        outline: 'none',\n        boxShadow: vars.sidebar.collapseButtonFocusRing,\n      },\n    },\n  },\n]);\n\nexport const collapseButtonStateRecipe = recipe({\n  variants: {\n    state: {\n      collapsed: {\n        width: vars.spacing[10],\n        paddingInline: 0,\n      },\n      expanded: {\n        paddingInline: vars.spacing[3],\n        width: 'auto',\n      },\n    },\n  },\n  defaultVariants: {\n    state: 'expanded',\n  },\n});\n\nexport type CollapseButtonStateVariants = RecipeVariants<\n  typeof collapseButtonStateRecipe\n>;\n\nexport const collapseButtonLabel = sprinkles({\n  marginLeft: 2,\n  fontSize: 'sm',\n  fontWeight: 'medium',\n});\n\nexport const collapsibleSection = sprinkles({\n  display: 'grid',\n  transitionProperty: 'gridTemplateRowsOpacity',\n  transitionDuration: 300,\n  transitionTimingFunction: 'ease-in-out',\n});\n\nexport const collapsibleStateRecipe = recipe({\n  variants: {\n    state: {\n      expanded: {\n        gridTemplateRows: '1fr',\n        opacity: 1,\n      },\n      collapsed: {\n        gridTemplateRows: '0fr',\n        opacity: 0,\n        pointerEvents: 'none',\n      },\n    },\n  },\n  defaultVariants: {\n    state: 'collapsed',\n  },\n});\n\nexport type CollapsibleStateVariants = RecipeVariants<\n  typeof collapsibleStateRecipe\n>;\n\nexport const collapsibleContent = sprinkles({\n  marginTop: 1,\n  marginLeft: 5,\n  borderLeftWidth: 2,\n  borderStyle: 'solid',\n  paddingLeft: 3,\n  overflow: 'hidden',\n});\n\nexport const collapsibleContentTheme = style({\n  borderColor: vars.sidebar.nestedBorderColor,\n});\n\nexport const collapsibleItem = style({\n  selectors: {\n    '&:not(:first-child)': {\n      marginTop: vars.spacing[1],\n    },\n  },\n});\n\nexport const itemWrapper = sprinkles({\n  position: 'relative',\n});\n\nconst interactiveBase = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'flex-start',\n    width: 'full',\n    borderRadius: 'lg',\n    paddingY: 2,\n    paddingX: 3,\n    fontSize: 'sm',\n    lineHeight: 1.2,\n    textAlign: 'left',\n    backgroundColor: 'transparent',\n    transitionProperty: 'default',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.sidebar.itemHoverBackground,\n        color: vars.sidebar.itemHoverColor,\n      },\n      '&:focus-visible': {\n        outline: 'none',\n        boxShadow: vars.sidebar.itemFocusRing,\n      },\n    },\n  },\n]);\n\nexport const navButton = style([\n  interactiveBase,\n  sprinkles({ fontWeight: 'bold' }),\n  {\n    color: vars.sidebar.itemColor,\n  },\n]);\n\nconst navLinkBase = style([\n  interactiveBase,\n  sprinkles({ fontWeight: 'semibold', textDecoration: 'none' }),\n  {\n    color: vars.sidebar.itemColor,\n  },\n]);\n\nexport const navLinkRecipe = recipe({\n  base: navLinkBase,\n  variants: {\n    state: {\n      default: sprinkles({\n        color: 'inherit',\n      }),\n      active: style({\n        backgroundColor: vars.sidebar.itemActiveBackground,\n        backgroundImage: vars.sidebar.itemActiveBackgroundImage,\n        borderColor: vars.sidebar.itemActiveBorderColor,\n        color: vars.sidebar.itemActiveColor,\n        boxShadow: vars.sidebar.itemActiveShadow,\n      }),\n    },\n  },\n  defaultVariants: {\n    state: 'default',\n  },\n});\n\nexport type NavLinkVariants = RecipeVariants<typeof navLinkRecipe>;\n\nexport const navGapRecipe = recipe({\n  variants: {\n    state: {\n      collapsed: sprinkles({ columnGap: 0 }),\n      expanded: sprinkles({ columnGap: 3 }),\n    },\n  },\n  defaultVariants: {\n    state: 'expanded',\n  },\n});\n\nexport type NavGapVariants = RecipeVariants<typeof navGapRecipe>;\n\nexport const navWithTrailingAction = sprinkles({\n  paddingRight: 12,\n});\n\nexport const label = sprinkles({\n  flex: 1,\n  minWidth: 0,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  transitionProperty: 'opacity',\n  transitionDuration: 200,\n  transitionTimingFunction: 'ease',\n});\n\nexport const iconWrapper = sprinkles({\n  position: 'relative',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 5,\n  height: 5,\n  flexShrink: 0,\n});\n\nconst fadingLayer = sprinkles({\n  transitionProperty: 'opacity',\n  transitionDuration: 200,\n  transitionTimingFunction: 'ease',\n});\n\nexport const iconBaseLayer = fadingLayer;\n\nexport const iconHiddenOnHover = style([\n  fadingLayer,\n  {\n    selectors: {\n      [`${itemWrapper}:hover &`]: { opacity: 0 },\n      [`${itemWrapper}:focus-visible &`]: { opacity: 0 },\n      [`${itemWrapper}:focus-within &`]: { opacity: 0 },\n    },\n  },\n]);\n\nexport const iconVisibleOnHover = style([\n  fadingLayer,\n  sprinkles({ opacity: 0 }),\n  {\n    selectors: {\n      [`${itemWrapper}:hover &`]: { opacity: 1 },\n      [`${itemWrapper}:focus-visible &`]: { opacity: 1 },\n      [`${itemWrapper}:focus-within &`]: { opacity: 1 },\n    },\n  },\n]);\n\nexport const trailingIconWrapper = sprinkles({\n  position: 'relative',\n  marginLeft: 'auto',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 5,\n  height: 5,\n});\n\nexport const trailingActionButton = style([\n  sprinkles({\n    position: 'absolute',\n    top: '1/2',\n    right: 2,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 8,\n    height: 8,\n    borderRadius: 'md',\n    backgroundColor: 'surfaceElevated',\n    opacity: 0,\n    transitionProperty: 'default',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    transform: 'translateY(-50%)',\n    color: vars.sidebar.actionColor,\n    selectors: {\n      [`${itemWrapper}:hover &`]: { opacity: 1 },\n      [`${itemWrapper}:focus-within &`]: { opacity: 1 },\n      '&:hover': {\n        backgroundColor: vars.sidebar.actionHoverBackground,\n        color: vars.sidebar.actionHoverColor,\n      },\n      '&:focus-visible': {\n        outline: 'none',\n        boxShadow: vars.sidebar.actionFocusRing,\n        opacity: 1,\n      },\n    },\n  },\n]);\n\nexport const trailingActionIconWrapper = sprinkles({\n  position: 'relative',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 4,\n  height: 4,\n});\n\nexport const trailingActionIconHidden = style([\n  sprinkles({\n    transitionProperty: 'opacity',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      [`${trailingActionButton}:hover &`]: { opacity: 0 },\n      [`${trailingActionButton}:focus-visible &`]: { opacity: 0 },\n    },\n  },\n]);\n\nexport const trailingActionIconVisible = style([\n  sprinkles({\n    opacity: 0,\n    transitionProperty: 'opacity',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      [`${trailingActionButton}:hover &`]: { opacity: 1 },\n      [`${trailingActionButton}:focus-visible &`]: { opacity: 1 },\n    },\n  },\n]);\n\nconst childLinkBase = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 2,\n    borderRadius: 'lg',\n    paddingY: 2,\n    paddingX: 3,\n    fontSize: 'sm',\n    fontWeight: 'medium',\n    lineHeight: 1.2,\n    textDecoration: 'none',\n    transitionProperty: 'colors',\n    transitionDuration: 200,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    color: vars.sidebar.itemColor,\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.sidebar.itemHoverBackground,\n        color: vars.sidebar.itemHoverColor,\n      },\n    },\n  },\n]);\n\nexport const childLinkRecipe = recipe({\n  base: childLinkBase,\n  variants: {\n    state: {\n      default: sprinkles({\n        color: 'inherit',\n      }),\n      active: style({\n        backgroundColor: vars.sidebar.itemActiveBackground,\n        backgroundImage: vars.sidebar.itemActiveBackgroundImage,\n        borderColor: vars.sidebar.itemActiveBorderColor,\n        color: vars.sidebar.itemActiveColor,\n        boxShadow: vars.sidebar.itemActiveShadow,\n        fontWeight: vars.fontWeight.semibold,\n      }),\n    },\n  },\n  defaultVariants: {\n    state: 'default',\n  },\n});\n\nexport type ChildLinkVariants = RecipeVariants<typeof childLinkRecipe>;\n\nexport const childIcon = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 4,\n  height: 4,\n  flexShrink: 0,\n});\n\nexport const childIconTheme = style({\n  color: vars.sidebar.itemColor,\n});\n\nexport const childLabel = sprinkles({\n  flex: 1,\n  minWidth: 0,\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n"],"mappings":""}

package/lib/esm/atomic/organisms/sidebar/sidebar.css.js

@@ -2,16 +2,16 @@
 /* empty css                       */
 import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
 //#region src/atomic/organisms/sidebar/sidebar.css.ts
-var t = "_1cyd4aw0 txvbqbfb7 txvbqbk9l txvbqbgqh txvbqbwcq txvbqbwi5 txvbqb7q txvbqb79 txvbqb7v", n = e({
-	defaultClassName: "_1cyd4aw1",
+var t = "_1cyd4aw0 txvbqbfpn txvbqbko1 txvbqbh4x txvbqbwr6 txvbqbwwl txvbqb1tv txvbqb2sj txvbqb9o9 txvbqb7q txvbqb79 txvbqb7v", n = "_1cyd4aw1", r = e({
+	defaultClassName: "_1cyd4aw2",
 	variantClassNames: { state: {
-		collapsed: "_1cyd4aw2",
-		expanded: "_1cyd4aw3"
+		collapsed: "_1cyd4aw3",
+		expanded: "_1cyd4aw4"
 	} },
 	defaultVariants: { state: "expanded" },
 	compoundVariants: []
-}), r = "_1cyd4aw4 txvbqbfb7 txvbqbfhc txvbqbgqh", i = "_1cyd4aw5 txvbqbfb7 txvbqbey txvbqblee txvbqbgz5 txvbqbos3 txvbqbrjr txvbqbwhs txvbqb2rt txvbqb1akf txvbqb25s txvbqb2pn txvbqb1nq txvbqb7m txvbqb79 txvbqb7v", a = "_1cyd4aw6 txvbqbfb7 txvbqb19fz txvbqblee txvbqbgz5 txvbqbos3", o = "_1cyd4aw7 txvbqbfb7 txvbqbfhc txvbqbgqh txvbqbgz5 txvbqb7i txvbqb79 txvbqb7v txvbqb1240", s = "_1cyd4aw8 txvbqbgys", c = "_1cyd4aw9 txvbqbrl7", l = "_1cyd4awa txvbqbfb7 txvbqbldo", u = "_1cyd4awc _1cyd4awb txvbqb108h txvbqb1162 txvbqb123a txvbqbxfd txvbqb2r3 txvbqb9j txvbqbgwm txvbqb1b43 txvbqb1akf txvbqb25s txvbqb2pn txvbqb1nq txvbqb7g txvbqb76 txvbqb7t", d = "_1cyd4awf _1cyd4awd txvbqb108h txvbqb1162 txvbqb123a txvbqbxfd txvbqbfb7 txvbqbey txvbqbgzi txvbqb2rg txvbqb9j txvbqbni8 txvbqb3f txvbqb1aqb txvbqb1b15 txvbqb7g txvbqb76 txvbqb7t _1cyd4awe txvbqbgwz", f = "_1cyd4awg txvbqb1akf txvbqb1b43 txvbqb2rt", p = "_1cyd4awh txvbqbfb7 txvbqbey txvbqbldo txvbqb191j txvbqbj6y txvbqb1axd txvbqbgwz txvbqb7h txvbqb76 txvbqb7t", m = "_1cyd4awi txvbqbfhc txvbqbuth txvbqb1ahj txvbqbwcq txvbqb17zz";
+}), i = "_1cyd4aw5 txvbqbfpn txvbqbfvs txvbqbh4x", a = "_1cyd4aw6 txvbqbfpn txvbqbey txvbqblsu txvbqbhdl txvbqbp6j txvbqbry7 txvbqbww8 txvbqb2up txvbqb1ayv txvbqb28o txvbqb2sj txvbqb1qm txvbqb7m txvbqb79 txvbqb7v", o = "_1cyd4aw7 txvbqbfpn txvbqb19uf txvbqblsu txvbqbhdl txvbqbp6j", s = "_1cyd4aw8 txvbqbfpn txvbqbfvs txvbqbh4x txvbqbhdl txvbqb7i txvbqb79 txvbqb7v txvbqb12ig", c = "_1cyd4aw9 txvbqbhd8", l = "_1cyd4awa txvbqbrzn", u = "_1cyd4awb txvbqbfpn txvbqbls4", d = "_1cyd4awd _1cyd4awc txvbqb10mx txvbqb11ki txvbqb12hq txvbqbxtt txvbqb2tz txvbqb9j txvbqbhb2 txvbqb1bi7 txvbqb1ayv txvbqb28o txvbqb2sj txvbqb1qm txvbqb7g txvbqb76 txvbqb7t", f = "_1cyd4awg _1cyd4awe txvbqb10mx txvbqb11ki txvbqb12hq txvbqbxtt txvbqbfpn txvbqbey txvbqbhdy txvbqb2uc txvbqb9j txvbqbnwo txvbqb3f txvbqb1b4r txvbqb1bg1 txvbqb7g txvbqb76 txvbqb7t _1cyd4awf txvbqbhbf", p = "_1cyd4awh", m = "_1cyd4awi txvbqbfpn txvbqbey txvbqbls4 txvbqb19fz txvbqbjle txvbqb1bc9 txvbqbhbf txvbqb7h txvbqb76 txvbqb7t", h = "_1cyd4awj txvbqbfvs txvbqbv7x txvbqb1avz txvbqbwr6 txvbqb18ef";
 //#endregion
-export { r as content, u as defaultHeaderButton, c as footer, l as footerCollapsed, a as headerActions, i as headerRow, m as linkLabel, o as nav, s as navCollapsed, p as organizationIcon, d as organizationLink, f as organizationLinkActive, t as sidebar, n as sidebarWidthRecipe };
+export { i as content, d as defaultHeaderButton, l as footer, u as footerCollapsed, o as headerActions, a as headerRow, h as linkLabel, s as nav, c as navCollapsed, m as organizationIcon, f as organizationLink, p as organizationLinkActive, t as sidebar, n as sidebarTheme, r as sidebarWidthRecipe };
 
 //# sourceMappingURL=sidebar.css.js.map