@rufous/ui 0.3.17 → 0.3.19

package/dist/main.cjs

@@ -168,6 +168,12 @@ __export(main_exports, {
   ViewIcon: () => viewIcon_default,
   WorkItemIcon: () => workItemIcon_default,
   Zoom: () => Zoom,
+  getAllCountries: () => getAllCountries2,
+  getCitiesOfCountry: () => getCitiesOfCountry,
+  getCitiesOfState: () => getCitiesOfState,
+  getCountryByCode: () => getCountryByCode,
+  getStateByCode: () => getStateByCode,
+  getStatesOfCountry: () => getStatesOfCountry,
   transformLegacyTodos: () => transformLegacyTodos,
   useRufousTheme: () => useRufousTheme
 });
@@ -4697,7 +4703,11 @@ function DataGrid({
   onRowDoubleClick,
   onCellDoubleClick,
   headerActions,
-  toolbarContent
+  toolbarContent,
+  searchableColumns,
+  onSearchChange,
+  onFiltersChange,
+  hideTopExport = false
 }) {
   const sxClass = useSx(sx);
   const [editingCell, setEditingCell] = (0, import_react23.useState)(null);
@@ -4802,6 +4812,9 @@ function DataGrid({
       return next;
     });
   }, [initialColumnsProp]);
+  (0, import_react23.useEffect)(() => {
+    onFiltersChange?.(advancedFilters);
+  }, [advancedFilters, onFiltersChange]);
   const handleSort = (fieldKey, dir) => {
     if (dir !== void 0) {
       setSortField(fieldKey);
@@ -4851,10 +4864,10 @@ function DataGrid({
   };
   const filteredData = (0, import_react23.useMemo)(() => {
     return data.filter((item) => {
-      const matchesGlobal = !filterText || resolvedColumns.some((col) => {
-        if (col.hidden) return false;
-        return getDisplayValue(item, col).toLowerCase().includes(filterText.toLowerCase());
-      });
+      const searchCols = searchableColumns ? resolvedColumns.filter((col) => searchableColumns.includes(String(col.field))) : resolvedColumns.filter((col) => !col.hidden);
+      const matchesGlobal = !filterText || searchCols.some(
+        (col) => getDisplayValue(item, col).toLowerCase().includes(filterText.toLowerCase())
+      );
       const evalFilter = (f) => {
         if (!f.value && f.operator !== "is empty" && f.operator !== "is not empty") return true;
         const col = resolvedColumns.find((c) => String(c.field) === f.column || String(c.key) === f.column);
@@ -4962,7 +4975,11 @@ function DataGrid({
       }
       return matchesGlobal && matchesAdvanced;
     });
-  }, [data, filterText, advancedFilters, resolvedColumns]);
+  }, [data, filterText, advancedFilters, resolvedColumns, searchableColumns]);
+  (0, import_react23.useEffect)(() => {
+    if (!onSearchChange || !filterText) return;
+    if (filteredData.length === 0) onSearchChange(filterText);
+  }, [filteredData, filterText, onSearchChange]);
   const sortedData = (0, import_react23.useMemo)(() => {
     if (!sortField || !sortDirection) return filteredData;
     const col = resolvedColumns.find((c) => c.field === sortField);
@@ -4993,11 +5010,16 @@ function DataGrid({
       (item) => exportableCols.map((c) => {
         const field = String(c.field);
         const raw = item[field];
-        let val = c.valueGetter ? c.valueGetter({ value: raw, row: item, field }) : raw;
-        if (c.valueFormatter) {
-          val = c.valueFormatter({ value: val, row: item, field });
+        let str;
+        if (c.exportValue) {
+          str = c.exportValue(raw, item).replace(/"/g, '""');
+        } else {
+          let val = c.valueGetter ? c.valueGetter({ value: raw, row: item, field }) : raw;
+          if (c.valueFormatter) {
+            val = c.valueFormatter({ value: val, row: item, field });
+          }
+          str = val === null || val === void 0 ? "" : String(val).replace(/"/g, '""');
         }
-        const str = val === null || val === void 0 ? "" : String(val).replace(/"/g, '""');
         return `"${str}"`;
       }).join(",")
     );
@@ -5090,7 +5112,7 @@ function DataGrid({
       onClick: () => setShowManageColumns(true)
     },
     /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Columns, { size: 16 })
-  )), /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Download, { size: 14 }), " Export CSV"), headerActions && /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-header-slot ${alignClass(headerActions.align)}` }, headerActions.content))), /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-toolbar ${alignClass(toolbarContent?.align)}` }, toolbarContent?.content || ""), /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-table-wrap${paginatedData.length === 0 && !loading ? " dg-table-wrap--empty" : ""}` }, loading && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-loading-overlay" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-loading-spinner" })), /* @__PURE__ */ import_react23.default.createElement("table", { className: "dg-table" }, /* @__PURE__ */ import_react23.default.createElement("thead", null, /* @__PURE__ */ import_react23.default.createElement("tr", null, visibleColumns.map((col, idx) => {
+  )), !hideTopExport && /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Download, { size: 14 }), " Export CSV"), headerActions && /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-header-slot ${alignClass(headerActions.align)}` }, headerActions.content))), /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-toolbar ${alignClass(toolbarContent?.align)}` }, toolbarContent?.content || ""), /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-table-wrap${paginatedData.length === 0 && !loading ? " dg-table-wrap--empty" : ""}` }, loading && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-loading-overlay" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-loading-spinner" })), /* @__PURE__ */ import_react23.default.createElement("table", { className: "dg-table" }, /* @__PURE__ */ import_react23.default.createElement("thead", null, /* @__PURE__ */ import_react23.default.createElement("tr", null, visibleColumns.map((col, idx) => {
     const colField = String(col.field);
     const width = columnWidths[colField] || 200;
     const leftOffset = getLeftOffset(col, idx);
@@ -5111,9 +5133,8 @@ function DataGrid({
           onClick: () => col.sortable !== false && handleSort(col.field || "")
         },
         col.headerName,
-        isSorted && sortDirection === "asc" && /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ChevronUp, { size: 12 }),
-        isSorted && sortDirection === "desc" && /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ChevronDown, { size: 12 })
-      ), /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-th-actions${isFiltered ? " dg-th-actions--filtered" : ""}` }, isFiltered && /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Filter, { size: 11, style: { color: "var(--primary-color)" } }), !col.disableColumnMenu && /* @__PURE__ */ import_react23.default.createElement(
+        col.sortable !== false && /* @__PURE__ */ import_react23.default.createElement("span", { className: `dg-sort-icon${isSorted ? " dg-sort-icon--active" : ""}` }, isSorted && sortDirection === "asc" && /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ChevronUp, { size: 14 }), isSorted && sortDirection === "desc" && /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ChevronDown, { size: 14 }), !isSorted && /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.ChevronsUpDown, { size: 14 }))
+      ), /* @__PURE__ */ import_react23.default.createElement("div", { className: `dg-th-actions${isFiltered ? " dg-th-actions--filtered" : ""}` }, isFiltered && /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-th-filter-btn", onClick: () => setShowAdvancedFilter(true) }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Filter, { size: 11 })), !col.disableColumnMenu && /* @__PURE__ */ import_react23.default.createElement(
         "button",
         {
           className: "dg-th-menu-btn",
@@ -5205,7 +5226,7 @@ function DataGrid({
       },
       action.icon
     )))));
-  })()))))), paginatedData.length === 0 && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-empty-state" }, /* @__PURE__ */ import_react23.default.createElement("svg", { className: "dg-empty-icon", viewBox: "0 0 200 160", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "30", width: "160", height: "100", rx: "8", fill: "var(--hover-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "30", width: "160", height: "28", rx: "8", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "50", width: "160", height: "8", rx: "0", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "72", y1: "30", x2: "72", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "128", y1: "30", x2: "128", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "20", y1: "78", x2: "180", y2: "78", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "20", y1: "104", x2: "180", y2: "104", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "32", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "84", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "140", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "32", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "84", y: "113", width: "32", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "140", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("circle", { cx: "148", cy: "108", r: "26", fill: "var(--surface-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ import_react23.default.createElement("circle", { cx: "145", cy: "105", r: "10", stroke: "var(--text-secondary)", strokeWidth: "2.5", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "152", y1: "113", x2: "161", y2: "122", stroke: "var(--text-secondary)", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "141", y1: "101", x2: "149", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "149", y1: "101", x2: "141", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" })), /* @__PURE__ */ import_react23.default.createElement("p", { className: "dg-empty-title" }, "No data found"), /* @__PURE__ */ import_react23.default.createElement("p", { className: "dg-empty-subtitle" }, filterText || hasActiveFilters ? "Try adjusting your search or filters" : "No records to display"))), pagination && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-pagination" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-page-info" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-per-page" }, /* @__PURE__ */ import_react23.default.createElement("span", null, "Rows per page:"), /* @__PURE__ */ import_react23.default.createElement(
+  })()))))), paginatedData.length === 0 && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-empty-state" }, /* @__PURE__ */ import_react23.default.createElement("svg", { className: "dg-empty-icon", viewBox: "0 0 200 160", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "30", width: "160", height: "100", rx: "8", fill: "var(--hover-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "30", width: "160", height: "28", rx: "8", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "20", y: "50", width: "160", height: "8", rx: "0", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "72", y1: "30", x2: "72", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "128", y1: "30", x2: "128", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "20", y1: "78", x2: "180", y2: "78", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "20", y1: "104", x2: "180", y2: "104", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "32", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "84", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "140", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "32", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "84", y: "113", width: "32", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("rect", { x: "140", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("circle", { cx: "148", cy: "108", r: "26", fill: "var(--surface-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ import_react23.default.createElement("circle", { cx: "145", cy: "105", r: "10", stroke: "var(--text-secondary)", strokeWidth: "2.5", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "152", y1: "113", x2: "161", y2: "122", stroke: "var(--text-secondary)", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "141", y1: "101", x2: "149", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("line", { x1: "149", y1: "101", x2: "141", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" })), /* @__PURE__ */ import_react23.default.createElement("p", { className: "dg-empty-title" }, "No data found"), /* @__PURE__ */ import_react23.default.createElement("p", { className: "dg-empty-subtitle" }, filterText || hasActiveFilters ? "Try adjusting your search or filters" : "No records to display"))), pagination && /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-pagination" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-page-info" }, /* @__PURE__ */ import_react23.default.createElement(Tooltip, { title: "Export CSV", placement: "top" }, /* @__PURE__ */ import_react23.default.createElement("button", { className: "dg-icon-btn", onClick: handleExport }, /* @__PURE__ */ import_react23.default.createElement(import_lucide_react2.Download, { size: 14 }))), /* @__PURE__ */ import_react23.default.createElement("div", { className: "dg-per-page" }, /* @__PURE__ */ import_react23.default.createElement("span", null, "Rows per page:"), /* @__PURE__ */ import_react23.default.createElement(
     FilterSelect,
     {
       placement: "top",
@@ -9520,6 +9541,7 @@ function SmartSelect({
   value,
   onChange,
   onSearchChange,
+  debounceMs = 300,
   getOptionLabel,
   getOptionValue,
   getOptionSubLabel,
@@ -9544,6 +9566,10 @@ function SmartSelect({
   style,
   sx
 }) {
+  const debounceTimer = (0, import_react51.useRef)(null);
+  (0, import_react51.useEffect)(() => () => {
+    if (debounceTimer.current) clearTimeout(debounceTimer.current);
+  }, []);
   const getValue = (0, import_react51.useCallback)(
     (o) => getOptionValue ? getOptionValue(o) : String(getOptionLabel(o)),
     [getOptionValue, getOptionLabel]
@@ -9570,6 +9596,7 @@ function SmartSelect({
   }, [multiple, value, getValue]);
   const handleInputChange = (0, import_react51.useCallback)((_, inputValue) => {
     if (!onSearchChange) return;
+    if (debounceTimer.current) clearTimeout(debounceTimer.current);
     if (!inputValue) {
       onSearchChange("");
       return;
@@ -9577,10 +9604,15 @@ function SmartSelect({
     const hasLocalMatch = flatOptionsList.some(
       (opt) => getOptionLabel(opt).toLowerCase().includes(inputValue.toLowerCase()) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(inputValue.toLowerCase())
     );
-    if (!hasLocalMatch) {
+    if (hasLocalMatch) return;
+    if (debounceMs <= 0) {
       onSearchChange(inputValue);
+    } else {
+      debounceTimer.current = setTimeout(() => {
+        onSearchChange(inputValue);
+      }, debounceMs);
     }
-  }, [onSearchChange, flatOptionsList, getOptionLabel, getOptionSubLabel]);
+  }, [onSearchChange, debounceMs, flatOptionsList, getOptionLabel, getOptionSubLabel]);
   const handleChange = (0, import_react51.useCallback)((_, newValue) => {
     if (!multiple || !allowChildNodesSelection || !getOptionChildren) {
       onChange?.(newValue);
@@ -13590,6 +13622,57 @@ var RufousTextContent = ({ content, className, style, sx }) => {
     }
   );
 };
+
+// lib/utils/locationData.ts
+var import_country_state_city3 = require("country-state-city");
+var _stateNameCache = /* @__PURE__ */ new Map();
+function getStateNameMap(countryCode) {
+  if (!_stateNameCache.has(countryCode)) {
+    const map = /* @__PURE__ */ new Map();
+    import_country_state_city3.State.getStatesOfCountry(countryCode).forEach((s2) => map.set(s2.isoCode, s2.name));
+    _stateNameCache.set(countryCode, map);
+  }
+  return _stateNameCache.get(countryCode);
+}
+function getAllCountries2() {
+  return import_country_state_city3.Country.getAllCountries();
+}
+function getCountryByCode(isoCode) {
+  return import_country_state_city3.Country.getCountryByCode(isoCode) ?? void 0;
+}
+function getStatesOfCountry(countryCode) {
+  const countryName = import_country_state_city3.Country.getCountryByCode(countryCode)?.name ?? "";
+  return import_country_state_city3.State.getStatesOfCountry(countryCode).map((state) => ({
+    ...state,
+    countryName
+  }));
+}
+function getStateByCode(stateCode, countryCode) {
+  const state = import_country_state_city3.State.getStateByCodeAndCountry(stateCode, countryCode);
+  if (!state) return void 0;
+  const countryName = import_country_state_city3.Country.getCountryByCode(countryCode)?.name ?? "";
+  return { ...state, countryName };
+}
+function getCitiesOfState(countryCode, stateCode) {
+  const countryName = import_country_state_city3.Country.getCountryByCode(countryCode)?.name ?? "";
+  const stateName = import_country_state_city3.State.getStateByCodeAndCountry(stateCode, countryCode)?.name ?? "";
+  return import_country_state_city3.City.getCitiesOfState(countryCode, stateCode).map((city) => ({
+    ...city,
+    cityCode: city.name.slice(0, 3),
+    countryName,
+    stateName
+  }));
+}
+function getCitiesOfCountry(countryCode) {
+  const countryName = import_country_state_city3.Country.getCountryByCode(countryCode)?.name ?? "";
+  const stateNameMap = getStateNameMap(countryCode);
+  return (import_country_state_city3.City.getCitiesOfCountry(countryCode) ?? []).map((city) => ({
+    ...city,
+    cityCode: city.name.slice(0, 3),
+    countryName,
+    stateName: stateNameMap.get(city.stateCode) ?? ""
+  }));
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   APP_THEMES,
@@ -13731,6 +13814,12 @@ var RufousTextContent = ({ content, className, style, sx }) => {
   ViewIcon,
   WorkItemIcon,
   Zoom,
+  getAllCountries,
+  getCitiesOfCountry,
+  getCitiesOfState,
+  getCountryByCode,
+  getStateByCode,
+  getStatesOfCountry,
   transformLegacyTodos,
   useRufousTheme
 });

package/dist/main.css

@@ -507,6 +507,21 @@
 .dg-th-label.no-sort {
   cursor: default;
 }
+.dg-sort-icon {
+  display: flex;
+  align-items: center;
+  opacity: 0;
+  transition: opacity 0.15s;
+  flex-shrink: 0;
+  color: var(--text-secondary);
+}
+.dg-sort-icon--active {
+  opacity: 1;
+  color: var(--primary-color);
+}
+.dg-thead-cell:hover .dg-sort-icon {
+  opacity: 1;
+}
 .dg-th-actions {
   display: flex;
   align-items: center;
@@ -534,6 +549,20 @@
   background: var(--border-color);
   color: var(--text-color);
 }
+.dg-th-filter-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 3px;
+  border-radius: 4px;
+  color: var(--primary-color);
+  display: flex;
+  align-items: center;
+  transition: background 0.15s;
+}
+.dg-th-filter-btn:hover {
+  background: rgba(164, 27, 6, 0.08);
+}
 .dg-resizer {
   width: 4px;
   height: 16px;

package/dist/main.d.cts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import React__default, { ReactNode, CSSProperties, InputHTMLAttributes, TextareaHTMLAttributes, ReactElement, ComponentType } from 'react';
+import { ICity, ICountry, IState } from 'country-state-city';
 
 declare const APP_THEMES: {
     default: {
@@ -850,6 +851,12 @@ interface Column<T> {
         row: T;
         field: string;
     }) => string;
+    /**
+     * Override the value written to CSV export for this column.
+     * Receives the raw field value and the full row item.
+     * Takes precedence over valueGetter / valueFormatter for export purposes.
+     */
+    exportValue?: (value: any, item: T) => string;
     width?: string | number;
     minWidth?: string | number;
     maxWidth?: string | number;
@@ -875,6 +882,12 @@ interface Column<T> {
     disableColumnMenu?: boolean;
     isExportable?: boolean;
 }
+interface FilterState {
+    column: string;
+    operator: string;
+    value: string;
+    logic: 'AND' | 'OR';
+}
 interface Action<T> {
     label: string;
     icon: React__default.ReactNode;
@@ -932,11 +945,25 @@ interface DataGridProps<T> {
     headerActions?: DataGridToolbarSlot;
     /** Extra content rendered in a second row below the header */
     toolbarContent?: DataGridToolbarSlot;
+    /**
+     * Limit global search to these column field names.
+     * When omitted, all visible columns are searched.
+     */
+    searchableColumns?: string[];
+    /**
+     * Called when the search query finds no local results.
+     * Use this to trigger a server-side search.
+     */
+    onSearchChange?: (query: string) => void;
+    /** Called whenever the applied advanced filters change. */
+    onFiltersChange?: (filters: FilterState[]) => void;
+    /** Hide the "Export CSV" button in the header toolbar. */
+    hideTopExport?: boolean;
 }
 
 declare function DataGrid<T extends {
     id: string | number;
-}>({ columns: initialColumnsProp, data, actions, loading, pagination, paginationMode, rowCount, paginationModel, onPaginationModelChange, pageSize: initialPageSize, pageSizeOptions, title, className, sx, onRowDoubleClick, onCellDoubleClick, headerActions, toolbarContent, }: DataGridProps<T>): React__default.JSX.Element;
+}>({ columns: initialColumnsProp, data, actions, loading, pagination, paginationMode, rowCount, paginationModel, onPaginationModelChange, pageSize: initialPageSize, pageSizeOptions, title, className, sx, onRowDoubleClick, onCellDoubleClick, headerActions, toolbarContent, searchableColumns, onSearchChange, onFiltersChange, hideTopExport, }: DataGridProps<T>): React__default.JSX.Element;
 
 type SelectOption = {
     value: string | number;
@@ -1886,6 +1913,11 @@ interface SmartSelectProps<T = any> {
      * use this to trigger an API / server search.
      */
     onSearchChange?: (query: string) => void;
+    /**
+     * Debounce delay in ms before `onSearchChange` fires.
+     * Defaults to 300 ms. Pass 0 to disable debouncing.
+     */
+    debounceMs?: number;
     /** Primary display label for an option (required) */
     getOptionLabel: (option: T) => string;
     /** Unique key for an option — defaults to the label string */
@@ -1939,7 +1971,7 @@ interface SmartSelectProps<T = any> {
     style?: CSSProperties;
     sx?: SxProp;
 }
-declare function SmartSelect<T = any>({ options, value, onChange, onSearchChange, getOptionLabel, getOptionValue, getOptionSubLabel, getOptionChildren, multiple, allowChildNodesSelection, loading, loadingText, filterOptions: filterOptionsProp, renderOption: renderOptionProp, limitTags, label, placeholder, variant, size, disabled, error, helperText, fullWidth, required, className, style, sx, }: SmartSelectProps<T>): React__default.JSX.Element;
+declare function SmartSelect<T = any>({ options, value, onChange, onSearchChange, debounceMs, getOptionLabel, getOptionValue, getOptionSubLabel, getOptionChildren, multiple, allowChildNodesSelection, loading, loadingText, filterOptions: filterOptionsProp, renderOption: renderOptionProp, limitTags, label, placeholder, variant, size, disabled, error, helperText, fullWidth, required, className, style, sx, }: SmartSelectProps<T>): React__default.JSX.Element;
 
 type ToolbarButton = 'undo' | 'redo' | 'ai' | 'paragraph' | 'fontsize' | 'font' | 'color' | 'bold' | 'italic' | 'strike' | 'link' | 'lineheight' | 'ul' | 'ol' | 'align' | 'indent' | 'outdent' | 'table' | 'image' | 'video' | 'cut' | 'copy' | 'paste' | 'specialchars' | 'code' | 'fullscreen' | 'tts' | 'stt' | 'translate' | 'todo' | '|';
 type EditorVariant = 'default' | 'basic';
@@ -2027,4 +2059,48 @@ interface MentionItemData {
     shortName?: string;
 }
 
-export { APP_THEMES, Accordion, AccordionDetails, type AccordionDetailsProps, type AccordionProps, AccordionSummary, type AccordionSummaryProps, type Action, ActivateUserIcon, AddButton, AddressLookup, ArchivedIcon, AssignGroupIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BaseDialog, Box, type BoxProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, CameraIcon, CancelButton, Card, CardActions, type CardActionsProps, CardContent, type CardContentProps, CardHeader, type CardHeaderProps, CardMedia, type CardMediaProps, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, CircularProgress, CircularProgressIcon, type CircularProgressIconProps, CloseIcon, Collapse, type CollapseProps, type Column, CopyIcon, DataGrid, type DataGridProps, DateField, type DateFieldProps, type DateFormatString, DateRangeField, type DateRangeFieldProps, type DateRangeValue, DifficultyAllIcon, DifficultyEasyIcon, DifficultyHardIcon, DifficultyMediumIcon, Divider, type DividerProps, DollarIcon, DownloadIcon, DownloadPdfIcon, Drawer, type DrawerProps, EditChatIcon, EditIcon, EngagementIcon, Fade, type FadeProps, FunctionIcon, Grid, type GridProps, Grow, type GrowProps, HelpOutlinedIcon, HierarchyIcon, IconButton, type IconButtonProps, ImageField, type ImageFieldProps, InactiveGroupIcon, IndustryIcon, InvoiceIcon, Link, type LinkProps, List, ListItem, ListItemButton, type ListItemButtonProps, ListItemIcon, type ListItemIconProps, type ListItemProps, ListItemText, type ListItemTextProps, type ListProps, ListSubheader, type ListSubheaderProps, LocationPinIcon, LogsIcon, Menu, MenuDivider, MenuItem, type MenuItemProps, MenuList, type MenuListProps, type MenuProps, MinExperienceIcon, NineDotMenuIcon, NotificationIcon, type NumberVariant, Paper, type PaperProps, PhoneField, type PhoneFieldProps, Popover, type PopoverProps, Popper, type PopperProps, ProjectIcon, QualificationsIcon, QuestionStatusAllIcon, QuestionStatusPrivateIcon, QuestionStatusPublicIcon, QuestionTypeAllIcon, QuestionTypeCodingIcon, QuestionTypeDescriptiveIcon, QuestionTypeMultipleIcon, QuestionTypeSingleIcon, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, RefreshIcon, ResendInviteIcon, RolesIcon, RufousAiIcon, RufousBirdIcon, RufousLauncherIcon, RufousLogoLoader, type RufousLogoLoaderProps, RufousTextContent, type RufousTextContentProps, RufousTextEditor, type MentionItemData as RufousTextEditorMentionItem, type RufousTextEditorProps, RufousThemeProvider, Select, type SelectProps, SidebarIcon, Skeleton, type SkeletonProps, Slide, type SlideProps, Slider, type SliderProps, SmartSelect, type SmartSelectProps, Snackbar, type SnackbarProps, SoftSkillsIcon, type SortDirection, Stack, type StackProps, StandardButton, Step, StepButton, type StepButtonProps, StepContent, type StepContentProps, StepLabel, type StepLabelProps, type StepProps, Stepper, type StepperProps, SubmitButton, SubscribeIcon, SuspendUserIcon, Switch, type SwitchProps, type SxProp, Tab, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, TechnicalSkillsIcon, TextField, type TextFieldProps, TickIcon, TimerIcon, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Tooltip, type TooltipProps, TrashIcon, type TreeNode, TreeSelect, type TreeSelectMultiValue, type TreeSelectProps, type TreeSelectValue, Typography, type TypographyProps, UnArchivedIcon, UnsubscribeIcon, UploadIcon, UserAssignIcon, type UserOption, UserSelectionField, type UserSelectionFieldProps, ViewIcon, WorkItemIcon, Zoom, type ZoomProps, transformLegacyTodos, useRufousTheme };
+/** Country — same shape as the library; re-exported with a typed name for convenience. */
+type EnhancedCountry = ICountry;
+/** State enriched with the full name of its parent country. */
+interface EnhancedState extends IState {
+    countryName: string;
+}
+/** City enriched with a short city code and the full state + country names. */
+interface EnhancedCity extends ICity {
+    /** First three characters of the city name (e.g. "Des" for "Des Moines"). */
+    cityCode: string;
+    /** Full name of the parent country (e.g. "United States"). */
+    countryName: string;
+    /** Full name of the parent state (e.g. "Iowa"). */
+    stateName: string;
+}
+/** Returns all countries (same data as the library, typed as EnhancedCountry). */
+declare function getAllCountries(): EnhancedCountry[];
+/** Returns a single country by its ISO 2-letter code, or undefined if not found. */
+declare function getCountryByCode(isoCode: string): EnhancedCountry | undefined;
+/**
+ * Returns all states for a country, each enriched with `countryName`.
+ * @param countryCode  ISO 2-letter country code, e.g. "US"
+ */
+declare function getStatesOfCountry(countryCode: string): EnhancedState[];
+/**
+ * Returns a single state by its code + parent country, enriched with `countryName`.
+ * @param stateCode    ISO state code, e.g. "IA"
+ * @param countryCode  ISO 2-letter country code, e.g. "US"
+ */
+declare function getStateByCode(stateCode: string, countryCode: string): EnhancedState | undefined;
+/**
+ * Returns all cities for a given state, each enriched with `cityCode`, `countryName`,
+ * and `stateName`.
+ * @param countryCode  ISO 2-letter country code, e.g. "US"
+ * @param stateCode    ISO state code, e.g. "IA"
+ */
+declare function getCitiesOfState(countryCode: string, stateCode: string): EnhancedCity[];
+/**
+ * Returns all cities for a given country, each enriched with `cityCode`, `countryName`,
+ * and `stateName`.
+ * @param countryCode  ISO 2-letter country code, e.g. "US"
+ */
+declare function getCitiesOfCountry(countryCode: string): EnhancedCity[];
+
+export { APP_THEMES, Accordion, AccordionDetails, type AccordionDetailsProps, type AccordionProps, AccordionSummary, type AccordionSummaryProps, type Action, ActivateUserIcon, AddButton, AddressLookup, ArchivedIcon, AssignGroupIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BaseDialog, Box, type BoxProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, CameraIcon, CancelButton, Card, CardActions, type CardActionsProps, CardContent, type CardContentProps, CardHeader, type CardHeaderProps, CardMedia, type CardMediaProps, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, CircularProgress, CircularProgressIcon, type CircularProgressIconProps, CloseIcon, Collapse, type CollapseProps, type Column, CopyIcon, DataGrid, type DataGridProps, DateField, type DateFieldProps, type DateFormatString, DateRangeField, type DateRangeFieldProps, type DateRangeValue, DifficultyAllIcon, DifficultyEasyIcon, DifficultyHardIcon, DifficultyMediumIcon, Divider, type DividerProps, DollarIcon, DownloadIcon, DownloadPdfIcon, Drawer, type DrawerProps, EditChatIcon, EditIcon, EngagementIcon, type EnhancedCity, type EnhancedCountry, type EnhancedState, Fade, type FadeProps, FunctionIcon, Grid, type GridProps, Grow, type GrowProps, HelpOutlinedIcon, HierarchyIcon, IconButton, type IconButtonProps, ImageField, type ImageFieldProps, InactiveGroupIcon, IndustryIcon, InvoiceIcon, Link, type LinkProps, List, ListItem, ListItemButton, type ListItemButtonProps, ListItemIcon, type ListItemIconProps, type ListItemProps, ListItemText, type ListItemTextProps, type ListProps, ListSubheader, type ListSubheaderProps, LocationPinIcon, LogsIcon, Menu, MenuDivider, MenuItem, type MenuItemProps, MenuList, type MenuListProps, type MenuProps, MinExperienceIcon, NineDotMenuIcon, NotificationIcon, type NumberVariant, Paper, type PaperProps, PhoneField, type PhoneFieldProps, Popover, type PopoverProps, Popper, type PopperProps, ProjectIcon, QualificationsIcon, QuestionStatusAllIcon, QuestionStatusPrivateIcon, QuestionStatusPublicIcon, QuestionTypeAllIcon, QuestionTypeCodingIcon, QuestionTypeDescriptiveIcon, QuestionTypeMultipleIcon, QuestionTypeSingleIcon, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, RefreshIcon, ResendInviteIcon, RolesIcon, RufousAiIcon, RufousBirdIcon, RufousLauncherIcon, RufousLogoLoader, type RufousLogoLoaderProps, RufousTextContent, type RufousTextContentProps, RufousTextEditor, type MentionItemData as RufousTextEditorMentionItem, type RufousTextEditorProps, RufousThemeProvider, Select, type SelectProps, SidebarIcon, Skeleton, type SkeletonProps, Slide, type SlideProps, Slider, type SliderProps, SmartSelect, type SmartSelectProps, Snackbar, type SnackbarProps, SoftSkillsIcon, type SortDirection, Stack, type StackProps, StandardButton, Step, StepButton, type StepButtonProps, StepContent, type StepContentProps, StepLabel, type StepLabelProps, type StepProps, Stepper, type StepperProps, SubmitButton, SubscribeIcon, SuspendUserIcon, Switch, type SwitchProps, type SxProp, Tab, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, TechnicalSkillsIcon, TextField, type TextFieldProps, TickIcon, TimerIcon, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Tooltip, type TooltipProps, TrashIcon, type TreeNode, TreeSelect, type TreeSelectMultiValue, type TreeSelectProps, type TreeSelectValue, Typography, type TypographyProps, UnArchivedIcon, UnsubscribeIcon, UploadIcon, UserAssignIcon, type UserOption, UserSelectionField, type UserSelectionFieldProps, ViewIcon, WorkItemIcon, Zoom, type ZoomProps, getAllCountries, getCitiesOfCountry, getCitiesOfState, getCountryByCode, getStateByCode, getStatesOfCountry, transformLegacyTodos, useRufousTheme };

package/dist/main.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import React__default, { ReactNode, CSSProperties, InputHTMLAttributes, TextareaHTMLAttributes, ReactElement, ComponentType } from 'react';
+import { ICity, ICountry, IState } from 'country-state-city';
 
 declare const APP_THEMES: {
     default: {
@@ -850,6 +851,12 @@ interface Column<T> {
         row: T;
         field: string;
     }) => string;
+    /**
+     * Override the value written to CSV export for this column.
+     * Receives the raw field value and the full row item.
+     * Takes precedence over valueGetter / valueFormatter for export purposes.
+     */
+    exportValue?: (value: any, item: T) => string;
     width?: string | number;
     minWidth?: string | number;
     maxWidth?: string | number;
@@ -875,6 +882,12 @@ interface Column<T> {
     disableColumnMenu?: boolean;
     isExportable?: boolean;
 }
+interface FilterState {
+    column: string;
+    operator: string;
+    value: string;
+    logic: 'AND' | 'OR';
+}
 interface Action<T> {
     label: string;
     icon: React__default.ReactNode;
@@ -932,11 +945,25 @@ interface DataGridProps<T> {
     headerActions?: DataGridToolbarSlot;
     /** Extra content rendered in a second row below the header */
     toolbarContent?: DataGridToolbarSlot;
+    /**
+     * Limit global search to these column field names.
+     * When omitted, all visible columns are searched.
+     */
+    searchableColumns?: string[];
+    /**
+     * Called when the search query finds no local results.
+     * Use this to trigger a server-side search.
+     */
+    onSearchChange?: (query: string) => void;
+    /** Called whenever the applied advanced filters change. */
+    onFiltersChange?: (filters: FilterState[]) => void;
+    /** Hide the "Export CSV" button in the header toolbar. */
+    hideTopExport?: boolean;
 }
 
 declare function DataGrid<T extends {
     id: string | number;
-}>({ columns: initialColumnsProp, data, actions, loading, pagination, paginationMode, rowCount, paginationModel, onPaginationModelChange, pageSize: initialPageSize, pageSizeOptions, title, className, sx, onRowDoubleClick, onCellDoubleClick, headerActions, toolbarContent, }: DataGridProps<T>): React__default.JSX.Element;
+}>({ columns: initialColumnsProp, data, actions, loading, pagination, paginationMode, rowCount, paginationModel, onPaginationModelChange, pageSize: initialPageSize, pageSizeOptions, title, className, sx, onRowDoubleClick, onCellDoubleClick, headerActions, toolbarContent, searchableColumns, onSearchChange, onFiltersChange, hideTopExport, }: DataGridProps<T>): React__default.JSX.Element;
 
 type SelectOption = {
     value: string | number;
@@ -1886,6 +1913,11 @@ interface SmartSelectProps<T = any> {
      * use this to trigger an API / server search.
      */
     onSearchChange?: (query: string) => void;
+    /**
+     * Debounce delay in ms before `onSearchChange` fires.
+     * Defaults to 300 ms. Pass 0 to disable debouncing.
+     */
+    debounceMs?: number;
     /** Primary display label for an option (required) */
     getOptionLabel: (option: T) => string;
     /** Unique key for an option — defaults to the label string */
@@ -1939,7 +1971,7 @@ interface SmartSelectProps<T = any> {
     style?: CSSProperties;
     sx?: SxProp;
 }
-declare function SmartSelect<T = any>({ options, value, onChange, onSearchChange, getOptionLabel, getOptionValue, getOptionSubLabel, getOptionChildren, multiple, allowChildNodesSelection, loading, loadingText, filterOptions: filterOptionsProp, renderOption: renderOptionProp, limitTags, label, placeholder, variant, size, disabled, error, helperText, fullWidth, required, className, style, sx, }: SmartSelectProps<T>): React__default.JSX.Element;
+declare function SmartSelect<T = any>({ options, value, onChange, onSearchChange, debounceMs, getOptionLabel, getOptionValue, getOptionSubLabel, getOptionChildren, multiple, allowChildNodesSelection, loading, loadingText, filterOptions: filterOptionsProp, renderOption: renderOptionProp, limitTags, label, placeholder, variant, size, disabled, error, helperText, fullWidth, required, className, style, sx, }: SmartSelectProps<T>): React__default.JSX.Element;
 
 type ToolbarButton = 'undo' | 'redo' | 'ai' | 'paragraph' | 'fontsize' | 'font' | 'color' | 'bold' | 'italic' | 'strike' | 'link' | 'lineheight' | 'ul' | 'ol' | 'align' | 'indent' | 'outdent' | 'table' | 'image' | 'video' | 'cut' | 'copy' | 'paste' | 'specialchars' | 'code' | 'fullscreen' | 'tts' | 'stt' | 'translate' | 'todo' | '|';
 type EditorVariant = 'default' | 'basic';
@@ -2027,4 +2059,48 @@ interface MentionItemData {
     shortName?: string;
 }
 
-export { APP_THEMES, Accordion, AccordionDetails, type AccordionDetailsProps, type AccordionProps, AccordionSummary, type AccordionSummaryProps, type Action, ActivateUserIcon, AddButton, AddressLookup, ArchivedIcon, AssignGroupIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BaseDialog, Box, type BoxProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, CameraIcon, CancelButton, Card, CardActions, type CardActionsProps, CardContent, type CardContentProps, CardHeader, type CardHeaderProps, CardMedia, type CardMediaProps, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, CircularProgress, CircularProgressIcon, type CircularProgressIconProps, CloseIcon, Collapse, type CollapseProps, type Column, CopyIcon, DataGrid, type DataGridProps, DateField, type DateFieldProps, type DateFormatString, DateRangeField, type DateRangeFieldProps, type DateRangeValue, DifficultyAllIcon, DifficultyEasyIcon, DifficultyHardIcon, DifficultyMediumIcon, Divider, type DividerProps, DollarIcon, DownloadIcon, DownloadPdfIcon, Drawer, type DrawerProps, EditChatIcon, EditIcon, EngagementIcon, Fade, type FadeProps, FunctionIcon, Grid, type GridProps, Grow, type GrowProps, HelpOutlinedIcon, HierarchyIcon, IconButton, type IconButtonProps, ImageField, type ImageFieldProps, InactiveGroupIcon, IndustryIcon, InvoiceIcon, Link, type LinkProps, List, ListItem, ListItemButton, type ListItemButtonProps, ListItemIcon, type ListItemIconProps, type ListItemProps, ListItemText, type ListItemTextProps, type ListProps, ListSubheader, type ListSubheaderProps, LocationPinIcon, LogsIcon, Menu, MenuDivider, MenuItem, type MenuItemProps, MenuList, type MenuListProps, type MenuProps, MinExperienceIcon, NineDotMenuIcon, NotificationIcon, type NumberVariant, Paper, type PaperProps, PhoneField, type PhoneFieldProps, Popover, type PopoverProps, Popper, type PopperProps, ProjectIcon, QualificationsIcon, QuestionStatusAllIcon, QuestionStatusPrivateIcon, QuestionStatusPublicIcon, QuestionTypeAllIcon, QuestionTypeCodingIcon, QuestionTypeDescriptiveIcon, QuestionTypeMultipleIcon, QuestionTypeSingleIcon, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, RefreshIcon, ResendInviteIcon, RolesIcon, RufousAiIcon, RufousBirdIcon, RufousLauncherIcon, RufousLogoLoader, type RufousLogoLoaderProps, RufousTextContent, type RufousTextContentProps, RufousTextEditor, type MentionItemData as RufousTextEditorMentionItem, type RufousTextEditorProps, RufousThemeProvider, Select, type SelectProps, SidebarIcon, Skeleton, type SkeletonProps, Slide, type SlideProps, Slider, type SliderProps, SmartSelect, type SmartSelectProps, Snackbar, type SnackbarProps, SoftSkillsIcon, type SortDirection, Stack, type StackProps, StandardButton, Step, StepButton, type StepButtonProps, StepContent, type StepContentProps, StepLabel, type StepLabelProps, type StepProps, Stepper, type StepperProps, SubmitButton, SubscribeIcon, SuspendUserIcon, Switch, type SwitchProps, type SxProp, Tab, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, TechnicalSkillsIcon, TextField, type TextFieldProps, TickIcon, TimerIcon, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Tooltip, type TooltipProps, TrashIcon, type TreeNode, TreeSelect, type TreeSelectMultiValue, type TreeSelectProps, type TreeSelectValue, Typography, type TypographyProps, UnArchivedIcon, UnsubscribeIcon, UploadIcon, UserAssignIcon, type UserOption, UserSelectionField, type UserSelectionFieldProps, ViewIcon, WorkItemIcon, Zoom, type ZoomProps, transformLegacyTodos, useRufousTheme };
+/** Country — same shape as the library; re-exported with a typed name for convenience. */
+type EnhancedCountry = ICountry;
+/** State enriched with the full name of its parent country. */
+interface EnhancedState extends IState {
+    countryName: string;
+}
+/** City enriched with a short city code and the full state + country names. */
+interface EnhancedCity extends ICity {
+    /** First three characters of the city name (e.g. "Des" for "Des Moines"). */
+    cityCode: string;
+    /** Full name of the parent country (e.g. "United States"). */
+    countryName: string;
+    /** Full name of the parent state (e.g. "Iowa"). */
+    stateName: string;
+}
+/** Returns all countries (same data as the library, typed as EnhancedCountry). */
+declare function getAllCountries(): EnhancedCountry[];
+/** Returns a single country by its ISO 2-letter code, or undefined if not found. */
+declare function getCountryByCode(isoCode: string): EnhancedCountry | undefined;
+/**
+ * Returns all states for a country, each enriched with `countryName`.
+ * @param countryCode  ISO 2-letter country code, e.g. "US"
+ */
+declare function getStatesOfCountry(countryCode: string): EnhancedState[];
+/**
+ * Returns a single state by its code + parent country, enriched with `countryName`.
+ * @param stateCode    ISO state code, e.g. "IA"
+ * @param countryCode  ISO 2-letter country code, e.g. "US"
+ */
+declare function getStateByCode(stateCode: string, countryCode: string): EnhancedState | undefined;
+/**
+ * Returns all cities for a given state, each enriched with `cityCode`, `countryName`,
+ * and `stateName`.
+ * @param countryCode  ISO 2-letter country code, e.g. "US"
+ * @param stateCode    ISO state code, e.g. "IA"
+ */
+declare function getCitiesOfState(countryCode: string, stateCode: string): EnhancedCity[];
+/**
+ * Returns all cities for a given country, each enriched with `cityCode`, `countryName`,
+ * and `stateName`.
+ * @param countryCode  ISO 2-letter country code, e.g. "US"
+ */
+declare function getCitiesOfCountry(countryCode: string): EnhancedCity[];
+
+export { APP_THEMES, Accordion, AccordionDetails, type AccordionDetailsProps, type AccordionProps, AccordionSummary, type AccordionSummaryProps, type Action, ActivateUserIcon, AddButton, AddressLookup, ArchivedIcon, AssignGroupIcon, Autocomplete, type AutocompleteProps, Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, BaseDialog, Box, type BoxProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, CameraIcon, CancelButton, Card, CardActions, type CardActionsProps, CardContent, type CardContentProps, CardHeader, type CardHeaderProps, CardMedia, type CardMediaProps, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, CircularProgress, CircularProgressIcon, type CircularProgressIconProps, CloseIcon, Collapse, type CollapseProps, type Column, CopyIcon, DataGrid, type DataGridProps, DateField, type DateFieldProps, type DateFormatString, DateRangeField, type DateRangeFieldProps, type DateRangeValue, DifficultyAllIcon, DifficultyEasyIcon, DifficultyHardIcon, DifficultyMediumIcon, Divider, type DividerProps, DollarIcon, DownloadIcon, DownloadPdfIcon, Drawer, type DrawerProps, EditChatIcon, EditIcon, EngagementIcon, type EnhancedCity, type EnhancedCountry, type EnhancedState, Fade, type FadeProps, FunctionIcon, Grid, type GridProps, Grow, type GrowProps, HelpOutlinedIcon, HierarchyIcon, IconButton, type IconButtonProps, ImageField, type ImageFieldProps, InactiveGroupIcon, IndustryIcon, InvoiceIcon, Link, type LinkProps, List, ListItem, ListItemButton, type ListItemButtonProps, ListItemIcon, type ListItemIconProps, type ListItemProps, ListItemText, type ListItemTextProps, type ListProps, ListSubheader, type ListSubheaderProps, LocationPinIcon, LogsIcon, Menu, MenuDivider, MenuItem, type MenuItemProps, MenuList, type MenuListProps, type MenuProps, MinExperienceIcon, NineDotMenuIcon, NotificationIcon, type NumberVariant, Paper, type PaperProps, PhoneField, type PhoneFieldProps, Popover, type PopoverProps, Popper, type PopperProps, ProjectIcon, QualificationsIcon, QuestionStatusAllIcon, QuestionStatusPrivateIcon, QuestionStatusPublicIcon, QuestionTypeAllIcon, QuestionTypeCodingIcon, QuestionTypeDescriptiveIcon, QuestionTypeMultipleIcon, QuestionTypeSingleIcon, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Rating, type RatingProps, RefreshIcon, ResendInviteIcon, RolesIcon, RufousAiIcon, RufousBirdIcon, RufousLauncherIcon, RufousLogoLoader, type RufousLogoLoaderProps, RufousTextContent, type RufousTextContentProps, RufousTextEditor, type MentionItemData as RufousTextEditorMentionItem, type RufousTextEditorProps, RufousThemeProvider, Select, type SelectProps, SidebarIcon, Skeleton, type SkeletonProps, Slide, type SlideProps, Slider, type SliderProps, SmartSelect, type SmartSelectProps, Snackbar, type SnackbarProps, SoftSkillsIcon, type SortDirection, Stack, type StackProps, StandardButton, Step, StepButton, type StepButtonProps, StepContent, type StepContentProps, StepLabel, type StepLabelProps, type StepProps, Stepper, type StepperProps, SubmitButton, SubscribeIcon, SuspendUserIcon, Switch, type SwitchProps, type SxProp, Tab, TabPanel, type TabPanelProps, type TabProps, Tabs, type TabsProps, TechnicalSkillsIcon, TextField, type TextFieldProps, TickIcon, TimerIcon, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Tooltip, type TooltipProps, TrashIcon, type TreeNode, TreeSelect, type TreeSelectMultiValue, type TreeSelectProps, type TreeSelectValue, Typography, type TypographyProps, UnArchivedIcon, UnsubscribeIcon, UploadIcon, UserAssignIcon, type UserOption, UserSelectionField, type UserSelectionFieldProps, ViewIcon, WorkItemIcon, Zoom, type ZoomProps, getAllCountries, getCitiesOfCountry, getCitiesOfState, getCountryByCode, getStateByCode, getStatesOfCountry, transformLegacyTodos, useRufousTheme };

package/dist/main.js

@@ -4471,7 +4471,8 @@ import {
   ArrowUp,
   ArrowDown,
   Trash2,
-  Plus
+  Plus,
+  ChevronsUpDown
 } from "lucide-react";
 function FilterSelect({
   value,
@@ -4566,7 +4567,11 @@ function DataGrid({
   onRowDoubleClick,
   onCellDoubleClick,
   headerActions,
-  toolbarContent
+  toolbarContent,
+  searchableColumns,
+  onSearchChange,
+  onFiltersChange,
+  hideTopExport = false
 }) {
   const sxClass = useSx(sx);
   const [editingCell, setEditingCell] = useState9(null);
@@ -4671,6 +4676,9 @@ function DataGrid({
       return next;
     });
   }, [initialColumnsProp]);
+  useEffect9(() => {
+    onFiltersChange?.(advancedFilters);
+  }, [advancedFilters, onFiltersChange]);
   const handleSort = (fieldKey, dir) => {
     if (dir !== void 0) {
       setSortField(fieldKey);
@@ -4720,10 +4728,10 @@ function DataGrid({
   };
   const filteredData = useMemo2(() => {
     return data.filter((item) => {
-      const matchesGlobal = !filterText || resolvedColumns.some((col) => {
-        if (col.hidden) return false;
-        return getDisplayValue(item, col).toLowerCase().includes(filterText.toLowerCase());
-      });
+      const searchCols = searchableColumns ? resolvedColumns.filter((col) => searchableColumns.includes(String(col.field))) : resolvedColumns.filter((col) => !col.hidden);
+      const matchesGlobal = !filterText || searchCols.some(
+        (col) => getDisplayValue(item, col).toLowerCase().includes(filterText.toLowerCase())
+      );
       const evalFilter = (f) => {
         if (!f.value && f.operator !== "is empty" && f.operator !== "is not empty") return true;
         const col = resolvedColumns.find((c) => String(c.field) === f.column || String(c.key) === f.column);
@@ -4831,7 +4839,11 @@ function DataGrid({
       }
       return matchesGlobal && matchesAdvanced;
     });
-  }, [data, filterText, advancedFilters, resolvedColumns]);
+  }, [data, filterText, advancedFilters, resolvedColumns, searchableColumns]);
+  useEffect9(() => {
+    if (!onSearchChange || !filterText) return;
+    if (filteredData.length === 0) onSearchChange(filterText);
+  }, [filteredData, filterText, onSearchChange]);
   const sortedData = useMemo2(() => {
     if (!sortField || !sortDirection) return filteredData;
     const col = resolvedColumns.find((c) => c.field === sortField);
@@ -4862,11 +4874,16 @@ function DataGrid({
       (item) => exportableCols.map((c) => {
         const field = String(c.field);
         const raw = item[field];
-        let val = c.valueGetter ? c.valueGetter({ value: raw, row: item, field }) : raw;
-        if (c.valueFormatter) {
-          val = c.valueFormatter({ value: val, row: item, field });
+        let str;
+        if (c.exportValue) {
+          str = c.exportValue(raw, item).replace(/"/g, '""');
+        } else {
+          let val = c.valueGetter ? c.valueGetter({ value: raw, row: item, field }) : raw;
+          if (c.valueFormatter) {
+            val = c.valueFormatter({ value: val, row: item, field });
+          }
+          str = val === null || val === void 0 ? "" : String(val).replace(/"/g, '""');
         }
-        const str = val === null || val === void 0 ? "" : String(val).replace(/"/g, '""');
         return `"${str}"`;
       }).join(",")
     );
@@ -4959,7 +4976,7 @@ function DataGrid({
       onClick: () => setShowManageColumns(true)
     },
     /* @__PURE__ */ React75.createElement(Columns, { size: 16 })
-  )), /* @__PURE__ */ React75.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ React75.createElement(Download, { size: 14 }), " Export CSV"), headerActions && /* @__PURE__ */ React75.createElement("div", { className: `dg-header-slot ${alignClass(headerActions.align)}` }, headerActions.content))), /* @__PURE__ */ React75.createElement("div", { className: `dg-toolbar ${alignClass(toolbarContent?.align)}` }, toolbarContent?.content || ""), /* @__PURE__ */ React75.createElement("div", { className: `dg-table-wrap${paginatedData.length === 0 && !loading ? " dg-table-wrap--empty" : ""}` }, loading && /* @__PURE__ */ React75.createElement("div", { className: "dg-loading-overlay" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-loading-spinner" })), /* @__PURE__ */ React75.createElement("table", { className: "dg-table" }, /* @__PURE__ */ React75.createElement("thead", null, /* @__PURE__ */ React75.createElement("tr", null, visibleColumns.map((col, idx) => {
+  )), !hideTopExport && /* @__PURE__ */ React75.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ React75.createElement(Download, { size: 14 }), " Export CSV"), headerActions && /* @__PURE__ */ React75.createElement("div", { className: `dg-header-slot ${alignClass(headerActions.align)}` }, headerActions.content))), /* @__PURE__ */ React75.createElement("div", { className: `dg-toolbar ${alignClass(toolbarContent?.align)}` }, toolbarContent?.content || ""), /* @__PURE__ */ React75.createElement("div", { className: `dg-table-wrap${paginatedData.length === 0 && !loading ? " dg-table-wrap--empty" : ""}` }, loading && /* @__PURE__ */ React75.createElement("div", { className: "dg-loading-overlay" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-loading-spinner" })), /* @__PURE__ */ React75.createElement("table", { className: "dg-table" }, /* @__PURE__ */ React75.createElement("thead", null, /* @__PURE__ */ React75.createElement("tr", null, visibleColumns.map((col, idx) => {
     const colField = String(col.field);
     const width = columnWidths[colField] || 200;
     const leftOffset = getLeftOffset(col, idx);
@@ -4980,9 +4997,8 @@ function DataGrid({
           onClick: () => col.sortable !== false && handleSort(col.field || "")
         },
         col.headerName,
-        isSorted && sortDirection === "asc" && /* @__PURE__ */ React75.createElement(ChevronUp, { size: 12 }),
-        isSorted && sortDirection === "desc" && /* @__PURE__ */ React75.createElement(ChevronDown, { size: 12 })
-      ), /* @__PURE__ */ React75.createElement("div", { className: `dg-th-actions${isFiltered ? " dg-th-actions--filtered" : ""}` }, isFiltered && /* @__PURE__ */ React75.createElement(Filter, { size: 11, style: { color: "var(--primary-color)" } }), !col.disableColumnMenu && /* @__PURE__ */ React75.createElement(
+        col.sortable !== false && /* @__PURE__ */ React75.createElement("span", { className: `dg-sort-icon${isSorted ? " dg-sort-icon--active" : ""}` }, isSorted && sortDirection === "asc" && /* @__PURE__ */ React75.createElement(ChevronUp, { size: 14 }), isSorted && sortDirection === "desc" && /* @__PURE__ */ React75.createElement(ChevronDown, { size: 14 }), !isSorted && /* @__PURE__ */ React75.createElement(ChevronsUpDown, { size: 14 }))
+      ), /* @__PURE__ */ React75.createElement("div", { className: `dg-th-actions${isFiltered ? " dg-th-actions--filtered" : ""}` }, isFiltered && /* @__PURE__ */ React75.createElement("button", { className: "dg-th-filter-btn", onClick: () => setShowAdvancedFilter(true) }, /* @__PURE__ */ React75.createElement(Filter, { size: 11 })), !col.disableColumnMenu && /* @__PURE__ */ React75.createElement(
         "button",
         {
           className: "dg-th-menu-btn",
@@ -5074,7 +5090,7 @@ function DataGrid({
       },
       action.icon
     )))));
-  })()))))), paginatedData.length === 0 && /* @__PURE__ */ React75.createElement("div", { className: "dg-empty-state" }, /* @__PURE__ */ React75.createElement("svg", { className: "dg-empty-icon", viewBox: "0 0 200 160", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "30", width: "160", height: "100", rx: "8", fill: "var(--hover-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "30", width: "160", height: "28", rx: "8", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "50", width: "160", height: "8", rx: "0", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "72", y1: "30", x2: "72", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "128", y1: "30", x2: "128", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "20", y1: "78", x2: "180", y2: "78", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "20", y1: "104", x2: "180", y2: "104", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("rect", { x: "32", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "84", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "140", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "32", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("rect", { x: "84", y: "113", width: "32", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("rect", { x: "140", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("circle", { cx: "148", cy: "108", r: "26", fill: "var(--surface-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ React75.createElement("circle", { cx: "145", cy: "105", r: "10", stroke: "var(--text-secondary)", strokeWidth: "2.5", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "152", y1: "113", x2: "161", y2: "122", stroke: "var(--text-secondary)", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "141", y1: "101", x2: "149", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "149", y1: "101", x2: "141", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" })), /* @__PURE__ */ React75.createElement("p", { className: "dg-empty-title" }, "No data found"), /* @__PURE__ */ React75.createElement("p", { className: "dg-empty-subtitle" }, filterText || hasActiveFilters ? "Try adjusting your search or filters" : "No records to display"))), pagination && /* @__PURE__ */ React75.createElement("div", { className: "dg-pagination" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-page-info" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-per-page" }, /* @__PURE__ */ React75.createElement("span", null, "Rows per page:"), /* @__PURE__ */ React75.createElement(
+  })()))))), paginatedData.length === 0 && /* @__PURE__ */ React75.createElement("div", { className: "dg-empty-state" }, /* @__PURE__ */ React75.createElement("svg", { className: "dg-empty-icon", viewBox: "0 0 200 160", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "30", width: "160", height: "100", rx: "8", fill: "var(--hover-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "30", width: "160", height: "28", rx: "8", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "50", width: "160", height: "8", rx: "0", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "72", y1: "30", x2: "72", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "128", y1: "30", x2: "128", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "20", y1: "78", x2: "180", y2: "78", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "20", y1: "104", x2: "180", y2: "104", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("rect", { x: "32", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "84", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "140", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "32", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("rect", { x: "84", y: "113", width: "32", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("rect", { x: "140", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("circle", { cx: "148", cy: "108", r: "26", fill: "var(--surface-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ React75.createElement("circle", { cx: "145", cy: "105", r: "10", stroke: "var(--text-secondary)", strokeWidth: "2.5", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "152", y1: "113", x2: "161", y2: "122", stroke: "var(--text-secondary)", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "141", y1: "101", x2: "149", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "149", y1: "101", x2: "141", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" })), /* @__PURE__ */ React75.createElement("p", { className: "dg-empty-title" }, "No data found"), /* @__PURE__ */ React75.createElement("p", { className: "dg-empty-subtitle" }, filterText || hasActiveFilters ? "Try adjusting your search or filters" : "No records to display"))), pagination && /* @__PURE__ */ React75.createElement("div", { className: "dg-pagination" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-page-info" }, /* @__PURE__ */ React75.createElement(Tooltip, { title: "Export CSV", placement: "top" }, /* @__PURE__ */ React75.createElement("button", { className: "dg-icon-btn", onClick: handleExport }, /* @__PURE__ */ React75.createElement(Download, { size: 14 }))), /* @__PURE__ */ React75.createElement("div", { className: "dg-per-page" }, /* @__PURE__ */ React75.createElement("span", null, "Rows per page:"), /* @__PURE__ */ React75.createElement(
     FilterSelect,
     {
       placement: "top",
@@ -9433,7 +9449,7 @@ function UserSelectionField({
 }
 
 // lib/SmartSelect/SmartSelect.tsx
-import React108, { useCallback as useCallback11, useMemo as useMemo3 } from "react";
+import React108, { useCallback as useCallback11, useEffect as useEffect21, useMemo as useMemo3, useRef as useRef25 } from "react";
 var CheckIcon3 = () => /* @__PURE__ */ React108.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React108.createElement("polyline", { points: "20 6 9 17 4 12" }));
 function flattenTree(options, getChildren, depth = 0) {
   return options.flatMap((opt) => [
@@ -9458,6 +9474,7 @@ function SmartSelect({
   value,
   onChange,
   onSearchChange,
+  debounceMs = 300,
   getOptionLabel,
   getOptionValue,
   getOptionSubLabel,
@@ -9482,6 +9499,10 @@ function SmartSelect({
   style,
   sx
 }) {
+  const debounceTimer = useRef25(null);
+  useEffect21(() => () => {
+    if (debounceTimer.current) clearTimeout(debounceTimer.current);
+  }, []);
   const getValue = useCallback11(
     (o) => getOptionValue ? getOptionValue(o) : String(getOptionLabel(o)),
     [getOptionValue, getOptionLabel]
@@ -9508,6 +9529,7 @@ function SmartSelect({
   }, [multiple, value, getValue]);
   const handleInputChange = useCallback11((_, inputValue) => {
     if (!onSearchChange) return;
+    if (debounceTimer.current) clearTimeout(debounceTimer.current);
     if (!inputValue) {
       onSearchChange("");
       return;
@@ -9515,10 +9537,15 @@ function SmartSelect({
     const hasLocalMatch = flatOptionsList.some(
       (opt) => getOptionLabel(opt).toLowerCase().includes(inputValue.toLowerCase()) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(inputValue.toLowerCase())
     );
-    if (!hasLocalMatch) {
+    if (hasLocalMatch) return;
+    if (debounceMs <= 0) {
       onSearchChange(inputValue);
+    } else {
+      debounceTimer.current = setTimeout(() => {
+        onSearchChange(inputValue);
+      }, debounceMs);
     }
-  }, [onSearchChange, flatOptionsList, getOptionLabel, getOptionSubLabel]);
+  }, [onSearchChange, debounceMs, flatOptionsList, getOptionLabel, getOptionSubLabel]);
   const handleChange = useCallback11((_, newValue) => {
     if (!multiple || !allowChildNodesSelection || !getOptionChildren) {
       onChange?.(newValue);
@@ -9658,7 +9685,7 @@ function SmartSelect({
 }
 
 // lib/RufousTextEditor/RufousTextEditor.tsx
-import React119, { useMemo as useMemo5, useCallback as useCallback16, useState as useState35, useRef as useRef32, useEffect as useEffect29 } from "react";
+import React119, { useMemo as useMemo5, useCallback as useCallback16, useState as useState35, useRef as useRef33, useEffect as useEffect30 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 import { useEditor, EditorContent, EditorContext, FloatingMenu, BubbleMenu } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
@@ -9684,7 +9711,7 @@ import { ReactRenderer } from "@tiptap/react";
 import tippy from "tippy.js";
 
 // lib/RufousTextEditor/MentionList.tsx
-import React109, { forwardRef as forwardRef11, useEffect as useEffect21, useImperativeHandle, useState as useState26 } from "react";
+import React109, { forwardRef as forwardRef11, useEffect as useEffect22, useImperativeHandle, useState as useState26 } from "react";
 var MentionList = forwardRef11((props, ref) => {
   const [selectedIndex, setSelectedIndex] = useState26(0);
   const selectItem = (index) => {
@@ -9693,7 +9720,7 @@ var MentionList = forwardRef11((props, ref) => {
       props.command({ id: item.id, label: item.shortName || item.name });
     }
   };
-  useEffect21(() => setSelectedIndex(0), [props.items]);
+  useEffect22(() => setSelectedIndex(0), [props.items]);
   useImperativeHandle(ref, () => ({
     onKeyDown: ({ event }) => {
       if (event.key === "ArrowUp") {
@@ -9780,11 +9807,11 @@ function createMentionSuggestion(users) {
 }
 
 // lib/RufousTextEditor/Toolbar.tsx
-import React115, { useState as useState31, useRef as useRef28, useEffect as useEffect25, useCallback as useCallback15 } from "react";
+import React115, { useState as useState31, useRef as useRef29, useEffect as useEffect26, useCallback as useCallback15 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
 // lib/RufousTextEditor/TextToSpeech.tsx
-import React110, { useState as useState27, useEffect as useEffect22, useRef as useRef25, useCallback as useCallback12, forwardRef as forwardRef12, useImperativeHandle as useImperativeHandle2 } from "react";
+import React110, { useState as useState27, useEffect as useEffect23, useRef as useRef26, useCallback as useCallback12, forwardRef as forwardRef12, useImperativeHandle as useImperativeHandle2 } from "react";
 var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
   const [speaking, setSpeaking] = useState27(false);
   const [paused, setPaused] = useState27(false);
@@ -9792,9 +9819,9 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
   const [selectedVoice, setSelectedVoice] = useState27("");
   const [rate, setRate] = useState27(1);
   const [showPanel, setShowPanel] = useState27(false);
-  const utteranceRef = useRef25(null);
-  const panelRef = useRef25(null);
-  useEffect22(() => {
+  const utteranceRef = useRef26(null);
+  const panelRef = useRef26(null);
+  useEffect23(() => {
     const synth = window.speechSynthesis;
     const loadVoices = () => {
       const available = synth.getVoices();
@@ -9812,7 +9839,7 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
       synth.removeEventListener("voiceschanged", loadVoices);
     };
   }, [selectedVoice]);
-  useEffect22(() => {
+  useEffect23(() => {
     const handleClick = (e) => {
       if (panelRef.current && !panelRef.current.contains(e.target)) {
         setShowPanel(false);
@@ -9929,18 +9956,18 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
 var TextToSpeech_default = TextToSpeech;
 
 // lib/RufousTextEditor/SpeechToText.tsx
-import React111, { useState as useState28, useRef as useRef26, useCallback as useCallback13, useEffect as useEffect23, forwardRef as forwardRef13, useImperativeHandle as useImperativeHandle3 } from "react";
+import React111, { useState as useState28, useRef as useRef27, useCallback as useCallback13, useEffect as useEffect24, forwardRef as forwardRef13, useImperativeHandle as useImperativeHandle3 } from "react";
 var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
   const [listening, setListening] = useState28(false);
   const [showPanel, setShowPanel] = useState28(false);
   const [language, setLanguage] = useState28("en-US");
   const [interim, setInterim] = useState28("");
-  const recognitionRef = useRef26(null);
-  const panelRef = useRef26(null);
-  const isListeningRef = useRef26(false);
+  const recognitionRef = useRef27(null);
+  const panelRef = useRef27(null);
+  const isListeningRef = useRef27(false);
   const SpeechRecognitionAPI = typeof window !== "undefined" ? window.SpeechRecognition || window.webkitSpeechRecognition : null;
   const supported = !!SpeechRecognitionAPI;
-  useEffect23(() => {
+  useEffect24(() => {
     const handleClick = (e) => {
       if (panelRef.current && !panelRef.current.contains(e.target)) {
         setShowPanel(false);
@@ -10091,7 +10118,7 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
 var SpeechToText_default = SpeechToText;
 
 // lib/RufousTextEditor/AICommands.tsx
-import React112, { useState as useState29, useRef as useRef27, useEffect as useEffect24, useCallback as useCallback14 } from "react";
+import React112, { useState as useState29, useRef as useRef28, useEffect as useEffect25, useCallback as useCallback14 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 var AI_COMMANDS = [
   { id: "improve", label: "Improve writing", prompt: "Improve the following text to make it clearer, more engaging, and well-structured. Return only the improved text, no explanations." },
@@ -10147,8 +10174,8 @@ var AICommands = ({ editor, onAICommand }) => {
   const [originalText, setOriginalText] = useState29("");
   const [selectionRange, setSelectionRange] = useState29(null);
   const [previousResults, setPreviousResults] = useState29([]);
-  const panelRef = useRef27(null);
-  useEffect24(() => {
+  const panelRef = useRef28(null);
+  useEffect25(() => {
     const handleClick = (e) => {
       if (panelRef.current && !panelRef.current.contains(e.target)) {
         setOpen(false);
@@ -11346,9 +11373,9 @@ var SPECIAL_CHARS = [
 ];
 var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
   const [open, setOpen] = useState31(false);
-  const ref = useRef28(null);
-  const menuRef = useRef28(null);
-  useEffect25(() => {
+  const ref = useRef29(null);
+  const menuRef = useRef29(null);
+  useEffect26(() => {
     const handleClick = (e) => {
       const target = e.target;
       const inTrigger = ref.current?.contains(target);
@@ -11360,7 +11387,7 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, []);
-  useEffect25(() => {
+  useEffect26(() => {
     if (!open || !menuRef.current || !ref.current) return;
     const menu = menuRef.current;
     const trigger2 = ref.current;
@@ -11477,7 +11504,7 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
   const [activeTab, setActiveTab] = useState31("upload");
   const [url, setUrl] = useState31("");
   const [isDragging, setIsDragging] = useState31(false);
-  const fileInputRef = useRef28(null);
+  const fileInputRef = useRef29(null);
   const getBase64 = (file) => {
     return new Promise((resolve, reject) => {
       const reader = new FileReader();
@@ -11655,10 +11682,10 @@ var ColorPickerPanel = ({ editor, onClose }) => {
 var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTextToSpeech, onClose, onImageUpload, visibleButtons, isFullscreen, onToggleFullscreen }) => {
   const [, setEditorState] = useState31(0);
   const [todoEnabled, setTodoEnabled] = useState31(false);
-  const ttsRef = useRef28(null);
-  const sttRef = useRef28(null);
+  const ttsRef = useRef29(null);
+  const sttRef = useRef29(null);
   const show = (id) => !visibleButtons || visibleButtons.has(id);
-  useEffect25(() => {
+  useEffect26(() => {
     if (!editor) return;
     const onTransaction = () => setEditorState((n) => n + 1);
     editor.on("transaction", onTransaction);
@@ -12281,7 +12308,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
 var Toolbar_default = Toolbar;
 
 // lib/RufousTextEditor/ImageToolbar.tsx
-import React116, { useState as useState32, useEffect as useEffect26, useRef as useRef29 } from "react";
+import React116, { useState as useState32, useEffect as useEffect27, useRef as useRef30 } from "react";
 import { createPortal as createPortal5 } from "react-dom";
 var ALIGNMENTS = [
   { value: "left", label: "Left", icon: "\u2630" },
@@ -12300,7 +12327,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
   const [lockRatio, setLockRatio] = useState32(true);
   const [naturalWidth, setNaturalWidth] = useState32(0);
   const [naturalHeight, setNaturalHeight] = useState32(0);
-  useEffect26(() => {
+  useEffect27(() => {
     if (src) {
       const img = new window.Image();
       img.onload = () => {
@@ -12423,8 +12450,8 @@ var ImageToolbar = ({ editor }) => {
   const [showVAlign, setShowVAlign] = useState32(false);
   const [copyStatus, setCopyStatus] = useState32("");
   const [pos, setPos] = useState32(null);
-  const toolbarRef = useRef29(null);
-  useEffect26(() => {
+  const toolbarRef = useRef30(null);
+  useEffect27(() => {
     if (!editor) return;
     const update = () => {
       const { selection } = editor.state;
@@ -12560,7 +12587,7 @@ var ImageToolbar = ({ editor }) => {
 var ImageToolbar_default = ImageToolbar;
 
 // lib/RufousTextEditor/VideoToolbar.tsx
-import React117, { useState as useState33, useEffect as useEffect27, useRef as useRef30 } from "react";
+import React117, { useState as useState33, useEffect as useEffect28, useRef as useRef31 } from "react";
 import { createPortal as createPortal6 } from "react-dom";
 var ALIGNMENTS2 = [
   { value: "left", label: "Left", icon: "\u2630" },
@@ -12675,8 +12702,8 @@ var VideoToolbar = ({ editor }) => {
   const [showAlign, setShowAlign] = useState33(false);
   const [copyStatus, setCopyStatus] = useState33("");
   const [pos, setPos] = useState33(null);
-  const toolbarRef = useRef30(null);
-  useEffect27(() => {
+  const toolbarRef = useRef31(null);
+  useEffect28(() => {
     if (!editor) return;
     const update = () => {
       const { selection } = editor.state;
@@ -12800,7 +12827,7 @@ var VideoToolbar = ({ editor }) => {
 var VideoToolbar_default = VideoToolbar;
 
 // lib/RufousTextEditor/TableToolbar.tsx
-import React118, { useState as useState34, useEffect as useEffect28, useRef as useRef31 } from "react";
+import React118, { useState as useState34, useEffect as useEffect29, useRef as useRef32 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
 var IconAddRowBefore = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ React118.createElement("path", { d: "M9 6h2v1.5h1.5v2H11V11H9V9.5H7.5v-2H9z" }));
 var IconAddRowAfter = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ React118.createElement("path", { d: "M9 14h2v1.5h1.5v2H11V19H9v-1.5H7.5v-2H9z" }));
@@ -12814,8 +12841,8 @@ var IconSplitCell = () => /* @__PURE__ */ React118.createElement("svg", { width:
 var IconToggleHeader = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M3 3h18v18H3V3zm2 2v4h14V5H5zm0 6v8h14v-8H5z" }), /* @__PURE__ */ React118.createElement("rect", { x: "5", y: "5", width: "14", height: "4", opacity: "0.4" }));
 var TableToolbar = ({ editor }) => {
   const [pos, setPos] = useState34(null);
-  const toolbarRef = useRef31(null);
-  useEffect28(() => {
+  const toolbarRef = useRef32(null);
+  useEffect29(() => {
     if (!editor) return;
     const update = () => {
       if (!editor.isActive("table")) {
@@ -13054,12 +13081,12 @@ var RufousTextEditor = ({
     return visible;
   }, [buttons, variant, hideButtons]);
   const mentionSuggestion = useMemo5(() => createMentionSuggestion(mentions), [mentions]);
-  const onChangeRef = useRef32(onChange);
-  const onBlurRef = useRef32(onBlur);
-  useEffect29(() => {
+  const onChangeRef = useRef33(onChange);
+  const onBlurRef = useRef33(onBlur);
+  useEffect30(() => {
     onChangeRef.current = onChange;
   }, [onChange]);
-  useEffect29(() => {
+  useEffect30(() => {
     onBlurRef.current = onBlur;
   }, [onBlur]);
   const isEditable = editable && !disabled;
@@ -13160,8 +13187,8 @@ var RufousTextEditor = ({
       onChangeRef.current?.(e.getHTML(), e.getJSON());
     }
   });
-  const wrapperRef = useRef32(null);
-  useEffect29(() => {
+  const wrapperRef = useRef33(null);
+  useEffect30(() => {
     if (!editor) return;
     let blurTimer = null;
     const handler = ({ event }) => {
@@ -13179,7 +13206,7 @@ var RufousTextEditor = ({
       if (blurTimer) clearTimeout(blurTimer);
     };
   }, [editor]);
-  const setLinkRef = useRef32(null);
+  const setLinkRef = useRef33(null);
   const [linkModalOpen, setLinkModalOpen] = useState35(false);
   const [linkUrl, setLinkUrl] = useState35("");
   const [linkText, setLinkText] = useState35("");
@@ -13224,10 +13251,10 @@ var RufousTextEditor = ({
     setLinkSelection({ from, to });
     setLinkModalOpen(true);
   }, [editor]);
-  useEffect29(() => {
+  useEffect30(() => {
     setLinkRef.current = setLink;
   }, [setLink]);
-  useEffect29(() => {
+  useEffect30(() => {
     if (!editor?.view) return;
     const handleKeyDown = (event) => {
       if ((event.ctrlKey || event.metaKey) && event.key === "k") {
@@ -13528,6 +13555,57 @@ var RufousTextContent = ({ content, className, style, sx }) => {
     }
   );
 };
+
+// lib/utils/locationData.ts
+import { Country as Country3, State as State2, City as City2 } from "country-state-city";
+var _stateNameCache = /* @__PURE__ */ new Map();
+function getStateNameMap(countryCode) {
+  if (!_stateNameCache.has(countryCode)) {
+    const map = /* @__PURE__ */ new Map();
+    State2.getStatesOfCountry(countryCode).forEach((s2) => map.set(s2.isoCode, s2.name));
+    _stateNameCache.set(countryCode, map);
+  }
+  return _stateNameCache.get(countryCode);
+}
+function getAllCountries2() {
+  return Country3.getAllCountries();
+}
+function getCountryByCode(isoCode) {
+  return Country3.getCountryByCode(isoCode) ?? void 0;
+}
+function getStatesOfCountry(countryCode) {
+  const countryName = Country3.getCountryByCode(countryCode)?.name ?? "";
+  return State2.getStatesOfCountry(countryCode).map((state) => ({
+    ...state,
+    countryName
+  }));
+}
+function getStateByCode(stateCode, countryCode) {
+  const state = State2.getStateByCodeAndCountry(stateCode, countryCode);
+  if (!state) return void 0;
+  const countryName = Country3.getCountryByCode(countryCode)?.name ?? "";
+  return { ...state, countryName };
+}
+function getCitiesOfState(countryCode, stateCode) {
+  const countryName = Country3.getCountryByCode(countryCode)?.name ?? "";
+  const stateName = State2.getStateByCodeAndCountry(stateCode, countryCode)?.name ?? "";
+  return City2.getCitiesOfState(countryCode, stateCode).map((city) => ({
+    ...city,
+    cityCode: city.name.slice(0, 3),
+    countryName,
+    stateName
+  }));
+}
+function getCitiesOfCountry(countryCode) {
+  const countryName = Country3.getCountryByCode(countryCode)?.name ?? "";
+  const stateNameMap = getStateNameMap(countryCode);
+  return (City2.getCitiesOfCountry(countryCode) ?? []).map((city) => ({
+    ...city,
+    cityCode: city.name.slice(0, 3),
+    countryName,
+    stateName: stateNameMap.get(city.stateCode) ?? ""
+  }));
+}
 export {
   APP_THEMES,
   Accordion,
@@ -13668,6 +13746,12 @@ export {
   viewIcon_default as ViewIcon,
   workItemIcon_default as WorkItemIcon,
   Zoom,
+  getAllCountries2 as getAllCountries,
+  getCitiesOfCountry,
+  getCitiesOfState,
+  getCountryByCode,
+  getStateByCode,
+  getStatesOfCountry,
   transformLegacyTodos,
   useRufousTheme
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rufous/ui",
   "private": false,
-  "version": "0.3.17",
+  "version": "0.3.19",
   "type": "module",
   "description": "Experimental: A lightweight React UI component library (Beta)",
   "style": "./dist/main.css",