@lolmath/ui 3.2.4 → 4.0.0

package/dist/lib/components/button.js

@@ -1,8 +1,9 @@
 "use strict";
-"use client";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,182 +17,69 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var button_exports = {};
 __export(button_exports, {
-  Button: () => Button
+  Button: () => Button,
+  _Button: () => _Button,
+  button: () => button
 });
 module.exports = __toCommonJS(button_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_react_aria_components = require("react-aria-components");
-var import_gradient = require("../utilities/gradient.js");
 var import_resolve_class_name = require("../utilities/resolve-class-name.js");
-var import_tv = require("../utilities/tv.js");
-const buttonBorder = (0, import_tv.tv)({
-  base: "bg-gradient-to-t p-0.5 outline-none transition-colors duration-200",
+var import_cva = require("cva");
+var import_button = __toESM(require("./button.module"));
+const button = (0, import_cva.cva)({
+  base: import_button.default.button,
   variants: {
     preset: {
-      primary: "",
-      secondary: "",
-      text: "",
-      hextech: "",
-      dimmed: import_gradient.dimmedGradient
-    },
-    shape: {
-      round: "aspect-square rounded-full",
-      square: "aspect-square",
-      normal: ""
+      primary: import_button.default.primary,
+      secondary: import_button.default.secondary,
+      text: import_button.default.text,
+      hextech: import_button.default.hextech,
+      dimmed: import_button.default.dimmed
     },
     isHovered: {
-      true: ""
+      true: import_button.default.hover
     },
     isPressed: {
-      true: ""
+      true: import_button.default.press
     },
     isDisabled: {
-      true: ""
+      true: import_button.default.disabled
     },
     isFocused: {
       true: ""
     },
     isFocusVisible: {
-      true: ""
-    },
-    thin: {
-      true: "p-px"
-    }
-  },
-  compoundVariants: [
-    {
-      preset: ["primary", "secondary"],
-      class: import_gradient.goldGradient
-    },
-    {
-      preset: ["primary", "secondary", "dimmed"],
-      isHovered: true,
-      class: import_gradient.goldGradientHover
-    },
-    {
-      preset: ["primary", "secondary", "dimmed"],
-      isPressed: true,
-      class: import_gradient.goldGradientPressed
-    },
-    {
-      preset: ["primary", "secondary", "dimmed"],
-      isDisabled: true,
-      class: import_gradient.disabledGradient
-    },
-    {
-      preset: ["primary", "secondary"],
-      isFocusVisible: true,
-      class: "outline outline-offset-2 outline-yellow-50"
-    },
-    {
-      preset: ["hextech"],
-      class: import_gradient.hextechGradient
-    },
-    {
-      preset: ["hextech"],
-      isHovered: true,
-      class: import_gradient.hextechGradientHover
-    },
-    {
-      preset: ["hextech"],
-      isPressed: true,
-      class: import_gradient.hextechGradientPressed
-    },
-    {
-      preset: ["hextech"],
-      isDisabled: true,
-      class: import_gradient.disabledGradient
-    }
-  ]
-});
-const button = (0, import_tv.tv)({
-  base: "text-lol-gold-300 font-beaufort block h-full w-full font-bold uppercase tracking-wide transition-colors duration-200",
-  variants: {
-    preset: {
-      primary: "from-lol-gold-600 via-lol-gold-600 to-lol-gold-700 bg-gradient-to-b",
-      secondary: "",
-      text: "",
-      hextech: "text-lol-blue-100",
-      dimmed: "bg-lol-grey-hextech-black"
-    },
-    isHovered: {
-      true: "text-lol-gold-100"
-    },
-    isPressed: {
-      true: "text-lol-grey-150"
-    },
-    isDisabled: {
-      true: "text-lol-grey-150"
-    },
-    isFocused: {
-      true: ""
-    },
-    isFocusVisible: {
-      true: ""
+      true: import_button.default.focusVisible
     },
     shape: {
-      round: "rounded-full",
-      square: "",
-      normal: ""
-    }
-  },
-  compoundVariants: [
-    {
-      preset: ["primary", "secondary", "hextech", "dimmed"],
-      class: "px-4 py-2"
-    },
-    {
-      preset: ["primary", "secondary", "hextech"],
-      class: "bg-lol-grey-300"
+      round: import_button.default.round,
+      square: import_button.default.square,
+      normal: import_button.default.normal
     },
-    {
-      preset: ["hextech"],
-      isHovered: true,
-      class: "text-lol-blue-100"
-    },
-    {
-      preset: ["hextech"],
-      isPressed: true,
-      class: "text-lol-blue-400"
-    },
-    {
-      preset: ["text"],
-      shape: ["normal", "square"],
-      class: "relative after:absolute after:-bottom-2 after:-left-2 after:-right-2 after:-top-2"
-    },
-    {
-      isHovered: true,
-      preset: "primary",
-      class: "from-lol-gold-600 via-lol-gold-600 to-lol-gold-500"
-    },
-    {
-      isPressed: true,
-      preset: "primary",
-      class: "from-lol-gold-600 via-lol-gold-700 to-lol-gold-700 text-lol-gold-500"
-    },
-    {
-      shape: ["round", "square"],
-      class: "flex aspect-square h-7 items-center justify-center p-0 font-black leading-none"
-    },
-    {
-      isHovered: true,
-      preset: "text",
-      shape: ["round", "square"],
-      class: "bg-lol-grey-300"
+    thin: {
+      true: import_button.default.thin
     }
-  ]
+  }
 });
 function _Button({
   children,
   className,
   preset = "secondary",
   shape = "normal",
-  innerClassName,
-  thin = preset === "dimmed" ? true : false,
+  thin = preset === "dimmed",
   ...props
 }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -200,7 +88,7 @@ function _Button({
       ref,
       ...props,
       className: (values) => {
-        return buttonBorder({
+        return button({
           className: (0, import_resolve_class_name.resolveClassName)(className, values),
           preset,
           shape,
@@ -208,27 +96,17 @@ function _Button({
           ...values
         });
       },
-      children: (values) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "span",
-          {
-            className: button({
-              className: (0, import_resolve_class_name.resolveClassName)(innerClassName, values),
-              preset,
-              shape,
-              ...values
-            }),
-            children: typeof children === "function" ? children(values) : children
-          }
-        );
-      }
+      children
     }
   );
 }
 const Button = (0, import_react.forwardRef)(_Button);
+Button.displayName = "Button";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Button
+  Button,
+  _Button,
+  button
 });
 
 //# sourceMappingURL=button.js.map

package/dist/lib/components/button.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["AriaButton"],"sources":["../../../src/components/button.tsx"],"sourcesContent":["\"use client\";\n\nimport { Ref, forwardRef } from \"react\";\nimport {\n  Button as AriaButton,\n  ButtonProps as AriaButtonProps,\n  ButtonRenderProps,\n} from \"react-aria-components\";\nimport {\n  goldGradient,\n  goldGradientHover,\n  goldGradientPressed,\n  hextechGradient,\n  disabledGradient,\n  hextechGradientHover,\n  hextechGradientPressed,\n  dimmedGradient,\n} from \"../utilities/gradient.js\";\nimport { resolveClassName as resolveClassName } from \"../utilities/resolve-class-name.js\";\nimport { tv } from \"../utilities/tv.js\";\n\nexport type ButtonShape = \"round\" | \"square\" | \"normal\";\nexport type ButtonPreset =\n  | \"primary\"\n  | \"secondary\"\n  | \"text\"\n  | \"hextech\"\n  | \"dimmed\";\n\ninterface ButtonProps extends AriaButtonProps {\n  innerClassName?: string | ((values: ButtonRenderProps) => string);\n  preset?: ButtonPreset;\n  thin?: boolean;\n  shape?: ButtonShape;\n}\n\nconst buttonBorder = tv({\n  base: \"bg-gradient-to-t p-0.5 outline-none transition-colors duration-200\",\n  variants: {\n    preset: {\n      primary: \"\",\n      secondary: \"\",\n      text: \"\",\n      hextech: \"\",\n      dimmed: dimmedGradient,\n    },\n    shape: {\n      round: \"aspect-square rounded-full\",\n      square: \"aspect-square\",\n      normal: \"\",\n    },\n    isHovered: {\n      true: \"\",\n    },\n    isPressed: {\n      true: \"\",\n    },\n    isDisabled: {\n      true: \"\",\n    },\n    isFocused: {\n      true: \"\",\n    },\n    isFocusVisible: {\n      true: \"\",\n    },\n    thin: {\n      true: \"p-px\",\n    },\n  },\n  compoundVariants: [\n    {\n      preset: [\"primary\", \"secondary\"],\n      class: goldGradient,\n    },\n    {\n      preset: [\"primary\", \"secondary\", \"dimmed\"],\n      isHovered: true,\n      class: goldGradientHover,\n    },\n    {\n      preset: [\"primary\", \"secondary\", \"dimmed\"],\n      isPressed: true,\n      class: goldGradientPressed,\n    },\n    {\n      preset: [\"primary\", \"secondary\", \"dimmed\"],\n      isDisabled: true,\n      class: disabledGradient,\n    },\n    {\n      preset: [\"primary\", \"secondary\"],\n      isFocusVisible: true,\n      class: \"outline outline-offset-2 outline-yellow-50\",\n    },\n    {\n      preset: [\"hextech\"],\n      class: hextechGradient,\n    },\n    {\n      preset: [\"hextech\"],\n      isHovered: true,\n      class: hextechGradientHover,\n    },\n    {\n      preset: [\"hextech\"],\n      isPressed: true,\n      class: hextechGradientPressed,\n    },\n    {\n      preset: [\"hextech\"],\n      isDisabled: true,\n      class: disabledGradient,\n    },\n  ],\n});\n\nconst button = tv({\n  base: \"text-lol-gold-300 font-beaufort block h-full w-full font-bold uppercase tracking-wide transition-colors duration-200\",\n  variants: {\n    preset: {\n      primary:\n        \"from-lol-gold-600 via-lol-gold-600 to-lol-gold-700 bg-gradient-to-b\",\n      secondary: \"\",\n      text: \"\",\n      hextech: \"text-lol-blue-100\",\n      dimmed: \"bg-lol-grey-hextech-black\",\n    },\n    isHovered: {\n      true: \"text-lol-gold-100\",\n    },\n    isPressed: {\n      true: \"text-lol-grey-150\",\n    },\n    isDisabled: {\n      true: \"text-lol-grey-150\",\n    },\n    isFocused: {\n      true: \"\",\n    },\n    isFocusVisible: {\n      true: \"\",\n    },\n    shape: {\n      round: \"rounded-full\",\n      square: \"\",\n      normal: \"\",\n    },\n  },\n  compoundVariants: [\n    {\n      preset: [\"primary\", \"secondary\", \"hextech\", \"dimmed\"],\n      class: \"px-4 py-2\",\n    },\n    {\n      preset: [\"primary\", \"secondary\", \"hextech\"],\n      class: \"bg-lol-grey-300\",\n    },\n    {\n      preset: [\"hextech\"],\n      isHovered: true,\n      class: \"text-lol-blue-100\",\n    },\n    {\n      preset: [\"hextech\"],\n      isPressed: true,\n      class: \"text-lol-blue-400\",\n    },\n    {\n      preset: [\"text\"],\n      shape: [\"normal\", \"square\"],\n      class:\n        \"relative after:absolute after:-bottom-2 after:-left-2 after:-right-2 after:-top-2\",\n    },\n    {\n      isHovered: true,\n      preset: \"primary\",\n      class: \"from-lol-gold-600 via-lol-gold-600 to-lol-gold-500\",\n    },\n    {\n      isPressed: true,\n      preset: \"primary\",\n      class:\n        \"from-lol-gold-600 via-lol-gold-700 to-lol-gold-700 text-lol-gold-500\",\n    },\n    {\n      shape: [\"round\", \"square\"],\n      class:\n        \"flex aspect-square h-7 items-center justify-center p-0 font-black leading-none\",\n    },\n    {\n      isHovered: true,\n      preset: \"text\",\n      shape: [\"round\", \"square\"],\n      class: \"bg-lol-grey-300\",\n    },\n  ],\n});\n\nfunction _Button(\n  {\n    children,\n    className,\n    preset = \"secondary\",\n    shape = \"normal\",\n    innerClassName,\n    thin = preset === \"dimmed\" ? true : false,\n    ...props\n  }: ButtonProps,\n  ref: Ref<HTMLButtonElement>,\n) {\n  return (\n    <AriaButton\n      ref={ref}\n      {...props}\n      className={(values) => {\n        return buttonBorder({\n          className: resolveClassName(className, values),\n          preset,\n          shape,\n          thin,\n          ...values,\n        });\n      }}\n    >\n      {(values) => {\n        return (\n          <span\n            className={button({\n              className: resolveClassName(innerClassName, values),\n              preset,\n              shape,\n              ...values,\n            })}\n          >\n            {typeof children === \"function\" ? children(values) : children}\n          </span>\n        );\n      }}\n    </AriaButton>\n  );\n}\n\nexport const Button = forwardRef(_Button);\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
+{"version":3,"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuEE;AAvEF,mBAAqC;AACrC,mCAGO;AACP,gCAAiC;AACjC,iBAAoB;AACpB,oBAAoB;AAgBb,MAAM,aAAS,gBAAI;AAAA,EACzB,MAAM,cAAAA,QAAQ;AAAA,EACd,UAAU;AAAA,IACT,QAAQ;AAAA,MACP,SAAS,cAAAA,QAAQ;AAAA,MACjB,WAAW,cAAAA,QAAQ;AAAA,MACnB,MAAM,cAAAA,QAAQ;AAAA,MACd,SAAS,cAAAA,QAAQ;AAAA,MACjB,QAAQ,cAAAA,QAAQ;AAAA,IACjB;AAAA,IACA,WAAW;AAAA,MACV,MAAM,cAAAA,QAAQ;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACV,MAAM,cAAAA,QAAQ;AAAA,IACf;AAAA,IACA,YAAY;AAAA,MACX,MAAM,cAAAA,QAAQ;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACV,MAAM;AAAA,IACP;AAAA,IACA,gBAAgB;AAAA,MACf,MAAM,cAAAA,QAAQ;AAAA,IACf;AAAA,IACA,OAAO;AAAA,MACN,OAAO,cAAAA,QAAQ;AAAA,MACf,QAAQ,cAAAA,QAAQ;AAAA,MAChB,QAAQ,cAAAA,QAAQ;AAAA,IACjB;AAAA,IACA,MAAM;AAAA,MACL,MAAM,cAAAA,QAAQ;AAAA,IACf;AAAA,EACD;AACD,CAAC;AAEM,SAAS,QACf;AAAA,EACC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO,WAAW;AAAA,EAClB,GAAG;AACJ,GACA,KACC;AACD,SACC;AAAA,IAAC,6BAAAC;AAAA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,CAAC,WAAW;AACtB,eAAO,OAAO;AAAA,UACb,eAAW,4CAAiB,WAAW,MAAM;AAAA,UAC7C;AAAA,UACA;AAAA,UACA;AAAA,UACA,GAAG;AAAA,QACJ,CAAC;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACF;AAEF;AAEO,MAAM,aAAS,yBAAW,OAAO;AACxC,OAAO,cAAc","names":["classes","AriaButton"],"ignoreList":[],"sources":["../../../src/components/button.tsx"],"sourcesContent":["import { type Ref, forwardRef } from \"react\";\nimport {\n\tButton as AriaButton,\n\ttype ButtonProps as AriaButtonProps,\n} from \"react-aria-components\";\nimport { resolveClassName } from \"../utilities/resolve-class-name.js\";\nimport { cva } from \"cva\";\nimport classes from \"./button.module\";\n\nexport type ButtonShape = \"round\" | \"square\" | \"normal\";\nexport type ButtonPreset =\n\t| \"primary\"\n\t| \"secondary\"\n\t| \"text\"\n\t| \"hextech\"\n\t| \"dimmed\";\n\ninterface ButtonProps extends AriaButtonProps {\n\tpreset?: ButtonPreset;\n\tthin?: boolean;\n\tshape?: ButtonShape;\n}\n\nexport const button = cva({\n\tbase: classes.button,\n\tvariants: {\n\t\tpreset: {\n\t\t\tprimary: classes.primary,\n\t\t\tsecondary: classes.secondary,\n\t\t\ttext: classes.text,\n\t\t\thextech: classes.hextech,\n\t\t\tdimmed: classes.dimmed,\n\t\t},\n\t\tisHovered: {\n\t\t\ttrue: classes.hover,\n\t\t},\n\t\tisPressed: {\n\t\t\ttrue: classes.press,\n\t\t},\n\t\tisDisabled: {\n\t\t\ttrue: classes.disabled,\n\t\t},\n\t\tisFocused: {\n\t\t\ttrue: \"\",\n\t\t},\n\t\tisFocusVisible: {\n\t\t\ttrue: classes.focusVisible,\n\t\t},\n\t\tshape: {\n\t\t\tround: classes.round,\n\t\t\tsquare: classes.square,\n\t\t\tnormal: classes.normal,\n\t\t},\n\t\tthin: {\n\t\t\ttrue: classes.thin,\n\t\t},\n\t},\n});\n\nexport function _Button(\n\t{\n\t\tchildren,\n\t\tclassName,\n\t\tpreset = \"secondary\",\n\t\tshape = \"normal\",\n\t\tthin = preset === \"dimmed\",\n\t\t...props\n\t}: ButtonProps,\n\tref: Ref<HTMLButtonElement>,\n) {\n\treturn (\n\t\t<AriaButton\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t\tclassName={(values) => {\n\t\t\t\treturn button({\n\t\t\t\t\tclassName: resolveClassName(className, values),\n\t\t\t\t\tpreset,\n\t\t\t\t\tshape,\n\t\t\t\t\tthin,\n\t\t\t\t\t...values,\n\t\t\t\t});\n\t\t\t}}\n\t\t>\n\t\t\t{children}\n\t\t</AriaButton>\n\t);\n}\n\nexport const Button = forwardRef(_Button);\nButton.displayName = \"Button\";\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

package/dist/lib/components/button.module.js

@@ -0,0 +1,27 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var button_exports = {};
+__export(button_exports, {
+  default: () => button_default
+});
+module.exports = __toCommonJS(button_exports);
+var import_button_module = require("./button_module.css");
+var button_default = { "button": "button_56ea2", "text": "text_56ea2", "round": "round_56ea2", "hover": "hover_56ea2", "square": "square_56ea2", "normal": "normal_56ea2", "press": "press_56ea2", "disabled": "disabled_56ea2", "hextech": "hextech_56ea2", "dimmed": "dimmed_56ea2", "selected": "selected_56ea2", "primary": "primary_56ea2", "secondary": "secondary_56ea2", "focusVisible": "focusVisible_56ea2", "thin": "thin_56ea2" };
+
+//# sourceMappingURL=button.module.js.map

package/dist/lib/components/button.module.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAO;AAAsB,IAAO,iBAAQ,EAAC,UAAS,gBAAe,QAAO,cAAa,SAAQ,eAAc,SAAQ,eAAc,UAAS,gBAAe,UAAS,gBAAe,SAAQ,eAAc,YAAW,kBAAiB,WAAU,iBAAgB,UAAS,gBAAe,YAAW,kBAAiB,WAAU,iBAAgB,aAAY,mBAAkB,gBAAe,sBAAqB,QAAO,aAAY","names":[],"ignoreList":[],"sources":["../../../src/components/button.module.css"],"sourcesContent":["import \"./button_module.css\";export default {\"button\":\"button_56ea2\",\"text\":\"text_56ea2\",\"round\":\"round_56ea2\",\"hover\":\"hover_56ea2\",\"square\":\"square_56ea2\",\"normal\":\"normal_56ea2\",\"press\":\"press_56ea2\",\"disabled\":\"disabled_56ea2\",\"hextech\":\"hextech_56ea2\",\"dimmed\":\"dimmed_56ea2\",\"selected\":\"selected_56ea2\",\"primary\":\"primary_56ea2\",\"secondary\":\"secondary_56ea2\",\"focusVisible\":\"focusVisible_56ea2\",\"thin\":\"thin_56ea2\"}//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

package/dist/lib/components/button_module.css

@@ -0,0 +1,158 @@
+.button_56ea2 {
+	border-radius: 0px;
+	border: 2px solid transparent;
+	outline: none;
+	transition: all;
+	transition-duration: 0.3s;
+
+	font-family: var(--lol-font-family-beaufort);
+	color: var(--lol-color-gold-300);
+	font-weight: 700;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	font-size: 1rem;
+
+	background: var(--lol-button-background-gradient) padding-box,
+		var(--lol-button-border-gradient) border-box;
+	display: inline-block;
+}
+
+.text_56ea2.round_56ea2.hover_56ea2, .text_56ea2.square_56ea2.hover_56ea2 {
+			--lol-button-background-gradient: var(--lol-gradient-grey-300);
+			--lol-button-border-gradient: var(--lol-gradient-transparent);
+		}
+
+.text_56ea2.round_56ea2,
+	.text_56ea2.square_56ea2,
+	.text_56ea2.normal_56ea2 {
+		position: relative;
+	}
+
+.text_56ea2.round_56ea2::after, .text_56ea2.square_56ea2::after, .text_56ea2.normal_56ea2::after {
+			position: absolute;
+			top: -0.5rem;
+			left: -0.5rem;
+			bottom: -0.5rem;
+			right: -0.5rem;
+			content: '';
+		}
+
+.hover_56ea2 {
+	color: var(--lol-color-gold-100);
+}
+
+.press_56ea2 {
+	color: var(--lol-color-grey-150);
+}
+
+.disabled_56ea2 {
+	color: var(--lol-color-grey-150);
+}
+
+.hextech_56ea2 {
+	color: var(--lol-color-blue-100);
+	--lol-button-border-gradient: var(--lol-gradient-hextech);
+	--lol-button-background-gradient: var(--lol-gradient-grey-300);
+}
+
+.hextech_56ea2.hover_56ea2 {
+		color: var(--lol-color-blue-100);
+		--lol-button-border-gradient: var(--lol-gradient-hextech-hover);
+	}
+
+.hextech_56ea2.press_56ea2 {
+		color: var(--lol-color-blue-400);
+		--lol-button-border-gradient: var(--lol-gradient-hextech-press);
+	}
+
+.hextech_56ea2.disabled_56ea2 {
+		color: var(--lol-color-grey-150);
+		--lol-button-border-gradient: var(--lol-gradient-disabled);
+	}
+
+.dimmed_56ea2 {
+	--lol-button-background-gradient: var(--lol-gradient-hextech-black);
+	--lol-button-border-gradient: var(--lol-gradient-grey-300);
+}
+
+.dimmed_56ea2.selected_56ea2 {
+		--lol-button-border-gradient: var(--lol-gradient-gold);
+	}
+
+.primary_56ea2 {
+	--lol-button-border-gradient: var(--lol-gradient-gold);
+	--lol-button-background-gradient: linear-gradient(to top, var(--lol-color-gold-600), var(--lol-color-gold-600), var(--lol-color-gold-700));
+}
+
+.primary_56ea2.hover_56ea2 {
+		--lol-button-background-gradient: linear-gradient(to top, var(--lol-color-gold-600), var(--lol-color-gold-600), var(--lol-color-gold-500));
+	}
+
+.primary_56ea2.press_56ea2 {
+		--lol-button-background-gradient: linear-gradient(to top, var(--lol-color-gold-600), var(--lol-color-gold-700), var(--lol-color-gold-700));
+	}
+
+.primary_56ea2,
+.secondary_56ea2,
+.hextech_56ea2,
+.dimmed_56ea2 {
+	padding: 0.5rem 1rem;
+}
+
+.secondary_56ea2 {
+	--lol-button-border-gradient: var(--lol-gradient-gold);
+	--lol-button-background-gradient: var(--lol-gradient-grey-300);
+}
+
+.primary_56ea2.hover_56ea2,
+.secondary_56ea2.hover_56ea2,
+.dimmed_56ea2.hover_56ea2 {
+	--lol-button-border-gradient: var(--lol-gradient-gold-hover);
+}
+
+
+.primary_56ea2.press_56ea2,
+.secondary_56ea2.press_56ea2,
+.dimmed_56ea2.press_56ea2 {
+	--lol-button-border-gradient: var(--lol-gradient-gold-press);
+}
+
+
+.primary_56ea2.disabled_56ea2,
+.secondary_56ea2.disabled_56ea2,
+.dimmed_56ea2.disabled_56ea2 {
+	--lol-button-border-gradient: var(--lol-gradient-disabled);
+}
+
+.primary_56ea2.focusVisible_56ea2,
+.secondary_56ea2.focusVisible_56ea2 {
+	outline-style: solid;
+	outline-offset: 2px;
+	outline-color: var(--lol-color-gold-400);
+}
+
+.round_56ea2 {
+	border-radius: 9999px;
+}
+
+.round_56ea2,
+.square_56ea2 {
+	display: flex;
+	aspect-ratio: 1/1;
+	height: 2rem;
+	align-items: center;
+	justify-content: center;
+	padding: 0px;
+	font-weight: 900;
+	line-height: 1;
+}
+
+.thin_56ea2 {
+	border-width: 1px;
+}
+
+.selected_56ea2 {
+	--lol-button-background-gradient: var(--lol-gradient-hextech);
+	box-shadow: inset 0 2px 4px 0 var(--lol-color-grey-300);
+	color: var(--lol-color-blue-100);
+}

package/dist/lib/components/card.d.ts

@@ -1,6 +1,6 @@
-import { ComponentProps } from "react";
+import type { ComponentProps } from "react";
 export interface CardProps extends ComponentProps<"div"> {
-    borderProps?: ComponentProps<"div">;
+    radius?: string;
+    borderWidth?: string;
 }
-export declare function Card({ children, className, style, borderProps }: CardProps): import("react/jsx-runtime").JSX.Element;
-export declare function borderInverted(r: string): string;
+export declare function Card({ className, style, radius, borderWidth, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/card.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,62 +17,50 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var card_exports = {};
 __export(card_exports, {
-  Card: () => Card,
-  borderInverted: () => borderInverted
+  Card: () => Card
 });
 module.exports = __toCommonJS(card_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_gradient = require("../utilities/gradient.js");
-var import_tv = require("../utilities/tv.js");
-const cardBorder = (0, import_tv.tv)({
-  base: ["bg-gradient-to-t p-[2px]", import_gradient.goldGradient],
-  variants: {}
+var import_cva = require("cva");
+var import_card = __toESM(require("./card.module"));
+const card = (0, import_cva.cva)({
+  base: import_card.default.card
 });
-const inner = (0, import_tv.tv)({
-  base: "bg-lol-grey-hextech-black w-full",
-  variants: {}
-});
-function Card({ children, className, style, borderProps }) {
-  const r = `1rem`;
+function Card({
+  className,
+  style,
+  radius = "1rem",
+  borderWidth = "2px",
+  ...props
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      ...borderProps ?? {},
-      className: cardBorder({
-        className: borderProps?.className
-      }),
+      className: card({ className }),
       style: {
-        WebkitMask: borderInverted(r),
-        mask: borderInverted(r),
-        ...borderProps?.style ?? {}
+        // @ts-ignore: Css variable
+        "--lol-card-radius": radius,
+        "--lol-card-border-width": borderWidth,
+        ...style ?? {}
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "div",
-        {
-          className: inner({
-            className
-          }),
-          style: {
-            WebkitMask: borderInverted(r),
-            mask: borderInverted(r),
-            ...style ?? {}
-          },
-          children
-        }
-      )
+      ...props
     }
   );
 }
-function borderInverted(r) {
-  return `radial-gradient(${r} at ${r} ${r},#0000 98%,#000) -${r} -${r}`;
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  Card,
-  borderInverted
+  Card
 });
 
 //# sourceMappingURL=card.js.map

package/dist/lib/components/card.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiCM;AAhCN,sBAA6B;AAC7B,gBAAmB;AAMnB,MAAM,iBAAa,cAAG;AAAA,EACpB,MAAM,CAAC,4BAA4B,4BAAY;AAAA,EAC/C,UAAU,CAAC;AACb,CAAC;AAED,MAAM,YAAQ,cAAG;AAAA,EACf,MAAM;AAAA,EACN,UAAU,CAAC;AACb,CAAC;AAEM,SAAS,KAAK,EAAE,UAAU,WAAW,OAAO,YAAY,GAAc;AAC3E,QAAM,IAAI;AAEV,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAI,eAAe,CAAC;AAAA,MACrB,WAAW,WAAW;AAAA,QACpB,WAAW,aAAa;AAAA,MAC1B,CAAC;AAAA,MACD,OAAO;AAAA,QACL,YAAY,eAAe,CAAC;AAAA,QAC5B,MAAM,eAAe,CAAC;AAAA,QACtB,GAAI,aAAa,SAAS,CAAC;AAAA,MAC7B;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,MAAM;AAAA,YACf;AAAA,UACF,CAAC;AAAA,UACD,OAAO;AAAA,YACL,YAAY,eAAe,CAAC;AAAA,YAC5B,MAAM,eAAe,CAAC;AAAA,YACtB,GAAI,SAAS,CAAC;AAAA,UAChB;AAAA,UAEC;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;AAEO,SAAS,eAAe,GAAW;AACxC,SAAO,mBAAmB,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC;AACtE","names":[],"sources":["../../../src/components/card.tsx"],"sourcesContent":["import { ComponentProps } from \"react\";\nimport { goldGradient } from \"../utilities/gradient.js\";\nimport { tv } from \"../utilities/tv.js\";\n\nexport interface CardProps extends ComponentProps<\"div\"> {\n  borderProps?: ComponentProps<\"div\">;\n}\n\nconst cardBorder = tv({\n  base: [\"bg-gradient-to-t p-[2px]\", goldGradient],\n  variants: {},\n});\n\nconst inner = tv({\n  base: \"bg-lol-grey-hextech-black w-full\",\n  variants: {},\n});\n\nexport function Card({ children, className, style, borderProps }: CardProps) {\n  const r = `1rem`;\n\n  return (\n    <div\n      {...(borderProps ?? {})}\n      className={cardBorder({\n        className: borderProps?.className,\n      })}\n      style={{\n        WebkitMask: borderInverted(r),\n        mask: borderInverted(r),\n        ...(borderProps?.style ?? {}),\n      }}\n    >\n      <div\n        className={inner({\n          className,\n        })}\n        style={{\n          WebkitMask: borderInverted(r),\n          mask: borderInverted(r),\n          ...(style ?? {}),\n        }}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\nexport function borderInverted(r: string) {\n  return `radial-gradient(${r} at ${r} ${r},#0000 98%,#000) -${r} -${r}`;\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
+{"version":3,"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBE;AArBF,iBAAoB;AAEpB,kBAAoB;AAOpB,MAAM,WAAO,gBAAI;AAAA,EAChB,MAAM,YAAAA,QAAQ;AACf,CAAC;AAEM,SAAS,KAAK;AAAA,EACpB;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,cAAc;AAAA,EACd,GAAG;AACJ,GAAc;AACb,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAW,KAAK,EAAE,UAAU,CAAC;AAAA,MAC7B,OAAO;AAAA;AAAA,QAEN,qBAAqB;AAAA,QACrB,2BAA2B;AAAA,QAC3B,GAAI,SAAS,CAAC;AAAA,MACf;AAAA,MACC,GAAG;AAAA;AAAA,EACL;AAEF","names":["classes"],"ignoreList":[],"sources":["../../../src/components/card.tsx"],"sourcesContent":["import { cva } from \"cva\";\nimport type { ComponentProps } from \"react\";\nimport classes from \"./card.module\";\n\nexport interface CardProps extends ComponentProps<\"div\"> {\n\tradius?: string;\n\tborderWidth?: string;\n}\n\nconst card = cva({\n\tbase: classes.card,\n});\n\nexport function Card({\n\tclassName,\n\tstyle,\n\tradius = \"1rem\",\n\tborderWidth = \"2px\",\n\t...props\n}: CardProps) {\n\treturn (\n\t\t<div\n\t\t\tclassName={card({ className })}\n\t\t\tstyle={{\n\t\t\t\t// @ts-ignore: Css variable\n\t\t\t\t\"--lol-card-radius\": radius,\n\t\t\t\t\"--lol-card-border-width\": borderWidth,\n\t\t\t\t...(style ?? {}),\n\t\t\t}}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

package/dist/lib/{utilities/outline.js → components/card.module.js}

@@ -16,15 +16,12 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var outline_exports = {};
-__export(outline_exports, {
-  outlineClassName: () => outlineClassName
-});
-module.exports = __toCommonJS(outline_exports);
-const outlineClassName = "outline outline-[#dcc188] outline-offset-2 outline-1";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  outlineClassName
+var card_exports = {};
+__export(card_exports, {
+  default: () => card_default
 });
+module.exports = __toCommonJS(card_exports);
+var import_card_module = require("./card_module.css");
+var card_default = { "card": "card_dfb9a" };
 
-//# sourceMappingURL=outline.js.map
+//# sourceMappingURL=card.module.js.map

package/dist/lib/components/card.module.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAAO;AAAoB,IAAO,eAAQ,EAAC,QAAO,aAAY","names":[],"ignoreList":[],"sources":["../../../src/components/card.module.css"],"sourcesContent":["import \"./card_module.css\";export default {\"card\":\"card_dfb9a\"}//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}