@lolmath/ui 3.0.1 → 3.1.0

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

@@ -200,7 +200,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,
@@ -1597,6 +1597,209 @@ 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 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__ */ jsx18(
+    AriaToggleButton,
+    {
+      ...props,
+      className: (values) => toggleButtonBorder({
+        ...values,
+        preset,
+        shape,
+        className: resolveClassName(className, values)
+      }),
+      children: (values) => /* @__PURE__ */ jsx18(
+        "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
+        }
+      )
+    }
+  );
+}
 export {
   Accordion,
   AccordionContent,
@@ -1629,6 +1832,7 @@ export {
   Text,
   TextArea,
   TextField,
+  ToggleButton,
   Tooltip,
   TooltipTrigger,
   accordionTrigger,