first commit

src/components/forms/ChipsInput.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { Chip } from "./Chip";
+// import "./chips.css";
+
+
+export function ChipsInput(props: {
+  value: string[];
+  onChange: (value: string[]) => void;
+  placeholder?: string;
+  label?: React.ReactNode;
+}) {
+  const { value, onChange, placeholder = "Введите и нажмите Enter", label } = props;
+  const [text, setText] = React.useState("");
+
+  const add = () => {
+    const v = text.trim();
+    if (!v) return;
+    if (value.includes(v)) {
+      setText("");
+      return;
+    }
+    onChange([...value, v]);
+    setText("");
+  };
+
+  return (
+    <div style={{ display: "grid", gap: 8 }}>
+      {label ? <div style={{ fontWeight: 700, fontSize: 13 }}>{label}</div> : null}
+      <div className="ui-chipsbox">
+        <div className="ui-chiprow">
+          {value.map((v) => (
+            <Chip key={v} label={v} onRemove={() => onChange(value.filter((x) => x !== v))} />
+          ))}
+          <input
+            className="ui-chipsinput__input"
+            value={text}
+            placeholder={placeholder}
+            onChange={(e) => setText(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                add();
+              }
+              if (e.key === "Backspace" && text.length === 0 && value.length > 0) {
+                onChange(value.slice(0, -1));
+              }
+            }}
+          />
+        </div>
+        <div style={{ color: "var(--ui-muted)", fontSize: 12 }}>
+          Подсказка: Enter — добавить, Backspace — удалить последний.
+        </div>
+      </div>
+    </div>
+  );
+}