@lolmath/ui 3.2.5 → 4.1.0

package/dist/es/components/radio-group/radio-group.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+import { cva, cx } from "cva";
+import {
+  Radio as AriaRadio,
+  RadioGroup as AriaRadioGroup
+} from "react-aria-components";
+import { resolveClassName } from "../../utilities/resolve-class-name.js";
+import classes from "./radio-group.module";
+function RadioGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    AriaRadioGroup,
+    {
+      ...props,
+      className: (values) => {
+        return cx(classes.radioGroup, resolveClassName(className, values));
+      }
+    }
+  );
+}
+const radio = cva({
+  base: classes.radio,
+  variants: {
+    isDisabled: { true: classes.disabled },
+    isHovered: { true: classes.hovered },
+    isSelected: { true: classes.selected },
+    isPressed: { true: classes.pressed }
+  }
+});
+function Radio({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    AriaRadio,
+    {
+      ...props,
+      className: (values) => radio({
+        ...values,
+        className: resolveClassName(className, values)
+      })
+    }
+  );
+}
+export {
+  Radio,
+  RadioGroup
+};
+
+//# sourceMappingURL=radio-group.js.map

package/dist/es/components/radio-group/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAYE;AAZF,SAAS,KAAK,UAAU;AACxB;AAAA,EACC,SAAS;AAAA,EACT,cAAc;AAAA,OAGR;AACP,SAAS,wBAAwB;AACjC,OAAO,aAAa;AAEb,SAAS,WAAW,EAAE,WAAW,GAAG,MAAM,GAAwB;AACxE,SACC;AAAA,IAAC;AAAA;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,CAAC,WAAW;AACtB,eAAO,GAAG,QAAQ,YAAY,iBAAiB,WAAW,MAAM,CAAC;AAAA,MAClE;AAAA;AAAA,EACD;AAEF;AAEA,MAAM,QAAQ,IAAI;AAAA,EACjB,MAAM,QAAQ;AAAA,EACd,UAAU;AAAA,IACT,YAAY,EAAE,MAAM,QAAQ,SAAS;AAAA,IACrC,WAAW,EAAE,MAAM,QAAQ,QAAQ;AAAA,IACnC,YAAY,EAAE,MAAM,QAAQ,SAAS;AAAA,IACrC,WAAW,EAAE,MAAM,QAAQ,QAAQ;AAAA,EACpC;AACD,CAAC;AACM,SAAS,MAAM,EAAE,WAAW,GAAG,MAAM,GAAmB;AAC9D,SACC;AAAA,IAAC;AAAA;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,CAAC,WACX,MAAM;AAAA,QACL,GAAG;AAAA,QACH,WAAW,iBAAiB,WAAW,MAAM;AAAA,MAC9C,CAAC;AAAA;AAAA,EAEH;AAEF","names":[],"ignoreList":[],"sources":["../../../../src/components/radio-group/radio-group.tsx"],"sourcesContent":["import { cva, cx } from \"cva\";\nimport {\n\tRadio as AriaRadio,\n\tRadioGroup as AriaRadioGroup,\n\ttype RadioProps as AriaRadioProps,\n\ttype RadioGroupProps as AriaRadiogroupProps,\n} from \"react-aria-components\";\nimport { resolveClassName } from \"../../utilities/resolve-class-name.js\";\nimport classes from \"./radio-group.module\";\n\nexport function RadioGroup({ className, ...props }: AriaRadiogroupProps) {\n\treturn (\n\t\t<AriaRadioGroup\n\t\t\t{...props}\n\t\t\tclassName={(values) => {\n\t\t\t\treturn cx(classes.radioGroup, resolveClassName(className, values));\n\t\t\t}}\n\t\t/>\n\t);\n}\n\nconst radio = cva({\n\tbase: classes.radio,\n\tvariants: {\n\t\tisDisabled: { true: classes.disabled },\n\t\tisHovered: { true: classes.hovered },\n\t\tisSelected: { true: classes.selected },\n\t\tisPressed: { true: classes.pressed },\n\t},\n});\nexport function Radio({ className, ...props }: AriaRadioProps) {\n\treturn (\n\t\t<AriaRadio\n\t\t\t{...props}\n\t\t\tclassName={(values) =>\n\t\t\t\tradio({\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);\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

package/dist/es/components/radio-group/radio-group.module.js

@@ -0,0 +1,7 @@
+import "./radio-group_module.css";
+var radio_group_default = { "radioGroup": "radioGroup_3c189", "radio": "radio_3c189", "selected": "selected_3c189", "disabled": "disabled_3c189", "hovered": "hovered_3c189", "pressed": "pressed_3c189" };
+export {
+  radio_group_default as default
+};
+
+//# sourceMappingURL=radio-group.module.js.map

package/dist/es/components/radio-group/radio-group.module.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,OAAO;AAA2B,IAAO,sBAAQ,EAAC,cAAa,oBAAmB,SAAQ,eAAc,YAAW,kBAAiB,YAAW,kBAAiB,WAAU,iBAAgB,WAAU,gBAAe","names":[],"ignoreList":[],"sources":["../../../../src/components/radio-group/radio-group.module.css"],"sourcesContent":["import \"./radio-group_module.css\";export default {\"radioGroup\":\"radioGroup_3c189\",\"radio\":\"radio_3c189\",\"selected\":\"selected_3c189\",\"disabled\":\"disabled_3c189\",\"hovered\":\"hovered_3c189\",\"pressed\":\"pressed_3c189\"}//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

package/dist/es/components/radio-group/radio-group_module.css

@@ -0,0 +1,53 @@
+.radioGroup_3c189 {
+	display: flex;
+	align-items: flex-start;
+	flex-direction: column;
+}
+
+.radio_3c189 {
+	font-family: var(--lol-font-family-spiegel);
+	background-size: 18px;
+	background-position: left;
+	background-repeat: no-repeat;
+	padding-top: 0.5rem;
+	padding-bottom: 0.5rem;
+	padding-left: 1.5rem;
+	padding-right: 1rem;
+	font-size: 0.75rem;
+	line-height: 1rem;
+	font-weight: 400;
+	background-image: url('../../assets/unchecked.ad8e0a95.png');
+	color: var(--lol-color-grey-100);
+}
+
+.radio_3c189.selected_3c189 {
+		color: var(--lol-color-gold-100);
+		background-image: url('../../assets/checked.b9e4b215.png');
+	}
+
+.radio_3c189.disabled_3c189 {
+		color: var(--lol-color-grey-150);
+		background-image: url('../../assets/unchecked-disabled.702505e2.png');
+	}
+
+.radio_3c189.disabled_3c189.selected_3c189 {
+			background-image: url('../../assets/checked-disabled.b5430cf5.png');
+		}
+
+.radio_3c189.hovered_3c189 {
+		color: var(--lol-color-gold-100);
+		background-image: url('../../assets/unchecked-hovered.e26c4420.png');
+	}
+
+.radio_3c189.hovered_3c189.selected_3c189 {
+			background-image: url('../../assets/checked-hovered.67390091.png');
+		}
+
+.radio_3c189.pressed_3c189 {
+		color: var(--lol-color-grey-150);
+		background-image: url('../../assets/unchecked-pressed.161ab6f8.png');
+	}
+
+.radio_3c189.pressed_3c189.selected_3c189 {
+			background-image: url('../../assets/checked-pressed.cffd963b.png');
+		}

package/dist/es/components/{search-field.d.ts → search-field/search-field.d.ts}

@@ -1,6 +1,6 @@
 import type { ComponentProps } from "react";
 import { Input as AriaInput, type SearchFieldProps as AriaSearchFieldProps } from "react-aria-components";
-export declare function SearchField({ inputProps, borderProps, children, ...props }: AriaSearchFieldProps & {
+export declare function SearchField({ inputProps, borderProps, children, className, ...props }: AriaSearchFieldProps & {
     inputProps?: ComponentProps<typeof AriaInput>;
     borderProps?: ComponentProps<"div">;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,67 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva, cx } from "cva";
+import {
+  Button as AriaButton,
+  Input as AriaInput,
+  SearchField as AriaSearchField
+} from "react-aria-components";
+import { resolveClassName } from "../../utilities/resolve-class-name.js";
+import classes from "./search-field.module";
+const searchFieldInput = cva({
+  base: classes.input,
+  variants: {
+    isDisabled: {
+      true: classes.disabled
+    },
+    isFocused: {
+      true: classes.focus
+    }
+  }
+});
+const searchFieldButton = cva({
+  base: classes.button,
+  variants: {
+    isHovered: { true: classes.hover },
+    isPressed: { true: classes.press },
+    isDisabled: { true: classes.disabled },
+    isEmpty: { true: classes.empty }
+  }
+});
+function SearchField({
+  inputProps = {},
+  borderProps = {},
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(AriaSearchField, { ...props, className: cx(classes.searchField, className), children: (values) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    typeof children === "function" ? children(values) : children,
+    /* @__PURE__ */ jsx(
+      AriaInput,
+      {
+        ...inputProps,
+        className: (values2) => searchFieldInput({
+          ...values2,
+          className: resolveClassName(inputProps.className, values2)
+        }),
+        type: "text"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AriaButton,
+      {
+        className: (buttonValues) => searchFieldButton({
+          ...buttonValues,
+          isDisabled: values.isDisabled,
+          isEmpty: values.isEmpty
+        }),
+        children: "✕"
+      }
+    )
+  ] }) });
+}
+export {
+  SearchField
+};
+
+//# sourceMappingURL=search-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":"AA8CI,mBAEC,KAFD;AA9CJ,SAAS,KAAK,UAAU;AAExB;AAAA,EACC,UAAU;AAAA,EACV,SAAS;AAAA,EACT,eAAe;AAAA,OAET;AACP,SAAS,wBAAwB;AACjC,OAAO,aAAa;AAEpB,MAAM,mBAAmB,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;AAED,MAAM,oBAAoB,IAAI;AAAA,EAC7B,MAAM,QAAQ;AAAA,EACd,UAAU;AAAA,IACT,WAAW,EAAE,MAAM,QAAQ,MAAM;AAAA,IACjC,WAAW,EAAE,MAAM,QAAQ,MAAM;AAAA,IACjC,YAAY,EAAE,MAAM,QAAQ,SAAS;AAAA,IACrC,SAAS,EAAE,MAAM,QAAQ,MAAM;AAAA,EAChC;AACD,CAAC;AAEM,SAAS,YAAY;AAAA,EAC3B,aAAa,CAAC;AAAA,EACd,cAAc,CAAC;AAAA,EACf;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAGG;AACF,SACC,oBAAC,mBAAiB,GAAG,OAAO,WAAW,GAAG,QAAQ,aAAa,SAAS,GACtE,WAAC,WACD,iCACE;AAAA,WAAO,aAAa,aAAa,SAAS,MAAM,IAAI;AAAA,IACrD;AAAA,MAAC;AAAA;AAAA,QACC,GAAG;AAAA,QACJ,WAAW,CAACA,YACX,iBAAiB;AAAA,UAChB,GAAGA;AAAA,UACH,WAAW,iBAAiB,WAAW,WAAWA,OAAM;AAAA,QACzD,CAAC;AAAA,QAEF,MAAK;AAAA;AAAA,IACN;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,WAAW,CAAC,iBACX,kBAAkB;AAAA,UACjB,GAAG;AAAA,UACH,YAAY,OAAO;AAAA,UACnB,SAAS,OAAO;AAAA,QACjB,CAAC;AAAA,QAEF;AAAA;AAAA,IAED;AAAA,KACD,GAEF;AAEF","names":["values"],"ignoreList":[],"sources":["../../../../src/components/search-field/search-field.tsx"],"sourcesContent":["import { cva, cx } from \"cva\";\nimport type { ComponentProps } from \"react\";\nimport {\n\tButton as AriaButton,\n\tInput as AriaInput,\n\tSearchField as AriaSearchField,\n\ttype SearchFieldProps as AriaSearchFieldProps,\n} from \"react-aria-components\";\nimport { resolveClassName } from \"../../utilities/resolve-class-name.js\";\nimport classes from \"./search-field.module\";\n\nconst searchFieldInput = cva({\n\tbase: classes.input,\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\nconst searchFieldButton = cva({\n\tbase: classes.button,\n\tvariants: {\n\t\tisHovered: { true: classes.hover },\n\t\tisPressed: { true: classes.press },\n\t\tisDisabled: { true: classes.disabled },\n\t\tisEmpty: { true: classes.empty },\n\t},\n});\n\nexport function SearchField({\n\tinputProps = {},\n\tborderProps = {},\n\tchildren,\n\tclassName,\n\t...props\n}: AriaSearchFieldProps & {\n\tinputProps?: ComponentProps<typeof AriaInput>;\n\tborderProps?: ComponentProps<\"div\">;\n}) {\n\treturn (\n\t\t<AriaSearchField {...props} className={cx(classes.searchField, className)}>\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<AriaInput\n\t\t\t\t\t\t{...inputProps}\n\t\t\t\t\t\tclassName={(values) =>\n\t\t\t\t\t\t\tsearchFieldInput({\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\ttype=\"text\"\n\t\t\t\t\t/>\n\t\t\t\t\t<AriaButton\n\t\t\t\t\t\tclassName={(buttonValues) =>\n\t\t\t\t\t\t\tsearchFieldButton({\n\t\t\t\t\t\t\t\t...buttonValues,\n\t\t\t\t\t\t\t\tisDisabled: values.isDisabled,\n\t\t\t\t\t\t\t\tisEmpty: values.isEmpty,\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\t\t✕\n\t\t\t\t\t</AriaButton>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</AriaSearchField>\n\t);\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

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

@@ -0,0 +1,7 @@
+import "./search-field_module.css";
+var search_field_default = { "searchField": "searchField_3cc82", "input": "input_3cc82", "disabled": "disabled_3cc82", "focus": "focus_3cc82", "button": "button_3cc82", "hover": "hover_3cc82", "press": "press_3cc82", "empty": "empty_3cc82" };
+export {
+  search_field_default as default
+};
+
+//# sourceMappingURL=search-field.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,OAAO;AAA4B,IAAO,uBAAQ,EAAC,eAAc,qBAAoB,SAAQ,eAAc,YAAW,kBAAiB,SAAQ,eAAc,UAAS,gBAAe,SAAQ,eAAc,SAAQ,eAAc,SAAQ,cAAa","names":[],"ignoreList":[],"sources":["../../../../src/components/search-field/search-field.module.css"],"sourcesContent":["import \"./search-field_module.css\";export default {\"searchField\":\"searchField_3cc82\",\"input\":\"input_3cc82\",\"disabled\":\"disabled_3cc82\",\"focus\":\"focus_3cc82\",\"button\":\"button_3cc82\",\"hover\":\"hover_3cc82\",\"press\":\"press_3cc82\",\"empty\":\"empty_3cc82\"}//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

package/dist/es/components/search-field/search-field_module.css

@@ -0,0 +1,76 @@
+.searchField_3cc82 {
+	display: grid;
+	grid-template-areas:
+		"label label"
+		"input button"
+		"help  help";
+	grid-template-columns: 1fr auto;
+	align-items: center;
+
+	color: var(--lol-color-gold-100);
+}
+
+.input_3cc82 {
+	background: url('../../assets/search.c15f1e1d.png') no-repeat 5px center,
+		var(--lol-search-field-background-gradient) padding-box,
+		var(--lol-search-field-border-gradient) border-box;
+
+	--lol-search-field-border-gradient: var(--lol-gradient-gold);
+	--lol-search-field-background-gradient: var(--lol-gradient-hextech-black);
+
+	background-size: 16px, auto, auto;
+	border: 1px solid transparent;
+	grid-area: input;
+	padding: 0.5rem 2.5rem 0.5rem 1.5rem;
+	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;
+}
+
+.input_3cc82::-webkit-search-cancel-button,
+	.input_3cc82::-webkit-search-decoration {
+		-webkit-appearance: none;
+	}
+
+.input_3cc82.disabled_3cc82 {
+		--lol-search-field-border-gradient: var(--lol-gradient-disabled);
+		color: var(--lol-color-grey-150);
+	}
+
+.input_3cc82.focus_3cc82 {
+		--lol-search-field-border-gradient: var(--lol-gradient-gold-hover);
+		--lol-search-field-background-gradient: var(--lol-gradient-grey-focus);
+	}
+
+.button_3cc82 {
+	grid-area: button;
+
+	font-size: 0.75rem;
+	line-height: 1rem;
+	font-weight: 900;
+
+	margin-left: -2.5rem;
+	width: 2.5rem;
+	align-self: stretch;
+	text-align: center;
+
+	color: var(--lol-color-gold-300);
+}
+
+.button_3cc82.hover_3cc82 {
+		color: var(--lol-color-gold-100);
+	}
+
+.button_3cc82.press_3cc82 {
+		color: var(--lol-color-gold-600);
+	}
+
+.button_3cc82.empty_3cc82,
+	.button_3cc82.disabled_3cc82 {
+		display: none;
+	}

package/dist/es/components/select/select.js

@@ -0,0 +1,77 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "cva";
+import {
+  Button as AriaButton,
+  ListBox as AriaListBox,
+  Popover as AriaPopover,
+  Select as AriaSelect,
+  SelectValue as AriaSelectValue,
+  Text as AriaText,
+  ListBoxItem
+} from "react-aria-components";
+import { resolveClassName } from "../../utilities/resolve-class-name.js";
+import classes from "./select.module";
+const selectButtonBorder = cva({
+  base: classes.button,
+  variants: {
+    isHovered: { true: classes.hover },
+    isPressed: { true: classes.press },
+    isOpen: { true: classes.open },
+    isDisabled: { true: classes.disabled }
+  }
+});
+function Select({
+  description,
+  errorMessage,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AriaSelect,
+    {
+      ...props,
+      className: (values) => resolveClassName(className, values),
+      children: (values) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          AriaButton,
+          {
+            className: (buttonValues) => selectButtonBorder({ ...buttonValues, isOpen: values.isOpen }),
+            children: /* @__PURE__ */ jsx(AriaSelectValue, {})
+          }
+        ),
+        description && /* @__PURE__ */ jsx(AriaText, { slot: "description", children: description }),
+        errorMessage && /* @__PURE__ */ jsx(AriaText, { slot: "errorMessage", children: errorMessage }),
+        /* @__PURE__ */ jsx(AriaPopover, { offset: 4, className: "w-[--trigger-width]", children: /* @__PURE__ */ jsx(AriaListBox, { className: classes.listBox, children }) })
+      ] })
+    }
+  );
+}
+const item = cva({
+  base: classes.item,
+  variants: {
+    isHovered: { true: classes.hover },
+    isPressed: { true: classes.press },
+    isSelected: { true: classes.selected }
+  }
+});
+function Item({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    ListBoxItem,
+    {
+      ...props,
+      className: (values) => {
+        return item({
+          ...values,
+          className: resolveClassName(className, values)
+        });
+      }
+    }
+  );
+}
+export {
+  Item,
+  Select
+};
+
+//# sourceMappingURL=select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAiDI,mBAME,KANF;AAjDJ,SAAS,WAAW;AAMpB;AAAA,EACC,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,EACX,UAAU;AAAA,EACV,eAAe;AAAA,EACf,QAAQ;AAAA,EACR;AAAA,OACM;AACP,SAAS,wBAAwB;AACjC,OAAO,aAAa;AAEpB,MAAM,qBAAqB,IAAI;AAAA,EAC9B,MAAM,QAAQ;AAAA,EACd,UAAU;AAAA,IACT,WAAW,EAAE,MAAM,QAAQ,MAAM;AAAA,IACjC,WAAW,EAAE,MAAM,QAAQ,MAAM;AAAA,IACjC,QAAQ,EAAE,MAAM,QAAQ,KAAK;AAAA,IAC7B,YAAY,EAAE,MAAM,QAAQ,SAAS;AAAA,EACtC;AACD,CAAC;AAUM,SAAS,OAAyB;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAmB;AAClB,SACC;AAAA,IAAC;AAAA;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,CAAC,WAAW,iBAAiB,WAAW,MAAM;AAAA,MAExD,WAAC,WACD,iCACC;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,WAAW,CAAC,iBACX,mBAAmB,EAAE,GAAG,cAAc,QAAQ,OAAO,OAAO,CAAC;AAAA,YAG9D,8BAAC,mBAAgB;AAAA;AAAA,QAClB;AAAA,QACC,eAAe,oBAAC,YAAS,MAAK,eAAe,uBAAY;AAAA,QACzD,gBACA,oBAAC,YAAS,MAAK,gBAAgB,wBAAa;AAAA,QAE7C,oBAAC,eAAY,QAAQ,GAAG,WAAU,uBACjC,8BAAC,eAAY,WAAW,QAAQ,SAAU,UAAS,GACpD;AAAA,SACD;AAAA;AAAA,EAEF;AAEF;AAEA,MAAM,OAAO,IAAI;AAAA,EAChB,MAAM,QAAQ;AAAA,EACd,UAAU;AAAA,IACT,WAAW,EAAE,MAAM,QAAQ,MAAM;AAAA,IACjC,WAAW,EAAE,MAAM,QAAQ,MAAM;AAAA,IACjC,YAAY,EAAE,MAAM,QAAQ,SAAS;AAAA,EACtC;AACD,CAAC;AAEM,SAAS,KAAK,EAAE,WAAW,GAAG,MAAM,GAAqB;AAC/D,SACC;AAAA,IAAC;AAAA;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,CAAC,WAAW;AACtB,eAAO,KAAK;AAAA,UACX,GAAG;AAAA,UACH,WAAW,iBAAiB,WAAW,MAAM;AAAA,QAC9C,CAAC;AAAA,MACF;AAAA;AAAA,EACD;AAEF","names":[],"ignoreList":[],"sources":["../../../../src/components/select/select.tsx"],"sourcesContent":["import { cva } from \"cva\";\nimport type { ReactNode } from \"react\";\nimport type {\n\tSelectProps as AriaSelectProps,\n\tListBoxItemProps,\n} from \"react-aria-components\";\nimport {\n\tButton as AriaButton,\n\tListBox as AriaListBox,\n\tPopover as AriaPopover,\n\tSelect as AriaSelect,\n\tSelectValue as AriaSelectValue,\n\tText as AriaText,\n\tListBoxItem,\n} from \"react-aria-components\";\nimport { resolveClassName } from \"../../utilities/resolve-class-name.js\";\nimport classes from \"./select.module\";\n\nconst selectButtonBorder = cva({\n\tbase: classes.button,\n\tvariants: {\n\t\tisHovered: { true: classes.hover },\n\t\tisPressed: { true: classes.press },\n\t\tisOpen: { true: classes.open },\n\t\tisDisabled: { true: classes.disabled },\n\t},\n});\n\ninterface SelectProps<T extends object>\n\textends Omit<AriaSelectProps<T>, \"children\"> {\n\tlabel?: string;\n\tdescription?: string;\n\terrorMessage?: string;\n\tchildren?: ReactNode | ((item: T) => ReactNode);\n}\n\nexport function Select<T extends object>({\n\tdescription,\n\terrorMessage,\n\tchildren,\n\tclassName,\n\t...props\n}: SelectProps<T>) {\n\treturn (\n\t\t<AriaSelect\n\t\t\t{...props}\n\t\t\tclassName={(values) => resolveClassName(className, values)}\n\t\t>\n\t\t\t{(values) => (\n\t\t\t\t<>\n\t\t\t\t\t<AriaButton\n\t\t\t\t\t\tclassName={(buttonValues) =>\n\t\t\t\t\t\t\tselectButtonBorder({ ...buttonValues, isOpen: values.isOpen })\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<AriaSelectValue />\n\t\t\t\t\t</AriaButton>\n\t\t\t\t\t{description && <AriaText slot=\"description\">{description}</AriaText>}\n\t\t\t\t\t{errorMessage && (\n\t\t\t\t\t\t<AriaText slot=\"errorMessage\">{errorMessage}</AriaText>\n\t\t\t\t\t)}\n\t\t\t\t\t<AriaPopover offset={4} className=\"w-[--trigger-width]\">\n\t\t\t\t\t\t<AriaListBox className={classes.listBox}>{children}</AriaListBox>\n\t\t\t\t\t</AriaPopover>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</AriaSelect>\n\t);\n}\n\nconst item = cva({\n\tbase: classes.item,\n\tvariants: {\n\t\tisHovered: { true: classes.hover },\n\t\tisPressed: { true: classes.press },\n\t\tisSelected: { true: classes.selected },\n\t},\n});\n\nexport function Item({ className, ...props }: ListBoxItemProps) {\n\treturn (\n\t\t<ListBoxItem\n\t\t\t{...props}\n\t\t\tclassName={(values) => {\n\t\t\t\treturn item({\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);\n}\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

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

@@ -0,0 +1,7 @@
+import "./select_module.css";
+var select_default = { "button": "button_560be", "open": "open_560be", "press": "press_560be", "hover": "hover_560be", "disabled": "disabled_560be", "listBox": "listBox_560be", "item": "item_560be", "selected": "selected_560be" };
+export {
+  select_default as default
+};
+
+//# sourceMappingURL=select.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"mappings":"AAAA,OAAO;AAAsB,IAAO,iBAAQ,EAAC,UAAS,gBAAe,QAAO,cAAa,SAAQ,eAAc,SAAQ,eAAc,YAAW,kBAAiB,WAAU,iBAAgB,QAAO,cAAa,YAAW,iBAAgB","names":[],"ignoreList":[],"sources":["../../../../src/components/select/select.module.css"],"sourcesContent":["import \"./select_module.css\";export default {\"button\":\"button_560be\",\"open\":\"open_560be\",\"press\":\"press_560be\",\"hover\":\"hover_560be\",\"disabled\":\"disabled_560be\",\"listBox\":\"listBox_560be\",\"item\":\"item_560be\",\"selected\":\"selected_560be\"}//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

package/dist/es/components/select/select_module.css

@@ -0,0 +1,83 @@
+.button_560be {
+	font-family: var(--lol-font-family-spiegel);
+	display: inline-block;
+	width: 200px;
+	outline: none;
+
+	border: 1px solid transparent;
+
+	color: var(--lol-color-grey-100);
+	padding: 0.375rem 1.5rem 0.375rem 0.5rem;
+
+	font-size: 0.75rem;
+	font-weight: 500;
+	line-height: 1rem;
+	letter-spacing: 0.025em;
+	text-align: left;
+
+	background: var(--lol-select-image) no-repeat right 0.5rem center,
+		var(--lol-select-background-gradient) padding-box,
+		var(--lol-select-border-gradient) border-box;
+
+	--lol-select-border-gradient: var(--lol-gradient-gold);
+	--lol-select-background-gradient: var(--lol-gradient-hextech-black);
+
+	--lol-select-image: url('../../assets/closed.484c8084.png');
+}
+
+.button_560be.open_560be {
+		--lol-select-image: url('../../assets/open.a8643ee6.png');
+		color: var(--lol-color-gold-600);
+		--lol-select-background-gradient: var(--lol-gradient-grey-300);
+		--lol-select-border-gradient: var(--lol-gradient-gold-press);
+	}
+
+.button_560be.press_560be {
+		--lol-select-border-gradient: var(--lol-gradient-gold-press);
+	}
+
+.button_560be.hover_560be {
+		--lol-select-border-gradient: var(--lol-gradient-gold-hover);
+	}
+
+.button_560be.disabled_560be {
+		--lol-select-border-gradient: var(--lol-gradient-disabled);
+	}
+
+.listBox_560be {
+	background-color: var(--lol-color-hextech-black);
+	border: 1px solid var(--lol-color-gold-600);
+	outline: none;
+}
+
+
+.item_560be {
+	border-bottom: 1px solid var(--lol-color-grey-300);
+	color: var(--lol-color-gold-300);
+	font-size: var(--lol-font-size-sm);
+	font-weight: var(--lol-font-weight-sm);
+	line-height: var(--lol-line-height-sm);
+	letter-spacing: var(--lol-letter-spacing-sm);
+	padding: 0.375rem 0.5rem;
+	outline: none;
+	cursor: pointer;
+}
+
+
+.item_560be.hover_560be {
+		background-color: var(--lol-color-grey-300);
+		color: var(--lol-color-gold-100);
+	}
+
+
+.item_560be.press_560be {
+		background-color: color-mix(in srgb, var(--lol-color-grey-300), transparent 50%);
+		color: var(--lol-color-gold-600);
+	}
+
+
+.item_560be.selected_560be {
+		background-image: url(../../assets/dropdown-check.bed4dc45.png);
+		background-position: right 0.5rem center;
+		background-repeat: no-repeat;
+	}

package/dist/es/components/slider/slider.js

@@ -1,4 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva, cx } from "cva";
 import {
   Slider as AriaSlider,
   SliderOutput as AriaSliderOutput,
@@ -6,51 +7,32 @@ import {
   SliderTrack as AriaSliderTrack
 } from "react-aria-components";
 import { resolveClassName } from "../../utilities/resolve-class-name.js";
-import { tv } from "../../utilities/tv.js";
-import {
-  sliderActive,
-  sliderDisabled,
-  sliderHover,
-  sliderNormal
-} from "./images.js";
-const sliderTrack = tv({
-  base: "group relative h-7 w-full"
-});
-const sliderTrackBackground = tv({
-  base: "bg-lol-grey-300 absolute top-[50%] h-0.5 w-full translate-y-[-50%] transform rounded-full"
-});
-const sliderTrackForeground = tv({
-  base: "from-lol-gold-600 to-lol-gold-500 absolute top-[50%] h-0.5 translate-y-[-50%] transform bg-gradient-to-r",
+import textClasses from "../typography/text.module";
+import classes from "./slider.module";
+const sliderTrackForeground = cva({
+  base: classes.foreground,
   variants: {
     isDisabled: {
-      true: "bg-[#5C5B57] from-transparent via-transparent to-transparent",
-      false: [
-        "group-hover:from-lol-gold-500 group-hover:via-lol-gold-400 group-hover:to-lol-gold-200",
-        "group-active:from-lol-gold-500 group-active:via-lol-gold-600 group-active:to-lol-gold-600"
-      ]
+      true: classes.disabled
     }
   }
 });
-const sliderThumb = tv({
-  base: "top-[50%] h-7 w-7 bg-contain outline-none [background-image:var(--normal)]",
+const sliderThumb = cva({
+  base: classes.thumb,
   variants: {
-    isDisabled: {
-      true: "[background-image:var(--disabled)]"
-    },
     isThumbDragging: {
-      true: "[background-image:var(--active)]"
+      true: classes.thumbDragging
     },
     isOtherThumbDragging: {
-      true: ""
-    }
-  },
-  compoundVariants: [
-    {
-      isThumbDragging: false,
-      isOtherThumbDragging: false,
-      className: "group-hover:[background-image:var(--hover)]"
+      true: classes.otherThumbDragging
+    },
+    isDisabled: {
+      true: classes.disabled
+    },
+    isHovered: {
+      true: classes.hovered
     }
-  ]
+  }
 });
 function Slider({
   children,
@@ -72,13 +54,13 @@ function Slider({
           AriaSliderTrack,
           {
             ...sliderTrackProps,
-            className: (sliderTrackRenderProps) => sliderTrack({
-              ...sliderTrackRenderProps,
-              className: resolveClassName(
+            className: (sliderTrackRenderProps) => cx(
+              classes.track,
+              resolveClassName(
                 sliderTrackProps.className,
                 sliderTrackRenderProps
               )
-            }),
+            ),
             children: (values2) => {
               const left = values2.state.values.length === 1 ? 0 : values2.state.getThumbPercent(0) * 100;
               const width = values2.state.values.length === 1 ? values2.state.getThumbPercent(0) * 100 : (values2.state.getThumbPercent(1) - values2.state.getThumbPercent(0)) * 100;
@@ -86,12 +68,10 @@ function Slider({
                 /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: sliderTrackBackground({
-                      className: resolveClassName(
-                        sliderTrackBackgroundClassName,
-                        values2
-                      )
-                    })
+                    className: cx(
+                      classes.background,
+                      resolveClassName(sliderTrackBackgroundClassName, values2)
+                    )
                   }
                 ),
                 /* @__PURE__ */ jsx(
@@ -115,6 +95,7 @@ function Slider({
                       index: i,
                       ...sliderThumbProps,
                       className: (sliderThumbRenderProps) => {
+                        sliderThumbRenderProps.isDragging;
                         return sliderThumb({
                           isDisabled: sliderThumbRenderProps.isDisabled,
                           isThumbDragging: sliderThumbRenderProps.state.isThumbDragging(i),
@@ -128,10 +109,6 @@ function Slider({
                         });
                       },
                       style: {
-                        "--normal": sliderNormal,
-                        "--hover": sliderHover,
-                        "--active": sliderActive,
-                        "--disabled": sliderDisabled,
                         zIndex
                       }
                     },
@@ -146,16 +123,16 @@ function Slider({
     }
   );
 }
-const sliderOutput = tv({
-  base: "font-spiegel text-lol-grey-100 text-lol-sm"
-});
 function SliderOutput(props) {
   return /* @__PURE__ */ jsx(
     AriaSliderOutput,
     {
-      className: (values) => sliderOutput({
-        className: resolveClassName(props.className, values)
-      }),
+      className: (values) => cx(
+        textClasses.text,
+        textClasses.sm,
+        textClasses.grey100,
+        resolveClassName(props.className, values)
+      ),
       children: (sliderRenderProps) => sliderRenderProps.state.values.map((_, i) => sliderRenderProps.state.getThumbValueLabel(i)).join(" – "),
       ...props
     }