@lolmath/ui 2.1.0 → 2.3.0

package/dist/index.cjs

@@ -25,8 +25,12 @@ __export(src_exports, {
   AccordionItem: () => AccordionItem,
   AccordionTrigger: () => AccordionTrigger,
   Button: () => Button,
+  DialogButtons: () => DialogButtons,
+  DialogTrigger: () => DialogTrigger,
+  Heading: () => Heading,
   Item: () => Item,
   Label: () => Label3,
+  Modal: () => Modal,
   NumberField: () => NumberField,
   ProgressBar: () => ProgressBar,
   Radio: () => Radio,
@@ -49,7 +53,7 @@ var import_tailwind_merge = require("tailwind-merge");
 // src/utilities/border.tsx
 var borderClassName = "from-[#785b28] via-[#c89c3c] to-[#c8aa6e] bg-gradient-to-t";
 var borderHoverClassName = "from-[#c89c3c] via-[#dcc188] to-[#f0e6d8]";
-var borderPressedClassName = "from-[#694f27] via-[#694f27] to-[#463817]";
+var borderPressedClassName = "from-lol-gold-600 via-lol-gold-600 to-lol-gold-700";
 var borderDisabledClassName = "from-[#5c5b57] via-[#5c5b57] to-[#5c5b57]";
 
 // src/components/button.tsx
@@ -482,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
         }
       )
@@ -511,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",
     {
@@ -521,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)(
@@ -551,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");
@@ -743,6 +777,81 @@ function Spinner({ className }) {
     }
   );
 }
+
+// src/components/modal.tsx
+var import_react_aria_components11 = require("react-aria-components");
+var import_tailwind_merge13 = require("tailwind-merge");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function Modal({
+  modalOverlayClassName,
+  dialogProps = {},
+  children,
+  className,
+  ...modalProps
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_react_aria_components11.ModalOverlay,
+    {
+      ...modalProps,
+      className: (values) => {
+        return (0, import_tailwind_merge13.twMerge)(
+          "fixed inset-0 z-10 overflow-y-auto bg-black bg-opacity-25 flex min-h-full items-center justify-center text-center backdrop-blur flex-col px-4",
+          resolveClassname(modalOverlayClassName, values)
+        );
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        import_react_aria_components11.Modal,
+        {
+          ...modalProps,
+          className: (values) => (0, import_tailwind_merge13.twMerge)("w-full max-w-md", resolveClassname(className, values)),
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            import_react_aria_components11.Dialog,
+            {
+              role: "alertdialog",
+              ...dialogProps,
+              className: (0, import_tailwind_merge13.twMerge)(
+                "outline-none relative max-h-screen py-4",
+                dialogProps.className
+              ),
+              children: (dialogRenderProps) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "relative h-1", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "border-lol-gold-700 border bg-black absolute border-b-0 rounded-full h-full left-5 right-5" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  "div",
+                  {
+                    className: (0, import_tailwind_merge13.twMerge)(
+                      "text-left align-middle shadow-xl p-0.5 bg-gradient-to-t",
+                      borderPressedClassName
+                    ),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "bg-black", children: typeof children === "function" ? children(dialogRenderProps) : children })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "relative h-1", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "border-lol-gold-600 border bg-black absolute border-t-0 rounded-full h-full left-5 right-5" }) })
+              ] })
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function Heading(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_react_aria_components11.Heading,
+    {
+      ...props,
+      className: (0, import_tailwind_merge13.twMerge)(
+        "text-lol-gold-100 uppercase font-beaufort font-bold text-lg",
+        props.className
+      )
+    }
+  );
+}
+function DialogButtons({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex justify-center translate-y-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex gap-1 bg-black px-1", children }) });
+}
+function DialogTrigger(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_aria_components11.DialogTrigger, { ...props });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -750,8 +859,12 @@ function Spinner({ className }) {
   AccordionItem,
   AccordionTrigger,
   Button,
+  DialogButtons,
+  DialogTrigger,
+  Heading,
   Item,
   Label,
+  Modal,
   NumberField,
   ProgressBar,
   Radio,