@lolmath/ui 3.0.1 → 3.1.1

package/dist/index.cjs

@@ -51,6 +51,7 @@ __export(src_exports, {
   Text: () => Text,
   TextArea: () => TextArea,
   TextField: () => TextField,
+  ToggleButton: () => ToggleButton,
   Tooltip: () => Tooltip,
   TooltipTrigger: () => import_react_aria_components15.TooltipTrigger,
   accordionTrigger: () => accordionTrigger,
@@ -212,7 +213,7 @@ var tv = (0, import_tailwind_variants.createTV)({
 // src/components/button.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var buttonBorder = tv({
-  base: "bg-gradient-to-t outline-none transition-colors duration-200",
+  base: "bg-gradient-to-t p-0.5 outline-none transition-colors duration-200",
   variants: {
     preset: {
       primary: "",
@@ -240,6 +241,9 @@ var buttonBorder = tv({
     },
     isFocusVisible: {
       true: ""
+    },
+    thin: {
+      true: "p-px"
     }
   },
   compoundVariants: [
@@ -289,7 +293,7 @@ var buttonBorder = tv({
   ]
 });
 var button = tv({
-  base: "text-lol-gold-300 font-beaufort block font-bold uppercase tracking-wide transition-colors duration-200",
+  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",
@@ -317,9 +321,6 @@ var button = tv({
       round: "rounded-full",
       square: "",
       normal: ""
-    },
-    thin: {
-      true: ""
     }
   },
   compoundVariants: [
@@ -331,16 +332,6 @@ var button = tv({
       preset: ["primary", "secondary", "hextech"],
       class: "bg-lol-grey-300"
     },
-    {
-      preset: ["primary", "secondary", "hextech", "dimmed"],
-      thin: true,
-      class: "m-px"
-    },
-    {
-      preset: ["primary", "secondary", "hextech", "dimmed"],
-      thin: false,
-      class: "m-0.5"
-    },
     {
       preset: ["hextech"],
       isHovered: true,
@@ -368,7 +359,7 @@ var button = tv({
     },
     {
       shape: ["round", "square"],
-      class: "aspect-square p-1.5"
+      class: "flex aspect-square h-7 items-center justify-center p-0 font-black leading-none"
     },
     {
       isHovered: true,
@@ -397,6 +388,7 @@ function _Button({
           className: resolveClassName(className, values),
           preset,
           shape,
+          thin,
           ...values
         });
       },
@@ -408,7 +400,6 @@ function _Button({
               className: resolveClassName(innerClassName, values),
               preset,
               shape,
-              thin,
               ...values
             }),
             children: typeof children === "function" ? children(values) : children
@@ -1718,6 +1709,197 @@ function Label2({
     className: text({ preset, color, className })
   });
 }
+
+// src/components/toggle-button.tsx
+var import_react_aria_components17 = require("react-aria-components");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var toggleButtonBorder = tv({
+  base: "bg-gradient-to-t p-0.5 outline-none transition-colors duration-200",
+  variants: {
+    preset: {
+      gold: "",
+      hextech: "",
+      dimmed: dimmedGradient
+    },
+    shape: {
+      round: "aspect-square rounded-full",
+      square: "aspect-square",
+      normal: ""
+    },
+    isHovered: {
+      true: ""
+    },
+    isPressed: {
+      true: ""
+    },
+    isDisabled: {
+      true: ""
+    },
+    isFocused: {
+      true: ""
+    },
+    isFocusVisible: {
+      true: ""
+    },
+    isSelected: {
+      true: ""
+    },
+    thin: {
+      true: "p-px"
+    }
+  },
+  compoundVariants: [
+    {
+      preset: ["dimmed"],
+      isSelected: true,
+      class: [goldGradient]
+    },
+    {
+      preset: ["gold"],
+      class: goldGradient
+    },
+    {
+      preset: ["gold", "dimmed"],
+      isHovered: true,
+      class: goldGradientHover
+    },
+    {
+      preset: ["gold", "dimmed"],
+      isPressed: true,
+      class: goldGradientPressed
+    },
+    {
+      preset: ["gold", "dimmed"],
+      isDisabled: true,
+      class: goldGradientDisabled
+    },
+    {
+      preset: ["gold"],
+      isFocusVisible: true,
+      class: "outline outline-offset-2 outline-yellow-50"
+    },
+    {
+      preset: ["hextech"],
+      class: hextechGradient
+    },
+    {
+      preset: ["hextech"],
+      isHovered: true,
+      class: hextechGradientHover
+    },
+    {
+      preset: ["hextech"],
+      isPressed: true,
+      class: hextechGradientPressed
+    },
+    {
+      preset: ["hextech"],
+      isDisabled: true,
+      class: hextechGradientDisabled
+    }
+  ]
+});
+var toggleButton = tv({
+  base: "text-lol-gold-300 font-beaufort block font-bold uppercase tracking-wide transition-colors duration-200",
+  variants: {
+    preset: {
+      gold: "bg-lol-grey-300",
+      hextech: "text-lol-blue-100 bg-lol-grey-300",
+      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: ""
+    },
+    isSelected: {
+      true: [
+        hextechGradient,
+        "text-lol-blue-100 shadow-lol-grey-300 bg-gradient-to-t shadow shadow-inner"
+      ]
+    },
+    isFocusVisible: {
+      true: ""
+    },
+    shape: {
+      round: "rounded-full",
+      square: "",
+      normal: ""
+    }
+  },
+  compoundVariants: [
+    {
+      preset: ["gold", "hextech", "dimmed"],
+      class: "px-4 py-2"
+    },
+    {
+      preset: ["hextech"],
+      isHovered: true,
+      class: "text-lol-blue-100"
+    },
+    {
+      preset: ["hextech"],
+      isPressed: true,
+      class: "text-lol-blue-400"
+    },
+    {
+      preset: ["hextech"],
+      isSelected: true,
+      class: ""
+    },
+    {
+      shape: ["round", "square"],
+      class: "flex aspect-square h-7 items-center justify-center p-0 font-black leading-none"
+    }
+  ]
+});
+function ToggleButton({
+  children,
+  className,
+  innerProps = {},
+  preset = "gold",
+  shape = "normal",
+  thin = preset === "dimmed" ? true : false,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    import_react_aria_components17.ToggleButton,
+    {
+      ...props,
+      className: (values) => toggleButtonBorder({
+        ...values,
+        preset,
+        shape,
+        thin,
+        className: resolveClassName(className, values)
+      }),
+      children: (values) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        "span",
+        {
+          ...innerProps,
+          className: toggleButton({
+            ...values,
+            preset,
+            shape,
+            className: resolveClassName(innerProps.className, values)
+          }),
+          style: {
+            // backgroundImage: hextechMagic,
+            // backgroundPosition: "center",
+          },
+          children: typeof children === "function" ? children(values) : children
+        }
+      )
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -1751,6 +1933,7 @@ function Label2({
   Text,
   TextArea,
   TextField,
+  ToggleButton,
   Tooltip,
   TooltipTrigger,
   accordionTrigger,