@lolmath/ui 3.2.5 → 4.0.0

package/dist/es/components/divider.d.ts

@@ -1,24 +1,5 @@
-declare const divider: import("tailwind-variants").TVReturnType<{
-    preset: {
-        left: string;
-        right: string;
-        center: string;
-    };
-}, undefined, "h-px grow border-0 bg-gradient-to-r", any, {
-    preset: {
-        left: string;
-        right: string;
-        center: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    preset: {
-        left: string;
-        right: string;
-        center: string;
-    };
-}, undefined, "h-px grow border-0 bg-gradient-to-r", TVConfig<V, EV>, unknown, unknown, undefined>>;
 interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
-    preset?: keyof typeof divider.variants.preset;
+    preset?: "left" | "center" | "right";
     hrProps?: React.HTMLAttributes<HTMLHRElement>;
 }
 export declare function Divider({ preset, hrProps, ...rest }: DividerProps): import("react/jsx-runtime").JSX.Element;

package/dist/es/components/divider.js

@@ -1,18 +1,19 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { tv } from "../utilities/tv.js";
-const divider = tv({
-  base: "h-px grow border-0 bg-gradient-to-r",
+import { cva } from "cva";
+import classes from "./divider.module";
+const divider = cva({
+  base: classes.divider,
   variants: {
     preset: {
-      left: "to-lol-gold-600 from-transparent",
-      right: "from-lol-gold-600 to-transparent",
-      center: "via-lol-gold-600 from-transparent to-transparent"
+      left: classes.left,
+      center: classes.center,
+      right: classes.right
     }
   }
 });
 function Divider({ preset = "center", hrProps, ...rest }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center", ...rest, children: [
-    preset === "right" && /* @__PURE__ */ jsx("div", { className: "border-lol-gold-600 h-[5px] w-[5px] rotate-45 border" }),
+  return /* @__PURE__ */ jsxs("div", { className: classes.wrapper, ...rest, children: [
+    preset === "right" && /* @__PURE__ */ jsx("div", { className: classes.block }),
     /* @__PURE__ */ jsx(
       "hr",
       {
@@ -20,7 +21,7 @@ function Divider({ preset = "center", hrProps, ...rest }) {
         className: divider({ preset, className: hrProps?.className })
       }
     ),
-    preset === "left" && /* @__PURE__ */ jsx("div", { className: "border-lol-gold-600 h-[5px] w-[5px] rotate-45 border" })
+    preset === "left" && /* @__PURE__ */ jsx("div", { className: classes.block })
   ] });
 }
 export {

package/dist/es/components/divider.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAmBE,SAEE,KAFF;AAnBF,SAAS,UAAU;AAEnB,MAAM,UAAU,GAAG;AAAA,EAClB,MAAM;AAAA,EACN,UAAU;AAAA,IACT,QAAQ;AAAA,MACP,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,IACT;AAAA,EACD;AACD,CAAC;AAMM,SAAS,QAAQ,EAAE,SAAS,UAAU,SAAS,GAAG,KAAK,GAAiB;AAC9E,SACC,qBAAC,SAAI,WAAU,qBAAqB,GAAG,MACrC;AAAA,eAAW,WACX,oBAAC,SAAI,WAAU,wDAAuD;AAAA,IAEvE;AAAA,MAAC;AAAA;AAAA,QACC,GAAG;AAAA,QACJ,WAAW,QAAQ,EAAE,QAAQ,WAAW,SAAS,UAAU,CAAC;AAAA;AAAA,IAC7D;AAAA,IACC,WAAW,UACX,oBAAC,SAAI,WAAU,wDAAuD;AAAA,KAExE;AAEF","names":[],"ignoreList":[],"sources":["../../../src/components/divider.tsx"],"sourcesContent":["import { tv } from \"../utilities/tv.js\";\n\nconst divider = tv({\n\tbase: \"h-px grow border-0 bg-gradient-to-r\",\n\tvariants: {\n\t\tpreset: {\n\t\t\tleft: \"to-lol-gold-600 from-transparent\",\n\t\t\tright: \"from-lol-gold-600 to-transparent\",\n\t\t\tcenter: \"via-lol-gold-600 from-transparent to-transparent\",\n\t\t},\n\t},\n});\n\ninterface DividerProps extends React.HTMLAttributes<HTMLDivElement> {\n\tpreset?: keyof typeof divider.variants.preset;\n\thrProps?: React.HTMLAttributes<HTMLHRElement>;\n}\nexport function Divider({ preset = \"center\", hrProps, ...rest }: DividerProps) {\n\treturn (\n\t\t<div className=\"flex items-center\" {...rest}>\n\t\t\t{preset === \"right\" && (\n\t\t\t\t<div className=\"border-lol-gold-600 h-[5px] w-[5px] rotate-45 border\" />\n\t\t\t)}\n\t\t\t<hr\n\t\t\t\t{...hrProps}\n\t\t\t\tclassName={divider({ preset, className: hrProps?.className })}\n\t\t\t/>\n\t\t\t{preset === \"left\" && (\n\t\t\t\t<div className=\"border-lol-gold-600 h-[5px] w-[5px] rotate-45 border\" />\n\t\t\t)}\n\t\t</div>\n\t);\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}
+{"version":3,"mappings":"AAoBE,SAEE,KAFF;AApBF,SAAS,WAAW;AACpB,OAAO,aAAa;AAEpB,MAAM,UAAU,IAAI;AAAA,EACnB,MAAM,QAAQ;AAAA,EACd,UAAU;AAAA,IACT,QAAQ;AAAA,MACP,MAAM,QAAQ;AAAA,MACd,QAAQ,QAAQ;AAAA,MAChB,OAAO,QAAQ;AAAA,IAChB;AAAA,EACD;AACD,CAAC;AAMM,SAAS,QAAQ,EAAE,SAAS,UAAU,SAAS,GAAG,KAAK,GAAiB;AAC9E,SACC,qBAAC,SAAI,WAAW,QAAQ,SAAU,GAAG,MACnC;AAAA,eAAW,WACX,oBAAC,SAAI,WAAW,QAAQ,OAAO;AAAA,IAEhC;AAAA,MAAC;AAAA;AAAA,QACC,GAAG;AAAA,QACJ,WAAW,QAAQ,EAAE,QAAQ,WAAW,SAAS,UAAU,CAAC;AAAA;AAAA,IAC7D;AAAA,IACC,WAAW,UACX,oBAAC,SAAI,WAAW,QAAQ,OAAO;AAAA,KAEjC;AAEF","names":[],"ignoreList":[],"sources":["../../../src/components/divider.tsx"],"sourcesContent":["import { cva } from \"cva\";\nimport classes from \"./divider.module\";\n\nconst divider = cva({\n\tbase: classes.divider,\n\tvariants: {\n\t\tpreset: {\n\t\t\tleft: classes.left,\n\t\t\tcenter: classes.center,\n\t\t\tright: classes.right,\n\t\t},\n\t},\n});\n\ninterface DividerProps extends React.HTMLAttributes<HTMLDivElement> {\n\tpreset?: \"left\" | \"center\" | \"right\";\n\thrProps?: React.HTMLAttributes<HTMLHRElement>;\n}\nexport function Divider({ preset = \"center\", hrProps, ...rest }: DividerProps) {\n\treturn (\n\t\t<div className={classes.wrapper} {...rest}>\n\t\t\t{preset === \"right\" && (\n\t\t\t\t<div className={classes.block} />\n\t\t\t)}\n\t\t\t<hr\n\t\t\t\t{...hrProps}\n\t\t\t\tclassName={divider({ preset, className: hrProps?.className })}\n\t\t\t/>\n\t\t\t{preset === \"left\" && (\n\t\t\t\t<div className={classes.block} />\n\t\t\t)}\n\t\t</div>\n\t);\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

package/dist/es/components/divider.module.js

@@ -0,0 +1,7 @@
+import "./divider_module.css";
+var divider_default = { "divider": "divider_1f6a1", "left": "left_1f6a1", "center": "center_1f6a1", "right": "right_1f6a1", "block": "block_1f6a1", "wrapper": "wrapper_1f6a1" };
+export {
+  divider_default as default
+};
+
+//# sourceMappingURL=divider.module.js.map

package/dist/es/components/divider.module.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,OAAO;AAAuB,IAAO,kBAAQ,EAAC,WAAU,iBAAgB,QAAO,cAAa,UAAS,gBAAe,SAAQ,eAAc,SAAQ,eAAc,WAAU,gBAAe","names":[],"ignoreList":[],"sources":["../../../src/components/divider.module.css"],"sourcesContent":["import \"./divider_module.css\";export default {\"divider\":\"divider_1f6a1\",\"left\":\"left_1f6a1\",\"center\":\"center_1f6a1\",\"right\":\"right_1f6a1\",\"block\":\"block_1f6a1\",\"wrapper\":\"wrapper_1f6a1\"}//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

package/dist/es/components/divider_module.css

@@ -0,0 +1,29 @@
+.divider_1f6a1 {
+	height: 1px;
+	flex-grow: 1;
+	border: none;
+}
+
+.left_1f6a1 {
+	background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--lol-color-gold-600));
+}
+
+.center_1f6a1 {
+	background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--lol-color-gold-600), rgba(0, 0, 0, 0));
+}
+
+.right_1f6a1 {
+	background-image: linear-gradient(to right, var(--lol-color-gold-600), rgba(0, 0, 0, 0));
+}
+
+.block_1f6a1 {
+	width: 5px;
+	height: 5px;
+	border: 1px solid var(--lol-color-gold-600);
+	rotate: 45deg;
+}
+
+.wrapper_1f6a1 {
+	display: flex;
+	align-items: center;
+}

package/dist/es/components/modal.js

@@ -1,4 +1,5 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "cva";
 import {
   DialogTrigger as AriaDialogTrigger,
   Heading as AriaHeading,
@@ -6,23 +7,16 @@ import {
   Dialog,
   ModalOverlay
 } from "react-aria-components";
-import { goldGradientPressed } from "../utilities/gradient.js";
 import { resolveClassName } from "../utilities/resolve-class-name.js";
-import { tv } from "../utilities/tv.js";
-const modalOverlay = tv({
-  base: "bg-lol-grey-hextech-black fixed inset-0 z-10 flex min-h-full flex-col items-center justify-center overflow-y-auto bg-opacity-25 px-4 text-center backdrop-blur"
+import classes from "./modal.module";
+const overlay = cva({
+  base: classes.overlay
 });
-const modal = tv({
-  base: "w-full max-w-md"
+const modal = cva({
+  base: classes.modal
 });
-const dialog = tv({
-  base: "relative max-h-screen py-4 outline-none"
-});
-const dialogBorder = tv({
-  base: [
-    "bg-gradient-to-b p-0.5 text-left align-middle shadow-xl",
-    goldGradientPressed
-  ]
+const dialog = cva({
+  base: classes.dialog
 });
 function Modal({
   modalOverlayClassName,
@@ -36,7 +30,7 @@ function Modal({
     {
       ...modalProps,
       className: (values) => {
-        return modalOverlay({
+        return overlay({
           className: resolveClassName(modalOverlayClassName, values)
         });
       },
@@ -50,16 +44,11 @@ function Modal({
           children: /* @__PURE__ */ jsx(
             Dialog,
             {
-              role: "alertdialog",
               ...dialogProps,
               className: dialog({
                 className: dialogProps.className
               }),
-              children: (dialogRenderProps) => /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx("div", { className: "relative h-1", children: /* @__PURE__ */ jsx("div", { className: "border-lol-gold-600 bg-lol-grey-hextech-black absolute left-5 right-5 h-full rounded-full border border-b-0" }) }),
-                /* @__PURE__ */ jsx("div", { className: dialogBorder(), children: /* @__PURE__ */ jsx("div", { className: "bg-lol-grey-hextech-black", children: typeof children === "function" ? children(dialogRenderProps) : children }) }),
-                /* @__PURE__ */ jsx("div", { className: "relative h-1", children: /* @__PURE__ */ jsx("div", { className: "border-lol-gold-500 bg-lol-grey-hextech-black absolute left-5 right-5 h-full rounded-full border border-t-0" }) })
-              ] })
+              children
             }
           )
         }
@@ -67,8 +56,8 @@ function Modal({
     }
   );
 }
-const dialogHeading = tv({
-  base: "text-lol-gold-100 font-beaufort text-lol-h5 uppercase"
+const dialogHeading = cva({
+  base: classes.dialogHeading
 });
 function DialogHeading({ className, ...props }) {
   return /* @__PURE__ */ jsx(
@@ -82,7 +71,7 @@ function DialogHeading({ className, ...props }) {
   );
 }
 function DialogButtons({ children }) {
-  return /* @__PURE__ */ jsx("div", { className: "flex translate-y-0.5 justify-center", children: /* @__PURE__ */ jsx("div", { className: "bg-lol-grey-hextech-black flex gap-1 px-1", children }) });
+  return /* @__PURE__ */ jsx("div", { className: classes.dialogButtons, children });
 }
 function DialogTrigger(props) {
   return /* @__PURE__ */ jsx(AriaDialogTrigger, { ...props });

package/dist/es/components/modal.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAuEM,mBAEE,KAFF;AAvEN;AAAA,EACC,iBAAiB;AAAA,EAEjB,WAAW;AAAA,EAEX,SAAS;AAAA,EACT;AAAA,EAEA;AAAA,OAEM;AACP,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AACjC,SAAS,UAAU;AAEnB,MAAM,eAAe,GAAG;AAAA,EACvB,MAAM;AACP,CAAC;AAED,MAAM,QAAQ,GAAG;AAAA,EAChB,MAAM;AACP,CAAC;AAED,MAAM,SAAS,GAAG;AAAA,EACjB,MAAM;AACP,CAAC;AACD,MAAM,eAAe,GAAG;AAAA,EACvB,MAAM;AAAA,IACL;AAAA,IACA;AAAA,EACD;AACD,CAAC;AAQM,SAAS,MAAM;AAAA,EACrB;AAAA,EACA,cAAc,CAAC;AAAA,EACf;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAe;AACd,SACC;AAAA,IAAC;AAAA;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,CAAC,WAAW;AACtB,eAAO,aAAa;AAAA,UACnB,WAAW,iBAAiB,uBAAuB,MAAM;AAAA,QAC1D,CAAC;AAAA,MACF;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,GAAG;AAAA,UACJ,WAAW,CAAC,WACX,MAAM;AAAA,YACL,WAAW,iBAAiB,WAAW,MAAM;AAAA,UAC9C,CAAC;AAAA,UAGF;AAAA,YAAC;AAAA;AAAA,cACA,MAAK;AAAA,cACJ,GAAG;AAAA,cACJ,WAAW,OAAO;AAAA,gBACjB,WAAW,YAAY;AAAA,cACxB,CAAC;AAAA,cAEA,WAAC,sBACD,iCACC;AAAA,oCAAC,SAAI,WAAU,gBACd,8BAAC,SAAI,WAAU,+GAA8G,GAC9H;AAAA,gBACA,oBAAC,SAAI,WAAW,aAAa,GAC5B,8BAAC,SAAI,WAAU,6BACb,iBAAO,aAAa,aAClB,SAAS,iBAAiB,IAC1B,UACJ,GACD;AAAA,gBACA,oBAAC,SAAI,WAAU,gBACd,8BAAC,SAAI,WAAU,+GAA8G,GAC9H;AAAA,iBACD;AAAA;AAAA,UAEF;AAAA;AAAA,MACD;AAAA;AAAA,EACD;AAEF;AAEA,MAAM,gBAAgB,GAAG;AAAA,EACxB,MAAM;AACP,CAAC;AAEM,SAAS,cAAc,EAAE,WAAW,GAAG,MAAM,GAAqB;AACxE,SACC;AAAA,IAAC;AAAA;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,cAAc;AAAA,QACxB;AAAA,MACD,CAAC;AAAA;AAAA,EACF;AAEF;AAEO,SAAS,cAAc,EAAE,SAAS,GAAkC;AAC1E,SACC,oBAAC,SAAI,WAAU,uCACd,8BAAC,SAAI,WAAU,6CACb,UACF,GACD;AAEF;AAEO,SAAS,cAAc,OAA+B;AAC5D,SAAO,oBAAC,qBAAmB,GAAG,OAAO;AACtC","names":[],"ignoreList":[],"sources":["../../../src/components/modal.tsx"],"sourcesContent":["import {\n\tDialogTrigger as AriaDialogTrigger,\n\ttype DialogTriggerProps as AriaDialogTriggerProps,\n\tHeading as AriaHeading,\n\ttype HeadingProps as AriaHeadingProps,\n\tModal as AriaModal,\n\tDialog,\n\ttype DialogProps,\n\tModalOverlay,\n\ttype ModalOverlayProps,\n} from \"react-aria-components\";\nimport { goldGradientPressed } from \"../utilities/gradient.js\";\nimport { resolveClassName } from \"../utilities/resolve-class-name.js\";\nimport { tv } from \"../utilities/tv.js\";\n\nconst modalOverlay = tv({\n\tbase: \"bg-lol-grey-hextech-black fixed inset-0 z-10 flex min-h-full flex-col items-center justify-center overflow-y-auto bg-opacity-25 px-4 text-center backdrop-blur\",\n});\n\nconst modal = tv({\n\tbase: \"w-full max-w-md\",\n});\n\nconst dialog = tv({\n\tbase: \"relative max-h-screen py-4 outline-none\",\n});\nconst dialogBorder = tv({\n\tbase: [\n\t\t\"bg-gradient-to-b p-0.5 text-left align-middle shadow-xl\",\n\t\tgoldGradientPressed,\n\t],\n});\n\ninterface ModalProps extends Omit<ModalOverlayProps, \"children\"> {\n\tmodalOverlayClassName?: ModalOverlayProps[\"className\"];\n\tdialogProps?: Omit<DialogProps, \"children\">;\n\tchildren?: DialogProps[\"children\"];\n}\n\nexport function Modal({\n\tmodalOverlayClassName,\n\tdialogProps = {},\n\tchildren,\n\tclassName,\n\t...modalProps\n}: ModalProps) {\n\treturn (\n\t\t<ModalOverlay\n\t\t\t{...modalProps}\n\t\t\tclassName={(values) => {\n\t\t\t\treturn modalOverlay({\n\t\t\t\t\tclassName: resolveClassName(modalOverlayClassName, values),\n\t\t\t\t});\n\t\t\t}}\n\t\t>\n\t\t\t<AriaModal\n\t\t\t\t{...modalProps}\n\t\t\t\tclassName={(values) =>\n\t\t\t\t\tmodal({\n\t\t\t\t\t\tclassName: resolveClassName(className, values),\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<Dialog\n\t\t\t\t\trole=\"alertdialog\"\n\t\t\t\t\t{...dialogProps}\n\t\t\t\t\tclassName={dialog({\n\t\t\t\t\t\tclassName: dialogProps.className,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{(dialogRenderProps) => (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<div className=\"relative h-1\">\n\t\t\t\t\t\t\t\t<div className=\"border-lol-gold-600 bg-lol-grey-hextech-black absolute left-5 right-5 h-full rounded-full border border-b-0\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className={dialogBorder()}>\n\t\t\t\t\t\t\t\t<div className=\"bg-lol-grey-hextech-black\">\n\t\t\t\t\t\t\t\t\t{typeof children === \"function\"\n\t\t\t\t\t\t\t\t\t\t? children(dialogRenderProps)\n\t\t\t\t\t\t\t\t\t\t: children}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"relative h-1\">\n\t\t\t\t\t\t\t\t<div className=\"border-lol-gold-500 bg-lol-grey-hextech-black absolute left-5 right-5 h-full rounded-full border border-t-0\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</Dialog>\n\t\t\t</AriaModal>\n\t\t</ModalOverlay>\n\t);\n}\n\nconst dialogHeading = tv({\n\tbase: \"text-lol-gold-100 font-beaufort text-lol-h5 uppercase\",\n});\n\nexport function DialogHeading({ className, ...props }: AriaHeadingProps) {\n\treturn (\n\t\t<AriaHeading\n\t\t\t{...props}\n\t\t\tclassName={dialogHeading({\n\t\t\t\tclassName,\n\t\t\t})}\n\t\t/>\n\t);\n}\n\nexport function DialogButtons({ children }: { children: React.ReactNode }) {\n\treturn (\n\t\t<div className=\"flex translate-y-0.5 justify-center\">\n\t\t\t<div className=\"bg-lol-grey-hextech-black flex gap-1 px-1\">\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport function DialogTrigger(props: AriaDialogTriggerProps) {\n\treturn <AriaDialogTrigger {...props} />;\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}
+{"version":3,"mappings":"AAyDI;AAzDJ,SAAS,WAAW;AACpB;AAAA,EACC,iBAAiB;AAAA,EAEjB,WAAW;AAAA,EAEX,SAAS;AAAA,EACT;AAAA,EAEA;AAAA,OAEM;AACP,SAAS,wBAAwB;AACjC,OAAO,aAAa;AAEpB,MAAM,UAAU,IAAI;AAAA,EACnB,MAAM,QAAQ;AACf,CAAC;AAED,MAAM,QAAQ,IAAI;AAAA,EACjB,MAAM,QAAQ;AACf,CAAC;AAED,MAAM,SAAS,IAAI;AAAA,EAClB,MAAM,QAAQ;AACf,CAAC;AAQM,SAAS,MAAM;AAAA,EACrB;AAAA,EACA,cAAc,CAAC;AAAA,EACf;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAe;AACd,SACC;AAAA,IAAC;AAAA;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,CAAC,WAAW;AACtB,eAAO,QAAQ;AAAA,UACd,WAAW,iBAAiB,uBAAuB,MAAM;AAAA,QAC1D,CAAC;AAAA,MACF;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,GAAG;AAAA,UACJ,WAAW,CAAC,WACX,MAAM;AAAA,YACL,WAAW,iBAAiB,WAAW,MAAM;AAAA,UAC9C,CAAC;AAAA,UAGF;AAAA,YAAC;AAAA;AAAA,cACC,GAAG;AAAA,cACJ,WAAW,OAAO;AAAA,gBACjB,WAAW,YAAY;AAAA,cACxB,CAAC;AAAA,cAEA;AAAA;AAAA,UACF;AAAA;AAAA,MACD;AAAA;AAAA,EACD;AAEF;AAEA,MAAM,gBAAgB,IAAI;AAAA,EACzB,MAAM,QAAQ;AACf,CAAC;AAEM,SAAS,cAAc,EAAE,WAAW,GAAG,MAAM,GAAqB;AACxE,SACC;AAAA,IAAC;AAAA;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,cAAc;AAAA,QACxB;AAAA,MACD,CAAC;AAAA;AAAA,EACF;AAEF;AAEO,SAAS,cAAc,EAAE,SAAS,GAAkC;AAC1E,SAAO,oBAAC,SAAI,WAAW,QAAQ,eAAgB,UAAS;AACzD;AAEO,SAAS,cAAc,OAA+B;AAC5D,SAAO,oBAAC,qBAAmB,GAAG,OAAO;AACtC","names":[],"ignoreList":[],"sources":["../../../src/components/modal.tsx"],"sourcesContent":["import { cva } from \"cva\";\nimport {\n\tDialogTrigger as AriaDialogTrigger,\n\ttype DialogTriggerProps as AriaDialogTriggerProps,\n\tHeading as AriaHeading,\n\ttype HeadingProps as AriaHeadingProps,\n\tModal as AriaModal,\n\tDialog,\n\ttype DialogProps,\n\tModalOverlay,\n\ttype ModalOverlayProps,\n} from \"react-aria-components\";\nimport { resolveClassName } from \"../utilities/resolve-class-name.js\";\nimport classes from \"./modal.module\";\n\nconst overlay = cva({\n\tbase: classes.overlay,\n});\n\nconst modal = cva({\n\tbase: classes.modal,\n});\n\nconst dialog = cva({\n\tbase: classes.dialog,\n});\n\ninterface ModalProps extends Omit<ModalOverlayProps, \"children\"> {\n\tmodalOverlayClassName?: ModalOverlayProps[\"className\"];\n\tdialogProps?: Omit<DialogProps, \"children\">;\n\tchildren?: DialogProps[\"children\"];\n}\n\nexport function Modal({\n\tmodalOverlayClassName,\n\tdialogProps = {},\n\tchildren,\n\tclassName,\n\t...modalProps\n}: ModalProps) {\n\treturn (\n\t\t<ModalOverlay\n\t\t\t{...modalProps}\n\t\t\tclassName={(values) => {\n\t\t\t\treturn overlay({\n\t\t\t\t\tclassName: resolveClassName(modalOverlayClassName, values),\n\t\t\t\t});\n\t\t\t}}\n\t\t>\n\t\t\t<AriaModal\n\t\t\t\t{...modalProps}\n\t\t\t\tclassName={(values) =>\n\t\t\t\t\tmodal({\n\t\t\t\t\t\tclassName: resolveClassName(className, values),\n\t\t\t\t\t})\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<Dialog\n\t\t\t\t\t{...dialogProps}\n\t\t\t\t\tclassName={dialog({\n\t\t\t\t\t\tclassName: dialogProps.className,\n\t\t\t\t\t})}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</Dialog>\n\t\t\t</AriaModal>\n\t\t</ModalOverlay>\n\t);\n}\n\nconst dialogHeading = cva({\n\tbase: classes.dialogHeading,\n});\n\nexport function DialogHeading({ className, ...props }: AriaHeadingProps) {\n\treturn (\n\t\t<AriaHeading\n\t\t\t{...props}\n\t\t\tclassName={dialogHeading({\n\t\t\t\tclassName,\n\t\t\t})}\n\t\t/>\n\t);\n}\n\nexport function DialogButtons({ children }: { children: React.ReactNode }) {\n\treturn <div className={classes.dialogButtons}>{children}</div>;\n}\n\nexport function DialogTrigger(props: AriaDialogTriggerProps) {\n\treturn <AriaDialogTrigger {...props} />;\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

package/dist/es/components/modal.module.js

@@ -0,0 +1,7 @@
+import "./modal_module.css";
+var modal_default = { "overlay": "overlay_9e6ab", "dialog": "dialog_9e6ab", "modal": "modal_9e6ab", "dialogHeading": "dialogHeading_9e6ab", "dialogButtons": "dialogButtons_9e6ab" };
+export {
+  modal_default as default
+};
+
+//# sourceMappingURL=modal.module.js.map

package/dist/es/components/modal.module.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,OAAO;AAAqB,IAAO,gBAAQ,EAAC,WAAU,iBAAgB,UAAS,gBAAe,SAAQ,eAAc,iBAAgB,uBAAsB,iBAAgB,sBAAqB","names":[],"ignoreList":[],"sources":["../../../src/components/modal.module.css"],"sourcesContent":["import \"./modal_module.css\";export default {\"overlay\":\"overlay_9e6ab\",\"dialog\":\"dialog_9e6ab\",\"modal\":\"modal_9e6ab\",\"dialogHeading\":\"dialogHeading_9e6ab\",\"dialogButtons\":\"dialogButtons_9e6ab\"}//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

package/dist/es/components/modal_module.css

@@ -0,0 +1,80 @@
+.overlay_9e6ab {
+	background-color: color-mix(in srgb, var(--lol-color-hextech-black), transparent 75%);
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: var(--lol-z-index-overlay);
+	display: flex;
+	flex-direction: column;
+	min-height: 100%;
+	align-items: center;
+	justify-content: safe center;
+	overflow-y: auto;
+	padding: 1rem 0;
+	text-align: center;
+	backdrop-filter: blur(8px);
+}
+
+.dialog_9e6ab {
+	background: var(--lol-button-background-gradient) padding-box,
+		var(--lol-button-border-gradient) border-box;
+	border: 2px solid transparent;
+
+
+	--lol-button-background-gradient: var(--lol-gradient-hextech-black);
+	--lol-button-border-gradient: linear-gradient(to bottom, var(--lol-color-gold-600), var(--lol-color-gold-600), var(--lol-color-gold-500));
+
+	position: relative;
+	outline: none;
+}
+
+.dialog_9e6ab::before,
+	.dialog_9e6ab::after {
+		position: absolute;
+		left: 1.25rem;
+		right: 1.25rem;
+		content: '';
+		display: block;
+		height: 0.25rem;
+		background-color: var(--lol-color-hextech-black);
+		border-radius: 9999px;
+	}
+
+.dialog_9e6ab::before {
+		bottom: calc(100% + 2px);
+		border: 1px solid var(--lol-color-gold-600);
+		border-bottom: 0;
+	}
+
+.dialog_9e6ab::after {
+		top: calc(100% + 2px);
+		border: 1px solid var(--lol-color-gold-500);
+		border-top: 0;
+	}
+
+
+.modal_9e6ab {
+	width: 100%;
+	max-width: 28rem;
+}
+
+.dialogHeading_9e6ab {
+	color: var(--lol-color-gold-100);
+	font-family: var(--lol-font-family-beaufort);
+	text-transform: uppercase;
+	font-size: var(--lol-font-size-h5);
+	font-weight: var(--lol-font-weight-h5);
+	letter-spacing: var(--lol-letter-spacing-h5);
+	line-height: var(--lol-line-height-h5);
+}
+
+.dialogButtons_9e6ab {
+	justify-content: center;
+	transform: translateY(2px);
+	padding: 0 0.25rem;
+	gap: 0.25rem;
+	background-color: var(--lol-color-hextech-black);
+	display: inline-flex;
+}

package/dist/es/components/number-field.js

@@ -1,51 +1,44 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "cva";
 import {
   Input as AriaInput,
   NumberField as AriaNumberField,
   Button,
   Group
 } from "react-aria-components";
-import { tv } from "tailwind-variants";
-import {
-  dimmedGradient,
-  disabledGradient,
-  goldGradient,
-  goldGradientHover
-} from "../utilities/gradient.js";
 import { resolveClassName } from "../utilities/resolve-class-name.js";
-const numberFieldBorder = tv({
-  base: "grid grid-cols-[auto_1fr_auto] gap-px bg-gradient-to-t p-px outline-none",
+import classes from "./number-field.module";
+const numberFieldGroup = cva({
+  base: classes.group,
   variants: {
     preset: {
-      normal: goldGradient,
-      dimmed: dimmedGradient
+      normal: classes.normal,
+      dimmed: classes.dimmed
     },
     isDisabled: {
-      true: disabledGradient
+      true: classes.disabled
     },
     isFocusWithin: {
-      true: goldGradientHover
+      true: classes.focusWithin
     }
   }
 });
-const numberFieldInput = tv({
-  base: [
-    "text-lol-gold-100 font-spiegel bg-lol-grey-hextech-black w-full px-3 py-2 text-xs outline-none"
-  ],
+const numberFieldInput = cva({
+  base: classes.input,
   variants: {
     isDisabled: {
-      true: "text-lol-grey-150 bg-lol-grey-300"
+      true: classes.disabled
     },
     isFocused: {
-      true: "from-lol-grey-200 via-lol-grey-300 to-lol-grey-300 bg-gradient-to-t"
+      true: classes.focus
     }
   }
 });
-const numberFieldButton = tv({
-  base: ["text-lol-gold-100 bg-lol-grey-hextech-black px-2.5"],
+const numberFieldButton = cva({
+  base: classes.button,
   variants: {
     isDisabled: {
-      true: "text-lol-grey-150 bg-lol-grey-300"
+      true: classes.disabled
     }
   }
 });
@@ -63,7 +56,7 @@ function NumberField({
       {
         ...groupProps,
         className: (values2) => {
-          return numberFieldBorder({
+          return numberFieldGroup({
             className: resolveClassName(groupProps.className, values2),
             preset,
             ...values2

package/dist/es/components/number-field.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAwEI,mBAYE,KAVD,YAFD;AAtEJ;AAAA,EACC,SAAS;AAAA,EACT,eAAe;AAAA,EACf;AAAA,EACA;AAAA,OACM;AACP,SAAS,UAAU;AACnB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,wBAAwB;AAIjC,MAAM,oBAAoB,GAAG;AAAA,EAC5B,MAAM;AAAA,EACN,UAAU;AAAA,IACT,QAAQ;AAAA,MACP,QAAQ;AAAA,MACR,QAAQ;AAAA,IACT;AAAA,IACA,YAAY;AAAA,MACX,MAAM;AAAA,IACP;AAAA,IACA,eAAe;AAAA,MACd,MAAM;AAAA,IACP;AAAA,EACD;AACD,CAAC;AAED,MAAM,mBAAmB,GAAG;AAAA,EAC3B,MAAM;AAAA,IACL;AAAA,EACD;AAAA,EACA,UAAU;AAAA,IACT,YAAY;AAAA,MACX,MAAM;AAAA,IACP;AAAA,IACA,WAAW;AAAA,MACV,MAAM;AAAA,IACP;AAAA,EACD;AACD,CAAC;AAED,MAAM,oBAAoB,GAAG;AAAA,EAC5B,MAAM,CAAC,oDAAoD;AAAA,EAC3D,UAAU;AAAA,IACT,YAAY;AAAA,MACX,MAAM;AAAA,IACP;AAAA,EACD;AACD,CAAC;AAEM,SAAS,YAAY;AAAA,EAC3B,aAAa,CAAC;AAAA,EACd,aAAa,CAAC;AAAA,EACd;AAAA,EACA,SAAS;AAAA,EACT,GAAG;AACJ,GAIG;AACF,SACC,oBAAC,mBAAiB,GAAG,OACnB,WAAC,WACD,iCACE;AAAA,WAAO,aAAa,aAAa,SAAS,MAAM,IAAI;AAAA,IACrD;AAAA,MAAC;AAAA;AAAA,QACC,GAAG;AAAA,QACJ,WAAW,CAACA,YAAW;AACtB,iBAAO,kBAAkB;AAAA,YACxB,WAAW,iBAAiB,WAAW,WAAWA,OAAM;AAAA,YACxD;AAAA,YACA,GAAGA;AAAA,UACJ,CAAC;AAAA,QACF;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,WAAW,CAACA,YAAW,kBAAkBA,OAAM;AAAA,cAC/C,MAAK;AAAA,cACL;AAAA;AAAA,UAED;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,GAAG;AAAA,cACJ,WAAW,CAACA,YAAW;AACtB,uBAAO,iBAAiB;AAAA,kBACvB,WAAW,iBAAiB,WAAW,WAAWA,OAAM;AAAA,kBACxD,GAAGA;AAAA,gBACJ,CAAC;AAAA,cACF;AAAA;AAAA,UACD;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,WAAW,CAACA,YAAW,kBAAkBA,OAAM;AAAA,cAC/C,MAAK;AAAA,cACL;AAAA;AAAA,UAED;AAAA;AAAA;AAAA,IACD;AAAA,KACD,GAEF;AAEF","names":["values"],"ignoreList":[],"sources":["../../../src/components/number-field.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport type { NumberFieldProps as AriaNumberFieldProps } from \"react-aria-components\";\nimport {\n\tInput as AriaInput,\n\tNumberField as AriaNumberField,\n\tButton,\n\tGroup,\n} from \"react-aria-components\";\nimport { tv } from \"tailwind-variants\";\nimport {\n\tdimmedGradient,\n\tdisabledGradient,\n\tgoldGradient,\n\tgoldGradientHover,\n} from \"../utilities/gradient.js\";\nimport { resolveClassName } from \"../utilities/resolve-class-name.js\";\n\ntype NumberFieldPreset = \"normal\" | \"dimmed\";\n\nconst numberFieldBorder = tv({\n\tbase: \"grid grid-cols-[auto_1fr_auto] gap-px bg-gradient-to-t p-px outline-none\",\n\tvariants: {\n\t\tpreset: {\n\t\t\tnormal: goldGradient,\n\t\t\tdimmed: dimmedGradient,\n\t\t},\n\t\tisDisabled: {\n\t\t\ttrue: disabledGradient,\n\t\t},\n\t\tisFocusWithin: {\n\t\t\ttrue: goldGradientHover,\n\t\t},\n\t},\n});\n\nconst numberFieldInput = tv({\n\tbase: [\n\t\t\"text-lol-gold-100 font-spiegel bg-lol-grey-hextech-black w-full px-3 py-2 text-xs outline-none\",\n\t],\n\tvariants: {\n\t\tisDisabled: {\n\t\t\ttrue: \"text-lol-grey-150 bg-lol-grey-300\",\n\t\t},\n\t\tisFocused: {\n\t\t\ttrue: \"from-lol-grey-200 via-lol-grey-300 to-lol-grey-300 bg-gradient-to-t\",\n\t\t},\n\t},\n});\n\nconst numberFieldButton = tv({\n\tbase: [\"text-lol-gold-100 bg-lol-grey-hextech-black px-2.5\"],\n\tvariants: {\n\t\tisDisabled: {\n\t\t\ttrue: \"text-lol-grey-150 bg-lol-grey-300\",\n\t\t},\n\t},\n});\n\nexport function NumberField({\n\tinputProps = {},\n\tgroupProps = {},\n\tchildren,\n\tpreset = \"normal\",\n\t...props\n}: AriaNumberFieldProps & {\n\tinputProps?: ComponentProps<typeof AriaInput>;\n\tgroupProps?: ComponentProps<typeof Group>;\n\tpreset?: NumberFieldPreset;\n}) {\n\treturn (\n\t\t<AriaNumberField {...props}>\n\t\t\t{(values) => (\n\t\t\t\t<>\n\t\t\t\t\t{typeof children === \"function\" ? children(values) : children}\n\t\t\t\t\t<Group\n\t\t\t\t\t\t{...groupProps}\n\t\t\t\t\t\tclassName={(values) => {\n\t\t\t\t\t\t\treturn numberFieldBorder({\n\t\t\t\t\t\t\t\tclassName: resolveClassName(groupProps.className, values),\n\t\t\t\t\t\t\t\tpreset,\n\t\t\t\t\t\t\t\t...values,\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName={(values) => numberFieldButton(values)}\n\t\t\t\t\t\t\tslot=\"decrement\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t-\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<AriaInput\n\t\t\t\t\t\t\t{...inputProps}\n\t\t\t\t\t\t\tclassName={(values) => {\n\t\t\t\t\t\t\t\treturn numberFieldInput({\n\t\t\t\t\t\t\t\t\tclassName: resolveClassName(inputProps.className, values),\n\t\t\t\t\t\t\t\t\t...values,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName={(values) => numberFieldButton(values)}\n\t\t\t\t\t\t\tslot=\"increment\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t+\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</Group>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</AriaNumberField>\n\t);\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}
+{"version":3,"mappings":"AAiEI,mBAYE,KAVD,YAFD;AAjEJ,SAAS,WAAW;AAGpB;AAAA,EACC,SAAS;AAAA,EACT,eAAe;AAAA,EACf;AAAA,EACA;AAAA,OACM;AACP,SAAS,wBAAwB;AACjC,OAAO,aAAa;AAIpB,MAAM,mBAAmB,IAAI;AAAA,EAC5B,MAAM,QAAQ;AAAA,EACd,UAAU;AAAA,IACT,QAAQ;AAAA,MACP,QAAQ,QAAQ;AAAA,MAChB,QAAQ,QAAQ;AAAA,IACjB;AAAA,IACA,YAAY;AAAA,MACX,MAAM,QAAQ;AAAA,IACf;AAAA,IACA,eAAe;AAAA,MACd,MAAM,QAAQ;AAAA,IACf;AAAA,EACD;AACD,CAAC;AAED,MAAM,mBAAmB,IAAI;AAAA,EAC5B,MAAM,QAAQ;AAAA,EACd,UAAU;AAAA,IACT,YAAY;AAAA,MACX,MAAM,QAAQ;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACV,MAAM,QAAQ;AAAA,IACf;AAAA,EACD;AACD,CAAC;AAED,MAAM,oBAAoB,IAAI;AAAA,EAC7B,MAAM,QAAQ;AAAA,EACd,UAAU;AAAA,IACT,YAAY;AAAA,MACX,MAAM,QAAQ;AAAA,IACf;AAAA,EACD;AACD,CAAC;AAEM,SAAS,YAAY;AAAA,EAC3B,aAAa,CAAC;AAAA,EACd,aAAa,CAAC;AAAA,EACd;AAAA,EACA,SAAS;AAAA,EACT,GAAG;AACJ,GAIG;AACF,SACC,oBAAC,mBAAiB,GAAG,OACnB,WAAC,WACD,iCACE;AAAA,WAAO,aAAa,aAAa,SAAS,MAAM,IAAI;AAAA,IACrD;AAAA,MAAC;AAAA;AAAA,QACC,GAAG;AAAA,QACJ,WAAW,CAACA,YAAW;AACtB,iBAAO,iBAAiB;AAAA,YACvB,WAAW,iBAAiB,WAAW,WAAWA,OAAM;AAAA,YACxD;AAAA,YACA,GAAGA;AAAA,UACJ,CAAC;AAAA,QACF;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,WAAW,CAACA,YAAW,kBAAkBA,OAAM;AAAA,cAC/C,MAAK;AAAA,cACL;AAAA;AAAA,UAED;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,GAAG;AAAA,cACJ,WAAW,CAACA,YAAW;AACtB,uBAAO,iBAAiB;AAAA,kBACvB,WAAW,iBAAiB,WAAW,WAAWA,OAAM;AAAA,kBACxD,GAAGA;AAAA,gBACJ,CAAC;AAAA,cACF;AAAA;AAAA,UACD;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,WAAW,CAACA,YAAW,kBAAkBA,OAAM;AAAA,cAC/C,MAAK;AAAA,cACL;AAAA;AAAA,UAED;AAAA;AAAA;AAAA,IACD;AAAA,KACD,GAEF;AAEF","names":["values"],"ignoreList":[],"sources":["../../../src/components/number-field.tsx"],"sourcesContent":["import { cva } from \"cva\";\nimport type { ComponentProps } from \"react\";\nimport type { NumberFieldProps as AriaNumberFieldProps } from \"react-aria-components\";\nimport {\n\tInput as AriaInput,\n\tNumberField as AriaNumberField,\n\tButton,\n\tGroup,\n} from \"react-aria-components\";\nimport { resolveClassName } from \"../utilities/resolve-class-name.js\";\nimport classes from \"./number-field.module\";\n\ntype NumberFieldPreset = \"normal\" | \"dimmed\";\n\nconst numberFieldGroup = cva({\n\tbase: classes.group,\n\tvariants: {\n\t\tpreset: {\n\t\t\tnormal: classes.normal,\n\t\t\tdimmed: classes.dimmed,\n\t\t},\n\t\tisDisabled: {\n\t\t\ttrue: classes.disabled,\n\t\t},\n\t\tisFocusWithin: {\n\t\t\ttrue: classes.focusWithin,\n\t\t},\n\t},\n});\n\nconst numberFieldInput = cva({\n\tbase: classes.input,\n\tvariants: {\n\t\tisDisabled: {\n\t\t\ttrue: classes.disabled,\n\t\t},\n\t\tisFocused: {\n\t\t\ttrue: classes.focus,\n\t\t},\n\t},\n});\n\nconst numberFieldButton = cva({\n\tbase: classes.button,\n\tvariants: {\n\t\tisDisabled: {\n\t\t\ttrue: classes.disabled,\n\t\t},\n\t},\n});\n\nexport function NumberField({\n\tinputProps = {},\n\tgroupProps = {},\n\tchildren,\n\tpreset = \"normal\",\n\t...props\n}: AriaNumberFieldProps & {\n\tinputProps?: ComponentProps<typeof AriaInput>;\n\tgroupProps?: ComponentProps<typeof Group>;\n\tpreset?: NumberFieldPreset;\n}) {\n\treturn (\n\t\t<AriaNumberField {...props}>\n\t\t\t{(values) => (\n\t\t\t\t<>\n\t\t\t\t\t{typeof children === \"function\" ? children(values) : children}\n\t\t\t\t\t<Group\n\t\t\t\t\t\t{...groupProps}\n\t\t\t\t\t\tclassName={(values) => {\n\t\t\t\t\t\t\treturn numberFieldGroup({\n\t\t\t\t\t\t\t\tclassName: resolveClassName(groupProps.className, values),\n\t\t\t\t\t\t\t\tpreset,\n\t\t\t\t\t\t\t\t...values,\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName={(values) => numberFieldButton(values)}\n\t\t\t\t\t\t\tslot=\"decrement\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t-\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<AriaInput\n\t\t\t\t\t\t\t{...inputProps}\n\t\t\t\t\t\t\tclassName={(values) => {\n\t\t\t\t\t\t\t\treturn numberFieldInput({\n\t\t\t\t\t\t\t\t\tclassName: resolveClassName(inputProps.className, values),\n\t\t\t\t\t\t\t\t\t...values,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName={(values) => numberFieldButton(values)}\n\t\t\t\t\t\t\tslot=\"increment\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t+\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</Group>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</AriaNumberField>\n\t);\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

package/dist/es/components/number-field.module.js

@@ -0,0 +1,7 @@
+import "./number-field_module.css";
+var number_field_default = { "group": "group_b1efb", "normal": "normal_b1efb", "dimmed": "dimmed_b1efb", "disabled": "disabled_b1efb", "focusWithin": "focusWithin_b1efb", "input": "input_b1efb", "focus": "focus_b1efb", "button": "button_b1efb" };
+export {
+  number_field_default as default
+};
+
+//# sourceMappingURL=number-field.module.js.map

package/dist/es/components/number-field.module.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,OAAO;AAA4B,IAAO,uBAAQ,EAAC,SAAQ,eAAc,UAAS,gBAAe,UAAS,gBAAe,YAAW,kBAAiB,eAAc,qBAAoB,SAAQ,eAAc,SAAQ,eAAc,UAAS,eAAc","names":[],"ignoreList":[],"sources":["../../../src/components/number-field.module.css"],"sourcesContent":["import \"./number-field_module.css\";export default {\"group\":\"group_b1efb\",\"normal\":\"normal_b1efb\",\"dimmed\":\"dimmed_b1efb\",\"disabled\":\"disabled_b1efb\",\"focusWithin\":\"focusWithin_b1efb\",\"input\":\"input_b1efb\",\"focus\":\"focus_b1efb\",\"button\":\"button_b1efb\"}//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

package/dist/es/components/number-field_module.css

@@ -0,0 +1,54 @@
+.group_b1efb {
+	display: grid;
+	grid-template-columns: auto 1fr auto;
+	gap: 1px;
+	padding: 1px;
+	outline: none;
+}
+
+.group_b1efb.normal_b1efb {
+		background-image: var(--lol-gradient-gold);
+	}
+
+.group_b1efb.dimmed_b1efb {
+		background-image: var(--lol-gradient-grey-300);
+	}
+
+.group_b1efb.disabled_b1efb {
+		background-image: var(--lol-gradient-disabled);
+	}
+
+.group_b1efb.focusWithin_b1efb {
+		background-image: var(--lol-gradient-gold-hover);
+	}
+
+.input_b1efb {
+	background-color: var(--lol-color-hextech-black);
+	color: var(--lol-color-gold-100);
+	font-family: var(--lol-font-family-spiegel);
+	font-size: 0.75rem;
+	padding: 0.5rem 0.75rem;
+	line-height: 1rem;
+	width: 100%;
+	outline: none;
+}
+
+.input_b1efb.disabled_b1efb {
+		background-color: var(--lol-color-grey-300);
+		color: var(--lol-color-grey-100);
+	}
+
+.input_b1efb.focus_b1efb {
+		background-image: var(--lol-gradient-grey-focus);
+	}
+
+.button_b1efb {
+	color: var(--lol-color-gold-100);
+	background-color: var(--lol-color-hextech-black);
+	padding: 0 0.625rem;
+}
+
+.button_b1efb.disabled_b1efb {
+		color: var(--lol-color-grey-150);
+		background-color: var(--lol-color-grey-300);
+	}

package/dist/es/components/progress-bar.js

@@ -1,36 +1,21 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "cva";
 import {
   ProgressBar as AriaProgressBar,
   Label
 } from "react-aria-components";
-import { goldGradient } from "../utilities/gradient.js";
-import { tv } from "../utilities/tv.js";
-const progressBarBorder = tv({
-  base: ["-ml-0.5 -mr-1 h-3 rounded-full bg-gradient-to-t p-px", goldGradient]
-});
-const progressBarBackground = tv({
-  base: ["bg-lol-grey-300 h-full w-full rounded-full"]
-});
-const progressBarFill = tv({
-  base: "from-lol-blue-400 to-lol-blue-200 h-full rounded-full bg-gradient-to-r"
-});
+import classes from "./progress-bar.module";
 function ProgressBar({
   className,
   label,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(AriaProgressBar, { className: "flex w-56 flex-col gap-1 text-sm", ...props, children: ({ percentage, valueText }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("div", { className: "font-beaufort text-lol-gold-100 flex font-bold uppercase", children: [
-      /* @__PURE__ */ jsx(Label, { className: "flex-1", children: label ?? "Loading" }),
+  return /* @__PURE__ */ jsx(AriaProgressBar, { className: cx(classes.wrapper, className), ...props, children: ({ percentage, valueText }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: classes.labelWrapper, children: [
+      /* @__PURE__ */ jsx(Label, { children: label ?? "Loading" }),
       /* @__PURE__ */ jsx("span", { children: valueText })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: progressBarBorder(), children: /* @__PURE__ */ jsx("div", { className: progressBarBackground(), children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: progressBarFill(),
-        style: { width: `${percentage}%` }
-      }
-    ) }) })
+    /* @__PURE__ */ jsx("div", { className: classes.progressBar, children: /* @__PURE__ */ jsx("div", { className: classes.fill, style: { width: `${percentage}%` } }) })
   ] }) });
 }
 export {

package/dist/es/components/progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAgCI,mBAEE,KADD,YADD;AAhCJ;AAAA,EACC,eAAe;AAAA,EAEf;AAAA,OACM;AACP,SAAS,oBAAoB;AAC7B,SAAS,UAAU;AAEnB,MAAM,oBAAoB,GAAG;AAAA,EAC5B,MAAM,CAAC,wDAAwD,YAAY;AAC5E,CAAC;AAED,MAAM,wBAAwB,GAAG;AAAA,EAChC,MAAM,CAAC,4CAA4C;AACpD,CAAC;AAED,MAAM,kBAAkB,GAAG;AAAA,EAC1B,MAAM;AACP,CAAC;AAMM,SAAS,YAAY;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAkC;AACjC,SACC,oBAAC,mBAAgB,WAAW,oCAAqC,GAAG,OAClE,WAAC,EAAE,YAAY,UAAU,MACzB,iCACC;AAAA,yBAAC,SAAI,WAAU,4DACd;AAAA,0BAAC,SAAM,WAAU,UAAU,mBAAS,WAAU;AAAA,MAC9C,oBAAC,UAAM,qBAAU;AAAA,OAClB;AAAA,IACA,oBAAC,SAAI,WAAW,kBAAkB,GACjC,8BAAC,SAAI,WAAW,sBAAsB,GACrC;AAAA,MAAC;AAAA;AAAA,QACA,WAAW,gBAAgB;AAAA,QAC3B,OAAO,EAAE,OAAO,GAAG,UAAU,IAAI;AAAA;AAAA,IAClC,GACD,GACD;AAAA,KACD,GAEF;AAEF","names":[],"ignoreList":[],"sources":["../../../src/components/progress-bar.tsx"],"sourcesContent":["import {\n\tProgressBar as AriaProgressBar,\n\ttype ProgressBarProps as AriaProgressBarProps,\n\tLabel,\n} from \"react-aria-components\";\nimport { goldGradient } from \"../utilities/gradient.js\";\nimport { tv } from \"../utilities/tv.js\";\n\nconst progressBarBorder = tv({\n\tbase: [\"-ml-0.5 -mr-1 h-3 rounded-full bg-gradient-to-t p-px\", goldGradient],\n});\n\nconst progressBarBackground = tv({\n\tbase: [\"bg-lol-grey-300 h-full w-full rounded-full\"],\n});\n\nconst progressBarFill = tv({\n\tbase: \"from-lol-blue-400 to-lol-blue-200 h-full rounded-full bg-gradient-to-r\",\n});\n\ninterface ProgressBarProps extends Omit<AriaProgressBarProps, \"children\"> {\n\tlabel?: string;\n}\n\nexport function ProgressBar({\n\tclassName,\n\tlabel,\n\t...props\n}: ProgressBarProps): JSX.Element {\n\treturn (\n\t\t<AriaProgressBar className={\"flex w-56 flex-col gap-1 text-sm\"} {...props}>\n\t\t\t{({ percentage, valueText }) => (\n\t\t\t\t<>\n\t\t\t\t\t<div className=\"font-beaufort text-lol-gold-100 flex font-bold uppercase\">\n\t\t\t\t\t\t<Label className=\"flex-1\">{label ?? \"Loading\"}</Label>\n\t\t\t\t\t\t<span>{valueText}</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className={progressBarBorder()}>\n\t\t\t\t\t\t<div className={progressBarBackground()}>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName={progressBarFill()}\n\t\t\t\t\t\t\t\tstyle={{ width: `${percentage}%` }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</AriaProgressBar>\n\t);\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}
+{"version":3,"mappings":"AAoBI,mBAEE,KADD,YADD;AApBJ,SAAS,UAAU;AACnB;AAAA,EACC,eAAe;AAAA,EAEf;AAAA,OACM;AACP,OAAO,aAAa;AAMb,SAAS,YAAY;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAkC;AACjC,SACC,oBAAC,mBAAgB,WAAW,GAAG,QAAQ,SAAS,SAAS,GAAI,GAAG,OAC9D,WAAC,EAAE,YAAY,UAAU,MACzB,iCACC;AAAA,yBAAC,SAAI,WAAW,QAAQ,cACvB;AAAA,0BAAC,SAAO,mBAAS,WAAU;AAAA,MAC3B,oBAAC,UAAM,qBAAU;AAAA,OAClB;AAAA,IACA,oBAAC,SAAI,WAAW,QAAQ,aACvB,8BAAC,SAAI,WAAW,QAAQ,MAAM,OAAO,EAAE,OAAO,GAAG,UAAU,IAAI,GAAG,GACnE;AAAA,KACD,GAEF;AAEF","names":[],"ignoreList":[],"sources":["../../../src/components/progress-bar.tsx"],"sourcesContent":["import { cx } from \"cva\";\nimport {\n\tProgressBar as AriaProgressBar,\n\ttype ProgressBarProps as AriaProgressBarProps,\n\tLabel,\n} from \"react-aria-components\";\nimport classes from \"./progress-bar.module\";\n\ninterface ProgressBarProps extends Omit<AriaProgressBarProps, \"children\"> {\n\tlabel?: string;\n}\n\nexport function ProgressBar({\n\tclassName,\n\tlabel,\n\t...props\n}: ProgressBarProps): JSX.Element {\n\treturn (\n\t\t<AriaProgressBar className={cx(classes.wrapper, className)} {...props}>\n\t\t\t{({ percentage, valueText }) => (\n\t\t\t\t<>\n\t\t\t\t\t<div className={classes.labelWrapper}>\n\t\t\t\t\t\t<Label>{label ?? \"Loading\"}</Label>\n\t\t\t\t\t\t<span>{valueText}</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className={classes.progressBar}>\n\t\t\t\t\t\t<div className={classes.fill} style={{ width: `${percentage}%` }} />\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</AriaProgressBar>\n\t);\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

package/dist/es/components/progress-bar.module.js

@@ -0,0 +1,7 @@
+import "./progress-bar_module.css";
+var progress_bar_default = { "wrapper": "wrapper_cea15", "progressBar": "progressBar_cea15", "fill": "fill_cea15", "labelWrapper": "labelWrapper_cea15" };
+export {
+  progress_bar_default as default
+};
+
+//# sourceMappingURL=progress-bar.module.js.map

package/dist/es/components/progress-bar.module.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,OAAO;AAA4B,IAAO,uBAAQ,EAAC,WAAU,iBAAgB,eAAc,qBAAoB,QAAO,cAAa,gBAAe,qBAAoB","names":[],"ignoreList":[],"sources":["../../../src/components/progress-bar.module.css"],"sourcesContent":["import \"./progress-bar_module.css\";export default {\"wrapper\":\"wrapper_cea15\",\"progressBar\":\"progressBar_cea15\",\"fill\":\"fill_cea15\",\"labelWrapper\":\"labelWrapper_cea15\"}//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

package/dist/es/components/progress-bar_module.css

@@ -0,0 +1,33 @@
+.wrapper_cea15 {
+	display: flex;
+	width: 14rem;
+	flex-direction: column;
+	gap: 0.25rem;
+	font-size: 0.875rem;
+}
+
+.progressBar_cea15 {
+	margin-left: -0.125rem;
+	margin-right: -0.25rem;
+	height: 0.75rem;
+	border-radius: 9999px;
+	padding: 1px;
+	background: var(--lol-gradient-grey-300) padding-box,
+		var(--lol-gradient-gold) border-box;
+	border: 1px solid transparent;
+}
+
+.fill_cea15 {
+	background-image: linear-gradient(to right, var(--lol-color-blue-400), var(--lol-color-blue-200));
+	border-radius: 9999px;
+	height: 100%;
+}
+
+.labelWrapper_cea15 {
+	display: flex;
+	justify-content: space-between;
+	font-weight: 700;
+	text-transform: uppercase;
+	font-family: var(--lol-font-family-beaufort);
+	color: var(--lol-color-gold-100);
+}