@lolmath/ui 1.2.0 → 2.0.0

package/dist/index.cjs

@@ -27,12 +27,14 @@ __export(src_exports, {
   Button: () => Button,
   Item: () => Item,
   Label: () => Label3,
+  NumberField: () => NumberField,
   ProgressBar: () => ProgressBar,
   Radio: () => Radio,
   RadioGroup: () => RadioGroup,
   SearchField: () => SearchField,
   Select: () => Select,
   Slider: () => Slider,
+  SliderLabel: () => SliderLabel,
   Switch: () => Switch,
   TextField: () => TextField
 });
@@ -75,15 +77,15 @@ function _Button({ children, className, priority = "secondary", ...props }, ref)
           "span",
           {
             className: (0, import_tailwind_merge.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]"
             ),
@@ -128,7 +130,7 @@ function Select({
           "span",
           {
             className: (0, import_tailwind_merge2.twMerge)(
-              "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",
@@ -162,7 +164,7 @@ function Item({ className, ...props }) {
         const finalClassName = typeof className === "function" ? className(values) : className;
         return (0, import_tailwind_merge2.twMerge)(
           "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 && "",
@@ -178,8 +180,8 @@ var import_react_aria_components3 = require("react-aria-components");
 var import_tailwind_merge3 = require("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
@@ -192,9 +194,9 @@ function SearchField({
     import_react_aria_components3.SearchField,
     {
       className: (values) => {
-        const finalClassName = typeof props.className === "function" ? props.className(values) : props.className;
+        const finalClassName = resolveClassname(props.className, values);
         return (0, import_tailwind_merge3.twMerge)(
-          "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",
@@ -202,12 +204,12 @@ function SearchField({
         );
       },
       ...props,
-      children: ({ state }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      children: ({ state, isDisabled }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
         "div",
         {
           className: (0, import_tailwind_merge3.twMerge)(
-            "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__ */ (0, import_jsx_runtime3.jsx)(
@@ -215,9 +217,13 @@ function SearchField({
               {
                 ...inputProps,
                 className: (values) => {
-                  const finalClassName = resolveClassname(inputProps, values);
+                  const finalClassName = resolveClassname(
+                    inputProps.className,
+                    values
+                  );
                   return (0, import_tailwind_merge3.twMerge)(
-                    "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
                   );
                 },
@@ -230,12 +236,12 @@ function SearchField({
                 }
               }
             ),
-            state.value.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            state.value.length > 0 && !isDisabled && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
               import_react_aria_components3.Button,
               {
                 className: (buttonValues) => (0, import_tailwind_merge3.twMerge)(
                   "font-black text-[#cdbe91] text-xs px-4",
-                  buttonValues.isHovered && "text-[#f0e6d2]",
+                  buttonValues.isHovered && "text-lol-gold-100",
                   buttonValues.isPressed && "text-[#463714]"
                 ),
                 children: "\u2715"
@@ -261,62 +267,113 @@ var sliderDisabled = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAAB
 // src/components/slider.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function Slider({
-  className,
-  placeholder,
-  label,
+  children,
+  sliderThumbProps = {},
+  sliderTrackProps = {},
+  sliderTrackBackgroundClassName,
+  sliderTrackForegroundClassName,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_aria_components4.Slider, { ...props, className: "", children: ({ state }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center justify-between font-spiegel text-xs text-[#a09b8c] font-normal tracking-wide", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_aria_components4.Label, { className: "", children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_aria_components4.SliderOutput, { className: "", children: state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_aria_components4.SliderTrack, { 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__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute h-0.5 top-[50%] transform translate-y-[-50%] w-full rounded-full bg-[#1e2328]" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_react_aria_components4.Slider,
+    {
+      ...props,
+      className: (values) => {
+        const resolvedClassName = resolveClassname(props.className, values);
+        return (0, import_tailwind_merge4.twMerge)("", resolvedClassName);
+      },
+      children: (values) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+        typeof children === "function" ? children(values) : children,
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "div",
+          import_react_aria_components4.SliderTrack,
           {
-            className: (0, import_tailwind_merge4.twMerge)(
-              "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__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            import_react_aria_components4.SliderThumb,
-            {
-              index: i,
-              className: (0, import_tailwind_merge4.twMerge)(
-                "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 (0, import_tailwind_merge4.twMerge)("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__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "div",
+                  {
+                    className: (0, import_tailwind_merge4.twMerge)(
+                      "absolute h-0.5 top-[50%] transform translate-y-[-50%] w-full rounded-full bg-lol-gray-950",
+                      resolveClassname(sliderTrackBackgroundClassName, values2)
+                    )
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "div",
+                  {
+                    className: (0, import_tailwind_merge4.twMerge)(
+                      "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__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    import_react_aria_components4.SliderThumb,
+                    {
+                      index: i,
+                      ...sliderThumbProps,
+                      className: (sliderThumbRenderProps) => {
+                        const resolvedClassName = resolveClassname(
+                          sliderThumbProps.className,
+                          sliderThumbRenderProps
+                        );
+                        return (0, import_tailwind_merge4.twMerge)(
+                          "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__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center justify-between font-spiegel text-xs text-lol-gray-300 font-normal tracking-wide", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_aria_components4.Label, { className: "", children }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_aria_components4.SliderOutput, { className: "", children: (sliderRenderProps) => sliderRenderProps.state.values.map((_, i) => sliderRenderProps.state.getThumbValueLabel(i)).join(" \u2013 ") })
+  ] });
 }
 
 // src/components/switch.tsx
@@ -351,7 +408,7 @@ function Switch({
               "div",
               {
                 className: (0, import_tailwind_merge5.twMerge)(
-                  "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",
@@ -369,7 +426,7 @@ function Switch({
                       values.isPressed && borderPressedClassName,
                       values.isDisabled && borderDisabledClassName
                     ),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "block h-full w-full rounded-full bg-[#1e2328]" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "block h-full w-full rounded-full bg-lol-gray-950" })
                   }
                 )
               }
@@ -392,7 +449,7 @@ function ProgressBar({
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_aria_components6.ProgressBar, { className: "flex w-56 flex-col gap-1 text-sm", ...props, children: ({ percentage, valueText }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex font-[beaufort] font-bold uppercase text-[#f0e6d2]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex font-[beaufort] font-bold uppercase text-lol-gold-100", children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_aria_components6.Label, { className: "flex-1 ", children: label ?? "Loading" }),
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: valueText })
     ] }),
@@ -403,15 +460,21 @@ function ProgressBar({
           borderClassName,
           "-ml-0.5 -mr-1 h-3 rounded-full p-px"
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: (0, import_tailwind_merge6.twMerge)("h-full w-full rounded-full bg-[#1e2328]"), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "div",
           {
-            className: (0, import_tailwind_merge6.twMerge)(
-              "h-full rounded-full bg-gradient-to-r from-[#005A82] via-[#067F9B] to-[#73CCD5]"
-            ),
-            style: { width: `${percentage}%` }
+            className: (0, import_tailwind_merge6.twMerge)("h-full w-full rounded-full bg-lol-gray-950"),
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "div",
+              {
+                className: (0, import_tailwind_merge6.twMerge)(
+                  "h-full rounded-full bg-gradient-to-r from-[#005A82] via-[#067F9B] to-[#73CCD5]"
+                ),
+                style: { width: `${percentage}%` }
+              }
+            )
           }
-        ) })
+        )
       }
     )
   ] }) });
@@ -509,9 +572,9 @@ function TextField({
     import_react_aria_components7.TextField,
     {
       className: (values) => {
-        const finalClassName = typeof props.className === "function" ? props.className(values) : props.className;
+        const finalClassName = resolveClassname(props.className, values);
         return (0, import_tailwind_merge8.twMerge)(
-          "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",
@@ -524,16 +587,20 @@ function TextField({
         {
           className: (0, import_tailwind_merge8.twMerge)(
             "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__ */ (0, import_jsx_runtime8.jsx)(
             import_react_aria_components7.Input,
             {
               ...inputProps,
               className: (values) => {
-                const finalClassName = typeof inputProps.className === "function" ? inputProps.className(values) : inputProps.className;
+                const finalClassName = resolveClassname(
+                  inputProps.className,
+                  values
+                );
                 return (0, import_tailwind_merge8.twMerge)(
                   "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
                 );
               },
@@ -556,7 +623,7 @@ function RadioGroup({ ...props }) {
     {
       ...props,
       className: (values) => {
-        const finalClassName = resolveClassname(props, values);
+        const finalClassName = resolveClassname(props.className, values);
         return (0, import_tailwind_merge9.twMerge)("flex flex-col items-start", finalClassName);
       }
     }
@@ -568,7 +635,7 @@ function Radio({ ...props }) {
     {
       ...props,
       className: (values) => {
-        const finalClassName = resolveClassname(props, values);
+        const finalClassName = resolveClassname(props.className, values);
         return (0, import_tailwind_merge9.twMerge)(
           "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" : "",
@@ -605,6 +672,55 @@ function Label3({ ...props }) {
     }
   );
 }
+
+// src/components/number-field.tsx
+var import_react_aria_components10 = require("react-aria-components");
+var import_tailwind_merge11 = require("tailwind-merge");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function NumberField({
+  inputProps = {},
+  groupProps = {},
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_aria_components10.NumberField, { ...props, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    import_react_aria_components10.Group,
+    {
+      ...groupProps,
+      className: (values) => {
+        const finalClassName = resolveClassname(groupProps.className, values);
+        return (0, import_tailwind_merge11.twMerge)(
+          "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__ */ (0, import_jsx_runtime11.jsx)(import_react_aria_components10.Button, { className: "text-lol-gray-50 px-2.5 bg-black", slot: "decrement", children: "-" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          import_react_aria_components10.Input,
+          {
+            ...inputProps,
+            className: (values) => {
+              const finalClassName = resolveClassname(
+                inputProps.className,
+                values
+              );
+              return (0, import_tailwind_merge11.twMerge)(
+                "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__ */ (0, import_jsx_runtime11.jsx)(import_react_aria_components10.Button, { className: "text-lol-gray-50 px-2.5 bg-black", slot: "increment", children: "+" })
+      ]
+    }
+  ) });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -614,12 +730,14 @@ function Label3({ ...props }) {
   Button,
   Item,
   Label,
+  NumberField,
   ProgressBar,
   Radio,
   RadioGroup,
   SearchField,
   Select,
   Slider,
+  SliderLabel,
   Switch,
   TextField
 });