@nexus-cross/design-system 1.0.14 → 1.1.1

package/dist/chunks/chunk-RC2Y4UH7.js

@@ -0,0 +1,648 @@
+'use strict';
+
+var chunkIOSIQLZL_js = require('./chunk-IOSIQLZL.js');
+var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');
+var React = require('react');
+var PopoverPrimitive = require('@radix-ui/react-popover');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
+
+var comboboxInputVariants = classVarianceAuthority.cva("nexus-combobox", {
+  variants: {
+    size: {
+      md: "nexus-combobox--md",
+      lg: "nexus-combobox--lg",
+      xl: "nexus-combobox--xl"
+    },
+    state: {
+      default: "nexus-combobox--default",
+      error: "nexus-combobox--error"
+    }
+  },
+  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__namespace.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__namespace.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__namespace.Children.forEach(children, (child) => {
+    if (!React__namespace.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__namespace.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__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className,
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 6l4 4 4-4" })
+  }
+);
+var ClearIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className,
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    "aria-hidden": true,
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5" })
+  }
+);
+var CloseIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className,
+    width: "12",
+    height: "12",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    "aria-hidden": true,
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4l8 8M12 4l-8 8" })
+  }
+);
+function defaultFilter(option, query) {
+  if (!query) return true;
+  const haystack = option.textValue || option.value;
+  return haystack.toLowerCase().includes(query.toLowerCase());
+}
+function useDebouncedCallback(callback, delay) {
+  const cbRef = React__namespace.useRef(callback);
+  React__namespace.useEffect(() => {
+    cbRef.current = callback;
+  }, [callback]);
+  const timer = React__namespace.useRef(null);
+  React__namespace.useEffect(() => {
+    return () => {
+      if (timer.current) clearTimeout(timer.current);
+    };
+  }, []);
+  return React__namespace.useCallback(
+    (...args) => {
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = setTimeout(() => cbRef.current?.(...args), delay);
+    },
+    [delay]
+  );
+}
+var ComboboxImpl = React__namespace.forwardRef(
+  function Combobox(props, ref) {
+    const {
+      children,
+      onSearch,
+      searchDebounce = 250,
+      loading = false,
+      filter,
+      placeholder,
+      emptyMessage = "\uAC80\uC0C9 \uACB0\uACFC \uC5C6\uC74C",
+      loadingMessage = "\uAC80\uC0C9 \uC911\u2026",
+      size,
+      disabled,
+      error,
+      clearable = true,
+      autoOpenOnFocus = true,
+      label,
+      description,
+      className,
+      popoverClassName,
+      id,
+      multiple,
+      value: controlledValue,
+      defaultValue,
+      onValueChange
+    } = props;
+    const isMultiple = !!multiple;
+    const fallbackId = React__namespace.useRef(
+      `nexus-cmbx-${Math.random().toString(36).slice(2, 9)}`
+    );
+    const inputId = id || fallbackId.current;
+    const listboxId = `${inputId}-listbox`;
+    const inputRef = React__namespace.useRef(null);
+    const anchorRef = React__namespace.useRef(null);
+    const setInputRef = React__namespace.useCallback(
+      (node) => {
+        inputRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      [ref]
+    );
+    const isControlled = controlledValue !== void 0;
+    const initialInternal = React__namespace.useMemo(() => {
+      if (isMultiple) {
+        return Array.isArray(defaultValue) ? defaultValue : [];
+      }
+      return typeof defaultValue === "string" ? defaultValue : null;
+    }, [isMultiple, defaultValue]);
+    const [internalValue, setInternalValue] = React__namespace.useState(initialInternal);
+    const currentValue = isControlled ? controlledValue : internalValue;
+    const selectedValues = React__namespace.useMemo(() => {
+      if (isMultiple) return Array.isArray(currentValue) ? currentValue : [];
+      return typeof currentValue === "string" ? [currentValue] : [];
+    }, [isMultiple, currentValue]);
+    const updateValue = React__namespace.useCallback(
+      (next) => {
+        if (!isControlled) setInternalValue(next);
+        if (isMultiple) {
+          onValueChange?.(
+            next ?? []
+          );
+        } else {
+          onValueChange?.(
+            next ?? null
+          );
+        }
+      },
+      [isControlled, isMultiple, onValueChange]
+    );
+    const [open, setOpen] = React__namespace.useState(false);
+    const [query, setQuery] = React__namespace.useState("");
+    const [activeIndex, setActiveIndex] = React__namespace.useState(0);
+    const debouncedSearch = useDebouncedCallback(onSearch, searchDebounce);
+    const resolvedOptions = React__namespace.useMemo(
+      () => resolveOptionsFromChildren(children),
+      [children]
+    );
+    const visibleOptions = React__namespace.useMemo(() => {
+      if (onSearch) return resolvedOptions;
+      const filterFn = filter ?? defaultFilter;
+      return resolvedOptions.filter(
+        (o) => filterFn(
+          { value: o.value, textValue: o.textValue, disabled: o.disabled },
+          query
+        )
+      );
+    }, [onSearch, resolvedOptions, filter, query]);
+    React__namespace.useEffect(() => {
+      if (activeIndex >= visibleOptions.length) {
+        setActiveIndex(visibleOptions.length > 0 ? 0 : -1);
+      }
+    }, [visibleOptions, activeIndex]);
+    const handleInputChange = (e) => {
+      const next = e.target.value;
+      setQuery(next);
+      setOpen(true);
+      setActiveIndex(0);
+      if (onSearch) debouncedSearch(next);
+    };
+    const handleFocus = () => {
+      if (autoOpenOnFocus && !disabled) setOpen(true);
+    };
+    const selectOption = (option) => {
+      if (option.disabled) return;
+      if (isMultiple) {
+        const set = new Set(selectedValues);
+        if (set.has(option.value)) set.delete(option.value);
+        else set.add(option.value);
+        updateValue(Array.from(set));
+        setQuery("");
+        if (onSearch) debouncedSearch("");
+        inputRef.current?.focus();
+      } else {
+        updateValue(option.value);
+        const labelText = option.textValue || option.value;
+        setQuery(labelText);
+        setOpen(false);
+        inputRef.current?.blur();
+      }
+    };
+    const removeChip = (val) => {
+      if (!isMultiple) return;
+      updateValue(selectedValues.filter((v) => v !== val));
+      inputRef.current?.focus();
+    };
+    const clearAll = () => {
+      if (isMultiple) updateValue([]);
+      else updateValue(null);
+      setQuery("");
+      if (onSearch) debouncedSearch("");
+      inputRef.current?.focus();
+    };
+    const handleKeyDown = (e) => {
+      if (disabled) return;
+      if (e.nativeEvent.isComposing || e.keyCode === 229) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        if (!open) {
+          setOpen(true);
+          return;
+        }
+        if (visibleOptions.length === 0) return;
+        let next = activeIndex + 1;
+        while (next < visibleOptions.length && visibleOptions[next].disabled)
+          next++;
+        if (next < visibleOptions.length) setActiveIndex(next);
+        else setActiveIndex(visibleOptions.findIndex((o) => !o.disabled));
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        if (!open) {
+          setOpen(true);
+          return;
+        }
+        if (visibleOptions.length === 0) return;
+        let next = activeIndex - 1;
+        while (next >= 0 && visibleOptions[next].disabled) next--;
+        if (next >= 0) setActiveIndex(next);
+        else {
+          for (let i = visibleOptions.length - 1; i >= 0; i--) {
+            if (!visibleOptions[i].disabled) {
+              setActiveIndex(i);
+              break;
+            }
+          }
+        }
+        return;
+      }
+      if (e.key === "Home") {
+        e.preventDefault();
+        const idx = visibleOptions.findIndex((o) => !o.disabled);
+        if (idx >= 0) setActiveIndex(idx);
+        return;
+      }
+      if (e.key === "End") {
+        e.preventDefault();
+        for (let i = visibleOptions.length - 1; i >= 0; i--) {
+          if (!visibleOptions[i].disabled) {
+            setActiveIndex(i);
+            break;
+          }
+        }
+        return;
+      }
+      if (e.key === "Enter") {
+        if (open && activeIndex >= 0 && visibleOptions[activeIndex]) {
+          e.preventDefault();
+          selectOption(visibleOptions[activeIndex]);
+        }
+        return;
+      }
+      if (e.key === "Escape") {
+        if (open) {
+          e.preventDefault();
+          setOpen(false);
+        }
+        return;
+      }
+      if (e.key === "Backspace" && isMultiple && query === "" && selectedValues.length > 0) {
+        e.preventDefault();
+        removeChip(selectedValues[selectedValues.length - 1]);
+      }
+    };
+    const selectedOptionMap = React__namespace.useMemo(() => {
+      const map = /* @__PURE__ */ new Map();
+      for (const opt of resolvedOptions) map.set(opt.value, opt);
+      return map;
+    }, [resolvedOptions]);
+    const prevValueRef = React__namespace.useRef(
+      currentValue
+    );
+    React__namespace.useEffect(() => {
+      if (isMultiple) {
+        prevValueRef.current = currentValue;
+        return;
+      }
+      const valueChanged = prevValueRef.current !== currentValue;
+      prevValueRef.current = currentValue;
+      if (typeof currentValue !== "string") {
+        if (valueChanged) setQuery("");
+        return;
+      }
+      const opt = selectedOptionMap.get(currentValue);
+      const labelText = opt ? opt.textValue || currentValue : currentValue;
+      if (valueChanged) {
+        setQuery(labelText);
+      } else {
+        setQuery((prev) => prev === currentValue ? labelText : prev);
+      }
+    }, [isMultiple, currentValue, selectedOptionMap]);
+    const hasValue = isMultiple && selectedValues.length > 0 || !isMultiple && typeof currentValue === "string" && currentValue !== "";
+    const showClear = clearable && !disabled && (hasValue || query.length > 0);
+    const state = error ? "error" : "default";
+    const hasField = !!(label || description);
+    const inputBox = /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: anchorRef,
+        className: chunkCZC76ZD5_js.cn(
+          comboboxInputVariants({ size, state }),
+          disabled && "nexus-combobox--disabled",
+          open && "nexus-combobox--open",
+          !hasField && className
+        ),
+        onClick: () => !disabled && inputRef.current?.focus(),
+        children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "nexus-combobox__chip", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-combobox__chip-label", children: chipLabel }),
+                !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "nexus-combobox__chip-remove",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      removeChip(val);
+                    },
+                    "aria-label": `Remove ${val}`,
+                    tabIndex: -1,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { className: "nexus-combobox__chip-remove-icon" })
+                  }
+                )
+              ] }, val);
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: setInputRef,
+                id: inputId,
+                type: "text",
+                role: "combobox",
+                autoComplete: "off",
+                spellCheck: false,
+                className: "nexus-combobox__input",
+                placeholder: isMultiple && selectedValues.length > 0 ? "" : placeholder,
+                value: query,
+                disabled,
+                "aria-expanded": open,
+                "aria-controls": listboxId,
+                "aria-autocomplete": "list",
+                "aria-activedescendant": open && activeIndex >= 0 && visibleOptions[activeIndex] ? `${inputId}-opt-${activeIndex}` : void 0,
+                "aria-invalid": error || void 0,
+                "aria-describedby": description ? `${inputId}-desc` : void 0,
+                onChange: handleInputChange,
+                onFocus: handleFocus,
+                onKeyDown: handleKeyDown
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nexus-combobox__suffix", children: [
+            loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-combobox__icon nexus-combobox__icon--loading", children: /* @__PURE__ */ jsxRuntime.jsx(chunkIOSIQLZL_js.Spinner, { size: 16 }) }),
+            showClear && !loading && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "nexus-combobox__clear",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  clearAll();
+                },
+                tabIndex: -1,
+                "aria-label": "Clear",
+                children: /* @__PURE__ */ jsxRuntime.jsx(ClearIcon, {})
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: chunkCZC76ZD5_js.cn(
+                  "nexus-combobox__chevron",
+                  open && "nexus-combobox__chevron--open"
+                ),
+                "aria-hidden": true,
+                children: /* @__PURE__ */ jsxRuntime.jsx(ChevronDown, {})
+              }
+            )
+          ] })
+        ]
+      }
+    );
+    const popoverBody = /* @__PURE__ */ jsxRuntime.jsxs(PopoverPrimitive__namespace.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Anchor, { asChild: true, children: inputBox }),
+      /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        PopoverPrimitive__namespace.Content,
+        {
+          align: "start",
+          side: "bottom",
+          sideOffset: 4,
+          onOpenAutoFocus: (e) => e.preventDefault(),
+          onCloseAutoFocus: (e) => e.preventDefault(),
+          onPointerDownOutside: (e) => {
+            if (anchorRef.current && e.target instanceof Node && anchorRef.current.contains(e.target)) {
+              e.preventDefault();
+            }
+          },
+          onInteractOutside: (e) => {
+            if (anchorRef.current && e.target instanceof Node && anchorRef.current.contains(e.target)) {
+              e.preventDefault();
+            }
+          },
+          className: chunkCZC76ZD5_js.cn("nexus-combobox-popover", popoverClassName),
+          style: { width: "var(--radix-popover-trigger-width)" },
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              role: "listbox",
+              id: listboxId,
+              className: "nexus-combobox-listbox",
+              children: loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nexus-combobox-popover__status", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(chunkIOSIQLZL_js.Spinner, { size: 16 }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: loadingMessage })
+              ] }) : visibleOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-combobox-popover__status", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: emptyMessage }) }) : visibleOptions.map((option, idx) => {
+                const selected = selectedValues.includes(option.value);
+                const active = idx === activeIndex;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    id: `${inputId}-opt-${idx}`,
+                    role: "option",
+                    "aria-selected": selected,
+                    "data-disabled": option.disabled || void 0,
+                    "data-active": active || void 0,
+                    "data-selected": selected || void 0,
+                    className: chunkCZC76ZD5_js.cn(
+                      "nexus-combobox-option",
+                      active && "nexus-combobox-option--active",
+                      selected && "nexus-combobox-option--selected",
+                      option.disabled && "nexus-combobox-option--disabled",
+                      option.className
+                    ),
+                    onMouseEnter: () => setActiveIndex(idx),
+                    onMouseDown: (e) => {
+                      e.preventDefault();
+                      selectOption(option);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nexus-combobox-option__body", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-combobox-option__label", children: option.label }),
+                        option.description != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-combobox-option__description", children: option.description })
+                      ] }),
+                      option.meta != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "nexus-combobox-option__meta", children: option.meta }),
+                      selected && /* @__PURE__ */ jsxRuntime.jsx(
+                        "svg",
+                        {
+                          className: "nexus-combobox-option__check",
+                          width: "14",
+                          height: "14",
+                          viewBox: "0 0 16 16",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          "aria-hidden": true,
+                          children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 8l4 4 6-8" })
+                        }
+                      )
+                    ]
+                  },
+                  option.value
+                );
+              })
+            }
+          )
+        }
+      ) })
+    ] });
+    if (!hasField) return popoverBody;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkCZC76ZD5_js.cn("nexus-combobox-field", className), children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "nexus-combobox-field__label", htmlFor: inputId, children: label }),
+      popoverBody,
+      description && /* @__PURE__ */ jsxRuntime.jsx(
+        "p",
+        {
+          id: `${inputId}-desc`,
+          className: chunkCZC76ZD5_js.cn(
+            "nexus-combobox-field__description",
+            error && "nexus-combobox-field__description--error"
+          ),
+          children: description
+        }
+      )
+    ] });
+  }
+);
+ComboboxImpl.displayName = "Combobox";
+var Combobox2 = ComboboxImpl;
+Combobox2.Option = ComboboxOption;
+Combobox2.OptionDescription = ComboboxOptionDescription;
+Combobox2.OptionMeta = ComboboxOptionMeta;
+
+exports.Combobox = Combobox2;
+exports.ComboboxOption = ComboboxOption;
+exports.ComboboxOptionDescription = ComboboxOptionDescription;
+exports.ComboboxOptionMeta = ComboboxOptionMeta;
+exports.comboboxInputVariants = comboboxInputVariants;

package/dist/chunks/{chunk-PEIEVKD5.js → chunk-RCIBLLSF.js}

@@ -35,10 +35,13 @@ function DataList({
   loading = false,
   errorFallback,
   children,
-  className
+  className,
+  style
 }) {
+  const isLoading = !list || loading;
+  const isEmpty = !isLoading && list.length === 0;
   const content = React__namespace.useMemo(() => {
-    if (!list || loading) {
+    if (isLoading) {
       if (skeletonElement) {
         return Array.from({ length: skeletonCount }).map(
           (_, index) => React__namespace.cloneElement(skeletonElement, { key: index })
@@ -46,31 +49,27 @@ function DataList({
       }
       return loadingElement ?? /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunkCZC76ZD5_js.cn("nexus-datalist-center"), children: /* @__PURE__ */ jsxRuntime.jsx(chunkIOSIQLZL_js.Spinner, { size: 32 }) });
     }
-    if (list.length === 0) {
+    if (isEmpty) {
       if (React__namespace.isValidElement(noDataMessage)) {
         return noDataMessage;
       }
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "p",
-        {
-          className: chunkCZC76ZD5_js.cn("nexus-datalist-empty"),
-          children: noDataMessage ?? "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4"
-        }
-      );
+      return /* @__PURE__ */ jsxRuntime.jsx("p", { className: chunkCZC76ZD5_js.cn("nexus-datalist-empty"), children: noDataMessage ?? "\uB370\uC774\uD130\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4" });
     }
     return list.map(
       (item, index) => children({ item, index })
     );
   }, [
     list,
-    loading,
+    isLoading,
+    isEmpty,
     skeletonElement,
     skeletonCount,
     loadingElement,
     noDataMessage,
     children
   ]);
-  return /* @__PURE__ */ jsxRuntime.jsx(chunkEVOOTSY5_js.ErrorBoundary, { fallback: errorFallback, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: content }) });
+  const dataState = isLoading ? skeletonElement ? "skeleton" : "loading" : isEmpty ? "empty" : "ready";
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkEVOOTSY5_js.ErrorBoundary, { fallback: errorFallback, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className, style, "data-state": dataState, children: content }) });
 }
 DataList.displayName = "DataList";