@syscore/ui-library 1.20.0 → 1.22.0

package/client/components/ui/tabs.tsx

@@ -1,238 +1,386 @@
 "use client";
 
-import React from "react";
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { AnimatePresence, motion, Transition } from "motion/react";
-
-import { useTabs, type Tab as BaseTab } from "@/hooks/use-tabs";
+import {
+  AnimatePresence,
+  animate,
+  motion,
+  Transition,
+  useMotionValue,
+} from "motion/react";
 import { cn } from "@/lib/utils";
+import {
+  Children,
+  cloneElement,
+  createContext,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+  ReactNode,
+  ReactElement,
+} from "react";
 
-export type Tab = BaseTab & {
-  content?: React.ReactNode;
-};
+export type TabVariant = "default" | "danger";
+
+interface TabsContextValue {
+  selectedValue: string;
+  setSelectedValue: (value: string) => void;
+  direction: number;
+  registerValue: (value: string) => void;
+}
+
+const TabsContext = createContext<TabsContextValue | null>(null);
 
-interface AnimatedTabsProps {
-  tabs: Tab[];
+function useTabsContext() {
+  const ctx = useContext(TabsContext);
+  if (!ctx)
+    throw new Error("Tabs compound components must be used inside <Tabs>");
+  return ctx;
 }
 
-const transition = {
-  type: "tween" as const,
-  ease: "easeOut" as const,
+interface TabsNavContextValue {
+  registerRef: (value: string, el: HTMLButtonElement | null) => void;
+}
+
+const TabsNavContext = createContext<TabsNavContextValue | null>(null);
+
+function useTabsNavContext() {
+  const ctx = useContext(TabsNavContext);
+  if (!ctx) throw new Error("TabsTrigger must be used inside <TabsList>");
+  return ctx;
+}
+
+const transition: Transition = {
+  type: "tween",
+  ease: "easeOut",
   duration: 0.15,
 };
 
-// const getHoverAnimationProps = (hoveredRect: DOMRect, navRect: DOMRect) => ({
-//   x: hoveredRect.left - navRect.left - 10,
-//   y: hoveredRect.top - navRect.top - 4,
-//   width: hoveredRect.width + 20,
-//   height: hoveredRect.height + 10,
-// });
+const contentVariants = {
+  enter: (dir: number) => ({ opacity: 0, x: dir * 20 }),
+  center: { opacity: 1, x: 0 },
+  exit: (dir: number) => ({ opacity: 0, x: dir * -20 }),
+};
+
+function AnimatedHeight({
+  children,
+  selectedValue,
+}: {
+  children: ReactNode;
+  selectedValue: string;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const innerRef = useRef<HTMLDivElement>(null);
+  const currentHeight = useRef(0);
+
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    const inner = innerRef.current;
+    if (!container || !inner) return;
+
+    const initialHeight = inner.offsetHeight;
+    if (currentHeight.current === 0) {
+      currentHeight.current = initialHeight;
+      container.style.height = `${initialHeight}px`;
+      return;
+    }
+
+    // Keep observing until the height differs from current (new content has mounted)
+    const ro = new ResizeObserver(() => {
+      const targetHeight = inner.offsetHeight;
+      if (targetHeight > 0 && targetHeight !== currentHeight.current) {
+        currentHeight.current = targetHeight;
+        ro.disconnect();
+        animate(container, { height: targetHeight }, { duration: 0.25, ease: "easeInOut" });
+      }
+    });
+    ro.observe(inner);
+    return () => ro.disconnect();
+  }, [selectedValue]);
 
-const TabContent = ({ tab }: { tab: Tab }) => {
   return (
-    <motion.div
-      key={tab.value}
-      initial={{ opacity: 0, y: 10 }}
-      animate={{ opacity: 1, y: 0 }}
-      exit={{ opacity: 0, y: -10 }}
-      transition={transition as Transition}
-    >
-      {tab.content}
-    </motion.div>
+    <div ref={containerRef} className="overflow-clip">
+      <div ref={innerRef}>{children}</div>
+    </div>
   );
-};
+}
 
-const Tabs = ({
-  tabs,
-  selectedTabIndex,
-  setSelectedTab,
+function Tabs({
+  children,
+  defaultValue,
+  className,
 }: {
-  tabs: Tab[];
-  selectedTabIndex: number;
-  setSelectedTab: (input: [number, number]) => void;
-}) => {
-  const [buttonRefs, setButtonRefs] = React.useState<
-    Array<HTMLButtonElement | null>
-  >([]);
+  children: ReactNode;
+  defaultValue: string;
+  className?: string;
+}) {
+  const [selectedValue, setSelectedValue] = useState(defaultValue);
+  const [direction, setDirection] = useState(0);
 
-  React.useEffect(() => {
-    setButtonRefs((prev) => prev.slice(0, tabs.length));
-  }, [tabs.length]);
+  // Stable ordered registry — TabsTrigger registers on mount in render order.
+  const valuesRef = useRef<string[]>([]);
+  const selectedValueRef = useRef(defaultValue);
 
-  const navRef = React.useRef<HTMLDivElement>(null);
-  const navRect = navRef.current?.getBoundingClientRect();
+  const registerValue = useCallback((value: string) => {
+    if (!valuesRef.current.includes(value)) {
+      valuesRef.current.push(value);
+    }
+  }, []);
 
-  const selectedRect = buttonRefs[selectedTabIndex]?.getBoundingClientRect();
+  const handleSetSelectedValue = useCallback((value: string) => {
+    const currentIdx = valuesRef.current.indexOf(selectedValueRef.current);
+    const nextIdx = valuesRef.current.indexOf(value);
+    setDirection(nextIdx > currentIdx ? 1 : -1);
+    selectedValueRef.current = value;
+    setSelectedValue(value);
+  }, []);
 
-  const [hoveredTabIndex, setHoveredTabIndex] = React.useState<number | null>(
-    null,
+  const childArray = Children.toArray(children);
+  const contentChildren = childArray.filter(
+    (child): child is ReactElement<{ value: string }> =>
+      isValidElement(child) && child.type === TabsContent,
+  );
+  const nonContentChildren = childArray.filter(
+    (child) => !(isValidElement(child) && child.type === TabsContent),
+  );
+  const activeContent = contentChildren.find(
+    (child) => child.props.value === selectedValue,
   );
-  const hoveredRect =
-    buttonRefs[hoveredTabIndex ?? -1]?.getBoundingClientRect();
 
   return (
-    <nav
-      ref={navRef}
-      className="tabs-nav"
-      onPointerLeave={() => setHoveredTabIndex(null)}
+    <TabsContext.Provider
+      value={{ selectedValue, setSelectedValue: handleSetSelectedValue, direction, registerValue }}
     >
-      {tabs.map((item, i) => {
-        const isActive = selectedTabIndex === i;
-
-        return (
-          <button
-            key={item.value}
-            className="tabs-nav-button"
-            onPointerEnter={() => setHoveredTabIndex(i)}
-            onFocus={() => setHoveredTabIndex(i)}
-            onClick={() => setSelectedTab([i, i > selectedTabIndex ? 1 : -1])}
-          >
-            <motion.span
-              ref={(el) => {
-                buttonRefs[i] = el as HTMLButtonElement;
-              }}
-              className={cn("tabs-nav-button-text", {
-                "tabs-nav-button-text--inactive": !isActive,
-                "tabs-nav-button-text--active": isActive,
-              })}
-            >
-              <small
-                className={item.value === "danger-zone" ? "tabs-nav-button-text--danger" : ""}
-              >
-                {item.label}
-              </small>
-            </motion.span>
-          </button>
-        );
-      })}
-
-      {/* <AnimatePresence>
-        {hoveredRect && navRect && (
-          <motion.div
-            key="hover"
-            className={`absolute z-10 top-0 left-0 rounded-md ${
-              hoveredTabIndex ===
-              tabs.findIndex(({ value }) => value === "danger-zone")
-                ? "bg-red-500/50"
-                : "bg-gray-100/50"
-            }`}
-            initial={{
-              ...getHoverAnimationProps(hoveredRect, navRect),
-              opacity: 0,
-            }}
-            animate={{
-              ...getHoverAnimationProps(hoveredRect, navRect),
-              opacity: 1,
-            }}
-            exit={{
-              ...getHoverAnimationProps(hoveredRect, navRect),
-              opacity: 0,
-            }}
-            transition={transition as Transition}
-          />
-        )}
-      </AnimatePresence> */}
-
-      <AnimatePresence>
-        {selectedRect && navRect && (
-          <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={transition as Transition}
-          />
-        )}
-      </AnimatePresence>
-
-      <div className="tabs-nav-underline" />
-    </nav>
+      <div className={cn("tabs-container", className)}>
+        {nonContentChildren}
+        <AnimatedHeight selectedValue={selectedValue}>
+          <AnimatePresence mode="wait" custom={direction}>
+            {activeContent &&
+              cloneElement(activeContent, { key: activeContent.props.value })}
+          </AnimatePresence>
+        </AnimatedHeight>
+      </div>
+    </TabsContext.Provider>
   );
-};
+}
+
+function TabsList({
+  children,
+  className,
+  containerClassName,
+  fullWidth = false,
+}: {
+  children: ReactNode;
+  className?: string;
+  containerClassName?: string;
+  fullWidth?: boolean;
+}) {
+  const { selectedValue } = useTabsContext();
+  const navRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const buttonRefs = useRef<Map<string, HTMLButtonElement | null>>(new Map());
+
+  // Motion values for the indicator — bypasses React state so updates are
+  // applied directly to the DOM without re-renders.
+  const indicatorX = useMotionValue(-999);
+  const indicatorWidth = useMotionValue(0);
+  // Only isDanger requires React state (drives a CSS class change).
+  const [indicatorColor, setIndicatorColor] = useState<
+    "default" | "danger" | null
+  >(null);
+
+  // On initial mount, snap the indicator without animation.
+  const isFirstRender = useRef(true);
+
+  const selectedValueRef = useRef(selectedValue);
+  selectedValueRef.current = selectedValue;
+
+  const updateIndicatorPosition = useCallback(() => {
+    const nav = navRef.current;
+    const selectedEl = buttonRefs.current.get(selectedValueRef.current);
+    if (!nav || !selectedEl) return;
+    const navRect = nav.getBoundingClientRect();
+    const selectedRect = selectedEl.getBoundingClientRect();
+    indicatorX.set(selectedRect.left - navRect.left);
+    indicatorWidth.set(selectedRect.width);
+  }, [indicatorX, indicatorWidth]);
 
-export function AnimatedTabs({ tabs }: AnimatedTabsProps) {
-  const [hookProps] = React.useState(() => {
-    const initialTabId =
-      tabs.find((tab) => tab.value === "home")?.value || tabs[0].value;
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
 
-    return {
-      tabs: tabs.map((tab) => ({
-        ...tab,
-      })),
-      initialTabId,
+    const updateScroll = () => {
+      const canLeft = el.scrollLeft > 0;
+      const canRight = el.scrollLeft < el.scrollWidth - el.clientWidth - 1;
+      el.dataset.scrollLeft = canLeft ? "true" : "";
+      el.dataset.scrollRight = canRight ? "true" : "";
     };
-  });
 
-  const framer = useTabs(hookProps);
+    updateScroll();
+    el.addEventListener("scroll", updateScroll, { passive: true });
+    const ro = new ResizeObserver(() => {
+      updateScroll();
+      updateIndicatorPosition();
+    });
+    ro.observe(el);
+    return () => {
+      el.removeEventListener("scroll", updateScroll);
+      ro.disconnect();
+    };
+  }, [updateIndicatorPosition]);
+
+  const registerRef = useCallback(
+    (value: string, el: HTMLButtonElement | null) => {
+      buttonRefs.current.set(value, el);
+    },
+    [],
+  );
+
+  useLayoutEffect(() => {
+    const nav = navRef.current;
+    const container = containerRef.current;
+    const selectedEl = buttonRefs.current.get(selectedValue);
+    if (!nav || !container || !selectedEl) return;
+
+    const navRect = nav.getBoundingClientRect();
+    const selectedRect = selectedEl.getBoundingClientRect();
+    const P = selectedRect.left - navRect.left;
+    const W = selectedRect.width;
+    const danger = selectedEl.dataset?.variant === "danger";
+
+    setIndicatorColor(danger ? "danger" : "default");
+
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      indicatorX.set(P);
+      indicatorWidth.set(W);
+      return;
+    }
+
+    const target = P - container.clientWidth / 2 + W / 2;
+    const clampedTarget = Math.max(
+      0,
+      Math.min(target, container.scrollWidth - container.clientWidth),
+    );
+    const needsScroll = Math.abs(clampedTarget - container.scrollLeft) > 1;
+
+    if (needsScroll) {
+      indicatorX.set(P);
+      indicatorWidth.set(W);
+      container.scrollTo({ left: clampedTarget, behavior: "smooth" });
+    } else {
+      animate(indicatorX, P, transition);
+      animate(indicatorWidth, W, transition);
+    }
+  }, [selectedValue, indicatorX, indicatorWidth]);
 
   return (
-    <div className="tabs-container">
-      <div className="tabs-container-inner">
-        <Tabs {...framer.tabProps} />
+    <TabsNavContext.Provider value={{ registerRef }}>
+      <div
+        ref={containerRef}
+        className={cn("tabs-container-inner", containerClassName)}
+      >
+        <nav
+          ref={navRef}
+          className={cn(
+            "tabs-nav",
+            { "tabs-nav--full-width": fullWidth },
+            className,
+          )}
+        >
+          {children}
+
+          {indicatorColor !== null && (
+            <motion.div
+              className={cn("tabs-nav-indicator", {
+                "tabs-nav-indicator--danger": indicatorColor === "danger",
+                "tabs-nav-indicator--default": indicatorColor === "default",
+              })}
+              style={{ x: indicatorX, width: indicatorWidth }}
+            />
+          )}
+
+          <div className="tabs-nav-underline" />
+        </nav>
       </div>
-      <AnimatePresence mode="wait">
-        <TabContent tab={framer.selectedTab} />
-      </AnimatePresence>
-    </div>
+    </TabsNavContext.Provider>
+  );
+}
+
+function TabsTrigger({
+  value,
+  children,
+  className,
+  variant = "default",
+}: {
+  value: string;
+  children: ReactNode;
+  className?: string;
+  variant?: TabVariant;
+}) {
+  const { selectedValue, setSelectedValue, registerValue } = useTabsContext();
+  const { registerRef } = useTabsNavContext();
+
+  useLayoutEffect(() => {
+    registerValue(value);
+  }, [registerValue, value]);
+  const isActive = selectedValue === value;
+
+  const refCallback = useCallback(
+    (el: HTMLButtonElement | null) => registerRef(value, el),
+    [registerRef, value],
+  );
+
+  const handleClick = useCallback(
+    () => setSelectedValue(value),
+    [setSelectedValue, value],
+  );
+
+  return (
+    <button
+      className={cn("tabs-nav-button", className)}
+      data-variant={variant}
+      onClick={handleClick}
+      ref={refCallback}
+    >
+      <span
+        className={cn("tabs-nav-button-text  overline-large", {
+          "tabs-nav-button-text--inactive": !isActive,
+          "tabs-nav-button-text--active": isActive,
+        })}
+      >
+        {children}
+      </span>
+    </button>
+  );
+}
+
+function TabsContent({
+  children,
+  className,
+}: {
+  value: string;
+  children: ReactNode;
+  className?: string;
+}) {
+  const { direction } = useTabsContext();
+
+  return (
+    <motion.div
+      className={className}
+      custom={direction}
+      variants={contentVariants}
+      initial="enter"
+      animate="center"
+      exit="exit"
+      transition={transition}
+    >
+      {children}
+    </motion.div>
   );
 }
 
-// Standard Radix UI Tabs Components
-const TabsRoot = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Root
-    ref={ref}
-    className={cn("tabs", className)}
-    {...props}
-  />
-));
-TabsRoot.displayName = TabsPrimitive.Root.displayName;
-
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn("tabs-list", className)}
-    {...props}
-  />
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn("tabs-trigger", className)}
-    {...props}
-  />
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn("tabs-content", className)}
-    {...props}
-  />
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-
-// Export standard Radix UI tabs components
-export { TabsRoot as Tabs, TabsList, TabsTrigger, TabsContent };
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/client/components/ui/tooltip.tsx

@@ -228,7 +228,7 @@ function TooltipContent({
           </div>
         )}
         {variant !== "simple" && !hideClose && (
-          <ToggleClose className="absolute top-4 right-4" />
+          <ToggleClose />
         )}
         {children}
       </TooltipPrimitive.Content>
@@ -243,7 +243,7 @@ function ToggleClose({ className }: { className?: string }) {
     <button
       data-slot="tooltip-close"
       onClick={close}
-      className={cn("group cursor-pointer", className)}
+      className={className}
     >
       <UtilityClose />
     </button>