@syscore/ui-library 1.23.0 → 1.25.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" })
     }
   );
 }
@@ -2464,7 +2464,7 @@ function DialogContent({
                 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
                   )
                 }
@@ -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 }) }) })
       ] })
     }
   );
@@ -10721,7 +10725,7 @@ const BadgeCertificationBronze = ({
           {
             d: "M26.8122 52.8121C24.5706 52.8121 22.2424 52.5414 20.0875 51.9133C17.9325 51.2853 15.7884 50.4839 13.8176 49.3144C11.8467 48.1449 10.0491 46.8021 8.43565 45.1886C6.82216 43.5751 5.47939 41.7884 4.30987 39.8067C3.14036 37.8359 2.33903 35.7784 1.71096 33.5368C1.08288 31.3819 0.812164 29.0537 0.812164 26.8121C0.812164 24.5706 1.08288 22.2424 1.71096 20.0874C2.33903 17.9325 3.14036 15.7884 4.30987 13.8175C5.47939 11.8467 6.82216 10.0491 8.43565 8.43562C10.0491 6.82213 11.8359 5.47936 13.8176 4.30984C15.7884 3.14033 17.8459 2.339 20.0875 1.71093C22.2424 1.08285 24.5706 0.812134 26.8122 0.812134C29.0537 0.812134 31.3819 1.08285 33.5369 1.71093C35.6918 2.339 37.8359 3.14033 39.8067 4.30984C41.7776 5.47936 43.5752 6.82213 45.1887 8.43562C46.8022 10.0491 48.1449 11.8359 49.3145 13.8175C50.484 15.7884 51.2853 17.8459 51.9134 20.0874C52.5414 22.2424 52.8122 24.5706 52.8122 26.8121C52.8122 29.0537 52.5414 31.3819 51.9134 33.5368C51.2853 35.6918 50.484 37.8359 49.3145 39.8067C48.1449 41.7776 46.8022 43.5751 45.1887 45.1886C43.5752 46.8021 41.7884 48.1449 39.8067 49.3144C37.8359 50.4839 35.7784 51.2853 33.5369 51.9133C31.3819 52.5414 29.0537 52.8121 26.8122 52.8121Z",
             fill: "url(#paint0_linear_9834_265)",
-            "fill-opacity": "0.8"
+            fillOpacity: "0.8"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -10824,10 +10828,10 @@ const BadgeCertificationBronze = ({
             y2: "0.822974",
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ jsx("stop", { offset: "0.173077", "stop-color": "#DCBA8E" }),
-              /* @__PURE__ */ jsx("stop", { offset: "0.324306", "stop-color": "#ECDDBA" }),
-              /* @__PURE__ */ jsx("stop", { offset: "0.484968", "stop-color": "#F2E9C9" }),
-              /* @__PURE__ */ jsx("stop", { offset: "0.826923", "stop-color": "#DFC196" })
+              /* @__PURE__ */ jsx("stop", { offset: "0.173077", stopColor: "#DCBA8E" }),
+              /* @__PURE__ */ jsx("stop", { offset: "0.324306", stopColor: "#ECDDBA" }),
+              /* @__PURE__ */ jsx("stop", { offset: "0.484968", stopColor: "#F2E9C9" }),
+              /* @__PURE__ */ jsx("stop", { offset: "0.826923", stopColor: "#DFC196" })
             ]
           }
         ) })
@@ -10860,7 +10864,7 @@ const BadgeCertificationSilver = ({
           {
             d: "M26.8122 52.8121C24.5706 52.8121 22.2424 52.5414 20.0875 51.9133C17.9325 51.2853 15.7884 50.4839 13.8176 49.3144C11.8467 48.1449 10.0491 46.8021 8.43565 45.1886C6.82216 43.5751 5.47939 41.7884 4.30987 39.8067C3.14036 37.8359 2.33903 35.7784 1.71096 33.5368C1.08288 31.3819 0.812164 29.0537 0.812164 26.8121C0.812164 24.5706 1.08288 22.2424 1.71096 20.0874C2.33903 17.9325 3.14036 15.7884 4.30987 13.8175C5.47939 11.8467 6.82216 10.0491 8.43565 8.43562C10.0491 6.82213 11.8359 5.47936 13.8176 4.30984C15.7884 3.14033 17.8459 2.339 20.0875 1.71093C22.2424 1.08285 24.5706 0.812134 26.8122 0.812134C29.0537 0.812134 31.3819 1.08285 33.5369 1.71093C35.6918 2.339 37.8359 3.14033 39.8067 4.30984C41.7776 5.47936 43.5752 6.82213 45.1887 8.43562C46.8022 10.0491 48.1449 11.8359 49.3145 13.8175C50.484 15.7884 51.2853 17.8459 51.9134 20.0874C52.5414 22.2424 52.8122 24.5706 52.8122 26.8121C52.8122 29.0537 52.5414 31.3819 51.9134 33.5368C51.2853 35.6918 50.484 37.8359 49.3145 39.8067C48.1449 41.7776 46.8022 43.5751 45.1887 45.1886C43.5752 46.8021 41.7884 48.1449 39.8067 49.3144C37.8359 50.4839 35.7784 51.2853 33.5369 51.9133C31.3819 52.5414 29.0537 52.8121 26.8122 52.8121Z",
             fill: "url(#paint0_linear_9834_296)",
-            "fill-opacity": "0.8"
+            fillOpacity: "0.8"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -10963,10 +10967,10 @@ const BadgeCertificationSilver = ({
             y2: "0.822974",
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ jsx("stop", { offset: "0.173077", "stop-color": "#BCC4CD" }),
-              /* @__PURE__ */ jsx("stop", { offset: "0.324306", "stop-color": "#FCFCFD" }),
-              /* @__PURE__ */ jsx("stop", { offset: "0.484968", "stop-color": "#FCFCFD" }),
-              /* @__PURE__ */ jsx("stop", { offset: "0.826923", "stop-color": "#BCC4CD" })
+              /* @__PURE__ */ jsx("stop", { offset: "0.173077", stopColor: "#BCC4CD" }),
+              /* @__PURE__ */ jsx("stop", { offset: "0.324306", stopColor: "#FCFCFD" }),
+              /* @__PURE__ */ jsx("stop", { offset: "0.484968", stopColor: "#FCFCFD" }),
+              /* @__PURE__ */ jsx("stop", { offset: "0.826923", stopColor: "#BCC4CD" })
             ]
           }
         ) })
@@ -11138,7 +11142,7 @@ const BadgeCertificationPlatinum = ({
           {
             d: "M26.8122 52.8121C24.5706 52.8121 22.2424 52.5414 20.0875 51.9133C17.9325 51.2853 15.7884 50.4839 13.8176 49.3144C11.8467 48.1449 10.0491 46.8021 8.43565 45.1886C6.82216 43.5751 5.47939 41.7884 4.30987 39.8067C3.14036 37.8359 2.33903 35.7784 1.71096 33.5368C1.08288 31.3819 0.812164 29.0537 0.812164 26.8121C0.812164 24.5706 1.08288 22.2424 1.71096 20.0874C2.33903 17.9325 3.14036 15.7884 4.30987 13.8175C5.47939 11.8467 6.82216 10.0491 8.43565 8.43562C10.0491 6.82213 11.8359 5.47936 13.8176 4.30984C15.7884 3.14033 17.8459 2.339 20.0875 1.71093C22.2424 1.08285 24.5706 0.812134 26.8122 0.812134C29.0537 0.812134 31.3819 1.08285 33.5369 1.71093C35.6918 2.339 37.8359 3.14033 39.8067 4.30984C41.7776 5.47936 43.5752 6.82213 45.1887 8.43562C46.8022 10.0491 48.1449 11.8359 49.3145 13.8175C50.484 15.7884 51.2853 17.8459 51.9134 20.0874C52.5414 22.2424 52.8122 24.5706 52.8122 26.8121C52.8122 29.0537 52.5414 31.3819 51.9134 33.5368C51.2853 35.6918 50.484 37.8359 49.3145 39.8067C48.1449 41.7776 46.8022 43.5751 45.1887 45.1886C43.5752 46.8021 41.7884 48.1449 39.8067 49.3144C37.8359 50.4839 35.7784 51.2853 33.5369 51.9133C31.3819 52.5414 29.0537 52.8121 26.8122 52.8121Z",
             fill: "url(#paint0_linear_9834_358)",
-            "fill-opacity": "0.8"
+            fillOpacity: "0.8"
           }
         ),
         /* @__PURE__ */ jsx(
@@ -11241,10 +11245,10 @@ const BadgeCertificationPlatinum = ({
             y2: "0.822974",
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ jsx("stop", { offset: "0.173077", "stop-color": "#B4B3BC" }),
-              /* @__PURE__ */ jsx("stop", { offset: "0.365337", "stop-color": "#E2E1E5" }),
-              /* @__PURE__ */ jsx("stop", { offset: "0.542584", "stop-color": "#E2E1E5" }),
-              /* @__PURE__ */ jsx("stop", { offset: "0.826923", "stop-color": "#C6C5CC" })
+              /* @__PURE__ */ jsx("stop", { offset: "0.173077", stopColor: "#B4B3BC" }),
+              /* @__PURE__ */ jsx("stop", { offset: "0.365337", stopColor: "#E2E1E5" }),
+              /* @__PURE__ */ jsx("stop", { offset: "0.542584", stopColor: "#E2E1E5" }),
+              /* @__PURE__ */ jsx("stop", { offset: "0.826923", stopColor: "#C6C5CC" })
             ]
           }
         ) })
@@ -13404,7 +13408,7 @@ function AlphaIcon({
               y2: "-2.36962",
               gradientUnits: "userSpaceOnUse",
               children: [
-                /* @__PURE__ */ jsx("stop", { "stop-color": "#8AEFDB" }),
+                /* @__PURE__ */ jsx("stop", { stopColor: "#8AEFDB" }),
                 /* @__PURE__ */ jsx("stop", { offset: "0.5", stopColor: "#D4BACE" }),
                 /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#CBE0F1" })
               ]
@@ -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.23.0",
+  "version": "1.25.0",
   "description": "A comprehensive React component library built with Radix UI, Tailwind CSS, and TypeScript",
   "private": false,
   "type": "module",