@mbpockets/shared-ui 0.1.18 → 0.1.19

package/dist/common/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/shared/AutoResizingTextarea.tsx","../../src/components/shared/NextGameCountdown.tsx","../../src/components/shared/TagComponents.tsx","../../src/components/shared/TagEditor.tsx"],"names":["useEffect","jsx","useState","jsxs"],"mappings":"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","file":"index.mjs","sourcesContent":["\"use client\"\r\n\r\nimport React, {Dispatch, SetStateAction, useEffect} from 'react';\r\n\r\ninterface IAutoResizingTextareaProps {\r\n    isInEditMode: boolean;\r\n    onChange: Dispatch<SetStateAction<string>>;\r\n    textareaRef: React.RefObject<HTMLTextAreaElement | null>;\r\n    value: string;\r\n}\r\n\r\nconst AutoResizingTextarea: React.FC<IAutoResizingTextareaProps> = (props: IAutoResizingTextareaProps) => {\r\n    const { isInEditMode, onChange, textareaRef, value } = props;\r\n\r\n    useEffect(() => {\r\n        if (isInEditMode && textareaRef.current) {\r\n            const textarea = textareaRef.current;\r\n\r\n            textarea.style.height = 'auto';\r\n            textarea.style.height = `${textarea.scrollHeight}px`;\r\n        }\r\n    }, [isInEditMode, textareaRef, value]); // Run effect when entering edit mode or value changes\r\n\r\n    return (\r\n        <textarea\r\n            ref={textareaRef}\r\n            value={value}\r\n            onChange={(e) => onChange(e.target.value)}\r\n            style={{\r\n                backgroundColor: '#fffbea',\r\n                overflow: 'hidden',\r\n                resize: 'none',\r\n                width: '100%'\r\n            }}\r\n        />\r\n    );\r\n}\r\n\r\nexport default AutoResizingTextarea;\r\n","\"use client\";\n\nimport React, { useState, useEffect } from 'react';\r\nimport { Typography } from '@mui/material';\r\n\r\nexport const NextGameCountdown = ({ nextGameTime }: { nextGameTime?: Date | string }) => {\r\n  const [timeLeft, setTimeLeft] = useState<string>('');\r\n\r\n  useEffect(() => {\r\n    if (!nextGameTime) return;\r\n\r\n    const timer = setInterval(() => {\r\n      const now = new Date().getTime();\r\n      const distance = new Date(nextGameTime).getTime() - now;\r\n\r\n      if (distance < 0) {\r\n        clearInterval(timer);\r\n        setTimeLeft('Started');\r\n        return;\r\n      }\r\n\r\n      const days = Math.floor(distance / (1000 * 60 * 60 * 24));\r\n      const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));\r\n      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));\r\n      const seconds = Math.floor((distance % (1000 * 60)) / 1000);\r\n\r\n      let timeString = '';\r\n      if (days > 0) timeString += `${days}d `;\r\n      if (hours > 0 || days > 0) timeString += `${hours}h `;\r\n      timeString += `${minutes}m ${seconds}s`;\r\n\r\n      setTimeLeft(timeString);\r\n    }, 1000);\r\n\r\n    return () => clearInterval(timer);\r\n  }, [nextGameTime]);\r\n\r\n  if (!nextGameTime) return null;\r\n\r\n  return (\r\n    <Typography variant=\"body2\" color=\"primary\" sx={{ fontWeight: 'bold' }}>\r\n      Next Game: {timeLeft}\r\n    </Typography>\r\n  );\r\n};\r\n","\"use client\";\n\nimport React from \"react\";\nimport type { Tag } from \"@/types/tag\";\n\nexport function generateTagsDisplay(tag: Tag) {\n    return (\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                marginTop:\"6px\",\n                marginRight: \"6px\",\n                marginBottom: \"6px\",\n                background: tag.color || '#bfbcbb',\n                color: \"white\",\n                textShadow: \"black 0.2em 0.2em 0.4em\"\n            }}\n        >\n            {tag.label}\n        </span>\n    )\n}\n\nexport function renderTagsFromIds(ids: number[] | undefined, legalTags: Tag[]) {\n    if (!ids || !legalTags || legalTags.length === 0) { return ( <></>) }\n    const validTags = ids\n        .map((id) => legalTags.find((tag) => tag.id === id))\n        .filter((tag): tag is Tag => Boolean(tag));\n\n    return validTags.map((tag) => generateTagsDisplay(tag));\n}\n","\"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"]}
+{"version":3,"sources":["../../src/components/shared/AutoResizingTextarea.tsx","../../src/components/shared/Chip.tsx","../../src/components/shared/NextGameCountdown.tsx","../../src/components/shared/TagComponents.tsx","../../src/components/shared/TagEditor.tsx"],"names":["jsx","useEffect","jsxs","Fragment","useState"],"mappings":"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","file":"index.mjs","sourcesContent":["\"use client\"\r\n\r\nimport React, {Dispatch, SetStateAction, useEffect} from 'react';\r\n\r\ninterface IAutoResizingTextareaProps {\r\n    isInEditMode: boolean;\r\n    onChange: Dispatch<SetStateAction<string>>;\r\n    textareaRef: React.RefObject<HTMLTextAreaElement | null>;\r\n    value: string;\r\n}\r\n\r\nconst AutoResizingTextarea: React.FC<IAutoResizingTextareaProps> = (props: IAutoResizingTextareaProps) => {\r\n    const { isInEditMode, onChange, textareaRef, value } = props;\r\n\r\n    useEffect(() => {\r\n        if (isInEditMode && textareaRef.current) {\r\n            const textarea = textareaRef.current;\r\n\r\n            textarea.style.height = 'auto';\r\n            textarea.style.height = `${textarea.scrollHeight}px`;\r\n        }\r\n    }, [isInEditMode, textareaRef, value]); // Run effect when entering edit mode or value changes\r\n\r\n    return (\r\n        <textarea\r\n            ref={textareaRef}\r\n            value={value}\r\n            onChange={(e) => onChange(e.target.value)}\r\n            style={{\r\n                backgroundColor: '#fffbea',\r\n                overflow: 'hidden',\r\n                resize: 'none',\r\n                width: '100%'\r\n            }}\r\n        />\r\n    );\r\n}\r\n\r\nexport default AutoResizingTextarea;\r\n","import React from \"react\";\r\nimport {Tag} from \"@/types/tag\";\r\n\r\nexport default function Chip({ tag, removeCallback }: { tag: Tag, removeCallback?: (tagId: number) => void }) {\r\n  const color = tag.color ?? \"#bfbcbb\";\r\n  return (\r\n      <>\r\n      <span\r\n          key={tag.id}\r\n          className=\"inline-block text-sm px-3 py-1 rounded-full border-2 font-outlined text-white m-0.5 font-stretch-105% font-sans\"\r\n          style={{\r\n            borderColor: `color-mix(in srgb, ${color}, black 50%)`,\r\n            background: `linear-gradient(160deg, color-mix(in srgb, ${color}, white 10%) 0%, color-mix(in srgb, ${color}, black 60%) 100%)`,\r\n            textShadow: \"black 1.5px 1px 1.5px\",\r\n            filter: `drop-shadow(2px 2px 1.5px color-mix(in srgb, ${color}, black 80%))`\r\n          }}\r\n      >\r\n          {tag.label}\r\n          {removeCallback && (\r\n              <button\r\n                  type=\"button\"\r\n                  onClick={() => removeCallback(tag.id)}\r\n                  className=\"ml-2 text-white hover:text-red-700 focus:outline-none pl-0.5 pr-1 cursor-pointer hover:bg-white rounded-full\"\r\n                  style={{\r\n                    textShadow: \"black 1px 1px 1px\"\r\n                  }}\r\n              >\r\n                X\r\n              </button>\r\n          )}\r\n    </span>\r\n    </>\r\n  )\r\n\r\n}","\"use client\";\n\nimport React, { useState, useEffect } from 'react';\r\nimport { Typography } from '@mui/material';\r\n\r\nexport const NextGameCountdown = ({ nextGameTime }: { nextGameTime?: Date | string }) => {\r\n  const [timeLeft, setTimeLeft] = useState<string>('');\r\n\r\n  useEffect(() => {\r\n    if (!nextGameTime) return;\r\n\r\n    const timer = setInterval(() => {\r\n      const now = new Date().getTime();\r\n      const distance = new Date(nextGameTime).getTime() - now;\r\n\r\n      if (distance < 0) {\r\n        clearInterval(timer);\r\n        setTimeLeft('Started');\r\n        return;\r\n      }\r\n\r\n      const days = Math.floor(distance / (1000 * 60 * 60 * 24));\r\n      const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));\r\n      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));\r\n      const seconds = Math.floor((distance % (1000 * 60)) / 1000);\r\n\r\n      let timeString = '';\r\n      if (days > 0) timeString += `${days}d `;\r\n      if (hours > 0 || days > 0) timeString += `${hours}h `;\r\n      timeString += `${minutes}m ${seconds}s`;\r\n\r\n      setTimeLeft(timeString);\r\n    }, 1000);\r\n\r\n    return () => clearInterval(timer);\r\n  }, [nextGameTime]);\r\n\r\n  if (!nextGameTime) return null;\r\n\r\n  return (\r\n    <Typography variant=\"body2\" color=\"primary\" sx={{ fontWeight: 'bold' }}>\r\n      Next Game: {timeLeft}\r\n    </Typography>\r\n  );\r\n};\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport type { Tag } from \"@/types/tag\";\r\nimport Chip from \"@/components/shared/Chip\";\r\n\r\nexport function generateTagsDisplay(tag: Tag) {\r\n    return (\r\n        <Chip tag={tag} key={tag.id} />\r\n    )\r\n}\r\n\r\nexport function renderTagsFromIds(ids: number[] | undefined, legalTags: Tag[]) {\r\n    if (!ids || !legalTags || legalTags.length === 0) { return ( <></>) }\r\n    const validTags = ids\r\n        .map((id) => legalTags.find((tag) => tag.id === id))\r\n        .filter((tag): tag is Tag => Boolean(tag));\r\n\r\n    return validTags.map((tag) => generateTagsDisplay(tag));\r\n}\r\n","\"use client\";\r\n\r\nimport React, { useMemo, useState } from \"react\";\r\nimport Autocomplete from \"@mui/material/Autocomplete\";\r\nimport Card from \"@mui/material/Card\";\r\nimport CardContent from \"@mui/material/CardContent\";\r\nimport CardHeader from \"@mui/material/CardHeader\";\r\nimport Grid from \"@mui/material/Grid\";\r\nimport Popper, { PopperProps } from \"@mui/material/Popper\";\r\nimport TextField from \"@mui/material/TextField\";\r\nimport type { Tag } from \"@/types/tag\";\r\nimport Chip from \"@/components/shared/Chip\";\r\n\r\nexport interface TagEditorProps {\r\n  title?: string;\r\n  selectedTags: Tag[];\r\n  possibleTags: Tag[];\r\n  onToggleTag: (id: number) => void;\r\n}\r\n\r\nexport function TagEditor({\r\n  title = \"Tags\",\r\n  selectedTags,\r\n  possibleTags,\r\n  onToggleTag,\r\n}: TagEditorProps) {\r\n  const [inputValue, setInputValue] = useState(\"\");\r\n  const selectedIds = useMemo(() => selectedTags.map((tag) => tag.id), [selectedTags]);\r\n\r\n  const options = useMemo(\r\n    () => possibleTags.map((tag) => ({ value: tag.id, label: tag.label })),\r\n    [possibleTags]\r\n  );\r\n\r\n  return (\r\n    <Grid container>\r\n      <Grid size={{ xs: 12 }}>\r\n        <Card>\r\n          <CardHeader\r\n            title={title}\r\n            style={{\r\n              background: \"linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))\",\r\n              color: \"#FFFFFF\",\r\n              fontSize: \"1.5rem\",\r\n              textShadow: \"0px 3px 6px rgba(0, 0, 0, 0.5)\",\r\n            }}\r\n          />\r\n          <CardContent>\r\n            <div className=\"mt-2 flex flex-wrap gap-2\">\r\n              {selectedTags.map((tag) => (\r\n                <Chip\r\n                  key={tag.id}\r\n                  tag={tag}\r\n                  removeCallback={() => onToggleTag(tag.id)}\r\n                />\r\n              ))}\r\n            </div>\r\n            <Grid container spacing={3}>\r\n              <Grid sx={{ marginTop: 3, width: \"100%\" }}>\r\n                <Autocomplete\r\n                  key={selectedIds.join(\"-\")}\r\n                  options={options}\r\n                  filterOptions={(availableOptions, state) =>\r\n                    availableOptions\r\n                      .filter(\r\n                        (option) =>\r\n                          !selectedIds.includes(option.value) &&\r\n                          option.label.toLowerCase().includes(state.inputValue.toLowerCase())\r\n                      )\r\n                      .slice(0, 3)\r\n                  }\r\n                  value={null}\r\n                  inputValue={inputValue}\r\n                  onInputChange={(event, newInputValue) => {\r\n                    if (event && event.type === \"change\") {\r\n                      setInputValue(newInputValue);\r\n                    }\r\n                  }}\r\n                  onChange={(event, newValue) => {\r\n                    if (newValue) {\r\n                      onToggleTag(newValue.value);\r\n                    }\r\n                    setInputValue(\"\");\r\n                  }}\r\n                  slots={{ popper: CustomPopper }}\r\n                  renderInput={(params) => <TextField {...params} label=\"Select Tags\" />}\r\n                />\r\n              </Grid>\r\n            </Grid>\r\n          </CardContent>\r\n        </Card>\r\n      </Grid>\r\n    </Grid>\r\n  );\r\n}\r\n\r\nconst CustomPopper = (props: PopperProps) => {\r\n  return (\r\n    <Popper\r\n      {...props}\r\n      modifiers={[\r\n        {\r\n          name: \"preventOverflow\",\r\n          options: { boundary: \"viewport\" },\r\n        },\r\n        {\r\n          name: \"offset\",\r\n          options: { offset: [0, -10] },\r\n        },\r\n      ]}\r\n      placement=\"top-start\"\r\n    />\r\n  );\r\n};\r\n"]}

package/dist/common.cjs

@@ -48,6 +48,38 @@ var AutoResizingTextarea = (props) => {
   );
 };
 var AutoResizingTextarea_default = AutoResizingTextarea;
+function Chip({ tag, removeCallback }) {
+  var _a;
+  const color = (_a = tag.color) != null ? _a : "#bfbcbb";
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: "inline-block text-sm px-3 py-1 rounded-full border-2 font-outlined text-white m-0.5 font-stretch-105% font-sans",
+      style: {
+        borderColor: `color-mix(in srgb, ${color}, black 50%)`,
+        background: `linear-gradient(160deg, color-mix(in srgb, ${color}, white 10%) 0%, color-mix(in srgb, ${color}, black 60%) 100%)`,
+        textShadow: "black 1.5px 1px 1.5px",
+        filter: `drop-shadow(2px 2px 1.5px color-mix(in srgb, ${color}, black 80%))`
+      },
+      children: [
+        tag.label,
+        removeCallback && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => removeCallback(tag.id),
+            className: "ml-2 text-white hover:text-red-700 focus:outline-none pl-0.5 pr-1 cursor-pointer hover:bg-white rounded-full",
+            style: {
+              textShadow: "black 1px 1px 1px"
+            },
+            children: "X"
+          }
+        )
+      ]
+    },
+    tag.id
+  ) });
+}
 var NextGameCountdown = ({ nextGameTime }) => {
   const [timeLeft, setTimeLeft] = react.useState("");
   react.useEffect(() => {
@@ -79,22 +111,7 @@ var NextGameCountdown = ({ nextGameTime }) => {
   ] });
 };
 function generateTagsDisplay(tag) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
-      style: {
-        marginTop: "6px",
-        marginRight: "6px",
-        marginBottom: "6px",
-        background: tag.color || "#bfbcbb",
-        color: "white",
-        textShadow: "black 0.2em 0.2em 0.4em"
-      },
-      children: tag.label
-    },
-    tag.id
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(Chip, { tag }, tag.id);
 }
 function renderTagsFromIds(ids, legalTags) {
   if (!ids || !legalTags || legalTags.length === 0) {
@@ -129,27 +146,11 @@ function TagEditor({
       }
     ),
     /* @__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",
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: selectedTags.map((tag) => /* @__PURE__ */ jsxRuntime.jsx(
+        Chip,
         {
-          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,
+          removeCallback: () => onToggleTag(tag.id)
         },
         tag.id
       )) }),
@@ -202,6 +203,7 @@ var CustomPopper = (props) => {
 };
 
 exports.AutoResizingTextarea = AutoResizingTextarea_default;
+exports.Chip = Chip;
 exports.NextGameCountdown = NextGameCountdown;
 exports.TagEditor = TagEditor;
 exports.generateTagsDisplay = generateTagsDisplay;

package/dist/common.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/shared/AutoResizingTextarea.tsx","../src/components/shared/NextGameCountdown.tsx","../src/components/shared/TagComponents.tsx","../src/components/shared/TagEditor.tsx"],"names":["useEffect","jsx","useState","jsxs","Typography","Fragment","useMemo","Grid","Card","CardHeader","CardContent","Autocomplete","TextField","Popper"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAWA,IAAM,oBAAA,GAA6D,CAAC,KAAA,KAAsC;AACtG,EAAA,MAAM,EAAE,YAAA,EAAc,QAAA,EAAU,WAAA,EAAa,OAAM,GAAI,KAAA;AAEvD,EAAAA,eAAA,CAAU,MAAM;AACZ,IAAA,IAAI,YAAA,IAAgB,YAAY,OAAA,EAAS;AACrC,MAAA,MAAM,WAAW,WAAA,CAAY,OAAA;AAE7B,MAAA,QAAA,CAAS,MAAM,MAAA,GAAS,MAAA;AACxB,MAAA,QAAA,CAAS,KAAA,CAAM,MAAA,GAAS,CAAA,EAAG,QAAA,CAAS,YAAY,CAAA,EAAA,CAAA;AAAA,IACpD;AAAA,EACJ,CAAA,EAAG,CAAC,YAAA,EAAc,WAAA,EAAa,KAAK,CAAC,CAAA;AAErC,EAAA,uBACIC,cAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACG,GAAA,EAAK,WAAA;AAAA,MACL,KAAA;AAAA,MACA,UAAU,CAAC,CAAA,KAAM,QAAA,CAAS,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,MACxC,KAAA,EAAO;AAAA,QACH,eAAA,EAAiB,SAAA;AAAA,QACjB,QAAA,EAAU,QAAA;AAAA,QACV,MAAA,EAAQ,MAAA;AAAA,QACR,KAAA,EAAO;AAAA;AACX;AAAA,GACJ;AAER,CAAA;AAEA,IAAO,4BAAA,GAAQ;ACjCR,IAAM,iBAAA,GAAoB,CAAC,EAAE,YAAA,EAAa,KAAwC;AACvF,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,eAAiB,EAAE,CAAA;AAEnD,EAAAF,gBAAU,MAAM;AACd,IAAA,IAAI,CAAC,YAAA,EAAc;AAEnB,IAAA,MAAM,KAAA,GAAQ,YAAY,MAAM;AAC9B,MAAA,MAAM,GAAA,GAAA,iBAAM,IAAI,IAAA,EAAK,EAAE,OAAA,EAAQ;AAC/B,MAAA,MAAM,WAAW,IAAI,IAAA,CAAK,YAAY,CAAA,CAAE,SAAQ,GAAI,GAAA;AAEpD,MAAA,IAAI,WAAW,CAAA,EAAG;AAChB,QAAA,aAAA,CAAc,KAAK,CAAA;AACnB,QAAA,WAAA,CAAY,SAAS,CAAA;AACrB,QAAA;AAAA,MACF;AAEA,MAAA,MAAM,OAAO,IAAA,CAAK,KAAA,CAAM,YAAY,GAAA,GAAO,EAAA,GAAK,KAAK,EAAA,CAAG,CAAA;AACxD,MAAA,MAAM,KAAA,GAAQ,IAAA,CAAK,KAAA,CAAO,QAAA,IAAY,GAAA,GAAO,KAAK,EAAA,GAAK,EAAA,CAAA,IAAQ,GAAA,GAAO,EAAA,GAAK,EAAA,CAAG,CAAA;AAC9E,MAAA,MAAM,OAAA,GAAU,KAAK,KAAA,CAAO,QAAA,IAAY,MAAO,EAAA,GAAK,EAAA,CAAA,IAAQ,MAAO,EAAA,CAAG,CAAA;AACtE,MAAA,MAAM,UAAU,IAAA,CAAK,KAAA,CAAO,QAAA,IAAY,GAAA,GAAO,MAAO,GAAI,CAAA;AAE1D,MAAA,IAAI,UAAA,GAAa,EAAA;AACjB,MAAA,IAAI,IAAA,GAAO,CAAA,EAAG,UAAA,IAAc,CAAA,EAAG,IAAI,CAAA,EAAA,CAAA;AACnC,MAAA,IAAI,QAAQ,CAAA,IAAK,IAAA,GAAO,CAAA,EAAG,UAAA,IAAc,GAAG,KAAK,CAAA,EAAA,CAAA;AACjD,MAAA,UAAA,IAAc,CAAA,EAAG,OAAO,CAAA,EAAA,EAAK,OAAO,CAAA,CAAA,CAAA;AAEpC,MAAA,WAAA,CAAY,UAAU,CAAA;AAAA,IACxB,GAAG,GAAI,CAAA;AAEP,IAAA,OAAO,MAAM,cAAc,KAAK,CAAA;AAAA,EAClC,CAAA,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,EAAA,IAAI,CAAC,cAAc,OAAO,IAAA;AAE1B,EAAA,uBACEG,eAAA,CAACC,mBAAA,EAAA,EAAW,OAAA,EAAQ,OAAA,EAAQ,KAAA,EAAM,WAAU,EAAA,EAAI,EAAE,UAAA,EAAY,MAAA,EAAO,EAAG,QAAA,EAAA;AAAA,IAAA,aAAA;AAAA,IAC1D;AAAA,GAAA,EACd,CAAA;AAEJ;ACvCO,SAAS,oBAAoB,GAAA,EAAU;AAC1C,EAAA,uBACIH,cAAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MAEG,SAAA,EAAU,mFAAA;AAAA,MACV,KAAA,EAAO;AAAA,QACH,SAAA,EAAU,KAAA;AAAA,QACV,WAAA,EAAa,KAAA;AAAA,QACb,YAAA,EAAc,KAAA;AAAA,QACd,UAAA,EAAY,IAAI,KAAA,IAAS,SAAA;AAAA,QACzB,KAAA,EAAO,OAAA;AAAA,QACP,UAAA,EAAY;AAAA,OAChB;AAAA,MAEC,QAAA,EAAA,GAAA,CAAI;AAAA,KAAA;AAAA,IAXA,GAAA,CAAI;AAAA,GAYb;AAER;AAEO,SAAS,iBAAA,CAAkB,KAA2B,SAAA,EAAkB;AAC3E,EAAA,IAAI,CAAC,GAAA,IAAO,CAAC,SAAA,IAAa,SAAA,CAAU,WAAW,CAAA,EAAG;AAAE,IAAA,uBAASA,eAAAI,mBAAA,EAAA,EAAE,CAAA;AAAA,EAAK;AACpE,EAAA,MAAM,YAAY,GAAA,CACb,GAAA,CAAI,CAAC,EAAA,KAAO,SAAA,CAAU,KAAK,CAAC,GAAA,KAAQ,IAAI,EAAA,KAAO,EAAE,CAAC,CAAA,CAClD,MAAA,CAAO,CAAC,GAAA,KAAoB,OAAA,CAAQ,GAAG,CAAC,CAAA;AAE7C,EAAA,OAAO,UAAU,GAAA,CAAI,CAAC,GAAA,KAAQ,mBAAA,CAAoB,GAAG,CAAC,CAAA;AAC1D;ACZO,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,GAAIH,eAAS,EAAE,CAAA;AAC/C,EAAA,MAAM,WAAA,GAAcI,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,uBACEL,cAAAA,CAACM,qBAAA,EAAA,EAAK,SAAA,EAAS,MACb,QAAA,kBAAAN,cAAAA,CAACM,qBAAA,EAAA,EAAK,IAAA,EAAM,EAAE,EAAA,EAAI,EAAA,EAAG,EACnB,QAAA,kBAAAJ,gBAACK,qBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAP,cAAAA;AAAA,MAACQ,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,oBACAN,gBAACO,4BAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAAT,cAAAA,CAAC,SAAI,SAAA,EAAU,2BAAA,EACZ,uBAAa,GAAA,CAAI,CAAC,wBACjBE,eAAAA;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,cAAAA;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,cAAAA,CAACM,qBAAA,EAAA,EAAK,SAAA,EAAS,IAAA,EAAC,SAAS,CAAA,EACvB,QAAA,kBAAAN,cAAAA,CAACM,qBAAA,EAAA,EAAK,IAAI,EAAE,SAAA,EAAW,GAAG,KAAA,EAAO,MAAA,IAC/B,QAAA,kBAAAN,cAAAA;AAAA,QAACU,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,qBAAWV,eAACW,0BAAA,EAAA,EAAW,GAAG,MAAA,EAAQ,KAAA,EAAM,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,uBACEX,cAAAA;AAAA,IAACY,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","file":"common.cjs","sourcesContent":["\"use client\"\r\n\r\nimport React, {Dispatch, SetStateAction, useEffect} from 'react';\r\n\r\ninterface IAutoResizingTextareaProps {\r\n    isInEditMode: boolean;\r\n    onChange: Dispatch<SetStateAction<string>>;\r\n    textareaRef: React.RefObject<HTMLTextAreaElement | null>;\r\n    value: string;\r\n}\r\n\r\nconst AutoResizingTextarea: React.FC<IAutoResizingTextareaProps> = (props: IAutoResizingTextareaProps) => {\r\n    const { isInEditMode, onChange, textareaRef, value } = props;\r\n\r\n    useEffect(() => {\r\n        if (isInEditMode && textareaRef.current) {\r\n            const textarea = textareaRef.current;\r\n\r\n            textarea.style.height = 'auto';\r\n            textarea.style.height = `${textarea.scrollHeight}px`;\r\n        }\r\n    }, [isInEditMode, textareaRef, value]); // Run effect when entering edit mode or value changes\r\n\r\n    return (\r\n        <textarea\r\n            ref={textareaRef}\r\n            value={value}\r\n            onChange={(e) => onChange(e.target.value)}\r\n            style={{\r\n                backgroundColor: '#fffbea',\r\n                overflow: 'hidden',\r\n                resize: 'none',\r\n                width: '100%'\r\n            }}\r\n        />\r\n    );\r\n}\r\n\r\nexport default AutoResizingTextarea;\r\n","\"use client\";\n\nimport React, { useState, useEffect } from 'react';\r\nimport { Typography } from '@mui/material';\r\n\r\nexport const NextGameCountdown = ({ nextGameTime }: { nextGameTime?: Date | string }) => {\r\n  const [timeLeft, setTimeLeft] = useState<string>('');\r\n\r\n  useEffect(() => {\r\n    if (!nextGameTime) return;\r\n\r\n    const timer = setInterval(() => {\r\n      const now = new Date().getTime();\r\n      const distance = new Date(nextGameTime).getTime() - now;\r\n\r\n      if (distance < 0) {\r\n        clearInterval(timer);\r\n        setTimeLeft('Started');\r\n        return;\r\n      }\r\n\r\n      const days = Math.floor(distance / (1000 * 60 * 60 * 24));\r\n      const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));\r\n      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));\r\n      const seconds = Math.floor((distance % (1000 * 60)) / 1000);\r\n\r\n      let timeString = '';\r\n      if (days > 0) timeString += `${days}d `;\r\n      if (hours > 0 || days > 0) timeString += `${hours}h `;\r\n      timeString += `${minutes}m ${seconds}s`;\r\n\r\n      setTimeLeft(timeString);\r\n    }, 1000);\r\n\r\n    return () => clearInterval(timer);\r\n  }, [nextGameTime]);\r\n\r\n  if (!nextGameTime) return null;\r\n\r\n  return (\r\n    <Typography variant=\"body2\" color=\"primary\" sx={{ fontWeight: 'bold' }}>\r\n      Next Game: {timeLeft}\r\n    </Typography>\r\n  );\r\n};\r\n","\"use client\";\n\nimport React from \"react\";\nimport type { Tag } from \"@/types/tag\";\n\nexport function generateTagsDisplay(tag: Tag) {\n    return (\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                marginTop:\"6px\",\n                marginRight: \"6px\",\n                marginBottom: \"6px\",\n                background: tag.color || '#bfbcbb',\n                color: \"white\",\n                textShadow: \"black 0.2em 0.2em 0.4em\"\n            }}\n        >\n            {tag.label}\n        </span>\n    )\n}\n\nexport function renderTagsFromIds(ids: number[] | undefined, legalTags: Tag[]) {\n    if (!ids || !legalTags || legalTags.length === 0) { return ( <></>) }\n    const validTags = ids\n        .map((id) => legalTags.find((tag) => tag.id === id))\n        .filter((tag): tag is Tag => Boolean(tag));\n\n    return validTags.map((tag) => generateTagsDisplay(tag));\n}\n","\"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"]}
+{"version":3,"sources":["../src/components/shared/AutoResizingTextarea.tsx","../src/components/shared/Chip.tsx","../src/components/shared/NextGameCountdown.tsx","../src/components/shared/TagComponents.tsx","../src/components/shared/TagEditor.tsx"],"names":["useEffect","jsx","Fragment","jsxs","useState","Typography","useMemo","Grid","Card","CardHeader","CardContent","Autocomplete","TextField","Popper"],"mappings":"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","file":"common.cjs","sourcesContent":["\"use client\"\r\n\r\nimport React, {Dispatch, SetStateAction, useEffect} from 'react';\r\n\r\ninterface IAutoResizingTextareaProps {\r\n    isInEditMode: boolean;\r\n    onChange: Dispatch<SetStateAction<string>>;\r\n    textareaRef: React.RefObject<HTMLTextAreaElement | null>;\r\n    value: string;\r\n}\r\n\r\nconst AutoResizingTextarea: React.FC<IAutoResizingTextareaProps> = (props: IAutoResizingTextareaProps) => {\r\n    const { isInEditMode, onChange, textareaRef, value } = props;\r\n\r\n    useEffect(() => {\r\n        if (isInEditMode && textareaRef.current) {\r\n            const textarea = textareaRef.current;\r\n\r\n            textarea.style.height = 'auto';\r\n            textarea.style.height = `${textarea.scrollHeight}px`;\r\n        }\r\n    }, [isInEditMode, textareaRef, value]); // Run effect when entering edit mode or value changes\r\n\r\n    return (\r\n        <textarea\r\n            ref={textareaRef}\r\n            value={value}\r\n            onChange={(e) => onChange(e.target.value)}\r\n            style={{\r\n                backgroundColor: '#fffbea',\r\n                overflow: 'hidden',\r\n                resize: 'none',\r\n                width: '100%'\r\n            }}\r\n        />\r\n    );\r\n}\r\n\r\nexport default AutoResizingTextarea;\r\n","import React from \"react\";\r\nimport {Tag} from \"@/types/tag\";\r\n\r\nexport default function Chip({ tag, removeCallback }: { tag: Tag, removeCallback?: (tagId: number) => void }) {\r\n  const color = tag.color ?? \"#bfbcbb\";\r\n  return (\r\n      <>\r\n      <span\r\n          key={tag.id}\r\n          className=\"inline-block text-sm px-3 py-1 rounded-full border-2 font-outlined text-white m-0.5 font-stretch-105% font-sans\"\r\n          style={{\r\n            borderColor: `color-mix(in srgb, ${color}, black 50%)`,\r\n            background: `linear-gradient(160deg, color-mix(in srgb, ${color}, white 10%) 0%, color-mix(in srgb, ${color}, black 60%) 100%)`,\r\n            textShadow: \"black 1.5px 1px 1.5px\",\r\n            filter: `drop-shadow(2px 2px 1.5px color-mix(in srgb, ${color}, black 80%))`\r\n          }}\r\n      >\r\n          {tag.label}\r\n          {removeCallback && (\r\n              <button\r\n                  type=\"button\"\r\n                  onClick={() => removeCallback(tag.id)}\r\n                  className=\"ml-2 text-white hover:text-red-700 focus:outline-none pl-0.5 pr-1 cursor-pointer hover:bg-white rounded-full\"\r\n                  style={{\r\n                    textShadow: \"black 1px 1px 1px\"\r\n                  }}\r\n              >\r\n                X\r\n              </button>\r\n          )}\r\n    </span>\r\n    </>\r\n  )\r\n\r\n}","\"use client\";\n\nimport React, { useState, useEffect } from 'react';\r\nimport { Typography } from '@mui/material';\r\n\r\nexport const NextGameCountdown = ({ nextGameTime }: { nextGameTime?: Date | string }) => {\r\n  const [timeLeft, setTimeLeft] = useState<string>('');\r\n\r\n  useEffect(() => {\r\n    if (!nextGameTime) return;\r\n\r\n    const timer = setInterval(() => {\r\n      const now = new Date().getTime();\r\n      const distance = new Date(nextGameTime).getTime() - now;\r\n\r\n      if (distance < 0) {\r\n        clearInterval(timer);\r\n        setTimeLeft('Started');\r\n        return;\r\n      }\r\n\r\n      const days = Math.floor(distance / (1000 * 60 * 60 * 24));\r\n      const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));\r\n      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));\r\n      const seconds = Math.floor((distance % (1000 * 60)) / 1000);\r\n\r\n      let timeString = '';\r\n      if (days > 0) timeString += `${days}d `;\r\n      if (hours > 0 || days > 0) timeString += `${hours}h `;\r\n      timeString += `${minutes}m ${seconds}s`;\r\n\r\n      setTimeLeft(timeString);\r\n    }, 1000);\r\n\r\n    return () => clearInterval(timer);\r\n  }, [nextGameTime]);\r\n\r\n  if (!nextGameTime) return null;\r\n\r\n  return (\r\n    <Typography variant=\"body2\" color=\"primary\" sx={{ fontWeight: 'bold' }}>\r\n      Next Game: {timeLeft}\r\n    </Typography>\r\n  );\r\n};\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport type { Tag } from \"@/types/tag\";\r\nimport Chip from \"@/components/shared/Chip\";\r\n\r\nexport function generateTagsDisplay(tag: Tag) {\r\n    return (\r\n        <Chip tag={tag} key={tag.id} />\r\n    )\r\n}\r\n\r\nexport function renderTagsFromIds(ids: number[] | undefined, legalTags: Tag[]) {\r\n    if (!ids || !legalTags || legalTags.length === 0) { return ( <></>) }\r\n    const validTags = ids\r\n        .map((id) => legalTags.find((tag) => tag.id === id))\r\n        .filter((tag): tag is Tag => Boolean(tag));\r\n\r\n    return validTags.map((tag) => generateTagsDisplay(tag));\r\n}\r\n","\"use client\";\r\n\r\nimport React, { useMemo, useState } from \"react\";\r\nimport Autocomplete from \"@mui/material/Autocomplete\";\r\nimport Card from \"@mui/material/Card\";\r\nimport CardContent from \"@mui/material/CardContent\";\r\nimport CardHeader from \"@mui/material/CardHeader\";\r\nimport Grid from \"@mui/material/Grid\";\r\nimport Popper, { PopperProps } from \"@mui/material/Popper\";\r\nimport TextField from \"@mui/material/TextField\";\r\nimport type { Tag } from \"@/types/tag\";\r\nimport Chip from \"@/components/shared/Chip\";\r\n\r\nexport interface TagEditorProps {\r\n  title?: string;\r\n  selectedTags: Tag[];\r\n  possibleTags: Tag[];\r\n  onToggleTag: (id: number) => void;\r\n}\r\n\r\nexport function TagEditor({\r\n  title = \"Tags\",\r\n  selectedTags,\r\n  possibleTags,\r\n  onToggleTag,\r\n}: TagEditorProps) {\r\n  const [inputValue, setInputValue] = useState(\"\");\r\n  const selectedIds = useMemo(() => selectedTags.map((tag) => tag.id), [selectedTags]);\r\n\r\n  const options = useMemo(\r\n    () => possibleTags.map((tag) => ({ value: tag.id, label: tag.label })),\r\n    [possibleTags]\r\n  );\r\n\r\n  return (\r\n    <Grid container>\r\n      <Grid size={{ xs: 12 }}>\r\n        <Card>\r\n          <CardHeader\r\n            title={title}\r\n            style={{\r\n              background: \"linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))\",\r\n              color: \"#FFFFFF\",\r\n              fontSize: \"1.5rem\",\r\n              textShadow: \"0px 3px 6px rgba(0, 0, 0, 0.5)\",\r\n            }}\r\n          />\r\n          <CardContent>\r\n            <div className=\"mt-2 flex flex-wrap gap-2\">\r\n              {selectedTags.map((tag) => (\r\n                <Chip\r\n                  key={tag.id}\r\n                  tag={tag}\r\n                  removeCallback={() => onToggleTag(tag.id)}\r\n                />\r\n              ))}\r\n            </div>\r\n            <Grid container spacing={3}>\r\n              <Grid sx={{ marginTop: 3, width: \"100%\" }}>\r\n                <Autocomplete\r\n                  key={selectedIds.join(\"-\")}\r\n                  options={options}\r\n                  filterOptions={(availableOptions, state) =>\r\n                    availableOptions\r\n                      .filter(\r\n                        (option) =>\r\n                          !selectedIds.includes(option.value) &&\r\n                          option.label.toLowerCase().includes(state.inputValue.toLowerCase())\r\n                      )\r\n                      .slice(0, 3)\r\n                  }\r\n                  value={null}\r\n                  inputValue={inputValue}\r\n                  onInputChange={(event, newInputValue) => {\r\n                    if (event && event.type === \"change\") {\r\n                      setInputValue(newInputValue);\r\n                    }\r\n                  }}\r\n                  onChange={(event, newValue) => {\r\n                    if (newValue) {\r\n                      onToggleTag(newValue.value);\r\n                    }\r\n                    setInputValue(\"\");\r\n                  }}\r\n                  slots={{ popper: CustomPopper }}\r\n                  renderInput={(params) => <TextField {...params} label=\"Select Tags\" />}\r\n                />\r\n              </Grid>\r\n            </Grid>\r\n          </CardContent>\r\n        </Card>\r\n      </Grid>\r\n    </Grid>\r\n  );\r\n}\r\n\r\nconst CustomPopper = (props: PopperProps) => {\r\n  return (\r\n    <Popper\r\n      {...props}\r\n      modifiers={[\r\n        {\r\n          name: \"preventOverflow\",\r\n          options: { boundary: \"viewport\" },\r\n        },\r\n        {\r\n          name: \"offset\",\r\n          options: { offset: [0, -10] },\r\n        },\r\n      ]}\r\n      placement=\"top-start\"\r\n    />\r\n  );\r\n};\r\n"]}

package/dist/common.d.cts

@@ -10,6 +10,11 @@ interface IAutoResizingTextareaProps {
 }
 declare const AutoResizingTextarea: React__default.FC<IAutoResizingTextareaProps>;
 
+declare function Chip({ tag, removeCallback }: {
+    tag: Tag;
+    removeCallback?: (tagId: number) => void;
+}): react_jsx_runtime.JSX.Element;
+
 declare const NextGameCountdown: ({ nextGameTime }: {
     nextGameTime?: Date | string;
 }) => react_jsx_runtime.JSX.Element | null;
@@ -25,4 +30,4 @@ interface TagEditorProps {
 }
 declare function TagEditor({ title, selectedTags, possibleTags, onToggleTag, }: TagEditorProps): react_jsx_runtime.JSX.Element;
 
-export { AutoResizingTextarea, NextGameCountdown, TagEditor, type TagEditorProps, generateTagsDisplay, renderTagsFromIds };
+export { AutoResizingTextarea, Chip, NextGameCountdown, TagEditor, type TagEditorProps, generateTagsDisplay, renderTagsFromIds };

package/dist/common.d.ts

@@ -10,6 +10,11 @@ interface IAutoResizingTextareaProps {
 }
 declare const AutoResizingTextarea: React__default.FC<IAutoResizingTextareaProps>;
 
+declare function Chip({ tag, removeCallback }: {
+    tag: Tag;
+    removeCallback?: (tagId: number) => void;
+}): react_jsx_runtime.JSX.Element;
+
 declare const NextGameCountdown: ({ nextGameTime }: {
     nextGameTime?: Date | string;
 }) => react_jsx_runtime.JSX.Element | null;
@@ -25,4 +30,4 @@ interface TagEditorProps {
 }
 declare function TagEditor({ title, selectedTags, possibleTags, onToggleTag, }: TagEditorProps): react_jsx_runtime.JSX.Element;
 
-export { AutoResizingTextarea, NextGameCountdown, TagEditor, type TagEditorProps, generateTagsDisplay, renderTagsFromIds };
+export { AutoResizingTextarea, Chip, NextGameCountdown, TagEditor, type TagEditorProps, generateTagsDisplay, renderTagsFromIds };

package/dist/common.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { useEffect, useState, useMemo } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { Typography } from '@mui/material';
 import Autocomplete from '@mui/material/Autocomplete';
 import Card from '@mui/material/Card';
@@ -36,6 +36,38 @@ var AutoResizingTextarea = (props) => {
   );
 };
 var AutoResizingTextarea_default = AutoResizingTextarea;
+function Chip({ tag, removeCallback }) {
+  var _a;
+  const color = (_a = tag.color) != null ? _a : "#bfbcbb";
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "inline-block text-sm px-3 py-1 rounded-full border-2 font-outlined text-white m-0.5 font-stretch-105% font-sans",
+      style: {
+        borderColor: `color-mix(in srgb, ${color}, black 50%)`,
+        background: `linear-gradient(160deg, color-mix(in srgb, ${color}, white 10%) 0%, color-mix(in srgb, ${color}, black 60%) 100%)`,
+        textShadow: "black 1.5px 1px 1.5px",
+        filter: `drop-shadow(2px 2px 1.5px color-mix(in srgb, ${color}, black 80%))`
+      },
+      children: [
+        tag.label,
+        removeCallback && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => removeCallback(tag.id),
+            className: "ml-2 text-white hover:text-red-700 focus:outline-none pl-0.5 pr-1 cursor-pointer hover:bg-white rounded-full",
+            style: {
+              textShadow: "black 1px 1px 1px"
+            },
+            children: "X"
+          }
+        )
+      ]
+    },
+    tag.id
+  ) });
+}
 var NextGameCountdown = ({ nextGameTime }) => {
   const [timeLeft, setTimeLeft] = useState("");
   useEffect(() => {
@@ -67,22 +99,7 @@ var NextGameCountdown = ({ nextGameTime }) => {
   ] });
 };
 function generateTagsDisplay(tag) {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
-      style: {
-        marginTop: "6px",
-        marginRight: "6px",
-        marginBottom: "6px",
-        background: tag.color || "#bfbcbb",
-        color: "white",
-        textShadow: "black 0.2em 0.2em 0.4em"
-      },
-      children: tag.label
-    },
-    tag.id
-  );
+  return /* @__PURE__ */ jsx(Chip, { tag }, tag.id);
 }
 function renderTagsFromIds(ids, legalTags) {
   if (!ids || !legalTags || legalTags.length === 0) {
@@ -117,27 +134,11 @@ function TagEditor({
       }
     ),
     /* @__PURE__ */ jsxs(CardContent, { children: [
-      /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: selectedTags.map((tag) => /* @__PURE__ */ jsxs(
-        "span",
+      /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: selectedTags.map((tag) => /* @__PURE__ */ jsx(
+        Chip,
         {
-          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,
+          removeCallback: () => onToggleTag(tag.id)
         },
         tag.id
       )) }),
@@ -189,6 +190,6 @@ var CustomPopper = (props) => {
   );
 };
 
-export { AutoResizingTextarea_default as AutoResizingTextarea, NextGameCountdown, TagEditor, generateTagsDisplay, renderTagsFromIds };
+export { AutoResizingTextarea_default as AutoResizingTextarea, Chip, NextGameCountdown, TagEditor, generateTagsDisplay, renderTagsFromIds };
 //# sourceMappingURL=common.mjs.map
 //# sourceMappingURL=common.mjs.map

package/dist/common.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/shared/AutoResizingTextarea.tsx","../src/components/shared/NextGameCountdown.tsx","../src/components/shared/TagComponents.tsx","../src/components/shared/TagEditor.tsx"],"names":["useEffect","jsx","useState","jsxs"],"mappings":"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","file":"common.mjs","sourcesContent":["\"use client\"\r\n\r\nimport React, {Dispatch, SetStateAction, useEffect} from 'react';\r\n\r\ninterface IAutoResizingTextareaProps {\r\n    isInEditMode: boolean;\r\n    onChange: Dispatch<SetStateAction<string>>;\r\n    textareaRef: React.RefObject<HTMLTextAreaElement | null>;\r\n    value: string;\r\n}\r\n\r\nconst AutoResizingTextarea: React.FC<IAutoResizingTextareaProps> = (props: IAutoResizingTextareaProps) => {\r\n    const { isInEditMode, onChange, textareaRef, value } = props;\r\n\r\n    useEffect(() => {\r\n        if (isInEditMode && textareaRef.current) {\r\n            const textarea = textareaRef.current;\r\n\r\n            textarea.style.height = 'auto';\r\n            textarea.style.height = `${textarea.scrollHeight}px`;\r\n        }\r\n    }, [isInEditMode, textareaRef, value]); // Run effect when entering edit mode or value changes\r\n\r\n    return (\r\n        <textarea\r\n            ref={textareaRef}\r\n            value={value}\r\n            onChange={(e) => onChange(e.target.value)}\r\n            style={{\r\n                backgroundColor: '#fffbea',\r\n                overflow: 'hidden',\r\n                resize: 'none',\r\n                width: '100%'\r\n            }}\r\n        />\r\n    );\r\n}\r\n\r\nexport default AutoResizingTextarea;\r\n","\"use client\";\n\nimport React, { useState, useEffect } from 'react';\r\nimport { Typography } from '@mui/material';\r\n\r\nexport const NextGameCountdown = ({ nextGameTime }: { nextGameTime?: Date | string }) => {\r\n  const [timeLeft, setTimeLeft] = useState<string>('');\r\n\r\n  useEffect(() => {\r\n    if (!nextGameTime) return;\r\n\r\n    const timer = setInterval(() => {\r\n      const now = new Date().getTime();\r\n      const distance = new Date(nextGameTime).getTime() - now;\r\n\r\n      if (distance < 0) {\r\n        clearInterval(timer);\r\n        setTimeLeft('Started');\r\n        return;\r\n      }\r\n\r\n      const days = Math.floor(distance / (1000 * 60 * 60 * 24));\r\n      const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));\r\n      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));\r\n      const seconds = Math.floor((distance % (1000 * 60)) / 1000);\r\n\r\n      let timeString = '';\r\n      if (days > 0) timeString += `${days}d `;\r\n      if (hours > 0 || days > 0) timeString += `${hours}h `;\r\n      timeString += `${minutes}m ${seconds}s`;\r\n\r\n      setTimeLeft(timeString);\r\n    }, 1000);\r\n\r\n    return () => clearInterval(timer);\r\n  }, [nextGameTime]);\r\n\r\n  if (!nextGameTime) return null;\r\n\r\n  return (\r\n    <Typography variant=\"body2\" color=\"primary\" sx={{ fontWeight: 'bold' }}>\r\n      Next Game: {timeLeft}\r\n    </Typography>\r\n  );\r\n};\r\n","\"use client\";\n\nimport React from \"react\";\nimport type { Tag } from \"@/types/tag\";\n\nexport function generateTagsDisplay(tag: Tag) {\n    return (\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                marginTop:\"6px\",\n                marginRight: \"6px\",\n                marginBottom: \"6px\",\n                background: tag.color || '#bfbcbb',\n                color: \"white\",\n                textShadow: \"black 0.2em 0.2em 0.4em\"\n            }}\n        >\n            {tag.label}\n        </span>\n    )\n}\n\nexport function renderTagsFromIds(ids: number[] | undefined, legalTags: Tag[]) {\n    if (!ids || !legalTags || legalTags.length === 0) { return ( <></>) }\n    const validTags = ids\n        .map((id) => legalTags.find((tag) => tag.id === id))\n        .filter((tag): tag is Tag => Boolean(tag));\n\n    return validTags.map((tag) => generateTagsDisplay(tag));\n}\n","\"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"]}
+{"version":3,"sources":["../src/components/shared/AutoResizingTextarea.tsx","../src/components/shared/Chip.tsx","../src/components/shared/NextGameCountdown.tsx","../src/components/shared/TagComponents.tsx","../src/components/shared/TagEditor.tsx"],"names":["jsx","useEffect","jsxs","Fragment","useState"],"mappings":"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","file":"common.mjs","sourcesContent":["\"use client\"\r\n\r\nimport React, {Dispatch, SetStateAction, useEffect} from 'react';\r\n\r\ninterface IAutoResizingTextareaProps {\r\n    isInEditMode: boolean;\r\n    onChange: Dispatch<SetStateAction<string>>;\r\n    textareaRef: React.RefObject<HTMLTextAreaElement | null>;\r\n    value: string;\r\n}\r\n\r\nconst AutoResizingTextarea: React.FC<IAutoResizingTextareaProps> = (props: IAutoResizingTextareaProps) => {\r\n    const { isInEditMode, onChange, textareaRef, value } = props;\r\n\r\n    useEffect(() => {\r\n        if (isInEditMode && textareaRef.current) {\r\n            const textarea = textareaRef.current;\r\n\r\n            textarea.style.height = 'auto';\r\n            textarea.style.height = `${textarea.scrollHeight}px`;\r\n        }\r\n    }, [isInEditMode, textareaRef, value]); // Run effect when entering edit mode or value changes\r\n\r\n    return (\r\n        <textarea\r\n            ref={textareaRef}\r\n            value={value}\r\n            onChange={(e) => onChange(e.target.value)}\r\n            style={{\r\n                backgroundColor: '#fffbea',\r\n                overflow: 'hidden',\r\n                resize: 'none',\r\n                width: '100%'\r\n            }}\r\n        />\r\n    );\r\n}\r\n\r\nexport default AutoResizingTextarea;\r\n","import React from \"react\";\r\nimport {Tag} from \"@/types/tag\";\r\n\r\nexport default function Chip({ tag, removeCallback }: { tag: Tag, removeCallback?: (tagId: number) => void }) {\r\n  const color = tag.color ?? \"#bfbcbb\";\r\n  return (\r\n      <>\r\n      <span\r\n          key={tag.id}\r\n          className=\"inline-block text-sm px-3 py-1 rounded-full border-2 font-outlined text-white m-0.5 font-stretch-105% font-sans\"\r\n          style={{\r\n            borderColor: `color-mix(in srgb, ${color}, black 50%)`,\r\n            background: `linear-gradient(160deg, color-mix(in srgb, ${color}, white 10%) 0%, color-mix(in srgb, ${color}, black 60%) 100%)`,\r\n            textShadow: \"black 1.5px 1px 1.5px\",\r\n            filter: `drop-shadow(2px 2px 1.5px color-mix(in srgb, ${color}, black 80%))`\r\n          }}\r\n      >\r\n          {tag.label}\r\n          {removeCallback && (\r\n              <button\r\n                  type=\"button\"\r\n                  onClick={() => removeCallback(tag.id)}\r\n                  className=\"ml-2 text-white hover:text-red-700 focus:outline-none pl-0.5 pr-1 cursor-pointer hover:bg-white rounded-full\"\r\n                  style={{\r\n                    textShadow: \"black 1px 1px 1px\"\r\n                  }}\r\n              >\r\n                X\r\n              </button>\r\n          )}\r\n    </span>\r\n    </>\r\n  )\r\n\r\n}","\"use client\";\n\nimport React, { useState, useEffect } from 'react';\r\nimport { Typography } from '@mui/material';\r\n\r\nexport const NextGameCountdown = ({ nextGameTime }: { nextGameTime?: Date | string }) => {\r\n  const [timeLeft, setTimeLeft] = useState<string>('');\r\n\r\n  useEffect(() => {\r\n    if (!nextGameTime) return;\r\n\r\n    const timer = setInterval(() => {\r\n      const now = new Date().getTime();\r\n      const distance = new Date(nextGameTime).getTime() - now;\r\n\r\n      if (distance < 0) {\r\n        clearInterval(timer);\r\n        setTimeLeft('Started');\r\n        return;\r\n      }\r\n\r\n      const days = Math.floor(distance / (1000 * 60 * 60 * 24));\r\n      const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));\r\n      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));\r\n      const seconds = Math.floor((distance % (1000 * 60)) / 1000);\r\n\r\n      let timeString = '';\r\n      if (days > 0) timeString += `${days}d `;\r\n      if (hours > 0 || days > 0) timeString += `${hours}h `;\r\n      timeString += `${minutes}m ${seconds}s`;\r\n\r\n      setTimeLeft(timeString);\r\n    }, 1000);\r\n\r\n    return () => clearInterval(timer);\r\n  }, [nextGameTime]);\r\n\r\n  if (!nextGameTime) return null;\r\n\r\n  return (\r\n    <Typography variant=\"body2\" color=\"primary\" sx={{ fontWeight: 'bold' }}>\r\n      Next Game: {timeLeft}\r\n    </Typography>\r\n  );\r\n};\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport type { Tag } from \"@/types/tag\";\r\nimport Chip from \"@/components/shared/Chip\";\r\n\r\nexport function generateTagsDisplay(tag: Tag) {\r\n    return (\r\n        <Chip tag={tag} key={tag.id} />\r\n    )\r\n}\r\n\r\nexport function renderTagsFromIds(ids: number[] | undefined, legalTags: Tag[]) {\r\n    if (!ids || !legalTags || legalTags.length === 0) { return ( <></>) }\r\n    const validTags = ids\r\n        .map((id) => legalTags.find((tag) => tag.id === id))\r\n        .filter((tag): tag is Tag => Boolean(tag));\r\n\r\n    return validTags.map((tag) => generateTagsDisplay(tag));\r\n}\r\n","\"use client\";\r\n\r\nimport React, { useMemo, useState } from \"react\";\r\nimport Autocomplete from \"@mui/material/Autocomplete\";\r\nimport Card from \"@mui/material/Card\";\r\nimport CardContent from \"@mui/material/CardContent\";\r\nimport CardHeader from \"@mui/material/CardHeader\";\r\nimport Grid from \"@mui/material/Grid\";\r\nimport Popper, { PopperProps } from \"@mui/material/Popper\";\r\nimport TextField from \"@mui/material/TextField\";\r\nimport type { Tag } from \"@/types/tag\";\r\nimport Chip from \"@/components/shared/Chip\";\r\n\r\nexport interface TagEditorProps {\r\n  title?: string;\r\n  selectedTags: Tag[];\r\n  possibleTags: Tag[];\r\n  onToggleTag: (id: number) => void;\r\n}\r\n\r\nexport function TagEditor({\r\n  title = \"Tags\",\r\n  selectedTags,\r\n  possibleTags,\r\n  onToggleTag,\r\n}: TagEditorProps) {\r\n  const [inputValue, setInputValue] = useState(\"\");\r\n  const selectedIds = useMemo(() => selectedTags.map((tag) => tag.id), [selectedTags]);\r\n\r\n  const options = useMemo(\r\n    () => possibleTags.map((tag) => ({ value: tag.id, label: tag.label })),\r\n    [possibleTags]\r\n  );\r\n\r\n  return (\r\n    <Grid container>\r\n      <Grid size={{ xs: 12 }}>\r\n        <Card>\r\n          <CardHeader\r\n            title={title}\r\n            style={{\r\n              background: \"linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))\",\r\n              color: \"#FFFFFF\",\r\n              fontSize: \"1.5rem\",\r\n              textShadow: \"0px 3px 6px rgba(0, 0, 0, 0.5)\",\r\n            }}\r\n          />\r\n          <CardContent>\r\n            <div className=\"mt-2 flex flex-wrap gap-2\">\r\n              {selectedTags.map((tag) => (\r\n                <Chip\r\n                  key={tag.id}\r\n                  tag={tag}\r\n                  removeCallback={() => onToggleTag(tag.id)}\r\n                />\r\n              ))}\r\n            </div>\r\n            <Grid container spacing={3}>\r\n              <Grid sx={{ marginTop: 3, width: \"100%\" }}>\r\n                <Autocomplete\r\n                  key={selectedIds.join(\"-\")}\r\n                  options={options}\r\n                  filterOptions={(availableOptions, state) =>\r\n                    availableOptions\r\n                      .filter(\r\n                        (option) =>\r\n                          !selectedIds.includes(option.value) &&\r\n                          option.label.toLowerCase().includes(state.inputValue.toLowerCase())\r\n                      )\r\n                      .slice(0, 3)\r\n                  }\r\n                  value={null}\r\n                  inputValue={inputValue}\r\n                  onInputChange={(event, newInputValue) => {\r\n                    if (event && event.type === \"change\") {\r\n                      setInputValue(newInputValue);\r\n                    }\r\n                  }}\r\n                  onChange={(event, newValue) => {\r\n                    if (newValue) {\r\n                      onToggleTag(newValue.value);\r\n                    }\r\n                    setInputValue(\"\");\r\n                  }}\r\n                  slots={{ popper: CustomPopper }}\r\n                  renderInput={(params) => <TextField {...params} label=\"Select Tags\" />}\r\n                />\r\n              </Grid>\r\n            </Grid>\r\n          </CardContent>\r\n        </Card>\r\n      </Grid>\r\n    </Grid>\r\n  );\r\n}\r\n\r\nconst CustomPopper = (props: PopperProps) => {\r\n  return (\r\n    <Popper\r\n      {...props}\r\n      modifiers={[\r\n        {\r\n          name: \"preventOverflow\",\r\n          options: { boundary: \"viewport\" },\r\n        },\r\n        {\r\n          name: \"offset\",\r\n          options: { offset: [0, -10] },\r\n        },\r\n      ]}\r\n      placement=\"top-start\"\r\n    />\r\n  );\r\n};\r\n"]}

package/dist/index.cjs

@@ -125,23 +125,40 @@ function useEventEdit() {
   }
   return context;
 }
-function generateTagsDisplay(tag) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+function Chip({ tag, removeCallback }) {
+  var _a;
+  const color = (_a = tag.color) != null ? _a : "#bfbcbb";
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
-      className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
+      className: "inline-block text-sm px-3 py-1 rounded-full border-2 font-outlined text-white m-0.5 font-stretch-105% font-sans",
       style: {
-        marginTop: "6px",
-        marginRight: "6px",
-        marginBottom: "6px",
-        background: tag.color || "#bfbcbb",
-        color: "white",
-        textShadow: "black 0.2em 0.2em 0.4em"
+        borderColor: `color-mix(in srgb, ${color}, black 50%)`,
+        background: `linear-gradient(160deg, color-mix(in srgb, ${color}, white 10%) 0%, color-mix(in srgb, ${color}, black 60%) 100%)`,
+        textShadow: "black 1.5px 1px 1.5px",
+        filter: `drop-shadow(2px 2px 1.5px color-mix(in srgb, ${color}, black 80%))`
       },
-      children: tag.label
+      children: [
+        tag.label,
+        removeCallback && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => removeCallback(tag.id),
+            className: "ml-2 text-white hover:text-red-700 focus:outline-none pl-0.5 pr-1 cursor-pointer hover:bg-white rounded-full",
+            style: {
+              textShadow: "black 1px 1px 1px"
+            },
+            children: "X"
+          }
+        )
+      ]
     },
     tag.id
-  );
+  ) });
+}
+function generateTagsDisplay(tag) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Chip, { tag }, tag.id);
 }
 function renderTagsFromIds(ids, legalTags) {
   if (!ids || !legalTags || legalTags.length === 0) {
@@ -1594,24 +1611,7 @@ function PlayerTagsCard(props) {
   ] }) }) });
 }
 var renderLabels = (tags) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: tags.map((tag) => generateLabel(tag)) });
-};
-var generateLabel = (tag) => {
-  let color = "#bfbcbb";
-  if (tag.color) color = tag.color;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
-      style: {
-        background: color,
-        color: "white",
-        textShadow: "black 0.2em 0.2em 0.4em"
-      },
-      children: tag.label
-    },
-    tag.id
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: tags.map((tag) => /* @__PURE__ */ jsxRuntime.jsx(Chip, { tag }, tag.id)) });
 };
 function TagEditor({
   title = "Tags",
@@ -1639,27 +1639,11 @@ function TagEditor({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs(CardContent10__default.default, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: selectedTags.map((tag) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "span",
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: selectedTags.map((tag) => /* @__PURE__ */ jsxRuntime.jsx(
+        Chip,
         {
-          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,
+          removeCallback: () => onToggleTag(tag.id)
         },
         tag.id
       )) }),
@@ -2565,6 +2549,7 @@ var TablePageLayout_default = TablePageLayout;
 exports.AutoResizingTextarea = AutoResizingTextarea_default;
 exports.BaseSearchResultCard = BaseSearchResultCard_default;
 exports.CANDIDATE_TIMEZONES = CANDIDATE_TIMEZONES;
+exports.Chip = Chip;
 exports.DMHighlightsCard = DMHighlightsCard;
 exports.EventBanner = EventBanner;
 exports.EventBannerEdit = EventBannerEdit;