eidos-ui 0.1.0

package/dist/chunk-3YPTYI7R.js

@@ -0,0 +1,194 @@
+// src/components/FileUpload/FileUpload.component.tsx
+import { useState, useRef } from "react";
+import { Upload, X, CircleAlert, FileText } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function isFileTypeAccepted(file, acceptedTypes) {
+  return acceptedTypes.some((type) => {
+    const trimmed = type.trim();
+    if (trimmed.startsWith(".")) {
+      return file.name.toLowerCase().endsWith(trimmed.toLowerCase());
+    }
+    if (trimmed.endsWith("/*")) {
+      const baseType = trimmed.slice(0, -2);
+      return file.type.startsWith(`${baseType}/`);
+    }
+    return file.type === trimmed;
+  });
+}
+function FileUpload({
+  accept,
+  multiple = false,
+  maxSize,
+  maxFiles,
+  onFilesAccepted,
+  onFilesRejected,
+  hint,
+  disabled = false,
+  className = ""
+}) {
+  const inputRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [files, setFiles] = useState([]);
+  const [error, setError] = useState(null);
+  const validateAndAccept = (fileList) => {
+    const incoming = Array.from(fileList);
+    if (maxFiles !== void 0 && incoming.length > maxFiles) {
+      setError(`Maximum ${maxFiles} file${maxFiles === 1 ? "" : "s"} allowed`);
+      onFilesRejected?.(incoming, "count");
+      return;
+    }
+    if (accept) {
+      const acceptedTypes = accept.split(",").map((t) => t.trim());
+      const invalid = incoming.filter((f) => !isFileTypeAccepted(f, acceptedTypes));
+      if (invalid.length > 0) {
+        setError("One or more files have an unsupported type");
+        onFilesRejected?.(incoming, "type");
+        return;
+      }
+    }
+    if (maxSize !== void 0) {
+      const oversized = incoming.filter((f) => f.size > maxSize);
+      if (oversized.length > 0) {
+        setError(`File size exceeds the ${formatBytes(maxSize)} limit`);
+        onFilesRejected?.(oversized, "size");
+        return;
+      }
+    }
+    setError(null);
+    setFiles(incoming);
+    onFilesAccepted?.(incoming);
+  };
+  const handleDragEnter = (e) => {
+    e.preventDefault();
+    if (!disabled) setIsDragging(true);
+  };
+  const handleDragOver = (e) => {
+    e.preventDefault();
+  };
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      setIsDragging(false);
+    }
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+    if (disabled) return;
+    const { files: dropped } = e.dataTransfer;
+    if (dropped.length > 0) validateAndAccept(dropped);
+  };
+  const handleZoneClick = () => {
+    if (!disabled) inputRef.current?.click();
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleZoneClick();
+    }
+  };
+  const handleFileChange = (e) => {
+    if (e.target.files && e.target.files.length > 0) {
+      validateAndAccept(e.target.files);
+    }
+    e.target.value = "";
+  };
+  const handleRemoveFile = (index) => {
+    const remaining = files.filter((_, i) => i !== index);
+    setFiles(remaining);
+    onFilesAccepted?.(remaining);
+  };
+  const rootClasses = ["eidos-file-upload", className].filter(Boolean).join(" ");
+  const zoneClasses = [
+    "eidos-file-upload-zone",
+    isDragging && "eidos-file-upload-zone--dragging",
+    disabled && "eidos-file-upload-zone--disabled"
+  ].filter(Boolean).join(" ");
+  const autoHint = [
+    accept ? `Accepted: ${accept}` : null,
+    maxSize ? `Max size: ${formatBytes(maxSize)}` : null,
+    maxFiles && multiple ? `Up to ${maxFiles} files` : null
+  ].filter(Boolean).join(" \xB7 ");
+  const displayHint = hint ?? (autoHint.length > 0 ? autoHint : null);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: rootClasses,
+      role: "region",
+      "aria-label": "File upload",
+      "aria-disabled": disabled || void 0,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: zoneClasses,
+            onClick: handleZoneClick,
+            onDragEnter: handleDragEnter,
+            onDragOver: handleDragOver,
+            onDragLeave: handleDragLeave,
+            onDrop: handleDrop,
+            onKeyDown: handleKeyDown,
+            role: "button",
+            tabIndex: disabled ? -1 : 0,
+            "aria-label": "Upload files - click or drag and drop",
+            "aria-disabled": disabled || void 0,
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "eidos-file-upload-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Upload, {}) }),
+              /* @__PURE__ */ jsxs("div", { className: "eidos-file-upload-text", children: [
+                /* @__PURE__ */ jsx("p", { className: "eidos-file-upload-title", children: /* @__PURE__ */ jsx("em", { children: "Click to upload" }) }),
+                /* @__PURE__ */ jsx("span", { style: { fontWeight: "normal", fontSize: "0.875rem" }, children: "or drag and drop" }),
+                displayHint && /* @__PURE__ */ jsx("p", { className: "eidos-file-upload-hint", children: displayHint })
+              ] }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: inputRef,
+                  type: "file",
+                  accept,
+                  multiple,
+                  disabled,
+                  onChange: handleFileChange,
+                  className: "eidos-file-upload-input-hidden",
+                  tabIndex: -1,
+                  "aria-hidden": "true"
+                }
+              )
+            ]
+          }
+        ),
+        error && /* @__PURE__ */ jsxs("p", { className: "eidos-file-upload-error", role: "alert", children: [
+          /* @__PURE__ */ jsx(CircleAlert, { "aria-hidden": "true" }),
+          error
+        ] }),
+        files.length > 0 && /* @__PURE__ */ jsx("ul", { className: "eidos-file-upload-list", "aria-label": "Selected files", children: files.map((file, index) => /* @__PURE__ */ jsxs("li", { className: "eidos-file-upload-item", children: [
+          /* @__PURE__ */ jsxs("div", { className: "eidos-file-upload-item-info", children: [
+            /* @__PURE__ */ jsx(FileText, { "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "eidos-file-upload-item-name", children: file.name }),
+            /* @__PURE__ */ jsx("span", { className: "eidos-file-upload-item-size", children: formatBytes(file.size) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "eidos-file-upload-item-remove",
+              onClick: () => handleRemoveFile(index),
+              "aria-label": `Remove ${file.name}`,
+              children: /* @__PURE__ */ jsx(X, {})
+            }
+          )
+        ] }, `${file.name}-${index}`)) })
+      ]
+    }
+  );
+}
+FileUpload.displayName = "FileUpload";
+
+export {
+  FileUpload
+};
+//# sourceMappingURL=chunk-3YPTYI7R.js.map

package/dist/chunk-3YPTYI7R.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/FileUpload/FileUpload.component.tsx"],"sourcesContent":["import React, { useState, useRef } from 'react';\r\nimport { Upload, X, CircleAlert, FileText } from 'lucide-react';\r\nimport type { FileUploadProps } from './FileUpload.types';\r\n\r\n// ── Helpers ──────────────────────────────────────────────────────────────────\r\n\r\nfunction formatBytes(bytes: number): string {\r\n  if (bytes < 1024) return `${bytes} B`;\r\n  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;\r\n  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\r\n}\r\n\r\nfunction isFileTypeAccepted(file: File, acceptedTypes: string[]): boolean {\r\n  return acceptedTypes.some((type) => {\r\n    const trimmed = type.trim();\r\n    // Extension match: \".pdf\", \".docx\"\r\n    if (trimmed.startsWith('.')) {\r\n      return file.name.toLowerCase().endsWith(trimmed.toLowerCase());\r\n    }\r\n    // Wildcard MIME group: \"image/*\", \"video/*\"\r\n    if (trimmed.endsWith('/*')) {\r\n      const baseType = trimmed.slice(0, -2);\r\n      return file.type.startsWith(`${baseType}/`);\r\n    }\r\n    // Exact MIME type: \"application/pdf\"\r\n    return file.type === trimmed;\r\n  });\r\n}\r\n\r\n// ── Component ─────────────────────────────────────────────────────────────────\r\n\r\nexport function FileUpload({\r\n  accept,\r\n  multiple = false,\r\n  maxSize,\r\n  maxFiles,\r\n  onFilesAccepted,\r\n  onFilesRejected,\r\n  hint,\r\n  disabled = false,\r\n  className = '',\r\n}: FileUploadProps) {\r\n  const inputRef = useRef<HTMLInputElement>(null);\r\n  const [isDragging, setIsDragging] = useState(false);\r\n  const [files, setFiles] = useState<File[]>([]);\r\n  const [error, setError] = useState<string | null>(null);\r\n\r\n  // ── Validation ─────────────────────────────────────────────────────────────\r\n\r\n  const validateAndAccept = (fileList: FileList | File[]) => {\r\n    const incoming = Array.from(fileList);\r\n\r\n    if (maxFiles !== undefined && incoming.length > maxFiles) {\r\n      setError(`Maximum ${maxFiles} file${maxFiles === 1 ? '' : 's'} allowed`);\r\n      onFilesRejected?.(incoming, 'count');\r\n      return;\r\n    }\r\n\r\n    if (accept) {\r\n      const acceptedTypes = accept.split(',').map((t) => t.trim());\r\n      const invalid = incoming.filter((f) => !isFileTypeAccepted(f, acceptedTypes));\r\n      if (invalid.length > 0) {\r\n        setError('One or more files have an unsupported type');\r\n        onFilesRejected?.(incoming, 'type');\r\n        return;\r\n      }\r\n    }\r\n\r\n    if (maxSize !== undefined) {\r\n      const oversized = incoming.filter((f) => f.size > maxSize);\r\n      if (oversized.length > 0) {\r\n        setError(`File size exceeds the ${formatBytes(maxSize)} limit`);\r\n        onFilesRejected?.(oversized, 'size');\r\n        return;\r\n      }\r\n    }\r\n\r\n    setError(null);\r\n    setFiles(incoming);\r\n    onFilesAccepted?.(incoming);\r\n  };\r\n\r\n  // ── Drag handlers ──────────────────────────────────────────────────────────\r\n\r\n  const handleDragEnter = (e: React.DragEvent<HTMLDivElement>) => {\r\n    e.preventDefault();\r\n    if (!disabled) setIsDragging(true);\r\n  };\r\n\r\n  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {\r\n    // Prevent default to allow the drop event to fire\r\n    e.preventDefault();\r\n  };\r\n\r\n  const handleDragLeave = (e: React.DragEvent<HTMLDivElement>) => {\r\n    e.preventDefault();\r\n    // Only clear the dragging state when leaving the zone entirely,\r\n    // not when moving over a child element inside it.\r\n    if (!e.currentTarget.contains(e.relatedTarget as Node)) {\r\n      setIsDragging(false);\r\n    }\r\n  };\r\n\r\n  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {\r\n    e.preventDefault();\r\n    setIsDragging(false);\r\n    if (disabled) return;\r\n    const { files: dropped } = e.dataTransfer;\r\n    if (dropped.length > 0) validateAndAccept(dropped);\r\n  };\r\n\r\n  // ── Click / keyboard ───────────────────────────────────────────────────────\r\n\r\n  const handleZoneClick = () => {\r\n    if (!disabled) inputRef.current?.click();\r\n  };\r\n\r\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n    if (e.key === 'Enter' || e.key === ' ') {\r\n      e.preventDefault();\r\n      handleZoneClick();\r\n    }\r\n  };\r\n\r\n  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    if (e.target.files && e.target.files.length > 0) {\r\n      validateAndAccept(e.target.files);\r\n    }\r\n    // Reset the input value so the same file(s) can be re-selected\r\n    e.target.value = '';\r\n  };\r\n\r\n  // ── File list management ───────────────────────────────────────────────────\r\n\r\n  const handleRemoveFile = (index: number) => {\r\n    const remaining = files.filter((_, i) => i !== index);\r\n    setFiles(remaining);\r\n    onFilesAccepted?.(remaining);\r\n  };\r\n\r\n  // ── CSS classes ────────────────────────────────────────────────────────────\r\n\r\n  const rootClasses = ['eidos-file-upload', className].filter(Boolean).join(' ');\r\n\r\n  const zoneClasses = [\r\n    'eidos-file-upload-zone',\r\n    isDragging && 'eidos-file-upload-zone--dragging',\r\n    disabled && 'eidos-file-upload-zone--disabled',\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  // Build the auto-generated hint from the constraints when no hint is provided\r\n  const autoHint = [\r\n    accept ? `Accepted: ${accept}` : null,\r\n    maxSize ? `Max size: ${formatBytes(maxSize)}` : null,\r\n    maxFiles && multiple ? `Up to ${maxFiles} files` : null,\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' · ');\r\n\r\n  const displayHint = hint ?? (autoHint.length > 0 ? autoHint : null);\r\n\r\n  return (\r\n    <div\r\n      className={rootClasses}\r\n      role=\"region\"\r\n      aria-label=\"File upload\"\r\n      aria-disabled={disabled || undefined}\r\n    >\r\n      <div\r\n        className={zoneClasses}\r\n        onClick={handleZoneClick}\r\n        onDragEnter={handleDragEnter}\r\n        onDragOver={handleDragOver}\r\n        onDragLeave={handleDragLeave}\r\n        onDrop={handleDrop}\r\n        onKeyDown={handleKeyDown}\r\n        role=\"button\"\r\n        tabIndex={disabled ? -1 : 0}\r\n        aria-label=\"Upload files - click or drag and drop\"\r\n        aria-disabled={disabled || undefined}\r\n      >\r\n        <div className=\"eidos-file-upload-icon\" aria-hidden=\"true\">\r\n          <Upload />\r\n        </div>\r\n\r\n        <div className=\"eidos-file-upload-text\">\r\n          <p className=\"eidos-file-upload-title\">\r\n            <em>Click to upload</em>\r\n          </p>\r\n          <span style={{ fontWeight: 'normal', fontSize: '0.875rem' }}>or drag and drop</span>\r\n          {displayHint && <p className=\"eidos-file-upload-hint\">{displayHint}</p>}\r\n        </div>\r\n\r\n        {/* Hidden native input - triggered programmatically via click() */}\r\n        <input\r\n          ref={inputRef}\r\n          type=\"file\"\r\n          accept={accept}\r\n          multiple={multiple}\r\n          disabled={disabled}\r\n          onChange={handleFileChange}\r\n          className=\"eidos-file-upload-input-hidden\"\r\n          tabIndex={-1}\r\n          aria-hidden=\"true\"\r\n        />\r\n      </div>\r\n\r\n      {error && (\r\n        <p className=\"eidos-file-upload-error\" role=\"alert\">\r\n          <CircleAlert aria-hidden=\"true\" />\r\n          {error}\r\n        </p>\r\n      )}\r\n\r\n      {files.length > 0 && (\r\n        <ul className=\"eidos-file-upload-list\" aria-label=\"Selected files\">\r\n          {files.map((file, index) => (\r\n            <li key={`${file.name}-${index}`} className=\"eidos-file-upload-item\">\r\n              <div className=\"eidos-file-upload-item-info\">\r\n                <FileText aria-hidden=\"true\" />\r\n                <span className=\"eidos-file-upload-item-name\">{file.name}</span>\r\n                <span className=\"eidos-file-upload-item-size\">{formatBytes(file.size)}</span>\r\n              </div>\r\n              <button\r\n                type=\"button\"\r\n                className=\"eidos-file-upload-item-remove\"\r\n                onClick={() => handleRemoveFile(index)}\r\n                aria-label={`Remove ${file.name}`}\r\n              >\r\n                <X />\r\n              </button>\r\n            </li>\r\n          ))}\r\n        </ul>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nFileUpload.displayName = 'FileUpload';\r\n"],"mappings":"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","names":[]}

package/dist/chunk-4NUZP66U.js

@@ -0,0 +1,299 @@
+import {
+  Chip
+} from "./chunk-GRH57M3E.js";
+import {
+  Dropdown
+} from "./chunk-SXF3TCYA.js";
+
+// src/components/TagInput/TagInput.component.tsx
+import { useState, useId, useRef, useCallback, useMemo, useEffect } from "react";
+import { CircleAlert } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TagInput = ({
+  value,
+  defaultValue = [],
+  onChange,
+  placeholder = "Add tag\u2026",
+  size = "md",
+  disabled = false,
+  label,
+  error,
+  hint,
+  allowDuplicates = false,
+  maxTags,
+  separators = ["Enter", ",", "Tab"],
+  validate,
+  className = "",
+  fullWidth = false,
+  suggestions,
+  onSearch,
+  suggestionsEmptyText = "No matches"
+}) => {
+  const generatedId = useId();
+  const inputId = `tag-input-${generatedId}`;
+  const inputRef = useRef(null);
+  const containerRef = useRef(null);
+  const fieldRef = useRef(null);
+  const dropdownSpanRef = useRef(null);
+  const hasSuggestions = suggestions !== void 0;
+  const isSuggestionsOpenRef = useRef(false);
+  const [isSuggestionsOpen, setIsSuggestionsOpen] = useState(false);
+  const [suggestionsMenuKey, setSuggestionsMenuKey] = useState(0);
+  const [focusedSuggestionIndex, setFocusedSuggestionIndex] = useState(-1);
+  const isControlled = value !== void 0;
+  const [internalTags, setInternalTags] = useState(defaultValue);
+  const [inputValue, setInputValue] = useState("");
+  const [isFocused, setIsFocused] = useState(false);
+  const [validationError, setValidationError] = useState(null);
+  const tags = isControlled ? value : internalTags;
+  const updateTags = useCallback(
+    (newTags) => {
+      if (!isControlled) {
+        setInternalTags(newTags);
+      }
+      onChange?.(newTags);
+    },
+    [isControlled, onChange]
+  );
+  const addTag = useCallback(
+    (rawTag) => {
+      const tag = rawTag.trim();
+      if (!tag) return;
+      if (!allowDuplicates && tags.includes(tag)) return;
+      if (maxTags !== void 0 && tags.length >= maxTags) return;
+      if (validate) {
+        const result = validate(tag);
+        if (result === false) return;
+        if (typeof result === "string") {
+          setValidationError(result);
+          return;
+        }
+      }
+      setValidationError(null);
+      updateTags([...tags, tag]);
+      setInputValue("");
+    },
+    [tags, allowDuplicates, maxTags, validate, updateTags]
+  );
+  const removeTag = useCallback(
+    (index) => {
+      updateTags(tags.filter((_, i) => i !== index));
+    },
+    [tags, updateTags]
+  );
+  const filteredSuggestions = useMemo(() => {
+    if (!suggestions) return [];
+    const query = inputValue.trim().toLowerCase();
+    return suggestions.filter((suggestion) => {
+      if (!allowDuplicates && tags.includes(suggestion)) return false;
+      if (!query) return true;
+      return suggestion.toLowerCase().includes(query);
+    });
+  }, [suggestions, inputValue, tags, allowDuplicates]);
+  useEffect(() => {
+    setFocusedSuggestionIndex(-1);
+  }, [filteredSuggestions]);
+  const openSuggestions = useCallback(() => {
+    if (isSuggestionsOpenRef.current || disabled || !hasSuggestions) return;
+    dropdownSpanRef.current?.click();
+    isSuggestionsOpenRef.current = true;
+    setIsSuggestionsOpen(true);
+  }, [disabled, hasSuggestions]);
+  const closeSuggestions = useCallback(() => {
+    isSuggestionsOpenRef.current = false;
+    setIsSuggestionsOpen(false);
+    setFocusedSuggestionIndex(-1);
+    setSuggestionsMenuKey((prev) => prev + 1);
+  }, []);
+  const selectSuggestion = useCallback(
+    (suggestion) => {
+      addTag(suggestion);
+      closeSuggestions();
+      inputRef.current?.focus();
+    },
+    [addTag, closeSuggestions]
+  );
+  useEffect(() => {
+    if (!hasSuggestions) return;
+    const handleMouseDown = (e) => {
+      if (!isSuggestionsOpenRef.current) return;
+      if (e.defaultPrevented) return;
+      if (containerRef.current?.contains(e.target)) return;
+      closeSuggestions();
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, [hasSuggestions, closeSuggestions]);
+  const handleKeyDown = (e) => {
+    if (hasSuggestions && isSuggestionsOpenRef.current && filteredSuggestions.length > 0) {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setFocusedSuggestionIndex((prev) => prev + 1 < filteredSuggestions.length ? prev + 1 : 0);
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setFocusedSuggestionIndex((prev) => prev > 0 ? prev - 1 : filteredSuggestions.length - 1);
+        return;
+      }
+      if (e.key === "Enter" && focusedSuggestionIndex >= 0) {
+        e.preventDefault();
+        selectSuggestion(filteredSuggestions[focusedSuggestionIndex]);
+        return;
+      }
+      if (e.key === "Escape") {
+        e.preventDefault();
+        closeSuggestions();
+        return;
+      }
+    }
+    if (separators.includes(e.key)) {
+      e.preventDefault();
+      addTag(inputValue);
+      return;
+    }
+    if (e.key === "Backspace" && inputValue === "" && tags.length > 0) {
+      e.preventDefault();
+      removeTag(tags.length - 1);
+    }
+  };
+  const handleInputChange = (e) => {
+    const query = e.target.value;
+    setInputValue(query);
+    if (validationError) {
+      setValidationError(null);
+    }
+    onSearch?.(query);
+    if (hasSuggestions && !isSuggestionsOpenRef.current) openSuggestions();
+  };
+  const handleInputFocus = () => {
+    setIsFocused(true);
+    if (hasSuggestions) openSuggestions();
+  };
+  const handleFieldClick = (e) => {
+    if (e.target.closest("button, input")) return;
+    if (!disabled) {
+      inputRef.current?.focus();
+    }
+  };
+  const displayError = validationError ?? error;
+  const hasError = !!displayError;
+  const errorId = `${inputId}-error`;
+  const hintId = `${inputId}-hint`;
+  const containerClasses = [
+    "eidos-tag-input",
+    hasError && "eidos-tag-input--error",
+    disabled && "eidos-tag-input--disabled",
+    fullWidth && "eidos-tag-input--full-width",
+    className
+  ].filter(Boolean).join(" ");
+  const fieldClasses = [
+    "eidos-tag-input-field",
+    `eidos-tag-input-field--${size}`,
+    isFocused && "eidos-tag-input-field--focused",
+    hasError && "eidos-tag-input-field--error",
+    disabled && "eidos-tag-input-field--disabled"
+  ].filter(Boolean).join(" ");
+  const uid = generatedId;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: containerClasses,
+      ref: containerRef,
+      "aria-expanded": hasSuggestions ? isSuggestionsOpen : void 0,
+      "aria-haspopup": hasSuggestions ? "listbox" : void 0,
+      children: [
+        label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "eidos-tag-input-label", children: label }),
+        /* @__PURE__ */ jsxs("div", { className: fieldClasses, onClick: handleFieldClick, ref: fieldRef, children: [
+          tags.map((tag, index) => /* @__PURE__ */ jsx(
+            Chip,
+            {
+              variant: "filled",
+              color: "primary",
+              size,
+              onRemove: disabled ? void 0 : () => removeTag(index),
+              children: tag
+            },
+            `${tag}-${index}`
+          )),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              id: inputId,
+              className: "eidos-tag-input-input",
+              type: "text",
+              value: inputValue,
+              placeholder: tags.length === 0 ? placeholder : void 0,
+              disabled,
+              onKeyDown: handleKeyDown,
+              onChange: handleInputChange,
+              onFocus: handleInputFocus,
+              onBlur: () => setIsFocused(false),
+              "aria-label": label ? void 0 : "Tag input",
+              "aria-describedby": hasError ? errorId : hint ? hintId : void 0,
+              "aria-autocomplete": hasSuggestions ? "list" : void 0,
+              "aria-controls": hasSuggestions ? `${uid}-tag-suggestions` : void 0,
+              "aria-activedescendant": hasSuggestions && focusedSuggestionIndex >= 0 ? `${uid}-tag-suggestion-${focusedSuggestionIndex}` : void 0
+            }
+          ),
+          hasSuggestions && /* @__PURE__ */ jsx(
+            Dropdown,
+            {
+              trigger: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  ref: dropdownSpanRef,
+                  className: "eidos-tag-input-dropdown-anchor",
+                  "aria-hidden": "true"
+                }
+              ),
+              content: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  id: `${uid}-tag-suggestions`,
+                  className: "eidos-tag-input-suggestions",
+                  role: "listbox",
+                  "aria-label": label ?? "Suggestions",
+                  onMouseDown: (e) => e.preventDefault(),
+                  children: filteredSuggestions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "eidos-tag-input-suggestions-empty", children: suggestionsEmptyText }) : filteredSuggestions.map((suggestion, index) => /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      id: `${uid}-tag-suggestion-${index}`,
+                      className: [
+                        "eidos-tag-input-suggestion",
+                        index === focusedSuggestionIndex && "eidos-tag-input-suggestion--focused"
+                      ].filter(Boolean).join(" "),
+                      role: "option",
+                      "aria-selected": index === focusedSuggestionIndex,
+                      onClick: () => selectSuggestion(suggestion),
+                      onMouseEnter: () => setFocusedSuggestionIndex(index),
+                      children: suggestion
+                    },
+                    suggestion
+                  ))
+                }
+              ),
+              triggerRef: fieldRef,
+              autoWidth: true,
+              closeOnClickOutside: false,
+              closeOnEscape: false
+            },
+            suggestionsMenuKey
+          )
+        ] }),
+        hint && !hasError && /* @__PURE__ */ jsx("p", { className: "eidos-tag-input-hint", id: hintId, children: hint }),
+        hasError && /* @__PURE__ */ jsxs("p", { className: "eidos-tag-input-error-message", id: errorId, role: "alert", children: [
+          /* @__PURE__ */ jsx(CircleAlert, {}),
+          displayError
+        ] })
+      ]
+    }
+  );
+};
+TagInput.displayName = "TagInput";
+
+export {
+  TagInput
+};
+//# sourceMappingURL=chunk-4NUZP66U.js.map

package/dist/chunk-4NUZP66U.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TagInput/TagInput.component.tsx"],"sourcesContent":["import React, { useState, useId, useRef, useCallback, useMemo, useEffect } from 'react';\r\nimport { CircleAlert } from 'lucide-react';\r\nimport { Chip } from '../Chip/Chip.component';\r\nimport { Dropdown } from '../Dropdown/Dropdown.component';\r\nimport type { TagInputProps } from './TagInput.types';\r\nimport './TagInput.scss';\r\n\r\nexport const TagInput: React.FC<TagInputProps> = ({\r\n  value,\r\n  defaultValue = [],\r\n  onChange,\r\n  placeholder = 'Add tag…',\r\n  size = 'md',\r\n  disabled = false,\r\n  label,\r\n  error,\r\n  hint,\r\n  allowDuplicates = false,\r\n  maxTags,\r\n  separators = ['Enter', ',', 'Tab'],\r\n  validate,\r\n  className = '',\r\n  fullWidth = false,\r\n  suggestions,\r\n  onSearch,\r\n  suggestionsEmptyText = 'No matches',\r\n}) => {\r\n  const generatedId = useId();\r\n  const inputId = `tag-input-${generatedId}`;\r\n  const inputRef = useRef<HTMLInputElement>(null);\r\n\r\n  /** Entire component wrapper - used for click-outside detection on the suggestions dropdown */\r\n  const containerRef = useRef<HTMLDivElement>(null);\r\n\r\n  /** The field wrapper - passed to Dropdown as externalTriggerRef for width/anchoring */\r\n  const fieldRef = useRef<HTMLDivElement>(null);\r\n\r\n  /** The 0-height span that IS the Dropdown trigger element - programmatically clicked to open */\r\n  const dropdownSpanRef = useRef<HTMLSpanElement>(null);\r\n\r\n  const hasSuggestions = suggestions !== undefined;\r\n  const isSuggestionsOpenRef = useRef(false);\r\n  const [isSuggestionsOpen, setIsSuggestionsOpen] = useState(false);\r\n  const [suggestionsMenuKey, setSuggestionsMenuKey] = useState(0);\r\n  const [focusedSuggestionIndex, setFocusedSuggestionIndex] = useState(-1);\r\n\r\n  const isControlled = value !== undefined;\r\n\r\n  const [internalTags, setInternalTags] = useState<string[]>(defaultValue);\r\n  const [inputValue, setInputValue] = useState('');\r\n  const [isFocused, setIsFocused] = useState(false);\r\n  const [validationError, setValidationError] = useState<string | null>(null);\r\n\r\n  const tags = isControlled ? (value as string[]) : internalTags;\r\n\r\n  const updateTags = useCallback(\r\n    (newTags: string[]) => {\r\n      if (!isControlled) {\r\n        setInternalTags(newTags);\r\n      }\r\n      onChange?.(newTags);\r\n    },\r\n    [isControlled, onChange],\r\n  );\r\n\r\n  const addTag = useCallback(\r\n    (rawTag: string) => {\r\n      const tag = rawTag.trim();\r\n\r\n      if (!tag) return;\r\n\r\n      if (!allowDuplicates && tags.includes(tag)) return;\r\n\r\n      if (maxTags !== undefined && tags.length >= maxTags) return;\r\n\r\n      if (validate) {\r\n        const result = validate(tag);\r\n        if (result === false) return;\r\n        if (typeof result === 'string') {\r\n          setValidationError(result);\r\n          return;\r\n        }\r\n        // result === true → valid, fall through\r\n      }\r\n\r\n      setValidationError(null);\r\n      updateTags([...tags, tag]);\r\n      setInputValue('');\r\n    },\r\n    [tags, allowDuplicates, maxTags, validate, updateTags],\r\n  );\r\n\r\n  const removeTag = useCallback(\r\n    (index: number) => {\r\n      updateTags(tags.filter((_, i) => i !== index));\r\n    },\r\n    [tags, updateTags],\r\n  );\r\n\r\n  // ─── Suggestions dropdown (autocomplete) ───────────────────────────────────\r\n\r\n  const filteredSuggestions = useMemo<string[]>(() => {\r\n    if (!suggestions) return [];\r\n    const query = inputValue.trim().toLowerCase();\r\n    return suggestions.filter((suggestion) => {\r\n      if (!allowDuplicates && tags.includes(suggestion)) return false;\r\n      if (!query) return true;\r\n      return suggestion.toLowerCase().includes(query);\r\n    });\r\n  }, [suggestions, inputValue, tags, allowDuplicates]);\r\n\r\n  useEffect(() => {\r\n    setFocusedSuggestionIndex(-1);\r\n  }, [filteredSuggestions]);\r\n\r\n  const openSuggestions = useCallback(() => {\r\n    if (isSuggestionsOpenRef.current || disabled || !hasSuggestions) return;\r\n    dropdownSpanRef.current?.click(); // opens the Dropdown (bubbles to trigger)\r\n    isSuggestionsOpenRef.current = true;\r\n    setIsSuggestionsOpen(true);\r\n  }, [disabled, hasSuggestions]);\r\n\r\n  const closeSuggestions = useCallback(() => {\r\n    isSuggestionsOpenRef.current = false;\r\n    setIsSuggestionsOpen(false);\r\n    setFocusedSuggestionIndex(-1);\r\n    setSuggestionsMenuKey((prev) => prev + 1);\r\n  }, []);\r\n\r\n  const selectSuggestion = useCallback(\r\n    (suggestion: string) => {\r\n      addTag(suggestion);\r\n      closeSuggestions();\r\n      inputRef.current?.focus();\r\n    },\r\n    [addTag, closeSuggestions],\r\n  );\r\n\r\n  // Click-outside detection for the suggestions dropdown.\r\n  useEffect(() => {\r\n    if (!hasSuggestions) return;\r\n\r\n    const handleMouseDown = (e: MouseEvent) => {\r\n      if (!isSuggestionsOpenRef.current) return;\r\n      if (e.defaultPrevented) return; // click inside the portal-rendered listbox\r\n      if (containerRef.current?.contains(e.target as Node)) return;\r\n      closeSuggestions();\r\n    };\r\n\r\n    document.addEventListener('mousedown', handleMouseDown);\r\n    return () => document.removeEventListener('mousedown', handleMouseDown);\r\n  }, [hasSuggestions, closeSuggestions]);\r\n\r\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n    if (hasSuggestions && isSuggestionsOpenRef.current && filteredSuggestions.length > 0) {\r\n      if (e.key === 'ArrowDown') {\r\n        e.preventDefault();\r\n        setFocusedSuggestionIndex((prev) => (prev + 1 < filteredSuggestions.length ? prev + 1 : 0));\r\n        return;\r\n      }\r\n      if (e.key === 'ArrowUp') {\r\n        e.preventDefault();\r\n        setFocusedSuggestionIndex((prev) => (prev > 0 ? prev - 1 : filteredSuggestions.length - 1));\r\n        return;\r\n      }\r\n      if (e.key === 'Enter' && focusedSuggestionIndex >= 0) {\r\n        e.preventDefault();\r\n        selectSuggestion(filteredSuggestions[focusedSuggestionIndex]);\r\n        return;\r\n      }\r\n      if (e.key === 'Escape') {\r\n        e.preventDefault();\r\n        closeSuggestions();\r\n        return;\r\n      }\r\n    }\r\n\r\n    if (separators.includes(e.key)) {\r\n      e.preventDefault();\r\n      addTag(inputValue);\r\n      return;\r\n    }\r\n\r\n    if (e.key === 'Backspace' && inputValue === '' && tags.length > 0) {\r\n      e.preventDefault();\r\n      removeTag(tags.length - 1);\r\n    }\r\n  };\r\n\r\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n    const query = e.target.value;\r\n    setInputValue(query);\r\n    if (validationError) {\r\n      setValidationError(null);\r\n    }\r\n    onSearch?.(query);\r\n    if (hasSuggestions && !isSuggestionsOpenRef.current) openSuggestions();\r\n  };\r\n\r\n  const handleInputFocus = () => {\r\n    setIsFocused(true);\r\n    if (hasSuggestions) openSuggestions();\r\n  };\r\n\r\n  const handleFieldClick = (e: React.MouseEvent<HTMLDivElement>) => {\r\n    // Don't steal focus from interactive child elements\r\n    if ((e.target as HTMLElement).closest('button, input')) return;\r\n    if (!disabled) {\r\n      inputRef.current?.focus();\r\n    }\r\n  };\r\n\r\n  const displayError = validationError ?? error;\r\n  const hasError = !!displayError;\r\n  const errorId = `${inputId}-error`;\r\n  const hintId = `${inputId}-hint`;\r\n\r\n  const containerClasses = [\r\n    'eidos-tag-input',\r\n    hasError && 'eidos-tag-input--error',\r\n    disabled && 'eidos-tag-input--disabled',\r\n    fullWidth && 'eidos-tag-input--full-width',\r\n    className,\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  const fieldClasses = [\r\n    'eidos-tag-input-field',\r\n    `eidos-tag-input-field--${size}`,\r\n    isFocused && 'eidos-tag-input-field--focused',\r\n    hasError && 'eidos-tag-input-field--error',\r\n    disabled && 'eidos-tag-input-field--disabled',\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  const uid = generatedId;\r\n\r\n  return (\r\n    <div\r\n      className={containerClasses}\r\n      ref={containerRef}\r\n      aria-expanded={hasSuggestions ? isSuggestionsOpen : undefined}\r\n      aria-haspopup={hasSuggestions ? 'listbox' : undefined}\r\n    >\r\n      {label && (\r\n        <label htmlFor={inputId} className=\"eidos-tag-input-label\">\r\n          {label}\r\n        </label>\r\n      )}\r\n\r\n      <div className={fieldClasses} onClick={handleFieldClick} ref={fieldRef}>\r\n        {tags.map((tag, index) => (\r\n          <Chip\r\n            key={`${tag}-${index}`}\r\n            variant=\"filled\"\r\n            color=\"primary\"\r\n            size={size}\r\n            onRemove={disabled ? undefined : () => removeTag(index)}\r\n          >\r\n            {tag}\r\n          </Chip>\r\n        ))}\r\n\r\n        <input\r\n          ref={inputRef}\r\n          id={inputId}\r\n          className=\"eidos-tag-input-input\"\r\n          type=\"text\"\r\n          value={inputValue}\r\n          placeholder={tags.length === 0 ? placeholder : undefined}\r\n          disabled={disabled}\r\n          onKeyDown={handleKeyDown}\r\n          onChange={handleInputChange}\r\n          onFocus={handleInputFocus}\r\n          onBlur={() => setIsFocused(false)}\r\n          aria-label={label ? undefined : 'Tag input'}\r\n          aria-describedby={hasError ? errorId : hint ? hintId : undefined}\r\n          aria-autocomplete={hasSuggestions ? 'list' : undefined}\r\n          aria-controls={hasSuggestions ? `${uid}-tag-suggestions` : undefined}\r\n          aria-activedescendant={\r\n            hasSuggestions && focusedSuggestionIndex >= 0\r\n              ? `${uid}-tag-suggestion-${focusedSuggestionIndex}`\r\n              : undefined\r\n          }\r\n        />\r\n\r\n        {hasSuggestions && (\r\n          <Dropdown\r\n            key={suggestionsMenuKey}\r\n            trigger={\r\n              <span\r\n                ref={dropdownSpanRef}\r\n                className=\"eidos-tag-input-dropdown-anchor\"\r\n                aria-hidden=\"true\"\r\n              />\r\n            }\r\n            content={\r\n              <div\r\n                id={`${uid}-tag-suggestions`}\r\n                className=\"eidos-tag-input-suggestions\"\r\n                role=\"listbox\"\r\n                aria-label={label ?? 'Suggestions'}\r\n                onMouseDown={(e) => e.preventDefault()}\r\n              >\r\n                {filteredSuggestions.length === 0 ? (\r\n                  <div className=\"eidos-tag-input-suggestions-empty\">{suggestionsEmptyText}</div>\r\n                ) : (\r\n                  filteredSuggestions.map((suggestion, index) => (\r\n                    <div\r\n                      key={suggestion}\r\n                      id={`${uid}-tag-suggestion-${index}`}\r\n                      className={[\r\n                        'eidos-tag-input-suggestion',\r\n                        index === focusedSuggestionIndex && 'eidos-tag-input-suggestion--focused',\r\n                      ]\r\n                        .filter(Boolean)\r\n                        .join(' ')}\r\n                      role=\"option\"\r\n                      aria-selected={index === focusedSuggestionIndex}\r\n                      onClick={() => selectSuggestion(suggestion)}\r\n                      onMouseEnter={() => setFocusedSuggestionIndex(index)}\r\n                    >\r\n                      {suggestion}\r\n                    </div>\r\n                  ))\r\n                )}\r\n              </div>\r\n            }\r\n            triggerRef={fieldRef as React.RefObject<HTMLElement | null>}\r\n            autoWidth\r\n            closeOnClickOutside={false}\r\n            closeOnEscape={false}\r\n          />\r\n        )}\r\n      </div>\r\n\r\n      {hint && !hasError && (\r\n        <p className=\"eidos-tag-input-hint\" id={hintId}>\r\n          {hint}\r\n        </p>\r\n      )}\r\n\r\n      {hasError && (\r\n        <p className=\"eidos-tag-input-error-message\" id={errorId} role=\"alert\">\r\n          <CircleAlert />\r\n          {displayError}\r\n        </p>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nTagInput.displayName = 'TagInput';\r\n"],"mappings":"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","names":[]}