@k3-tech/react-kit 0.0.60 → 0.0.62

package/dist/index.d.ts

@@ -16,6 +16,7 @@ export * from './kit/components/fileuploader';
 export * from './kit/components/numpad';
 export * from './kit/components/keyboard';
 export * from './kit/components/timepicker';
+export * from './kit/components/data-table-headers';
 export { default as AdminLayout } from './kit/layouts/admin/components/AdminLayout';
 export { default as ThemeToggle } from './kit/layouts/admin/components/ThemeToggle';
 export * from './kit/layouts/admin/hooks/menu';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAE3C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAK1D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAE1C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,8BAA8B,CAAC;AAChE,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAK5C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4CAA4C,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4CAA4C,CAAC;AACpF,cAAc,gCAAgC,CAAC;AAC/C,cAAc,iDAAiD,CAAC;AAChE,cAAc,2BAA2B,CAAC;AAK1C,cAAc,+BAA+B,CAAC;AAK9C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AAEnC,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAK/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAE3C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAK1D,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAE1C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,8BAA8B,CAAC;AAChE,cAAc,+BAA+B,CAAC;AAC9C,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qCAAqC,CAAC;AAKpD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4CAA4C,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4CAA4C,CAAC;AACpF,cAAc,gCAAgC,CAAC;AAC/C,cAAc,iDAAiD,CAAC;AAChE,cAAc,2BAA2B,CAAC;AAK1C,cAAc,+BAA+B,CAAC;AAK9C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AAEnC,OAAO,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAK/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC"}

package/dist/index.js

@@ -9927,7 +9927,7 @@ var validateField = async (field, disabledFieldNames, formValues, validateAllFie
   const isRadio = isRadioInput(ref);
   const isCheckBox = isCheckBoxInput(ref);
   const isRadioOrCheckbox2 = isRadio || isCheckBox;
-  const isEmpty = (valueAsNumber || isFileInput(ref)) && isUndefined(ref.value) && isUndefined(inputValue) || isHTMLElement$2(ref) && ref.value === "" || inputValue === "" || Array.isArray(inputValue) && !inputValue.length;
+  const isEmpty2 = (valueAsNumber || isFileInput(ref)) && isUndefined(ref.value) && isUndefined(inputValue) || isHTMLElement$2(ref) && ref.value === "" || inputValue === "" || Array.isArray(inputValue) && !inputValue.length;
   const appendErrorsCurry = appendErrors.bind(null, name, validateAllFieldCriteria, error);
   const getMinMaxMessage = (exceedMax, maxLengthMessage, minLengthMessage, maxType = INPUT_VALIDATION_RULES.maxLength, minType = INPUT_VALIDATION_RULES.minLength) => {
     const message2 = exceedMax ? maxLengthMessage : minLengthMessage;
@@ -9938,7 +9938,7 @@ var validateField = async (field, disabledFieldNames, formValues, validateAllFie
       ...appendErrorsCurry(exceedMax ? maxType : minType, message2)
     };
   };
-  if (isFieldArray ? !Array.isArray(inputValue) || !inputValue.length : required2 && (!isRadioOrCheckbox2 && (isEmpty || isNullOrUndefined(inputValue)) || isBoolean$1(inputValue) && !inputValue || isCheckBox && !getCheckboxValue(refs).isValid || isRadio && !getRadioValue(refs).isValid)) {
+  if (isFieldArray ? !Array.isArray(inputValue) || !inputValue.length : required2 && (!isRadioOrCheckbox2 && (isEmpty2 || isNullOrUndefined(inputValue)) || isBoolean$1(inputValue) && !inputValue || isCheckBox && !getCheckboxValue(refs).isValid || isRadio && !getRadioValue(refs).isValid)) {
     const { value, message: message2 } = isString$2(required2) ? { value: !!required2, message: required2 } : getValueAndMessage(required2);
     if (value) {
       error[name] = {
@@ -9953,7 +9953,7 @@ var validateField = async (field, disabledFieldNames, formValues, validateAllFie
       }
     }
   }
-  if (!isEmpty && (!isNullOrUndefined(min2) || !isNullOrUndefined(max2))) {
+  if (!isEmpty2 && (!isNullOrUndefined(min2) || !isNullOrUndefined(max2))) {
     let exceedMax;
     let exceedMin;
     const maxOutput = getValueAndMessage(max2);
@@ -9986,7 +9986,7 @@ var validateField = async (field, disabledFieldNames, formValues, validateAllFie
       }
     }
   }
-  if ((maxLength || minLength) && !isEmpty && (isString$2(inputValue) || isFieldArray && Array.isArray(inputValue))) {
+  if ((maxLength || minLength) && !isEmpty2 && (isString$2(inputValue) || isFieldArray && Array.isArray(inputValue))) {
     const maxLengthOutput = getValueAndMessage(maxLength);
     const minLengthOutput = getValueAndMessage(minLength);
     const exceedMax = !isNullOrUndefined(maxLengthOutput.value) && inputValue.length > +maxLengthOutput.value;
@@ -9999,7 +9999,7 @@ var validateField = async (field, disabledFieldNames, formValues, validateAllFie
       }
     }
   }
-  if (pattern && !isEmpty && isString$2(inputValue)) {
+  if (pattern && !isEmpty2 && isString$2(inputValue)) {
     const { value: patternValue, message: message2 } = getValueAndMessage(pattern);
     if (isRegex(patternValue) && !inputValue.match(patternValue)) {
       error[name] = {
@@ -24143,7 +24143,7 @@ function NumberField({
 }) {
   const innerValue = value;
   const [displayValue, setDisplayValue] = useState(
-    innerValue.toLocaleString("id-ID")
+    (Number(innerValue) || "").toLocaleString("id-ID")
   );
   if (field.numberMode === "currency") {
     const parseAndFormatIDRInput = (input) => {
@@ -40233,6 +40233,7 @@ function DataTable({
   onTable,
   className,
   emptyText = "No results.",
+  formFilterForm,
   formFilters,
   formFilterValues,
   onFormFilterChange,
@@ -40441,6 +40442,7 @@ function DataTable({
             /* @__PURE__ */ jsx(AccordionContent, { className: "px-4 pb-4 pt-5", children: /* @__PURE__ */ jsx(
               FormBuilder,
               {
+                form: formFilterForm,
                 sections: formFilters,
                 defaultValues: formFilterValues,
                 onSubmit: (data2) => onFormFilterChange == null ? void 0 : onFormFilterChange(data2),
@@ -40449,8 +40451,7 @@ function DataTable({
                 submitLabel: "Apply",
                 resetLabel: "Clear",
                 showActionsSeparator: filterShowActionsSeparator
-              },
-              JSON.stringify(formFilterValues ?? {})
+              }
             ) })
           ] })
         }
@@ -44674,7 +44675,7 @@ function requireLodash() {
         function isElement2(value) {
           return isObjectLike(value) && value.nodeType === 1 && !isPlainObject2(value);
         }
-        function isEmpty(value) {
+        function isEmpty2(value) {
           if (value == null) {
             return true;
           }
@@ -45807,7 +45808,7 @@ function requireLodash() {
         lodash2.isBuffer = isBuffer2;
         lodash2.isDate = isDate2;
         lodash2.isElement = isElement2;
-        lodash2.isEmpty = isEmpty;
+        lodash2.isEmpty = isEmpty2;
         lodash2.isEqual = isEqual;
         lodash2.isEqualWith = isEqualWith;
         lodash2.isError = isError;
@@ -47847,6 +47848,470 @@ function Keyboard({
   );
 }
 Keyboard.displayName = "Keyboard";
+function DebouncedFilterField({
+  field,
+  value,
+  onChange,
+  debounceMs,
+  control,
+  className
+}) {
+  const [draft, setDraft] = useState(value);
+  const lastPushedRef = useRef(value);
+  const debounced = c$1((v) => {
+    lastPushedRef.current = v;
+    onChange(v);
+  }, debounceMs);
+  const handleChange = (v) => {
+    setDraft(v);
+    debounced(v);
+  };
+  useEffect(() => {
+    if (!Object.is(value, lastPushedRef.current)) {
+      debounced.cancel();
+      lastPushedRef.current = value;
+      setDraft(value);
+    }
+  }, [value]);
+  useEffect(
+    () => () => {
+      debounced.flush();
+    },
+    [debounced]
+  );
+  const common = {
+    field,
+    control,
+    fieldPath: field.name,
+    value: draft,
+    onChange: handleChange,
+    className
+  };
+  if (field.type === "textarea") return /* @__PURE__ */ jsx(TextareaField, { ...common });
+  if (field.type === "number") return /* @__PURE__ */ jsx(NumberField, { ...common });
+  return /* @__PURE__ */ jsx(TextField, { ...common });
+}
+const DEBOUNCED_TYPES = /* @__PURE__ */ new Set([
+  "text",
+  "email",
+  "password",
+  "number",
+  "textarea"
+]);
+const UNSUPPORTED_TYPES = /* @__PURE__ */ new Set([
+  "object",
+  "array",
+  "custom_field",
+  "hidden"
+]);
+const warned = /* @__PURE__ */ new Set();
+const warnUnsupported = (type) => {
+  if (process.env.NODE_ENV !== "production" && !warned.has(type)) {
+    warned.add(type);
+    console.warn(
+      `[DataTableHeader] field type '${type}' is not supported in filter headers and was skipped.`
+    );
+  }
+};
+function FilterFieldRenderer({
+  field,
+  value,
+  onChange,
+  debounceMs,
+  control
+}) {
+  if (UNSUPPORTED_TYPES.has(field.type)) {
+    warnUnsupported(field.type);
+    return null;
+  }
+  const inputClassName = cn$1("bg-background", field.className);
+  let input;
+  if (DEBOUNCED_TYPES.has(field.type)) {
+    input = /* @__PURE__ */ jsx(
+      DebouncedFilterField,
+      {
+        field,
+        value,
+        onChange,
+        debounceMs,
+        control,
+        className: inputClassName
+      }
+    );
+  } else {
+    const common = {
+      field,
+      control,
+      fieldPath: field.name,
+      value,
+      onChange,
+      className: inputClassName
+    };
+    switch (field.type) {
+      case "select":
+        input = /* @__PURE__ */ jsx(SelectField, { ...common });
+        break;
+      case "autocomplete":
+        input = /* @__PURE__ */ jsx(AutocompleteField, { ...common });
+        break;
+      case "checkbox":
+        input = /* @__PURE__ */ jsx(CheckboxField, { ...common });
+        break;
+      case "switch":
+        input = /* @__PURE__ */ jsx(SwitchField, { ...common });
+        break;
+      case "radio":
+        input = /* @__PURE__ */ jsx(RadioField, { ...common });
+        break;
+      case "date":
+        input = /* @__PURE__ */ jsx(DateField, { ...common });
+        break;
+      case "date_picker":
+        input = /* @__PURE__ */ jsx(DatePickerField, { ...common });
+        break;
+      case "date_range":
+        input = /* @__PURE__ */ jsx(DateRangePickerField, { ...common });
+        break;
+      case "date_time":
+        input = /* @__PURE__ */ jsx(DateTimePickerField, { ...common });
+        break;
+      case "date_time_range":
+        input = /* @__PURE__ */ jsx(DateTimeRangePickerField, { ...common });
+        break;
+      case "month":
+        input = /* @__PURE__ */ jsx(MonthPickerField, { ...common });
+        break;
+      case "month_range":
+        input = /* @__PURE__ */ jsx(MonthRangePickerField, { ...common });
+        break;
+      case "time":
+        input = /* @__PURE__ */ jsx(TimePickerField, { ...common });
+        break;
+      case "time_range":
+        input = /* @__PURE__ */ jsx(TimeRangePickerField, { ...common });
+        break;
+      case "file":
+        input = /* @__PURE__ */ jsx(FileField, { ...common });
+        break;
+      default:
+        input = /* @__PURE__ */ jsx(
+          DebouncedFilterField,
+          {
+            field,
+            value,
+            onChange,
+            debounceMs,
+            control,
+            className: inputClassName
+          }
+        );
+    }
+  }
+  const labelText = typeof field.label === "string" ? field.label.trim() : field.label;
+  const showLabel = field.labelPlacement !== "hidden" && labelText != null && labelText !== "" && field.type !== "checkbox" && field.type !== "switch";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn$1(
+        "w-full space-y-1 sm:w-auto sm:min-w-[180px]",
+        field.wrapperClassName
+      ),
+      children: [
+        showLabel && /* @__PURE__ */ jsx(Label$2, { htmlFor: field.name, className: "text-xs text-muted-foreground", children: field.label }),
+        input
+      ]
+    }
+  );
+}
+const DATE_TYPES = /* @__PURE__ */ new Set([
+  "date",
+  "date_picker",
+  "month",
+  "time",
+  "date_time"
+]);
+const RANGE_TYPES = /* @__PURE__ */ new Set([
+  "date_range",
+  "date_time_range",
+  "month_range",
+  "time_range"
+]);
+const SKIP_TYPES = /* @__PURE__ */ new Set(["object", "array", "custom_field", "hidden"]);
+const isEmpty = (v) => v === null || v === void 0 || v === "";
+const toIso = (v) => {
+  const d = v instanceof Date ? v : new Date(v);
+  return Number.isNaN(d.getTime()) ? null : d.toISOString();
+};
+const fromIso = (raw) => {
+  const d = new Date(raw);
+  return Number.isNaN(d.getTime()) ? null : d;
+};
+const recoverOptionValue = (field, raw) => {
+  var _a2;
+  const match2 = (_a2 = field.options) == null ? void 0 : _a2.find((o2) => String(o2.value) === raw);
+  return match2 ? match2.value : raw;
+};
+const coerceScalar = (raw) => raw !== "" && !Number.isNaN(Number(raw)) ? Number(raw) : raw;
+function serializeAll(fields, values) {
+  const params = {};
+  for (const field of fields) {
+    if (SKIP_TYPES.has(field.type)) continue;
+    const name = field.name;
+    const value = values[name];
+    if (RANGE_TYPES.has(field.type)) {
+      const range = value;
+      const from = range && !isEmpty(range.from) ? toIso(range.from) : null;
+      const to = range && !isEmpty(range.to) ? toIso(range.to) : null;
+      if (from) params[`${name}_from`] = from;
+      if (to) params[`${name}_to`] = to;
+      continue;
+    }
+    if (isEmpty(value)) continue;
+    if (Array.isArray(value)) {
+      const arr = value.filter((v) => !isEmpty(v)).map((v) => String(v));
+      if (arr.length) params[name] = arr;
+      continue;
+    }
+    if (DATE_TYPES.has(field.type)) {
+      const iso = toIso(value);
+      if (iso) params[name] = iso;
+      continue;
+    }
+    params[name] = String(value);
+  }
+  return params;
+}
+function deserializeAll(fields, params) {
+  const result = {};
+  const first = (v) => Array.isArray(v) ? v[0] : v;
+  for (const field of fields) {
+    if (SKIP_TYPES.has(field.type)) continue;
+    const name = field.name;
+    if (RANGE_TYPES.has(field.type)) {
+      const from = first(params[`${name}_from`]);
+      const to = first(params[`${name}_to`]);
+      const range = {};
+      if (from) {
+        const d = fromIso(from);
+        if (d) range.from = d;
+      }
+      if (to) {
+        const d = fromIso(to);
+        if (d) range.to = d;
+      }
+      if (range.from || range.to) result[name] = range;
+      continue;
+    }
+    const raw = params[name];
+    if (raw === void 0) continue;
+    if (field.multiple || Array.isArray(raw)) {
+      const arr = (Array.isArray(raw) ? raw : [raw]).map(coerceScalar);
+      result[name] = arr;
+      continue;
+    }
+    const value = raw;
+    switch (field.type) {
+      case "number":
+        if (value !== "" && !Number.isNaN(Number(value)))
+          result[name] = Number(value);
+        break;
+      case "checkbox":
+      case "switch":
+        result[name] = value === "true";
+        break;
+      case "select":
+      case "radio":
+        result[name] = recoverOptionValue(field, value);
+        break;
+      case "autocomplete":
+        result[name] = coerceScalar(value);
+        break;
+      default:
+        if (DATE_TYPES.has(field.type)) {
+          const d = fromIso(value);
+          if (d) result[name] = d;
+        } else {
+          result[name] = value;
+        }
+    }
+  }
+  return result;
+}
+const nativeAdapter = {
+  read: () => {
+    if (typeof window === "undefined") return {};
+    const usp = new URLSearchParams(window.location.search);
+    const out = {};
+    for (const key of usp.keys()) {
+      if (key in out) continue;
+      const all = usp.getAll(key);
+      out[key] = all.length > 1 ? all : all[0];
+    }
+    return out;
+  },
+  write: (params) => {
+    if (typeof window === "undefined") return;
+    const usp = new URLSearchParams();
+    for (const [key, value] of Object.entries(params)) {
+      if (Array.isArray(value))
+        value.forEach((v) => {
+          usp.append(key, v);
+        });
+      else usp.append(key, value);
+    }
+    const query = usp.toString();
+    const url = query ? `${window.location.pathname}?${query}` : window.location.pathname;
+    window.history.replaceState(null, "", url);
+  }
+};
+function useDataTableHeaderUrl({
+  enabled,
+  fields,
+  values,
+  adapter,
+  onHydrate
+}) {
+  const hydratedRef = useRef(false);
+  const lastWrittenRef = useRef(null);
+  useEffect(() => {
+    if (!enabled || hydratedRef.current) return;
+    hydratedRef.current = true;
+    const params = adapter.read();
+    const hydrated = deserializeAll(fields, params);
+    lastWrittenRef.current = JSON.stringify(serializeAll(fields, hydrated));
+    if (Object.keys(hydrated).length) onHydrate(hydrated);
+  }, [enabled]);
+  useEffect(() => {
+    if (!enabled) return;
+    const params = serializeAll(fields, values);
+    const serialized = JSON.stringify(params);
+    if (serialized === lastWrittenRef.current) return;
+    lastWrittenRef.current = serialized;
+    adapter.write(params);
+  }, [enabled, values]);
+}
+function useFilterControl() {
+  const { control } = useForm();
+  return control;
+}
+function DataTableHeader({
+  fields,
+  values,
+  onChange,
+  onChangeAll,
+  debounceMs = 400,
+  url = false,
+  actions = [],
+  onRefresh,
+  children,
+  className,
+  filtersClassName,
+  actionsClassName
+}) {
+  const control = useFilterControl();
+  const adapter = url === true ? nativeAdapter : url || nativeAdapter;
+  const handleHydrate = useCallback(
+    (next) => {
+      if (onChangeAll) {
+        onChangeAll({ ...values, ...next });
+        return;
+      }
+      for (const [name, value] of Object.entries(next)) onChange(name, value);
+    },
+    // `values` intentionally omitted: hydration runs once on mount and we don't
+    // want to re-bind to every value change.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [onChange, onChangeAll]
+  );
+  useDataTableHeaderUrl({
+    enabled: url !== false,
+    fields,
+    values,
+    adapter,
+    onHydrate: handleHydrate
+  });
+  const renderActionButton = (action, key) => {
+    if (action.element)
+      return /* @__PURE__ */ jsx(React__default.Fragment, { children: action.element }, key);
+    const content = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+      action.icon && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn$1(action.iconPosition === "right" ? "order-last" : ""),
+          children: action.icon
+        }
+      ),
+      action.label
+    ] });
+    return /* @__PURE__ */ jsx(
+      Button$1,
+      {
+        size: "sm",
+        variant: action.variant ?? "default",
+        disabled: action.disabled,
+        onClick: action.onClick,
+        className: "h-8",
+        children: content
+      },
+      key
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn$1("flex items-start justify-between gap-3", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn$1(
+              "flex min-w-0 flex-1 flex-wrap items-end gap-2",
+              filtersClassName
+            ),
+            children: fields.map((field) => /* @__PURE__ */ jsx(
+              FilterFieldRenderer,
+              {
+                field,
+                value: values[field.name],
+                onChange: (value) => onChange(field.name, value),
+                debounceMs,
+                control
+              },
+              field.name
+            ))
+          }
+        ),
+        children,
+        (actions.length > 0 || onRefresh) && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn$1(
+              "flex shrink-0 flex-nowrap items-center gap-2",
+              actionsClassName
+            ),
+            children: [
+              onRefresh && /* @__PURE__ */ jsxs(
+                Button$1,
+                {
+                  variant: "outline",
+                  size: "sm",
+                  onClick: onRefresh,
+                  className: "h-8",
+                  title: "Refresh",
+                  children: [
+                    /* @__PURE__ */ jsx(RefreshCw, { className: "h-4 w-4" }),
+                    " Refresh"
+                  ]
+                }
+              ),
+              actions.map((action) => renderActionButton(action, action.key))
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 const MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
   const [isMobile, setIsMobile] = React.useState(
@@ -67031,12 +67496,14 @@ export {
   ContextMenuTrigger,
   DataTable,
   DataTableColumnHeader,
+  DataTableHeader,
   DataTablePagination,
   DataTableViewOptions,
   DatePicker,
   DateRangePicker,
   DateTimePicker,
   DateTimeRangePicker,
+  DebouncedFilterField,
   Dialog,
   DialogClose,
   DialogContent,
@@ -67074,6 +67541,7 @@ export {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
   FileUploader,
+  FilterFieldRenderer,
   Form,
   FormBuilder,
   FormBuilderActions,
@@ -67243,11 +67711,14 @@ export {
   createSection,
   createStorage,
   createTokenManager,
+  deserializeAll,
   dotAccessor,
   evaluatePermissionRule,
   expandPermissions,
   expandRoles,
+  nativeAdapter,
   navigationMenuTriggerStyle,
+  serializeAll,
   toast,
   toggleVariants,
   transformers,
@@ -67263,8 +67734,10 @@ export {
   useAuthToken,
   useAuthUser,
   useCan,
+  useDataTableHeaderUrl,
   useDialog,
   useDialogController,
+  useFilterControl,
   useFormBuilder,
   useFormField,
   useIsAuthenticated,

package/dist/kit/builder/data-table/components/DataTable.d.ts

@@ -1,4 +1,5 @@
 import { ColumnDef, ColumnFiltersState, PaginationState, Table as ReactTable, SortingState, VisibilityState } from '@tanstack/react-table';
+import { UseFormReturn } from 'react-hook-form';
 import { DataTableAction, DataTableBatchAction, DataTableFiltersProp } from '../types';
 import * as React from 'react';
 export interface DataTableProps<TData, TValue> {
@@ -25,6 +26,7 @@ export interface DataTableProps<TData, TValue> {
     formFilters?: DataTableFiltersProp;
     formFilterValues?: Record<string, unknown> | null;
     onFormFilterChange?: (values: Record<string, unknown>) => void;
+    formFilterForm?: UseFormReturn<any>;
     selectable?: boolean;
     actions?: DataTableAction[];
     batchActions?: DataTableBatchAction<TData>[];
@@ -40,5 +42,5 @@ export interface DataTableProps<TData, TValue> {
      */
     CustomHeaderComponent?: () => React.ReactNode;
 }
-export declare function DataTable<TData, TValue>({ columns, data, loading, sorting, sortingState, onSortingChange, columnFilters, columnFiltersState, onColumnFiltersChange, rowCount, pagination, paginationVariant, onPaginationChange, paginationState, columnVisibility, columnVisibilityState, onColumnVisibilityChange, onTable, className, emptyText, formFilters, formFilterValues, onFormFilterChange, selectable, actions, batchActions, showStandardActions, onRefresh, onRowClick, filterWrapper, filterTitle, filterShowActionsSeparator, CustomHeaderComponent, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<TData, TValue>({ columns, data, loading, sorting, sortingState, onSortingChange, columnFilters, columnFiltersState, onColumnFiltersChange, rowCount, pagination, paginationVariant, onPaginationChange, paginationState, columnVisibility, columnVisibilityState, onColumnVisibilityChange, onTable, className, emptyText, formFilterForm, formFilters, formFilterValues, onFormFilterChange, selectable, actions, batchActions, showStandardActions, onRefresh, onRowClick, filterWrapper, filterTitle, filterShowActionsSeparator, CustomHeaderComponent, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DataTable.d.ts.map

package/dist/kit/builder/data-table/components/DataTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../../../src/kit/builder/data-table/components/DataTable.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../../../src/kit/builder/data-table/components/DataTable.tsx"],"names":[],"mappings":"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"}

package/dist/kit/components/data-table-headers/DataTableHeader.d.ts

@@ -0,0 +1,25 @@
+import { DataTableHeaderProps } from './types';
+/**
+ * A plug-in replacement for the DataTable's default filter + actions header.
+ *
+ * Plug it into `DataTable`'s `CustomHeaderComponent`:
+ *```
+ *   <DataTable
+ *     CustomHeaderComponent={() => (
+ *       <DataTableHeader
+ *         fields={filterFields}
+ *         values={filtersState} // owned by your list hook
+ *         onChange={setFilter} // updates that same state
+ *         actions={[addAction, refreshAction]}
+ *       />
+ *     )}
+ *   />
+ *```
+ * Unlike the default FormBuilder-based filter, this header holds NO filter data
+ * of its own — `values` is the single source of truth, so the UI can never
+ * drift from what is sent to the API. Filters apply on every change (no
+ * Apply/Clear); free-typing inputs are debounced internally.
+ */
+export declare function DataTableHeader({ fields, values, onChange, onChangeAll, debounceMs, url, actions, onRefresh, children, className, filtersClassName, actionsClassName, }: DataTableHeaderProps): import("react/jsx-runtime").JSX.Element;
+export default DataTableHeader;
+//# sourceMappingURL=DataTableHeader.d.ts.map