@lolmath/ui 2.7.0 → 2.8.0

package/dist/index.cjs

@@ -25,6 +25,7 @@ __export(src_exports, {
   AccordionItem: () => AccordionItem,
   AccordionTrigger: () => AccordionTrigger,
   Button: () => Button,
+  Card: () => Card,
   Checkbox: () => Checkbox,
   DialogButtons: () => DialogButtons,
   DialogTrigger: () => DialogTrigger,
@@ -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
             ),
@@ -214,7 +237,7 @@ function SearchField({
       className: (values) => {
         return (0, import_tailwind_merge3.twMerge)(
           "flex flex-col outline-none",
-          borderClassName,
+          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)
@@ -413,10 +436,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 +460,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 +488,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 +496,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 +558,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: {
@@ -620,7 +643,7 @@ function TextField({
       ...props,
       className: (values) => (0, import_tailwind_merge8.twMerge)(
         "flex flex-col outline-none",
-        borderClassName,
+        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)
@@ -729,7 +752,7 @@ function NumberField({
         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,
+          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",
           finalClassName
@@ -824,7 +847,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 })
                   }
@@ -992,7 +1015,7 @@ function TextArea({
       ...props,
       className: (values) => (0, import_tailwind_merge16.twMerge)(
         "flex flex-col outline-none",
-        borderClassName,
+        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)
@@ -1035,7 +1058,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 +1102,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 +1143,7 @@ function Tooltip({ children, ...props }) {
   AccordionItem,
   AccordionTrigger,
   Button,
+  Card,
   Checkbox,
   DialogButtons,
   DialogTrigger,
@@ -1110,6 +1168,7 @@ function Tooltip({ children, ...props }) {
   TextArea,
   TextField,
   Tooltip,
-  TooltipTrigger
+  TooltipTrigger,
+  borderInverted
 });
 //# sourceMappingURL=index.cjs.map