@syscore/ui-library 1.18.0 → 1.19.1

package/dist/index.d.ts

@@ -20,6 +20,7 @@ import { AlertDialogTitle } from '../client/components/ui/alert-dialog';
 import { AlertDialogTrigger } from '../client/components/ui/alert-dialog';
 import { AlertTitle } from '../client/components/ui/alert';
 import { AlphaIcon } from '../client/components/icons/AlphaIcon';
+import { AnimatedTabs } from '../client/components/ui/tabs';
 import { AspectRatio } from '../client/components/ui/aspect-ratio';
 import { Avatar } from '../client/components/ui/avatar';
 import { AvatarFallback } from '../client/components/ui/avatar';
@@ -412,6 +413,8 @@ export { AlertTitle }
 
 export { AlphaIcon }
 
+export { AnimatedTabs }
+
 export { AspectRatio }
 
 export { Avatar }

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { useState, useEffect, useCallback, useRef, createContext, useMemo, useLayoutEffect, useContext } from "react";
+import React__default, { useState, useCallback, useEffect, useRef, createContext, useMemo, useLayoutEffect, useContext } from "react";
 import { motion, AnimatePresence, useMotionValue, animate } from "motion/react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -18,6 +18,7 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { OTPInput, OTPInputContext } from "input-otp";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { useFormContext, FormProvider, Controller } from "react-hook-form";
@@ -27,7 +28,6 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import * as ProgressPrimitive from "@radix-ui/react-progress";
 import { DayPicker } from "react-day-picker";
 import { Command as Command$1 } from "cmdk";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import * as MenubarPrimitive from "@radix-ui/react-menubar";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
@@ -1752,6 +1752,172 @@ const Slider = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;
+function useTabs({ tabs, initialTabId }) {
+  const initialIndex = tabs.findIndex((tab) => tab.value === initialTabId);
+  const [selectedTabIndex, setSelectedTabIndex] = useState(
+    initialIndex >= 0 ? initialIndex : 0
+  );
+  const setSelectedTab = useCallback(([index, direction]) => {
+    setSelectedTabIndex(index);
+  }, []);
+  const selectedTab = tabs[selectedTabIndex] || tabs[0];
+  return {
+    tabProps: {
+      tabs,
+      selectedTabIndex,
+      setSelectedTab
+    },
+    selectedTab
+  };
+}
+const transition = {
+  type: "tween",
+  ease: "easeOut",
+  duration: 0.15
+};
+const TabContent = ({ tab }) => {
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: { opacity: 0, y: 10 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: -10 },
+      transition,
+      children: tab.content
+    },
+    tab.value
+  );
+};
+const Tabs = ({
+  tabs,
+  selectedTabIndex,
+  setSelectedTab
+}) => {
+  var _a, _b, _c;
+  const [buttonRefs, setButtonRefs] = React__default.useState([]);
+  React__default.useEffect(() => {
+    setButtonRefs((prev) => prev.slice(0, tabs.length));
+  }, [tabs.length]);
+  const navRef = React__default.useRef(null);
+  const navRect = (_a = navRef.current) == null ? void 0 : _a.getBoundingClientRect();
+  const selectedRect = (_b = buttonRefs[selectedTabIndex]) == null ? void 0 : _b.getBoundingClientRect();
+  const [hoveredTabIndex, setHoveredTabIndex] = React__default.useState(
+    null
+  );
+  (_c = buttonRefs[hoveredTabIndex ?? -1]) == null ? void 0 : _c.getBoundingClientRect();
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      ref: navRef,
+      className: "tabs-nav",
+      onPointerLeave: () => setHoveredTabIndex(null),
+      children: [
+        tabs.map((item, i) => {
+          const isActive = selectedTabIndex === i;
+          return /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "tabs-nav-button",
+              onPointerEnter: () => setHoveredTabIndex(i),
+              onFocus: () => setHoveredTabIndex(i),
+              onClick: () => setSelectedTab([i, i > selectedTabIndex ? 1 : -1]),
+              children: /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  ref: (el) => {
+                    buttonRefs[i] = el;
+                  },
+                  className: cn("tabs-nav-button-text", {
+                    "tabs-nav-button-text--inactive": !isActive,
+                    "tabs-nav-button-text--active": isActive
+                  }),
+                  children: /* @__PURE__ */ jsx(
+                    "small",
+                    {
+                      className: item.value === "danger-zone" ? "tabs-nav-button-text--danger" : "",
+                      children: item.label
+                    }
+                  )
+                }
+              )
+            },
+            item.value
+          );
+        }),
+        /* @__PURE__ */ jsx(AnimatePresence, { children: selectedRect && navRect && /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: cn("tabs-nav-indicator", {
+              "tabs-nav-indicator--danger": selectedTabIndex === tabs.findIndex(({ value }) => value === "danger-zone"),
+              "tabs-nav-indicator--default": selectedTabIndex !== tabs.findIndex(({ value }) => value === "danger-zone")
+            }),
+            initial: false,
+            animate: {
+              width: selectedRect.width,
+              x: selectedRect.left - navRect.left,
+              opacity: 1
+            },
+            transition
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: "tabs-nav-underline" })
+      ]
+    }
+  );
+};
+function AnimatedTabs({ tabs }) {
+  const [hookProps] = React__default.useState(() => {
+    var _a;
+    const initialTabId = ((_a = tabs.find((tab) => tab.value === "home")) == null ? void 0 : _a.value) || tabs[0].value;
+    return {
+      tabs: tabs.map((tab) => ({
+        ...tab
+      })),
+      initialTabId
+    };
+  });
+  const framer = useTabs(hookProps);
+  return /* @__PURE__ */ jsxs("div", { className: "tabs-container", children: [
+    /* @__PURE__ */ jsx("div", { className: "tabs-container-inner", children: /* @__PURE__ */ jsx(Tabs, { ...framer.tabProps }) }),
+    /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(TabContent, { tab: framer.selectedTab }) })
+  ] });
+}
+const TabsRoot = React__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Root,
+  {
+    ref,
+    className: cn("tabs", className),
+    ...props
+  }
+));
+TabsRoot.displayName = TabsPrimitive.Root.displayName;
+const TabsList = React__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.List,
+  {
+    ref,
+    className: cn("tabs-list", className),
+    ...props
+  }
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+const TabsTrigger = React__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Trigger,
+  {
+    ref,
+    className: cn("tabs-trigger", className),
+    ...props
+  }
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+const TabsContent = React__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  TabsPrimitive.Content,
+  {
+    ref,
+    className: cn("tabs-content", className),
+    ...props
+  }
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
 const InputOTP = React.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx(
   OTPInput,
   {
@@ -2442,30 +2608,30 @@ function DialogOverlay({
 }
 function DialogContent({
   className,
+  innerClassName,
+  closeClassName,
   children,
   showCloseButton = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(DialogPortal, { "data-slot": "dialog-portal", children: /* @__PURE__ */ jsx(DialogOverlay, { children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(DialogPortal, { "data-slot": "dialog-portal", children: /* @__PURE__ */ jsx(DialogOverlay, { className: "overflow-y-auto", children: /* @__PURE__ */ jsx(
     SheetPrimitive.Content,
     {
       "data-slot": "dialog-content",
       className: cn("dialog-content", className),
       ...props,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "dialog-content-inner", children }),
-        showCloseButton && /* @__PURE__ */ jsxs(
-          SheetPrimitive.Close,
-          {
-            "data-slot": "dialog-close",
-            className: "dialog-close",
-            children: [
-              /* @__PURE__ */ jsx(UtilityClose, {}),
-              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-            ]
-          }
-        )
-      ]
+      children: /* @__PURE__ */ jsxs("div", { className: "dialog-content-wrapper", children: [
+        /* @__PURE__ */ jsx("div", { className: cn("dialog-content-inner", innerClassName), children }),
+        showCloseButton && /* @__PURE__ */ jsx("div", { className: "dialog-close", children: /* @__PURE__ */ jsxs(SheetPrimitive.Close, { "data-slot": "dialog-close", children: [
+          /* @__PURE__ */ jsx(
+            UtilityClose,
+            {
+              className: cn("dialog-close-icon", closeClassName)
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] }) })
+      ] })
     }
   ) }) });
 }
@@ -2759,60 +2925,6 @@ const Tag = React.forwardRef(
   }
 );
 Tag.displayName = "Tag";
-function useTabs({ tabs, initialTabId }) {
-  const initialIndex = tabs.findIndex((tab) => tab.value === initialTabId);
-  const [selectedTabIndex, setSelectedTabIndex] = useState(
-    initialIndex >= 0 ? initialIndex : 0
-  );
-  const setSelectedTab = useCallback(([index, direction]) => {
-    setSelectedTabIndex(index);
-  }, []);
-  const selectedTab = tabs[selectedTabIndex] || tabs[0];
-  return {
-    tabProps: {
-      tabs,
-      selectedTabIndex,
-      setSelectedTab
-    },
-    selectedTab
-  };
-}
-const TabsRoot = React__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.Root,
-  {
-    ref,
-    className: cn("tabs", className),
-    ...props
-  }
-));
-TabsRoot.displayName = TabsPrimitive.Root.displayName;
-const TabsList = React__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.List,
-  {
-    ref,
-    className: cn("tabs-list", className),
-    ...props
-  }
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-const TabsTrigger = React__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.Trigger,
-  {
-    ref,
-    className: cn("tabs-trigger", className),
-    ...props
-  }
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-const TabsContent = React__default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  TabsPrimitive.Content,
-  {
-    ref,
-    className: cn("tabs-content", className),
-    ...props
-  }
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
 const Pagination = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "nav",
   {
@@ -5762,9 +5874,7 @@ const UtilityClassification = ({
     }
   );
 };
-const UtilityCompare = ({
-  className
-}) => {
+function UtilityCompare({ className }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -5787,7 +5897,7 @@ const UtilityCompare = ({
               {
                 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: "currentColor",
                 "stroke-width": "2",
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round"
@@ -5797,7 +5907,7 @@ const UtilityCompare = ({
               "path",
               {
                 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: "currentColor",
                 "stroke-width": "2",
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round"
@@ -5807,7 +5917,7 @@ const UtilityCompare = ({
               "path",
               {
                 d: "M10.6002 21.7971L5.80011 16.998L1 21.7971",
-                stroke: "#282A31",
+                stroke: "currentColor",
                 "stroke-width": "2",
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round"
@@ -5818,7 +5928,7 @@ const UtilityCompare = ({
               {
                 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: "currentColor",
                 "stroke-width": "2",
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round"
@@ -5828,7 +5938,7 @@ const UtilityCompare = ({
               "path",
               {
                 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: "currentColor",
                 "stroke-width": "2",
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round"
@@ -5838,7 +5948,7 @@ const UtilityCompare = ({
               "path",
               {
                 d: "M20.1998 12.2012L24.9999 17.0002L29.8001 12.2012",
-                stroke: "#282A31",
+                stroke: "currentColor",
                 "stroke-width": "2",
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round"
@@ -5849,7 +5959,7 @@ const UtilityCompare = ({
       )
     }
   );
-};
+}
 const UtilityDrag = ({ className }) => {
   return /* @__PURE__ */ jsx(
     "div",
@@ -6657,47 +6767,56 @@ function UtilityTargetActive({ className, ...props }) {
   ] });
 }
 function UtilityText({ className }) {
-  return /* @__PURE__ */ jsxs(
-    "svg",
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      className,
-      xmlns: "http://www.w3.org/2000/svg",
-      width: "16",
-      height: "14",
-      viewBox: "0 0 16 14",
-      fill: "none",
-      children: [
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M8.75 12.75H0.75",
-            stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            "stroke-linejoin": "round"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M10.75 0.75H0.75",
-            stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M14.75 6.75H0.75",
-            stroke: "currentColor",
-            strokeWidth: "1.5",
-            strokeLinecap: "round",
-            strokeLinejoin: "round"
-          }
-        )
-      ]
+      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: "16",
+          height: "14",
+          viewBox: "0 0 16 14",
+          fill: "none",
+          className: cn("text-inherit w-full h-full"),
+          children: [
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M8.75 12.75H0.75",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                "stroke-linejoin": "round"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M10.75 0.75H0.75",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M14.75 6.75H0.75",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          ]
+        }
+      )
     }
   );
 }
@@ -6717,7 +6836,7 @@ function UtilityRevisionsHide({ className }) {
           height: "15",
           viewBox: "0 0 17 15",
           fill: "none",
-          className: cn("text-inherit"),
+          className: cn("text-inherit w-full h-full"),
           children: [
             /* @__PURE__ */ jsx(
               "path",
@@ -6882,7 +7001,7 @@ function UtilityFeedback({ className }) {
           height: "28",
           viewBox: "0 0 30 28",
           fill: "none",
-          className: cn("text-inherit"),
+          className: cn("text-inherit w-full h-full"),
           children: /* @__PURE__ */ jsx(
             "path",
             {
@@ -6915,7 +7034,7 @@ function UtilityRevisionsShow({ className }) {
           height: "26",
           viewBox: "0 0 30 26",
           fill: "none",
-          className: cn("text-inherit"),
+          className: cn("text-inherit w-full h-full"),
           children: [
             /* @__PURE__ */ jsx(
               "path",
@@ -6928,20 +7047,20 @@ function UtilityRevisionsShow({ className }) {
               "path",
               {
                 d: "M9.84194 11.5L1 20.5006V25.0009H14.2629L18.6839 20.5006",
-                stroke: "#282A31",
-                "stroke-width": "2",
-                "stroke-linecap": "round",
-                "stroke-linejoin": "round"
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "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"
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
               }
             )
           ]
@@ -12565,8 +12684,11 @@ const MobileNavTrigger = ({
     }
   };
   return /* @__PURE__ */ jsx(
-    "button",
+    Button,
     {
+      variant: "clear",
+      size: "icon",
+      type: "button",
       onClick: handleClick,
       disabled,
       "data-active": activeKey === value || void 0,
@@ -13218,6 +13340,7 @@ export {
   AlertDialogTrigger,
   AlertTitle,
   AlphaIcon,
+  AnimatedTabs,
   AspectRatio,
   Avatar,
   AvatarFallback,

package/package.json

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