@lolmath/ui 3.2.4 → 4.0.0

package/dist/es/components/tabs.js

@@ -1,32 +1,15 @@
+"use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva, cx } from "cva";
 import {
-  Tabs as AriaTabs,
-  TabList as AriaTabList,
   Tab as AriaTab,
-  TabPanel as AriaTabPanel
+  TabList as AriaTabList,
+  TabPanel as AriaTabPanel,
+  Tabs as AriaTabs
 } from "react-aria-components";
-import { useCssId } from "../utilities/css-id.js";
-import { createContext, useContext } from "react";
-import { startViewTransition } from "../utilities/view-transition.js";
 import { resolveClassName } from "../utilities/resolve-class-name.js";
-import { tv } from "../utilities/tv.js";
-function Tabs({ onSelectionChange, ...rest }) {
-  const id = useCssId();
-  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx(
-    AriaTabs,
-    {
-      ...rest,
-      onSelectionChange: (key) => {
-        startViewTransition(() => {
-          onSelectionChange?.(key);
-        });
-      }
-    }
-  ) });
-}
-const tabList = tv({
-  base: "-ml-4 flex gap-0"
-});
+import classes from "./tabs.module";
+const Tabs = AriaTabs;
 function TabList({
   className,
   ...rest
@@ -35,34 +18,31 @@ function TabList({
     AriaTabList,
     {
       ...rest,
-      className: (values) => tabList({
-        className: resolveClassName(className, values)
-      })
+      className: (values) => cx(classes.list, resolveClassName(className, values))
     }
   );
 }
-const tab = 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"
-  ],
+const tab = cva({
+  base: classes.tab,
   variants: {
     isSelected: {
-      true: "text-lol-gold-100"
+      true: classes.selected
     },
     isHovered: {
-      true: "text-lol-gold-100"
+      true: classes.hovered
     },
     isPressed: {
-      true: "text-lol-gold-500"
+      true: classes.pressed
     },
     isDisabled: {
-      true: "text-lol-grey-150 cursor-default"
+      true: classes.disabled
+    },
+    isFocusVisible: {
+      true: classes.focusVisible
     }
   }
 });
 function Tab({ children, className, ...rest }) {
-  const { id } = useTabsContext();
   return /* @__PURE__ */ jsx(
     AriaTab,
     {
@@ -73,15 +53,7 @@ function Tab({ children, className, ...rest }) {
       }),
       children: (values) => /* @__PURE__ */ jsxs(Fragment, { children: [
         typeof children === "function" ? children(values) : children,
-        values.isSelected && /* @__PURE__ */ 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"
-          }
-        )
+        values.isSelected && /* @__PURE__ */ jsx("div", { className: classes.indicator })
       ] })
     }
   );
@@ -89,14 +61,6 @@ function Tab({ children, className, ...rest }) {
 function TabPanel({ ...rest }) {
   return /* @__PURE__ */ jsx(AriaTabPanel, { ...rest });
 }
-const TabsContext = createContext(void 0);
-function useTabsContext() {
-  const context = useContext(TabsContext);
-  if (context === void 0) {
-    throw new Error("useTabsContext must be used within a Tabs");
-  }
-  return context;
-}
 export {
   Tab,
   TabList,

package/dist/es/components/tabs.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAsBM,SAkEE,UAlEF,KAkEE,YAlEF;AAtBN;AAAA,EACE,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,OAAO;AAAA,EACP,YAAY;AAAA,OAKP;AACP,SAAS,gBAAgB;AACzB,SAAS,eAAe,kBAAkB;AAC1C,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AACjC,SAAS,UAAU;AAIZ,SAAS,KAAK,EAAE,mBAAmB,GAAG,KAAK,GAAc;AAC9D,QAAM,KAAK,SAAS;AACpB,SACE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,GAAG,GAChC;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,mBAAmB,CAAC,QAAQ;AAC1B,4BAAoB,MAAM;AACxB,8BAAoB,GAAG;AAAA,QACzB,CAAC;AAAA,MACH;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,MAAM,UAAU,GAAG;AAAA,EACjB,MAAM;AACR,CAAC;AAEM,SAAS,QAA0B;AAAA,EACxC;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,CAAC,WACV,QAAQ;AAAA,QACN,WAAW,iBAAiB,WAAW,MAAM;AAAA,MAC/C,CAAC;AAAA;AAAA,EAEL;AAEJ;AAEA,MAAM,MAAM,GAAG;AAAA,EACb,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,IACR;AAAA,IACA,YAAY;AAAA,MACV,MAAM;AAAA,IACR;AAAA,EACF;AACF,CAAC;AAEM,SAAS,IAAI,EAAE,UAAU,WAAW,GAAG,KAAK,GAAa;AAC9D,QAAM,EAAE,GAAG,IAAI,eAAe;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,CAAC,WACV,IAAI;AAAA,QACF,GAAG;AAAA,QACH,WAAW,iBAAiB,WAAW,MAAM;AAAA,MAC/C,CAAC;AAAA,MAGF,WAAC,WACA,iCACG;AAAA,eAAO,aAAa,aAAa,SAAS,MAAM,IAAI;AAAA,QACpD,OAAO,cACN;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,oBAAoB,iBAAiB,EAAE;AAAA,YACzC;AAAA,YACA,WACE;AAAA;AAAA,QAEH;AAAA,SAEL;AAAA;AAAA,EAEJ;AAEJ;AAEO,SAAS,SAAS,EAAE,GAAG,KAAK,GAAkB;AACnD,SAAO,oBAAC,gBAAc,GAAG,MAAM;AACjC;AAEA,MAAM,cAAc,cAKlB,MAAS;AAEX,SAAS,iBAAiB;AACxB,QAAM,UAAU,WAAW,WAAW;AACtC,MAAI,YAAY,QAAW;AACzB,UAAM,IAAI,MAAM,2CAA2C;AAAA,EAC7D;AACA,SAAO;AACT","names":[],"sources":["../../../src/components/tabs.tsx"],"sourcesContent":["import {\n  Tabs as AriaTabs,\n  TabList as AriaTabList,\n  Tab as AriaTab,\n  TabPanel as AriaTabPanel,\n  TabsProps,\n  TabListProps,\n  TabProps,\n  TabPanelProps,\n} from \"react-aria-components\";\nimport { useCssId } from \"../utilities/css-id.js\";\nimport { createContext, useContext } from \"react\";\nimport { startViewTransition } from \"../utilities/view-transition.js\";\nimport { resolveClassName } from \"../utilities/resolve-class-name.js\";\nimport { tv } from \"../utilities/tv.js\";\n\nexport type { Key } from \"react-aria-components\";\n\nexport function Tabs({ onSelectionChange, ...rest }: TabsProps) {\n  const id = useCssId();\n  return (\n    <TabsContext.Provider value={{ id }}>\n      <AriaTabs\n        {...rest}\n        onSelectionChange={(key) => {\n          startViewTransition(() => {\n            onSelectionChange?.(key);\n          });\n        }}\n      />\n    </TabsContext.Provider>\n  );\n}\n\nconst tabList = tv({\n  base: \"-ml-4 flex gap-0\",\n});\n\nexport function TabList<T extends object>({\n  className,\n  ...rest\n}: TabListProps<T>) {\n  return (\n    <AriaTabList<T>\n      {...rest}\n      className={(values) =>\n        tabList({\n          className: resolveClassName(className, values),\n        })\n      }\n    />\n  );\n}\n\nconst tab = tv({\n  base: [\n    \"font-beaufort text-lol-gold-300 relative cursor-pointer select-none px-4 py-1 text-xs font-medium uppercase tracking-widest\",\n    \"focus-visible:outline-lol-gold-100 focus:outline-none focus-visible:outline-1 focus-visible:outline-offset-4\",\n  ],\n  variants: {\n    isSelected: {\n      true: \"text-lol-gold-100\",\n    },\n    isHovered: {\n      true: \"text-lol-gold-100\",\n    },\n    isPressed: {\n      true: \"text-lol-gold-500\",\n    },\n    isDisabled: {\n      true: \"text-lol-grey-150 cursor-default\",\n    },\n  },\n});\n\nexport function Tab({ children, className, ...rest }: TabProps) {\n  const { id } = useTabsContext();\n  return (\n    <AriaTab\n      {...rest}\n      className={(values) =>\n        tab({\n          ...values,\n          className: resolveClassName(className, values),\n        })\n      }\n    >\n      {(values) => (\n        <>\n          {typeof children === \"function\" ? children(values) : children}\n          {values.isSelected && (\n            <div\n              style={{\n                viewTransitionName: `tab-indicator-${id}`,\n              }}\n              className={\n                \"via-lol-gold-200 absolute bottom-0 left-0 h-px w-full bg-gradient-to-r from-transparent to-transparent\"\n              }\n            ></div>\n          )}\n        </>\n      )}\n    </AriaTab>\n  );\n}\n\nexport function TabPanel({ ...rest }: TabPanelProps) {\n  return <AriaTabPanel {...rest} />;\n}\n\nconst TabsContext = createContext<\n  | {\n      id: string;\n    }\n  | undefined\n>(undefined);\n\nfunction useTabsContext() {\n  const context = useContext(TabsContext);\n  if (context === undefined) {\n    throw new Error(\"useTabsContext must be used within a Tabs\");\n  }\n  return context;\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
+{"version":3,"mappings":";AAwBE,SA0CE,UA1CF,KA0CE,YA1CF;AAtBF,SAAS,KAAK,UAAU;AACxB;AAAA,EACC,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,QAAQ;AAAA,OAIF;AACP,SAAS,wBAAwB;AACjC,OAAO,aAAa;AAIb,MAAM,OAAO;AAEb,SAAS,QAA0B;AAAA,EACzC;AAAA,EACA,GAAG;AACJ,GAAoB;AACnB,SACC;AAAA,IAAC;AAAA;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,CAAC,WACX,GAAG,QAAQ,MAAM,iBAAiB,WAAW,MAAM,CAAC;AAAA;AAAA,EAEtD;AAEF;AAEA,MAAM,MAAM,IAAI;AAAA,EACf,MAAM,QAAQ;AAAA,EACd,UAAU;AAAA,IACT,YAAY;AAAA,MACX,MAAM,QAAQ;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACV,MAAM,QAAQ;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACV,MAAM,QAAQ;AAAA,IACf;AAAA,IACA,YAAY;AAAA,MACX,MAAM,QAAQ;AAAA,IACf;AAAA,IACA,gBAAgB;AAAA,MACf,MAAM,QAAQ;AAAA,IACf;AAAA,EACD;AACD,CAAC;AAEM,SAAS,IAAI,EAAE,UAAU,WAAW,GAAG,KAAK,GAAa;AAC/D,SACC;AAAA,IAAC;AAAA;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,CAAC,WACX,IAAI;AAAA,QACH,GAAG;AAAA,QACH,WAAW,iBAAiB,WAAW,MAAM;AAAA,MAC9C,CAAC;AAAA,MAGD,WAAC,WACD,iCACE;AAAA,eAAO,aAAa,aAAa,SAAS,MAAM,IAAI;AAAA,QACpD,OAAO,cAAc,oBAAC,SAAI,WAAW,QAAQ,WAAW;AAAA,SAC1D;AAAA;AAAA,EAEF;AAEF;AAEO,SAAS,SAAS,EAAE,GAAG,KAAK,GAAkB;AACpD,SAAO,oBAAC,gBAAc,GAAG,MAAM;AAChC","names":[],"ignoreList":[],"sources":["../../../src/components/tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, cx } from \"cva\";\nimport {\n\tTab as AriaTab,\n\tTabList as AriaTabList,\n\tTabPanel as AriaTabPanel,\n\tTabs as AriaTabs,\n\ttype TabListProps,\n\ttype TabPanelProps,\n\ttype TabProps,\n} from \"react-aria-components\";\nimport { resolveClassName } from \"../utilities/resolve-class-name.js\";\nimport classes from \"./tabs.module\";\n\nexport type { Key } from \"react-aria-components\";\n\nexport const Tabs = AriaTabs;\n\nexport function TabList<T extends object>({\n\tclassName,\n\t...rest\n}: TabListProps<T>) {\n\treturn (\n\t\t<AriaTabList<T>\n\t\t\t{...rest}\n\t\t\tclassName={(values) =>\n\t\t\t\tcx(classes.list, resolveClassName(className, values))\n\t\t\t}\n\t\t/>\n\t);\n}\n\nconst tab = cva({\n\tbase: classes.tab,\n\tvariants: {\n\t\tisSelected: {\n\t\t\ttrue: classes.selected,\n\t\t},\n\t\tisHovered: {\n\t\t\ttrue: classes.hovered,\n\t\t},\n\t\tisPressed: {\n\t\t\ttrue: classes.pressed,\n\t\t},\n\t\tisDisabled: {\n\t\t\ttrue: classes.disabled,\n\t\t},\n\t\tisFocusVisible: {\n\t\t\ttrue: classes.focusVisible,\n\t\t},\n\t},\n});\n\nexport function Tab({ children, className, ...rest }: TabProps) {\n\treturn (\n\t\t<AriaTab\n\t\t\t{...rest}\n\t\t\tclassName={(values) =>\n\t\t\t\ttab({\n\t\t\t\t\t...values,\n\t\t\t\t\tclassName: resolveClassName(className, values),\n\t\t\t\t})\n\t\t\t}\n\t\t>\n\t\t\t{(values) => (\n\t\t\t\t<>\n\t\t\t\t\t{typeof children === \"function\" ? children(values) : children}\n\t\t\t\t\t{values.isSelected && <div className={classes.indicator} />}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</AriaTab>\n\t);\n}\n\nexport function TabPanel({ ...rest }: TabPanelProps) {\n\treturn <AriaTabPanel {...rest} />;\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

package/dist/es/components/tabs.module.js

@@ -0,0 +1,7 @@
+import "./tabs_module.css";
+var tabs_default = { "list": "list_c42a1", "tab": "tab_c42a1", "selected": "selected_c42a1", "hovered": "hovered_c42a1", "pressed": "pressed_c42a1", "disabled": "disabled_c42a1", "focusVisible": "focusVisible_c42a1", "indicator": "indicator_c42a1" };
+export {
+  tabs_default as default
+};
+
+//# sourceMappingURL=tabs.module.js.map

package/dist/es/components/tabs.module.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,OAAO;AAAoB,IAAO,eAAQ,EAAC,QAAO,cAAa,OAAM,aAAY,YAAW,kBAAiB,WAAU,iBAAgB,WAAU,iBAAgB,YAAW,kBAAiB,gBAAe,sBAAqB,aAAY,kBAAiB","names":[],"ignoreList":[],"sources":["../../../src/components/tabs.module.css"],"sourcesContent":["import \"./tabs_module.css\";export default {\"list\":\"list_c42a1\",\"tab\":\"tab_c42a1\",\"selected\":\"selected_c42a1\",\"hovered\":\"hovered_c42a1\",\"pressed\":\"pressed_c42a1\",\"disabled\":\"disabled_c42a1\",\"focusVisible\":\"focusVisible_c42a1\",\"indicator\":\"indicator_c42a1\"}//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

package/dist/es/components/tabs_module.css

@@ -0,0 +1,50 @@
+.list_c42a1 {
+	margin-left: -1rem;
+	display: flex;
+}
+
+.tab_c42a1 {
+	font-family: var(--lol-font-family-beaufort);
+	color: var(--lol-color-gold-300);
+	position: relative;
+	cursor: pointer;
+	user-select: none;
+	padding: 0.25rem 1rem;
+	font-size: 0.75rem;
+	font-weight: 500;
+	text-transform: uppercase;
+	letter-spacing: 0.1em;
+	line-height: 1rem;
+	outline: none;
+}
+
+.tab_c42a1.selected_c42a1 {
+		color: var(--lol-color-gold-100);
+	}
+
+.tab_c42a1.hovered_c42a1 {
+		color: var(--lol-color-gold-100);
+	}
+
+.tab_c42a1.pressed_c42a1 {
+		color: var(--lol-color-gold-500);
+	}
+
+.tab_c42a1.disabled_c42a1 {
+		color: var(--lol-color-grey-150);
+		cursor: default;
+	}
+
+.tab_c42a1.focusVisible_c42a1 {
+		outline: 1px solid var(--lol-color-gold-400);
+		outline-offset: 0.25rem;
+	}
+
+.indicator_c42a1 {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	height: 1px;
+	width: 100%;
+	background: linear-gradient(to right, transparent, var(--lol-color-gold-200), transparent);
+}

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

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

package/dist/es/components/text-area.js

@@ -1,61 +1,25 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import {
-  TextField as AriaTextField,
-  TextArea as AriaTextArea
+  TextArea as AriaTextArea,
+  TextField as AriaTextField
 } from "react-aria-components";
-import { goldGradient, disabledGradient } from "../utilities/gradient.js";
 import { resolveClassName } from "../utilities/resolve-class-name.js";
-import { tv } from "../utilities/tv.js";
-const textAreaBorder = tv({
-  base: [
-    "flex bg-gradient-to-t p-px outline-none",
-    goldGradient,
-    "focus-within:from-lol-gold-400 focus-within:via-lol-gold-200 focus-within:to-lol-gold-100"
-  ],
-  variants: {
-    isDisabled: {
-      true: [disabledGradient]
-    }
-  }
-});
-const textArea = 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"]
-    }
-  }
-});
+import { textField } from "./text-field.js";
 function TextArea({
   textAreaProps = {},
-  borderProps = {},
   children,
   ...props
 }) {
   return /* @__PURE__ */ jsx(AriaTextField, { ...props, children: (values) => /* @__PURE__ */ jsxs(Fragment, { children: [
     typeof children === "function" ? children(values) : children,
     /* @__PURE__ */ jsx(
-      "div",
+      AriaTextArea,
       {
-        ...borderProps,
-        className: textAreaBorder({
-          ...values,
-          className: resolveClassName(borderProps?.className, values)
-        }),
-        children: /* @__PURE__ */ jsx(
-          AriaTextArea,
-          {
-            ...textAreaProps,
-            className: (values2) => textArea({
-              ...values2,
-              className: resolveClassName(textAreaProps?.className, values2)
-            })
-          }
-        )
+        ...textAreaProps,
+        className: (values2) => textField({
+          ...values2,
+          className: resolveClassName(textAreaProps?.className, values2)
+        })
       }
     )
   ] }) });

package/dist/es/components/text-area.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAmDQ,mBASI,KATJ;AA/CR;AAAA,EACE,aAAa;AAAA,EACb,YAAY;AAAA,OACP;AACP,SAAS,cAAc,wBAAwB;AAC/C,SAAS,wBAAwB;AAEjC,SAAS,UAAU;AAEnB,MAAM,iBAAiB,GAAG;AAAA,EACxB,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM,CAAC,gBAAgB;AAAA,IACzB;AAAA,EACF;AACF,CAAC;AAED,MAAM,WAAW,GAAG;AAAA,EAClB,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM,CAAC,mBAAmB;AAAA,IAC5B;AAAA,EACF;AACF,CAAC;AAEM,SAAS,SAAS;AAAA,EACvB,gBAAgB,CAAC;AAAA,EACjB,cAAc,CAAC;AAAA,EACf;AAAA,EACA,GAAG;AACL,GAGG;AACD,SACE,oBAAC,iBAAe,GAAG,OAChB,WAAC,WACA,iCACG;AAAA,WAAO,aAAa,aAAa,SAAS,MAAM,IAAI;AAAA,IACrD;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW,eAAe;AAAA,UACxB,GAAG;AAAA,UACH,WAAW,iBAAiB,aAAa,WAAW,MAAM;AAAA,QAC5D,CAAC;AAAA,QAED;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ,WAAW,CAACA,YACV,SAAS;AAAA,cACP,GAAGA;AAAA,cACH,WAAW,iBAAiB,eAAe,WAAWA,OAAM;AAAA,YAC9D,CAAC;AAAA;AAAA,QAEL;AAAA;AAAA,IACF;AAAA,KACF,GAEJ;AAEJ","names":["values"],"sources":["../../../src/components/text-area.tsx"],"sourcesContent":["import type {\n  TextFieldProps as AriaTextFieldProps,\n  TextAreaProps,\n} from \"react-aria-components\";\nimport {\n  TextField as AriaTextField,\n  TextArea as AriaTextArea,\n} from \"react-aria-components\";\nimport { goldGradient, disabledGradient } from \"../utilities/gradient.js\";\nimport { resolveClassName } from \"../utilities/resolve-class-name.js\";\nimport { ComponentProps } from \"react\";\nimport { tv } from \"../utilities/tv.js\";\n\nconst textAreaBorder = tv({\n  base: [\n    \"flex bg-gradient-to-t p-px outline-none\",\n    goldGradient,\n    \"focus-within:from-lol-gold-400 focus-within:via-lol-gold-200 focus-within:to-lol-gold-100\",\n  ],\n  variants: {\n    isDisabled: {\n      true: [disabledGradient],\n    },\n  },\n});\n\nconst textArea = tv({\n  base: [\n    \"bg-lol-grey-hextech-black min-h-full w-full px-3 py-2 outline-none\",\n    \"text-lol-gold-100 font-spiegel text-xs tracking-wide\",\n    \"focus-within:from-lol-grey-200 focus-within:via-lol-grey-300 focus-within:to-lol-grey-300 focus-within:bg-gradient-to-t\",\n  ],\n  variants: {\n    isDisabled: {\n      true: [\"text-lol-grey-150\"],\n    },\n  },\n});\n\nexport function TextArea({\n  textAreaProps = {},\n  borderProps = {},\n  children,\n  ...props\n}: AriaTextFieldProps & {\n  textAreaProps?: TextAreaProps;\n  borderProps?: ComponentProps<\"div\">;\n}) {\n  return (\n    <AriaTextField {...props}>\n      {(values) => (\n        <>\n          {typeof children === \"function\" ? children(values) : children}\n          <div\n            {...borderProps}\n            className={textAreaBorder({\n              ...values,\n              className: resolveClassName(borderProps?.className, values),\n            })}\n          >\n            <AriaTextArea\n              {...textAreaProps}\n              className={(values) =>\n                textArea({\n                  ...values,\n                  className: resolveClassName(textAreaProps?.className, values),\n                })\n              }\n            />\n          </div>\n        </>\n      )}\n    </AriaTextField>\n  );\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
+{"version":3,"mappings":"AAqBI,mBAEC,KAFD;AAjBJ;AAAA,EACC,YAAY;AAAA,EACZ,aAAa;AAAA,OACP;AACP,SAAS,wBAAwB;AACjC,SAAS,iBAAiB;AAEnB,SAAS,SAAS;AAAA,EACxB,gBAAgB,CAAC;AAAA,EACjB;AAAA,EACA,GAAG;AACJ,GAEG;AACF,SACC,oBAAC,iBAAe,GAAG,OACjB,WAAC,WACD,iCACE;AAAA,WAAO,aAAa,aAAa,SAAS,MAAM,IAAI;AAAA,IACrD;AAAA,MAAC;AAAA;AAAA,QACC,GAAG;AAAA,QACJ,WAAW,CAACA,YACX,UAAU;AAAA,UACT,GAAGA;AAAA,UACH,WAAW,iBAAiB,eAAe,WAAWA,OAAM;AAAA,QAC7D,CAAC;AAAA;AAAA,IAEH;AAAA,KACD,GAEF;AAEF","names":["values"],"ignoreList":[],"sources":["../../../src/components/text-area.tsx"],"sourcesContent":["import type {\n\tTextFieldProps as AriaTextFieldProps,\n\tTextAreaProps,\n} from \"react-aria-components\";\nimport {\n\tTextArea as AriaTextArea,\n\tTextField as AriaTextField,\n} from \"react-aria-components\";\nimport { resolveClassName } from \"../utilities/resolve-class-name.js\";\nimport { textField } from \"./text-field.js\";\n\nexport function TextArea({\n\ttextAreaProps = {},\n\tchildren,\n\t...props\n}: AriaTextFieldProps & {\n\ttextAreaProps?: TextAreaProps;\n}) {\n\treturn (\n\t\t<AriaTextField {...props}>\n\t\t\t{(values) => (\n\t\t\t\t<>\n\t\t\t\t\t{typeof children === \"function\" ? children(values) : children}\n\t\t\t\t\t<AriaTextArea\n\t\t\t\t\t\t{...textAreaProps}\n\t\t\t\t\t\tclassName={(values) =>\n\t\t\t\t\t\t\ttextField({\n\t\t\t\t\t\t\t\t...values,\n\t\t\t\t\t\t\t\tclassName: resolveClassName(textAreaProps?.className, values),\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</AriaTextField>\n\t);\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

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

@@ -1,5 +1,63 @@
+import type { ComponentProps } from "react";
 import type { TextFieldProps as AriaTextFieldProps, InputProps } from "react-aria-components";
-import { ComponentProps } from "react";
+export declare const textField: (props?: ({
+    isDisabled?: boolean | undefined;
+    isFocused?: boolean | undefined;
+} & ({
+    class?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+    className?: never;
+} | {
+    class?: never;
+    className?: string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | (string | number | boolean | any | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined)[] | {
+        [x: string]: any;
+    } | null | undefined;
+})) | undefined) => string;
 export declare function TextField({ inputProps, borderProps, children, ...props }: AriaTextFieldProps & {
     inputProps?: InputProps;
     borderProps?: ComponentProps<"div">;

package/dist/es/components/text-field.js

@@ -1,32 +1,19 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import {
-  TextField as AriaTextField,
-  Input as AriaInput
+  Input as AriaInput,
+  TextField as AriaTextField
 } from "react-aria-components";
-import { goldGradient, disabledGradient } from "../utilities/gradient.js";
 import { resolveClassName } from "../utilities/resolve-class-name.js";
-import { tv } from "../utilities/tv.js";
-const textFieldBorder = tv({
-  base: [
-    "flex bg-gradient-to-t p-px outline-none",
-    goldGradient,
-    "focus-within:from-lol-gold-400 focus-within:via-lol-gold-200 focus-within:to-lol-gold-100"
-  ],
+import { cva } from "cva";
+import classes from "./text-field.module";
+const textField = cva({
+  base: classes.textField,
   variants: {
     isDisabled: {
-      true: [disabledGradient]
-    }
-  }
-});
-const textField = 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"]
+      true: classes.disabled
+    },
+    isFocused: {
+      true: classes.focus
     }
   }
 });
@@ -39,30 +26,21 @@ function TextField({
   return /* @__PURE__ */ jsx(AriaTextField, { ...props, children: (values) => /* @__PURE__ */ jsxs(Fragment, { children: [
     typeof children === "function" ? children(values) : children,
     /* @__PURE__ */ jsx(
-      "div",
+      AriaInput,
       {
-        ...borderProps,
-        className: textFieldBorder({
-          ...values,
-          className: resolveClassName(borderProps?.className, values)
-        }),
-        children: /* @__PURE__ */ jsx(
-          AriaInput,
-          {
-            type: "text",
-            ...inputProps,
-            className: (values2) => textField({
-              ...values2,
-              className: resolveClassName(inputProps?.className, values2)
-            })
-          }
-        )
+        type: "text",
+        ...inputProps,
+        className: (values2) => textField({
+          ...values2,
+          className: resolveClassName(inputProps?.className, values2)
+        })
       }
     )
   ] }) });
 }
 export {
-  TextField
+  TextField,
+  textField
 };
 
 //# sourceMappingURL=text-field.js.map

package/dist/es/components/text-field.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAmDQ,mBASI,KATJ;AA/CR;AAAA,EACE,aAAa;AAAA,EACb,SAAS;AAAA,OACJ;AACP,SAAS,cAAc,wBAAwB;AAC/C,SAAS,wBAAwB;AAEjC,SAAS,UAAU;AAEnB,MAAM,kBAAkB,GAAG;AAAA,EACzB,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM,CAAC,gBAAgB;AAAA,IACzB;AAAA,EACF;AACF,CAAC;AAED,MAAM,YAAY,GAAG;AAAA,EACnB,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM,CAAC,mBAAmB;AAAA,IAC5B;AAAA,EACF;AACF,CAAC;AAEM,SAAS,UAAU;AAAA,EACxB,aAAa,CAAC;AAAA,EACd,cAAc,CAAC;AAAA,EACf;AAAA,EACA,GAAG;AACL,GAGG;AACD,SACE,oBAAC,iBAAe,GAAG,OAChB,WAAC,WACA,iCACG;AAAA,WAAO,aAAa,aAAa,SAAS,MAAM,IAAI;AAAA,IACrD;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW,gBAAgB;AAAA,UACzB,GAAG;AAAA,UACH,WAAW,iBAAiB,aAAa,WAAW,MAAM;AAAA,QAC5D,CAAC;AAAA,QAED;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACJ,GAAG;AAAA,YACJ,WAAW,CAACA,YACV,UAAU;AAAA,cACR,GAAGA;AAAA,cACH,WAAW,iBAAiB,YAAY,WAAWA,OAAM;AAAA,YAC3D,CAAC;AAAA;AAAA,QAEL;AAAA;AAAA,IACF;AAAA,KACF,GAEJ;AAEJ","names":["values"],"sources":["../../../src/components/text-field.tsx"],"sourcesContent":["import type {\n  TextFieldProps as AriaTextFieldProps,\n  InputProps,\n} from \"react-aria-components\";\nimport {\n  TextField as AriaTextField,\n  Input as AriaInput,\n} from \"react-aria-components\";\nimport { goldGradient, disabledGradient } from \"../utilities/gradient.js\";\nimport { resolveClassName } from \"../utilities/resolve-class-name.js\";\nimport { ComponentProps } from \"react\";\nimport { tv } from \"../utilities/tv.js\";\n\nconst textFieldBorder = tv({\n  base: [\n    \"flex bg-gradient-to-t p-px outline-none\",\n    goldGradient,\n    \"focus-within:from-lol-gold-400 focus-within:via-lol-gold-200 focus-within:to-lol-gold-100\",\n  ],\n  variants: {\n    isDisabled: {\n      true: [disabledGradient],\n    },\n  },\n});\n\nconst textField = tv({\n  base: [\n    \"bg-lol-grey-hextech-black min-h-full w-full px-3 py-2 outline-none\",\n    \"text-lol-gold-100 font-spiegel text-xs tracking-wide\",\n    \"focus-within:from-lol-grey-200 focus-within:via-lol-grey-300 focus-within:to-lol-grey-300 focus-within:bg-gradient-to-t\",\n  ],\n  variants: {\n    isDisabled: {\n      true: [\"text-lol-grey-150\"],\n    },\n  },\n});\n\nexport function TextField({\n  inputProps = {},\n  borderProps = {},\n  children,\n  ...props\n}: AriaTextFieldProps & {\n  inputProps?: InputProps;\n  borderProps?: ComponentProps<\"div\">;\n}) {\n  return (\n    <AriaTextField {...props}>\n      {(values) => (\n        <>\n          {typeof children === \"function\" ? children(values) : children}\n          <div\n            {...borderProps}\n            className={textFieldBorder({\n              ...values,\n              className: resolveClassName(borderProps?.className, values),\n            })}\n          >\n            <AriaInput\n              type=\"text\"\n              {...inputProps}\n              className={(values) =>\n                textField({\n                  ...values,\n                  className: resolveClassName(inputProps?.className, values),\n                })\n              }\n            />\n          </div>\n        </>\n      )}\n    </AriaTextField>\n  );\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwic291cmNlcyI6W10sInNvdXJjZXNDb250ZW50IjpbXX0="]}
+{"version":3,"mappings":"AAsCI,mBAGC,KAHD;AAjCJ;AAAA,EACC,SAAS;AAAA,EACT,aAAa;AAAA,OACP;AACP,SAAS,wBAAwB;AAEjC,SAAS,WAAW;AACpB,OAAO,aAAa;AAEb,MAAM,YAAY,IAAI;AAAA,EAC5B,MAAM,QAAQ;AAAA,EACd,UAAU;AAAA,IACT,YAAY;AAAA,MACX,MAAM,QAAQ;AAAA,IACf;AAAA,IACA,WAAW;AAAA,MACV,MAAM,QAAQ;AAAA,IACf;AAAA,EACD;AACD,CAAC;AAEM,SAAS,UAAU;AAAA,EACzB,aAAa,CAAC;AAAA,EACd,cAAc,CAAC;AAAA,EACf;AAAA,EACA,GAAG;AACJ,GAGG;AACF,SACC,oBAAC,iBAAe,GAAG,OACjB,WAAC,WACD,iCACE;AAAA,WAAO,aAAa,aAAa,SAAS,MAAM,IAAI;AAAA,IAErD;AAAA,MAAC;AAAA;AAAA,QACA,MAAK;AAAA,QACJ,GAAG;AAAA,QACJ,WAAW,CAACA,YACX,UAAU;AAAA,UACT,GAAGA;AAAA,UACH,WAAW,iBAAiB,YAAY,WAAWA,OAAM;AAAA,QAC1D,CAAC;AAAA;AAAA,IAEH;AAAA,KACD,GAEF;AAEF","names":["values"],"ignoreList":[],"sources":["../../../src/components/text-field.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport type {\n\tTextFieldProps as AriaTextFieldProps,\n\tInputProps,\n} from \"react-aria-components\";\nimport {\n\tInput as AriaInput,\n\tTextField as AriaTextField,\n} from \"react-aria-components\";\nimport { resolveClassName } from \"../utilities/resolve-class-name.js\";\n\nimport { cva } from \"cva\";\nimport classes from \"./text-field.module\";\n\nexport const textField = cva({\n\tbase: classes.textField,\n\tvariants: {\n\t\tisDisabled: {\n\t\t\ttrue: classes.disabled,\n\t\t},\n\t\tisFocused: {\n\t\t\ttrue: classes.focus,\n\t\t},\n\t},\n});\n\nexport function TextField({\n\tinputProps = {},\n\tborderProps = {},\n\tchildren,\n\t...props\n}: AriaTextFieldProps & {\n\tinputProps?: InputProps;\n\tborderProps?: ComponentProps<\"div\">;\n}) {\n\treturn (\n\t\t<AriaTextField {...props}>\n\t\t\t{(values) => (\n\t\t\t\t<>\n\t\t\t\t\t{typeof children === \"function\" ? children(values) : children}\n\n\t\t\t\t\t<AriaInput\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t{...inputProps}\n\t\t\t\t\t\tclassName={(values) =>\n\t\t\t\t\t\t\ttextField({\n\t\t\t\t\t\t\t\t...values,\n\t\t\t\t\t\t\t\tclassName: resolveClassName(inputProps?.className, values),\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</AriaTextField>\n\t);\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

package/dist/es/components/text-field.module.js

@@ -0,0 +1,7 @@
+import "./text-field_module.css";
+var text_field_default = { "textField": "textField_32558", "disabled": "disabled_32558", "focus": "focus_32558" };
+export {
+  text_field_default as default
+};
+
+//# sourceMappingURL=text-field.module.js.map

package/dist/es/components/text-field.module.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,OAAO;AAA0B,IAAO,qBAAQ,EAAC,aAAY,mBAAkB,YAAW,kBAAiB,SAAQ,cAAa","names":[],"ignoreList":[],"sources":["../../../src/components/text-field.module.css"],"sourcesContent":["import \"./text-field_module.css\";export default {\"textField\":\"textField_32558\",\"disabled\":\"disabled_32558\",\"focus\":\"focus_32558\"}//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

package/dist/es/components/text-field_module.css

@@ -0,0 +1,33 @@
+.textField_32558 {
+	background:
+		var(--lol-input-background-gradient) padding-box,
+		var(--lol-input-border-gradient) border-box;
+
+	--lol-input-border-gradient: var(--lol-gradient-gold);
+	--lol-input-background-gradient: var(--lol-gradient-hextech-black);
+
+	border: 1px solid transparent;
+	grid-area: input;
+	padding: 0.5rem 0.75rem;
+	margin: 0;
+	font-size: 0.75rem;
+	line-height: 1rem;
+	color: var(--field-text-color);
+	outline: none;
+	font-family: var(--lol-font-family-spiegel);
+	font-weight: 500;
+	letter-spacing: 0.025em;
+
+	color: var(--lol-color-gold-100);
+
+	display: flex;
+	width: 100%;
+}
+.textField_32558.disabled_32558 {
+		--lol-input-border-gradient: var(--lol-gradient-disabled);
+		color: var(--lol-color-grey-150);
+	}
+.textField_32558.focus_32558 {
+		--lol-input-border-gradient: var(--lol-gradient-gold-hover);
+		--lol-input-background-gradient: var(--lol-gradient-grey-focus);
+	}

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

@@ -1,12 +1,10 @@
-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";
+export type ToggleButtonPreset = "secondary" | "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 declare function ToggleButton({ children, className, preset, shape, thin, ...props }: ToggleButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};