eidos-ui 0.1.0

package/dist/chunk-5D3LIJYW.cjs

@@ -0,0 +1,299 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkO5ZPSZNYcjs = require('./chunk-O5ZPSZNY.cjs');
+
+
+var _chunkKV2FG7ANcjs = require('./chunk-KV2FG7AN.cjs');
+
+// src/components/TagInput/TagInput.component.tsx
+var _react = require('react');
+var _lucidereact = require('lucide-react');
+var _jsxruntime = require('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 = _react.useId.call(void 0, );
+  const inputId = `tag-input-${generatedId}`;
+  const inputRef = _react.useRef.call(void 0, null);
+  const containerRef = _react.useRef.call(void 0, null);
+  const fieldRef = _react.useRef.call(void 0, null);
+  const dropdownSpanRef = _react.useRef.call(void 0, null);
+  const hasSuggestions = suggestions !== void 0;
+  const isSuggestionsOpenRef = _react.useRef.call(void 0, false);
+  const [isSuggestionsOpen, setIsSuggestionsOpen] = _react.useState.call(void 0, false);
+  const [suggestionsMenuKey, setSuggestionsMenuKey] = _react.useState.call(void 0, 0);
+  const [focusedSuggestionIndex, setFocusedSuggestionIndex] = _react.useState.call(void 0, -1);
+  const isControlled = value !== void 0;
+  const [internalTags, setInternalTags] = _react.useState.call(void 0, defaultValue);
+  const [inputValue, setInputValue] = _react.useState.call(void 0, "");
+  const [isFocused, setIsFocused] = _react.useState.call(void 0, false);
+  const [validationError, setValidationError] = _react.useState.call(void 0, null);
+  const tags = isControlled ? value : internalTags;
+  const updateTags = _react.useCallback.call(void 0, 
+    (newTags) => {
+      if (!isControlled) {
+        setInternalTags(newTags);
+      }
+      _optionalChain([onChange, 'optionalCall', _2 => _2(newTags)]);
+    },
+    [isControlled, onChange]
+  );
+  const addTag = _react.useCallback.call(void 0, 
+    (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 = _react.useCallback.call(void 0, 
+    (index) => {
+      updateTags(tags.filter((_, i) => i !== index));
+    },
+    [tags, updateTags]
+  );
+  const filteredSuggestions = _react.useMemo.call(void 0, () => {
+    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]);
+  _react.useEffect.call(void 0, () => {
+    setFocusedSuggestionIndex(-1);
+  }, [filteredSuggestions]);
+  const openSuggestions = _react.useCallback.call(void 0, () => {
+    if (isSuggestionsOpenRef.current || disabled || !hasSuggestions) return;
+    _optionalChain([dropdownSpanRef, 'access', _3 => _3.current, 'optionalAccess', _4 => _4.click, 'call', _5 => _5()]);
+    isSuggestionsOpenRef.current = true;
+    setIsSuggestionsOpen(true);
+  }, [disabled, hasSuggestions]);
+  const closeSuggestions = _react.useCallback.call(void 0, () => {
+    isSuggestionsOpenRef.current = false;
+    setIsSuggestionsOpen(false);
+    setFocusedSuggestionIndex(-1);
+    setSuggestionsMenuKey((prev) => prev + 1);
+  }, []);
+  const selectSuggestion = _react.useCallback.call(void 0, 
+    (suggestion) => {
+      addTag(suggestion);
+      closeSuggestions();
+      _optionalChain([inputRef, 'access', _6 => _6.current, 'optionalAccess', _7 => _7.focus, 'call', _8 => _8()]);
+    },
+    [addTag, closeSuggestions]
+  );
+  _react.useEffect.call(void 0, () => {
+    if (!hasSuggestions) return;
+    const handleMouseDown = (e) => {
+      if (!isSuggestionsOpenRef.current) return;
+      if (e.defaultPrevented) return;
+      if (_optionalChain([containerRef, 'access', _9 => _9.current, 'optionalAccess', _10 => _10.contains, 'call', _11 => _11(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);
+    }
+    _optionalChain([onSearch, 'optionalCall', _12 => _12(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) {
+      _optionalChain([inputRef, 'access', _13 => _13.current, 'optionalAccess', _14 => _14.focus, 'call', _15 => _15()]);
+    }
+  };
+  const displayError = _nullishCoalesce(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__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: containerClasses,
+      ref: containerRef,
+      "aria-expanded": hasSuggestions ? isSuggestionsOpen : void 0,
+      "aria-haspopup": hasSuggestions ? "listbox" : void 0,
+      children: [
+        label && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { htmlFor: inputId, className: "eidos-tag-input-label", children: label }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: fieldClasses, onClick: handleFieldClick, ref: fieldRef, children: [
+          tags.map((tag, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _chunkO5ZPSZNYcjs.Chip,
+            {
+              variant: "filled",
+              color: "primary",
+              size,
+              onRemove: disabled ? void 0 : () => removeTag(index),
+              children: tag
+            },
+            `${tag}-${index}`
+          )),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "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__ */ _jsxruntime.jsx.call(void 0, 
+            _chunkKV2FG7ANcjs.Dropdown,
+            {
+              trigger: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "span",
+                {
+                  ref: dropdownSpanRef,
+                  className: "eidos-tag-input-dropdown-anchor",
+                  "aria-hidden": "true"
+                }
+              ),
+              content: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                "div",
+                {
+                  id: `${uid}-tag-suggestions`,
+                  className: "eidos-tag-input-suggestions",
+                  role: "listbox",
+                  "aria-label": _nullishCoalesce(label, () => ( "Suggestions")),
+                  onMouseDown: (e) => e.preventDefault(),
+                  children: filteredSuggestions.length === 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-tag-input-suggestions-empty", children: suggestionsEmptyText }) : filteredSuggestions.map((suggestion, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                    "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__ */ _jsxruntime.jsx.call(void 0, "p", { className: "eidos-tag-input-hint", id: hintId, children: hint }),
+        hasError && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "eidos-tag-input-error-message", id: errorId, role: "alert", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.CircleAlert, {}),
+          displayError
+        ] })
+      ]
+    }
+  );
+};
+TagInput.displayName = "TagInput";
+
+
+
+exports.TagInput = TagInput;
+//# sourceMappingURL=chunk-5D3LIJYW.cjs.map

package/dist/chunk-5D3LIJYW.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-5D3LIJYW.cjs","../src/components/TagInput/TagInput.component.tsx"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACA;ACPA,8BAAgF;AAChF,2CAA4B;AAsPpB,+CAAA;AAhPD,IAAM,SAAA,EAAoC,CAAC;AAAA,EAChD,KAAA;AAAA,EACA,aAAA,EAAe,CAAC,CAAA;AAAA,EAChB,QAAA;AAAA,EACA,YAAA,EAAc,eAAA;AAAA,EACd,KAAA,EAAO,IAAA;AAAA,EACP,SAAA,EAAW,KAAA;AAAA,EACX,KAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,gBAAA,EAAkB,KAAA;AAAA,EAClB,OAAA;AAAA,EACA,WAAA,EAAa,CAAC,OAAA,EAAS,GAAA,EAAK,KAAK,CAAA;AAAA,EACjC,QAAA;AAAA,EACA,UAAA,EAAY,EAAA;AAAA,EACZ,UAAA,EAAY,KAAA;AAAA,EACZ,WAAA;AAAA,EACA,QAAA;AAAA,EACA,qBAAA,EAAuB;AACzB,CAAA,EAAA,GAAM;AACJ,EAAA,MAAM,YAAA,EAAc,0BAAA,CAAM;AAC1B,EAAA,MAAM,QAAA,EAAU,CAAA,UAAA,EAAa,WAAW,CAAA,CAAA;AACM,EAAA;AAGE,EAAA;AAGJ,EAAA;AAGQ,EAAA;AAEb,EAAA;AACE,EAAA;AACf,EAAA;AACC,EAAA;AACI,EAAA;AAEA,EAAA;AAES,EAAA;AACJ,EAAA;AACF,EAAA;AACV,EAAA;AAE0B,EAAA;AAE/B,EAAA;AACM,IAAA;AACF,MAAA;AACM,QAAA;AACzB,MAAA;AACkB,sBAAA;AACpB,IAAA;AACuB,IAAA;AACzB,EAAA;AAEe,EAAA;AACO,IAAA;AACM,MAAA;AAEd,MAAA;AAEmB,MAAA;AAEK,MAAA;AAEpB,MAAA;AACe,QAAA;AACL,QAAA;AACU,QAAA;AACL,UAAA;AACzB,UAAA;AACF,QAAA;AAEF,MAAA;AAEuB,MAAA;AACE,MAAA;AACT,MAAA;AAClB,IAAA;AACiC,IAAA;AACnC,EAAA;AAEkB,EAAA;AACG,IAAA;AACgB,MAAA;AACnC,IAAA;AACiB,IAAA;AACnB,EAAA;AAI8C,EAAA;AAClB,IAAA;AACM,IAAA;AACL,IAAA;AACI,MAAA;AACV,MAAA;AACa,MAAA;AACjC,IAAA;AACgC,EAAA;AAEnB,EAAA;AACc,IAAA;AACN,EAAA;AAEY,EAAA;AACE,IAAA;AACL,oBAAA;AACA,IAAA;AACN,IAAA;AACE,EAAA;AAEQ,EAAA;AACJ,IAAA;AACL,IAAA;AACE,IAAA;AACW,IAAA;AACpC,EAAA;AAEoB,EAAA;AACC,IAAA;AACL,MAAA;AACA,MAAA;AACO,sBAAA;AAC1B,IAAA;AACyB,IAAA;AAC3B,EAAA;AAGgB,EAAA;AACO,IAAA;AAEsB,IAAA;AACN,MAAA;AACX,MAAA;AACa,MAAA;AACpB,MAAA;AACnB,IAAA;AAEuC,IAAA;AACjB,IAAA;AACa,EAAA;AAE+B,EAAA;AAC5C,IAAA;AACO,MAAA;AACR,QAAA;AACU,QAAA;AAC3B,QAAA;AACF,MAAA;AACyB,MAAA;AACN,QAAA;AACU,QAAA;AAC3B,QAAA;AACF,MAAA;AACyB,MAAA;AACN,QAAA;AACA,QAAA;AACjB,QAAA;AACF,MAAA;AACwB,MAAA;AACL,QAAA;AACA,QAAA;AACjB,QAAA;AACF,MAAA;AACF,IAAA;AAEgC,IAAA;AACb,MAAA;AACA,MAAA;AACjB,MAAA;AACF,IAAA;AAE6B,IAAA;AACV,MAAA;AACQ,MAAA;AAC3B,IAAA;AACF,EAAA;AAEsE,EAAA;AAC7C,IAAA;AACJ,IAAA;AACE,IAAA;AACI,MAAA;AACzB,IAAA;AACgB,oBAAA;AACO,IAAA;AACzB,EAAA;AAE+B,EAAA;AACZ,IAAA;AACmB,IAAA;AACtC,EAAA;AAEkE,EAAA;AAER,IAAA;AACzC,IAAA;AACW,sBAAA;AAC1B,IAAA;AACF,EAAA;AAEwC,EAAA;AACrB,EAAA;AACO,EAAA;AACD,EAAA;AAEA,EAAA;AACvB,IAAA;AACY,IAAA;AACA,IAAA;AACC,IAAA;AACb,IAAA;AAGS,EAAA;AAEU,EAAA;AACnB,IAAA;AAC8B,IAAA;AACjB,IAAA;AACD,IAAA;AACA,IAAA;AAGH,EAAA;AAEC,EAAA;AAGV,EAAA;AAAC,IAAA;AAAA,IAAA;AACY,MAAA;AACN,MAAA;AAC2B,MAAA;AACA,MAAA;AAE/B,MAAA;AACE,QAAA;AAKE,wBAAA;AAED,UAAA;AAAC,YAAA;AAAA,YAAA;AAES,cAAA;AACF,cAAA;AACN,cAAA;AACqB,cAAA;AAEpB,cAAA;AAAA,YAAA;AANmB,YAAA;AAQvB,UAAA;AAED,0BAAA;AAAC,YAAA;AAAA,YAAA;AACM,cAAA;AACD,cAAA;AACM,cAAA;AACL,cAAA;AACE,cAAA;AACsB,cAAA;AAC7B,cAAA;AACW,cAAA;AACD,cAAA;AACD,cAAA;AACkB,cAAA;AACP,cAAA;AACF,cAAA;AACC,cAAA;AACJ,cAAA;AAEb,cAAA;AAEI,YAAA;AAER,UAAA;AAGE,UAAA;AAAC,YAAA;AAAA,YAAA;AAGG,cAAA;AAAC,gBAAA;AAAA,gBAAA;AACM,kBAAA;AACK,kBAAA;AACE,kBAAA;AAAA,gBAAA;AACd,cAAA;AAGA,cAAA;AAAC,gBAAA;AAAA,gBAAA;AACW,kBAAA;AACA,kBAAA;AACL,kBAAA;AACgB,kBAAA;AACC,kBAAA;AAErB,kBAAA;AAII,oBAAA;AAAA,oBAAA;AAEW,sBAAA;AACC,sBAAA;AACT,wBAAA;AACU,wBAAA;AAGT,sBAAA;AACE,sBAAA;AACU,sBAAA;AACA,sBAAA;AACK,sBAAA;AAEnB,sBAAA;AAAA,oBAAA;AAbI,oBAAA;AAeR,kBAAA;AAAA,gBAAA;AAEL,cAAA;AAEU,cAAA;AACH,cAAA;AACY,cAAA;AACN,cAAA;AAAA,YAAA;AA3CV,YAAA;AA4CP,UAAA;AAEJ,QAAA;AAGE,QAAA;AAMC,QAAA;AACE,0BAAA;AACA,UAAA;AACH,QAAA;AAAA,MAAA;AAAA,IAAA;AAEJ,EAAA;AAEJ;AAEuB;AD5DoB;AACA;AACA;AACA","file":"/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-5D3LIJYW.cjs","sourcesContent":[null,"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"]}

package/dist/chunk-5QG2I3FK.cjs

@@ -0,0 +1,169 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkTBMVUI7Scjs = require('./chunk-TBMVUI7S.cjs');
+
+// src/components/Tabs/Tabs.component.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var _jsxruntime = require('react/jsx-runtime');
+var TabsContext = _react2.default.createContext(null);
+var useTabsContext = () => {
+  const ctx = _react.useContext.call(void 0, TabsContext);
+  if (!ctx) throw new Error("Tab/TabPanel must be used inside <Tabs>");
+  return ctx;
+};
+var Tab = ({
+  value,
+  children,
+  disabled = false,
+  icon,
+  className = ""
+}) => {
+  const { activeValue, onSelect, size, fullWidth, listRef } = useTabsContext();
+  const isActive = activeValue === value;
+  const handleKeyDown = (e) => {
+    const list = listRef.current;
+    if (!list) return;
+    const allTabs = Array.from(
+      list.querySelectorAll('[role="tab"]:not([disabled])')
+    );
+    const currentIndex = allTabs.indexOf(e.currentTarget);
+    if (currentIndex === -1) return;
+    let targetIndex = -1;
+    if (e.key === "ArrowRight") targetIndex = (currentIndex + 1) % allTabs.length;
+    else if (e.key === "ArrowLeft")
+      targetIndex = (currentIndex - 1 + allTabs.length) % allTabs.length;
+    else if (e.key === "Home") targetIndex = 0;
+    else if (e.key === "End") targetIndex = allTabs.length - 1;
+    if (targetIndex !== -1) {
+      e.preventDefault();
+      allTabs[targetIndex].focus();
+    }
+  };
+  const tabClasses = [
+    "eidos-tab",
+    `eidos-tab--${size}`,
+    isActive && "eidos-tab--active",
+    disabled && "eidos-tab--disabled",
+    fullWidth && "eidos-tab--fullWidth",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "button",
+    {
+      id: `eidos-tab-${value}`,
+      role: "tab",
+      "aria-selected": isActive,
+      "aria-controls": `eidos-tabpanel-${value}`,
+      tabIndex: isActive ? 0 : -1,
+      disabled,
+      className: tabClasses,
+      onClick: () => !disabled && onSelect(value),
+      onKeyDown: handleKeyDown,
+      type: "button",
+      children: [
+        icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-tab-icon", children: _chunkTBMVUI7Scjs.renderIcon.call(void 0, icon, "eidos-tab-icon-svg") }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-tab-label", children })
+      ]
+    }
+  );
+};
+Tab.displayName = "Tab";
+var TabPanel = ({ value, children, className = "" }) => {
+  const { activeValue } = useTabsContext();
+  const isActive = activeValue === value;
+  if (!isActive) return null;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      id: `eidos-tabpanel-${value}`,
+      role: "tabpanel",
+      "aria-labelledby": `eidos-tab-${value}`,
+      tabIndex: 0,
+      className: ["eidos-tab-panel", className].filter(Boolean).join(" "),
+      children
+    }
+  );
+};
+TabPanel.displayName = "TabPanel";
+var Tabs = ({
+  value,
+  defaultValue,
+  onChange,
+  variant = "line",
+  size = "md",
+  color = "primary",
+  fullWidth = false,
+  className = "",
+  children
+}) => {
+  const isControlled = value !== void 0;
+  const [localValue, setLocalValue] = _react.useState.call(void 0, _nullishCoalesce(defaultValue, () => ( "")));
+  const activeValue = isControlled ? value : localValue;
+  const listRef = _react.useRef.call(void 0, null);
+  const indicatorRef = _react.useRef.call(void 0, null);
+  const hasPositioned = _react.useRef.call(void 0, false);
+  _react.useLayoutEffect.call(void 0, () => {
+    if (variant !== "line") return;
+    const list = listRef.current;
+    const indicator = indicatorRef.current;
+    if (!list || !indicator) return;
+    const activeTab = list.querySelector('[aria-selected="true"]');
+    if (!activeTab) return;
+    if (!hasPositioned.current) {
+      indicator.style.transition = "none";
+    }
+    indicator.style.left = `${activeTab.offsetLeft}px`;
+    indicator.style.width = `${activeTab.offsetWidth}px`;
+    if (!hasPositioned.current) {
+      void indicator.offsetWidth;
+      indicator.style.transition = "";
+      hasPositioned.current = true;
+    }
+  }, [activeValue, variant, fullWidth]);
+  const onSelect = (newValue) => {
+    if (!isControlled) {
+      setLocalValue(newValue);
+    }
+    _optionalChain([onChange, 'optionalCall', _ => _(newValue)]);
+  };
+  const tabChildren = [];
+  const panelChildren = [];
+  _react2.default.Children.forEach(children, (child) => {
+    if (!_react2.default.isValidElement(child)) return;
+    if (child.type === Tab) {
+      tabChildren.push(child);
+    } else if (child.type === TabPanel) {
+      panelChildren.push(child);
+    }
+  });
+  const rootClasses = ["eidos-tabs", `eidos-tabs--${variant}`, `eidos-tabs--${color}`, className].filter(Boolean).join(" ");
+  const listClasses = [
+    "eidos-tabs-list",
+    `eidos-tabs-list--${size}`,
+    fullWidth && "eidos-tabs-list--fullWidth"
+  ].filter(Boolean).join(" ");
+  const contextValue = {
+    activeValue,
+    onSelect,
+    variant,
+    size,
+    color,
+    fullWidth,
+    listRef
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: rootClasses, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { ref: listRef, className: listClasses, role: "tablist", children: [
+      tabChildren,
+      variant === "line" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { ref: indicatorRef, className: "eidos-tabs-indicator", "aria-hidden": "true" })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-tabs-panels", children: panelChildren })
+  ] }) });
+};
+Tabs.displayName = "Tabs";
+
+
+
+
+
+exports.Tab = Tab; exports.TabPanel = TabPanel; exports.Tabs = Tabs;
+//# sourceMappingURL=chunk-5QG2I3FK.cjs.map

package/dist/chunk-5QG2I3FK.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-5QG2I3FK.cjs","../src/components/Tabs/Tabs.component.tsx"],"names":[],"mappings":"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","file":"/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-5QG2I3FK.cjs","sourcesContent":[null,"import React, { useState, useRef, useContext, useLayoutEffect } from 'react';\r\nimport { renderIcon } from '../../utils';\r\nimport type { TabsProps, TabProps, TabPanelProps, TabsContextValue } from './Tabs.types';\r\n\r\n// ============================================================================\r\n// CONTEXT\r\n// ============================================================================\r\n\r\nconst TabsContext = React.createContext<TabsContextValue | null>(null);\r\n\r\nconst useTabsContext = (): TabsContextValue => {\r\n  const ctx = useContext(TabsContext);\r\n  if (!ctx) throw new Error('Tab/TabPanel must be used inside <Tabs>');\r\n  return ctx;\r\n};\r\n\r\n// ============================================================================\r\n// TAB - individual tab trigger button\r\n// Defined before Tabs so Tabs can use `child.type === Tab` for child separation.\r\n// ============================================================================\r\n\r\nexport const Tab: React.FC<TabProps> = ({\r\n  value,\r\n  children,\r\n  disabled = false,\r\n  icon,\r\n  className = '',\r\n}) => {\r\n  const { activeValue, onSelect, size, fullWidth, listRef } = useTabsContext();\r\n  const isActive = activeValue === value;\r\n\r\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\r\n    const list = listRef.current;\r\n    if (!list) return;\r\n\r\n    const allTabs = Array.from(\r\n      list.querySelectorAll('[role=\"tab\"]:not([disabled])'),\r\n    ) as HTMLElement[];\r\n    const currentIndex = allTabs.indexOf(e.currentTarget);\r\n    if (currentIndex === -1) return;\r\n\r\n    let targetIndex = -1;\r\n    if (e.key === 'ArrowRight') targetIndex = (currentIndex + 1) % allTabs.length;\r\n    else if (e.key === 'ArrowLeft')\r\n      targetIndex = (currentIndex - 1 + allTabs.length) % allTabs.length;\r\n    else if (e.key === 'Home') targetIndex = 0;\r\n    else if (e.key === 'End') targetIndex = allTabs.length - 1;\r\n\r\n    if (targetIndex !== -1) {\r\n      e.preventDefault();\r\n      allTabs[targetIndex].focus();\r\n    }\r\n  };\r\n\r\n  const tabClasses = [\r\n    'eidos-tab',\r\n    `eidos-tab--${size}`,\r\n    isActive && 'eidos-tab--active',\r\n    disabled && 'eidos-tab--disabled',\r\n    fullWidth && 'eidos-tab--fullWidth',\r\n    className,\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  return (\r\n    <button\r\n      id={`eidos-tab-${value}`}\r\n      role=\"tab\"\r\n      aria-selected={isActive}\r\n      aria-controls={`eidos-tabpanel-${value}`}\r\n      tabIndex={isActive ? 0 : -1}\r\n      disabled={disabled}\r\n      className={tabClasses}\r\n      onClick={() => !disabled && onSelect(value)}\r\n      onKeyDown={handleKeyDown}\r\n      type=\"button\"\r\n    >\r\n      {icon && <span className=\"eidos-tab-icon\">{renderIcon(icon, 'eidos-tab-icon-svg')}</span>}\r\n      <span className=\"eidos-tab-label\">{children}</span>\r\n    </button>\r\n  );\r\n};\r\n\r\nTab.displayName = 'Tab';\r\n\r\n// ============================================================================\r\n// TAB PANEL - content region shown when its value matches the active tab\r\n// Defined before Tabs for the same `child.type === TabPanel` check.\r\n// ============================================================================\r\n\r\nexport const TabPanel: React.FC<TabPanelProps> = ({ value, children, className = '' }) => {\r\n  const { activeValue } = useTabsContext();\r\n  const isActive = activeValue === value;\r\n\r\n  if (!isActive) return null;\r\n\r\n  return (\r\n    <div\r\n      id={`eidos-tabpanel-${value}`}\r\n      role=\"tabpanel\"\r\n      aria-labelledby={`eidos-tab-${value}`}\r\n      tabIndex={0}\r\n      className={['eidos-tab-panel', className].filter(Boolean).join(' ')}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n};\r\n\r\nTabPanel.displayName = 'TabPanel';\r\n\r\n// ============================================================================\r\n// TABS - root container; provides context, separates tab/panel children\r\n// ============================================================================\r\n\r\nexport const Tabs: React.FC<TabsProps> = ({\r\n  value,\r\n  defaultValue,\r\n  onChange,\r\n  variant = 'line',\r\n  size = 'md',\r\n  color = 'primary',\r\n  fullWidth = false,\r\n  className = '',\r\n  children,\r\n}) => {\r\n  const isControlled = value !== undefined;\r\n  const [localValue, setLocalValue] = useState(defaultValue ?? '');\r\n  const activeValue = isControlled ? value! : localValue;\r\n\r\n  const listRef = useRef<HTMLDivElement>(null);\r\n  const indicatorRef = useRef<HTMLSpanElement>(null);\r\n  // Tracks whether the indicator has been positioned at least once so we can\r\n  // skip the CSS transition on the very first render and avoid it animating\r\n  // from the top-left corner to the initial tab.\r\n  const hasPositioned = useRef(false);\r\n\r\n  useLayoutEffect(() => {\r\n    if (variant !== 'line') return;\r\n    const list = listRef.current;\r\n    const indicator = indicatorRef.current;\r\n    if (!list || !indicator) return;\r\n\r\n    const activeTab = list.querySelector('[aria-selected=\"true\"]') as HTMLElement | null;\r\n    if (!activeTab) return;\r\n\r\n    // Suppress the CSS transition on the initial paint so the indicator snaps\r\n    // into place rather than sliding from 0.\r\n    if (!hasPositioned.current) {\r\n      indicator.style.transition = 'none';\r\n    }\r\n\r\n    indicator.style.left = `${activeTab.offsetLeft}px`;\r\n    indicator.style.width = `${activeTab.offsetWidth}px`;\r\n\r\n    if (!hasPositioned.current) {\r\n      // Force a synchronous reflow so the browser commits the no-transition\r\n      // position before we re-enable the transition for future clicks.\r\n      void indicator.offsetWidth;\r\n      indicator.style.transition = '';\r\n      hasPositioned.current = true;\r\n    }\r\n  }, [activeValue, variant, fullWidth]);\r\n\r\n  const onSelect = (newValue: string) => {\r\n    if (!isControlled) {\r\n      setLocalValue(newValue);\r\n    }\r\n    onChange?.(newValue);\r\n  };\r\n\r\n  // Separate Tab and TabPanel children so the list and panels render in\r\n  // distinct DOM regions, regardless of how the consumer orders them.\r\n  const tabChildren: React.ReactElement[] = [];\r\n  const panelChildren: React.ReactElement[] = [];\r\n\r\n  React.Children.forEach(children, (child) => {\r\n    if (!React.isValidElement(child)) return;\r\n    if (child.type === Tab) {\r\n      tabChildren.push(child);\r\n    } else if (child.type === TabPanel) {\r\n      panelChildren.push(child);\r\n    }\r\n  });\r\n\r\n  const rootClasses = ['eidos-tabs', `eidos-tabs--${variant}`, `eidos-tabs--${color}`, className]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  const listClasses = [\r\n    'eidos-tabs-list',\r\n    `eidos-tabs-list--${size}`,\r\n    fullWidth && 'eidos-tabs-list--fullWidth',\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  const contextValue: TabsContextValue = {\r\n    activeValue,\r\n    onSelect,\r\n    variant,\r\n    size,\r\n    color,\r\n    fullWidth,\r\n    listRef,\r\n  };\r\n\r\n  return (\r\n    <TabsContext.Provider value={contextValue}>\r\n      <div className={rootClasses}>\r\n        <div ref={listRef} className={listClasses} role=\"tablist\">\r\n          {tabChildren}\r\n          {variant === 'line' && (\r\n            <span ref={indicatorRef} className=\"eidos-tabs-indicator\" aria-hidden=\"true\" />\r\n          )}\r\n        </div>\r\n        <div className=\"eidos-tabs-panels\">{panelChildren}</div>\r\n      </div>\r\n    </TabsContext.Provider>\r\n  );\r\n};\r\n\r\nTabs.displayName = 'Tabs';\r\n"]}

package/dist/chunk-5TGBNYZK.cjs

@@ -0,0 +1,11 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/components/Kbd/Kbd.component.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var Kbd = ({ children, size = "md", className = "" }) => {
+  const classes = ["eidos-kbd", `eidos-kbd--${size}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "kbd", { className: classes, children });
+};
+
+
+
+exports.Kbd = Kbd;
+//# sourceMappingURL=chunk-5TGBNYZK.cjs.map

package/dist/chunk-5TGBNYZK.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-5TGBNYZK.cjs","../src/components/Kbd/Kbd.component.tsx"],"names":[],"mappings":"AAAA;AC2BS,+CAAA;AAHF,IAAM,IAAA,EAA0B,CAAC,EAAE,QAAA,EAAU,KAAA,EAAO,IAAA,EAAM,UAAA,EAAY,GAAG,CAAA,EAAA,GAAM;AACpF,EAAA,MAAM,QAAA,EAAU,CAAC,WAAA,EAAa,CAAA,WAAA,EAAc,IAAI,CAAA,CAAA;AAEzB,EAAA;AACzB;ADtBmD;AACA;AACA;AACA","file":"/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-5TGBNYZK.cjs","sourcesContent":[null,"import React from 'react';\r\nimport type { KbdProps } from './Kbd.types';\r\n\r\n/**\r\n * Kbd - renders a keyboard key or shortcut with a physical key appearance.\r\n *\r\n * Use it anywhere a keyboard shortcut needs to be communicated: tooltips,\r\n * menu item shortcuts, inline documentation, command palettes.\r\n *\r\n * For multi-key combinations, place `<Kbd>` elements side-by-side and\r\n * separate them with a `+` character or a thin space as suits the context.\r\n *\r\n * @example\r\n * ```tsx\r\n * // Single key\r\n * <Kbd>⌘</Kbd>\r\n *\r\n * // Compound shortcut - wrap in a fragment or span\r\n * <span><Kbd>⌘</Kbd><Kbd>K</Kbd></span>\r\n *\r\n * // Inline in prose\r\n * Press <Kbd>Enter</Kbd> to confirm.\r\n * ```\r\n */\r\nexport const Kbd: React.FC<KbdProps> = ({ children, size = 'md', className = '' }) => {\r\n  const classes = ['eidos-kbd', `eidos-kbd--${size}`, className].filter(Boolean).join(' ');\r\n\r\n  return <kbd className={classes}>{children}</kbd>;\r\n};\r\n"]}

package/dist/chunk-5WRI5ZAA.js

@@ -0,0 +1,31 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJS = (cb, mod) => function __require() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+export {
+  __commonJS,
+  __toESM
+};
+//# sourceMappingURL=chunk-5WRI5ZAA.js.map

package/dist/chunk-5WRI5ZAA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-63N2KZZX.cjs

@@ -0,0 +1,54 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }// src/components/Progress/Progress.component.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var Progress = ({
+  value,
+  max = 100,
+  color = "primary",
+  size = "md",
+  showLabel = false,
+  label,
+  striped = false,
+  className
+}) => {
+  const percentage = value !== void 0 ? Math.min(100, Math.max(0, value / max * 100)) : void 0;
+  const isIndeterminate = percentage === void 0;
+  const displayLabel = _nullishCoalesce(label, () => ( (percentage !== void 0 ? `${Math.round(percentage)}%` : void 0)));
+  const classes = [
+    "eidos-progress",
+    `eidos-progress--${color}`,
+    `eidos-progress--${size}`,
+    striped && "eidos-progress--striped",
+    isIndeterminate && "eidos-progress--indeterminate",
+    className
+  ].filter(Boolean).join(" ");
+  const fillClasses = [
+    "eidos-progress-fill",
+    isIndeterminate && "eidos-progress-fill--indeterminate"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      className: classes,
+      role: "progressbar",
+      "aria-valuenow": percentage,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-label": _nullishCoalesce(label, () => ( (isIndeterminate ? "Loading\u2026" : `${Math.round(percentage)}%`))),
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-progress-track", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            className: fillClasses,
+            style: !isIndeterminate ? { width: `${percentage}%` } : void 0
+          }
+        ) }),
+        showLabel && !isIndeterminate && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-progress-label", children: displayLabel })
+      ]
+    }
+  );
+};
+
+
+
+exports.Progress = Progress;
+//# sourceMappingURL=chunk-63N2KZZX.cjs.map

package/dist/chunk-63N2KZZX.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-63N2KZZX.cjs","../src/components/Progress/Progress.component.tsx"],"names":[],"mappings":"AAAA;ACyCI,+CAAA;AArCG,IAAM,SAAA,EAAoC,CAAC;AAAA,EAChD,KAAA;AAAA,EACA,IAAA,EAAM,GAAA;AAAA,EACN,MAAA,EAAQ,SAAA;AAAA,EACR,KAAA,EAAO,IAAA;AAAA,EACP,UAAA,EAAY,KAAA;AAAA,EACZ,KAAA;AAAA,EACA,QAAA,EAAU,KAAA;AAAA,EACV;AACF,CAAA,EAAA,GAAM;AACJ,EAAA,MAAM,WAAA,EACJ,MAAA,IAAU,KAAA,EAAA,EAAY,IAAA,CAAK,GAAA,CAAI,GAAA,EAAK,IAAA,CAAK,GAAA,CAAI,CAAA,EAAI,MAAA,EAAQ,IAAA,EAAO,GAAG,CAAC,EAAA,EAAI,KAAA,CAAA;AAE1E,EAAA,MAAM,gBAAA,EAAkB,WAAA,IAAe,KAAA,CAAA;AAEvC,EAAA,MAAM,aAAA,mBACJ,KAAA,UAAA,CAAU,WAAA,IAAe,KAAA,EAAA,EAAY,CAAA,EAAA;AAEvB,EAAA;AACd,IAAA;AACwB,IAAA;AACD,IAAA;AACZ,IAAA;AACQ,IAAA;AACnB,IAAA;AAGS,EAAA;AAES,EAAA;AAClB,IAAA;AACmB,IAAA;AAGV,EAAA;AAGT,EAAA;AAAC,IAAA;AAAA,IAAA;AACY,MAAA;AACN,MAAA;AACU,MAAA;AACA,MAAA;AACA,MAAA;AACyB,MAAA;AAExC,MAAA;AAAe,wBAAA;AACZ,UAAA;AAAA,UAAA;AACY,YAAA;AAC2B,YAAA;AAAkB,UAAA;AAE5D,QAAA;AAEE,QAAA;AAAqD,MAAA;AAAA,IAAA;AAEzD,EAAA;AAEJ;ADX0D;AACA;AACA;AACA","file":"/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-63N2KZZX.cjs","sourcesContent":[null,"import React from 'react';\r\nimport type { ProgressProps } from './Progress.types';\r\nimport './Progress.scss';\r\n\r\nexport const Progress: React.FC<ProgressProps> = ({\r\n  value,\r\n  max = 100,\r\n  color = 'primary',\r\n  size = 'md',\r\n  showLabel = false,\r\n  label,\r\n  striped = false,\r\n  className,\r\n}) => {\r\n  const percentage =\r\n    value !== undefined ? Math.min(100, Math.max(0, (value / max) * 100)) : undefined;\r\n\r\n  const isIndeterminate = percentage === undefined;\r\n\r\n  const displayLabel =\r\n    label ?? (percentage !== undefined ? `${Math.round(percentage)}%` : undefined);\r\n\r\n  const classes = [\r\n    'eidos-progress',\r\n    `eidos-progress--${color}`,\r\n    `eidos-progress--${size}`,\r\n    striped && 'eidos-progress--striped',\r\n    isIndeterminate && 'eidos-progress--indeterminate',\r\n    className,\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  const fillClasses = [\r\n    'eidos-progress-fill',\r\n    isIndeterminate && 'eidos-progress-fill--indeterminate',\r\n  ]\r\n    .filter(Boolean)\r\n    .join(' ');\r\n\r\n  return (\r\n    <div\r\n      className={classes}\r\n      role=\"progressbar\"\r\n      aria-valuenow={percentage}\r\n      aria-valuemin={0}\r\n      aria-valuemax={100}\r\n      aria-label={label ?? (isIndeterminate ? 'Loading…' : `${Math.round(percentage!)}%`)}\r\n    >\r\n      <div className=\"eidos-progress-track\">\r\n        <div\r\n          className={fillClasses}\r\n          style={!isIndeterminate ? { width: `${percentage}%` } : undefined}\r\n        />\r\n      </div>\r\n      {showLabel && !isIndeterminate && (\r\n        <span className=\"eidos-progress-label\">{displayLabel}</span>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n"]}

package/dist/chunk-66R54X6R.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-66R54X6R.js.map

package/dist/chunk-66R54X6R.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}