@lolmath/ui 2.1.0 → 2.3.0

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode, ComponentProps } from 'react';
-import { ButtonProps as ButtonProps$1, ItemProps, SelectProps as SelectProps$1, SearchFieldProps, Input, SliderProps, SliderTrackProps, SliderThumbProps, SliderTrackRenderProps, SwitchProps, ProgressBarProps as ProgressBarProps$1, TextFieldProps, RadioGroupProps, RadioProps, LabelProps, NumberFieldProps, Group } from 'react-aria-components';
+import { ButtonProps as ButtonProps$1, ItemProps, SelectProps as SelectProps$1, SearchFieldProps, Input, SliderProps, SliderTrackProps, SliderThumbProps, SliderTrackRenderProps, SwitchProps, ProgressBarProps as ProgressBarProps$1, TextFieldProps, RadioGroupProps, RadioProps, LabelProps, NumberFieldProps, Group, HeadingProps, DialogTriggerProps, ModalOverlayProps, DialogProps } from 'react-aria-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface ButtonProps extends ButtonProps$1 {
@@ -80,4 +80,16 @@ interface SpinnerProps {
 }
 declare function Spinner({ className }: SpinnerProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, Item, Label, NumberField, ProgressBar, Radio, RadioGroup, SearchField, Select, Slider, SliderLabel, Spinner, Switch, TextField };
+interface ModalProps extends Omit<ModalOverlayProps, "children"> {
+    modalOverlayClassName?: ModalOverlayProps["className"];
+    dialogProps?: Omit<DialogProps, "children">;
+    children?: DialogProps["children"];
+}
+declare function Modal({ modalOverlayClassName, dialogProps, children, className, ...modalProps }: ModalProps): react_jsx_runtime.JSX.Element;
+declare function Heading(props: HeadingProps): react_jsx_runtime.JSX.Element;
+declare function DialogButtons({ children }: {
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function DialogTrigger(props: DialogTriggerProps): react_jsx_runtime.JSX.Element;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, DialogButtons, DialogTrigger, Heading, Item, Label, Modal, NumberField, ProgressBar, Radio, RadioGroup, SearchField, Select, Slider, SliderLabel, Spinner, Switch, TextField };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode, ComponentProps } from 'react';
-import { ButtonProps as ButtonProps$1, ItemProps, SelectProps as SelectProps$1, SearchFieldProps, Input, SliderProps, SliderTrackProps, SliderThumbProps, SliderTrackRenderProps, SwitchProps, ProgressBarProps as ProgressBarProps$1, TextFieldProps, RadioGroupProps, RadioProps, LabelProps, NumberFieldProps, Group } from 'react-aria-components';
+import { ButtonProps as ButtonProps$1, ItemProps, SelectProps as SelectProps$1, SearchFieldProps, Input, SliderProps, SliderTrackProps, SliderThumbProps, SliderTrackRenderProps, SwitchProps, ProgressBarProps as ProgressBarProps$1, TextFieldProps, RadioGroupProps, RadioProps, LabelProps, NumberFieldProps, Group, HeadingProps, DialogTriggerProps, ModalOverlayProps, DialogProps } from 'react-aria-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface ButtonProps extends ButtonProps$1 {
@@ -80,4 +80,16 @@ interface SpinnerProps {
 }
 declare function Spinner({ className }: SpinnerProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, Item, Label, NumberField, ProgressBar, Radio, RadioGroup, SearchField, Select, Slider, SliderLabel, Spinner, Switch, TextField };
+interface ModalProps extends Omit<ModalOverlayProps, "children"> {
+    modalOverlayClassName?: ModalOverlayProps["className"];
+    dialogProps?: Omit<DialogProps, "children">;
+    children?: DialogProps["children"];
+}
+declare function Modal({ modalOverlayClassName, dialogProps, children, className, ...modalProps }: ModalProps): react_jsx_runtime.JSX.Element;
+declare function Heading(props: HeadingProps): react_jsx_runtime.JSX.Element;
+declare function DialogButtons({ children }: {
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function DialogTrigger(props: DialogTriggerProps): react_jsx_runtime.JSX.Element;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, DialogButtons, DialogTrigger, Heading, Item, Label, Modal, NumberField, ProgressBar, Radio, RadioGroup, SearchField, Select, Slider, SliderLabel, Spinner, Switch, TextField };

package/dist/index.js

@@ -8,7 +8,7 @@ import { twMerge } from "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
@@ -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(
@@ -736,14 +766,99 @@ function Spinner({ className }) {
     }
   );
 }
+
+// src/components/modal.tsx
+import {
+  Modal as AriaModal,
+  Dialog,
+  DialogTrigger as AriaDialogTrigger,
+  Heading as AriaHeading,
+  ModalOverlay
+} from "react-aria-components";
+import { twMerge as twMerge13 } from "tailwind-merge";
+import { Fragment as Fragment5, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+function Modal({
+  modalOverlayClassName,
+  dialogProps = {},
+  children,
+  className,
+  ...modalProps
+}) {
+  return /* @__PURE__ */ jsx13(
+    ModalOverlay,
+    {
+      ...modalProps,
+      className: (values) => {
+        return twMerge13(
+          "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__ */ jsx13(
+        AriaModal,
+        {
+          ...modalProps,
+          className: (values) => twMerge13("w-full max-w-md", resolveClassname(className, values)),
+          children: /* @__PURE__ */ jsx13(
+            Dialog,
+            {
+              role: "alertdialog",
+              ...dialogProps,
+              className: twMerge13(
+                "outline-none relative max-h-screen py-4",
+                dialogProps.className
+              ),
+              children: (dialogRenderProps) => /* @__PURE__ */ jsxs8(Fragment5, { children: [
+                /* @__PURE__ */ jsx13("div", { className: "relative h-1", children: /* @__PURE__ */ jsx13("div", { className: "border-lol-gold-700 border bg-black absolute border-b-0 rounded-full h-full left-5 right-5" }) }),
+                /* @__PURE__ */ jsx13(
+                  "div",
+                  {
+                    className: twMerge13(
+                      "text-left align-middle shadow-xl p-0.5 bg-gradient-to-t",
+                      borderPressedClassName
+                    ),
+                    children: /* @__PURE__ */ jsx13("div", { className: "bg-black", children: typeof children === "function" ? children(dialogRenderProps) : children })
+                  }
+                ),
+                /* @__PURE__ */ jsx13("div", { className: "relative h-1", children: /* @__PURE__ */ jsx13("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__ */ jsx13(
+    AriaHeading,
+    {
+      ...props,
+      className: twMerge13(
+        "text-lol-gold-100 uppercase font-beaufort font-bold text-lg",
+        props.className
+      )
+    }
+  );
+}
+function DialogButtons({ children }) {
+  return /* @__PURE__ */ jsx13("div", { className: "flex justify-center translate-y-0.5", children: /* @__PURE__ */ jsx13("div", { className: "flex gap-1 bg-black px-1", children }) });
+}
+function DialogTrigger(props) {
+  return /* @__PURE__ */ jsx13(AriaDialogTrigger, { ...props });
+}
 export {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
   Button,
+  DialogButtons,
+  DialogTrigger,
+  Heading,
   Item,
   Label3 as Label,
+  Modal,
   NumberField,
   ProgressBar,
   Radio,