@pactor-app/ui 1.3.0 → 1.8.0

package/dist/{chunk-EVGIS2ZE.js → chunk-PECP7DJB.js}

@@ -1,4 +1,7 @@
 import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
   SidebarContent,
   SidebarFooter,
   SidebarHeader,
@@ -13,7 +16,7 @@ import {
   TooltipTrigger,
   useIsMobile,
   useSidebar
-} from "./chunk-L4Z7MNYY.js";
+} from "./chunk-VM4FESQB.js";
 import {
   cn
 } from "./chunk-WKJUCGV4.js";
@@ -488,17 +491,51 @@ function SidebarInner({
 }
 
 // src/components/components/Menu/index.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState } from "react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function collectAncestors(items, target, into, trail = []) {
+  for (const item of items) {
+    if (item.key === target) {
+      for (const key of trail) into.add(key);
+      return true;
+    }
+    if (item.children?.length && collectAncestors(item.children, target, into, [...trail, item.key])) {
+      return true;
+    }
+  }
+  return false;
+}
 function Menu2({
   items = [],
   mode = "inline",
   selectedKey,
+  collapsible = false,
+  defaultExpandedKeys,
   onSelect,
   className,
   style
 }) {
   const drawer = useSidebarDrawer();
   const collapsed = mode === "inline" && drawer?.collapsed === true;
+  const collapsibleOn = collapsible && mode === "inline" && !collapsed;
+  const [expandedKeys, setExpandedKeys] = useState(() => {
+    const initial = new Set(defaultExpandedKeys ?? []);
+    if (selectedKey !== void 0) {
+      collectAncestors(items, selectedKey, initial);
+    }
+    return initial;
+  });
+  const toggleExpanded = (key) => {
+    setExpandedKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  };
   let previousGroup;
   return /* @__PURE__ */ jsx4(
     "nav",
@@ -534,7 +571,10 @@ function Menu2({
               depth: 0,
               selectedKey,
               onSelect,
-              collapsed
+              collapsed,
+              collapsible: collapsibleOn,
+              expandedKeys,
+              onToggle: toggleExpanded
             }
           )
         ] }, item.key);
@@ -548,15 +588,34 @@ function MenuEntry({
   depth,
   selectedKey,
   onSelect,
-  collapsed = false
+  collapsed = false,
+  collapsible = false,
+  expandedKeys,
+  onToggle
 }) {
   const selected = item.key === selectedKey;
+  const hasChildren = (item.children?.length ?? 0) > 0;
+  const isDirectory = collapsible && hasChildren;
+  const expanded = isDirectory && expandedKeys?.has(item.key) === true;
+  const railDirectory = collapsed && hasChildren;
+  const [flyoutOpen, setFlyoutOpen] = useState(false);
+  const flyoutTimer = useRef2(void 0);
+  const flyoutOpenNow = () => {
+    window.clearTimeout(flyoutTimer.current);
+    setFlyoutOpen(true);
+  };
+  const flyoutCloseLater = () => {
+    window.clearTimeout(flyoutTimer.current);
+    flyoutTimer.current = window.setTimeout(() => setFlyoutOpen(false), 200);
+  };
+  useEffect2(() => () => window.clearTimeout(flyoutTimer.current), []);
   const button = /* @__PURE__ */ jsxs3(
     "button",
     {
       type: "button",
       "data-slot": "menu-item",
       "aria-current": selected ? "page" : void 0,
+      "aria-expanded": isDirectory ? expanded : railDirectory ? flyoutOpen : void 0,
       disabled: item.disabled,
       className: cn(
         "flex w-full items-center gap-2 rounded-md text-sm transition-colors",
@@ -566,8 +625,14 @@ function MenuEntry({
         item.disabled && "cursor-not-allowed opacity-50 hover:bg-transparent hover:text-muted-foreground"
       ),
       style: mode === "inline" && depth > 0 && !collapsed ? { paddingLeft: 12 + depth * 16 } : void 0,
+      onMouseEnter: railDirectory ? flyoutOpenNow : void 0,
+      onMouseLeave: railDirectory ? flyoutCloseLater : void 0,
       onClick: () => {
-        if (!item.disabled) {
+        if (item.disabled) return;
+        if (railDirectory) return;
+        if (isDirectory) {
+          onToggle?.(item.key);
+        } else {
           onSelect?.(item.key);
         }
       },
@@ -582,13 +647,58 @@ function MenuEntry({
             className: "shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-xs text-muted-foreground",
             children: item.badge
           }
+        ) : null,
+        isDirectory ? /* @__PURE__ */ jsx4(
+          "span",
+          {
+            "data-slot": "menu-item-chevron",
+            className: cn(
+              "shrink-0 transition-transform",
+              expanded && "rotate-180"
+            ),
+            children: /* @__PURE__ */ jsx4(Icon, { name: "chevron-down", size: "sm" })
+          }
         ) : null
       ]
     }
   );
   return /* @__PURE__ */ jsxs3("div", { "data-slot": "menu-entry", "data-key": item.key, children: [
-    collapsed ? /* @__PURE__ */ jsx4(RailTooltip, { label: item.label, children: button }) : button,
-    item.children?.map((child) => /* @__PURE__ */ jsx4(
+    railDirectory ? /* @__PURE__ */ jsxs3(Popover, { open: flyoutOpen, onOpenChange: setFlyoutOpen, children: [
+      /* @__PURE__ */ jsx4(PopoverTrigger, { render: button }),
+      /* @__PURE__ */ jsxs3(
+        PopoverContent,
+        {
+          "data-slot": "menu-flyout",
+          side: "right",
+          align: "start",
+          sideOffset: 8,
+          className: "max-h-[70vh] w-48 overflow-auto p-1",
+          initialFocus: false,
+          onMouseEnter: flyoutOpenNow,
+          onMouseLeave: flyoutCloseLater,
+          onClick: (event) => {
+            if (event.target.closest("[data-slot=menu-item]")) {
+              setFlyoutOpen(false);
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsx4("div", { className: "px-3 pt-2 pb-1 text-xs font-semibold text-muted-foreground", children: item.label }),
+            item.children?.map((child) => /* @__PURE__ */ jsx4(
+              MenuEntry,
+              {
+                item: child,
+                mode: "inline",
+                depth: 0,
+                selectedKey,
+                onSelect
+              },
+              child.key
+            ))
+          ]
+        }
+      )
+    ] }) : collapsed ? /* @__PURE__ */ jsx4(RailTooltip, { label: item.label, children: button }) : button,
+    railDirectory || isDirectory && !expanded ? null : item.children?.map((child) => /* @__PURE__ */ jsx4(
       MenuEntry,
       {
         item: child,
@@ -596,7 +706,10 @@ function MenuEntry({
         depth: depth + 1,
         selectedKey,
         onSelect,
-        collapsed
+        collapsed,
+        collapsible,
+        expandedKeys,
+        onToggle
       },
       child.key
     ))

package/dist/{chunk-TDVG7MZ5.js → chunk-TAJXMOEX.js}

@@ -2,7 +2,7 @@ import {
   Icon,
   Menu,
   Sidebar
-} from "./chunk-EVGIS2ZE.js";
+} from "./chunk-PECP7DJB.js";
 import {
   Accordion,
   AccordionContent,
@@ -15,7 +15,7 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger
-} from "./chunk-L4Z7MNYY.js";
+} from "./chunk-VM4FESQB.js";
 import {
   cn
 } from "./chunk-WKJUCGV4.js";

package/dist/{chunk-L4Z7MNYY.js → chunk-VM4FESQB.js}

@@ -84,13 +84,27 @@ function AccordionContent({
 
 // src/ui/card.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
-function Card({ className, ...props }) {
+var cardRoundedClasses = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-2xl",
+  "3xl": "rounded-3xl"
+};
+function Card({
+  className,
+  rounded = "lg",
+  ...props
+}) {
   return /* @__PURE__ */ jsx2(
     "div",
     {
       "data-slot": "card",
       className: cn(
-        "flex flex-col gap-6 rounded-xl border border-border bg-card py-6 text-card-foreground shadow-(--card-shadow)",
+        "flex flex-col gap-6 border border-border bg-card py-6 text-card-foreground shadow-(--card-shadow)",
+        cardRoundedClasses[rounded],
         className
       ),
       ...props

package/dist/{chunk-UKA7C3JP.js → chunk-XUIXZJDQ.js}

@@ -2,7 +2,7 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger
-} from "./chunk-L4Z7MNYY.js";
+} from "./chunk-VM4FESQB.js";
 import {
   Button,
   buttonVariants,
@@ -459,11 +459,11 @@ function Calendar({
           defaultClassNames.day_button
         ),
         selected: cn(
-          "[&>button]:bg-(--calendar-selected-background) [&>button]:text-(--calendar-selected-foreground) [&>button]:hover:bg-(--calendar-selected-background)",
+          "[&>button]:bg-(--calendar-selected-background) [&>button]:text-(--calendar-selected-foreground) [&>button]:hover:bg-(--calendar-selected-background) [&>button]:hover:text-(--calendar-selected-foreground)",
           defaultClassNames.selected
         ),
         today: cn(
-          "[&>button]:bg-(--calendar-today-background) [&>button]:text-(--calendar-today-foreground)",
+          "[&>button]:bg-(--calendar-today-background) [&>button]:text-(--calendar-today-foreground) [&>button]:hover:bg-(--calendar-today-background) [&>button]:hover:text-(--calendar-today-foreground) [&>button]:border [&>button]:border-(--calendar-today-border)",
           defaultClassNames.today
         ),
         outside: cn(
@@ -2562,7 +2562,7 @@ function ToggleGroup({
       "data-variant": variant,
       "data-size": size,
       className: cn(
-        "group/toggle-group flex w-fit items-center rounded-md [&>[data-slot=toggle]]:rounded-none [&>[data-slot=toggle]]:first:rounded-l-md [&>[data-slot=toggle]]:last:rounded-r-md",
+        "group/toggle-group flex w-fit items-center gap-1 rounded-md",
         className
       ),
       ...props,