boreal-ui 0.0.72 → 0.0.73

package/dist/next/{TagInput-D--kg_iB.js → TagInput-CXvw8ogs.js}

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 /* empty css                 */
-import { I as IconButton } from "./IconButton-BCPASTa0.js";
-import { T as TextInput } from "./TextInput-B9-DIw86.js";
-import { useId, useState, useEffect, useRef, useMemo } from "react";
+import { I as IconButton } from "./IconButton-CNiln4Qf.js";
+import { T as TextInput } from "./TextInput-3ZD3ccXf.js";
+import { useId, useState, useRef, useEffect, useMemo } from "react";
 import { C as CloseIcon } from "./CloseIcon-C3eQm4EK.js";
 import { c as combineClassNames } from "./classNames-AS8QjFq7.js";
 import { c as capitalize } from "./capitalize-C0TSQSPh.js";
@@ -92,9 +92,18 @@ const styles = {
   "indeterminate-move": "_indeterminate-move_1vvv7_1",
   "skeleton-loading": "_skeleton-loading_1vvv7_1"
 };
+const EMPTY_TAGS = [];
 const TagInputBase = ({
-  tags = [],
-  ariaLabel = "Tag Input",
+  tags = EMPTY_TAGS,
+  "aria-label": ariaLabel = "Tag Input",
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-description": ariaDescription = "Type a tag and press Enter or comma to add. Use arrow keys to navigate suggestions; Enter to select; Escape to close. Backspace removes the last tag when the field is empty.",
+  inputAriaLabel = "Add new tag",
+  inputAriaLabelledBy,
+  inputAriaDescribedBy,
+  suggestionsAriaLabel = "Tag suggestions",
+  removeTagButtonLabel = "Remove tag",
   onChange,
   fetchSuggestions,
   debounceMs = 300,
@@ -104,34 +113,41 @@ const TagInputBase = ({
   size = getDefaultSize(),
   rounding = getDefaultRounding(),
   shadow = getDefaultShadow(),
+  idBase,
   "data-testid": testId = "tag-input",
-  ariaDescription = "Type a tag and press Enter or comma to add. Use arrow keys to navigate suggestions; Enter to select; Escape to close. Backspace removes the last tag when the field is empty.",
   classMap,
   IconButton: IconButton2,
   TextInput: TextInput2
 }) => {
   const uid = useId();
-  const inputId = `${testId}-input-${uid}`;
-  const descId = `${testId}-desc-${uid}`;
-  const labelId = `${testId}-label-${uid}`;
-  const listboxId = `${testId}-listbox-${uid}`;
-  const statusId = `${testId}-status-${uid}`;
+  const baseId = idBase || testId || `tag-input-${uid}`;
+  const inputId = `${baseId}-input`;
+  const descId = `${baseId}-desc`;
+  const labelId = `${baseId}-label`;
+  const listboxId = `${baseId}-listbox`;
+  const statusId = `${baseId}-status`;
   const [inputValue, setInputValue] = useState("");
   const [internalTags, setInternalTags] = useState(tags);
-  useEffect(() => {
-    setInternalTags(tags);
-  }, [tags]);
-  const tagList = internalTags;
   const [lastAction, setLastAction] = useState("");
   const [suggestions, setSuggestions] = useState([]);
   const [open, setOpen] = useState(false);
   const [activeIndex, setActiveIndex] = useState(-1);
   const debounceRef = useRef(null);
+  useEffect(() => {
+    setInternalTags((prev) => {
+      if (prev.length === tags.length && prev.every((tag2, index) => tag2 === tags[index])) {
+        return prev;
+      }
+      return tags;
+    });
+  }, [tags]);
+  const tagList = internalTags;
   const hasTag = (val) => tagList.some((t) => t.toLowerCase() === val.toLowerCase());
   useEffect(() => {
     if (!fetchSuggestions) {
       setSuggestions([]);
       setOpen(false);
+      setActiveIndex(-1);
       return;
     }
     if (debounceRef.current) clearTimeout(debounceRef.current);
@@ -201,25 +217,19 @@ const TagInputBase = ({
         if (choice && addTag(choice)) {
           setInputValue("");
         }
-        setSuggestions([]);
-        setOpen(false);
-        setActiveIndex(-1);
+        clearSuggestions();
         return;
       }
       if (key === "Escape") {
         event.preventDefault();
-        setSuggestions([]);
-        setOpen(false);
-        setActiveIndex(-1);
+        clearSuggestions();
         return;
       }
     }
     if (key === "Enter" || key === ",") {
       event.preventDefault();
       if (addTag(inputValue)) setInputValue("");
-      setSuggestions([]);
-      setOpen(false);
-      setActiveIndex(-1);
+      clearSuggestions();
       return;
     }
     if (key === "Backspace" && inputValue === "" && tagList.length > 0) {
@@ -249,17 +259,19 @@ const TagInputBase = ({
     clearSuggestions();
   };
   const activeOptionId = open && activeIndex >= 0 ? `${listboxId}-opt-${activeIndex}` : void 0;
+  const groupDescribedBy = [descId, statusId, ariaDescribedBy].filter(Boolean).join(" ");
+  const inputDescribedBy = [descId, statusId, inputAriaDescribedBy].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: wrapperClass,
       role: "group",
-      "aria-labelledby": labelId,
-      "aria-describedby": `${descId} ${statusId}`,
+      "aria-label": ariaLabelledBy ? void 0 : ariaLabel,
+      "aria-labelledby": ariaLabelledBy || labelId,
+      "aria-describedby": groupDescribedBy || void 0,
       "data-testid": testId,
-      "aria-label": ariaLabel,
       children: [
-        /* @__PURE__ */ jsx("label", { id: labelId, className: "sr_only", children: ariaLabel }),
+        !ariaLabelledBy && /* @__PURE__ */ jsx("label", { id: labelId, className: "sr_only", children: ariaLabel }),
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -281,7 +293,7 @@ const TagInputBase = ({
                 IconButton2,
                 {
                   type: "button",
-                  ariaLabel: `Remove tag ${tag2}`,
+                  "aria-label": `${removeTagButtonLabel} ${tag2}`,
                   className: classMap.removeButton,
                   onClick: () => removeTag(tag2),
                   "data-testid": `${testId}-remove-${index}`,
@@ -317,8 +329,9 @@ const TagInputBase = ({
             "aria-expanded": open,
             "aria-controls": listboxId,
             "aria-activedescendant": activeOptionId,
-            "aria-label": "Add new tag",
-            "aria-describedby": `${descId} ${statusId}`,
+            "aria-label": inputAriaLabelledBy ? void 0 : inputAriaLabel,
+            "aria-labelledby": inputAriaLabelledBy,
+            "aria-describedby": inputDescribedBy || void 0,
             "data-testid": `${testId}-input`
           }
         ) }),
@@ -328,7 +341,7 @@ const TagInputBase = ({
             className: classMap.suggestionList,
             role: "listbox",
             id: listboxId,
-            "aria-label": "Tag suggestions",
+            "aria-label": suggestionsAriaLabel,
             "data-testid": `${testId}-suggestions`,
             children: suggestions.map((suggestion, index) => /* @__PURE__ */ jsx(
               "li",
@@ -373,4 +386,4 @@ TagInput.displayName = "TagInput";
 export {
   TagInput as T
 };
-//# sourceMappingURL=TagInput-D--kg_iB.js.map
+//# sourceMappingURL=TagInput-CXvw8ogs.js.map

package/dist/next/TagInput-CXvw8ogs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagInput-CXvw8ogs.js","sources":["../../src/components/TagInput/TagInputBase.tsx","../../src/components/TagInput/next/TagInput.tsx"],"sourcesContent":["import React, {\r\n  useId,\r\n  useState,\r\n  KeyboardEvent,\r\n  useMemo,\r\n  useEffect,\r\n  useRef,\r\n} from \"react\";\r\nimport { TagInputBaseProps } from \"./TagInput.types\";\r\nimport { CloseIcon } from \"../../Icons\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultSize,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst EMPTY_TAGS: string[] = [];\r\n\r\nconst TagInputBase: React.FC<TagInputBaseProps> = ({\r\n  tags = EMPTY_TAGS,\r\n  \"aria-label\": ariaLabel = \"Tag Input\",\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-describedby\": ariaDescribedBy,\r\n  \"aria-description\":\r\n    ariaDescription = \"Type a tag and press Enter or comma to add. Use arrow keys to navigate suggestions; Enter to select; Escape to close. Backspace removes the last tag when the field is empty.\",\r\n  inputAriaLabel = \"Add new tag\",\r\n  inputAriaLabelledBy,\r\n  inputAriaDescribedBy,\r\n  suggestionsAriaLabel = \"Tag suggestions\",\r\n  removeTagButtonLabel = \"Remove tag\",\r\n  onChange,\r\n  fetchSuggestions,\r\n  debounceMs = 300,\r\n  placeholder = \"Add a tag...\",\r\n  theme = getDefaultTheme(),\r\n  state = \"\",\r\n  size = getDefaultSize(),\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  idBase,\r\n  \"data-testid\": testId = \"tag-input\",\r\n  classMap,\r\n  IconButton,\r\n  TextInput,\r\n}) => {\r\n  const uid = useId();\r\n  const baseId = idBase || testId || `tag-input-${uid}`;\r\n\r\n  const inputId = `${baseId}-input`;\r\n  const descId = `${baseId}-desc`;\r\n  const labelId = `${baseId}-label`;\r\n  const listboxId = `${baseId}-listbox`;\r\n  const statusId = `${baseId}-status`;\r\n\r\n  const [inputValue, setInputValue] = useState(\"\");\r\n  const [internalTags, setInternalTags] = useState<string[]>(tags);\r\n  const [lastAction, setLastAction] = useState<string>(\"\");\r\n  const [suggestions, setSuggestions] = useState<string[]>([]);\r\n  const [open, setOpen] = useState(false);\r\n  const [activeIndex, setActiveIndex] = useState<number>(-1);\r\n\r\n  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);\r\n\r\n  useEffect(() => {\r\n    setInternalTags((prev) => {\r\n      if (\r\n        prev.length === tags.length &&\r\n        prev.every((tag, index) => tag === tags[index])\r\n      ) {\r\n        return prev;\r\n      }\r\n\r\n      return tags;\r\n    });\r\n  }, [tags]);\r\n\r\n  const tagList = internalTags;\r\n\r\n  const hasTag = (val: string) =>\r\n    tagList.some((t) => t.toLowerCase() === val.toLowerCase());\r\n\r\n  useEffect(() => {\r\n    if (!fetchSuggestions) {\r\n      setSuggestions([]);\r\n      setOpen(false);\r\n      setActiveIndex(-1);\r\n      return;\r\n    }\r\n\r\n    if (debounceRef.current) clearTimeout(debounceRef.current);\r\n\r\n    const query = inputValue.trim();\r\n    if (!query) {\r\n      setSuggestions([]);\r\n      setOpen(false);\r\n      setActiveIndex(-1);\r\n      return;\r\n    }\r\n\r\n    debounceRef.current = setTimeout(async () => {\r\n      try {\r\n        const result = await fetchSuggestions(query);\r\n        setSuggestions(result || []);\r\n        setOpen((result?.length ?? 0) > 0);\r\n        setActiveIndex((result?.length ?? 0) > 0 ? 0 : -1);\r\n      } catch {\r\n        setSuggestions([]);\r\n        setOpen(false);\r\n        setActiveIndex(-1);\r\n      }\r\n    }, debounceMs);\r\n\r\n    return () => {\r\n      if (debounceRef.current) clearTimeout(debounceRef.current);\r\n    };\r\n  }, [inputValue, fetchSuggestions, debounceMs]);\r\n\r\n  const emitChange = (updated: string[]): void => {\r\n    setInternalTags(updated);\r\n    onChange?.(updated);\r\n  };\r\n\r\n  const addTag = (raw: string) => {\r\n    const newTag = raw.trim();\r\n    if (!newTag || hasTag(newTag)) return false;\r\n\r\n    const updated = [...tagList, newTag];\r\n    emitChange(updated);\r\n    setLastAction(`Added tag ${newTag}.`);\r\n    return true;\r\n  };\r\n\r\n  const removeTag = (tag: string) => {\r\n    const updated = tagList.filter((t) => t !== tag);\r\n    emitChange(updated);\r\n    setLastAction(`Removed tag ${tag}.`);\r\n  };\r\n\r\n  const clearSuggestions = (): void => {\r\n    setSuggestions([]);\r\n    setOpen(false);\r\n    setActiveIndex(-1);\r\n  };\r\n\r\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\r\n    const { key } = event;\r\n\r\n    if (open && suggestions.length > 0) {\r\n      if (key === \"ArrowDown\") {\r\n        event.preventDefault();\r\n        setActiveIndex((i) => (i + 1) % suggestions.length);\r\n        return;\r\n      }\r\n\r\n      if (key === \"ArrowUp\") {\r\n        event.preventDefault();\r\n        setActiveIndex(\r\n          (i) => (i - 1 + suggestions.length) % suggestions.length,\r\n        );\r\n        return;\r\n      }\r\n\r\n      if (key === \"Enter\") {\r\n        event.preventDefault();\r\n        const choice = suggestions[activeIndex];\r\n        if (choice && addTag(choice)) {\r\n          setInputValue(\"\");\r\n        }\r\n        clearSuggestions();\r\n        return;\r\n      }\r\n\r\n      if (key === \"Escape\") {\r\n        event.preventDefault();\r\n        clearSuggestions();\r\n        return;\r\n      }\r\n    }\r\n\r\n    if (key === \"Enter\" || key === \",\") {\r\n      event.preventDefault();\r\n      if (addTag(inputValue)) setInputValue(\"\");\r\n      clearSuggestions();\r\n      return;\r\n    }\r\n\r\n    if (key === \"Backspace\" && inputValue === \"\" && tagList.length > 0) {\r\n      const last = tagList[tagList.length - 1];\r\n      removeTag(last);\r\n    }\r\n  };\r\n\r\n  const wrapperClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.tagInput,\r\n        classMap[theme],\r\n        classMap[state],\r\n        classMap[size],\r\n      ),\r\n    [classMap, theme, state, size],\r\n  );\r\n\r\n  const tagClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.tag,\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n      ),\r\n    [classMap, shadow, rounding],\r\n  );\r\n\r\n  const handleSuggestionClick = (suggestion: string): void => {\r\n    if (addTag(suggestion)) setInputValue(\"\");\r\n    clearSuggestions();\r\n  };\r\n\r\n  const activeOptionId =\r\n    open && activeIndex >= 0 ? `${listboxId}-opt-${activeIndex}` : undefined;\r\n\r\n  const groupDescribedBy = [descId, statusId, ariaDescribedBy]\r\n    .filter(Boolean)\r\n    .join(\" \");\r\n\r\n  const inputDescribedBy = [descId, statusId, inputAriaDescribedBy]\r\n    .filter(Boolean)\r\n    .join(\" \");\r\n\r\n  return (\r\n    <div\r\n      className={wrapperClass}\r\n      role=\"group\"\r\n      aria-label={ariaLabelledBy ? undefined : ariaLabel}\r\n      aria-labelledby={ariaLabelledBy || labelId}\r\n      aria-describedby={groupDescribedBy || undefined}\r\n      data-testid={testId}\r\n    >\r\n      {!ariaLabelledBy && (\r\n        <label id={labelId} className=\"sr_only\">\r\n          {ariaLabel}\r\n        </label>\r\n      )}\r\n\r\n      <div\r\n        id={descId}\r\n        className=\"sr_only\"\r\n        data-testid={`${testId}-description`}\r\n      >\r\n        {ariaDescription}\r\n      </div>\r\n\r\n      <ul className={classMap.tagContainer} data-testid={`${testId}-list`}>\r\n        {tagList.map((tag, index) => (\r\n          <li\r\n            key={`${tag}-${index}`}\r\n            className={tagClass}\r\n            role=\"listitem\"\r\n            data-testid={`${testId}-tag-${index}`}\r\n          >\r\n            <span className={classMap.tagLabel}>{tag}</span>\r\n            <IconButton\r\n              type=\"button\"\r\n              aria-label={`${removeTagButtonLabel} ${tag}`}\r\n              className={classMap.removeButton}\r\n              onClick={() => removeTag(tag)}\r\n              data-testid={`${testId}-remove-${index}`}\r\n              icon={CloseIcon}\r\n              size=\"small\"\r\n              theme=\"clear\"\r\n              shadow=\"none\"\r\n              iconClassName={classMap.removeButtonIcon}\r\n              disabled={false}\r\n            />\r\n          </li>\r\n        ))}\r\n      </ul>\r\n\r\n      <div className={classMap.inputWrapper}>\r\n        <TextInput\r\n          id={inputId}\r\n          type=\"text\"\r\n          theme={theme}\r\n          state={state}\r\n          rounding={rounding}\r\n          shadow={shadow}\r\n          className={classMap.input}\r\n          value={inputValue}\r\n          placeholder={tagList.length === 0 ? placeholder : \"\"}\r\n          onChange={(val: string) => setInputValue(val)}\r\n          onKeyDown={handleKeyDown}\r\n          autoComplete=\"off\"\r\n          role=\"combobox\"\r\n          aria-autocomplete=\"list\"\r\n          aria-expanded={open}\r\n          aria-controls={listboxId}\r\n          aria-activedescendant={activeOptionId}\r\n          aria-label={inputAriaLabelledBy ? undefined : inputAriaLabel}\r\n          aria-labelledby={inputAriaLabelledBy}\r\n          aria-describedby={inputDescribedBy || undefined}\r\n          data-testid={`${testId}-input`}\r\n        />\r\n      </div>\r\n\r\n      {open && suggestions.length > 0 && (\r\n        <ul\r\n          className={classMap.suggestionList}\r\n          role=\"listbox\"\r\n          id={listboxId}\r\n          aria-label={suggestionsAriaLabel}\r\n          data-testid={`${testId}-suggestions`}\r\n        >\r\n          {suggestions.map((suggestion, index) => (\r\n            <li\r\n              key={`${suggestion}-${index}`}\r\n              id={`${listboxId}-opt-${index}`}\r\n              className={combineClassNames(\r\n                classMap.suggestionItem,\r\n                index === activeIndex && (classMap.active || \"\"),\r\n              )}\r\n              role=\"option\"\r\n              aria-selected={index === activeIndex}\r\n              onMouseDown={(e) => e.preventDefault()}\r\n              onClick={() => handleSuggestionClick(suggestion)}\r\n              data-testid={`${testId}-suggestion-${index}`}\r\n            >\r\n              {suggestion}\r\n            </li>\r\n          ))}\r\n        </ul>\r\n      )}\r\n\r\n      <div id={statusId} aria-live=\"polite\" className=\"sr_only\">\r\n        {open && suggestions.length > 0\r\n          ? `${suggestions.length} suggestion${suggestions.length === 1 ? \"\" : \"s\"} available.`\r\n          : \"\"}\r\n        {lastAction}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nTagInputBase.displayName = \"TagInputBase\";\r\nexport default TagInputBase;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport styles from \"./TagInput.module.scss\";\r\nimport { IconButton, TextInput } from \"@/index.next\";\r\nimport TagInputBase from \"../TagInputBase\";\r\nimport { TagInputProps } from \"../TagInput.types\";\r\n\r\nconst TagInput: React.FC<TagInputProps> = (props) => {\r\n  return (\r\n    <TagInputBase\r\n      {...props}\r\n      classMap={styles}\r\n      IconButton={IconButton}\r\n      TextInput={TextInput}\r\n    />\r\n  );\r\n};\r\nTagInput.displayName = \"TagInput\";\r\nexport default TagInput;\r\n"],"names":["IconButton","TextInput","tag"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,aAAuB,CAAA;AAE7B,MAAM,eAA4C,CAAC;AAAA,EACjD,OAAO;AAAA,EACP,cAAc,YAAY;AAAA,EAC1B,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,oBACE,kBAAkB;AAAA,EACpB,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,cAAc;AAAA,EACd,QAAQ,gBAAA;AAAA,EACR,QAAQ;AAAA,EACR,OAAO,eAAA;AAAA,EACP,WAAW,mBAAA;AAAA,EACX,SAAS,iBAAA;AAAA,EACT;AAAA,EACA,eAAe,SAAS;AAAA,EACxB;AAAA,EACA,YAAAA;AAAA,EACA,WAAAC;AACF,MAAM;AACJ,QAAM,MAAM,MAAA;AACZ,QAAM,SAAS,UAAU,UAAU,aAAa,GAAG;AAEnD,QAAM,UAAU,GAAG,MAAM;AACzB,QAAM,SAAS,GAAG,MAAM;AACxB,QAAM,UAAU,GAAG,MAAM;AACzB,QAAM,YAAY,GAAG,MAAM;AAC3B,QAAM,WAAW,GAAG,MAAM;AAE1B,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,EAAE;AAC/C,QAAM,CAAC,cAAc,eAAe,IAAI,SAAmB,IAAI;AAC/D,QAAM,CAAC,YAAY,aAAa,IAAI,SAAiB,EAAE;AACvD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAmB,CAAA,CAAE;AAC3D,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAiB,EAAE;AAEzD,QAAM,cAAc,OAA6C,IAAI;AAErE,YAAU,MAAM;AACd,oBAAgB,CAAC,SAAS;AACxB,UACE,KAAK,WAAW,KAAK,UACrB,KAAK,MAAM,CAACC,MAAK,UAAUA,SAAQ,KAAK,KAAK,CAAC,GAC9C;AACA,eAAO;AAAA,MACT;AAEA,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,IAAI,CAAC;AAET,QAAM,UAAU;AAEhB,QAAM,SAAS,CAAC,QACd,QAAQ,KAAK,CAAC,MAAM,EAAE,YAAA,MAAkB,IAAI,YAAA,CAAa;AAE3D,YAAU,MAAM;AACd,QAAI,CAAC,kBAAkB;AACrB,qBAAe,CAAA,CAAE;AACjB,cAAQ,KAAK;AACb,qBAAe,EAAE;AACjB;AAAA,IACF;AAEA,QAAI,YAAY,QAAS,cAAa,YAAY,OAAO;AAEzD,UAAM,QAAQ,WAAW,KAAA;AACzB,QAAI,CAAC,OAAO;AACV,qBAAe,CAAA,CAAE;AACjB,cAAQ,KAAK;AACb,qBAAe,EAAE;AACjB;AAAA,IACF;AAEA,gBAAY,UAAU,WAAW,YAAY;AAC3C,UAAI;AACF,cAAM,SAAS,MAAM,iBAAiB,KAAK;AAC3C,uBAAe,UAAU,EAAE;AAC3B,kBAAS,iCAAQ,WAAU,KAAK,CAAC;AACjC,yBAAgB,iCAAQ,WAAU,KAAK,IAAI,IAAI,EAAE;AAAA,MACnD,QAAQ;AACN,uBAAe,CAAA,CAAE;AACjB,gBAAQ,KAAK;AACb,uBAAe,EAAE;AAAA,MACnB;AAAA,IACF,GAAG,UAAU;AAEb,WAAO,MAAM;AACX,UAAI,YAAY,QAAS,cAAa,YAAY,OAAO;AAAA,IAC3D;AAAA,EACF,GAAG,CAAC,YAAY,kBAAkB,UAAU,CAAC;AAE7C,QAAM,aAAa,CAAC,YAA4B;AAC9C,oBAAgB,OAAO;AACvB,yCAAW;AAAA,EACb;AAEA,QAAM,SAAS,CAAC,QAAgB;AAC9B,UAAM,SAAS,IAAI,KAAA;AACnB,QAAI,CAAC,UAAU,OAAO,MAAM,EAAG,QAAO;AAEtC,UAAM,UAAU,CAAC,GAAG,SAAS,MAAM;AACnC,eAAW,OAAO;AAClB,kBAAc,aAAa,MAAM,GAAG;AACpC,WAAO;AAAA,EACT;AAEA,QAAM,YAAY,CAACA,SAAgB;AACjC,UAAM,UAAU,QAAQ,OAAO,CAAC,MAAM,MAAMA,IAAG;AAC/C,eAAW,OAAO;AAClB,kBAAc,eAAeA,IAAG,GAAG;AAAA,EACrC;AAEA,QAAM,mBAAmB,MAAY;AACnC,mBAAe,CAAA,CAAE;AACjB,YAAQ,KAAK;AACb,mBAAe,EAAE;AAAA,EACnB;AAEA,QAAM,gBAAgB,CAAC,UAA2C;AAChE,UAAM,EAAE,QAAQ;AAEhB,QAAI,QAAQ,YAAY,SAAS,GAAG;AAClC,UAAI,QAAQ,aAAa;AACvB,cAAM,eAAA;AACN,uBAAe,CAAC,OAAO,IAAI,KAAK,YAAY,MAAM;AAClD;AAAA,MACF;AAEA,UAAI,QAAQ,WAAW;AACrB,cAAM,eAAA;AACN;AAAA,UACE,CAAC,OAAO,IAAI,IAAI,YAAY,UAAU,YAAY;AAAA,QAAA;AAEpD;AAAA,MACF;AAEA,UAAI,QAAQ,SAAS;AACnB,cAAM,eAAA;AACN,cAAM,SAAS,YAAY,WAAW;AACtC,YAAI,UAAU,OAAO,MAAM,GAAG;AAC5B,wBAAc,EAAE;AAAA,QAClB;AACA,yBAAA;AACA;AAAA,MACF;AAEA,UAAI,QAAQ,UAAU;AACpB,cAAM,eAAA;AACN,yBAAA;AACA;AAAA,MACF;AAAA,IACF;AAEA,QAAI,QAAQ,WAAW,QAAQ,KAAK;AAClC,YAAM,eAAA;AACN,UAAI,OAAO,UAAU,EAAG,eAAc,EAAE;AACxC,uBAAA;AACA;AAAA,IACF;AAEA,QAAI,QAAQ,eAAe,eAAe,MAAM,QAAQ,SAAS,GAAG;AAClE,YAAM,OAAO,QAAQ,QAAQ,SAAS,CAAC;AACvC,gBAAU,IAAI;AAAA,IAChB;AAAA,EACF;AAEA,QAAM,eAAe;AAAA,IACnB,MACE;AAAA,MACE,SAAS;AAAA,MACT,SAAS,KAAK;AAAA,MACd,SAAS,KAAK;AAAA,MACd,SAAS,IAAI;AAAA,IAAA;AAAA,IAEjB,CAAC,UAAU,OAAO,OAAO,IAAI;AAAA,EAAA;AAG/B,QAAM,WAAW;AAAA,IACf,MACE;AAAA,MACE,SAAS;AAAA,MACT,UAAU,SAAS,SAAS,WAAW,MAAM,CAAC,EAAE;AAAA,MAChD,YAAY,SAAS,QAAQ,WAAW,QAAQ,CAAC,EAAE;AAAA,IAAA;AAAA,IAEvD,CAAC,UAAU,QAAQ,QAAQ;AAAA,EAAA;AAG7B,QAAM,wBAAwB,CAAC,eAA6B;AAC1D,QAAI,OAAO,UAAU,EAAG,eAAc,EAAE;AACxC,qBAAA;AAAA,EACF;AAEA,QAAM,iBACJ,QAAQ,eAAe,IAAI,GAAG,SAAS,QAAQ,WAAW,KAAK;AAEjE,QAAM,mBAAmB,CAAC,QAAQ,UAAU,eAAe,EACxD,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,QAAM,mBAAmB,CAAC,QAAQ,UAAU,oBAAoB,EAC7D,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,MACX,MAAK;AAAA,MACL,cAAY,iBAAiB,SAAY;AAAA,MACzC,mBAAiB,kBAAkB;AAAA,MACnC,oBAAkB,oBAAoB;AAAA,MACtC,eAAa;AAAA,MAEZ,UAAA;AAAA,QAAA,CAAC,kBACA,oBAAC,SAAA,EAAM,IAAI,SAAS,WAAU,WAC3B,UAAA,WACH;AAAA,QAGF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ,WAAU;AAAA,YACV,eAAa,GAAG,MAAM;AAAA,YAErB,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGH,oBAAC,MAAA,EAAG,WAAW,SAAS,cAAc,eAAa,GAAG,MAAM,SACzD,UAAA,QAAQ,IAAI,CAACA,MAAK,UACjB;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAW;AAAA,YACX,MAAK;AAAA,YACL,eAAa,GAAG,MAAM,QAAQ,KAAK;AAAA,YAEnC,UAAA;AAAA,cAAA,oBAAC,QAAA,EAAK,WAAW,SAAS,UAAW,UAAAA,MAAI;AAAA,cACzC;AAAA,gBAACF;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,cAAY,GAAG,oBAAoB,IAAIE,IAAG;AAAA,kBAC1C,WAAW,SAAS;AAAA,kBACpB,SAAS,MAAM,UAAUA,IAAG;AAAA,kBAC5B,eAAa,GAAG,MAAM,WAAW,KAAK;AAAA,kBACtC,MAAM;AAAA,kBACN,MAAK;AAAA,kBACL,OAAM;AAAA,kBACN,QAAO;AAAA,kBACP,eAAe,SAAS;AAAA,kBACxB,UAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,YACZ;AAAA,UAAA;AAAA,UAlBK,GAAGA,IAAG,IAAI,KAAK;AAAA,QAAA,CAoBvB,GACH;AAAA,QAEA,oBAAC,OAAA,EAAI,WAAW,SAAS,cACvB,UAAA;AAAA,UAACD;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,YACJ,MAAK;AAAA,YACL;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,WAAW,SAAS;AAAA,YACpB,OAAO;AAAA,YACP,aAAa,QAAQ,WAAW,IAAI,cAAc;AAAA,YAClD,UAAU,CAAC,QAAgB,cAAc,GAAG;AAAA,YAC5C,WAAW;AAAA,YACX,cAAa;AAAA,YACb,MAAK;AAAA,YACL,qBAAkB;AAAA,YAClB,iBAAe;AAAA,YACf,iBAAe;AAAA,YACf,yBAAuB;AAAA,YACvB,cAAY,sBAAsB,SAAY;AAAA,YAC9C,mBAAiB;AAAA,YACjB,oBAAkB,oBAAoB;AAAA,YACtC,eAAa,GAAG,MAAM;AAAA,UAAA;AAAA,QAAA,GAE1B;AAAA,QAEC,QAAQ,YAAY,SAAS,KAC5B;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,SAAS;AAAA,YACpB,MAAK;AAAA,YACL,IAAI;AAAA,YACJ,cAAY;AAAA,YACZ,eAAa,GAAG,MAAM;AAAA,YAErB,UAAA,YAAY,IAAI,CAAC,YAAY,UAC5B;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,IAAI,GAAG,SAAS,QAAQ,KAAK;AAAA,gBAC7B,WAAW;AAAA,kBACT,SAAS;AAAA,kBACT,UAAU,gBAAgB,SAAS,UAAU;AAAA,gBAAA;AAAA,gBAE/C,MAAK;AAAA,gBACL,iBAAe,UAAU;AAAA,gBACzB,aAAa,CAAC,MAAM,EAAE,eAAA;AAAA,gBACtB,SAAS,MAAM,sBAAsB,UAAU;AAAA,gBAC/C,eAAa,GAAG,MAAM,eAAe,KAAK;AAAA,gBAEzC,UAAA;AAAA,cAAA;AAAA,cAZI,GAAG,UAAU,IAAI,KAAK;AAAA,YAAA,CAc9B;AAAA,UAAA;AAAA,QAAA;AAAA,6BAIJ,OAAA,EAAI,IAAI,UAAU,aAAU,UAAS,WAAU,WAC7C,UAAA;AAAA,UAAA,QAAQ,YAAY,SAAS,IAC1B,GAAG,YAAY,MAAM,cAAc,YAAY,WAAW,IAAI,KAAK,GAAG,gBACtE;AAAA,UACH;AAAA,QAAA,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,aAAa,cAAc;ACjV3B,MAAM,WAAoC,CAAC,UAAU;AACnD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU;AAAA,MACV;AAAA,MACA;AAAA,IAAA;AAAA,EAAA;AAGN;AACA,SAAS,cAAc;"}

package/dist/next/{TagInput-BXTLgtkv.cjs → TagInput-DldSDmHu.cjs}

@@ -1,8 +1,8 @@
 "use strict";
 const require$$2 = require("react/jsx-runtime");
 ;/* empty css                   */
-const IconButton = require("./IconButton-BNXb1M9u.cjs");
-const TextInput = require("./TextInput-D2ptuAkp.cjs");
+const IconButton = require("./IconButton-C4OC99ig.cjs");
+const TextInput = require("./TextInput-cfBWD6de.cjs");
 const React = require("react");
 const CloseIcon = require("./CloseIcon-7hy4qJ9o.cjs");
 const classNames = require("./classNames-BcWMx052.cjs");
@@ -93,9 +93,18 @@ const styles = {
   "indeterminate-move": "_indeterminate-move_1vvv7_1",
   "skeleton-loading": "_skeleton-loading_1vvv7_1"
 };
+const EMPTY_TAGS = [];
 const TagInputBase = ({
-  tags = [],
-  ariaLabel = "Tag Input",
+  tags = EMPTY_TAGS,
+  "aria-label": ariaLabel = "Tag Input",
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-description": ariaDescription = "Type a tag and press Enter or comma to add. Use arrow keys to navigate suggestions; Enter to select; Escape to close. Backspace removes the last tag when the field is empty.",
+  inputAriaLabel = "Add new tag",
+  inputAriaLabelledBy,
+  inputAriaDescribedBy,
+  suggestionsAriaLabel = "Tag suggestions",
+  removeTagButtonLabel = "Remove tag",
   onChange,
   fetchSuggestions,
   debounceMs = 300,
@@ -105,34 +114,41 @@ const TagInputBase = ({
   size = borealStyleConfig.getDefaultSize(),
   rounding = borealStyleConfig.getDefaultRounding(),
   shadow = borealStyleConfig.getDefaultShadow(),
+  idBase,
   "data-testid": testId = "tag-input",
-  ariaDescription = "Type a tag and press Enter or comma to add. Use arrow keys to navigate suggestions; Enter to select; Escape to close. Backspace removes the last tag when the field is empty.",
   classMap,
   IconButton: IconButton2,
   TextInput: TextInput2
 }) => {
   const uid = React.useId();
-  const inputId = `${testId}-input-${uid}`;
-  const descId = `${testId}-desc-${uid}`;
-  const labelId = `${testId}-label-${uid}`;
-  const listboxId = `${testId}-listbox-${uid}`;
-  const statusId = `${testId}-status-${uid}`;
+  const baseId = idBase || testId || `tag-input-${uid}`;
+  const inputId = `${baseId}-input`;
+  const descId = `${baseId}-desc`;
+  const labelId = `${baseId}-label`;
+  const listboxId = `${baseId}-listbox`;
+  const statusId = `${baseId}-status`;
   const [inputValue, setInputValue] = React.useState("");
   const [internalTags, setInternalTags] = React.useState(tags);
-  React.useEffect(() => {
-    setInternalTags(tags);
-  }, [tags]);
-  const tagList = internalTags;
   const [lastAction, setLastAction] = React.useState("");
   const [suggestions, setSuggestions] = React.useState([]);
   const [open, setOpen] = React.useState(false);
   const [activeIndex, setActiveIndex] = React.useState(-1);
   const debounceRef = React.useRef(null);
+  React.useEffect(() => {
+    setInternalTags((prev) => {
+      if (prev.length === tags.length && prev.every((tag2, index) => tag2 === tags[index])) {
+        return prev;
+      }
+      return tags;
+    });
+  }, [tags]);
+  const tagList = internalTags;
   const hasTag = (val) => tagList.some((t) => t.toLowerCase() === val.toLowerCase());
   React.useEffect(() => {
     if (!fetchSuggestions) {
       setSuggestions([]);
       setOpen(false);
+      setActiveIndex(-1);
       return;
     }
     if (debounceRef.current) clearTimeout(debounceRef.current);
@@ -202,25 +218,19 @@ const TagInputBase = ({
         if (choice && addTag(choice)) {
           setInputValue("");
         }
-        setSuggestions([]);
-        setOpen(false);
-        setActiveIndex(-1);
+        clearSuggestions();
         return;
       }
       if (key === "Escape") {
         event.preventDefault();
-        setSuggestions([]);
-        setOpen(false);
-        setActiveIndex(-1);
+        clearSuggestions();
         return;
       }
     }
     if (key === "Enter" || key === ",") {
       event.preventDefault();
       if (addTag(inputValue)) setInputValue("");
-      setSuggestions([]);
-      setOpen(false);
-      setActiveIndex(-1);
+      clearSuggestions();
       return;
     }
     if (key === "Backspace" && inputValue === "" && tagList.length > 0) {
@@ -250,17 +260,19 @@ const TagInputBase = ({
     clearSuggestions();
   };
   const activeOptionId = open && activeIndex >= 0 ? `${listboxId}-opt-${activeIndex}` : void 0;
+  const groupDescribedBy = [descId, statusId, ariaDescribedBy].filter(Boolean).join(" ");
+  const inputDescribedBy = [descId, statusId, inputAriaDescribedBy].filter(Boolean).join(" ");
   return /* @__PURE__ */ require$$2.jsxs(
     "div",
     {
       className: wrapperClass,
       role: "group",
-      "aria-labelledby": labelId,
-      "aria-describedby": `${descId} ${statusId}`,
+      "aria-label": ariaLabelledBy ? void 0 : ariaLabel,
+      "aria-labelledby": ariaLabelledBy || labelId,
+      "aria-describedby": groupDescribedBy || void 0,
       "data-testid": testId,
-      "aria-label": ariaLabel,
       children: [
-        /* @__PURE__ */ require$$2.jsx("label", { id: labelId, className: "sr_only", children: ariaLabel }),
+        !ariaLabelledBy && /* @__PURE__ */ require$$2.jsx("label", { id: labelId, className: "sr_only", children: ariaLabel }),
         /* @__PURE__ */ require$$2.jsx(
           "div",
           {
@@ -282,7 +294,7 @@ const TagInputBase = ({
                 IconButton2,
                 {
                   type: "button",
-                  ariaLabel: `Remove tag ${tag2}`,
+                  "aria-label": `${removeTagButtonLabel} ${tag2}`,
                   className: classMap.removeButton,
                   onClick: () => removeTag(tag2),
                   "data-testid": `${testId}-remove-${index}`,
@@ -318,8 +330,9 @@ const TagInputBase = ({
             "aria-expanded": open,
             "aria-controls": listboxId,
             "aria-activedescendant": activeOptionId,
-            "aria-label": "Add new tag",
-            "aria-describedby": `${descId} ${statusId}`,
+            "aria-label": inputAriaLabelledBy ? void 0 : inputAriaLabel,
+            "aria-labelledby": inputAriaLabelledBy,
+            "aria-describedby": inputDescribedBy || void 0,
             "data-testid": `${testId}-input`
           }
         ) }),
@@ -329,7 +342,7 @@ const TagInputBase = ({
             className: classMap.suggestionList,
             role: "listbox",
             id: listboxId,
-            "aria-label": "Tag suggestions",
+            "aria-label": suggestionsAriaLabel,
             "data-testid": `${testId}-suggestions`,
             children: suggestions.map((suggestion, index) => /* @__PURE__ */ require$$2.jsx(
               "li",
@@ -372,4 +385,4 @@ const TagInput = (props) => {
 };
 TagInput.displayName = "TagInput";
 exports.TagInput = TagInput;
-//# sourceMappingURL=TagInput-BXTLgtkv.cjs.map
+//# sourceMappingURL=TagInput-DldSDmHu.cjs.map

package/dist/next/TagInput-DldSDmHu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagInput-DldSDmHu.cjs","sources":["../../src/components/TagInput/TagInputBase.tsx","../../src/components/TagInput/next/TagInput.tsx"],"sourcesContent":["import React, {\r\n  useId,\r\n  useState,\r\n  KeyboardEvent,\r\n  useMemo,\r\n  useEffect,\r\n  useRef,\r\n} from \"react\";\r\nimport { TagInputBaseProps } from \"./TagInput.types\";\r\nimport { CloseIcon } from \"../../Icons\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultSize,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst EMPTY_TAGS: string[] = [];\r\n\r\nconst TagInputBase: React.FC<TagInputBaseProps> = ({\r\n  tags = EMPTY_TAGS,\r\n  \"aria-label\": ariaLabel = \"Tag Input\",\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-describedby\": ariaDescribedBy,\r\n  \"aria-description\":\r\n    ariaDescription = \"Type a tag and press Enter or comma to add. Use arrow keys to navigate suggestions; Enter to select; Escape to close. Backspace removes the last tag when the field is empty.\",\r\n  inputAriaLabel = \"Add new tag\",\r\n  inputAriaLabelledBy,\r\n  inputAriaDescribedBy,\r\n  suggestionsAriaLabel = \"Tag suggestions\",\r\n  removeTagButtonLabel = \"Remove tag\",\r\n  onChange,\r\n  fetchSuggestions,\r\n  debounceMs = 300,\r\n  placeholder = \"Add a tag...\",\r\n  theme = getDefaultTheme(),\r\n  state = \"\",\r\n  size = getDefaultSize(),\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  idBase,\r\n  \"data-testid\": testId = \"tag-input\",\r\n  classMap,\r\n  IconButton,\r\n  TextInput,\r\n}) => {\r\n  const uid = useId();\r\n  const baseId = idBase || testId || `tag-input-${uid}`;\r\n\r\n  const inputId = `${baseId}-input`;\r\n  const descId = `${baseId}-desc`;\r\n  const labelId = `${baseId}-label`;\r\n  const listboxId = `${baseId}-listbox`;\r\n  const statusId = `${baseId}-status`;\r\n\r\n  const [inputValue, setInputValue] = useState(\"\");\r\n  const [internalTags, setInternalTags] = useState<string[]>(tags);\r\n  const [lastAction, setLastAction] = useState<string>(\"\");\r\n  const [suggestions, setSuggestions] = useState<string[]>([]);\r\n  const [open, setOpen] = useState(false);\r\n  const [activeIndex, setActiveIndex] = useState<number>(-1);\r\n\r\n  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);\r\n\r\n  useEffect(() => {\r\n    setInternalTags((prev) => {\r\n      if (\r\n        prev.length === tags.length &&\r\n        prev.every((tag, index) => tag === tags[index])\r\n      ) {\r\n        return prev;\r\n      }\r\n\r\n      return tags;\r\n    });\r\n  }, [tags]);\r\n\r\n  const tagList = internalTags;\r\n\r\n  const hasTag = (val: string) =>\r\n    tagList.some((t) => t.toLowerCase() === val.toLowerCase());\r\n\r\n  useEffect(() => {\r\n    if (!fetchSuggestions) {\r\n      setSuggestions([]);\r\n      setOpen(false);\r\n      setActiveIndex(-1);\r\n      return;\r\n    }\r\n\r\n    if (debounceRef.current) clearTimeout(debounceRef.current);\r\n\r\n    const query = inputValue.trim();\r\n    if (!query) {\r\n      setSuggestions([]);\r\n      setOpen(false);\r\n      setActiveIndex(-1);\r\n      return;\r\n    }\r\n\r\n    debounceRef.current = setTimeout(async () => {\r\n      try {\r\n        const result = await fetchSuggestions(query);\r\n        setSuggestions(result || []);\r\n        setOpen((result?.length ?? 0) > 0);\r\n        setActiveIndex((result?.length ?? 0) > 0 ? 0 : -1);\r\n      } catch {\r\n        setSuggestions([]);\r\n        setOpen(false);\r\n        setActiveIndex(-1);\r\n      }\r\n    }, debounceMs);\r\n\r\n    return () => {\r\n      if (debounceRef.current) clearTimeout(debounceRef.current);\r\n    };\r\n  }, [inputValue, fetchSuggestions, debounceMs]);\r\n\r\n  const emitChange = (updated: string[]): void => {\r\n    setInternalTags(updated);\r\n    onChange?.(updated);\r\n  };\r\n\r\n  const addTag = (raw: string) => {\r\n    const newTag = raw.trim();\r\n    if (!newTag || hasTag(newTag)) return false;\r\n\r\n    const updated = [...tagList, newTag];\r\n    emitChange(updated);\r\n    setLastAction(`Added tag ${newTag}.`);\r\n    return true;\r\n  };\r\n\r\n  const removeTag = (tag: string) => {\r\n    const updated = tagList.filter((t) => t !== tag);\r\n    emitChange(updated);\r\n    setLastAction(`Removed tag ${tag}.`);\r\n  };\r\n\r\n  const clearSuggestions = (): void => {\r\n    setSuggestions([]);\r\n    setOpen(false);\r\n    setActiveIndex(-1);\r\n  };\r\n\r\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\r\n    const { key } = event;\r\n\r\n    if (open && suggestions.length > 0) {\r\n      if (key === \"ArrowDown\") {\r\n        event.preventDefault();\r\n        setActiveIndex((i) => (i + 1) % suggestions.length);\r\n        return;\r\n      }\r\n\r\n      if (key === \"ArrowUp\") {\r\n        event.preventDefault();\r\n        setActiveIndex(\r\n          (i) => (i - 1 + suggestions.length) % suggestions.length,\r\n        );\r\n        return;\r\n      }\r\n\r\n      if (key === \"Enter\") {\r\n        event.preventDefault();\r\n        const choice = suggestions[activeIndex];\r\n        if (choice && addTag(choice)) {\r\n          setInputValue(\"\");\r\n        }\r\n        clearSuggestions();\r\n        return;\r\n      }\r\n\r\n      if (key === \"Escape\") {\r\n        event.preventDefault();\r\n        clearSuggestions();\r\n        return;\r\n      }\r\n    }\r\n\r\n    if (key === \"Enter\" || key === \",\") {\r\n      event.preventDefault();\r\n      if (addTag(inputValue)) setInputValue(\"\");\r\n      clearSuggestions();\r\n      return;\r\n    }\r\n\r\n    if (key === \"Backspace\" && inputValue === \"\" && tagList.length > 0) {\r\n      const last = tagList[tagList.length - 1];\r\n      removeTag(last);\r\n    }\r\n  };\r\n\r\n  const wrapperClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.tagInput,\r\n        classMap[theme],\r\n        classMap[state],\r\n        classMap[size],\r\n      ),\r\n    [classMap, theme, state, size],\r\n  );\r\n\r\n  const tagClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.tag,\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n      ),\r\n    [classMap, shadow, rounding],\r\n  );\r\n\r\n  const handleSuggestionClick = (suggestion: string): void => {\r\n    if (addTag(suggestion)) setInputValue(\"\");\r\n    clearSuggestions();\r\n  };\r\n\r\n  const activeOptionId =\r\n    open && activeIndex >= 0 ? `${listboxId}-opt-${activeIndex}` : undefined;\r\n\r\n  const groupDescribedBy = [descId, statusId, ariaDescribedBy]\r\n    .filter(Boolean)\r\n    .join(\" \");\r\n\r\n  const inputDescribedBy = [descId, statusId, inputAriaDescribedBy]\r\n    .filter(Boolean)\r\n    .join(\" \");\r\n\r\n  return (\r\n    <div\r\n      className={wrapperClass}\r\n      role=\"group\"\r\n      aria-label={ariaLabelledBy ? undefined : ariaLabel}\r\n      aria-labelledby={ariaLabelledBy || labelId}\r\n      aria-describedby={groupDescribedBy || undefined}\r\n      data-testid={testId}\r\n    >\r\n      {!ariaLabelledBy && (\r\n        <label id={labelId} className=\"sr_only\">\r\n          {ariaLabel}\r\n        </label>\r\n      )}\r\n\r\n      <div\r\n        id={descId}\r\n        className=\"sr_only\"\r\n        data-testid={`${testId}-description`}\r\n      >\r\n        {ariaDescription}\r\n      </div>\r\n\r\n      <ul className={classMap.tagContainer} data-testid={`${testId}-list`}>\r\n        {tagList.map((tag, index) => (\r\n          <li\r\n            key={`${tag}-${index}`}\r\n            className={tagClass}\r\n            role=\"listitem\"\r\n            data-testid={`${testId}-tag-${index}`}\r\n          >\r\n            <span className={classMap.tagLabel}>{tag}</span>\r\n            <IconButton\r\n              type=\"button\"\r\n              aria-label={`${removeTagButtonLabel} ${tag}`}\r\n              className={classMap.removeButton}\r\n              onClick={() => removeTag(tag)}\r\n              data-testid={`${testId}-remove-${index}`}\r\n              icon={CloseIcon}\r\n              size=\"small\"\r\n              theme=\"clear\"\r\n              shadow=\"none\"\r\n              iconClassName={classMap.removeButtonIcon}\r\n              disabled={false}\r\n            />\r\n          </li>\r\n        ))}\r\n      </ul>\r\n\r\n      <div className={classMap.inputWrapper}>\r\n        <TextInput\r\n          id={inputId}\r\n          type=\"text\"\r\n          theme={theme}\r\n          state={state}\r\n          rounding={rounding}\r\n          shadow={shadow}\r\n          className={classMap.input}\r\n          value={inputValue}\r\n          placeholder={tagList.length === 0 ? placeholder : \"\"}\r\n          onChange={(val: string) => setInputValue(val)}\r\n          onKeyDown={handleKeyDown}\r\n          autoComplete=\"off\"\r\n          role=\"combobox\"\r\n          aria-autocomplete=\"list\"\r\n          aria-expanded={open}\r\n          aria-controls={listboxId}\r\n          aria-activedescendant={activeOptionId}\r\n          aria-label={inputAriaLabelledBy ? undefined : inputAriaLabel}\r\n          aria-labelledby={inputAriaLabelledBy}\r\n          aria-describedby={inputDescribedBy || undefined}\r\n          data-testid={`${testId}-input`}\r\n        />\r\n      </div>\r\n\r\n      {open && suggestions.length > 0 && (\r\n        <ul\r\n          className={classMap.suggestionList}\r\n          role=\"listbox\"\r\n          id={listboxId}\r\n          aria-label={suggestionsAriaLabel}\r\n          data-testid={`${testId}-suggestions`}\r\n        >\r\n          {suggestions.map((suggestion, index) => (\r\n            <li\r\n              key={`${suggestion}-${index}`}\r\n              id={`${listboxId}-opt-${index}`}\r\n              className={combineClassNames(\r\n                classMap.suggestionItem,\r\n                index === activeIndex && (classMap.active || \"\"),\r\n              )}\r\n              role=\"option\"\r\n              aria-selected={index === activeIndex}\r\n              onMouseDown={(e) => e.preventDefault()}\r\n              onClick={() => handleSuggestionClick(suggestion)}\r\n              data-testid={`${testId}-suggestion-${index}`}\r\n            >\r\n              {suggestion}\r\n            </li>\r\n          ))}\r\n        </ul>\r\n      )}\r\n\r\n      <div id={statusId} aria-live=\"polite\" className=\"sr_only\">\r\n        {open && suggestions.length > 0\r\n          ? `${suggestions.length} suggestion${suggestions.length === 1 ? \"\" : \"s\"} available.`\r\n          : \"\"}\r\n        {lastAction}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n\r\nTagInputBase.displayName = \"TagInputBase\";\r\nexport default TagInputBase;\r\n","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport styles from \"./TagInput.module.scss\";\r\nimport { IconButton, TextInput } from \"@/index.next\";\r\nimport TagInputBase from \"../TagInputBase\";\r\nimport { TagInputProps } from \"../TagInput.types\";\r\n\r\nconst TagInput: React.FC<TagInputProps> = (props) => {\r\n  return (\r\n    <TagInputBase\r\n      {...props}\r\n      classMap={styles}\r\n      IconButton={IconButton}\r\n      TextInput={TextInput}\r\n    />\r\n  );\r\n};\r\nTagInput.displayName = \"TagInput\";\r\nexport default TagInput;\r\n"],"names":["getDefaultTheme","getDefaultSize","getDefaultRounding","getDefaultShadow","IconButton","TextInput","useId","useState","useRef","useEffect","tag","useMemo","combineClassNames","capitalize","jsxs","jsx","CloseIcon"],"mappings":"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"}

package/dist/next/TagInput.cjs.js

@@ -1,4 +1,4 @@
 "use strict";
-const TagInput = require("./TagInput-BXTLgtkv.cjs");
+const TagInput = require("./TagInput-DldSDmHu.cjs");
 module.exports = TagInput.TagInput;
 //# sourceMappingURL=TagInput.cjs.js.map

package/dist/next/TagInput.js

@@ -1,4 +1,4 @@
-import { T } from "./TagInput-D--kg_iB.js";
+import { T } from "./TagInput-CXvw8ogs.js";
 export {
   T as default
 };

package/dist/next/{TextArea-fYn3QxpQ.cjs → TextArea-BXmbrq4-.cjs}

@@ -19,8 +19,11 @@ const TextAreaBase = React.forwardRef(
     shadow = borealStyleConfig.getDefaultShadow(),
     state = "",
     resizable = true,
-    ariaLabel,
-    ariaDescription,
+    "aria-label": ariaLabel,
+    "aria-description": ariaDescription,
+    helperText,
+    errorMessage,
+    describedBy,
     disabled: disabled2 = false,
     height,
     classMap,
@@ -28,11 +31,19 @@ const TextAreaBase = React.forwardRef(
     "data-testid": testId = "text-area",
     id: idProp,
     required,
+    // Native accessibility props
+    "aria-label": ariaLabelProp,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedByProp,
+    "aria-errormessage": ariaErrorMessageProp,
     ...props
   }, ref) => {
     const autoId = React.useId();
     const id = idProp || autoId;
+    const labelId = label2 ? `${id}-label` : void 0;
     const descriptionId = ariaDescription ? `${id}-description` : void 0;
+    const helperTextId = helperText ? `${id}-helper-text` : void 0;
+    const internalErrorId = errorMessage ? `${id}-error-message` : void 0;
     const wrapperClass = React.useMemo(
       () => classNames.combineClassNames(
         classMap.textArea,
@@ -46,9 +57,16 @@ const TextAreaBase = React.forwardRef(
       ),
       [classMap, theme, state, outline2, disabled2, shadow, rounding, className]
     );
-    const computedLabel = !label2 ? ariaLabel || placeholder : void 0;
-    const describedBy = descriptionId || void 0;
     const isError = state === "error";
+    const computedAriaLabel = !ariaLabelledBy && !label2 ? ariaLabelProp || ariaLabel || placeholder : void 0;
+    const describedByIds = [
+      ariaDescribedByProp,
+      describedBy,
+      descriptionId,
+      helperTextId,
+      isError ? internalErrorId : void 0
+    ].filter(Boolean).join(" ") || void 0;
+    const errorMessageId = isError && (ariaErrorMessageProp || internalErrorId) ? ariaErrorMessageProp || internalErrorId : void 0;
     return /* @__PURE__ */ require$$2.jsxs(
       "div",
       {
@@ -61,20 +79,21 @@ const TextAreaBase = React.forwardRef(
           label2 && /* @__PURE__ */ require$$2.jsx(
             "label",
             {
+              id: labelId,
               htmlFor: id,
               className: classMap.label,
               "data-testid": `${testId}-label`,
               children: label2
             }
           ),
-          /* @__PURE__ */ require$$2.jsxs("div", { className: wrapperClass, "data-testid": testId, children: [
+          /* @__PURE__ */ require$$2.jsxs("div", { className: wrapperClass, "data-testid": `${testId}-wrapper`, children: [
             Icon && /* @__PURE__ */ require$$2.jsx(
               "div",
               {
                 className: classMap.iconContainer,
                 "aria-hidden": "true",
                 "data-testid": `${testId}-icon`,
-                children: /* @__PURE__ */ require$$2.jsx(Icon, { "aria-hidden": "true" })
+                children: /* @__PURE__ */ require$$2.jsx(Icon, { "aria-hidden": true })
               }
             ),
             /* @__PURE__ */ require$$2.jsx(
@@ -83,8 +102,10 @@ const TextAreaBase = React.forwardRef(
                 ref,
                 id,
                 placeholder,
-                "aria-label": computedLabel,
-                "aria-describedby": describedBy,
+                "aria-label": computedAriaLabel,
+                "aria-labelledby": ariaLabelledBy || (!ariaLabelledBy && label2 ? labelId : void 0),
+                "aria-describedby": describedByIds,
+                "aria-errormessage": errorMessageId,
                 "aria-invalid": isError || void 0,
                 "aria-required": required || void 0,
                 "aria-readonly": readOnly || void 0,
@@ -120,7 +141,26 @@ const TextAreaBase = React.forwardRef(
                 children: ariaDescription
               }
             )
-          ] })
+          ] }),
+          helperText && /* @__PURE__ */ require$$2.jsx(
+            "div",
+            {
+              id: helperTextId,
+              className: classMap.helperText,
+              "data-testid": `${testId}-helper-text`,
+              children: helperText
+            }
+          ),
+          errorMessage && /* @__PURE__ */ require$$2.jsx(
+            "div",
+            {
+              id: internalErrorId,
+              className: classMap.errorMessage,
+              role: isError ? "alert" : void 0,
+              "data-testid": `${testId}-error-message`,
+              children: errorMessage
+            }
+          )
         ]
       }
     );
@@ -196,4 +236,4 @@ const TextArea = React.forwardRef(
 );
 TextArea.displayName = "TextArea";
 exports.TextArea = TextArea;
-//# sourceMappingURL=TextArea-fYn3QxpQ.cjs.map
+//# sourceMappingURL=TextArea-BXmbrq4-.cjs.map

package/dist/next/TextArea-BXmbrq4-.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea-BXmbrq4-.cjs","sources":["../../src/components/TextArea/TextAreaBase.tsx","../../src/components/TextArea/next/TextArea.tsx"],"sourcesContent":["import { forwardRef, useId, useMemo } from \"react\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { TextAreaProps } from \"./TextArea.types\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\nconst TextAreaBase = forwardRef<\r\n  HTMLTextAreaElement,\r\n  TextAreaProps & { classMap: Record<string, string> }\r\n>(\r\n  (\r\n    {\r\n      label,\r\n      labelPosition = \"top\",\r\n      icon: Icon,\r\n      placeholder = \"Enter text\",\r\n      readOnly = false,\r\n      outline = false,\r\n      autocomplete = false,\r\n      onChange,\r\n      theme = getDefaultTheme(),\r\n      rounding = getDefaultRounding(),\r\n      shadow = getDefaultShadow(),\r\n      state = \"\",\r\n      resizable = true,\r\n\r\n      \"aria-label\": ariaLabel,\r\n      \"aria-description\": ariaDescription,\r\n      helperText,\r\n      errorMessage,\r\n      describedBy,\r\n      disabled = false,\r\n      height,\r\n      classMap,\r\n      className = \"\",\r\n      \"data-testid\": testId = \"text-area\",\r\n      id: idProp,\r\n      required,\r\n\r\n      // Native accessibility props\r\n      \"aria-label\": ariaLabelProp,\r\n      \"aria-labelledby\": ariaLabelledBy,\r\n      \"aria-describedby\": ariaDescribedByProp,\r\n      \"aria-errormessage\": ariaErrorMessageProp,\r\n\r\n      ...props\r\n    },\r\n    ref,\r\n  ) => {\r\n    const autoId = useId();\r\n    const id = idProp || autoId;\r\n\r\n    const labelId = label ? `${id}-label` : undefined;\r\n    const descriptionId = ariaDescription ? `${id}-description` : undefined;\r\n    const helperTextId = helperText ? `${id}-helper-text` : undefined;\r\n    const internalErrorId = errorMessage ? `${id}-error-message` : undefined;\r\n\r\n    const wrapperClass = useMemo(\r\n      () =>\r\n        combineClassNames(\r\n          classMap.textArea,\r\n          classMap[theme],\r\n          classMap[state],\r\n          outline && classMap.outline,\r\n          disabled && classMap.disabled,\r\n          shadow && classMap[`shadow${capitalize(shadow)}`],\r\n          rounding && classMap[`round${capitalize(rounding)}`],\r\n          className,\r\n        ),\r\n      [classMap, theme, state, outline, disabled, shadow, rounding, className],\r\n    );\r\n\r\n    const isError = state === \"error\";\r\n\r\n    const computedAriaLabel =\r\n      !ariaLabelledBy && !label\r\n        ? ariaLabelProp || ariaLabel || placeholder\r\n        : undefined;\r\n\r\n    const describedByIds =\r\n      [\r\n        ariaDescribedByProp,\r\n        describedBy,\r\n        descriptionId,\r\n        helperTextId,\r\n        isError ? internalErrorId : undefined,\r\n      ]\r\n        .filter(Boolean)\r\n        .join(\" \") || undefined;\r\n\r\n    const errorMessageId =\r\n      isError && (ariaErrorMessageProp || internalErrorId)\r\n        ? ariaErrorMessageProp || internalErrorId\r\n        : undefined;\r\n\r\n    return (\r\n      <div\r\n        className={combineClassNames(\r\n          classMap.container,\r\n          classMap[`label${capitalize(labelPosition)}`],\r\n        )}\r\n        data-testid={testId}\r\n      >\r\n        {label && (\r\n          <label\r\n            id={labelId}\r\n            htmlFor={id}\r\n            className={classMap.label}\r\n            data-testid={`${testId}-label`}\r\n          >\r\n            {label}\r\n          </label>\r\n        )}\r\n\r\n        <div className={wrapperClass} data-testid={`${testId}-wrapper`}>\r\n          {Icon && (\r\n            <div\r\n              className={classMap.iconContainer}\r\n              aria-hidden=\"true\"\r\n              data-testid={`${testId}-icon`}\r\n            >\r\n              <Icon aria-hidden={true} />\r\n            </div>\r\n          )}\r\n\r\n          <textarea\r\n            ref={ref}\r\n            id={id}\r\n            placeholder={placeholder}\r\n            aria-label={computedAriaLabel}\r\n            aria-labelledby={\r\n              ariaLabelledBy || (!ariaLabelledBy && label ? labelId : undefined)\r\n            }\r\n            aria-describedby={describedByIds}\r\n            aria-errormessage={errorMessageId}\r\n            aria-invalid={isError || undefined}\r\n            aria-required={required || undefined}\r\n            aria-readonly={readOnly || undefined}\r\n            aria-disabled={disabled || undefined}\r\n            autoComplete={autocomplete ? \"on\" : \"off\"}\r\n            onChange={(e) => onChange?.(e.currentTarget.value, e)}\r\n            readOnly={readOnly}\r\n            disabled={disabled}\r\n            required={required}\r\n            style={{\r\n              height,\r\n              resize: resizable ? undefined : \"none\",\r\n            }}\r\n            className={classMap.textInput}\r\n            data-testid={`${testId}-input`}\r\n            {...props}\r\n          />\r\n\r\n          <div\r\n            className={classMap.customResizeHandle}\r\n            aria-hidden=\"true\"\r\n            data-testid={`${testId}-resize-handle`}\r\n          />\r\n\r\n          {ariaDescription && (\r\n            <span\r\n              id={descriptionId}\r\n              className=\"sr_only\"\r\n              data-testid={`${testId}-description`}\r\n            >\r\n              {ariaDescription}\r\n            </span>\r\n          )}\r\n        </div>\r\n\r\n        {helperText && (\r\n          <div\r\n            id={helperTextId}\r\n            className={classMap.helperText}\r\n            data-testid={`${testId}-helper-text`}\r\n          >\r\n            {helperText}\r\n          </div>\r\n        )}\r\n\r\n        {errorMessage && (\r\n          <div\r\n            id={internalErrorId}\r\n            className={classMap.errorMessage}\r\n            role={isError ? \"alert\" : undefined}\r\n            data-testid={`${testId}-error-message`}\r\n          >\r\n            {errorMessage}\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nTextAreaBase.displayName = \"TextAreaBase\";\r\n\r\nexport default TextAreaBase;\r\n","\"use client\";\r\n\r\nimport { forwardRef } from \"react\";\r\nimport TextAreaBase from \"../TextAreaBase\";\r\nimport type { TextAreaProps } from \"../TextArea.types\";\r\nimport styles from \"./TextArea.module.scss\";\r\n\r\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\r\n  (props, ref) => {\r\n    return <TextAreaBase {...props} ref={ref} classMap={styles} />;\r\n  }\r\n);\r\n\r\nTextArea.displayName = \"TextArea\";\r\n\r\nexport default TextArea;\r\n"],"names":["forwardRef","label","outline","getDefaultTheme","getDefaultRounding","getDefaultShadow","disabled","useId","useMemo","combineClassNames","capitalize","jsxs","jsx"],"mappings":"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"}