@syscore/ui-library 1.19.0 → 1.20.0

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,
   {
@@ -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",
   {
@@ -13228,6 +13340,7 @@ export {
   AlertDialogTrigger,
   AlertTitle,
   AlphaIcon,
+  AnimatedTabs,
   AspectRatio,
   Avatar,
   AvatarFallback,

package/package.json

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