@adam-milo/ui 1.0.23 → 1.0.24

package/dist/index15.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),t=require("@radix-ui/react-dialog"),o=require("./index17.cjs");function i(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const t in e)if("default"!==t){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,o.get?o:{enumerable:!0,get:()=>e[t]})}return a.default=e,Object.freeze(a)};/* empty css          */const r=i(t),s=r.Root,d=r.Trigger,l=r.Portal,c=r.Close,n=a.forwardRef(({className:a,"data-cy":t,"data-testid":i,...s},d)=>{const l=t||"dialog-overlay",c=i||"dialog-overlay";return e.jsx(r.Overlay,{ref:d,className:o.cn("dialog-overlay",a),"data-cy":l,"data-testid":c,...s})});n.displayName=r.Overlay.displayName;const g=a.forwardRef(({className:a,children:t,"data-cy":i,"data-testid":s,...d},c)=>{const g=i||"dialog-content",y=s||"dialog-content";return e.jsxs(l,{children:[e.jsx(n,{}),e.jsx(r.Content,{ref:c,className:o.cn("dialog-content",a),"data-cy":g,"data-testid":y,...d,children:t})]})});g.displayName=r.Content.displayName;const y=({className:a,"data-cy":t,"data-testid":i,...r})=>{const s=t||"dialog-header",d=i||"dialog-header";return e.jsx("div",{className:o.cn("dialog-header",a),"data-cy":s,"data-testid":d,...r})};y.displayName="DialogHeader";const p=({className:a,"data-cy":t,"data-testid":i,...r})=>{const s=t||"dialog-footer",d=i||"dialog-footer";return e.jsx("div",{className:o.cn("dialog-footer",a),"data-cy":s,"data-testid":d,...r})};p.displayName="DialogFooter";const m=a.forwardRef(({className:a,"data-cy":t,"data-testid":i,...s},d)=>{const l=t||"dialog-title",c=i||"dialog-title";return e.jsx(r.Title,{ref:d,className:o.cn("dialog-title",a),"data-cy":l,"data-testid":c,...s})});m.displayName=r.Title.displayName;const f=a.forwardRef(({className:a,"data-cy":t,"data-testid":i,...s},d)=>{const l=t||"dialog-description",c=i||"dialog-description";return e.jsx(r.Description,{ref:d,className:o.cn("dialog-description",a),"data-cy":l,"data-testid":c,...s})});f.displayName=r.Description.displayName,exports.Dialog=s,exports.DialogClose=c,exports.DialogContent=g,exports.DialogDescription=f,exports.DialogFooter=p,exports.DialogHeader=y,exports.DialogOverlay=n,exports.DialogPortal=l,exports.DialogTitle=m,exports.DialogTrigger=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),r=require("./index18.cjs"),a=require("./index14.cjs");;/* empty css          */const i=require("./index33.cjs"),n=require("@adam-milo/icons"),l=(e,r,a,i,n)=>{const[l,o]=t.useState(e.length),u=t.useCallback(()=>{if(void 0!==n)return void o(Math.min(n,e.length));const t=r.current;if(!t)return;const l=t.clientWidth,u=parseFloat(getComputedStyle(document.documentElement).fontSize)||16,s=window.getComputedStyle(t),c=((e,t,r)=>{if(!e)return.5*t;const a=e.match(/^([\d.]+)(px|rem|em)?/);if(!a)return.5*t;const i=parseFloat(a[1]);switch(a[2]||"px"){case"px":return i;case"rem":return i*t;case"em":return i*r;default:return.5*t}})(s.gap,u,parseFloat(s.fontSize)||16),d=3.75*u;for(let r=0;r<e.length;r++){const t=e[r],n=a.current[r];n&&i.current.set(t.value,n.offsetWidth)}const p=((e,t,r,a,i)=>{let n=0,l=0;for(let o=0;o<e.length;o++){const u=e[o],s=t.get(u.value)||0;if(0===s){l++;break}const c=n+(o>0?a:0)+s;if(o<e.length-1){if(c+a+i>r&&l>0)break}else if(c>r&&l>0)break;n=c,l++}return Math.max(1,l)})(e,i.current,l,c,d);o(p)},[e,n,r,a,i]),s=((e,r)=>{const a=t.useRef();return t.useEffect(()=>()=>{a.current&&clearTimeout(a.current)},[]),t.useCallback((...t)=>{a.current&&clearTimeout(a.current),a.current=setTimeout(()=>e(...t),r)},[e,r])})(u,100);t.useEffect(()=>{a.current.length>e.length&&(a.current=a.current.slice(0,e.length));const t=new Set(e.map(e=>e.value));if(i.current.forEach((e,r)=>{t.has(r)||i.current.delete(r)}),void 0===n){e.some(e=>!i.current.has(e.value))?o(e.length):setTimeout(u,0)}},[e,n,u,a,i]),t.useEffect(()=>{const e=r.current;if(!e)return;const t=new ResizeObserver(()=>{s()});return t.observe(e),setTimeout(u,0),()=>{t.disconnect()}},[u,s,r]);const c=e.slice(0,l),d=e.slice(l);return{visibleCount:l,visibleItems:c,hiddenItems:d,hasOverflow:d.length>0}},o=t.forwardRef(({items:o,selectedValue:u,onSelectionChange:s,removable:c=!1,onRemove:d,variant:p="primary",disabled:h=!1,maxVisible:v,className:m,"data-testid":f,"data-cy":g,...b},y)=>{const w=(o&&Array.isArray(o)?o:[]).filter(e=>null!=e&&"object"==typeof e),x=t.useRef(null),k=t.useRef([]),_=t.useRef(new Map),C=t.useRef(null),[E,j]=t.useState(!1),[N,$]=t.useState(!1),D=t.useRef([]),{visibleItems:S,hiddenItems:R,hasOverflow:I}=l(w,x,k,_,v),q=t.useCallback((e,t,r)=>{if(!h&&!t&&s){s(u===e?null:e,r)}},[h,u,s]),A=t.useCallback((e,t)=>{e.stopPropagation(),h||d&&d(t,e)},[h,d]),M=t.useCallback((e,t,r)=>{h||r||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),q(t,r,e))},[h,q]),P=t.useCallback(e=>{e.stopPropagation(),$(e=>!e),j(!1)},[]),T=t.useCallback((e,t)=>{var r,a,i,n;switch(e.key){case"ArrowDown":e.preventDefault(),t<R.length-1&&(null==(r=D.current[t+1])||r.focus());break;case"ArrowUp":e.preventDefault(),t>0&&(null==(a=D.current[t-1])||a.focus());break;case"Home":e.preventDefault(),null==(i=D.current[0])||i.focus();break;case"End":e.preventDefault(),null==(n=D.current[R.length-1])||n.focus()}},[R.length]),z=t.useRef(),L=t.useRef();return t.useEffect(()=>{z.current=e=>{C.current&&!C.current.contains(e.target)&&$(!1)},L.current=e=>{"Escape"===e.key&&$(!1)}}),t.useEffect(()=>{if(!N)return;const e=e=>{var t;return null==(t=z.current)?void 0:t.call(z,e)},t=e=>{var t;return null==(t=L.current)?void 0:t.call(L,e)};return document.addEventListener("mousedown",e),document.addEventListener("keydown",t),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("keydown",t)}},[N]),t.useEffect(()=>{if("development"===process.env.NODE_ENV&&w.length>0){const e=w.map(e=>e.value),t=new Set(e);e.length!==t.size&&i.devWarn("[ChipGroup] Duplicate values detected in items array. Each item should have a unique value.")}},[w]),t.useEffect(()=>{D.current.length>R.length&&(D.current=D.current.slice(0,R.length))},[R]),o&&Array.isArray(o)?e.jsxs("div",{ref:y,className:r.cn("chip-group",h&&"chip-group--disabled",m),role:"group","aria-label":"Chip group","data-testid":f||"chip-group","data-cy":g||"chip-group",...b,children:[I&&e.jsxs("div",{className:"sr-only",role:"status","aria-live":"polite","aria-atomic":"true","data-testid":"chip-group-live-region","data-cy":"chip-group-live-region",children:[R.length," additional ",1===R.length?"chip":"chips"," hidden"]}),e.jsxs("div",{ref:x,className:"chip-group__container",children:[S.map(t=>{const r=u===t.value,i=t.variant||p,l=h||t.disabled||!1,o=w.findIndex(e=>e.value===t.value);return e.jsx("div",{ref:e=>{k.current[o]=e||null},className:"chip-group__item-wrapper","data-cy":`chip-group-item-wrapper-${t.value}`,"data-testid":`chip-group-item-wrapper-${t.value}`,children:e.jsxs("div",{className:"chip-group__item",onClick:e=>q(t.value,l,e),onKeyDown:e=>M(e,t.value,l),tabIndex:l?-1:0,role:"button","aria-pressed":r?"true":"false","aria-disabled":l?"true":"false","data-cy":`chip-group-item-${t.value}`,"data-testid":`chip-group-item-${t.value}`,children:[e.jsx(a.Chip,{variant:i,selected:r,disabled:l,"data-cy":`chip-${t.value}`,"data-testid":`chip-${t.value}`,children:t.label}),c&&!h&&!l&&e.jsx("button",{className:"chip-group__remove",onClick:e=>A(e,t.value),"aria-label":`Remove ${t.label}`,"data-cy":`chip-remove-${t.value}`,"data-testid":`chip-remove-${t.value}`,type:"button",children:e.jsx(n.Icon,{name:"Cross2Icon",size:"sm",decorative:!0})})]})},t.value)}),I&&e.jsxs("div",{ref:C,className:"chip-group__overflow",role:"button",tabIndex:0,"aria-expanded":N?"true":"false","aria-haspopup":"menu","aria-label":`Show ${R.length} more ${1===R.length?"chip":"chips"}`,onMouseEnter:()=>!N&&j(!0),onMouseLeave:()=>j(!1),onClick:P,onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),e.stopPropagation(),$(!N),j(!1))},"data-cy":"chip-group-overflow","data-testid":"chip-group-overflow",children:[e.jsxs(a.Chip,{variant:p,"data-cy":"chip-overflow","data-testid":"chip-overflow",children:["+",R.length]}),E&&!N&&e.jsx("div",{className:"chip-group__tooltip chip-group__tooltip--hover",role:"tooltip","data-cy":"chip-group-tooltip","data-testid":"chip-group-tooltip",children:R.map(t=>e.jsx("div",{className:"chip-group__tooltip-item","data-cy":`chip-group-tooltip-item-${t.value}`,"data-testid":`chip-group-tooltip-item-${t.value}`,children:t.label},t.value))}),N&&e.jsx("div",{className:"chip-group__dropdown",role:"menu","data-cy":"chip-group-dropdown","data-testid":"chip-group-dropdown",children:R.map((t,a)=>e.jsx("div",{ref:e=>{D.current[a]=e||null},className:r.cn("chip-group__dropdown-item",t.disabled&&"chip-group__dropdown-item--disabled"),role:"menuitem",tabIndex:t.disabled?-1:0,"aria-disabled":t.disabled?"true":"false",onClick:e=>{e.stopPropagation(),t.disabled||(q(t.value,!1,e),$(!1))},onKeyDown:e=>{T(e,a),"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),e.stopPropagation(),t.disabled||(q(t.value,!1,e),$(!1)))},"data-cy":`chip-group-dropdown-item-${t.value}`,"data-testid":`chip-group-dropdown-item-${t.value}`,children:t.label},t.value))})]})]})]}):null});o.displayName="ChipGroup",exports.ChipGroup=o;

package/dist/index15.js

@@ -1,125 +1,482 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { cn } from "./index17.js";
+import { forwardRef, useRef, useState, useCallback, useEffect } from "react";
+import { cn } from "./index18.js";
+import { Chip } from "./index14.js";
 /* empty css        */
-const Dialog = DialogPrimitive.Root;
-const DialogTrigger = DialogPrimitive.Trigger;
-const DialogPortal = DialogPrimitive.Portal;
-const DialogClose = DialogPrimitive.Close;
-const DialogOverlay = forwardRef(({ className, "data-cy": dataCy, "data-testid": dataTestId, ...props }, ref) => {
-  const finalDataCy = dataCy || "dialog-overlay";
-  const finalTestId = dataTestId || "dialog-overlay";
-  return /* @__PURE__ */ jsx(
-    DialogPrimitive.Overlay,
-    {
-      ref,
-      className: cn("dialog-overlay", className),
-      "data-cy": finalDataCy,
-      "data-testid": finalTestId,
-      ...props
+import { devWarn } from "./index33.js";
+import { Icon } from "@adam-milo/icons";
+const parseGapValue = (gapString, rootFontSize, containerFontSize) => {
+  if (!gapString) return 0.5 * rootFontSize;
+  const match = gapString.match(/^([\d.]+)(px|rem|em)?/);
+  if (!match) return 0.5 * rootFontSize;
+  const value = parseFloat(match[1]);
+  const unit = match[2] || "px";
+  switch (unit) {
+    case "px":
+      return value;
+    case "rem":
+      return value * rootFontSize;
+    case "em":
+      return value * containerFontSize;
+    default:
+      return 0.5 * rootFontSize;
+  }
+};
+const calculateFittingChips = (items, chipWidths, containerWidth, gap, overflowChipWidth) => {
+  let totalWidth = 0;
+  let count = 0;
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    const chipWidth = chipWidths.get(item.value) || 0;
+    if (chipWidth === 0) {
+      count++;
+      break;
     }
-  );
-});
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = forwardRef(({ className, children, "data-cy": dataCy, "data-testid": dataTestId, ...props }, ref) => {
-  const finalDataCy = dataCy || "dialog-content";
-  const finalTestId = dataTestId || "dialog-content";
-  return /* @__PURE__ */ jsxs(DialogPortal, { children: [
-    /* @__PURE__ */ jsx(DialogOverlay, {}),
-    /* @__PURE__ */ jsx(
-      DialogPrimitive.Content,
-      {
-        ref,
-        className: cn("dialog-content", className),
-        "data-cy": finalDataCy,
-        "data-testid": finalTestId,
-        ...props,
-        children
-      }
-    )
-  ] });
-});
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-const DialogHeader = ({
-  className,
-  "data-cy": dataCy,
-  "data-testid": dataTestId,
-  ...props
-}) => {
-  const finalDataCy = dataCy || "dialog-header";
-  const finalTestId = dataTestId || "dialog-header";
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn("dialog-header", className),
-      "data-cy": finalDataCy,
-      "data-testid": finalTestId,
-      ...props
+    const gapBeforeThisChip = i > 0 ? gap : 0;
+    const widthWithThisChip = totalWidth + gapBeforeThisChip + chipWidth;
+    const hasMoreItems = i < items.length - 1;
+    if (hasMoreItems) {
+      const widthWithOverflow = widthWithThisChip + gap + overflowChipWidth;
+      if (widthWithOverflow > containerWidth && count > 0) break;
+    } else {
+      if (widthWithThisChip > containerWidth && count > 0) break;
     }
+    totalWidth = widthWithThisChip;
+    count++;
+  }
+  return Math.max(1, count);
+};
+const useDebounce = (callback, delay) => {
+  const timeoutRef = useRef();
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  const debouncedFn = useCallback(
+    (...args) => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => callback(...args), delay);
+    },
+    [callback, delay]
   );
+  return debouncedFn;
 };
-DialogHeader.displayName = "DialogHeader";
-const DialogFooter = ({
-  className,
-  "data-cy": dataCy,
-  "data-testid": dataTestId,
-  ...props
-}) => {
-  const finalDataCy = dataCy || "dialog-footer";
-  const finalTestId = dataTestId || "dialog-footer";
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn("dialog-footer", className),
-      "data-cy": finalDataCy,
-      "data-testid": finalTestId,
-      ...props
+const useChipOverflow = (items, containerRef, chipRefs, chipWidths, maxVisible) => {
+  const [visibleCount, setVisibleCount] = useState(items.length);
+  const calculateVisibleChips = useCallback(() => {
+    if (maxVisible !== void 0) {
+      setVisibleCount(Math.min(maxVisible, items.length));
+      return;
     }
-  );
+    const container = containerRef.current;
+    if (!container) return;
+    const containerWidth = container.clientWidth;
+    const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+    const computedStyle = window.getComputedStyle(container);
+    const gapString = computedStyle.gap;
+    const containerFontSize = parseFloat(computedStyle.fontSize) || 16;
+    const gap = parseGapValue(gapString, rootFontSize, containerFontSize);
+    const OVERFLOW_CHIP_WIDTH_REM = 3.75;
+    const overflowChipWidth = OVERFLOW_CHIP_WIDTH_REM * rootFontSize;
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      const chip = chipRefs.current[i];
+      if (chip) {
+        chipWidths.current.set(item.value, chip.offsetWidth);
+      }
+    }
+    const count = calculateFittingChips(
+      items,
+      chipWidths.current,
+      containerWidth,
+      gap,
+      overflowChipWidth
+    );
+    setVisibleCount(count);
+  }, [items, maxVisible, containerRef, chipRefs, chipWidths]);
+  const debouncedCalculate = useDebounce(calculateVisibleChips, 100);
+  useEffect(() => {
+    if (chipRefs.current.length > items.length) {
+      chipRefs.current = chipRefs.current.slice(0, items.length);
+    }
+    const currentValues = new Set(items.map((item) => item.value));
+    chipWidths.current.forEach((_, value) => {
+      if (!currentValues.has(value)) {
+        chipWidths.current.delete(value);
+      }
+    });
+    if (maxVisible === void 0) {
+      const hasUnmeasuredItems = items.some((item) => !chipWidths.current.has(item.value));
+      if (hasUnmeasuredItems) {
+        setVisibleCount(items.length);
+      } else {
+        setTimeout(calculateVisibleChips, 0);
+      }
+    }
+  }, [items, maxVisible, calculateVisibleChips, chipRefs, chipWidths]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const resizeObserver = new ResizeObserver(() => {
+      debouncedCalculate();
+    });
+    resizeObserver.observe(container);
+    setTimeout(calculateVisibleChips, 0);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [calculateVisibleChips, debouncedCalculate, containerRef]);
+  const visibleItems = items.slice(0, visibleCount);
+  const hiddenItems = items.slice(visibleCount);
+  const hasOverflow = hiddenItems.length > 0;
+  return { visibleCount, visibleItems, hiddenItems, hasOverflow };
 };
-DialogFooter.displayName = "DialogFooter";
-const DialogTitle = forwardRef(
-  ({ className, "data-cy": dataCy, "data-testid": dataTestId, ...props }, ref) => {
-    const finalDataCy = dataCy || "dialog-title";
-    const finalTestId = dataTestId || "dialog-title";
-    return /* @__PURE__ */ jsx(
-      DialogPrimitive.Title,
+const ChipGroup = forwardRef(
+  ({
+    items,
+    selectedValue,
+    onSelectionChange,
+    removable = false,
+    onRemove,
+    variant = "primary",
+    disabled = false,
+    maxVisible,
+    className,
+    "data-testid": dataTestId,
+    "data-cy": dataCy,
+    ...props
+  }, ref) => {
+    const normalizedItems = items && Array.isArray(items) ? items : [];
+    const validItems = normalizedItems.filter((item) => {
+      return item !== null && item !== void 0 && typeof item === "object";
+    });
+    const containerRef = useRef(null);
+    const chipRefs = useRef([]);
+    const chipWidths = useRef(/* @__PURE__ */ new Map());
+    const dropdownRef = useRef(null);
+    const [showTooltip, setShowTooltip] = useState(false);
+    const [showDropdown, setShowDropdown] = useState(false);
+    const dropdownItemRefs = useRef([]);
+    const { visibleItems, hiddenItems, hasOverflow } = useChipOverflow(
+      validItems,
+      containerRef,
+      chipRefs,
+      chipWidths,
+      maxVisible
+    );
+    const handleChipClick = useCallback(
+      (value, itemDisabled, event) => {
+        if (disabled || itemDisabled) return;
+        if (onSelectionChange) {
+          const newValue = selectedValue === value ? null : value;
+          onSelectionChange(newValue, event);
+        }
+      },
+      [disabled, selectedValue, onSelectionChange]
+    );
+    const handleRemove = useCallback(
+      (e, value) => {
+        e.stopPropagation();
+        if (disabled) return;
+        if (onRemove) {
+          onRemove(value, e);
+        }
+      },
+      [disabled, onRemove]
+    );
+    const handleKeyDown = useCallback(
+      (e, value, itemDisabled) => {
+        if (disabled || itemDisabled) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleChipClick(value, itemDisabled, e);
+        }
+      },
+      [disabled, handleChipClick]
+    );
+    const handleOverflowClick = useCallback((e) => {
+      e.stopPropagation();
+      setShowDropdown((prev) => !prev);
+      setShowTooltip(false);
+    }, []);
+    const handleDropdownKeyDown = useCallback(
+      (e, index) => {
+        var _a, _b, _c, _d;
+        switch (e.key) {
+          case "ArrowDown":
+            e.preventDefault();
+            if (index < hiddenItems.length - 1) {
+              (_a = dropdownItemRefs.current[index + 1]) == null ? void 0 : _a.focus();
+            }
+            break;
+          case "ArrowUp":
+            e.preventDefault();
+            if (index > 0) {
+              (_b = dropdownItemRefs.current[index - 1]) == null ? void 0 : _b.focus();
+            }
+            break;
+          case "Home":
+            e.preventDefault();
+            (_c = dropdownItemRefs.current[0]) == null ? void 0 : _c.focus();
+            break;
+          case "End":
+            e.preventDefault();
+            (_d = dropdownItemRefs.current[hiddenItems.length - 1]) == null ? void 0 : _d.focus();
+            break;
+        }
+      },
+      [hiddenItems.length]
+    );
+    const handleClickOutsideRef = useRef();
+    const handleEscapeRef = useRef();
+    useEffect(() => {
+      handleClickOutsideRef.current = (event) => {
+        if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+          setShowDropdown(false);
+        }
+      };
+      handleEscapeRef.current = (event) => {
+        if (event.key === "Escape") {
+          setShowDropdown(false);
+        }
+      };
+    });
+    useEffect(() => {
+      if (!showDropdown) return;
+      const handleClickOutside = (e) => {
+        var _a;
+        return (_a = handleClickOutsideRef.current) == null ? void 0 : _a.call(handleClickOutsideRef, e);
+      };
+      const handleEscape = (e) => {
+        var _a;
+        return (_a = handleEscapeRef.current) == null ? void 0 : _a.call(handleEscapeRef, e);
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleEscape);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+        document.removeEventListener("keydown", handleEscape);
+      };
+    }, [showDropdown]);
+    useEffect(() => {
+      if (process.env.NODE_ENV === "development" && validItems.length > 0) {
+        const values = validItems.map((item) => item.value);
+        const uniqueValues = new Set(values);
+        if (values.length !== uniqueValues.size) {
+          devWarn(
+            "[ChipGroup] Duplicate values detected in items array. Each item should have a unique value."
+          );
+        }
+      }
+    }, [validItems]);
+    useEffect(() => {
+      if (dropdownItemRefs.current.length > hiddenItems.length) {
+        dropdownItemRefs.current = dropdownItemRefs.current.slice(0, hiddenItems.length);
+      }
+    }, [hiddenItems]);
+    if (!items || !Array.isArray(items)) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
       {
         ref,
-        className: cn("dialog-title", className),
-        "data-cy": finalDataCy,
-        "data-testid": finalTestId,
-        ...props
+        className: cn("chip-group", disabled && "chip-group--disabled", className),
+        role: "group",
+        "aria-label": "Chip group",
+        "data-testid": dataTestId || "chip-group",
+        "data-cy": dataCy || "chip-group",
+        ...props,
+        children: [
+          hasOverflow && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "sr-only",
+              role: "status",
+              "aria-live": "polite",
+              "aria-atomic": "true",
+              "data-testid": "chip-group-live-region",
+              "data-cy": "chip-group-live-region",
+              children: [
+                hiddenItems.length,
+                " additional ",
+                hiddenItems.length === 1 ? "chip" : "chips",
+                " hidden"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "chip-group__container", children: [
+            visibleItems.map((item) => {
+              const isSelected = selectedValue === item.value;
+              const itemVariant = item.variant || variant;
+              const itemDisabled = disabled || item.disabled || false;
+              const itemIndexInFullArray = validItems.findIndex((i) => i.value === item.value);
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: (el) => {
+                    if (el) {
+                      chipRefs.current[itemIndexInFullArray] = el;
+                    } else {
+                      chipRefs.current[itemIndexInFullArray] = null;
+                    }
+                  },
+                  className: "chip-group__item-wrapper",
+                  "data-cy": `chip-group-item-wrapper-${item.value}`,
+                  "data-testid": `chip-group-item-wrapper-${item.value}`,
+                  children: /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: "chip-group__item",
+                      onClick: (e) => handleChipClick(item.value, itemDisabled, e),
+                      onKeyDown: (e) => handleKeyDown(e, item.value, itemDisabled),
+                      tabIndex: itemDisabled ? -1 : 0,
+                      role: "button",
+                      "aria-pressed": isSelected ? "true" : "false",
+                      "aria-disabled": itemDisabled ? "true" : "false",
+                      "data-cy": `chip-group-item-${item.value}`,
+                      "data-testid": `chip-group-item-${item.value}`,
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Chip,
+                          {
+                            variant: itemVariant,
+                            selected: isSelected,
+                            disabled: itemDisabled,
+                            "data-cy": `chip-${item.value}`,
+                            "data-testid": `chip-${item.value}`,
+                            children: item.label
+                          }
+                        ),
+                        removable && !disabled && !itemDisabled && /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            className: "chip-group__remove",
+                            onClick: (e) => handleRemove(e, item.value),
+                            "aria-label": `Remove ${item.label}`,
+                            "data-cy": `chip-remove-${item.value}`,
+                            "data-testid": `chip-remove-${item.value}`,
+                            type: "button",
+                            children: /* @__PURE__ */ jsx(Icon, { name: "Cross2Icon", size: "sm", decorative: true })
+                          }
+                        )
+                      ]
+                    }
+                  )
+                },
+                item.value
+              );
+            }),
+            hasOverflow && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ref: dropdownRef,
+                className: "chip-group__overflow",
+                role: "button",
+                tabIndex: 0,
+                "aria-expanded": showDropdown ? "true" : "false",
+                "aria-haspopup": "menu",
+                "aria-label": `Show ${hiddenItems.length} more ${hiddenItems.length === 1 ? "chip" : "chips"}`,
+                onMouseEnter: () => !showDropdown && setShowTooltip(true),
+                onMouseLeave: () => setShowTooltip(false),
+                onClick: handleOverflowClick,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setShowDropdown(!showDropdown);
+                    setShowTooltip(false);
+                  }
+                },
+                "data-cy": "chip-group-overflow",
+                "data-testid": "chip-group-overflow",
+                children: [
+                  /* @__PURE__ */ jsxs(Chip, { variant, "data-cy": "chip-overflow", "data-testid": "chip-overflow", children: [
+                    "+",
+                    hiddenItems.length
+                  ] }),
+                  showTooltip && !showDropdown && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "chip-group__tooltip chip-group__tooltip--hover",
+                      role: "tooltip",
+                      "data-cy": "chip-group-tooltip",
+                      "data-testid": "chip-group-tooltip",
+                      children: hiddenItems.map((item) => /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: "chip-group__tooltip-item",
+                          "data-cy": `chip-group-tooltip-item-${item.value}`,
+                          "data-testid": `chip-group-tooltip-item-${item.value}`,
+                          children: item.label
+                        },
+                        item.value
+                      ))
+                    }
+                  ),
+                  showDropdown && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "chip-group__dropdown",
+                      role: "menu",
+                      "data-cy": "chip-group-dropdown",
+                      "data-testid": "chip-group-dropdown",
+                      children: hiddenItems.map((item, index) => /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          ref: (el) => {
+                            if (el) {
+                              dropdownItemRefs.current[index] = el;
+                            } else {
+                              dropdownItemRefs.current[index] = null;
+                            }
+                          },
+                          className: cn(
+                            "chip-group__dropdown-item",
+                            item.disabled && "chip-group__dropdown-item--disabled"
+                          ),
+                          role: "menuitem",
+                          tabIndex: item.disabled ? -1 : 0,
+                          "aria-disabled": item.disabled ? "true" : "false",
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            if (!item.disabled) {
+                              handleChipClick(item.value, false, e);
+                              setShowDropdown(false);
+                            }
+                          },
+                          onKeyDown: (e) => {
+                            handleDropdownKeyDown(e, index);
+                            if (e.key === "Enter" || e.key === " ") {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              if (!item.disabled) {
+                                handleChipClick(item.value, false, e);
+                                setShowDropdown(false);
+                              }
+                            }
+                          },
+                          "data-cy": `chip-group-dropdown-item-${item.value}`,
+                          "data-testid": `chip-group-dropdown-item-${item.value}`,
+                          children: item.label
+                        },
+                        item.value
+                      ))
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        ]
       }
     );
   }
 );
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-const DialogDescription = forwardRef(({ className, "data-cy": dataCy, "data-testid": dataTestId, ...props }, ref) => {
-  const finalDataCy = dataCy || "dialog-description";
-  const finalTestId = dataTestId || "dialog-description";
-  return /* @__PURE__ */ jsx(
-    DialogPrimitive.Description,
-    {
-      ref,
-      className: cn("dialog-description", className),
-      "data-cy": finalDataCy,
-      "data-testid": finalTestId,
-      ...props
-    }
-  );
-});
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
+ChipGroup.displayName = "ChipGroup";
 export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger
+  ChipGroup
 };

package/dist/index16.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),a=require("react"),e=require("./index17.cjs");;/* empty css          */const s=a.forwardRef(({direction:a="vertical",spacing:s="4",align:c="stretch",justify:r="start",wrap:i=!1,className:n,children:d,"data-cy":l,"data-testid":o,...u},k)=>{const p=l||`stack-${a}`,j=o||`stack-${a}`;return t.jsx("div",{ref:k,className:e.cn("stack",`stack--${a}`,`stack--spacing-${s}`,`stack--align-${c}`,`stack--justify-${r}`,i&&"stack--wrap",n),"data-cy":p,"data-testid":j,...u,children:d})});s.displayName="Stack",exports.Stack=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),t=require("@radix-ui/react-dialog"),o=require("./index18.cjs");function i(e){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const t in e)if("default"!==t){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,o.get?o:{enumerable:!0,get:()=>e[t]})}return a.default=e,Object.freeze(a)};/* empty css          */const r=i(t),s=r.Root,d=r.Trigger,l=r.Portal,c=r.Close,n=a.forwardRef(({className:a,"data-cy":t,"data-testid":i,...s},d)=>{const l=t||"dialog-overlay",c=i||"dialog-overlay";return e.jsx(r.Overlay,{ref:d,className:o.cn("dialog-overlay",a),"data-cy":l,"data-testid":c,...s})});n.displayName=r.Overlay.displayName;const g=a.forwardRef(({className:a,children:t,"data-cy":i,"data-testid":s,...d},c)=>{const g=i||"dialog-content",y=s||"dialog-content";return e.jsxs(l,{children:[e.jsx(n,{}),e.jsx(r.Content,{ref:c,className:o.cn("dialog-content",a),"data-cy":g,"data-testid":y,...d,children:t})]})});g.displayName=r.Content.displayName;const y=({className:a,"data-cy":t,"data-testid":i,...r})=>{const s=t||"dialog-header",d=i||"dialog-header";return e.jsx("div",{className:o.cn("dialog-header",a),"data-cy":s,"data-testid":d,...r})};y.displayName="DialogHeader";const p=({className:a,"data-cy":t,"data-testid":i,...r})=>{const s=t||"dialog-footer",d=i||"dialog-footer";return e.jsx("div",{className:o.cn("dialog-footer",a),"data-cy":s,"data-testid":d,...r})};p.displayName="DialogFooter";const m=a.forwardRef(({className:a,"data-cy":t,"data-testid":i,...s},d)=>{const l=t||"dialog-title",c=i||"dialog-title";return e.jsx(r.Title,{ref:d,className:o.cn("dialog-title",a),"data-cy":l,"data-testid":c,...s})});m.displayName=r.Title.displayName;const f=a.forwardRef(({className:a,"data-cy":t,"data-testid":i,...s},d)=>{const l=t||"dialog-description",c=i||"dialog-description";return e.jsx(r.Description,{ref:d,className:o.cn("dialog-description",a),"data-cy":l,"data-testid":c,...s})});f.displayName=r.Description.displayName,exports.Dialog=s,exports.DialogClose=c,exports.DialogContent=g,exports.DialogDescription=f,exports.DialogFooter=p,exports.DialogHeader=y,exports.DialogOverlay=n,exports.DialogPortal=l,exports.DialogTitle=m,exports.DialogTrigger=d;