@lolmath/ui 1.2.0 → 1.3.0

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 && "",
@@ -166,9 +166,9 @@ function SearchField({
     AriaSearchField,
     {
       className: (values) => {
-        const finalClassName = typeof props.className === "function" ? props.className(values) : props.className;
+        const finalClassName = resolveClassname(props, 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(
@@ -191,7 +191,8 @@ function SearchField({
                 className: (values) => {
                   const finalClassName = resolveClassname(inputProps, 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 +205,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"
@@ -240,12 +241,7 @@ 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,
-  ...props
-}) {
+function Slider({ className, label, ...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 }),
@@ -255,7 +251,7 @@ function Slider({
       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]" }),
+        /* @__PURE__ */ jsx4("div", { className: "absolute h-0.5 top-[50%] transform translate-y-[-50%] w-full rounded-full bg-lol-gray-950" }),
         /* @__PURE__ */ jsx4(
           "div",
           {
@@ -331,7 +327,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 +345,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 +371,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 +382,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 +497,9 @@ function TextField({
     AriaTextField,
     {
       className: (values) => {
-        const finalClassName = typeof props.className === "function" ? props.className(values) : props.className;
+        const finalClassName = resolveClassname(props, 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 +512,17 @@ 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, 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
                 );
               },
@@ -596,6 +599,57 @@ 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, 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, 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,6 +658,7 @@ export {
   Button,
   Item,
   Label3 as Label,
+  NumberField,
   ProgressBar,
   Radio,
   RadioGroup,