@lolmath/ui 2.7.0 → 2.8.1

package/dist/index.js

@@ -6,10 +6,10 @@ import {
 import { twMerge } from "tailwind-merge";
 
 // src/utilities/border.tsx
-var borderClassName = "from-[#785b28] via-[#c89c3c] to-[#c8aa6e] bg-gradient-to-t";
-var borderHoverClassName = "from-[#c89c3c] via-[#dcc188] to-[#f0e6d8]";
-var borderPressedClassName = "from-lol-gold-600 via-lol-gold-600 to-lol-gold-700";
-var borderDisabledClassName = "from-[#5c5b57] via-[#5c5b57] to-[#5c5b57]";
+var borderGradient = "from-[#785b28] via-[#c89c3c] to-[#c8aa6e] bg-gradient-to-t";
+var borderGradientHover = "from-[#c89c3c] via-[#dcc188] to-[#f0e6d8]";
+var borderGradientPressed = "from-lol-gold-600 via-lol-gold-600 to-lol-gold-700";
+var borderGradientDisabled = "from-[#5c5b57] via-[#5c5b57] to-[#5c5b57]";
 
 // src/utilities/resolve-classname.ts
 function resolveClassname(className, values) {
@@ -18,7 +18,14 @@ function resolveClassname(className, values) {
 
 // src/components/button.tsx
 import { jsx } from "react/jsx-runtime";
-function _Button({ children, className, priority = "secondary", ...props }, ref) {
+function _Button({
+  children,
+  className,
+  priority = "secondary",
+  isRounded = false,
+  isSquared = false,
+  ...props
+}, ref) {
   return /* @__PURE__ */ jsx(
     AriaButton,
     {
@@ -26,13 +33,18 @@ function _Button({ children, className, priority = "secondary", ...props }, ref)
       ...props,
       className: (values) => {
         return twMerge(
-          "font-[beaufort] font-black uppercase transition-colors duration-200 outline-none bg-gradient-to-t",
-          borderClassName,
-          values.isHovered && borderHoverClassName,
-          values.isPressed && borderPressedClassName,
-          values.isDisabled && borderDisabledClassName,
-          values.isFocused && "",
-          values.isFocusVisible && "outline outline-yellow-50 outline-offset-2",
+          "transition-colors duration-200 outline-none",
+          (priority === "primary" || priority === "secondary") && [
+            "bg-gradient-to-t",
+            borderGradient,
+            values.isHovered && borderGradientHover,
+            values.isPressed && borderGradientPressed,
+            values.isDisabled && borderGradientDisabled,
+            values.isFocused && "",
+            values.isFocusVisible && "outline outline-yellow-50 outline-offset-2"
+          ],
+          isRounded && "rounded-full aspect-square",
+          isSquared && "aspect-square",
           resolveClassname(className, values)
         );
       },
@@ -41,17 +53,26 @@ function _Button({ children, className, priority = "secondary", ...props }, ref)
           "span",
           {
             className: twMerge(
-              "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-lol-gold-100",
-              values.isPressed && "text-lol-gray-500",
+              "block transition-colors duration-200 text-lol-gold-300 tracking-wide font-beaufort font-black uppercase",
+              (priority === "primary" || priority === "secondary") && [
+                "m-0.5 px-4 py-2 bg-lol-gray-950"
+              ],
+              priority === "primary" && "from-lol-gold-700 via-lol-gold-800 to-lol-gold-900 bg-gradient-to-b",
+              priority === "tertiary" && !isRounded && 'relative after:content-[""] after:absolute after:-top-2 after:-bottom-2 after:-left-2 after:-right-2',
+              (isSquared || isRounded) && "aspect-square p-1.5",
+              isRounded && "rounded-full",
+              values.isHovered && [
+                "text-lol-gold-100",
+                priority === "primary" && "from-lol-gold-700 via-lol-gold-600 to-lol-gold-600",
+                priority === "tertiary" && (isRounded || isSquared) && "bg-lol-gray-900"
+              ],
+              values.isPressed && [
+                "text-lol-gray-500",
+                priority === "primary" && "text-lol-gold-600 from-lol-gold-900 via-lol-gold-900 to-lol-gold-900"
+              ],
               values.isDisabled && "text-lol-gray-500",
               values.isFocused && "",
-              values.isFocusVisible && "",
-              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]"
+              values.isFocusVisible && ""
             ),
             children: typeof children === "function" ? children(values) : children
           }
@@ -96,10 +117,10 @@ function Select({
           {
             className: (buttonValues) => twMerge2(
               "inline-block outline-none",
-              borderClassName,
-              buttonValues.isHovered && borderHoverClassName,
-              (buttonValues.isPressed || values.isOpen) && borderPressedClassName,
-              buttonValues.isDisabled && borderDisabledClassName,
+              borderGradient,
+              buttonValues.isHovered && borderGradientHover,
+              (buttonValues.isPressed || values.isOpen) && borderGradientPressed,
+              buttonValues.isDisabled && borderGradientDisabled,
               buttonValues.isFocused && "",
               buttonValues.isFocusVisible && outlineClassName
             ),
@@ -161,72 +182,63 @@ import {
   Button as AriaButton3
 } from "react-aria-components";
 import { twMerge as twMerge3 } from "tailwind-merge";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function SearchField({
   inputProps = {},
+  borderProps = {},
+  children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx3(
-    AriaSearchField,
-    {
-      ...props,
-      className: (values) => {
-        return twMerge3(
-          "flex flex-col outline-none",
-          borderClassName,
+  return /* @__PURE__ */ jsx3(AriaSearchField, { ...props, children: (values) => /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    typeof children === "function" ? children(values) : children,
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        ...borderProps,
+        className: twMerge3(
+          "outline-none p-px flex",
+          borderGradient,
           "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",
-          resolveClassname(props.className, values)
-        );
-      },
-      children: ({ state, isDisabled }) => /* @__PURE__ */ jsxs2(
-        "div",
-        {
-          className: twMerge3(
-            "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(
-              AriaInput,
-              {
-                ...inputProps,
-                className: (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 pl-6",
-                    props.isDisabled && "text-lol-gray-500",
-                    finalClassName
-                  );
-                },
-                type: "text",
-                style: {
-                  backgroundImage: "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAERElEQVR42uycz0tVQRTH54lamBakLUStQKhEW6V/gC2qhRgRqJURVJj9oBL7oWVBWFj0O/pd2EbJ3ARt2uW6tFUWZkhkiYQVSBZk6esc7rkgkXfm3rkzb957c+CL8Obcc+d+5vcPjESjUWZtdkuxCCwgC8gCsoAsIAvIArKArFlAASzVj/P46KuE+OgFuSvVAJKsqWWgclApaBkoDzSP0n+ARkCDoD5QD6gXNB1XNSiA5YP2graACjz85oAWgrBoN9JvH0GdoBugT4nWB2XThw2BmjhwZrMCenaIYmUnCqAq0ABoDyg9hHjpFAtjVsczIGyut0CPQDkK8ooxu+gdqfEGKAP0GFSvIc/19K6MeAGEpfkQVKGx5lfQO1PjAdB1UGUM+s9KerfRgLDT3OXDfxh0FrSWRqm5oCxQEWgdpb33EQ/fvUkloIifTft/ZtLZNLLkCILBIbsbNCVQaNUEa7FA7G+gFaAxFTNpmRp0WhDOE1AJ9RlTAv7T5FtMf3mGE8xW05oYluwOAb+roA2g7wHeMUEz8MsCvtsFa5s2QLtBaRwfnA81SK6nsP03UiwvS6M8GQEIn6kV6HN20gfKWpRiDXP8alWsDIIELKNFqJc1UxMJyzDWUYGFcZkJgFZz0j/QkiBs66bYXlZuAqBVnPQuRfs40wLgS00AtJyT3qNw3tYjmTctgHI56f0KAfVL5k0LoCxO+heFgMYk8xaz7Y6EtSCAeLPiHIX5XSSZNy2ARjnpxQoBlUjmTQugt5LzJBkrl8ybFkAvOenVivo2dxvEy/pMAMSbiyxlzslG2FZFsbXOwYIAesH4B3nnQJkh5jOTYnoZ5qnXBEA45e/g+ODezD1QJIQ8RigWb7+nQ8USJ2hfgSedkxyfGuZsdqVIwjlPsbxskvLETAGE1fm+gN8B5pxhZQVsVlgrGgV825mi83uZ0j0J+irgV0lrqBrB96WQ72vQZgH/cVCLSTNp1xDOPkFf7D9wAx6PdNpAa5hz/SWNlEe/Ydo78hXdY54P2qoKkMyxj2u3mb+zMVWGTfGSiKOuYx/X9jPnaCfWdhF0yMTVPI4geLr51ABIOOIdMXG74ydoPeiOAZBwQtlkGiC038y5moK1ScWm2S8fvm1hjWwqFpW4sV5EnfdkSE0YYy0BPfDxXCtNRYwDxKgG4UlnIVX5kQAxRujZQor1mTkHiO0+YpwixXSYFy0IPNTDvSI8NsJrwPkzFrQTNBMepO2UZ2z2a8C4/LhLsEQNL1qcCDLM67rrhx/6nCRrWKJ1FLNO8JkWKqTjpjQx1RalAeGmj2eOgc4kCyAXEi51RK/h4d2kN8kEyIWEM/lrAnC2MefmflIBciEdBF0JG06iAHIhNfxnsSoFJ5EAzVzRXwgLjs5hXqcdBv1hziZdp2ywRASE1hxWoIj95ybJ1QdZQBaQBWQBWUAWkDULyAKygPTYXwEGAArW2QJagQgvAAAAAElFTkSuQmCC')",
-                  backgroundRepeat: "no-repeat",
-                  backgroundPosition: "5px center",
-                  backgroundSize: "16px"
-                }
-              }
-            ),
-            state.value.length > 0 && !isDisabled && /* @__PURE__ */ jsx3(
-              AriaButton3,
-              {
-                className: (buttonValues) => twMerge3(
-                  "font-black text-[#cdbe91] text-xs px-4",
-                  buttonValues.isHovered && "text-lol-gold-100",
-                  buttonValues.isPressed && "text-[#463714]"
-                ),
-                children: "\u2715"
+          values.isDisabled && "from-lol-gray-700 via-lol-gray-700 to-lol-gray-700",
+          resolveClassname(borderProps?.className, values),
+          values.isDisabled && "bg-lol-gray-950"
+        ),
+        children: [
+          /* @__PURE__ */ jsx3(
+            AriaInput,
+            {
+              ...inputProps,
+              className: (values2) => twMerge3(
+                "bg-black w-full min-h-full py-2 px-3 outline-none pl-6",
+                "text-lol-gold-50 text-xs font-spiegel tracking-wide",
+                "focus-within:from-lol-gray-950 focus-within:to-lol-gray-900 focus-within:bg-gradient-to-b",
+                values2.isDisabled && "text-lol-gray-500",
+                resolveClassname(inputProps.className, values2)
+              ),
+              type: "text",
+              style: {
+                backgroundImage: "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAERElEQVR42uycz0tVQRTH54lamBakLUStQKhEW6V/gC2qhRgRqJURVJj9oBL7oWVBWFj0O/pd2EbJ3ARt2uW6tFUWZkhkiYQVSBZk6esc7rkgkXfm3rkzb957c+CL8Obcc+d+5vcPjESjUWZtdkuxCCwgC8gCsoAsIAvIArKArFlAASzVj/P46KuE+OgFuSvVAJKsqWWgclApaBkoDzSP0n+ARkCDoD5QD6gXNB1XNSiA5YP2graACjz85oAWgrBoN9JvH0GdoBugT4nWB2XThw2BmjhwZrMCenaIYmUnCqAq0ABoDyg9hHjpFAtjVsczIGyut0CPQDkK8ooxu+gdqfEGKAP0GFSvIc/19K6MeAGEpfkQVKGx5lfQO1PjAdB1UGUM+s9KerfRgLDT3OXDfxh0FrSWRqm5oCxQEWgdpb33EQ/fvUkloIifTft/ZtLZNLLkCILBIbsbNCVQaNUEa7FA7G+gFaAxFTNpmRp0WhDOE1AJ9RlTAv7T5FtMf3mGE8xW05oYluwOAb+roA2g7wHeMUEz8MsCvtsFa5s2QLtBaRwfnA81SK6nsP03UiwvS6M8GQEIn6kV6HN20gfKWpRiDXP8alWsDIIELKNFqJc1UxMJyzDWUYGFcZkJgFZz0j/QkiBs66bYXlZuAqBVnPQuRfs40wLgS00AtJyT3qNw3tYjmTctgHI56f0KAfVL5k0LoCxO+heFgMYk8xaz7Y6EtSCAeLPiHIX5XSSZNy2ARjnpxQoBlUjmTQugt5LzJBkrl8ybFkAvOenVivo2dxvEy/pMAMSbiyxlzslG2FZFsbXOwYIAesH4B3nnQJkh5jOTYnoZ5qnXBEA45e/g+ODezD1QJIQ8RigWb7+nQ8USJ2hfgSedkxyfGuZsdqVIwjlPsbxskvLETAGE1fm+gN8B5pxhZQVsVlgrGgV825mi83uZ0j0J+irgV0lrqBrB96WQ72vQZgH/cVCLSTNp1xDOPkFf7D9wAx6PdNpAa5hz/SWNlEe/Ydo78hXdY54P2qoKkMyxj2u3mb+zMVWGTfGSiKOuYx/X9jPnaCfWdhF0yMTVPI4geLr51ABIOOIdMXG74ydoPeiOAZBwQtlkGiC038y5moK1ScWm2S8fvm1hjWwqFpW4sV5EnfdkSE0YYy0BPfDxXCtNRYwDxKgG4UlnIVX5kQAxRujZQor1mTkHiO0+YpwixXSYFy0IPNTDvSI8NsJrwPkzFrQTNBMepO2UZ2z2a8C4/LhLsEQNL1qcCDLM67rrhx/6nCRrWKJ1FLNO8JkWKqTjpjQx1RalAeGmj2eOgc4kCyAXEi51RK/h4d2kN8kEyIWEM/lrAnC2MefmflIBciEdBF0JG06iAHIhNfxnsSoFJ5EAzVzRXwgLjs5hXqcdBv1hziZdp2ywRASE1hxWoIj95ybJ1QdZQBaQBWQBWUAWkDULyAKygPTYXwEGAArW2QJagQgvAAAAAElFTkSuQmCC')",
+                backgroundRepeat: "no-repeat",
+                backgroundPosition: "5px center",
+                backgroundSize: "16px"
               }
-            )
-          ]
-        }
-      )
-    }
-  );
+            }
+          ),
+          values.state.value.length > 0 && !values.isDisabled && /* @__PURE__ */ jsx3(
+            AriaButton3,
+            {
+              className: (buttonValues) => twMerge3(
+                "font-black text-[#cdbe91] text-xs px-4 bg-black",
+                buttonValues.isHovered && "text-lol-gold-100",
+                buttonValues.isPressed && "text-[#463714]"
+              ),
+              children: "\u2715"
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
 }
 
 // src/components/slider/slider.tsx
@@ -234,8 +246,7 @@ import {
   Slider as AriaSlider,
   SliderThumb as AriaSliderThumb,
   SliderTrack as AriaSliderTrack,
-  SliderOutput as AriaSliderOutput,
-  Label
+  SliderOutput as AriaSliderOutput
 } from "react-aria-components";
 import { twMerge as twMerge4 } from "tailwind-merge";
 
@@ -246,7 +257,7 @@ var sliderActive = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAABoC
 var sliderDisabled = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAABoCAYAAAAdHLWhAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFyWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgOS4wLWMwMDEgNzkuYzAyMDRiMiwgMjAyMy8wMi8wOS0wNjoyNjoxNCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDI0LjQgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAyMy0wNS0yNVQyMDo1ODozMSswMjowMCIgeG1wOk1vZGlmeURhdGU9IjIwMjMtMDUtMjVUMjE6MjI6MzMrMDI6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMjMtMDUtMjVUMjE6MjI6MzMrMDI6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjViYzljZjk1LTNhMjMtODM0Ni05MmY0LTQyMjBmNDNhODQxZiIgeG1wTU06RG9jdW1lbnRJRD0i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')";
 
 // src/components/slider/slider.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function Slider({
   children,
   sliderThumbProps = {},
@@ -263,7 +274,7 @@ function Slider({
         const resolvedClassName = resolveClassname(props.className, values);
         return twMerge4("", resolvedClassName);
       },
-      children: (values) => /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      children: (values) => /* @__PURE__ */ jsxs3(Fragment3, { children: [
         typeof children === "function" ? children(values) : children,
         /* @__PURE__ */ jsx4(
           AriaSliderTrack,
@@ -279,7 +290,7 @@ function Slider({
             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: [
+              return /* @__PURE__ */ jsxs3(Fragment3, { children: [
                 /* @__PURE__ */ jsx4(
                   "div",
                   {
@@ -305,7 +316,7 @@ function Slider({
                 ),
                 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(
+                  return /* @__PURE__ */ jsx4(Fragment3, { children: /* @__PURE__ */ jsx4(
                     AriaSliderThumb,
                     {
                       index: i,
@@ -350,17 +361,24 @@ function Slider({
     }
   );
 }
-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 ") })
-  ] });
+function SliderOutput(props) {
+  return /* @__PURE__ */ jsx4(
+    AriaSliderOutput,
+    {
+      className: (values) => twMerge4(
+        "font-spiegel text-xs text-lol-gray-300 font-normal tracking-wide",
+        resolveClassname(props.className, values)
+      ),
+      children: (sliderRenderProps) => sliderRenderProps.state.values.map((_, i) => sliderRenderProps.state.getThumbValueLabel(i)).join(" \u2013 "),
+      ...props
+    }
+  );
 }
 
 // src/components/switch.tsx
 import { Switch as AriaSwitch } from "react-aria-components";
 import { twMerge as twMerge5 } from "tailwind-merge";
-import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function Switch({
   className,
   placeholder,
@@ -372,16 +390,16 @@ function Switch({
     {
       ...props,
       className: "group inline-flex items-center gap-2 p-1 text-sm font-semibold text-black",
-      children: (values) => /* @__PURE__ */ jsxs4(Fragment3, { children: [
+      children: (values) => /* @__PURE__ */ jsxs4(Fragment4, { children: [
         /* @__PURE__ */ jsx5(
           "div",
           {
             className: twMerge5(
               "h-6 w-14 shrink-0 cursor-default rounded-full p-0.5",
-              borderClassName,
-              values.isHovered && borderHoverClassName,
-              values.isPressed && borderPressedClassName,
-              values.isDisabled && borderDisabledClassName,
+              borderGradient,
+              values.isHovered && borderGradientHover,
+              values.isPressed && borderGradientPressed,
+              values.isDisabled && borderGradientDisabled,
               values.isFocused && "",
               values.isFocusVisible && "outline outline-1 outline-offset-2 outline-yellow-50"
             ),
@@ -402,10 +420,10 @@ function Switch({
                     className: twMerge5(
                       "absolute -left-2 -top-1.5 h-8 w-8 rounded-full p-0.5 shadow-md ring-0 transition-[left] duration-200 ease-in-out",
                       values.isSelected && "left-[calc(100%-1.75rem)]",
-                      borderClassName,
-                      values.isHovered && borderHoverClassName,
-                      values.isPressed && borderPressedClassName,
-                      values.isDisabled && borderDisabledClassName
+                      borderGradient,
+                      values.isHovered && borderGradientHover,
+                      values.isPressed && borderGradientPressed,
+                      values.isDisabled && borderGradientDisabled
                     ),
                     children: /* @__PURE__ */ jsx5("span", { className: "block h-full w-full rounded-full bg-lol-gray-950" })
                   }
@@ -423,25 +441,25 @@ function Switch({
 // src/components/progress-bar.tsx
 import {
   ProgressBar as AriaProgressBar,
-  Label as Label2
+  Label
 } from "react-aria-components";
 import { twMerge as twMerge6 } from "tailwind-merge";
-import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function ProgressBar({
   className,
   label,
   ...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-lol-gold-100", children: [
-      /* @__PURE__ */ jsx6(Label2, { className: "flex-1 ", children: label ?? "Loading" }),
+  return /* @__PURE__ */ jsx6(AriaProgressBar, { className: "flex w-56 flex-col gap-1 text-sm", ...props, children: ({ percentage, valueText }) => /* @__PURE__ */ jsxs5(Fragment5, { children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex font-beaufort font-bold uppercase text-lol-gold-100", children: [
+      /* @__PURE__ */ jsx6(Label, { className: "flex-1 ", children: label ?? "Loading" }),
       /* @__PURE__ */ jsx6("span", { children: valueText })
     ] }),
     /* @__PURE__ */ jsx6(
       "div",
       {
         className: twMerge6(
-          borderClassName,
+          borderGradient,
           "-ml-0.5 -mr-1 h-3 rounded-full p-px"
         ),
         children: /* @__PURE__ */ jsx6(
@@ -503,7 +521,7 @@ function Accordion({ children, className }) {
         "div",
         {
           className: twMerge7(
-            "bg-lol-blue-950 border-lol-gold-500 rounded border overflow-hidden",
+            "bg-lol-blue-950 border-lol-gold-500 border",
             className
           ),
           style: {
@@ -580,47 +598,46 @@ import {
   Input as AriaInput2
 } from "react-aria-components";
 import { twMerge as twMerge8 } from "tailwind-merge";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function TextField({
   inputProps = {},
+  borderProps = {},
+  children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx8(
-    AriaTextField,
-    {
-      ...props,
-      className: (values) => twMerge8(
-        "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",
-        resolveClassname(props.className, values)
-      ),
-      children: /* @__PURE__ */ jsx8(
-        "div",
-        {
-          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 && "bg-lol-gray-950"
-          ),
-          children: /* @__PURE__ */ jsx8(
-            AriaInput2,
-            {
-              ...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",
-                  resolveClassname(inputProps.className, values)
-                );
-              },
-              type: "text"
+  return /* @__PURE__ */ jsx8(AriaTextField, { ...props, children: (values) => /* @__PURE__ */ jsxs7(Fragment6, { children: [
+    typeof children === "function" ? children(values) : children,
+    /* @__PURE__ */ jsx8(
+      "div",
+      {
+        ...borderProps,
+        className: twMerge8(
+          "outline-none p-px",
+          borderGradient,
+          "focus-within:from-lol-gold-300 focus-within:via-lol-gold-200 focus-within:to-lol-gold-50",
+          values.isDisabled && "from-lol-gray-700 via-lol-gray-700 to-lol-gray-700",
+          resolveClassname(borderProps?.className, values),
+          values.isDisabled && "bg-lol-gray-950"
+        ),
+        children: /* @__PURE__ */ jsx8(
+          AriaInput2,
+          {
+            type: "text",
+            ...inputProps,
+            className: (values2) => {
+              return twMerge8(
+                "bg-black w-full min-h-full py-2 px-3 outline-none",
+                "text-lol-gold-50 text-xs font-spiegel tracking-wide",
+                "focus-within:from-lol-gray-950 focus-within:to-lol-gray-900 focus-within:bg-gradient-to-b",
+                values2.isDisabled && "text-lol-gray-500",
+                resolveClassname(inputProps.className, values2)
+              );
             }
-          )
-        }
-      )
-    }
-  );
+          }
+        )
+      }
+    )
+  ] }) });
 }
 
 // src/components/radio-group.tsx
@@ -675,7 +692,7 @@ import {
 } from "react-aria-components";
 import { twMerge as twMerge10 } from "tailwind-merge";
 import { jsx as jsx10 } from "react/jsx-runtime";
-function Label3({ ...props }) {
+function Label2({ ...props }) {
   return /* @__PURE__ */ jsx10(
     AriaLabel,
     {
@@ -696,50 +713,63 @@ import {
   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";
+import { Fragment as Fragment7, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function NumberField({
   inputProps = {},
   groupProps = {},
+  children,
   ...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
-              );
+  return /* @__PURE__ */ jsx11(AriaNumberField, { ...props, children: (values) => /* @__PURE__ */ jsxs8(Fragment7, { children: [
+    typeof children === "function" ? children(values) : children,
+    /* @__PURE__ */ jsxs8(
+      Group,
+      {
+        ...groupProps,
+        className: (values2) => {
+          return twMerge11(
+            "grid grid-cols-[auto_1fr_auto] outline-none gap-px p-px",
+            borderGradient,
+            "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",
+            resolveClassname(groupProps.className, values2)
+          );
+        },
+        children: [
+          /* @__PURE__ */ jsx11(
+            Button2,
+            {
+              className: "text-lol-gray-50 px-2.5 bg-black",
+              slot: "decrement",
+              children: "-"
             }
-          }
-        ),
-        /* @__PURE__ */ jsx11(Button2, { className: "text-lol-gray-50 px-2.5 bg-black", slot: "increment", children: "+" })
-      ]
-    }
-  ) });
+          ),
+          /* @__PURE__ */ jsx11(
+            AriaInput3,
+            {
+              ...inputProps,
+              className: (values2) => {
+                return twMerge11(
+                  "bg-black w-full py-2 px-3 text-lol-gold-50 text-xs outline-none font-spiegel",
+                  values2.isDisabled && "text-lol-gray-500 bg-lol-gray-950",
+                  values2.isFocused && "from-lol-gray-950 to-lol-gray-900 bg-gradient-to-b",
+                  resolveClassname(inputProps.className, values2)
+                );
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx11(
+            Button2,
+            {
+              className: "text-lol-gray-50 px-2.5 bg-black",
+              slot: "increment",
+              children: "+"
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
 }
 
 // src/components/spinner/spinner.tsx
@@ -772,7 +802,7 @@ import {
   ModalOverlay
 } from "react-aria-components";
 import { twMerge as twMerge13 } from "tailwind-merge";
-import { Fragment as Fragment5, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 function Modal({
   modalOverlayClassName,
   dialogProps = {},
@@ -804,14 +834,14 @@ function Modal({
                 "outline-none relative max-h-screen py-4",
                 dialogProps.className
               ),
-              children: (dialogRenderProps) => /* @__PURE__ */ jsxs8(Fragment5, { children: [
+              children: (dialogRenderProps) => /* @__PURE__ */ jsxs9(Fragment8, { children: [
                 /* @__PURE__ */ jsx13("div", { className: "relative h-1", children: /* @__PURE__ */ jsx13("div", { className: "border-lol-gold-700 border bg-black absolute border-b-0 rounded-full h-full left-5 right-5" }) }),
                 /* @__PURE__ */ jsx13(
                   "div",
                   {
                     className: twMerge13(
                       "text-left align-middle shadow-xl p-0.5 bg-gradient-to-t",
-                      borderPressedClassName
+                      borderGradientPressed
                     ),
                     children: /* @__PURE__ */ jsx13("div", { className: "bg-black", children: typeof children === "function" ? children(dialogRenderProps) : children })
                   }
@@ -853,7 +883,7 @@ import {
 } from "react-aria-components";
 import { twMerge as twMerge14 } from "tailwind-merge";
 import { createContext as createContext2, useContext as useContext2 } from "react";
-import { Fragment as Fragment6, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 function Tabs({ onSelectionChange, ...rest }) {
   const id = useCssId();
   return /* @__PURE__ */ jsx14(TabsContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx14(
@@ -894,7 +924,7 @@ function Tab({ children, className, ...rest }) {
         "focus:outline-none focus-visible:outline-1 focus-visible:outline-offset-4 focus-visible:outline-lol-gold-100",
         resolveClassname(className, values)
       ),
-      children: (values) => /* @__PURE__ */ jsxs9(Fragment6, { children: [
+      children: (values) => /* @__PURE__ */ jsxs10(Fragment9, { children: [
         typeof children === "function" ? children(values) : children,
         values.isSelected && /* @__PURE__ */ jsx14(
           "div",
@@ -926,7 +956,7 @@ function useTabsContext() {
 // src/components/checkbox.tsx
 import { Checkbox as AriaCheckbox } from "react-aria-components";
 import { twMerge as twMerge15 } from "tailwind-merge";
-import { Fragment as Fragment7, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 function Checkbox({ children, className, ...props }) {
   return /* @__PURE__ */ jsx15(
     AriaCheckbox,
@@ -948,7 +978,7 @@ function Checkbox({ children, className, ...props }) {
         );
       },
       ...props,
-      children: (values) => /* @__PURE__ */ jsxs10(Fragment7, { children: [
+      children: (values) => /* @__PURE__ */ jsxs11(Fragment10, { children: [
         /* @__PURE__ */ jsx15(
           "div",
           {
@@ -976,53 +1006,52 @@ import {
   TextArea as AriaTextArea
 } from "react-aria-components";
 import { twMerge as twMerge16 } from "tailwind-merge";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 function TextArea({
   textAreaProps = {},
+  borderProps = {},
+  children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx16(
-    AriaTextField2,
-    {
-      ...props,
-      className: (values) => twMerge16(
-        "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",
-        resolveClassname(props.className, values)
-      ),
-      children: /* @__PURE__ */ jsx16(
-        "div",
-        {
-          className: twMerge16(
-            "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__ */ jsx16(
-            AriaTextArea,
-            {
-              ...textAreaProps,
-              className: (values) => {
-                return twMerge16(
-                  "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",
-                  resolveClassname(textAreaProps.className, values)
-                );
-              }
+  return /* @__PURE__ */ jsx16(AriaTextField2, { ...props, children: (values) => /* @__PURE__ */ jsxs12(Fragment11, { children: [
+    typeof children === "function" ? children(values) : children,
+    /* @__PURE__ */ jsx16(
+      "div",
+      {
+        ...borderProps,
+        className: twMerge16(
+          "outline-none p-px flex",
+          borderGradient,
+          "focus-within:from-lol-gold-300 focus-within:via-lol-gold-200 focus-within:to-lol-gold-50",
+          values.isDisabled && "from-lol-gray-700 via-lol-gray-700 to-lol-gray-700",
+          resolveClassname(borderProps?.className, values),
+          values.isDisabled && "bg-lol-gray-950"
+        ),
+        children: /* @__PURE__ */ jsx16(
+          AriaTextArea,
+          {
+            ...textAreaProps,
+            className: (values2) => {
+              return twMerge16(
+                "bg-black w-full min-h-full py-2 px-3 outline-none",
+                "text-lol-gold-50 text-xs font-spiegel tracking-wide",
+                "focus-within:from-lol-gray-950 focus-within:to-lol-gray-900 focus-within:bg-gradient-to-b",
+                values2.isDisabled && "text-lol-gray-500",
+                resolveClassname(textAreaProps.className, values2)
+              );
             }
-          )
-        }
-      )
-    }
-  );
+          }
+        )
+      }
+    )
+  ] }) });
 }
 
 // src/components/tooltip.tsx
 import { Tooltip as AriaTooltip, OverlayArrow } from "react-aria-components";
 import { twMerge as twMerge17 } from "tailwind-merge";
 import { TooltipTrigger } from "react-aria-components";
-import { Fragment as Fragment8, jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 function Tooltip({ children, ...props }) {
   return /* @__PURE__ */ jsx17(
     AriaTooltip,
@@ -1030,7 +1059,7 @@ function Tooltip({ children, ...props }) {
       ...props,
       className: (values) => twMerge17(
         `p-0.5 drop-shadow-lg bg-black`,
-        borderClassName,
+        borderGradient,
         "w-[280px]",
         values.isEntering && "animate-in fade-in data-[placement=bottom]:slide-in-from-top-1 data-[placement=top]:slide-in-from-bottom-1 ease-out duration-200 fill-mode-forwards",
         values.isExiting && "animate-out fade-out data-[placement=bottom]:slide-out-to-top-1 data-[placement=top]:slide-out-to-bottom-1 ease-in duration-150 fill-mode-forwards",
@@ -1038,8 +1067,8 @@ function Tooltip({ children, ...props }) {
         values.placement === "top" && "mb-2",
         resolveClassname(props.className, values)
       ),
-      children: (values) => /* @__PURE__ */ jsxs11(Fragment8, { children: [
-        /* @__PURE__ */ jsx17(OverlayArrow, { className: "transform translate-y-1", children: (values2) => /* @__PURE__ */ jsxs11(Fragment8, { children: [
+      children: (values) => /* @__PURE__ */ jsxs13(Fragment12, { children: [
+        /* @__PURE__ */ jsx17(OverlayArrow, { className: "transform translate-y-1", children: (values2) => /* @__PURE__ */ jsxs13(Fragment12, { children: [
           /* @__PURE__ */ jsx17(
             "svg",
             {
@@ -1074,18 +1103,53 @@ function Tooltip({ children, ...props }) {
     }
   );
 }
+
+// src/components/card.tsx
+import { twMerge as twMerge18 } from "tailwind-merge";
+import { jsx as jsx18 } from "react/jsx-runtime";
+function Card({ children, className, style, borderProps }) {
+  const r = `1rem`;
+  return /* @__PURE__ */ jsx18(
+    "div",
+    {
+      ...borderProps ?? {},
+      className: twMerge18("p-[3px]", borderGradient, borderProps?.className),
+      style: {
+        WebkitMask: borderInverted(r),
+        mask: borderInverted(r),
+        ...borderProps?.style ?? {}
+      },
+      children: /* @__PURE__ */ jsx18(
+        "div",
+        {
+          className: twMerge18("bg-black w-full", className),
+          style: {
+            WebkitMask: borderInverted(r),
+            mask: borderInverted(r),
+            ...style ?? {}
+          },
+          children
+        }
+      )
+    }
+  );
+}
+function borderInverted(r) {
+  return `radial-gradient(${r} at ${r} ${r},#0000 98%,#000) -${r} -${r}`;
+}
 export {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
   Button,
+  Card,
   Checkbox,
   DialogButtons,
   DialogTrigger,
   Heading,
   Item,
-  Label3 as Label,
+  Label2 as Label,
   Modal,
   NumberField,
   ProgressBar,
@@ -1094,7 +1158,7 @@ export {
   SearchField,
   Select,
   Slider,
-  SliderLabel,
+  SliderOutput,
   Spinner,
   Switch,
   Tab,
@@ -1104,6 +1168,7 @@ export {
   TextArea,
   TextField,
   Tooltip,
-  TooltipTrigger
+  TooltipTrigger,
+  borderInverted
 };
 //# sourceMappingURL=index.js.map