@gregcm999/strapi-plugin-tagsinput 2.0.3-beta.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Sumita Canopas
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,76 @@
+<p align="center"><a href="https://canopas.com/contact"><img src="./assets/banner.png"></a></p>
+
+<h1><strong>Tagsinput plugin for strapi with suggestions</strong></h1>
+
+<h3>🚀<strong>Strapi 5 supported from <a href="https://github.com/canopas/strapi-plugin-tagsinput/releases/tag/2.0.2">2.0.2</a> </strong>🚀</h3>
+
+This plugin is used to add tagsinput in your strapi admin panel.
+Read more about it at [tagsinput guidence](https://blog.canopas.com/the-simple-guidance-how-to-add-tagsinput-customfield-plugin-in-strapi-b5d2b5af7c3b).
+
+<img src="./assets/demo.png">
+
+## How to Install
+
+Using npm,
+
+```
+npm i strapi-plugin-tagsinput
+```
+
+Using yarn,
+
+```
+yarn add strapi-plugin-tagsinput
+```
+
+## How to use
+
+After installation, you can add tagsinput as a custom field.
+
+#### Suggestions for tag
+
+While adding tagsInput, you will see the `API URL` field.
+
+If you want to use REST API for suggestions, then add your API url in this field.
+
+**Notes:**
+
+- If the API domain is different, then a full API URL is required. i.e. `http://localhost:1337/api/tags?fields[0]=name` (Make sure API CORS are enabled for your strapi domain in this case).
+- Otherwise, add only the path of API i.e `/api/tags?fields[0]=name`
+- You need to add custom logic for adding created tags in `Tags` collection.
+
+## Showcase
+
+How to use tagsinput?
+
+<img src="./assets/showcase.gif">
+
+## Issues
+
+If you face any issues, feel free to submit them with detailed information.
+
+## Contribution
+
+The Canopas team enthusiastically welcomes contributions and project participation! There are a bunch of things you can do if you want to contribute! The [Contributor Guide](CONTRIBUTING.md) has all the information you need for everything from reporting bugs to contributing entire new features. Please don't hesitate to jump in if you'd like to, or even ask us questions if something isn't clear.
+
+## Show your support ⭐️
+
+Add a star if this project helped you.
+
+## Credits
+
+This repository is owned and maintained by the [Canopas team](https://canopas.com/). If you are interested in building web apps, plugins or designing products, please let us know. We'd love to hear from you!
+
+<a href="https://canopas.com/contact"><img src="./assets/cta.png" width=300></a>
+
+## Licence
+
+This repository is licenced under [MIT](https://github.com/canopas/strapi-plugin-tagsinput/blob/master/LICENSE).
+
+## Custom Fix Purpose
+
+- **Plugin Tags Input**
+  - Fork from `strapi-plugin-tagsinput` to `gregcm999/strapi-plugin-tagsinput`
+  - **Improve theme handling**: Added system preference support for dark/light mode ([PR #45](https://github.com/canopas/strapi-plugin-tagsinput/pull/45))
+  - **Fix deletion error**: Resolved error when removing the last tag from the input field ([PR #44](https://github.com/canopas/strapi-plugin-tagsinput/pull/44))
+  - **Better field labels**: Updated custom tag fields to use their specific labels instead of a generic "Tags" label ([PR #42](https://github.com/canopas/strapi-plugin-tagsinput/pull/42))

package/dist/_chunks/Input-DSV3HDg_.mjs

@@ -0,0 +1,329 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import axios from "axios";
+import { Field, Flex } from "@strapi/design-system";
+import { useIntl } from "react-intl";
+import TagsInput from "react-tagsinput";
+import Autosuggest from "react-autosuggest";
+import { createGlobalStyle, css } from "styled-components";
+const light = css`
+  :root {
+    --primary: #7b79ff;
+    --secondary: rgb(255, 255, 255);
+    --text: #32324d;
+    --input-background: #ffffff;
+    --input-border: #dcdce4;
+    --tag-background: #f0f0ff;
+    --tag-text: #4945ff;
+    --suggestion-background: #ffffff;
+    --suggestion-hover: #f6f6f9;
+  }
+`;
+const dark = css`
+  :root {
+    --primary: #7b79ff;
+    --secondary: rgb(33, 33, 52);
+    --text: #ffffff;
+    --input-background: #181826;
+    --input-border: #4a4a6a;
+    --tag-background: #7b79ff;
+    --tag-text: #ffffff;
+    --suggestion-background: #181826;
+    --suggestion-hover: #212134;
+  }
+`;
+const styles = css`
+  .react-tagsinput {
+    width: 100%;
+    border: 1px solid var(--input-border);
+    border-radius: 4px;
+    overflow: hidden;
+    padding-left: 5px;
+    padding-top: 5px;
+  }
+
+  .react-tagsinput--focused {
+    outline: 3px solid var(--primary);
+  }
+
+  .react-tagsinput-tag {
+    background-color: var(--tag-background);
+    border-radius: 2px;
+    border: 1px solid var(--tag-background);
+    color: var(--tag-text);
+    display: inline-block;
+    font-family: sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    margin-bottom: 5px;
+    margin-right: 5px;
+    padding: 5px;
+  }
+
+  .react-tagsinput-remove {
+    cursor: pointer;
+    font-weight: bold;
+  }
+
+  .react-tagsinput-tag a::before {
+    content: " ×";
+  }
+
+  .react-tagsinput-input {
+    background: transparent;
+    border: 0;
+    color: var(--text);
+    font-family: sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    margin-bottom: 6px;
+    margin-top: 1px;
+    outline: none;
+    padding: 5px;
+    width: 100%;
+  }
+
+  .react-tagsinput > span {
+    display: flex;
+    flex-flow: wrap;
+  }
+
+  .react-autosuggest__container {
+    display: flex;
+    flex-direction: column;
+    flex: auto;
+  }
+
+  .react-autosuggest__suggestions-container {
+    position: absolute;
+    z-index: 200;
+    width: 280px;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    background-color: var(--suggestion-background);
+  }
+
+  .react-autosuggest__suggestions-container--open {
+    border: 1px solid var(--input-border);
+  }
+
+  .react-autosuggest__suggestion {
+    cursor: pointer;
+    padding: 10px 20px;
+  }
+
+  .react-autosuggest__suggestion > span {
+    font-size: 13px;
+    font-weight: 400;
+  }
+
+  .react-autosuggest__suggestion--highlighted,
+  .react-autosuggest__suggestion--focused {
+    background-color: var(--suggestion-hover);
+  }
+`;
+const getStyling = (theme) => {
+  let themeStyle = light;
+  switch (theme) {
+    case "dark":
+      themeStyle = dark;
+      break;
+    default:
+      themeStyle = light;
+  }
+  return createGlobalStyle`
+    ${themeStyle}
+    ${styles}
+  `;
+};
+const ThemeStyle = getStyling(getCurrentTheme());
+const Tags = ({
+  attribute,
+  description,
+  error,
+  label,
+  labelAction,
+  name,
+  onChange,
+  required,
+  value
+}) => {
+  const { formatMessage } = useIntl();
+  const apiUrl = attribute?.options?.apiUrl || "";
+  const attrName = apiUrl.slice(apiUrl.lastIndexOf("=") + 1) || "name";
+  const inputEle = useRef(null);
+  const [tags, setTags] = useState(() => {
+    try {
+      const values = typeof value === "string" ? JSON.parse(value) : value;
+      return Array.isArray(values) ? values.map((v) => v[attrName] || v.name || v) : [];
+    } catch (e) {
+      return [];
+    }
+  });
+  const [suggestions, setSuggestions] = useState([]);
+  useEffect(() => {
+    const suggestionsContainer = document.querySelector(
+      ".react-autosuggest__suggestions-container"
+    );
+    if (suggestionsContainer && inputEle.current) {
+      suggestionsContainer.style.top = `${inputEle.current.offsetHeight + 5}px`;
+    }
+    const handleClickOutside = (event) => {
+      const tagsInput = document.querySelector(".react-tagsinput");
+      if (tagsInput) {
+        tagsInput.classList.toggle(
+          "react-tagsinput--focused",
+          inputEle.current?.contains(event.target)
+        );
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const handleTagsChange = async (newTags) => {
+    const lastTag = newTags[newTags.length - 1];
+    const suggestionsArray = suggestions.data || [];
+    const existingTag = suggestionsArray.find(
+      (s) => s[attrName]?.toLowerCase() === lastTag?.toLowerCase()
+    );
+    if (lastTag && !existingTag) {
+      if (apiUrl) {
+        try {
+          const response = await axios.post(apiUrl, {
+            data: {
+              [attrName]: lastTag
+            }
+          });
+          setSuggestions((prevSuggestions) => {
+            const newSuggestionsData = [...prevSuggestions.data || [], response.data.data];
+            return { ...prevSuggestions, data: newSuggestionsData };
+          });
+          newTags[newTags.length - 1] = response.data.data[attrName];
+        } catch (error2) {
+          console.error("Error creating new tag:", error2);
+        }
+      } else {
+        setSuggestions((prevSuggestions) => {
+          const newSuggestion = { id: Date.now(), [attrName]: lastTag };
+          const newSuggestionsData = [...prevSuggestions.data || [], newSuggestion];
+          return { ...prevSuggestions, data: newSuggestionsData };
+        });
+      }
+    }
+    setTags(newTags);
+    const value2 = JSON.stringify(newTags.map((tag) => ({ [attrName]: tag })));
+    onChange({
+      target: {
+        name,
+        value: value2,
+        type: attribute.type
+      }
+    });
+  };
+  const getSuggestions = async () => {
+    if (!apiUrl) return;
+    try {
+      const res = await axios.get(apiUrl);
+      setSuggestions(res.data);
+    } catch (err) {
+      setSuggestions({ data: [] });
+    }
+  };
+  const autocompleteRenderInput = (props) => {
+    const handleOnChange = (e, { newValue, method }) => {
+      if (method === "enter") {
+        e.preventDefault();
+      } else {
+        props.onChange(e);
+      }
+    };
+    const inputValue = props.value && props.value.trim() || "";
+    const inputLength = inputValue.length;
+    let s = suggestions.data || [];
+    if (s.length <= 0) {
+      getSuggestions();
+    }
+    if (inputLength > 0) {
+      s = s.filter((state) => {
+        const suggestionName = state[attrName] || "";
+        return suggestionName.toLowerCase().slice(0, inputLength) === inputValue;
+      }).map((state) => ({
+        id: state.id,
+        [attrName]: state[attrName] || ""
+      }));
+    }
+    return /* @__PURE__ */ jsx(
+      Autosuggest,
+      {
+        ref: props.ref,
+        suggestions: s,
+        shouldRenderSuggestions: (value2) => value2 && value2.trim().length > 0,
+        getSuggestionValue: (s2) => s2[attrName],
+        renderSuggestion: (s2) => /* @__PURE__ */ jsx("span", { children: s2[attrName] }),
+        inputProps: { ...props, onChange: handleOnChange },
+        onSuggestionSelected: (_, { suggestion }) => props.addTag(suggestion[attrName]),
+        onSuggestionsFetchRequested: () => {
+        }
+      }
+    );
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    Field.Root,
+    {
+      name,
+      id: name,
+      error,
+      hint: description && formatMessage({ id: description }),
+      required,
+      children: /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          direction: "column",
+          alignItems: "stretch",
+          gap: 1,
+          style: { position: "relative" },
+          ref: inputEle,
+          children: [
+            label && /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: formatMessage({ id: label, defaultMessage: label }) }),
+            /* @__PURE__ */ jsx(ThemeStyle, {}),
+            /* @__PURE__ */ jsx(Flex, { direction: "column", children: /* @__PURE__ */ jsx(
+              TagsInput,
+              {
+                value: tags,
+                onChange: handleTagsChange,
+                onlyUnique: true,
+                renderInput: autocompleteRenderInput
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Field.Hint, {}),
+            /* @__PURE__ */ jsx(Field.Error, {})
+          ]
+        }
+      )
+    }
+  ) });
+};
+Tags.defaultProps = {
+  description: null,
+  disabled: false,
+  error: null,
+  labelAction: null,
+  required: false,
+  value: ""
+};
+Tags.propTypes = {
+  label: PropTypes.object.isRequired,
+  onChange: PropTypes.func.isRequired,
+  attribute: PropTypes.object.isRequired,
+  name: PropTypes.string.isRequired,
+  description: PropTypes.object,
+  error: PropTypes.string,
+  labelAction: PropTypes.object,
+  required: PropTypes.bool,
+  value: PropTypes.string
+};
+export {
+  Tags as default
+};

package/dist/_chunks/Input-jl4WBtpd.js

@@ -0,0 +1,334 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const PropTypes = require("prop-types");
+const axios = require("axios");
+const designSystem = require("@strapi/design-system");
+const reactIntl = require("react-intl");
+const TagsInput = require("react-tagsinput");
+const Autosuggest = require("react-autosuggest");
+const styledComponents = require("styled-components");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const PropTypes__default = /* @__PURE__ */ _interopDefault(PropTypes);
+const axios__default = /* @__PURE__ */ _interopDefault(axios);
+const TagsInput__default = /* @__PURE__ */ _interopDefault(TagsInput);
+const Autosuggest__default = /* @__PURE__ */ _interopDefault(Autosuggest);
+const light = styledComponents.css`
+  :root {
+    --primary: #7b79ff;
+    --secondary: rgb(255, 255, 255);
+    --text: #32324d;
+    --input-background: #ffffff;
+    --input-border: #dcdce4;
+    --tag-background: #f0f0ff;
+    --tag-text: #4945ff;
+    --suggestion-background: #ffffff;
+    --suggestion-hover: #f6f6f9;
+  }
+`;
+const dark = styledComponents.css`
+  :root {
+    --primary: #7b79ff;
+    --secondary: rgb(33, 33, 52);
+    --text: #ffffff;
+    --input-background: #181826;
+    --input-border: #4a4a6a;
+    --tag-background: #7b79ff;
+    --tag-text: #ffffff;
+    --suggestion-background: #181826;
+    --suggestion-hover: #212134;
+  }
+`;
+const styles = styledComponents.css`
+  .react-tagsinput {
+    width: 100%;
+    border: 1px solid var(--input-border);
+    border-radius: 4px;
+    overflow: hidden;
+    padding-left: 5px;
+    padding-top: 5px;
+  }
+
+  .react-tagsinput--focused {
+    outline: 3px solid var(--primary);
+  }
+
+  .react-tagsinput-tag {
+    background-color: var(--tag-background);
+    border-radius: 2px;
+    border: 1px solid var(--tag-background);
+    color: var(--tag-text);
+    display: inline-block;
+    font-family: sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    margin-bottom: 5px;
+    margin-right: 5px;
+    padding: 5px;
+  }
+
+  .react-tagsinput-remove {
+    cursor: pointer;
+    font-weight: bold;
+  }
+
+  .react-tagsinput-tag a::before {
+    content: " ×";
+  }
+
+  .react-tagsinput-input {
+    background: transparent;
+    border: 0;
+    color: var(--text);
+    font-family: sans-serif;
+    font-size: 13px;
+    font-weight: 400;
+    margin-bottom: 6px;
+    margin-top: 1px;
+    outline: none;
+    padding: 5px;
+    width: 100%;
+  }
+
+  .react-tagsinput > span {
+    display: flex;
+    flex-flow: wrap;
+  }
+
+  .react-autosuggest__container {
+    display: flex;
+    flex-direction: column;
+    flex: auto;
+  }
+
+  .react-autosuggest__suggestions-container {
+    position: absolute;
+    z-index: 200;
+    width: 280px;
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    background-color: var(--suggestion-background);
+  }
+
+  .react-autosuggest__suggestions-container--open {
+    border: 1px solid var(--input-border);
+  }
+
+  .react-autosuggest__suggestion {
+    cursor: pointer;
+    padding: 10px 20px;
+  }
+
+  .react-autosuggest__suggestion > span {
+    font-size: 13px;
+    font-weight: 400;
+  }
+
+  .react-autosuggest__suggestion--highlighted,
+  .react-autosuggest__suggestion--focused {
+    background-color: var(--suggestion-hover);
+  }
+`;
+const getStyling = (theme) => {
+  let themeStyle = light;
+  switch (theme) {
+    case "dark":
+      themeStyle = dark;
+      break;
+    default:
+      themeStyle = light;
+  }
+  return styledComponents.createGlobalStyle`
+    ${themeStyle}
+    ${styles}
+  `;
+};
+const ThemeStyle = getStyling(getCurrentTheme());
+const Tags = ({
+  attribute,
+  description,
+  error,
+  label,
+  labelAction,
+  name,
+  onChange,
+  required,
+  value
+}) => {
+  const { formatMessage } = reactIntl.useIntl();
+  const apiUrl = attribute?.options?.apiUrl || "";
+  const attrName = apiUrl.slice(apiUrl.lastIndexOf("=") + 1) || "name";
+  const inputEle = react.useRef(null);
+  const [tags, setTags] = react.useState(() => {
+    try {
+      const values = typeof value === "string" ? JSON.parse(value) : value;
+      return Array.isArray(values) ? values.map((v) => v[attrName] || v.name || v) : [];
+    } catch (e) {
+      return [];
+    }
+  });
+  const [suggestions, setSuggestions] = react.useState([]);
+  react.useEffect(() => {
+    const suggestionsContainer = document.querySelector(
+      ".react-autosuggest__suggestions-container"
+    );
+    if (suggestionsContainer && inputEle.current) {
+      suggestionsContainer.style.top = `${inputEle.current.offsetHeight + 5}px`;
+    }
+    const handleClickOutside = (event) => {
+      const tagsInput = document.querySelector(".react-tagsinput");
+      if (tagsInput) {
+        tagsInput.classList.toggle(
+          "react-tagsinput--focused",
+          inputEle.current?.contains(event.target)
+        );
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const handleTagsChange = async (newTags) => {
+    const lastTag = newTags[newTags.length - 1];
+    const suggestionsArray = suggestions.data || [];
+    const existingTag = suggestionsArray.find(
+      (s) => s[attrName]?.toLowerCase() === lastTag?.toLowerCase()
+    );
+    if (lastTag && !existingTag) {
+      if (apiUrl) {
+        try {
+          const response = await axios__default.default.post(apiUrl, {
+            data: {
+              [attrName]: lastTag
+            }
+          });
+          setSuggestions((prevSuggestions) => {
+            const newSuggestionsData = [...prevSuggestions.data || [], response.data.data];
+            return { ...prevSuggestions, data: newSuggestionsData };
+          });
+          newTags[newTags.length - 1] = response.data.data[attrName];
+        } catch (error2) {
+          console.error("Error creating new tag:", error2);
+        }
+      } else {
+        setSuggestions((prevSuggestions) => {
+          const newSuggestion = { id: Date.now(), [attrName]: lastTag };
+          const newSuggestionsData = [...prevSuggestions.data || [], newSuggestion];
+          return { ...prevSuggestions, data: newSuggestionsData };
+        });
+      }
+    }
+    setTags(newTags);
+    const value2 = JSON.stringify(newTags.map((tag) => ({ [attrName]: tag })));
+    onChange({
+      target: {
+        name,
+        value: value2,
+        type: attribute.type
+      }
+    });
+  };
+  const getSuggestions = async () => {
+    if (!apiUrl) return;
+    try {
+      const res = await axios__default.default.get(apiUrl);
+      setSuggestions(res.data);
+    } catch (err) {
+      setSuggestions({ data: [] });
+    }
+  };
+  const autocompleteRenderInput = (props) => {
+    const handleOnChange = (e, { newValue, method }) => {
+      if (method === "enter") {
+        e.preventDefault();
+      } else {
+        props.onChange(e);
+      }
+    };
+    const inputValue = props.value && props.value.trim() || "";
+    const inputLength = inputValue.length;
+    let s = suggestions.data || [];
+    if (s.length <= 0) {
+      getSuggestions();
+    }
+    if (inputLength > 0) {
+      s = s.filter((state) => {
+        const suggestionName = state[attrName] || "";
+        return suggestionName.toLowerCase().slice(0, inputLength) === inputValue;
+      }).map((state) => ({
+        id: state.id,
+        [attrName]: state[attrName] || ""
+      }));
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Autosuggest__default.default,
+      {
+        ref: props.ref,
+        suggestions: s,
+        shouldRenderSuggestions: (value2) => value2 && value2.trim().length > 0,
+        getSuggestionValue: (s2) => s2[attrName],
+        renderSuggestion: (s2) => /* @__PURE__ */ jsxRuntime.jsx("span", { children: s2[attrName] }),
+        inputProps: { ...props, onChange: handleOnChange },
+        onSuggestionSelected: (_, { suggestion }) => props.addTag(suggestion[attrName]),
+        onSuggestionsFetchRequested: () => {
+        }
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    designSystem.Field.Root,
+    {
+      name,
+      id: name,
+      error,
+      hint: description && formatMessage({ id: description }),
+      required,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        designSystem.Flex,
+        {
+          direction: "column",
+          alignItems: "stretch",
+          gap: 1,
+          style: { position: "relative" },
+          ref: inputEle,
+          children: [
+            label && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: formatMessage({ id: label, defaultMessage: label }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(ThemeStyle, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { direction: "column", children: /* @__PURE__ */ jsxRuntime.jsx(
+              TagsInput__default.default,
+              {
+                value: tags,
+                onChange: handleTagsChange,
+                onlyUnique: true,
+                renderInput: autocompleteRenderInput
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
+          ]
+        }
+      )
+    }
+  ) });
+};
+Tags.defaultProps = {
+  description: null,
+  disabled: false,
+  error: null,
+  labelAction: null,
+  required: false,
+  value: ""
+};
+Tags.propTypes = {
+  label: PropTypes__default.default.object.isRequired,
+  onChange: PropTypes__default.default.func.isRequired,
+  attribute: PropTypes__default.default.object.isRequired,
+  name: PropTypes__default.default.string.isRequired,
+  description: PropTypes__default.default.object,
+  error: PropTypes__default.default.string,
+  labelAction: PropTypes__default.default.object,
+  required: PropTypes__default.default.bool,
+  value: PropTypes__default.default.string
+};
+exports.default = Tags;

package/dist/admin/index.js

@@ -0,0 +1,53 @@
+"use strict";
+const name = "@gregcm999/strapi-plugin-tagsinput";
+const pluginPkg = {
+  name
+};
+const pluginId = pluginPkg.name.replace(/^(@[^/]+\/)?strapi-plugin-/i, "");
+const getTranslation = (id) => `${pluginId}.${id}`;
+const index = {
+  register(app) {
+    app.customFields.register({
+      name: "tags",
+      pluginId,
+      type: "text",
+      intlLabel: {
+        id: getTranslation("form.label"),
+        defaultMessage: "TagsInput"
+      },
+      intlDescription: {
+        id: getTranslation("form.description"),
+        defaultMessage: "TagsInput to add custom tags"
+      },
+      components: {
+        Input: async () => Promise.resolve().then(() => require(
+          /* webpackChunkName: "input-component" */
+          "../_chunks/Input-jl4WBtpd.js"
+        ))
+      },
+      options: {
+        base: [
+          {
+            sectionTitle: {
+              id: "form.section.apiUrl",
+              defaultMessage: "API Url"
+            },
+            items: [
+              {
+                intlLabel: {
+                  id: "form.apiUrl",
+                  defaultMessage: "Rest API URL for suggestions"
+                },
+                name: "options.apiUrl",
+                type: "text",
+                value: "",
+                options: []
+              }
+            ]
+          }
+        ]
+      }
+    });
+  }
+};
+module.exports = index;

package/dist/admin/index.mjs

@@ -0,0 +1,54 @@
+const name = "@gregcm999/strapi-plugin-tagsinput";
+const pluginPkg = {
+  name
+};
+const pluginId = pluginPkg.name.replace(/^(@[^/]+\/)?strapi-plugin-/i, "");
+const getTranslation = (id) => `${pluginId}.${id}`;
+const index = {
+  register(app) {
+    app.customFields.register({
+      name: "tags",
+      pluginId,
+      type: "text",
+      intlLabel: {
+        id: getTranslation("form.label"),
+        defaultMessage: "TagsInput"
+      },
+      intlDescription: {
+        id: getTranslation("form.description"),
+        defaultMessage: "TagsInput to add custom tags"
+      },
+      components: {
+        Input: async () => import(
+          /* webpackChunkName: "input-component" */
+          "../_chunks/Input-DSV3HDg_.mjs"
+        )
+      },
+      options: {
+        base: [
+          {
+            sectionTitle: {
+              id: "form.section.apiUrl",
+              defaultMessage: "API Url"
+            },
+            items: [
+              {
+                intlLabel: {
+                  id: "form.apiUrl",
+                  defaultMessage: "Rest API URL for suggestions"
+                },
+                name: "options.apiUrl",
+                type: "text",
+                value: "",
+                options: []
+              }
+            ]
+          }
+        ]
+      }
+    });
+  }
+};
+export {
+  index as default
+};

package/dist/server/index.js

@@ -0,0 +1,17 @@
+"use strict";
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+var register$1 = ({ strapi }) => {
+  strapi.customFields.register({
+    name: "tags",
+    plugin: "tagsinput",
+    type: "json"
+  });
+};
+const register = register$1;
+var src = {
+  register
+};
+const index = /* @__PURE__ */ getDefaultExportFromCjs(src);
+module.exports = index;

package/dist/server/index.mjs

@@ -0,0 +1,18 @@
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
+}
+var register$1 = ({ strapi }) => {
+  strapi.customFields.register({
+    name: "tags",
+    plugin: "tagsinput",
+    type: "json"
+  });
+};
+const register = register$1;
+var src = {
+  register
+};
+const index = /* @__PURE__ */ getDefaultExportFromCjs(src);
+export {
+  index as default
+};

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@gregcm999/strapi-plugin-tagsinput",
+  "version": "2.0.3-beta.3",
+  "description": "Tagsinput plugin for your strapi project",
+  "strapi": {
+    "name": "tagsinput",
+    "description": "Tagsinput plugin for your strapi project",
+    "kind": "plugin",
+    "displayName": "Tagsinput"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/canopas/strapi-plugin-tagsinput.git"
+  },
+  "scripts": {
+    "build": "strapi-plugin build",
+    "verify": "strapi-plugin verify",
+    "watch": "strapi-plugin watch",
+    "watch:link": "strapi-plugin watch:link"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    "./strapi-admin": {
+      "source": "./admin/src/index.js",
+      "import": "./dist/admin/index.mjs",
+      "require": "./dist/admin/index.js",
+      "default": "./dist/admin/index.js"
+    },
+    "./strapi-server": {
+      "source": "./server/src/index.js",
+      "import": "./dist/server/index.mjs",
+      "require": "./dist/server/index.js",
+      "default": "./dist/server/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@strapi/design-system": "^2.0.0-rc.11",
+    "@strapi/icons": "^2.0.0-rc.11",
+    "axios": "^1.7.7",
+    "prop-types": "^15.8.1",
+    "react-autosuggest": "^10.1.0",
+    "react-intl": "^6.7.0",
+    "react-tagsinput": "^3.20.3"
+  },
+  "devDependencies": {
+    "@strapi/sdk-plugin": "^5.2.6",
+    "@strapi/strapi": "^5.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2",
+    "styled-components": "^6.1.13"
+  },
+  "peerDependencies": {
+    "@strapi/sdk-plugin": "^5.2.6",
+    "@strapi/strapi": "^5.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2",
+    "styled-components": "^6.1.13"
+  },
+  "author": "Canopas",
+  "maintainers": [
+    "Canopas"
+  ],
+  "engines": {
+    "node": ">=20.0.0 <=24.x.x",
+    "npm": ">=6.0.0"
+  },
+  "license": "MIT",
+  "main": "strapi-server.js",
+  "keywords": [
+    "strapi",
+    "plugin",
+    "tagsinput"
+  ],
+  "bugs": {
+    "url": "https://github.com/canopas/strapi-plugin-tagsinput/issues"
+  },
+  "homepage": "https://github.com/canopas/strapi-plugin-tagsinput#readme",
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+}