@lolmath/ui 3.2.1 → 3.2.2

package/dist/lib/components/tabs.cjs

@@ -0,0 +1,127 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var tabs_exports = {};
+__export(tabs_exports, {
+  Tab: () => Tab,
+  TabList: () => TabList,
+  TabPanel: () => TabPanel,
+  Tabs: () => Tabs
+});
+module.exports = __toCommonJS(tabs_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react_aria_components = require("react-aria-components");
+var import_css_id = require("../utilities/css-id.cjs");
+var import_react = require("react");
+var import_view_transition = require("../utilities/view-transition.cjs");
+var import_resolve_class_name = require("../utilities/resolve-class-name.cjs");
+var import_tv = require("../utilities/tv.cjs");
+function Tabs({ onSelectionChange, ...rest }) {
+  const id = (0, import_css_id.useCssId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContext.Provider, { value: { id }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_aria_components.Tabs,
+    {
+      ...rest,
+      onSelectionChange: (key) => {
+        (0, import_view_transition.startViewTransition)(() => {
+          onSelectionChange?.(key);
+        });
+      }
+    }
+  ) });
+}
+const tabList = (0, import_tv.tv)({
+  base: "-ml-4 flex gap-0"
+});
+function TabList({
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_aria_components.TabList,
+    {
+      ...rest,
+      className: (values) => tabList({
+        className: (0, import_resolve_class_name.resolveClassName)(className, values)
+      })
+    }
+  );
+}
+const tab = (0, import_tv.tv)({
+  base: [
+    "font-beaufort text-lol-gold-300 relative cursor-pointer select-none px-4 py-1 text-xs font-medium uppercase tracking-widest",
+    "focus-visible:outline-lol-gold-100 focus:outline-none focus-visible:outline-1 focus-visible:outline-offset-4"
+  ],
+  variants: {
+    isSelected: {
+      true: "text-lol-gold-100"
+    },
+    isHovered: {
+      true: "text-lol-gold-100"
+    },
+    isPressed: {
+      true: "text-lol-gold-500"
+    },
+    isDisabled: {
+      true: "text-lol-grey-150 cursor-default"
+    }
+  }
+});
+function Tab({ children, className, ...rest }) {
+  const { id } = useTabsContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_aria_components.Tab,
+    {
+      ...rest,
+      className: (values) => tab({
+        ...values,
+        className: (0, import_resolve_class_name.resolveClassName)(className, values)
+      }),
+      children: (values) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        typeof children === "function" ? children(values) : children,
+        values.isSelected && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            style: {
+              viewTransitionName: `tab-indicator-${id}`
+            },
+            className: "via-lol-gold-200 absolute bottom-0 left-0 h-px w-full bg-gradient-to-r from-transparent to-transparent"
+          }
+        )
+      ] })
+    }
+  );
+}
+function TabPanel({ ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.TabPanel, { ...rest });
+}
+const TabsContext = (0, import_react.createContext)(void 0);
+function useTabsContext() {
+  const context = (0, import_react.useContext)(TabsContext);
+  if (context === void 0) {
+    throw new Error("useTabsContext must be used within a Tabs");
+  }
+  return context;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Tab,
+  TabList,
+  TabPanel,
+  Tabs
+});

package/dist/lib/components/tabs.d.cts

@@ -0,0 +1,6 @@
+import { TabsProps, TabListProps, TabProps, TabPanelProps } from "react-aria-components";
+export type { Key } from "react-aria-components";
+export declare function Tabs({ onSelectionChange, ...rest }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export declare function TabList<T extends object>({ className, ...rest }: TabListProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Tab({ children, className, ...rest }: TabProps): import("react/jsx-runtime").JSX.Element;
+export declare function TabPanel({ ...rest }: TabPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/tabs.d.ts

@@ -0,0 +1,6 @@
+import { TabsProps, TabListProps, TabProps, TabPanelProps } from "react-aria-components";
+export type { Key } from "react-aria-components";
+export declare function Tabs({ onSelectionChange, ...rest }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export declare function TabList<T extends object>({ className, ...rest }: TabListProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Tab({ children, className, ...rest }: TabProps): import("react/jsx-runtime").JSX.Element;
+export declare function TabPanel({ ...rest }: TabPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/text-area.cjs

@@ -0,0 +1,86 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var text_area_exports = {};
+__export(text_area_exports, {
+  TextArea: () => TextArea
+});
+module.exports = __toCommonJS(text_area_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react_aria_components = require("react-aria-components");
+var import_gradient = require("../utilities/gradient.cjs");
+var import_resolve_class_name = require("../utilities/resolve-class-name.cjs");
+var import_tv = require("../utilities/tv.cjs");
+const textAreaBorder = (0, import_tv.tv)({
+  base: [
+    "flex bg-gradient-to-t p-px outline-none",
+    import_gradient.goldGradient,
+    "focus-within:from-lol-gold-400 focus-within:via-lol-gold-200 focus-within:to-lol-gold-100"
+  ],
+  variants: {
+    isDisabled: {
+      true: [import_gradient.disabledGradient]
+    }
+  }
+});
+const textArea = (0, import_tv.tv)({
+  base: [
+    "bg-lol-grey-hextech-black min-h-full w-full px-3 py-2 outline-none",
+    "text-lol-gold-100 font-spiegel text-xs tracking-wide",
+    "focus-within:from-lol-grey-200 focus-within:via-lol-grey-300 focus-within:to-lol-grey-300 focus-within:bg-gradient-to-t"
+  ],
+  variants: {
+    isDisabled: {
+      true: ["text-lol-grey-150"]
+    }
+  }
+});
+function TextArea({
+  textAreaProps = {},
+  borderProps = {},
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.TextField, { ...props, children: (values) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    typeof children === "function" ? children(values) : children,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ...borderProps,
+        className: textAreaBorder({
+          ...values,
+          className: (0, import_resolve_class_name.resolveClassName)(borderProps?.className, values)
+        }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react_aria_components.TextArea,
+          {
+            ...textAreaProps,
+            className: (values2) => textArea({
+              ...values2,
+              className: (0, import_resolve_class_name.resolveClassName)(textAreaProps?.className, values2)
+            })
+          }
+        )
+      }
+    )
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TextArea
+});

package/dist/lib/components/text-area.d.cts

@@ -0,0 +1,6 @@
+import type { TextFieldProps as AriaTextFieldProps, TextAreaProps } from "react-aria-components";
+import { ComponentProps } from "react";
+export declare function TextArea({ textAreaProps, borderProps, children, ...props }: AriaTextFieldProps & {
+    textAreaProps?: TextAreaProps;
+    borderProps?: ComponentProps<"div">;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/text-area.d.ts

@@ -0,0 +1,6 @@
+import type { TextFieldProps as AriaTextFieldProps, TextAreaProps } from "react-aria-components";
+import { ComponentProps } from "react";
+export declare function TextArea({ textAreaProps, borderProps, children, ...props }: AriaTextFieldProps & {
+    textAreaProps?: TextAreaProps;
+    borderProps?: ComponentProps<"div">;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/text-field.cjs

@@ -0,0 +1,87 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var text_field_exports = {};
+__export(text_field_exports, {
+  TextField: () => TextField
+});
+module.exports = __toCommonJS(text_field_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react_aria_components = require("react-aria-components");
+var import_gradient = require("../utilities/gradient.cjs");
+var import_resolve_class_name = require("../utilities/resolve-class-name.cjs");
+var import_tv = require("../utilities/tv.cjs");
+const textFieldBorder = (0, import_tv.tv)({
+  base: [
+    "flex bg-gradient-to-t p-px outline-none",
+    import_gradient.goldGradient,
+    "focus-within:from-lol-gold-400 focus-within:via-lol-gold-200 focus-within:to-lol-gold-100"
+  ],
+  variants: {
+    isDisabled: {
+      true: [import_gradient.disabledGradient]
+    }
+  }
+});
+const textField = (0, import_tv.tv)({
+  base: [
+    "bg-lol-grey-hextech-black min-h-full w-full px-3 py-2 outline-none",
+    "text-lol-gold-100 font-spiegel text-xs tracking-wide",
+    "focus-within:from-lol-grey-200 focus-within:via-lol-grey-300 focus-within:to-lol-grey-300 focus-within:bg-gradient-to-t"
+  ],
+  variants: {
+    isDisabled: {
+      true: ["text-lol-grey-150"]
+    }
+  }
+});
+function TextField({
+  inputProps = {},
+  borderProps = {},
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_aria_components.TextField, { ...props, children: (values) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    typeof children === "function" ? children(values) : children,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ...borderProps,
+        className: textFieldBorder({
+          ...values,
+          className: (0, import_resolve_class_name.resolveClassName)(borderProps?.className, values)
+        }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react_aria_components.Input,
+          {
+            type: "text",
+            ...inputProps,
+            className: (values2) => textField({
+              ...values2,
+              className: (0, import_resolve_class_name.resolveClassName)(inputProps?.className, values2)
+            })
+          }
+        )
+      }
+    )
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TextField
+});

package/dist/lib/components/text-field.d.cts

@@ -0,0 +1,6 @@
+import type { TextFieldProps as AriaTextFieldProps, InputProps } from "react-aria-components";
+import { ComponentProps } from "react";
+export declare function TextField({ inputProps, borderProps, children, ...props }: AriaTextFieldProps & {
+    inputProps?: InputProps;
+    borderProps?: ComponentProps<"div">;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/text-field.d.ts

@@ -0,0 +1,6 @@
+import type { TextFieldProps as AriaTextFieldProps, InputProps } from "react-aria-components";
+import { ComponentProps } from "react";
+export declare function TextField({ inputProps, borderProps, children, ...props }: AriaTextFieldProps & {
+    inputProps?: InputProps;
+    borderProps?: ComponentProps<"div">;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/toggle-button.cjs

@@ -0,0 +1,219 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var toggle_button_exports = {};
+__export(toggle_button_exports, {
+  ToggleButton: () => ToggleButton
+});
+module.exports = __toCommonJS(toggle_button_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react_aria_components = require("react-aria-components");
+var import_tv = require("../utilities/tv.cjs");
+var import_resolve_class_name = require("../utilities/resolve-class-name.cjs");
+var import_gradient = require("../utilities/gradient.cjs");
+const toggleButtonBorder = (0, import_tv.tv)({
+  base: "bg-gradient-to-t p-0.5 outline-none transition-colors duration-200",
+  variants: {
+    preset: {
+      gold: "",
+      hextech: "",
+      dimmed: import_gradient.dimmedGradient
+    },
+    shape: {
+      round: "aspect-square rounded-full",
+      square: "aspect-square",
+      normal: ""
+    },
+    isHovered: {
+      true: ""
+    },
+    isPressed: {
+      true: ""
+    },
+    isDisabled: {
+      true: ""
+    },
+    isFocused: {
+      true: ""
+    },
+    isFocusVisible: {
+      true: ""
+    },
+    isSelected: {
+      true: ""
+    },
+    thin: {
+      true: "p-px"
+    }
+  },
+  compoundVariants: [
+    {
+      preset: ["dimmed"],
+      isSelected: true,
+      class: [import_gradient.goldGradient]
+    },
+    {
+      preset: ["gold"],
+      class: import_gradient.goldGradient
+    },
+    {
+      preset: ["gold", "dimmed"],
+      isHovered: true,
+      class: import_gradient.goldGradientHover
+    },
+    {
+      preset: ["gold", "dimmed"],
+      isPressed: true,
+      class: import_gradient.goldGradientPressed
+    },
+    {
+      preset: ["gold", "dimmed"],
+      isDisabled: true,
+      class: import_gradient.disabledGradient
+    },
+    {
+      preset: ["gold"],
+      isFocusVisible: true,
+      class: "outline outline-offset-2 outline-yellow-50"
+    },
+    {
+      preset: ["hextech"],
+      class: import_gradient.hextechGradient
+    },
+    {
+      preset: ["hextech"],
+      isHovered: true,
+      class: import_gradient.hextechGradientHover
+    },
+    {
+      preset: ["hextech"],
+      isPressed: true,
+      class: import_gradient.hextechGradientPressed
+    },
+    {
+      preset: ["hextech"],
+      isDisabled: true,
+      class: import_gradient.disabledGradient
+    }
+  ]
+});
+const toggleButton = (0, import_tv.tv)({
+  base: "text-lol-gold-300 font-beaufort block font-bold uppercase tracking-wide transition-colors duration-200",
+  variants: {
+    preset: {
+      gold: "bg-lol-grey-300",
+      hextech: "text-lol-blue-100 bg-lol-grey-300",
+      dimmed: "bg-lol-grey-hextech-black"
+    },
+    isHovered: {
+      true: "text-lol-gold-100"
+    },
+    isPressed: {
+      true: "text-lol-grey-150"
+    },
+    isDisabled: {
+      true: "text-lol-grey-150"
+    },
+    isFocused: {
+      true: ""
+    },
+    isSelected: {
+      true: [
+        import_gradient.hextechGradient,
+        "text-lol-blue-100 shadow-lol-grey-300 bg-gradient-to-t shadow shadow-inner"
+      ]
+    },
+    isFocusVisible: {
+      true: ""
+    },
+    shape: {
+      round: "rounded-full",
+      square: "",
+      normal: ""
+    }
+  },
+  compoundVariants: [
+    {
+      preset: ["gold", "hextech", "dimmed"],
+      class: "px-4 py-2"
+    },
+    {
+      preset: ["hextech"],
+      isHovered: true,
+      class: "text-lol-blue-100"
+    },
+    {
+      preset: ["hextech"],
+      isPressed: true,
+      class: "text-lol-blue-400"
+    },
+    {
+      preset: ["hextech"],
+      isSelected: true,
+      class: ""
+    },
+    {
+      shape: ["round", "square"],
+      class: "flex aspect-square h-7 items-center justify-center p-0 font-black leading-none"
+    }
+  ]
+});
+function ToggleButton({
+  children,
+  className,
+  innerProps = {},
+  preset = "gold",
+  shape = "normal",
+  thin = preset === "dimmed" ? true : false,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_react_aria_components.ToggleButton,
+    {
+      ...props,
+      className: (values) => toggleButtonBorder({
+        ...values,
+        preset,
+        shape,
+        thin,
+        className: (0, import_resolve_class_name.resolveClassName)(className, values)
+      }),
+      children: (values) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "span",
+        {
+          ...innerProps,
+          className: toggleButton({
+            ...values,
+            preset,
+            shape,
+            className: (0, import_resolve_class_name.resolveClassName)(innerProps.className, values)
+          }),
+          style: {
+            // backgroundImage: hextechMagic,
+            // backgroundPosition: "center",
+          },
+          children: typeof children === "function" ? children(values) : children
+        }
+      )
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ToggleButton
+});

package/dist/lib/components/toggle-button.d.cts

@@ -0,0 +1,12 @@
+import { ComponentProps } from "react";
+import { type ToggleButtonProps as AriaToggleButtonProps } from "react-aria-components";
+export type ToggleButtonShape = "round" | "square" | "normal";
+export type ToggleButtonPreset = "gold" | "hextech" | "dimmed";
+interface ToggleButtonProps extends AriaToggleButtonProps {
+    innerProps?: ComponentProps<"span">;
+    preset?: ToggleButtonPreset;
+    thin?: boolean;
+    shape?: ToggleButtonShape;
+}
+export declare function ToggleButton({ children, className, innerProps, preset, shape, thin, ...props }: ToggleButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lib/components/toggle-button.d.ts

@@ -0,0 +1,12 @@
+import { ComponentProps } from "react";
+import { type ToggleButtonProps as AriaToggleButtonProps } from "react-aria-components";
+export type ToggleButtonShape = "round" | "square" | "normal";
+export type ToggleButtonPreset = "gold" | "hextech" | "dimmed";
+interface ToggleButtonProps extends AriaToggleButtonProps {
+    innerProps?: ComponentProps<"span">;
+    preset?: ToggleButtonPreset;
+    thin?: boolean;
+    shape?: ToggleButtonShape;
+}
+export declare function ToggleButton({ children, className, innerProps, preset, shape, thin, ...props }: ToggleButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};