@lolmath/ui 2.2.0 → 2.3.0

package/dist/index.cjs

@@ -486,25 +486,50 @@ function ProgressBar({
 }
 
 // src/components/accordion.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_tailwind_merge7 = require("tailwind-merge");
+
+// src/utilities/css-id.tsx
+var import_react2 = require("react");
+function useCssId() {
+  return (0, import_react2.useId)().replaceAll(":", "");
+}
+
+// src/utilities/view-transition.tsx
+var import_react_dom = require("react-dom");
+function startViewTransition(callback) {
+  if (document.startViewTransition) {
+    document.startViewTransition(() => {
+      (0, import_react_dom.flushSync)(callback);
+    });
+  } else {
+    callback();
+  }
+}
+
+// src/components/accordion.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function Accordion({ children, className }) {
-  const [activeItem, setActiveItem] = (0, import_react2.useState)("");
+  const [activeItem, setActiveItem] = (0, import_react3.useState)("");
+  const id = useCssId();
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     AccordionContext.Provider,
     {
       value: {
         activeItem,
-        setActiveItem
+        setActiveItem,
+        id
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "div",
         {
           className: (0, import_tailwind_merge7.twMerge)(
-            "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
         }
       )
@@ -515,8 +540,8 @@ function AccordionTrigger({
   children,
   className
 }) {
-  const { setActiveItem, activeItem } = (0, import_react2.useContext)(AccordionContext);
-  const { item } = (0, import_react2.useContext)(AccordionItemContext);
+  const { setActiveItem, activeItem, id } = (0, import_react3.useContext)(AccordionContext);
+  const { item } = (0, import_react3.useContext)(AccordionItemContext);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "button",
     {
@@ -525,7 +550,12 @@ function AccordionTrigger({
         className
       ),
       onClick: () => {
-        setActiveItem((currentItem) => currentItem === item ? "" : item);
+        startViewTransition(() => {
+          setActiveItem((currentItem) => currentItem === item ? "" : item);
+        });
+      },
+      style: {
+        viewTransitionName: `${id}-${item}`
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -555,15 +585,15 @@ function AccordionItem({ children, value }) {
   );
 }
 function AccordionContent({ children }) {
-  const { activeItem } = (0, import_react2.useContext)(AccordionContext);
-  const { item } = (0, import_react2.useContext)(AccordionItemContext);
+  const { activeItem } = (0, import_react3.useContext)(AccordionContext);
+  const { item } = (0, import_react3.useContext)(AccordionItemContext);
   if (activeItem !== item) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "bg-lol-blue-900 border-lol-gold-500 font-spiegel text-lol-blue-100 border-t px-5 py-2", children });
 }
-var AccordionContext = (0, import_react2.createContext)(void 0);
-var AccordionItemContext = (0, import_react2.createContext)(void 0);
+var AccordionContext = (0, import_react3.createContext)(void 0);
+var AccordionItemContext = (0, import_react3.createContext)(void 0);
 
 // src/components/text-field.tsx
 var import_react_aria_components7 = require("react-aria-components");