@syscore/ui-library 1.22.0 → 1.24.0

package/dist/index.d.ts

@@ -145,6 +145,7 @@ import { FormField } from '../client/components/ui/form';
 import { FormItem } from '../client/components/ui/form';
 import { FormLabel } from '../client/components/ui/form';
 import { FormMessage } from '../client/components/ui/form';
+import { HeightContainer } from '../client/components/ui/height-container';
 import { HoverCard } from '../client/components/ui/hover-card';
 import { HoverCardContent } from '../client/components/ui/hover-card';
 import { HoverCardTrigger } from '../client/components/ui/hover-card';
@@ -662,6 +663,8 @@ export { FormLabel }
 
 export { FormMessage }
 
+export { HeightContainer }
+
 export { HoverCard }
 
 export { HoverCardContent }

package/dist/index.es.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import { useState, useEffect, useCallback, useRef, createContext, Children, isValidElement, cloneElement, useLayoutEffect, useContext, useMemo } from "react";
-import { motion, AnimatePresence, useMotionValue, animate } from "motion/react";
+import { useState, useEffect, useCallback, useRef, useLayoutEffect, createContext, Children, isValidElement, cloneElement, useContext, useMemo } from "react";
+import { motion, AnimatePresence, animate, useMotionValue } from "motion/react";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { cva } from "class-variance-authority";
@@ -1097,7 +1097,7 @@ function ToggleClose({ className }) {
       "data-slot": "tooltip-close",
       onClick: close,
       className,
-      children: /* @__PURE__ */ jsx(UtilityClose, {})
+      children: /* @__PURE__ */ jsx(UtilityClose, { className: "text-inherit" })
     }
   );
 }
@@ -2454,17 +2454,17 @@ function DialogContent({
       ...props,
       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(
+        showCloseButton && /* @__PURE__ */ jsxs(
           SheetPrimitive.Close,
           {
             "data-slot": "dialog-close",
-            className: "absolute top-4 right-4 cursor-pointer",
+            className: "dialog-close",
             children: [
               /* @__PURE__ */ jsx(
                 UtilityClose,
                 {
                   className: cn(
-                    "dialog-close-icon text-gray-400 hover:text-gray-500 transition-colors duration-200 ",
+                    "dialog-close-icon text-gray-400 hover:text-gray-600 transition-colors duration-200 ",
                     closeClassName
                   )
                 }
@@ -2472,7 +2472,7 @@ function DialogContent({
               /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
             ]
           }
-        ) })
+        )
       ] })
     }
   ) }) });
@@ -2767,6 +2767,40 @@ const Tag = React.forwardRef(
   }
 );
 Tag.displayName = "Tag";
+function HeightContainer({
+  children,
+  stateKey,
+  className
+}) {
+  const containerRef = useRef(null);
+  const innerRef = useRef(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 && initialHeight > 0) {
+      currentHeight.current = initialHeight;
+      container.style.height = `${initialHeight}px`;
+    }
+    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 /* @__PURE__ */ jsx("div", { ref: containerRef, className: cn("overflow-clip", className), children: /* @__PURE__ */ jsx("div", { ref: innerRef, children }) });
+}
 const TabsContext = createContext(null);
 function useTabsContext() {
   const ctx = useContext(TabsContext);
@@ -2790,36 +2824,6 @@ const contentVariants = {
   center: { opacity: 1, x: 0 },
   exit: (dir) => ({ opacity: 0, x: dir * -20 })
 };
-function AnimatedHeight({
-  children,
-  selectedValue
-}) {
-  const containerRef = useRef(null);
-  const innerRef = useRef(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;
-    }
-    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 /* @__PURE__ */ jsx("div", { ref: containerRef, className: "overflow-clip", children: /* @__PURE__ */ jsx("div", { ref: innerRef, children }) });
-}
 function Tabs({
   children,
   defaultValue,
@@ -2857,7 +2861,7 @@ function Tabs({
       value: { selectedValue, setSelectedValue: handleSetSelectedValue, direction, registerValue },
       children: /* @__PURE__ */ jsxs("div", { className: cn("tabs-container", className), children: [
         nonContentChildren,
-        /* @__PURE__ */ jsx(AnimatedHeight, { selectedValue, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", custom: direction, children: activeContent && cloneElement(activeContent, { key: activeContent.props.value }) }) })
+        /* @__PURE__ */ jsx(HeightContainer, { stateKey: selectedValue, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", custom: direction, children: activeContent && cloneElement(activeContent, { key: activeContent.props.value }) }) })
       ] })
     }
   );
@@ -13625,6 +13629,7 @@ export {
   FormItem,
   FormLabel,
   FormMessage,
+  HeightContainer,
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,

package/package.json

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