@lolmath/ui 3.0.0 → 3.1.0

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,
@@ -368,7 +369,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,
@@ -906,9 +907,6 @@ function startViewTransition(callback) {
 
 // src/components/accordion.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var accordion = tv({
-  base: "bg-lol-blue-950"
-});
 function Accordion({ children, className }) {
   const [activeItem, setActiveItem] = (0, import_react3.useState)("");
   const id = useCssId();
@@ -923,9 +921,7 @@ function Accordion({ children, className }) {
       children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
         "div",
         {
-          className: accordion({
-            className
-          }),
+          className,
           style: {
             viewTransitionName: `${id}`
           },
@@ -1723,6 +1719,207 @@ 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 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: ""
+    }
+  },
+  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: ""
+    },
+    thin: {
+      true: ""
+    }
+  },
+  compoundVariants: [
+    {
+      preset: ["gold", "hextech", "dimmed"],
+      class: "px-4 py-2"
+    },
+    {
+      preset: ["gold", "hextech", "dimmed"],
+      thin: true,
+      class: "m-px"
+    },
+    {
+      preset: ["gold", "hextech", "dimmed"],
+      thin: false,
+      class: "m-0.5"
+    },
+    {
+      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,
+        className: resolveClassName(className, values)
+      }),
+      children: (values) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        "span",
+        {
+          ...innerProps,
+          className: toggleButton({
+            ...values,
+            preset,
+            shape,
+            thin,
+            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,
@@ -1756,6 +1953,7 @@ function Label2({
   Text,
   TextArea,
   TextField,
+  ToggleButton,
   Tooltip,
   TooltipTrigger,
   accordionTrigger,