@mbpockets/shared-ui 0.1.18

package/dist/ProfilePage/index.mjs

@@ -0,0 +1,124 @@
+"use client";
+import { useState, useMemo } from 'react';
+import Autocomplete from '@mui/material/Autocomplete';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardHeader from '@mui/material/CardHeader';
+import Grid from '@mui/material/Grid';
+import Popper from '@mui/material/Popper';
+import TextField from '@mui/material/TextField';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/shared/TagEditor.tsx
+function TagEditor({
+  title = "Tags",
+  selectedTags,
+  possibleTags,
+  onToggleTag
+}) {
+  const [inputValue, setInputValue] = useState("");
+  const selectedIds = useMemo(() => selectedTags.map((tag) => tag.id), [selectedTags]);
+  const options = useMemo(
+    () => possibleTags.map((tag) => ({ value: tag.id, label: tag.label })),
+    [possibleTags]
+  );
+  return /* @__PURE__ */ jsx(Grid, { container: true, children: /* @__PURE__ */ jsx(Grid, { size: { xs: 12 }, children: /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsx(
+      CardHeader,
+      {
+        title,
+        style: {
+          background: "linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))",
+          color: "#FFFFFF",
+          fontSize: "1.5rem",
+          textShadow: "0px 3px 6px rgba(0, 0, 0, 0.5)"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(CardContent, { children: [
+      /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: selectedTags.map((tag) => /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
+          style: {
+            background: tag.color || "#bfbcbb",
+            color: "white",
+            textShadow: "black 0.2em 0.2em 0.4em"
+          },
+          children: [
+            tag.label,
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => onToggleTag(tag.id),
+                className: "ml-2 text-red-500 bg-white bg-opacity-50 rounded-full outline-black outline-2 font-outlined",
+                children: "\xD7"
+              }
+            )
+          ]
+        },
+        tag.id
+      )) }),
+      /* @__PURE__ */ jsx(Grid, { container: true, spacing: 3, children: /* @__PURE__ */ jsx(Grid, { sx: { marginTop: 3, width: "100%" }, children: /* @__PURE__ */ jsx(
+        Autocomplete,
+        {
+          options,
+          filterOptions: (availableOptions, state) => availableOptions.filter(
+            (option) => !selectedIds.includes(option.value) && option.label.toLowerCase().includes(state.inputValue.toLowerCase())
+          ).slice(0, 3),
+          value: null,
+          inputValue,
+          onInputChange: (event, newInputValue) => {
+            if (event && event.type === "change") {
+              setInputValue(newInputValue);
+            }
+          },
+          onChange: (event, newValue) => {
+            if (newValue) {
+              onToggleTag(newValue.value);
+            }
+            setInputValue("");
+          },
+          slots: { popper: CustomPopper },
+          renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, label: "Select Tags" })
+        },
+        selectedIds.join("-")
+      ) }) })
+    ] })
+  ] }) }) });
+}
+var CustomPopper = (props) => {
+  return /* @__PURE__ */ jsx(
+    Popper,
+    {
+      ...props,
+      modifiers: [
+        {
+          name: "preventOverflow",
+          options: { boundary: "viewport" }
+        },
+        {
+          name: "offset",
+          options: { offset: [0, -10] }
+        }
+      ],
+      placement: "top-start"
+    }
+  );
+};
+function PlayerTagsEdit(props) {
+  return /* @__PURE__ */ jsx(
+    TagEditor,
+    {
+      title: "Player Tags",
+      selectedTags: props.PlayerTags,
+      possibleTags: props.possibleTags,
+      onToggleTag: props.updatePlayerTags
+    }
+  );
+}
+
+export { PlayerTagsEdit };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/ProfilePage/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/shared/TagEditor.tsx","../../src/components/ProfilePage/PlayerTagsEdit.tsx"],"names":["jsx"],"mappings":";;;;;;;;;;;AAmBO,SAAS,SAAA,CAAU;AAAA,EACxB,KAAA,GAAQ,MAAA;AAAA,EACR,YAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,EAAmB;AACjB,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,EAAE,CAAA;AAC/C,EAAA,MAAM,WAAA,GAAc,OAAA,CAAQ,MAAM,YAAA,CAAa,GAAA,CAAI,CAAC,GAAA,KAAQ,GAAA,CAAI,EAAE,CAAA,EAAG,CAAC,YAAY,CAAC,CAAA;AAEnF,EAAA,MAAM,OAAA,GAAU,OAAA;AAAA,IACd,MAAM,YAAA,CAAa,GAAA,CAAI,CAAC,GAAA,MAAS,EAAE,KAAA,EAAO,GAAA,CAAI,EAAA,EAAI,KAAA,EAAO,GAAA,CAAI,KAAA,EAAM,CAAE,CAAA;AAAA,IACrE,CAAC,YAAY;AAAA,GACf;AAEA,EAAA,uBACE,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAS,IAAA,EACb,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAM,EAAE,EAAA,EAAI,EAAA,EAAG,EACnB,QAAA,kBAAA,IAAA,CAAC,IAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,KAAA;AAAA,QACA,KAAA,EAAO;AAAA,UACL,UAAA,EAAY,yEAAA;AAAA,UACZ,KAAA,EAAO,SAAA;AAAA,UACP,QAAA,EAAU,QAAA;AAAA,UACV,UAAA,EAAY;AAAA;AACd;AAAA,KACF;AAAA,yBACC,WAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,SAAI,SAAA,EAAU,2BAAA,EACZ,QAAA,EAAA,YAAA,CAAa,GAAA,CAAI,CAAC,GAAA,qBACjB,IAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UAEC,SAAA,EAAU,mFAAA;AAAA,UACV,KAAA,EAAO;AAAA,YACL,UAAA,EAAY,IAAI,KAAA,IAAS,SAAA;AAAA,YACzB,KAAA,EAAO,OAAA;AAAA,YACP,UAAA,EAAY;AAAA,WACd;AAAA,UAEC,QAAA,EAAA;AAAA,YAAA,GAAA,CAAI,KAAA;AAAA,4BACL,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,OAAA,EAAS,MAAM,WAAA,CAAY,GAAA,CAAI,EAAE,CAAA;AAAA,gBACjC,SAAA,EAAU,6FAAA;AAAA,gBACX,QAAA,EAAA;AAAA;AAAA;AAED;AAAA,SAAA;AAAA,QAfK,GAAA,CAAI;AAAA,OAiBZ,CAAA,EACH,CAAA;AAAA,sBACA,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAS,IAAA,EAAC,SAAS,CAAA,EACvB,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAI,EAAE,SAAA,EAAW,CAAA,EAAG,KAAA,EAAO,QAAO,EACtC,QAAA,kBAAA,GAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UAEC,OAAA;AAAA,UACA,aAAA,EAAe,CAAC,gBAAA,EAAkB,KAAA,KAChC,gBAAA,CACG,MAAA;AAAA,YACC,CAAC,MAAA,KACC,CAAC,WAAA,CAAY,QAAA,CAAS,OAAO,KAAK,CAAA,IAClC,MAAA,CAAO,KAAA,CAAM,aAAY,CAAE,QAAA,CAAS,KAAA,CAAM,UAAA,CAAW,aAAa;AAAA,WACtE,CACC,KAAA,CAAM,CAAA,EAAG,CAAC,CAAA;AAAA,UAEf,KAAA,EAAO,IAAA;AAAA,UACP,UAAA;AAAA,UACA,aAAA,EAAe,CAAC,KAAA,EAAO,aAAA,KAAkB;AACvC,YAAA,IAAI,KAAA,IAAS,KAAA,CAAM,IAAA,KAAS,QAAA,EAAU;AACpC,cAAA,aAAA,CAAc,aAAa,CAAA;AAAA,YAC7B;AAAA,UACF,CAAA;AAAA,UACA,QAAA,EAAU,CAAC,KAAA,EAAO,QAAA,KAAa;AAC7B,YAAA,IAAI,QAAA,EAAU;AACZ,cAAA,WAAA,CAAY,SAAS,KAAK,CAAA;AAAA,YAC5B;AACA,YAAA,aAAA,CAAc,EAAE,CAAA;AAAA,UAClB,CAAA;AAAA,UACA,KAAA,EAAO,EAAE,MAAA,EAAQ,YAAA,EAAa;AAAA,UAC9B,WAAA,EAAa,CAAC,MAAA,qBAAW,GAAA,CAAC,aAAW,GAAG,MAAA,EAAQ,OAAM,aAAA,EAAc;AAAA,SAAA;AAAA,QAzB/D,WAAA,CAAY,KAAK,GAAG;AAAA,SA2B7B,CAAA,EACF;AAAA,KAAA,EACF;AAAA,GAAA,EACF,GACF,CAAA,EACF,CAAA;AAEJ;AAEA,IAAM,YAAA,GAAe,CAAC,KAAA,KAAuB;AAC3C,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW;AAAA,QACT;AAAA,UACE,IAAA,EAAM,iBAAA;AAAA,UACN,OAAA,EAAS,EAAE,QAAA,EAAU,UAAA;AAAW,SAClC;AAAA,QACA;AAAA,UACE,IAAA,EAAM,QAAA;AAAA,UACN,SAAS,EAAE,MAAA,EAAQ,CAAC,CAAA,EAAG,GAAG,CAAA;AAAE;AAC9B,OACF;AAAA,MACA,SAAA,EAAU;AAAA;AAAA,GACZ;AAEJ,CAAA;ACvHe,SAAR,eAAgC,KAAA,EAIpC;AACD,EAAA,uBACEA,GAAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,aAAA;AAAA,MACN,cAAc,KAAA,CAAM,UAAA;AAAA,MACpB,cAAc,KAAA,CAAM,YAAA;AAAA,MACpB,aAAa,KAAA,CAAM;AAAA;AAAA,GACrB;AAEJ","file":"index.mjs","sourcesContent":["\"use client\";\n\nimport React, { useMemo, useState } from \"react\";\nimport Autocomplete from \"@mui/material/Autocomplete\";\nimport Card from \"@mui/material/Card\";\nimport CardContent from \"@mui/material/CardContent\";\nimport CardHeader from \"@mui/material/CardHeader\";\nimport Grid from \"@mui/material/Grid\";\nimport Popper, { PopperProps } from \"@mui/material/Popper\";\nimport TextField from \"@mui/material/TextField\";\nimport type { Tag } from \"@/types/tag\";\n\nexport interface TagEditorProps {\n  title?: string;\n  selectedTags: Tag[];\n  possibleTags: Tag[];\n  onToggleTag: (id: number) => void;\n}\n\nexport function TagEditor({\n  title = \"Tags\",\n  selectedTags,\n  possibleTags,\n  onToggleTag,\n}: TagEditorProps) {\n  const [inputValue, setInputValue] = useState(\"\");\n  const selectedIds = useMemo(() => selectedTags.map((tag) => tag.id), [selectedTags]);\n\n  const options = useMemo(\n    () => possibleTags.map((tag) => ({ value: tag.id, label: tag.label })),\n    [possibleTags]\n  );\n\n  return (\n    <Grid container>\n      <Grid size={{ xs: 12 }}>\n        <Card>\n          <CardHeader\n            title={title}\n            style={{\n              background: \"linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))\",\n              color: \"#FFFFFF\",\n              fontSize: \"1.5rem\",\n              textShadow: \"0px 3px 6px rgba(0, 0, 0, 0.5)\",\n            }}\n          />\n          <CardContent>\n            <div className=\"mt-2 flex flex-wrap gap-2\">\n              {selectedTags.map((tag) => (\n                <span\n                  key={tag.id}\n                  className=\"inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined\"\n                  style={{\n                    background: tag.color || \"#bfbcbb\",\n                    color: \"white\",\n                    textShadow: \"black 0.2em 0.2em 0.4em\",\n                  }}\n                >\n                  {tag.label}\n                  <button\n                    type=\"button\"\n                    onClick={() => onToggleTag(tag.id)}\n                    className=\"ml-2 text-red-500 bg-white bg-opacity-50 rounded-full outline-black outline-2 font-outlined\"\n                  >\n                    &times;\n                  </button>\n                </span>\n              ))}\n            </div>\n            <Grid container spacing={3}>\n              <Grid sx={{ marginTop: 3, width: \"100%\" }}>\n                <Autocomplete\n                  key={selectedIds.join(\"-\")}\n                  options={options}\n                  filterOptions={(availableOptions, state) =>\n                    availableOptions\n                      .filter(\n                        (option) =>\n                          !selectedIds.includes(option.value) &&\n                          option.label.toLowerCase().includes(state.inputValue.toLowerCase())\n                      )\n                      .slice(0, 3)\n                  }\n                  value={null}\n                  inputValue={inputValue}\n                  onInputChange={(event, newInputValue) => {\n                    if (event && event.type === \"change\") {\n                      setInputValue(newInputValue);\n                    }\n                  }}\n                  onChange={(event, newValue) => {\n                    if (newValue) {\n                      onToggleTag(newValue.value);\n                    }\n                    setInputValue(\"\");\n                  }}\n                  slots={{ popper: CustomPopper }}\n                  renderInput={(params) => <TextField {...params} label=\"Select Tags\" />}\n                />\n              </Grid>\n            </Grid>\n          </CardContent>\n        </Card>\n      </Grid>\n    </Grid>\n  );\n}\n\nconst CustomPopper = (props: PopperProps) => {\n  return (\n    <Popper\n      {...props}\n      modifiers={[\n        {\n          name: \"preventOverflow\",\n          options: { boundary: \"viewport\" },\n        },\n        {\n          name: \"offset\",\n          options: { offset: [0, -10] },\n        },\n      ]}\n      placement=\"top-start\"\n    />\n  );\n};\n","\"use client\";\n\nimport React from \"react\";\nimport type { Tag } from \"@/types/tag\";\nimport { TagEditor } from \"@/components/shared/TagEditor\";\n\nexport default function PlayerTagsEdit(props: {\n  PlayerTags: Tag[];\n  possibleTags: Tag[];\n  updatePlayerTags: (id:number) => void;\n}) {\n  return (\n    <TagEditor\n      title=\"Player Tags\"\n      selectedTags={props.PlayerTags}\n      possibleTags={props.possibleTags}\n      onToggleTag={props.updatePlayerTags}\n    />\n  );\n}\n"]}

package/dist/ProfilePage.cjs

@@ -0,0 +1,136 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var Autocomplete = require('@mui/material/Autocomplete');
+var Card = require('@mui/material/Card');
+var CardContent = require('@mui/material/CardContent');
+var CardHeader = require('@mui/material/CardHeader');
+var Grid = require('@mui/material/Grid');
+var Popper = require('@mui/material/Popper');
+var TextField = require('@mui/material/TextField');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Autocomplete__default = /*#__PURE__*/_interopDefault(Autocomplete);
+var Card__default = /*#__PURE__*/_interopDefault(Card);
+var CardContent__default = /*#__PURE__*/_interopDefault(CardContent);
+var CardHeader__default = /*#__PURE__*/_interopDefault(CardHeader);
+var Grid__default = /*#__PURE__*/_interopDefault(Grid);
+var Popper__default = /*#__PURE__*/_interopDefault(Popper);
+var TextField__default = /*#__PURE__*/_interopDefault(TextField);
+
+// src/components/shared/TagEditor.tsx
+function TagEditor({
+  title = "Tags",
+  selectedTags,
+  possibleTags,
+  onToggleTag
+}) {
+  const [inputValue, setInputValue] = react.useState("");
+  const selectedIds = react.useMemo(() => selectedTags.map((tag) => tag.id), [selectedTags]);
+  const options = react.useMemo(
+    () => possibleTags.map((tag) => ({ value: tag.id, label: tag.label })),
+    [possibleTags]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(Grid__default.default, { container: true, children: /* @__PURE__ */ jsxRuntime.jsx(Grid__default.default, { size: { xs: 12 }, children: /* @__PURE__ */ jsxRuntime.jsxs(Card__default.default, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CardHeader__default.default,
+      {
+        title,
+        style: {
+          background: "linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))",
+          color: "#FFFFFF",
+          fontSize: "1.5rem",
+          textShadow: "0px 3px 6px rgba(0, 0, 0, 0.5)"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(CardContent__default.default, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: selectedTags.map((tag) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "span",
+        {
+          className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
+          style: {
+            background: tag.color || "#bfbcbb",
+            color: "white",
+            textShadow: "black 0.2em 0.2em 0.4em"
+          },
+          children: [
+            tag.label,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => onToggleTag(tag.id),
+                className: "ml-2 text-red-500 bg-white bg-opacity-50 rounded-full outline-black outline-2 font-outlined",
+                children: "\xD7"
+              }
+            )
+          ]
+        },
+        tag.id
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Grid__default.default, { container: true, spacing: 3, children: /* @__PURE__ */ jsxRuntime.jsx(Grid__default.default, { sx: { marginTop: 3, width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        Autocomplete__default.default,
+        {
+          options,
+          filterOptions: (availableOptions, state) => availableOptions.filter(
+            (option) => !selectedIds.includes(option.value) && option.label.toLowerCase().includes(state.inputValue.toLowerCase())
+          ).slice(0, 3),
+          value: null,
+          inputValue,
+          onInputChange: (event, newInputValue) => {
+            if (event && event.type === "change") {
+              setInputValue(newInputValue);
+            }
+          },
+          onChange: (event, newValue) => {
+            if (newValue) {
+              onToggleTag(newValue.value);
+            }
+            setInputValue("");
+          },
+          slots: { popper: CustomPopper },
+          renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(TextField__default.default, { ...params, label: "Select Tags" })
+        },
+        selectedIds.join("-")
+      ) }) })
+    ] })
+  ] }) }) });
+}
+var CustomPopper = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Popper__default.default,
+    {
+      ...props,
+      modifiers: [
+        {
+          name: "preventOverflow",
+          options: { boundary: "viewport" }
+        },
+        {
+          name: "offset",
+          options: { offset: [0, -10] }
+        }
+      ],
+      placement: "top-start"
+    }
+  );
+};
+function PlayerTagsEdit(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TagEditor,
+    {
+      title: "Player Tags",
+      selectedTags: props.PlayerTags,
+      possibleTags: props.possibleTags,
+      onToggleTag: props.updatePlayerTags
+    }
+  );
+}
+
+exports.PlayerTagsEdit = PlayerTagsEdit;
+//# sourceMappingURL=ProfilePage.cjs.map
+//# sourceMappingURL=ProfilePage.cjs.map

package/dist/ProfilePage.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/shared/TagEditor.tsx","../src/components/ProfilePage/PlayerTagsEdit.tsx"],"names":["useState","useMemo","jsx","Grid","jsxs","Card","CardHeader","CardContent","Autocomplete","TextField","Popper"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAmBO,SAAS,SAAA,CAAU;AAAA,EACxB,KAAA,GAAQ,MAAA;AAAA,EACR,YAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,EAAmB;AACjB,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIA,eAAS,EAAE,CAAA;AAC/C,EAAA,MAAM,WAAA,GAAcC,aAAA,CAAQ,MAAM,YAAA,CAAa,GAAA,CAAI,CAAC,GAAA,KAAQ,GAAA,CAAI,EAAE,CAAA,EAAG,CAAC,YAAY,CAAC,CAAA;AAEnF,EAAA,MAAM,OAAA,GAAUA,aAAA;AAAA,IACd,MAAM,YAAA,CAAa,GAAA,CAAI,CAAC,GAAA,MAAS,EAAE,KAAA,EAAO,GAAA,CAAI,EAAA,EAAI,KAAA,EAAO,GAAA,CAAI,KAAA,EAAM,CAAE,CAAA;AAAA,IACrE,CAAC,YAAY;AAAA,GACf;AAEA,EAAA,uBACEC,cAAA,CAACC,qBAAA,EAAA,EAAK,SAAA,EAAS,IAAA,EACb,QAAA,kBAAAD,cAAA,CAACC,qBAAA,EAAA,EAAK,IAAA,EAAM,EAAE,EAAA,EAAI,EAAA,EAAG,EACnB,QAAA,kBAAAC,eAAA,CAACC,qBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAH,cAAA;AAAA,MAACI,2BAAA;AAAA,MAAA;AAAA,QACC,KAAA;AAAA,QACA,KAAA,EAAO;AAAA,UACL,UAAA,EAAY,yEAAA;AAAA,UACZ,KAAA,EAAO,SAAA;AAAA,UACP,QAAA,EAAU,QAAA;AAAA,UACV,UAAA,EAAY;AAAA;AACd;AAAA,KACF;AAAA,oCACCC,4BAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAAL,cAAA,CAAC,SAAI,SAAA,EAAU,2BAAA,EACZ,QAAA,EAAA,YAAA,CAAa,GAAA,CAAI,CAAC,GAAA,qBACjBE,eAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UAEC,SAAA,EAAU,mFAAA;AAAA,UACV,KAAA,EAAO;AAAA,YACL,UAAA,EAAY,IAAI,KAAA,IAAS,SAAA;AAAA,YACzB,KAAA,EAAO,OAAA;AAAA,YACP,UAAA,EAAY;AAAA,WACd;AAAA,UAEC,QAAA,EAAA;AAAA,YAAA,GAAA,CAAI,KAAA;AAAA,4BACLF,cAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,QAAA;AAAA,gBACL,OAAA,EAAS,MAAM,WAAA,CAAY,GAAA,CAAI,EAAE,CAAA;AAAA,gBACjC,SAAA,EAAU,6FAAA;AAAA,gBACX,QAAA,EAAA;AAAA;AAAA;AAED;AAAA,SAAA;AAAA,QAfK,GAAA,CAAI;AAAA,OAiBZ,CAAA,EACH,CAAA;AAAA,sBACAA,cAAA,CAACC,qBAAA,EAAA,EAAK,SAAA,EAAS,IAAA,EAAC,SAAS,CAAA,EACvB,QAAA,kBAAAD,cAAA,CAACC,qBAAA,EAAA,EAAK,EAAA,EAAI,EAAE,SAAA,EAAW,CAAA,EAAG,KAAA,EAAO,QAAO,EACtC,QAAA,kBAAAD,cAAA;AAAA,QAACM,6BAAA;AAAA,QAAA;AAAA,UAEC,OAAA;AAAA,UACA,aAAA,EAAe,CAAC,gBAAA,EAAkB,KAAA,KAChC,gBAAA,CACG,MAAA;AAAA,YACC,CAAC,MAAA,KACC,CAAC,WAAA,CAAY,QAAA,CAAS,OAAO,KAAK,CAAA,IAClC,MAAA,CAAO,KAAA,CAAM,aAAY,CAAE,QAAA,CAAS,KAAA,CAAM,UAAA,CAAW,aAAa;AAAA,WACtE,CACC,KAAA,CAAM,CAAA,EAAG,CAAC,CAAA;AAAA,UAEf,KAAA,EAAO,IAAA;AAAA,UACP,UAAA;AAAA,UACA,aAAA,EAAe,CAAC,KAAA,EAAO,aAAA,KAAkB;AACvC,YAAA,IAAI,KAAA,IAAS,KAAA,CAAM,IAAA,KAAS,QAAA,EAAU;AACpC,cAAA,aAAA,CAAc,aAAa,CAAA;AAAA,YAC7B;AAAA,UACF,CAAA;AAAA,UACA,QAAA,EAAU,CAAC,KAAA,EAAO,QAAA,KAAa;AAC7B,YAAA,IAAI,QAAA,EAAU;AACZ,cAAA,WAAA,CAAY,SAAS,KAAK,CAAA;AAAA,YAC5B;AACA,YAAA,aAAA,CAAc,EAAE,CAAA;AAAA,UAClB,CAAA;AAAA,UACA,KAAA,EAAO,EAAE,MAAA,EAAQ,YAAA,EAAa;AAAA,UAC9B,WAAA,EAAa,CAAC,MAAA,qBAAWN,cAAA,CAACO,8BAAW,GAAG,MAAA,EAAQ,OAAM,aAAA,EAAc;AAAA,SAAA;AAAA,QAzB/D,WAAA,CAAY,KAAK,GAAG;AAAA,SA2B7B,CAAA,EACF;AAAA,KAAA,EACF;AAAA,GAAA,EACF,GACF,CAAA,EACF,CAAA;AAEJ;AAEA,IAAM,YAAA,GAAe,CAAC,KAAA,KAAuB;AAC3C,EAAA,uBACEP,cAAA;AAAA,IAACQ,uBAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW;AAAA,QACT;AAAA,UACE,IAAA,EAAM,iBAAA;AAAA,UACN,OAAA,EAAS,EAAE,QAAA,EAAU,UAAA;AAAW,SAClC;AAAA,QACA;AAAA,UACE,IAAA,EAAM,QAAA;AAAA,UACN,SAAS,EAAE,MAAA,EAAQ,CAAC,CAAA,EAAG,GAAG,CAAA;AAAE;AAC9B,OACF;AAAA,MACA,SAAA,EAAU;AAAA;AAAA,GACZ;AAEJ,CAAA;ACvHe,SAAR,eAAgC,KAAA,EAIpC;AACD,EAAA,uBACER,cAAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,aAAA;AAAA,MACN,cAAc,KAAA,CAAM,UAAA;AAAA,MACpB,cAAc,KAAA,CAAM,YAAA;AAAA,MACpB,aAAa,KAAA,CAAM;AAAA;AAAA,GACrB;AAEJ","file":"ProfilePage.cjs","sourcesContent":["\"use client\";\n\nimport React, { useMemo, useState } from \"react\";\nimport Autocomplete from \"@mui/material/Autocomplete\";\nimport Card from \"@mui/material/Card\";\nimport CardContent from \"@mui/material/CardContent\";\nimport CardHeader from \"@mui/material/CardHeader\";\nimport Grid from \"@mui/material/Grid\";\nimport Popper, { PopperProps } from \"@mui/material/Popper\";\nimport TextField from \"@mui/material/TextField\";\nimport type { Tag } from \"@/types/tag\";\n\nexport interface TagEditorProps {\n  title?: string;\n  selectedTags: Tag[];\n  possibleTags: Tag[];\n  onToggleTag: (id: number) => void;\n}\n\nexport function TagEditor({\n  title = \"Tags\",\n  selectedTags,\n  possibleTags,\n  onToggleTag,\n}: TagEditorProps) {\n  const [inputValue, setInputValue] = useState(\"\");\n  const selectedIds = useMemo(() => selectedTags.map((tag) => tag.id), [selectedTags]);\n\n  const options = useMemo(\n    () => possibleTags.map((tag) => ({ value: tag.id, label: tag.label })),\n    [possibleTags]\n  );\n\n  return (\n    <Grid container>\n      <Grid size={{ xs: 12 }}>\n        <Card>\n          <CardHeader\n            title={title}\n            style={{\n              background: \"linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))\",\n              color: \"#FFFFFF\",\n              fontSize: \"1.5rem\",\n              textShadow: \"0px 3px 6px rgba(0, 0, 0, 0.5)\",\n            }}\n          />\n          <CardContent>\n            <div className=\"mt-2 flex flex-wrap gap-2\">\n              {selectedTags.map((tag) => (\n                <span\n                  key={tag.id}\n                  className=\"inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined\"\n                  style={{\n                    background: tag.color || \"#bfbcbb\",\n                    color: \"white\",\n                    textShadow: \"black 0.2em 0.2em 0.4em\",\n                  }}\n                >\n                  {tag.label}\n                  <button\n                    type=\"button\"\n                    onClick={() => onToggleTag(tag.id)}\n                    className=\"ml-2 text-red-500 bg-white bg-opacity-50 rounded-full outline-black outline-2 font-outlined\"\n                  >\n                    &times;\n                  </button>\n                </span>\n              ))}\n            </div>\n            <Grid container spacing={3}>\n              <Grid sx={{ marginTop: 3, width: \"100%\" }}>\n                <Autocomplete\n                  key={selectedIds.join(\"-\")}\n                  options={options}\n                  filterOptions={(availableOptions, state) =>\n                    availableOptions\n                      .filter(\n                        (option) =>\n                          !selectedIds.includes(option.value) &&\n                          option.label.toLowerCase().includes(state.inputValue.toLowerCase())\n                      )\n                      .slice(0, 3)\n                  }\n                  value={null}\n                  inputValue={inputValue}\n                  onInputChange={(event, newInputValue) => {\n                    if (event && event.type === \"change\") {\n                      setInputValue(newInputValue);\n                    }\n                  }}\n                  onChange={(event, newValue) => {\n                    if (newValue) {\n                      onToggleTag(newValue.value);\n                    }\n                    setInputValue(\"\");\n                  }}\n                  slots={{ popper: CustomPopper }}\n                  renderInput={(params) => <TextField {...params} label=\"Select Tags\" />}\n                />\n              </Grid>\n            </Grid>\n          </CardContent>\n        </Card>\n      </Grid>\n    </Grid>\n  );\n}\n\nconst CustomPopper = (props: PopperProps) => {\n  return (\n    <Popper\n      {...props}\n      modifiers={[\n        {\n          name: \"preventOverflow\",\n          options: { boundary: \"viewport\" },\n        },\n        {\n          name: \"offset\",\n          options: { offset: [0, -10] },\n        },\n      ]}\n      placement=\"top-start\"\n    />\n  );\n};\n","\"use client\";\n\nimport React from \"react\";\nimport type { Tag } from \"@/types/tag\";\nimport { TagEditor } from \"@/components/shared/TagEditor\";\n\nexport default function PlayerTagsEdit(props: {\n  PlayerTags: Tag[];\n  possibleTags: Tag[];\n  updatePlayerTags: (id:number) => void;\n}) {\n  return (\n    <TagEditor\n      title=\"Player Tags\"\n      selectedTags={props.PlayerTags}\n      possibleTags={props.possibleTags}\n      onToggleTag={props.updatePlayerTags}\n    />\n  );\n}\n"]}

package/dist/ProfilePage.d.cts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Tag } from './types/tag';
+
+declare function PlayerTagsEdit(props: {
+    PlayerTags: Tag[];
+    possibleTags: Tag[];
+    updatePlayerTags: (id: number) => void;
+}): react_jsx_runtime.JSX.Element;
+
+export { PlayerTagsEdit };

package/dist/ProfilePage.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Tag } from './types/tag';
+
+declare function PlayerTagsEdit(props: {
+    PlayerTags: Tag[];
+    possibleTags: Tag[];
+    updatePlayerTags: (id: number) => void;
+}): react_jsx_runtime.JSX.Element;
+
+export { PlayerTagsEdit };

package/dist/ProfilePage.mjs

@@ -0,0 +1,124 @@
+"use client";
+import { useState, useMemo } from 'react';
+import Autocomplete from '@mui/material/Autocomplete';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import CardHeader from '@mui/material/CardHeader';
+import Grid from '@mui/material/Grid';
+import Popper from '@mui/material/Popper';
+import TextField from '@mui/material/TextField';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/shared/TagEditor.tsx
+function TagEditor({
+  title = "Tags",
+  selectedTags,
+  possibleTags,
+  onToggleTag
+}) {
+  const [inputValue, setInputValue] = useState("");
+  const selectedIds = useMemo(() => selectedTags.map((tag) => tag.id), [selectedTags]);
+  const options = useMemo(
+    () => possibleTags.map((tag) => ({ value: tag.id, label: tag.label })),
+    [possibleTags]
+  );
+  return /* @__PURE__ */ jsx(Grid, { container: true, children: /* @__PURE__ */ jsx(Grid, { size: { xs: 12 }, children: /* @__PURE__ */ jsxs(Card, { children: [
+    /* @__PURE__ */ jsx(
+      CardHeader,
+      {
+        title,
+        style: {
+          background: "linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))",
+          color: "#FFFFFF",
+          fontSize: "1.5rem",
+          textShadow: "0px 3px 6px rgba(0, 0, 0, 0.5)"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(CardContent, { children: [
+      /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: selectedTags.map((tag) => /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
+          style: {
+            background: tag.color || "#bfbcbb",
+            color: "white",
+            textShadow: "black 0.2em 0.2em 0.4em"
+          },
+          children: [
+            tag.label,
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => onToggleTag(tag.id),
+                className: "ml-2 text-red-500 bg-white bg-opacity-50 rounded-full outline-black outline-2 font-outlined",
+                children: "\xD7"
+              }
+            )
+          ]
+        },
+        tag.id
+      )) }),
+      /* @__PURE__ */ jsx(Grid, { container: true, spacing: 3, children: /* @__PURE__ */ jsx(Grid, { sx: { marginTop: 3, width: "100%" }, children: /* @__PURE__ */ jsx(
+        Autocomplete,
+        {
+          options,
+          filterOptions: (availableOptions, state) => availableOptions.filter(
+            (option) => !selectedIds.includes(option.value) && option.label.toLowerCase().includes(state.inputValue.toLowerCase())
+          ).slice(0, 3),
+          value: null,
+          inputValue,
+          onInputChange: (event, newInputValue) => {
+            if (event && event.type === "change") {
+              setInputValue(newInputValue);
+            }
+          },
+          onChange: (event, newValue) => {
+            if (newValue) {
+              onToggleTag(newValue.value);
+            }
+            setInputValue("");
+          },
+          slots: { popper: CustomPopper },
+          renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, label: "Select Tags" })
+        },
+        selectedIds.join("-")
+      ) }) })
+    ] })
+  ] }) }) });
+}
+var CustomPopper = (props) => {
+  return /* @__PURE__ */ jsx(
+    Popper,
+    {
+      ...props,
+      modifiers: [
+        {
+          name: "preventOverflow",
+          options: { boundary: "viewport" }
+        },
+        {
+          name: "offset",
+          options: { offset: [0, -10] }
+        }
+      ],
+      placement: "top-start"
+    }
+  );
+};
+function PlayerTagsEdit(props) {
+  return /* @__PURE__ */ jsx(
+    TagEditor,
+    {
+      title: "Player Tags",
+      selectedTags: props.PlayerTags,
+      possibleTags: props.possibleTags,
+      onToggleTag: props.updatePlayerTags
+    }
+  );
+}
+
+export { PlayerTagsEdit };
+//# sourceMappingURL=ProfilePage.mjs.map
+//# sourceMappingURL=ProfilePage.mjs.map

package/dist/ProfilePage.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/shared/TagEditor.tsx","../src/components/ProfilePage/PlayerTagsEdit.tsx"],"names":["jsx"],"mappings":"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","file":"ProfilePage.mjs","sourcesContent":["\"use client\";\n\nimport React, { useMemo, useState } from \"react\";\nimport Autocomplete from \"@mui/material/Autocomplete\";\nimport Card from \"@mui/material/Card\";\nimport CardContent from \"@mui/material/CardContent\";\nimport CardHeader from \"@mui/material/CardHeader\";\nimport Grid from \"@mui/material/Grid\";\nimport Popper, { PopperProps } from \"@mui/material/Popper\";\nimport TextField from \"@mui/material/TextField\";\nimport type { Tag } from \"@/types/tag\";\n\nexport interface TagEditorProps {\n  title?: string;\n  selectedTags: Tag[];\n  possibleTags: Tag[];\n  onToggleTag: (id: number) => void;\n}\n\nexport function TagEditor({\n  title = \"Tags\",\n  selectedTags,\n  possibleTags,\n  onToggleTag,\n}: TagEditorProps) {\n  const [inputValue, setInputValue] = useState(\"\");\n  const selectedIds = useMemo(() => selectedTags.map((tag) => tag.id), [selectedTags]);\n\n  const options = useMemo(\n    () => possibleTags.map((tag) => ({ value: tag.id, label: tag.label })),\n    [possibleTags]\n  );\n\n  return (\n    <Grid container>\n      <Grid size={{ xs: 12 }}>\n        <Card>\n          <CardHeader\n            title={title}\n            style={{\n              background: \"linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))\",\n              color: \"#FFFFFF\",\n              fontSize: \"1.5rem\",\n              textShadow: \"0px 3px 6px rgba(0, 0, 0, 0.5)\",\n            }}\n          />\n          <CardContent>\n            <div className=\"mt-2 flex flex-wrap gap-2\">\n              {selectedTags.map((tag) => (\n                <span\n                  key={tag.id}\n                  className=\"inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined\"\n                  style={{\n                    background: tag.color || \"#bfbcbb\",\n                    color: \"white\",\n                    textShadow: \"black 0.2em 0.2em 0.4em\",\n                  }}\n                >\n                  {tag.label}\n                  <button\n                    type=\"button\"\n                    onClick={() => onToggleTag(tag.id)}\n                    className=\"ml-2 text-red-500 bg-white bg-opacity-50 rounded-full outline-black outline-2 font-outlined\"\n                  >\n                    &times;\n                  </button>\n                </span>\n              ))}\n            </div>\n            <Grid container spacing={3}>\n              <Grid sx={{ marginTop: 3, width: \"100%\" }}>\n                <Autocomplete\n                  key={selectedIds.join(\"-\")}\n                  options={options}\n                  filterOptions={(availableOptions, state) =>\n                    availableOptions\n                      .filter(\n                        (option) =>\n                          !selectedIds.includes(option.value) &&\n                          option.label.toLowerCase().includes(state.inputValue.toLowerCase())\n                      )\n                      .slice(0, 3)\n                  }\n                  value={null}\n                  inputValue={inputValue}\n                  onInputChange={(event, newInputValue) => {\n                    if (event && event.type === \"change\") {\n                      setInputValue(newInputValue);\n                    }\n                  }}\n                  onChange={(event, newValue) => {\n                    if (newValue) {\n                      onToggleTag(newValue.value);\n                    }\n                    setInputValue(\"\");\n                  }}\n                  slots={{ popper: CustomPopper }}\n                  renderInput={(params) => <TextField {...params} label=\"Select Tags\" />}\n                />\n              </Grid>\n            </Grid>\n          </CardContent>\n        </Card>\n      </Grid>\n    </Grid>\n  );\n}\n\nconst CustomPopper = (props: PopperProps) => {\n  return (\n    <Popper\n      {...props}\n      modifiers={[\n        {\n          name: \"preventOverflow\",\n          options: { boundary: \"viewport\" },\n        },\n        {\n          name: \"offset\",\n          options: { offset: [0, -10] },\n        },\n      ]}\n      placement=\"top-start\"\n    />\n  );\n};\n","\"use client\";\n\nimport React from \"react\";\nimport type { Tag } from \"@/types/tag\";\nimport { TagEditor } from \"@/components/shared/TagEditor\";\n\nexport default function PlayerTagsEdit(props: {\n  PlayerTags: Tag[];\n  possibleTags: Tag[];\n  updatePlayerTags: (id:number) => void;\n}) {\n  return (\n    <TagEditor\n      title=\"Player Tags\"\n      selectedTags={props.PlayerTags}\n      possibleTags={props.possibleTags}\n      onToggleTag={props.updatePlayerTags}\n    />\n  );\n}\n"]}