@designa8/vibedesign-stripe-deepseek-85ea 0.2.3 → 0.2.4

package/README.md

@@ -1,6 +1,6 @@
 # @designa8/vibedesign-stripe-deepseek-85ea
 
-Complete design system generated by Atoms Design, version **0.2.3**.
+Complete design system generated by Atoms Design, version **0.2.4**.
 Tokens, atoms, molecules, organisms, and templates — import from the package root;
 never hardcode visual values in consumer code.
 

package/dist/index.cjs

@@ -5032,6 +5032,7 @@ function DataTableDesktopInner(props, ref) {
     onFilterChange,
     filterBy,
     searchPlaceholder,
+    searchable = true,
     query,
     onQueryChange,
     searchBy,
@@ -5195,6 +5196,7 @@ function DataTableDesktopInner(props, ref) {
   const headCell = HEAD_CELL;
   const bodyCell = dense ? "px-sm py-sm align-middle text-body-sm" : "px-sm py-md align-middle";
   const rangeTriggerLabel = activeRange?.detail ?? activeRange?.label ?? "";
+  const showToolRow = searchable || activeFilters.length > 0 || Boolean(activeRange) || Boolean(toolbar);
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "div",
     {
@@ -5210,8 +5212,8 @@ function DataTableDesktopInner(props, ref) {
             title ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-body-lg text-ink", children: title }) : null,
             description ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-body-sm text-muted", children: description }) : null
           ] }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-wrap items-center gap-sm", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-full shrink-0 sm:w-64", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          showToolRow ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-wrap items-center gap-sm", children: [
+            searchable ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-full shrink-0 sm:w-64", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               Input,
               {
                 size: "md",
@@ -5222,7 +5224,7 @@ function DataTableDesktopInner(props, ref) {
                 placeholder: searchPlaceholder ?? "Search",
                 leading: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon, { name: "search", size: 16, strokeWidth: 2, tone: "default" })
               }
-            ) }),
+            ) }) : null,
             activeFilters.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex flex-wrap items-center gap-xs", children: activeFilters.map((item) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
               Chip,
               {
@@ -5278,7 +5280,7 @@ function DataTableDesktopInner(props, ref) {
               }
             ) }) : null,
             toolbar ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "ml-auto flex shrink-0 items-center gap-xs", children: toolbar }) : null
-          ] })
+          ] }) : null
         ] }),
         activeRange && typeof document !== "undefined" ? (0, import_react_dom2.createPortal)(
           /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
@@ -5704,6 +5706,7 @@ function DataTableMobileInner(props, ref) {
     onFilterChange,
     filterBy,
     searchPlaceholder,
+    searchable = true,
     query,
     onQueryChange,
     searchBy,
@@ -5790,6 +5793,10 @@ function DataTableMobileInner(props, ref) {
   const subtitleText = activeSpec?.subtitle;
   const trailingText = activeSpec?.trailing;
   const metaText = activeSpec?.meta;
+  const hasRanges = Boolean(ranges && ranges.length > 0);
+  const hasHeader = Boolean(
+    title || description || searchable || activeFilters.length > 0 || hasRanges || toolbar
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "div",
     {
@@ -5800,12 +5807,12 @@ function DataTableMobileInner(props, ref) {
       ),
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex w-full flex-col gap-base px-lg pt-lg pb-base", children: [
+        hasHeader ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex w-full flex-col gap-base px-lg pt-lg pb-base", children: [
           title || description ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col gap-xs", children: [
             title ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-body-lg text-ink", children: title }) : null,
             description ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-body-sm text-muted", children: description }) : null
           ] }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          searchable ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "div",
             {
               className: cn24(
@@ -5830,7 +5837,7 @@ function DataTableMobileInner(props, ref) {
                 }
               )
             }
-          ),
+          ) : null,
           activeFilters.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex flex-wrap items-center gap-xs", children: activeFilters.map((item) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
             Chip,
             {
@@ -5845,7 +5852,7 @@ function DataTableMobileInner(props, ref) {
             },
             item.value
           )) }) : null,
-          ranges && ranges.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex flex-wrap items-center gap-base", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          hasRanges && ranges ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex flex-wrap items-center gap-base", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             FilterPill,
             {
               menuLabel: "Date range",
@@ -5858,7 +5865,7 @@ function DataTableMobileInner(props, ref) {
             }
           ) }) : null,
           toolbar ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex flex-wrap items-center gap-xs", children: toolbar }) : null
-        ] }),
+        ] }) : null,
         bulkActions && selected.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-wrap items-center gap-sm border-t border-hairline bg-surface-soft px-lg py-sm", children: [
           /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: "text-body-sm text-ink", children: [
             selected.length,
@@ -6013,6 +6020,7 @@ function DataTableInner(props, ref) {
     onFilterChange,
     filterBy,
     searchPlaceholder,
+    searchable,
     query,
     onQueryChange,
     searchBy,
@@ -6074,6 +6082,7 @@ function DataTableInner(props, ref) {
     onFilterChange: handleFilter,
     filterBy,
     searchPlaceholder,
+    searchable,
     query: activeQuery,
     onQueryChange: handleQuery,
     searchBy,

package/dist/index.js

@@ -4895,6 +4895,7 @@ function DataTableDesktopInner(props, ref) {
     onFilterChange,
     filterBy,
     searchPlaceholder,
+    searchable = true,
     query,
     onQueryChange,
     searchBy,
@@ -5058,6 +5059,7 @@ function DataTableDesktopInner(props, ref) {
   const headCell = HEAD_CELL;
   const bodyCell = dense ? "px-sm py-sm align-middle text-body-sm" : "px-sm py-md align-middle";
   const rangeTriggerLabel = activeRange?.detail ?? activeRange?.label ?? "";
+  const showToolRow = searchable || activeFilters.length > 0 || Boolean(activeRange) || Boolean(toolbar);
   return /* @__PURE__ */ jsxs26(
     "div",
     {
@@ -5073,8 +5075,8 @@ function DataTableDesktopInner(props, ref) {
             title ? /* @__PURE__ */ jsx29("p", { className: "text-body-lg text-ink", children: title }) : null,
             description ? /* @__PURE__ */ jsx29("p", { className: "text-body-sm text-muted", children: description }) : null
           ] }) : null,
-          /* @__PURE__ */ jsxs26("div", { className: "flex flex-wrap items-center gap-sm", children: [
-            /* @__PURE__ */ jsx29("div", { className: "w-full shrink-0 sm:w-64", children: /* @__PURE__ */ jsx29(
+          showToolRow ? /* @__PURE__ */ jsxs26("div", { className: "flex flex-wrap items-center gap-sm", children: [
+            searchable ? /* @__PURE__ */ jsx29("div", { className: "w-full shrink-0 sm:w-64", children: /* @__PURE__ */ jsx29(
               Input,
               {
                 size: "md",
@@ -5085,7 +5087,7 @@ function DataTableDesktopInner(props, ref) {
                 placeholder: searchPlaceholder ?? "Search",
                 leading: /* @__PURE__ */ jsx29(Icon, { name: "search", size: 16, strokeWidth: 2, tone: "default" })
               }
-            ) }),
+            ) }) : null,
             activeFilters.length > 0 ? /* @__PURE__ */ jsx29("div", { className: "flex flex-wrap items-center gap-xs", children: activeFilters.map((item) => /* @__PURE__ */ jsxs26(
               Chip,
               {
@@ -5141,7 +5143,7 @@ function DataTableDesktopInner(props, ref) {
               }
             ) }) : null,
             toolbar ? /* @__PURE__ */ jsx29("div", { className: "ml-auto flex shrink-0 items-center gap-xs", children: toolbar }) : null
-          ] })
+          ] }) : null
         ] }),
         activeRange && typeof document !== "undefined" ? createPortal5(
           /* @__PURE__ */ jsx29(
@@ -5567,6 +5569,7 @@ function DataTableMobileInner(props, ref) {
     onFilterChange,
     filterBy,
     searchPlaceholder,
+    searchable = true,
     query,
     onQueryChange,
     searchBy,
@@ -5653,6 +5656,10 @@ function DataTableMobileInner(props, ref) {
   const subtitleText = activeSpec?.subtitle;
   const trailingText = activeSpec?.trailing;
   const metaText = activeSpec?.meta;
+  const hasRanges = Boolean(ranges && ranges.length > 0);
+  const hasHeader = Boolean(
+    title || description || searchable || activeFilters.length > 0 || hasRanges || toolbar
+  );
   return /* @__PURE__ */ jsxs27(
     "div",
     {
@@ -5663,12 +5670,12 @@ function DataTableMobileInner(props, ref) {
       ),
       ...rest,
       children: [
-        /* @__PURE__ */ jsxs27("div", { className: "flex w-full flex-col gap-base px-lg pt-lg pb-base", children: [
+        hasHeader ? /* @__PURE__ */ jsxs27("div", { className: "flex w-full flex-col gap-base px-lg pt-lg pb-base", children: [
           title || description ? /* @__PURE__ */ jsxs27("div", { className: "flex flex-col gap-xs", children: [
             title ? /* @__PURE__ */ jsx30("p", { className: "text-body-lg text-ink", children: title }) : null,
             description ? /* @__PURE__ */ jsx30("p", { className: "text-body-sm text-muted", children: description }) : null
           ] }) : null,
-          /* @__PURE__ */ jsx30(
+          searchable ? /* @__PURE__ */ jsx30(
             "div",
             {
               className: cn24(
@@ -5693,7 +5700,7 @@ function DataTableMobileInner(props, ref) {
                 }
               )
             }
-          ),
+          ) : null,
           activeFilters.length > 0 ? /* @__PURE__ */ jsx30("div", { className: "flex flex-wrap items-center gap-xs", children: activeFilters.map((item) => /* @__PURE__ */ jsxs27(
             Chip,
             {
@@ -5708,7 +5715,7 @@ function DataTableMobileInner(props, ref) {
             },
             item.value
           )) }) : null,
-          ranges && ranges.length > 0 ? /* @__PURE__ */ jsx30("div", { className: "flex flex-wrap items-center gap-base", children: /* @__PURE__ */ jsx30(
+          hasRanges && ranges ? /* @__PURE__ */ jsx30("div", { className: "flex flex-wrap items-center gap-base", children: /* @__PURE__ */ jsx30(
             FilterPill,
             {
               menuLabel: "Date range",
@@ -5721,7 +5728,7 @@ function DataTableMobileInner(props, ref) {
             }
           ) }) : null,
           toolbar ? /* @__PURE__ */ jsx30("div", { className: "flex flex-wrap items-center gap-xs", children: toolbar }) : null
-        ] }),
+        ] }) : null,
         bulkActions && selected.length > 0 ? /* @__PURE__ */ jsxs27("div", { className: "flex flex-wrap items-center gap-sm border-t border-hairline bg-surface-soft px-lg py-sm", children: [
           /* @__PURE__ */ jsxs27("span", { className: "text-body-sm text-ink", children: [
             selected.length,
@@ -5876,6 +5883,7 @@ function DataTableInner(props, ref) {
     onFilterChange,
     filterBy,
     searchPlaceholder,
+    searchable,
     query,
     onQueryChange,
     searchBy,
@@ -5937,6 +5945,7 @@ function DataTableInner(props, ref) {
     onFilterChange: handleFilter,
     filterBy,
     searchPlaceholder,
+    searchable,
     query: activeQuery,
     onQueryChange: handleQuery,
     searchBy,

package/dist/styles.css

@@ -3461,6 +3461,11 @@
       width: calc(var(--spacing) * 64);
     }
   }
+  .sm\:w-80 {
+    @media (width >= 640px) {
+      width: calc(var(--spacing) * 80);
+    }
+  }
   .sm\:grid-cols-2 {
     @media (width >= 640px) {
       grid-template-columns: repeat(2, minmax(0, 1fr));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designa8/vibedesign-stripe-deepseek-85ea",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Complete design system \"My Project stripe-deepseek\" generated by Atoms Design.",
   "main": "dist/index.cjs",
   "module": "dist/index.js",

package/src/atoms/DataTable/DataTable.tsx

@@ -38,6 +38,12 @@ export interface DataTableProps<T extends DataTableBaseRow = DataTableBaseRow>
   onFilterChange?: (value: string) => void;
   filterBy?: (row: T, value: string) => boolean;
   searchPlaceholder?: string;
+  /**
+   * Renders the built-in search field in both layouts. Defaults to true. Set
+   * it to false when the page already owns a global search bar: `query` and
+   * `searchBy` keep filtering exactly the same, only the field is left out.
+   */
+  searchable?: boolean;
   query?: string;
   onQueryChange?: (value: string) => void;
   searchBy?: (row: T) => string;
@@ -96,6 +102,7 @@ function DataTableInner<T extends DataTableBaseRow>(
     onFilterChange,
     filterBy,
     searchPlaceholder,
+    searchable,
     query,
     onQueryChange,
     searchBy,
@@ -167,6 +174,7 @@ function DataTableInner<T extends DataTableBaseRow>(
     onFilterChange: handleFilter,
     filterBy,
     searchPlaceholder,
+    searchable,
     query: activeQuery,
     onQueryChange: handleQuery,
     searchBy,

package/src/atoms/DataTable/preview.tsx

@@ -1,6 +1,8 @@
 import * as React from "react";
 import { Badge } from "../Badge";
 import { Button } from "../Button";
+import { Icon } from "../Icon";
+import { Input } from "../Input";
 import { DataTable } from "./DataTable";
 import type { DataTableColumn, DataTableFilter, DataTableRange } from "./DataTable";
 
@@ -148,6 +150,7 @@ export default function Preview() {
   const [selected, setSelected] = React.useState<string[]>([]);
   const [filter, setFilter] = React.useState("all");
   const [query, setQuery] = React.useState("");
+  const [pageQuery, setPageQuery] = React.useState("");
 
   return (
     <div className="w-full max-w-5xl mx-auto p-lg space-y-lg bg-canvas">
@@ -221,6 +224,46 @@ export default function Preview() {
         selectable={false}
         mobileRow={mobileRow}
       />
+
+      <div className="flex w-full flex-col gap-md">
+        <div className="flex w-full flex-col gap-xs">
+          <p className="text-body-lg text-ink">Page-level search</p>
+          <p className="text-body-sm text-muted">
+            The table renders no field of its own, but the controlled query
+            still filters both layouts.
+          </p>
+        </div>
+
+        <div className="w-full sm:w-80">
+          <Input
+            size="md"
+            type="search"
+            value={pageQuery}
+            onChange={(event) => setPageQuery(event.target.value)}
+            ariaLabel="Search all invoices"
+            placeholder="Search all invoices"
+            leading={<Icon name="search" size={16} strokeWidth={2} tone="default" />}
+          />
+        </div>
+
+        <DataTable<Invoice>
+          columns={columns}
+          rows={invoices}
+          searchable={false}
+          query={pageQuery}
+          onQueryChange={setPageQuery}
+          searchBy={(row) => `${row.id} ${row.customer}`}
+          filters={filters.slice(0, 1)}
+          pageSize={5}
+          mobilePageSize={4}
+          itemLabel="invoices"
+          dense
+          selectable={false}
+          mobileRow={mobileRow}
+          emptyTitle="Nothing matches that search"
+          emptyDescription="Try a customer name or an invoice number."
+        />
+      </div>
     </div>
   );
 }

package/src/atoms/DataTableDesktop/DataTableDesktop.tsx

@@ -226,6 +226,12 @@ export interface DataTableDesktopProps<
   /** Row predicate for the active filter. `"all"` always shows everything. */
   filterBy?: (row: T, value: string) => boolean;
   searchPlaceholder?: string;
+  /**
+   * Renders the built-in search field. Defaults to true. Set it to false when
+   * the page already owns a global search bar: `query` and `searchBy` keep
+   * filtering exactly the same, only the field is left out.
+   */
+  searchable?: boolean;
   /** Controlled search text. */
   query?: string;
   onQueryChange?: (value: string) => void;
@@ -277,6 +283,7 @@ function DataTableDesktopInner<T extends DataTableBaseRow>(
     onFilterChange,
     filterBy,
     searchPlaceholder,
+    searchable = true,
     query,
     onQueryChange,
     searchBy,
@@ -505,6 +512,10 @@ function DataTableDesktopInner<T extends DataTableBaseRow>(
 
   const rangeTriggerLabel = activeRange?.detail ?? activeRange?.label ?? "";
 
+  /** The tool row is only worth its vertical space when it holds something. */
+  const showToolRow =
+    searchable || activeFilters.length > 0 || Boolean(activeRange) || Boolean(toolbar);
+
   return (
     <div
       ref={ref}
@@ -526,89 +537,93 @@ function DataTableDesktopInner<T extends DataTableBaseRow>(
           </div>
         ) : null}
 
-        <div className="flex flex-wrap items-center gap-sm">
-          <div className="w-full shrink-0 sm:w-64">
-            <Input
-              size="md"
-              type="search"
-              value={activeQuery}
-              onChange={(event) => applyQuery(event.target.value)}
-              ariaLabel={searchPlaceholder ?? "Search table"}
-              placeholder={searchPlaceholder ?? "Search"}
-              leading={
-                <Icon name="search" size={16} strokeWidth={2} tone="default" />
-              }
-            />
-          </div>
-
-          {activeFilters.length > 0 ? (
-            <div className="flex flex-wrap items-center gap-xs">
-              {activeFilters.map((item) => (
-                <Chip
-                  key={item.value}
-                  appearance="outline"
+        {showToolRow ? (
+          <div className="flex flex-wrap items-center gap-sm">
+            {searchable ? (
+              <div className="w-full shrink-0 sm:w-64">
+                <Input
                   size="md"
-                  selected={activeFilter === item.value}
-                  onClick={() => applyFilter(item.value)}
-                >
-                  {item.label}
-                  {typeof item.count === "number" ? (
-                    <span className="ml-xs text-muted-soft">{item.count}</span>
-                  ) : null}
-                </Chip>
-              ))}
-            </div>
-          ) : null}
+                  type="search"
+                  value={activeQuery}
+                  onChange={(event) => applyQuery(event.target.value)}
+                  ariaLabel={searchPlaceholder ?? "Search table"}
+                  placeholder={searchPlaceholder ?? "Search"}
+                  leading={
+                    <Icon name="search" size={16} strokeWidth={2} tone="default" />
+                  }
+                />
+              </div>
+            ) : null}
 
-          {activeRange ? (
-            <div className="relative shrink-0">
-              <Button
-                ref={triggerRef}
-                variant="field-soft"
-                size="field"
-                className="w-auto"
-                aria-expanded={rangeOpen}
-                aria-controls={panelId}
-                aria-haspopup="menu"
-                aria-label={`Date range: ${rangeTriggerLabel}`}
-                onClick={() => {
-                  placePanel();
-                  setRangeOpen((value) => !value);
-                }}
-                leadingIcon={
-                  <Icon
-                    name="calendar"
-                    size={16}
-                    strokeWidth={1.75}
-                    tone="default"
-                  />
-                }
-                trailingIcon={
-                  <Icon
-                    name="chevron-down"
-                    size={16}
-                    strokeWidth={2}
-                    tone="muted"
-                    className={cn(
-                      "transition-transform duration-200 ease-out",
-                      rangeOpen && "rotate-180",
-                    )}
-                  />
-                }
-              >
-                <span className="whitespace-nowrap text-body-sm text-ink">
-                  {rangeTriggerLabel}
-                </span>
-              </Button>
-            </div>
-          ) : null}
+            {activeFilters.length > 0 ? (
+              <div className="flex flex-wrap items-center gap-xs">
+                {activeFilters.map((item) => (
+                  <Chip
+                    key={item.value}
+                    appearance="outline"
+                    size="md"
+                    selected={activeFilter === item.value}
+                    onClick={() => applyFilter(item.value)}
+                  >
+                    {item.label}
+                    {typeof item.count === "number" ? (
+                      <span className="ml-xs text-muted-soft">{item.count}</span>
+                    ) : null}
+                  </Chip>
+                ))}
+              </div>
+            ) : null}
 
-          {toolbar ? (
-            <div className="ml-auto flex shrink-0 items-center gap-xs">
-              {toolbar}
-            </div>
-          ) : null}
-        </div>
+            {activeRange ? (
+              <div className="relative shrink-0">
+                <Button
+                  ref={triggerRef}
+                  variant="field-soft"
+                  size="field"
+                  className="w-auto"
+                  aria-expanded={rangeOpen}
+                  aria-controls={panelId}
+                  aria-haspopup="menu"
+                  aria-label={`Date range: ${rangeTriggerLabel}`}
+                  onClick={() => {
+                    placePanel();
+                    setRangeOpen((value) => !value);
+                  }}
+                  leadingIcon={
+                    <Icon
+                      name="calendar"
+                      size={16}
+                      strokeWidth={1.75}
+                      tone="default"
+                    />
+                  }
+                  trailingIcon={
+                    <Icon
+                      name="chevron-down"
+                      size={16}
+                      strokeWidth={2}
+                      tone="muted"
+                      className={cn(
+                        "transition-transform duration-200 ease-out",
+                        rangeOpen && "rotate-180",
+                      )}
+                    />
+                  }
+                >
+                  <span className="whitespace-nowrap text-body-sm text-ink">
+                    {rangeTriggerLabel}
+                  </span>
+                </Button>
+              </div>
+            ) : null}
+
+            {toolbar ? (
+              <div className="ml-auto flex shrink-0 items-center gap-xs">
+                {toolbar}
+              </div>
+            ) : null}
+          </div>
+        ) : null}
       </div>
 
       {activeRange && typeof document !== "undefined"

package/src/atoms/DataTableMobile/DataTableMobile.tsx

@@ -121,6 +121,12 @@ export interface DataTableMobileProps<
   onFilterChange?: (value: string) => void;
   filterBy?: (row: T, value: string) => boolean;
   searchPlaceholder?: string;
+  /**
+   * Renders the built-in search field. Defaults to true. Set it to false when
+   * the page already owns a global search bar: `query` and `searchBy` keep
+   * filtering exactly the same, only the field is left out.
+   */
+  searchable?: boolean;
   query?: string;
   onQueryChange?: (value: string) => void;
   searchBy?: (row: T) => string;
@@ -310,6 +316,7 @@ function DataTableMobileInner<T extends DataTableMobileBaseRow>(
     onFilterChange,
     filterBy,
     searchPlaceholder,
+    searchable = true,
     query,
     onQueryChange,
     searchBy,
@@ -441,6 +448,13 @@ function DataTableMobileInner<T extends DataTableMobileBaseRow>(
   const trailingText = activeSpec?.trailing;
   const metaText = activeSpec?.meta;
 
+  const hasRanges = Boolean(ranges && ranges.length > 0);
+
+  /** Nothing to show above the list means no header block, and no dead space. */
+  const hasHeader = Boolean(
+    title || description || searchable || activeFilters.length > 0 || hasRanges || toolbar,
+  );
+
   return (
     <div
       ref={ref}
@@ -450,77 +464,83 @@ function DataTableMobileInner<T extends DataTableMobileBaseRow>(
       )}
       {...rest}
     >
-      <div className="flex w-full flex-col gap-base px-lg pt-lg pb-base">
-        {title || description ? (
-          <div className="flex flex-col gap-xs">
-            {title ? <p className="text-body-lg text-ink">{title}</p> : null}
-            {description ? (
-              <p className="text-body-sm text-muted">{description}</p>
-            ) : null}
-          </div>
-        ) : null}
-
-        <div
-          className={cn(
-            "flex min-h-12 w-full items-center gap-sm rounded-xl border px-base",
-            "border-hairline bg-canvas",
-            "transition duration-150 ease-out",
-            "focus-within:border-primary focus-within:ring-1 focus-within:ring-primary",
-          )}
-        >
-          <Input
-            chrome="embedded"
-            type="search"
-            value={activeQuery}
-            onChange={(event) => applyQuery(event.target.value)}
-            placeholder={searchPlaceholder ?? "Search"}
-            ariaLabel={searchPlaceholder ?? "Search table"}
-            autoComplete="off"
-            className="flex-1"
-            inputClassName="[&::-webkit-search-cancel-button]:appearance-none"
-            leading={
-              <Icon name="search" size={18} strokeWidth={2} tone="default" />
-            }
-          />
+      {hasHeader ? (
+        <div className="flex w-full flex-col gap-base px-lg pt-lg pb-base">
+          {title || description ? (
+            <div className="flex flex-col gap-xs">
+              {title ? <p className="text-body-lg text-ink">{title}</p> : null}
+              {description ? (
+                <p className="text-body-sm text-muted">{description}</p>
+              ) : null}
+            </div>
+          ) : null}
+
+          {searchable ? (
+            <div
+              className={cn(
+                "flex min-h-12 w-full items-center gap-sm rounded-xl border px-base",
+                "border-hairline bg-canvas",
+                "transition duration-150 ease-out",
+                "focus-within:border-primary focus-within:ring-1 focus-within:ring-primary",
+              )}
+            >
+              <Input
+                chrome="embedded"
+                type="search"
+                value={activeQuery}
+                onChange={(event) => applyQuery(event.target.value)}
+                placeholder={searchPlaceholder ?? "Search"}
+                ariaLabel={searchPlaceholder ?? "Search table"}
+                autoComplete="off"
+                className="flex-1"
+                inputClassName="[&::-webkit-search-cancel-button]:appearance-none"
+                leading={
+                  <Icon name="search" size={18} strokeWidth={2} tone="default" />
+                }
+              />
+            </div>
+          ) : null}
+
+          {activeFilters.length > 0 ? (
+            <div className="flex flex-wrap items-center gap-xs">
+              {activeFilters.map((item) => (
+                <Chip
+                  key={item.value}
+                  appearance="outline"
+                  size="md"
+                  selected={activeFilter === item.value}
+                  onClick={() => applyFilter(item.value)}
+                >
+                  {item.label}
+                  {typeof item.count === "number" ? (
+                    <span className="ml-xs text-muted-soft">{item.count}</span>
+                  ) : null}
+                </Chip>
+              ))}
+            </div>
+          ) : null}
+
+          {hasRanges && ranges ? (
+            <div className="flex flex-wrap items-center gap-base">
+              <FilterPill
+                menuLabel="Date range"
+                options={ranges.map((item) => ({
+                  value: item.value,
+                  label: item.detail
+                    ? `${item.label} · ${item.detail}`
+                    : item.label,
+                }))}
+                value={activeRange?.value ?? ranges[0].value}
+                onValueChange={applyRange}
+              />
+            </div>
+          ) : null}
+
+          {toolbar ? (
+            <div className="flex flex-wrap items-center gap-xs">{toolbar}</div>
+          ) : null}
         </div>
-
-        {activeFilters.length > 0 ? (
-          <div className="flex flex-wrap items-center gap-xs">
-            {activeFilters.map((item) => (
-              <Chip
-                key={item.value}
-                appearance="outline"
-                size="md"
-                selected={activeFilter === item.value}
-                onClick={() => applyFilter(item.value)}
-              >
-                {item.label}
-                {typeof item.count === "number" ? (
-                  <span className="ml-xs text-muted-soft">{item.count}</span>
-                ) : null}
-              </Chip>
-            ))}
-          </div>
-        ) : null}
-
-        {ranges && ranges.length > 0 ? (
-          <div className="flex flex-wrap items-center gap-base">
-            <FilterPill
-              menuLabel="Date range"
-              options={ranges.map((item) => ({
-                value: item.value,
-                label: item.detail ? `${item.label} · ${item.detail}` : item.label,
-              }))}
-              value={activeRange?.value ?? ranges[0].value}
-              onValueChange={applyRange}
-            />
-          </div>
-        ) : null}
-
-        {toolbar ? (
-          <div className="flex flex-wrap items-center gap-xs">{toolbar}</div>
-        ) : null}
-      </div>
+      ) : null}
 
       {bulkActions && selected.length > 0 ? (
         <div className="flex flex-wrap items-center gap-sm border-t border-hairline bg-surface-soft px-lg py-sm">