mtxuilib 0.1.337 → 0.1.339

package/dist/ui/mt/inputs/TagsInput.d.ts

@@ -0,0 +1,2 @@
+import { type InputProps } from "../../input";
+export declare const TagsInput: (props: InputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ui/mt/inputs/TagsInput.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useFormContext } from "react-hook-form";
+import { Input } from "../../input";
+export const TagsInput = (props) => {
+    const { name, placeholder } = props;
+    if (!name)
+        throw new Error("require field name @ TagsInput");
+    const form = useFormContext();
+    const [tags, setTags] = useState([]);
+    const [inputValue, setInputValue] = useState("");
+    const handleInputChange = (e) => {
+        setInputValue(e.target.value);
+    };
+    const handleInputKeyDown = (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            addTag();
+        }
+    };
+    const addTag = () => {
+        const trimmedInput = inputValue.trim();
+        if (trimmedInput && !tags.includes(trimmedInput)) {
+            const newTags = [...tags, trimmedInput];
+            setTags(newTags);
+            setInputValue("");
+            form.setValue(name, newTags);
+        }
+        else {
+            setInputValue("");
+        }
+    };
+    const removeTag = (indexToRemove) => {
+        setTags(tags.filter((_, index) => index !== indexToRemove));
+        form.setValue(name, tags.filter((_, index) => index !== indexToRemove));
+    };
+    return (_jsx("div", { className: "flex flex-col space-y-2", children: _jsxs("div", { className: "flex flex-wrap gap-2 p-2 bg-white border border-gray-300 rounded-md", children: [tags.map((tag, index) => (_jsxs("div", { className: "flex items-center bg-blue-100 text-blue-800 text-sm font-medium px-2 py-1 rounded-full", children: [tag, _jsx("button", { type: "button", onClick: () => removeTag(index), className: "ml-1 text-blue-600 hover:text-blue-800 focus:outline-none", children: "\u00D7" })] }, index))), _jsx(Input, { type: "text", value: inputValue, onChange: handleInputChange, onKeyDown: handleInputKeyDown, onBlur: addTag, placeholder: placeholder || "Type and press Enter or Space to add tags", className: "flex-grow min-w-[120px] border-none focus:ring-0" })] }) }));
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mtxuilib",
   "private": false,
-  "version": "0.1.337",
+  "version": "0.1.339",
   "publishConfig": {
     "access": "public"
   },

package/dist/ui/mt/Slot.d.ts

@@ -1 +0,0 @@
-export { Slot } from "@radix-ui/react-slot";

package/dist/ui/mt/Slot.js

@@ -1 +0,0 @@
-export { Slot } from "@radix-ui/react-slot";