@plumile/ui 0.1.61 → 0.1.62

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

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

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

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

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

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                              */
+//#region src/backoffice/molecules/sidebar_nav_item/sidebarNavItem.css.ts
+var e = "_1nm2b9q0 txvbqb9jf txvbqbco txvbqbanx txvbqb7d txvbqb6x txvbqb7k txvbqbaj6 txvbqbvab txvbqbtuo txvbqb2k", t = "_1nm2b9q1 txvbqbvb5 txvbqbtux txvbqb2l", n = "_1nm2b9q3 _1nm2b9q2 txvbqbnv6 txvbqboif txvbqbp5f txvbqblx6 txvbqb9io txvbqbco txvbqbao6 txvbqb1rf txvbqb8x txvbqb78 txvbqb6x txvbqb7k txvbqbv txvbqbv8r", r = "_1nm2b9q4 txvbqbnux txvbqboi6 txvbqbdnx", i = "_1nm2b9q5 txvbqbamo txvbqbv2v txvbqbv8p txvbqb8tx", a = "_1nm2b9q7 _1nm2b9q6 txvbqbv8t txvbqbr", o = "_1nm2b9q8 txvbqb9io txvbqbco txvbqbao6 txvbqb9mx txvbqbk4x txvbqb3b txvbqbuzj txvbqb12f txvbqb1px txvbqbl9f txvbqbt5o txvbqbv4x txvbqb1p", s = "_1nm2b9q9 txvbqb9jf txvbqbco", c = "_1nm2b9qb _1nm2b9qa txvbqb9jf txvbqbco txvbqbdnx txvbqbtwo txvbqbc66 txvbqb1rf txvbqb12f txvbqb1px txvbqbl9f txvbqbuzj txvbqbv8r txvbqbi", l = "_1nm2b9qc txvbqb9jf txvbqbco txvbqbdnx txvbqbtwo txvbqbc66 txvbqbaj6 txvbqbv4x", u = "_1nm2b9qd txvbqb9mx txvbqbk4x", d = "_1nm2b9qe txvbqb9hx", f = "_1nm2b9qf txvbqb9jf txvbqbco txvbqbdnx txvbqbaj6", p = "_1nm2b9qg txvbqb9hx";
+//#endregion
+export { s as actionSlot, e as actions, t as actionsVisible, f as badge, p as badgeCollapsed, c as dragHandle, l as icon, n as item, i as itemActive, r as itemCollapsed, a as itemDisabled, u as label, d as labelCollapsed, o as link };
+
+//# sourceMappingURL=sidebarNavItem.css.js.map

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

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

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

@@ -0,0 +1,64 @@
+import { cx as e } from "../../../theme/tools.js";
+import { ChevronDownSvg as t } from "../../../icons/ChevronDownSvg.js";
+import { SidebarNavItem as n } from "../sidebar_nav_item/SidebarNavItem.js";
+import { header as r, items as i, section as a, title as o, toggle as s } from "./sidebarNavSection.css.js";
+import "../../../index.js";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useCallback as u, useMemo as d, useState as f } from "react";
+//#region src/backoffice/molecules/sidebar_nav_section/SidebarNavSection.tsx
+var p = ({ title: p, items: m, collapsible: h = !1, isCollapsed: g, defaultCollapsed: _ = !1, onCollapsedChange: v, collapsed: y = !1, className: b }) => {
+	let [x, S] = f(_), C = g ?? x, w = h, T = u(() => {
+		if (!w) return;
+		let e = !C;
+		g ?? S(e), v?.(e);
+	}, [
+		w,
+		C,
+		g,
+		v
+	]), E = d(() => {
+		let e = "rotate(0deg)";
+		return C && (e = "rotate(-90deg)"), {
+			transform: e,
+			transition: "transform 120ms ease"
+		};
+	}, [C]), D = null;
+	if (p != null) {
+		let e = null;
+		w && (e = /* @__PURE__ */ c("button", {
+			type: "button",
+			className: s,
+			onClick: T,
+			"aria-expanded": !C,
+			children: /* @__PURE__ */ c(t, {
+				width: 18,
+				height: 18,
+				style: E
+			})
+		})), D = /* @__PURE__ */ l("div", {
+			className: r,
+			children: [/* @__PURE__ */ c("div", {
+				className: o,
+				children: p
+			}), e]
+		});
+	}
+	let O = null;
+	return C || (O = /* @__PURE__ */ c("div", {
+		className: i,
+		children: m.map((e) => {
+			let { id: t, data: r, ...i } = e;
+			return /* @__PURE__ */ c(n, {
+				...i,
+				collapsed: y
+			}, t);
+		})
+	})), /* @__PURE__ */ l("section", {
+		className: e(a, b),
+		children: [D, O]
+	});
+};
+//#endregion
+export { p as SidebarNavSection, p as default };
+
+//# sourceMappingURL=SidebarNavSection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarNavSection.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_nav_section/SidebarNavSection.tsx"],"sourcesContent":["import {\n  type JSX,\n  type ReactNode,\n  useCallback,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { ChevronDownSvg } from '@plumile/ui/icons/ChevronDownSvg.js';\n\nimport {\n  SidebarNavItem,\n  type SidebarNavItemProps,\n} from '../sidebar_nav_item/SidebarNavItem.js';\nimport * as styles from './sidebarNavSection.css.js';\nimport { cx } from '@plumile/ui';\n\nexport type SidebarNavSectionItemData = {\n  kind: 'dashboard' | 'entity' | 'tool';\n  id: string;\n  groupId?: string;\n};\n\nexport type SidebarNavSectionItem = SidebarNavItemProps & {\n  id: string;\n  data?: SidebarNavSectionItemData;\n};\n\nexport type SidebarNavSectionProps = {\n  title?: ReactNode;\n  items: readonly SidebarNavSectionItem[];\n  collapsible?: boolean;\n  isCollapsed?: boolean;\n  defaultCollapsed?: boolean;\n  onCollapsedChange?: (collapsed: boolean) => void;\n  collapsed?: boolean;\n  className?: string;\n};\n\nexport const SidebarNavSection = ({\n  title,\n  items,\n  collapsible = false,\n  isCollapsed,\n  defaultCollapsed = false,\n  onCollapsedChange,\n  collapsed: sidebarCollapsed = false,\n  className,\n}: SidebarNavSectionProps): JSX.Element => {\n  const [uncontrolledCollapsed, setUncontrolledCollapsed] =\n    useState(defaultCollapsed);\n\n  const collapsed = isCollapsed ?? uncontrolledCollapsed;\n\n  const canCollapse = collapsible;\n\n  const handleToggle = useCallback(() => {\n    if (!canCollapse) {\n      return;\n    }\n    const next = !collapsed;\n    if (isCollapsed == null) {\n      setUncontrolledCollapsed(next);\n    }\n    onCollapsedChange?.(next);\n  }, [canCollapse, collapsed, isCollapsed, onCollapsedChange]);\n\n  const iconStyle = useMemo(() => {\n    let rotate = 'rotate(0deg)';\n    if (collapsed) {\n      rotate = 'rotate(-90deg)';\n    }\n    return { transform: rotate, transition: 'transform 120ms ease' } as const;\n  }, [collapsed]);\n\n  let headerNode: JSX.Element | null = null;\n  if (title != null) {\n    let collapseToggleNode: JSX.Element | null = null;\n    if (canCollapse) {\n      collapseToggleNode = (\n        <button\n          type=\"button\"\n          className={styles.toggle}\n          onClick={handleToggle}\n          aria-expanded={!collapsed}\n        >\n          <ChevronDownSvg width={18} height={18} style={iconStyle} />\n        </button>\n      );\n    }\n\n    headerNode = (\n      <div className={styles.header}>\n        <div className={styles.title}>{title}</div>\n        {collapseToggleNode}\n      </div>\n    );\n  }\n\n  let itemsNode: JSX.Element | null = null;\n  if (!collapsed) {\n    itemsNode = (\n      <div className={styles.items}>\n        {items.map((item) => {\n          const { id, data, ...rest } = item;\n          return (\n            <SidebarNavItem key={id} {...rest} collapsed={sidebarCollapsed} />\n          );\n        })}\n      </div>\n    );\n  }\n\n  return (\n    <section className={cx(styles.section, className)}>\n      {headerNode}\n      {itemsNode}\n    </section>\n  );\n};\n\nexport default SidebarNavSection;\n"],"mappings":";;;;;;;;AAuCA,IAAa,KAAqB,EAChC,OAAA,GACA,OAAA,GACA,iBAAc,IACd,gBACA,sBAAmB,IACnB,sBACA,WAAW,IAAmB,IAC9B,mBACyC;CACzC,IAAM,CAAC,GAAuB,KAC5B,EAAS,EAAiB,EAEtB,IAAY,KAAe,GAE3B,IAAc,GAEd,IAAe,QAAkB;AACrC,MAAI,CAAC,EACH;EAEF,IAAM,IAAO,CAAC;AAId,EAHI,KACF,EAAyB,EAAK,EAEhC,IAAoB,EAAK;IACxB;EAAC;EAAa;EAAW;EAAa;EAAkB,CAAC,EAEtD,IAAY,QAAc;EAC9B,IAAI,IAAS;AAIb,SAHI,MACF,IAAS,mBAEJ;GAAE,WAAW;GAAQ,YAAY;GAAwB;IAC/D,CAAC,EAAU,CAAC,EAEX,IAAiC;AACrC,KAAI,KAAS,MAAM;EACjB,IAAI,IAAyC;AAc7C,EAbI,MACF,IACE,kBAAC,UAAD;GACE,MAAK;GACL,WAAW;GACX,SAAS;GACT,iBAAe,CAAC;aAEhB,kBAAC,GAAD;IAAgB,OAAO;IAAI,QAAQ;IAAI,OAAO;IAAa,CAAA;GACpD,CAAA,GAIb,IACE,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,kBAAC,OAAD;IAAK,WAAW;cAAe;IAAY,CAAA,EAC1C,EACG;;;CAIV,IAAI,IAAgC;AAcpC,QAbK,MACH,IACE,kBAAC,OAAD;EAAK,WAAW;YACb,EAAM,KAAK,MAAS;GACnB,IAAM,EAAE,OAAI,SAAM,GAAG,MAAS;AAC9B,UACE,kBAAC,GAAD;IAAyB,GAAI;IAAM,WAAW;IAAoB,EAA7C,EAA6C;IAEpE;EACE,CAAA,GAKR,kBAAC,WAAD;EAAS,WAAW,EAAG,GAAgB,EAAU;YAAjD,CACG,GACA,EACO"}

package/lib/esm/backoffice/molecules/sidebar_nav_section/sidebarNavSection.css.js

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                                 */
+//#region src/backoffice/molecules/sidebar_nav_section/sidebarNavSection.css.ts
+var e = "_1rp5mg60 txvbqb9io txvbqbai6 txvbqbao6", t = "_1rp5mg61 txvbqbnux txvbqboi6 txvbqbp56 txvbqblwx txvbqb9io txvbqbco txvbqbdoo txvbqbao6", n = "_1rp5mg62 txvbqb8f txvbqbamo txvbqb66 txvbqbv8t txvbqbedo", r = "_1rp5mg64 _1rp5mg63 txvbqb9jf txvbqbco txvbqbdnx txvbqbtwx txvbqbc6f txvbqb1rf txvbqbv31 txvbqb12f txvbqb1px txvbqbv txvbqbv8r", i = "_1rp5mg65 txvbqb9io txvbqbai6 txvbqbb9o";
+//#endregion
+export { t as header, i as items, e as section, n as title, r as toggle };
+
+//# sourceMappingURL=sidebarNavSection.css.js.map

package/lib/esm/backoffice/molecules/sidebar_nav_section/sidebarNavSection.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebarNavSection.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_nav_section/sidebarNavSection.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\nimport { vars } from '@plumile/ui/theme/themeContract.js';\n\nexport const section = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n});\n\nexport const header = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: 2,\n  paddingX: 2,\n  paddingY: 1,\n});\n\nexport const title = sprinkles({\n  fontSize: '2xs',\n  fontWeight: 'semibold',\n  textTransform: 'uppercase',\n  color: 'textMuted',\n  letterSpacing: 'wide',\n});\n\nexport const toggle = style([\n  sprinkles({\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 7,\n    height: 7,\n    borderRadius: 'md',\n    backgroundColor: 'backgroundSecondary',\n    borderWidth: 0,\n    borderStyle: 'none',\n    cursor: 'pointer',\n    color: 'textSecondary',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        backgroundColor: vars.colors.surfaceMuted,\n        color: vars.colors.text,\n      },\n    },\n  },\n]);\n\nexport const items = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1.5,\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/sidebar_profile_menu/BackofficeSidebarProfileMenu.js

@@ -0,0 +1,69 @@
+import { cx as e } from "../../../theme/tools.js";
+import { ChevronDownSvg as t } from "../../../icons/ChevronDownSvg.js";
+import { Dropdown as n } from "../../../atomic/molecules/dropdown/Dropdown.js";
+import { ProfileDropdownLogoutSvg as r } from "../../../icons/ProfileDropdownLogoutSvg.js";
+import { avatar as i, container as a, hidden as o, menu as s, menuIcon as c, menuItem as l, title as u, trigger as d, triggerMain as f } from "./sidebarProfileMenu.css.js";
+import "../../../index.js";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/backoffice/molecules/sidebar_profile_menu/BackofficeSidebarProfileMenu.tsx
+var h = ({ viewer: h, collapsed: g, labels: _, onSignOut: v, isSigningOut: y = !1, className: b }) => {
+	let x = u;
+	return g && (x = o), /* @__PURE__ */ m("div", {
+		className: e(a, b),
+		children: [/* @__PURE__ */ p("div", {
+			className: x,
+			children: _.sectionTitle
+		}), /* @__PURE__ */ p(n, {
+			trigger: (n) => /* @__PURE__ */ m("button", {
+				type: "button",
+				className: d({ collapsed: g }),
+				"aria-label": h.ariaLabel,
+				children: [/* @__PURE__ */ m("span", {
+					className: f,
+					children: [/* @__PURE__ */ p("span", {
+						className: i,
+						children: h.initials
+					}), !g && /* @__PURE__ */ m("span", {
+						className: "_1uw3f9ob txvbqb9io txvbqbai6 txvbqbk4x",
+						children: [/* @__PURE__ */ p("span", {
+							className: "_1uw3f9oc txvbqb8x txvbqbamo txvbqbv8p txvbqbuw6 txvbqbl6f txvbqbt6f",
+							children: h.displayName
+						}), /* @__PURE__ */ p("span", {
+							className: "_1uw3f9od txvbqb8o txvbqbv8r txvbqbuw6 txvbqbl6f txvbqbt6f",
+							children: h.email
+						})]
+					})]
+				}), !g && /* @__PURE__ */ p(t, {
+					width: 16,
+					height: 16,
+					className: e("_1uw3f9oe txvbqbv8r txvbqb7g txvbqb6w txvbqb7k", { "_1uw3f9of txvbqb2w": n })
+				})]
+			}),
+			ariaLabel: _.menuAriaLabel,
+			placement: "top-start",
+			closeOnItemClick: !0,
+			matchTriggerWidth: !1,
+			children: /* @__PURE__ */ p("div", {
+				className: s,
+				children: /* @__PURE__ */ m("button", {
+					type: "button",
+					role: "menuitem",
+					className: l,
+					onClick: v,
+					disabled: y,
+					children: [/* @__PURE__ */ p("span", {
+						className: c,
+						children: /* @__PURE__ */ p(r, {
+							width: 16,
+							height: 16
+						})
+					}), _.signOut]
+				})
+			})
+		})]
+	});
+};
+//#endregion
+export { h as BackofficeSidebarProfileMenu, h as default };
+
+//# sourceMappingURL=BackofficeSidebarProfileMenu.js.map

package/lib/esm/backoffice/molecules/sidebar_profile_menu/BackofficeSidebarProfileMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeSidebarProfileMenu.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_profile_menu/BackofficeSidebarProfileMenu.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { Dropdown } from '@plumile/ui/atomic/molecules/dropdown/Dropdown.js';\nimport { ChevronDownSvg } from '@plumile/ui/icons/ChevronDownSvg.js';\nimport { ProfileDropdownLogoutSvg } from '@plumile/ui/icons/ProfileDropdownLogoutSvg.js';\nimport { cx } from '@plumile/ui';\n\nimport * as styles from './sidebarProfileMenu.css.js';\n\nexport type BackofficeSidebarProfileViewer = {\n  displayName: string;\n  email: string;\n  initials: string;\n  ariaLabel: string;\n};\n\nexport type BackofficeSidebarProfileMenuLabels = {\n  sectionTitle: string;\n  menuAriaLabel: string;\n  signOut: string;\n};\n\nexport type BackofficeSidebarProfileMenuProps = {\n  viewer: BackofficeSidebarProfileViewer;\n  collapsed: boolean;\n  labels: BackofficeSidebarProfileMenuLabels;\n  onSignOut: () => void;\n  isSigningOut?: boolean;\n  className?: string;\n};\n\nexport const BackofficeSidebarProfileMenu = ({\n  viewer,\n  collapsed,\n  labels,\n  onSignOut,\n  isSigningOut = false,\n  className,\n}: BackofficeSidebarProfileMenuProps): JSX.Element => {\n  let titleClassName = styles.title;\n  if (collapsed) {\n    titleClassName = styles.hidden;\n  }\n\n  return (\n    <div className={cx(styles.container, className)}>\n      <div className={titleClassName}>{labels.sectionTitle}</div>\n      <Dropdown\n        trigger={(isOpen: boolean) => {\n          return (\n            <button\n              type=\"button\"\n              className={styles.trigger({ collapsed })}\n              aria-label={viewer.ariaLabel}\n            >\n              <span className={styles.triggerMain}>\n                <span className={styles.avatar}>{viewer.initials}</span>\n                {!collapsed && (\n                  <span className={styles.identity}>\n                    <span className={styles.displayName}>\n                      {viewer.displayName}\n                    </span>\n                    <span className={styles.email}>{viewer.email}</span>\n                  </span>\n                )}\n              </span>\n              {!collapsed && (\n                <ChevronDownSvg\n                  width={16}\n                  height={16}\n                  className={cx(styles.chevron, {\n                    [styles.chevronOpen]: isOpen,\n                  })}\n                />\n              )}\n            </button>\n          );\n        }}\n        ariaLabel={labels.menuAriaLabel}\n        placement=\"top-start\"\n        closeOnItemClick\n        matchTriggerWidth={false}\n      >\n        <div className={styles.menu}>\n          <button\n            type=\"button\"\n            role=\"menuitem\"\n            className={styles.menuItem}\n            onClick={onSignOut}\n            disabled={isSigningOut}\n          >\n            <span className={styles.menuIcon}>\n              <ProfileDropdownLogoutSvg width={16} height={16} />\n            </span>\n            {labels.signOut}\n          </button>\n        </div>\n      </Dropdown>\n    </div>\n  );\n};\n\nexport default BackofficeSidebarProfileMenu;\n"],"mappings":";;;;;;;;AA+BA,IAAa,KAAgC,EAC3C,WACA,cACA,WACA,cACA,kBAAe,IACf,mBACoD;CACpD,IAAI,IAAiB;AAKrB,QAJI,MACF,IAAiB,IAIjB,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAkB,EAAU;YAA/C,CACE,kBAAC,OAAD;GAAK,WAAW;aAAiB,EAAO;GAAmB,CAAA,EAC3D,kBAAC,GAAD;GACE,UAAU,MAEN,kBAAC,UAAD;IACE,MAAK;IACL,WAAW,EAAe,EAAE,cAAW,CAAC;IACxC,cAAY,EAAO;cAHrB,CAKE,kBAAC,QAAD;KAAM,WAAW;eAAjB,CACE,kBAAC,QAAD;MAAM,WAAW;gBAAgB,EAAO;MAAgB,CAAA,EACvD,CAAC,KACA,kBAAC,QAAD;MAAM,WAAW;gBAAjB,CACE,kBAAC,QAAD;OAAM,WAAW;iBACd,EAAO;OACH,CAAA,EACP,kBAAC,QAAD;OAAM,WAAW;iBAAe,EAAO;OAAa,CAAA,CAC/C;QAEJ;QACN,CAAC,KACA,kBAAC,GAAD;KACE,OAAO;KACP,QAAQ;KACR,WAAW,EAAG,kDAAgB,EAC3B,sBAAqB,GACvB,CAAC;KACF,CAAA,CAEG;;GAGb,WAAW,EAAO;GAClB,WAAU;GACV,kBAAA;GACA,mBAAmB;aAEnB,kBAAC,OAAD;IAAK,WAAW;cACd,kBAAC,UAAD;KACE,MAAK;KACL,MAAK;KACL,WAAW;KACX,SAAS;KACT,UAAU;eALZ,CAOE,kBAAC,QAAD;MAAM,WAAW;gBACf,kBAAC,GAAD;OAA0B,OAAO;OAAI,QAAQ;OAAM,CAAA;MAC9C,CAAA,EACN,EAAO,QACD;;IACL,CAAA;GACG,CAAA,CACP"}

package/lib/esm/backoffice/molecules/sidebar_profile_menu/sidebarProfileMenu.css.js

@@ -0,0 +1,17 @@
+/* empty css                                      */
+/* empty css                                  */
+import { createRuntimeFn as e } from "@vanilla-extract/recipes/createRuntimeFn";
+//#region src/backoffice/molecules/sidebar_profile_menu/sidebarProfileMenu.css.ts
+var t = "_1uw3f9o0 txvbqb9io txvbqbai6 txvbqbao6 txvbqbu6f", n = "_1uw3f9o1 txvbqbnuo txvbqbohx txvbqb8o txvbqbamo txvbqbv8r", r = "_1uw3f9o2 txvbqb9hx", i = e({
+	defaultClassName: "_1uw3f9o6 _1uw3f9o3 txvbqb9io txvbqbco txvbqbu6f txvbqb1co txvbqb1qf txvbqbwo txvbqb1ro txvbqbv2t txvbqb78 txvbqb6w txvbqb7k txvbqbv",
+	variantClassNames: { collapsed: {
+		true: "_1uw3f9o7 _1uw3f9o4 txvbqbdnx txvbqbl9x",
+		false: "_1uw3f9o8 _1uw3f9o5 txvbqbnv6 txvbqboif txvbqbp5f txvbqblx6 txvbqbdoo txvbqbao6"
+	} },
+	defaultVariants: { collapsed: !1 },
+	compoundVariants: []
+}), a = "_1uw3f9o9 txvbqb9io txvbqbco txvbqbao6 txvbqbk4x txvbqb9mx", o = "_1uw3f9oa txvbqbtx6 txvbqbc6o txvbqbk6x txvbqbji6 txvbqb1t6 txvbqb9io txvbqbco txvbqbdnx txvbqb8o txvbqbamo txvbqbv9z txvbqbuy6 txvbqb66", s = "_1uw3f9ob txvbqb9io txvbqbai6 txvbqbk4x", c = "_1uw3f9oc txvbqb8x txvbqbamo txvbqbv8p txvbqbuw6 txvbqbl6f txvbqbt6f", l = "_1uw3f9od txvbqb8o txvbqbv8r txvbqbuw6 txvbqbl6f txvbqbt6f", u = "_1uw3f9oe txvbqbv8r txvbqb7g txvbqb6w txvbqb7k", d = "_1uw3f9of txvbqb2w", f = "_1uw3f9og txvbqbkcf txvbqbl9x txvbqb9io txvbqbai6 txvbqbanx", p = "_1uw3f9oi _1uw3f9oh txvbqbnv6 txvbqboif txvbqbp5f txvbqblx6 txvbqb9io txvbqbco txvbqbao6 txvbqbu6f txvbqb12f txvbqb1px txvbqb1rf txvbqbuzj txvbqbv8p txvbqb8x txvbqbamf txvbqbt5o txvbqbv txvbqb78 txvbqb6w txvbqb7k", m = "_1uw3f9oj txvbqb9jf txvbqbco txvbqbv8r";
+//#endregion
+export { o as avatar, u as chevron, d as chevronOpen, t as container, c as displayName, l as email, r as hidden, s as identity, f as menu, m as menuIcon, p as menuItem, n as title, i as trigger, a as triggerMain };
+
+//# sourceMappingURL=sidebarProfileMenu.css.js.map

package/lib/esm/backoffice/molecules/sidebar_profile_menu/sidebarProfileMenu.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebarProfileMenu.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/sidebar_profile_menu/sidebarProfileMenu.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\nimport { vars } from '@plumile/ui/theme/themeContract.js';\n\nexport const container = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n  width: 'full',\n});\n\nexport const title = sprinkles({\n  fontSize: 'xs',\n  fontWeight: 'semibold',\n  color: 'textSecondary',\n  paddingX: 1,\n});\n\nexport const hidden = sprinkles({\n  display: 'none',\n});\n\nexport const trigger = recipe({\n  base: [\n    sprinkles({\n      display: 'flex',\n      alignItems: 'center',\n      width: 'full',\n      borderWidth: 'default',\n      borderStyle: 'solid',\n      borderColor: 'borderSubtle',\n      borderRadius: 'lg',\n      backgroundColor: 'surfaceSecondary',\n      transitionProperty: 'colors',\n      transitionDuration: 120,\n      transitionTimingFunction: 'ease',\n      cursor: 'pointer',\n    }),\n    {\n      selectors: {\n        '&:hover': {\n          backgroundColor: vars.colors.surfaceElevated,\n          borderColor: vars.colors.borderStrong,\n        },\n        '&:focus-visible': {\n          outline: `2px solid ${vars.colors.primary}`,\n          outlineOffset: '2px',\n        },\n      },\n    },\n  ],\n  variants: {\n    collapsed: {\n      true: sprinkles({\n        justifyContent: 'center',\n        padding: 2,\n      }),\n      false: sprinkles({\n        justifyContent: 'space-between',\n        gap: 2,\n        paddingY: 2,\n        paddingX: 3,\n      }),\n    },\n  },\n  defaultVariants: {\n    collapsed: false,\n  },\n});\n\nexport const triggerMain = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  minWidth: 0,\n  flex: 1,\n});\n\nexport const avatar = sprinkles({\n  width: 8,\n  height: 8,\n  minWidth: 8,\n  minHeight: 8,\n  borderRadius: 'full',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  fontSize: 'xs',\n  fontWeight: 'semibold',\n  color: 'brandWhite',\n  backgroundImage: 'brandDiagonal',\n  textTransform: 'uppercase',\n});\n\nexport const identity = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  minWidth: 0,\n});\n\nexport const displayName = sprinkles({\n  fontSize: 'sm',\n  fontWeight: 'semibold',\n  color: 'text',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n\nexport const email = sprinkles({\n  fontSize: 'xs',\n  color: 'textSecondary',\n  whiteSpace: 'nowrap',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n});\n\nexport const chevron = sprinkles({\n  color: 'textSecondary',\n  transitionProperty: 'transform',\n  transitionDuration: 120,\n  transitionTimingFunction: 'ease',\n});\n\nexport const chevronOpen = sprinkles({\n  rotate: 180,\n});\n\nexport const menu = sprinkles({\n  minWidth: 56,\n  padding: 2,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n});\n\nexport const menuItem = style([\n  sprinkles({\n    display: 'flex',\n    alignItems: 'center',\n    gap: 2,\n    width: 'full',\n    borderWidth: 0,\n    borderStyle: 'none',\n    borderRadius: 'md',\n    backgroundColor: 'transparent',\n    color: 'text',\n    fontSize: 'sm',\n    fontWeight: 'medium',\n    textAlign: 'left',\n    cursor: 'pointer',\n    paddingY: 2,\n    paddingX: 3,\n    transitionProperty: 'colors',\n    transitionDuration: 120,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover:not(:disabled)': {\n        backgroundColor: vars.colors.surfaceSecondary,\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n      '&:disabled': {\n        opacity: 0.6,\n        cursor: 'not-allowed',\n      },\n    },\n  },\n]);\n\nexport const menuIcon = sprinkles({\n  display: 'inline-flex',\n  alignItems: 'center',\n  color: 'textSecondary',\n});\n"],"mappings":""}

package/lib/esm/backoffice/molecules/table_toolbar/TableToolbar.js

@@ -0,0 +1,42 @@
+import { cx as e } from "../../../theme/tools.js";
+import { bottomRow as t, container as n, left as r, right as i, topRow as a } from "./tableToolbar.css.js";
+import "../../../index.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/backoffice/molecules/table_toolbar/TableToolbar.tsx
+var c = ({ search: c, filters: l, leftActions: u, rightActions: d, bottomLeft: f, bottomRight: p, className: m }) => {
+	let h = c != null || l != null || u != null || d != null, g = f != null || p != null;
+	if (!h && !g) return null;
+	let _ = null;
+	h && (_ = /* @__PURE__ */ s("div", {
+		className: a,
+		children: [/* @__PURE__ */ s("div", {
+			className: r,
+			children: [
+				c,
+				l,
+				u
+			]
+		}), /* @__PURE__ */ o("div", {
+			className: i,
+			children: d
+		})]
+	}));
+	let v = null;
+	return g && (v = /* @__PURE__ */ s("div", {
+		className: t,
+		children: [/* @__PURE__ */ o("div", {
+			className: r,
+			children: f
+		}), /* @__PURE__ */ o("div", {
+			className: i,
+			children: p
+		})]
+	})), /* @__PURE__ */ s("div", {
+		className: e(n, m),
+		children: [_, v]
+	});
+};
+//#endregion
+export { c as TableToolbar, c as default };
+
+//# sourceMappingURL=TableToolbar.js.map

package/lib/esm/backoffice/molecules/table_toolbar/TableToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableToolbar.js","names":[],"sources":["../../../../../src/backoffice/molecules/table_toolbar/TableToolbar.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport * as styles from './tableToolbar.css.js';\nimport { cx } from '@plumile/ui';\n\nexport type TableToolbarProps = {\n  search?: ReactNode;\n  filters?: ReactNode;\n  leftActions?: ReactNode;\n  rightActions?: ReactNode;\n  bottomLeft?: ReactNode;\n  bottomRight?: ReactNode;\n  className?: string;\n};\n\nexport const TableToolbar = ({\n  search,\n  filters,\n  leftActions,\n  rightActions,\n  bottomLeft,\n  bottomRight,\n  className,\n}: TableToolbarProps): JSX.Element | null => {\n  const showTop =\n    search != null ||\n    filters != null ||\n    leftActions != null ||\n    rightActions != null;\n  const showBottom = bottomLeft != null || bottomRight != null;\n\n  if (!showTop && !showBottom) {\n    return null;\n  }\n\n  let topNode: JSX.Element | null = null;\n  if (showTop) {\n    topNode = (\n      <div className={styles.topRow}>\n        <div className={styles.left}>\n          {search}\n          {filters}\n          {leftActions}\n        </div>\n        <div className={styles.right}>{rightActions}</div>\n      </div>\n    );\n  }\n\n  let bottomNode: JSX.Element | null = null;\n  if (showBottom) {\n    bottomNode = (\n      <div className={styles.bottomRow}>\n        <div className={styles.left}>{bottomLeft}</div>\n        <div className={styles.right}>{bottomRight}</div>\n      </div>\n    );\n  }\n\n  return (\n    <div className={cx(styles.container, className)}>\n      {topNode}\n      {bottomNode}\n    </div>\n  );\n};\n\nexport default TableToolbar;\n"],"mappings":";;;;;AAeA,IAAa,KAAgB,EAC3B,WACA,YACA,gBACA,iBACA,eACA,gBACA,mBAC2C;CAC3C,IAAM,IACJ,KAAU,QACV,KAAW,QACX,KAAe,QACf,KAAgB,MACZ,IAAa,KAAc,QAAQ,KAAe;AAExD,KAAI,CAAC,KAAW,CAAC,EACf,QAAO;CAGT,IAAI,IAA8B;AAClC,CAAI,MACF,IACE,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACE,kBAAC,OAAD;GAAK,WAAW;aAAhB;IACG;IACA;IACA;IACG;MACN,kBAAC,OAAD;GAAK,WAAW;aAAe;GAAmB,CAAA,CAC9C;;CAIV,IAAI,IAAiC;AAUrC,QATI,MACF,IACE,kBAAC,OAAD;EAAK,WAAW;YAAhB,CACE,kBAAC,OAAD;GAAK,WAAW;aAAc;GAAiB,CAAA,EAC/C,kBAAC,OAAD;GAAK,WAAW;aAAe;GAAkB,CAAA,CAC7C;MAKR,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAkB,EAAU;YAA/C,CACG,GACA,EACG"}

package/lib/esm/backoffice/molecules/table_toolbar/tableToolbar.css.js

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                            */
+//#region src/backoffice/molecules/table_toolbar/tableToolbar.css.ts
+var e = "_42m78o0 txvbqb9io txvbqbai6 txvbqbao6 txvbqb12f txvbqb1qf txvbqb62o txvbqb3no txvbqblxf txvbqbfzo", t = "_42m78o1 txvbqb9io txvbqbco txvbqbdoo txvbqbaof txvbqbajx", n = "_42m78o2 txvbqb9io txvbqbco txvbqbao6 txvbqb9mx txvbqbk4x", r = "_42m78o3 txvbqb9io txvbqbco txvbqbao6 txvbqbdo6 txvbqbaj6", i = "_42m78o4 txvbqb9io txvbqbco txvbqbdoo txvbqbaof txvbqbajx";
+//#endregion
+export { i as bottomRow, e as container, n as left, r as right, t as topRow };
+
+//# sourceMappingURL=tableToolbar.css.js.map

package/lib/esm/backoffice/molecules/table_toolbar/tableToolbar.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tableToolbar.css.js","names":[],"sources":["../../../../../src/backoffice/molecules/table_toolbar/tableToolbar.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const container = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n  borderWidth: 0,\n  borderStyle: 'solid',\n  borderBottomWidth: 'default',\n  borderBottomColor: 'border',\n  paddingBottom: 3,\n  marginBottom: 3,\n});\n\nexport const topRow = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: 3,\n  flexWrap: 'wrap',\n});\n\nexport const left = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  flex: 1,\n  minWidth: 0,\n});\n\nexport const right = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  justifyContent: 'flex-end',\n  flexShrink: 0,\n});\n\nexport const bottomRow = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: 3,\n  flexWrap: 'wrap',\n});\n"],"mappings":""}

package/lib/esm/backoffice/organisms/backoffice_app_shell/BackofficeAppShell.js

@@ -0,0 +1,14 @@
+import { PageShell as e } from "../../../components/layout/PageShell.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/backoffice/organisms/backoffice_app_shell/BackofficeAppShell.tsx
+var n = ({ sidebar: n, children: r, breadcrumbSlot: i, actions: a, tabs: o }) => /* @__PURE__ */ t(e, {
+	sidebar: n,
+	breadcrumbSlot: i,
+	actions: a,
+	tabs: o,
+	children: r
+});
+//#endregion
+export { n as BackofficeAppShell, n as default };
+
+//# sourceMappingURL=BackofficeAppShell.js.map

package/lib/esm/backoffice/organisms/backoffice_app_shell/BackofficeAppShell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeAppShell.js","names":[],"sources":["../../../../../src/backoffice/organisms/backoffice_app_shell/BackofficeAppShell.tsx"],"sourcesContent":["import { type JSX, type ReactNode } from 'react';\n\nimport {\n  PageShell,\n  type PageShellActions,\n  type PageShellTab,\n} from '@plumile/ui/components/layout/PageShell.js';\n\nexport type BackofficeAppShellProps = {\n  sidebar: ReactNode;\n  children: ReactNode;\n  breadcrumbSlot?: ReactNode;\n  actions?: PageShellActions;\n  tabs?: PageShellTab[];\n};\n\nexport const BackofficeAppShell = ({\n  sidebar,\n  children,\n  breadcrumbSlot,\n  actions,\n  tabs,\n}: BackofficeAppShellProps): JSX.Element => {\n  return (\n    <PageShell\n      sidebar={sidebar}\n      breadcrumbSlot={breadcrumbSlot}\n      actions={actions}\n      tabs={tabs}\n    >\n      {children}\n    </PageShell>\n  );\n};\n\nexport default BackofficeAppShell;\n"],"mappings":";;;AAgBA,IAAa,KAAsB,EACjC,YACA,aACA,mBACA,YACA,cAGE,kBAAC,GAAD;CACW;CACO;CACP;CACH;CAEL;CACS,CAAA"}

package/lib/esm/backoffice/organisms/backoffice_data_table/BackofficeDataTable.js

@@ -0,0 +1,114 @@
+import { cx as e } from "../../../theme/tools.js";
+import { Checkbox as t } from "../../../atomic/atoms/checkbox/Checkbox.js";
+import { DataTable as n } from "../../../components/data-table/DataTable.js";
+import { BulkActionsBar as r } from "../../molecules/bulk_actions_bar/BulkActionsBar.js";
+import { TableToolbar as i } from "../../molecules/table_toolbar/TableToolbar.js";
+import { selectionCell as a, wrapper as o } from "./backofficeDataTable.css.js";
+import "../../../index.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useCallback as l, useMemo as u } from "react";
+//#region src/backoffice/organisms/backoffice_data_table/BackofficeDataTable.tsx
+var d = (e) => {
+	let { rows: n, selection: r } = e, i = [];
+	for (let e of n) e.selectable && i.push(e.id);
+	let o = i.filter((e) => r.selectedRowIds.has(e)).length, c = i.length > 0 && o === i.length, l = () => {
+		if (i.length !== 0) {
+			if (c) {
+				r.onSelectionChange(/* @__PURE__ */ new Set());
+				return;
+			}
+			r.onSelectionChange(new Set(i));
+		}
+	};
+	return {
+		id: "__select",
+		header: /* @__PURE__ */ s("div", {
+			className: a,
+			children: /* @__PURE__ */ s(t, {
+				checked: c,
+				onChange: () => {
+					l();
+				},
+				"aria-label": "Select all"
+			})
+		}),
+		cell: (e) => {
+			let { id: n, selectable: i } = e;
+			return /* @__PURE__ */ s("div", {
+				className: a,
+				children: /* @__PURE__ */ s(t, {
+					checked: r.selectedRowIds.has(n),
+					disabled: !i,
+					onChange: () => {
+						let e = new Set(r.selectedRowIds);
+						e.has(n) ? e.delete(n) : i && e.add(n), r.onSelectionChange(e);
+					},
+					"aria-label": "Select row"
+				})
+			});
+		},
+		className: a
+	};
+}, f = ({ columns: t, rows: a, getRowId: f, toolbar: p, selection: m, bulkActions: h, emptyState: g, className: _ }) => {
+	let v = u(() => a.map((e, t) => ({
+		row: e,
+		index: t,
+		id: f(e, t),
+		selectable: m?.isRowSelectable?.(e, t) ?? !0
+	})), [
+		f,
+		a,
+		m
+	]), y = u(() => m == null ? null : d({
+		rows: v,
+		selection: m
+	}), [m, v]), b = u(() => {
+		let e = t.map((e) => ({
+			...e,
+			cell: (t) => e.cell(t.row)
+		}));
+		return y == null ? e : [y, ...e];
+	}, [t, y]), x = u(() => {
+		if (b.some((e) => e.isPrimary === !0) || b.length === 0) return b;
+		let e = 0;
+		return y != null && b.length > 1 && (e = 1), b.map((t, n) => n === e ? {
+			...t,
+			isPrimary: !0
+		} : t);
+	}, [b, y]), S = u(() => {
+		if (y != null) return `2.75rem repeat(${Math.max(0, b.length - 1)}, minmax(0, 1fr))`;
+	}, [b.length, y]), C = 0;
+	m != null && (C = m.selectedRowIds.size);
+	let w = l(() => {
+		m?.onSelectionChange(/* @__PURE__ */ new Set());
+	}, [m]), T = null;
+	p != null && (T = /* @__PURE__ */ s(i, { ...p }));
+	let E = null;
+	return m != null && (E = /* @__PURE__ */ s(r, {
+		selectedCount: C,
+		actions: h,
+		onClearSelection: w
+	})), /* @__PURE__ */ c("div", {
+		className: e(o, _),
+		children: [
+			T,
+			E,
+			/* @__PURE__ */ s(n, {
+				columns: x,
+				rows: v,
+				getRowId: (e) => e.id,
+				emptyState: g,
+				className: void 0,
+				headerClassName: void 0,
+				bodyClassName: void 0,
+				rowClassName: void 0,
+				gridTemplateClassName: void 0,
+				gridTemplateColumns: S
+			})
+		]
+	});
+};
+//#endregion
+export { f as BackofficeDataTable, f as default };
+
+//# sourceMappingURL=BackofficeDataTable.js.map

package/lib/esm/backoffice/organisms/backoffice_data_table/BackofficeDataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BackofficeDataTable.js","names":[],"sources":["../../../../../src/backoffice/organisms/backoffice_data_table/BackofficeDataTable.tsx"],"sourcesContent":["import { useCallback, useMemo, type JSX, type ReactNode } from 'react';\n\nimport { Checkbox, cx } from '@plumile/ui';\nimport {\n  DataTable,\n  type DataTableColumn,\n  type GetRowId,\n} from '@plumile/ui/components/data-table/DataTable.js';\n\nimport { BulkActionsBar } from '../../molecules/bulk_actions_bar/BulkActionsBar.js';\nimport {\n  TableToolbar,\n  type TableToolbarProps,\n} from '../../molecules/table_toolbar/TableToolbar.js';\n\nimport * as styles from './backofficeDataTable.css.js';\n\nexport type BackofficeDataTableSelection<Row> = {\n  selectedRowIds: ReadonlySet<string>;\n  onSelectionChange: (next: ReadonlySet<string>) => void;\n  isRowSelectable?: (row: Row, index: number) => boolean;\n};\n\nexport type BackofficeDataTableProps<Row> = {\n  columns: readonly DataTableColumn<Row>[];\n  rows: readonly Row[];\n  getRowId: GetRowId<Row>;\n  toolbar?: TableToolbarProps;\n  selection?: BackofficeDataTableSelection<Row>;\n  bulkActions?: ReactNode;\n  emptyState?: JSX.Element;\n  className?: string;\n};\n\ntype WrappedRow<Row> = {\n  row: Row;\n  index: number;\n  id: string;\n  selectable: boolean;\n};\n\nconst buildSelectionColumn = <Row,>(options: {\n  rows: readonly WrappedRow<Row>[];\n  selection: BackofficeDataTableSelection<Row>;\n}): DataTableColumn<WrappedRow<Row>> => {\n  const { rows, selection } = options;\n\n  const selectableRowIds: string[] = [];\n  for (const wrapped of rows) {\n    if (wrapped.selectable) {\n      selectableRowIds.push(wrapped.id);\n    }\n  }\n\n  const selectedCount = selectableRowIds.filter((id) => {\n    return selection.selectedRowIds.has(id);\n  }).length;\n\n  const isAllSelected =\n    selectableRowIds.length > 0 && selectedCount === selectableRowIds.length;\n\n  const toggleAll = (): void => {\n    if (selectableRowIds.length === 0) {\n      return;\n    }\n    if (isAllSelected) {\n      selection.onSelectionChange(new Set());\n      return;\n    }\n    selection.onSelectionChange(new Set(selectableRowIds));\n  };\n\n  return {\n    id: '__select',\n    header: (\n      <div className={styles.selectionCell}>\n        <Checkbox\n          checked={isAllSelected}\n          onChange={() => {\n            toggleAll();\n          }}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: (wrapped) => {\n      const { id: rowId, selectable } = wrapped;\n      const checked = selection.selectedRowIds.has(rowId);\n\n      return (\n        <div className={styles.selectionCell}>\n          <Checkbox\n            checked={checked}\n            disabled={!selectable}\n            onChange={() => {\n              const next = new Set(selection.selectedRowIds);\n              if (next.has(rowId)) {\n                next.delete(rowId);\n              } else if (selectable) {\n                next.add(rowId);\n              }\n              selection.onSelectionChange(next);\n            }}\n            aria-label=\"Select row\"\n          />\n        </div>\n      );\n    },\n    className: styles.selectionCell,\n  };\n};\n\nexport const BackofficeDataTable = <Row,>({\n  columns,\n  rows,\n  getRowId,\n  toolbar,\n  selection,\n  bulkActions,\n  emptyState,\n  className,\n}: BackofficeDataTableProps<Row>): JSX.Element => {\n  const wrappedRows = useMemo<readonly WrappedRow<Row>[]>(() => {\n    return rows.map((row, index) => {\n      const id = getRowId(row, index);\n      const selectable = selection?.isRowSelectable?.(row, index) ?? true;\n      return { row, index, id, selectable };\n    });\n  }, [getRowId, rows, selection]);\n\n  const selectionColumn = useMemo(() => {\n    if (selection == null) {\n      return null;\n    }\n    return buildSelectionColumn({ rows: wrappedRows, selection });\n  }, [selection, wrappedRows]);\n\n  const resolvedColumns = useMemo(() => {\n    const mapped = columns.map<DataTableColumn<WrappedRow<Row>>>((column) => {\n      return {\n        ...column,\n        cell: (wrapped: WrappedRow<Row>) => {\n          return column.cell(wrapped.row);\n        },\n      };\n    });\n    if (selectionColumn == null) {\n      return mapped;\n    }\n    return [selectionColumn, ...mapped];\n  }, [columns, selectionColumn]);\n\n  const columnsWithPrimary = useMemo(() => {\n    const hasPrimary = resolvedColumns.some((column) => {\n      return column.isPrimary === true;\n    });\n    if (hasPrimary) {\n      return resolvedColumns;\n    }\n    if (resolvedColumns.length === 0) {\n      return resolvedColumns;\n    }\n    let primaryIndex = 0;\n    if (selectionColumn != null && resolvedColumns.length > 1) {\n      primaryIndex = 1;\n    }\n    return resolvedColumns.map((column, index) => {\n      if (index === primaryIndex) {\n        return { ...column, isPrimary: true };\n      }\n      return column;\n    });\n  }, [resolvedColumns, selectionColumn]);\n\n  const gridTemplateColumns = useMemo(() => {\n    if (selectionColumn == null) {\n      return undefined;\n    }\n    const restCount = Math.max(0, resolvedColumns.length - 1);\n    return `2.75rem repeat(${restCount}, minmax(0, 1fr))`;\n  }, [resolvedColumns.length, selectionColumn]);\n\n  let selectedCount = 0;\n  if (selection != null) {\n    selectedCount = selection.selectedRowIds.size;\n  }\n\n  const handleClearSelection = useCallback(() => {\n    if (selection != null) {\n      selection.onSelectionChange(new Set());\n    }\n  }, [selection]);\n\n  let toolbarNode: JSX.Element | null = null;\n  if (toolbar != null) {\n    toolbarNode = <TableToolbar {...toolbar} />;\n  }\n\n  let bulkActionsNode: JSX.Element | null = null;\n  if (selection != null) {\n    bulkActionsNode = (\n      <BulkActionsBar\n        selectedCount={selectedCount}\n        actions={bulkActions}\n        onClearSelection={handleClearSelection}\n      />\n    );\n  }\n\n  return (\n    <div className={cx(styles.wrapper, className)}>\n      {toolbarNode}\n      {bulkActionsNode}\n\n      <DataTable\n        columns={columnsWithPrimary}\n        rows={wrappedRows}\n        getRowId={(wrapped: WrappedRow<Row>) => {\n          return wrapped.id;\n        }}\n        emptyState={emptyState}\n        className={undefined}\n        headerClassName={undefined}\n        bodyClassName={undefined}\n        rowClassName={undefined}\n        gridTemplateClassName={undefined}\n        gridTemplateColumns={gridTemplateColumns}\n      />\n    </div>\n  );\n};\n\nexport default BackofficeDataTable;\n"],"mappings":"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"}

package/lib/esm/backoffice/organisms/backoffice_data_table/backofficeDataTable.css.js

@@ -0,0 +1,8 @@
+/* empty css                                      */
+/* empty css                                   */
+//#region src/backoffice/organisms/backoffice_data_table/backofficeDataTable.css.ts
+var e = "x4h99m0 txvbqb9io txvbqbai6 txvbqbaof", t = "x4h99m1 txvbqbdnx";
+//#endregion
+export { t as selectionCell, e as wrapper };
+
+//# sourceMappingURL=backofficeDataTable.css.js.map

package/lib/esm/backoffice/organisms/backoffice_data_table/backofficeDataTable.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"backofficeDataTable.css.js","names":[],"sources":["../../../../../src/backoffice/organisms/backoffice_data_table/backofficeDataTable.css.ts"],"sourcesContent":["import { sprinkles } from '@plumile/ui/theme/sprinkles.css.js';\n\nexport const wrapper = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n});\n\nexport const selectionCell = sprinkles({\n  justifyContent: 'center',\n});\n"],"mappings":""}