prime-ui-kit 0.7.4 → 0.7.7

package/dist/components/index.js

@@ -3832,11 +3832,15 @@ function usePosition(anchorRef, contentRef, options = {}) {
     (pos) => {
       const content = contentRef.current;
       if (!content) return;
-      content.style.position = pos.position;
-      content.style.top = `${pos.top}px`;
-      content.style.left = `${pos.left}px`;
-      content.style.minWidth = pos.minWidth !== void 0 ? `${pos.minWidth}px` : "";
-      content.style.maxHeight = pos.maxHeight !== void 0 ? `${pos.maxHeight}px` : "";
+      const nextTop = `${pos.top}px`;
+      const nextLeft = `${pos.left}px`;
+      const nextMinW = pos.minWidth !== void 0 ? `${pos.minWidth}px` : "";
+      const nextMaxH = pos.maxHeight !== void 0 ? `${pos.maxHeight}px` : "";
+      if (content.style.position !== pos.position) content.style.position = pos.position;
+      if (content.style.top !== nextTop) content.style.top = nextTop;
+      if (content.style.left !== nextLeft) content.style.left = nextLeft;
+      if (content.style.minWidth !== nextMinW) content.style.minWidth = nextMinW;
+      if (content.style.maxHeight !== nextMaxH) content.style.maxHeight = nextMaxH;
     },
     [contentRef]
   );
@@ -3854,7 +3858,7 @@ function usePosition(anchorRef, contentRef, options = {}) {
       window.innerHeight,
       { preferredSide, align, offset, viewportPad, flip, matchTriggerMinWidth }
     );
-    setResolvedSide(pos.resolvedSide);
+    setResolvedSide((prev) => pos.resolvedSide === prev ? prev : pos.resolvedSide);
     applyPositionStyle({
       position: "fixed",
       top: pos.top,
@@ -3877,6 +3881,21 @@ function usePosition(anchorRef, contentRef, options = {}) {
   return { resolvedSide, update };
 }
 
+// src/internal/scrollAncestors.ts
+var SCROLLABLE = /^(auto|scroll|overlay)$/;
+function getScrollContainers(node) {
+  const out = [window];
+  if (!node || typeof window === "undefined") return out;
+  for (let el = node.parentElement; el; el = el.parentElement) {
+    const { overflowX, overflowY } = window.getComputedStyle(el);
+    if (SCROLLABLE.test(overflowY) || SCROLLABLE.test(overflowX)) {
+      out.push(el);
+    }
+  }
+  if (window.visualViewport) out.push(window.visualViewport);
+  return out;
+}
+
 // src/components/select/Select.module.css
 var Select_default = {
   trigger: "Select_trigger2",
@@ -3958,13 +3977,22 @@ function handleSelectListboxKeyDown(e, ctx) {
 
 // src/components/select/Select.tsx
 import { jsx as jsx26, jsxs as jsxs9 } from "react/jsx-runtime";
+var SELECT_LISTBOX_POSITION_OPTS = {
+  side: "bottom",
+  align: "start"
+};
 var [SelectProvider, useSelectContext] = createComponentContext("Select");
 function SelectRoot(props) {
-  const { native = false, ...rest } = props;
-  if (native) {
-    return /* @__PURE__ */ jsx26(SelectNativeRoot, { ...rest });
+  if (props.multiple === true) {
+    if (props.native === true) {
+      return /* @__PURE__ */ jsx26(SelectNativeMultiRoot, { ...props });
+    }
+    return /* @__PURE__ */ jsx26(SelectComboboxMultiRoot, { ...props });
+  }
+  if (props.native === true) {
+    return /* @__PURE__ */ jsx26(SelectNativeRoot, { ...props });
   }
-  return /* @__PURE__ */ jsx26(SelectComboboxRoot, { ...rest });
+  return /* @__PURE__ */ jsx26(SelectComboboxRoot, { ...props });
 }
 SelectRoot.displayName = "SelectRoot";
 function SelectComboboxRoot({
@@ -4012,32 +4040,138 @@ function SelectComboboxRoot({
   );
   const onClose = React38.useCallback(() => setIsOpen(false), []);
   const onOpen = React38.useCallback(() => setIsOpen(true), []);
-  return /* @__PURE__ */ jsx26(
-    SelectProvider,
-    {
-      value: {
-        size,
-        hasError,
-        isOpen,
-        selectedValue,
-        selectedLabelBinding,
-        onSelect,
-        onClose,
-        onOpen,
-        highlightedValue,
-        setHighlightedValue,
-        triggerId,
-        listboxId,
-        triggerRef,
-        disabled,
-        placeholder,
-        onInitLabel
-      },
-      children: /* @__PURE__ */ jsx26(ControlSizeProvider, { value: size, children })
-    }
+  const contextValue = React38.useMemo(
+    () => ({
+      size,
+      hasError,
+      isOpen,
+      multiple: false,
+      selectedValue,
+      selectedLabelBinding,
+      selectedValues: [],
+      labelsByValue: {},
+      onSelect,
+      onClose,
+      onOpen,
+      highlightedValue,
+      setHighlightedValue,
+      triggerId,
+      listboxId,
+      triggerRef,
+      disabled,
+      placeholder,
+      onInitLabel
+    }),
+    [
+      size,
+      hasError,
+      isOpen,
+      selectedValue,
+      selectedLabelBinding,
+      onSelect,
+      onClose,
+      onOpen,
+      highlightedValue,
+      triggerId,
+      listboxId,
+      disabled,
+      placeholder,
+      onInitLabel
+    ]
   );
+  return /* @__PURE__ */ jsx26(SelectProvider, { value: contextValue, children: /* @__PURE__ */ jsx26(ControlSizeProvider, { value: size, children }) });
 }
 SelectComboboxRoot.displayName = "SelectComboboxRoot";
+function SelectComboboxMultiRoot({
+  size = "m",
+  value,
+  defaultValue,
+  onChange,
+  disabled,
+  placeholder,
+  hasError = false,
+  children
+}) {
+  const handleChange = React38.useCallback(
+    (next) => {
+      onChange?.(next);
+    },
+    [onChange]
+  );
+  const [selectedValues, setSelectedValues] = useControllableState({
+    value,
+    defaultValue: defaultValue ?? [],
+    onChange: handleChange
+  });
+  const [labelsByValue, setLabelsByValue] = React38.useState({});
+  const [isOpen, setIsOpen] = React38.useState(false);
+  const [highlightedValue, setHighlightedValue] = React38.useState(void 0);
+  const generatedId = React38.useId();
+  const triggerId = `${generatedId}-trigger`;
+  const listboxId = `${generatedId}-listbox`;
+  const triggerRef = React38.useRef(null);
+  const onInitLabel = React38.useCallback((val, label) => {
+    setLabelsByValue((prev) => {
+      if (prev[val] === label) return prev;
+      return { ...prev, [val]: label };
+    });
+  }, []);
+  const onSelect = React38.useCallback(
+    (val, label) => {
+      setLabelsByValue((prev) => ({ ...prev, [val]: label }));
+      setSelectedValues((prev) => {
+        if (prev.includes(val)) {
+          return prev.filter((x) => x !== val);
+        }
+        return [...prev, val];
+      });
+    },
+    [setSelectedValues]
+  );
+  const onClose = React38.useCallback(() => setIsOpen(false), []);
+  const onOpen = React38.useCallback(() => setIsOpen(true), []);
+  const contextValue = React38.useMemo(
+    () => ({
+      size,
+      hasError,
+      isOpen,
+      multiple: true,
+      selectedValue: void 0,
+      selectedLabelBinding: void 0,
+      selectedValues,
+      labelsByValue,
+      onSelect,
+      onClose,
+      onOpen,
+      highlightedValue,
+      setHighlightedValue,
+      triggerId,
+      listboxId,
+      triggerRef,
+      disabled,
+      placeholder,
+      onInitLabel
+    }),
+    [
+      size,
+      hasError,
+      isOpen,
+      selectedValues,
+      labelsByValue,
+      onSelect,
+      onClose,
+      onOpen,
+      highlightedValue,
+      triggerId,
+      listboxId,
+      disabled,
+      placeholder,
+      onInitLabel
+    ]
+  );
+  return /* @__PURE__ */ jsx26(SelectProvider, { value: contextValue, children: /* @__PURE__ */ jsx26(ControlSizeProvider, { value: size, children }) });
+}
+SelectComboboxMultiRoot.displayName = "SelectComboboxMultiRoot";
 var SelectTrigger = React38.forwardRef(
   ({ className, children, onClick, onKeyDown, ...rest }, forwardedRef) => {
     const { isOpen, onOpen, onClose, triggerId, listboxId, disabled, size, hasError, triggerRef } = useSelectContext();
@@ -4092,7 +4226,20 @@ var SelectTrigger = React38.forwardRef(
 );
 SelectTrigger.displayName = "SelectTrigger";
 function SelectValue({ className }) {
-  const { selectedLabelBinding, selectedValue, placeholder } = useSelectContext();
+  const ctx = useSelectContext();
+  if (ctx.multiple) {
+    const { selectedValues, labelsByValue, placeholder: placeholder2 } = ctx;
+    const display2 = selectedValues.length === 0 ? placeholder2 : selectedValues.map((v) => labelsByValue[v] ?? v).join(", ");
+    return /* @__PURE__ */ jsx26(
+      "span",
+      {
+        className: cx(Select_default.triggerValue, className),
+        ...toDataAttributes({ placeholder: display2 == null || display2 === "" }),
+        children: display2
+      }
+    );
+  }
+  const { selectedLabelBinding, selectedValue, placeholder } = ctx;
   const display = selectedLabelBinding && selectedLabelBinding.value === selectedValue ? selectedLabelBinding.label : selectedValue ?? placeholder;
   return /* @__PURE__ */ jsx26(
     "span",
@@ -4119,67 +4266,109 @@ function SelectContent({ className, children }) {
     highlightedValue,
     setHighlightedValue,
     selectedValue,
+    selectedValues,
+    multiple,
     size
   } = useSelectContext();
+  const selectedValueRef = React38.useRef(selectedValue);
+  selectedValueRef.current = selectedValue;
+  const selectedValuesRef = React38.useRef(selectedValues);
+  selectedValuesRef.current = selectedValues;
+  const multipleRef = React38.useRef(multiple);
+  multipleRef.current = multiple;
   const overlayPortalLayer = useOverlayPortalLayer();
   const contentRef = React38.useRef(null);
-  const { resolvedSide, update } = usePosition(triggerRef, contentRef, {
-    side: "bottom",
-    align: "start"
-  });
+  const { resolvedSide, update } = usePosition(
+    triggerRef,
+    contentRef,
+    SELECT_LISTBOX_POSITION_OPTS
+  );
+  const updateRef = React38.useRef(update);
+  updateRef.current = update;
   const getItems = React38.useCallback(() => queryEnabledSelectOptions(contentRef.current), []);
   React38.useLayoutEffect(() => {
     if (!isOpen) return;
-    update();
-    const rafId = requestAnimationFrame(() => update());
+    updateRef.current();
+    const rafId = requestAnimationFrame(() => updateRef.current());
     return () => cancelAnimationFrame(rafId);
-  }, [isOpen, update]);
+  }, [isOpen]);
   React38.useEffect(() => {
     if (!isOpen) {
       setHighlightedValue(void 0);
       return;
     }
-    const reposition = () => {
-      requestAnimationFrame(() => update());
-    };
     const bootstrap = () => {
       requestAnimationFrame(() => {
         const el = contentRef.current;
         if (!el) return;
         el.focus({ preventScroll: true });
         const items = queryEnabledSelectOptions(el);
-        const selectedIndex = items.findIndex((i) => i.dataset.value === selectedValue);
-        if (selectedIndex >= 0 && selectedValue) {
-          setHighlightedValue(selectedValue);
+        if (multipleRef.current) {
+          const sv = selectedValuesRef.current;
+          const firstSelected = sv.find((v) => items.some((i) => i.dataset.value === v));
+          setHighlightedValue(firstSelected ?? void 0);
+        } else {
+          const sv = selectedValueRef.current;
+          const selectedIndex = items.findIndex((i) => i.dataset.value === sv);
+          if (selectedIndex >= 0 && sv) {
+            setHighlightedValue(sv);
+          }
         }
       });
     };
     bootstrap();
-    window.addEventListener("resize", reposition);
+  }, [isOpen, setHighlightedValue]);
+  React38.useEffect(() => {
+    if (!isOpen) return;
+    let rafCoalesce = 0;
+    const schedule = () => {
+      cancelAnimationFrame(rafCoalesce);
+      rafCoalesce = requestAnimationFrame(() => updateRef.current());
+    };
+    window.addEventListener("resize", schedule);
+    const scrollTargets = getScrollContainers(triggerRef.current);
+    for (const t of scrollTargets) {
+      t.addEventListener("scroll", schedule, { passive: true });
+    }
     const vv = window.visualViewport;
-    vv?.addEventListener("resize", reposition);
+    vv?.addEventListener("resize", schedule);
+    const panel = contentRef.current;
+    let ro = null;
+    if (typeof ResizeObserver !== "undefined" && panel) {
+      ro = new ResizeObserver(schedule);
+      ro.observe(panel);
+    }
     return () => {
-      window.removeEventListener("resize", reposition);
-      vv?.removeEventListener("resize", reposition);
+      cancelAnimationFrame(rafCoalesce);
+      window.removeEventListener("resize", schedule);
+      for (const t of scrollTargets) {
+        t.removeEventListener("scroll", schedule);
+      }
+      vv?.removeEventListener("resize", schedule);
+      ro?.disconnect();
     };
-  }, [isOpen, update, selectedValue, setHighlightedValue]);
+  }, [isOpen, triggerRef]);
   useEscapeKey({ enabled: isOpen, onEscape: onClose });
   useOutsideClick({ refs: [triggerRef, contentRef], enabled: isOpen, onOutsideClick: onClose });
-  const handleKeyDown = (e) => {
-    handleSelectListboxKeyDown(e, {
-      items: getItems(),
-      highlightedValue,
-      setHighlightedValue,
-      onSelect,
-      onClose
-    });
-  };
+  const handleKeyDown = React38.useCallback(
+    (e) => {
+      handleSelectListboxKeyDown(e, {
+        items: getItems(),
+        highlightedValue,
+        setHighlightedValue,
+        onSelect,
+        onClose
+      });
+    },
+    [getItems, highlightedValue, setHighlightedValue, onSelect, onClose]
+  );
   return /* @__PURE__ */ jsx26(Portal, { children: /* @__PURE__ */ jsx26(
     ScrollContainer,
     {
       ref: contentRef,
       id: listboxId,
       role: "listbox",
+      "aria-multiselectable": multiple ? true : void 0,
       "aria-labelledby": triggerId,
       "aria-hidden": !isOpen,
       tabIndex: -1,
@@ -4198,6 +4387,17 @@ function SelectItemIcon({ className, children, ...rest }) {
   return /* @__PURE__ */ jsx26("span", { className: cx(Select_default.itemIcon, className), ...rest, children });
 }
 SelectItemIcon.displayName = "SelectItemIcon";
+var SELECT_ITEM_ICON_MARKER = "__primeSelectItemIcon";
+Object.assign(SelectItemIcon, { [SELECT_ITEM_ICON_MARKER]: true });
+function isSelectItemIconType(type) {
+  if (type === SelectItemIcon) return true;
+  if (typeof type === "function") {
+    const fn = type;
+    if (fn[SELECT_ITEM_ICON_MARKER] === true) return true;
+    if (fn.displayName === "SelectItemIcon") return true;
+  }
+  return false;
+}
 function selectItemTextFromRest(rest) {
   const parts = [];
   for (const node of rest) {
@@ -4212,7 +4412,7 @@ function partitionSelectItemChildren(children) {
   const icons = [];
   const rest = [];
   React38.Children.forEach(children, (child) => {
-    if (React38.isValidElement(child) && child.type === SelectItemIcon) {
+    if (React38.isValidElement(child) && isSelectItemIconType(child.type)) {
       icons.push(child);
     } else if (child != null && child !== false) {
       rest.push(child);
@@ -4222,9 +4422,18 @@ function partitionSelectItemChildren(children) {
 }
 var SelectItem = React38.forwardRef(
   ({ value, label, disabled, className, children }, ref) => {
-    const { selectedValue, highlightedValue, setHighlightedValue, onSelect, onInitLabel } = useSelectContext();
+    const {
+      multiple,
+      size,
+      selectedValue,
+      selectedValues,
+      highlightedValue,
+      setHighlightedValue,
+      onSelect,
+      onInitLabel
+    } = useSelectContext();
     const { icons, rest } = partitionSelectItemChildren(children);
-    const isSelected = selectedValue === value;
+    const isSelected = multiple ? selectedValues.includes(value) : selectedValue === value;
     const isHighlighted = highlightedValue === value;
     const resolvedLabel = label ?? selectItemTextFromRest(rest) ?? (typeof children === "string" ? children : void 0) ?? value;
     React38.useEffect(() => {
@@ -4259,7 +4468,8 @@ var SelectItem = React38.forwardRef(
           label: resolvedLabel,
           selected: isSelected,
           highlighted: isHighlighted,
-          disabled: Boolean(disabled)
+          disabled: Boolean(disabled),
+          size
         }),
         children: [
           icons.map(
@@ -4280,7 +4490,8 @@ function SelectGroup({ className, ...rest }) {
 }
 SelectGroup.displayName = "SelectGroup";
 function SelectGroupLabel({ className, ...rest }) {
-  return /* @__PURE__ */ jsx26("div", { className: cx(Select_default.groupLabel, className), ...rest });
+  const { size } = useSelectContext();
+  return /* @__PURE__ */ jsx26("div", { className: cx(Select_default.groupLabel, className), ...rest, ...toDataAttributes({ size }) });
 }
 SelectGroupLabel.displayName = "SelectGroupLabel";
 function SelectSeparator({ className, ...rest }) {
@@ -4416,6 +4627,49 @@ function SelectNativeRoot({
   ) });
 }
 SelectNativeRoot.displayName = "SelectNativeRoot";
+function SelectNativeMultiRoot({
+  size = "m",
+  value,
+  defaultValue,
+  onChange,
+  disabled,
+  hasError = false,
+  children
+}) {
+  const handleChange = React38.useCallback(
+    (next) => {
+      onChange?.(next);
+    },
+    [onChange]
+  );
+  const [selectedValues, setSelectedValues] = useControllableState({
+    value,
+    defaultValue: defaultValue ?? [],
+    onChange: handleChange
+  });
+  const { nodes: optionNodes } = React38.useMemo(() => walkNativeOptions(children), [children]);
+  const handleNativeChange = React38.useCallback(
+    (e) => {
+      const next = Array.from(e.target.selectedOptions, (o) => o.value);
+      setSelectedValues(next);
+    },
+    [setSelectedValues]
+  );
+  return /* @__PURE__ */ jsx26(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsx26(
+    "select",
+    {
+      className: Select_default.nativeSelect,
+      "data-multiple": "true",
+      disabled,
+      multiple: true,
+      value: selectedValues,
+      onChange: handleNativeChange,
+      ...toDataAttributes({ size, "has-error": hasError }),
+      children: optionNodes
+    }
+  ) });
+}
+SelectNativeMultiRoot.displayName = "SelectNativeMultiRoot";
 var Select = {
   Root: SelectRoot,
   Trigger: SelectTrigger,
@@ -7068,21 +7322,6 @@ function handleMenuNavigationKeyDown(e, container) {
 // src/components/dropdown/useDropdownPosition.ts
 import * as React48 from "react";
 
-// src/internal/scrollAncestors.ts
-var SCROLLABLE = /^(auto|scroll|overlay)$/;
-function getScrollContainers(node) {
-  const out = [window];
-  if (!node || typeof window === "undefined") return out;
-  for (let el = node.parentElement; el; el = el.parentElement) {
-    const { overflowX, overflowY } = window.getComputedStyle(el);
-    if (SCROLLABLE.test(overflowY) || SCROLLABLE.test(overflowX)) {
-      out.push(el);
-    }
-  }
-  if (window.visualViewport) out.push(window.visualViewport);
-  return out;
-}
-
 // src/components/dropdown/dropdownGeometry.ts
 var DROPDOWN_MIN_MAX_HEIGHT = 120;
 function getDropdownMaxHeightForAnchorSide(anchor, side, viewportHeight, panelOffsetPx, viewportPadPx) {
@@ -10146,9 +10385,470 @@ function TagIcon({ children, className }) {
 TagIcon.displayName = "TagIcon";
 var Tag = { Root: TagRoot, Icon: TagIcon };
 
-// src/components/textarea/Textarea.tsx
+// src/components/tag-select/TagSelect.tsx
 import * as React71 from "react";
 
+// src/components/tag-select/TagSelect.module.css
+var TagSelect_default = {
+  control: "TagSelect_control2",
+  chips: "TagSelect_chips2",
+  chip: "TagSelect_chip2",
+  chipBadge: "TagSelect_chipBadge2",
+  chipLabel: "TagSelect_chipLabel2",
+  chipRemove: "TagSelect_chipRemove2",
+  removeIcon: "TagSelect_removeIcon2",
+  input: "TagSelect_input2",
+  inputCollapsed: "TagSelect_inputCollapsed2",
+  chevronSlot: "TagSelect_chevronSlot2",
+  chevron: "TagSelect_chevron2",
+  panelInner: "TagSelect_panelInner2",
+  hint: "TagSelect_hint2",
+  optionRow: "TagSelect_optionRow2",
+  createRow: "TagSelect_createRow2",
+  createLabel: "TagSelect_createLabel2"
+};
+
+// src/components/tag-select/TagSelect.tsx
+import { jsx as jsx57, jsxs as jsxs31 } from "react/jsx-runtime";
+var CREATE_VALUE = "__prime_tag_select_create__";
+function normalizeList(selected, options, defaultTagColor) {
+  return selected.map((v) => {
+    const o = options.find((x) => x.value === v);
+    return {
+      value: v,
+      label: o?.label ?? v,
+      color: o?.color ?? defaultTagColor
+    };
+  });
+}
+function filterOptions(options, query) {
+  const q = query.trim().toLowerCase();
+  if (q.length === 0) return options;
+  return options.filter((o) => {
+    if (o.disabled) return false;
+    return o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q);
+  });
+}
+function optionsForList(options, query, selected) {
+  return filterOptions(options, query).filter((o) => !selected.includes(o.value));
+}
+function shouldShowCreate(creatable, inputTrim, selected, options) {
+  if (!creatable || inputTrim.length === 0) return false;
+  if (selected.includes(inputTrim)) return false;
+  const lower = inputTrim.toLowerCase();
+  const exists = options.some(
+    (o) => o.value === inputTrim || o.label.toLowerCase() === lower || o.value.toLowerCase() === lower
+  );
+  return !exists;
+}
+function TagSelectRoot({
+  options,
+  value: valueProp,
+  defaultValue = [],
+  onValueChange,
+  creatable = false,
+  onCreated,
+  defaultTagColor = "gray",
+  hint = "Select an option or create one",
+  createActionLabel = "Create",
+  disabled = false,
+  placeholder = "",
+  hasError = false,
+  size = "m",
+  id: idProp,
+  className,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy
+}) {
+  const generatedId = React71.useId();
+  const rootId = idProp ?? generatedId;
+  const listboxId = `${rootId}-listbox`;
+  const inputId = `${rootId}-input`;
+  const [selected, setSelected] = useControllableState({
+    value: valueProp,
+    defaultValue,
+    onChange: onValueChange
+  });
+  const [inputValue, setInputValue] = React71.useState("");
+  const [inputFocused, setInputFocused] = React71.useState(false);
+  const [open, setOpen] = React71.useState(false);
+  const [highlightedValue, setHighlightedValue] = React71.useState(void 0);
+  const triggerRef = React71.useRef(null);
+  const inputRef = React71.useRef(null);
+  const listboxRef = React71.useRef(null);
+  const overlayPortalLayer = useOverlayPortalLayer();
+  const { resolvedSide, update } = usePosition(triggerRef, listboxRef, {
+    side: "bottom",
+    align: "start"
+  });
+  const updateRef = React71.useRef(update);
+  updateRef.current = update;
+  const inputTrim = inputValue.trim();
+  const filtered = React71.useMemo(
+    () => optionsForList(options, inputValue, selected),
+    [options, inputValue, selected]
+  );
+  const showCreate = shouldShowCreate(creatable, inputTrim, selected, options);
+  const hasPanelContent = filtered.length > 0 || showCreate;
+  const flatOptionValues = React71.useMemo(() => {
+    const v = [];
+    if (showCreate) v.push(CREATE_VALUE);
+    for (const o of filtered) {
+      if (!o.disabled) v.push(o.value);
+    }
+    return v;
+  }, [filtered, showCreate]);
+  React71.useLayoutEffect(() => {
+    if (!open) return;
+    updateRef.current();
+    const raf = requestAnimationFrame(() => updateRef.current());
+    return () => cancelAnimationFrame(raf);
+  }, [open]);
+  React71.useEffect(() => {
+    if (!open) return;
+    let rafCoalesce = 0;
+    const schedule = () => {
+      cancelAnimationFrame(rafCoalesce);
+      rafCoalesce = requestAnimationFrame(() => updateRef.current());
+    };
+    window.addEventListener("resize", schedule);
+    const scrollTargets = getScrollContainers(triggerRef.current);
+    for (const t of scrollTargets) {
+      t.addEventListener("scroll", schedule, { passive: true });
+    }
+    const vv = window.visualViewport;
+    vv?.addEventListener("resize", schedule);
+    const panel = listboxRef.current;
+    let ro = null;
+    if (typeof ResizeObserver !== "undefined" && panel) {
+      ro = new ResizeObserver(schedule);
+      ro.observe(panel);
+    }
+    return () => {
+      cancelAnimationFrame(rafCoalesce);
+      window.removeEventListener("resize", schedule);
+      for (const t of scrollTargets) {
+        t.removeEventListener("scroll", schedule);
+      }
+      vv?.removeEventListener("resize", schedule);
+      ro?.disconnect();
+    };
+  }, [open]);
+  React71.useEffect(() => {
+    if (!open) {
+      setHighlightedValue(void 0);
+      return;
+    }
+    if (flatOptionValues.length === 0) {
+      setHighlightedValue(void 0);
+      return;
+    }
+    setHighlightedValue(
+      (prev) => prev && flatOptionValues.includes(prev) ? prev : flatOptionValues[0]
+    );
+  }, [open, flatOptionValues]);
+  React71.useEffect(() => {
+    if (!open) return;
+    if (!hasPanelContent) setOpen(false);
+  }, [open, hasPanelContent]);
+  useEscapeKey({ enabled: open, onEscape: () => setOpen(false) });
+  useOutsideClick({
+    refs: [triggerRef, listboxRef],
+    enabled: open,
+    onOutsideClick: () => setOpen(false)
+  });
+  const toggleValue = React71.useCallback(
+    (value) => {
+      setSelected((prev) => {
+        if (prev.includes(value)) {
+          return prev.filter((x) => x !== value);
+        }
+        return [...prev, value];
+      });
+    },
+    [setSelected]
+  );
+  const handleSelectFromList = React71.useCallback(
+    (rawValue) => {
+      if (rawValue === CREATE_VALUE) {
+        const v = inputTrim;
+        if (v.length === 0) return;
+        setSelected((prev) => {
+          if (prev.includes(v)) return prev;
+          onCreated?.(v);
+          return [...prev, v];
+        });
+        setInputValue("");
+        return;
+      }
+      toggleValue(rawValue);
+      setInputValue("");
+    },
+    [inputTrim, onCreated, setSelected, toggleValue]
+  );
+  const getItems = React71.useCallback(() => queryEnabledSelectOptions(listboxRef.current), []);
+  const onListboxKeyDown = (e) => {
+    handleSelectListboxKeyDown(e, {
+      items: getItems(),
+      highlightedValue,
+      setHighlightedValue,
+      onSelect: (v) => {
+        handleSelectFromList(v);
+      },
+      onClose: () => setOpen(false)
+    });
+  };
+  const onInputKeyDown = (e) => {
+    if (disabled) return;
+    if (e.key === "Backspace" && inputValue.length === 0 && selected.length > 0) {
+      e.preventDefault();
+      setSelected((prev) => prev.slice(0, -1));
+      return;
+    }
+    if (e.key === "Escape") {
+      if (open) {
+        e.preventDefault();
+        setOpen(false);
+      }
+      return;
+    }
+    if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ") {
+      if (!open) {
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+          e.preventDefault();
+          if (filtered.length > 0 || showCreate) setOpen(true);
+        }
+        return;
+      }
+      if (flatOptionValues.length === 0) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        const hv = highlightedValue ?? flatOptionValues[0];
+        if (hv === CREATE_VALUE) {
+          handleSelectFromList(CREATE_VALUE);
+        } else if (hv) {
+          const o = options.find((x) => x.value === hv);
+          if (o && !o.disabled) {
+            handleSelectFromList(o.value);
+          }
+        }
+        return;
+      }
+      handleSelectListboxKeyDown(e, {
+        items: getItems(),
+        highlightedValue,
+        setHighlightedValue,
+        onSelect: (v) => handleSelectFromList(v),
+        onClose: () => setOpen(false)
+      });
+    }
+  };
+  const chips = normalizeList(selected, options, defaultTagColor);
+  const isEmpty = selected.length === 0 && inputTrim.length === 0;
+  const inputCollapsed = !inputFocused && inputTrim.length === 0 && selected.length > 0;
+  const focusInput = () => {
+    inputRef.current?.focus();
+  };
+  const handleInputBlur = React71.useCallback((e) => {
+    const next = e.relatedTarget;
+    if (next instanceof Node && triggerRef.current?.contains(next)) {
+      return;
+    }
+    window.requestAnimationFrame(() => {
+      if (triggerRef.current?.contains(document.activeElement)) {
+        return;
+      }
+      setInputFocused(false);
+      setInputValue("");
+    });
+  }, []);
+  return /* @__PURE__ */ jsxs31(ControlSizeProvider, { value: size, children: [
+    /* @__PURE__ */ jsxs31(
+      "div",
+      {
+        ref: triggerRef,
+        className: cx(TagSelect_default.control, className),
+        onClick: () => {
+          if (!disabled) {
+            focusInput();
+            if (hasPanelContent) setOpen(true);
+          }
+        },
+        ...toDataAttributes({
+          size,
+          open,
+          empty: isEmpty ? true : void 0,
+          disabled: disabled ? true : void 0,
+          "has-error": hasError ? true : void 0
+        }),
+        children: [
+          /* @__PURE__ */ jsxs31("div", { className: TagSelect_default.chips, children: [
+            chips.map((c) => /* @__PURE__ */ jsx57("span", { className: TagSelect_default.chip, children: /* @__PURE__ */ jsxs31(Badge.Root, { color: c.color, variant: "filled", className: TagSelect_default.chipBadge, children: [
+              /* @__PURE__ */ jsx57("span", { className: TagSelect_default.chipLabel, children: c.label }),
+              /* @__PURE__ */ jsx57(
+                "button",
+                {
+                  type: "button",
+                  className: TagSelect_default.chipRemove,
+                  "aria-label": `Remove ${c.label}`,
+                  disabled,
+                  onMouseDown: (e) => {
+                    e.preventDefault();
+                  },
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    setSelected((prev) => prev.filter((x) => x !== c.value));
+                  },
+                  children: /* @__PURE__ */ jsx57(
+                    "svg",
+                    {
+                      className: TagSelect_default.removeIcon,
+                      viewBox: "0 0 12 12",
+                      fill: "none",
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ jsx57(
+                        "path",
+                        {
+                          d: "M2 2l8 8M10 2l-8 8",
+                          stroke: "currentColor",
+                          strokeWidth: "1.5",
+                          strokeLinecap: "round"
+                        }
+                      )
+                    }
+                  )
+                }
+              )
+            ] }) }, c.value)),
+            /* @__PURE__ */ jsx57(
+              "input",
+              {
+                ref: inputRef,
+                id: inputId,
+                type: "text",
+                role: "combobox",
+                "aria-expanded": open,
+                "aria-controls": listboxId,
+                "aria-autocomplete": "list",
+                "aria-label": ariaLabel,
+                "aria-labelledby": ariaLabelledBy,
+                disabled,
+                placeholder: selected.length === 0 ? placeholder : void 0,
+                className: cx(TagSelect_default.input, inputCollapsed && TagSelect_default.inputCollapsed),
+                value: inputValue,
+                onChange: (e) => {
+                  const next = e.target.value;
+                  setInputValue(next);
+                  const nextTrim = next.trim();
+                  const nextFiltered = optionsForList(options, next, selected);
+                  const nextShowCreate = shouldShowCreate(creatable, nextTrim, selected, options);
+                  if (nextFiltered.length > 0 || nextShowCreate) {
+                    setOpen(true);
+                  } else {
+                    setOpen(false);
+                  }
+                },
+                onKeyDown: onInputKeyDown,
+                onFocus: () => {
+                  setInputFocused(true);
+                  if (!disabled && hasPanelContent) setOpen(true);
+                },
+                onBlur: handleInputBlur
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx57("span", { className: TagSelect_default.chevronSlot, "aria-hidden": true, children: /* @__PURE__ */ jsx57("span", { className: TagSelect_default.chevron }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx57(Portal, { children: /* @__PURE__ */ jsxs31(
+      ScrollContainer,
+      {
+        ref: listboxRef,
+        id: listboxId,
+        role: "listbox",
+        "aria-multiselectable": "true",
+        "aria-hidden": !open,
+        tabIndex: -1,
+        "data-react-aria-top-layer": "true",
+        "data-overlay-portal-layer": overlayPortalLayer,
+        className: cx(Select_default.content, TagSelect_default.panelInner),
+        onKeyDown: onListboxKeyDown,
+        style: { display: open ? void 0 : "none" },
+        ...toDataAttributes({ side: resolvedSide, size }),
+        children: [
+          hint ? /* @__PURE__ */ jsx57("div", { className: TagSelect_default.hint, children: /* @__PURE__ */ jsx57(Typography.Root, { as: "div", variant: "body-small", tone: "muted", children: hint }) }) : null,
+          showCreate ? /* @__PURE__ */ jsxs31(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": false,
+              className: TagSelect_default.createRow,
+              ...toDataAttributes({
+                value: CREATE_VALUE,
+                label: inputTrim,
+                highlighted: highlightedValue === CREATE_VALUE,
+                disabled: false
+              }),
+              onMouseDown: (e) => {
+                e.preventDefault();
+              },
+              onMouseEnter: () => setHighlightedValue(CREATE_VALUE),
+              onClick: () => handleSelectFromList(CREATE_VALUE),
+              children: [
+                /* @__PURE__ */ jsx57(
+                  Typography.Root,
+                  {
+                    as: "span",
+                    variant: "body-small",
+                    tone: "muted",
+                    className: TagSelect_default.createLabel,
+                    children: createActionLabel
+                  }
+                ),
+                /* @__PURE__ */ jsx57(Badge.Root, { color: defaultTagColor, variant: "filled", children: inputTrim })
+              ]
+            },
+            CREATE_VALUE
+          ) : null,
+          filtered.map((o) => /* @__PURE__ */ jsx57(
+            "button",
+            {
+              type: "button",
+              role: "option",
+              "aria-selected": false,
+              disabled: o.disabled,
+              className: TagSelect_default.optionRow,
+              ...toDataAttributes({
+                value: o.value,
+                label: o.label,
+                highlighted: highlightedValue === o.value,
+                selected: false,
+                disabled: Boolean(o.disabled)
+              }),
+              onMouseDown: (e) => {
+                if (!o.disabled) e.preventDefault();
+              },
+              onMouseEnter: () => !o.disabled && setHighlightedValue(o.value),
+              onClick: () => !o.disabled && handleSelectFromList(o.value),
+              children: /* @__PURE__ */ jsx57(Badge.Root, { color: o.color ?? defaultTagColor, variant: "filled", children: o.label })
+            },
+            o.value
+          ))
+        ]
+      }
+    ) })
+  ] });
+}
+TagSelectRoot.displayName = "TagSelectRoot";
+var TagSelect = {
+  Root: TagSelectRoot
+};
+
+// src/components/textarea/Textarea.tsx
+import * as React72 from "react";
+
 // src/components/textarea/Textarea.module.css
 var Textarea_default = {
   field: "Textarea_field2",
@@ -10164,11 +10864,11 @@ var Textarea_default = {
 };
 
 // src/components/textarea/Textarea.tsx
-import { jsx as jsx57, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs32 } from "react/jsx-runtime";
 var [TextareaProvider, useTextareaContext] = createComponentContext("Textarea");
 function TextareaCharCounter({ current, max }) {
   const overflow = current > max;
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs32(
     "span",
     {
       className: Textarea_default.charCounter,
@@ -10186,8 +10886,8 @@ TextareaCharCounter.displayName = "Textarea.CharCounter";
 function partitionTextareaChildren(children) {
   const counters = [];
   const rest = [];
-  React71.Children.forEach(children, (child) => {
-    if (React71.isValidElement(child) && child.type === TextareaCharCounter) {
+  React72.Children.forEach(children, (child) => {
+    if (React72.isValidElement(child) && child.type === TextareaCharCounter) {
       counters.push(child);
     } else if (child != null && child !== false) {
       rest.push(child);
@@ -10195,7 +10895,7 @@ function partitionTextareaChildren(children) {
   });
   return { counters, rest };
 }
-var TextareaRoot = React71.forwardRef(
+var TextareaRoot = React72.forwardRef(
   ({
     id,
     className,
@@ -10212,12 +10912,12 @@ var TextareaRoot = React71.forwardRef(
     children,
     ...rest
   }, ref) => {
-    const rawId = React71.useId();
+    const rawId = React72.useId();
     const inputId = id ?? rawId;
     const hintId = `${inputId}-hint`;
     const errorId = `${inputId}-error`;
-    const [hasHint, setHasHint] = React71.useState(false);
-    const [hasError, setHasError] = React71.useState(false);
+    const [hasHint, setHasHint] = React72.useState(false);
+    const [hasError, setHasError] = React72.useState(false);
     const invalid = variant === "error" || hasError;
     const resolvedAriaInvalid = ariaInvalid ?? (invalid || void 0);
     const parts = [
@@ -10226,25 +10926,25 @@ var TextareaRoot = React71.forwardRef(
       hasError ? errorId : void 0
     ].filter(Boolean);
     const describedBy = parts.length > 0 ? parts.join(" ") : void 0;
-    const registerHint = React71.useCallback(() => setHasHint(true), []);
-    const unregisterHint = React71.useCallback(() => setHasHint(false), []);
-    const registerError = React71.useCallback(() => setHasError(true), []);
-    const unregisterError = React71.useCallback(() => setHasError(false), []);
-    const wrapperRef = React71.useRef(null);
+    const registerHint = React72.useCallback(() => setHasHint(true), []);
+    const unregisterHint = React72.useCallback(() => setHasHint(false), []);
+    const registerError = React72.useCallback(() => setHasError(true), []);
+    const unregisterError = React72.useCallback(() => setHasError(false), []);
+    const wrapperRef = React72.useRef(null);
     const { counters: counterChildren, rest: otherChildren } = partitionTextareaChildren(children);
     const showFooter = counterChildren.length > 0;
-    React71.useLayoutEffect(() => {
+    React72.useLayoutEffect(() => {
       if (!autoResize || !wrapperRef.current) return;
       const textarea = wrapperRef.current.querySelector("textarea");
       if (textarea) {
         wrapperRef.current.dataset.value = textarea.value;
       }
     }, [autoResize]);
-    React71.useEffect(() => {
+    React72.useEffect(() => {
       if (!autoResize || !wrapperRef.current || typeof value !== "string") return;
       wrapperRef.current.dataset.value = value;
     }, [autoResize, value]);
-    const handleInput = React71.useCallback(
+    const handleInput = React72.useCallback(
       (e) => {
         if (autoResize && wrapperRef.current) {
           wrapperRef.current.dataset.value = e.currentTarget.value;
@@ -10253,7 +10953,7 @@ var TextareaRoot = React71.forwardRef(
       },
       [autoResize, onInput]
     );
-    const ctxValue = React71.useMemo(
+    const ctxValue = React72.useMemo(
       () => ({
         hintId,
         errorId,
@@ -10277,7 +10977,7 @@ var TextareaRoot = React71.forwardRef(
         unregisterError
       ]
     );
-    const textareaEl = /* @__PURE__ */ jsx57(
+    const textareaEl = /* @__PURE__ */ jsx58(
       "textarea",
       {
         ref,
@@ -10293,9 +10993,9 @@ var TextareaRoot = React71.forwardRef(
         ...rest
       }
     );
-    const textareaBlock = autoResize ? /* @__PURE__ */ jsx57("div", { ref: wrapperRef, className: Textarea_default.autoResize, children: textareaEl }) : textareaEl;
-    return /* @__PURE__ */ jsx57(TextareaProvider, { value: ctxValue, children: /* @__PURE__ */ jsx57(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsxs31("div", { className: Textarea_default.field, ...toDataAttributes({ size }), children: [
-      /* @__PURE__ */ jsx57(
+    const textareaBlock = autoResize ? /* @__PURE__ */ jsx58("div", { ref: wrapperRef, className: Textarea_default.autoResize, children: textareaEl }) : textareaEl;
+    return /* @__PURE__ */ jsx58(TextareaProvider, { value: ctxValue, children: /* @__PURE__ */ jsx58(ControlSizeProvider, { value: size, children: /* @__PURE__ */ jsxs32("div", { className: Textarea_default.field, ...toDataAttributes({ size }), children: [
+      /* @__PURE__ */ jsx58(
         "label",
         {
           htmlFor: inputId,
@@ -10306,9 +11006,9 @@ var TextareaRoot = React71.forwardRef(
             readonly: Boolean(readOnly),
             size
           }),
-          children: /* @__PURE__ */ jsxs31("div", { className: Textarea_default.controlStack, children: [
-            /* @__PURE__ */ jsx57("div", { className: Textarea_default.textareaRegion, children: textareaBlock }),
-            showFooter ? /* @__PURE__ */ jsx57("div", { className: Textarea_default.controlFooter, children: counterChildren }) : null
+          children: /* @__PURE__ */ jsxs32("div", { className: Textarea_default.controlStack, children: [
+            /* @__PURE__ */ jsx58("div", { className: Textarea_default.textareaRegion, children: textareaBlock }),
+            showFooter ? /* @__PURE__ */ jsx58("div", { className: Textarea_default.controlFooter, children: counterChildren }) : null
           ] })
         }
       ),
@@ -10319,13 +11019,13 @@ var TextareaRoot = React71.forwardRef(
 TextareaRoot.displayName = "Textarea.Root";
 function TextareaHint({ children, className, ...rest }) {
   const { hintId, registerHint, unregisterHint, size, disabled, readOnly } = useTextareaContext();
-  React71.useLayoutEffect(() => {
+  React72.useLayoutEffect(() => {
     registerHint();
     return () => {
       unregisterHint();
     };
   }, [registerHint, unregisterHint]);
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx58(
     Hint.Root,
     {
       id: hintId,
@@ -10340,13 +11040,13 @@ function TextareaHint({ children, className, ...rest }) {
 TextareaHint.displayName = "Textarea.Hint";
 function TextareaError({ children, className, ...rest }) {
   const { errorId, registerError, unregisterError, size } = useTextareaContext();
-  React71.useLayoutEffect(() => {
+  React72.useLayoutEffect(() => {
     registerError();
     return () => {
       unregisterError();
     };
   }, [registerError, unregisterError]);
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx58(
     Hint.Root,
     {
       id: errorId,
@@ -10419,6 +11119,7 @@ export {
   Switch,
   Tabs,
   Tag,
+  TagSelect,
   Textarea,
   Tooltip,
   Typography,