@nexus-cross/design-system 1.1.0 → 1.1.1

package/dist/chunks/{chunk-56ZOOQFE.mjs → chunk-AG2UJPFX.mjs}

@@ -19,6 +19,97 @@ var comboboxInputVariants = cva("nexus-combobox", {
   },
   defaultVariants: { size: "md", state: "default" }
 });
+function ComboboxOption(_) {
+  return null;
+}
+ComboboxOption.displayName = "Combobox.Option";
+function ComboboxOptionDescription(_) {
+  return null;
+}
+ComboboxOptionDescription.displayName = "Combobox.OptionDescription";
+function ComboboxOptionMeta(_) {
+  return null;
+}
+ComboboxOptionMeta.displayName = "Combobox.OptionMeta";
+function isElementOfType(node, type) {
+  return React.isValidElement(node) && node.type === type;
+}
+function extractText(node) {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) {
+    return node.map(extractText).filter(Boolean).join(" ");
+  }
+  if (React.isValidElement(node)) {
+    if (node.type === ComboboxOptionDescription || node.type === ComboboxOptionMeta) {
+      return "";
+    }
+    const children = node.props?.children;
+    return extractText(children);
+  }
+  return "";
+}
+function resolveOptionsFromChildren(children) {
+  const resolved = [];
+  const seenValues = /* @__PURE__ */ new Set();
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) return;
+    if (child.type !== ComboboxOption) {
+      if (process.env.NODE_ENV !== "production") {
+        const name = typeof child.type === "string" ? child.type : child.type?.displayName ?? child.type?.name ?? "Unknown";
+        console.warn(
+          `[Combobox] Ignoring child <${name}>. Only <Combobox.Option> is allowed as a direct child of <Combobox>.`
+        );
+      }
+      return;
+    }
+    const props = child.props;
+    const value = props.value;
+    if (typeof value !== "string" || value.length === 0) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error(
+          "[Combobox] <Combobox.Option> requires a non-empty string `value` prop."
+        );
+      }
+      return;
+    }
+    if (seenValues.has(value)) {
+      if (process.env.NODE_ENV !== "production") {
+        console.error(
+          `[Combobox] Duplicate option value: "${value}". Each <Combobox.Option> must have a unique \`value\`. The duplicate will be ignored.`
+        );
+      }
+      return;
+    }
+    seenValues.add(value);
+    const labelNodes = [];
+    let description = null;
+    let meta = null;
+    React.Children.forEach(props.children, (slot) => {
+      if (isElementOfType(slot, ComboboxOptionDescription)) {
+        description = slot.props.children;
+        return;
+      }
+      if (isElementOfType(slot, ComboboxOptionMeta)) {
+        meta = slot.props.children;
+        return;
+      }
+      labelNodes.push(slot);
+    });
+    const label = labelNodes.length === 1 ? labelNodes[0] : labelNodes;
+    const textValue = typeof props.textValue === "string" && props.textValue.length > 0 ? props.textValue : extractText(label);
+    resolved.push({
+      value,
+      disabled: !!props.disabled,
+      textValue,
+      className: props.className,
+      label,
+      description,
+      meta
+    });
+  });
+  return resolved;
+}
 var ChevronDown = ({ className }) => /* @__PURE__ */ jsx(
   "svg",
   {
@@ -67,8 +158,8 @@ var CloseIcon = ({ className }) => /* @__PURE__ */ jsx(
 );
 function defaultFilter(option, query) {
   if (!query) return true;
-  const label = typeof option.label === "string" ? option.label : typeof option.label === "number" ? String(option.label) : option.value;
-  return label.toLowerCase().includes(query.toLowerCase());
+  const haystack = option.textValue || option.value;
+  return haystack.toLowerCase().includes(query.toLowerCase());
 }
 function useDebouncedCallback(callback, delay) {
   const cbRef = React.useRef(callback);
@@ -89,10 +180,10 @@ function useDebouncedCallback(callback, delay) {
     [delay]
   );
 }
-var Combobox = React.forwardRef(
-  function Combobox2(props, ref) {
+var ComboboxImpl = React.forwardRef(
+  function Combobox(props, ref) {
     const {
-      options,
+      children,
       onSearch,
       searchDebounce = 250,
       loading = false,
@@ -164,11 +255,20 @@ var Combobox = React.forwardRef(
     const [query, setQuery] = React.useState("");
     const [activeIndex, setActiveIndex] = React.useState(0);
     const debouncedSearch = useDebouncedCallback(onSearch, searchDebounce);
+    const resolvedOptions = React.useMemo(
+      () => resolveOptionsFromChildren(children),
+      [children]
+    );
     const visibleOptions = React.useMemo(() => {
-      if (onSearch) return options;
+      if (onSearch) return resolvedOptions;
       const filterFn = filter ?? defaultFilter;
-      return options.filter((o) => filterFn(o, query));
-    }, [onSearch, options, filter, query]);
+      return resolvedOptions.filter(
+        (o) => filterFn(
+          { value: o.value, textValue: o.textValue, disabled: o.disabled },
+          query
+        )
+      );
+    }, [onSearch, resolvedOptions, filter, query]);
     React.useEffect(() => {
       if (activeIndex >= visibleOptions.length) {
         setActiveIndex(visibleOptions.length > 0 ? 0 : -1);
@@ -196,7 +296,7 @@ var Combobox = React.forwardRef(
         inputRef.current?.focus();
       } else {
         updateValue(option.value);
-        const labelText = typeof option.label === "string" ? option.label : option.value;
+        const labelText = option.textValue || option.value;
         setQuery(labelText);
         setOpen(false);
         inputRef.current?.blur();
@@ -288,9 +388,9 @@ var Combobox = React.forwardRef(
     };
     const selectedOptionMap = React.useMemo(() => {
       const map = /* @__PURE__ */ new Map();
-      for (const opt of options) map.set(opt.value, opt);
+      for (const opt of resolvedOptions) map.set(opt.value, opt);
       return map;
-    }, [options]);
+    }, [resolvedOptions]);
     const prevValueRef = React.useRef(
       currentValue
     );
@@ -306,7 +406,7 @@ var Combobox = React.forwardRef(
         return;
       }
       const opt = selectedOptionMap.get(currentValue);
-      const labelText = opt ? typeof opt.label === "string" ? opt.label : currentValue : currentValue;
+      const labelText = opt ? opt.textValue || currentValue : currentValue;
       if (valueChanged) {
         setQuery(labelText);
       } else {
@@ -332,8 +432,9 @@ var Combobox = React.forwardRef(
           /* @__PURE__ */ jsxs("div", { className: "nexus-combobox__content", children: [
             isMultiple && selectedValues.map((val) => {
               const opt = selectedOptionMap.get(val);
+              const chipLabel = opt ? opt.label ?? opt.textValue ?? val : val;
               return /* @__PURE__ */ jsxs("span", { className: "nexus-combobox__chip", children: [
-                /* @__PURE__ */ jsx("span", { className: "nexus-combobox__chip-label", children: opt?.label ?? val }),
+                /* @__PURE__ */ jsx("span", { className: "nexus-combobox__chip-label", children: chipLabel }),
                 !disabled && /* @__PURE__ */ jsx(
                   "button",
                   {
@@ -453,7 +554,8 @@ var Combobox = React.forwardRef(
                       "nexus-combobox-option",
                       active && "nexus-combobox-option--active",
                       selected && "nexus-combobox-option--selected",
-                      option.disabled && "nexus-combobox-option--disabled"
+                      option.disabled && "nexus-combobox-option--disabled",
+                      option.className
                     ),
                     onMouseEnter: () => setActiveIndex(idx),
                     onMouseDown: (e) => {
@@ -463,8 +565,9 @@ var Combobox = React.forwardRef(
                     children: [
                       /* @__PURE__ */ jsxs("div", { className: "nexus-combobox-option__body", children: [
                         /* @__PURE__ */ jsx("div", { className: "nexus-combobox-option__label", children: option.label }),
-                        option.description && /* @__PURE__ */ jsx("div", { className: "nexus-combobox-option__description", children: option.description })
+                        option.description != null && /* @__PURE__ */ jsx("div", { className: "nexus-combobox-option__description", children: option.description })
                       ] }),
+                      option.meta != null && /* @__PURE__ */ jsx("div", { className: "nexus-combobox-option__meta", children: option.meta }),
                       selected && /* @__PURE__ */ jsx(
                         "svg",
                         {
@@ -509,6 +612,10 @@ var Combobox = React.forwardRef(
     ] });
   }
 );
-Combobox.displayName = "Combobox";
+ComboboxImpl.displayName = "Combobox";
+var Combobox2 = ComboboxImpl;
+Combobox2.Option = ComboboxOption;
+Combobox2.OptionDescription = ComboboxOptionDescription;
+Combobox2.OptionMeta = ComboboxOptionMeta;
 
-export { Combobox, comboboxInputVariants };
+export { Combobox2 as Combobox, ComboboxOption, ComboboxOptionDescription, ComboboxOptionMeta, comboboxInputVariants };