@lolmath/ui 1.2.0 → 2.0.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode, ComponentProps } from 'react';
-import { ButtonProps as ButtonProps$1, ItemProps, SelectProps as SelectProps$1, SearchFieldProps, Input, SliderProps, SwitchProps, ProgressBarProps as ProgressBarProps$1, TextFieldProps, RadioGroupProps, RadioProps, LabelProps } from 'react-aria-components';
+import { ButtonProps as ButtonProps$1, ItemProps, SelectProps as SelectProps$1, SearchFieldProps, Input, SliderProps, SliderTrackProps, SliderThumbProps, SliderTrackRenderProps, SwitchProps, ProgressBarProps as ProgressBarProps$1, TextFieldProps, RadioGroupProps, RadioProps, LabelProps, NumberFieldProps, Group } from 'react-aria-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface ButtonProps extends ButtonProps$1 {
@@ -21,9 +21,16 @@ declare function SearchField({ inputProps, ...props }: SearchFieldProps & {
     inputProps?: ComponentProps<typeof Input>;
 }): react_jsx_runtime.JSX.Element;
 
-declare function Slider({ className, placeholder, label, ...props }: SliderProps & {
-    placeholder?: string;
+declare function Slider({ children, sliderThumbProps, sliderTrackProps, sliderTrackBackgroundClassName, sliderTrackForegroundClassName, ...props }: SliderProps & {
+    sliderTrackProps?: SliderTrackProps;
+    sliderThumbProps?: SliderThumbProps;
+    sliderTrackBackgroundClassName?: string | ((values: SliderTrackRenderProps) => string);
+    sliderTrackForegroundClassName?: string | ((values: SliderTrackRenderProps) => string);
 }): react_jsx_runtime.JSX.Element;
+interface SliderLabelProps {
+    children?: React.ReactNode;
+}
+declare function SliderLabel({ children }: SliderLabelProps): react_jsx_runtime.JSX.Element;
 
 declare function Switch({ className, placeholder, children, ...props }: SwitchProps & {
     placeholder?: string;
@@ -63,4 +70,9 @@ declare function Radio({ ...props }: RadioProps): react_jsx_runtime.JSX.Element;
 
 declare function Label({ ...props }: LabelProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, Item, Label, ProgressBar, Radio, RadioGroup, SearchField, Select, Slider, Switch, TextField };
+declare function NumberField({ inputProps, groupProps, ...props }: NumberFieldProps & {
+    inputProps?: ComponentProps<typeof Input>;
+    groupProps: ComponentProps<typeof Group>;
+}): react_jsx_runtime.JSX.Element;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, Item, Label, NumberField, ProgressBar, Radio, RadioGroup, SearchField, Select, Slider, SliderLabel, Switch, TextField };

package/dist/index.js

@@ -37,15 +37,15 @@ function _Button({ children, className, priority = "secondary", ...props }, ref)
           "span",
           {
             className: twMerge(
-              "block m-0.5 px-4 py-2 bg-[#1e2328] transition-colors duration-200",
+              "block m-0.5 px-4 py-2 bg-lol-gray-950 transition-colors duration-200",
               priority === "primary" && "bg-gradient-to-b",
               "text-[#cdbe91] tracking-wide",
-              values.isHovered && "text-[#f0e6d2]",
-              values.isPressed && "text-[#5c5b57]",
-              values.isDisabled && "text-[#5c5b57]",
+              values.isHovered && "text-lol-gold-100",
+              values.isPressed && "text-lol-gray-500",
+              values.isDisabled && "text-lol-gray-500",
               values.isFocused && "",
               values.isFocusVisible && "",
-              priority === "primary" && "from-[#5a401f] via-[#47341B] to-[#332717]",
+              priority === "primary" && "from-lol-gold-700 via-lol-gold-800 to-lol-gold-900",
               priority === "primary" && values.isHovered && "from-[#604522] via-[#846745] to-[#725634]",
               priority === "primary" && values.isPressed && "from-[#261b0d] via-[#261b0d] to-[#261b0d]  text-[#67604c]"
             ),
@@ -98,7 +98,7 @@ function Select({
           "span",
           {
             className: twMerge2(
-              "block m-px bg-[#1e2328] px-2 py-1 text-[#a09b8c] text-xs font-normal tracking-wide pr-6 bg-no-repeat"
+              "block m-px bg-lol-gray-950 px-2 py-1 text-[#a09b8c] text-xs font-normal tracking-wide pr-6 bg-no-repeat"
             ),
             style: {
               backgroundPosition: "right 0.5rem center",
@@ -132,7 +132,7 @@ function Item({ className, ...props }) {
         const finalClassName = typeof className === "function" ? className(values) : className;
         return twMerge2(
           "px-2 py-0.5 border-b border-[#1f2123] text-[#cdbe91] text-sm font-spiegel font-bold outline-none",
-          values.isHovered && "bg-[#1e2328] text-[#f0e6d2]",
+          values.isHovered && "bg-lol-gray-950 text-lol-gold-100",
           values.isPressed && "bg-[#1e232880] text-[#463714]",
           values.isFocusVisible && outlineClassName,
           values.isFocused && "",
@@ -152,8 +152,8 @@ import {
 import { twMerge as twMerge3 } from "tailwind-merge";
 
 // src/utilities/resolve-classname.ts
-function resolveClassname(props, values) {
-  return typeof props.className === "function" ? props.className(values) : props.className;
+function resolveClassname(className, values) {
+  return typeof className === "function" ? className(values) : className;
 }
 
 // src/components/search-field.tsx
@@ -166,9 +166,9 @@ function SearchField({
     AriaSearchField,
     {
       className: (values) => {
-        const finalClassName = typeof props.className === "function" ? props.className(values) : props.className;
+        const finalClassName = resolveClassname(props.className, values);
         return twMerge3(
-          "flex flex-col outline-none [webkit-search-cancel-button]:hidden",
+          "flex flex-col outline-none",
           borderClassName,
           "focus-within:from-lol-gold-300 focus-within:via-lol-gold-200 focus-within:to-lol-gold-50",
           props.isDisabled && "from-lol-gray-700 via-lol-gray-700 to-lol-gray-700",
@@ -176,12 +176,12 @@ function SearchField({
         );
       },
       ...props,
-      children: ({ state }) => /* @__PURE__ */ jsxs2(
+      children: ({ state, isDisabled }) => /* @__PURE__ */ jsxs2(
         "div",
         {
           className: twMerge3(
-            "m-px bg-[#000000] flex flex-row focus-within:from-[#071019] focus-within:to-[#20272c] focus-within:bg-gradient-to-b",
-            props.isDisabled && "text-[#5c5b57] bg-[#1e2328]"
+            "m-px bg-black flex flex-row focus-within:from-lol-gray-950 focus-within:to-lol-gray-900 focus-within:bg-gradient-to-b",
+            props.isDisabled && "bg-lol-gray-950"
           ),
           children: [
             /* @__PURE__ */ jsx3(
@@ -189,9 +189,13 @@ function SearchField({
               {
                 ...inputProps,
                 className: (values) => {
-                  const finalClassName = resolveClassname(inputProps, values);
+                  const finalClassName = resolveClassname(
+                    inputProps.className,
+                    values
+                  );
                   return twMerge3(
-                    "bg-transparent grow py-2 px-3 text-lol-gold-50 text-xs outline-none font-spiegel tracking-wide",
+                    "bg-transparent grow py-2 px-3 text-lol-gold-50 text-xs outline-none font-spiegel tracking-wide pl-6",
+                    props.isDisabled && "text-lol-gray-500",
                     finalClassName
                   );
                 },
@@ -204,12 +208,12 @@ function SearchField({
                 }
               }
             ),
-            state.value.length > 0 && /* @__PURE__ */ jsx3(
+            state.value.length > 0 && !isDisabled && /* @__PURE__ */ jsx3(
               AriaButton3,
               {
                 className: (buttonValues) => twMerge3(
                   "font-black text-[#cdbe91] text-xs px-4",
-                  buttonValues.isHovered && "text-[#f0e6d2]",
+                  buttonValues.isHovered && "text-lol-gold-100",
                   buttonValues.isPressed && "text-[#463714]"
                 ),
                 children: "\u2715"
@@ -241,62 +245,113 @@ var sliderDisabled = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAAB
 // src/components/slider.tsx
 import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function Slider({
-  className,
-  placeholder,
-  label,
+  children,
+  sliderThumbProps = {},
+  sliderTrackProps = {},
+  sliderTrackBackgroundClassName,
+  sliderTrackForegroundClassName,
   ...props
 }) {
-  return /* @__PURE__ */ jsx4(AriaSlider, { ...props, className: "", children: ({ state }) => /* @__PURE__ */ jsxs3(Fragment2, { children: [
-    /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between font-spiegel text-xs text-[#a09b8c] font-normal tracking-wide", children: [
-      /* @__PURE__ */ jsx4(Label, { className: "", children: label }),
-      /* @__PURE__ */ jsx4(AriaSliderOutput, { className: "", children: state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") })
-    ] }),
-    /* @__PURE__ */ jsx4(AriaSliderTrack, { className: "relative w-full h-7 group", children: ({ state: state2 }) => {
-      const left = state2.values.length === 1 ? 0 : state2.getThumbPercent(0) * 100;
-      const width = state2.values.length === 1 ? state2.getThumbPercent(0) * 100 : (state2.getThumbPercent(1) - state2.getThumbPercent(0)) * 100;
-      return /* @__PURE__ */ jsxs3(Fragment2, { children: [
-        /* @__PURE__ */ jsx4("div", { className: "absolute h-0.5 top-[50%] transform translate-y-[-50%] w-full rounded-full bg-[#1e2328]" }),
+  return /* @__PURE__ */ jsx4(
+    AriaSlider,
+    {
+      ...props,
+      className: (values) => {
+        const resolvedClassName = resolveClassname(props.className, values);
+        return twMerge4("", resolvedClassName);
+      },
+      children: (values) => /* @__PURE__ */ jsxs3(Fragment2, { children: [
+        typeof children === "function" ? children(values) : children,
         /* @__PURE__ */ jsx4(
-          "div",
+          AriaSliderTrack,
           {
-            className: twMerge4(
-              "absolute h-0.5 top-[50%] transform translate-y-[-50%] from-[#463714] to-[#695625] bg-gradient-to-r",
-              state2.isDisabled ? "from-transparent via-transparent to-transparent bg-[#5C5B57]" : [
-                "group-hover:from-[#785a28] group-hover:via-[#c89b3c] group-hover:to-[#c8aa6e]",
-                "group-active:from-[#695625] group-active:via-[#463714] group-active:to-[#463714]"
-              ]
-            ),
-            style: { left: `${left}%`, width: `${width}%` }
-          }
-        ),
-        state2.values.map((_, i) => {
-          let zIndex = state2.getThumbPercent(i === 1 ? 0 : 1) === (i === 1 ? 0 : 1) ? 2 : void 0;
-          return /* @__PURE__ */ jsx4(Fragment2, { children: /* @__PURE__ */ jsx4(
-            AriaSliderThumb,
-            {
-              index: i,
-              className: twMerge4(
-                "bg-contain h-7 w-7 top-[50%] outline-none",
-                "[background-image:var(--normal)]",
-                state2.isDisabled ? "[background-image:var(--disabled)]" : [
-                  state2.isThumbDragging(i) && "[background-image:var(--active)]",
-                  !state2.isThumbDragging(0) && !state2.isThumbDragging(1) && "group-hover:[background-image:var(--hover)]"
-                ]
-              ),
-              style: {
-                "--normal": sliderNormal,
-                "--hover": sliderHover,
-                "--active": sliderActive,
-                "--disabled": sliderDisabled,
-                zIndex
-              }
+            ...sliderTrackProps,
+            className: (sliderTrackRenderProps) => {
+              const resolvedClassName = resolveClassname(
+                sliderTrackProps.className,
+                sliderTrackRenderProps
+              );
+              return twMerge4("relative w-full h-7 group", resolvedClassName);
             },
-            i
-          ) });
-        })
-      ] });
-    } })
-  ] }) });
+            children: (values2) => {
+              const left = values2.state.values.length === 1 ? 0 : values2.state.getThumbPercent(0) * 100;
+              const width = values2.state.values.length === 1 ? values2.state.getThumbPercent(0) * 100 : (values2.state.getThumbPercent(1) - values2.state.getThumbPercent(0)) * 100;
+              return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+                /* @__PURE__ */ jsx4(
+                  "div",
+                  {
+                    className: twMerge4(
+                      "absolute h-0.5 top-[50%] transform translate-y-[-50%] w-full rounded-full bg-lol-gray-950",
+                      resolveClassname(sliderTrackBackgroundClassName, values2)
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx4(
+                  "div",
+                  {
+                    className: twMerge4(
+                      "absolute h-0.5 top-[50%] transform translate-y-[-50%] from-[#463714] to-[#695625] bg-gradient-to-r",
+                      values2.state.isDisabled ? "from-transparent via-transparent to-transparent bg-[#5C5B57]" : [
+                        "group-hover:from-[#785a28] group-hover:via-[#c89b3c] group-hover:to-[#c8aa6e]",
+                        "group-active:from-[#695625] group-active:via-[#463714] group-active:to-[#463714]"
+                      ],
+                      resolveClassname(sliderTrackForegroundClassName, values2)
+                    ),
+                    style: { left: `${left}%`, width: `${width}%` }
+                  }
+                ),
+                values2.state.values.map((_, i) => {
+                  let zIndex = values2.state.getThumbPercent(i === 1 ? 0 : 1) === (i === 1 ? 0 : 1) ? 2 : void 0;
+                  return /* @__PURE__ */ jsx4(Fragment2, { children: /* @__PURE__ */ jsx4(
+                    AriaSliderThumb,
+                    {
+                      index: i,
+                      ...sliderThumbProps,
+                      className: (sliderThumbRenderProps) => {
+                        const resolvedClassName = resolveClassname(
+                          sliderThumbProps.className,
+                          sliderThumbRenderProps
+                        );
+                        return twMerge4(
+                          "bg-contain h-7 w-7 top-[50%] outline-none",
+                          "[background-image:var(--normal)]",
+                          sliderThumbRenderProps.isDisabled ? "[background-image:var(--disabled)]" : [
+                            sliderThumbRenderProps.state.isThumbDragging(
+                              i
+                            ) && "[background-image:var(--active)]",
+                            !sliderThumbRenderProps.state.isThumbDragging(
+                              0
+                            ) && !sliderThumbRenderProps.state.isThumbDragging(
+                              1
+                            ) && "group-hover:[background-image:var(--hover)]"
+                          ],
+                          resolvedClassName
+                        );
+                      },
+                      style: {
+                        "--normal": sliderNormal,
+                        "--hover": sliderHover,
+                        "--active": sliderActive,
+                        "--disabled": sliderDisabled,
+                        zIndex
+                      }
+                    },
+                    i
+                  ) });
+                })
+              ] });
+            }
+          }
+        )
+      ] })
+    }
+  );
+}
+function SliderLabel({ children }) {
+  return /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between font-spiegel text-xs text-lol-gray-300 font-normal tracking-wide", children: [
+    /* @__PURE__ */ jsx4(Label, { className: "", children }),
+    /* @__PURE__ */ jsx4(AriaSliderOutput, { className: "", children: (sliderRenderProps) => sliderRenderProps.state.values.map((_, i) => sliderRenderProps.state.getThumbValueLabel(i)).join(" \u2013 ") })
+  ] });
 }
 
 // src/components/switch.tsx
@@ -331,7 +386,7 @@ function Switch({
               "div",
               {
                 className: twMerge5(
-                  "relative grid h-full w-full rounded-full bg-[#1e2328] transition-colors duration-200 ease-in-out",
+                  "relative grid h-full w-full rounded-full bg-lol-gray-950 transition-colors duration-200 ease-in-out",
                   values.isPressed && "",
                   values.isSelected && "bg-green-800",
                   values.isSelected && values.isPressed && "bg-green-900",
@@ -349,7 +404,7 @@ function Switch({
                       values.isPressed && borderPressedClassName,
                       values.isDisabled && borderDisabledClassName
                     ),
-                    children: /* @__PURE__ */ jsx5("span", { className: "block h-full w-full rounded-full bg-[#1e2328]" })
+                    children: /* @__PURE__ */ jsx5("span", { className: "block h-full w-full rounded-full bg-lol-gray-950" })
                   }
                 )
               }
@@ -375,7 +430,7 @@ function ProgressBar({
   ...props
 }) {
   return /* @__PURE__ */ jsx6(AriaProgressBar, { className: "flex w-56 flex-col gap-1 text-sm", ...props, children: ({ percentage, valueText }) => /* @__PURE__ */ jsxs5(Fragment4, { children: [
-    /* @__PURE__ */ jsxs5("div", { className: "flex font-[beaufort] font-bold uppercase text-[#f0e6d2]", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex font-[beaufort] font-bold uppercase text-lol-gold-100", children: [
       /* @__PURE__ */ jsx6(Label2, { className: "flex-1 ", children: label ?? "Loading" }),
       /* @__PURE__ */ jsx6("span", { children: valueText })
     ] }),
@@ -386,15 +441,21 @@ function ProgressBar({
           borderClassName,
           "-ml-0.5 -mr-1 h-3 rounded-full p-px"
         ),
-        children: /* @__PURE__ */ jsx6("div", { className: twMerge6("h-full w-full rounded-full bg-[#1e2328]"), children: /* @__PURE__ */ jsx6(
+        children: /* @__PURE__ */ jsx6(
           "div",
           {
-            className: twMerge6(
-              "h-full rounded-full bg-gradient-to-r from-[#005A82] via-[#067F9B] to-[#73CCD5]"
-            ),
-            style: { width: `${percentage}%` }
+            className: twMerge6("h-full w-full rounded-full bg-lol-gray-950"),
+            children: /* @__PURE__ */ jsx6(
+              "div",
+              {
+                className: twMerge6(
+                  "h-full rounded-full bg-gradient-to-r from-[#005A82] via-[#067F9B] to-[#73CCD5]"
+                ),
+                style: { width: `${percentage}%` }
+              }
+            )
           }
-        ) })
+        )
       }
     )
   ] }) });
@@ -495,9 +556,9 @@ function TextField({
     AriaTextField,
     {
       className: (values) => {
-        const finalClassName = typeof props.className === "function" ? props.className(values) : props.className;
+        const finalClassName = resolveClassname(props.className, values);
         return twMerge8(
-          "flex flex-col outline-none [webkit-search-cancel-button]:hidden",
+          "flex flex-col outline-none",
           borderClassName,
           "focus-within:from-lol-gold-300 focus-within:via-lol-gold-200 focus-within:to-lol-gold-50",
           props.isDisabled && "from-lol-gray-700 via-lol-gray-700 to-lol-gray-700",
@@ -510,16 +571,20 @@ function TextField({
         {
           className: twMerge8(
             "m-px bg-black flex flex-row focus-within:from-lol-gray-950 focus-within:to-lol-gray-900 focus-within:bg-gradient-to-b",
-            props.isDisabled && "text-[#5c5b57] bg-lol-gray-950"
+            props.isDisabled && "bg-lol-gray-950"
           ),
           children: /* @__PURE__ */ jsx8(
             AriaInput2,
             {
               ...inputProps,
               className: (values) => {
-                const finalClassName = typeof inputProps.className === "function" ? inputProps.className(values) : inputProps.className;
+                const finalClassName = resolveClassname(
+                  inputProps.className,
+                  values
+                );
                 return twMerge8(
                   "bg-transparent grow py-2 px-3 text-lol-gold-50 text-xs outline-none font-spiegel tracking-wide",
+                  values.isDisabled && "text-lol-gray-500",
                   finalClassName
                 );
               },
@@ -545,7 +610,7 @@ function RadioGroup({ ...props }) {
     {
       ...props,
       className: (values) => {
-        const finalClassName = resolveClassname(props, values);
+        const finalClassName = resolveClassname(props.className, values);
         return twMerge9("flex flex-col items-start", finalClassName);
       }
     }
@@ -557,7 +622,7 @@ function Radio({ ...props }) {
     {
       ...props,
       className: (values) => {
-        const finalClassName = resolveClassname(props, values);
+        const finalClassName = resolveClassname(props.className, values);
         return twMerge9(
           "text-lol-gold-300 font-spiegel text-xs font-normal py-2 bg-no-repeat bg-[length:18px] bg-left pl-6 pr-4",
           values.isDisabled ? "text-lol-gray-500" : values.isHovered || values.isSelected ? "text-lol-gold-50" : "",
@@ -596,6 +661,60 @@ function Label3({ ...props }) {
     }
   );
 }
+
+// src/components/number-field.tsx
+import {
+  NumberField as AriaNumberField,
+  Input as AriaInput3,
+  Group,
+  Button as Button2
+} from "react-aria-components";
+import { twMerge as twMerge11 } from "tailwind-merge";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+function NumberField({
+  inputProps = {},
+  groupProps = {},
+  ...props
+}) {
+  return /* @__PURE__ */ jsx11(AriaNumberField, { ...props, children: /* @__PURE__ */ jsxs7(
+    Group,
+    {
+      ...groupProps,
+      className: (values) => {
+        const finalClassName = resolveClassname(groupProps.className, values);
+        return twMerge11(
+          "grid grid-cols-[auto_1fr_auto] outline-none gap-px p-px",
+          borderClassName,
+          "focus-within:from-lol-gold-300 focus-within:via-lol-gold-200 focus-within:to-lol-gold-50",
+          props.isDisabled && "from-lol-gray-700 via-lol-gray-700 to-lol-gray-700",
+          finalClassName
+        );
+      },
+      children: [
+        /* @__PURE__ */ jsx11(Button2, { className: "text-lol-gray-50 px-2.5 bg-black", slot: "decrement", children: "-" }),
+        /* @__PURE__ */ jsx11(
+          AriaInput3,
+          {
+            ...inputProps,
+            className: (values) => {
+              const finalClassName = resolveClassname(
+                inputProps.className,
+                values
+              );
+              return twMerge11(
+                "bg-black w-full py-2 px-3 text-lol-gold-50 text-xs outline-none font-spiegel",
+                values.isDisabled && "text-lol-gray-500 bg-lol-gray-950",
+                values.isFocused && "from-lol-gray-950 to-lol-gray-900 bg-gradient-to-b",
+                finalClassName
+              );
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx11(Button2, { className: "text-lol-gray-50 px-2.5 bg-black", slot: "increment", children: "+" })
+      ]
+    }
+  ) });
+}
 export {
   Accordion,
   AccordionContent,
@@ -604,12 +723,14 @@ export {
   Button,
   Item,
   Label3 as Label,
+  NumberField,
   ProgressBar,
   Radio,
   RadioGroup,
   SearchField,
   Select,
   Slider,
+  SliderLabel,
   Switch,
   TextField
 };