@lolmath/ui 2.2.0 → 2.3.0

package/dist/index.js

@@ -464,23 +464,48 @@ function ProgressBar({
 // src/components/accordion.tsx
 import { createContext, useState, useContext } from "react";
 import { twMerge as twMerge7 } from "tailwind-merge";
+
+// src/utilities/css-id.tsx
+import { useId } from "react";
+function useCssId() {
+  return useId().replaceAll(":", "");
+}
+
+// src/utilities/view-transition.tsx
+import { flushSync } from "react-dom";
+function startViewTransition(callback) {
+  if (document.startViewTransition) {
+    document.startViewTransition(() => {
+      flushSync(callback);
+    });
+  } else {
+    callback();
+  }
+}
+
+// src/components/accordion.tsx
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function Accordion({ children, className }) {
   const [activeItem, setActiveItem] = useState("");
+  const id = useCssId();
   return /* @__PURE__ */ jsx7(
     AccordionContext.Provider,
     {
       value: {
         activeItem,
-        setActiveItem
+        setActiveItem,
+        id
       },
       children: /* @__PURE__ */ jsx7(
         "div",
         {
           className: twMerge7(
-            "bg-lol-blue-950 border-lol-gold-500 overflow-hidden rounded border",
+            "bg-lol-blue-950 border-lol-gold-500 rounded border",
             className
           ),
+          style: {
+            viewTransitionName: `${id}`
+          },
           children
         }
       )
@@ -491,7 +516,7 @@ function AccordionTrigger({
   children,
   className
 }) {
-  const { setActiveItem, activeItem } = useContext(AccordionContext);
+  const { setActiveItem, activeItem, id } = useContext(AccordionContext);
   const { item } = useContext(AccordionItemContext);
   return /* @__PURE__ */ jsxs6(
     "button",
@@ -501,7 +526,12 @@ function AccordionTrigger({
         className
       ),
       onClick: () => {
-        setActiveItem((currentItem) => currentItem === item ? "" : item);
+        startViewTransition(() => {
+          setActiveItem((currentItem) => currentItem === item ? "" : item);
+        });
+      },
+      style: {
+        viewTransitionName: `${id}-${item}`
       },
       children: [
         /* @__PURE__ */ jsx7(