@lolmath/ui 1.0.1

package/public/font/beaufort/beaufort.css

@@ -0,0 +1,79 @@
+@font-face {
+  font-family: beaufort;
+  src: url("./files/beaufort-300-italic.woff2") format("woff2"),
+    url("./files/beaufort-300-italic.woff") format("woff");
+  font-weight: 300;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: beaufort;
+  src: url("./files/beaufort-400-italic.woff2") format("woff2"),
+    url("./files/beaufort-400-italic.woff") format("woff");
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: beaufort;
+  src: url("./files/beaufort-500-italic.woff2") format("woff2"),
+    url("./files/beaufort-500-italic.woff") format("woff");
+  font-weight: 500;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: beaufort;
+  src: url("./files/beaufort-700-italic.woff2") format("woff2"),
+    url("./files/beaufort-700-italic.woff") format("woff");
+  font-weight: 700;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: beaufort;
+  src: url("./files/beaufort-900-italic.woff2") format("woff2"),
+    url("./files/beaufort-900-italic.woff") format("woff");
+  font-weight: 900;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: beaufort;
+  src: url("./files/beaufort-300-normal.woff2") format("woff2"),
+    url("./files/beaufort-300-normal.woff") format("woff");
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: beaufort;
+  src: url("./files/beaufort-400-normal.woff2") format("woff2"),
+    url("./files/beaufort-400-normal.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: beaufort;
+  src: url("./files/beaufort-500-normal.woff2") format("woff2"),
+    url("./files/beaufort-500-normal.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: beaufort;
+  src: url("./files/beaufort-700-normal.woff2") format("woff2"),
+    url("./files/beaufort-700-normal.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: beaufort;
+  src: url("./files/beaufort-900-normal.woff2") format("woff2"),
+    url("./files/beaufort-900-normal.woff") format("woff");
+  font-weight: 900;
+  font-style: normal;
+}

package/public/font/spiegel/spiegel.css

@@ -0,0 +1,44 @@
+@font-face {
+  font-family: spiegel;
+  src:
+    url("./files/spiegel-400-italic.woff2") format("woff2"),
+    url("./files/spiegel-400-italic.woff") format("woff");
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: spiegel;
+  src:
+    url("./files/spiegel-700-italic.woff2") format("woff2"),
+    url("./files/spiegel-700-italic.woff") format("woff");
+  font-weight: 700;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: spiegel;
+  src:
+    url("./files/spiegel-400-normal.woff2") format("woff2"),
+    url("./files/spiegel-400-normal.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: spiegel;
+  src:
+    url("./files/spiegel-600-normal.woff2") format("woff2"),
+    url("./files/spiegel-600-normal.woff") format("woff");
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: spiegel;
+  src:
+    url("./files/spiegel-700-normal.woff2") format("woff2"),
+    url("./files/spiegel-700-normal.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+}

package/src/components/accordion.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { createContext, useState, useContext } from "react";
+import { twMerge } from "tailwind-merge";
+
+interface AccordionProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function Accordion({ children, className }: AccordionProps) {
+  const [activeItem, setActiveItem] = useState<string>("");
+  return (
+    <AccordionContext.Provider
+      value={{
+        activeItem,
+        setActiveItem,
+      }}
+    >
+      <div
+        className={twMerge(
+          "bg-lol-blue-950 border-lol-gold-500 overflow-hidden rounded border",
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </AccordionContext.Provider>
+  );
+}
+
+interface AccordionTriggerProps {
+  children: React.ReactNode;
+  className?: string;
+}
+export function AccordionTrigger({
+  children,
+  className,
+}: AccordionTriggerProps) {
+  const { setActiveItem, activeItem } = useContext(AccordionContext);
+  const { item } = useContext(AccordionItemContext);
+
+  return (
+    <button
+      className={twMerge(
+        "text-lol-gray-300 font-beaufort hover:bg-lol-blue-800 active:bg-lol-blue-700 active:text-lol-gold-200 hover:text-lol-gray-100 flex w-full items-center px-5 py-2 text-left font-bold uppercase",
+        className,
+      )}
+      onClick={() => {
+        setActiveItem((currentItem) => (currentItem === item ? "" : item));
+      }}
+    >
+      <span
+        className={twMerge(
+          "mr-2 inline-block transform text-sm transition-transform",
+          item === activeItem && "rotate-90",
+        )}
+      >
+        ▶
+      </span>
+      {children}
+    </button>
+  );
+}
+
+interface AccordionItemProps {
+  children: React.ReactNode;
+  value: string;
+}
+export function AccordionItem({ children, value }: AccordionItemProps) {
+  return (
+    <AccordionItemContext.Provider
+      value={{
+        item: value,
+      }}
+    >
+      <div className="border-lol-gold-500 border-b last-of-type:border-none">
+        {children}
+      </div>
+    </AccordionItemContext.Provider>
+  );
+}
+
+interface AccordionContentProps {
+  children: React.ReactNode;
+}
+export function AccordionContent({ children }: AccordionContentProps) {
+  const { activeItem } = useContext(AccordionContext);
+  const { item } = useContext(AccordionItemContext);
+
+  if (activeItem !== item) {
+    return null;
+  }
+
+  return (
+    <div className="bg-lol-blue-900 border-lol-gold-500 font-spiegel text-lol-blue-100 border-t px-5 py-2">
+      {children}
+    </div>
+  );
+}
+
+const AccordionContext = createContext<{
+  activeItem: string;
+  setActiveItem: React.Dispatch<React.SetStateAction<string>>;
+}>(undefined as any);
+
+const AccordionItemContext = createContext<{
+  item: string;
+}>(undefined as any);

package/src/components/button.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { Ref, forwardRef } from "react";
+import {
+  Button as AriaButton,
+  ButtonProps as AriaButtonProps,
+} from "react-aria-components";
+import { twMerge } from "tailwind-merge";
+import {
+  borderClassName,
+  borderDisabledClassName,
+  borderHoverClassName,
+  borderPressedClassName,
+} from "../utilities/border";
+
+interface ButtonProps extends AriaButtonProps {
+  priority?: "primary" | "secondary";
+}
+
+function _Button(
+  { children, className, priority, ...props }: ButtonProps,
+  ref: Ref<HTMLButtonElement>,
+) {
+  return (
+    <AriaButton
+      ref={ref}
+      className={(values) => {
+        const overrideClassname =
+          typeof className === "undefined"
+            ? ""
+            : typeof className === "string"
+            ? className
+            : className(values);
+
+        // #5a401f 0%, #47341B #332717 100% primary background gradient.
+
+        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",
+          overrideClassname,
+        );
+      }}
+      {...props}
+    >
+      {(values) => {
+        return (
+          <span
+            className={twMerge(
+              "block m-0.5 px-4 py-2 bg-[#1e2328] transition-colors duration-200",
+              priority === "primary" && "bg-gradient-to-b",
+              "text-[#cdbe91] tracking-wide",
+              values.isHovered && "text-[#f0e6d2]",
+              values.isPressed && "text-[#5c5b57]",
+              values.isDisabled && "text-[#5c5b57]",
+              values.isFocused && "",
+              values.isFocusVisible && "",
+
+              priority === "primary" &&
+                "from-[#5a401f] via-[#47341B] to-[#332717]",
+              priority === "primary" &&
+                values.isHovered &&
+                "from-[#604522] via-[#846745] to-[#725634]",
+              priority === "primary" &&
+                values.isPressed &&
+                "from-[#261b0d] via-[#261b0d] to-[#261b0d]  text-[#67604c]",
+            )}
+          >
+            {typeof children === "function" ? children(values) : children}
+          </span>
+        );
+      }}
+    </AriaButton>
+  );
+}
+
+export const Button = forwardRef(_Button);

package/src/components/checkbox.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { Checkbox as AriaCheckbox, CheckboxProps } from "react-aria-components";
+import { twMerge } from "tailwind-merge";
+
+export function ToggleButton({ children, className, ...props }: CheckboxProps) {
+  return (
+    <AriaCheckbox
+      className={(values) => {
+        const overrideClassname =
+          typeof className === "undefined"
+            ? ""
+            : typeof className === "string"
+            ? className
+            : className(values);
+
+        return twMerge(
+          "",
+          "",
+          values.isSelected && "",
+          values.isIndeterminate && "",
+          values.isReadOnly && "",
+          values.isRequired && "",
+          values.isHovered && "",
+          values.isPressed && "",
+          values.isDisabled && "",
+          values.isFocused && "",
+          values.isFocusVisible && "",
+          overrideClassname,
+        );
+      }}
+      {...props}
+    >
+      {children}
+    </AriaCheckbox>
+  );
+}

package/src/components/progress-bar.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import {
+  ProgressBar as AriaProgressBar,
+  Label,
+  ProgressBarProps as AriaProgressBarProps,
+} from "react-aria-components";
+import { twMerge } from "tailwind-merge";
+import { borderClassName } from "../utilities/border";
+
+interface ProgressBarProps extends Omit<AriaProgressBarProps, "children"> {
+  label?: string;
+}
+
+export function ProgressBar({
+  className,
+  label,
+  ...props
+}: ProgressBarProps): JSX.Element {
+  return (
+    <AriaProgressBar className={"flex w-56 flex-col gap-1 text-sm"} {...props}>
+      {({ percentage, valueText }) => (
+        <>
+          <div className="flex font-[beaufort] font-bold uppercase text-[#f0e6d2]">
+            <Label className="flex-1 ">{label ?? "Loading"}</Label>
+            <span>{valueText}</span>
+          </div>
+          <div
+            className={twMerge(
+              borderClassName,
+              "-ml-0.5 -mr-1 h-3 rounded-full p-px",
+            )}
+          >
+            <div className={twMerge("h-full w-full rounded-full bg-[#1e2328]")}>
+              <div
+                className={twMerge(
+                  "h-full rounded-full bg-gradient-to-r from-[#005A82] via-[#067F9B] to-[#73CCD5]",
+                )}
+                style={{ width: `${percentage}%` }}
+              />
+            </div>
+          </div>
+        </>
+      )}
+    </AriaProgressBar>
+  );
+}

package/src/components/search-field.tsx

@@ -0,0 +1,65 @@
+import type { SearchFieldProps as AriaSearchFieldProps } from "react-aria-components";
+import {
+  SearchField as AriaSearchField,
+  Input as AriaInput,
+  Button as AriaButton,
+} from "react-aria-components";
+import { twMerge } from "tailwind-merge";
+import { borderClassName } from "../utilities/border";
+
+export function SearchField({
+  className,
+  placeholder,
+  ...props
+}: AriaSearchFieldProps & {
+  placeholder?: string;
+}) {
+  return (
+    <AriaSearchField
+      className={() =>
+        twMerge(
+          "flex flex-col outline-none [webkit-search-cancel-button]:hidden",
+          borderClassName,
+          "focus-within:from-[#c89c3c] focus-within:via-[#dcc188] focus-within:to-[#f0e6d8]",
+          props.isDisabled && "from-[#3c3c41] via-[#3c3c41] to-[#3c3c41]",
+        )
+      }
+      {...props}
+    >
+      {({ state }) => (
+        <div
+          className={twMerge(
+            "m-px bg-[#000000] flex flex-row focus-within:from-[#071019] focus-within:to-[#20272c] focus-within:bg-gradient-to-b",
+            props.isDisabled && "text-[#5c5b57] bg-[#1e2328]",
+          )}
+        >
+          <AriaInput
+            className="bg-transparent grow py-2 pl-6 text-[#f0e6d2] text-xs outline-none font-[spiegel] tracking-wide"
+            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",
+            }}
+            placeholder={placeholder}
+          />
+          {state.value.length > 0 && (
+            <AriaButton
+              className={(buttonValues) =>
+                twMerge(
+                  "font-black text-[#cdbe91] text-xs px-4",
+                  buttonValues.isHovered && "text-[#f0e6d2]",
+                  buttonValues.isPressed && "text-[#463714]",
+                )
+              }
+            >
+              ✕
+            </AriaButton>
+          )}
+        </div>
+      )}
+    </AriaSearchField>
+  );
+}

package/src/components/select.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { ReactNode } from "react";
+import type {
+  ItemProps as AriaItemProps,
+  SelectProps as AriaSelectProps,
+} from "react-aria-components";
+import {
+  Text as AriaText,
+  Select as AriaSelect,
+  Button as AriaButton,
+  Popover as AriaPopover,
+  ListBox as AriaListBox,
+  SelectValue as AriaSelectValue,
+  Item as AriaItem,
+} from "react-aria-components";
+import { twMerge } from "tailwind-merge";
+import {
+  borderClassName,
+  borderDisabledClassName,
+  borderHoverClassName,
+  borderPressedClassName,
+} from "../utilities/border";
+import { outlineClassName } from "../utilities/outline";
+
+interface SelectProps<T extends object>
+  extends Omit<AriaSelectProps<T>, "children"> {
+  label?: string;
+  description?: string;
+  errorMessage?: string;
+  children?: ReactNode | ((item: T) => ReactNode);
+}
+
+export function Select<T extends object>({
+  description,
+  errorMessage,
+  children,
+  ...props
+}: SelectProps<T>) {
+  return (
+    <AriaSelect {...props} className="font-[spiegel]">
+      {(values) => (
+        <>
+          <AriaButton
+            className={(buttonValues) =>
+              twMerge(
+                "inline-block outline-none",
+                borderClassName,
+                buttonValues.isHovered && borderHoverClassName,
+                (buttonValues.isPressed || values.isOpen) &&
+                  borderPressedClassName,
+                buttonValues.isDisabled && borderDisabledClassName,
+                buttonValues.isFocused && "",
+                buttonValues.isFocusVisible && outlineClassName,
+              )
+            }
+          >
+            <span
+              className={twMerge(
+                "block m-px bg-[#1e2328] px-2 py-1 text-[#a09b8c] text-xs font-normal tracking-wide pr-6 bg-no-repeat",
+              )}
+              style={{
+                backgroundPosition: "right 0.5rem center",
+                backgroundImage: values.isOpen
+                  ? "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAASCAYAAACAa1QyAAAA90lEQVR42mL8//8/A6mAiYEMwILVJG4RNiAlDcQgZzz79/XNL2R5RnTnATWwAyn5BEfBaqDUv4UH3rcD+Q+QNaJoAmrgAFJyiY6CdWL8LNEgsRcf/ixA14juJ6kkJ8FGkIbn7//MB2pYKCHAkhDvIFgJksPlJ0ZGRgbmp+9+z1py6EMvSACoASyO009A53FCTfwNCgCoS2A2wAOEcWDiCcl5v6DOY8bmPBYsodf28/f/90sPf+iDBgQo5BiAwd4ICnZcKeKfjDBrepy9IAsoJEFBDgp6fKGHLXIXAm1pQ45cfMmoBpqM2vAmIzSNUkQnWJrFE0CAAQCQxYvehN8YFAAAAABJRU5ErkJggg==')"
+                  : "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAASCAYAAACAa1QyAAAAiUlEQVR42mL8//8/A6mAiYEMQJYmFnSBk6vzYcwmIP4LxI0gjnnoRNyaoKAViKuQ+I14bQKCTiAuA+I6IGYG4gZ0jSw4nFwB1QwDjIRsKkbjNwxckFNNUw8QlyLx66EYb0D8A+IuIGaDyjcQE0+gOPoDxC1I8dNASBMDNDX8hWKMIGcc3FkDIMAA1n8bpHnZDOAAAAAASUVORK5CYII=')",
+              }}
+            >
+              <AriaSelectValue />
+            </span>
+          </AriaButton>
+          {description && <AriaText slot="description">{description}</AriaText>}
+          {errorMessage && (
+            <AriaText slot="errorMessage">{errorMessage}</AriaText>
+          )}
+          <AriaPopover offset={4}>
+            <AriaListBox
+              className={(listbox) =>
+                twMerge(
+                  "bg-[#010a13] border border-[#463714] outline-none",
+                  listbox.isFocused && "",
+                )
+              }
+            >
+              {children as any}
+            </AriaListBox>
+          </AriaPopover>
+        </>
+      )}
+    </AriaSelect>
+  );
+}
+
+export function Item({ className, ...props }: AriaItemProps) {
+  return (
+    <AriaItem
+      {...props}
+      className={(values) => {
+        const finalClassName =
+          typeof className === "function" ? className(values) : className;
+
+        return twMerge(
+          "px-2 py-0.5 border-b border-[#1f2123] text-[#cdbe91] text-sm font-[spiegel] font-bold outline-none",
+          values.isHovered && "bg-[#1e2328] text-[#f0e6d2]",
+          values.isPressed && "bg-[#1e232880] text-[#463714]",
+          values.isFocusVisible && outlineClassName,
+          values.isFocused && "",
+          finalClassName,
+        );
+      }}
+    />
+  );
+}