@lolmath/ui 3.0.1 → 3.1.1

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode, ComponentProps } from 'react';
-import { ButtonProps as ButtonProps$1, ButtonRenderProps, ListBoxItemProps, SelectProps as SelectProps$1, SearchFieldProps, Input, SliderProps, SliderTrackProps, SliderThumbProps, SliderTrackRenderProps, SliderOutputProps, SwitchProps, ProgressBarProps as ProgressBarProps$1, TextFieldProps, InputProps, RadioGroupProps, RadioProps, NumberFieldProps, Group, HeadingProps as HeadingProps$1, DialogTriggerProps, ModalOverlayProps, DialogProps, TabsProps, TabListProps, TabProps, TabPanelProps, CheckboxProps, TextAreaProps, TooltipProps, LabelProps as LabelProps$1 } from 'react-aria-components';
+import { ButtonProps as ButtonProps$1, ButtonRenderProps, ListBoxItemProps, SelectProps as SelectProps$1, SearchFieldProps, Input, SliderProps, SliderTrackProps, SliderThumbProps, SliderTrackRenderProps, SliderOutputProps, SwitchProps, ProgressBarProps as ProgressBarProps$1, TextFieldProps, InputProps, RadioGroupProps, RadioProps, NumberFieldProps, Group, HeadingProps as HeadingProps$1, DialogTriggerProps, ModalOverlayProps, DialogProps, TabsProps, TabListProps, TabProps, TabPanelProps, CheckboxProps, TextAreaProps, TooltipProps, LabelProps as LabelProps$1, ToggleButtonProps as ToggleButtonProps$1 } from 'react-aria-components';
 export { Key, TooltipTrigger } from 'react-aria-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
@@ -208,4 +208,14 @@ declare function Label({ preset, color, className, ...rest }: LabelProps): JSX.E
 
 declare const tv: tailwind_variants.TV;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, type ButtonPreset, type ButtonShape, Card, type CardProps, Checkbox, DialogButtons, DialogHeading, DialogTrigger, Heading, type HeadingColor, type HeadingElement, Item, Label, Modal, NumberField, ProgressBar, Radio, RadioGroup, SearchField, Select, Slider, SliderOutput, Spinner, Switch, Tab, TabList, TabPanel, Tabs, Text, TextArea, type TextColor, type TextElement, TextField, type TextPreset, Tooltip, accordionTrigger, accordionTriggerInner, borderInverted, tv };
+type ToggleButtonShape = "round" | "square" | "normal";
+type ToggleButtonPreset = "gold" | "hextech" | "dimmed";
+interface ToggleButtonProps extends ToggleButtonProps$1 {
+    innerProps?: ComponentProps<"span">;
+    preset?: ToggleButtonPreset;
+    thin?: boolean;
+    shape?: ToggleButtonShape;
+}
+declare function ToggleButton({ children, className, innerProps, preset, shape, thin, ...props }: ToggleButtonProps): react_jsx_runtime.JSX.Element;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, type ButtonPreset, type ButtonShape, Card, type CardProps, Checkbox, DialogButtons, DialogHeading, DialogTrigger, Heading, type HeadingColor, type HeadingElement, Item, Label, Modal, NumberField, ProgressBar, Radio, RadioGroup, SearchField, Select, Slider, SliderOutput, Spinner, Switch, Tab, TabList, TabPanel, Tabs, Text, TextArea, type TextColor, type TextElement, TextField, type TextPreset, ToggleButton, type ToggleButtonPreset, type ToggleButtonShape, Tooltip, accordionTrigger, accordionTriggerInner, borderInverted, tv };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode, ComponentProps } from 'react';
-import { ButtonProps as ButtonProps$1, ButtonRenderProps, ListBoxItemProps, SelectProps as SelectProps$1, SearchFieldProps, Input, SliderProps, SliderTrackProps, SliderThumbProps, SliderTrackRenderProps, SliderOutputProps, SwitchProps, ProgressBarProps as ProgressBarProps$1, TextFieldProps, InputProps, RadioGroupProps, RadioProps, NumberFieldProps, Group, HeadingProps as HeadingProps$1, DialogTriggerProps, ModalOverlayProps, DialogProps, TabsProps, TabListProps, TabProps, TabPanelProps, CheckboxProps, TextAreaProps, TooltipProps, LabelProps as LabelProps$1 } from 'react-aria-components';
+import { ButtonProps as ButtonProps$1, ButtonRenderProps, ListBoxItemProps, SelectProps as SelectProps$1, SearchFieldProps, Input, SliderProps, SliderTrackProps, SliderThumbProps, SliderTrackRenderProps, SliderOutputProps, SwitchProps, ProgressBarProps as ProgressBarProps$1, TextFieldProps, InputProps, RadioGroupProps, RadioProps, NumberFieldProps, Group, HeadingProps as HeadingProps$1, DialogTriggerProps, ModalOverlayProps, DialogProps, TabsProps, TabListProps, TabProps, TabPanelProps, CheckboxProps, TextAreaProps, TooltipProps, LabelProps as LabelProps$1, ToggleButtonProps as ToggleButtonProps$1 } from 'react-aria-components';
 export { Key, TooltipTrigger } from 'react-aria-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
@@ -208,4 +208,14 @@ declare function Label({ preset, color, className, ...rest }: LabelProps): JSX.E
 
 declare const tv: tailwind_variants.TV;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, type ButtonPreset, type ButtonShape, Card, type CardProps, Checkbox, DialogButtons, DialogHeading, DialogTrigger, Heading, type HeadingColor, type HeadingElement, Item, Label, Modal, NumberField, ProgressBar, Radio, RadioGroup, SearchField, Select, Slider, SliderOutput, Spinner, Switch, Tab, TabList, TabPanel, Tabs, Text, TextArea, type TextColor, type TextElement, TextField, type TextPreset, Tooltip, accordionTrigger, accordionTriggerInner, borderInverted, tv };
+type ToggleButtonShape = "round" | "square" | "normal";
+type ToggleButtonPreset = "gold" | "hextech" | "dimmed";
+interface ToggleButtonProps extends ToggleButtonProps$1 {
+    innerProps?: ComponentProps<"span">;
+    preset?: ToggleButtonPreset;
+    thin?: boolean;
+    shape?: ToggleButtonShape;
+}
+declare function ToggleButton({ children, className, innerProps, preset, shape, thin, ...props }: ToggleButtonProps): react_jsx_runtime.JSX.Element;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, type ButtonPreset, type ButtonShape, Card, type CardProps, Checkbox, DialogButtons, DialogHeading, DialogTrigger, Heading, type HeadingColor, type HeadingElement, Item, Label, Modal, NumberField, ProgressBar, Radio, RadioGroup, SearchField, Select, Slider, SliderOutput, Spinner, Switch, Tab, TabList, TabPanel, Tabs, Text, TextArea, type TextColor, type TextElement, TextField, type TextPreset, ToggleButton, type ToggleButtonPreset, type ToggleButtonShape, Tooltip, accordionTrigger, accordionTriggerInner, borderInverted, tv };

package/dist/index.js

@@ -44,7 +44,7 @@ var tv = createTV({
 // src/components/button.tsx
 import { jsx } from "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: "",
@@ -72,6 +72,9 @@ var buttonBorder = tv({
     },
     isFocusVisible: {
       true: ""
+    },
+    thin: {
+      true: "p-px"
     }
   },
   compoundVariants: [
@@ -121,7 +124,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",
@@ -149,9 +152,6 @@ var button = tv({
       round: "rounded-full",
       square: "",
       normal: ""
-    },
-    thin: {
-      true: ""
     }
   },
   compoundVariants: [
@@ -163,16 +163,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,
@@ -200,7 +190,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,
@@ -229,6 +219,7 @@ function _Button({
           className: resolveClassName(className, values),
           preset,
           shape,
+          thin,
           ...values
         });
       },
@@ -240,7 +231,6 @@ function _Button({
               className: resolveClassName(innerClassName, values),
               preset,
               shape,
-              thin,
               ...values
             }),
             children: typeof children === "function" ? children(values) : children
@@ -1597,6 +1587,199 @@ function Label2({
     className: text({ preset, color, className })
   });
 }
+
+// src/components/toggle-button.tsx
+import {
+  ToggleButton as AriaToggleButton
+} from "react-aria-components";
+import { jsx as jsx18 } from "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__ */ jsx18(
+    AriaToggleButton,
+    {
+      ...props,
+      className: (values) => toggleButtonBorder({
+        ...values,
+        preset,
+        shape,
+        thin,
+        className: resolveClassName(className, values)
+      }),
+      children: (values) => /* @__PURE__ */ jsx18(
+        "span",
+        {
+          ...innerProps,
+          className: toggleButton({
+            ...values,
+            preset,
+            shape,
+            className: resolveClassName(innerProps.className, values)
+          }),
+          style: {
+            // backgroundImage: hextechMagic,
+            // backgroundPosition: "center",
+          },
+          children: typeof children === "function" ? children(values) : children
+        }
+      )
+    }
+  );
+}
 export {
   Accordion,
   AccordionContent,
@@ -1629,6 +1812,7 @@ export {
   Text,
   TextArea,
   TextField,
+  ToggleButton,
   Tooltip,
   TooltipTrigger,
   accordionTrigger,