@lolmath/ui 2.7.0 → 2.8.0

package/dist/index.d.cts

@@ -5,7 +5,9 @@ export { TooltipTrigger } from 'react-aria-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface ButtonProps extends ButtonProps$1 {
-    priority?: "primary" | "secondary";
+    priority?: "primary" | "secondary" | "tertiary";
+    isRounded?: boolean;
+    isSquared?: boolean;
 }
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
@@ -106,4 +108,10 @@ declare function TextArea({ textAreaProps, ...props }: TextFieldProps & {
 
 declare function Tooltip({ children, ...props }: TooltipProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, Checkbox, DialogButtons, DialogTrigger, Heading, Item, Label, Modal, NumberField, ProgressBar, Radio, RadioGroup, SearchField, Select, Slider, SliderLabel, Spinner, Switch, Tab, TabList, TabPanel, Tabs, TextArea, TextField, Tooltip };
+interface CardProps extends ComponentProps<"div"> {
+    borderProps?: ComponentProps<"div">;
+}
+declare function Card({ children, className, style, borderProps }: CardProps): react_jsx_runtime.JSX.Element;
+declare function borderInverted(r: string): string;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, Card, CardProps, Checkbox, DialogButtons, DialogTrigger, Heading, Item, Label, Modal, NumberField, ProgressBar, Radio, RadioGroup, SearchField, Select, Slider, SliderLabel, Spinner, Switch, Tab, TabList, TabPanel, Tabs, TextArea, TextField, Tooltip, borderInverted };

package/dist/index.d.ts

@@ -5,7 +5,9 @@ export { TooltipTrigger } from 'react-aria-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface ButtonProps extends ButtonProps$1 {
-    priority?: "primary" | "secondary";
+    priority?: "primary" | "secondary" | "tertiary";
+    isRounded?: boolean;
+    isSquared?: boolean;
 }
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
@@ -106,4 +108,10 @@ declare function TextArea({ textAreaProps, ...props }: TextFieldProps & {
 
 declare function Tooltip({ children, ...props }: TooltipProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, Checkbox, DialogButtons, DialogTrigger, Heading, Item, Label, Modal, NumberField, ProgressBar, Radio, RadioGroup, SearchField, Select, Slider, SliderLabel, Spinner, Switch, Tab, TabList, TabPanel, Tabs, TextArea, TextField, Tooltip };
+interface CardProps extends ComponentProps<"div"> {
+    borderProps?: ComponentProps<"div">;
+}
+declare function Card({ children, className, style, borderProps }: CardProps): react_jsx_runtime.JSX.Element;
+declare function borderInverted(r: string): string;
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Button, Card, CardProps, Checkbox, DialogButtons, DialogTrigger, Heading, Item, Label, Modal, NumberField, ProgressBar, Radio, RadioGroup, SearchField, Select, Slider, SliderLabel, Spinner, Switch, Tab, TabList, TabPanel, Tabs, TextArea, TextField, Tooltip, borderInverted };

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
             ),
@@ -173,7 +194,7 @@ function SearchField({
       className: (values) => {
         return twMerge3(
           "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)
@@ -378,10 +399,10 @@ function Switch({
           {
             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 +423,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" })
                   }
@@ -433,7 +454,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-lol-gold-100", 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 })
     ] }),
@@ -441,7 +462,7 @@ function ProgressBar({
       "div",
       {
         className: twMerge6(
-          borderClassName,
+          borderGradient,
           "-ml-0.5 -mr-1 h-3 rounded-full p-px"
         ),
         children: /* @__PURE__ */ jsx6(
@@ -503,7 +524,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: {
@@ -591,7 +612,7 @@ function TextField({
       ...props,
       className: (values) => twMerge8(
         "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)
@@ -710,7 +731,7 @@ function NumberField({
         const finalClassName = resolveClassname(groupProps.className, values);
         return twMerge11(
           "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
@@ -811,7 +832,7 @@ function Modal({
                   {
                     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 })
                   }
@@ -987,7 +1008,7 @@ function TextArea({
       ...props,
       className: (values) => twMerge16(
         "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)
@@ -1030,7 +1051,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",
@@ -1074,12 +1095,47 @@ 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,
@@ -1104,6 +1160,7 @@ export {
   TextArea,
   TextField,
   Tooltip,
-  TooltipTrigger
+  TooltipTrigger,
+  borderInverted
 };
 //# sourceMappingURL=index.js.map