@bizapps/design-system-testing 1.12.1 → 1.12.2

package/dist/main.cjs

@@ -9224,6 +9224,13 @@ var DEFAULT_LABELS = {
 var EASE = "cubic-bezier(.2,.8,.2,1)";
 var MOTION_MS = 240;
 var FADE_MS = MOTION_MS / 2;
+var RAIL_STAGGER_MS = 20;
+var ACCORDION_EASE = "cubic-bezier(.4,0,.2,1)";
+var ACCORDION_ITEM_FADE_MS = 260;
+var ACCORDION_OPEN_DELAY_MS = 120;
+var ACCORDION_OPEN_STAGGER_MS = 50;
+var ACCORDION_CLOSE_FADE_MS = 160;
+var ACCORDION_STAGGER_CAP = 8;
 var MORPH_MS = 360;
 var MORPH_EASE = "cubic-bezier(.65,0,.35,1)";
 var BOUNCE_KEYFRAMES = [
@@ -9361,7 +9368,7 @@ var DEFAULT_WIDTH = 305;
 var DEFAULT_COLLAPSED_WIDTH = 48;
 var TILE_ICON_SIZE = 22;
 var MIN_COLLAPSED_WIDTH = 40;
-var t = (prop, ms = 300, delay = 0) => `${prop} ${ms}ms ${EASE} ${delay}ms`;
+var t = (prop, ms = 300, delay = 0, ease2 = EASE) => `${prop} ${ms}ms ${ease2} ${delay}ms`;
 function transition2(reduced, ...parts) {
   const kept = reduced ? parts.filter((part) => /^(opacity|visibility|background|color|box-shadow)/.test(part)) : parts;
   return kept.join(", ") || "none";
@@ -10009,6 +10016,11 @@ function ModuleCard({
     });
     return () => animation2?.cancel();
   }, [collapsed, hasActive, reduced]);
+  const [toggle, setToggle] = react.useState({ collapsed, open, accordion: false });
+  if (toggle.collapsed !== collapsed || toggle.open !== open) {
+    setToggle({ collapsed, open, accordion: toggle.collapsed === collapsed });
+  }
+  const accordion = toggle.accordion && !reduced;
   const items = filterItems(module.items, query);
   const isEmpty = module.items.length === 0;
   const emptyMessage = /* @__PURE__ */ jsxRuntime.jsx(
@@ -10227,6 +10239,7 @@ function ModuleCard({
                           list,
                           visible: open,
                           staggerIndex: index,
+                          accordion,
                           onSelect: (navigates) => onSelect(item, navigates)
                         },
                         item.id
@@ -10351,20 +10364,27 @@ function ModuleCard({
     }
   ) });
 }
-function ItemRow({ item, list, visible, staggerIndex, onSelect }) {
+function ItemRow({ item, list, visible, staggerIndex, accordion, onSelect }) {
   const { activeItemId, favoriteIds, reduced, labels, resolveIcon, renderLink } = list;
   const active = item.id === activeItemId;
   const favorite = favoriteIds?.includes(item.id) ?? false;
   const tabIndex = visible ? 0 : -1;
   const staggered = staggerIndex !== void 0;
-  const delay = staggered && visible ? Math.min(staggerIndex * 20, FADE_MS) : 0;
+  let fade = t("opacity", FADE_MS, 0);
+  if (staggered && accordion) {
+    const step = Math.min(staggerIndex, ACCORDION_STAGGER_CAP);
+    fade = visible ? t(
+      "opacity",
+      ACCORDION_ITEM_FADE_MS,
+      ACCORDION_OPEN_DELAY_MS + step * ACCORDION_OPEN_STAGGER_MS,
+      ACCORDION_EASE
+    ) : t("opacity", ACCORDION_CLOSE_FADE_MS, 0, ACCORDION_EASE);
+  } else if (staggered && visible) {
+    fade = t("opacity", FADE_MS, Math.min(staggerIndex * RAIL_STAGGER_MS, FADE_MS));
+  }
   const rowStyle = staggered ? {
     opacity: visible ? 1 : 0,
-    transition: transition2(
-      reduced,
-      t("opacity", FADE_MS, delay),
-      "background-color 180ms ease-out"
-    )
+    transition: transition2(reduced, fade, "background-color 180ms ease-out")
   } : { transition: "background-color 180ms ease-out" };
   const className = cn(
     "focus-visible:ring-primary flex min-h-[46px] min-w-0 flex-1 cursor-pointer items-start gap-3 rounded-[10px] border-0 bg-transparent py-[13px] pr-1 pl-3 text-left text-[13px] leading-5 transition-transform duration-180 ease-[cubic-bezier(.2,.8,.2,1)] outline-none hover:text-primary focus-visible:ring-2 focus-visible:ring-inset disabled:cursor-not-allowed disabled:opacity-50",