@mbpockets/shared-ui 0.1.18

package/dist/common.cjs

@@ -0,0 +1,210 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var material = require('@mui/material');
+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');
+
+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/AutoResizingTextarea.tsx
+var AutoResizingTextarea = (props) => {
+  const { isInEditMode, onChange, textareaRef, value } = props;
+  react.useEffect(() => {
+    if (isInEditMode && textareaRef.current) {
+      const textarea = textareaRef.current;
+      textarea.style.height = "auto";
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+  }, [isInEditMode, textareaRef, value]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "textarea",
+    {
+      ref: textareaRef,
+      value,
+      onChange: (e) => onChange(e.target.value),
+      style: {
+        backgroundColor: "#fffbea",
+        overflow: "hidden",
+        resize: "none",
+        width: "100%"
+      }
+    }
+  );
+};
+var AutoResizingTextarea_default = AutoResizingTextarea;
+var NextGameCountdown = ({ nextGameTime }) => {
+  const [timeLeft, setTimeLeft] = react.useState("");
+  react.useEffect(() => {
+    if (!nextGameTime) return;
+    const timer = setInterval(() => {
+      const now = (/* @__PURE__ */ new Date()).getTime();
+      const distance = new Date(nextGameTime).getTime() - now;
+      if (distance < 0) {
+        clearInterval(timer);
+        setTimeLeft("Started");
+        return;
+      }
+      const days = Math.floor(distance / (1e3 * 60 * 60 * 24));
+      const hours = Math.floor(distance % (1e3 * 60 * 60 * 24) / (1e3 * 60 * 60));
+      const minutes = Math.floor(distance % (1e3 * 60 * 60) / (1e3 * 60));
+      const seconds = Math.floor(distance % (1e3 * 60) / 1e3);
+      let timeString = "";
+      if (days > 0) timeString += `${days}d `;
+      if (hours > 0 || days > 0) timeString += `${hours}h `;
+      timeString += `${minutes}m ${seconds}s`;
+      setTimeLeft(timeString);
+    }, 1e3);
+    return () => clearInterval(timer);
+  }, [nextGameTime]);
+  if (!nextGameTime) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "body2", color: "primary", sx: { fontWeight: "bold" }, children: [
+    "Next Game: ",
+    timeLeft
+  ] });
+};
+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
+  );
+}
+function renderTagsFromIds(ids, legalTags) {
+  if (!ids || !legalTags || legalTags.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  }
+  const validTags = ids.map((id) => legalTags.find((tag) => tag.id === id)).filter((tag) => Boolean(tag));
+  return validTags.map((tag) => generateTagsDisplay(tag));
+}
+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"
+    }
+  );
+};
+
+exports.AutoResizingTextarea = AutoResizingTextarea_default;
+exports.NextGameCountdown = NextGameCountdown;
+exports.TagEditor = TagEditor;
+exports.generateTagsDisplay = generateTagsDisplay;
+exports.renderTagsFromIds = renderTagsFromIds;
+//# sourceMappingURL=common.cjs.map
+//# sourceMappingURL=common.cjs.map

package/dist/common.cjs.map

@@ -0,0 +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":"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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","\"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"]}

package/dist/common.css

@@ -0,0 +1,49 @@
+/* src/components/shared/Modal/style.css */
+.modal-container {
+  margin: auto;
+  color: #000000;
+  top: 20px;
+  flex-direction: column;
+  width: fit-content;
+  height: fit-content;
+  background-color: lightgrey;
+  display: flex;
+}
+.modal-overlay {
+  position: fixed;
+  margin: auto;
+  color: #000000;
+  top: 20px;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+.modal-content {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+}
+.modal-content button {
+  border: outset 1px;
+  border-radius: 0;
+  color: black;
+  cursor: pointer;
+  margin: auto;
+  padding: 8px 48px;
+}
+.modal-content button:focus {
+  outline: 1px dotted #333;
+  outline-offset: -4px;
+}
+.modal-control-strip {
+  align-content: end;
+  display: flex;
+  justify-content: flex-end;
+  padding: 5px;
+}
+/*# sourceMappingURL=common.css.map */

package/dist/common.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/shared/Modal/style.css"],"sourcesContent":["\r\n    .modal-container {\r\n        margin: auto;\r\n        color: #000000;\r\n        top: 20px;\r\n        flex-direction: column;\r\n        width: fit-content;\r\n        height: fit-content;\r\n        background-color: lightgrey;\r\n        display: flex;\r\n    }\r\n\r\n    .modal-overlay {\r\n        position: fixed;\r\n        margin: auto;\r\n        color: #000000;\r\n        top: 20px;\r\n        flex-direction: column;\r\n        width: 100%;\r\n        height: 100%;\r\n        background-color: rgba(0, 0, 0, 0.5);\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        z-index: 1000;\r\n    }\r\n    .modal-content {\r\n        padding: 20px;\r\n        display: flex;\r\n        flex-direction: column;\r\n    }\r\n    .modal-content button {\r\n            border: outset 1px;\r\n            border-radius: 0;\r\n            color: black;\r\n            cursor: pointer;\r\n            margin: auto;\r\n            padding: 8px 48px;\r\n        }\r\n    .modal-content button:focus {\r\n            outline: 1px dotted #333;\r\n            outline-offset: -4px;\r\n    }\r\n    .modal-control-strip {\r\n        align-content: end;\r\n        display: flex;\r\n        justify-content: flex-end;\r\n        padding: 5px;\r\n    }"],"mappings":";AACI,CAAC;AACG,UAAQ;AACR,SAAO;AACP,OAAK;AACL,kBAAgB;AAChB,SAAO;AACP,UAAQ;AACR,oBAAkB;AAClB,WAAS;AACb;AAEA,CAAC;AACG,YAAU;AACV,UAAQ;AACR,SAAO;AACP,OAAK;AACL,kBAAgB;AAChB,SAAO;AACP,UAAQ;AACR,oBAAkB,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAChC,WAAS;AACT,mBAAiB;AACjB,eAAa;AACb,WAAS;AACb;AACA,CAAC;AACG,WAAS;AACT,WAAS;AACT,kBAAgB;AACpB;AACA,CALC,cAKc;AACP,UAAQ,OAAO;AACf,iBAAe;AACf,SAAO;AACP,UAAQ;AACR,UAAQ;AACR,WAAS,IAAI;AACjB;AACJ,CAbC,cAac,MAAM;AACb,WAAS,IAAI,OAAO;AACpB,kBAAgB;AACxB;AACA,CAAC;AACG,iBAAe;AACf,WAAS;AACT,mBAAiB;AACjB,WAAS;AACb;","names":[]}

package/dist/common.d.cts

@@ -0,0 +1,28 @@
+import React__default, { Dispatch, SetStateAction } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Tag } from './types/tag';
+
+interface IAutoResizingTextareaProps {
+    isInEditMode: boolean;
+    onChange: Dispatch<SetStateAction<string>>;
+    textareaRef: React__default.RefObject<HTMLTextAreaElement | null>;
+    value: string;
+}
+declare const AutoResizingTextarea: React__default.FC<IAutoResizingTextareaProps>;
+
+declare const NextGameCountdown: ({ nextGameTime }: {
+    nextGameTime?: Date | string;
+}) => react_jsx_runtime.JSX.Element | null;
+
+declare function generateTagsDisplay(tag: Tag): react_jsx_runtime.JSX.Element;
+declare function renderTagsFromIds(ids: number[] | undefined, legalTags: Tag[]): react_jsx_runtime.JSX.Element | react_jsx_runtime.JSX.Element[];
+
+interface TagEditorProps {
+    title?: string;
+    selectedTags: Tag[];
+    possibleTags: Tag[];
+    onToggleTag: (id: number) => void;
+}
+declare function TagEditor({ title, selectedTags, possibleTags, onToggleTag, }: TagEditorProps): react_jsx_runtime.JSX.Element;
+
+export { AutoResizingTextarea, NextGameCountdown, TagEditor, type TagEditorProps, generateTagsDisplay, renderTagsFromIds };

package/dist/common.d.ts

@@ -0,0 +1,28 @@
+import React__default, { Dispatch, SetStateAction } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Tag } from './types/tag';
+
+interface IAutoResizingTextareaProps {
+    isInEditMode: boolean;
+    onChange: Dispatch<SetStateAction<string>>;
+    textareaRef: React__default.RefObject<HTMLTextAreaElement | null>;
+    value: string;
+}
+declare const AutoResizingTextarea: React__default.FC<IAutoResizingTextareaProps>;
+
+declare const NextGameCountdown: ({ nextGameTime }: {
+    nextGameTime?: Date | string;
+}) => react_jsx_runtime.JSX.Element | null;
+
+declare function generateTagsDisplay(tag: Tag): react_jsx_runtime.JSX.Element;
+declare function renderTagsFromIds(ids: number[] | undefined, legalTags: Tag[]): react_jsx_runtime.JSX.Element | react_jsx_runtime.JSX.Element[];
+
+interface TagEditorProps {
+    title?: string;
+    selectedTags: Tag[];
+    possibleTags: Tag[];
+    onToggleTag: (id: number) => void;
+}
+declare function TagEditor({ title, selectedTags, possibleTags, onToggleTag, }: TagEditorProps): react_jsx_runtime.JSX.Element;
+
+export { AutoResizingTextarea, NextGameCountdown, TagEditor, type TagEditorProps, generateTagsDisplay, renderTagsFromIds };

package/dist/common.mjs

@@ -0,0 +1,194 @@
+"use client";
+import { useEffect, useState, useMemo } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Typography } from '@mui/material';
+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';
+
+// src/components/shared/AutoResizingTextarea.tsx
+var AutoResizingTextarea = (props) => {
+  const { isInEditMode, onChange, textareaRef, value } = props;
+  useEffect(() => {
+    if (isInEditMode && textareaRef.current) {
+      const textarea = textareaRef.current;
+      textarea.style.height = "auto";
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+  }, [isInEditMode, textareaRef, value]);
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ref: textareaRef,
+      value,
+      onChange: (e) => onChange(e.target.value),
+      style: {
+        backgroundColor: "#fffbea",
+        overflow: "hidden",
+        resize: "none",
+        width: "100%"
+      }
+    }
+  );
+};
+var AutoResizingTextarea_default = AutoResizingTextarea;
+var NextGameCountdown = ({ nextGameTime }) => {
+  const [timeLeft, setTimeLeft] = useState("");
+  useEffect(() => {
+    if (!nextGameTime) return;
+    const timer = setInterval(() => {
+      const now = (/* @__PURE__ */ new Date()).getTime();
+      const distance = new Date(nextGameTime).getTime() - now;
+      if (distance < 0) {
+        clearInterval(timer);
+        setTimeLeft("Started");
+        return;
+      }
+      const days = Math.floor(distance / (1e3 * 60 * 60 * 24));
+      const hours = Math.floor(distance % (1e3 * 60 * 60 * 24) / (1e3 * 60 * 60));
+      const minutes = Math.floor(distance % (1e3 * 60 * 60) / (1e3 * 60));
+      const seconds = Math.floor(distance % (1e3 * 60) / 1e3);
+      let timeString = "";
+      if (days > 0) timeString += `${days}d `;
+      if (hours > 0 || days > 0) timeString += `${hours}h `;
+      timeString += `${minutes}m ${seconds}s`;
+      setTimeLeft(timeString);
+    }, 1e3);
+    return () => clearInterval(timer);
+  }, [nextGameTime]);
+  if (!nextGameTime) return null;
+  return /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "primary", sx: { fontWeight: "bold" }, children: [
+    "Next Game: ",
+    timeLeft
+  ] });
+};
+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
+  );
+}
+function renderTagsFromIds(ids, legalTags) {
+  if (!ids || !legalTags || legalTags.length === 0) {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
+  const validTags = ids.map((id) => legalTags.find((tag) => tag.id === id)).filter((tag) => Boolean(tag));
+  return validTags.map((tag) => generateTagsDisplay(tag));
+}
+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"
+    }
+  );
+};
+
+export { AutoResizingTextarea_default as AutoResizingTextarea, NextGameCountdown, TagEditor, generateTagsDisplay, renderTagsFromIds };
+//# sourceMappingURL=common.mjs.map
+//# sourceMappingURL=common.mjs.map

package/dist/common.mjs.map

@@ -0,0 +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":";;;;;;;;;;;;AAWA,IAAM,oBAAA,GAA6D,CAAC,KAAA,KAAsC;AACtG,EAAA,MAAM,EAAE,YAAA,EAAc,QAAA,EAAU,WAAA,EAAa,OAAM,GAAI,KAAA;AAEvD,EAAA,SAAA,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,uBACI,GAAA;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,GAAI,SAAiB,EAAE,CAAA;AAEnD,EAAAA,UAAU,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,uBACE,IAAA,CAAC,UAAA,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,uBACIC,GAAAA;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,IAAA,QAAA,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,GAAIC,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,uBACED,GAAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAS,MACb,QAAA,kBAAAA,GAAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAM,EAAE,EAAA,EAAI,EAAA,EAAG,EACnB,QAAA,kBAAAE,KAAC,IAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAF,GAAAA;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,oBACAE,KAAC,WAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAAF,GAAAA,CAAC,SAAI,SAAA,EAAU,2BAAA,EACZ,uBAAa,GAAA,CAAI,CAAC,wBACjBE,IAAAA;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,GAAAA;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,GAAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAS,IAAA,EAAC,SAAS,CAAA,EACvB,QAAA,kBAAAA,GAAAA,CAAC,IAAA,EAAA,EAAK,IAAI,EAAE,SAAA,EAAW,GAAG,KAAA,EAAO,MAAA,IAC/B,QAAA,kBAAAA,GAAAA;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,qBAAWA,IAAC,SAAA,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,uBACEA,GAAAA;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","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"]}

package/dist/index-D7WHhl3Q.d.ts

@@ -0,0 +1,64 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { EventDB, EventEditContextValue } from './types/event';
+import { ReactNode } from 'react';
+
+type EventBannerProps = {
+    attendees: number;
+    numGames: number;
+    bannerUrl?: EventDB["bannerUrl"];
+    links?: EventDB["links"];
+    title?: EventDB["title"];
+    eventTag?: EventDB["eventTag"];
+    bannerColor?: string;
+};
+type EventBannerEditPayload = {
+    bannerUrl: EventDB["bannerUrl"];
+    bannerColor?: EventDB["bannerColor"];
+    links: EventDB["links"];
+    title: EventDB["title"];
+    eventTag: EventDB["eventTag"];
+};
+declare function EventBanner(props: EventBannerProps): react_jsx_runtime.JSX.Element | null;
+
+type EventBannerEditProps = {
+    initialValue: EventBannerEditPayload;
+    onCancel: () => void;
+    onSave: (payload: Partial<EventBannerEditPayload>) => Promise<void> | void;
+};
+declare function EventBannerEdit({ initialValue, onCancel, onSave, }: EventBannerEditProps): react_jsx_runtime.JSX.Element;
+
+type EventBasicInfoEditPayload = {
+    description: string;
+    startingDate?: string;
+    endingDate?: string;
+    date: string;
+    timezone: string;
+};
+type EventBasicInfoEditProps = {
+    initialValue: EventBasicInfoEditPayload;
+    onCancel: () => void;
+    onSave: (payload: Partial<EventBasicInfoEditPayload>) => Promise<void> | void;
+};
+declare function EventBasicInfoEdit({ initialValue, onCancel, onSave, }: EventBasicInfoEditProps): react_jsx_runtime.JSX.Element;
+
+type ExtendedEventEditContextValue = EventEditContextValue & {
+    event: EventDB | null;
+};
+/**
+ * Provider props
+ */
+type EventEditProviderProps = {
+    value?: Partial<EventEditContextValue>;
+    initialEvent: EventDB;
+    children: ReactNode;
+};
+/**
+ * Provider component
+ */
+declare function EventEditProvider({ value, initialEvent, children, }: EventEditProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook for consuming context
+ */
+declare function useEventEdit(): ExtendedEventEditContextValue;
+
+export { EventBanner as E, EventBannerEdit as a, type EventBannerEditPayload as b, type EventBannerProps as c, EventBasicInfoEdit as d, type EventBasicInfoEditPayload as e, EventEditProvider as f, useEventEdit as u };