@syscore/ui-library 1.22.0 → 1.24.0

package/client/components/ui/dialog.tsx

@@ -69,20 +69,18 @@ function DialogContent({
               {children}
             </div>
             {showCloseButton && (
-              <div className="dialog-close">
-                <DialogPrimitive.Close
-                  data-slot="dialog-close"
-                  className="absolute top-4 right-4 cursor-pointer"
-                >
-                  <UtilityClose
-                    className={cn(
-                      "dialog-close-icon text-gray-400 hover:text-gray-500 transition-colors duration-200 ",
-                      closeClassName,
-                    )}
-                  />
-                  <span className="sr-only">Close</span>
-                </DialogPrimitive.Close>
-              </div>
+              <DialogPrimitive.Close
+                data-slot="dialog-close"
+                className="dialog-close"
+              >
+                <UtilityClose
+                  className={cn(
+                    "dialog-close-icon text-gray-400 hover:text-gray-600 transition-colors duration-200 ",
+                    closeClassName,
+                  )}
+                />
+                <span className="sr-only">Close</span>
+              </DialogPrimitive.Close>
             )}
           </div>
         </DialogPrimitive.Content>

package/client/components/ui/height-container.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useLayoutEffect, useRef, ReactNode } from "react";
+import { animate } from "motion/react";
+import { cn } from "@/lib/utils";
+
+export function HeightContainer({
+  children,
+  stateKey,
+  className,
+}: {
+  children: ReactNode;
+  stateKey: string;
+  className?: 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;
+
+    // Set initial height without animation
+    const initialHeight = inner.offsetHeight;
+    if (currentHeight.current === 0 && initialHeight > 0) {
+      currentHeight.current = initialHeight;
+      container.style.height = `${initialHeight}px`;
+    }
+
+    // Keep observing so we catch post-animation height changes
+    const ro = new ResizeObserver(() => {
+      const targetHeight = inner.offsetHeight;
+      if (targetHeight > 0 && targetHeight !== currentHeight.current) {
+        const shouldAnimate = currentHeight.current > 0;
+        currentHeight.current = targetHeight;
+        if (shouldAnimate) {
+          animate(container, { height: targetHeight }, { duration: 0.25, ease: "easeInOut" });
+        } else {
+          container.style.height = `${targetHeight}px`;
+        }
+      }
+    });
+    ro.observe(inner);
+    return () => ro.disconnect();
+  }, [stateKey]);
+
+  return (
+    <div ref={containerRef} className={cn("overflow-clip", className)}>
+      <div ref={innerRef}>{children}</div>
+    </div>
+  );
+}

package/client/components/ui/tabs.tsx

@@ -8,6 +8,7 @@ import {
   useMotionValue,
 } from "motion/react";
 import { cn } from "@/lib/utils";
+import { HeightContainer } from "./height-container";
 import {
   Children,
   cloneElement,
@@ -65,49 +66,6 @@ const contentVariants = {
   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]);
-
-  return (
-    <div ref={containerRef} className="overflow-clip">
-      <div ref={innerRef}>{children}</div>
-    </div>
-  );
-}
-
 function Tabs({
   children,
   defaultValue,
@@ -156,12 +114,12 @@ function Tabs({
     >
       <div className={cn("tabs-container", className)}>
         {nonContentChildren}
-        <AnimatedHeight selectedValue={selectedValue}>
+        <HeightContainer stateKey={selectedValue}>
           <AnimatePresence mode="wait" custom={direction}>
             {activeContent &&
               cloneElement(activeContent, { key: activeContent.props.value })}
           </AnimatePresence>
-        </AnimatedHeight>
+        </HeightContainer>
       </div>
     </TabsContext.Provider>
   );

package/client/components/ui/tooltip.tsx

@@ -245,7 +245,7 @@ function ToggleClose({ className }: { className?: string }) {
       onClick={close}
       className={className}
     >
-      <UtilityClose />
+      <UtilityClose className="text-inherit" />
     </button>
   );
 }

package/client/global.css

@@ -2054,7 +2054,7 @@ body {
 .tooltip-content {
   position: relative;
   z-index: 50;
-  border-radius: 0.5rem;
+  border-radius: 12px;
   padding: 1.5rem;
   padding-top: 2rem;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
@@ -2177,6 +2177,12 @@ body {
   top: 1rem;
   right: 1rem;
   cursor: pointer;
+  color: var(--color-gray-500, #6b7280);
+  transition: color 0.15s ease-in-out;
+}
+
+[data-slot="tooltip-close"]:hover {
+  color: var(--color-gray-300, #fff);
 }
 
 @media (max-width: 639px) {
@@ -2630,7 +2636,7 @@ body {
   }
 }
 
-/* .dialog-close {
+.dialog-close {
   position: absolute;
   top: 1rem;
   right: 1rem;
@@ -2654,20 +2660,20 @@ body {
   flex-shrink: 0;
   color: var(--color-gray-400);
   transition: color 0.2s ease-in-out;
-} */
+}
 
-/* .dialog-close:hover svg {
+.dialog-close:hover svg {
   color: var(--color-gray-500);
 }
 
 .dialog-close-icon {
   color: var(--color-gray-400);
   transition: color 0.2s ease-in-out;
-} */
+}
 
-/* .dialog-close:hover .dialog-close-icon {
+.dialog-close:hover .dialog-close-icon {
   color: var(--color-gray-500);
-} */
+}
 
 .dialog-header {
   display: flex;
@@ -7305,11 +7311,9 @@ body {
   margin-bottom: 0;
 }
 
-.page-header-description {
-  /* Uses body-large utility */
-  /* max-width: 680px; */
+/* .page-header-description {
   padding-right: 10rem;
-}
+} */
 
 @media (max-width: 640px) {
   .page-header-description {