@plumile/ui 0.1.134 → 0.1.142

package/lib/esm/components/layout/ResizableSplitView.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizableSplitView.css.js","names":[],"sources":["../../../../src/components/layout/ResizableSplitView.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../theme/sprinkles.css.js';\nimport { vars } from '../../theme/themeContract.css.js';\n\nexport const root = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'stretch',\n    gap: 0,\n    minWidth: 0,\n    width: 'full',\n  }),\n  {\n    minHeight: 0,\n  },\n]);\n\nexport const rootStacked = sprinkles({\n  flexDirection: 'column',\n  gap: 3,\n});\n\nexport const rootSplit = sprinkles({\n  flexDirection: 'row',\n});\n\nexport const main = style([\n  sprinkles({\n    flex: 1,\n    minWidth: 0,\n  }),\n  {\n    minHeight: 0,\n  },\n]);\n\nexport const sidePanel = sprinkles({\n  flex: 'none',\n  minWidth: 0,\n});\n\nexport const sidePanelStacked = sprinkles({\n  width: 'full',\n});\n\nexport const resizer = style([\n  sprinkles({\n    alignSelf: 'stretch',\n    backgroundColor: 'transparent',\n    cursor: 'col-resize',\n    flex: 'none',\n    minWidth: 4,\n    position: 'relative',\n    width: 4,\n  }),\n  {\n    touchAction: 'none',\n    selectors: {\n      '&::after': {\n        content: '',\n        position: 'absolute',\n        top: '50%',\n        left: '50%',\n        width: '4px',\n        height: '96px',\n        transform: 'translate(-50%, -50%)',\n        borderRadius: vars.borderRadius.full,\n        backgroundColor: vars.colors.border,\n        boxShadow: vars.boxShadow.sm,\n        transitionProperty: 'default',\n        transitionDuration: vars.transitionDuration[120],\n        transitionTimingFunction: vars.transitionTimingFunction.ease,\n      },\n      '&:hover::after, &[data-active=\"true\"]::after': {\n        backgroundColor: vars.colors.primary,\n        boxShadow: `0 0 0 1px ${vars.colors.primaryLight}`,\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n"],"mappings":""}

package/lib/esm/components/layout/ResizableSplitView.js

@@ -0,0 +1,176 @@
+import { cx as e } from "../../theme/tools.js";
+import { useUiTranslation as t } from "../../i18n/useUiTranslation.js";
+import { main as n, root as r, rootSplit as i, rootStacked as a, sidePanel as o, sidePanelStacked as s } from "./ResizableSplitView.css.js";
+import { useCallback as c, useEffect as l, useRef as u, useState as d } from "react";
+import { jsx as f, jsxs as ee } from "react/jsx-runtime";
+//#region src/components/layout/ResizableSplitView.tsx
+var te = 360, ne = 280, re = 320, p = .5, ie = 1024, ae = 16, oe = 64, m = (e) => {
+	if (e == null || typeof window > "u") return null;
+	try {
+		let t = window.localStorage.getItem(e);
+		if (t == null) return null;
+		let n = Number(t);
+		return !Number.isFinite(n) || n <= 0 ? null : n;
+	} catch {
+		return null;
+	}
+}, h = (e, t) => {
+	if (!(e == null || typeof window > "u")) try {
+		window.localStorage.setItem(e, String(t));
+	} catch {}
+}, g = (e, t, n, r) => {
+	let i = e * n, a = e - r;
+	return Math.max(0, Math.min(i, a, t ?? Infinity));
+}, _ = (e, t, n, r, i, a) => {
+	let o = g(t, r, i, a), s = Math.min(n, o);
+	return o <= 0 && (s = 0), Math.max(s, Math.min(e, Math.max(s, o)));
+};
+function v({ className: v, defaultSidePanelWidth: y = te, main: b, mainClassName: x, maxSidePanelRatio: S = p, maxSidePanelWidth: C, minMainWidth: w = re, minSidePanelWidth: T = ne, onSidePanelWidthChange: E, resizable: D = !0, resizerLabel: se, sidePanel: O, sidePanelClassName: ce, sidePanelLabel: k, sidePanelWidth: A, stackedBreakpoint: j = ie, storageKey: M }) {
+	let { t: le } = t(), N = u(null), P = u(A ?? y), F = u({
+		active: !1,
+		pointerId: null,
+		startClientX: 0,
+		startWidth: P.current
+	}), [ue, de] = d(() => m(M) ?? y), [fe, pe] = d(0), [I, L] = d(!1), [R, z] = d(!1), B = A ?? ue, V = O != null, H = V && D && !R, U = c(() => {
+		let e = N.current;
+		return e == null ? 0 : e.getBoundingClientRect().width;
+	}, []), W = c((e) => {
+		let t = U();
+		return t <= 0 ? e : _(e, t, T, C, S, w);
+	}, [
+		U,
+		S,
+		C,
+		w,
+		T
+	]), G = c((e) => {
+		let t = W(e);
+		return P.current = t, A ?? de(t), E?.(t), t;
+	}, [
+		W,
+		E,
+		A
+	]);
+	l(() => {
+		P.current = B;
+	}, [B]), l(() => {
+		let e = N.current;
+		e != null && pe(e.getBoundingClientRect().width);
+	}, [V, R]), l(() => {
+		if (typeof window > "u") return () => {};
+		let e = window.matchMedia(`(max-width: ${j - 1}px)`), t = () => {
+			z(e.matches);
+		};
+		return t(), e.addEventListener("change", t), () => {
+			e.removeEventListener("change", t);
+		};
+	}, [j]), l(() => {
+		if (!V || R) return;
+		let e = W(B);
+		if (e === B) {
+			P.current = e;
+			return;
+		}
+		G(e);
+	}, [
+		W,
+		G,
+		V,
+		R,
+		B
+	]);
+	let K = c(() => {
+		F.current.active && (F.current.active = !1, F.current.pointerId = null, L(!1), h(M, P.current));
+	}, [M]);
+	l(() => {
+		if (typeof window > "u") return () => {};
+		let e = (e) => {
+			let t = F.current;
+			if (!t.active || t.pointerId != null && e.pointerId !== t.pointerId) return;
+			e.preventDefault();
+			let n = t.startClientX - e.clientX;
+			G(t.startWidth + n);
+		}, t = (e) => {
+			let t = F.current;
+			t.pointerId != null && e.pointerId !== t.pointerId || K();
+		};
+		return window.addEventListener("pointermove", e), window.addEventListener("pointerup", t), window.addEventListener("pointercancel", t), () => {
+			window.removeEventListener("pointermove", e), window.removeEventListener("pointerup", t), window.removeEventListener("pointercancel", t);
+		};
+	}, [G, K]);
+	let q = c((e) => {
+		H && (e.preventDefault(), "setPointerCapture" in e.currentTarget && e.currentTarget.setPointerCapture(e.pointerId), F.current = {
+			active: !0,
+			pointerId: e.pointerId,
+			startClientX: e.clientX,
+			startWidth: B
+		}, L(!0));
+	}, [H, B]), me = c((e) => {
+		if (!H || e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+		e.preventDefault();
+		let t = ae;
+		e.shiftKey && (t = oe);
+		let n = -t;
+		e.key === "ArrowLeft" && (n = t), h(M, G(B + n));
+	}, [
+		H,
+		G,
+		B,
+		M
+	]);
+	if (!V) return /* @__PURE__ */ f("div", {
+		ref: N,
+		className: e(r, i, v),
+		children: /* @__PURE__ */ f("div", {
+			className: e(n, x),
+			children: b
+		})
+	});
+	let J;
+	R || (J = { width: `${B}px` });
+	let Y = g(fe, C, S, w), X = Math.min(T, Y);
+	Y <= 0 && (X = 0);
+	let he = Math.max(X, Y), ge = se ?? le("layout.pageShell.resizeSidePanel"), Z = i;
+	R && (Z = a);
+	let Q = "false";
+	I && (Q = "true");
+	let $;
+	return R && ($ = s), /* @__PURE__ */ ee("div", {
+		ref: N,
+		className: e(r, Z, v),
+		children: [
+			/* @__PURE__ */ f("div", {
+				className: e(n, x),
+				children: b
+			}),
+			H && /* @__PURE__ */ f("div", {
+				className: "_1sh6osj9 _1sh6osj8 txvbqbhh txvbqb1933 txvbqbb txvbqbdyg txvbqbtay txvbqb11js txvbqb17h7",
+				role: "separator",
+				"aria-orientation": "vertical",
+				"aria-label": ge,
+				"aria-valuemin": Math.round(X),
+				"aria-valuemax": Math.round(he),
+				"aria-valuenow": Math.round(B),
+				tabIndex: 0,
+				"data-active": Q,
+				onPointerDown: q,
+				onKeyDown: me
+			}),
+			/* @__PURE__ */ f("aside", {
+				className: e(o, $, ce),
+				"aria-label": k,
+				style: J,
+				children: O
+			})
+		]
+	});
+}
+var y = {
+	clampWidth: _,
+	readStoredWidth: m,
+	resolveMaxWidth: g
+};
+//#endregion
+export { v as ResizableSplitView, y as __test };
+
+//# sourceMappingURL=ResizableSplitView.js.map

package/lib/esm/components/layout/ResizableSplitView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizableSplitView.js","names":[],"sources":["../../../../src/components/layout/ResizableSplitView.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type JSX,\n  type KeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n  type ReactNode,\n} from 'react';\n\nimport { useUiTranslation } from '../../i18n/useUiTranslation.js';\nimport { cx } from '../../theme/tools.js';\nimport * as styles from './ResizableSplitView.css.js';\n\nconst DEFAULT_SIDE_PANEL_WIDTH = 360;\nconst DEFAULT_MIN_SIDE_PANEL_WIDTH = 280;\nconst DEFAULT_MIN_MAIN_WIDTH = 320;\nconst DEFAULT_MAX_SIDE_PANEL_RATIO = 0.5;\nconst DEFAULT_STACKED_BREAKPOINT = 1024;\nconst RESIZE_STEP = 16;\nconst RESIZE_SHIFT_STEP = 64;\n\ntype ResizeState = {\n  active: boolean;\n  pointerId: number | null;\n  startClientX: number;\n  startWidth: number;\n};\n\nexport type ResizableSplitViewProps = {\n  main: ReactNode;\n  sidePanel?: ReactNode | null;\n  sidePanelLabel?: string;\n  sidePanelWidth?: number;\n  defaultSidePanelWidth?: number;\n  minSidePanelWidth?: number;\n  maxSidePanelWidth?: number;\n  minMainWidth?: number;\n  maxSidePanelRatio?: number;\n  onSidePanelWidthChange?: (width: number) => void;\n  storageKey?: string;\n  stackedBreakpoint?: number;\n  className?: string;\n  mainClassName?: string;\n  sidePanelClassName?: string;\n  resizerLabel?: string;\n  resizable?: boolean;\n};\n\nconst readStoredWidth = (storageKey: string | undefined): number | null => {\n  if (storageKey == null || typeof window === 'undefined') {\n    return null;\n  }\n\n  try {\n    const stored = window.localStorage.getItem(storageKey);\n    if (stored == null) {\n      return null;\n    }\n    const parsed = Number(stored);\n    if (!Number.isFinite(parsed) || parsed <= 0) {\n      return null;\n    }\n    return parsed;\n  } catch {\n    return null;\n  }\n};\n\nconst persistWidth = (storageKey: string | undefined, width: number): void => {\n  if (storageKey == null || typeof window === 'undefined') {\n    return;\n  }\n\n  try {\n    window.localStorage.setItem(storageKey, String(width));\n  } catch {\n    // Ignore quota and permission errors.\n  }\n};\n\nconst resolveMaxWidth = (\n  containerWidth: number,\n  maxSidePanelWidth: number | undefined,\n  maxSidePanelRatio: number,\n  minMainWidth: number,\n): number => {\n  const ratioMax = containerWidth * maxSidePanelRatio;\n  const mainMax = containerWidth - minMainWidth;\n  const configuredMax = maxSidePanelWidth ?? Number.POSITIVE_INFINITY;\n  return Math.max(0, Math.min(ratioMax, mainMax, configuredMax));\n};\n\nconst clampWidth = (\n  candidateWidth: number,\n  containerWidth: number,\n  minSidePanelWidth: number,\n  maxSidePanelWidth: number | undefined,\n  maxSidePanelRatio: number,\n  minMainWidth: number,\n): number => {\n  const maxWidth = resolveMaxWidth(\n    containerWidth,\n    maxSidePanelWidth,\n    maxSidePanelRatio,\n    minMainWidth,\n  );\n  let safeMin = Math.min(minSidePanelWidth, maxWidth);\n  if (maxWidth <= 0) {\n    safeMin = 0;\n  }\n  const safeMax = Math.max(safeMin, maxWidth);\n  return Math.max(safeMin, Math.min(candidateWidth, safeMax));\n};\n\n/** Render an optional side panel with accessible pointer and keyboard resizing. */\nexport function ResizableSplitView({\n  className,\n  defaultSidePanelWidth = DEFAULT_SIDE_PANEL_WIDTH,\n  main,\n  mainClassName,\n  maxSidePanelRatio = DEFAULT_MAX_SIDE_PANEL_RATIO,\n  maxSidePanelWidth,\n  minMainWidth = DEFAULT_MIN_MAIN_WIDTH,\n  minSidePanelWidth = DEFAULT_MIN_SIDE_PANEL_WIDTH,\n  onSidePanelWidthChange,\n  resizable = true,\n  resizerLabel,\n  sidePanel,\n  sidePanelClassName,\n  sidePanelLabel,\n  sidePanelWidth,\n  stackedBreakpoint = DEFAULT_STACKED_BREAKPOINT,\n  storageKey,\n}: ResizableSplitViewProps): JSX.Element {\n  const { t } = useUiTranslation();\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  const widthSnapshotRef = useRef(sidePanelWidth ?? defaultSidePanelWidth);\n  const resizeStateRef = useRef<ResizeState>({\n    active: false,\n    pointerId: null,\n    startClientX: 0,\n    startWidth: widthSnapshotRef.current,\n  });\n  const [uncontrolledWidth, setUncontrolledWidth] = useState(() => {\n    return readStoredWidth(storageKey) ?? defaultSidePanelWidth;\n  });\n  const [measuredContainerWidth, setMeasuredContainerWidth] = useState(0);\n  const [isResizing, setIsResizing] = useState(false);\n  const [isStacked, setIsStacked] = useState(false);\n\n  const resolvedWidth = sidePanelWidth ?? uncontrolledWidth;\n  const hasSidePanel = sidePanel != null;\n  const canResize = hasSidePanel && resizable && !isStacked;\n\n  const getContainerWidth = useCallback((): number => {\n    const root = rootRef.current;\n    if (root == null) {\n      return 0;\n    }\n    return root.getBoundingClientRect().width;\n  }, []);\n\n  const clampForContainer = useCallback(\n    (candidateWidth: number): number => {\n      const containerWidth = getContainerWidth();\n      if (containerWidth <= 0) {\n        return candidateWidth;\n      }\n      return clampWidth(\n        candidateWidth,\n        containerWidth,\n        minSidePanelWidth,\n        maxSidePanelWidth,\n        maxSidePanelRatio,\n        minMainWidth,\n      );\n    },\n    [\n      getContainerWidth,\n      maxSidePanelRatio,\n      maxSidePanelWidth,\n      minMainWidth,\n      minSidePanelWidth,\n    ],\n  );\n\n  const commitWidth = useCallback(\n    (candidateWidth: number): number => {\n      const nextWidth = clampForContainer(candidateWidth);\n      widthSnapshotRef.current = nextWidth;\n      if (sidePanelWidth == null) {\n        setUncontrolledWidth(nextWidth);\n      }\n      onSidePanelWidthChange?.(nextWidth);\n      return nextWidth;\n    },\n    [clampForContainer, onSidePanelWidthChange, sidePanelWidth],\n  );\n\n  useEffect(() => {\n    widthSnapshotRef.current = resolvedWidth;\n  }, [resolvedWidth]);\n\n  useEffect(() => {\n    const root = rootRef.current;\n    if (root == null) {\n      return;\n    }\n    setMeasuredContainerWidth(root.getBoundingClientRect().width);\n  }, [hasSidePanel, isStacked]);\n\n  useEffect(() => {\n    if (typeof window === 'undefined') {\n      return () => {};\n    }\n    const mediaQuery = window.matchMedia(\n      `(max-width: ${stackedBreakpoint - 1}px)`,\n    );\n    const handleChange = () => {\n      setIsStacked(mediaQuery.matches);\n    };\n\n    handleChange();\n    mediaQuery.addEventListener('change', handleChange);\n\n    return () => {\n      mediaQuery.removeEventListener('change', handleChange);\n    };\n  }, [stackedBreakpoint]);\n\n  useEffect(() => {\n    if (!hasSidePanel || isStacked) {\n      return;\n    }\n    const nextWidth = clampForContainer(resolvedWidth);\n    if (nextWidth === resolvedWidth) {\n      widthSnapshotRef.current = nextWidth;\n      return;\n    }\n    commitWidth(nextWidth);\n  }, [clampForContainer, commitWidth, hasSidePanel, isStacked, resolvedWidth]);\n\n  const finishResize = useCallback(() => {\n    if (!resizeStateRef.current.active) {\n      return;\n    }\n    resizeStateRef.current.active = false;\n    resizeStateRef.current.pointerId = null;\n    setIsResizing(false);\n    persistWidth(storageKey, widthSnapshotRef.current);\n  }, [storageKey]);\n\n  useEffect(() => {\n    if (typeof window === 'undefined') {\n      return () => {};\n    }\n\n    const handlePointerMove = (event: PointerEvent) => {\n      const state = resizeStateRef.current;\n      if (!state.active) {\n        return;\n      }\n      if (state.pointerId != null && event.pointerId !== state.pointerId) {\n        return;\n      }\n      event.preventDefault();\n      const deltaX = state.startClientX - event.clientX;\n      commitWidth(state.startWidth + deltaX);\n    };\n\n    const handlePointerUp = (event: PointerEvent) => {\n      const state = resizeStateRef.current;\n      if (state.pointerId != null && event.pointerId !== state.pointerId) {\n        return;\n      }\n      finishResize();\n    };\n\n    window.addEventListener('pointermove', handlePointerMove);\n    window.addEventListener('pointerup', handlePointerUp);\n    window.addEventListener('pointercancel', handlePointerUp);\n\n    return () => {\n      window.removeEventListener('pointermove', handlePointerMove);\n      window.removeEventListener('pointerup', handlePointerUp);\n      window.removeEventListener('pointercancel', handlePointerUp);\n    };\n  }, [commitWidth, finishResize]);\n\n  const handlePointerDown = useCallback(\n    (event: ReactPointerEvent<HTMLDivElement>) => {\n      if (!canResize) {\n        return;\n      }\n      event.preventDefault();\n      if ('setPointerCapture' in event.currentTarget) {\n        event.currentTarget.setPointerCapture(event.pointerId);\n      }\n      resizeStateRef.current = {\n        active: true,\n        pointerId: event.pointerId,\n        startClientX: event.clientX,\n        startWidth: resolvedWidth,\n      };\n      setIsResizing(true);\n    },\n    [canResize, resolvedWidth],\n  );\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      if (!canResize) {\n        return;\n      }\n      if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {\n        return;\n      }\n      event.preventDefault();\n      let step = RESIZE_STEP;\n      if (event.shiftKey) {\n        step = RESIZE_SHIFT_STEP;\n      }\n      let delta = -step;\n      if (event.key === 'ArrowLeft') {\n        delta = step;\n      }\n      const nextWidth = commitWidth(resolvedWidth + delta);\n      persistWidth(storageKey, nextWidth);\n    },\n    [canResize, commitWidth, resolvedWidth, storageKey],\n  );\n\n  if (!hasSidePanel) {\n    return (\n      <div\n        ref={rootRef}\n        className={cx(styles.root, styles.rootSplit, className)}\n      >\n        <div className={cx(styles.main, mainClassName)}>{main}</div>\n      </div>\n    );\n  }\n\n  let sidePanelStyle: CSSProperties | undefined;\n  if (!isStacked) {\n    sidePanelStyle = { width: `${resolvedWidth}px` };\n  }\n\n  const maxResolvedWidth = resolveMaxWidth(\n    measuredContainerWidth,\n    maxSidePanelWidth,\n    maxSidePanelRatio,\n    minMainWidth,\n  );\n  let resizerMin = Math.min(minSidePanelWidth, maxResolvedWidth);\n  if (maxResolvedWidth <= 0) {\n    resizerMin = 0;\n  }\n  const resizerMax = Math.max(resizerMin, maxResolvedWidth);\n  const resolvedResizerLabel =\n    resizerLabel ?? t('layout.pageShell.resizeSidePanel');\n  let rootLayoutClassName = styles.rootSplit;\n  if (isStacked) {\n    rootLayoutClassName = styles.rootStacked;\n  }\n  let resizerActive = 'false';\n  if (isResizing) {\n    resizerActive = 'true';\n  }\n  let stackedSidePanelClassName: string | undefined;\n  if (isStacked) {\n    stackedSidePanelClassName = styles.sidePanelStacked;\n  }\n\n  return (\n    <div\n      ref={rootRef}\n      className={cx(styles.root, rootLayoutClassName, className)}\n    >\n      <div className={cx(styles.main, mainClassName)}>{main}</div>\n      {canResize && (\n        <div\n          className={styles.resizer}\n          role=\"separator\"\n          aria-orientation=\"vertical\"\n          aria-label={resolvedResizerLabel}\n          aria-valuemin={Math.round(resizerMin)}\n          aria-valuemax={Math.round(resizerMax)}\n          aria-valuenow={Math.round(resolvedWidth)}\n          tabIndex={0}\n          data-active={resizerActive}\n          onPointerDown={handlePointerDown}\n          onKeyDown={handleKeyDown}\n        />\n      )}\n      <aside\n        className={cx(\n          styles.sidePanel,\n          stackedSidePanelClassName,\n          sidePanelClassName,\n        )}\n        aria-label={sidePanelLabel}\n        style={sidePanelStyle}\n      >\n        {sidePanel}\n      </aside>\n    </div>\n  );\n}\n\nexport const __test = {\n  clampWidth,\n  readStoredWidth,\n  resolveMaxWidth,\n} as const;\n"],"mappings":"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"}

package/lib/esm/components/layout/Surface.css.js

@@ -0,0 +1,41 @@
+/* empty css                                   */
+/* empty css                       */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/components/layout/Surface.css.ts
+var t = e({
+	defaultClassName: "_1e1g2cpe _1e1g2cp0 txvbqbdr8 txvbqbf6i txvbqbt9i txvbqb17w0 txvbqbcs7",
+	variantClassNames: {
+		variant: {
+			brand: "_1e1g2cpf _1e1g2cp1 txvbqb197x",
+			neutral: "_1e1g2cpg _1e1g2cp2 txvbqb196b",
+			muted: "_1e1g2cph _1e1g2cp3 txvbqb196d",
+			plain: "_1e1g2cpi _1e1g2cp4 txvbqb1933"
+		},
+		density: {
+			compact: "_1e1g2cpj _1e1g2cp5 txvbqbffj txvbqbuyj",
+			default: "_1e1g2cpk _1e1g2cp6 txvbqbffj txvbqbuyj",
+			spacious: "_1e1g2cpl _1e1g2cp7 txvbqbffw txvbqbuz9"
+		},
+		border: {
+			none: "_1e1g2cpm _1e1g2cp8 txvbqb1g5 txvbqb2e3",
+			subtle: "_1e1g2cpn _1e1g2cp9 txvbqb1uy txvbqb2et txvbqb17u",
+			light: "_1e1g2cpo _1e1g2cpa txvbqb1uy txvbqb2et txvbqb18k"
+		},
+		radius: {
+			md: "_1e1g2cpp _1e1g2cpb txvbqb2g9",
+			lg: "_1e1g2cpq _1e1g2cpc txvbqb2gm",
+			xl: "_1e1g2cpr _1e1g2cpd txvbqb2gz"
+		}
+	},
+	defaultVariants: {
+		variant: "neutral",
+		density: "default",
+		border: "subtle",
+		radius: "lg"
+	},
+	compoundVariants: []
+}), n = "_1e1g2cps txvbqbdr8 txvbqbel txvbqbjus txvbqbffj", r = "_1e1g2cpt txvbqbdr8 txvbqbf6i txvbqbfet txvbqbt9i", i = "_1e1g2cpu txvbqbm9g txvbqb9w txvbqbfd0 txvbqb19c9", a = "_1e1g2cpv txvbqbm9g txvbqb9j txvbqb19cb", o = "_1e1g2cpw txvbqbdr8 txvbqbey txvbqbju2 txvbqbf91 txvbqbff6", s = "_1e1g2cpx txvbqbt9i", c = "_1e1g2cpy txvbqbdr8 txvbqbf91 txvbqbff6";
+//#endregion
+export { o as actions, s as content, a as description, c as footer, n as header, r as heading, t as surface, i as title };
+
+//# sourceMappingURL=Surface.css.js.map

package/lib/esm/components/layout/Surface.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Surface.css.js","names":[],"sources":["../../../../src/components/layout/Surface.css.ts"],"sourcesContent":["import { recipe } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../theme/sprinkles.css.js';\n\nexport const surface = recipe({\n  base: sprinkles({\n    display: 'flex',\n    flexDirection: 'column',\n    minWidth: 0,\n    width: 'full',\n    boxShadow: 'none',\n  }),\n  variants: {\n    variant: {\n      brand: sprinkles({ backgroundColor: 'brandSecondaryOrange-20' }),\n      neutral: sprinkles({ backgroundColor: 'surface' }),\n      muted: sprinkles({ backgroundColor: 'surfaceSecondary' }),\n      plain: sprinkles({ backgroundColor: 'transparent' }),\n    },\n    density: {\n      compact: sprinkles({ gap: 3, padding: 4 }),\n      default: sprinkles({ gap: 3, padding: 4 }),\n      spacious: sprinkles({ gap: 4, padding: 6 }),\n    },\n    border: {\n      none: sprinkles({ borderWidth: 0, borderStyle: 'none' }),\n      subtle: sprinkles({\n        borderWidth: 'default',\n        borderStyle: 'solid',\n        borderColor: 'borderSubtle',\n      }),\n      light: sprinkles({\n        borderWidth: 'default',\n        borderStyle: 'solid',\n        borderColor: 'borderLight',\n      }),\n    },\n    radius: {\n      md: sprinkles({ borderRadius: 'md' }),\n      lg: sprinkles({ borderRadius: 'lg' }),\n      xl: sprinkles({ borderRadius: 'xl' }),\n    },\n  },\n  defaultVariants: {\n    variant: 'neutral',\n    density: 'default',\n    border: 'subtle',\n    radius: 'lg',\n  },\n});\n\nexport const header = sprinkles({\n  display: 'flex',\n  alignItems: 'flex-start',\n  justifyContent: 'space-between',\n  gap: 3,\n});\n\nexport const heading = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n  minWidth: 0,\n});\n\nexport const title = sprinkles({\n  margin: 0,\n  fontSize: 'base',\n  fontWeight: 'semibold',\n  color: 'text',\n});\n\nexport const description = sprinkles({\n  margin: 0,\n  fontSize: 'sm',\n  color: 'textSecondary',\n});\n\nexport const actions = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'flex-end',\n  flexWrap: 'wrap',\n  gap: 2,\n});\n\nexport const content = sprinkles({\n  minWidth: 0,\n});\n\nexport const footer = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 2,\n});\n"],"mappings":""}

package/lib/esm/components/layout/Surface.js

@@ -0,0 +1,61 @@
+import { cx as e } from "../../theme/tools.js";
+import { content as t, surface as n } from "./Surface.css.js";
+import { useId as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/layout/Surface.tsx
+var o = ({ actions: r, ariaLabelledBy: o, as: s = "div", border: c = "subtle", children: l, className: u, contentClassName: d, density: f = "default", description: p, footer: m, radius: h = "lg", title: g, titleAs: _ = "h2", variant: v = "neutral" }) => {
+	let y = g != null || p != null || r != null;
+	return /* @__PURE__ */ a(s, {
+		"aria-labelledby": o,
+		className: e(n({
+			variant: v,
+			density: f,
+			border: c,
+			radius: h
+		}), u),
+		children: [
+			y && /* @__PURE__ */ a("header", {
+				className: "_1e1g2cps txvbqbdr8 txvbqbel txvbqbjus txvbqbffj",
+				children: [(g != null || p != null) && /* @__PURE__ */ a("div", {
+					className: "_1e1g2cpt txvbqbdr8 txvbqbf6i txvbqbfet txvbqbt9i",
+					children: [g != null && /* @__PURE__ */ i(_, {
+						className: "_1e1g2cpu txvbqbm9g txvbqb9w txvbqbfd0 txvbqb19c9",
+						id: o,
+						children: g
+					}), p != null && /* @__PURE__ */ i("div", {
+						className: "_1e1g2cpv txvbqbm9g txvbqb9j txvbqb19cb",
+						children: p
+					})]
+				}), r != null && /* @__PURE__ */ i("div", {
+					className: "_1e1g2cpw txvbqbdr8 txvbqbey txvbqbju2 txvbqbf91 txvbqbff6",
+					children: r
+				})]
+			}),
+			/* @__PURE__ */ i("div", {
+				className: e(t, d),
+				children: l
+			}),
+			m != null && /* @__PURE__ */ i("footer", {
+				className: "_1e1g2cpy txvbqbdr8 txvbqbf91 txvbqbff6",
+				children: m
+			})
+		]
+	});
+}, s = ({ as: e = "section", border: t = "subtle", density: n = "default", radius: a = "lg", title: s, titleAs: c = "h3", variant: l = "neutral", ...u }) => {
+	let d = r(), f;
+	return s != null && (f = d), /* @__PURE__ */ i(o, {
+		...u,
+		ariaLabelledBy: f,
+		as: e,
+		border: t,
+		density: n,
+		radius: a,
+		title: s,
+		titleAs: c,
+		variant: l
+	});
+};
+//#endregion
+export { o as Surface, o as default, s as SurfaceSection };
+
+//# sourceMappingURL=Surface.js.map

package/lib/esm/components/layout/Surface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Surface.js","names":[],"sources":["../../../../src/components/layout/Surface.tsx"],"sourcesContent":["import { useId, type JSX, type ReactNode } from 'react';\n\nimport { cx } from '../../theme/tools.js';\n\nimport * as styles from './Surface.css.js';\n\nexport type SurfaceElement = 'div' | 'section' | 'article';\nexport type SurfaceTitleElement = 'h2' | 'h3' | 'div';\nexport type SurfaceVariant = 'brand' | 'neutral' | 'muted' | 'plain';\nexport type SurfaceDensity = 'compact' | 'default' | 'spacious';\nexport type SurfaceBorder = 'none' | 'subtle' | 'light';\nexport type SurfaceRadius = 'md' | 'lg' | 'xl';\n\nexport type SurfaceProps = {\n  as?: SurfaceElement;\n  title?: ReactNode;\n  description?: ReactNode;\n  actions?: ReactNode;\n  footer?: ReactNode;\n  children: ReactNode;\n  className?: string;\n  contentClassName?: string;\n  titleAs?: SurfaceTitleElement;\n  variant?: SurfaceVariant;\n  density?: SurfaceDensity;\n  border?: SurfaceBorder;\n  radius?: SurfaceRadius;\n  ariaLabelledBy?: string;\n};\n\nexport const Surface = ({\n  actions,\n  ariaLabelledBy,\n  as: Component = 'div',\n  border = 'subtle',\n  children,\n  className,\n  contentClassName,\n  density = 'default',\n  description,\n  footer,\n  radius = 'lg',\n  title,\n  titleAs: TitleComponent = 'h2',\n  variant = 'neutral',\n}: SurfaceProps): JSX.Element => {\n  const hasHeader = title != null || description != null || actions != null;\n\n  return (\n    <Component\n      aria-labelledby={ariaLabelledBy}\n      className={cx(\n        styles.surface({ variant, density, border, radius }),\n        className,\n      )}\n    >\n      {hasHeader && (\n        <header className={styles.header}>\n          {(title != null || description != null) && (\n            <div className={styles.heading}>\n              {title != null && (\n                <TitleComponent className={styles.title} id={ariaLabelledBy}>\n                  {title}\n                </TitleComponent>\n              )}\n              {description != null && (\n                <div className={styles.description}>{description}</div>\n              )}\n            </div>\n          )}\n          {actions != null && <div className={styles.actions}>{actions}</div>}\n        </header>\n      )}\n      <div className={cx(styles.content, contentClassName)}>{children}</div>\n      {footer != null && <footer className={styles.footer}>{footer}</footer>}\n    </Component>\n  );\n};\n\nexport type SurfaceSectionProps = Omit<\n  SurfaceProps,\n  'as' | 'ariaLabelledBy'\n> & {\n  as?: Extract<SurfaceElement, 'section' | 'article' | 'div'>;\n};\n\nexport const SurfaceSection = ({\n  as = 'section',\n  border = 'subtle',\n  density = 'default',\n  radius = 'lg',\n  title,\n  titleAs = 'h3',\n  variant = 'neutral',\n  ...props\n}: SurfaceSectionProps): JSX.Element => {\n  const titleId = useId();\n  let ariaLabelledBy: string | undefined;\n  if (title != null) {\n    ariaLabelledBy = titleId;\n  }\n\n  return (\n    <Surface\n      {...props}\n      ariaLabelledBy={ariaLabelledBy}\n      as={as}\n      border={border}\n      density={density}\n      radius={radius}\n      title={title}\n      titleAs={titleAs}\n      variant={variant}\n    />\n  );\n};\n\nexport default Surface;\n"],"mappings":";;;;;AA8BA,IAAa,KAAW,EACtB,SAAA,GACA,mBACA,IAAI,IAAY,OAChB,YAAS,UACT,aACA,cACA,qBACA,aAAU,WACV,aAAA,GACA,QAAA,GACA,YAAS,MACT,OAAA,GACA,SAAS,IAAiB,MAC1B,aAAU,gBACqB;CAC/B,IAAM,IAAY,KAAS,QAAQ,KAAe,QAAQ,KAAW;CAErE,OACE,kBAAC,GAAD;EACE,mBAAiB;EACjB,WAAW,EACT,EAAe;GAAE;GAAS;GAAS;GAAQ;GAAQ,CAAC,EACpD,EACD;YALH;GAOG,KACC,kBAAC,UAAD;IAAQ,WAAW;cAAnB,EACI,KAAS,QAAQ,KAAe,SAChC,kBAAC,OAAD;KAAK,WAAW;eAAhB,CACG,KAAS,QACR,kBAAC,GAAD;MAAgB,WAAW;MAAc,IAAI;gBAC1C;MACc,CAAA,EAElB,KAAe,QACd,kBAAC,OAAD;MAAK,WAAW;gBAAqB;MAAkB,CAAA,CAErD;QAEP,KAAW,QAAQ,kBAAC,OAAD;KAAK,WAAW;eAAiB;KAAc,CAAA,CAC5D;;GAEX,kBAAC,OAAD;IAAK,WAAW,EAAG,GAAgB,EAAiB;IAAG;IAAe,CAAA;GACrE,KAAU,QAAQ,kBAAC,UAAD;IAAQ,WAAW;cAAgB;IAAgB,CAAA;GAC5D;;GAWH,KAAkB,EAC7B,QAAK,WACL,YAAS,UACT,aAAU,WACV,YAAS,MACT,UACA,aAAU,MACV,aAAU,WACV,GAAG,QACmC;CACtC,IAAM,IAAU,GAAO,EACnB;CAKJ,OAJI,KAAS,SACX,IAAiB,IAIjB,kBAAC,GAAD;EACE,GAAI;EACY;EACZ;EACI;EACC;EACD;EACD;EACE;EACA;EACT,CAAA"}

package/lib/esm/components/layout/toolbar/Toolbar.css.js

@@ -0,0 +1,64 @@
+/* empty css                                      */
+/* empty css                       */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/components/layout/toolbar/Toolbar.css.ts
+var t = e({
+	defaultClassName: "_8tcb289 _8tcb280 txvbqbdr8 txvbqbey txvbqb17w0",
+	variantClassNames: {
+		density: {
+			compact: "_8tcb28a _8tcb281 txvbqbff6",
+			default: "_8tcb28b _8tcb282 txvbqbffj"
+		},
+		wrap: {
+			nowrap: "_8tcb28c _8tcb283 txvbqbf8o",
+			wrap: "_8tcb28d _8tcb284 txvbqbf91"
+		},
+		justify: {
+			start: "_8tcb28e _8tcb285 txvbqbjuf",
+			between: "_8tcb28f _8tcb286 txvbqbjus",
+			end: "_8tcb28g _8tcb287 txvbqbju2"
+		},
+		surface: {
+			plain: "_8tcb28h",
+			bar: "_8tcb28i _8tcb288 txvbqbyov txvbqbzmg txvbqb10jo txvbqbvvr txvbqb2gm txvbqb1uy txvbqb2et txvbqb17h txvbqb196b"
+		}
+	},
+	defaultVariants: {
+		density: "default",
+		wrap: "wrap",
+		justify: "between",
+		surface: "plain"
+	},
+	compoundVariants: []
+}), n = e({
+	defaultClassName: "_8tcb28r _8tcb28j txvbqbdr8 txvbqbey txvbqbff6 txvbqbt9i",
+	variantClassNames: {
+		grow: {
+			false: "_8tcb28s",
+			true: "_8tcb28t _8tcb28k txvbqbdxq"
+		},
+		align: {
+			center: "_8tcb28u _8tcb28l txvbqbey",
+			stretch: "_8tcb28v _8tcb28m txvbqbe8"
+		},
+		justify: {
+			start: "_8tcb28w _8tcb28n txvbqbjuf",
+			end: "_8tcb28x _8tcb28o txvbqbju2"
+		},
+		wrap: {
+			false: "_8tcb28y _8tcb28p txvbqbf8o",
+			true: "_8tcb28z _8tcb28q txvbqbf91"
+		}
+	},
+	defaultVariants: {
+		grow: !1,
+		align: "center",
+		justify: "start",
+		wrap: !1
+	},
+	compoundVariants: []
+}), r = "_8tcb2810 txvbqbdxq txvbqbt9i", i = "_8tcb2811 txvbqbhh txvbqb17wd txvbqbtrx txvbqb196z";
+//#endregion
+export { n as group, i as separator, r as spacer, t as toolbar };
+
+//# sourceMappingURL=Toolbar.css.js.map

package/lib/esm/components/layout/toolbar/Toolbar.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.css.js","names":[],"sources":["../../../../../src/components/layout/toolbar/Toolbar.css.ts"],"sourcesContent":["import { recipe } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../../theme/sprinkles.css.js';\n\nexport const toolbar = recipe({\n  base: sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    width: 'full',\n  }),\n  variants: {\n    density: {\n      compact: sprinkles({\n        gap: 2,\n      }),\n      default: sprinkles({\n        gap: 3,\n      }),\n    },\n    wrap: {\n      nowrap: sprinkles({\n        flexWrap: 'nowrap',\n      }),\n      wrap: sprinkles({\n        flexWrap: 'wrap',\n      }),\n    },\n    justify: {\n      start: sprinkles({\n        justifyContent: 'flex-start',\n      }),\n      between: sprinkles({\n        justifyContent: 'space-between',\n      }),\n      end: sprinkles({\n        justifyContent: 'flex-end',\n      }),\n    },\n    surface: {\n      plain: {},\n      bar: sprinkles({\n        paddingX: 4,\n        paddingY: 3,\n        borderRadius: 'lg',\n        borderWidth: 'default',\n        borderStyle: 'solid',\n        borderColor: 'border',\n        backgroundColor: 'surface',\n      }),\n    },\n  },\n  defaultVariants: {\n    density: 'default',\n    wrap: 'wrap',\n    justify: 'between',\n    surface: 'plain',\n  },\n});\n\nexport const group = recipe({\n  base: sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 2,\n    minWidth: 0,\n  }),\n  variants: {\n    grow: {\n      false: {},\n      true: sprinkles({\n        flex: 'auto',\n      }),\n    },\n    align: {\n      center: sprinkles({\n        alignItems: 'center',\n      }),\n      stretch: sprinkles({\n        alignItems: 'stretch',\n      }),\n    },\n    justify: {\n      start: sprinkles({\n        justifyContent: 'flex-start',\n      }),\n      end: sprinkles({\n        justifyContent: 'flex-end',\n      }),\n    },\n    wrap: {\n      false: sprinkles({\n        flexWrap: 'nowrap',\n      }),\n      true: sprinkles({\n        flexWrap: 'wrap',\n      }),\n    },\n  },\n  defaultVariants: {\n    grow: false,\n    align: 'center',\n    justify: 'start',\n    wrap: false,\n  },\n});\n\nexport const spacer = sprinkles({\n  flex: 'auto',\n  minWidth: 0,\n});\n\nexport const separator = sprinkles({\n  alignSelf: 'stretch',\n  width: 'px',\n  minWidth: 'px',\n  backgroundColor: 'borderSubtle',\n});\n"],"mappings":""}

package/lib/esm/components/layout/toolbar/Toolbar.js

@@ -0,0 +1,36 @@
+import { cx as e } from "../../../theme/tools.js";
+import { group as t, separator as n, spacer as r, toolbar as i } from "./Toolbar.css.js";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/layout/toolbar/Toolbar.tsx
+var o = ({ ariaLabel: t, children: n, className: r, density: o = "default", justify: s = "between", surface: c = "plain", wrap: l = "wrap" }) => {
+	let u;
+	return t != null && (u = "toolbar"), /* @__PURE__ */ a("div", {
+		"aria-label": t,
+		className: e(i({
+			density: o,
+			justify: s,
+			surface: c,
+			wrap: l
+		}), r),
+		role: u,
+		children: n
+	});
+}, s = ({ align: n = "center", children: r, className: i, grow: o = !1, justify: s = "start", wrap: c = !1 }) => /* @__PURE__ */ a("div", {
+	className: e(t({
+		align: n,
+		grow: o,
+		justify: s,
+		wrap: c
+	}), i),
+	children: r
+}), c = ({ className: t }) => /* @__PURE__ */ a("div", {
+	"aria-hidden": "true",
+	className: e(r, t)
+}), l = ({ className: t }) => /* @__PURE__ */ a("div", {
+	"aria-hidden": "true",
+	className: e(n, t)
+});
+//#endregion
+export { o as Toolbar, s as ToolbarGroup, l as ToolbarSeparator, c as ToolbarSpacer };
+
+//# sourceMappingURL=Toolbar.js.map

package/lib/esm/components/layout/toolbar/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","names":[],"sources":["../../../../../src/components/layout/toolbar/Toolbar.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport { cx } from '../../../theme/tools.js';\n\nimport * as styles from './Toolbar.css.js';\n\nexport type ToolbarDensity = 'compact' | 'default';\nexport type ToolbarWrap = 'wrap' | 'nowrap';\nexport type ToolbarJustify = 'start' | 'between' | 'end';\nexport type ToolbarSurface = 'plain' | 'bar';\n\nexport type ToolbarProps = {\n  children: ReactNode;\n  ariaLabel?: string;\n  className?: string;\n  density?: ToolbarDensity;\n  wrap?: ToolbarWrap;\n  justify?: ToolbarJustify;\n  surface?: ToolbarSurface;\n};\n\nexport const Toolbar = ({\n  ariaLabel,\n  children,\n  className,\n  density = 'default',\n  justify = 'between',\n  surface = 'plain',\n  wrap = 'wrap',\n}: ToolbarProps): JSX.Element => {\n  let role: 'toolbar' | undefined;\n  if (ariaLabel != null) {\n    role = 'toolbar';\n  }\n\n  return (\n    <div\n      aria-label={ariaLabel}\n      className={cx(\n        styles.toolbar({\n          density,\n          justify,\n          surface,\n          wrap,\n        }),\n        className,\n      )}\n      role={role}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport type ToolbarGroupAlign = 'center' | 'stretch';\nexport type ToolbarGroupJustify = 'start' | 'end';\n\nexport type ToolbarGroupProps = {\n  children: ReactNode;\n  className?: string;\n  grow?: boolean;\n  align?: ToolbarGroupAlign;\n  justify?: ToolbarGroupJustify;\n  wrap?: boolean;\n};\n\nexport const ToolbarGroup = ({\n  align = 'center',\n  children,\n  className,\n  grow = false,\n  justify = 'start',\n  wrap = false,\n}: ToolbarGroupProps): JSX.Element => {\n  return (\n    <div\n      className={cx(\n        styles.group({\n          align,\n          grow,\n          justify,\n          wrap,\n        }),\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport type ToolbarSpacerProps = {\n  className?: string;\n};\n\nexport const ToolbarSpacer = ({\n  className,\n}: ToolbarSpacerProps): JSX.Element => {\n  return <div aria-hidden=\"true\" className={cx(styles.spacer, className)} />;\n};\n\nexport type ToolbarSeparatorProps = {\n  className?: string;\n};\n\nexport const ToolbarSeparator = ({\n  className,\n}: ToolbarSeparatorProps): JSX.Element => {\n  return <div aria-hidden=\"true\" className={cx(styles.separator, className)} />;\n};\n"],"mappings":";;;;AAqBA,IAAa,KAAW,EACtB,cACA,aACA,cACA,aAAU,WACV,aAAU,WACV,aAAU,SACV,UAAO,aACwB;CAC/B,IAAI;CAKJ,OAJI,KAAa,SACf,IAAO,YAIP,kBAAC,OAAD;EACE,cAAY;EACZ,WAAW,EACT,EAAe;GACb;GACA;GACA;GACA;GACD,CAAC,EACF,EACD;EACK;EAEL;EACG,CAAA;GAgBG,KAAgB,EAC3B,WAAQ,UACR,aACA,cACA,UAAO,IACP,aAAU,SACV,UAAO,SAGL,kBAAC,OAAD;CACE,WAAW,EACT,EAAa;EACX;EACA;EACA;EACA;EACD,CAAC,EACF,EACD;CAEA;CACG,CAAA,EAQG,KAAiB,EAC5B,mBAEO,kBAAC,OAAD;CAAK,eAAY;CAAO,WAAW,EAAG,GAAe,EAAU;CAAI,CAAA,EAO/D,KAAoB,EAC/B,mBAEO,kBAAC,OAAD;CAAK,eAAY;CAAO,WAAW,EAAG,GAAkB,EAAU;CAAI,CAAA"}

package/lib/esm/components/navigation/sidebar/SidebarNavigation.js

@@ -0,0 +1,89 @@
+import { cx as e } from "../../../theme/tools.js";
+import { SidebarCollapseToggle as t } from "../../../backoffice/molecules/sidebar_collapse_toggle/SidebarCollapseToggle.js";
+import { SidebarNavSection as n } from "../../../backoffice/molecules/sidebar_nav_section/SidebarNavSection.js";
+import { container as r, containerRecipe as i, footer as a, header as o, inner as s, sections as c } from "./sidebarNavigation.css.js";
+import { useCallback as l, useState as u } from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import p from "@plumile/router/routing/useLocation.js";
+//#region src/components/navigation/sidebar/SidebarNavigation.tsx
+var m = (e, t, n) => t == null ? !1 : n === !0 ? e === t : e === t || e.startsWith(`${t}/`), h = (e, t) => e.children?.some((e) => e.isActive === !0 || m(t, e.href, e.exact) || h(e, t)) ?? !1, g = (e, t, n) => {
+	let r = [];
+	return e.forEach((e) => {
+		let i = h(e, t), a = e.isActive ?? m(t, e.href, e.exact), { id: o, children: s, data: c, label: l, href: u, icon: d, badge: f, disabled: p, onClick: _, actionSlot: v, dragHandleSlot: y, dragHandleLabel: b, actionsVisibility: x, ariaLabel: S } = e;
+		r.push({
+			id: o,
+			data: c,
+			label: l,
+			href: u,
+			icon: d,
+			badge: f,
+			disabled: p,
+			onClick: _,
+			actionSlot: v,
+			dragHandleSlot: y,
+			dragHandleLabel: b,
+			actionsVisibility: x,
+			ariaLabel: S,
+			isActive: a || i
+		}), !n && i && s != null && r.push(...g(s, t, n));
+	}), r;
+}, _ = ({ header: m, search: h, footer: _, sections: v, isCollapsed: y, defaultCollapsed: b = !1, onCollapsedChange: x, collapseToggleLabel: S, expandToggleLabel: C, collapseShortcut: w, navigationAriaLabel: T = "Navigation", hideCollapseToggle: E = !1, size: D = "standard", className: O }) => {
+	let [k, A] = u(b), j = y ?? k, { pathname: M } = p(), N = l(() => {
+		let e = !j;
+		y ?? A(e), x?.(e);
+	}, [
+		j,
+		y,
+		x
+	]), P = "expanded";
+	j && (P = "collapsed");
+	let F = null;
+	return _ != null && (F = /* @__PURE__ */ d("div", {
+		className: a,
+		children: _
+	})), /* @__PURE__ */ d("aside", {
+		className: e(r, i({
+			size: D,
+			state: P
+		}), O),
+		children: /* @__PURE__ */ f("div", {
+			className: s,
+			children: [
+				/* @__PURE__ */ f("div", {
+					className: o,
+					children: [!j && m, !E && /* @__PURE__ */ d(t, {
+						isCollapsed: j,
+						onToggle: N,
+						label: S,
+						expandLabel: C,
+						shortcut: w
+					})]
+				}),
+				h != null && !j && /* @__PURE__ */ d("div", {
+					className: "_6jdbjof txvbqbyns txvbqbzld txvbqbdr8 txvbqbf6i txvbqbff6",
+					children: h
+				}),
+				/* @__PURE__ */ d("nav", {
+					className: c,
+					"aria-label": T,
+					children: v.map((e) => /* @__PURE__ */ d(n, {
+						title: e.title,
+						icon: e.icon,
+						items: g(e.items, M, j),
+						collapsible: e.collapsible,
+						defaultCollapsed: e.defaultCollapsed,
+						isCollapsed: e.isCollapsed,
+						onCollapsedChange: e.onCollapsedChange,
+						collapsed: j,
+						reorder: e.reorder
+					}, e.id))
+				}),
+				F
+			]
+		})
+	});
+};
+//#endregion
+export { _ as SidebarNavigation, _ as default, t as SidebarNavigationCollapseToggle };
+
+//# sourceMappingURL=SidebarNavigation.js.map

package/lib/esm/components/navigation/sidebar/SidebarNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarNavigation.js","names":[],"sources":["../../../../../src/components/navigation/sidebar/SidebarNavigation.tsx"],"sourcesContent":["import useLocation from '@plumile/router/routing/useLocation.js';\nimport { useCallback, useState, type JSX, type ReactNode } from 'react';\n\nimport { SidebarCollapseToggle as SidebarNavigationCollapseToggle } from '../../../backoffice/molecules/sidebar_collapse_toggle/SidebarCollapseToggle.js';\nimport {\n  SidebarNavSection,\n  type SidebarNavSectionItemData,\n  type SidebarNavSectionItem,\n} from '../../../backoffice/molecules/sidebar_nav_section/SidebarNavSection.js';\nimport { cx } from '../../../theme/tools.js';\nimport * as styles from './sidebarNavigation.css.js';\n\nexport type SidebarNavigationItem = {\n  id: string;\n  label: ReactNode;\n  href?: string;\n  icon?: ReactNode;\n  badge?: ReactNode;\n  isActive?: boolean;\n  exact?: boolean;\n  disabled?: boolean;\n  onClick?: () => void;\n  children?: readonly SidebarNavigationItem[];\n  actionSlot?: ReactNode;\n  dragHandleSlot?: ReactNode;\n  dragHandleLabel?: string;\n  actionsVisibility?: 'auto' | 'always';\n  ariaLabel?: string;\n  data?: SidebarNavSectionItemData;\n};\n\nexport type SidebarNavigationReorder = {\n  enabled: boolean;\n  onReorder: (fromId: string, toId: string) => void;\n};\n\nexport type SidebarNavigationSection = {\n  id: string;\n  title?: ReactNode;\n  icon?: ReactNode;\n  items: readonly SidebarNavigationItem[];\n  collapsible?: boolean;\n  isCollapsed?: boolean;\n  defaultCollapsed?: boolean;\n  onCollapsedChange?: (collapsed: boolean) => void;\n  reorder?: SidebarNavigationReorder;\n};\n\nexport type SidebarNavigationSize = 'standard' | 'compact';\n\nexport type SidebarNavigationProps = {\n  header?: ReactNode;\n  search?: ReactNode;\n  footer?: ReactNode;\n  sections: readonly SidebarNavigationSection[];\n  isCollapsed?: boolean;\n  defaultCollapsed?: boolean;\n  onCollapsedChange?: (collapsed: boolean) => void;\n  collapseToggleLabel?: ReactNode;\n  expandToggleLabel?: ReactNode;\n  collapseShortcut?: readonly string[] | string;\n  navigationAriaLabel?: string;\n  hideCollapseToggle?: boolean;\n  size?: SidebarNavigationSize;\n  className?: string;\n};\n\nconst isPathActive = (\n  pathname: string,\n  href: string | undefined,\n  exact: boolean | undefined,\n): boolean => {\n  if (href == null) {\n    return false;\n  }\n  if (exact === true) {\n    return pathname === href;\n  }\n  return pathname === href || pathname.startsWith(`${href}/`);\n};\n\nconst hasActiveChild = (\n  item: SidebarNavigationItem,\n  pathname: string,\n): boolean => {\n  return (\n    item.children?.some((child) => {\n      return (\n        child.isActive === true ||\n        isPathActive(pathname, child.href, child.exact) ||\n        hasActiveChild(child, pathname)\n      );\n    }) ?? false\n  );\n};\n\nconst flattenItems = (\n  items: readonly SidebarNavigationItem[],\n  pathname: string,\n  sidebarCollapsed: boolean,\n): SidebarNavSectionItem[] => {\n  const flattened: SidebarNavSectionItem[] = [];\n\n  items.forEach((item) => {\n    const childActive = hasActiveChild(item, pathname);\n    const isActive =\n      item.isActive ?? isPathActive(pathname, item.href, item.exact);\n    const {\n      id,\n      children,\n      data,\n      label,\n      href,\n      icon,\n      badge,\n      disabled,\n      onClick,\n      actionSlot,\n      dragHandleSlot,\n      dragHandleLabel,\n      actionsVisibility,\n      ariaLabel,\n    } = item;\n\n    flattened.push({\n      id,\n      data,\n      label,\n      href,\n      icon,\n      badge,\n      disabled,\n      onClick,\n      actionSlot,\n      dragHandleSlot,\n      dragHandleLabel,\n      actionsVisibility,\n      ariaLabel,\n      isActive: isActive || childActive,\n    });\n\n    if (!sidebarCollapsed && childActive && children != null) {\n      flattened.push(...flattenItems(children, pathname, sidebarCollapsed));\n    }\n  });\n\n  return flattened;\n};\n\nexport const SidebarNavigation = ({\n  header,\n  search,\n  footer,\n  sections,\n  isCollapsed,\n  defaultCollapsed = false,\n  onCollapsedChange,\n  collapseToggleLabel,\n  expandToggleLabel,\n  collapseShortcut,\n  navigationAriaLabel = 'Navigation',\n  hideCollapseToggle = false,\n  size = 'standard',\n  className,\n}: SidebarNavigationProps): JSX.Element => {\n  const [uncontrolledCollapsed, setUncontrolledCollapsed] =\n    useState(defaultCollapsed);\n  const collapsed = isCollapsed ?? uncontrolledCollapsed;\n  const { pathname } = useLocation();\n\n  const handleToggleCollapsed = useCallback(() => {\n    const next = !collapsed;\n    if (isCollapsed == null) {\n      setUncontrolledCollapsed(next);\n    }\n    onCollapsedChange?.(next);\n  }, [collapsed, isCollapsed, onCollapsedChange]);\n\n  let state: NonNullable<NonNullable<styles.ContainerRecipeVariants>['state']> =\n    'expanded';\n  if (collapsed) {\n    state = 'collapsed';\n  }\n\n  let footerNode: JSX.Element | null = null;\n  if (footer != null) {\n    footerNode = <div className={styles.footer}>{footer}</div>;\n  }\n\n  return (\n    <aside\n      className={cx(\n        styles.container,\n        styles.containerRecipe({ size, state }),\n        className,\n      )}\n    >\n      <div className={styles.inner}>\n        <div className={styles.header}>\n          {!collapsed && header}\n          {!hideCollapseToggle && (\n            <SidebarNavigationCollapseToggle\n              isCollapsed={collapsed}\n              onToggle={handleToggleCollapsed}\n              label={collapseToggleLabel}\n              expandLabel={expandToggleLabel}\n              shortcut={collapseShortcut}\n            />\n          )}\n        </div>\n\n        {search != null && !collapsed && (\n          <div className={styles.search}>{search}</div>\n        )}\n        <nav className={styles.sections} aria-label={navigationAriaLabel}>\n          {sections.map((section) => {\n            return (\n              <SidebarNavSection\n                key={section.id}\n                title={section.title}\n                icon={section.icon}\n                items={flattenItems(section.items, pathname, collapsed)}\n                collapsible={section.collapsible}\n                defaultCollapsed={section.defaultCollapsed}\n                isCollapsed={section.isCollapsed}\n                onCollapsedChange={section.onCollapsedChange}\n                collapsed={collapsed}\n                reorder={section.reorder}\n              />\n            );\n          })}\n        </nav>\n\n        {footerNode}\n      </div>\n    </aside>\n  );\n};\n\nexport { SidebarNavigationCollapseToggle };\nexport default SidebarNavigation;\n"],"mappings":";;;;;;;;AAmEA,IAAM,KACJ,GACA,GACA,MAEI,KAAQ,OACH,KAEL,MAAU,KACL,MAAa,IAEf,MAAa,KAAQ,EAAS,WAAW,GAAG,EAAK,GAAG,EAGvD,KACJ,GACA,MAGE,EAAK,UAAU,MAAM,MAEjB,EAAM,aAAa,MACnB,EAAa,GAAU,EAAM,MAAM,EAAM,MAAM,IAC/C,EAAe,GAAO,EAAS,CAEjC,IAAI,IAIJ,KACJ,GACA,GACA,MAC4B;CAC5B,IAAM,IAAqC,EAAE;CA6C7C,OA3CA,EAAM,SAAS,MAAS;EACtB,IAAM,IAAc,EAAe,GAAM,EAAS,EAC5C,IACJ,EAAK,YAAY,EAAa,GAAU,EAAK,MAAM,EAAK,MAAM,EAC1D,EACJ,OACA,aACA,SACA,UACA,SACA,SACA,UACA,aACA,YACA,eACA,mBACA,oBACA,sBACA,iBACE;EAmBJ,AAjBA,EAAU,KAAK;GACb;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,UAAU,KAAY;GACvB,CAAC,EAEE,CAAC,KAAoB,KAAe,KAAY,QAClD,EAAU,KAAK,GAAG,EAAa,GAAU,GAAU,EAAiB,CAAC;GAEvE,EAEK;GAGI,KAAqB,EAChC,QAAA,GACA,QAAA,GACA,QAAA,GACA,UAAA,GACA,gBACA,sBAAmB,IACnB,sBACA,wBACA,sBACA,qBACA,yBAAsB,cACtB,wBAAqB,IACrB,UAAO,YACP,mBACyC;CACzC,IAAM,CAAC,GAAuB,KAC5B,EAAS,EAAiB,EACtB,IAAY,KAAe,GAC3B,EAAE,gBAAa,GAAa,EAE5B,IAAwB,QAAkB;EAC9C,IAAM,IAAO,CAAC;EAId,AAHI,KACF,EAAyB,EAAK,EAEhC,IAAoB,EAAK;IACxB;EAAC;EAAW;EAAa;EAAkB,CAAC,EAE3C,IACF;CACF,AAAI,MACF,IAAQ;CAGV,IAAI,IAAiC;CAKrC,OAJI,KAAU,SACZ,IAAa,kBAAC,OAAD;EAAK,WAAW;YAAgB;EAAa,CAAA,GAI1D,kBAAC,SAAD;EACE,WAAW,EACT,GACA,EAAuB;GAAE;GAAM;GAAO,CAAC,EACvC,EACD;YAED,kBAAC,OAAD;GAAK,WAAW;aAAhB;IACE,kBAAC,OAAD;KAAK,WAAW;eAAhB,CACG,CAAC,KAAa,GACd,CAAC,KACA,kBAAC,GAAD;MACE,aAAa;MACb,UAAU;MACV,OAAO;MACP,aAAa;MACb,UAAU;MACV,CAAA,CAEA;;IAEL,KAAU,QAAQ,CAAC,KAClB,kBAAC,OAAD;KAAK,WAAW;eAAgB;KAAa,CAAA;IAE/C,kBAAC,OAAD;KAAK,WAAW;KAAiB,cAAY;eAC1C,EAAS,KAAK,MAEX,kBAAC,GAAD;MAEE,OAAO,EAAQ;MACf,MAAM,EAAQ;MACd,OAAO,EAAa,EAAQ,OAAO,GAAU,EAAU;MACvD,aAAa,EAAQ;MACrB,kBAAkB,EAAQ;MAC1B,aAAa,EAAQ;MACrB,mBAAmB,EAAQ;MAChB;MACX,SAAS,EAAQ;MACjB,EAVK,EAAQ,GAUb,CAEJ;KACE,CAAA;IAEL;IACG;;EACA,CAAA"}

package/lib/esm/components/navigation/sidebar/SidebarNavigationItem.js

@@ -0,0 +1,2 @@
+import { SidebarNavItem as e } from "../../../backoffice/molecules/sidebar_nav_item/SidebarNavItem.js";
+export { e as SidebarNavigationItem };

package/lib/esm/components/navigation/sidebar/SidebarNavigationSection.js

@@ -0,0 +1,2 @@
+import { SidebarNavSection as e } from "../../../backoffice/molecules/sidebar_nav_section/SidebarNavSection.js";
+export { e as SidebarNavigationSection };

package/lib/esm/components/navigation/sidebar/SidebarProfileMenu.js

@@ -0,0 +1,2 @@
+import { BackofficeSidebarProfileMenu as e } from "../../../backoffice/molecules/sidebar_profile_menu/BackofficeSidebarProfileMenu.js";
+export { e as SidebarProfileMenu };

package/lib/esm/components/navigation/sidebar/sidebarNavigation.css.js

@@ -0,0 +1,48 @@
+/* empty css                                      */
+/* empty css                                          */
+/* empty css                                   */
+/* empty css                                        */
+/* empty css                                            */
+/* empty css                                  */
+/* empty css                                 */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/components/navigation/sidebar/sidebarNavigation.css.ts
+var t = "_6jdbjo1 _6jdbjo0 txvbqbdr8 txvbqbf6i txvbqbi1f txvbqb1g5 txvbqb2et txvbqb7rn", n = e({
+	defaultClassName: "_6jdbjo2",
+	variantClassNames: {
+		size: {
+			standard: "_6jdbjo3",
+			compact: "_6jdbjo4"
+		},
+		state: {
+			expanded: "_6jdbjo5",
+			collapsed: "_6jdbjo6"
+		}
+	},
+	defaultVariants: {
+		size: "standard",
+		state: "expanded"
+	},
+	compoundVariants: [
+		[{
+			size: "standard",
+			state: "expanded"
+		}, "_6jdbjo7"],
+		[{
+			size: "standard",
+			state: "collapsed"
+		}, "_6jdbjo8"],
+		[{
+			size: "compact",
+			state: "expanded"
+		}, "_6jdbjo9"],
+		[{
+			size: "compact",
+			state: "collapsed"
+		}, "_6jdbjoa"]
+	]
+}), r = "_6jdbjob txvbqbdr8 txvbqbf6i txvbqbffj txvbqbuy6 txvbqbi1f txvbqbs9r", i = "_6jdbjoc txvbqbyns txvbqbzld txvbqbdr8 txvbqbey txvbqbjus txvbqbff6", a = "_6jdbjoe _6jdbjod txvbqbdr8 txvbqbf6i txvbqbffj txvbqbdxd txvbqbs9r txvbqbuuk txvbqb38", o = "_6jdbjof txvbqbyns txvbqbzld txvbqbdr8 txvbqbf6i txvbqbff6", s = "_6jdbjog txvbqbyns txvbqbzld txvbqbdr8 txvbqbf6i txvbqbff6";
+//#endregion
+export { t as container, n as containerRecipe, s as footer, i as header, r as inner, o as search, a as sections };
+
+//# sourceMappingURL=sidebarNavigation.css.js.map

package/lib/esm/components/navigation/sidebar/sidebarNavigation.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebarNavigation.css.js","names":[],"sources":["../../../../../src/components/navigation/sidebar/sidebarNavigation.css.ts"],"sourcesContent":["import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';\nimport { style } from '@vanilla-extract/css';\n\nimport { sprinkles, vars } from '../../../theme/index.js';\n\nexport const container = style([\n  sprinkles({\n    display: 'flex',\n    flexDirection: 'column',\n    height: 'full',\n    borderWidth: 0,\n    borderStyle: 'solid',\n    borderRightWidth: 'px',\n  }),\n  {\n    backgroundColor: vars.sidebar.background,\n    borderRightColor: vars.sidebar.borderColor,\n  },\n]);\n\nexport const containerRecipe = recipe({\n  variants: {\n    size: {\n      standard: {},\n      compact: {},\n    },\n    state: {\n      expanded: {},\n      collapsed: {},\n    },\n  },\n  compoundVariants: [\n    {\n      variants: { size: 'standard', state: 'expanded' },\n      style: { width: vars.width[64] },\n    },\n    {\n      variants: { size: 'standard', state: 'collapsed' },\n      style: { width: vars.width[17.5] },\n    },\n    {\n      variants: { size: 'compact', state: 'expanded' },\n      style: { width: vars.width[56] },\n    },\n    {\n      variants: { size: 'compact', state: 'collapsed' },\n      style: { width: vars.width[16] },\n    },\n  ],\n  defaultVariants: {\n    size: 'standard',\n    state: 'expanded',\n  },\n});\n\nexport type ContainerRecipeVariants = RecipeVariants<typeof containerRecipe>;\n\nexport const inner = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n  padding: 3,\n  height: 'full',\n  minHeight: 0,\n});\n\nexport const header = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: 2,\n  paddingX: 1,\n});\n\nexport const sections = style([\n  sprinkles({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 3,\n    flex: 1,\n    minHeight: 0,\n    overflowY: 'auto',\n    scrollbarWidth: 'thin',\n  }),\n  {\n    scrollbarColor: `${vars.sidebar.scrollbarColor} transparent`,\n  },\n]);\n\nexport const search = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n  paddingX: 1,\n});\n\nexport const footer = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n  paddingX: 1,\n});\n"],"mappings":""}