@syscore/ui-library 1.15.4 → 1.16.0

package/dist/index.d.ts

@@ -180,6 +180,10 @@ import { MenubarSub } from '../client/components/ui/menubar';
 import { MenubarSubContent } from '../client/components/ui/menubar';
 import { MenubarSubTrigger } from '../client/components/ui/menubar';
 import { MenubarTrigger } from '../client/components/ui/menubar';
+import { MobileNav } from '../client/components/ui/mobile-nav';
+import { MobileNavBar } from '../client/components/ui/mobile-nav';
+import { MobileNavPanel } from '../client/components/ui/mobile-nav';
+import { MobileNavTrigger } from '../client/components/ui/mobile-nav';
 import { NavAccount } from '../client/components/icons/NavAccount';
 import { NavBullet } from '../client/components/icons/NavBullet';
 import { Navigation } from '../client/components/ui/navigation';
@@ -340,12 +344,14 @@ import { UtilityClose } from '../client/components/icons/UtilityClose';
 import { UtilityCompare } from '../client/components/icons/UtilityCompare';
 import { UtilityDrag } from '../client/components/icons/UtilityDrag';
 import { UtilityEdit } from '../client/components/icons/UtilityEdit';
+import { UtilityFeedback } from '../client/components/icons/UtilityFeedback';
 import { UtilityHome } from '../client/components/icons/UtilityHome';
 import { UtilityMessage } from '../client/components/icons/UtilityMessage';
 import { UtilityOptions } from '../client/components/icons/UtilityOptions';
 import { UtilityPortfolio } from '../client/components/icons/UtilityPortfolio';
 import { UtilityReset } from '../client/components/icons/UtilityReset';
 import { UtilityRevisionsHide } from '../client/components/icons/UtilityRevisionsHide';
+import { UtilityRevisionsShow } from '../client/components/icons/UtilityRevisionsShow';
 import { UtilitySave } from '../client/components/icons/UtilitySave';
 import { UtilityScopeLarge } from '../client/components/icons/UtilityScopeLarge';
 import { UtilityScoring } from '../client/components/icons/UtilityScoring';
@@ -726,6 +732,14 @@ export { MenubarSubTrigger }
 
 export { MenubarTrigger }
 
+export { MobileNav }
+
+export { MobileNavBar }
+
+export { MobileNavPanel }
+
+export { MobileNavTrigger }
+
 export { NavAccount }
 
 export { NavBullet }
@@ -1046,6 +1060,8 @@ export { UtilityDrag }
 
 export { UtilityEdit }
 
+export { UtilityFeedback }
+
 export { UtilityHome }
 
 export { UtilityMessage }
@@ -1058,6 +1074,8 @@ export { UtilityReset }
 
 export { UtilityRevisionsHide }
 
+export { UtilityRevisionsShow }
+
 export { UtilitySave }
 
 export { UtilityScopeLarge }

package/dist/index.es.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { useState, useEffect, useCallback, useRef } from "react";
-import { motion, AnimatePresence } from "motion/react";
+import React__default, { useState, useEffect, useCallback, useRef, createContext, useMemo, useContext } from "react";
+import { motion, AnimatePresence, useMotionValue, animate } from "motion/react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { cva } from "class-variance-authority";
@@ -5776,70 +5776,72 @@ const UtilityCompare = ({
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
-          width: "15",
-          height: "16",
-          viewBox: "0 0 15 16",
+          width: "31",
+          height: "34",
+          viewBox: "0 0 31 34",
           fill: "none",
-          className: cn("size-[14px] text-inherit"),
+          className: cn("text-inherit w-full h-full"),
           children: [
             /* @__PURE__ */ jsx(
               "path",
               {
-                d: "M4.95001 2.85001C4.95001 4.00981 4.0098 4.95001 2.85 4.95001C1.6902 4.95001 0.75 4.00981 0.75 2.85001C0.75 1.6902 1.6902 0.75 2.85 0.75C4.0098 0.75 4.95001 1.6902 4.95001 2.85001Z",
-                stroke: "currentColor",
-                strokeWidth: "1.5",
-                strokeLinecap: "round",
-                strokeLinejoin: "round"
+                d: "M10.6002 5.79905C10.6002 8.44949 8.45114 10.5981 5.80011 10.5981C3.14908 10.5981 1 8.44949 1 5.79905C1 3.14861 3.14908 1 5.80011 1C8.45114 1 10.6002 3.14861 10.6002 5.79905Z",
+                fill: "#E0FBF5",
+                stroke: "#282A31",
+                "stroke-width": "2",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
               }
             ),
             /* @__PURE__ */ jsx(
               "path",
               {
-                d: "M2.84961 7.75002L2.84961 11.25C2.84961 11.6213 2.99711 11.9774 3.25966 12.24C3.52221 12.5025 3.87831 12.65 4.24961 12.65L9.14962 12.65",
-                stroke: "currentColor",
-                strokeWidth: "1.5",
-                strokeLinecap: "round",
-                strokeLinejoin: "round"
+                d: "M5.80078 16.998L5.80078 24.9965C5.80078 25.845 6.13793 26.6588 6.73806 27.2587C7.33819 27.8587 8.15214 28.1958 9.00086 28.1958L20.2011 28.1958",
+                stroke: "#282A31",
+                "stroke-width": "2",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
               }
             ),
             /* @__PURE__ */ jsx(
               "path",
               {
-                d: "M4.95001 9.85002L2.85 7.75002L0.75 9.85002",
-                stroke: "currentColor",
-                strokeWidth: "1.5",
-                strokeLinecap: "round",
-                strokeLinejoin: "round"
+                d: "M10.6002 21.7971L5.80011 16.998L1 21.7971",
+                stroke: "#282A31",
+                "stroke-width": "2",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
               }
             ),
             /* @__PURE__ */ jsx(
               "path",
               {
-                d: "M13.3504 12.65C13.3504 13.8098 12.4102 14.75 11.2504 14.75C10.0906 14.75 9.15039 13.8098 9.15039 12.65C9.15039 11.4902 10.0906 10.55 11.2504 10.55C12.4102 10.55 13.3504 11.4902 13.3504 12.65Z",
-                stroke: "currentColor",
-                strokeWidth: "1.5",
-                strokeLinecap: "round",
-                strokeLinejoin: "round"
+                d: "M29.8001 28.2014C29.8001 30.8518 27.651 33.0004 24.9999 33.0004C22.3489 33.0004 20.1998 30.8518 20.1998 28.2014C20.1998 25.551 22.3489 23.4023 24.9999 23.4023C27.651 23.4023 29.8001 25.5509 29.8001 28.2014Z",
+                fill: "#EFF5FB",
+                stroke: "#282A31",
+                "stroke-width": "2",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
               }
             ),
             /* @__PURE__ */ jsx(
               "path",
               {
-                d: "M11.2492 7.74993L11.2492 4.24992C11.2492 3.87861 11.1017 3.52252 10.8392 3.25997C10.5766 2.99741 10.2205 2.84991 9.84923 2.84991L4.94922 2.84991",
-                stroke: "currentColor",
-                strokeWidth: "1.5",
-                strokeLinecap: "round",
-                strokeLinejoin: "round"
+                d: "M25.0002 16.9946V8.99624C25.0002 8.14771 24.663 7.33394 24.0629 6.73395C23.4628 6.13395 22.6488 5.79687 21.8001 5.79687L10.5999 5.79688",
+                stroke: "#282A31",
+                "stroke-width": "2",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
               }
             ),
             /* @__PURE__ */ jsx(
               "path",
               {
-                d: "M9.15039 5.6501L11.2504 7.75011L13.3504 5.6501",
-                stroke: "currentColor",
-                strokeWidth: "1.5",
-                strokeLinecap: "round",
-                strokeLinejoin: "round"
+                d: "M20.1998 12.2012L24.9999 17.0002L29.8001 12.2012",
+                stroke: "#282A31",
+                "stroke-width": "2",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
               }
             )
           ]
@@ -6715,7 +6717,7 @@ function UtilityRevisionsHide({ className }) {
           height: "15",
           viewBox: "0 0 17 15",
           fill: "none",
-          className: cn("size-[14px] text-inherit"),
+          className: cn("text-inherit"),
           children: [
             /* @__PURE__ */ jsx(
               "path",
@@ -6864,6 +6866,90 @@ const UtilityTriangleInfo = ({
     }
   );
 };
+function UtilityFeedback({ className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "size-4 flex items-center justify-center text-gray-500",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "30",
+          height: "28",
+          viewBox: "0 0 30 28",
+          fill: "none",
+          className: cn("text-inherit"),
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M29 20.162C29 20.888 28.705 21.5843 28.1799 22.0977C27.6548 22.611 26.9426 22.8995 26.2 22.8995H7.7592C7.01665 22.8996 6.30458 23.1881 5.7796 23.7015L2.6968 26.7154C2.55779 26.8513 2.38068 26.9438 2.18788 26.9813C1.99508 27.0188 1.79524 26.9996 1.61363 26.926C1.43202 26.8525 1.27678 26.728 1.16756 26.5682C1.05834 26.4084 1.00003 26.2205 1 26.0283V3.73743C1 3.01142 1.295 2.31514 1.8201 1.80178C2.3452 1.28841 3.05739 1 3.8 1H26.2C26.9426 1 27.6548 1.28841 28.1799 1.80178C28.705 2.31514 29 3.01142 29 3.73743V20.162Z",
+              fill: "#D6F4FB",
+              stroke: "#71747D",
+              "stroke-width": "2",
+              "stroke-linecap": "round",
+              "stroke-linejoin": "round"
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function UtilityRevisionsShow({ className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "size-4 flex items-center justify-center text-gray-500",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "30",
+          height: "26",
+          viewBox: "0 0 30 26",
+          fill: "none",
+          className: cn("text-inherit"),
+          children: [
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M9.84194 11.5L1 20.5006V25.0009H14.2629L18.6839 20.5006",
+                fill: "#F6EFD0"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M9.84194 11.5L1 20.5006V25.0009H14.2629L18.6839 20.5006",
+                stroke: "#282A31",
+                "stroke-width": "2",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M28.9999 13.0008L22.2211 19.9013C21.6702 20.451 20.9295 20.7589 20.158 20.7589C19.3865 20.7589 18.6458 20.451 18.0949 19.9013L10.4319 12.1008C9.89184 11.5399 9.58936 10.7859 9.58936 10.0006C9.58936 9.21531 9.89184 8.4613 10.4319 7.90048L17.2107 1",
+                stroke: "#282A31",
+                "stroke-width": "2",
+                "stroke-linecap": "round",
+                "stroke-linejoin": "round"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
 const SealWell = ({ className }) => {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -12275,6 +12361,191 @@ const BadgeImperativeSecondary = ({
     }
   ) });
 };
+const SPRING_CONFIG = { stiffness: 300, damping: 30 };
+const MobileNavContext = createContext(null);
+const useMobileNav = () => {
+  const ctx = useContext(MobileNavContext);
+  if (!ctx)
+    throw new Error(
+      "MobileNav compound components must be used within <MobileNav>"
+    );
+  return ctx;
+};
+const MobileNav = ({ className, children }) => {
+  const [activeKey, setActiveKey] = useState(null);
+  const [open, setOpen] = useState(false);
+  const toggle = useCallback(
+    (key) => {
+      if (activeKey === key && open) {
+        setOpen(false);
+        setActiveKey(null);
+      } else {
+        setActiveKey(key);
+        setOpen(true);
+      }
+    },
+    [activeKey, open]
+  );
+  const close = useCallback(() => {
+    setOpen(false);
+    setActiveKey(null);
+  }, []);
+  const value = useMemo(
+    () => ({ activeKey, open, toggle, close }),
+    [activeKey, open, toggle, close]
+  );
+  return /* @__PURE__ */ jsx(MobileNavContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { className: cn("mobile-nav", className), children }) });
+};
+const MobileNavPanel = ({ className, children }) => {
+  const { activeKey, open, close } = useMobileNav();
+  const panelRef = useRef(null);
+  const contentRef = useRef(null);
+  const heightMV = useMotionValue(0);
+  const stopAnimation = useRef(null);
+  const stateRef = useRef("closed");
+  const cachedInitialHeight = useRef(0);
+  const getNavBarHeight = () => {
+    var _a;
+    const nav = (_a = panelRef.current) == null ? void 0 : _a.nextElementSibling;
+    return (nav == null ? void 0 : nav.offsetHeight) ?? 0;
+  };
+  const getAvailableHeight = () => {
+    var _a;
+    const parent = (_a = panelRef.current) == null ? void 0 : _a.parentElement;
+    const container = (parent == null ? void 0 : parent.clientHeight) ?? window.innerHeight;
+    return container - getNavBarHeight();
+  };
+  const measureContentHeight = () => {
+    const content = contentRef.current;
+    if (!content) return 0;
+    const child = content.firstElementChild;
+    const raw = ((child == null ? void 0 : child.offsetHeight) ?? content.scrollHeight) + 40;
+    const max = getAvailableHeight() * 0.7;
+    return Math.min(raw, max);
+  };
+  const springTo = (target) => {
+    var _a;
+    (_a = stopAnimation.current) == null ? void 0 : _a.call(stopAnimation);
+    const controls = animate(heightMV, target, {
+      type: "spring",
+      ...SPRING_CONFIG
+    });
+    stopAnimation.current = () => controls.stop();
+  };
+  useEffect(() => {
+    let cancelled = false;
+    if (open) {
+      stateRef.current = "initial";
+      requestAnimationFrame(() => {
+        if (cancelled) return;
+        const h = measureContentHeight();
+        cachedInitialHeight.current = h;
+        springTo(h);
+      });
+    } else {
+      stateRef.current = "closed";
+      cachedInitialHeight.current = 0;
+      springTo(0);
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    let cancelled = false;
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        if (cancelled) return;
+        const h = measureContentHeight();
+        cachedInitialHeight.current = h;
+        if (stateRef.current === "initial" || stateRef.current === "closed") {
+          stateRef.current = "initial";
+          springTo(h);
+        }
+      });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [activeKey]);
+  const dragDirection = useRef(null);
+  const handlePanStart = () => {
+    dragDirection.current = null;
+  };
+  const handlePan = (_, info) => {
+    dragDirection.current = info.offset.y < 0 ? "up" : "down";
+  };
+  const handlePanEnd = () => {
+    const dir = dragDirection.current;
+    if (!dir) return;
+    if (dir === "up") {
+      if (stateRef.current === "initial") {
+        stateRef.current = "full";
+        springTo(getAvailableHeight());
+      }
+    } else {
+      if (stateRef.current === "full") {
+        stateRef.current = "initial";
+        springTo(cachedInitialHeight.current);
+      } else if (stateRef.current === "initial") {
+        stateRef.current = "closed";
+        springTo(0);
+        close();
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      ref: panelRef,
+      className: cn("mobile-nav-panel", className),
+      "data-closed": !open || void 0,
+      style: { height: heightMV },
+      children: [
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "mobile-nav-handle",
+            onPanStart: handlePanStart,
+            onPan: handlePan,
+            onPanEnd: handlePanEnd,
+            children: /* @__PURE__ */ jsx("div", { className: "mobile-nav-handle-bar" })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { ref: contentRef, className: "mobile-nav-content", children: activeKey ? children(activeKey) : null })
+      ]
+    }
+  );
+};
+const MobileNavBar = ({ className, children }) => /* @__PURE__ */ jsx("nav", { className: cn("mobile-nav-bar", className), children: /* @__PURE__ */ jsx("div", { className: "mobile-nav-bar-inner", children }) });
+const MobileNavTrigger = ({
+  value,
+  children,
+  label,
+  onAction,
+  className
+}) => {
+  const { activeKey, open, toggle, close } = useMobileNav();
+  const handleClick = () => {
+    if (onAction) {
+      if (open) close();
+      onAction();
+    } else {
+      toggle(value);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: handleClick,
+      "data-active": activeKey === value || void 0,
+      className: cn("mobile-nav-trigger group", className),
+      "aria-label": label,
+      children
+    }
+  );
+};
 const X = ({ className = "", color = "#71747D" }) => {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -13069,6 +13340,10 @@ export {
   MenubarSubContent,
   MenubarSubTrigger,
   MenubarTrigger,
+  MobileNav,
+  MobileNavBar,
+  MobileNavPanel,
+  MobileNavTrigger,
   NavAccount,
   NavBullet,
   NavLogo,
@@ -13215,12 +13490,14 @@ export {
   UtilityCompare,
   UtilityDrag,
   UtilityEdit,
+  UtilityFeedback,
   UtilityHome,
   UtilityMessage,
   UtilityOptions,
   UtilityPortfolio,
   UtilityReset,
   UtilityRevisionsHide,
+  UtilityRevisionsShow,
   UtilitySave,
   UtilityScopeLarge,
   UtilityScoring,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syscore/ui-library",
-  "version": "1.15.4",
+  "version": "1.16.0",
   "description": "A comprehensive React component library built with Radix UI, Tailwind CSS, and TypeScript",
   "private": false,
   "type": "module",