@lolmath/ui 2.7.0 → 2.8.1

package/dist/index.cjs

@@ -25,12 +25,13 @@ __export(src_exports, {
   AccordionItem: () => AccordionItem,
   AccordionTrigger: () => AccordionTrigger,
   Button: () => Button,
+  Card: () => Card,
   Checkbox: () => Checkbox,
   DialogButtons: () => DialogButtons,
   DialogTrigger: () => DialogTrigger,
   Heading: () => Heading,
   Item: () => Item,
-  Label: () => Label3,
+  Label: () => Label2,
   Modal: () => Modal,
   NumberField: () => NumberField,
   ProgressBar: () => ProgressBar,
@@ -39,7 +40,7 @@ __export(src_exports, {
   SearchField: () => SearchField,
   Select: () => Select,
   Slider: () => Slider,
-  SliderLabel: () => SliderLabel,
+  SliderOutput: () => SliderOutput,
   Spinner: () => Spinner,
   Switch: () => Switch,
   Tab: () => Tab,
@@ -49,7 +50,8 @@ __export(src_exports, {
   TextArea: () => TextArea,
   TextField: () => TextField,
   Tooltip: () => Tooltip,
-  TooltipTrigger: () => import_react_aria_components16.TooltipTrigger
+  TooltipTrigger: () => import_react_aria_components16.TooltipTrigger,
+  borderInverted: () => borderInverted
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -59,10 +61,10 @@ var import_react_aria_components = require("react-aria-components");
 var import_tailwind_merge = require("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) {
@@ -71,7 +73,14 @@ function resolveClassname(className, values) {
 
 // src/components/button.tsx
 var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsx)(
     import_react_aria_components.Button,
     {
@@ -79,13 +88,18 @@ function _Button({ children, className, priority = "secondary", ...props }, ref)
       ...props,
       className: (values) => {
         return (0, import_tailwind_merge.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)
         );
       },
@@ -94,17 +108,26 @@ function _Button({ children, className, priority = "secondary", ...props }, ref)
           "span",
           {
             className: (0, import_tailwind_merge.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
           }
@@ -141,10 +164,10 @@ function Select({
           {
             className: (buttonValues) => (0, import_tailwind_merge2.twMerge)(
               "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
             ),
@@ -205,69 +228,60 @@ var import_tailwind_merge3 = require("tailwind-merge");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function SearchField({
   inputProps = {},
+  borderProps = {},
+  children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    import_react_aria_components3.SearchField,
-    {
-      ...props,
-      className: (values) => {
-        return (0, import_tailwind_merge3.twMerge)(
-          "flex flex-col outline-none",
-          borderClassName,
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_aria_components3.SearchField, { ...props, children: (values) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    typeof children === "function" ? children(values) : children,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        ...borderProps,
+        className: (0, import_tailwind_merge3.twMerge)(
+          "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__ */ (0, import_jsx_runtime3.jsxs)(
-        "div",
-        {
-          className: (0, import_tailwind_merge3.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 && "bg-lol-gray-950"
-          ),
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              import_react_aria_components3.Input,
-              {
-                ...inputProps,
-                className: (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 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__ */ (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-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__ */ (0, import_jsx_runtime3.jsx)(
+            import_react_aria_components3.Input,
+            {
+              ...inputProps,
+              className: (values2) => (0, import_tailwind_merge3.twMerge)(
+                "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__ */ (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 bg-black",
+                buttonValues.isHovered && "text-lol-gold-100",
+                buttonValues.isPressed && "text-[#463714]"
+              ),
+              children: "\u2715"
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
 }
 
 // src/components/slider/slider.tsx
@@ -385,11 +399,18 @@ function Slider({
     }
   );
 }
-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 ") })
-  ] });
+function SliderOutput(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_react_aria_components4.SliderOutput,
+    {
+      className: (values) => (0, import_tailwind_merge4.twMerge)(
+        "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
@@ -413,10 +434,10 @@ function Switch({
           {
             className: (0, import_tailwind_merge5.twMerge)(
               "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"
             ),
@@ -437,10 +458,10 @@ function Switch({
                     className: (0, import_tailwind_merge5.twMerge)(
                       "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__ */ (0, import_jsx_runtime5.jsx)("span", { className: "block h-full w-full rounded-full bg-lol-gray-950" })
                   }
@@ -465,7 +486,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-lol-gold-100", 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 })
     ] }),
@@ -473,7 +494,7 @@ function ProgressBar({
       "div",
       {
         className: (0, import_tailwind_merge6.twMerge)(
-          borderClassName,
+          borderGradient,
           "-ml-0.5 -mr-1 h-3 rounded-full p-px"
         ),
         children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -535,7 +556,7 @@ function Accordion({ children, className }) {
         "div",
         {
           className: (0, import_tailwind_merge7.twMerge)(
-            "bg-lol-blue-950 border-lol-gold-500 rounded border overflow-hidden",
+            "bg-lol-blue-950 border-lol-gold-500 border",
             className
           ),
           style: {
@@ -612,44 +633,43 @@ var import_tailwind_merge8 = require("tailwind-merge");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function TextField({
   inputProps = {},
+  borderProps = {},
+  children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    import_react_aria_components7.TextField,
-    {
-      ...props,
-      className: (values) => (0, import_tailwind_merge8.twMerge)(
-        "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__ */ (0, import_jsx_runtime8.jsx)(
-        "div",
-        {
-          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 && "bg-lol-gray-950"
-          ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-            import_react_aria_components7.Input,
-            {
-              ...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",
-                  resolveClassname(inputProps.className, values)
-                );
-              },
-              type: "text"
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react_aria_components7.TextField, { ...props, children: (values) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    typeof children === "function" ? children(values) : children,
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "div",
+      {
+        ...borderProps,
+        className: (0, import_tailwind_merge8.twMerge)(
+          "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__ */ (0, import_jsx_runtime8.jsx)(
+          import_react_aria_components7.Input,
+          {
+            type: "text",
+            ...inputProps,
+            className: (values2) => {
+              return (0, import_tailwind_merge8.twMerge)(
+                "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
@@ -699,7 +719,7 @@ function Radio({ ...props }) {
 var import_react_aria_components9 = require("react-aria-components");
 var import_tailwind_merge10 = require("tailwind-merge");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-function Label3({ ...props }) {
+function Label2({ ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     import_react_aria_components9.Label,
     {
@@ -719,46 +739,59 @@ var import_jsx_runtime11 = require("react/jsx-runtime");
 function NumberField({
   inputProps = {},
   groupProps = {},
+  children,
   ...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
-              );
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_react_aria_components10.NumberField, { ...props, children: (values) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    typeof children === "function" ? children(values) : children,
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      import_react_aria_components10.Group,
+      {
+        ...groupProps,
+        className: (values2) => {
+          return (0, import_tailwind_merge11.twMerge)(
+            "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__ */ (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.Button, { className: "text-lol-gray-50 px-2.5 bg-black", slot: "increment", children: "+" })
-      ]
-    }
-  ) });
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            import_react_aria_components10.Input,
+            {
+              ...inputProps,
+              className: (values2) => {
+                return (0, import_tailwind_merge11.twMerge)(
+                  "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__ */ (0, import_jsx_runtime11.jsx)(
+            import_react_aria_components10.Button,
+            {
+              className: "text-lol-gray-50 px-2.5 bg-black",
+              slot: "increment",
+              children: "+"
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
 }
 
 // src/components/spinner/spinner.tsx
@@ -824,7 +857,7 @@ function Modal({
                   {
                     className: (0, import_tailwind_merge13.twMerge)(
                       "text-left align-middle shadow-xl p-0.5 bg-gradient-to-t",
-                      borderPressedClassName
+                      borderGradientPressed
                     ),
                     children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "bg-black", children: typeof children === "function" ? children(dialogRenderProps) : children })
                   }
@@ -984,43 +1017,42 @@ var import_tailwind_merge16 = require("tailwind-merge");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function TextArea({
   textAreaProps = {},
+  borderProps = {},
+  children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    import_react_aria_components14.TextField,
-    {
-      ...props,
-      className: (values) => (0, import_tailwind_merge16.twMerge)(
-        "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__ */ (0, import_jsx_runtime16.jsx)(
-        "div",
-        {
-          className: (0, import_tailwind_merge16.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 && "bg-lol-gray-950"
-          ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-            import_react_aria_components14.TextArea,
-            {
-              ...textAreaProps,
-              className: (values) => {
-                return (0, import_tailwind_merge16.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",
-                  resolveClassname(textAreaProps.className, values)
-                );
-              }
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_aria_components14.TextField, { ...props, children: (values) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    typeof children === "function" ? children(values) : children,
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "div",
+      {
+        ...borderProps,
+        className: (0, import_tailwind_merge16.twMerge)(
+          "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__ */ (0, import_jsx_runtime16.jsx)(
+          import_react_aria_components14.TextArea,
+          {
+            ...textAreaProps,
+            className: (values2) => {
+              return (0, import_tailwind_merge16.twMerge)(
+                "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
@@ -1035,7 +1067,7 @@ function Tooltip({ children, ...props }) {
       ...props,
       className: (values) => (0, import_tailwind_merge17.twMerge)(
         `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",
@@ -1079,6 +1111,40 @@ function Tooltip({ children, ...props }) {
     }
   );
 }
+
+// src/components/card.tsx
+var import_tailwind_merge18 = require("tailwind-merge");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function Card({ children, className, style, borderProps }) {
+  const r = `1rem`;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "div",
+    {
+      ...borderProps ?? {},
+      className: (0, import_tailwind_merge18.twMerge)("p-[3px]", borderGradient, borderProps?.className),
+      style: {
+        WebkitMask: borderInverted(r),
+        mask: borderInverted(r),
+        ...borderProps?.style ?? {}
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        "div",
+        {
+          className: (0, import_tailwind_merge18.twMerge)("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}`;
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
@@ -1086,6 +1152,7 @@ function Tooltip({ children, ...props }) {
   AccordionItem,
   AccordionTrigger,
   Button,
+  Card,
   Checkbox,
   DialogButtons,
   DialogTrigger,
@@ -1100,7 +1167,7 @@ function Tooltip({ children, ...props }) {
   SearchField,
   Select,
   Slider,
-  SliderLabel,
+  SliderOutput,
   Spinner,
   Switch,
   Tab,
@@ -1110,6 +1177,7 @@ function Tooltip({ children, ...props }) {
   TextArea,
   TextField,
   Tooltip,
-  TooltipTrigger
+  TooltipTrigger,
+  borderInverted
 });
 //# sourceMappingURL=index.cjs.map